diff --git a/storybook/src/stories/DesignSystem.stories.tsx b/storybook/src/stories/DesignSystem.stories.tsx new file mode 100644 index 000000000..75b655338 --- /dev/null +++ b/storybook/src/stories/DesignSystem.stories.tsx @@ -0,0 +1,426 @@ +/** + * Design System Stories + * + * Showcases the complete design system from the shared package + * All color tokens, typography, spacing, and utilities + */ + +import React from 'react' +import type { Meta, StoryObj } from '@storybook/react' + +// Color Swatch Component +const ColorSwatch: React.FC<{ + name: string + value: string + category: string +}> = ({ name, value, category }) => ( +
+
+
+
--color-{name}
+
+ {value} +
+
{category}
+
+
+) + +// Typography Sample Component +const TypographySample: React.FC<{ + family: string + label: string + text: string +}> = ({ family, label, text }) => ( +
+
+ {label} +
+
+ {text} +
+
+ {family} +
+
+) + +// Radius Sample Component +const RadiusSample: React.FC<{ + name: string + value: string +}> = ({ name, value }) => ( +
+
+
+
--radius-{name}
+
+ {value} +
+
+
+) + +// All Colors Grid +const AllColorsGrid: React.FC = () => { + const colors = [ + { name: 'background', value: 'oklch(0.92 0.03 290)', category: 'Base' }, + { name: 'foreground', value: 'oklch(0.25 0.02 260)', category: 'Base' }, + { name: 'card', value: 'oklch(1 0 0)', category: 'Surfaces' }, + { name: 'card-foreground', value: 'oklch(0.25 0.02 260)', category: 'Surfaces' }, + { name: 'popover', value: 'oklch(1 0 0)', category: 'Surfaces' }, + { name: 'popover-foreground', value: 'oklch(0.25 0.02 260)', category: 'Surfaces' }, + { name: 'primary', value: 'oklch(0.55 0.18 290)', category: 'Brand' }, + { name: 'primary-foreground', value: 'oklch(0.98 0 0)', category: 'Brand' }, + { name: 'secondary', value: 'oklch(0.35 0.02 260)', category: 'Brand' }, + { name: 'secondary-foreground', value: 'oklch(0.90 0.01 260)', category: 'Brand' }, + { name: 'muted', value: 'oklch(0.95 0.02 290)', category: 'Neutral' }, + { name: 'muted-foreground', value: 'oklch(0.50 0.02 260)', category: 'Neutral' }, + { name: 'accent', value: 'oklch(0.70 0.17 195)', category: 'Brand' }, + { name: 'accent-foreground', value: 'oklch(0.2 0.02 260)', category: 'Brand' }, + { name: 'destructive', value: 'oklch(0.55 0.22 25)', category: 'Semantic' }, + { name: 'destructive-foreground', value: 'oklch(0.98 0 0)', category: 'Semantic' }, + { name: 'border', value: 'oklch(0.85 0.02 290)', category: 'Neutral' }, + { name: 'input', value: 'oklch(0.85 0.02 290)', category: 'Neutral' }, + { name: 'ring', value: 'oklch(0.70 0.17 195)', category: 'Semantic' }, + { name: 'sidebar', value: 'oklch(0.35 0.02 260)', category: 'Sidebar' }, + { name: 'sidebar-foreground', value: 'oklch(0.90 0.01 260)', category: 'Sidebar' }, + { name: 'sidebar-primary', value: 'oklch(0.55 0.18 290)', category: 'Sidebar' }, + { name: 'sidebar-accent', value: 'oklch(0.40 0.03 260)', category: 'Sidebar' }, + { name: 'sidebar-border', value: 'oklch(0.30 0.02 260)', category: 'Sidebar' }, + { name: 'canvas', value: 'oklch(0.96 0.01 290)', category: 'Surfaces' }, + { name: 'drop-zone-border', value: 'oklch(0.70 0.17 195)', category: 'Interactive' }, + ] + + return ( +
+ {colors.map((color) => ( + + ))} +
+ ) +} + +// Typography Showcase +const TypographyShowcase: React.FC = () => ( +
+ + + +
+) + +// Border Radius Showcase +const BorderRadiusShowcase: React.FC = () => { + const radii = [ + { name: 'sm', value: '0.25rem' }, + { name: 'md', value: '0.5rem' }, + { name: 'lg', value: '0.75rem' }, + { name: 'xl', value: '1rem' }, + { name: '2xl', value: '1.5rem' }, + { name: 'full', value: '9999px' }, + ] + + return ( +
+ {radii.map((radius) => ( + + ))} +
+ ) +} + +// Utility Classes Demo +const UtilityClassesDemo: React.FC = () => ( +
+
+

Text Gradient

+
+ Gradient Text Effect +
+
+ +
+

Glass Effect

+
+

This card has a glassmorphism effect

+

+ With backdrop blur and transparency +

+
+
+ +
+

Responsive Container

+
+

+ This container is responsive and centered with max-width constraints. +

+
+
+
+) + +// Level Theme Colors +const LevelThemeColors: React.FC = () => ( +
+
+

Level 2 - Green Theme

+
+
+
+
+ Level 2 Gradient +
+
+
+
+
+ #22c55e +
+
+
+
+ +
+

Level 3 - Orange Theme

+
+
+
+
+ Level 3 Gradient +
+
+
+
+
+ #f97316 +
+
+
+
+ +
+

Level 4 - Purple Theme

+
+
+
+
+ Level 4 Gradient +
+
+
+
+
+ #a855f7 +
+
+
+
+
+) + +// Meta configuration +const meta: Meta = { + title: 'Design System/Tokens', + parameters: { + package: 'shared', + layout: 'padded', + }, +} + +export default meta + +// Stories +type Story = StoryObj + +export const ColorPalette: Story = { + render: () => ( +
+

Color System

+ +
+ ), +} + +export const Typography: Story = { + render: () => ( +
+

Typography

+ +
+ ), +} + +export const BorderRadius: Story = { + render: () => ( +
+

Border Radius Scale

+ +
+ ), +} + +export const UtilityClasses: Story = { + render: () => ( +
+

Utility Classes

+ +
+ ), +} + +export const LevelThemes: Story = { + render: () => ( +
+

Level-Specific Themes

+ +
+ ), +} + +export const CompleteShowcase: Story = { + render: () => ( +
+

MetaBuilder Design System

+

+ Complete design tokens from the shared package +

+ +
+

Color Palette (OKLCH)

+ +
+ +
+

Typography System

+ +
+ +
+

Border Radius

+ +
+ +
+

Level Themes

+ +
+ +
+

Utility Effects

+ +
+
+ ), +}