├── .gitignore
├── cm-night-owl.css
├── components
    ├── about-me.js
    ├── accordion-code.js
    ├── accordion
    │   ├── above.js
    │   ├── base.js
    │   ├── implementations.js
    │   ├── left.js
    │   ├── prevent-close.js
    │   ├── right.js
    │   ├── single-prevent-close.js
    │   ├── single.js
    │   └── standard.js
    ├── aprocalypse.js
    ├── code-block.js
    ├── demo-layout.js
    ├── demo-slide.js
    ├── first-slide.js
    ├── randomly-placed.js
    ├── resources.js
    ├── shared.js
    ├── sob.js
    ├── tabs
    │   ├── above.js
    │   ├── base.js
    │   ├── implementations.js
    │   └── standard.js
    └── white-layout.js
├── deck.mdx
├── package-lock.json
├── package.json
├── public
    ├── apropcalypse.png
    ├── cost-benefits.jpg
    ├── cry.png
    ├── epic-react.png
    ├── erased-from-existence.mp4
    ├── sob.png
    ├── standard
    │   ├── 3-minutes-with-kent.png
    │   ├── ama.png
    │   ├── astronaut.png
    │   ├── big-smile.png
    │   ├── books.png
    │   ├── boy.png
    │   ├── dash-race-car.png
    │   ├── dash-reverse.png
    │   ├── dog.png
    │   ├── eggheadio.png
    │   ├── fem.png
    │   ├── gde.png
    │   ├── girl.png
    │   ├── github.png
    │   ├── house.png
    │   ├── kcd-news.png
    │   ├── medium.png
    │   ├── neutral-face.png
    │   ├── office.png
    │   ├── racing-car-reverse.png
    │   ├── smile.png
    │   ├── speaking.png
    │   ├── trophy.png
    │   ├── twitch.png
    │   ├── twitter.svg
    │   ├── wave.png
    │   ├── woman.png
    │   ├── workshopme.png
    │   └── youtube.png
    ├── sweat-smile.png
    └── what-if.jpg
├── script.js
├── styles.css
└── theme.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | 


