SlideShare a Scribd company logo

Turku loves-storybook-styleguidist-styled-components

•
•
James Stone
James Stone

The document discusses different tools for building design systems in React, including Storybook, Styleguidist, and Styled Components. It explains that Storybook is focused on component development and testing ("the workshop"), while Styleguidist generates documentation and is meant to share the design system externally ("the storefront"). Styled Components is presented as a good option for managing CSS in React projects. Examples are provided for each tool to illustrate how they can be used.

1 of 29
Download to read offline
Turku loves-storybook-styleguidist-styled-components
How to build and document systems in a reactish way
Why Finland? Science.
ZURB Foundation Top Contributor, Certified Preferred, etc.
Agenda ‣ React Ecosystem and Design Systems ‣ Explore each: Storybook, Styleguidist, and Styled Components ‣ Links to github starter repos where you can try it out quickly ‣ Questions and Discussion
The React Ecosystem ‣ Focus on JavaScript Ways of Working ‣ Webpack (usually) ‣ CRA (or similar to ejected tooling)
The React Ecosystem part 2 ‣ Movement towards Typescript (fingers crossed) ‣ Granular self-contained isolated components ‣ Redux store / state kind of becoming standard ‣ CSS kind of sucks... more on that later
Turku loves-storybook-styleguidist-styled-components
The Desgin System Ecosystem aka UI Component Library ‣ Component Builders ‣ Living (Coded) Styleguides
Workshop vs. Storefront – Brad Frost source: Storybook vs Styleguidist, Chroma further reading: The Workshop and the Storefront, Brad Frost
Backend (the workshop) vs. Frontend (the storefront) ‣ What is useful to devs + designers ‣ How can we share beyond the team in the organization ‣ What is a good breakpoint for the overlap
Storybook - the workshop ‣ You write stories in JavaScript files that are decoupled ‣ All about how you describe components ‣ Great for visual edge cases, both for testing and exposing to design source: React Styleguidist Cookbook
STORYBOOK EXAMPLE import React from "react"; import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; import Button from "../components/Button"; storiesOf("Button", module).add("default", () => ( <Button onClick={action("clicked")}>Push Me</Button> ));
Container Component Model FTW ‣ Great for testing the components across many variations ‣ Mock click handlers with @storybook/addon-actions ‣ Stub in data in situ with @storybook/addon-knobs ‣ A bunch of other stuff (regression testing, notes, etc.)
style guide as the happy home where all that design system stuff lives –Brad Frost (emphasis mine) source: The Workshop and the Storefront, Brad Frost
Styleguidist - the storefront ‣ Auto public method docs ‣ All components on a single page (Styleguide) ‣ Extra docs added (Design System or More complete docs) ‣ Can be branded (customizable design) (also possible in storybook v5) ‣ You get some docs auto generated
REACT STYLEGUIDIST EXAMPLE (FENCES REMOVED) <Button onClick={() => console.log('clicked')>Push Me</Button>
What about CSS? ‣ In react it kind of sucks ‣ Styles, but no :hover and similar states making it useless alone ‣ Import css via webpack, what is this 1996 ‣ Sass or some sort of other extra build pipeline or webpack config ‣ CSS in JS - this has really matured in the last year
Styled Components ‣ It sounds complicated but it can be really simple ‣ Allows you to easily port existing CSS based projects ‣ Themeable architecture to develop larger scaled applications ‣ Predictable and fast ‣ Highly configurable
Styled Components Example - App.tsx import styled, { createGlobalStyle, keyframes } from "styled-components"; import styledNormalize from "styled-normalize"; ... class App extends React.Component { render() { return ( <AppWrapper> <GlobalStyle /> <Header> ... </Header> </AppWrapper> ); } }
GlobalStyle const GlobalStyle = createGlobalStyle` ${styledNormalize} body { font-family: -apple-system, ... ... } code { font-family: source-code-pro, ... } `
Animation Example const Rotate = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } ` const Logo = styled.img` animation: ${Rotate} infinite 20s linear; height: 40vmin; `
Header Example const Header = styled.header` background-color: #282c34; min-height: 100vh; ... `;
You can add attributes, props and use javascript to do anything progromatic
Some thoughts about CSS in JS ‣ Think in terms of state rather than css class names ‣ Keep things developer friendly and easy to read ‣ Allow deeper digging through imports as complexity rises
workshop tools storefront product storybook styled components styleguidist your app
Try it out quickly github.com/jamesstoneco/react-styleguidist-todo (React Styleguidist) github.com/jamesstoneco/foldable (CRA, Typescript, Storybook, Styleguidist, CypressIO)
React Finland - April 2019 ‣ Maybe of interest if you want to learn more about design systems with react ‣ Design Systems Workshop by the creator of React Styleguidist
Turku loves-storybook-styleguidist-styled-components

