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

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!