Ontwik-ui
A headless UI library and CLI theme generator
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
- Changesets for managing versioning and changelogs
- GitHub Actions for fully automated package publishing
Getting Started
Useful Commands
yarn dev
- Run all packages locally and preview with Storybookyarn build
- Build all packages including the Storybook siteyarn lint
- Lint all packagesyarn changeset
- Generate a changesetyarn clean
- Clean up allnode_modules
anddist
folders (runs each package's clean script)
Apps & Packages
This monorepo includes the following packages and applications:
apps/docs
: Component documentation site with Storybookapps/public-docs
: Public Docs powered by Nextrapackages/ontwik-ui
: Core React components
Each package and app is 90% TypeScript. Yarn 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 yarn add
.
Versioning & Publishing Packages
This repository uses Changesets to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediatley.
Generating the Changelog
To generate your changelog, run yarn 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 thechangeset
. - 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^... --filter=public-docs^... && changeset publish
Turborepo runs the build
script for all publishable packages (excluding docs & public-docs) and publishes the packages to npm.