Update storybook

[orzechdev]

Updated storybook

Changes:

• updated storybook to the newer version
• added docs page for components

Story definition

There are two possible ways to define story:

• with storyOf API (currently used):

import { boolean } from "@storybook/addon-knobs";
import { storiesOf } from "@storybook/react";
import React from "react";

import { Button } from "./Button";

storiesOf("@components/atoms/Button", module)
  .addParameters({ component: Button })
  .add("Primary", () => (
    <Button fullWidth={boolean("FullWidth", false)}>Primary Button</Button>
  ))
  .add("Secondary", () => (
    <Button color="secondary" fullWidth={boolean("FullWidth", false)}>
      Secondary Button
    </Button>
  ))
  .add("Size sm", () => (
    <Button size="sm" fullWidth={boolean("FullWidth", false)}>
      Small Button
    </Button>
  ));

• with Component Story Format (CSF):

import { boolean } from "@storybook/addon-knobs";
import React from "react";

import { Button } from "./Button";

export default {
  component: Button,
  title: "@components/atoms/Button",
};

export const Primary = () => (
  <Button fullWidth={boolean("FullWidth", false)}>Primary Button</Button>
);
export const Secondary = () => (
  <Button color="secondary" fullWidth={boolean("FullWidth", false)}>
    Secondary Button
  </Button>
);
export const SizeSm = () => (
  <Button size="sm" fullWidth={boolean("FullWidth", false)}>
    Small Button
  </Button>
);

To show props of component in docs we have to pass component reference as:

• component: Button in addParameters function with storyOf API
• component: Button in default export with CSF

We may also use storiesof-to-csf or csf-to-mdx codemods to convert all stories between formats.

Component documentation

To describe component and its props we have to write comments:

• above the component declaration, e.g.:

/**
 * The basic button
 */
export const Button: React.FC<IProps> = (...) => {...};

• above the props interface properties, e.g.:

export interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * Button color type
   */
  color?: "primary" | "secondary";
  /**
   * Reference to HTML button element
   */
  btnRef?: React.RefObject<HTMLButtonElement>;
  /**
   * Whether width should take all available space
   */
  fullWidth?: boolean;
  /**
   * Size
   */
  size?: Size;
}

[netlify]

Deploy preview for saleor-storefront-stage processing.

Building with commit cc20b22

https://app.netlify.com/sites/saleor-storefront-stage/deploys/5e53a5caba61eb0008c35528

[patrys]

I think CSF and MDX are much more readable than the chained call syntax of storyOf.

[mateuszkula]

We are already using storiesOf everywhere and changing that everywhere will take some time. I would stick to it still and focus on moving components to storybook rather than change conception for writing stories especially that it just works.

We already have different conventions in storefront in many areas and we cant handle those with our manpower so lets not give ourselves another thing to work on.

[orzechdev]

We might use storiesof-to-csf or csf-to-mdx codemods so everything may be quickly converted. It is rather the matter of writing new stories.
I might merge this PR now with current state to avoid possible merge conflicts with future master branch, but I guess in near future we might consider to convert current components and make new ones with new convention.