PathLogs UI
English

Начало

Установка

Пакеты, стили и скрипт темы — с нуля до первого компонента.

Пакеты

terminal
npm install @toimetdev/pathlogs-core @toimetdev/pathlogs-hooks @toimetdev/pathlogs-tokens

core зависит от двух остальных, так что формально хватило бы одного пакета. Ставить все три всё же удобнее: тогда @toimetdev/pathlogs-hooks и @toimetdev/pathlogs-tokens видны в package.json как прямые зависимости, а не как подробность чужого дерева.

React 18 или новее — в peer-зависимостях. Ничего другого пакеты не тянут: ни clsx, ни radix, ни утилит для дат.

Стили

Три импорта в главный CSS-файл — обычно это `globals.css`:

src/app/globals.css
@import "tailwindcss";

@import "@toimetdev/pathlogs-tokens/styles/index.css";
@import "@toimetdev/pathlogs-core/styles/components.css";
@import "@toimetdev/pathlogs-tokens/styles/tailwind.css";

Что делает каждая строка:

  • tokens/styles/index.css — переменные, базовые стили, анимации и стили лент с протяжкой;
  • core/styles/components.css — оформление компонентов пакета;
  • tokens/styles/tailwind.css — мост к Tailwind v4: превращает токены в утилиты bg-surface, text-muted, border-edge.

Скрипт темы

Тема хранится в localStorage и в атрибуте data-theme на <html>. Чтобы страница не мигнула чужой темой до гидратации, атрибут ставит крошечный синхронный скрипт в <head>:

src/app/layout.tsx
import { themeScript } from "@toimetdev/pathlogs-tokens";

export default function RootLayout({ children }) {
  return (
    <html lang="ru" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript() }} />
      </head>
      <body>{children}</body>
    </html>
  );
}

Проверка

Если всё подключено, кнопки выглядят так и реагируют на смену темы:

Не покрасилось — почти всегда дело в порядке импортов или в том, что CSS подключён не в тот файл. Компоненты не полагаются на Tailwind, поэтому отсутствие стилей означает, что components.css просто не доехал.

Без Tailwind

Компоненты core размечены собственными классами pl-* и работают в проекте с любым CSS-фреймворком или вовсе без него. Тогда достаточно двух импортов:

css
@import "@toimetdev/pathlogs-tokens/styles/index.css";
@import "@toimetdev/pathlogs-core/styles/components.css";

Виджеты реестра — другое дело: они размечены Tailwind. Если Tailwind в проекте нет, укажите это при настройке CLI (--no-tailwind), и он предупредит, что виджеты приедут без стилей.