ចាប់ផ្តើមជាមួយ Lily

ដំឡើង

Lily រស់នៅក្នុង monorepo Git មួយ ជាមួយថតសម្រាប់បណ្ណាល័យគ្មានក្បាល កញ្ចប់ជំនួយការ និងកម្មវិធីគំរូរបស់ក្របខណ្ឌនីមួយៗ។ វិធីលឿនបំផុតក្នុងការសាកល្បងគឺក្លូន monorepo ហើយបើកបណ្ណាល័យគ្មានក្បាលសម្រាប់ស្ទែករបស់អ្នក៖

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

លំនាំដូចគ្នាដំណើរការសម្រាប់ក្របខណ្ឌផ្សេងទៀត៖

• @lilydesignsystem/html-headless — មិនត្រូវការដំឡើងទេ; ចម្លង .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

បណ្ណាល័យគ្មានក្បាលត្រូវបានរចនាឱ្យក្លូន ឬ vendor — ចាត់ទុកប្រភពជាប្រភពនៃសេចក្តីពិត ហើយចម្លងអ្វីដែលអ្នកត្រូវការ។ ជំនួយការចំណូលចិត្ត ក៏មកជាកញ្ចប់ដែលអាចដំឡើងបានដោយមានបំពង់សាងសង់ និងផ្សាយ (npm សម្រាប់ក្របខណ្ឌ JS, NuGet សម្រាប់ Blazor)។

ប្រើសមាសភាគគ្មានក្បាល

សមាសភាគគ្មានក្បាលដឹកជញ្ជូន HTML ន័យវិទ្យា ARIA និងលក្ខណៈសម្បត្តិ — ប៉ុន្តែគ្មាន CSS ទេ។ នេះជា Button ក្នុងក្របខណ្ឌនីមួយៗ៖

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

ប្រើឧទាហរណ៍មានរចនាប័ទ្ម

កម្មវិធីគំរូរួមមាន CSS ផ្លូវ និងទំព័របង្ហាញពេញលេញ។ វិធីលឿនបំផុតក្នុងការពិសោធន៍គឺចាប់ផ្តើមកម្មវិធីគំរូ SvelteKit, Next, Nuxt, Analog ឬ Eleventy ហើយមើលការបង្ហាញនៅ /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

បន្ទាប់មកបើក http://localhost:5173 ហើយរុករក /components.

រចនាប័ទ្ម និងតូខឹនរចនា

សមាសភាគនីមួយៗបង្ហាញជាមួយថ្នាក់ kebab-case មួយនៅលើធាតុឫសរបស់វា។ ឧទាហរណ៍ <Button> បង្ហាញ <button class="button">។ ដាក់រចនាប័ទ្មវាតាមចិត្ត៖

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

ក្បាលពណ៌ Lily លំនាំដើម (ប្រើក្នុងកម្មវិធីគំរូ) គឺ៖

• ចម្បង៖ #2563eb
• គ្រោះថ្នាក់៖ #dc2626
• ការព្រមាន៖ #f59e0b
• ជោគជ័យ៖ #16a34a
• ផ្ទៃខាងក្រោយទំព័រ៖ #f9fafb
• ផ្ទៃខាងក្រោយកាត៖ #ffffff

ទាំងនេះជាការណែនាំ មិនមែនតម្រូវការទេ។ ជំនួសវាដោយក្បាលពណ៌ម៉ាកផ្ទាល់ខ្លួនរបស់អ្នក ហើយ Lily នឹងមកតាមដោយអំណរ។

ស្បែករួចជាស្រេច

មិនចង់សរសេរ CSS ពីសូន្យ? Lily មកជាមួយ ស្បែកយោងឯករាជ្យ ៥៧ ក្នុងថត themes/ ។ នីមួយៗជាសន្លឹករចនាប័ទ្មមួយដែលកំណត់គោលដៅ class hook របស់ Lily — ភ្ជាប់វា ហើយអ្នកមានរចនាប័ទ្ម៖

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

