TBA

2. How to build and document
systems in a reactish way

3. Why Finland?
Science.

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