{ "componentChunkName": "component---src-templates-blog-post-tsx", "path": "/blog/2017-12-29-quickly-build-component-libraries-with-storybook/", "result": {"data":{"blogPost":{"title":"Quickly Build Component Libraries with Storybook","slug":"/blog/2017-12-29-quickly-build-component-libraries-with-storybook/","authorNodes":[{"name":"Jeffrey Cherewaty","slug":"/people/jeffrey-cherewaty/"}],"markdown":{"html":"

As long as humans have been building things, we've tried to break up the work. When we can carve out smaller tasks, we can share the work among more people and focus on the quality of each little piece.

\n

Tools and technologies have reached a point where nearly everyone building for the web is thinking in components. But when you've got a large team all creating and using components, how do you keep the usage consistent? Designers have had a tool for that problem for decades. Style guides set down rules and guidelines for projects, so they spoke with a consistent look and voice.

\n

By combining a style guide with a library of components, you can create a comprehensive design system.

\n

Enter Storybook

\n

Prominent companies that have built large design systems usually have to build all new tools for their component libraries. When you have multiple templating languages to deal with and dozens of different product teams, your design system has constraints that no out-of-the-box solution provides.

\n

At Frontside, we're frequently working on brand-new projects instead, so we push open-source solutions that let developers immediately focus on delivering features. For component libraries featuring Vue or React, there's now a one-size-fits-most tool: Storybook.

\n

Writing Stories

\n

With Storybook, developers create \"stories\" that illustrate and describe different versions of each component. In practice, it feels a lot like writing tests: what are all the possible iterations of this component? Because it aligns with test-driven development philosophy, Storybook makes a great base for adding visual regression testing.

\n
import React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Checkbox from './Checkbox';\n\nstoriesOf('Checkbox', module)\n  .add('Basic Usage', () => (\n    <Checkbox\n      onChange={() => {}}\n      checked=true\n      label='Check Me'\n    />\n  ));
\n

Storybook Docs: Writing Stories

\n

Addons

\n

Storybook's addon architecture is where the benefits of having an open-source project really pay off. There's a whole ecosystem of pre-built addons, along with the ability to create your own.

\n

README addon

\n

The codebase we're working with already had great documentation for many of its components. With storybook-readme, just a couple lines of configuration had each component's README appear in the Storybook environment

\n
import Readme from './README.md';\n\nstoriesOf('Checkbox', module)\n  .addDecorator(withReadme(Readme))
\n

Add a knob

\n

Another useful Storybook addon: storybook-knobs. Component props can be edited within the Storybook UI.

\n
import { withKnobs, text } from '@storybook/addon-knobs';\n\nstoriesOf('Checkbox', module)\n  .addDecorator(withKnobs)\n  .add('Basic Usage', () => (\n    <Checkbox\n      onChange={() => {}}\n      checked=true\n      label={text('Label', 'Check Me')}\n    />\n  );
\n

Add an action

\n

storybook-actions help drive component action development. Component actions get stubs that show up in the Storybook UI.

\n
import { action } from '@storybook/addon-actions';\n\nstoriesOf('Checkbox', module)\n  .add('Basic Usage', () => (\n    <Checkbox\n      onChange={ action('checkbox-toggle') }\n      checked=true\n      label='Check Me'\n    />\n  );
\n

Evolving Tools

\n

Storybook is a big landmark for developing component libraries for the web, and we're looking forward to its evolution, and eventually the next set of tools for design systems.

\n

Check out this Lunch and Learn to see Storybook in action.

\n

Need help creating your own design system? Reach out to Frontside.

","frontmatter":{"date":"December 29, 2017","description":"Design systems have become an effective way to maintain consistency and improve feature delivery time. What can developers on smaller teams do to apply design system concepts?","tags":["design systems","component library","style guide","storybook"],"img":{"childImageSharp":{"fixed":{"src":"/static/4ae1eef3bb398cdd942eab6b3d29e702/a7715/2017-12-29-quickly-build-component-libraries-with-storybook_storybook.jpg"}}}}}}},"pageContext":{"id":"85176778-794f-5fec-b3d4-73c1a2246d0d"}}, "staticQueryHashes": ["1241260443"]}