Mr Lee Co — Design System CI/CD Starter

A minimal, production-ready starter for DesignOps automation:

• Design tokens managed with Style Dictionary
• React components that consume generated tokens
• GitHub Actions CI/CD to build tokens, test, and (optionally) publish to npm

Quick Start

# 1) Install dependencies
npm install

# 2) Build tokens (outputs to build/css and build/js)
npm run build:tokens

# 3) Try components
node -e "console.log(require('./build/js/tokens'))"

Repo Structure

tokens/           # Source tokens (JSON)
scripts/          # Build script for Style Dictionary
src/components/   # React components consuming tokens
.github/workflows # GitHub Actions pipeline
build/            # Generated by token build

CI/CD Flow

• On push or PR:
  • Install dependencies
  • Build tokens
  • Run tests
• On main with a commit message starting with release::
  • Publish to npm using NPM_TOKEN secret

Set up npm publishing

1. Create an npm access token with publish rights
2. In your GitHub repo, add a secret named NPM_TOKEN
3. Tag a release commit with a message starting release: to trigger publish step

Customize

• Add platforms (ios/swift, android/xml, flutter/dart) via Style Dictionary
• Extend components under src/components
• Swap React for Web Components / Vue / Svelte as needed

License

MIT