Skip to content

Commit ed925d1

Browse files
devin-ai-integration[bot]devin-ai-integration[bot]
committed
Add Storybook stories for TemplateCard, TemplateModal, SquareProjectCard, HighlightText, and Carousel components
Co-Authored-By: unknown <>
1 parent 6962f87 commit ed925d1

File tree

5 files changed

+1007
-0
lines changed

5 files changed

+1007
-0
lines changed

‎apps/web/client/src/stories/Carousel.stories.tsx‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
2+
import { Carousel } from '@/app/projects/_components/carousel';
3+
4+
/**
5+
* Carousel is a horizontal scrollable container with navigation buttons
6+
* that appear when content overflows. It includes smooth scrolling and
7+
* gradient fade effects at the edges.
8+
*/
9+
const meta = {
10+
title: 'Projects/Carousel',
11+
component: Carousel,
12+
parameters: {
13+
layout: 'padded',
14+
backgrounds: {
15+
default: 'dark',
16+
},
17+
},
18+
tags: ['autodocs'],
19+
decorators: [
20+
(Story) => (
21+
<div className="w-[600px]">
22+
<Story />
23+
</div>
24+
),
25+
],
26+
argTypes: {
27+
gap: {
28+
description: 'Gap between items (Tailwind class)',
29+
control: 'text',
30+
},
31+
className: {
32+
description: 'Additional CSS classes',
33+
control: 'text',
34+
},
35+
scrollAmount: {
36+
description: 'Amount to scroll when clicking navigation buttons (in pixels)',
37+
control: 'number',
38+
},
39+
tolerance: {
40+
description: 'Tolerance for detecting scroll position (in pixels)',
41+
control: 'number',
42+
},
43+
},
44+
} satisfies Meta<typeof Carousel>;
45+
46+
export default meta;
47+
type Story = StoryObj<typeof meta>;
48+
49+
const SampleCard = ({ title, color }: { title: string; color: string }) => (
50+
<div
51+
className={`flex-shrink-0 w-48 h-32 rounded-lg flex items-center justify-center text-white font-medium ${color}`}
52+
>
53+
{title}
54+
</div>
55+
);
56+
57+
/**
58+
* Default carousel with multiple items that overflow
59+
*/
60+
export const Default: Story = {
61+
args: {
62+
gap: 'gap-4',
63+
scrollAmount: 300,
64+
tolerance: 10,
65+
children: (
66+
<>
67+
<SampleCard title="Card 1" color="bg-blue-600" />
68+
<SampleCard title="Card 2" color="bg-green-600" />
69+
<SampleCard title="Card 3" color="bg-purple-600" />
70+
<SampleCard title="Card 4" color="bg-orange-600" />
71+
<SampleCard title="Card 5" color="bg-pink-600" />
72+
<SampleCard title="Card 6" color="bg-teal-600" />
73+
<SampleCard title="Card 7" color="bg-red-600" />
74+
</>
75+
),
76+
},
77+
};
78+
79+
/**
80+
* Carousel with fewer items that don't overflow (no navigation buttons)
81+
*/
82+
export const NoOverflow: Story = {
83+
args: {
84+
gap: 'gap-4',
85+
children: (
86+
<>
87+
<SampleCard title="Card 1" color="bg-blue-600" />
88+
<SampleCard title="Card 2" color="bg-green-600" />
89+
</>
90+
),
91+
},
92+
};
93+
94+
/**
95+
* Carousel with larger gap between items
96+
*/
97+
export const LargeGap: Story = {
98+
args: {
99+
gap: 'gap-8',
100+
children: (
101+
<>
102+
<SampleCard title="Card 1" color="bg-blue-600" />
103+
<SampleCard title="Card 2" color="bg-green-600" />
104+
<SampleCard title="Card 3" color="bg-purple-600" />
105+
<SampleCard title="Card 4" color="bg-orange-600" />
106+
<SampleCard title="Card 5" color="bg-pink-600" />
107+
</>
108+
),
109+
},
110+
};
111+
112+
/**
113+
* Carousel with smaller gap between items
114+
*/
115+
export const SmallGap: Story = {
116+
args: {
117+
gap: 'gap-2',
118+
children: (
119+
<>
120+
<SampleCard title="Card 1" color="bg-blue-600" />
121+
<SampleCard title="Card 2" color="bg-green-600" />
122+
<SampleCard title="Card 3" color="bg-purple-600" />
123+
<SampleCard title="Card 4" color="bg-orange-600" />
124+
<SampleCard title="Card 5" color="bg-pink-600" />
125+
<SampleCard title="Card 6" color="bg-teal-600" />
126+
</>
127+
),
128+
},
129+
};
130+
131+
/**
132+
* Carousel with custom scroll amount
133+
*/
134+
export const CustomScrollAmount: Story = {
135+
args: {
136+
gap: 'gap-4',
137+
scrollAmount: 500,
138+
children: (
139+
<>
140+
<SampleCard title="Card 1" color="bg-blue-600" />
141+
<SampleCard title="Card 2" color="bg-green-600" />
142+
<SampleCard title="Card 3" color="bg-purple-600" />
143+
<SampleCard title="Card 4" color="bg-orange-600" />
144+
<SampleCard title="Card 5" color="bg-pink-600" />
145+
<SampleCard title="Card 6" color="bg-teal-600" />
146+
<SampleCard title="Card 7" color="bg-red-600" />
147+
<SampleCard title="Card 8" color="bg-yellow-600" />
148+
</>
149+
),
150+
},
151+
};
152+
153+
/**
154+
* Carousel with many items
155+
*/
156+
export const ManyItems: Story = {
157+
args: {
158+
gap: 'gap-4',
159+
children: (
160+
<>
161+
{Array.from({ length: 15 }, (_, i) => (
162+
<SampleCard
163+
key={i}
164+
title={`Card ${i + 1}`}
165+
color={[
166+
'bg-blue-600',
167+
'bg-green-600',
168+
'bg-purple-600',
169+
'bg-orange-600',
170+
'bg-pink-600',
171+
'bg-teal-600',
172+
'bg-red-600',
173+
'bg-yellow-600',
174+
'bg-indigo-600',
175+
'bg-cyan-600',
176+
][i % 10]}
177+
/>
178+
))}
179+
</>
180+
),
181+
},
182+
};
183+
184+
/**
185+
* Carousel with varying card sizes
186+
*/
187+
export const VaryingSizes: Story = {
188+
args: {
189+
gap: 'gap-4',
190+
children: (
191+
<>
192+
<div className="flex-shrink-0 w-32 h-32 rounded-lg flex items-center justify-center text-white font-medium bg-blue-600">
193+
Small
194+
</div>
195+
<div className="flex-shrink-0 w-64 h-32 rounded-lg flex items-center justify-center text-white font-medium bg-green-600">
196+
Wide
197+
</div>
198+
<div className="flex-shrink-0 w-48 h-32 rounded-lg flex items-center justify-center text-white font-medium bg-purple-600">
199+
Medium
200+
</div>
201+
<div className="flex-shrink-0 w-56 h-32 rounded-lg flex items-center justify-center text-white font-medium bg-orange-600">
202+
Large
203+
</div>
204+
<div className="flex-shrink-0 w-40 h-32 rounded-lg flex items-center justify-center text-white font-medium bg-pink-600">
205+
Normal
206+
</div>
207+
</>
208+
),
209+
},
210+
};
211+
212+
/**
213+
* Carousel in a narrow container
214+
*/
215+
export const NarrowContainer: Story = {
216+
decorators: [
217+
(Story) => (
218+
<div className="w-[300px]">
219+
<Story />
220+
</div>
221+
),
222+
],
223+
args: {
224+
gap: 'gap-4',
225+
children: (
226+
<>
227+
<SampleCard title="Card 1" color="bg-blue-600" />
228+
<SampleCard title="Card 2" color="bg-green-600" />
229+
<SampleCard title="Card 3" color="bg-purple-600" />
230+
<SampleCard title="Card 4" color="bg-orange-600" />
231+
</>
232+
),
233+
},
234+
};
235+
236+
/**
237+
* Carousel in a wide container
238+
*/
239+
export const WideContainer: Story = {
240+
decorators: [
241+
(Story) => (
242+
<div className="w-[900px]">
243+
<Story />
244+
</div>
245+
),
246+
],
247+
args: {
248+
gap: 'gap-4',
249+
children: (
250+
<>
251+
<SampleCard title="Card 1" color="bg-blue-600" />
252+
<SampleCard title="Card 2" color="bg-green-600" />
253+
<SampleCard title="Card 3" color="bg-purple-600" />
254+
<SampleCard title="Card 4" color="bg-orange-600" />
255+
<SampleCard title="Card 5" color="bg-pink-600" />
256+
<SampleCard title="Card 6" color="bg-teal-600" />
257+
<SampleCard title="Card 7" color="bg-red-600" />
258+
<SampleCard title="Card 8" color="bg-yellow-600" />
259+
</>
260+
),
261+
},
262+
};

0 commit comments

Comments
 (0)