Darbo su Lily pradžia

Diegimas

Lily gyvena viename Git monorepo su katalogu kiekvieno karkaso bevaigei bibliotekai, pagalbiniams paketams ir pavyzdinei programai. Greičiausias būdas išbandyti — klonuoti monorepo ir atidaryti bevaigę biblioteką savo technologijų rinkiniui:

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

Tas pats šablonas veikia ir kitiems karkasams:

• @lilydesignsystem/html-headless — diegti nereikia; nukopijuokite .html failus
• @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

Bevaigės bibliotekos sukurtos klonuoti ar įtraukti į projektą — laikykite pirminį kodą tiesos šaltiniu ir kopijuokite, ko reikia. nuostatų pagalbininkai papildomai tiekiami kaip diegiami paketai su kūrimo ir skelbimo konvejeriu (npm JS karkasams, NuGet Blazor).

Bevaigio komponento naudojimas

Bevaigiai komponentai tiekia semantinį HTML, ARIA ir savybes — bet ne CSS. Štai Button kiekviename karkase:

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" }) }}

Stilizuoto pavyzdžio naudojimas

Pavyzdinės programos apima CSS, maršrutus ir pilnus demonstracinius puslapius. Greičiausias būdas eksperimentuoti — paleisti SvelteKit, Next, Nuxt, Analog ar Eleventy pavyzdinę programą ir pamatyti demonstraciją adresu /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

Tada atidarykite http://localhost:5173 ir naršykite /components.

Stilizavimas ir dizaino žetonai

Kiekvienas komponentas atvaizduojamas su viena kebab-case klase savo šakniniame elemente. Pavyzdžiui, <Button> atvaizduojamas kaip <button class="button">. Stilizuokite kaip norite:

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

Numatytoji Lily spalvų paletė (naudojama pavyzdinėse programose) yra:

• Pagrindinė: #2563eb
• Pavojus: #dc2626
• Įspėjimas: #f59e0b
• Sėkmė: #16a34a
• Puslapio fonas: #f9fafb
• Kortelės fonas: #ffffff

Tai pasiūlymai, o ne reikalavimai. Pakeiskite juos savo prekės ženklo paletė, ir Lily mielai prisitaikys.

Paruoštos temos

Nenorite rašyti CSS nuo nulio? Lily tiekia 57 savarankiškas pavyzdines temas kataloge themes/ . Kiekviena yra vienas stilių lapas, taikantis Lily klasės kabliukus — susiekite jį ir esate stilizuoti:

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

Rinkinys apima:

• Viešasis sektorius — NHS England, NHS Scotland ir NHS Wales (kiekviena pacientams ir praktikams skirtais variantais), GOV.UK GDS ir U.S. Web Design System.
• Tiekėjų įkvėptos — Adobe Spectrum, Mozilla Protocol.
• Bendrosios paskirties — light, dark, nord, dracula, wireframe ir dar trisdešimt.

Temų selektoriai naudoja :where(...), todėl jūsų paties CSS visada laimi specifiškumu. Suporuokite jas su žemiau esančiu pagalbininku theme-picker perjungimui vykdymo metu arba vadovaukitės temų mokymu.

Nuostatų pagalbininkai

Kiekvienas karkasas turi aštuonis mažus parinkiklius, kiekvienas — atskiras lily-design-system-{framework}-{package} paketas (ir picker-bar , juos sujungiantis). Kiekvienas yra bevaigis piktogramos mygtukas, atidarantis iškylantįjį langą — sąrašo langelį, nuorodų sąrašą, paieškos formą ar (date-time-picker atveju) datos pasirinkimo dialogą — ne vietinis <select>; yra saugus SSR; ir netiekia CSS:

• theme-picker — vykdymo metu įkelia temų stilių lapus pakeisdamas valdomą <link>, nustato data-theme dokumente ir pasirinktinai išsaugo localStorage.
• locale-picker — nustato lang ir dir (su automatiniu RTL aptikimu), kad jūsų i18n biblioteka galėtų sekti; pats nieko neverčia.
• text-size-picker — nustato data-text-size dokumente; jūsų CSS susieja kiekvieną reikšmę su šrifto dydžiu.
• motion-picker — nustato data-motion dokumente, pradėdamas nuo lankytojo sumažinto judesio nustatymo; jūsų CSS ir scenarijai sprendžia, ką slopinti.
• search-picker — piktogramos mygtukas, atidarantis paieškos lauką; pateikimas nukreipia į paieškos puslapį. Valdo veiksmą, o ne nuostatą.
• link-picker — namo piktograma, atidaranti jūsų programos apibrėžtų puslapių nuorodų meniu (Pagrindinis, Apie mus, Kontaktai, Privatumo politika, …). Valdo veiksmą, o ne nuostatą.
• share-picker — atidaro vietinį dalijimosi lapą arba vartotojo pateiktą paskirčių sąrašą, plius URL kopijavimą. Valdo veiksmą, o ne nuostatą: nieko netaiko, nieko neišsaugo.
• date-time-picker — teksto laukas plius APG datos pasirinkimo dialogas datai, laikui ar abiem. Valdo formos reikšmę, o ne nuostatą: ISO eilutė konvertuojama pirmyn ir atgal į <input type="date">.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