--------------------------------------------------------------------------------
/cm-night-owl.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |   Name:       night-owl 1.1.1
  3 |   Author:     Sarah Drasner (https://github.com/sdras)
  4 |   Original VS Code theme (https://github.com/sdras/night-owl-vscode-theme)
  5 | copied from https://github.com/dawnlabs/carbon/blob/master/lib/custom/themes/night-owl.css
  6 | */
  7 | /* basic */
  8 | .CodeMirror.cm-s-night-owl {
  9 |   font-family: 'Dank Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 10 |   font-weight: 350;
 11 |   color: #abb2bf;
 12 |   background-color: #011627;
 13 | }
 14 | .cm-s-night-owl .CodeMirror-selected {
 15 |   background-color: #1d3b53 !important;
 16 | }
 17 | .cm-s-night-owl .CodeMirror-gutter,
 18 | .cm-s-night-owl .CodeMirror-gutters {
 19 |   border: none;
 20 |   background-color: #011627;
 21 | }
 22 | .cm-s-night-owl .CodeMirror-linenumber,
 23 | .cm-s-night-owl .CodeMirror-linenumbers {
 24 |   color: #5f7e97 !important;
 25 |   background-color: transparent;
 26 | }
 27 | .cm-s-night-owl .CodeMirror-lines {
 28 |   color: #abb2bf !important;
 29 |   background-color: transparent;
 30 | }
 31 | .cm-s-night-owl .CodeMirror-cursor {
 32 |   border-left: 2px solid #7e57c2 !important;
 33 | }
 34 | /* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
 35 | .cm-s-night-owl .CodeMirror-matchingbracket,
 36 | .cm-s-night-owl .CodeMirror-matchingtag {
 37 |   border-bottom: 2px solid #c792ea;
 38 |   color: #abb2bf !important;
 39 |   background-color: transparent;
 40 | }
 41 | .cm-s-night-owl .CodeMirror-nonmatchingbracket {
 42 |   border-bottom: 2px solid #e06c75;
 43 |   color: #abb2bf !important;
 44 |   background-color: transparent;
 45 | }
 46 | /* addon: fold/foldgutter.js */
 47 | .cm-s-night-owl .CodeMirror-foldmarker,
 48 | .cm-s-night-owl .CodeMirror-foldgutter,
 49 | .cm-s-night-owl .CodeMirror-foldgutter-open,
 50 | .cm-s-night-owl .CodeMirror-foldgutter-folded {
 51 |   border: none;
 52 |   text-shadow: none;
 53 |   color: #5c6370 !important;
 54 |   background-color: transparent;
 55 | }
 56 | /* addon: selection/active-line.js */
 57 | .cm-s-night-owl .CodeMirror-activeline-background {
 58 |   background-color: #01121f;
 59 | }
 60 | /* basic syntax */
 61 | .cm-s-night-owl .cm-quote {
 62 |   color: #5c6370;
 63 |   font-style: italic;
 64 | }
 65 | .cm-s-night-owl .cm-negative {
 66 |   color: #e06c75;
 67 | }
 68 | .cm-s-night-owl .cm-positive {
 69 |   color: #e06c75;
 70 | }
 71 | .cm-s-night-owl .cm-strong {
 72 |   color: #f78c6c;
 73 |   font-weight: bold;
 74 | }
 75 | .cm-s-night-owl .cm-em {
 76 |   color: #c792ea;
 77 |   font-style: italic;
 78 | }
 79 | .cm-s-night-owl .cm-attribute {
 80 |   color: #f78c6c;
 81 | }
 82 | .cm-s-night-owl .cm-link {
 83 |   color: #ecc48d;
 84 |   border-bottom: solid 1px #ecc48d;
 85 | }
 86 | .cm-s-night-owl .cm-keyword {
 87 |   color: #c792ea;
 88 |   font-style: italic;
 89 | }
 90 | .cm-s-night-owl .cm-def {
 91 |   color: #82aaff;
 92 | }
 93 | .cm-s-night-owl .cm-atom {
 94 |   color: #f78c6c;
 95 | }
 96 | .cm-s-night-owl .cm-number {
 97 |   color: #f78c6c;
 98 | }
 99 | .cm-s-night-owl .cm-property {
100 |   color: #fff;
101 | }
102 | .cm-s-night-owl .cm-qualifier {
103 |   color: #f78c6c;
104 | }
105 | .cm-s-night-owl .cm-variable {
106 |   color: #82aaff;
107 | }
108 | .cm-s-night-owl .cm-variable-2 {
109 |   color: #82aaff;
110 | }
111 | .cm-s-night-owl .cm-string {
112 |   color: #ecc48d;
113 | }
114 | .cm-s-night-owl .cm-string-2 {
115 |   color: #addb67;
116 | }
117 | .cm-s-night-owl .cm-operator {
118 |   color: #c792ea;
119 | }
120 | .cm-s-night-owl .cm-meta {
121 |   color: #7fdbca;
122 | }
123 | .cm-s-night-owl .cm-comment {
124 |   color: #5c6370;
125 |   font-style: italic;
126 | }
127 | .cm-s-night-owl .cm-error {
128 |   color: #e06c75;
129 | }
130 | 
131 | .cm-s-night-owl .cm-tag {
132 |   color: #addb67;
133 | }
134 | 
135 | .cm-s-night-owl .cm-tag.cm-bracket {
136 |   color: #7fdbca;
137 | }
138 | 


--------------------------------------------------------------------------------
/components/about-me.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import styled from 'styled-components'
  3 | 
  4 | const Container = styled.div`
  5 |   display: flex;
  6 |   justify-content: space-around;
  7 | `
  8 | 
  9 | const IconImage = styled.img`
 10 |   max-height: 70px;
 11 |   max-width: 70px;
 12 | `
 13 | 
 14 | function LinkedIconImage({link, name}) {
 15 |   return (
 16 |     <a href={link} target="_blank">
 17 |       <IconImage src={`public/standard/${name}`} />
 18 |     </a>
 19 |   )
 20 | }
 21 | 
 22 | const IconImageContainer = styled.div`
 23 |   display: flex;
 24 |   flex-direction: column;
 25 |   align-items: center;
 26 | `
 27 | 
 28 | const Family = styled.div`
 29 |   display: flex;
 30 | `
 31 | 
 32 | const LogoRow = styled(Container)`
 33 |   margin-top: 30px;
 34 |   margin-bottom: 30px;
 35 | `
 36 | 
 37 | class AboutMe extends React.Component {
 38 |   render() {
 39 |     return (
 40 |       <div>
 41 |         <Container>
 42 |           <IconImageContainer>
 43 |             <LinkedIconImage
 44 |               link="https://www.google.com/maps/place/Utah"
 45 |               name="house.png"
 46 |             />
 47 |             <span>Utah</span>
 48 |           </IconImageContainer>
 49 |           <IconImageContainer>
 50 |             <Family>
 51 |               <LinkedIconImage
 52 |                 link="https://www.lds.org/topics/family-proclamation"
 53 |                 name="woman.png"
 54 |               />
 55 |               <LinkedIconImage
 56 |                 link="https://www.lds.org/topics/family-proclamation"
 57 |                 name="girl.png"
 58 |               />
 59 |               <LinkedIconImage
 60 |                 link="https://www.lds.org/topics/family-proclamation"
 61 |                 name="boy.png"
 62 |               />
 63 |               <LinkedIconImage
 64 |                 link="https://www.lds.org/topics/family-proclamation"
 65 |                 name="boy.png"
 66 |               />
 67 |               <LinkedIconImage
 68 |                 link="https://www.lds.org/topics/family-proclamation"
 69 |                 name="boy.png"
 70 |               />
 71 |               <LinkedIconImage
 72 |                 link="https://photos.google.com/search/_cAF1QipNRwO3NP-6XsiM36GnFIhCiZW9nB6UFB60_Gemma/photo/AF1QipNUOABnMsdf4cEXs-D32qIIyHmrbTYT2FBIoa1j"
 73 |                 name="dog.png"
 74 |               />
 75 |             </Family>
 76 |             <span>wife, 4 kids, & a dog</span>
 77 |           </IconImageContainer>
 78 |           <IconImageContainer>
 79 |             <LinkedIconImage
 80 |               link="https://goo.gl/maps/WBspiX9s6zz"
 81 |               name="office.png"
 82 |             />
 83 |             <span>PayPal</span>
 84 |           </IconImageContainer>
 85 |         </Container>
 86 |         <LogoRow>
 87 |           <LinkedIconImage
 88 |             link="https://github.com/kentcdodds"
 89 |             name="github.png"
 90 |           />
 91 |           <LinkedIconImage link="http://kcd.im/news" name="kcd-news.png" />
 92 |           <LinkedIconImage
 93 |             link="https://blog.kentcdodds.com/"
 94 |             name="medium.png"
 95 |           />
 96 |           <LinkedIconImage
 97 |             link="https://kentcdodds.com/talks/"
 98 |             name="speaking.png"
 99 |           />
100 |           <LinkedIconImage
101 |             link="http://kcd.im/3-mins"
102 |             name="3-minutes-with-kent.png"
103 |           />
104 |           <LinkedIconImage link="http://kcd.im/ama" name="ama.png" />
105 |         </LogoRow>
106 |         <LogoRow>
107 |           <LinkedIconImage link="http://kcd.im/egghead" name="eggheadio.png" />
108 |           <LinkedIconImage link="http://kcd.im/fem" name="fem.png" />
109 |           <LinkedIconImage link="http://kcd.im/wme" name="workshopme.png" />
110 |           <LinkedIconImage link="http://kcd.im/twitch" name="twitch.png" />
111 |           <LinkedIconImage link="http://kcd.im/gde" name="gde.png" />
112 |           <LinkedIconImage link="http://kcd.im/youtube" name="youtube.png" />
113 |         </LogoRow>
114 |       </div>
115 |     )
116 |   }
117 | }
118 | 
119 | export {AboutMe}
120 | 


--------------------------------------------------------------------------------
/components/accordion-code.js:
--------------------------------------------------------------------------------
 1 | export const accordionCode = `
 2 | const actionTypes = {toggle_index: 'toggle_index'}
 3 | 
 4 | function accordionReducer(openIndexes, action) {
 5 |   switch (action.type) {
 6 |     case actionTypes.toggle_index: {
 7 |       const closing = openIndexes.includes(action.index)
 8 |       return closing
 9 |         ? openIndexes.filter(i => i !== action.index)
10 |         : [...openIndexes, action.index]
11 |     }
12 |     default: {
13 |       throw new Error('Unhandled type in accordionReducer: ' + action.type)
14 |     }
15 |   }
16 | }
17 | 
18 | function useAccordion({reducer = accordionReducer} = {}) {
19 |   const [openIndexes, dispatch] = React.useReducer(reducer, [0])
20 |   const toggleIndex = index => dispatch({type: actionTypes.toggle_index, index})
21 |   return {openIndexes, toggleIndex}
22 | }
23 | 
24 | export {useAccordion, accordionReducer, actionTypes}
25 | `.trim()
26 | 


--------------------------------------------------------------------------------
/components/accordion/above.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Accordion} from './base'
 3 | import {AccordionButton, AccordionItem, AccordionContents} from '../shared'
 4 | 
 5 | function AboveAccordion({items, ...props}) {
 6 |   return (
 7 |     <Accordion {...props}>
 8 |       {({openIndexes, handleItemClick}) => (
 9 |         <div>
10 |           {items.map((item, index) => (
11 |             <AccordionItem key={item.title} direction="vertical">
12 |               <AccordionContents isOpen={openIndexes.includes(index)}>
13 |                 {item.contents}
14 |               </AccordionContents>
15 |               <AccordionButton
16 |                 isOpen={openIndexes.includes(index)}
17 |                 onClick={() => handleItemClick(index)}
18 |               >
19 |                 {item.title}{' '}
20 |                 <span>{openIndexes.includes(index) ? '👆' : '👈'}</span>
21 |               </AccordionButton>
22 |             </AccordionItem>
23 |           ))}
24 |         </div>
25 |       )}
26 |     </Accordion>
27 |   )
28 | }
29 | 
30 | export {AboveAccordion}
31 | 


--------------------------------------------------------------------------------
/components/accordion/base.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class Accordion extends React.Component {
 4 |   static defaultProps = {
 5 |     stateReducer: (state, changes) => changes,
 6 |     onStateChange: () => {},
 7 |   }
 8 |   state = {openIndexes: [0]}
 9 |   getState(state = this.state) {
10 |     return {
11 |       openIndexes:
12 |         this.props.openIndexes === undefined
13 |           ? state.openIndexes
14 |           : this.props.openIndexes,
15 |     }
16 |   }
17 |   internalSetState(changes, callback = () => {}) {
18 |     let allChanges
19 |     this.setState(
20 |       state => {
21 |         const actualState = this.getState(state)
22 |         const changesObject =
23 |           typeof changes === 'function' ? changes(actualState) : changes
24 |         allChanges = this.props.stateReducer(actualState, changesObject)
25 |         return allChanges
26 |       },
27 |       () => {
28 |         this.props.onStateChange(allChanges)
29 |         callback()
30 |       },
31 |     )
32 |   }
33 |   handleItemClick = index => {
34 |     this.internalSetState(state => {
35 |       const closing = state.openIndexes.includes(index)
36 |       return {
37 |         type: closing ? 'closing' : 'opening',
38 |         openIndexes: closing
39 |           ? state.openIndexes.filter(i => i !== index)
40 |           : [...state.openIndexes, index],
41 |       }
42 |     })
43 |   }
44 |   render() {
45 |     return this.props.children({
46 |       openIndexes: this.getState().openIndexes,
47 |       handleItemClick: this.handleItemClick,
48 |     })
49 |   }
50 | }
51 | 
52 | export {Accordion}
53 | 


--------------------------------------------------------------------------------
/components/accordion/implementations.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {StandardAccordion} from './standard'
 3 | import {AboveAccordion} from './above'
 4 | import {RightAccordion} from './right'
 5 | import {LeftAccordion} from './left'
 6 | import {SingleAccordion} from './single'
 7 | import {PreventCloseAccordion} from './prevent-close'
 8 | import {SinglePreventCloseAccordion} from './single-prevent-close'
 9 | 
10 | const items = [
11 |   {
12 |     title: '🐴',
13 |     contents: (
14 |       <div>
15 |         Horses can sleep both lying down and standing up. Domestic horses have a
16 |         lifespan of around 25 years. A 19th century horse named 'Old Billy' is
17 |         said to have lived 62 years.
18 |       </div>
19 |     ),
20 |   },
21 |   {
22 |     title: '🦏',
23 |     contents: (
24 |       <div>
25 |         Rhino skin maybe thick but it can be quite sensitive to sunburns and
26 |         insect bites which is why they like wallow so much – when the mud dries
27 |         it acts as protection from the sunburns and insects.
28 |       </div>
29 |     ),
30 |   },
31 |   {
32 |     title: '🦄',
33 |     contents: (
34 |       <div>
35 |         If you’re looking to hunt a unicorn, but don’t know where to begin, try
36 |         Lake Superior State University in Sault Ste. Marie, Michigan. Since
37 |         1971, the university has issued permits to unicorn questers.
38 |       </div>
39 |     ),
40 |   },
41 | ]
42 | 
43 | function asImpl(Comp) {
44 |   return () => (
45 |     <div
46 |       style={{
47 |         width: 400,
48 |         fontSize: 18,
49 |         textAlign: 'left',
50 |         margin: 'auto',
51 |       }}
52 |     >
53 |       <Comp items={items} />
54 |     </div>
55 |   )
56 | }
57 | 
58 | export const Standard = asImpl(StandardAccordion)
59 | export const Above = asImpl(AboveAccordion)
60 | export const Right = asImpl(RightAccordion)
61 | export const Left = asImpl(LeftAccordion)
62 | export const Single = asImpl(SingleAccordion)
63 | export const PreventClose = asImpl(PreventCloseAccordion)
64 | export const SinglePreventClose = asImpl(SinglePreventCloseAccordion)
65 | 


--------------------------------------------------------------------------------
/components/accordion/left.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Accordion} from './base'
 3 | import {css, AccordionButton, AccordionItem, AccordionContents} from '../shared'
 4 | 
 5 | function LeftAccordion({items, ...props}) {
 6 |   return (
 7 |     <Accordion {...props}>
 8 |       {({openIndexes, handleItemClick}) => (
 9 |         <div>
10 |           {items.map((item, index) => (
11 |             <AccordionItem key={item.title} direction="horizontal">
12 |               <AccordionContents isOpen={openIndexes.includes(index)}>
13 |                 {item.contents}
14 |               </AccordionContents>
15 |               <AccordionButton
16 |                 isOpen={openIndexes.includes(index)}
17 |                 onClick={() => handleItemClick(index)}
18 |               >
19 |                 <span>{openIndexes.includes(index) ? '👈' : '👉'}</span>{' '}
20 |                 {item.title}
21 |               </AccordionButton>
22 |             </AccordionItem>
23 |           ))}
24 |         </div>
25 |       )}
26 |     </Accordion>
27 |   )
28 | }
29 | 
30 | export {LeftAccordion}
31 | 


