Внедрение Shoelace Web Components в дизайн-систему

Внедрение Shoelace Web Components в дизайн-систему

Написание UI-компонентов с нуля — дорогое удовольствие. Каждая кнопка, инпут или диалог требует проектирования, вёрстки, тестирования на доступность и кросс-браузерность. Если проект живёт в нескольких фреймворках (React, Vue, Angular), трудоёмкость растёт линейно. Shoelace (теперь Web Awesome) решает эту проблему: готовая библиотека из 50+ Web Components, не привязанная к фреймворку. Она кастомизируется через CSS-переменные и части, поддерживает тёмную тему и соответствует стандартам WCAG.

Наша команда внедряет Shoelace с 2019 года. За это время мы реализовали 30+ проектов — от стартапов до enterprise-систем. Ниже разберём, как интеграция Shoelace ускоряет разработку в 3–5 раз и почему это выгоднее кастомной разработки.

Почему Shoelace сокращает время разработки в 3–5 раз?

Сравним: написать один компонент «Select» с нуля — 3–5 дней с учётом тестирования и a11y. Shoelace даёт готовый <sl-select> с поддержкой клавиатуры, ARIA-атрибутов и тёмной темы. Вам остаётся лишь переопределить цвета под бренд через CSS-переменные. Итог: 2–4 дня на всю библиотеку вместо 2–3 месяцев на свою.

Сравнение затрат:

Экономия на разработке превышает 60% уже на первом проекте. Переход на Shoelace окупается за счёт сокращения времени разработки и снижения затрат на поддержку.

Как интегрировать Shoelace с React?

Интеграция Shoelace с React требует минимум кода:

1. Установите пакет: npm install @shoelace-style/shoelace
2. Зарегистрируйте необходимые компоненты в отдельном файле (например, shoelace-setup.ts). Мы используем cherry-pick импорт с tree-shaking, чтобы уменьшить бандл в 10 раз по сравнению с полным импортом.
3. Импортируйте тему и настройте путь к ассетам.

Пример типизированного React-компонента модального окна:

import { useRef } from 'react'
import type SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.js'
import '../shoelace-setup'

export function ContactModal() {
  const dialogRef = useRef<SlDialog>(null)

  const openDialog = () => dialogRef.current?.show()
  const closeDialog = () => dialogRef.current?.hide()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // обработка формы
    closeDialog()
  }

  return (
    <>
      <sl-button variant="primary" onClick={openDialog}>
        Написать нам
      </sl-button>

      <sl-dialog ref={dialogRef} label="Контактная форма">
        <form onSubmit={handleSubmit}>
          <sl-input label="Имя" required placeholder="Иван Иванов" style={{ marginBottom: '16px' }} />
          <sl-input label="Email" type="email" required placeholder="[email protected]" style={{ marginBottom: '16px' }} />
          <sl-textarea label="Сообщение" rows={4} required />
        </form>
        <sl-button slot="footer" variant="default" onClick={closeDialog}>Отмена</sl-button>
        <sl-button slot="footer" variant="primary" type="submit">Отправить</sl-button>
      </sl-dialog>
    </>
  )
}

Для типизации JSX добавьте декларации модулей для всех компонентов. Это можно сгенерировать через custom-elements.json, поставляемый с библиотекой.

Кастомизация под ваш бренд

Shoelace построен на дизайн-токенах. Вы переопределяете цвета, шрифты, радиусы и другие переменные CSS — и вся библиотека меняет внешний вид. Для точечной стилизации используйте CSS-части (::part()). Мы также подготавливаем для команды гайд по стилизации с примерами.

/* Глобальные токены */
:root {
    --sl-color-primary-600: hsl(262, 75%, 45%);
    --sl-font-sans: 'Inter', system-ui, sans-serif;
    --sl-border-radius-medium: 8px;
    --sl-transition-medium: 200ms ease;
}

/* Стилизация отдельной кнопки */
sl-button::part(base) {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

sl-button[variant="primary"]::part(base) {
    background: linear-gradient(135deg, #7000ff, #b600ff);
    border: none;
}

Тёмная тема — за 5 минут

Переключение темы реализуется добавлением класса sl-theme-dark или sl-theme-light на <html>. Мы подключаем сохранённую тему из localStorage и учитываем prefers-color-scheme. Весь код инициализации занимает 10 строк.

Подробнее о темизации — в официальной документации Shoelace: https://shoelace.style/getting-started/themes

Процесс внедрения

Что входит в работу

• Настройка Shoelace с cherry-pick импортом (tree-shaking) — размер бандла уменьшается в 10 раз.
• Кастомизация всех компонентов под вашу дизайн-систему.
• Интеграция с используемым фреймворком (React, Vue, Angular).
• Поддержка тёмной и светлой темы.
• Документация по использованию и кастомизации.
• Обучение команды (2–3 часа).
• Гарантия совместимости и бесплатные обновления в течение месяца.