Design system monorepo with Web Components and design tokens extracted from Figma "Foundation UI Kit (Community)". TypeScript, Vite, Vitest.
- proto — version pinning (Node 22.16.0, Moon 2.0.4)
- Moon — task runner and build orchestration
- npm workspaces — package linking
maneki-monorepo/
├── .prototools # node 22.16.0, moon 2.0.4
├── .moon/ # Moon workspace + toolchain config
├── .storybook/ # Root Storybook config (aggregates all packages)
├── package.json # npm workspaces root + Storybook scripts
├── packages/
│ ├── foundation/ # Design tokens (@maneki/foundation)
│ ├── ui-components/ # Web Components + Storybook (@maneki/ui-components)
│ ├── grid-layout/ # Grid layout library (@maneki/grid-layout)
│ └── flex-layout/ # Panel-based flex layout (@maneki/flex-layout)
| Package | npm name | Description |
|---|---|---|
foundation |
@maneki/foundation |
Design tokens: 131 colors, semantic tokens, typography, spacing, elevation, responsive breakpoints |
ui-components |
@maneki/ui-components |
50 Web Components (button, badge, image, icon, tag, avatar, alert, label, link, checkbox, radio, input, textarea, file-upload, select, card, breadcrumb, accordion, dropdown, menu, modal, side-panel-menu, tabs, table, carousel, calendar, calendar-quicklinks, calendar-time, datetime-picker, clock, list-item, list-header, list-group) with Storybook 10 |
grid-layout |
@maneki/grid-layout |
Zero-dep drag/resize grid layout (220 tests) |
flex-layout |
@maneki/flex-layout |
Panel-based flex layout for dashboard-style interfaces (3 components, 50 tests) |
| App | Description |
|---|---|
catalog |
Visual catalog for all foundation tokens + 50 components. Used for Playwright visual regression tests (36 screenshot tests). |
flex-layout |
@maneki/flex-layout |
# Install toolchain
proto use
# Install dependencies
npm install
# Build all packages
moon check --all
# Run tests for a specific package
moon run foundation:test
moon run ui-components:test
moon run grid-layout:test
moon run flex-layout:test
# Storybook (all packages)
npm run storybook # Dev server on port 6006
npm run storybook:build # Static build → storybook-static/- Zero runtime dependencies (except ui-components depends on foundation)
- Web Components with Shadow DOM
- CSS custom properties, prefixed per package:
--fd-*,--ui-*,--grid-*,--flex-* - TypeScript strict mode, ES2022 target
- Tests co-located:
foo.ts→foo.test.ts - Moon tasks in kebab-case:
build,test,test-watch,dev,storybook
Published to Chromatic: https://www.chromatic.com/library?appId=69ac56bb2124263f2f04fadc
MIT