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 (3)

Collapse
 
rueckeres profile image
ruecker

Utilize Storybook's controls addon (@storybook/addon-controls) to dynamically alter component props and see their effects in real-time.
Leverage TypeScript's type safety for enhanced component development and prop documentation within Storybook.
Consider using the Material UI theme provider in your preview.tsx to ensure consistent styling across your stories.
Explore other Storybook addons for advanced features like accessibility checks, visual testing, and more.
By following these steps and incorporating the best practices, you'll effectively integrate Storybook into your React + TypeScript + Material UI application, streamlining your component development and UI workflow. Match colors, play numbers, and use special cards to outwit your opponents in the strategic world of uno online.

Collapse
 
ajaydhar profile image
ajaydhar

The names of files and folders for the code are not clear to me. In which file can I put the codes for button etc? Please advise.

Collapse
 
chrisburg22 profile image
Chrisburg22

The code where used @mui/material/button is in TextButton.tsx, and the component TextButton is used in TextButton.stories.tsx.