Presented at FrontConf 2017 in Munich by Violet Peña Managing large React projects can be a Herculean task. Storybook is an open-source, component-driven development environment that can ease the burden on you and your team. With Storybook, you can organize and document your components, validate your code using unit and snapshot tests, and easily share work with designers and project managers. Attendees will learn about Storybook and its uses in React projects, focusing on using it to develop, test, and review components. They will leave empowered to use Storybook on their next project and improve the workflow of their entire team.

1. Violet Peña
FrontConf 2017
violet.is ✨ vgpena.github.io
Storybook
A React tool for your whole team

2. Guten Tag

3. Storybook 💖

4. Me me me
Violet Peña
Portland, OR, USA
Senior Developer @ Instrument

6. 🏎

7. Efficiency
‣ How easy is it to write code?
‣ How stable is the codebase?
‣ How well does development integrate
with other disciplines?

8. 🛠

9. 🏆

10. What is
Storybook?
UI Development Environment
React, React Native, Vue
“component sandbox”

11. Storybook
basics

12. Plantiful

13. console
npm install storybook —save-dev
yarn storybook -D

14. console
yarn storybook

20. ✨
✨
✨
✨
✨

21. Writing
Stories

22. stories.js

23. ComponentName
index.js
styles.css

24. ComponentName
index.js
styles.css
stories.js

25. Project
.storybook
addons.js
config.js

26. Let’s make
a Button

27. Button /index.js
import * as React from 'react';
import PropTypes from 'prop-types';
import './styles.css';
export class Button extends React.Component {
render() {
return (
<button
type="button"
className="button"
onClick={ this.props.function }
>
{ this.props.content }
</button>
);
}
}
Button.propTypes = {
content: PropTypes.string.isRequired,
function: PropTypes.func.isRequired,
};

28. Button /index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
onClick={ this.props.function }
>
{ this.props.content }
</button>
);
}
}

29. Button /index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
onClick={ this.props.function }
>
{ this.props.content }
</button>
);
}
}

30. Button /index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
onClick={ this.props.function }
>
{ this.props.content }
</button>
);
}
}

31. Button/stories.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Button } from './';
const stories = storiesOf('Button', {});
stories.add('default', () => {
return (
<Button
content=“Button"
function={ action("clicked default button") }
/>
);
});

32. Button/stories.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Button } from './';
const stories = storiesOf('Button', {});
stories.add('default', () => {
return (
<Button
content=“Button"
function={ action("clicked default button") }
/>
);
});

33. Button/stories.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Button } from './';
const stories = storiesOf('Button', {});
stories.add('default', () => {
return (
<Button
content=“Button"
function={ action("clicked default button") }
/>
);
});

34. Button/stories.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Button } from './';
const stories = storiesOf('Button', {});
stories.add('default', () => {
return (
<Button
content=“Button"
function={ action("clicked default button") }
/>
);
});

35. 😍
😍
😍 😍
😍

36. Yeah it’s
pretty cool

37. Button/index.js
export const BUTTON_TYPES = {
DEFAULT: 'button',
POSITIVE: 'button button-save',
DANGER: 'button button-remove',
FUNCTION: 'button button-download',
}

38. 🍰 🍨 🍩 🍫

39. Yes that
would be
nice

40. Button/index.js
import * as React from 'react';
import PropTypes from 'prop-types';
import './styles.css';
export const BUTTON_TYPES = {
DEFAULT: 'button',
POSITIVE: 'button button-save',
DANGER: 'button button-remove',
FUNCTION: 'button button-download',
}
export class Button extends React.Component {
render() {
return (
<button
type="button"
className={ this.props.type }
onClick={ this.props.function }
>
{ this.props.content }
</button>
);
}
}
Button.defaultProps = {
type: BUTTON_TYPES.DEFAULT,
};
Button.propTypes = {
content: PropTypes.string.isRequired,
type: PropTypes.oneOf(Object.values(BUTTON_TYPES)),
function: PropTypes.func.isRequired,
};

41. Button/index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
className={ this.props.type }
onClick={ this.props.function }
>
{ this.props.content }
</button>
);
}
}

42. Button/index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
className={ this.props.type }
onClick={ this.props.function }
>
{ this.props.content }
</button>
);
}
}

43. Let’s add
more
stories

44. Button/stories.js
stories.add('danger', () => {
return (
<Button
type={ BUTTON_TYPES.DANGER }
content={ "Remove Plant" }
function={ action("clicked danger button") }
/>
);
});

48. stories ~ props
1. default
2. danger
3. positive
4. functional

