Getting Started
File Structure

File Structure

ledger-ui/
  packages/
    tokens/           Design tokens (primitives, semantic, dark theme)
    theme/            Ant Design ConfigProvider, createAntdTheme()
    utils/            cn(), debounce(), throttle(), timeAgo(), DOM helpers
    ui/               53+ React components + 9 hooks
    templates/        15 page templates (Dashboard, List, Detail, etc.)
    i18n/             Translation engine, 29 languages, RTL
    accessibility/    WCAG contrast, focus trap, tech literacy
    design-system/    Meta-package re-exporting tokens + theme

  gallery/            Vite app — MetronicLayout variant switcher demo
  storybook/          Storybook 8 — stories for all components
  parity/             Standalone Metronic layout reference (Tailwind)
  demo/               Metronic v9.4.2 demo source (read-only reference)
  docs-site/          This documentation site (Nextra)
  docs/               Architecture docs, ADRs, specs, component mapping

  scripts/            CI utilities (bundle size + Storybook coverage checks)
  .github/workflows/  CI/CD pipeline (lint, test, build, Chromatic)

Package Structure

Each package follows a consistent structure:

packages/ui/
  src/
    components/
      navigation/     SideNav, Toolbar, Breadcrumbs, MegaMenu, etc.
      data/           AdvancedTable, Card, Badge, Avatar, Skeleton
      forms/          Button, Input, Select, Checkbox, Switch, etc.
      feedback/       Alert, Dialog, Sheet, Tooltip, Accordion, etc.
      layout/         Header, Separator, ScrollArea, MetronicLayout
      effects/        GlassmorphismCard
      ai/             AIInsightCard
    hooks/            useBreakpoint, useResponsive, etc.
    bridge/           Metronic compatibility layer (ui/, lib/, hooks/)
    index.ts          Public API barrel export
  tests/              Vitest test files
  dist/               Built output (CJS + ESM + types)
  tsup.config.ts      Build configuration
  vitest.config.ts    Test configuration

Build Order

Packages must build in dependency order:

tokens → theme → utils → ui → templates → i18n → accessibility → design-system

Turbo handles this automatically via dependsOn: ["^build"] in turbo.json.