$30 off During Our Annual Pro Sale. View Details »

Building UI components with Storybook

Building UI components with Storybook

An introduction to Storybook features.

Benoît Burgener

November 03, 2019
Tweet

More Decks by Benoît Burgener

Other Decks in Programming

Transcript

  1. BUILDING UI COMPONENTS
    WITH Storybook
    Benoît Burgener · @LeBenLeBen · Webmardi · November 5, 2019 · Liip, Lausanne

    View Slide

  2. We used to design pages

    View Slide

  3. But that didn’t scale

    View Slide

  4. So we started building reusable components

    View Slide

  5. More like
    “I have no idea how to use these”
    components

    View Slide

  6. And so we started documenting them

    View Slide

  7. × KSS 2011
    !
    × Hologram 2013
    !
    × Pattern Lab 2013
    × Fabricator 2014
    !
    × Fractal 2015
    × Styleguidist 2015
    × …

    View Slide

  8. /*doc
    ---
    title: Alert
    name: alert
    category: basics
    ---
    ```html_example
    Hello
    ```
    */
    .alert {

    }

    View Slide

  9. ---
    notes: |
    These are notes written in `markdown`
    ---
    My Component

    View Slide

  10. {% extends "@page-layout" %}
    {{ home.greeting }}, {{ name }}!
    {% block content %}
    {% render '@button', { variant: 'primary' } %}
    {% endblock content %}

    View Slide

  11. How about going even further?

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. THINKING IN STORIES

    View Slide

  16. StoriesOf API
    import React from 'react';
    import { storiesOf } from '@storybook/react';
    import Button from './Button';
    storiesOf('Atoms|Button', module)
    .add('with text', () => Hello Button)
    .add('with some emoji', () => (


    ! " # $


    ));
    src/stories/button.stories.js

    View Slide

  17. Component Story Format (CSF)
    import React from 'react';
    import Button from './Button';
    export default {
    component: Button,
    title: 'Atoms|Button',
    };
    export const text = () => (Hello Button);
    export const emoji = () => (


    ! " # $


    );
    src/stories/button.stories.js

    View Slide

  18. CONFIGURING STORYBOOK

    View Slide

  19. import { configure } from '@storybook/react';
    // Load our global stylesheet into stories view
    import '@/assets/tailwind.css';
    // Load stories
    configure(
    require.context('../src/stories', true, /\.stories\.(js|mdx)$/),
    module
    );
    .storybook/config.js

    View Slide

  20. ADDONS
    LET’S PIMP IT

    View Slide

  21. import '@storybook/addon-knobs/register';
    import '@storybook/addon-actions/register';
    import '@storybook/addon-viewport/register';
    import '@storybook/addon-backgrounds/register';
    import '@storybook/addon-a11y/register';
    .storybook/addons.js

    View Slide

  22. ADDON
    KNOBS

    View Slide

  23. import React from 'react';
    import { withKnobs, text, boolean } from '@storybook/addon-knobs';
    import Button from './Button';
    export default {
    component: Button,
    title: 'Atoms|Button',
    decorators: [withKnobs]
    };
    export const text = () => (

    {text('Label', 'Hello Storybook')}

    );

    View Slide

  24. View Slide

  25. ADDON
    ACTIONS

    View Slide

  26. import React from 'react';
    import { action } from '@storybook/addon-actions';
    import Button from './Button';
    export default {
    component: Button,
    title: 'Atoms|Button',
    };
    export const text = () => (

    Hello button

    );

    View Slide

  27. View Slide

  28. ADDON
    VIEWPORT

    View Slide

  29. View Slide

  30. ADDON
    BACKGROUNDS

    View Slide

  31. View Slide

  32. ADDON
    ACCESSIBILITY

    View Slide

  33. View Slide

  34. × Knobs
    × Actions
    × Source
    × Notes
    × Viewport
    × Storyshots
    × Backgrounds
    × Accessibility
    × Console
    × Links
    And many more community addons…

    View Slide

  35. PRESETS

    View Slide

  36. module.exports = [
    '@storybook/addon-docs/react/preset',
    ...
    ];
    .storybook/presets.js

    View Slide

  37. THEMING

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. import { create } from '@storybook/theming';
    export default create({
    base: 'light',
    colorPrimary: '#00d5ff',
    colorSecondary: '#2625a5',
    textColor: '#2625a5',
    brandTitle: 'Webmardi',
    brandImage: require('./theme/webmardi.svg'),
    });
    .storybook/theme.js

    View Slide

  42. import theme from './theme';
    addParameters({
    options: {
    theme,
    },
    });
    .storybook/config.js

    View Slide

  43. DOCS
    SINCE VERSION 5.2

    View Slide

  44. View Slide

  45. View Slide

  46. <br/>/**<br/>* Styled `a` or `button` element<br/>*/<br/>export default {<br/>props: {<br/>/**<br/>* The HTML tag used for the button.<br/>*/<br/>tag: {<br/>type: String,<br/>default: 'button',<br/>},<br/>…<br/>},<br/>…<br/>}<br/>
    src/components/Btn.vue

    View Slide

  47. View Slide

  48. View Slide

  49. MDX stories
    import { Meta } from '@storybook/addon-docs/blocks';

    # Webmardi Web Styleguide
    This project is based on [Tailwind CSS](https://tailwindcss.com/).
    For the sake of clarity, its classes are not documented here.
    You can find a dedicated documentation at [tailwindcss.com/docs](https://tailwindcss.com/docs).
    ## Usage
    The styleguide is available as a npm package, you can install it by running:
    ...
    src/stories/about.stories.mdx

    View Slide

  50. import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
    import { Checkbox } from './Checkbox';

    # Checkbox
    With `MDX` we can define a story for `Checkbox` right in the middle of our
    markdown documentation.









    View Slide

  51. View Slide

  52. import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';

    # Colors

    title="North Star Blue"
    subtitle="$primary-color"
    colors={['#2625a5']}
    />
    ...

    src/stories/colors.stories.mdx

    View Slide

  53. View Slide

  54. PUBLISHING

    View Slide

  55. package.json
    {
    "scripts": {
    "storybook:build": "build-storybook -c .storybook -o build",
    "storybook:build:docs": "build-storybook -c .storybook -o build --docs",
    }
    }
    # Create a build
    npm run storybook:build
    # Preview the result
    npx http-server build

    View Slide

  56. RECAP
    × Build components in isolation
    × Mock hard-to-reach use cases
    × Supercharge your workflow with addons
    × Match your project brand easily with theming
    × Generate a styleguide automatically

    View Slide

  57. THANK YOU!
    × storybook.js.org
    × learnstorybook.com
    × github.com/storybookjs
    × twitter.com/storybookjs
    @LeBenLeBen

    View Slide