Example.stories.tsx.liquid•1.56 kB
/**
* {{ componentName }} Component Stories
*
* DESIGN PATTERNS:
* - Playground Story: Default interactive story for testing component variants
* - Args Types: Configure interactive controls in Storybook UI
*
* CODING STANDARDS:
* - Import Meta and StoryObj types from @storybook/react
* - Export meta as default with satisfies Meta<typeof Component>
* - Use args for default props, argTypes for control configuration
*
* USAGE:
* - Add new stories by creating Story objects
* - Configure controls via argTypes for interactive testing
* - Use parameters to customize Storybook layout and behavior
*/
import type { Meta, StoryObj } from '@storybook/react';
import {{ componentName }} from './index';
const meta = {
title: 'Components/{{ componentName }}',
component: {{ componentName }},
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
children: {
control: 'text',
},
},
} satisfies Meta<typeof {{ componentName }}>;
export default meta;
type Story = StoryObj<typeof meta>;
// Playground story - shows all variants
export const Playground: Story = {
render: () => (
<div className="flex flex-col gap-4">
<{{ componentName }}>Default {{ componentName }}</{{ componentName }}>
<{{ componentName }} className="bg-primary-100 px-3 py-1 rounded-full text-sm">
Custom styled {{ componentName }}
</{{ componentName }}>
</div>
),
};
// Default story
export const Default: Story = {
args: {
children: 'This is a {{ componentName }} component',
},
};