دليل React

ما الذي ستبنيه

نموذج اتصال صغير — حقل بتسمية، زر إرسال، حالة مضبوطة، سلوك حقيقي للوحة المفاتيح وقارئ الشاشة — عاريًا أولًا ثم منسَّقًا، في نحو 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">. الخصائص: 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 كخاصية خاصة به لا كمكوّن تسمية متداخل — مرّرها مرة واحدة على Fieldو TextInputالمطابق من label يوفّر الاسم القابل للوصول.

الخطوة 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 ولوحة المفاتيح لكل مكوّن.

أسئلة في الطريق؟ صفحة المساعدة مليئة بالإجابات — وإن أمكن توضيح خطوة أكثر، أخبرنا وسنحسّن الدليل بكل سرور.