- Replace all kodo-* color classes across ~100 TSX files: kodo-void → background, kodo-ink → card, kodo-graphite → muted, kodo-steel → muted-foreground, kodo-cyan → primary, kodo-magenta → destructive, kodo-lime → success, kodo-red → destructive, kodo-gold → warning - Replace cyan-500, magenta-500, lime-500 default Tailwind colors with semantic equivalents (primary, destructive, success) - Fix WaveformVisualizer hardcoded hex colors to SUMI values - Delete global-effects.css (conflicting, redundant with index.css) Co-authored-by: Cursor <cursoragent@cursor.com>
30 lines
889 B
TypeScript
30 lines
889 B
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ScrollArea } from './scroll-area';
|
|
|
|
const meta = {
|
|
title: 'UI/ScrollArea',
|
|
component: ScrollArea,
|
|
tags: ['autodocs'],
|
|
args: {
|
|
className: 'min-h-50 w-96 rounded-md border p-4',
|
|
}
|
|
} satisfies Meta<typeof ScrollArea>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
render: (args) => (
|
|
<ScrollArea {...args}>
|
|
<h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
|
|
{Array.from({ length: 50 }).map((_, i, a) => (
|
|
<div key={i}>
|
|
<div className="text-sm">
|
|
Tag {a.length - i}
|
|
</div>
|
|
{i !== a.length - 1 && <div className="my-2 h-px bg-muted" />}
|
|
</div>
|
|
))}
|
|
</ScrollArea>
|
|
),
|
|
};
|