We're starting with Turborepo
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.
This Turborepo uses yarn as a packages manager. It includes the following packages/apps:
@shield/react
: a integrate Next.js and Storybook app@shield/utils
: shared React utilities@shield/tokens
: design system tokens@shield/tsconfig
: sharedtsconfig.json
s used throughout the monoreposhield-eslint-config
: ESLint preset
Each package and app is 100% TypeScript.
There are already:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
yarn build
- Build all packages and the shield-react siteyarn dev
- Develop all packages and the shield-react siteyarn lint
- Lint all packagesyarn changeset
- Generate a changesetyarn clean
- Clean up allnode_modules
anddist
folders (runs each package's clean script)
The npm organization scope for this design system starter is @linhvuquach/
. To change this, it's a bit manual at the moment, but you'll need to do the following:
- Re-run
yarn install
Package publishing has been configured using Changesets. Please review their documentation to familiarize 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
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"
- },
Requirements:
+ Node version: >= 16
Starting to develop with clone repo:
- Install dependencies:
yarn
- Run project
yarn dev
- Build project
yarn build
You can read further inside docs folder to explore more.