veza/apps/web/src/components/ui/ScrollArea.stories.tsx
senke fa56dfa77e refactor: Phase 3a — Global color class migration to SUMI semantics
- 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>
2026-02-12 01:51:49 +01:00

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>
),
};