Lily Design System™

Oideachadh React

Co-phàirtean-gnìomh le seòrsachadh, aon fhaidhle gach fear, fo smachd leis a’ phàtran àbhaisteach value + onChange — tha a h-uile càil ag obair mar a tha React a’ dèanamh mu thràth.

Na thogas tu

Foirm fios-thugainn bheag — in-chur le leubail, putan cur-a-steach, staid fo smachd, giùlan clàr-iuchrach is leughadair-sgrìn fìor — an toiseach lom, an uairsin le stoidhle, ann an timcheall air 10 mionaidean.

Mus tòisich thu

Feumaidh tu git, Node 22 no nas ùire, agus pnpm 10 no nas ùire. Obraichidh pròiseact React 18+ sam bith — Next.js, Vite no React sìmplidh.

Ceum 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

Tha na co-phàirtean nam faidhlichean rèidh ann an components/ — Button.tsx, TextInput.tsx — gach fear le a dheuchainn, story agus sgrìobhainnean ri thaobh. Dèan lethbhreac dhe na faidhlichean a tha a dhìth ort dhan tagradh agad, no dèan vendoring air an stòr agus ion-phortaich uaithe.

Ceum 2 — A’ chiad cho-phàirt agad

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

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

A’ reandaradh <button class="button" type="button">. Props: type, disabled, pressed (a’ reandaradh aria-pressed), label ( aria-label tar-sgrìobhadh), className, agus bidh buadh a bharrachd sam bith a’ sgaoileadh air an fhreumh-eileamaid.

Ceum 3 — Cuir foirm bheag ri 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 a’ gabhail an label mar a prop fhèin seach co-phàirt leubail neadaichte — thoir seachad e aon turas, air Field, agus TextInputa tha a’ maidseadh label a’ solarachadh an ainm so-ruigsinneach.

Dearbhte 2026-08-29: bha dreachd na bu thràithe air co-phàirt air leth neadachadh Label am broinn Field, a’ reandaradh dà leubail (fear falamh) oir bidh Field mu thràth a’ reandaradh a fhir fhèin bhon label prop — chaidh a ghlacadh le bhith a’ trusadh na criomaig cheart. An slighe measgaichte foirm fios-thugainn an aon phàtran, air a chleachdadh le deuchainnean e2e is axe fìor.

Ceum 4 — Cuir stoidhle air

Tha a h-uile càil gu h-àrd a’ reandaradh mar structar glan, deiseil airson do stoidhlean. Cuir stoidhle air na crochaidhean — .button, .text-input, .label, .field — anns a’ bhileag-stoidhle agad, cuir còmhdach de ghoireasan Tailwind tro className, no ceangail ùrlar deiseil: 

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

Ceum 5 — Faic a h-uile càil ag obair

Tha an tagradh eisimpleir Next.js an catalog slàn le stoidhle is taisbeanadh, le Playwright e2e agus bun-loidhne 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 ceumannan a leanas

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.