Lily Design System™

آموزش React

مؤلفه‌های تابعی نوع‌دار، هر کدام یک فایل، با الگوی استاندارد کنترل می‌شوند value + onChange — همه‌چیز همان‌طور کار می‌کند که React از پیش کار می‌کند.

چه چیزی می‌سازید

یک فرم تماس کوچک — فیلد دارای برچسب، دکمه ارسال، وضعیت کنترل‌شده، رفتار واقعی صفحه‌کلید و صفحه‌خوان — ابتدا ساده، سپس استایل‌دار، در حدود ۱۰ دقیقه.

پیش از شروع

به git، Node 22 یا جدیدتر و pnpm 10 یا جدیدتر نیاز دارید. هر پروژه React 18+ کار می‌کند — Next.js، Vite یا React ساده.

گام ۱ — کد را بگیرید

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 و مستنداتش در کنارش. فایل‌های لازم را در برنامه خود کپی کنید، یا مخزن را بیاورید و از آن وارد کنید.

گام ۲ — نخستین مؤلفه شما

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، و هر ویژگی اضافی روی عنصر ریشه پخش می‌شود.

گام ۳ — یک فرم کوچک بسازید

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 نام قابل‌دسترس را فراهم می‌کند.

تأییدشده در ۲۰۲۶-۰۸-۲۹: یک پیش‌نویس قبلی مؤلفه Label درون Fieldقرار داده بود که دو برچسب (یکی خالی) نمایش می‌داد، چون Field خودش از ورودی label prop — با کامپایل قطعه دقیق کشف شد. مسیر مسیر ترکیبی فرم تماس همین الگوست، با آزمون‌های واقعی e2e و axe سنجیده شده.

گام ۴ — استایل بدهید

همه‌چیز بالا به‌صورت ساختار خالص رندر می‌شود، آماده برای استایل‌های شما. قلاب‌ها را استایل بدهید — .button, .text-input, .label, .field — در شیوه‌نامه خود، ابزارهای Tailwind را از طریق لایه کنید className، یا یک تم آماده را پیوند دهید: 

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

گام ۵ — همه‌چیز را در حال کار ببینید

برنامه نمونه 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

گام‌های بعدی

در مسیر پرسشی دارید؟ صفحه راهنما پر از پاسخ است — و اگر گامی می‌تواند روشن‌تر باشد، به ما بگویید و ما با کمال میل آموزش را بهبود می‌دهیم.