Koyarwar React — Lily Design System

Abin da za ka gina

Ƙaramin fom na tuntuɓa — fili mai lakabi, maɓallin aikawa, yanayin da ake sarrafawa, ainihin halayyar maɓallan rubutu da na'urar karanta allo — da farko ba tare da tsari ba, sannan da tsari, cikin kusan mintuna 10.

Kafin ka fara

Kana buƙatar git, Node 22 ko sabo, da pnpm 10 ko sabo. Kowane aikin React 18+ yana aiki — Next.js, Vite ko React mai sauƙi.

Mataki na 1 — Ɗauki lambar

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install
pnpm test        # vitest + @testing-library/react
pnpm run storybook   # browse all 571 components

Abubuwan fayiloli ne masu shimfiɗe a cikin components/ — Button.tsx, TextInput.tsx — kowanne da gwajinsa, story da takardunsa a gefensa. Kwafi fayilolin da kake buƙata zuwa app ɗinka, ko ɗauko ma'ajiyar ka shigo daga gare ta.

Mataki na 2 — Abu na farko naka

import Button from "lily-design-system-react-headless/components/Button";

export function SaveBar() {
  return <Button onClick={save}>Save</Button>;
}

Yana nuna <button class="button" type="button">. Props: type, disabled, pressed (yana nuna aria-pressed), label ( aria-label don gyara), className, kuma kowace ƙarin sifa tana yaɗuwa a kan sinadarin tushe.

Mataki na 3 — Haɗa ƙaramin fom

import { useState } from "react";
import Form from ".../components/Form";
import Field from ".../components/Field";
import TextInput from ".../components/TextInput";
import Button from ".../components/Button";

export function ContactForm() {
  const [name, setName] = useState("");
  return (
    <Form label="Contact form" onSubmit={handleSubmit}>
      <Field label="Full name" required>
        <TextInput id="name" label="Full name" value={name} onChange={setName} required />
      </Field>
      <Button type="submit">Save</Button>
    </Form>
  );
}

Field yana ɗaukar label a matsayin prop nasa maimakon abin lakabi da aka saka a ciki — ka ba shi sau ɗaya, a kan Fieldda TextInputmai dacewa na label yana ba da suna mai sauƙin isa.

An tabbatar a 2026-08-29: wani daftarin da ya gabata ya saka wani abu Label a cikin Field, wanda ya nuna lakabi biyu (ɗaya fanko) saboda Field tuni yana nuna nasa daga shigarwar label prop — an gano ta hanyar haɗa ainihin gutsuren. Hanyar Hanyar fom ɗin tuntuɓa da aka haɗa tsari ɗaya ne, wanda aka gwada da ainihin gwaje-gwajen e2e da axe.

Mataki na 4 — Ba shi tsari

Komai da ke sama ana zana shi a matsayin tsari tsantsa, a shirye don salonka. Ba ƙugiyoyin tsari — .button, .text-input, .label, .field — a takardar salonka, shimfiɗa kayan aikin Tailwind ta className, ko haɗa jigon da aka shirya:

<link rel="stylesheet" href="/themes/united-states-web-design-system.css" />

Mataki na 5 — Kalli komai yana aiki

App ɗin misali na Next.js shi ne cikakken kundin da tsari da nunawa, tare da Playwright e2e da tushen axe-core:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-next-examples
pnpm install && pnpm run dev

Matakai na gaba

Jigogi — sauyawa lokacin aiki da mai taimakon theme-picker na React.
Masu taimakon abubuwan so — harshe da girman rubutu.
Kundin abubuwa — siffofi, ARIA da maɓallan rubutu ga kowane abu.

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.