Tutorja tar-React — Lily Design System

X'se tibni

Formola żgħira ta' kuntatt — qasam b'tikketta, buttuna biex tibgħat, stat ikkontrollat, mġiba vera tat-tastiera u tal-qarrej tal-iskrin — l-ewwel għarwiena, imbagħad bi stil, f'madwar 10 minuti.

Qabel ma tibda

Għandek bżonn git, Node 22 jew iktar ġdid, u pnpm 10 jew iktar ġdid. Kwalunkwe proġett React 18+ jaħdem — Next.js, Vite jew React sempliċi.

Pass 1 — Ġib il-kodiċi

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

Il-komponenti huma fajls ċatti fi components/ — Button.tsx, TextInput.tsx — kull wieħed bit-test, l-istory u d-dokumentazzjoni tiegħu maġenbu. Ikkopja l-fajls li teħtieġ fl-app tiegħek, jew ġib ir-repożitorju u importa minnu.

Pass 2 — L-ewwel komponent tiegħek

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

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

Jirrendi <button class="button" type="button">. Props: type, disabled, pressed (jirrendi aria-pressed), label ( aria-label biex tissostitwixxi), className, u kwalunkwe attribut żejjed jinfirex fuq l-element tal-għerq.

Pass 3 — Ikkomponi formola żgħira

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 jieħu l- label bħala prop tiegħu stess minflok komponent ta' tikketta mdaħħal — għaddiha darba, fuq Fieldu TextInputkorrispondenti ta' label jipprovdi l-isem aċċessibbli.

Ivverifikat fl-2026-08-29: abbozz preċedenti daħħal komponent Label ġewwa Field, li rrendi żewġ tikketti (waħda vojta) għax Field diġà jirrendi tiegħu stess mill-input label prop — skopert billi ġie kkompilat is-snippet eżatt. Ir-rotta Ir-rotta komposta tal-formola ta' kuntatt hija l-istess mudell, ittestjat b'testijiet e2e u axe veri.

Pass 4 — Agħtiha stil

Kollox hawn fuq jirrendi bħala struttura pura, lesta għall-istili tiegħek. Agħti stil lill-ganċijiet — .button, .text-input, .label, .field — fl-istylesheet tiegħek, żid utilitajiet Tailwind permezz ta' className, jew evita tema lesta:

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

Pass 5 — Ara kollox jaħdem

L-app eżempju Next.js hija l-katalogu sħiħ bi stil u murija, b'Playwright e2e u linja bażi 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

Passi li jmiss

Temi — bdil waqt it-tħaddim bl-għajnuna theme-picker għal React.
Għajnuniet tal-preferenzi — lingwa u daqs tat-test.
Katalogu tal-komponenti — proprjetajiet, ARIA u tastiera għal kull komponent.

Mistoqsijiet matul it-triq? Il-paġna tal-għajnuna hija mimlija tweġibiet — u jekk pass jista' jkun iktar ċar, għidilna u nħossuna kuntenti ntejbu t-tutorja.