Turborepo Design System

This guide explains how to use a React design system starter powered by:

• 🏎 Turborepo — High-performance build system for Monorepos
• 🚀 React — JavaScript library for user interfaces
• 🛠 Tsup — TypeScript bundler powered by esbuild
• 📖 Storybook — UI component environment powered by Vite

As well as a few others tools preconfigured:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

System required

nodejs >= 19.0.1

Documentation

• benchmark this monorepo

Useful Commands

• pnpm build - Build all packages, including the Storybook site
• pnpm dev - Run all packages locally and preview with Storybook
• pnpm lint - Lint all packages
• pnpm clean - Clean up all node_modules and dist folders (runs each package's clean script)

Apps & Packages

This Turborepo includes the following packages and applications:

• apps/docs: Component documentation site with Storybook
• packages/@fori/core: Core React components
• packages/@foris/tsconfig: Shared tsconfig.jsons used throughout the Turborepo
• packages/eslint-config-foris: ESLint preset

Each package and app is 100% TypeScript. Workspaces enables us to "hoist" dependencies that are shared between packages to the root package.json. This means smaller node_modules folders and a better local dev experience. To install a dependency for the entire monorepo, use the -w workspaces flag with pnpm add.

This example sets up your .gitignore to exclude all generated files, other folders like node_modules used to store your dependencies.

Compilation

To make the core library code work across all browsers, we need to compile the raw TypeScript and React code to plain JavaScript. We can accomplish this with tsup, which uses esbuild to greatly improve performance.

Running pnpm build from the root of the Turborepo will run the build command defined in each package's package.json file. Turborepo runs each build in parallel and caches & hashes the output to speed up future builds.

For acme-core, the build command is the following:

tsup src/index.tsx --format esm,cjs --dts --external react

tsup compiles src/index.tsx, which exports all of the components in the design system, into both ES Modules and CommonJS formats as well as their TypeScript types. The package.json for foris-core then instructs the consumer to select the correct format:

{
  "name": "@foris/core",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "sideEffects": false,
}

Run pnpm build to confirm compilation is working correctly. You should see a folder foris-core/dist which contains the compiled output.

foris-core
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version

Authors

• @markozxuu