Farawa da Lily

Shigarwa

Lily tana zaune a monorepo na Git ɗaya, mai kundi ga ɗakin karatu marar kai na kowane tsarin aiki, fakitin masu taimako da aikace-aikacen misali. Hanya mafi sauri ta gwada ita ce kwafa monorepo ka buɗe ɗakin karatu marar kai don tarinka:

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

Tsari iri ɗaya yana aiki ga sauran tsarin aiki:

• @lilydesignsystem/html-headless — ba a buƙatar shigarwa; kwafi .html fayiloli
• @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

An tsara ɗakunan karatu marasa kai don a kwafa ko a ɗora cikin aiki — ɗauki tushen lamba a matsayin tushen gaskiya ka kwafi abin da kake buƙata. masu taimakon zaɓi ƙari suna zuwa a matsayin fakiti da za a iya shigarwa tare da bututun gini da bugawa (npm don tsarin aikin JS, NuGet don Blazor).

Yi amfani da ɓangare marar kai

Abubuwa marasa kai suna kawo HTML mai ma’ana, ARIA da kadarori — amma ba CSS ba. Ga Button a kowane tsarin aiki:

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

Yi amfani da misali mai ado

Aikace-aikacen misali sun haɗa da CSS, hanyoyi, da cikakkun shafukan nuni. Hanya mafi sauri ta gwaji ita ce fara aikace-aikacen misali na SvelteKit, Next, Nuxt, Analog ko Eleventy ka duba nunin a /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

Sai ka buɗe http://localhost:5173 ka bincika /components.

Ado da alamomin zane

Kowane ɓangare ana nuna shi da aji ɗaya na kebab-case a kan tushen abunsa. Misali, <Button> ana nuna shi a matsayin <button class="button">. Yi masa ado yadda kake so:

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

Launukan Lily na tsoho (da ake amfani da su a aikace-aikacen misali) su ne:

• Na farko: #2563eb
• Haɗari: #dc2626
• Gargaɗi: #f59e0b
• Nasara: #16a34a
• Bangon shafi: #f9fafb
• Bangon kati: #ffffff

Waɗannan shawarwari ne, ba buƙatu ba. Maye gurbinsu da launukan alamar kasuwancinka kuma Lily tana bi cikin farin ciki.

Jigogi da aka shirya

Ba ka son rubuta CSS daga farko? Lily tana kawo jigogi 57 na tunani masu zaman kansu a kundin themes/ . Kowanne takardar salo ɗaya ce da ke nufin ƙugiyoyin aji na Lily — haɗa ta kuma an yi maka ado:

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

Saitin yana rufe:

• Fannin gwamnati — NHS England, NHS Scotland da NHS Wales (kowanne a salo na marasa lafiya da na ma’aikata), GOV.UK GDS, da U.S. Web Design System.
• Wanda masu sayarwa suka ƙarfafa — Adobe Spectrum, Mozilla Protocol.
• Manufa ta gama-gari — light, dark, nord, dracula, wireframe, da kusan talatin ƙari.

Masu zaɓen jigo suna amfani da :where(...), don haka CSS ɗinka koyaushe yana yin nasara a takamaimai. Haɗa su da mai taimakon theme-picker da ke ƙasa don sauyawa lokacin gudu, ko bi koyarwar jigo.

Masu taimakon zaɓi

Kowane tsarin aiki yana da ƙananan masu zaɓe takwas, kowanne fakiti na lily-design-system-{framework}-{package} nasa (da picker-bar da ke haɗa su). Kowanne maɓallin gunki ne marar kai da ke buɗe tagar fitowa — akwatin jeri, jerin hanyoyi, fom ɗin bincike, ko (don date-time-picker) tattaunawar zaɓen kwanan wata — ba na asali ba <select>; yana da amintaccen SSR; kuma ba ya kawo CSS:

• theme-picker — yana ɗora takardun salo na jigo lokacin gudu ta hanyar canza <link>da ake sarrafawa, yana saita data-theme a kan takarda, kuma zaɓi yana adana a localStorage.
• locale-picker — yana saita lang da dir (tare da gano RTL na atomatik) don ɗakin karatunka na i18n ya bi; shi kansa ba ya fassara komai.
• text-size-picker — yana saita data-text-size a kan takarda; CSS ɗinka yana daidaita kowace ƙima da girman rubutu.
• motion-picker — yana saita data-motion a kan takarda, yana farawa daga saitin rage motsi na baƙo; CSS da rubutun aikinka suna yanke shawarar abin da za a danne.
• search-picker — maɓallin gunki da ke buɗe filin bincike; miƙawa yana zuwa shafin bincike. Yana mallakar aiki, ba zaɓi ba.
• link-picker — gunkin gida da ke buɗe menu na hanyoyin shafuka da aikace-aikacenka ya ayyana (Gida, Game da Mu, Tuntuɓe Mu, Manufar Sirri, …). Yana mallakar aiki, ba zaɓi ba.
• share-picker — yana buɗe takardar rabawa ta asali ko jerin wuraren da mai amfani ya bayar, tare da kwafin URL. Yana mallakar aiki, ba zaɓi ba: ba ya amfani da komai, ba ya adana komai.
• date-time-picker — filin rubutu tare da tattaunawar zaɓen kwanan wata ta APG don kwanan wata, lokaci, ko duka biyu. Yana mallakar ƙimar fom, ba zaɓi ba: zaren ISO yana juyawa gaba da baya zuwa <input type="date">.

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

