Campus Design System

Appearance

Project Structure ​

Monorepo Organization ​

The workspace follows Nx conventions with clear separation between applications, libraries, and tooling:

├── apps/                    # Applications
│   └── ng-client/          # Angular client application
├── libs/                   # Reusable libraries
│   ├── dcr-components/     # Web components library
│   ├── cds-tokens/         # Design tokens
│   ├── cds-docs/           # Documentation site
│   ├── cds-tokens-manager/ # Figma plugin
│   └── cds-autocomplete/   # VS Code extension
├── tools/                  # Build tools and utilities
├── azure-pipelines/        # CI/CD configuration
└── dist/                   # Build outputs

Library Structure Patterns ​

dcr-components (Web Components) ​

libs/dcr-components/
├── src/
│   ├── lib/                # Component implementations
│   │   ├── button/         # Component families
│   │   ├── icon/
│   │   └── ...
│   ├── seeds/              # Base styles and utilities
│   └── index.ts            # Main export
├── .storybook/             # Storybook configuration
├── public/                 # Static assets
├── scripts/                # Build scripts
└── dist/                   # Built components

cds-tokens (Design Tokens) ​

libs/cds-tokens/
├── .tokens/                # Token source files (JSON)
├── src/lib/                # Token transformation logic
├── dist/                   # Generated CSS/SCSS files
└── index.scss              # Main stylesheet

cds-docs (Documentation) ​

libs/cds-docs/
├── src/
│   ├── .vitepress/         # VitePress configuration
│   ├── handboek/           # Documentation sections
│   ├── richtlijnen/
│   └── libs/               # Library documentation
└── dist/                   # Built documentation site

Naming Conventions ​

Projects ​

  • Libraries: cds-* for design system, dcr-* for components
  • Kebab-case for all project names
  • Scoped packages: @diekeure/project-name

Components ​

  • Web components: dcr-component-name (Custom element naming)
  • Files: dcr-component-name.ts and dcr-component-name.stories.ts
  • Classes: DcrComponentName (PascalCase)

Files & Directories ​

  • Kebab-case for directories and files
  • TypeScript files use .ts extension
  • Story files: *.stories.ts
  • Test files: *.spec.ts or *.test.ts

Dependencies & Build Order ​

Dependency Chain ​

  1. cds-tokens (no dependencies)
  2. dcr-components (depends on cds-tokens)
  3. cds-docs (can reference other libraries)
  4. Applications (consume libraries)

Path Mapping ​

typescript
// tsconfig.base.json paths
"@diekeure/cds-tokens": ["./libs/cds-tokens/dist"]
"@diekeure/dcr-components": ["./libs/dcr-components/dist"]

Configuration Files ​

Project Level ​

  • project.json: Nx project configuration
  • package.json: Package metadata and dependencies
  • tsconfig.json: TypeScript configuration
  • vite.config.ts: Build configuration (where applicable)

Workspace Level ​

  • nx.json: Nx workspace configuration
  • tsconfig.base.json: Base TypeScript configuration
  • eslint.config.cjs: ESLint configuration
  • package.json: Workspace dependencies and scripts

Output Structure ​

Built Libraries ​

libs/*/dist/
├── index.js                # Main entry point
├── typings/                # TypeScript declarations
├── lib/                    # Individual component builds
└── *.css                   # Compiled styles

Published Packages ​

  • Individual component exports for tree-shaking
  • TypeScript declarations included
  • CSS files for styling
  • Source maps for debugging