សំណុំនេះគ្របដណ្តប់៖

• វិស័យសាធារណៈ — NHS England, NHS Scotland និង NHS Wales (កំណែសម្រាប់អ្នកជំងឺ និងអ្នកអនុវត្តនីមួយៗ) GOV.UK GDS និង U.S. Web Design System។
• បំផុសដោយអ្នកលក់ — Adobe Spectrum, Mozilla Protocol។
• គោលបំណងទូទៅ — light, dark, nord, dracula, wireframe និងប្រហែលសាមសិបទៀត។

ឧបករណ៍ជ្រើសស្បែកប្រើ :where(...)ដូច្នេះ CSS របស់អ្នកឈ្នះជានិច្ចលើភាពជាក់លាក់។ ផ្គូផ្គងពួកវាជាមួយជំនួយការ theme-picker ខាងក្រោមសម្រាប់ការប្តូរពេលដំណើរការ ឬធ្វើតាម មេរៀនស្បែក.

ជំនួយការចំណូលចិត្ត

ក្របខណ្ឌនីមួយៗមានឧបករណ៍ជ្រើសតូចៗប្រាំបី ដែលនីមួយៗនៅក្នុងកញ្ចប់ lily-design-system-{framework}-{package} ផ្ទាល់ខ្លួន (និង picker-bar ដែលផ្គុំពួកវា)។ នីមួយៗជាប៊ូតុងរូបតំណាងគ្មានក្បាលដែលបើកផ្ទាំងលេចឡើង — ប្រអប់បញ្ជី បញ្ជីតំណ ទម្រង់ស្វែងរក ឬ (សម្រាប់ date-time-picker) ប្រអប់ជ្រើសកាលបរិច្ឆេទ — មិនមែនជា <select>ដើមទេ; សុវត្ថិភាព SSR; ហើយមកដោយគ្មាន CSS៖

• theme-picker — ផ្ទុកសន្លឹករចនាប័ទ្មស្បែកពេលដំណើរការដោយប្តូរ <link>ដែលគ្រប់គ្រង កំណត់ data-theme នៅលើឯកសារ ហើយជាជម្រើសរក្សាទុកទៅ localStorage.
• locale-picker — កំណត់ lang និង dir (ជាមួយការរកឃើញ RTL ស្វ័យប្រវត្តិ) ដើម្បីឱ្យបណ្ណាល័យ i18n របស់អ្នកអាចតាម; វាមិនបកប្រែដោយខ្លួនឯងទេ។
• text-size-picker — កំណត់ data-text-size នៅលើឯកសារ; CSS របស់អ្នកផ្គូផ្គងតម្លៃនីមួយៗទៅនឹងទំហំពុម្ពអក្សរ។
• motion-picker — កំណត់ data-motion នៅលើឯកសារ ចាប់ផ្តើមពីការកំណត់ចលនាថយចុះរបស់អ្នកទស្សនា; CSS និងស្គ្រីបរបស់អ្នកសម្រេចថាអ្វីត្រូវបង្ក្រាប។
• search-picker — ប៊ូតុងរូបតំណាងដែលបើកវាលស្វែងរក; ការដាក់ស្នើរុករកទៅទំព័រស្វែងរក។ ជាម្ចាស់សកម្មភាពមួយ មិនមែនចំណូលចិត្តទេ។
• link-picker — រូបតំណាងផ្ទះដែលបើកម៉ឺនុយនៃតំណទំព័រដែលកម្មវិធីរបស់អ្នកកំណត់ (ទំព័រដើម អំពីយើង ទាក់ទងយើង គោលការណ៍ឯកជនភាព …)។ ជាម្ចាស់សកម្មភាពមួយ មិនមែនចំណូលចិត្តទេ។
• share-picker — បើកសន្លឹកចែករំលែកដើម ឬបញ្ជីគោលដៅដែលអ្នកប្រើប្រាស់ផ្តល់ បូកចម្លង URL។ ជាម្ចាស់សកម្មភាពមួយ មិនមែនចំណូលចិត្តទេ៖ មិនអនុវត្តអ្វី មិនរក្សាទុកអ្វីទេ។
• date-time-picker — វាលអត្ថបទបូកប្រអប់ជ្រើសកាលបរិច្ឆេទ APG សម្រាប់កាលបរិច្ឆេទ ពេលវេលា ឬទាំងពីរ។ ជាម្ចាស់តម្លៃទម្រង់មួយ មិនមែនចំណូលចិត្តទេ៖ ខ្សែអក្សរ ISO ធ្វើដំណើរទៅមកទៅ <input type="date">.

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

