diff --git a/docs/Cartesian.md b/docs/Cartesian.md deleted file mode 100644 index 124eceee..00000000 --- a/docs/Cartesian.md +++ /dev/null @@ -1,22 +0,0 @@ - -# Cartesian - -Display the cartesian product of component props - -![](images/cartesian.png) - -```jsx -import React from 'react' -import { Cartesian } from '@compositor/kit' -import Button from '../src/Button' - -export default props => ( - -) -``` diff --git a/docs/Catch.md b/docs/Catch.md deleted file mode 100644 index 5dc0626f..00000000 --- a/docs/Catch.md +++ /dev/null @@ -1,16 +0,0 @@ - -# Catch - -React `componentDidCatch` component that displays errors - -```jsx -import React from 'react' -import { Catch } from '@compositor/kit' -import Button from '../src/Button' - -export default props => ( - - - -) -``` diff --git a/docs/Colorable.md b/docs/Colorable.md deleted file mode 100644 index 8c8ce985..00000000 --- a/docs/Colorable.md +++ /dev/null @@ -1,26 +0,0 @@ - -# Colorable - -Render prop component for the [colorable][colorable] library. - -```jsx -import React from 'react' -import { Colorable } from '@compositor/kit' -import Button from '../src/Button' - -export default props => ( - combos.map(combo => -
- - )} - /> - )} - /> -) -``` - -[colorable]: https://github.com/jxnblk/colorable diff --git a/docs/Diff.md b/docs/Diff.md deleted file mode 100644 index e5ba225e..00000000 --- a/docs/Diff.md +++ /dev/null @@ -1,20 +0,0 @@ - -# Diff - -Shows a visual diff between two elements - -![](images/diff.png) - -```jsx -import React from 'react' -import { Diff } from '@compositor/kit' -import Button from '../src/Button' - -export default props => ( - - - - -) -``` - diff --git a/docs/Markdown.md b/docs/Markdown.md deleted file mode 100644 index 2737250b..00000000 --- a/docs/Markdown.md +++ /dev/null @@ -1,17 +0,0 @@ - -# Markdown - -Render markdown strings as React elements with [MDX][mdx] - -```jsx -import React from 'react' -import { Markdown } from '@compositor/kit' - -export default props => ( - - {`# Hello`} - -) -``` - -[mdx]: https://github.com/mdx-js/mdx diff --git a/docs/Matrix.md b/docs/Matrix.md deleted file mode 100644 index 36fa2311..00000000 --- a/docs/Matrix.md +++ /dev/null @@ -1,38 +0,0 @@ - -# Matrix - -Displays a matrix of component permutations - -![](images/matrix.png) - -```jsx -import React from 'react' -import { Matrix } from '@compositor/kit' -import Button from '../src/Button' - -export default props => ( - -) -``` - -## Props - -name | type | description ----|---|--- -`component` | React component | the component to render -`x` | array | an array of props objects to display on the x-axis -`y` | array | an array of props objects to display on the y-axis -`width` | number | width of each column diff --git a/docs/_app.js b/docs/_app.js new file mode 100644 index 00000000..5f95ebf9 --- /dev/null +++ b/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 ( + + {disableLayout ? children : ( + } + routes={nav} + /> + )} + + ) + } +} diff --git a/docs/components/Cartesian.md b/docs/components/Cartesian.md new file mode 100644 index 00000000..421f44a3 --- /dev/null +++ b/docs/components/Cartesian.md @@ -0,0 +1,21 @@ +# Cartesian + +Display the Cartesian product of component props. + +```.jsx + +``` + +## Props + +name | type | description +---|---|--- +`component` | React component | the component to render +`...props` | Props for Cartesian product | Only arrays are computed in the product diff --git a/docs/components/Catch.md b/docs/components/Catch.md new file mode 100644 index 00000000..1cc5e760 --- /dev/null +++ b/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 => ( + + + +) +``` + +### Example + +Here a ReferenceError is being caught. + +```.jsx +{imNotDefined} +``` diff --git a/docs/components/Colorable.md b/docs/components/Colorable.md new file mode 100644 index 00000000..2e4103d8 --- /dev/null +++ b/docs/components/Colorable.md @@ -0,0 +1,19 @@ +# Colorable + +Render prop component for the [colorable][colorable] library. + +```.jsx + combos.map(combo => +
+ + )} + /> + )} +/> +``` + +[colorable]: https://github.com/jxnblk/colorable diff --git a/docs/Debug.md b/docs/components/Debug.md similarity index 94% rename from docs/Debug.md rename to docs/components/Debug.md index 873b5e74..eed909e5 100644 --- a/docs/Debug.md +++ b/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 +{{ some: 'object', to: 'debug' }} +``` ## Usage diff --git a/docs/components/Diff.md b/docs/components/Diff.md new file mode 100644 index 00000000..5d1bef55 --- /dev/null +++ b/docs/components/Diff.md @@ -0,0 +1,12 @@ +# Diff + +Shows a visual diff between two elements. + +```.jsx + + + Hi + Hey + + +``` diff --git a/docs/Fetch.md b/docs/components/Fetch.md similarity index 99% rename from docs/Fetch.md rename to docs/components/Fetch.md index dada3694..ff757683 100644 --- a/docs/Fetch.md +++ b/docs/components/Fetch.md @@ -1,4 +1,3 @@ - # Fetch Data fetcher, editor, and lifecycle toggle. diff --git a/docs/Font.md b/docs/components/Font.md similarity index 93% rename from docs/Font.md rename to docs/components/Font.md index 996a1954..c75f77c9 100644 --- a/docs/Font.md +++ b/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/). diff --git a/docs/Frame.md b/docs/components/Frame.md similarity index 100% rename from docs/Frame.md rename to docs/components/Frame.md diff --git a/docs/Library.md b/docs/components/Library.md similarity index 90% rename from docs/Library.md rename to docs/components/Library.md index 5f5de454..205bc43a 100644 --- a/docs/Library.md +++ b/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 => ( - - - - - - Hello - - -) +```.jsx + + + + + + + + + Boop + + + Hello + + ``` ### 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' diff --git a/docs/LiveEditor.md b/docs/components/LiveEditor.md similarity index 79% rename from docs/LiveEditor.md rename to docs/components/LiveEditor.md index 427be5e2..84ea1da6 100644 --- a/docs/LiveEditor.md +++ b/docs/components/LiveEditor.md @@ -2,8 +2,6 @@ The LiveEditor component is a wrapper around [react-live][react-live], with basic UI and a [ThemeProvider][theme-provider]. -![](images/live-editor.png) - ```jsx import React from 'react' import { LiveEditor } from '@compositor/kit' @@ -20,12 +18,24 @@ export default () => ( ) ``` +### Props + Prop | Type | Description ---|---|--- code | string (required) | JSX code for the example scope | object | Object of components to include in scope theme | object | Theme object passed to the ThemeProvider +### Demo + +Here's a LiveEditor inside a LiveEditor inside a LiveEditor. + +```.jsx + +``` [react-live]: https://github.com/FormidableLabs/react-live [theme-provider]: https://www.styled-components.com/docs/advanced#theming diff --git a/docs/components/Markdown.md b/docs/components/Markdown.md new file mode 100644 index 00000000..9698025d --- /dev/null +++ b/docs/components/Markdown.md @@ -0,0 +1,19 @@ +# Markdown + +```!jsx + + + ⚠️ This should never be used with user created content + + +``` + +Render [MDX][mdx] strings as React elements. + +```.jsx + + {`# Hello`} + +``` + +[mdx]: https://github.com/mdx-js/mdx diff --git a/docs/components/Matrix.md b/docs/components/Matrix.md new file mode 100644 index 00000000..63ddbee8 --- /dev/null +++ b/docs/components/Matrix.md @@ -0,0 +1,29 @@ +# Matrix + +Displays a matrix of component permutations. + +```.jsx + +``` + +## Props + +name | type | description +---|---|--- +`component` | React component | the component to render +`x` | array | an array of props objects to display on the x-axis +`y` | array | an array of props objects to display on the y-axis +`width` | number | width of each column diff --git a/docs/PropsForm.md b/docs/components/PropsForm.md similarity index 72% rename from docs/PropsForm.md rename to docs/components/PropsForm.md index 96259423..491979ed 100644 --- a/docs/PropsForm.md +++ b/docs/components/PropsForm.md @@ -2,11 +2,21 @@ Add form controls to adjust a component's props. -![](images/props-form.png) - Renders the first child element with optional form elements to adjust prop values in browser. Default values are extracted from the first child's props +```.jsx + + + + + + + + + +``` + ## Usage ```jsx diff --git a/docs/Responsive.md b/docs/components/Responsive.md similarity index 81% rename from docs/Responsive.md rename to docs/components/Responsive.md index 35c7917b..745cb358 100644 --- a/docs/Responsive.md +++ b/docs/components/Responsive.md @@ -2,8 +2,6 @@ Displays children in `