תחילת העבודה עם Lily

התקנה

Lily חיה במונוריפו Git אחד, עם ספרייה לכל מסגרת עבור הספרייה ללא הראש, חבילות העוזרים ואפליקציית הדוגמה. הדרך המהירה ביותר לנסות היא לשכפל את המונוריפו ולפתוח את הספרייה ללא הראש עבור הסביבה שלכם:

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

הספריות ללא הראש מתוכננות לשכפול או ל-vendoring — התייחסו למקור כאל מקור האמת והעתיקו את מה שאתם צריכים. עוזרי ההעדפות מגיעים בנוסף כחבילות הניתנות להתקנה עם צינור בנייה ופרסום (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 כוללת 57 ערכות ייחוס עצמאיות בספרייה themes/ . כל אחת היא גיליון סגנון אחד שמכוון אל ווי המחלקה של 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 — פותח את חלון השיתוף המקורי או רשימת יעדים שסופקה על ידי הצרכן, ובנוסף העתקת כתובת. מחזיק בפעולה, לא בהעדפה: אינו מחיל דבר, אינו שומר דבר.
• 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 בכל הנתיבים שלהן.

בינאום

כל תווית, מציין מיקום, הודעת שגיאה וטקסט כפתור הם מאפיין. אין מחרוזות מקודדות. חברו את מסגרת התרגום שלכם — 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).
• Nunjucks: Vitest עם עוזר רינדור.
• Blazor: bUnit.

הבדיקות משתמשות רק בהתאמות המובנות של Vitest — לעולם לא jest-dom התאמות. כך חבילות הבדיקות נשארות ניידות. אפליקציות הדוגמה מוסיפות חבילות Playwright מקצה לקצה, קווי בסיס נגישות של axe-core וסריקת חלונות תצוגה רספונסיבית.

סוכני בינה מלאכותית

אתר זה מפרסם llms.txt ו- llms.json בשורשו — מפה אצורה של העמודים החשובים ביותר שלו, לכל כלי שעוקב אחר מוסכמת llms.txt.

המונוריפו הקנוני שולח בנוסף שתי Claude Skills: lily-design-system-skill, מיומנות לשימוש כללי המכסה את מושגי Lily, המינוח ותבניות ההרכבה עבור כל מי שבונה עם המערכת, ו lily-design-system-maintainer-skill, מיומנות טכנית המכסה את פריסת הקבצים הנדרשת וכלי המונוריפו עבור כל מי שעובד עליו. שתיהן יושבות בשורש המונוריפו הקנוני.

פתרון בעיות

תרומה

Lily צעירה ומקבלת בברכה שיתוף פעולה. התרומות השימושיות ביותר כרגע הן:

• רכיבים חדשים (במיוחד תבניות ממערכות עיצוב מבוססות).
• ערכות נושא חדשות — כל אחת היא גיליון סגנון עצמאי אחד, PR ראשון מוגדר היטב.
• עיצוב דוגמאות טוב יותר — הראו מה אפשרי.
• תרגומי מחרוזות של אפליקציות הדוגמה.
• דיווחי באגים עם שחזור מינימלי.
• ביקורות נגישות עם קוראי מסך וטכנולוגיות מסייעות.

פתחו issues ו-PRs ב- github.com/LilyDesignSystem/lily-design-system.

קהילה ותמיכה

• שאלות ודיווחי באגים — פתחו issue ב- github.com/LilyDesignSystem/lily-design-system.
• דוא״ל — המתחזק קורא את joel@joelparkerhenderson.com ומקבל בברכה שיתוף פעולה, הכוונה ומשוב.
• מראות — Lily נדחפת גם אל Codeberg ו- GitLab, כך שתוכלו להשתתף מהפורג׳ שאתם מעדיפים.
• התנהגות — הפרויקט עוקב אחר קוד התנהגות סטנדרטי; היו אדיבים, הניחו תום לב.

שאלות נפוצות