DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Implement Storybook in React + TypeScript + Material UI application
Sanchithasr
Sanchithasr

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode

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

npm run storybook
Enter fullscreen mode Exit fullscreen mode

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.

alt text

Adding Material UI to our application.

npm install @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode

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

folder

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

folder

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
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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

storybook without 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',
};
Enter fullscreen mode Exit fullscreen mode

We can see the controls in the storybook now.

storybook

We have now successfully written a story for our button.

Conclusion:

That’s a simple example of adding Storybook to React + TypeScript application. You can find the complete code here.

References:

  1. https://medium.com/@annycarolinegnr/storybook-with-react-typescript-1c15a1cbc26a
  2. https://storybook.js.org/docs/react/writing-stories/args

  3. Controls- Storybook

Top comments (0)

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!