Design System

React component library for new consistent styles and faster development

Designer contributors

• Start with the designer setup guide.
• Claude Code reads the repository conventions in CLAUDE.md and includes the /build-design-system-component project skill.

Useful commands:

• npm run designer:setup installs packages and checks the machine.
• npm run designer:start opens Storybook.
• npm run designer:new -- ComponentName scaffolds a component, story, test, and export.
• npm run designer:check runs the contribution checks.

Development

To create a new component add a new folder under the lib folder

Scripts

The following scripts are available in this codebase

• npm run storybook runs a local version of the storybook documentation
• npm run lint runs linting using eslint

Manual npm publishing

Use this process if automatic publishing is unavailable.

Access

You need an npm account with read/write access to @commonsku/design-system. If you do not have access, ask an owner of the commonsku npm organization to add you to a team with read/write access to the package. Then sign in and confirm the active account:

npm login
npm whoami

Choose a version

Follow Semantic Versioning:

• Patch (0.4.1 → 0.4.2): backwards-compatible fixes
• Minor (0.4.1 → 0.5.0): backwards-compatible features
• Major (1.2.3 → 2.0.0): breaking changes

Do not bump the version for changes that do not need a new package release. Coordinate releases so two branches do not claim the same version.

Create a release branch from the latest main, then update both package.json and package-lock.json without creating a Git tag:

npm version patch --no-git-tag-version # replace patch with minor or major

Open and merge a PR containing the version bump.

Publish

From a clean, up-to-date main branch:

npm ci
npm run lint
npm run test:run
npm run build
npm pack --dry-run
npm publish --access public
npm view @commonsku/design-system version

Check the dry-run file list before publishing. npm versions cannot be reused, so confirm the final command reports the version from package.json.

Below was generated by the vite template it is being left for now in case it is helpful during spinup of this library

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);