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 पर भी भेजा जाता है, ताकि आप अपनी पसंद के प्लेटफ़ॉर्म से भाग ले सकें।
• आचरण — प्रोजेक्ट एक मानक आचार संहिता का पालन करता है; दयालु रहें, सद्भावना मानें।

अक्सर पूछे जाने वाले प्रश्न