--------------------------------------------------------------------------------
/components/accordion/prevent-close.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Accordion} from './base'
 3 | import {
 4 |   AccordionButton,
 5 |   AccordionItem,
 6 |   AccordionContents,
 7 |   preventClose,
 8 | } from '../shared'
 9 | 
10 | function PreventCloseAccordion({items, ...props}) {
11 |   return (
12 |     <Accordion stateReducer={preventClose} {...props}>
13 |       {({openIndexes, handleItemClick}) => (
14 |         <div>
15 |           {items.map((item, index) => (
16 |             <AccordionItem key={item.title} direction="vertical">
17 |               <AccordionButton
18 |                 isOpen={openIndexes.includes(index)}
19 |                 onClick={() => handleItemClick(index)}
20 |               >
21 |                 {item.title}{' '}
22 |                 <span>{openIndexes.includes(index) ? '👇' : '👈'}</span>
23 |               </AccordionButton>
24 |               <AccordionContents isOpen={openIndexes.includes(index)}>
25 |                 {item.contents}
26 |               </AccordionContents>
27 |             </AccordionItem>
28 |           ))}
29 |         </div>
30 |       )}
31 |     </Accordion>
32 |   )
33 | }
34 | 
35 | export {PreventCloseAccordion}
36 | 


--------------------------------------------------------------------------------
/components/accordion/right.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Accordion} from './base'
 3 | import {css, AccordionButton, AccordionItem, AccordionContents} from '../shared'
 4 | 
 5 | function RightAccordion({items, ...props}) {
 6 |   return (
 7 |     <Accordion {...props}>
 8 |       {({openIndexes, handleItemClick}) => (
 9 |         <div>
10 |           {items.map((item, index) => (
11 |             <AccordionItem key={item.title} direction="horizontal">
12 |               <AccordionButton
13 |                 isOpen={openIndexes.includes(index)}
14 |                 onClick={() => handleItemClick(index)}
15 |               >
16 |                 <span>{openIndexes.includes(index) ? '👉' : '👈'}</span>{' '}
17 |                 {item.title}
18 |               </AccordionButton>
19 |               <AccordionContents isOpen={openIndexes.includes(index)}>
20 |                 {item.contents}
21 |               </AccordionContents>
22 |             </AccordionItem>
23 |           ))}
24 |         </div>
25 |       )}
26 |     </Accordion>
27 |   )
28 | }
29 | 
30 | export {RightAccordion}
31 | 


--------------------------------------------------------------------------------
/components/accordion/single-prevent-close.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Accordion} from './base'
 3 | import {
 4 |   AccordionButton,
 5 |   AccordionItem,
 6 |   AccordionContents,
 7 |   single,
 8 |   preventClose,
 9 |   combineReducers,
10 | } from '../shared'
11 | 
12 | function SinglePreventCloseAccordion({items, ...props}) {
13 |   return (
14 |     <Accordion stateReducer={combineReducers(single, preventClose)} {...props}>
15 |       {({openIndexes, handleItemClick}) => (
16 |         <div>
17 |           {items.map((item, index) => (
18 |             <AccordionItem key={item.title} direction="vertical">
19 |               <AccordionButton
20 |                 isOpen={openIndexes.includes(index)}
21 |                 onClick={() => handleItemClick(index)}
22 |               >
23 |                 {item.title}{' '}
24 |                 <span>{openIndexes.includes(index) ? '👇' : '👈'}</span>
25 |               </AccordionButton>
26 |               <AccordionContents isOpen={openIndexes.includes(index)}>
27 |                 {item.contents}
28 |               </AccordionContents>
29 |             </AccordionItem>
30 |           ))}
31 |         </div>
32 |       )}
33 |     </Accordion>
34 |   )
35 | }
36 | 
37 | export {SinglePreventCloseAccordion}
38 | 


--------------------------------------------------------------------------------
/components/accordion/single.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Accordion} from './base'
 3 | import {
 4 |   AccordionButton,
 5 |   AccordionItem,
 6 |   AccordionContents,
 7 |   single,
 8 | } from '../shared'
 9 | 
10 | function SingleAccordion({items, ...props}) {
11 |   return (
12 |     <Accordion stateReducer={single} {...props}>
13 |       {({openIndexes, handleItemClick}) => (
14 |         <div>
15 |           {items.map((item, index) => (
16 |             <AccordionItem key={item.title} direction="vertical">
17 |               <AccordionButton
18 |                 isOpen={openIndexes.includes(index)}
19 |                 onClick={() => handleItemClick(index)}
20 |               >
21 |                 {item.title}{' '}
22 |                 <span>{openIndexes.includes(index) ? '👇' : '👈'}</span>
23 |               </AccordionButton>
24 |               <AccordionContents isOpen={openIndexes.includes(index)}>
25 |                 {item.contents}
26 |               </AccordionContents>
27 |             </AccordionItem>
28 |           ))}
29 |         </div>
30 |       )}
31 |     </Accordion>
32 |   )
33 | }
34 | 
35 | export {SingleAccordion}
36 | 


