Turborepo Design System starter with Changesets

This is an official React design system starter powered by Turborepo. Versioning and package publishing is handled by Changesets and fully automated with GitHub Actions.

What's inside?

This Turborepo includes the following:

Apps and Packages

docs: A placeholder documentation site powered by Next.js
@sujishpatel/core: core React components
@sujishpatel/utils: shared React utilities
@sujishpatel/tsconfig: shared tsconfig.jsons used throughout the monorepo
eslint-preset-sujishpatel: ESLint preset

Each package and app is 100% TypeScript.

Utilities

This turborepo has some additional tools already setup for you:

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

Using this example

Run the following command:

npx degit vercel/turborepo/examples/design-system design-system
cd design-system
yarn install
git init . && git add . && git commit -m "Init"

Useful commands

yarn build - Build all packages and the docs site
yarn dev - Develop all packages and the docs site
yarn lint - Lint all packages
yarn changeset - Generate a changeset
yarn clean - Clean up all node_modules and dist folders (runs each package's clean script)

Changing the NPM organization scope

The NPM organization scope for this design system starter is @sujishpatel. To change this, it's a bit manual at the moment, but you'll need to do the following:

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

Versioning and Publishing packages

Package publishing has been configured using Changesets. Please review their documentation to familarize yourself with the workflow.

This example comes with automated npm releases setup in a GitHub Action. To get this working, you will need to create an NPM_TOKEN and GITHUB_TOKEN in your repository settings. You should also install the Changesets bot on your GitHub repository as well.

For more information about this automation, refer to the official changesets documentation

npm

If you want to publish package to the public npm registry and make them publicly available, this is already setup.

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

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

GitHub Package Registry

See Working with the npm registry

justjish/sujishpatel