DEV Community

martin rojas
martin rojas

Posted on • Edited on • Originally published at nextsteps.dev

6

Storybook Best Practices

Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment. Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app-specific dependencies and requirements.

Since Storybook 5.2, Storybook’s Component Story Format (CSF) is the recommended way to write stories. In CSF, stories and component metadata are defined as ES6 modules. Every Component story file consists of a required default export and one or more named exports.

Default export

The default export defines metadata about your component, including the component itself, its title (where it will show up in the navigation UI story hierarchy), decorators, and parameters. title should be unique, i.e. not re-used across files.

import { withKnobs, select } from '@storybook/addon-knobs';
import Button from '@material-ui/core/Button';
import NavigationIcon from '@material-ui/icons/Navigation';
import React from 'react';

export default {
    title: 'atoms|Button',
    decorators: [withKnobs],
};

export const containedButton = () => (
    <Button
        variant="contained"
        color={select('color', ['primary', 'secondary'], 'primary')}
        size={select('size', ['small', 'medium', 'large'], 'large')}>
        Default
    </Button>
);

export const outlinedButton = () => (
    <Button
        variant="outlined"
        color={select('color', ['primary', 'secondary'], 'primary')}
        size={select('size', ['small', 'medium', 'large'], 'large')}>
        <NavigationIcon />
        Default
    </Button>
);
Enter fullscreen mode Exit fullscreen mode

Stories for Components that use Redux

By using brackets {} we are importing the RAW component before it has tied to the HOC and therefore should only be expecting props in order to render correctly.

import React from "react";
import { withKnobs, select } from "@storybook/addon-knobs";

import { MyComponent } from "../MyComponent";

export default {
  title: "Atom|MyComponent",
  decorators: [withKnobs]
};

export const Basic = () => <MyComponent />;
export const WithProp = () => (
  <MyComponent
    variant="contained"
    color={select("color", ["primary", "secondary"], "primary")}
    size={select("size", ["small", "medium", "large"], "large")}
  />
);
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay