Начало работы: Parcel

Клиентское SPA: стили и ThemeProvider подключаются в src/index.tsx, атрибуты темы — в src/index.html. Настройки резолвера не нужны: CSS-файлы пакета лежат по реальным путям

1. Создайте приложение

Проверено с Parcel 2.16. Скаффолдер сам ставит зависимости и делает первый git-коммит. На Windows он может упасть на этом коммите (fatal: paths 'commit …' with -a does not make sense), когда всё уже установлено: приложение готово, продолжайте.

npm create parcel@latest react-client my-app
cd my-app

2. Установите пакет

Подходят react и react-dom 17, 18 и 19 (на React 17 id из useId появляются сразу после монтирования). Пакет — ES-модули (плюс CommonJS-копия для require()), без runtime-зависимостей, по файлу на модуль: в бандл попадают только импортированные компоненты, а как грузить и CSS только их — в разделе «Только нужный CSS» ниже. Шрифты — отдельные файлы: тема vercel (по умолчанию в ThemeProvider) использует Geist, поэтому рядом со стилями импортируйте valyro-ui/fonts/geist.css и valyro-ui/fonts/geist-mono.css, иначе текст будет системным шрифтом; glass использует системные шрифты, ей файлы не нужны. Пока пакет не опубликован, соберите и упакуйте его в репозитории (npm run build:core && npm pack ./dist/core) и установите tarball из корня репозитория: npm install /path/to/ValyroUI/valyro-ui-0.1.0.tgz.

npm install valyro-ui

3. Тема на <html>

<!doctype html>
<html lang="en" data-theme="glass" data-mode="light">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Parcel React App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.tsx"></script>
  </body>
</html>

4. Стили и ThemeProvider

Шаблонный src/App.css центрирует всё на html — удалите его и импорт в App.tsx.

import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import 'valyro-ui/styles.css';
import { ThemeProvider } from 'valyro-ui';
import { App } from './App';

let container = document.getElementById("app")!;
let root = createRoot(container)
root.render(
  <StrictMode>
    <ThemeProvider theme="glass" mode="light">
      <App />
    </ThemeProvider>
  </StrictMode>
);

5. Используйте компоненты

Showcase — компонент из гайда по Next.js, без изменений.

import { Showcase } from './Showcase';

export function App() {
  return <Showcase />;
}

6. TypeScript 6+

В шаблоне есть tsconfig.json, но нет самого TypeScript. Если проверяете типы через tsc 6 или 7, включённый по умолчанию noUncheckedSideEffectImports не пропустит импорты CSS-файлов самого приложения (TS2882) — у Parcel нет объявлений для *.css. Для valyro-ui/styles.css объявление уже есть в пакете, для остальных добавьте его сами.

// Lets TypeScript 6+ accept side-effect imports of the app's own CSS files.
declare module '*.css';

7. Соберите

npm run build
npx serve dist

Другие фреймворки