Skip to main content

storybook ↔ popular Frontend Dev tool to isolate UI to doc/showcase/test, detangle Business Logic/state/Context

Source: storybook.js.org/

image

Storybook features

Storybook Addon​

Addon extends storybook UI & behaviour. to help prototype, test & doc

Atomic Design

Chromatic​

tool to automate storybook integrate CI git tooling. Freemium

Story​

export default Object to Declaratively render FC snapshot with specific key state to dev/test/doc

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

export const ButtonRed = () => <Button label="Press me" backgroundColor="red" /\>

Source: storybook.js.org/docs/react/get

setup storybook

fix storybook errors

References​

  1. Storybook Addon ↔ Addon extends storybook UI & behaviour. to help prototype, test & doc

  2. yarn storybook ↔ to run storybook Storybook Concurrent Explorer on default port 6006

  3. unoptimized ↔ prop to set <Image\> to serve unoptimized Image Element (for compat with storybook)

  4. Chromatic ↔ tool to automate storybook integrate CI git tooling. Freemium

  5. Storybook Concurrent Explorer ↔ storybook loca dev server with autogen web page to view, edit & test UI in browser. built-in search