Darba sākšana ar Lily

Instalēšana

Lily dzīvo vienā Git monorepo ar direktoriju katra ietvara bezgalvas bibliotēkai, palīgu pakotnēm un paraugu lietotnei. Ātrākais veids, kā to izmēģināt, ir klonēt monorepo un atvērt bezgalvas bibliotēku savai tehnoloģiju kaudzei:

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

Tas pats paraugs darbojas citiem ietvariem:

• @lilydesignsystem/html-headless — instalēšana nav vajadzīga; kopējiet .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

Bezgalvas bibliotēkas ir paredzētas klonēšanai vai iekļaušanai projektā — uzskatiet pirmkodu par patiesības avotu un kopējiet, kas jums vajadzīgs. iestatījumu palīgi papildus tiek piegādāti kā instalējamas pakotnes ar būvēšanas un publicēšanas konveijeru (npm JS ietvariem, NuGet Blazor).

Bezgalvas komponentes izmantošana

Bezgalvas komponentes piegādā semantisku HTML, ARIA un īpašības — bet ne CSS. Lūk, Button katrā ietvarā:

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

Stilizēta piemēra izmantošana

Paraugu lietotnes ietver CSS, maršrutus un pilnas demonstrācijas lapas. Ātrākais veids eksperimentēšanai ir palaist SvelteKit, Next, Nuxt, Analog vai Eleventy paraugu lietotni un apskatīt demonstrāciju uz /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

Pēc tam atveriet http://localhost:5173 un pārlūkojiet /components.

Stilizēšana un dizaina marķieri

Katra komponente tiek renderēta ar vienu kebab-case klasi savā saknes elementā. Piemēram, <Button> renderējas kā <button class="button">. Stilizējiet, kā vēlaties:

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

Lily noklusējuma krāsu palete (izmantota paraugu lietotnēs) ir:

• Primārā: #2563eb
• Briesmas: #dc2626
• Brīdinājums: #f59e0b
• Panākumi: #16a34a
• Lapas fons: #f9fafb
• Kartes fons: #ffffff

Tie ir ieteikumi, nevis prasības. Nomainiet tos pret sava zīmola paleti, un Lily priecīgi sekos.

Gatavās tēmas

Nevēlaties rakstīt CSS no nulles? Lily piegādā 57 patstāvīgas atsauces tēmas direktorijā themes/ . Katra ir viena stilu lapa, kas mērķē uz Lily klases āķiem — saistiet to, un esat stilizēts:

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

Kopa aptver:

• Publiskais sektors — NHS England, NHS Scotland un NHS Wales (katra pacientu un praktiķu variantos), GOV.UK GDS un U.S. Web Design System.
• Piegādātāju iedvesmotas — Adobe Spectrum, Mozilla Protocol.
• Vispārīgai lietošanai — light, dark, nord, dracula, wireframe un vēl trīsdesmit.

Tēmu selektori izmanto :where(...), tāpēc jūsu pašu CSS vienmēr uzvar specifiskumā. Savienojiet tos ar palīgu theme-picker zemāk pārslēgšanai izpildes laikā vai sekojiet tēmu apmācībai.

Iestatījumu palīgi

Katram ietvaram ir astoņi mazi atlasītāji, katrs sava lily-design-system-{framework}-{package} pakotne (un picker-bar , kas tos saliek kopā). Katrs ir bezgalvas ikonas poga, kas atver uznirstošo logu — saraksta lodziņu, saišu sarakstu, meklēšanas veidlapu vai (date-time-picker gadījumā) datuma izvēles dialogu — nevis dabiskais <select>; ir drošs SSR; un nepiegādā CSS:

• theme-picker — ielādē tēmu stilu lapas izpildes laikā, nomainot pārvaldītu <link>, iestata data-theme dokumentā un pēc izvēles saglabā localStorage.
• locale-picker — iestata lang un dir (ar automātisku RTL noteikšanu), lai jūsu i18n bibliotēka varētu sekot; pats neko netulko.
• text-size-picker — iestata data-text-size dokumentā; jūsu CSS katru vērtību sasaista ar fonta izmēru.
• motion-picker — iestata data-motion dokumentā, sākot no apmeklētāja samazinātas kustības iestatījuma; jūsu CSS un skripti izlemj, ko apspiest.
• search-picker — ikonas poga, kas atver meklēšanas lauku; iesniegšana pāriet uz meklēšanas lapu. Pieder darbība, nevis iestatījums.
• link-picker — mājas ikona, kas atver izvēlni ar lapu saitēm, ko definē jūsu lietotne (Sākums, Par mums, Sazināties, Privātuma politika, …). Pieder darbība, nevis iestatījums.
• share-picker — atver dabisko kopīgošanas lapu vai lietotāja nodrošinātu galamērķu sarakstu, plus URL kopēšanu. Pieder darbība, nevis iestatījums: neko nepiemēro, neko nesaglabā.
• date-time-picker — teksta lauks plus APG datuma izvēles dialogs datumam, laikam vai abiem. Pieder veidlapas vērtība, nevis iestatījums: ISO virkne tiek pārveidota turp un atpakaļ uz <input type="date">.

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

