Storybook!

Install Storybook

npx sb init

Run Storybook

npm run storybook

This section outlines the advantages, usages and potholes of storybook.

Stories -- A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support. The stories are written in Component Story Format (CSF)--an ES6 modules-based standard--for writing component examples.

A basic storybook file looks like this

import Navbar from "../components/Navbar.js"

export default {
  title: "Navbar",
  component: Navbar,
}

const Template = (args) => <Navbar {...args} />

const helloWorld = () => { console.log("hello world")}

//first story -- Login
export const LoginNavBar = Template.bind({})
LoginNavBar.args = {
  //add props as arguments to story
  onClick: helloWorld,
  name: "LoginNavBar",
  //className: ""
}

//first story -- Login
export const LoginSuccess = Template.bind({})
LoginSuccess.args = {
  //add props as arguments to story
  onClick: helloWorld,
  name: "LoginSuccess",
  //className: ""
}

Args describes the arguments to Button in a machine-readable way. It unlocks Storybook’s superpower of altering and composing arguments dynamically. Pass prop arguments in the args code object to pass props to the component.

---

Where to put stories

A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle.

Button.js | ts | jsx | tsx Button.stories.js | ts | jsx | tsx | mdx

The key ingredients are the default export that describes the component, and named exports that describe the stories.

Use the named exports of a CSF file to define your component’s stories. I recommend you use UpperCamelCase for your story exports. Here’s how to render Button in the “primary” state and export a story called Primary.

For more information on writing stories please consult documentation here: https://storybook.js.org/docs/react/writing-stories/introduction