How to Implement Storybook in React + TypeScript + Material UI application

#programming #typescript #webdev #react

Storybook is a UI development tool that lets you preview your components in a very rich library design that will help you to change all props for the component and test out your component in different scenarios. Storybook is becoming popular these days and is extremely helpful in the product development lifecycle.

This blog talks about how to implement Storybook in a React + TypeScript application.

Let’s start with creating a React + TypeScript application and then adding storybook to it.

npx create-react-app storybook-app --template typescript
cd storybook-app
npx storybook init

We have our application ready and now are ready to run the storybook.

npm run storybook

The above command will run the storybook. You should see something like below in your browser. Adding Storybook to your application will add a boilerplate to your repository.

Adding Material UI to our application.

npm install @mui/material @emotion/react @emotion/styled

Now let’s start writing a story for our MUI components. I will be deleting the boilerplate folder stories from my application.

I am creating a folder called components for MUI components and writing a button story and button component inside the folder button.

Now that we have our files created, let’s write template for the button. The button label is added as a prop.

import Button from '@mui/material/Button';

type ButtonProps = {
    label: string
}

function TextButton({label}: ButtonProps) {
  return (
    <>
        <Button variant="contained">{label}</Button>
    </>
  )
}

export default TextButton

Let’s write a simple basic story for our button.

import TextButton from "./TextButton"
import { ComponentMeta, ComponentStory} from "@storybook/react"

export default {
    title: "Components/Button",
    component: TextButton,
} as ComponentMeta<typeof TextButton>

export const Submit = () => <TextButton label="Submit"/>

export const Check = () => <TextButton label="Check"/>

We can see our story in the storybook but we don’t see any controls.

Now that we know how to write the basic story, let’s use args and rewrite our story. It is always good to practise writing stories using args. One reason is that props from our component are converted to controls in the storybook.

import TextButton from "./TextButton"
import { ComponentMeta, ComponentStory} from "@storybook/react"

export default {
    title: "Components/Button",
    component: TextButton,
} as ComponentMeta<typeof TextButton>

const Template: ComponentStory<typeof TextButton> = (args) => <TextButton {...args} />;

export const Submit = Template.bind({});
Submit.args = {
  label: 'Button',
};

export const Check = Template.bind({});
Check.args = {
  label: 'Button',
};