កាតាឡុក Svelte ជាឯកសារយោងស្តង់ដារ; ច្រកផ្សេងទៀត React, Vue, Angular, HTML, Nunjucks, Web Components និង Blazor ត្រូវគ្នានឹងវាកិច្ចសន្យាដោយកិច្ចសន្យា។ មើល មេរៀនជំនួយការ.

ភាពងាយស្រួលចូលប្រើ

សមាសភាគមានគោលដៅ WCAG 2.2 AAA។ ពួកវាធ្វើតាមលំនាំទាំងនេះ៖

• ធាតុ HTML ន័យវិទ្យាជាជាងទូទៅ <div>s.
• <label for="id"> ភ្ជាប់ស្លាកទៅនឹងវាលបញ្ចូល។
• aria-labelledby / aria-describedby សម្រាប់ឯកសារយោងឆ្លង។
• aria-invalid + aria-errormessage សម្រាប់ស្ថានភាពកំហុស។
• role="alert" និង aria-live សម្រាប់មាតិកាថាមវន្ត។
• aria-pressed, aria-expanded, aria-current សម្រាប់ស្ថានភាព។
• Roving tabindex សម្រាប់ក្រឡាចត្រង្គ។

សូចនាកររូបតំណាងការផ្តោតត្រូវបានផ្តល់ដោយអ្នកប្រើប្រាស់ដោយចេតនា — Lily មិនដែលគូររង្វង់ផ្តោតលំនាំដើមដែលប៉ះទង្គិចនឹងការរចនារបស់អ្នកទេ។ កម្មវិធីគំរូរក្សា axe-core baseline ស្អាតនៅទូទាំងផ្លូវរបស់វា។

អន្តរជាតិកម្ម

ស្លាកនីមួយៗ អត្ថបទជំនួស សារកំហុស និងអត្ថបទប៊ូតុងជាលក្ខណៈសម្បត្តិ។ គ្មានអក្សរសរសេរជាប់ក្នុងកូដទេ។ ដាក់ក្របខណ្ឌបកប្រែដែលអ្នកចូលចិត្ត — Paraglide, i18next, vue-i18n, react-intl, ឯកសារ .resx អ្វីក៏បាន។

សម្រាប់កាលបរិច្ឆេទ លេខ និងរូបិយប័ណ្ណ សមាសភាគទទួលខ្សែអក្សរដែលបានធ្វើទ្រង់ទ្រាយរួច៖ អ្នកធ្វើទ្រង់ទ្រាយជាមួយ Intl.DateTimeFormat / Intl.NumberFormat / បណ្ណាល័យដែលអ្នកចូលចិត្ត ហើយបញ្ជូនលទ្ធផល។

ជំនួយការ locale-picker ផ្តល់សញ្ញាតំបន់ភាសាដែលបានជ្រើសរើសដល់បណ្ណាល័យ i18n របស់អ្នកដោយកំណត់ lang និង dir នៅលើឫសឯកសារ។

ការធ្វើតេស្ត

ក្របខណ្ឌគម្រោងរងនីមួយៗដឹកជញ្ជូនតេស្តផ្ទាល់ខ្លួនដោយប្រើស្ទែកបែបតាមមាត់របស់វា៖

