How to Implement Storybook in React + TypeScript + Material UI application
Tags: programming, typescript, webdev, react
Published: 2022-12-04 09:19:57

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.

![alt text](https://miro.medium.com/max/4800/1*kodd3Hm_lpzLnMEoXrS2Ag.webp "Logo Title Text 1")

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.

![folder](https://miro.medium.com/max/512/1*efiHzeuSRrAwDj6yx9pAgw.webp)

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

![folder](https://miro.medium.com/max/536/1*Q0_ptkfZXnY7UZXtLw8yyQ.webp)

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


```typescript
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.

```typescript
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.

![storybook without controls](https://miro.medium.com/max/720/1*2rUT-_qSTPofEzFHHb40DA.webp)

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.

```typescript
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',
};
```
We can see the controls in the storybook now.

![storybook](https://miro.medium.com/max/720/1*3osvlmMQWcQlc5jYE564UA.webp)

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](https://github.com/Sanchithasharma/storybook-react-ts/tree/storybook).

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

3. [Controls](https://storybook.js.org/docs/react/essentials/controls)- Storybook