storybook stuff

reach · Jan 27, 2020 · 5b8784a · 5b8784a
1 parent 515f535
commit 5b8784a
Show file tree

Hide file tree

Showing 34 changed files with 79 additions and 38 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -19,15 +19,25 @@ module.exports = {
   addons: [
     "@storybook/addon-actions/register",
     "@storybook/addon-docs/register",
-    "@storybook/addon-info/register",
     "@storybook/addon-links/register"
   ],
   webpackFinal: async config => {
     config.module.rules = [
       ...config.module.rules,
       {
         test: /\.(ts|tsx)?$/,
-        loader: "awesome-typescript-loader"
+        use: [
+          {
+            loader: "awesome-typescript-loader",
+            options: {
+              transpileOnly: true
+            }
+          },
+          {
+            loader: "react-docgen-typescript-loader",
+            options: {}
+          }
+        ]
       }
     ];
     config.resolve = {
@@ -36,7 +46,7 @@ module.exports = {
         ...(config.resolve.alias || {}),
         ...alias
       },
-      extensions: [".ts", ".tsx", ".js"],
+      extensions: [...(config.resolve.extensions || []), ".ts", ".tsx"],
       plugins: [new TsConfigPathsPlugin({})]
     };
     config.plugins = [

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,5 @@
-import { configure } from "@storybook/react";
+import { addDecorator, configure } from "@storybook/react";
+import { withInfo } from "@storybook/addon-info";
 import "pepjs";
 import "./styles.css";
 
@@ -31,3 +32,5 @@ configure(() => {
     return [...prev, allExports[cur]];
   }, []);
 }, module);
+
+addDecorator(withInfo);
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "changes": "dotenv lerna-changelog",
     "clean": "git clean -e '!/.env' -e '!/website-deploy-key' -e '!/website-deploy-key.pub' -fdX .",
     "lint": "eslint .",
-    "doc": "react-docgen packages/*/src/* --out www/docs/source.json --resolver findAllComponentDefinitions --pretty",
     "postinstall": "patch-package"
   },
   "dependencies": {
@@ -73,7 +72,9 @@
     "pretty-quick": "2.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-docgen-typescript-loader": "^3.6.0",
     "react-dom": "^16.12.0",
+    "react-is": "^16.12.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-spring": "^8.0.27",

diff --git a/packages/alert-dialog/examples/basic-ts.example.tsx b/packages/alert-dialog/examples/basic-ts.example.tsx
@@ -33,4 +33,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Alert Dialog" };
+export default { title: "AlertDialog" };
diff --git a/packages/alert-dialog/examples/basic.example.js b/packages/alert-dialog/examples/basic.example.js
@@ -33,4 +33,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Alert Dialog" };
+export default { title: "AlertDialog" };
diff --git a/packages/component-component/examples/lifecycles.example.js b/packages/component-component/examples/lifecycles.example.js
@@ -57,4 +57,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Component Component" };
+export default { title: "ComponentComponent" };
diff --git a/packages/component-component/examples/state.example.js b/packages/component-component/examples/state.example.js
@@ -25,4 +25,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Component Component" };
+export default { title: "ComponentComponent" };
diff --git a/packages/component-component/examples/todo-list.example.js b/packages/component-component/examples/todo-list.example.js
@@ -80,4 +80,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Component Component" };
+export default { title: "ComponentComponent" };
diff --git a/packages/component-component/src/index.js b/packages/component-component/src/index.js
@@ -105,6 +105,7 @@ class Component extends React.Component {
 }
 
 if (__DEV__) {
+  Component.displayName = "ComponentComponent";
   Component.propTypes = {
     initialState: PropTypes.object,
     getInitialState: PropTypes.func,

diff --git a/packages/menu-button/examples/basic-strict-mode.example.js b/packages/menu-button/examples/basic-strict-mode.example.js
@@ -25,4 +25,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/basic.example.js b/packages/menu-button/examples/basic.example.js
@@ -23,4 +23,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/basic.example.tsx b/packages/menu-button/examples/basic.example.tsx
@@ -23,4 +23,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/conditional-items.example.js b/packages/menu-button/examples/conditional-items.example.js
@@ -53,4 +53,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/corners.example.js b/packages/menu-button/examples/corners.example.js
@@ -32,7 +32,7 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/menu-button/examples/custom-wrapper.example.js b/packages/menu-button/examples/custom-wrapper.example.js
@@ -35,4 +35,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/custom-wrapper.example.tsx b/packages/menu-button/examples/custom-wrapper.example.tsx
@@ -35,4 +35,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/focus-on-select.example.js b/packages/menu-button/examples/focus-on-select.example.js
@@ -60,4 +60,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/long-text.example.js b/packages/menu-button/examples/long-text.example.js
@@ -55,4 +55,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/non-menu-children.example.js b/packages/menu-button/examples/non-menu-children.example.js
@@ -31,7 +31,7 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/menu-button/examples/non-menu-children.example.tsx b/packages/menu-button/examples/non-menu-children.example.tsx
@@ -31,7 +31,7 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/menu-button/examples/render-prop.example.js b/packages/menu-button/examples/render-prop.example.js
@@ -29,4 +29,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/styled.example.js b/packages/menu-button/examples/styled.example.js
@@ -36,7 +36,7 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/menu-button/examples/styled.example.tsx b/packages/menu-button/examples/styled.example.tsx
@@ -38,7 +38,7 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/menu-button/examples/with-links.example.js b/packages/menu-button/examples/with-links.example.js
@@ -31,7 +31,7 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/menu-button/examples/with-other-tabbables.example.js b/packages/menu-button/examples/with-other-tabbables.example.js
@@ -34,4 +34,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/menu-button/examples/with-styled-router.example.tsx b/packages/menu-button/examples/with-styled-router.example.tsx
@@ -41,7 +41,7 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/menu-button/examples/with-tooltip.example.js b/packages/menu-button/examples/with-tooltip.example.js
@@ -29,4 +29,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Menu Button" };
+export default { title: "MenuButton" };
diff --git a/packages/rect/examples/use-rect.example.js b/packages/rect/examples/use-rect.example.js
@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { useRect } from "@reach/rect";
 
-let name = "useRect";
+let name = "Basic";
 
 function Example() {
   const ref = useRef();
@@ -30,4 +30,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Rect" };
+export default { title: "useRect" };
diff --git a/packages/visually-hidden/examples/basic.example.js b/packages/visually-hidden/examples/basic.example.js
@@ -16,4 +16,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Visually Hidden" };
+export default { title: "VisuallyHidden" };
diff --git a/packages/visually-hidden/examples/basic.example.tsx b/packages/visually-hidden/examples/basic.example.tsx
@@ -16,4 +16,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Visually Hidden" };
+export default { title: "VisuallyHidden" };
diff --git a/packages/window-size/examples/basic.example.js b/packages/window-size/examples/basic.example.js
@@ -13,4 +13,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Window Size" };
+export default { title: "WindowSize" };
diff --git a/packages/window-size/examples/basic.example.tsx b/packages/window-size/examples/basic.example.tsx
@@ -13,4 +13,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Window Size" };
+export default { title: "WindowSize" };
diff --git a/packages/window-size/examples/hook.example.js b/packages/window-size/examples/hook.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { useWindowSize } from "@reach/window-size";
 
-let name = "useWindowSize";
+let name = "Basic";
 
 function Example() {
   const sizes = useWindowSize();
@@ -12,4 +12,4 @@ function Example() {
 
 Example.story = { name };
 export const Comp = Example;
-export default { title: "Window Size" };
+export default { title: "useWindowSize" };
diff --git a/yarn.lock b/yarn.lock
@@ -4238,6 +4238,18 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@webpack-contrib/schema-utils@^1.0.0-beta.0":
+  version "1.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz#bf9638c9464d177b48209e84209e23bee2eb4f65"
+  integrity sha512-LonryJP+FxQQHsjGBi6W786TQB1Oym+agTpY0c+Kj8alnIw+DLUJb6SI8Y1GHGhLCH1yPRrucjObUmxNICQ1pg==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    chalk "^2.3.2"
+    strip-ansi "^4.0.0"
+    text-table "^0.2.0"
+    webpack-log "^1.1.2"
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -5821,7 +5833,7 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -13768,6 +13780,20 @@ react-dev-utils@^9.0.0:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
+react-docgen-typescript-loader@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.6.0.tgz#5515f03f869e66d49e287c5f1e7ec10f2084f7bb"
+  integrity sha512-+uEsM3VYCdlcBGxF3tBqI5XWL1phvrh8dkiIfdpciKlM1BDHW+d82kKJI9hX6zk9H8TL+3Th/j/JAEaKb5FFNw==
+  dependencies:
+    "@webpack-contrib/schema-utils" "^1.0.0-beta.0"
+    loader-utils "^1.2.3"
+    react-docgen-typescript "^1.15.0"
+
+react-docgen-typescript@^1.15.0:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.16.2.tgz#d5f26ba6591ac4bc61628c514d492de461ae7c2c"
+  integrity sha512-nECrg2qih81AKp0smkxXebF72/2EjmEn7gXSlWLDHLbpGcbw2yIorol24fw1FWqvndIY82sfSd0x/SyfMKY1Jw==
+
 react-docgen@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.1.0.tgz#8e69f1d2e9153c535c20162ea1b85878b059b474"
@@ -16899,7 +16925,7 @@ webpack-hot-middleware@^2.25.0:
     querystring "^0.2.0"
     strip-ansi "^3.0.0"
 
-webpack-log@^1.2.0:
+webpack-log@^1.1.2, webpack-log@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
   integrity sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==