Svelte katalogas yra kanoninė nuoroda; React, Vue, Angular, HTML, Nunjucks, Web Components ir Blazor perkėlimai atitinka jį sutartis po sutarties. Žr. pagalbininkų mokymą.

Prieinamumas

Komponentai taikosi į WCAG 2.2 AAA. Jie laikosi šių šablonų:

• Semantiniai HTML elementai vietoj bendrų <div>s.
• <label for="id"> , susiejančių etiketes su įvestimis.
• aria-labelledby / aria-describedby kryžminėms nuorodoms.
• aria-invalid + aria-errormessage klaidų būsenoms.
• role="alert" ir aria-live dinaminiam turiniui.
• aria-pressed, aria-expanded, aria-current būsenai.
• Roving tabindex tinkleliams.

Fokuso indikatorius sąmoningai pateikia vartotojas — Lily niekada nepiešia numatytojo fokuso žiedo, kuris prieštarautų jūsų dizainui. Pavyzdinės programos visuose savo maršrutuose išlaiko švarią axe-core bazinę liniją.

Internacionalizacija

Kiekviena etiketė, vietos žymeklis, klaidos pranešimas ir mygtuko tekstas yra savybė. Į kodą įrašytų eilučių nėra. Prijunkite pasirinktą vertimo karkasą — Paraglide, i18next, vue-i18n, react-intl, .resx failus, bet ką.

Datoms, skaičiams ir valiutoms komponentai priima iš anksto suformatuotas eilutes: formatuojate su Intl.DateTimeFormat / Intl.NumberFormat / jūsų mėgstama biblioteka ir perduodate rezultatą.

Pagalbininkas locale-picker praneša pasirinktą lokalę jūsų i18n bibliotekai nustatydamas lang ir dir dokumento šaknyje.

Testavimas

Kiekvienas karkaso paprojektis tiekia savo testus naudodamas savo idiomatinį technologijų rinkinį:

• HTML: WebDriverIO, paleidžiantis tikras naršykles.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (per Analog Vite papildinį).
• Nunjucks: Vitest su atvaizdavimo pagalbininku.
• Blazor: bUnit.

Testai naudoja tik Vitest įmontuotus atitikmenis — niekada jest-dom atitikmenų. Tai išlaiko testų rinkinius perkeliamus. Pavyzdinės programos prideda Playwright pilnos grandinės rinkinius, axe-core prieinamumo bazines linijas ir adaptyvių peržiūros langų peržiūrą.

DI agentai

Ši svetainė skelbia llms.txt ir llms.json savo šaknyje — kuruotą svarbiausių puslapių žemėlapį, bet kuriam įrankiui, kuris laikosi llms.txt konvencijos.

Kanoninis monorepo papildomai tiekia du Claude Skills: lily-design-system-skill: bendrosios paskirties įgūdį, apimantį Lily sąvokas, terminologiją ir sudėjimo šablonus visiems, kurie kuria su sistema, ir lily-design-system-maintainer-skill, techninį įgūdį, apimantį privalomų failų išdėstymą ir monorepo įrankius visiems, kurie dirba su juo. Abu yra kanoninio monorepo šaknyje.

Trikčių šalinimas

Prisidėjimas

Lily yra jaunas ir sveikina bendradarbiavimą. Naudingiausi indėliai dabar:

• Nauji komponentai (ypač šablonai iš nusistovėjusių dizaino sistemų).
• Naujos temos — kiekviena yra vienas savarankiškas stilių lapas, gerai apibrėžtas pirmasis PR.
• Geresnis pavyzdžių stilizavimas — parodykite, kas įmanoma.
• Pavyzdinių programų eilučių vertimai.
• Klaidų ataskaitos su minimaliu atkūrimu.
• Prieinamumo auditai su ekrano skaitytuvais ir pagalbinėmis technologijomis.

Atidarykite issue ir PR adresu github.com/LilyDesignSystem/lily-design-system.

Bendruomenė ir palaikymas

• Klausimai ir klaidų ataskaitos — atidarykite issue adresu github.com/LilyDesignSystem/lily-design-system.
• El. paštas — prižiūrėtojas skaito joel@joelparkerhenderson.com ir sveikina bendradarbiavimą, patarimus ir atsiliepimus.
• Veidrodžiai — Lily taip pat siunčiamas į Codeberg ir GitLab, kad galėtumėte dalyvauti iš jums patinkančios forge.
• Elgesys — projektas laikosi standartinio elgesio kodekso; būkite malonūs, pripažinkite gerą valią.

DUK