Lily Design System™

Teagasc React

Comhpháirteanna feidhme clóscríofa, comhad amháin an ceann, arna rialú leis an patrún caighdeánach value + onChange — oibríonn gach rud mar a oibríonn React cheana féin.

An rud a thógfaidh tú

Foirm theagmhála bheag — réimse le lipéad, cnaipe cur isteach, staid rialaithe, fíor-iompar méarchláir agus léitheora scáileáin — nocht ar dtús, ansin stíl-chóirithe, i thart ar 10 nóiméad.

Sula dtosaíonn tú

Tá git, Node 22 nó níos nuaí, agus pnpm 10 nó níos nuaí ag teastáil uait. Oibríonn aon tionscadal React 18+ — Next.js, Vite nó React simplí.

Céim 1 — Faigh an cód

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

Is comhaid chothroma iad na comhpháirteanna i components/ — Button.tsx, TextInput.tsx — gach ceann lena thástáil, scéal agus doiciméadú taobh leis. Cóipeáil na comhaid atá ag teastáil isteach i d'app, nó tarraing an stóras isteach agus iompórtáil uaidh.

Céim 2 — Do chéad chomhpháirt

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

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

Rindreálann <button class="button" type="button">. Props: type, disabled, pressed (rindreálann aria-pressed), label ( aria-label chun sárú), className, agus scaipeann aon aitreabúid bhreise ar an eilimint fhréimhe.

Céim 3 — Cuir foirm bheag le chéile

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 glacann sé leis an label mar phrop dá chuid féin in ionad comhpháirt lipéid neadaithe — pas é uair amháin, ar Fieldagus TextInputcomhfhreagrach ó label soláthraíonn an t-ainm inrochtana.

Fíoraithe 2026-08-29: chuir dréacht roimhe sin comhpháirt Label taobh istigh de Field, rud a rindreáil dhá lipéad (ceann amháin folamh) mar go rindreálann Field a cheann féin cheana ón ionchur label prop — faighte trí bhlúire cruinn a thiomsú. An bealach An bealach comhshuite foirm teagmhála an patrún céanna, tástáilte le fíor-thástálacha e2e agus axe.

Céim 4 — Stíligh é

Rindreáiltear gach rud thuas mar struchtúr glan, réidh do do stíleanna. Stíligh na crúcaí — .button, .text-input, .label, .field — i do bhileog stíle, sraith úirlisí Tailwind trí className, nó nasc téama réamhdhéanta: 

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

Céim 5 — Féach air ag obair ar fad

App samplach Next.js an catalóg iomlán stíl-chóirithe agus léirithe, le Playwright e2e agus bonnlíne 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

Na chéad chéimeanna eile

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.