@ds-mo/ui 0.2.4 → 0.4.0

package/src/stories/Dimensions.stories.tsx

@@ -1,200 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-const meta: Meta = {
-  title: 'Design System/Dimensions',
-  parameters: { layout: 'fullscreen' },
-};
-
-export default meta;
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-const S: Record<string, React.CSSProperties> = {
-  page: { fontFamily: 'var(--typography-font-family, system-ui)', padding: 24, display: 'flex', flexDirection: 'column', gap: 40 },
-  section: { display: 'flex', flexDirection: 'column', gap: 12 },
-  heading: { fontSize: 18, fontWeight: 600, color: 'var(--color-foreground-primary)', margin: 0, letterSpacing: -0.3 },
-  subheading: { fontSize: 13, fontWeight: 500, color: 'var(--color-foreground-secondary)', margin: 0 },
-  row: { display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0' },
-  label: { fontSize: 11, color: 'var(--color-foreground-secondary)', minWidth: 140, flexShrink: 0, fontFamily: 'monospace' },
-};
-
-function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
-  return (
-    <div style={S.section}>
-      <div>
-        <h2 style={S.heading}>{title}</h2>
-        {subtitle && <p style={{ ...S.subheading, marginTop: 2 }}>{subtitle}</p>}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-// ── Stories ───────────────────────────────────────────────────────────────────
-
-const SPACE_TOKENS = ['000', '012', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '400', '600', '800'] as const;
-
-function Spacing() {
-  return (
-    <div style={S.page}>
-      <Section title="Spacing" subtitle="--dimension-space-* (base: 8px)">
-        {SPACE_TOKENS.map(token => (
-          <div key={token} style={S.row}>
-            <span style={S.label}>space-{token}</span>
-            <div style={{
-              width: `var(--dimension-space-${token})`,
-              height: 20,
-              backgroundColor: 'var(--color-background-bold-brand)',
-              borderRadius: 2,
-              minWidth: token === '000' ? 0 : 1,
-              transition: 'width 0.2s',
-            }} />
-          </div>
-        ))}
-      </Section>
-    </div>
-  );
-}
-
-const SIZE_TOKENS = ['000', '050', '100', '150', '200', '250', '300', '400', '500', '600', '800'] as const;
-
-function Sizes() {
-  return (
-    <div style={S.page}>
-      <Section title="Size" subtitle="--dimension-size-* — element width/height (base: 8px)">
-        {SIZE_TOKENS.map(token => (
-          <div key={token} style={S.row}>
-            <span style={S.label}>size-{token}</span>
-            <div style={{
-              width: `var(--dimension-size-${token})`,
-              height: `var(--dimension-size-${token})`,
-              backgroundColor: 'var(--color-background-faint-brand)',
-              border: '1px solid var(--color-border-brand)',
-              borderRadius: 4,
-              minWidth: token === '000' ? 0 : 1,
-              minHeight: token === '000' ? 0 : 1,
-            }} />
-          </div>
-        ))}
-      </Section>
-
-      <Section title="Iconography Sizes" subtitle="--dimension-iconography-* — semantic icon size aliases">
-        {['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].map(token => (
-          <div key={token} style={S.row}>
-            <span style={S.label}>iconography-{token}</span>
-            <div style={{
-              width: `var(--dimension-iconography-${token})`,
-              height: `var(--dimension-iconography-${token})`,
-              backgroundColor: 'var(--color-foreground-secondary)',
-              borderRadius: 'var(--dimension-radius-050)',
-            }} />
-          </div>
-        ))}
-      </Section>
-    </div>
-  );
-}
-
-const RADIUS_TOKENS = ['000', '012', '025', '037', '050', '075', '100', '125', '150', '175', '200', '250', '275', '300', '400', '600', 'half'] as const;
-
-function Radii() {
-  return (
-    <div style={S.page}>
-      <Section title="Border Radius" subtitle="--dimension-radius-* (base: 8px, half: 9999px)">
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: 12 }}>
-          {RADIUS_TOKENS.map(token => (
-            <div key={token} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
-              <div style={{
-                width: 64,
-                height: 64,
-                backgroundColor: 'var(--color-background-bold-brand)',
-                borderRadius: `var(--dimension-radius-${token})`,
-              }} />
-              <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', fontFamily: 'monospace' }}>
-                radius-{token}
-              </span>
-            </div>
-          ))}
-        </div>
-      </Section>
-    </div>
-  );
-}
-
-const STROKE_TOKENS = ['012', '015', '018', '025', '037', '050'] as const;
-
-function Strokes() {
-  return (
-    <div style={S.page}>
-      <Section title="Stroke Widths" subtitle="--dimension-stroke-width-*">
-        {STROKE_TOKENS.map(token => (
-          <div key={token} style={S.row}>
-            <span style={S.label}>stroke-width-{token}</span>
-            <div style={{
-              width: 200,
-              height: 0,
-              borderTop: `var(--dimension-stroke-width-${token}) solid var(--color-foreground-primary)`,
-            }} />
-          </div>
-        ))}
-      </Section>
-
-      <Section title="Z-Index Layers" subtitle="--dimension-z-index-*">
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-          {[
-            { token: 'base', value: '0' },
-            { token: 'raised', value: '50' },
-            { token: 'overlay', value: '250' },
-            { token: 'modal', value: '450' },
-            { token: 'floating', value: '500' },
-            { token: 'tooltip', value: '750' },
-          ].map(z => (
-            <div key={z.token} style={{
-              padding: '12px 16px',
-              backgroundColor: 'var(--color-background-faint-neutral)',
-              border: '1px solid var(--color-border-tertiary)',
-              borderRadius: 8,
-              textAlign: 'center',
-            }}>
-              <div style={{ fontSize: 20, fontWeight: 600, color: 'var(--color-foreground-primary)' }}>{z.value}</div>
-              <div style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', marginTop: 4 }}>z-index-{z.token}</div>
-            </div>
-          ))}
-        </div>
-      </Section>
-
-      <Section title="Component Widths" subtitle="Cards, modals, forms, menus, panels">
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 8 }}>
-          {[
-            { group: 'card-width', tokens: ['sm', 'md', 'lg'], values: ['400', '600', '800'] },
-            { group: 'modal-width', tokens: ['sm', 'md', 'lg'], values: ['400', '600', '800'] },
-            { group: 'menu-width', tokens: ['sm', 'md', 'lg'], values: ['200', '400', '600'] },
-            { group: 'panel-width', tokens: ['xs', 'sm', 'md', 'lg', 'xl'], values: ['200', '300', '400', '500', '600'] },
-          ].map(group => (
-            <div key={group.group} style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 8 }}>
-              <span style={{ fontSize: 12, fontWeight: 500, color: 'var(--color-foreground-secondary)' }}>{group.group}</span>
-              {group.tokens.map((token, i) => (
-                <div key={token} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <span style={{ ...S.label, minWidth: 80 }}>{token}</span>
-                  <div style={{
-                    width: `min(var(--dimension-${group.group}-${token}), 100%)`,
-                    height: 16,
-                    backgroundColor: 'var(--color-background-medium-brand)',
-                    borderRadius: 2,
-                  }} />
-                  <span style={{ fontSize: 10, color: 'var(--color-foreground-tertiary)' }}>{group.values[i]}px</span>
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      </Section>
-    </div>
-  );
-}
-
-export const SpacingStory: StoryObj = { name: 'Spacing', render: () => <Spacing /> };
-export const SizesStory: StoryObj = { name: 'Sizes', render: () => <Sizes /> };
-export const RadiiStory: StoryObj = { name: 'Radii', render: () => <Radii /> };
-export const StrokesAndMore: StoryObj = { name: 'Strokes & Layers', render: () => <Strokes /> };

package/src/stories/Effects.stories.tsx

@@ -1,231 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-const meta: Meta = {
-  title: 'Design System/Effects',
-  parameters: { layout: 'fullscreen' },
-};
-
-export default meta;
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-const S: Record<string, React.CSSProperties> = {
-  page: { fontFamily: 'var(--typography-font-family, system-ui)', padding: 24, display: 'flex', flexDirection: 'column', gap: 40 },
-  section: { display: 'flex', flexDirection: 'column', gap: 16 },
-  heading: { fontSize: 18, fontWeight: 600, color: 'var(--color-foreground-primary)', margin: 0, letterSpacing: -0.3 },
-  subheading: { fontSize: 13, fontWeight: 500, color: 'var(--color-foreground-secondary)', margin: 0 },
-};
-
-function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
-  return (
-    <div style={S.section}>
-      <div>
-        <h2 style={S.heading}>{title}</h2>
-        {subtitle && <p style={{ ...S.subheading, marginTop: 2 }}>{subtitle}</p>}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-// ── Stories ───────────────────────────────────────────────────────────────────
-
-const ELEVATION_LEVELS = [
-  { token: 'elevated-none', label: 'None' },
-  { token: 'depressed-sm', label: 'Depressed SM' },
-  { token: 'depressed-md', label: 'Depressed MD' },
-  { token: 'elevated-sm', label: 'Elevated SM' },
-  { token: 'elevated-md', label: 'Elevated MD' },
-  { token: 'elevated-floating', label: 'Floating' },
-] as const;
-
-const PANEL_LEVELS = [
-  { token: 'elevated-panel-top', label: 'Panel Top' },
-  { token: 'elevated-panel-right', label: 'Panel Right' },
-  { token: 'elevated-panel-bottom', label: 'Panel Bottom' },
-  { token: 'elevated-panel-left', label: 'Panel Left' },
-] as const;
-
-function Elevation() {
-  return (
-    <div style={S.page}>
-      <Section title="Elevation" subtitle="--effect-elevation-* — combined shadow + highlight">
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24, padding: 24 }}>
-          {ELEVATION_LEVELS.map(level => (
-            <div key={level.token} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
-              <div style={{
-                width: 120,
-                height: 80,
-                backgroundColor: 'var(--color-background-primary)',
-                borderRadius: 8,
-                boxShadow: `var(--effect-elevation-${level.token})`,
-              }} />
-              <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', fontFamily: 'monospace' }}>
-                {level.label}
-              </span>
-            </div>
-          ))}
-        </div>
-      </Section>
-
-      <Section title="Panel Shadows" subtitle="Directional shadows for attached panels">
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24, padding: 24 }}>
-          {PANEL_LEVELS.map(level => (
-            <div key={level.token} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
-              <div style={{
-                width: 120,
-                height: 80,
-                backgroundColor: 'var(--color-background-primary)',
-                borderRadius: 8,
-                boxShadow: `var(--effect-elevation-${level.token})`,
-              }} />
-              <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', fontFamily: 'monospace' }}>
-                {level.label}
-              </span>
-            </div>
-          ))}
-        </div>
-      </Section>
-    </div>
-  );
-}
-
-const DURATION_TOKENS = [
-  { token: 'instant', ms: '0' },
-  { token: 'short-1', ms: '50' },
-  { token: 'short-2', ms: '100' },
-  { token: 'short-3', ms: '200' },
-  { token: 'medium-1', ms: '300' },
-  { token: 'medium-2', ms: '400' },
-  { token: 'medium-3', ms: '500' },
-  { token: 'long-1', ms: '750' },
-  { token: 'long-2', ms: '1000' },
-  { token: 'long-3', ms: '2000' },
-] as const;
-
-function MotionDemo({ token, ms }: { token: string; ms: string }) {
-  const [active, setActive] = React.useState(false);
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
-      <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', minWidth: 100, fontFamily: 'monospace' }}>
-        {token}
-      </span>
-      <span style={{ fontSize: 10, color: 'var(--color-foreground-tertiary)', minWidth: 50 }}>{ms}ms</span>
-      <div
-        style={{
-          width: 200,
-          height: 24,
-          backgroundColor: 'var(--color-background-faint-neutral)',
-          borderRadius: 12,
-          position: 'relative',
-          cursor: 'pointer',
-        }}
-        onMouseEnter={() => setActive(true)}
-        onMouseLeave={() => setActive(false)}
-      >
-        <div style={{
-          position: 'absolute',
-          top: 2,
-          left: active ? 'calc(100% - 22px)' : '2px',
-          width: 20,
-          height: 20,
-          borderRadius: 10,
-          backgroundColor: 'var(--color-background-bold-brand)',
-          transition: `left var(--effect-motion-${token})`,
-        }} />
-      </div>
-    </div>
-  );
-}
-
-function EasingDemo({ token, bezier }: { token: string; bezier: string }) {
-  const [active, setActive] = React.useState(false);
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
-      <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', minWidth: 140, fontFamily: 'monospace' }}>
-        {token}
-      </span>
-      <span style={{ fontSize: 10, color: 'var(--color-foreground-tertiary)', minWidth: 160, fontFamily: 'monospace' }}>
-        cubic-bezier({bezier})
-      </span>
-      <div
-        style={{
-          width: 200,
-          height: 24,
-          backgroundColor: 'var(--color-background-faint-neutral)',
-          borderRadius: 12,
-          position: 'relative',
-          cursor: 'pointer',
-        }}
-        onMouseEnter={() => setActive(true)}
-        onMouseLeave={() => setActive(false)}
-      >
-        <div style={{
-          position: 'absolute',
-          top: 2,
-          left: active ? 'calc(100% - 22px)' : '2px',
-          width: 20,
-          height: 20,
-          borderRadius: 10,
-          backgroundColor: 'var(--color-background-bold-positive)',
-          transition: `left var(--effect-animation-duration-medium-3) var(--effect-animation-easing-${token})`,
-        }} />
-      </div>
-    </div>
-  );
-}
-
-function Motion() {
-  return (
-    <div style={S.page}>
-      <Section title="Motion Presets" subtitle="--effect-motion-* — hover to animate">
-        {DURATION_TOKENS.map(d => (
-          <MotionDemo key={d.token} token={d.token} ms={d.ms} />
-        ))}
-      </Section>
-
-      <Section title="Easing Curves" subtitle="--effect-animation-easing-* — hover to compare curves (all use 500ms duration)">
-        {[
-          { token: 'ease-in', bezier: '0.47, 0, 0.75, 0.72' },
-          { token: 'ease-out', bezier: '0.17, 0.84, 0.44, 1' },
-          { token: 'ease-in-out', bezier: '0.77, 0, 0.18, 1' },
-          { token: 'ease-in-out-back', bezier: '0.22, 0.61, 0.01, 1.03' },
-        ].map(easing => (
-          <EasingDemo key={easing.token} token={easing.token} bezier={easing.bezier} />
-        ))}
-      </Section>
-
-      <Section title="Blur" subtitle="--effect-blur-*">
-        <div style={{ display: 'flex', gap: 24 }}>
-          {['sm', 'md', 'lg'].map(size => (
-            <div key={size} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
-              <div style={{
-                width: 120,
-                height: 80,
-                borderRadius: 8,
-                overflow: 'hidden',
-                position: 'relative',
-                background: 'linear-gradient(135deg, var(--color-background-bold-brand), var(--color-background-bold-negative))',
-              }}>
-                <div style={{
-                  position: 'absolute',
-                  inset: 0,
-                  backdropFilter: `blur(var(--effect-blur-${size}))`,
-                  WebkitBackdropFilter: `blur(var(--effect-blur-${size}))`,
-                  backgroundColor: 'var(--color-background-translucent)',
-                }} />
-              </div>
-              <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', fontFamily: 'monospace' }}>
-                blur-{size}
-              </span>
-            </div>
-          ))}
-        </div>
-      </Section>
-    </div>
-  );
-}
-
-export const ElevationStory: StoryObj = { name: 'Elevation', render: () => <Elevation /> };
-export const MotionStory: StoryObj = { name: 'Motion & Blur', render: () => <Motion /> };