• HTML៖ WebDriverIO ដំណើរការកម្មវិធីរុករកពិតប្រាកដ។
• Svelte៖ Vitest + @testing-library/svelte.
• React៖ Vitest + @testing-library/react.
• Vue៖ Vitest + @testing-library/vue.
• Angular៖ Vitest + TestBed (តាមរយៈ Analog Vite plugin)។
• Nunjucks៖ Vitest ជាមួយជំនួយការបង្ហាញ។
• Blazor៖ bUnit។

តេស្តប្រើ តែ matcher ដែលភ្ជាប់មកជាមួយរបស់ Vitest ប៉ុណ្ណោះ — មិនដែល jest-dom matcher ទេ។ នេះរក្សាសំណុំតេស្តឱ្យអាចចល័តបាន។ កម្មវិធីគំរូបន្ថែមសំណុំ Playwright ពីចុងដល់ចុង baseline ភាពងាយស្រួលចូលប្រើ axe-core និងការស្កេន viewport ឆ្លើយតប។

ភ្នាក់ងារ AI

គេហទំព័រនេះបោះពុម្ព llms.txt និង llms.json នៅឫសរបស់វា — ផែនទីជ្រើសរើសនៃទំព័រសំខាន់បំផុតរបស់វា សម្រាប់ឧបករណ៍ណាមួយដែលធ្វើតាម អនុសញ្ញា llms.txt.

monorepo ស្តង់ដារក៏ដឹកជញ្ជូនពីរ Claude Skills: lily-design-system-skillជំនាញទូទៅដែលគ្របដណ្តប់គំនិត វាក្យស័ព្ទ និងលំនាំនៃការផ្សំរបស់ Lily សម្រាប់អ្នកដែលសាងសង់ជាមួយប្រព័ន្ធ និង lily-design-system-maintainer-skillជំនាញបច្ចេកទេសដែលគ្របដណ្តប់ប្លង់ឯកសារតម្រូវ និងឧបករណ៍របស់ monorepo សម្រាប់អ្នកដែលធ្វើការលើវា។ ទាំងពីរស្ថិតនៅឫសនៃ monorepo ស្តង់ដារ.

ការដោះស្រាយបញ្ហា

ការចូលរួមចំណែក

Lily នៅវ័យក្មេង ហើយស្វាគមន៍ការសហការ។ ការចូលរួមចំណែកមានប្រយោជន៍បំផុតនៅពេលនេះគឺ៖

• សមាសភាគថ្មី (ជាពិសេសលំនាំពីប្រព័ន្ធរចនាដែលបានបង្កើតឡើង)។
• ស្បែកថ្មី — នីមួយៗជាសន្លឹករចនាប័ទ្មឯករាជ្យមួយ PR ដំបូងដែលមានវិសាលភាពល្អ។
• រចនាប័ទ្មឧទាហរណ៍ល្អជាងមុន — បង្ហាញអ្វីដែលអាចធ្វើបាន។
• ការបកប្រែអក្សរកម្មវិធីគំរូ។
• របាយការណ៍កំហុសជាមួយការផលិតឡើងវិញតិចតួចបំផុត។
• សវនកម្មភាពងាយស្រួលចូលប្រើជាមួយកម្មវិធីអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយ។

បើក issue និង PR នៅ github.com/LilyDesignSystem/lily-design-system.

សហគមន៍ និងការគាំទ្រ

• សំណួរ និងរបាយការណ៍កំហុស — បើក issue នៅ github.com/LilyDesignSystem/lily-design-system.
• អ៊ីមែល — អ្នកថែទាំអាន joel@joelparkerhenderson.com ហើយស្វាគមន៍ការសហការ ការណែនាំ និងមតិកែលម្អ។
• កញ្ចក់ — Lily ក៏ត្រូវបានរុញទៅ Codeberg និង GitLabដូច្នេះអ្នកអាចចូលរួមពី forge ដែលអ្នកចូលចិត្ត។
• អាកប្បកិរិយា — គម្រោងធ្វើតាមក្រមប្រតិបត្តិស្តង់ដារ; សូមមានចិត្តល្អ សន្មត់ថាមានចេតនាល្អ។

សំណួរញឹកញាប់