[WIP] Implement docs site

docs/_app.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import RebassMDX from '@rebass/mdx'
+import * as Rebass from 'rebass'
+import { Flex, Box, Container } from 'rebass'
+import sortBy from 'lodash.sortby'
+import { Link } from 'react-router-dom'
+import { SidebarLayout as Layout } from '@compositor/x0/components'
+import { Kit as KitLogo } from '@compositor/logo'
+
+import * as Kit from '../core/src'
+
+const navOrder = [
+  'index',
+  'introduction',
+  'getting-started'
+]
+
+const pageNames = { index: 'Home' }
+
+const sortRoutes = routes => [
+  ...sortBy([...routes], a => {
+    const i = navOrder.indexOf(a.name)
+    return i < 0 ? Infinity : i
+  })
+].map(route => {
+  if (!pageNames[route.name]) return route
+  return {
+    ...route,
+    name: pageNames[route.name]
+  }
+})
+
+export default class App extends React.Component {
+  static defaultProps = {
+    title: 'Kit'
+  }
+
+  render () {
+    const {
+      routes,
+      route,
+      children,
+    } = this.props
+    const { layout } = (route && route.props) || {}
+    const disableLayout = layout === false
+
+    const nav = sortRoutes(routes)
+
+    return (
+      <RebassMDX components={{ ...Rebass, ...Kit }}>
+        {disableLayout ? children : (
+          <Layout
+            {...this.props}
+            logo={<KitLogo size={30} />}
+            routes={nav}
+          />
+        )}
+      </RebassMDX>
+    )
+  }
+}

docs/components/Cartesian.md

@@ -0,0 +1,21 @@
+# Cartesian
+
+Display the Cartesian product of component props.
+
+```.jsx
+<Cartesian
+  component={Button}
+  m={4}
+  p={[3, 4]}
+  fontSize={[1, 3]}
+  bg={['blue', 'tomato', 'purple']}
+  children={'Beep'}
+/>
+```
+
+## Props
+
+name | type | description
+---|---|---
+`component` | React component | the component to render
+`...props` | Props for Cartesian product | Only arrays are computed in the product

docs/components/Catch.md

@@ -0,0 +1,24 @@
+# Catch
+
+React `componentDidCatch` component that displays errors.
+Wrap it around other components that might error like a LiveEditor or a fetch.
+
+```jsx
+import React from 'react'
+import { Catch } from '@compositor/kit'
+import Button from '../src/Button'
+
+export default props => (
+  <Catch>
+    <Button>Hello</Button>
+  </Catch>
+)
+```
+
+### Example
+
+Here a ReferenceError is being caught.
+
+```.jsx
+<Catch>{imNotDefined}</Catch>
+```

docs/components/Colorable.md

@@ -0,0 +1,19 @@
+# Colorable
+
+Render prop component for the [colorable][colorable] library.
+
+```.jsx
+<Colorable
+  colors={['black', 'white', '#07c', 'tomato']}
+  children={combos => combos.map(combo =>
+    <div
+      key={combo.hex}
+      children={combo.combinations.map(c =>
+        <Button key={c.hex} bg={c.hex} color={combo.hex} m={3}>Beep</Button>
+      )}
+    />
+  )}
+/>
+```
+
+[colorable]: https://github.com/jxnblk/colorable

docs/Debug.md → docs/components/Debug.md

@@ -3,7 +3,9 @@
 The Debug component can be used to get a formatted JSON printout of an object.
 It also provides a HOC for logging props when a component uses the implicit return.
 
-![](images/debug.png)
+```.jsx
+<Debug>{{ some: 'object', to: 'debug' }}</Debug>
+```
 
 ## Usage
 

docs/components/Diff.md

@@ -0,0 +1,12 @@
+# Diff
+
+Shows a visual diff between two elements.
+
+```.jsx
+<Box mb={4}>
+  <Diff>
+    <Text fontSize={3}>Hi</Text>
+    <Text fontSize={4} color="red">Hey</Text>
+  </Diff>
+</Box>
+```

docs/Fetch.md → docs/components/Fetch.md

@@ -1,4 +1,3 @@
-
 # Fetch
 
 Data fetcher, editor, and lifecycle toggle.

docs/Font.md → docs/components/Font.md

@@ -1,6 +1,6 @@
 # Font
 
-Set font-family and other typographic styles
+Set font-family and other typographic styles.
 
 The `Font` components provides basic webfont utilities to wrap your app.
 It also provides a convenient webfont loader using [Google Fonts](https://fonts.google.com/).

docs/Library.md → docs/components/Library.md

@@ -3,25 +3,23 @@
 The Library component manages a list of examples created with the Example component,
 showing a grid view by default and a detailed view when a component is clicked.
 
-![](images/library.png)
-
 ## Usage
 
-```jsx
-import React from 'react'
-import { Library, Example } from '@compositor/kit'
-import { Button, Heading } from '../src'
-
-const App = props => (
-  <Library>
-    <Example name='Button'>
-      <Button>Beep</Button>
-    </Example>
-    <Example name='Heading'>
-      <Heading>Hello</Heading>
-    </Example>
-  </Library>
-)
+```.jsx
+<Library basename="/components/Library">
+  <Example name='Button'>
+    <Button>Beep</Button>
+  </Example>
+  <Example name='Donut'>
+    <Donut />
+  </Example>
+  <Example name='Badge'>
+    <Badge bg='tomato'>Boop</Badge>
+  </Example>
+  <Example name='Heading'>
+    <Heading>Hello</Heading>
+  </Example>
+</Library>
 ```
 
 ### Examples array
@@ -143,7 +141,7 @@ export default props =>
   />
 ```
 
-## Library Component
+### Library Component Props
 
 Prop | Type | Description
 ---|---|---
@@ -152,12 +150,12 @@ title | string | Optional title to display in the side nav
 renderSideNav | function | Optional render prop to customize side nav
 renderCard | function | Optional render prop to customize card in the grid view
 
-## Example Component
+### Example Component
 
 Use the Example component with the Library component to add examples.
 Each Example component requires a unique `name` prop value.
 
-### Usage
+#### Usage
 
 ```jsx
 import React from 'react'
@@ -175,15 +173,17 @@ const App = props => (
 )
 ```
 
+#### Example Component Props
+
 Prop | Type | Description
 ---|---|---
 name | string (required) | Unique identifier that will be used for navigation in the Library
 
-## Detail Component
+### Detail Component
 
 Use the Detail component to add additional elements when viewing the example detail view. Elements in the Detail component will not show up in the grid view of the Library.
 
-### Usage
+#### Usage
 
 ```jsx
 import React from 'react'