Jerin Svelte shi ne ma’anar ƙa’ida; tashoshin React, Vue, Angular, HTML, Nunjucks, Web Components da Blazor suna daidaita da shi yarjejeniya-da-yarjejeniya. Duba koyarwar masu taimako.

Samun dama

Abubuwan suna nufin WCAG 2.2 AAA. Suna bin waɗannan tsare-tsare:

• Abubuwan HTML masu ma’ana maimakon na gama-gari <div>s.
• <label for="id"> masu haɗa lakabi da shigarwa.
• aria-labelledby / aria-describedby don nassoshi na giciye.
• aria-invalid + aria-errormessage don yanayin kuskure.
• role="alert" da aria-live don abun ciki mai canzawa.
• aria-pressed, aria-expanded, aria-current don yanayi.
• Roving tabindex don grid.

Mai amfani ne ke ba da alamomin mayar da hankali da gangan — Lily ba ta taɓa zana zoben mayar da hankali na tsoho da ya saɓa wa zanenka ba. Aikace-aikacen misali suna riƙe tsabtataccen tushen axe-core a duk hanyoyinsu.

Daidaita ƙasashen duniya

Kowace lakabi, mai riƙe wuri, saƙon kuskure da rubutun maɓalli kadara ce. Babu rubutun da aka rubuta a cikin lamba. Ɗora tsarin fassarar da ka zaɓa — Paraglide, i18next, vue-i18n, react-intl, fayilolin .resx, kowane.

Don kwanan wata, lambobi da kuɗaɗe, abubuwan suna karɓar zaren da aka riga aka tsara: kai ne ke tsara da Intl.DateTimeFormat / Intl.NumberFormat / ɗakin karatunka da ka fi so ka miƙa sakamakon.

Mai taimakon locale-picker yana sanar da yaren da aka zaɓa ga ɗakin karatunka na i18n ta hanyar saita lang da dir a kan tushen takarda.

Gwaji

Kowane ƙaramin aikin tsarin aiki yana kawo gwaje-gwajensa ta amfani da tarinsa na al’ada:

• HTML: WebDriverIO da ke gudanar da ainihin masu bincike.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (ta hanyar plugin ɗin Analog Vite).
• Nunjucks: Vitest tare da mai taimakon nuna.
• Blazor: bUnit.

Gwaje-gwajen suna amfani da masu daidaita Vitest na ciki kawai — ba taɓa jest-dom masu daidaita ba. Wannan yana sa gwaje-gwajen su zama masu ɗaukuwa. Aikace-aikacen misali suna ƙara gwaje-gwajen Playwright daga ƙarshe zuwa ƙarshe, tushen samun dama na axe-core, da duba wuraren duba masu amsawa.

Wakilan AI

Wannan shafi yana buga llms.txt da llms.json a tushensa — taswirar da aka zaɓa ta manyan shafukansa, ga kowane kayan aiki da ke bin al’adar llms.txt.

Monorepo na ƙa’ida kuma yana kawo Claude Skills: lily-design-system-skill guda biyu: ƙwarewar manufa ta gama-gari da ke rufe ra’ayoyin Lily, kalmomi da tsare-tsaren haɗawa ga duk wanda ke gini da tsarin, da lily-design-system-maintainer-skill, ƙwarewar fasaha da ke rufe tsarin fayilolin da ake buƙata na monorepo da kayan aiki ga duk wanda ke aiki a kai. Dukansu suna a tushen monorepo na ƙa’ida.

Magance matsaloli

Gudummawa

Lily matashiya ce kuma tana maraba da haɗin kai. Gudummawar da suka fi amfani a yanzu su ne:

• Sababbin abubuwa (musamman tsare-tsare daga tsarin zane da aka kafa).
• Sababbin jigogi — kowanne takardar salo ce mai zaman kanta, PR na farko mai iyaka sosai.
• Ingantaccen ado na misalai — nuna abin da zai yiwu.
• Fassarar zaren aikace-aikacen misali.
• Rahotannin kurakurai tare da ƙaramin sake-samarwa.
• Binciken samun dama tare da masu karanta allo da fasahar taimako.

Buɗe issues da PRs a github.com/LilyDesignSystem/lily-design-system.

Al’umma da tallafi

• Tambayoyi da rahotannin kurakurai — buɗe issue a github.com/LilyDesignSystem/lily-design-system.
• Imel — mai kulawa yana karantawa joel@joelparkerhenderson.com kuma yana maraba da haɗin kai, jagora da ra’ayi.
• Madubai — ana kuma tura Lily zuwa Codeberg da GitLab, don ka iya shiga daga forge ɗin da ka fi so.
• Hali — aikin yana bin ƙa’idar hali ta yau da kullum; ka kasance mai alheri, ka ɗauka da kyakkyawar niyya.

FAQ