mirror of https://github.com/buster-so/buster.git
120 lines
3.9 KiB
TypeScript
120 lines
3.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ScrollArea } from './ScrollArea';
|
|
|
|
const meta = {
|
|
title: 'UI/ScrollArea/ScrollArea',
|
|
component: ScrollArea,
|
|
parameters: {
|
|
layout: 'centered'
|
|
},
|
|
tags: ['autodocs']
|
|
} satisfies Meta<typeof ScrollArea>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
|
|
<div>
|
|
<p className="mb-4">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget
|
|
ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.
|
|
</p>
|
|
<p className="mb-4">
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
|
|
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
|
architecto beatae vitae dicta sunt explicabo.
|
|
</p>
|
|
<p className="mb-4">
|
|
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
|
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
</p>
|
|
<p className="mb-4">
|
|
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
|
|
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
|
quaerat voluptatem.
|
|
</p>
|
|
<p>
|
|
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
|
|
nisi ut aliquid ex ea commodi consequatur.
|
|
</p>
|
|
</div>
|
|
</ScrollArea>
|
|
)
|
|
};
|
|
|
|
export const TallContent: Story = {
|
|
render: () => (
|
|
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
|
|
<div>
|
|
{Array.from({ length: 50 }).map((_, i) => (
|
|
<div key={i} className="mb-2">
|
|
Row {i + 1}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
)
|
|
};
|
|
|
|
export const WideContent: Story = {
|
|
render: () => (
|
|
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
|
|
<div className="w-[500px]">
|
|
<p className="mb-4">
|
|
This content is intentionally wider than the container to demonstrate horizontal
|
|
scrolling. The ScrollArea component will automatically add scrollbars as needed.
|
|
</p>
|
|
<div className="flex space-x-4">
|
|
{Array.from({ length: 10 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-md bg-gray-200">
|
|
{i + 1}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
)
|
|
};
|
|
|
|
export const CustomHeight: Story = {
|
|
render: () => (
|
|
<ScrollArea className="h-[400px] w-[350px] rounded-md border p-4">
|
|
<div>
|
|
<p className="mb-4 text-lg font-semibold">Taller Scroll Area</p>
|
|
{Array.from({ length: 20 }).map((_, i) => (
|
|
<p key={i} className="mb-4">
|
|
Paragraph {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
</p>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
)
|
|
};
|
|
|
|
export const NestedContent: Story = {
|
|
render: () => (
|
|
<ScrollArea className="h-[300px] w-[400px] rounded-md border p-4">
|
|
<div>
|
|
<h3 className="mb-4 text-lg font-semibold">Nested Content Example</h3>
|
|
<div className="mb-4">
|
|
<p className="mb-2">Main content area with some text.</p>
|
|
<div className="rounded-md border p-2">
|
|
<h4 className="mb-2 font-medium">Nested Section</h4>
|
|
<p>This is nested content inside the scroll area.</p>
|
|
</div>
|
|
</div>
|
|
{Array.from({ length: 10 }).map((_, i) => (
|
|
<div key={i} className="mb-4">
|
|
<h4 className="mb-1 font-medium">Section {i + 1}</h4>
|
|
<p>Additional content for demonstrating scrolling behavior.</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
)
|
|
};
|