learn-storybook.md

Learn Storybook

• Opensoure Design Systems with Storybook: Click here
• OFFICIAL: Project that use StoryBook: Click here
• Storybook Blogs: Click here
• TODO_URGENT - 15mins only - Egghead Course free: Click here

Quick Links in Docs:

• Args: Click here
• ArgsTypes: Click here- How to write stories: Click here
• Configure Typescript: Click here
• Writing Stories in Typescript: Click here
• Controls: Click here

typescript error:

• cannot use namespace as type: Click here

Way1 Custom Args type:

import { ComponentStory } from '@storybook/react';

type SwitchStory = ComponentStory<typeof Switch>;

const Template: SwitchStory = (args) => <Switch {...args} />;

export const Checked: SwitchStory = Template.bind({});
Checked.args = {
  isChecked: false,
};
export const UnChecked: SwitchStory = Template.bind({});
Checked.args = {
  isChecked: true,
};

Generic Args Type:

import { Story } from '@storybook/react';

const Template: Story = (args: any) => <Switch {...args} />;

export const Checked: Story = Template.bind({});
Checked.args = {
  // Beware: props are not typeschecked here
  isChecked: false,
};