Lily తో ప్రారంభించడం

ఇన్‌స్టాల్

Lily ఒకే Git మోనోరెపోలో ఉంటుంది, ప్రతి ఫ్రేమ్‌వర్క్ యొక్క హెడ్‌లెస్ లైబ్రరీ, సహాయక ప్యాకేజీలు మరియు ఉదాహరణ యాప్ కోసం డైరెక్టరీతో. దాన్ని ప్రయత్నించడానికి వేగవంతమైన మార్గం మోనోరెపో క్లోన్ చేసి మీ స్టాక్ కోసం హెడ్‌లెస్ లైబ్రరీ తెరవడం:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/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

హెడ్‌లెస్ లైబ్రరీలు క్లోన్ చేయడానికి లేదా వెండర్ చేయడానికి రూపొందించబడ్డాయి — మూలాన్ని సత్య మూలంగా భావించి మీకు కావలసింది కాపీ చేయండి. ప్రాధాన్య సహాయకులు అదనంగా బిల్డ్ మరియు ప్రచురణ పైప్‌లైన్‌తో (JS ఫ్రేమ్‌వర్కులకు npm, Blazor కు NuGet) ఇన్‌స్టాల్ చేయదగిన ప్యాకేజీలుగా వస్తాయి.

హెడ్‌లెస్ భాగాన్ని వాడండి

హెడ్‌లెస్ భాగాలు సెమాంటిక్ HTML, ARIA మరియు ప్రాప్‌లను పంపుతాయి — కానీ CSS కాదు. ప్రతి ఫ్రేమ్‌వర్క్‌లో Button ఇక్కడ ఉంది:

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
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install
pnpm run dev

తర్వాత తెరవండి http://localhost:5173 మరియు ఇక్కడ బ్రౌజ్ చేయండి /components.

శైలి మరియు డిజైన్ టోకెన్లు

ప్రతి భాగం దాని రూట్ ఎలిమెంట్‌పై ఒకే కబాబ్-కేస్ క్లాస్‌తో రెండర్ అవుతుంది. ఉదాహరణకు, <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 అందిస్తుంది 57 స్వతంత్ర సూచన థీమ్‌లు ఈ డైరెక్టరీలో themes/ . ప్రతిదీ Lily క్లాస్ హుక్‌లను లక్ష్యంగా చేసుకునే ఒక స్టైల్‌షీట్ — దాన్ని లింక్ చేయండి, మీరు శైలి పొందారు:

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

ఈ సమితి వీటిని కవర్ చేస్తుంది:

• ప్రభుత్వ రంగం — NHS England, NHS Scotland మరియు NHS Wales (ప్రతి ఒక్కటి రోగి-ముఖ మరియు వైద్యుల-ముఖ రూపాల్లో), GOV.UK GDS, మరియు U.S. Web Design System.
• విక్రేతల నుండి స్ఫూర్తి — Adobe Spectrum, Mozilla Protocol.
• సాధారణ ఉద్దేశ్యం — light, dark, nord, dracula, wireframe, మరియు ముప్పై వరకు మరిన్ని.

థీమ్ సెలెక్టర్లు వాడతాయి :where(...), కాబట్టి మీ స్వంత CSS ఎల్లప్పుడూ నిర్దిష్టతలో గెలుస్తుంది. రన్‌టైమ్ మార్పిడి కోసం వాటిని క్రింది theme-picker సహాయకుడితో జత చేయండి, లేదా అనుసరించండి థీమింగ్ ట్యుటోరియల్.

ప్రాధాన్య సహాయకులు

ప్రతి ఫ్రేమ్‌వర్క్‌కు ఎనిమిది చిన్న ఎంపికలు ఉన్నాయి, ప్రతి ఒక్కటి తనదైన lily-design-system-{framework}-{package} ప్యాకేజీ (మరియు వాటిని సమీకరించే picker-bar ). ప్రతి ఒక్కటి పాపప్ తెరిచే హెడ్‌లెస్ ఐకాన్ బటన్ — లిస్ట్‌బాక్స్, లింకుల జాబితా, శోధన ఫారమ్, లేదా (date-time-picker కు) తేదీ-ఎంపిక డైలాగ్ — స్థానిక <select>కాదు; SSR-సురక్షితం; మరియు CSS పంపదు:

