This monorepo is structured as any other standard multi-package repository you're familiar with, and contains the following packages:
@drivenets/design-system: The core design system package.@drivenets/eslint-plugin-design-system: An ESLint plugin for enforcing design system rules (deprecated components, best practices, etc.).@drivenets/vite-plugin-design-system: A Vite plugin for integrating the design system into Vite projects (injecting styles and assets).@drivenets/commitlint-plugin-design-system: An internal Commitlint plugin for enforcing commit message conventions related to the design system.
Storybook is automatically deployed to GitHub Pages on every PR merge to the default branch.
Each deployment commit contains the commit hash of the corresponding default branch commit in its message for easy reference.
- Node 24+
- pnpm 10.0.0
We recommend using tools like fnm, nvm, and/or mise to manage these versions for you.
Clone the repository, install the dependencies, and start your development:
git clone https://github.com/drivenets/design-system
cd design-system
pnpm installThese are the most commonly used scripts in development:
pnpm start: Starts a local storybook server for the design system.pnpm format: Formats the codebase.pnpm lint: Lints the codebase.pnpm typecheck: Runs TypeScript type checking.pnpm test: Tests all packages in the monorepo.pnpm build: Builds all packages in the monorepo.pnpm changelog: Interactively adds a changelog entry for the changed packages.
These are scripts that run in the CI workflows for each PR. You might not need to run them often, but they are useful to know about:
pnpm lint:spell: Checks for spelling errors.pnpm lint:versions: Ensures consistent package versions across the monorepo.pnpm lint:unused: Detects unused code and dependencies.
This repo includes Cursor rules in .cursor/rules/ to support AI-powered development:
| Rule | Usage |
|---|---|
design-system.mdc |
Auto-applied when editing components — scaffolding templates |
monorepo.mdc |
Auto-applied in packages/ — import boundaries |
checkers.mdc |
Always applied — how to run lint/test/typecheck |
standards.mdc |
Always applied — PR requirements and code standards |
code-review.mdc |
Manual — invoke with @code-review for local PR review |
Before submitting a PR, run a local code review (apply latest main changes!):
- Type
@code-reviewin Cursor chat to invoke the rule - The AI will align with the
upstream/mainwhen permitted. - The AI will diff against
upstream/mainand flag high-severity issues. - Review comments are added as
REVIEW-[SEVERITY]inline comments.
- Create a new branch for your feature or bugfix.
- Make your changes, ensuring to run the relevant scripts (linting, testing, etc.) locally.
- Commit your changes with a descriptive message following the Conventional Commits standard (e.g.,
feat(design-system): add new button component [TICKET-ID]). - Add a changelog entry if needed using
pnpm changelog. See Intro to Using Changesets and Adding a Changeset for more details. If your change doesn’t require a new release, you can add theskip changeloglabel to the GitHub PR. - Push your branch and open a pull request for review.
Note
Since we're squashing commits when merging, only the PR name will be validated as a Conventional Commit message, so don't bother too much about each individual commit message.
We're using the following technologies in this monorepo:
- Monorepo Management: Turborepo
- Package Management: pnpm
- Linting: ESLint and Typescript ESLint with strict config
- Type Checking: TypeScript
- Code Formatting: Oxfmt
- Testing: Vitest with Browser Mode and Playwright
- Building: tsdown with React Compiler and Sass Embedded
- Package Validation: publint and attw
- Documentation: Storybook
- Unused Code Detection: Knip
- Dependency Version Consistency: Syncpack
- Spell Checking: CSpell
- Commit Linting: Commitlint with Conventional Commits standards and a custom plugin for JIRA tickets
- Changelog and Release Management: Changesets
- Security Scanning: CodeQL in GitHub Actions