This is a 🐼 PandaCSS powered React design system based on the official Turborepo starter.
- Ui components package with PandaCSS Park-UI & Ark-UI
- PandaCSS preset package
- Next.js based Storybook
- ESLint new Flat Config with configs and rules
- JoshuaKGoldberg/create-typescript-app for ESLint and TypeScript integration
- rimraf for cross platform
rm -rffunctionality
Versioning and package publishing is handled by Changesets and fully automated with GitHub Actions.
This Turborepo includes the following:
@turbopandarepo/docs: Storybook documentation on Next.js@turbopandarepo/locale: next-intl i18n on Next.js@turbopandarepo/supabase: Supabase with Auth, UserProfile and Checkout on Next.js@turbopandarepo/enterprise: A full featured Next.js@turbopandarepo/eslint-config: ESLint preset using Flat Config@turbopandarepo/preset: PandaCSS custom preset@turbopandarepo/tsconfig: Sharedtsconfig.jsons used throughout the monorepo@turbopandarepo/ui: Shared React UI components
Each package and app is 100% TypeScript.
pnpm build- Build all packages and the docs sitepnpm clean- Clean up allnode_modulesanddistfolderspnpm reinstall- Clean and reinstall packagespnpm dev- Develop all packages and the docs sitepnpm storybook:dev- Develop Storybookpnpm storybook:build- Build Storybookpnpm storybook:move- Move the built Storybooks to rootpnpm storybook:vercel- Vercel build command for Storybookpnpm lint- Lint all packagespnpm lint:knip- Lint unused codepnpm lint:md- Lint Markdown filespnpm lint:package-json- Lint package.jsonpnpm lint:packages- Check if newer dependencies can be used in lockfile.pnpm lint:spelling- Lint spellingpnpm format- Use Prettier to format .ts, .tsx and .nd filespnpm format:write- Write Prettier changespnpm changeset- Generate a changesetpnpm version-packages- Generate a changeset and bump all packagespnpm release- Build docs and publish packages to npm
pnpm up -L -r -i- interactively and recursively update dependencies to latest versionspnpm add react --filter web- add packages to a specific workspacepnpm add contentlayer --filter './apps/*'- add packages to a specific path
Running pnpm add <pkg>, if a "prepare": "panda codegen" fails, the package
will not be added to package.json unless --ignore-scripts flag is provided
This Turborepo has some additional tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting using new Flat Config
- Prettier for code formatting
- cSpell for linting spelling
- Knip for unused code
- Markdownlint for linting markdown
- Npm-package-json-lint for linting package.json
This implementation is ready for compose turborepo's Storybooks using the Storybook Composition feature.
You can use pnpm storybook:dev to run Storybook.
Turborepo uses a simplified Plop configuration.
Learn more about Turborepo Generators at turbo: code-generation Check also blog post generator
A pnpm gen:component command is available to generate a new component from the
root. It will generate:
- a
ComponentNamefolder for the new component in the ui package with component and index files - an entry in the index.ts file of the ui package
- a
ComponentName.stories.tsxfile in the docs package - a
component.recipefile in the preset package
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"
- },