sushi-system

A scalable, atomic-design-based React UI system and documentation platform, built as a monorepo using pnpm workspaces and Turbo for fast, incremental builds. This project provides a robust foundation for building, theming, and documenting React UI components with TypeScript, Material UI, and Next.js.

📦 Published Packages

The sushi-system packages are published to our GitLab registry and available for use in your projects:

• @sushi-system/[email protected] - Theme utilities and components
• @sushi-system/[email protected] - UI components and atoms

Registry

https://gitlab.podro.tech/api/v4/projects/137/packages/npm/

Monorepo Structure

.
├── packages/
│   ├── sushi-ui/      # Atomic Design UI library (Atoms & Molecules)
│   └── sushi-theme/   # Theme provider and utilities
├── docs/
│   ├── next-app/      # Next.js documentation site
│   └── storybook/     # Storybook for UI components
├── clean.sh           # Utility script to clean build outputs and node_modules
├── pnpm-workspace.yaml
├── package.json       # Root scripts and dev dependencies
├── turbo.json         # Turbo task runner configuration
└── tsconfig.base.json # Shared TypeScript config

Packages

@sushi-system/ui

• Atomic Design: Implements Atoms (basic UI elements) and Molecules (composed UI patterns).
• Tech: Built with React, TypeScript, Material UI, and Emotion.
• Testing: Uses Jest, Vitest, and React Testing Library.
• Docs: See Atoms and Molecules guidelines.

@sushi-system/theme

• Theme Provider: Custom Material UI theme with light/dark modes and RTL/LTR support.
• Utilities: Theme helpers for spacing, palette, and typography.
• Usage: Wrap your app with SushiThemeProvider for consistent theming.

Documentation

• Next.js App: docs/next-app — Main documentation site (see its README).
• Storybook: docs/storybook — Interactive component explorer (see its README).

Getting Started

For Development (Contributing to sushi-system)

1. Install dependencies:

   pnpm install

2. Build all packages:

   pnpm run build:packages

3. Run Storybook:

   pnpm run storybook

4. Run Next.js docs app:

   cd docs/next-app && pnpm dev

For Using sushi-system Packages

1. Configure your project's .npmrc:

   @sushi-system:registry=https://gitlab.podro.tech/api/v4/projects/137/packages/npm/
   //gitlab.podro.tech/api/v4/projects/137/packages/npm/:_authToken=access tokens
   always-auth=true

   Note: Replace auth_token with your actual GitLab personal access token.

2. Install packages:

   npm install @sushi-system/theme @sushi-system/ui

3. Use in your React app:

   import { ThemeProvider, createTheme } from "@sushi-system/theme";
   import { Button, Flex } from "@sushi-system/ui";
   
   const theme = createTheme({
     palette: {
       primary: { main: "#1976d2" },
       secondary: { main: "#dc004e" },
     },
   });
   
   function App() {
     return (
       <ThemeProvider theme={theme}>
         <Flex direction="column" gap="16px">
           <Button variant="primary">Primary Button</Button>
           <Button variant="secondary">Secondary Button</Button>
         </Flex>
       </ThemeProvider>
     );
   }

Scripts (root)

• pnpm run storybook — Launch Storybook for all UI packages
• pnpm run build:packages — Build all workspace packages using Turbo
• pnpm run test — Run all tests across packages using Turbo
• pnpm run format — Format codebase with Prettier
• pnpm run clean — Clean all build outputs and node_modules (see clean.sh)

Publishing Scripts

• ./publish-packages.sh — Publish all packages to GitLab registry
• ./bump-version.sh [patch|minor|major] — Bump package versions
• ./check-versions.sh — Check available package versions

Note: This project uses Turbo as the task runner for fast, incremental builds and caching. Turbo automatically handles dependencies between packages and caches build outputs for improved performance.

Development

• TypeScript: Strict mode, shared config in tsconfig.base.json
• Prettier: Enforced code style
• Turbo: Fast, incremental builds with intelligent caching
• Atomic Design: Follow Atoms and Molecules guidelines
• Testing: Use Vitest/Jest/React Testing Library for all components
• Theming: Use @sushi-system/theme for consistent design

Publishing

Prerequisites

1. GitLab Access Token: Create a personal access token with read_api and write_packages scopes
2. Configure .npmrc: Add your token to the project's .npmrc file

Publishing Process

1. Bump Versions (if needed):

   ./bump-version.sh patch  # or minor/major

2. Publish Packages:

   ./publish-packages.sh

3. Verify Publication:

   ./check-versions.sh

Package Registry

• Registry URL: https://gitlab.podro.tech/api/v4/projects/137/packages/npm/
• Web Interface: https://gitlab.podro.tech/projects/137/packages
• Scope: @sushi-system

Documentation

• Installation Guide: See usage examples above
• Component Documentation: Available in Storybook (pnpm run storybook)
• API Documentation: Check individual package READMEs

License

ISC (see package.json)