Tosú le Lily

Suiteáil

Tá Lily i monorepo Git amháin, le comhadlann do leabharlann gan cheann, do phacáistí cúntóra agus d’aip shamplach gach creata. Is é an bealach is tapúla le triail a bhaint as ná an monorepo a chlónáil agus an leabharlann gan cheann do do chruach a oscailt:

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

Oibríonn an patrún céanna do na creataí eile:

• @lilydesignsystem/html-headless — níl aon suiteáil de dhíth; cóipeáil na comhaid .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

Tá na leabharlanna gan cheann deartha le clónáil nó le gabháil isteach — caith leis an bhfoinse mar fhoinse na fírinne agus cóipeáil an méid atá uait. cúntóirí sainroghanna a sheoltar mar phacáistí insuiteáilte le píblíne tógála agus foilsithe (npm do chreataí JS, NuGet do Blazor).

Úsáid comhpháirt gan cheann

Seolann comhpháirteanna gan cheann HTML séimeantach, ARIA agus airíonna — ach gan CSS. Seo Button i ngach creat:

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

Úsáid sampla stílithe

Cuimsíonn na haipeanna samplacha CSS, bealaí agus leathanaigh taispeána iomlána. Is é an bealach is tapúla le triail a bhaint as ná aip shamplach SvelteKit, Next, Nuxt, Analog nó Eleventy a thosú agus féachaint ar an taispeántas ag /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

Ansin oscail http://localhost:5173 agus brabhsáil /components.

Stíliú agus comharthaí dearaidh

Rindreáiltear gach comhpháirt le haicme amháin i kebab-case ar a heilimint fréimhe. Mar shampla, rindreáiltear <Button> mar <button class="button">. Stílígh é mar is mian leat:

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

Is é pailéad dathanna réamhshocraithe Lily (a úsáidtear sna haipeanna samplacha):

• Príomhúil: #2563eb
• Contúirt: #dc2626
• Rabhadh: #f59e0b
• Rath: #16a34a
• Cúlra an leathanaigh: #f9fafb
• Cúlra an chárta: #ffffff

Moltaí iad seo, ní riachtanais. Cuir pailéad do bhranda féin ina n-ionad agus leanann Lily go sásta.

Téamaí réamhdhéanta

Nach bhfuil tú ag iarraidh CSS a scríobh ón tús? Seolann Lily 57 téama tagartha neamhspleách sa chomhadlann themes/ . Is bileog stíle amháin gach ceann a dhíríonn ar chrúcaí aicme Lily — nasc í agus tá tú stílithe:

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

Clúdaíonn an tacar:

• Earnáil phoiblí — NHS England, NHS Scotland agus NHS Wales (gach ceann i leaganacha d’othair agus do chleachtóirí), GOV.UK GDS, agus an U.S. Web Design System.
• Spreagtha ag díoltóirí — Adobe Spectrum, Mozilla Protocol.
• Úsáid ghinearálta — light, dark, nord, dracula, wireframe, agus tríocha eile nó mar sin.

Úsáideann roghnóirí téama :where(...), mar sin bíonn do CSS féin i gcónaí ar dhroim an bhua i sonraíocht. Péireáil iad leis an gcúntóir theme-picker thíos le haghaidh athraithe ag am rite, nó lean an teagasc na dtéamaí.

Cúntóirí sainroghanna

Tá ocht roghnóir bheaga ag gach creat, gach ceann acu ina phacáiste lily-design-system-{framework}-{package} dá chuid féin (agus picker-bar a chuireann le chéile iad). Is cnaipe deilbhín gan cheann gach ceann a osclaíonn preabfhuinneog — bosca liosta, liosta naisc, foirm cuardaigh nó (do date-time-picker) dialóg roghnóra dáta — ní <select>dúchasach; tá sé sábháilte do SSR; agus ní sheolann CSS:

• theme-picker — luchtaíonn bileoga stíle téamaí ag am rite trí <link>bainistithe a mhalartú, socraíonn data-theme ar an doiciméad, agus sábhálann go marthanach in localStorage.
• locale-picker — socraíonn lang agus dir (le brath RTL uathoibríoch) ionas gur féidir le do leabharlann i18n leanúint; ní aistríonn sé aon rud leis féin.
• text-size-picker — socraíonn data-text-size ar an doiciméad; mapálann do CSS gach luach ar mhéid cló.
• motion-picker — socraíonn data-motion ar an doiciméad, ag tosú ó shocrú gluaiseachta laghdaithe an chuairteora; socraíonn do CSS agus do scripteanna cad a chuirfear faoi chois.
• search-picker — cnaipe deilbhín a osclaíonn réimse cuardaigh; nascleanann an tíolacadh chuig leathanach cuardaigh. Tá seilbh aige ar ghníomh, ní ar shainrogha.
• link-picker — deilbhín tí a osclaíonn roghchlár de na naisc leathanaigh a shainíonn d’aip (Baile, Fúinn, Déan teagmháil linn, Polasaí príobháideachais, …). Tá seilbh aige ar ghníomh, ní ar shainrogha.
• share-picker — osclaíonn sé an bileog chomhroinnte dhúchasach nó liosta cuspóirí a sholáthraíonn an tomhaltóir, móide cóipeáil an URL. Tá seilbh aige ar ghníomh, ní ar shainrogha: ní chuireann sé aon rud i bhfeidhm, ní shábhálann sé aon rud.
• date-time-picker — réimse téacs móide dialóg roghnóra dáta APG do dháta, d’am, nó don dá cheann. Tá seilbh aige ar luach foirme, ní ar shainrogha: aistrítear an teaghrán ISO anonn is anall go <input type="date">.

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

