Οδηγός React — Lily Design System

Τι θα φτιάξετε

Μια μικρή φόρμα επικοινωνίας — πεδίο με ετικέτα, κουμπί υποβολής, ελεγχόμενη κατάσταση, πραγματική συμπεριφορά πληκτρολογίου και προγράμματος ανάγνωσης οθόνης — πρώτα γυμνή, μετά μορφοποιημένη, σε περίπου 10 λεπτά.

Πριν ξεκινήσετε

Χρειάζεστε git, Node 22 ή νεότερο και pnpm 10 ή νεότερο. Κάθε έργο React 18+ κάνει — Next.js, Vite ή απλό React.

Βήμα 1 — Πάρτε τον κώδικα

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

Τα στοιχεία είναι επίπεδα αρχεία στο components/ — Button.tsx, TextInput.tsx — καθένα με τη δοκιμή, το story και την τεκμηρίωσή του δίπλα του. Αντιγράψτε τα αρχεία που χρειάζεστε στην εφαρμογή σας ή φέρτε το αποθετήριο και εισαγάγετε από αυτό.

Βήμα 2 — Το πρώτο σας στοιχείο

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

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

Αποδίδει <button class="button" type="button">. Props: type, disabled, pressed (αποδίδει aria-pressed), label (ένα aria-label για παράκαμψη), className, και κάθε επιπλέον χαρακτηριστικό διασπείρεται στο στοιχείο ρίζας.

Βήμα 3 — Συνθέστε μια μικρή φόρμα

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 παίρνει την ορατή label ως δικό του prop αντί για ένθετο στοιχείο ετικέτας — περάστε την μία φορά, στο Fieldκαι TextInputτου label δίνει το προσβάσιμο όνομα.

Επαληθεύτηκε στις 2026-08-29: ένα προηγούμενο προσχέδιο ένθετε ξεχωριστό στοιχείο Label μέσα στο Field, το οποίο απέδιδε δύο ετικέτες (η μία κενή) επειδή το Field αποδίδει ήδη τη δική του από την είσοδο label prop — εντοπίστηκε μεταγλωττίζοντας το ακριβές απόσπασμα. Η διαδρομή Η σύνθετη διαδρομή της φόρμας επικοινωνίας είναι το ίδιο μοτίβο, δοκιμασμένο με πραγματικά τεστ e2e και axe.

Βήμα 4 — Μορφοποιήστε την

Όλα τα παραπάνω αποδίδονται ως καθαρή δομή, έτοιμη για τα στυλ σας. Μορφοποιήστε τα αγκίστρια — .button, .text-input, .label, .field — στο φύλλο στυλ σας, στρώστε βοηθητικά Tailwind μέσω className, ή συνδέστε ένα έτοιμο θέμα:

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

Βήμα 5 — Δείτε τα πάντα να δουλεύουν

Η εφαρμογή-παράδειγμα Next.js είναι ολόκληρος ο κατάλογος μορφοποιημένος και επιδεδειγμένος, με Playwright e2e και βάση αναφοράς 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

Επόμενα βήματα

Θέματα — εναλλαγή κατά την εκτέλεση με τον βοηθό theme-picker για React.
Βοηθοί προτιμήσεων — γλώσσα και μέγεθος κειμένου.
Κατάλογος στοιχείων — ιδιότητες, ARIA και πληκτρολόγιο ανά στοιχείο.

Ερωτήσεις στην πορεία; Η σελίδα βοήθειας είναι γεμάτη απαντήσεις — και αν ένα βήμα μπορεί να γίνει πιο σαφές, πείτε μας και θα βελτιώσουμε με χαρά τον οδηγό.