# Storybook --- ## Storybook [](https://storybook.js.org/) --- ## Addons [](https://storybook.js.org/addons/) --- ## React * https://storybook.js.org/docs/guides/guide-react/ * `npx create-react-app react-app` * `cd react-app` * `npx -p @storybook/cli sb init` * `npm run storybook` --- ## React Story ```react= import React from 'react'; import { action } from '@storybook/addon-actions'; import { Button } from '@storybook/react/demo'; export default { title: 'Button', component: Button, }; export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>; export const Emoji = () => ( <Button onClick={action('clicked')}> <span role="img" aria-label="so cool"> 😀 😎 👍 💯 </span> </Button> ); ``` --- ## Angular * https://storybook.js.org/docs/guides/guide-angular/ * `npx @angular/cli new angular-app` * `cd angular-app` * `npx -p @storybook/cli sb init --type angular` * `npm run storybook` --- ## Angular Story ```typescript= import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; import { Button } from '@storybook/angular/demo'; export default { title: 'Button', component: Button, }; export const WithSomeEmojiAndAction = () => ({ component: Button, props: { text: '😀 😎 👍 💯', onClick: action('This was clicked OMG'), }, }); ``` --- ## Customization in `.storybook` ``` . ├── main.js ├── preview-head.html ├── preview.js ``` --- ## `main.js` Defines directories to search for stories, addons, tweaks to webpack setup, etc... ```js= const path = require( "path" ); const webpack = require( "webpack" ); module.exports = { stories: [ "../client/**/*.stories.(js|mdx)" ], addons: [ "@storybook/addon-docs", "@storybook/addon-viewport/register", "@storybook/addon-knobs/register", "@storybook/addon-actions/register", "@storybook/addon-a11y/register" ], webpackFinal: async ( config, { configType } ) => { // Modify config settings... return config; } }; ``` --- ## `preview-head.html` Add custom scripts or styles or whatever you'd want in your head. We define our custom font. ```html= <style> /* Custom CSS to tweak Storybook */ pre code { tab-size: 2 !important; } </style> <style type="text/css" media="screen, print"> @font-face { font-family: "ProximaNovaWeb"; src: url( "/proxima-nova/proximanova-regular-webfont.woff2" ) format( "woff2" ), url( "/proxima-nova/proximanova-regular-webfont.woff" ) format( "woff" ); font-weight: normal; font-style: normal; font-display: swap; } /* ...etc... */ </style> ``` --- ## Slight Tweak to `npm scripts` Update npm script to include the location of font ```json= { "name": "Your Project Name", "scripts": { "storybook": "start-storybook --port=3001 --static-dir ./client/fonts" } } ``` --- ## `preview.js` Settings for the preview mode. We predefine the decorators we want for all stories. ```js= import { addDecorator } from "@storybook/react"; import { withKnobs } from "@storybook/addon-knobs"; import { withA11y } from "@storybook/addon-a11y"; addDecorator( withKnobs ); addDecorator( withA11y ); ``` --- ## MDX ```react= import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { Checkbox } from './Checkbox'; <Meta title="MDX/Checkbox" component={Checkbox} /> # Checkbox With `MDX` we can define a story for `Checkbox` right in the middle of our markdown documentation. <Preview> <Story name="all checkboxes"> <form> <Checkbox id="Unchecked" label="Unchecked" /> <Checkbox id="Checked" label="Checked" checked /> <Checkbox appearance="secondary" id="second" label="Secondary" checked /> </form> </Story> </Preview> ``` * [Documentation from GitHub](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/mdx.md) * [Example from GitHub](https://github.com/storybookjs/storybook/blob/master/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx) --- ## Talk is Cheap