Violet Peña - Storybook: A React Tool For Your Whole Team
0 likes487 views
The document presents a detailed overview of Storybook, a UI development environment for React, React Native, and Vue that facilitates component development and testing. It covers the installation process, writing stories, utilizing addons like knobs for dynamic prop testing, and integrating with Jest for snapshot testing. The author emphasizes the benefits of improved collaboration, transparency in development, and enhanced code quality through structured UI component stories.
![Snapshots.test.js.snap
exports[`Storyshots Button default 1`] = `
<button
className="button"
onClick={[Function]}
type="button"
>
Button
</button>
`;](https://image.slidesharecdn.com/presentation-171217195643/85/Violet-Pena-Storybook-A-React-Tool-For-Your-Whole-Team-84-320.jpg)
![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)](https://image.slidesharecdn.com/presentation-171217195643/85/Violet-Pena-Storybook-A-React-Tool-For-Your-Whole-Team-88-320.jpg)
Violet Peña - Storybook: A React Tool For Your Whole 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
- 20. ✨ ✨ ✨ ✨ ✨
- 21. Writing Stories
- 22. stories.js
- 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. 😍 😍 😍 😍 😍
- 37. Button/index.js export const BUTTON_TYPES = { DEFAULT: 'button', POSITIVE: 'button button-save', DANGER: 'button button-remove', FUNCTION: 'button button-download', }
- 38. 🍰 🍨 🍩 🍫
- 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> ); } }
- 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
- 51. deeplinking ftw
- 52. deeplinking ftw
- 53. 🔑
- 54. Storybook wants you to know everything about your project
- 55. But…
- 57. Foo B. Bar Jr. Developer Acme Co. François B. McBarson Jr. Mobile App Developer Acme Supply Corporation
- 59. 🙂
- 60. 😎 😍 🤓 🤩
- 61. Knobs Pass dynamic, editable props into your stories
- 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
- 75. Knobs options ‣ text ‣ dropdown ‣ color picker ‣ date picker ‣ number range ‣ & more
- 77. 1
- 78. 🤖
- 79. Storyshots structural testing connect your stories to Jest snapshot testing
- 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> ); } }
- 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
- 95. 🚀
- 97. Static Storybook ‣ full functionality ‣ lighter weight ‣ build with CD tools (CircleCI) ‣ deployable to static server (internal sandbox, Github pages)
- 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/