Merge pull request #10 from ArrayKnight/add/docs

Add/docs
ArrayKnight · Feb 2, 2020 · 7feba9e · 7feba9e
2 parents 75b9c10 + f125613
commit 7feba9e
Show file tree

Hide file tree

Showing 9 changed files with 300 additions and 22 deletions.
diff --git a/.storybook-dist/main.js b/.storybook-dist/main.js
@@ -1,14 +1,35 @@
+const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin')
+
 module.exports = {
     addons: ['@storybook/addon-knobs/register', './dist/register'],
-    stories: ['../src/examples/*.stories.tsx'],
+    stories: ['../src/examples/*.stories.mdx', '../src/examples/*.stories.tsx'],
     webpackFinal: async (config) => {
-        config.module.rules.push({
-            test: /\.(ts|tsx)$/,
-            loader: require.resolve('babel-loader'),
-            options: {
-                presets: [['react-app', { flow: false, typescript: true }]],
+        config.module.rules.push(
+            {
+                test: /\.(stories|story)\.mdx$/,
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            plugins: ['@babel/plugin-transform-react-jsx'],
+                        },
+                    },
+                    {
+                        loader: '@mdx-js/loader',
+                        options: {
+                            compilers: [createCompiler({})],
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.(ts|tsx)$/,
+                loader: require.resolve('babel-loader'),
+                options: {
+                    presets: [['react-app', { flow: false, typescript: true }]],
+                },
             },
-        })
+        )
 
         config.resolve.extensions.push('.ts', '.tsx')
 

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Storybook Addon Headless allows you to preview data from a headless CMS inside s
 
 Check out examples and detailed documentation:
 
--   [https://storybook-addon-headless.netlify.com/](https://storybook-addon-headless.netlify.com/)
+-   [https://storybook-addon-headless.netlify.com/?path=/story/examples](https://storybook-addon-headless.netlify.com/?path=/story/examples)
 -   [https://github.com/ArrayKnight/storybook-addon-headless/tree/master/src/examples](https://github.com/ArrayKnight/storybook-addon-headless/tree/master/src/examples)
 
 ## Getting Started
@@ -52,9 +52,9 @@ export default {
 }
 ```
 
-You can find options documented as [HeadlessOptions](https://github.com/ArrayKnight/storybook-addon-headless/blob/master/src/types/options.ts)
+You can find options documented as [HeadlessOptions](https://github.com/ArrayKnight/storybook-addon-headless/blob/master/src/types/options.ts) and on the [documentation site](https://storybook-addon-headless.netlify.com/?path=/story/options--page).
 
-##### Options
+##### [Options](https://storybook-addon-headless.netlify.com/?path=/story/options--page)
 
 ```js
 {
@@ -67,7 +67,7 @@ You can find options documented as [HeadlessOptions](https://github.com/ArrayKni
 
 Under the covers, this addon uses Axios for Restful queries and Apollo Client for GraphQL queries. These configs are optional, though you'll likely want to use one or both. The configs will also be merged with the optional configs being passed through the parameters.
 
-#### Parameterize
+#### [Parameters](https://storybook-addon-headless.netlify.com/?path=/story/parameters--page)
 
 Parameters are added locally via:
 
@@ -85,7 +85,7 @@ export default {
 }
 ```
 
-You can find parameters document as [HeadlessParameters](https://github.com/ArrayKnight/storybook-addon-headless/blob/master/src/types/parameters.ts)
+You can find parameters document as [HeadlessParameters](https://github.com/ArrayKnight/storybook-addon-headless/blob/master/src/types/parameters.ts) and on the [documentation site](https://storybook-addon-headless.netlify.com/?path=/story/parameters--page).
 
 ```js
 {

diff --git a/package.json b/package.json
@@ -48,20 +48,22 @@
         "@commitlint/config-conventional": "8.3.4",
         "@material-ui/core": "4.9.0",
         "@storybook/addon-actions": "5.3.9",
+        "@storybook/addon-docs": "5.3.9",
         "@storybook/addon-knobs": "5.3.9",
         "@storybook/react": "5.3.9",
         "@types/ajv-keywords": "3.4.0",
         "@types/react": "16.9.19",
         "babel-loader": "8.0.6",
-        "babel-preset-react-app": "9.1.0",
+        "babel-preset-react-app": "9.1.1",
         "husky": "4.2.1",
-        "lint-staged": "10.0.2",
+        "lint-staged": "10.0.7",
         "npm-check": "5.9.0",
         "npm-run-all": "4.1.5",
         "prettier": "1.19.1",
-        "rollup": "1.29.1",
+        "react-is": "16.12.0",
+        "rollup": "1.31.0",
         "rollup-plugin-typescript2": "0.25.3",
-        "semantic-release": "16.0.3",
+        "semantic-release": "17.0.2",
         "tslint": "6.0.0",
         "tslint-config-prettier": "1.18.0",
         "tslint-react": "4.2.0",

diff --git a/src/components/Variable/Date.tsx b/src/components/Variable/Date.tsx
@@ -7,7 +7,7 @@ import { Error, Row } from './styled'
 
 export interface Props {
     schema: DateTimeSchema
-    value: string
+    value: string | undefined
     error: string | null
     isValid: boolean
     onChange: (value: string) => void
@@ -43,9 +43,9 @@ export const DateTimeInput = memo(
             return parseISO(val)
         }
 
-        function getter(val: string): string {
+        function getter(val: string | undefined): string {
             if (!val) {
-                return val
+                return ''
             }
 
             const date = getDate(val, true)

diff --git a/src/components/Variable/Number.tsx b/src/components/Variable/Number.tsx
@@ -2,11 +2,12 @@ import { Form } from '@storybook/components'
 import React, { ChangeEvent, memo } from 'react'
 
 import { NumberSchema } from '../../types'
+import { isUndefined } from '../../utilities'
 import { Error, Row } from './styled'
 
 export interface Props {
     schema: NumberSchema
-    value: number
+    value: number | undefined
     error: string | null
     isValid: boolean
     onChange: (value: number) => void
@@ -23,7 +24,7 @@ export const NumberInput = memo(
                 <Form.Input
                     type="number"
                     valid={!isValid ? 'error' : null}
-                    value={`${value}`}
+                    value={isUndefined(value) ? '' : `${value}`}
                     onChange={update}
                 />
                 {!isValid && <Error>{error}</Error>}

diff --git a/src/components/Variable/String.tsx b/src/components/Variable/String.tsx
@@ -6,7 +6,7 @@ import { Error, Row } from './styled'
 
 export interface Props {
     schema: StringSchema
-    value: string
+    value: string | undefined
     error: string | null
     isValid: boolean
     onChange: (value: string) => void

diff --git a/src/examples/intro.stories.mdx b/src/examples/intro.stories.mdx
@@ -0,0 +1,20 @@
+import {
+    Description,
+    DocsContainer,
+    DocsPage,
+    Meta,
+} from '@storybook/addon-docs/blocks'
+
+import readme from '../../README.md'
+
+<Meta
+    title="Intro"
+    parameters={{
+        docs: {
+            container: DocsContainer,
+            page: DocsPage,
+        },
+    }}
+/>
+
+export default () => <Description markdown={readme} />
diff --git a/src/examples/options.stories.mdx b/src/examples/options.stories.mdx
@@ -0,0 +1,27 @@
+import { DocsContainer, DocsPage, Meta } from '@storybook/addon-docs/blocks'
+
+<Meta
+    title="Options"
+    parameters={{
+        docs: {
+            container: DocsContainer,
+            page: DocsPage,
+        },
+    }}
+/>
+
+# Options
+
+By utilizing options when setting up the Headless decorator, its possible to establish a base config that will keep individual story parameters simple. Global setup pieces like authentication headers should be done here too.
+
+## Restful
+
+A partial [Axios config](https://github.com/axios/axios#request-config) can be passed in as a base config. The most common use case would be to establish a `baseURL` so that all stories can have a simpler relative query.
+
+## GraphQL
+
+A partial [Apollo Boost config](https://www.apollographql.com/docs/react/get-started/#configuration-options) can be passed in as a base config. The most common use case would be to establish a `uri` so that all stories can simply define a query without the need for an additional config.
+
+## Theming
+
+If you're customizing the theme of your Storybook to match your company's branding, you may wish to switch up the JSON editor theme as well. The `jsonDark` and `jsonLight` options allow you to [pick a theme](https://github.com/mac-s-g/react-json-view#customizing-style) of your choosing. All other component styles should inherit theme from Storybook.