veza/apps/web/src/components/ui/ScrollArea.stories.tsx
senke 9f40182ad1 ui(design): Phase 3 - rounded tokens, min-w/min-h, stories, NavigationProgress
- rounded-[var(--radius-xl/md/lg/sm)] → rounded-xl, rounded-md, rounded-lg, rounded-sm
- Timeline: min-w-[200px] → min-w-50
- AddEquipmentView, MetadataForm: min-h-[100px] → min-h-25
- NavigationProgress: shadow-[...] → shadow-button-primary-glow
- Stories: ActivityGraph, StatCard, NotificationBell, LoadingState, ScrollArea, Skeleton, FileUploadZone
- Reduced arbitrary values from ~60+ to 11 (5 files, exceptions documented)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 19:24:07 +01:00

30 lines
894 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-kodo-steel" />}
</div>
))}
</ScrollArea>
),
};