frontend/src/stories/How to create stories.stories.mdx
import { Meta } from '@storybook/addon-docs'
<Meta title=" How to create stories?" />There are three types of stories:
Choose the type most suited for your case.
Documents, such as the one you're reading, go in frontend/src/stories/*.stories.mdx.
Tip: you may want to add a space in front of the title for the doc to be ordered before other components in the sidebar.
<!-- frontend/src/stories/New Page.stories.mdx -->
import { Meta } from '@storybook/addon-docs';
<Meta title=" New Page" />
# Page Title
Write your content here...
There are a few differences between component and scene stories:
component to the default export, for Storybook to create a table with the component's props.parameters object that is in use in scene stories (that defaults the scene to open in "canvas" mode).argTypes// frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.stories.tsx
import { Meta, StoryObj } from '@storybook/react'
import { LemonSwitch, LemonSwitchProps } from './LemonSwitch'
type Story = StoryObj<typeof LemonSwitch>
const meta: Meta<typeof LemonSwitch> = {
title: 'Lemon UI/Lemon Switch',
component: LemonSwitch,
argTypes: {
loading: {
control: {
type: 'boolean',
},
},
label: {
name: 'label',
type: { name: 'string', required: false },
defaultValue: 'Hello',
description: 'demo description',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Hello' },
},
control: {
type: 'text',
},
},
},
tags: ['autodocs'],
}
export default meta
export function LemonSwitch_(props: LemonSwitchProps): JSX.Element {
const [isChecked, setIsChecked] = useState(false)
return (
<LemonSwitch {...props} checked={props.checked !== undefined ? props.checked : isChecked} onChange={setIsChecked} />
)
}