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',
};
We can see the controls in the storybook now.
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.
Top comments (3)
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.
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.
The code where used @mui/material/button is in TextButton.tsx, and the component TextButton is used in TextButton.stories.tsx.