A’ tòiseachadh le Lily

Stàlaich

Tha Lily a’ fuireach ann an aon mhonorepo Git, le eòlaire airson leabharlann gun cheann, pasganan cuideachaidh agus tagradh eisimpleir gach frèam. ’S e an dòigh as luaithe air a feuchainn clon a dhèanamh air a’ mhonorepo agus an leabharlann gun cheann fhosgladh airson do stac:

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

Obraichidh an aon phàtran airson na frèamaichean eile:

• @lilydesignsystem/html-headless — gun stàladh a dhìth; dèan lethbhreac de .html fhaidhlichean
• @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

Tha na leabharlannan gun cheann air an dealbhadh airson clon no vendoring a dhèanamh orra — làimhsich an tùs mar an tùs fìrinn agus dèan lethbhreac dhe na tha a dhìth ort. Tha na cuideachaidhean roghainnean cuideachd a’ tighinn mar phasganan so-stàlaichte le loidhne togail is foillseachaidh (npm airson na frèamaichean JS, NuGet airson Blazor).

Cleachd co-phàirt gun cheann

Bidh co-phàirtean gun cheann a’ sìoladh HTML seamantach, ARIA agus props — ach chan eil CSS. Seo Putan anns gach frèam:

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

Cleachd eisimpleir le stoidhle

Tha CSS, slighean is duilleagan taisbeanaidh iomlan anns na tagraidhean eisimpleir. ’S e an dòigh as luaithe air deuchainn tagradh eisimpleir SvelteKit, Next, Nuxt, Analog no Eleventy a thòiseachadh agus an taisbeanadh fhaicinn aig /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

An uairsin fosgail http://localhost:5173 agus brabhsaich /components.

Stoidhle is tòcain dealbhaidh

Bidh gach co-phàirt air a reandaradh le aon chlas kebab-case air an fhreumh-eileamaid aice. Mar eisimpleir, <Button> a’ reandaradh <button class="button">. Dèan stoidhle air mar a thogras tu:

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

’S e pailet dhathan bhunaiteach Lily (a thathar a’ cleachdadh anns na tagraidhean eisimpleir):

• Bun-sheòrsa: #2563eb
• Cunnart: #dc2626
• Rabhadh: #f59e0b
• Soirbheachas: #16a34a
• Cùlaibh na duilleige: #f9fafb
• Cùlaibh a’ chàird: #ffffff

’S e molaidhean a tha seo, chan e riatanasan. Cuir an àite iad le pailet do bhrannd fhèin agus thig Lily còmhla gu toilichte.

Ùrlaran deiseil

Nach eil thu airson CSS a sgrìobhadh bhon neoni? Bidh Lily a’ solarachadh 57 ùrlar-tùsais neo-eisimeileach anns an eòlaire themes/ . ’S e aon bhileag-stoidhle a th’ anns gach fear a tha a’ targaideachadh nan crochaidhean clas Lily — ceangail e agus tha thu air do stoidhleadh:

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

Tha an seata a’ còmhdach:

• Roinn phoblach — NHS England, NHS Scotland agus NHS Wales (caochlaidhean airson euslaintich is luchd-cleachdaidh gach fear), GOV.UK GDS, agus an U.S. Web Design System.
• Air am brosnachadh le reiceadairean — Adobe Spectrum, Mozilla Protocol.
• Adhbhar coitcheann — light, dark, nord, dracula, wireframe, agus deichnear no dhà eile.

Bidh roghnaichean ùrlair a’ cleachdadh :where(...), agus mar sin buannaichidh do CSS fhèin an-còmhnaidh air mionaideachd. Càraich iad leis a’ chuideachadh theme-picker gu h-ìosal airson atharrachadh aig àm ruith, no lean an oideachadh ùrlaran.

Cuideachaidhean roghainnean

