41cb94324a
### What problem does this PR solve? Feat: Added RenameDialog NumberInput and Spin storybook ### Type of change - [x] New Feature (non-breaking change which adds functionality)
98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
|
|
import { Spin } from '@/components/ui/spin';
|
|
|
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
const meta = {
|
|
title: 'Example/Spin',
|
|
component: Spin,
|
|
parameters: {
|
|
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
layout: 'centered',
|
|
docs: {
|
|
description: {
|
|
component: `
|
|
## Spin Component
|
|
|
|
Spin is a loading spinner component that can be used to indicate loading states. It supports different sizes and can wrap other content to create loading overlays.
|
|
|
|
### Import Path
|
|
\`\`\`typescript
|
|
import { Spin } from '@/components/ui/spin';
|
|
\`\`\`
|
|
|
|
### Basic Usage
|
|
\`\`\`tsx
|
|
import { Spin } from '@/components/ui/spin';
|
|
|
|
function MyComponent() {
|
|
return (
|
|
<Spin spinning={true}>
|
|
<div>Your content here</div>
|
|
</Spin>
|
|
);
|
|
}
|
|
\`\`\`
|
|
|
|
### Features
|
|
- Three different sizes: small, default, and large
|
|
- Can wrap content to create loading overlays
|
|
- Smooth animation with CSS transitions
|
|
- Customizable styling with className prop
|
|
- Built with Tailwind CSS
|
|
`,
|
|
},
|
|
},
|
|
},
|
|
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
tags: ['autodocs'],
|
|
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
argTypes: {
|
|
spinning: {
|
|
description: 'Whether the spinner is active',
|
|
control: { type: 'boolean' },
|
|
},
|
|
size: {
|
|
description: 'Size of the spinner',
|
|
control: { type: 'select' },
|
|
options: ['small', 'default', 'large'],
|
|
},
|
|
className: {
|
|
description: 'Additional CSS classes for styling',
|
|
control: { type: 'text' },
|
|
},
|
|
children: {
|
|
description: 'Content to be wrapped by the spinner',
|
|
control: false,
|
|
},
|
|
},
|
|
// Use `fn` to spy on any callbacks
|
|
args: {},
|
|
} satisfies Meta<typeof Spin>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
export const Default: Story = {
|
|
args: {
|
|
spinning: true,
|
|
size: 'default',
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: `
|
|
### Default Spinner
|
|
|
|
Shows the basic spinner with default size and active state.
|
|
|
|
\`\`\`tsx
|
|
<Spin spinning={true} size="default" />
|
|
\`\`\`
|
|
`,
|
|
},
|
|
},
|
|
},
|
|
tags: ['!dev'],
|
|
};
|