Lilyrekin hasten

Instalatu

Lily Git monorepo batean bizi da, framework bakoitzaren liburutegi buru gabearen, laguntzaile-paketeen eta adibide-aplikazioaren direktorio batekin. Probatzeko modurik azkarrena monorepoa klonatu eta zure stack-erako liburutegi buru gabea irekitzea da:

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

Patroi bera balio du beste framework-etarako:

• @lilydesignsystem/html-headless — instalaziorik ez; kopiatu .html fitxategiak
• @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

Liburutegi buru gabeak klonatzeko edo vendoring egiteko diseinatuta daude — tratatu iturburua egia-iturri gisa eta kopiatu behar duzuna. lehentasun-laguntzaileak gainera pakete instalagarri gisa datoz, eraikitze eta argitaratze kanalizazioarekin (npm JS framework-entzat, NuGet Blazor-entzat).

Erabili osagai buru gabe bat

Osagai buru gabeek HTML semantikoa, ARIA eta propak ematen dituzte — baina CSSrik ez. Hona Button bat framework bakoitzean:

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

Erabili adibide estilatu bat

Adibide-aplikazioek CSSa, ibilbideak eta demo-orri osoak dituzte. Esperimentatzeko modurik azkarrena SvelteKit, Next, Nuxt, Analog edo Eleventy adibide-aplikazioa abiaraztea eta demoa hemen ikustea da: /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

Ondoren ireki http://localhost:5173 eta arakatu /components.

Estiloa eta diseinu-tokenak

Osagai bakoitza klase kebab-case bakar batekin errendatzen da bere erro-elementuan. Adibidez, <Button> errendatzen du <button class="button">. Estilatu nahi duzun moduan:

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

Lilyren kolore-paleta lehenetsia (adibide-aplikazioetan erabilia) hau da:

• Nagusia: #2563eb
• Arriskua: #dc2626
• Abisua: #f59e0b
• Arrakasta: #16a34a
• Orriaren atzeko planoa: #f9fafb
• Txartelaren atzeko planoa: #ffffff

Hauek iradokizunak dira, ez eskakizunak. Ordezkatu zure marka-paletarekin eta Lily pozik datorkizu.

Prest dauden gaiak

CSSa hutsetik idatzi nahi ez? Lilyk 57 erreferentzia-gai independente ditu themes/ direktorioan. Bakoitza Lily klase-gakoak helburu dituen estilo-orri bakarra da — lotu eta estilatuta zaude:

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

Multzoak hauek biltzen ditu:

• Sektore publikoa — NHS England, NHS Scotland eta NHS Wales (pazienteentzako eta profesionalentzako aldaerak bakoitza), GOV.UK GDS eta U.S. Web Design System.
• Saltzaileek inspiratua — Adobe Spectrum, Mozilla Protocol.
• Xede orokorra — light, dark, nord, dracula, wireframe eta hogeita hamar bat gehiago.

Gai-hautatzaileek erabiltzen dute :where(...), beraz zure CSSak beti irabazten du espezifikotasunean. Parekatu behean dagoen laguntzailearekin theme-picker exekuzio-garaiko aldaketarako, edo jarraitu gaien tutoriala.

Lehentasun-laguntzaileak

Framework bakoitzak zortzi hautatzaile txiki ditu, bakoitza bere lily-design-system-{framework}-{package} paketean (eta picker-bar haiek biltzen dituena). Bakoitza popup bat irekitzen duen ikono-botoi buru gabea da — zerrenda-koadroa, esteken zerrenda, bilaketa-formularioa edo (date-time-picker-erako) data-hautatzaile elkarrizketa — ez natiboa <select>; SSR-rako segurua da; eta ez dakar CSSrik:

• theme-picker — gai-estilo-orriak exekuzio-garaian kargatzen ditu kudeatutako <link>bat aldatuz, ezartzen du data-theme dokumentuan, eta aukeran hemen gordetzen du: localStorage.
• locale-picker — ezartzen ditu lang eta dir (RTL detekzio automatikoarekin) zure i18n liburutegiak jarrai dezan; ez du itzulpenik egiten.
• text-size-picker — ezartzen ditu data-text-size dokumentuan; zure CSSak balio bakoitza letra-tamaina batera mapatzen du.
• motion-picker — ezartzen ditu data-motion dokumentuan, bisitariaren mugimendu-murrizketaren ezarpenetik abiatuta; zure CSSak eta script-ek erabakitzen dute zer kentzen den.
• search-picker — bilaketa-eremu bat irekitzen duen ikono-botoia; bidaltzeak bilaketa-orri batera nabigatzen du. Ekintza baten jabe da, ez lehentasun baten.
• link-picker — zure aplikazioak definitzen dituen orri-esteken menu bat irekitzen duen etxe-ikonoa (Hasiera, Gutaz, Kontaktua, Pribatutasun-politika, …). Ekintza baten jabe da, ez lehentasun baten.
• share-picker — partekatze-orri natiboa edo erabiltzaileak emandako helmuga-zerrenda irekitzen du, gehi URLa kopiatzea. Ekintza baten jabe da, ez lehentasun baten: ez du ezer aplikatzen, ez du ezer gordetzen.
• date-time-picker — testu-eremu bat gehi APG data-hautatzaile elkarrizketa bat data, ordu edo biarentzat. Formulario-balio baten jabe da, ez lehentasun baten: ISO katea joan-etorrian doa hona: <input type="date">.

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