More Related Content

Turku loves-storybook-styleguidist-styled-components

  • 2. How to build and document systems in a reactish way
  • 4. ZURB Foundation Top Contributor, Certified Preferred, etc.
  • 5. Agenda ‣ React Ecosystem and Design Systems ‣ Explore each: Storybook, Styleguidist, and Styled Components ‣ Links to github starter repos where you can try it out quickly ‣ Questions and Discussion
  • 6. The React Ecosystem ‣ Focus on JavaScript Ways of Working ‣ Webpack (usually) ‣ CRA (or similar to ejected tooling)
  • 7. The React Ecosystem part 2 ‣ Movement towards Typescript (fingers crossed) ‣ Granular self-contained isolated components ‣ Redux store / state kind of becoming standard ‣ CSS kind of sucks... more on that later
  • 9. The Desgin System Ecosystem aka UI Component Library ‣ Component Builders ‣ Living (Coded) Styleguides
  • 10. Workshop vs. Storefront – Brad Frost source: Storybook vs Styleguidist, Chroma further reading: The Workshop and the Storefront, Brad Frost
  • 11. Backend (the workshop) vs. Frontend (the storefront) ‣ What is useful to devs + designers ‣ How can we share beyond the team in the organization ‣ What is a good breakpoint for the overlap
  • 12. Storybook - the workshop ‣ You write stories in JavaScript files that are decoupled ‣ All about how you describe components ‣ Great for visual edge cases, both for testing and exposing to design source: React Styleguidist Cookbook
  • 13. STORYBOOK EXAMPLE import React from "react"; import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; import Button from "../components/Button"; storiesOf("Button", module).add("default", () => ( <Button onClick={action("clicked")}>Push Me</Button> ));
  • 14. Container Component Model FTW ‣ Great for testing the components across many variations ‣ Mock click handlers with @storybook/addon-actions ‣ Stub in data in situ with @storybook/addon-knobs ‣ A bunch of other stuff (regression testing, notes, etc.)
  • 15. style guide as the happy home where all that design system stuff lives –Brad Frost (emphasis mine) source: The Workshop and the Storefront, Brad Frost
  • 16. Styleguidist - the storefront ‣ Auto public method docs ‣ All components on a single page (Styleguide) ‣ Extra docs added (Design System or More complete docs) ‣ Can be branded (customizable design) (also possible in storybook v5) ‣ You get some docs auto generated
  • 17. REACT STYLEGUIDIST EXAMPLE (FENCES REMOVED) <Button onClick={() => console.log('clicked')>Push Me</Button>
  • 18. What about CSS? ‣ In react it kind of sucks ‣ Styles, but no :hover and similar states making it useless alone ‣ Import css via webpack, what is this 1996 ‣ Sass or some sort of other extra build pipeline or webpack config ‣ CSS in JS - this has really matured in the last year
  • 19. Styled Components ‣ It sounds complicated but it can be really simple ‣ Allows you to easily port existing CSS based projects ‣ Themeable architecture to develop larger scaled applications ‣ Predictable and fast ‣ Highly configurable
  • 20. Styled Components Example - App.tsx import styled, { createGlobalStyle, keyframes } from "styled-components"; import styledNormalize from "styled-normalize"; ... class App extends React.Component { render() { return ( <AppWrapper> <GlobalStyle /> <Header> ... </Header> </AppWrapper> ); } }
  • 21. GlobalStyle const GlobalStyle = createGlobalStyle` ${styledNormalize} body { font-family: -apple-system, ... ... } code { font-family: source-code-pro, ... } `
  • 22. Animation Example const Rotate = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } ` const Logo = styled.img` animation: ${Rotate} infinite 20s linear; height: 40vmin; `
  • 23. Header Example const Header = styled.header` background-color: #282c34; min-height: 100vh; ... `;
  • 24. You can add attributes, props and use javascript to do anything progromatic
  • 25. Some thoughts about CSS in JS ‣ Think in terms of state rather than css class names ‣ Keep things developer friendly and easy to read ‣ Allow deeper digging through imports as complexity rises
  • 26. workshop tools storefront product storybook styled components styleguidist your app
  • 27. Try it out quickly github.com/jamesstoneco/react-styleguidist-todo (React Styleguidist) github.com/jamesstoneco/foldable (CRA, Typescript, Storybook, Styleguidist, CypressIO)
  • 28. React Finland - April 2019 ‣ Maybe of interest if you want to learn more about design systems with react ‣ Design Systems Workshop by the creator of React Styleguidist