Campus Design System

Appearance

Technology Stack ​

Build System & Tooling ​

  • Nx 21.5.2: Monorepo build system with workspace management
  • Vite: Build tool for modern web development
  • TypeScript 5.8.3: Primary language with strict configuration
  • npm: Package manager with workspaces
  • ESLint: Code linting with Nx-specific rules
  • Prettier: Code formatting

Frontend Technologies ​

  • Lit 3.3.0: Web components framework for dcr-components
  • Storybook 9.1.5: Component development and documentation
  • VitePress 1.6.3: Static site generator for documentation
  • SCSS/Sass: Styling with design token integration
  • Style Dictionary 5.0.0: Design token transformation

Testing & Quality ​

  • Vitest 3.2.0: Unit testing framework
  • Jest 29.7.0: Additional testing support
  • Playwright 1.52.0: End-to-end testing
  • Chromatic: Visual regression testing
  • axe-playwright: Accessibility testing

Development Tools ​

  • VS Code Extensions: Custom autocomplete extension for design tokens
  • Figma Plugin: Token management integration
  • Azure DevOps: CI/CD pipelines
  • Azure Artifacts: Package registry

Common Commands ​

Building Projects ​

bash
# Build all projects
npx nx run-many -t build

# Build specific project
npx nx build dcr-components
npx nx build cds-tokens
npx nx build cds-docs

Development Servers ​

bash
# Serve dcr-components (Storybook with auto-generated docs)
# This automatically runs build-docs.js and build-scss.js in watch mode
npx nx serve dcr-components

# Serve documentation site
npx nx serve cds-docs

Testing ​

bash
# Run all tests
npx nx run-many -t test

# Run specific project tests
npx nx test dcr-components

# Run Storybook tests
npx nx test-storybook dcr-components

# Run Chromatic visual regression tests (during release)
npx nx chromatic dcr-components --project-token=<token>

Linting & Formatting ​

bash
# Lint all projects
npx nx run-many -t lint

# Format code
npx prettier --write .

Release Management ​

bash
# Release all projects (generates changelogs and updates versions)
npx nx run tools:release

# The release process:
# 1. Generates changelogs for all projects
# 2. Updates versions using conventional commits
# 3. Creates git commits and tags
# 4. Runs Chromatic tests for visual regression, A11y, and automated interaction testing

Documentation Generation ​

bash
# Generate component documentation and Storybook stories (manual)
node ./libs/dcr-components/scripts/build-docs.js

# Watch mode for development (manual)
node ./libs/dcr-components/scripts/build-docs.js watch

# Note: Documentation generation runs automatically when serving dcr-components

Configuration Notes ​

  • TypeScript uses strict mode with NodeNext module resolution
  • ESLint enforces module boundaries between projects
  • All libraries must build before dcr-components due to dependencies
  • Design tokens are generated before component builds
  • Documentation is auto-generated from TypeScript JSDoc comments and component analysis
  • The build-docs.js script generates Storybook stories, VSCode custom data, and component interfaces
  • Serving dcr-components automatically runs documentation generation and SCSS compilation in watch mode
  • Chromatic testing includes visual regression tests, accessibility (A11y) tests, and automated interaction tests