47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react";
|
|
import { AnimatedContainer } from "./animated-container";
|
|
|
|
const meta: Meta<typeof AnimatedContainer> = {
|
|
title: "Atoms/AnimatedContainer",
|
|
component: AnimatedContainer,
|
|
argTypes: {
|
|
animation: { control: "select", options: ["fade-up", "fade-scale", "slide-left", "none"] },
|
|
stagger: { control: "boolean" },
|
|
delay: { control: { type: "number", min: 0, max: 2000, step: 100 } },
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof AnimatedContainer>;
|
|
|
|
export const FadeUp: Story = {
|
|
args: {
|
|
animation: "fade-up",
|
|
children: (
|
|
<div className="bg-card border border-border rounded-xl p-6 shadow-sm">Fade Up Animation</div>
|
|
),
|
|
},
|
|
};
|
|
|
|
export const FadeScale: Story = {
|
|
args: {
|
|
animation: "fade-scale",
|
|
children: (
|
|
<div className="bg-card border border-border rounded-xl p-6 shadow-sm">
|
|
Fade Scale Animation
|
|
</div>
|
|
),
|
|
},
|
|
};
|
|
|
|
export const SlideLeft: Story = {
|
|
args: {
|
|
animation: "slide-left",
|
|
children: (
|
|
<div className="bg-card border border-border rounded-xl p-6 shadow-sm">
|
|
Slide Left Animation
|
|
</div>
|
|
),
|
|
},
|
|
};
|