--------------------------------------------------------------------------------
/components/accordion/standard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Accordion} from './base'
 3 | import {AccordionButton, AccordionItem, AccordionContents} from '../shared'
 4 | 
 5 | function StandardAccordion({items, ...props}) {
 6 |   return (
 7 |     <Accordion {...props}>
 8 |       {({openIndexes, handleItemClick}) => (
 9 |         <div>
10 |           {items.map((item, index) => (
11 |             <AccordionItem key={item.title} direction="vertical">
12 |               <AccordionButton
13 |                 isOpen={openIndexes.includes(index)}
14 |                 onClick={() => handleItemClick(index)}
15 |               >
16 |                 {item.title}{' '}
17 |                 <span>{openIndexes.includes(index) ? '👇' : '👈'}</span>
18 |               </AccordionButton>
19 |               <AccordionContents isOpen={openIndexes.includes(index)}>
20 |                 {item.contents}
21 |               </AccordionContents>
22 |             </AccordionItem>
23 |           ))}
24 |         </div>
25 |       )}
26 |     </Accordion>
27 |   )
28 | }
29 | 
30 | export {StandardAccordion}
31 | 


--------------------------------------------------------------------------------
/components/aprocalypse.js:
--------------------------------------------------------------------------------
 1 | export const aprocalypse = `
 2 | const accordionItems = [
 3 |   {
 4 |     title: '🐴',
 5 |     openTitle: '🐎',
 6 |     contents: '...',
 7 |     disabled: false,
 8 |   },
 9 |   // ...
10 | ]
11 | 
12 | const ui = (
13 |   <Accordion
14 |     items={accordionItems}
15 |     position="below"
16 |     single={true}
17 |     preventClose={true}
18 |     openTrigger="focus"
19 |     closeTrigger="blur"
20 |     titleClassName="acc-title"
21 |     contentsClassName="acc-contents"
22 |     onTrigger={this.handleTrigger}
23 |     closeClassName="acc-closed"
24 |     openClassName="acc-open"
25 |     renderExpandAllButton={true} // :-(
26 |     // let your imagination run wild
27 |   />
28 | )
29 | `.trim()
30 | 


--------------------------------------------------------------------------------
/components/code-block.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {UnControlled as CodeMirror} from 'react-codemirror2'
 3 | 
 4 | export const CodeBlock = ({children, options = {}, style, ...props}) => (
 5 |   <div style={{fontSize: 18, overflow: 'scroll', ...style}}>
 6 |     <CodeMirror
 7 |       value={children}
 8 |       options={{
 9 |         mode: 'jsx',
10 |         theme: 'night-owl',
11 |         lineNumbers: false,
12 |         readOnly: 'nocursor',
13 |         ...options,
14 |       }}
15 |       {...props}
16 |     />
17 |   </div>
18 | )
19 | 


--------------------------------------------------------------------------------
/components/demo-layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default ({children}) => (
 4 |   <div
 5 |     style={{
 6 |       width: '100vw',
 7 |       height: '100vh',
 8 |       display: 'flex',
 9 |       justifyContent: 'center',
10 |       alignContent: 'center',
11 |       alignItems: 'start',
12 |       marginTop: '20px',
13 |     }}
14 |   >
15 |     {children}
16 |   </div>
17 | )
18 | 


--------------------------------------------------------------------------------
/components/demo-slide.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Appear} from 'mdx-deck'
 3 | import {CodeBlock} from './code-block'
 4 | 
 5 | function DemoSlide({accordion, followCode, code}) {
 6 |   return (
 7 |     <div style={{display: 'flex', flexDirection: 'column-reverse'}}>
 8 |       <div>
 9 |         <div>{accordion}</div>
10 |       </div>
11 |       <Appear>
12 |         <div>
13 |           <CodeBlock style={{fontSize: 30}}>{code.trim()}</CodeBlock>
14 |         </div>
15 |         {followCode ? (
16 |           <div>
17 |             <CodeBlock
18 |               style={{
19 |                 fontSize: 30,
20 |                 position: 'absolute',
21 |                 top: '20px',
22 |                 zIndex: '2',
23 |               }}
24 |             >
25 |               {followCode.trim()}
26 |             </CodeBlock>
27 |           </div>
28 |         ) : null}
29 |       </Appear>
30 |     </div>
31 |   )
32 | }
33 | 
34 | export {DemoSlide}
35 | 


--------------------------------------------------------------------------------
/components/first-slide.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | const Container = styled.div`
 5 |   display: flex;
 6 |   justify-content: space-around;
 7 |   align-items: center;
 8 | `
 9 | 
10 | const IconImage = styled.img`
11 |   max-height: 70px;
12 |   max-width: 70px;
13 | `
14 | 
15 | function LinkedIconImage({link, name}) {
16 |   return (
17 |     <a href={link} target="_blank">
18 |       <IconImage src={`public/standard/${name}`} />
19 |     </a>
20 |   )
21 | }
22 | 
23 | const IconImageContainer = styled.div`
24 |   display: flex;
25 |   flex-direction: column;
26 |   align-items: center;
27 | `
28 | 
29 | const Family = styled.div`
30 |   display: flex;
31 | `
32 | 
33 | const LogoRow = styled(Container)`
34 |   margin-top: 30px;
35 |   margin-bottom: 30px;
36 | `
37 | 
38 | function FirstSlide({title, subtitle}) {
39 |   return (
40 |     <div
41 |       style={{
42 |         position: 'absolute',
43 |         top: 0,
44 |         left: 0,
45 |         right: 0,
46 |         bottom: 0,
47 |         backgroundColor: 'white',
48 |         display: 'flex',
49 |         flexDirection: 'column',
50 |         justifyContent: 'space-between',
51 |       }}
52 |     >
53 |       <h1 style={{margin: 5, fontSize: '3em'}}>{title}</h1>
54 |       <h2 style={{margin: 5}}>{subtitle}</h2>
55 |       <strong style={{fontSize: '2em', marginBottom: 10}}>Kent C. Dodds</strong>
56 |       <AboutMe />
57 |     </div>
58 |   )
59 | }
60 | 
61 | class AboutMe extends React.Component {
62 |   render() {
63 |     return (
64 |       <div>
65 |         <LogoRow>
66 |           <IconImageContainer>
67 |             <LinkedIconImage
68 |               link="https://testingjavascript.com"
69 |               name="trophy.png"
70 |             />
71 |             <a href="https://testingjavascript.com">TestingJavaScript.com</a>
72 |           </IconImageContainer>
73 |           <a
74 |             href="https://twitter.com/kentcdodds"
75 |             style={{fontSize: '1.6em', color: '#1da1f2'}}
76 |           >
77 |             @kentcdodds
78 |           </a>
79 |           <IconImageContainer>
80 |             <LinkedIconImage
81 |               link="https://epicreact.dev"
82 |               name="astronaut.png"
83 |             />
84 |             <a href="https://epicreact.dev">EpicReact.Dev</a>
85 |           </IconImageContainer>
86 |         </LogoRow>
87 |       </div>
88 |     )
89 |   }
90 | }
91 | 
92 | export {FirstSlide}
93 | 


--------------------------------------------------------------------------------
/components/randomly-placed.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function RandomlyPlaced({children, style, ...props}) {
 4 |   return (
 5 |     <div style={{position: 'absolute', zIndex: 2, fontSize: '1.5em', ...style}}>
 6 |       {children ? (
 7 |         <div
 8 |           style={{
 9 |             borderRadius: 6,
10 |             padding: 4,
11 |             backgroundColor: 'rgba(1,22,39, 0.9)',
12 |           }}
13 |           {...props}
14 |         >
15 |           {children}
16 |         </div>
17 |       ) : null}
18 |     </div>
19 |   )
20 | }
21 | 
22 | export {RandomlyPlaced}
23 | 