Is é an chatalóg Svelte an tagairt chanónach; comhoiriúnaíonn calafoirt React, Vue, Angular, HTML, Nunjucks, Web Components agus Blazor léi conradh ar chonradh. Féach an teagasc na gcúntóirí.

Inrochtaineacht

Díríonn na comhpháirteanna ar WCAG 2.2 AAA. Leanann siad na patrúin seo:

• Eilimintí HTML séimeantacha seachas <div>s.
• <label for="id"> ginearálta a nascann lipéid le hionchuir.
• aria-labelledby / aria-describedby le haghaidh trasthagairtí.
• aria-invalid + aria-errormessage le haghaidh staideanna earráide.
• role="alert" agus aria-live le haghaidh ábhar dinimiciúil.
• aria-pressed, aria-expanded, aria-current le haghaidh staide.
• Roving tabindex le haghaidh greillí.

Soláthraíonn an tomhaltóir táscairí fócais d’aon ghnó — ní tharraingíonn Lily fáinne fócais réamhshocraithe a bhíonn i gcoimhlint le do dhearadh. Coinníonn na haipeanna samplacha bunlíne ghlan axe-core ar fud a mbealaí go léir.

Idirnáisiúnú

Is airí é gach lipéad, sealbhóir áite, teachtaireacht earráide agus téacs cnaipe. Níl aon teaghráin scríofa go docht. Plugáil isteach an creat aistrithe is rogha leat — Paraglide, i18next, vue-i18n, react-intl, comhaid .resx, rud ar bith.

I gcás dátaí, uimhreacha agus airgeadraí, glacann na comhpháirteanna le teaghráin réamhfhormáidithe: déanann tú an fhormáidiú le Intl.DateTimeFormat / Intl.NumberFormat / do leabharlann is fearr leat agus cuireann tú an toradh ar aghaidh.

Cuireann an cúntóir locale-picker an logchaighdeán roghnaithe in iúl do do leabharlann i18n trí lang agus dir a shocrú ar fhréamh an doiciméid.

Tástáil

Seolann gach fophroiséad creata a thástálacha féin ag úsáid a chruaiche idiomaí:

• HTML: WebDriverIO ag rith brabhsálaithe fíor.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (tríd an breiseán Analog Vite).
• Nunjucks: Vitest le cúntóir rindreála.
• Blazor: bUnit.

Úsáideann na tástálacha matchers ionsuite Vitest amháin — choíche matchers jest-dom . Coinníonn sé seo na sraitheanna tástála iniompartha. Cuireann na haipeanna samplacha sraitheanna ceann go ceann Playwright, bunlínte inrochtaineachta axe-core agus scuabadh fuinneoga amhairc freagrúla leo.

Gníomhairí AI

Foilsíonn an suíomh seo llms.txt agus llms.json ina fhréamh — léarscáil churtha de na leathanaigh is tábhachtaí aige, d’aon uirlis a leanann an gnás llms.txt.

Seolann an monorepo canónach dhá Claude Skills: lily-design-system-skill freisin: scil ghinearálta a chlúdaíonn coincheapa, téarmaíocht agus patrúin chumadóireachta Lily do dhuine ar bith atá ag tógáil leis an gcóras, agus lily-design-system-maintainer-skill, scil theicniúil a chlúdaíonn leagan amach na gcomhad riachtanach agus uirlisí an mhonorepo do dhuine ar bith atá ag obair air. Tá an dá cheann i bhfréamh an mhonorepo chanónaigh.

Fabhtcheartú

Rannchuidiú

Tá Lily óg agus fáiltíonn sé roimh chomhoibriú. Is iad na rannchuidithe is úsáidí faoi láthair:

• Comhpháirteanna nua (go háirithe patrúin ó chórais dearaidh bhunaithe).
• Téamaí nua — is bileog stíle neamhspleách amháin gach ceann, an chéad PR sainmhínithe go maith.
• Stíliú samplaí níos fearr — taispeáin cad atá indéanta.
• Aistriúcháin ar theaghráin na n-aipeanna samplacha.
• Tuairiscí fabhtanna le hathchruthú íosta.
• Iniúchtaí inrochtaineachta le léitheoirí scáileáin agus teicneolaíocht chúnta.

Oscail issues agus PRs ar github.com/LilyDesignSystem/lily-design-system.

Pobal agus tacaíocht

• Ceisteanna agus tuairiscí fabhtanna — oscail issue ar github.com/LilyDesignSystem/lily-design-system.
• R-phost — léann an cothabhálaí joel@joelparkerhenderson.com agus fáiltíonn sé roimh chomhoibriú, treoir agus aiseolas.
• Scáthanna — brúitear Lily chuig Codeberg agus GitLab freisin, ionas gur féidir leat páirt a ghlacadh ón bhforge is fearr leat.
• Iompar — leanann an tionscadal cód iompair caighdeánach; bí cineálta, glac go bhfuil dea-chreideamh ann.

CC