Slide 1
-----------
Part 1: Welcome to our session on Storybook! We'll learn how to use it to build and test our React components.
Slide 2
-----------
Part 1: As apps grow, UI management gets tough. How do we keep things consistent and test component states effectively?
Part 2: Testing components within a full application can be slow and cumbersome. Isolating components for testing is crucial.
Slide 3
-----------
Part 1: Storybook provides an isolated environment to develop, test, and showcase UI components.
Part 2: It acts as a living style guide, documenting all your components and their variations.
Slide 4
-----------
Part 1: Getting started with a storybook is very easy! Let's set up an example project first. You can also fork the repository to store your changes in Github.
Part 2: Finally, initialize Storybook in your project. This will install the required packages and set up the basic configuration. Check out the src/stories folder for examples of stories.
Slide 5
-----------
Part 1: Let's consider a simple Button component. It accepts props for label, onClick, variant, and size. The styling is based on the variant and size props. We are using TypeScript to define the props interface. This is a simple button component with styling based on the variant and size.
Slide 6
-----------
Part 1: This is our Story file.
Part 2: We import ComponentMeta and ComponentStory from Storybook to define the metadata for our Button component.
Part 3: The title determines how the component is organized in the Storybook UI.
Part 4: The component property tells Storybook which component to render.
Part 5: argTypes allows us to control how the props are displayed in the Storybook UI.
Part 6: We define two stories: Primary and Secondary, each with different prop values. Notice how we use the args property to pass props to the component.
Part 7: The Large story showcases a different size.
Slide 7
-----------
Part 1: If you want to run the storybook after you close it, use this command to start the Storybook development server.
Slide 8
-----------
Part 1: If everything goes well, the Storybook UI will open automatically. LEt's check out the UI features!
Part 2: On the left, you can browse your components and their stories.
Part 3: Below, you can use addons to enhance your Storybook experience, such as the Actions addon to see component interactions and the Controls addon to dynamically change props.
Slide 9
-----------
Part 1: You can extend Storybook with powerful addons for testing, documentation, and more.
Part 2: Integrate with testing libraries like Jest and Cypress for robust component testing in isolation for better focus and efficiency. You can also easily visualise and interact with different component states.
Part 3: Automatically generate documentation for your components from your stories.
Part 4: Imagine you're building a design system for your company. Storybook can be invaluable.
Part 5: Use Storybook to create a centralized hub for all your UI components, ensuring consistency across all projects.
Ever built a Lego castle? You wouldn't just throw all the bricks together,
right? You'd plan, build components (walls, towers) separately, then assemble
them. That's how we should approach React development too! Large apps have tons
of UI elements – buttons, forms, menus. Managing them can become a chaotic mess.
How do you ensure your "Lego bricks" (components) are consistent, work as
expected, and are easy to reuse? Storybook is our solution. It’s like having a
dedicated workbench for your components, where you can build, test, and showcase
them in isolation.
2. LECTURE: COMPONENT-DRIVEN DEVELOPMENT WITH STORYBOOK
2.1 WHAT IS STORYBOOK?
Storybook is a tool for developing UI components in isolation. Think of it as a
gallery for your components. Each component can have multiple "stories," which
are different visual states. A button, for example, might have stories for its
"default," "hover," and "disabled" states. Storybook lets you easily view and
interact with these stories.
2.2 SETTING UP STORYBOOK
Let's start with a project. This time, we will use the code from your first
assignment, but on a new project
> ⚠️ℹ️ You can also fork this repository if you wish to preserve your changes in
> your repository:
git clone https://github.com/WesternSydneyUniversity/comp3036-assignment-1-2
cd comp3036-assignment-1-2
pnpm i
Let's get Storybook running in our current project:
pnpx storybook@latest init
This installs Storybook, adds configuration files and open a storybook showing
the below interface. Please check out the src/stories directory for examples of
stories
[https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/full-stack-development-comp3036-2025/sections/storybook-in-react-fundamentals/Screenshot%202025-02-18%20at%2010.42.51.png]
2.3 WRITING STORIES
Let's create a simple button component and its stories:
// Button.tsx
import React from 'react';
import './Button.css'
interface ButtonProps {
label: string;
onClick?: () => void;
variant?: 'primary' | 'secondary';
size?: 'small' | 'medium' | 'large';
}
const Button: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary', size = 'medium' }) => {
const className = `button ${variant} ${size}`;
return (
<button className={className} onClick={onClick}>
{label}
</button>
);
};
export default Button;
And the stories
// Button.stories.tsx
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Button from './Button';
const meta: ComponentMeta<typeof Button> = {
title: 'Example/Button',
component: Button,
argTypes: {
variant: { control: 'radio', options: ['primary', 'secondary'] },
size: { control: 'radio', options: ['small', 'medium', 'large'] },
onClick: { action: 'clicked' },
},
};
export default meta;
type Story = ComponentStory<typeof Button>;
export const Primary: Story = {
args: {
label: 'Button',
variant: 'primary',
},
};
export const Secondary: Story = {
args: {
label: 'Button',
variant: 'secondary',
},
};
export const Large: Story = {
args: {
label: 'Large Button',
size: 'large',
},
};
Run npm run storybook. You'll see your button in the Storybook UI, with the
different stories.
2.4 ADVANCED STORYBOOK FEATURES
Storybook has powerful features:
* Addons: Enhance Storybook with addons. The "Actions" addon, for instance,
shows what happens when you click a button. "Controls" let you dynamically
change component props.
* Testing: Integrate Storybook with Jest or Cypress for component testing.
* Documentation: Storybook can automatically generate docs from your stories.
3. CONCLUSION
Storybook is a game-changer for React development. It encourages
component-driven development, boosts reusability, and simplifies testing and
documentation. Consistent UI leads to happy users!
Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.
Join the discussion to ask questions, share your thoughts, and discuss with other learners
SkillPies