Lily দিয়ে শুরু

ইনস্টল করা

Lily প্রতিটি ফ্রেমওয়ার্কের জন্য আলাদা Git রিপোজিটরি হিসেবে প্রকাশিত হয়। এটি চেষ্টা করার সবচেয়ে দ্রুত উপায় আপনার স্ট্যাকের headless রিপোজিটরি ক্লোন করা:

git clone https://github.com/LilyDesignSystem/lily-design-system-react-headless
cd lily-design-system-react-headless
pnpm install

একই প্যাটার্ন অন্য ফ্রেমওয়ার্কের জন্যও কাজ করে:

• @lilydesignsystem/html-headless — ইনস্টলের দরকার নেই; .html ফাইল কপি করুন
• @lilydesignsystem/svelte-headless — pnpm install
• @lilydesignsystem/react-headless — pnpm install
• @lilydesignsystem/vue-headless — pnpm install
• @lilydesignsystem/angular-headless — pnpm install
• @lilydesignsystem/nunjucks-headless — pnpm install
• lily-design-system-blazor-headless — dotnet build

headless লাইব্রেরি ক্লোন করার বা প্রকল্পে অন্তর্ভুক্ত করার জন্য তৈরি — সোর্সকে সত্যের উৎস মনে করুন এবং যা দরকার কপি করুন। পছন্দ সহায়ক এছাড়াও ইনস্টলযোগ্য প্যাকেজ হিসেবে আসে, বিল্ড ও প্রকাশ পাইপলাইনসহ (JS ফ্রেমওয়ার্কের জন্য npm, Blazor-এর জন্য NuGet)।

headless কম্পোনেন্ট ব্যবহার

headless কম্পোনেন্ট অর্থবহ HTML, ARIA ও প্রপার্টি নিয়ে আসে — কিন্তু কোনো CSS নয়। প্রতিটি ফ্রেমওয়ার্কে একটি বোতাম এরকম:

HTML

<button class="button" type="button" aria-label="Save">
  Save
</button>

Svelte

<script>
  import Button from "lily-design-system-svelte-headless/components/Button/Button.svelte";
</script>

<Button onclick={save}>Save</Button>

React

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

<Button onClick={save}>Save</Button>

Vue

<script setup>
  import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<Button @click="save">Save</Button>

Angular

import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})

Blazor

<Button OnClick="Save">Save</Button>

Nunjucks

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "button" }) }}

স্টাইল করা উদাহরণ ব্যবহার

উদাহরণ অ্যাপে CSS, রুট ও পূর্ণ ডেমো পৃষ্ঠা আছে। পরীক্ষা-নিরীক্ষার সবচেয়ে দ্রুত উপায় SvelteKit, Next, Nuxt, Analog বা Eleventy উদাহরণ অ্যাপ চালু করে /components-এ ডেমো দেখা।

git clone https://github.com/LilyDesignSystem/lily-design-system-svelte-sveltekit-examples
cd lily-design-system-svelte-sveltekit-examples
pnpm install
pnpm run dev

তারপর http://localhost:5173 খুলুন এবং /components ঘুরে দেখুন।

স্টাইলিং ও ডিজাইন টোকেন

প্রতিটি কম্পোনেন্ট তার মূল এলিমেন্টে kebab-case-এ একটিমাত্র ক্লাস নিয়ে রেন্ডার হয়। যেমন, <Button> থেকে <button class="button"> তৈরি হয়। যেভাবে খুশি স্টাইল করুন:

