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 45 خود مختار حوالہ تھیمز کے ساتھ آتا ہے، جو 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 پر بھی بھیجا جاتا ہے، تاکہ آپ اپنی پسند کے پلیٹ فارم سے شریک ہو سکیں۔
• طرزِ عمل — منصوبہ ایک معیاری ضابطۂ اخلاق کی پیروی کرتا ہے؛ مہربان رہیں، نیک نیتی فرض کریں۔

عمومی سوالات