Vodič za React — Lily Design System

Što ćete izraditi

Mali kontaktni obrazac — polje s oznakom, gumb za slanje, kontrolirano stanje, stvarno ponašanje tipkovnice i čitača zaslona — najprije golo, zatim stilizirano, za otprilike 10 minuta.

Prije nego počnete

Trebaju vam git, Node 22 ili noviji i pnpm 10 ili noviji. Odgovara bilo koji projekt React 18+ — Next.js, Vite ili obični React.

Korak 1 — Preuzmite kod

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

Komponente su ravne datoteke u components/ — Button.tsx, TextInput.tsx — svaka s vlastitim testom, storyjem i dokumentacijom uz sebe. Kopirajte potrebne datoteke u svoju aplikaciju ili dovucite repozitorij i uvezite iz njega.

Korak 2 — Vaša prva komponenta

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

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

Iscrtava <button class="button" type="button">. Propovi: type, disabled, pressed (iscrtava aria-pressed), label ( aria-label za nadjačavanje), className, a svaki dodatni atribut raspršuje se na korijenski element.

Korak 3 — Sastavite mali obrazac

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 prima vidljivu label kao vlastiti prop umjesto ugniježđene komponente oznake — proslijedite je jednom, na Fieldi TextInputiz label daje pristupačno ime.

Provjereno 2026-08-29: raniji nacrt ugnijezdio je zasebnu komponentu Label unutar Field, što je iscrtalo dvije oznake (jednu praznu) jer Field već iscrtava vlastitu iz ulaza label prop — otkriveno kompiliranjem točnog isječka. Ruta Složena ruta kontaktnog obrasca isti je uzorak, isproban stvarnim e2e i axe testovima.

Korak 4 — Stilizirajte ga

Sve gore iscrtava se kao čista struktura, spremna za vaše stilove. Stilizirajte kuke — .button, .text-input, .label, .field — u svojoj stilskoj tablici, slojite Tailwind uslužne klase preko className, ili povežite gotovu temu:

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

Korak 5 — Pogledajte kako sve radi

Primjer aplikacija Next.js je cijeli katalog stiliziran i demonstriran, s Playwright e2e i axe-core polaznom linijom:

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

Sljedeći koraci

Teme — prebacivanje tijekom izvođenja pomoćnikom theme-picker za React.
Pomoćnici za postavke — jezik i veličina teksta.
Katalog komponenti — svojstva, ARIA i tipkovnica po komponenti.

Pitanja usput? Stranica pomoći puna je odgovora — a ako neki korak može biti jasniji, javite nam i rado ćemo poboljšati vodič.