LARNILANE Design System

Переиспользуемая дизайн-система для CRM: две темы, React-компоненты, таблицы, выпадающие списки, оригинальные SVG и мобильный каркас.

Code

Source: LARNILANE · packages/design-system

Files: 26

Stack:

React 18/19TypeScriptCSSSVG

Specification

LARNILANE Design System

Независимый пакет интерфейса для React 18/19. Не содержит CRM-сущностей, авторизации, API, базы данных или демонстрационного хранилища.

Локальный запуск

Из корня devboard:

npm install
npm run dev:ui

Галерея: http://localhost:3101. Сборка: `npm run build:ui-demo`. Проверки: `npm run test:ui`.

Подключение в стороннем проекте

Пакет пока не опубликован в npm. Создайте переносимый архив:

npm run build:ui
npm pack --workspace packages/design-system --pack-destination /tmp

В другом проекте:

npm install /tmp/larnilane-design-system-0.1.0.tgz

Подключите CSS один раз в корневом layout / entry point:

import '@larnilane/design-system/styles.css';
import { ThemeProvider, Button, Field, Select } from '@larnilane/design-system';

export function Interface() {
  return (
    <ThemeProvider storageKey="my-crm-theme">
      <Field label="Название" name="title" placeholder="Введите название" />
      <Select
        label="Статус"
        name="status"
        defaultValue="new"
        options={[{ value: 'new', label: 'Новый' }, { value: 'done', label: 'Готово' }]}
        onChange={(value) => console.log(value)}
      />
      <Button>Сохранить</Button>
    </ThemeProvider>
  );
}

`ThemeProvider` по умолчанию тёмный. `storageKey` опционален; без него нет записи в localStorage. `theme` + `onThemeChange` позволяют управлять темой из приложения. Стили ограничены `.ll-ui`, глобального reset нет. Подключите Inter 400/500/600/700 самостоятельно, предпочтительно локальные шрифты; пакет не делает запросов к CDN. Галерея показывает подключение Google Fonts.

Компоненты

Экспорт	Контракт

|---|---|

Button	HTML button props; `variant="primary"` или `"text"`; по умолчанию `type="button"`
Textarea	HTML textarea props + `label`
Select	`options`, `label`, `value`/`defaultValue`, `onChange`, `name`, `disabled`, `compact`, `placeholder`
Status	`kind`: new / progress / completed / cancelled; текст в children
Chip	`selected` + HTML button props
Tabs	`items`, `value`, `onChange`; группа кнопок переключения содержимого
DataTable<T>	`rows`, `columns`, `rowKey`, `caption`, `empty`; сортировка через column.sortValue
Dialog	`open`, `onClose`, `title`, children; нативный modal dialog
AppShell	`groups`, `activeId`, `brand`, `subtitle`, `tools`, `profile`, `topbar`, `footer`, children
ThemeSwitch / useTheme	управление темой внутри ThemeProvider

Select поддерживает стрелки, Home/End, Enter, Escape, Tab, поиск набором текста, недоступные пункты, скрытое поле для FormData. Меню через portal не обрезается таблицей; внутри dialog остаётся в dialog. Fade-in 200 ms, fade-out 160 ms; reduced-motion отключает анимацию. Данные options должны иметь уникальные value. Контролируемый value изменяет приложение в onChange.

DataTable не меняет входной массив, сортирует строки/числа, сохраняет стабильные React keys. Даты передавайте как ISO в sortValue. Загрузка, ошибки и запросы остаются ответственностью приложения.

AppShell: меню с группами, нижние tools/profile; мобильный drawer до 720 px с закрытием по Escape, фокусом и блокировкой прокрутки. При навигации приложение должно корректно обновлять activeId. Footer располагается снизу рабочей секции.

Основа вне React

•`@larnilane/design-system/styles.css` — CSS темы/компонентов, корневой класс `.ll-ui`, атрибут `data-ll-theme="dark"` / `"light"`.

•`@larnilane/design-system/tokens.json` — сериализованные значения двух тем.

•`@larnilane/design-system/assets/*` — 20 исходных SVG, без белых подложек.

React-компоненты включают оригинальные SVG как data URI: не нужно вручную копировать их в public. CSS-разделители используют относительные assets, которые должен обрабатывать CSS bundler. При прямом подключении CSS без bundler сохраняйте соседние папки styles/ и assets/.

Изменение темы

Редактируйте `tokens.json`, затем запускайте `npm run build:ui`: сборка генерирует `styles/tokens.css`. Геометрия компонентов находится в `styles/styles.css`.

Источник и границы версии 0.1

Основа: утверждённый `LarniLane/crm/prototype/index.html` и его assets на 7 октября 2026. Figma: https://www.figma.com/design/7PgyRrOdMtON2u3AFISwn1/System--Copy-?node-id=14-1567&m=dev . Подробные ссылки на исходные компоненты — в `SOURCE.md`.

Это извлечение используемых компонентов, а не всей библиотеки Figma. Бизнес-названия в галерее — демонстрационные props. Новые интерфейсы должны использовать пакет; изменение его оформления делается в packages/design-system. Действующий HTML CRM ещё использует свои исходные стили: его переход на общий CSS — отдельный этап, чтобы не затронуть демонстрационные сценарии и sandbox. React-перенос всего CRM в этот этап не входит.