Welcome to the Bluefly.io code repository. By logging in, you agree to comply with our terms of service and code of conduct.

Skip to content

Update studio-ui: Integrate design-system API and Import Design Tokens

Objective

Update studio-ui to integrate the migrated design-system-api services and import design tokens from @bluefly/technical-guide as the single source of truth.

Tasks

Integrate design-system-api Services

  • Mount design system Express router in api server
  • Serve endpoints at `/api/v1/design/*`
  • Update existing `api:dev` script to include design routes
  • Add health checks for design API
  • Update OpenAPI spec with design endpoints

Import Design Tokens from technical-guide

  • Add `@bluefly/technical-guide` as dependency
  • Replace hardcoded color values with imports
  • Replace hardcoded typography values with imports
  • Replace hardcoded spacing values with imports
  • Update theme definitions to use standard tokens

Update Component Library

  • Components use tokens from technical-guide
  • Tailwind config imports tokens
  • CSS variables generated from tokens
  • Storybook displays token values

API Endpoints to Serve

  • `GET /api/v1/design/tokens` - All design tokens
  • `GET /api/v1/design/tokens/colors` - Color tokens
  • `GET /api/v1/design/tokens/typography` - Typography tokens
  • `GET /api/v1/design/components` - Component library metadata
  • `POST /api/v1/design/components/:id/render` - Render components

Ensure Token Synchronization

  • Design tokens in API match @bluefly/technical-guide
  • Validation in CI ensures consistency
  • Update scripts to regenerate CSS from tokens

Usage Example

```typescript // Before (hardcoded) const primaryColor = '#0066CC';

// After (from technical-guide) import { colors } from '@bluefly/technical-guide/tokens'; const primaryColor = colors.primary[600]; ```

Tailwind Config

```typescript import { colors, spacing, typography } from '@bluefly/technical-guide/tokens';

export default { theme: { extend: { colors: colors, spacing: spacing, fontFamily: typography.families, } } } ```

Testing

  • All components render correctly with new tokens
  • Design API endpoints return correct data
  • Storybook displays token values
  • Visual regression tests pass
  • Contract tests against OpenAPI spec

Related

  • Epic: #1
  • Depends on: #3 (design-system-api migration), #7 (design tokens), #8 (npm package)
  • Next: #11 (update agent-buildkit)

Files to Update

  • `package.json` (add @bluefly/technical-guide dependency)
  • `src/api/server.js` (mount design router)
  • `tailwind.config.js` (import tokens)
  • All component files (replace hardcoded values)
  • `openapi/openapi.yaml` (add design endpoints)

Success Criteria

  • ✅ Design system API running in studio-ui
  • ✅ All components use tokens from technical-guide
  • ✅ No hardcoded design values
  • ✅ CI validates token consistency
  • ✅ API serves accurate design metadata