Updates

Changelog

All notable changes to the Enara Design System will be documented here. This changelog follows Keep a Changelog format.

[0.3.0] - 2026-01-28

Infrastructure

  • Added unified release script for all packages (`scripts/release.js`)
  • Updated CI workflow to fetch all branches and history
  • Updated dependencies across all packages

[0.2.0] - 2026-01-27

Added

  • **Tabs component** - Tabbed navigation with horizontal/vertical orientation
    • Supports keyboard navigation (Arrow keys, Home, End)
    • Accessible with ARIA attributes
    • Variants: horizontal (default), vertical
    • Size variants for different use cases
  • **Pagination component** - Page navigation controls
    • Page number controls with ellipsis for large ranges
    • Customizable page size options
    • Next/Previous navigation buttons
    • Accessible with proper ARIA labels
  • **Text component** - Typography component with semantic HTML
    • Variants: display, heading, body, label, caption
    • Semantic elements: h1-h6, p, span, label
    • Consistent styling based on design tokens
    • Polymorphic as prop for flexible rendering
  • **Box component** - Flexible layout primitive with system props
    • Supports spacing, layout, and flex properties via props
    • Token-aware: uses design token values
    • Polymorphic as prop for semantic HTML elements

Changed

  • **BREAKING**: Renamed package scope from `@enara/*` to `@enara-health/*` for consistency
    • `@enara/tokens` → `@enara-health/tokens`
    • `@enara/ui-react` → `@enara-health/ui-react`
    • All import paths must be updated
  • **BREAKING**: Renamed `packages/` directory to `libs/` to align with team's Nx convention
    • Git history fully preserved using `git mv`
    • Updated 42+ files with new path references
    • All configuration files, build scripts, and documentation updated
  • **BREAKING**: Migrated to CSS-in-JS architecture
    • Component styles now injected into JS bundle via vite-plugin-css-injected-by-js
    • Removed separate `styles.css` file - no longer need `import '@enara-health/ui-react/styles.css'`
    • Token CSS variables still imported separately by consuming applications
    • Reduces bundle size and eliminates CSS file management
  • Migrated from pnpm workspace to Nx monorepo for better build orchestration
    • Installed Nx v22.4.2 with @nx/vite, @nx/js, and @nx/eslint plugins
    • Configured nx.json with workspace layout, task runner, and caching options
    • Created project.json for all packages (tokens, ui-react, docs)
    • Updated CI workflow to use Nx affected commands
    • Build caching: Unchanged packages skip rebuild automatically
    • Automatic build ordering: tokens build before ui-react via dependsOn
    • New commands: `nx build`, `nx dev`, `nx test`, `nx graph`, `nx affected`
  • Restructured package exports for better tree-shaking
    • Main export: `@enara-health/ui-react` (all components)
    • Icon export: `@enara-health/ui-react/icons` (Lucide icons re-export)
    • Token export: `@enara-health/ui-react/tokens` (tokens re-export for convenience)
    • Separate build outputs: index.mjs (275 KB), icons.mjs (1 MB), tokens.mjs (0.04 KB)

[0.1.0] - 2026-01-22