• theme-picker — నిర్వహించే <link>ని మార్చడం ద్వారా రన్‌టైమ్‌లో థీమ్ స్టైల్‌షీట్‌లను లోడ్ చేస్తుంది, పత్రంపై data-theme సెట్ చేస్తుంది, మరియు ఐచ్ఛికంగా ఇందులో నిలుపుతుంది localStorage.
• locale-picker — సెట్ చేస్తుంది lang మరియు dir (స్వయంచాలక RTL గుర్తింపుతో) తద్వారా మీ 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
cd lily-design-system/lily-design-system-svelte-theme-picker

Svelte జాబితా ప్రామాణిక సూచన; React, Vue, Angular, HTML, Nunjucks, Web Components మరియు Blazor పోర్టులు ఒప్పందం-ఒప్పందానికి దానితో సరిపోతాయి. చూడండి సహాయకుల ట్యుటోరియల్.

అందుబాటు

భాగాలు లక్ష్యంగా చేసుకుంటాయి WCAG 2.2 AAA. అవి ఈ నమూనాలను అనుసరిస్తాయి:

• సాధారణ <div>s.
• <label for="id"> బదులు సెమాంటిక్ HTML ఎలిమెంట్లు, లేబుళ్లను ఇన్‌పుట్‌లకు లింక్ చేస్తూ.
• 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 సహాయకుడు ఎంచుకున్న లొకేల్‌ను మీ i18n లైబ్రరీకి ఇలా సెట్ చేయడం ద్వారా తెలియజేస్తాడు lang మరియు dir పత్ర రూట్‌పై.

పరీక్ష

ప్రతి ఫ్రేమ్‌వర్క్ ఉప-ప్రాజెక్ట్ దాని సంప్రదాయ స్టాక్‌ను ఉపయోగించి తన స్వంత పరీక్షలను పంపుతుంది:

• 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 Skills: lily-design-system-skill: వ్యవస్థతో నిర్మించే ప్రతి ఒక్కరికీ Lily యొక్క భావనలు, పరిభాష మరియు కూర్పు నమూనాలను కవర్ చేసే సాధారణ-ఉద్దేశ్య నైపుణ్యం, మరియు lily-design-system-maintainer-skill, దానిపై పని చేసే ప్రతి ఒక్కరికీ మోనోరెపో యొక్క అవసరమైన-ఫైళ్ల లేఅవుట్ మరియు సాధనాలను కవర్ చేసే సాంకేతిక నైపుణ్యం. రెండూ దీని రూట్ వద్ద ఉన్నాయి ప్రామాణిక మోనోరెపో.

సమస్య పరిష్కారం

సహకారం

Lily యువ ప్రాజెక్ట్ మరియు సహకారాన్ని స్వాగతిస్తుంది. ప్రస్తుతం అత్యంత ఉపయోగకరమైన సహకారాలు:

• కొత్త భాగాలు (ముఖ్యంగా స్థిరపడిన డిజైన్ వ్యవస్థల నుండి నమూనాలు).
• కొత్త థీమ్‌లు — ప్రతి ఒక్కటి స్వతంత్ర స్టైల్‌షీట్, చక్కగా పరిమితమైన మొదటి PR.
• మెరుగైన ఉదాహరణ శైలి — ఏది సాధ్యమో చూపండి.
• ఉదాహరణ యాప్ స్ట్రింగ్‌ల అనువాదాలు.
• కనీస పునరుత్పత్తితో బగ్ నివేదికలు.
• స్క్రీన్ రీడర్లు మరియు సహాయక సాంకేతికతతో అందుబాటు ఆడిట్‌లు.

ఇక్కడ issues మరియు PRs తెరవండి github.com/LilyDesignSystem/lily-design-system.

సంఘం మరియు మద్దతు

• ప్రశ్నలు మరియు బగ్ నివేదికలు — ఇక్కడ issue తెరవండి github.com/LilyDesignSystem/lily-design-system.
• ఇమెయిల్ — నిర్వాహకుడు చదువుతారు joel@joelparkerhenderson.com మరియు సహకారం, మార్గదర్శకత్వం, అభిప్రాయాన్ని స్వాగతిస్తారు.
• మిర్రర్లు — Lily ఇక్కడకు కూడా పుష్ చేయబడుతుంది Codeberg మరియు GitLab, తద్వారా మీరు మీకు ఇష్టమైన ఫోర్జ్ నుండి పాల్గొనవచ్చు.
• ప్రవర్తన — ప్రాజెక్ట్ ప్రామాణిక ప్రవర్తనా నియమావళిని అనుసరిస్తుంది; దయగా ఉండండి, మంచి విశ్వాసాన్ని ఊహించండి.

FAQ