diff --git a/.storybook/main.js b/.storybook/main.js index a1a9e7c0a..5303ba48a 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -19,7 +19,6 @@ module.exports = { addons: [ "@storybook/addon-actions/register", "@storybook/addon-docs/register", - "@storybook/addon-info/register", "@storybook/addon-links/register" ], webpackFinal: async config => { @@ -27,7 +26,18 @@ module.exports = { ...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 index d502bfb29..c7cd11bfc 100644 --- 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 index a0dfd90ac..abe44b9ce 100644 --- 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 index 9d977e295..826ee0dcd 100644 --- 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 index b31f2cea1..ea223041b 100644 --- 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 index 1ae4b0da6..358a6dd1b 100644 --- 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 index ca4ca54c1..3d83856d7 100644 --- 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 index e854678ff..9d3566364 100644 --- 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 index 038e75568..7f30c4eec 100644 --- 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 index 04cc60ab6..1db031ee5 100644 --- 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 index 907c89846..4c321cec6 100644 --- 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 index c9dcc8ca1..3d13a7afa 100644 --- 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 index 05130722d..af1b6254d 100644 --- 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 index 28435ba73..1c66e50ee 100644 --- 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 index 6f44ab6f3..73f15eb98 100644 --- 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 index 6f44ab6f3..73f15eb98 100644 --- 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 index b0cb061d4..fa0a20f50 100644 --- 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 index 157a88432..388faf35d 100644 --- 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 index 476725487..e1a8b0fa2 100644 --- 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 index 915de98da..62821dd92 100644 --- 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 index 4d99c44c3..bc06f8327 100644 --- 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 index 77a85e2cc..25d5b3c26 100644 --- 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 index e45dce6ce..e3f4887cd 100644 --- 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 index a19029e6d..14ac3b644 100644 --- 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 index 6cc9683d9..7453549f0 100644 --- 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 index 3bb3a8fae..2551d3e8c 100644 --- 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 index 6b3e048aa..9a71ec1bb 100644 --- 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 index c9883c9c6..ffa63573c 100644 --- 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 index 38417c04a..37ff866f0 100644 --- 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 index 6a4b1b55e..e5beaf90f 100644 --- 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 index 006c14103..d55794b3b 100644 --- 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 index 132d5c5f5..154342dab 100644 --- 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 index bfa678784..ad50d72ce 100644 --- 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 index a652b6fd7..70e08e03c 100644 --- 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==