Svelte katalogoa erreferentzia kanonikoa da; React, Vue, Angular, HTML, Nunjucks, Web Components eta Blazor portuak kontratuz kontratu datoz bat. Ikusi laguntzaileen tutoriala.

Irisgarritasuna

Osagaiek helburu dute WCAG 2.2 AAA. Patroi hauek jarraitzen dituzte:

• HTML elementu semantikoak generikoen aldean <div>s.
• <label for="id"> etiketak sarrerekin lotzen dituena.
• aria-labelledby / aria-describedby erreferentzia gurutzatuetarako.
• aria-invalid + aria-errormessage errore-egoeretarako.
• role="alert" eta aria-live eduki dinamikorako.
• aria-pressed, aria-expanded, aria-current egoerarako.
• Roving tabindex sareetarako.

Foku-adierazleak nahita erabiltzaileak ematen ditu — Lilyk ez du inoiz zure diseinuarekin talka egingo duen foku-eraztun lehenetsirik margotzen. Adibide-aplikazioek axe-core oinarri-lerro garbia mantentzen dute ibilbide guztietan.

Nazioartekotzea

Etiketa, leku-marka, errore-mezu eta botoi-testu guztiak propa dira. Ez dago kate gogor kodetuik. Sartu zure aukerako itzulpen-framework-a — Paraglide, i18next, vue-i18n, react-intl, .resx fitxategiak, edozer.

Datak, zenbakiak eta monetak direla eta, osagaiek aldez aurretik formateatutako kateak onartzen dituzte: zuk formateatzen duzu honekin: Intl.DateTimeFormat / Intl.NumberFormat / zure liburutegi hobetsiarekin eta emaitza pasatzen duzu.

Laguntzaileak locale-picker aukeratutako locale-a zure i18n liburutegiari adierazten dio ezarriz lang eta dir dokumentuaren erroan.

Probak

Framework-azpiproiektu bakoitzak bere probak ditu bere stack idiomatikoarekin:

• HTML: WebDriverIO benetako nabigatzaileak exekutatzen.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (Analog Vite pluginaren bidez).
• Nunjucks: Vitest errendatze-laguntzaile batekin.
• Blazor: bUnit.

Probek erabiltzen dute Vitest-en matcher integratuak soilik — inoiz ez jest-dom matcherrak. Honek test multzoak eramangarri mantentzen ditu. Adibide-aplikazioek Playwright amaieratik amaierarako multzoak, axe-core irisgarritasun oinarri-lerroak eta ikuspegi-miaketa erantsi dituzte.

IA agenteak

Gune honek argitaratzen ditu llms.txt eta llms.json bere erroan — bere orrialderik garrantzitsuenen mapa zainduta, honi jarraitzen dion edozein tresnarentzat: llms.txt konbentzioa.

Monorepo kanonikoak gainera bi bidaltzen ditu Claude Skills: lily-design-system-skill, sistemarekin eraikitzen duen edonorentzat Lilyren kontzeptuak, terminologia eta konposizio-patroiak estaltzen dituen trebetasun orokor bat, eta lily-design-system-maintainer-skill, monorepoan lan egiten duen edonorentzat beharrezko fitxategi-diseinua eta tresnak estaltzen dituen trebetasun tekniko bat. Biak hemen daude, erroan: monorepo kanonikoa.

Arazoen konponbidea

Ekarpenak

Lily gaztea da eta lankidetza ongi hartzen du. Une honetako ekarpen erabilgarrienak hauek dira:

• Osagai berriak (bereziki diseinu-sistema finkatuetako patroiak).
• Gai berriak — bakoitza estilo-orri autonomo bakarra da, lehen PR ongi mugatua.
• Adibideen estilo hobea — erakutsi zer den posible.
• Adibide-aplikazioen kateen itzulpenak.
• Akats-txostenak erreprodukzio minimo batekin.
• Irisgarritasun-auditoretzak pantaila-irakurgailuekin eta teknologia lagungarriekin.

Ireki issue-ak eta PR-ak hemen: github.com/LilyDesignSystem/lily-design-system.

Komunitatea eta laguntza

• Galderak eta akats-txostenak — ireki issue bat hemen: github.com/LilyDesignSystem/lily-design-system.
• Posta elektronikoa — arduradunak irakurtzen du joel@joelparkerhenderson.com eta lankidetza, orientazioa eta iritziak ongi hartzen ditu.
• Ispiluak — Lily hona ere bultzatzen da: Codeberg eta GitLab, nahiago duzun forgetik parte hartu ahal izateko.
• Jokabidea — proiektuak jokabide-kode estandar bat jarraitzen du; izan atsegina, suposatu fede ona.

Ohiko galderak