--------------------------------------------------------------------------------
/components/resources.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'react-emotion'
 3 | 
 4 | const Title = styled('strong')({
 5 |   fontSize: 32,
 6 | })
 7 | 
 8 | const Link = styled('a')({
 9 |   fontSize: 24,
10 |   color: '#addb67',
11 | })
12 | Link.defaultProps = {target: '_blank'}
13 | 
14 | export const Resources = () => (
15 |   <img
16 |     style={{maxWidth: '90vw', maxHeight: '90vh'}}
17 |     src="public/epic-react.png"
18 |   />
19 | )
20 | 


--------------------------------------------------------------------------------
/components/shared.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import posed from 'react-pose'
  3 | import {css as emoCSS} from 'emotion'
  4 | import styled from 'react-emotion'
  5 | 
  6 | const css = (...args) => ({className: emoCSS(...args)})
  7 | 
  8 | const AccordionButton = styled('button')(
  9 |   {
 10 |     textAlign: 'left',
 11 |     minWidth: 80,
 12 |     cursor: 'pointer',
 13 |     flex: 1,
 14 |     paddingTop: 10,
 15 |     paddingBottom: 10,
 16 |     fontSize: 20,
 17 |     border: 'none',
 18 |     backgroundColor: 'unset',
 19 |     ':focus': {
 20 |       outline: 'none',
 21 |       backgroundColor: 'rgba(255, 255, 255, 0.4)',
 22 |     },
 23 |   },
 24 |   ({isOpen}) =>
 25 |     isOpen
 26 |       ? {
 27 |           backgroundColor: 'rgba(255, 255, 255, 0.2)',
 28 |         }
 29 |       : null,
 30 | )
 31 | 
 32 | const PoseAccordionContents = posed.div({
 33 |   open: {maxHeight: 200},
 34 |   closed: {maxHeight: 0},
 35 | })
 36 | 
 37 | function AccordionContents({isOpen, ...props}) {
 38 |   return (
 39 |     <PoseAccordionContents
 40 |       pose={isOpen ? 'open' : 'closed'}
 41 |       {...css({overflowY: 'hidden', textAlign: 'justify'})}
 42 |       {...props}
 43 |     />
 44 |   )
 45 | }
 46 | 
 47 | const AccordionItem = styled('div')(
 48 |   {
 49 |     display: 'grid',
 50 |     gridTemplate: 'auto auto',
 51 |     gridGap: 4,
 52 |     gridAutoFlow: 'row',
 53 |   },
 54 |   props => ({
 55 |     gridAutoFlow: props.direction === 'horizontal' ? 'column' : 'row',
 56 |   }),
 57 | )
 58 | 
 59 | const TabButtons = styled('div')({display: 'flex'})
 60 | const TabButton = styled(AccordionButton)({
 61 |   textAlign: 'center',
 62 | })
 63 | const TabItems = styled('div')({
 64 |   position: 'relative',
 65 |   minHeight: 160,
 66 | })
 67 | 
 68 | const BelowTabItem = posed.div({
 69 |   open: {opacity: 1, top: 0},
 70 |   closed: {opacity: 0, top: 30},
 71 | })
 72 | 
 73 | const AboveTabItem = posed.div({
 74 |   open: {opacity: 1, bottom: 0},
 75 |   closed: {opacity: 0, bottom: 30},
 76 | })
 77 | 
 78 | function TabItem({position, isOpen, ...props}) {
 79 |   props = {
 80 |     pose: isOpen ? 'open' : 'closed',
 81 |     ...css({position: 'absolute', overflowY: 'hidden'}),
 82 |     ...props,
 83 |   }
 84 |   return position === 'above' ? (
 85 |     <AboveTabItem {...props} />
 86 |   ) : (
 87 |     <BelowTabItem {...props} />
 88 |   )
 89 | }
 90 | 
 91 | function preventClose(state, changes) {
 92 |   if (changes.type === 'closing' && state.openIndexes.length < 2) {
 93 |     return {...changes, openIndexes: state.openIndexes}
 94 |   }
 95 |   return changes
 96 | }
 97 | 
 98 | function single(state, changes) {
 99 |   if (changes.type === 'opening') {
100 |     return {openIndexes: changes.openIndexes.slice(-1)}
101 |   }
102 |   return changes
103 | }
104 | 
105 | function combineReducers(...reducers) {
106 |   return (state, changes) => {
107 |     for (let reducer of reducers) {
108 |       const result = reducer(state, changes)
109 |       if (result !== changes) {
110 |         return result
111 |       }
112 |     }
113 |     return changes
114 |   }
115 | }
116 | 
117 | export {
118 |   css,
119 |   AccordionButton,
120 |   AccordionItem,
121 |   AccordionContents,
122 |   AboveTabItem,
123 |   BelowTabItem,
124 |   TabItem,
125 |   TabItems,
126 |   TabButton,
127 |   TabButtons,
128 |   combineReducers,
129 |   preventClose,
130 |   single,
131 | }
132 | 


--------------------------------------------------------------------------------
/components/sob.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Appear} from 'mdx-deck'
 3 | import {RandomlyPlaced} from './randomly-placed'
 4 | 
 5 | export const Sob = ({children, style}) => (
 6 |   <div style={{position: 'absolute', zIndex: 2, ...style}}>
 7 |     <img src="public/sob.png" />
 8 |     {children ? (
 9 |       <div
10 |         style={{
11 |           borderRadius: 6,
12 |           padding: 4,
13 |           backgroundColor: 'rgba(1,22,39, 0.6)',
14 |         }}
15 |       >
16 |         {children}
17 |       </div>
18 |     ) : null}
19 |   </div>
20 | )
21 | 
22 | export const Sobbing = () => (
23 |   <div style={{fontSize: 24}}>
24 |     <Appear>
25 |       <div>
26 |         <Sob style={{top: '10%', left: '30%'}}>bundle size/perf 😵</Sob>
27 |       </div>
28 |       <div>
29 |         <Sob style={{top: '40%', left: '20%'}}>maintenance overhead 😖</Sob>
30 |       </div>
31 |       <div>
32 |         <Sob style={{top: '50%', right: '20%'}}>
33 |           implementation complexity 🐛
34 |         </Sob>
35 |       </div>
36 |       <div>
37 |         <Sob style={{bottom: '10%', left: '22%'}}>API complexity 😕</Sob>
38 |       </div>
39 |       <div>
40 |         <Sob style={{top: '20%', right: '25%'}} />
41 |         <Sob style={{bottom: '20%', left: '4%'}} />
42 |       </div>
43 |       <div>
44 |         <div
45 |           style={{
46 |             position: 'absolute',
47 |             width: '100vw',
48 |             height: '100vh',
49 |             display: 'flex',
50 |             justifyContent: 'center',
51 |             alignContent: 'center',
52 |             alignItems: 'center',
53 |             top: 0,
54 |             left: 0,
55 |             zIndex: 3,
56 |           }}
57 |         >
58 |           <a href="https://twitter.com/gurlcode/status/1002110517094371328">
59 |             <img style={{width: '80%'}} src="public/apropcalypse.png" />
60 |           </a>
61 |         </div>
62 |       </div>
63 |     </Appear>
64 |   </div>
65 | )
66 | 


