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.
• વધુ સારી ઉદાહરણ શૈલી — શું શક્ય છે તે બતાવો.
• ઉદાહરણ એપ સ્ટ્રિંગના અનુવાદો.
• ઓછામાં ઓછા પુનરુત્પાદન સાથે બગ અહેવાલો.
• સ્ક્રીન રીડર અને સહાયક તકનીક સાથે સુલભતા ઓડિટ.

અહીં issue અને PR ખોલો github.com/LilyDesignSystem/lily-design-system.

સમુદાય અને સપોર્ટ

• પ્રશ્નો અને બગ અહેવાલો — અહીં issue ખોલો github.com/LilyDesignSystem/lily-design-system.
• ઇમેઇલ — જાળવનાર વાંચે છે joel@joelparkerhenderson.com અને સહયોગ, માર્ગદર્શન અને પ્રતિસાદનું સ્વાગત કરે છે.
• મિરર — Lily અહીં પણ પુશ થાય છે Codeberg અને GitLab, જેથી તમે તમારી પસંદગીના ફોર્જ પરથી ભાગ લઈ શકો.
• વર્તન — પ્રોજેક્ટ પ્રમાણભૂત આચાર સંહિતાને અનુસરે છે; દયાળુ રહો, સદ્ભાવના ધારો.

FAQ