Added

  • Initial monorepo setup with pnpm workspaces
  • `@enara-health/tokens` package for design tokens (304 CSS variables)
    • Style Dictionary v4 configuration
    • CSS variables and JavaScript ES6 output formats
    • Typography primitive tokens (font-family, weight, size, lineHeight)
    • 45 composite text styles (display, title, body variants)
    • Primitive color tokens (moonstone, wisteria, mauve, green, red, yellow, light, dark, shadow)
    • Semantic color tokens (foreground, background, border, elevation, system, interactive)
    • Spacing tokens (pixel-based naming: size-0 to size-160)
    • Border width tokens (0, 1, 2, 4, 8px)
    • Border radius tokens (none, xs, sm, md, lg, xl, 2xl, full)
    • Z-index tokens (base, dropdown, sticky, fixed, modal, popover, tooltip)
    • Breakpoint tokens (xs: 320px to 2xl: 1280px)
    • Icon size tokens (sm: 12px to 3xl: 24px)
    • Elevation tokens (100-400 with layered shadows)
    • Motion tokens (duration and easing curves)
  • `@enara-health/ui-react` package for React components
    • Vite build configuration (ESM + CJS output)
    • Vitest testing setup with Testing Library
    • CSS Modules + CVA for styling
    • TypeScript strict mode
  • **Chip component** - Status indicators, tags, badges
    • Variants: solid, outline
    • Sizes: sm, md, lg
    • Colors: default, primary, primary-alt, success, warning, danger
    • Icon support: iconStart, iconEnd, icon-only mode
    • AI-ready metadata file
    • 12 unit tests
  • **Switch component** - Toggle switches
    • Sizes: sm, md, lg
    • States: checked, unchecked, disabled
    • Controlled component with onCheckedChange callback
  • **Checkbox component** - Checkboxes with indeterminate support
    • Sizes: sm, md, lg
    • States: checked, unchecked, indeterminate, disabled
    • Controlled component with onCheckedChange callback
  • **Radio component** - Radio buttons
    • Sizes: sm, md, lg
    • States: checked, unchecked, disabled
    • Dot indicator for checked state
  • **Button component** - Versatile button with multiple variants
    • Roles: primary (solid), secondary (outline), ghost (transparent)
    • Sizes: sm, md, lg
    • Radius: square, sm, md, lg, rounded (pill)
    • Colors: base, primary, primary-alt, success, warning, danger
    • Icon support: iconStart, iconEnd, icon-only mode
    • States: disabled, loading with spinner
    • Features: fullWidth, polymorphic as/href for links
  • **Input component** - Single-line text input
    • Density: default, compact
    • States: default, error, success (with colored borders)
    • Helper text with leading icons for error/success
    • Built-in: clearable button, password visibility toggle
    • Slots: startElement, endElement for icons/content
    • Features: disabled, readOnly, forwardRef support
  • **Documentation site** (Astro 5)
    • Three-column layout (sidebar, content, table of contents)
    • Collapsible navigation sidebar with sections
    • Component documentation pages for all 6 atoms
    • Live component examples using built @enara-health/ui-react package
    • Token documentation pages:
    • DocsLayout with responsive design
    • ComponentLayout for component pages
    • TokenLayout for token pages
  • Design system architecture documentation

Known Issues

  • Style Dictionary v4 reports 11 token collisions on build (harmless)
    • Cause: Root-level `$description` fields in each token JSON file collide when merged
    • Impact: None - descriptions are metadata only, not output to CSS/JS
    • The build completes successfully with correct token output

Infrastructure

  • pnpm workspace configuration
  • TypeScript configuration for all packages (strict mode)
  • ESLint 9 with TypeScript and React rules
  • Prettier with Astro plugin
  • Husky pre-commit hooks with lint-staged
  • Commitlint for conventional commits (scopes: tokens, ui-react, icons, docs, repo, deps)
  • Claude AI configuration
    • 18 contextual rule documents
    • 3 skills (ai-component-metadata, ai-ds-composer, codebase-index)
    • Component metadata system for AI integration
  • GitHub Actions CI/CD workflows
    • Unified release and publish workflow (detects version changes, builds, publishes, tags)
    • Automatic tag creation on version bump commits
    • Duplicate tag prevention (checks local and remote)
    • Manual workflow trigger support
    • Release script with interactive version bumping (patch/minor/major)
    • Automated CHANGELOG generation
    • GitHub Packages publishing for npm packages

Version History

This changelog will track all releases once the design system reaches v0.1.0.

Upcoming Milestones

  • **v0.1.0** - Foundation release with tokens and core form components
  • **v0.2.0** - Complete form components (Select, Textarea, FormField)
  • **v0.3.0** - Layout and feedback components (Card, Modal, Tooltip)
  • **v0.4.0** - Documentation site with interactive examples
  • **v1.0.0** - Production-ready release with full component coverage