VAR META UI Library

🏎 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
Changesets for managing versioning and changelogs
GitHub Actions for fully automated package publishing

Useful Commands

pnpm build - Build all packages, including the Storybook site
pnpm dev - Run all packages locally and preview with Storybook
pnpm dev:web - Run NextJS app on apps/web
pnpm lint - Lint all packages
pnpm changeset - Generate a changeset
pnpm clean - Clean up all node_modules and dist folders (runs each package's clean script)

Turborepo

Turborepo is a high-performance build system for JavaScript and TypeScript codebases. It was designed after the workflows used by massive software engineering organizations to ship code at scale. Turborepo abstracts the complex configuration needed for monorepos and provides fast, incremental builds with zero-configuration remote caching.

Using Turborepo simplifies managing your design system monorepo, as you can have a single lint, build, test, and release process for all packages. Learn more about how monorepos improve your development workflow.

Apps & Packages

This Turborepo includes the following packages and applications:

apps/web: Component documentation site with Storybook
packages/ui: Core React components
packages/config: Tailwindcss presets config
packages/icons: Core React Icons components
packages/utils: Shared React utilities
packages/tsconfig: Shared tsconfig.jsons used throughout the Turborepo
packages/eslint-config-custom: 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.

Versioning & Publishing Packages

This example uses Changesets to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediately.

You'll need to create an NPM_TOKEN and GITHUB_TOKEN and add it to your GitHub repository settings to enable access to npm. It's also worth installing the Changesets bot on your repository.

Generating the Changelog

To generate your changelog, run pnpm changeset locally:

Which packages would you like to include? – This shows which packages and changed and which have remained the same. By default, no packages are included. Press space to select the packages you want to include in the changeset.
Which packages should have a major bump? – Press space to select the packages you want to bump versions for.
If doing the first major version, confirm you want to release.
Write a summary for the changes.
Confirm the changeset looks as expected.
A new Markdown file will be created in the changeset folder with the summary and a list of the packages included.

Releasing

When you push your code to GitHub, the GitHub Action will run the release script defined in the root package.json:

turbo run build --filter=docs^... && changeset publish

Turborepo runs the build script for all publishable packages (excluding docs) and publishes the packages to npm. By default, this example includes acme as the npm organization. To change this, do the following:

Rename folders in packages/* to replace acme with your desired scope
Search and replace acme with your desired scope
Re-run pnpm install

To publish packages to a private npm organization scope, remove the following from each of the package.json's

- "publishConfig": {
-  "access": "public"
- },

VAR-META-Tech / Var-Meta-UI