Add PropType definitions

src/Carousel.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 const CarouselRoot = styled.div([], {
@@ -26,6 +27,10 @@ const CarouselInner = styled.div([], {
   transform: `translateX(${-100 * props.index}%)`
 }))
 
+CarouselInner.propTypes = {
+  index: PropTypes.number.isRequired
+}
+
 export const Carousel = props =>
   <CarouselRoot>
     <CarouselInner {...props} />

src/Dots.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { space, color } from 'styled-system'
 import Flex from './Flex'
@@ -22,6 +23,11 @@ const Dot = styled.button([], {
   space,
   color
 )
+Dot.propTypes = {
+  m: PropTypes.number,
+  p: PropTypes.number,
+  bg: PropTypes.string
+}
 Dot.defaultProps = {
   m: 0,
   p: 1,
@@ -47,4 +53,10 @@ export const Dots = ({
     ))}
   </Flex>
 
+Dots.propTypes = {
+  index: PropTypes.number.isRequired,
+  length: PropTypes.number.isRequired,
+  onClick: PropTypes.func
+}
+
 export default Dots

src/Flex.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import PropTypes from 'prop-types'
 import { space, width, color } from 'styled-system'
 
 const Flex = styled.div([], {
@@ -13,4 +14,8 @@ const Flex = styled.div([], {
   color
 )
 
+Flex.propTypes = {
+  css: PropTypes.object
+}
+
 export default Flex

src/Image.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { width, height } from 'styled-system'
 
@@ -14,6 +15,11 @@ const Image = styled.div([], {
   props => props.css
 )
 
+Image.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string
+}
+
 Image.defaultProps = {
   width: '100vw',
   height: '100vh',

src/Presenter.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Box from './Box'
 import Flex from './Flex'
 import Zoom from './Zoom'
@@ -78,4 +79,12 @@ export const Presenter = ({
   )
 }
 
+Presenter.propTypes = {
+  index: PropTypes.number.isRequired,
+  length: PropTypes.number.isRequired,
+  slides: PropTypes.array,
+  mode: PropTypes.string,
+  notes: PropTypes.object
+}
+
 export default Presenter

src/Root.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import PropTypes from 'prop-types'
 import {
   width,
   height,
@@ -19,6 +20,12 @@ export const Root = styled.div([], {
   height,
   color
 )
+
+Root.propTypes = {
+  color: PropTypes.string,
+  bg: PropTypes.string
+}
+
 Root.defaultProps = {
   color: 'text',
   bg: 'background'

src/Slide.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { space, color } from 'styled-system'
 
@@ -46,6 +47,10 @@ class Slide extends React.Component {
   }
 }
 
+Slide.propTypes = {
+  px: PropTypes.array
+}
+
 Slide.defaultProps = {
   px: [ 4, 5, 6 ]
 }

src/Timer.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import hhmmss from 'hhmmss'
 import styled from 'styled-components'
 import { space, color } from 'styled-system'
@@ -15,6 +16,14 @@ const Button = styled.button([], {
   border: 'none'
 }, space, color)
 
+Button.propTypes = {
+  m: PropTypes.number,
+  px: PropTypes.number,
+  py: PropTypes.number,
+  color: PropTypes.string,
+  bg: PropTypes.string
+}
+
 Button.defaultProps = {
   m: 0,
   px: 2,

src/Zoom.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 const ZoomRoot = styled.div([], {
@@ -10,6 +11,10 @@ const ZoomRoot = styled.div([], {
   })
 )
 
+ZoomRoot.propTypes = {
+  zoom: PropTypes.number.isRequired
+}
+
 const ZoomInner = styled.div([],
   props => ({
     transformOrigin: '0 0',
@@ -17,11 +22,19 @@ const ZoomInner = styled.div([],
   })
 )
 
+ZoomInner.propTypes = {
+  zoom: PropTypes.number.isRequired
+}
+
 const Zoom = ({ zoom, ...props }) =>
   <ZoomRoot zoom={zoom}>
     <ZoomInner zoom={zoom} {...props} />
   </ZoomRoot>
 
+Zoom.propTypes = {
+  zoom: PropTypes.number
+}
+
 Zoom.defaultProps = {
   zoom: 1
 }

src/components.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
   fontSize,
@@ -18,23 +19,37 @@ const Heading = styled.h1([], {
   color,
   css('heading')
 )
+Heading.propTypes = {
+  color: PropTypes.string,
+  mt: PropTypes.number,
+  mb: PropTypes.number,
+}
 Heading.defaultProps = {
   color: 'heading',
   mt: 3,
-  mb: 3,
+  mb: 3
 }
 
 const h1 = styled(Heading.withComponent('h1'))([], css('h1'))
+h1.propTypes = {
+  fontSize: PropTypes.number
+}
 h1.defaultProps = {
   fontSize: 4
 }
 
 const h2 = styled(Heading.withComponent('h2'))([], css('h2'))
+h2.propTypes = {
+  fontSize: PropTypes.number
+}
 h2.defaultProps = {
   fontSize: 3
 }
 
 const h3 = styled(Heading.withComponent('h3'))([], css('h3'))
+h3.propTypes = {
+  fontSize: PropTypes.number
+}
 h3.defaultProps = {
   fontSize: 2
 }
@@ -43,6 +58,9 @@ const h5 = styled(h3.withComponent('h5'))([], css('h5'))
 const h6 = styled(h3.withComponent('h6'))([], css('h6'))
 
 const a = styled.a([], color, css('link'), css('a'))
+a.propTypes = {
+  color: PropTypes.string
+}
 a.defaultProps = {
   color: 'link'
 }
@@ -54,6 +72,9 @@ const p = styled.p([],
   css('paragraph'),
   css('p'),
 )
+p.propTypes = {
+  fontSize: PropTypes.number
+}
 p.defaultProps = {
   fontSize: 2
 }
@@ -61,6 +82,9 @@ p.defaultProps = {
 const ul = styled.ul([], {
   textAlign: 'left'
 }, fontSize, css('ul'))
+ul.propTypes = {
+  fontSize: PropTypes.number
+}
 ul.defaultProps = {
   fontSize: 2
 }
@@ -68,6 +92,9 @@ ul.defaultProps = {
 const ol = styled.ol([], {
   textAlign: 'left'
 }, fontSize, css('ol'))
+ol.propTypes = {
+  fontSize: PropTypes.number
+}
 ol.defaultProps = {
   fontSize: 2
 }
@@ -83,6 +110,12 @@ const blockquote = styled.blockquote([], {
   css('blockquote'),
   css('quote')
 )
+blockquote.propTypes = {
+  fontSize: PropTypes.number,
+  px: PropTypes.number,
+  mx: PropTypes.number,
+  color: PropTypes.string
+}
 blockquote.defaultProps = {
   fontSize: 2,
   px: 0,
@@ -99,6 +132,13 @@ const Pre = styled.pre([], props => ({
   color,
   css('pre')
 )
+Pre.propTypes = {
+  fontSize: PropTypes.number,
+  m: PropTypes.number,
+  p: PropTypes.number,
+  color: PropTypes.string,
+  bg: PropTypes.string
+}
 Pre.defaultProps = {
   fontSize: 1,
   m: 0,
@@ -123,6 +163,10 @@ const code = props => {
 const inlineCode = styled.code([], props => ({
   fontFamily: props.theme.monospace
 }), fontSize, space, color, css('code'))
+inlineCode.propTypes = {
+  color: PropTypes.string,
+  bg: PropTypes.string
+}
 inlineCode.defaultProps = {
   color: 'code',
   bg: 'codeBackground'

src/index.js

@@ -37,6 +37,12 @@ const modes = {
 export class SlideDeck extends React.Component {
   static propTypes = {
     slides: PropTypes.array.isRequired,
+    components: PropTypes.object,
+    theme: PropTypes.object,
+    Provider: PropTypes.func,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    ignoreKeyEvents: PropTypes.bool
   }
 
   static defaultProps = {