49. What’s so cool
about this?
‣ helps define requirements, scope
‣ illuminates complexity
‣ adds transparency to dev work

50. Project
managers
understand scope, size,
progress

51. deeplinking ftw

52. deeplinking ftw

53. 🔑

54. Storybook wants
you to know
everything about
your project

55. But…

56. Our work is
dynamic

57. Foo B. Bar
Jr. Developer
Acme Co.
François B. McBarson
Jr. Mobile App Developer
Acme Supply Corporation

58. How can we
anticipate
dynamic
usage?

59. 🙂

60. 😎 😍 🤓 🤩

61. Knobs
Pass dynamic, editable props
into your stories

62. console
yarn add @storybook/addon-knobs -D

63. Project
.storybook
config.js
addons.js

64. Button/stories.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs';
import { Button, BUTTON_TYPES } from './';
const stories = storiesOf('Button', {});
stories.addDecorator(withKnobs);
stories.add('default', () => {
return (
<Button
content={ text("Content", "Button") }
function={ action("clicked default button") }
/>
);
});

65. Button/stories.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs';
import { Button, BUTTON_TYPES } from './';
const stories = storiesOf('Button', {});
stories.addDecorator(withKnobs);
stories.add('default', () => {
return (
<Button
content={ text("Content", "Button") }
function={ action("clicked default button") }
/>
);
});

66. Button/stories.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs';
import { Button, BUTTON_TYPES } from './';
const stories = storiesOf('Button', {});
stories.addDecorator(withKnobs);
stories.add('default', () => {
return (
<Button
content={ text("Content", "Button") }
function={ action("clicked default button") }
/>
);
});

67. Button/stories.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs';
import { Button, BUTTON_TYPES } from './';
const stories = storiesOf('Button', {});
stories.addDecorator(withKnobs);
stories.add('default', () => {
return (
<Button
content={ text("Content", "Button") }
function={ action("clicked default button") }
/>
);
});

71. So many
reasons

72. Developers
Experiment with element
without having to edit code

73. Project
managers
test without a developer
find edge cases
confirm behavior
mark as done 0

74. even more
deeplinking

75. Knobs options
‣ text
‣ dropdown
‣ color picker
‣ date picker
‣ number range
‣ & more

76. Speaking of
which

77. 1

78. 🤖

79. Storyshots
structural testing
connect your stories to Jest
snapshot testing

80. console
yarn add @storybook/addon-storyshots -D

81. Project
src
Storyshots.test.js

82. 👻

83. Taking
snapshots
Jest + Enzyme to render output of stories
recorded output = snapshot

84. Snapshots.test.js.snap
exports[`Storyshots Button default 1`] = `
<button
className="button"
onClick={[Function]}
type="button"
>
Button
</button>
`;

85. Button/index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
className={ this.props.type }
onClick={ this.props.function }
>
All buttons have the same text now
</button>
);
}
}

86. Button/index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
className={ this.props.type }
onClick={ this.props.function }
>
All buttons have the same text now
</button>
);
}
}

87. console
yarn test

88. console
● Storyshots › Button › default
expect(value).toMatchSnapshot()
Received value does not match stored snapshot 1.
- Snapshot
+ Received
<button
className="button"
onClick={[Function]}
type="button"
>
- Button
+ All buttons have the same text now
</button>
at Object.test (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:27:18)
at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/index.js:146:28)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

89. console
Storyshots
AddPlantForm
✕ default (6ms)
Body
✕ default (1ms)
Button
✕ default (1ms)
✕ positive (1ms)
✕ danger (1ms)
✕ functional (1ms)
Checkboxes
✓ default (1ms)
DropdownInput
✓ default (1ms)
DynamicList
✕ default (1ms)

90. Full effects
of your code

91. Super helpful on
large projects
‣ too many components to keep
track of
‣ too many developers to keep
track of

92. 4

93. Now you know
‣ writing stories
‣ testing manually &
automatically

94. How to
publish and
share?

95. 🚀

96. console
yarn build-storybook

97. Static
Storybook
‣ full functionality
‣ lighter weight
‣ build with CD tools (CircleCI)
‣ deployable to static server
(internal sandbox, Github
pages)

98. vgpena.github.io/plantiful

99. Now you’re
an expert

100. installation
development
testing
publishing

101. Storybook is
wonderful
‣ understand our work
‣ write better code
‣ share & collaborate with
other disciplines

102. ✨

103. Violet Peña
FrontConf 2017
violet.is ✨ vgpena.github.io
Happy coding!
github.com/vgpena/plantiful
vgpena.github.io/plantiful/