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

পরবর্তী ধাপ

পথে প্রশ্ন আছে? সহায়তা পাতা উত্তরে ভরা — আর কোনো ধাপ আরও পরিষ্কার হতে পারলে, আমাদের জানান আর আমরা খুশি মনে টিউটোরিয়াল উন্নত করব।