8c0dd30685
TASK-DS-001: Migrated packages/design-system/ from legacy Kōdō to SUMI v2.0 - New src/ structure with proper TypeScript exports - Component type registry documenting all 40+ UI components - cn() utility re-export - package.json with exports map for tokens subpaths TASK-DS-002: Extracted design tokens as TypeScript objects - tokens/colors.ts: backgrounds, surfaces, text, pigments, semantic, glass, shadows, light theme - tokens/typography.ts: font families, sizes, weights, line heights, letter spacings - tokens/spacing.ts: spacing scale, radius, z-index, layout - tokens/motion.ts: durations and easing functions TASK-DS-003: Added missing Storybook stories - EmptyState.stories.tsx (8 variants: default, icon, action, search, sizes, card, centered) - ButtonLoading.stories.tsx (6 variants: default, loading, text, destructive, outline, small) - ContentFadeIn.stories.tsx (2 variants: default, card) - DesignTokens.stories.tsx (visual token reference: pigments, backgrounds, text, typography, spacing, radius) - Total: 42 → 46 stories for UI components + design token showcase Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ContentFadeIn } from './ContentFadeIn';
|
|
|
|
const meta: Meta<typeof ContentFadeIn> = {
|
|
title: 'UI/ContentFadeIn',
|
|
component: ContentFadeIn,
|
|
tags: ['autodocs'],
|
|
};
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof ContentFadeIn>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
children: (
|
|
<div className="p-6 bg-surface-card rounded-lg border border-border">
|
|
<h3 className="text-lg font-heading font-bold mb-2">Content loaded</h3>
|
|
<p className="text-muted-foreground">
|
|
This content fades in with a smooth 200ms transition using SUMI easing.
|
|
</p>
|
|
</div>
|
|
),
|
|
},
|
|
};
|
|
|
|
export const Card: Story = {
|
|
args: {
|
|
children: (
|
|
<div className="p-4 bg-surface-card rounded-lg border border-border space-y-3">
|
|
<div className="w-full h-32 bg-muted rounded-md" />
|
|
<h4 className="font-heading font-semibold">Track Title</h4>
|
|
<p className="text-sm text-muted-foreground">Artist Name</p>
|
|
</div>
|
|
),
|
|
className: 'max-w-sm',
|
|
},
|
|
};
|