.button {
  background: var(--my-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
.button:hover { background: var(--my-primary-hover); }

Lily-র ডিফল্ট রঙের প্যালেট (উদাহরণ অ্যাপে ব্যবহৃত) হলো:

• প্রাথমিক: #2563eb
• বিপদ: #dc2626
• সতর্কতা: #f59e0b
• সাফল্য: #16a34a
• পৃষ্ঠার পটভূমি: #f9fafb
• কার্ডের পটভূমি: #ffffff

এগুলো পরামর্শ, শর্ত নয়। এগুলো আপনার নিজের ব্র্যান্ডের প্যালেট দিয়ে বদলে দিন, Lily খুশিমনে সঙ্গে চলবে।

তৈরি থিম

গোড়া থেকে CSS লিখতে চান না? Lily ৪৫টি স্বতন্ত্র রেফারেন্স থিম নিয়ে আসে, যা themes/ ডিরেক্টরিতে আছে। প্রতিটি Lily-র ক্লাস হুক লক্ষ্য করা একটি স্টাইলশিট — সেটি যুক্ত করুন আর স্টাইল হয়ে যাবে:

<link rel="stylesheet" href="/assets/themes/united-kingdom-government-digital-service.css" />

এই সংগ্রহে আছে:

• সরকারি খাত — NHS England, NHS Scotland ও NHS Wales (রোগী ও চিকিৎসকদের জন্য আলাদা রূপ), GOV.UK GDS, এবং মার্কিন ওয়েব ডিজাইন সিস্টেম।
• বিক্রেতা-অনুপ্রাণিত — Adobe Spectrum, Mozilla Protocol।
• সাধারণ উদ্দেশ্য — হালকা, গাঢ়, nord, dracula, wireframe, এবং আরও প্রায় ত্রিশটি।

থিম সিলেক্টর :where(...) ব্যবহার করে, তাই নির্দিষ্টতায় আপনার নিজের CSS সবসময় জেতে। রানটাইমে বদলের জন্য এগুলোকে নিচের theme-picker সহায়কের সঙ্গে জুড়ুন, অথবা থিমিং টিউটোরিয়াল অনুসরণ করুন।

পছন্দ সহায়ক

প্রতিটি ফ্রেমওয়ার্কের একটি সঙ্গী *-helpers ক্যাটালগ আছে যাতে আটটি ছোট বাছাইকারী আছে (এবং একটি picker-bar যা সেগুলোকে একত্র করে)। প্রতিটি একটি headless আইকন বোতাম যা পপআপ খোলে — বিকল্পের তালিকা, লিংকের তালিকা, অনুসন্ধান ফর্ম, বা (date-time-picker-এর জন্য) তারিখ বাছাইয়ের ডায়ালগ — নেটিভ <select> নয়; SSR-নিরাপদ; এবং কোনো CSS দেয় না:

• theme-picker — একটি পরিচালিত <link> বদলে রানটাইমে থিম স্টাইলশিট লোড করে, নথিতে data-theme ঠিক করে, এবং ঐচ্ছিকভাবে localStorage-এ সংরক্ষণ করে।
• locale-picker — lang ও dir ঠিক করে (ডান-থেকে-বাম লেখার স্বয়ংক্রিয় শনাক্তকরণসহ) যাতে আপনার i18n লাইব্রেরি অনুসরণ করতে পারে; নিজে কোনো অনুবাদ করে না।
• text-size-picker — নথিতে data-text-size ঠিক করে; আপনার CSS প্রতিটি মানকে ফন্টের আকারে রূপ দেয়।
• motion-picker — নথিতে data-motion ঠিক করে, দর্শনার্থীর গতি-হ্রাস সেটিং থেকে শুরু করে; কী দমন করতে হবে তা আপনার CSS ও স্ক্রিপ্ট ঠিক করে।
• search-picker — একটি আইকন বোতাম যা অনুসন্ধান ক্ষেত্র খোলে; জমা দিলে অনুসন্ধান পৃষ্ঠায় যায়। একটি কাজের মালিক, পছন্দের নয়।
• link-picker — একটি হোম আইকন যা আপনার অ্যাপ নির্ধারিত পৃষ্ঠার লিংকের মেনু খোলে (হোম, আমাদের সম্পর্কে, যোগাযোগ, গোপনীয়তা নীতি, …)। একটি কাজের মালিক, পছন্দের নয়।
• share-picker — নেটিভ শেয়ার শিট বা ভোক্তার দেওয়া গন্তব্যের তালিকা খোলে, সঙ্গে URL কপি। একটি কাজের মালিক, পছন্দের নয়: কিছু প্রয়োগ করে না, কিছু সংরক্ষণ করে না।
• date-time-picker — তারিখ, সময় বা দুটোর জন্য একটি টেক্সট ক্ষেত্র ও APG তারিখ বাছাইয়ের ডায়ালগ। একটি ফর্ম মানের মালিক, পছন্দের নয়: ISO স্ট্রিং <input type="date">-এর সঙ্গে যাওয়া-আসা করে।

git clone https://github.com/LilyDesignSystem/lily-design-system-svelte-helpers

Svelte ক্যাটালগ আদর্শ রেফারেন্স; React, Vue, Angular, HTML, Nunjucks, Web Components ও Blazor পোর্ট চুক্তি-ধরে-ধরে এর সঙ্গে মিলে যায়। সহায়ক টিউটোরিয়াল দেখুন।

অ্যাক্সেসিবিলিটি

কম্পোনেন্টগুলো WCAG 2.2 AAA লক্ষ্য করে। এগুলো এই প্যাটার্ন অনুসরণ করে:

• সাধারণ <div>-এর বদলে অর্থবহ HTML এলিমেন্ট।
• লেবেলকে ইনপুটের সঙ্গে জুড়ে দেওয়া <label for="id">।
• পারস্পরিক উল্লেখের জন্য aria-labelledby / aria-describedby।
• ত্রুটির অবস্থার জন্য aria-invalid + aria-errormessage।
• গতিশীল কনটেন্টের জন্য role="alert" ও aria-live।
• অবস্থার জন্য aria-pressed, aria-expanded, aria-current।
• গ্রিডের জন্য ঘূর্ণায়মান tabindex।

ফোকাস সূচক ইচ্ছাকৃতভাবে ভোক্তা জোগান দেয় — Lily কখনো এমন ডিফল্ট ফোকাস রিং আঁকে না যা আপনার নকশার সঙ্গে সংঘাত করে। উদাহরণ অ্যাপগুলো তাদের সব রুটে axe-core-এর পরিষ্কার ভিত্তিরেখা বজায় রাখে।

আন্তর্জাতিকীকরণ

প্রতিটি লেবেল, প্লেসহোল্ডার, ত্রুটির বার্তা ও বোতামের লেখা একটি প্রপার্টি। কোনো সরাসরি লেখা স্ট্রিং নেই। আপনার পছন্দের অনুবাদ ফ্রেমওয়ার্ক যুক্ত করুন — Paraglide, i18next, vue-i18n, react-intl, .resx ফাইল, যা-ই হোক।

তারিখ, সংখ্যা ও মুদ্রার জন্য কম্পোনেন্ট আগে থেকে বিন্যস্ত স্ট্রিং গ্রহণ করে: আপনি Intl.DateTimeFormat / Intl.NumberFormat / আপনার পছন্দের লাইব্রেরি দিয়ে বিন্যস্ত করেন এবং ফলাফল পাঠান।

locale-picker সহায়ক নথির মূলে lang ও dir ঠিক করে আপনার i18n লাইব্রেরিকে নির্বাচিত লোকেলের ইঙ্গিত দেয়।

পরীক্ষা

প্রতিটি ফ্রেমওয়ার্ক উপপ্রকল্প তার নিজস্ব স্ট্যাক ব্যবহার করে নিজের পরীক্ষা দেয়:

• HTML: আসল ব্রাউজার চালানো WebDriverIO।
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (Analog Vite প্লাগইনের মাধ্যমে)।
• Nunjucks: রেন্ডার সহায়কসহ Vitest।
• Blazor: bUnit.

পরীক্ষাগুলো শুধু Vitest-এর অন্তর্নির্মিত ম্যাচার ব্যবহার করে — কখনো jest-dom ম্যাচার নয়। এতে পরীক্ষা স্যুট বহনযোগ্য থাকে। উদাহরণ অ্যাপগুলো Playwright এন্ড-টু-এন্ড স্যুট, axe-core অ্যাক্সেসিবিলিটি ভিত্তিরেখা এবং প্রতিক্রিয়াশীল ভিউপোর্ট স্ক্যান যোগ করে।

AI এজেন্ট

এই সাইট তার মূলে llms.txt ও llms.json প্রকাশ করে — এর সবচেয়ে গুরুত্বপূর্ণ পৃষ্ঠার একটি বাছাই করা মানচিত্র, llms.txt রীতি অনুসরণকারী যেকোনো সরঞ্জামের জন্য।

আদর্শ মনোরিপো এছাড়াও দুটি Claude স্কিল দেয়: lily-design-system-skill, একটি সাধারণ-উদ্দেশ্যের স্কিল যা সিস্টেম দিয়ে যারা তৈরি করেন তাদের জন্য Lily-র ধারণা, পরিভাষা ও সংযোজন প্যাটার্ন কভার করে, এবং lily-design-system-maintainer-skill, একটি কারিগরি স্কিল যা যারা এর ওপর কাজ করেন তাদের জন্য মনোরিপোর আবশ্যিক ফাইল বিন্যাস ও সরঞ্জাম কভার করে। দুটোই আদর্শ মনোরিপোর মূলে আছে।

সমস্যা সমাধান

অবদান রাখা

Lily নবীন এবং সহযোগিতাকে স্বাগত জানায়। এখন সবচেয়ে কাজের অবদান হলো:

• নতুন কম্পোনেন্ট (বিশেষ করে প্রতিষ্ঠিত ডিজাইন সিস্টেমের প্যাটার্ন)।
• নতুন থিম — প্রতিটি একটি স্বয়ংসম্পূর্ণ স্টাইলশিট, একটি ভালোভাবে সীমিত প্রথম পুল রিকোয়েস্ট।
• উদাহরণের আরও ভালো স্টাইলিং — যা সম্ভব তা দেখিয়ে দিন।
• উদাহরণ অ্যাপের স্ট্রিংয়ের অনুবাদ।
• ন্যূনতম পুনরুৎপাদনসহ বাগ প্রতিবেদন।
• স্ক্রিন রিডার ও সহায়ক প্রযুক্তি দিয়ে অ্যাক্সেসিবিলিটি অডিট।

সংশ্লিষ্ট রিপোজিটরিতে github.com/LilyDesignSystem-এ ইস্যু ও পুল রিকোয়েস্ট খুলুন।

সম্প্রদায় ও সহায়তা

• প্রশ্ন ও বাগ প্রতিবেদন — সংশ্লিষ্ট রিপোজিটরিতে github.com/LilyDesignSystem-এ একটি ইস্যু খুলুন।
• ইমেল — রক্ষণাবেক্ষক joel@joelparkerhenderson.com পড়েন এবং সহযোগিতা, দিকনির্দেশনা ও প্রতিক্রিয়াকে স্বাগত জানান।
• প্রতিবিম্ব — Lily Codeberg ও GitLab-এও পাঠানো হয়, যাতে আপনি আপনার পছন্দের প্ল্যাটফর্ম থেকে অংশ নিতে পারেন।
• আচরণ — প্রকল্পটি একটি আদর্শ আচরণবিধি অনুসরণ করে; সদয় থাকুন, সদিচ্ছা ধরে নিন।

সাধারণ প্রশ্নাবলী