Svelte katalogs ir kanoniskā atsauce; React, Vue, Angular, HTML, Nunjucks, Web Components un Blazor porti tam atbilst līgums pa līgumam. Skatiet palīgu apmācību.

Pieejamība

Komponentes mērķē uz WCAG 2.2 AAA. Tās seko šiem paraugiem:

• Semantiski HTML elementi, nevis vispārīgi <div>s.
• <label for="id"> , kas saista etiķetes ar ievadēm.
• aria-labelledby / aria-describedby savstarpējām atsaucēm.
• aria-invalid + aria-errormessage kļūdu stāvokļiem.
• role="alert" un aria-live dinamiskam saturam.
• aria-pressed, aria-expanded, aria-current stāvoklim.
• Roving tabindex režģiem.

Fokusa indikatorus apzināti nodrošina lietotājs — Lily nekad nezīmē noklusējuma fokusa gredzenu, kas ietu pretrunā ar jūsu dizainu. Paraugu lietotnes uztur tīru axe-core bāzes līniju visos savos maršrutos.

Internacionalizācija

Katra etiķete, vietturis, kļūdas ziņojums un pogas teksts ir īpašība. Iekodētu virkņu nav. Pieslēdziet izvēlēto tulkošanas ietvaru — Paraglide, i18next, vue-i18n, react-intl, .resx faili, jebkas.

Datumiem, skaitļiem un valūtām komponentes pieņem iepriekš formatētas virknes: jūs formatējat ar Intl.DateTimeFormat / Intl.NumberFormat / savu iecienīto bibliotēku un nododat rezultātu.

Palīgs locale-picker signalizē izvēlēto lokāli jūsu i18n bibliotēkai, iestatot lang un dir dokumenta saknē.

Testēšana

Katrs ietvara apakšprojekts piegādā savus testus, izmantojot tā idiomātisko kaudzi:

• HTML: WebDriverIO, kas palaiž īstas pārlūkprogrammas.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (izmantojot Analog Vite spraudni).
• Nunjucks: Vitest ar renderēšanas palīgu.
• Blazor: bUnit.

Testi izmanto tikai Vitest iebūvētos salīdzinātājus — nekad jest-dom salīdzinātājus. Tas uztur testu komplektus pārnēsājamus. Paraugu lietotnes pievieno Playwright pilnās ķēdes komplektus, axe-core pieejamības bāzes līnijas un adaptīvo skatlogu pārskatu.

MI aģenti

Šī vietne publicē llms.txt un llms.json savā saknē — kurētu savu svarīgāko lapu karti, jebkuram rīkam, kas seko llms.txt konvencijai.

Kanoniskais monorepo papildus piegādā divas Claude Skills: lily-design-system-skill: vispārīgas nozīmes prasmi, kas aptver Lily jēdzienus, terminoloģiju un salikšanas paraugus ikvienam, kas būvē ar sistēmu, un lily-design-system-maintainer-skill, tehnisku prasmi, kas aptver monorepo obligāto failu izkārtojumu un rīkus ikvienam, kas ar to strādā. Abas atrodas kanoniskā monorepo saknē.

Problēmu novēršana

Ieguldījums

Lily ir jauns un sveic sadarbību. Visnoderīgākie ieguldījumi pašlaik ir:

• Jaunas komponentes (īpaši paraugi no iedibinātām dizaina sistēmām).
• Jaunas tēmas — katra ir viena patstāvīga stilu lapa, labi norobežots pirmais PR.
• Labāka piemēru stilizēšana — parādiet, kas ir iespējams.
• Paraugu lietotņu virkņu tulkojumi.
• Kļūdu ziņojumi ar minimālu atkārtojumu.
• Pieejamības auditi ar ekrāna lasītājiem un palīgtehnoloģijām.

Atveriet issue un PR vietnē github.com/LilyDesignSystem/lily-design-system.

Kopiena un atbalsts

• Jautājumi un kļūdu ziņojumi — atveriet issue vietnē github.com/LilyDesignSystem/lily-design-system.
• E-pasts — uzturētājs lasa joel@joelparkerhenderson.com un sveic sadarbību, norādījumus un atsauksmes.
• Spoguļi — Lily tiek arī nosūtīts uz Codeberg un GitLab, lai varētu piedalīties no jums vēlamā forge.
• Uzvedība — projekts seko standarta uzvedības kodeksam; esiet laipni, pieņemiet labticību.

BUJ