package/src/stories/Icons.stories.tsx

@@ -1,159 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import * as Icons from '@ds-mo/icons';
-import type { IconComponent } from '@ds-mo/icons';
-
-const meta: Meta = {
-  title: 'Design System/Icons',
-  parameters: { layout: 'fullscreen' },
-};
-
-export default meta;
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-const allIcons = Object.entries(Icons).filter(
-  ([name, v]) => name !== 'createIcon' && v != null
-) as [string, IconComponent][];
-
-const SIZE_OPTIONS = [12, 16, 20, 24, 32] as const;
-type Size = typeof SIZE_OPTIONS[number];
-
-// ── Story ─────────────────────────────────────────────────────────────────────
-
-function IconGrid() {
-  const [search, setSearch]   = useState('');
-  const [size, setSize]       = useState<Size>(20);
-  const [copied, setCopied]   = useState<string | null>(null);
-
-  const filtered = allIcons.filter(([name]) =>
-    name.toLowerCase().includes(search.toLowerCase())
-  );
-
-  const copy = (name: string) => {
-    navigator.clipboard.writeText(name);
-    setCopied(name);
-    setTimeout(() => setCopied(null), 1500);
-  };
-
-  return (
-    <div style={{ fontFamily: 'var(--font-family-sans, system-ui)', padding: 24 }}>
-
-      {/* Toolbar */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24, flexWrap: 'wrap' }}>
-        <input
-          type="search"
-          placeholder={`Search ${allIcons.length} icons…`}
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          style={{
-            flex: '1 1 240px',
-            minWidth: 200,
-            maxWidth: 400,
-            height: 36,
-            padding: '0 12px',
-            border: '1px solid var(--color-border-tertiary, #e0e0e0)',
-            borderRadius: 6,
-            fontSize: 14,
-            outline: 'none',
-            background: 'var(--color-background-primary, #fff)',
-            color: 'var(--color-foreground-primary, #111)',
-          }}
-        />
-        <div style={{ display: 'flex', gap: 4 }}>
-          {SIZE_OPTIONS.map(s => (
-            <button
-              key={s}
-              onClick={() => setSize(s)}
-              style={{
-                height: 36,
-                padding: '0 12px',
-                border: '1px solid var(--color-border-tertiary, #e0e0e0)',
-                borderRadius: 6,
-                fontSize: 13,
-                cursor: 'pointer',
-                fontWeight: size === s ? 600 : 400,
-                background: size === s
-                  ? 'var(--color-background-faint-brand, #eff3ff)'
-                  : 'var(--color-background-primary, #fff)',
-                color: size === s
-                  ? 'var(--color-foreground-bold-brand, #3a5ccc)'
-                  : 'var(--color-foreground-secondary, #555)',
-              }}
-            >
-              {s}
-            </button>
-          ))}
-        </div>
-        <span style={{ fontSize: 13, color: 'var(--color-foreground-secondary, #888)', marginLeft: 'auto' }}>
-          {filtered.length} {filtered.length === 1 ? 'icon' : 'icons'}
-        </span>
-      </div>
-
-      {/* Grid */}
-      {filtered.length === 0 ? (
-        <p style={{ color: 'var(--color-foreground-secondary, #888)', fontSize: 14 }}>
-          No icons match "{search}"
-        </p>
-      ) : (
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
-          gap: 4,
-        }}>
-          {filtered.map(([name, Icon]) => (
-            <button
-              key={name}
-              onClick={() => copy(name)}
-              title={`Click to copy: ${name}`}
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 8,
-                padding: '12px 8px',
-                border: '1px solid transparent',
-                borderRadius: 8,
-                cursor: 'pointer',
-                background: copied === name
-                  ? 'var(--color-background-faint-brand, #eff3ff)'
-                  : 'transparent',
-                color: 'var(--color-foreground-primary, #111)',
-                transition: 'background 0.12s',
-                textAlign: 'center',
-              }}
-              onMouseEnter={e => {
-                if (copied !== name)
-                  (e.currentTarget as HTMLElement).style.background =
-                    'var(--color-background-faint-neutral, #f5f5f5)';
-              }}
-              onMouseLeave={e => {
-                if (copied !== name)
-                  (e.currentTarget as HTMLElement).style.background = 'transparent';
-              }}
-            >
-              <Icon size={size} />
-              <span style={{
-                fontSize: 10,
-                lineHeight: 1.3,
-                color: copied === name
-                  ? 'var(--color-foreground-bold-brand, #3a5ccc)'
-                  : 'var(--color-foreground-secondary, #888)',
-                wordBreak: 'break-word',
-                maxWidth: '100%',
-              }}>
-                {copied === name ? '✓ copied' : name}
-              </span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export const AllIcons: StoryObj = {
-  name: 'All Icons',
-  render: () => <IconGrid />,
-};