--------------------------------------------------------------------------------
/components/tabs/above.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Tabs} from './base'
 3 | import {TabItem, TabItems, TabButtons, TabButton} from '../shared'
 4 | 
 5 | function AboveTabs({items}) {
 6 |   return (
 7 |     <Tabs>
 8 |       {({openIndexes, handleItemClick}) => (
 9 |         <div>
10 |           <TabItems>
11 |             {items.map((item, index) => (
12 |               <TabItem
13 |                 key={index}
14 |                 position="above"
15 |                 isOpen={openIndexes.includes(index)}
16 |               >
17 |                 {items[index].contents}
18 |               </TabItem>
19 |             ))}
20 |           </TabItems>
21 |           <TabButtons>
22 |             {items.map((item, index) => (
23 |               <TabButton
24 |                 key={item.title}
25 |                 isOpen={openIndexes.includes(index)}
26 |                 onClick={() => handleItemClick(index)}
27 |               >
28 |                 {item.title}
29 |               </TabButton>
30 |             ))}
31 |           </TabButtons>
32 |         </div>
33 |       )}
34 |     </Tabs>
35 |   )
36 | }
37 | 
38 | export {AboveTabs}
39 | 


--------------------------------------------------------------------------------
/components/tabs/base.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Accordion} from '../accordion/base'
 3 | import {single, preventClose, combineReducers} from '../shared'
 4 | 
 5 | function Tabs({stateReducer = (state, changes) => changes, ...props}) {
 6 |   return (
 7 |     <Accordion
 8 |       stateReducer={combineReducers(single, preventClose, stateReducer)}
 9 |       {...props}
10 |     />
11 |   )
12 | }
13 | 
14 | export {Tabs}
15 | 


--------------------------------------------------------------------------------
/components/tabs/implementations.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {StandardTabs} from './standard'
 3 | import {AboveTabs} from './above'
 4 | 
 5 | const items = [
 6 |   {
 7 |     title: '🐴',
 8 |     contents: (
 9 |       <div>
10 |         Horses can sleep both lying down and standing up. Domestic horses have a
11 |         lifespan of around 25 years. A 19th century horse named 'Old Billy' is
12 |         said to have lived 62 years.
13 |       </div>
14 |     ),
15 |   },
16 |   {
17 |     title: '🦏',
18 |     contents: (
19 |       <div>
20 |         Rhino skin maybe thick but it can be quite sensitive to sunburns and
21 |         insect bites which is why they like wallow so much – when the mud dries
22 |         it acts as protection from the sunburns and insects.
23 |       </div>
24 |     ),
25 |   },
26 |   {
27 |     title: '🦄',
28 |     contents: (
29 |       <div>
30 |         If you’re looking to hunt a unicorn, but don’t know where to begin, try
31 |         Lake Superior State University in Sault Ste. Marie, Michigan. Since
32 |         1971, the university has issued permits to unicorn questers.
33 |       </div>
34 |     ),
35 |   },
36 | ]
37 | 
38 | function asImpl(Comp) {
39 |   return () => (
40 |     <div
41 |       style={{
42 |         width: 500,
43 |         fontSize: 24,
44 |         textAlign: 'left',
45 |         margin: 'auto',
46 |       }}
47 |     >
48 |       <Comp items={items} />
49 |     </div>
50 |   )
51 | }
52 | 
53 | export const Standard = asImpl(StandardTabs)
54 | export const Above = asImpl(AboveTabs)
55 | 


--------------------------------------------------------------------------------
/components/tabs/standard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Tabs} from './base'
 3 | import {TabItem, TabItems, TabButtons, TabButton} from '../shared'
 4 | 
 5 | function StandardTabs({items}) {
 6 |   return (
 7 |     <Tabs>
 8 |       {({openIndexes, handleItemClick}) => (
 9 |         <div>
10 |           <TabButtons>
11 |             {items.map((item, index) => (
12 |               <TabButton
13 |                 key={item.title}
14 |                 isOpen={openIndexes.includes(index)}
15 |                 onClick={() => handleItemClick(index)}
16 |               >
17 |                 {item.title}
18 |               </TabButton>
19 |             ))}
20 |           </TabButtons>
21 |           <TabItems>
22 |             {items.map((item, index) => (
23 |               <TabItem
24 |                 key={index}
25 |                 position="below"
26 |                 isOpen={openIndexes.includes(index)}
27 |               >
28 |                 {items[index].contents}
29 |               </TabItem>
30 |             ))}
31 |           </TabItems>
32 |         </div>
33 |       )}
34 |     </Tabs>
35 |   )
36 | }
37 | 
38 | export {StandardTabs}
39 | 


--------------------------------------------------------------------------------
/components/white-layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Slide from 'mdx-deck/dist/Slide'
 3 | 
 4 | export default ({children}) => (
 5 |   <div
 6 |     style={{
 7 |       width: '100vw',
 8 |       height: '100vh',
 9 |       backgroundColor: 'white',
10 |       color: 'black',
11 |       display: 'flex',
12 |       justifyContent: 'center',
13 |       alignContent: 'center',
14 |       alignItems: 'center',
15 |     }}
16 |   >
17 |     <div style={{marginLeft: 70, marginRight: 70}}>{children}</div>
18 |   </div>
19 | )
20 | 


--------------------------------------------------------------------------------
/deck.mdx:
--------------------------------------------------------------------------------
  1 | import './script.js'
  2 | import {Appear, Notes} from 'mdx-deck'
  3 | import {FirstSlide} from './components/first-slide'
  4 | import {AboutMe} from './components/about-me'
  5 | import * as Accordions from './components/accordion/implementations'
  6 | import * as Tabs from './components/tabs/implementations'
  7 | import {CodeBlock} from './components/code-block'
  8 | import WhiteLayout from './components/white-layout'
  9 | import {aprocalypse} from './components/aprocalypse'
 10 | import {accordionCode} from './components/accordion-code'
 11 | import {Sobbing, Sob} from './components/sob'
 12 | import {RandomlyPlaced} from './components/randomly-placed'
 13 | import {DemoSlide} from './components/demo-slide'
 14 | import DemoLayout from './components/demo-layout'
 15 | import {Resources} from './components/resources'
 16 | 
 17 | export {default as theme} from './theme'
 18 | 
 19 | export default WhiteLayout
 20 | 
 21 | <FirstSlide
 22 |   title="Simply React ⚛️"
 23 |   subtitle="Make your React more flexible and simple at the same time"
 24 | />
 25 | 
 26 | ---
 27 | 
 28 | export default WhiteLayout
 29 | 
 30 | # What this talk is
 31 | 
 32 | - Typical lifecycle of a component <br /><small>(not what you're
 33 |   thinking)</small>
 34 | - How patterns can simplify
 35 | - Composability
 36 | - A challenge
 37 | 
 38 | <img width="70px" height="70px" src="public/standard/smile.png" />
 39 | 
 40 | ---
 41 | 
 42 | export default WhiteLayout
 43 | 
 44 | # What this talk is _not_
 45 | 
 46 | <div style={{fontSize: 40, textAlign: 'left'}}>
 47 |   <ul>
 48 |     <li>
 49 |       <strong>How</strong> to implement patterns
 50 |     </li>
 51 |   </ul>
 52 | </div>
 53 | 
 54 | <img width="70px" height="70px" src="public/sweat-smile.png" />
 55 | 
 56 | ---
 57 | 
 58 | # Let's get started
 59 | 
 60 | <img width="154px" height="54px" src="public/standard/dash-race-car.png" />
 61 | 
 62 | ---
 63 | 
 64 | export default DemoLayout
 65 | 
 66 | <DemoSlide
 67 |   code={`<Accordion items={accordionItems} />`}
 68 |   accordion={<Accordions.Standard />}
 69 | />
 70 | <Appear>
 71 |   <div>
 72 |     <div
 73 |       style={{
 74 |         fontSize: '0.8em',
 75 |         position: 'absolute',
 76 |         bottom: 50,
 77 |         left: 0,
 78 |         width: '100vw',
 79 |         textAlign: 'center',
 80 |         borderRadius: 6,
 81 |         padding: 4,
 82 |         backgroundColor: 'rgba(1,22,39, 0.6)',
 83 |       }}
 84 |     >
 85 |       <div>Theme: Night Owl by Sarah Drasner</div>
 86 |       <div>Font: Dank Mono by Phil Plückthun</div>
 87 |     </div>
 88 |   </div>
 89 |   <div />
 90 | </Appear>
 91 | 
 92 | ```notes
 93 | - Following the lifecycle of an Accordion
 94 | - Make it for your use case
 95 | - Props API is pretty simple
 96 | - Theme/Font shoutout
 97 | - New Use Case: Above
 98 | ```
 99 | 