Tha ochd roghnaichean beaga aig gach frèam, gach fear na phasgan fhèin lily-design-system-{framework}-{package} (agus picker-bar a chuireas iad ri chèile). Tha gach fear na phutan-ìomhaigh gun cheann a dh’fhosglas priob-uinneag — bogsa-liosta, liosta cheanglaichean, foirm luirg, no (airson date-time-picker) còmhradh roghnaiche-cinn-latha — chan e <select>dùthchasach; tha e sàbhailte do SSR; agus chan eil CSS a’ tighinn leis:

• theme-picker — a’ luchdadh bhileagan-stoidhle ùrlair aig àm ruith le bhith ag atharrachadh <link>a tha air a riaghladh, a’ suidheachadh data-theme air an sgrìobhainn, agus a’ cumail seasmhach, ma thogras tu, ann an localStorage.
• locale-picker — a’ suidheachadh lang agus dir (le lorg RTL fèin-obrachail) gus an lean an leabharlann i18n agad; chan eil e fhèin a’ dèanamh eadar-theangachadh.
• text-size-picker — a’ suidheachadh data-text-size air an sgrìobhainn; bidh do CSS a’ mapadh gach luach gu meud cruth-clò.
• motion-picker — a’ suidheachadh data-motion air an sgrìobhainn, a’ tòiseachadh bho shuidheachadh gluasad-lùghdaichte an neach-tadhail; co-dhùnaidh do CSS is sgriobtaichean dè a chuireas iad dheth.
• search-picker — putan ìomhaigh a dh’fhosglas raon luirg; bidh cur a-steach a’ seòladh gu duilleag luirg. Tha seilbh air gnìomh aige, chan e roghainn.
• link-picker — ìomhaigh dachaigh a dh’fhosglas clàr-taice de cheanglaichean duilleige a mhìnicheas an tagradh agad (Dhachaigh, Mu ar deidhinn, Fios thugainn, Poileasaidh Prìobhaideachd, …). Tha seilbh air gnìomh aige, chan e roghainn.
• share-picker — a’ fosgladh duilleag co-roinn dhùthchasach no liosta cinn-uidhe air a sholarachadh leis a’ chleachdaiche, a bharrachd air lethbhreac-an-URL. Tha seilbh air gnìomh aige, chan e roghainn: chan eil e a’ cur dad an sàs, chan eil e a’ cumail dad.
• date-time-picker — raon teacsa a bharrachd air còmhradh roghnaiche-cinn-latha APG airson ceann-latha, àm, no an dà chuid. Tha seilbh air luach foirm aige, chan e roghainn: bidh an sreang ISO a’ dol air turas-chuairt gu <input type="date">.

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

’S e an catalog Svelte an tùs-iùl canonta; tha puirt React, Vue, Angular, HTML, Nunjucks, Web Components agus Blazor a’ freagairt ris cùmhnant air chùmhnant. Faic an oideachadh chuideachaidhean.

So-ruigsinneachd

Tha co-phàirtean ag amas air WCAG 2.2 AAA. Leanaidh iad na pàtranan seo:

• Eileamaidean HTML seamantach seach coitcheann <div>s.
• <label for="id"> a’ ceangal leubailean ri in-chuiridhean.
• aria-labelledby / aria-describedby airson tar-iomraidhean.
• aria-invalid + aria-errormessage airson staidean mearachd.
• role="alert" agus aria-live airson susbaint ghluasadach.
• aria-pressed, aria-expanded, aria-current airson staid.
• Roving tabindex airson griodan.

Tha comharran fòcais air an solarachadh leis a’ chleachdaiche a dh’aona ghnothach — chan eil Lily a’ peantadh cearcall fòcais bunaiteach a bhuaileas ri do dhealbhadh a-riamh. Cumaidh na tagraidhean eisimpleir bun-loidhne axe-core glan thar an slighean.

Eadar-nàiseantachd

Tha gach leubail, àite-glèidhidh, teachdaireachd mearachd agus teacsa putain na prop. Chan eil sreangan cruaidh-chòdaichte ann. Cuir a-steach am frèam eadar-theangachaidh a thogras tu — Paraglide, i18next, vue-i18n, react-intl, faidhlichean .resx, rud sam bith.

