React Monorepo Starter Kit: единая экосистема для мультиплатформенной разработки

## TL;DR
Монополия с Turborepo и pnpm позволяет синхронизировать 8 React-приложений (SPA, SSR, мобильное, десктопное) через общий UI-кит на Chakra UI + Ark UI. Стартер включает pre-configured Storybook, тестирование (Vitest+Playwright) и кодогенерацию, экономя недели на унификации разрозненных проектов.

## Введение: проблема фрагментации
Типичный сценарий в продуктовой разработке:
1. Выпускаем веб-приложение на Next.js
2. Добавляем мобилку на React Native
3. Потом Electron для десктопа
4. Каждый проект обрастает уникальными `Button.tsx`

К моменту осознания необходимости дизайн-системы, миграция требует переписывания 80% компонентов. Решение — стартовать с монополии, где:
```bash
packages/
  ui/           # Общие компоненты (78 готовых)
  engine/       # Бизнес-логика
apps/
  web/          # Next.js SSR
  mobile/       # React Native
  desktop/      # Electron
  extension/    # Chrome Extension

Ядро архитектуры

1. Turborepo + pnpm

Оптимальный стек для монорепозиториев в 2024:

// turbo.json
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "cache": true
    }
  }
}

Преимущества:

• Шеринг кода через "ui": "workspace:*" в package.json
• Кеширование сборок (до 70% ускорения CI/CD)
• Параллельное выполнение задач через turbo run test --parallel

2. Дизайн-система на Chakra UI + Ark UI

Гибридный подход дает:

• Готовые accessible-компоненты из Ark UI
• Кастомизируемость Chakra UI

// packages/ui/src/Button.tsx
import { ark } from '@ark-ui/react'
import { chakra } from '@chakra-ui/react'

export const Button = chakra(ark.button, {
  baseStyle: {
    borderRadius: 'md',
    fontWeight: 'semibold'
  }
})

3. Единая инфраструктура тестирования

Конфигурация Vitest для кросс-платформенного тестирования:

// vitest.config.ts
export default defineConfig({
  test: {
    environment: 'happy-dom', // Для web-компонентов
    setupFiles: ['./test-setup.ts'],
    alias: {
      '@/': new URL('./src/', import.meta.url).pathname
    }
  }
})

Практическое применение

Сценарий: добавление нового приложения

1. Генерация через pnpm create:

pnpm turbo gen app

2. Подключение общих зависимостей:

// apps/new-app/package.json
{
  "dependencies": {
    "ui": "workspace:*",
    "engine": "workspace:*"
  }
}

3. Использование компонентов:

import { Button } from 'ui'

export default function NewFeature() {
  return <Button variant="primary">Click</Button>
}

Оптимизация сборки

Использование Turborepo remote caching:

turbo run build --team=my-team --token=$TURBO_TOKEN

Это дает:

• Общий кеш для всех разработчиков
• Ускорение CI/CD pipeline до 90% для неизменяемого кода

Заключение

Предложенный стек решает ключевые боли мультиплатформенной разработки:

1. Консистентность — единый источник истины для UI
2. Скорость — кеширование и параллельные задачи
3. Масштабируемость — добавление новых target-платформ за часы

Для legacy-проектов рекомендуем поэтапный переход через:

1. pnpm import из текущего package.json
2. Вынос общих компонентов в /packages
3. Настройку turbo.json для существующих скриптов

Стартер особенно актуален для команд, работающих по принципу “design-first” и требующих синхронизации между продуктами. Критика и PR приветствуются — вместе можно добиться идеального workflow для сложных frontend-экосистем.

Источник: https://github.com/mboudriga/rocket