Доводы в пользу Lily

Начните со своего дизайна

Ваша команда уже знает, как должен выглядеть ваш продукт. Lily отталкивается именно от этого: она предоставляет то, что действительно трудно сделать правильно и дорого переделывать, — верный семантический элемент, состояния ARIA, контракт клавиатуры, управление фокусом — и оставляет каждое визуальное решение полностью и с радостью вам. Ваш CSS — это облик дизайн-системы с первого дня.

Поскольку у каждого компонента есть стабильный класс-зацепка и чистая структура, ваше оформление остаётся вашим при любом обновлении, а доступность под ним продолжает работать версия за версией.

Что обещает Lily

• Доступность по умолчанию. WCAG 2.2 AAA — цель для каждого компонента. Паттерны следуют практикам WAI-ARIA; любой интерактивный компонент управляется с клавиатуры по документированному контракту; примеры приложений сохраняют чистый базовый уровень axe-core.
• Интернационализация по замыслу. Каждая строка, видимая пользователю, — каждая подпись, ошибка и объявление — это свойство со стабильными именами во всех фреймворках, поэтому перевод происходит естественно. Письмо справа налево и двунаправленный текст наследуются от вашего dir. Компоненты, зависящие от локали, получают её как свойство — всегда явно.
• Один каталог, восемь фреймворков. Те же 571 компонент (536 — в виде нативных Web Components) с теми же классами-зацепками и соглашениями о свойствах в HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks и Web Components. Ваш CSS и знания вашей команды переносятся между стеками.
• Независимость от подхода к CSS. Один стабильный класс в kebab-case на корень компонента. Семантический CSS, утилиты Tailwind, CSS-in-JS или одна из 45 готовых тем — Lily принимает всё это и тактично не мешает.
• Бесплатно, навсегда, на ваших условиях. Открытый исходный код по вашему выбору под лицензией BSD, MIT, Apache-2.0, GPL-2.0 или GPL-3.0. Никаких платных тарифов, лицензий на рабочие места и телеметрии.

Глубина там, где это важно

Помимо обычных кнопок и диалогов, каталог идёт дальше большинства:

• Паттерны для государственного сектора, изученные по дизайн-системам NHS UK, GOV.UK, USWDS и ONS: сводки ошибок, предупреждающие блоки, списки-сводки, баннеры стадии, ссылки пропуска.
• 140 компонентов национальных персональных идентификаторов: медицинские, национальные удостоверения, налоговые и паспортные идентификаторы более чем 50 стран, каждый с документированным форматом и алгоритмом проверки.
• Редакционные и скроллителлинг-примитивы, адаптированные из Reuters Graphics: макеты статей, скроллеры, временные шкалы, плиточные карты.
• Помощники выбора — небольшие пакеты, каждый из которых целиком отвечает за одно взаимодействие: переключение темы (с загрузкой таблицы стилей во время выполнения), язык, размер текста, уменьшение движения, поиск, ссылки на страницы, функция «Поделиться» и ввод даты и времени. Каждый — это headless-кнопка с иконкой, открывающая всплывающее окно (а не нативный <select>), со встроенным сохранением состояния и безопасностью для SSR.

Темы для государственного сектора — из коробки

Lily включает 45 самостоятельных эталонных тем, напрямую нацеленных на её классы-зацепки: NHS England, NHS Scotland и NHS Wales (каждая в вариантах для пациентов и для специалистов), GOV.UK, USWDS, палитры по мотивам Adobe Spectrum и Mozilla Protocol, а также набор универсальных светлых и тёмных тем. Подключите одну таблицу стилей — и появится оформление государственного уровня; помощник theme-picker переключает их во время выполнения.

Как Lily соотносится с другими

Мы ведём честное сравнение с другими дизайн-системами по компонентам — стилизованными и headless, коммерческими и государственными. Если другая библиотека подойдёт вам лучше, сравнение покажет это; Lily учится у всех и открыто указывает свои источники вдохновения.

Кто за этим стоит

Lily — молодой независимый проект с открытым исходным кодом, который рад сотрудничеству, советам и отзывам. История и источники вдохновения — в разделе О проекте. Всё — спецификация, тесты, дорожная карта, даже инструменты аудита — открыто на github.com/LilyDesignSystem.

Помогите Lily расти

Если Lily вам полезна, самое ценное, что вы можете сделать:

• Поставить звезду и рассказать другим. Поставьте звезду основному репозиторию и покажите коллеге каталог — известность — самый дефицитный ресурс молодого проекта.
• Построить что-нибудь и рассказать нам. Отчёты о реальном использовании — что получилось, что могло бы быть удобнее — влияют на дорожную карту сильнее всего.
• Проверить доступность. Проверки со скринридерами (VoiceOver, NVDA, JAWS) на примерах приложений бесценны; сообщайте о найденном.
• Предложить тему или перевод. Оба варианта — самостоятельные и чётко ограниченные первые вклады.
• Поделиться находками с минимальным воспроизведением в нужном репозитории или написать на joel@joelparkerhenderson.com.