Orcestr UI

Live Demo

Доступные React-компоненты и стили для интерфейсов приложений.

В пакете есть layout primitives, контролы, поля, overlays, data views, workflow-состояния, theme tokens и utility hooks.

Основной сайт: orcestr.com

Статус

| Пункт | Значение | | ------- | ------------------------------------------ | | Package | @orcestr/ui | | Version | актуальная версия указана в npm badge выше | | Status | Beta | | Runtime | React 19 | | Styling | CSS из @orcestr/ui/styles.css |

Public API еще формируется, пока пакет находится в beta.

Что внутри

| Зона | Что входит | | ---------- | ------------------------------------------------------------------------------ | | App layout | shell, навигационные паттерны, page surfaces | | Actions | buttons, icon buttons, text links, menus, command surfaces | | Inputs | fields, selects, comboboxes, pickers, switches, checkboxes, segmented controls | | Overlays | dialogs, drawers, modals, popovers, tooltips, context menus, confirm flows | | Data views | tables, pagination, empty/error/loading states, badges, alerts | | Workflows | lifecycle и status components для операционных экранов | | Foundation | provider, locale, theme tokens, CSS variables, utility hooks |

Установка

npm install @orcestr/ui react react-dom react-icons

TanStack Query нужен только при использовании @orcestr/ui/react-query:

npm install @tanstack/react-query

Для проверки неопубликованной сборки в другом приложении запусти npm pack и установи созданный архив. В публикуемых manifest- и lock-файлах должны оставаться registry-версии.

Использование

Подключи CSS один раз рядом с корнем приложения и оберни приложение в OrcestrUiProvider.

import { Button, Link, OrcestrUiProvider } from '@orcestr/ui';
import '@orcestr/ui/styles.css';

export function App() {
    return (
        <OrcestrUiProvider locale="ru" defaultMode="dark">
            <Button>Сохранить</Button>
            <Link href="/account">Аккаунт</Link>
        </OrcestrUiProvider>
    );
}

React Query integration опциональная:

import { usePaginatedComboboxQueryLoader } from '@orcestr/ui/react-query';

В Server Components можно импортировать render-only primitives без client boundary:

import { Box, Flex, Table, Text } from '@orcestr/ui/server';

Demo page экспортируется отдельно:

import { UiExamplePage } from '@orcestr/ui/example/UiExamplePage';
import '@orcestr/ui/example/styles.css';

Настройка provider, тем приложения, overlays, controlled state и границ между client/server описана в руководстве для потребителей.

Entrypoints

| Entrypoint | Назначение | | ----------------------------------- | ----------------------------------------------- | | @orcestr/ui | Client components, providers, hooks и theme API | | @orcestr/ui/server | Server-safe render-only primitives | | @orcestr/ui/styles.css | Runtime styles UI kit | | @orcestr/ui/react-query | Optional React Query adapter | | @orcestr/ui/example/UiExamplePage | Demo page component | | @orcestr/ui/example/styles.css | Demo page styles |

Скрипты

npm run build
npm run typecheck
npm test
npm run check:package
npm run pack:dry-run

| Script | Что проверяет | | ----------------------- | -------------------------------------------------- | | npm run build | TypeScript output, declarations, CSS и ESM imports | | npm run typecheck | TypeScript без emit | | npm test | Contract и state tests | | npm run check:package | Публичные Node ESM entrypoints | | npm run pack:dry-run | Состав публикуемого пакета |

Release

Публикация в NPM идет через GitHub Actions по тегам ui-v*.

Локальные helpers:

npm run release:patch
npm run release:minor
npm run release:major

Каждый helper обновляет package.json и package-lock.json, создает release commit и tag вроде ui-v0.3.1.

git push
git push origin ui-v0.3.1

Workflow перед публикацией запускает typecheck, tests, build и npm pack --dry-run.

Полная инструкция: docs/RELEASE.md.

Maintainer

Публичные обновления ведет @Artasov.

Лицензия

Проект распространяется по Mozilla Public License 2.0. Коммерческое использование разрешено; изменения файлов под MPL остаются на условиях MPL. Авторство указано в NOTICE, правила использования бренда — в TRADEMARKS.md.