Airson cinn-latha, àireamhan agus airgeadan, gabhaidh na co-phàirtean ri sreangan a tha air an cruth-atharrachadh mu thràth: nì thu an cruth-atharrachadh le Intl.DateTimeFormat / Intl.NumberFormat / an leabharlann as fheàrr leat agus cuiridh tu an toradh seachad.

Bidh an locale-picker cuideachadh a’ comharrachadh an locale taghte don leabharlann i18n agad le bhith a’ suidheachadh lang agus dir air freumh an sgrìobhainn.

Deuchainnean

Bidh na deuchainnean aige fhèin aig gach fo-phròiseact frèam a’ cleachdadh an stac nàdarra aige:

• HTML: WebDriverIO a’ ruith fìor bhrabhsairean.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (tron plugan Analog Vite).
• Nunjucks: Vitest le cuideachadh reandaraidh.
• Blazor: bUnit.

Bidh deuchainnean a’ cleachdadh maidsearan togte a-staigh Vitest a-mhàin — gu bràth jest-dom maidsearan. Cumaidh seo na sreathan dheuchainnean so-ghiùlain. Cuiridh na tagraidhean eisimpleir sreathan deuchainnean deireadh-gu-deireadh Playwright, bun-loidhnichean so-ruigsinneachd axe-core agus sguab seallaidh ath-fhreagarrach ris.

Àidseantan AI

Tha an làrach seo a’ foillseachadh llms.txt agus llms.json aig a freumh — mapa taghte dhe na duilleagan as cudromaiche aice, airson inneal sam bith a leanas gnàthas llms.txt.

Bidh am monorepo canonta cuideachd a’ lìbhrigeadh dà Sgilean Claude: lily-design-system-skill, sgil adhbhar-choitcheann a’ còmhdach bun-bheachdan, briathrachas agus pàtranan co-chur Lily airson neach sam bith a tha a’ togail leis an t-siostam, agus lily-design-system-maintainer-skill, sgil theicnigeach a’ còmhdach cruth nam faidhlichean riatanach is uidheamachd a’ mhonorepo airson neach sam bith a tha ag obair air. Tha an dà chuid aig freumh an mhonorepo chanonta.

Fuasgladh dhuilgheadasan

A’ cur ris

Tha Lily òg agus fàilteachail do cho-obrachadh. ’S e na co-chuiridhean as fheumaile an-dràsta:

• Co-phàirtean ùra (gu h-àraidh pàtranan bho shiostaman dealbhaidh stèidhichte).
• Ùrlaran ùra — ’s e aon bhileag-stoidhle fèin-chumail a th’ anns gach fear, ciad iarrtas tarraing le crìochan math.
• Stoidhle eisimpleir nas fheàrr — seall na tha comasach.
• Eadar-theangachaidhean de shreangan nan tagraidhean eisimpleir.
• Aithisgean bhugaichean le ath-riochdachadh as lugha.
• Sgrùdaidhean so-ruigsinneachd le leughadairean-sgrìn agus teicneòlas taiceil.

Fosgail cùisean is iarrtasan tarraing aig github.com/LilyDesignSystem/lily-design-system.

Coimhearsnachd is taic

• Ceistean is aithisgean bhugaichean — fosgail cùis aig github.com/LilyDesignSystem/lily-design-system.
• Post-d — leughaidh an neach-glèidhidh joel@joelparkerhenderson.com agus tha e fàilteachail do cho-obrachadh, stiùireadh agus fios air ais.
• Sgàthain — Tha Lily cuideachd air a phutadh gu Codeberg agus GitLab, gus an urrainn dhut com-pàirt a ghabhail bhon fhoirge as fheàrr leat.
• Giùlan — tha am pròiseact a’ leantainn còd giùlain àbhaisteach; bi coibhneil, gabh ris gu bheil math-rùn ann.

Ceistean cumanta