100 | ---
101 | 
102 | export default DemoLayout
103 | 
104 | <DemoSlide
105 |   code={`<Accordion items={accordionItems} above={true} />`}
106 |   accordion={<Accordions.Above />}
107 | />
108 | 
109 | ```notes
110 | - Just a few conditional statements (position, hand, animation)
111 | - New Use Case: Right
112 | ```
113 | 
114 | ---
115 | 
116 | export default DemoLayout
117 | 
118 | <DemoSlide
119 |   code={`<Accordion items={accordionItems} right={true} />`}
120 |   accordion={<Accordions.Right />}
121 | />
122 | 
123 | ```notes
124 | - Refactor to use CSS Grid and use gridAutoFlow for column vs row
125 | - New Use Case: Left
126 | ```
127 | 
128 | ---
129 | 
130 | export default DemoLayout
131 | 
132 | <DemoSlide
133 |   code={`<Accordion items={accordionItems} left={true} />`}
134 |   accordion={<Accordions.Left />}
135 |   followCode={`<Accordion items={accordionItems} position="left" />`}
136 | />
137 | 
138 | ```notes
139 | - Refactor the props to use position because David K. Piano said impossible states is a no-no
140 | - New Use Case: Single
141 | ```
142 | 
143 | ---
144 | 
145 | export default DemoLayout
146 | 
147 | <DemoSlide
148 |   code={`
149 | <Accordion
150 |   items={accordionItems}
151 |   position="bottom"
152 |   single={true}
153 | />
154 |   `}
155 |   accordion={<Accordions.Single />}
156 | />
157 | 
158 | ```notes
159 | - Some conditional logic in the click handler
160 | - New Use Case: Prevent Close
161 | ```
162 | 
163 | ---
164 | 
165 | export default DemoLayout
166 | 
167 | <DemoSlide
168 |   code={`
169 | <Accordion
170 |   items={accordionItems}
171 |   position="bottom"
172 |   preventClose={true}
173 | />
174 |   `}
175 |   accordion={<Accordions.PreventClose />}
176 | />
177 | 
178 | ```notes
179 | - Some additional conditional logic in the click handler
180 | - New Use Case: SinglePreventClose
181 | ```
182 | 
183 | ---
184 | 
185 | export default DemoLayout
186 | 
187 | <DemoSlide
188 |   code={`
189 | <Accordion
190 |   items={accordionItems}
191 |   position="bottom"
192 |   single={true}
193 |   preventClose={true}
194 | />
195 |   `}
196 |   accordion={<Accordions.SinglePreventClose />}
197 | />
198 | 
199 | ```notes
200 | - Luckily no changes necessary!
201 | - But this looks familiar! New Use Case: Tabs
202 | ```
203 | 
204 | ---
205 | 
206 | export default DemoLayout
207 | 
208 | <DemoSlide
209 |   code={`
210 | <Accordion
211 |   items={accordionItems}
212 |   position="bottom"
213 |   single={true}
214 |   preventClose={true}
215 |   tabs={true}
216 | />
217 |   `}
218 |   accordion={<Tabs.Standard />}
219 | />
220 | 
221 | <Appear>
222 |   <div />
223 |   <img src="public/cry.png" />
224 | </Appear>
225 | 
226 | ```notes
227 | - Write tabs UI in a different method `renderTabs`
228 | - Cry!
229 | - New Use Case: Tabs Above
230 | ```
231 | 
232 | ---
233 | 
234 | export default DemoLayout
235 | 
236 | <DemoSlide
237 |   code={`<Tabs items={tabItems} position="top" />`}
238 |   accordion={<Tabs.Above />}
239 | />
240 | 
241 | <Appear>
242 |   <div />
243 |   <img src="public/sob.png" />
244 | </Appear>
245 | 
246 | ```notes
247 | - I don't want to maintain this anymore
248 | - Fork the component to make a tabs component
249 | - Sob
250 | ```
251 | 
252 | ---
253 | 
254 | <CodeBlock>{aprocalypse}</CodeBlock>
255 | 
256 | <Sobbing />
257 | 
258 | ```notes
259 | - Datepicker with 60 props
260 | - "Configuration Props" (objects with dozens of options, basically just more props)
261 | - "render" props: boolean props to control whether something is rendered
262 | - Bundle: Code you don't need
263 | - Maintenance: Documentation, answering questions
264 | - Implementation: Remembering use cases and not breaking things. Contributors.
265 | - API: Having to learn the growing API
266 | - APROPCALYPSE
267 | ```
268 | 
269 | ---
270 | 
271 | <img style={{maxWidth: '100%'}} src="public/what-if.jpg" />
272 | 
273 | ```notes
274 | (notes for next slide...)
275 | - I might have manually changed the code post-prettier :)
276 | - Don't worry about the specific implementation details.
277 | - Two major patterns that allow this:
278 |   - stateReducer
279 |   - render props
280 | - Inversion of control patterns
281 | ```
282 | 
283 | ---
284 | 
285 | export default ({children}) => (
286 |   <div style={{overflow: 'scroll'}}>{children}</div>
287 | )
288 | 
289 | <CodeBlock style={{fontSize: 14}}>{accordionCode}</CodeBlock>
290 | 
291 | <!--
292 |   cannot have notes on this slide for some reason...
293 |   There's an infinite loop in React code and a warning
294 |   in the console about history...
295 | -->
296 | 
297 | ---
298 | 
299 | # Demo
300 | 
301 | [CodeSandbox](https://codesandbox.io/s/simply-react-accordion-lvg59)
302 | 
303 | <small>Thank you Ives ❣️</small>
304 | 
305 | ```notes
306 | - Composition allows for the same simple API
307 | ```
308 | 
309 | ---
310 | 
311 | <Resources />
312 | 
313 | ---
314 | 
315 | # A word of caution
316 | 
317 | What if this is all you will ever need?
318 | 
319 | <div
320 |   style={{
321 |     position: 'relative',
322 |     height: 400,
323 |     width: 400,
324 |     margin: 'auto',
325 |   }}
326 | >
327 |   <div style={{position: 'absolute'}}>
328 |     <Accordions.Standard />
329 |   </div>
330 | </div>
331 | 
332 | ---
333 | 
334 | # YAGNI
335 | 
336 | <small>You Ain't Gonna Need It</small>
337 | <Appear>
338 |   <div>
339 |     <strong style={{fontSize: '2em'}}>Optimize for deletability</strong>
340 |   </div>
341 |   <div>
342 |     <video
343 |       style={{display: 'block', maxWidth: '100%', margin: 'auto'}}
344 |       autoPlay
345 |       playsInline
346 |       loop
347 |       muted
348 |       src="public/erased-from-existence.mp4"
349 |     />
350 |   </div>
351 | </Appear>
352 | 
353 | ```notes
354 | - Be mindful and intentional
355 | - Measure the costs and the benefits.
356 | - Just go with what you have and see how it plays out.
357 | - Optimize for deletability
358 | - Erased from existence!
359 | ```
360 | 
361 | ---
362 | 
363 | # Use patterns that _simplify_ your API
364 | 
365 | <Appear>
366 |   <div>
367 |     <RandomlyPlaced
368 |       style={{
369 |         transform: 'rotate(20deg)',
370 |         top: '20%',
371 |         left: '10%',
372 |       }}
373 |     >
374 |       state reducers
375 |     </RandomlyPlaced>
376 |   </div>
377 |   <div>
378 |     <RandomlyPlaced
379 |       style={{
380 |         transform: 'rotate(30deg)',
381 |         bottom: '10%',
382 |         left: '10%',
383 |       }}
384 |     >
385 |       control props
386 |     </RandomlyPlaced>
387 |   </div>
388 |   <div>
389 |     <RandomlyPlaced
390 |       style={{
391 |         transform: 'rotate(10deg)',
392 |         bottom: '70%',
393 |         right: '10%',
394 |       }}
395 |     >
396 |       hook composition
397 |     </RandomlyPlaced>
398 |   </div>
399 |   <div>
400 |     <RandomlyPlaced
401 |       style={{
402 |         transform: 'rotate(-10deg)',
403 |         bottom: '10%',
404 |         right: '30%',
405 |       }}
406 |     >
407 |       compound components
408 |     </RandomlyPlaced>
409 |   </div>
410 |   <div>
411 |     <RandomlyPlaced
412 |       style={{
413 |         top: 0,
414 |         bottom: 0,
415 |         left: 0,
416 |         right: 0,
417 |         fontWeight: 'bold',
418 |         fontSize: '5rem',
419 |         display: 'flex',
420 |         justifyContent: 'center',
421 |         alignItems: 'center',
422 |       }}
423 |     >
424 |       Let's (re)discover more!
425 |     </RandomlyPlaced>
426 |   </div>
427 | </Appear>
428 | 
429 | ```notes
430 | - Applying old principles (like composition and inversion of control)
431 | ```
432 | 
433 | ---
434 | 
435 | # Thank You
436 | 
437 | <img width="70px" height="70px" src="public/standard/wave.png" />
438 | 
439 | [simply-react.netlify.com](https://simply-react.netlify.com)
440 | 
441 | <img style={{width: 70, margin: -20}} src="public/standard/twitter.svg" /> <a href="https://twitter.com/kentcdodds">
442 |   @kentcdodds
443 | </a>
444 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "simply-react",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "mdx-deck deck.mdx",
 8 |     "prebuild": "rimraf dist",
 9 |     "build": "npm run build:site && npm run build:pdf",
10 |     "build:site": "mdx-deck build deck.mdx",
11 |     "build:pdf": "mdx-deck pdf deck.mdx",
12 |     "postbuild": "cpy --parents \"public/**\" ./dist"
13 |   },
14 |   "keywords": [],
15 |   "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
16 |   "license": "MIT",
17 |   "devDependencies": {
18 |     "cpy-cli": "^2.0.0",
19 |     "css-loader": "^1.0.0",
20 |     "mdx-deck": "^1.6.3",
21 |     "rimraf": "^2.6.2",
22 |     "style-loader": "^0.22.1"
23 |   },
24 |   "dependencies": {
25 |     "codemirror": "^5.39.2",
26 |     "emotion": "^9.2.6",
27 |     "react": "^16.13.1",
28 |     "react-codemirror2": "^5.1.0",
29 |     "react-dom": "^16.13.1",
30 |     "react-emotion": "^9.2.6",
31 |     "react-pose": "^2.2.1",
32 |     "react-transition-group": "^2.4.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/public/apropcalypse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/apropcalypse.png


--------------------------------------------------------------------------------
/public/cost-benefits.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/cost-benefits.jpg


--------------------------------------------------------------------------------
/public/cry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/cry.png


--------------------------------------------------------------------------------
/public/epic-react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/epic-react.png


--------------------------------------------------------------------------------
/public/erased-from-existence.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/erased-from-existence.mp4


--------------------------------------------------------------------------------
/public/sob.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/sob.png


--------------------------------------------------------------------------------
/public/standard/3-minutes-with-kent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/3-minutes-with-kent.png


--------------------------------------------------------------------------------
/public/standard/ama.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/ama.png


--------------------------------------------------------------------------------
/public/standard/astronaut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/astronaut.png


--------------------------------------------------------------------------------
/public/standard/big-smile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/big-smile.png


--------------------------------------------------------------------------------
/public/standard/books.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/books.png


--------------------------------------------------------------------------------
/public/standard/boy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/boy.png


--------------------------------------------------------------------------------
/public/standard/dash-race-car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/dash-race-car.png


--------------------------------------------------------------------------------
/public/standard/dash-reverse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/dash-reverse.png


--------------------------------------------------------------------------------
/public/standard/dog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/dog.png


--------------------------------------------------------------------------------
/public/standard/eggheadio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/eggheadio.png


--------------------------------------------------------------------------------
/public/standard/fem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/fem.png


--------------------------------------------------------------------------------
/public/standard/gde.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/gde.png


--------------------------------------------------------------------------------
/public/standard/girl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/girl.png


--------------------------------------------------------------------------------
/public/standard/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/github.png


--------------------------------------------------------------------------------
/public/standard/house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/house.png


--------------------------------------------------------------------------------
/public/standard/kcd-news.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/kcd-news.png


--------------------------------------------------------------------------------
/public/standard/medium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/medium.png


--------------------------------------------------------------------------------
/public/standard/neutral-face.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/neutral-face.png


--------------------------------------------------------------------------------
/public/standard/office.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/office.png


--------------------------------------------------------------------------------
/public/standard/racing-car-reverse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/racing-car-reverse.png


--------------------------------------------------------------------------------
/public/standard/smile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/smile.png


--------------------------------------------------------------------------------
/public/standard/speaking.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/speaking.png


--------------------------------------------------------------------------------
/public/standard/trophy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/trophy.png


--------------------------------------------------------------------------------
/public/standard/twitch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/twitch.png


--------------------------------------------------------------------------------
/public/standard/twitter.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="Logo_FIXED" data-name="Logo — FIXED" viewBox="0 0 400 400"><defs><style>.cls-1{fill:none}.cls-2{fill:#1da1f2}</style></defs><title>Twitter_Logo_Blue</title><rect width="400" height="400" class="cls-1"/><path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" class="cls-2"/></svg>


--------------------------------------------------------------------------------
/public/standard/wave.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/wave.png


--------------------------------------------------------------------------------
/public/standard/woman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/woman.png


--------------------------------------------------------------------------------
/public/standard/workshopme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/workshopme.png


--------------------------------------------------------------------------------
/public/standard/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/standard/youtube.png


--------------------------------------------------------------------------------
/public/sweat-smile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/sweat-smile.png


--------------------------------------------------------------------------------
/public/what-if.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kentcdodds/simply-react/82124c414b42c20fe98d22d695188e328e265d61/public/what-if.jpg


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | if (typeof document !== 'undefined') {
 2 |   require('style-loader!css-loader!codemirror/lib/codemirror.css')
 3 |   require('style-loader!css-loader!./cm-night-owl.css')
 4 |   require('style-loader!css-loader!./styles.css')
 5 |   require('codemirror/mode/javascript/javascript')
 6 |   require('codemirror/mode/jsx/jsx')
 7 | 
 8 |   // make it easier to navigate the slides via the keyboard
 9 |   document.body.tabIndex = '-1'
10 |   window.addEventListener('keyup', e => {
11 |     if (e.key === 'Escape') {
12 |       document.body.focus()
13 |     }
14 |   })
15 | }
16 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | .zIEGn {
 2 |   position: relative;
 3 | }
 4 | 
 5 | .react-codemirror2 {
 6 |   margin-top: 18px;
 7 |   margin-bottom: 18px;
 8 | }
 9 | 
10 | .react-codemirror2:first-child {
11 |   margin-top: 0;
12 | }
13 | 
14 | .react-codemirror2:last-child {
15 |   margin-bottom: 0;
16 | }
17 | 
18 | .CodeMirror {
19 |   height: unset;
20 |   margin-bottom: 18px;
21 |   padding: 14px;
22 | }
23 | 
24 | .CodeMirror pre {
25 |   font-variant-ligatures: none;
26 | }
27 | 
28 | pre {
29 |   text-align: left;
30 | }
31 | 
32 | a {
33 |   color: #addb67;
34 | }
35 | 
36 | * {
37 |   letter-spacing: unset;
38 | }
39 | 


--------------------------------------------------------------------------------
/theme.js:
--------------------------------------------------------------------------------
 1 | import baseTheme from 'mdx-deck/themes'
 2 | 
 3 | export default {
 4 |   ...baseTheme,
 5 |   colors: {
 6 |     ...baseTheme.colors,
 7 |     text: '#d6deeb',
 8 |     background: '#011627',
 9 |     link: '#addb67',
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------