From a8a21baa98bb83f2a4e3c0678a5df38b88429d29 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 12:15:09 -0500 Subject: [PATCH 01/33] Adds plop boilerplate --- .../using-react-docgen-transformer/.eslintrc | 8 ++++++++ .../using-react-docgen-transformer/.gitignore | 3 +++ .../using-react-docgen-transformer/README.md | 5 +++++ .../using-react-docgen-transformer/package.json | 16 ++++++++++++++++ .../src/pages/index.js | 9 +++++++++ 5 files changed, 41 insertions(+) create mode 100644 examples/using-react-docgen-transformer/.eslintrc create mode 100644 examples/using-react-docgen-transformer/.gitignore create mode 100644 examples/using-react-docgen-transformer/README.md create mode 100644 examples/using-react-docgen-transformer/package.json create mode 100644 examples/using-react-docgen-transformer/src/pages/index.js diff --git a/examples/using-react-docgen-transformer/.eslintrc b/examples/using-react-docgen-transformer/.eslintrc new file mode 100644 index 0000000000000..aadde9c0aa03d --- /dev/null +++ b/examples/using-react-docgen-transformer/.eslintrc @@ -0,0 +1,8 @@ +{ + "env": { + "browser": true + }, + "globals": { + "graphql": false + } +} \ No newline at end of file diff --git a/examples/using-react-docgen-transformer/.gitignore b/examples/using-react-docgen-transformer/.gitignore new file mode 100644 index 0000000000000..8f5b35a4a9cbc --- /dev/null +++ b/examples/using-react-docgen-transformer/.gitignore @@ -0,0 +1,3 @@ +public +.cache +node_modules diff --git a/examples/using-react-docgen-transformer/README.md b/examples/using-react-docgen-transformer/README.md new file mode 100644 index 0000000000000..53fc3a048b991 --- /dev/null +++ b/examples/using-react-docgen-transformer/README.md @@ -0,0 +1,5 @@ +# using-react-docgen-transformer + +https://using-react-docgen-transformer.gatsbyjs.org + +Stub README description diff --git a/examples/using-react-docgen-transformer/package.json b/examples/using-react-docgen-transformer/package.json new file mode 100644 index 0000000000000..9253b3f93b448 --- /dev/null +++ b/examples/using-react-docgen-transformer/package.json @@ -0,0 +1,16 @@ +{ + "name": "using-react-docgen-transformer", + "private": true, + "description": "Gatsby example site using using-react-docgen-transformer", + "author": "scott.eckenthal@gmail.com", + "dependencies": { + "gatsby": "latest", + "gatsby-link": "latest" + }, + "license": "MIT", + "main": "n/a", + "scripts": { + "develop": "gatsby develop", + "build": "gatsby build" + } +} diff --git a/examples/using-react-docgen-transformer/src/pages/index.js b/examples/using-react-docgen-transformer/src/pages/index.js new file mode 100644 index 0000000000000..6535c01760e9e --- /dev/null +++ b/examples/using-react-docgen-transformer/src/pages/index.js @@ -0,0 +1,9 @@ +import React from 'react' + +class IndexComponent extends React.Component { + render () { + return
Hello world
+ } +} + +export default IndexComponent From 6e15197aa8f5274ea9cd73ca155238e2cf8780bc Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 12:41:39 -0500 Subject: [PATCH 02/33] Adds base stuff --- .../package.json | 4 ++- .../src/components/Button/Button.js | 36 +++++++++++++++++++ .../src/components/Button/index.js | 1 + .../src/pages/index.js | 12 +++++-- 4 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 examples/using-react-docgen-transformer/src/components/Button/Button.js create mode 100644 examples/using-react-docgen-transformer/src/components/Button/index.js diff --git a/examples/using-react-docgen-transformer/package.json b/examples/using-react-docgen-transformer/package.json index 9253b3f93b448..0eca26bf21a78 100644 --- a/examples/using-react-docgen-transformer/package.json +++ b/examples/using-react-docgen-transformer/package.json @@ -5,7 +5,9 @@ "author": "scott.eckenthal@gmail.com", "dependencies": { "gatsby": "latest", - "gatsby-link": "latest" + "gatsby-link": "latest", + "gatsby-transformer-react-docgen": "^1.0.11", + "glamor": "^2.20.40" }, "license": "MIT", "main": "n/a", diff --git a/examples/using-react-docgen-transformer/src/components/Button/Button.js b/examples/using-react-docgen-transformer/src/components/Button/Button.js new file mode 100644 index 0000000000000..78b8c5f4b8e7e --- /dev/null +++ b/examples/using-react-docgen-transformer/src/components/Button/Button.js @@ -0,0 +1,36 @@ +import React from "react" +import { css } from "glamor" + +const blue = { + primary: `#A0CED9`, + hover: `#92BCC6`, +} + +const orange = { + primary: `#EAB69B`, + hover: `#E8AF91`, +} + +const green = { + primary: `#ADF7B6`, + hover: `#9EE1A6`, +} + +const styles = css({ + backgroundColor: blue.primary, + color: `rgba(36, 47, 60, 0.66)`, + display: `inline-block`, + fontSize: `18px`, + padding: `16px 24px`, + minWidth: `278px`, + borderRadius: `3px`, + border: 0, + cursor: `pointer`, + "&:hover": { + backgroundColor: blue.hover, + }, +}) + +const Button = props => + + ) } } From b6ca427bbb476ef2d6cf599fb6e11cee85635de5 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 13:44:34 -0500 Subject: [PATCH 03/33] Configurable background colors --- .../src/components/Button/Button.js | 70 ++++++++++++------- 1 file changed, 44 insertions(+), 26 deletions(-) diff --git a/examples/using-react-docgen-transformer/src/components/Button/Button.js b/examples/using-react-docgen-transformer/src/components/Button/Button.js index 78b8c5f4b8e7e..606ea8ecb031f 100644 --- a/examples/using-react-docgen-transformer/src/components/Button/Button.js +++ b/examples/using-react-docgen-transformer/src/components/Button/Button.js @@ -1,36 +1,54 @@ import React from "react" +import PropTypes from "prop-types" import { css } from "glamor" -const blue = { - primary: `#A0CED9`, - hover: `#92BCC6`, -} +const blue = `blue` +const orange = `orange` +const green = `green` -const orange = { - primary: `#EAB69B`, - hover: `#E8AF91`, -} +const colors = { + [blue]: { + primary: `#A0CED9`, + hover: `#92BCC6`, + }, -const green = { - primary: `#ADF7B6`, - hover: `#9EE1A6`, -} + [orange]: { + primary: `#EAB69B`, + hover: `#E8AF91`, + }, -const styles = css({ - backgroundColor: blue.primary, - color: `rgba(36, 47, 60, 0.66)`, - display: `inline-block`, - fontSize: `18px`, - padding: `16px 24px`, - minWidth: `278px`, - borderRadius: `3px`, - border: 0, - cursor: `pointer`, - "&:hover": { - backgroundColor: blue.hover, + [green]: { + primary: `#ADF7B6`, + hover: `#9EE1A6`, }, -}) +} -const Button = props => +``` + +Colors are configurable + +``` +
+
+
+
+
+``` diff --git a/examples/using-react-docgen-transformer/src/pages/index.js b/examples/using-react-docgen-transformer/src/pages/index.js index ccbb74797451b..f06e7e499133b 100644 --- a/examples/using-react-docgen-transformer/src/pages/index.js +++ b/examples/using-react-docgen-transformer/src/pages/index.js @@ -6,7 +6,7 @@ class IndexComponent extends React.Component { return (

Hello, world!

- +
) } From 9b280192e97f2135c488258d13b304fe21fbc00a Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 13:50:59 -0500 Subject: [PATCH 07/33] Tweaks --- .../src/components/Button/Button.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/using-react-docgen-transformer/src/components/Button/Button.js b/examples/using-react-docgen-transformer/src/components/Button/Button.js index 2407081416cd4..f82529f7c2008 100644 --- a/examples/using-react-docgen-transformer/src/components/Button/Button.js +++ b/examples/using-react-docgen-transformer/src/components/Button/Button.js @@ -11,26 +11,24 @@ const colors = { primary: `#A0CED9`, hover: `#92BCC6`, }, - [orange]: { primary: `#EAB69B`, hover: `#E8AF91`, }, - [green]: { primary: `#ADF7B6`, hover: `#9EE1A6`, }, } -const styles = ({ backgroundColor } = {}) => +const styles = ({ backgroundColor }) => css({ backgroundColor: colors[backgroundColor].primary, color: `rgba(36, 47, 60, 0.66)`, display: `inline-block`, fontSize: `18px`, padding: `16px 24px`, - minWidth: `278px`, + minWidth: `200px`, borderRadius: `3px`, border: 0, cursor: `pointer`, From ddabf3903914da33215c68d668fbc6889c777dee Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 17:23:22 -0500 Subject: [PATCH 08/33] Can query successfully --- .../gatsby-config.js | 16 ++++++++++++++++ .../using-react-docgen-transformer/package.json | 1 + 2 files changed, 17 insertions(+) create mode 100644 examples/using-react-docgen-transformer/gatsby-config.js diff --git a/examples/using-react-docgen-transformer/gatsby-config.js b/examples/using-react-docgen-transformer/gatsby-config.js new file mode 100644 index 0000000000000..2931c695c3b28 --- /dev/null +++ b/examples/using-react-docgen-transformer/gatsby-config.js @@ -0,0 +1,16 @@ +const path = require(`path`) + +module.exports = { + plugins: [ + { + resolve: `gatsby-source-filesystem`, + options: { + path: path.join(__dirname, `src/components`), + name: `components`, + }, + }, + { + resolve: `gatsby-transformer-react-docgen`, + }, + ], +} diff --git a/examples/using-react-docgen-transformer/package.json b/examples/using-react-docgen-transformer/package.json index 0eca26bf21a78..58b580e216504 100644 --- a/examples/using-react-docgen-transformer/package.json +++ b/examples/using-react-docgen-transformer/package.json @@ -6,6 +6,7 @@ "dependencies": { "gatsby": "latest", "gatsby-link": "latest", + "gatsby-source-filesystem": "^1.5.11", "gatsby-transformer-react-docgen": "^1.0.11", "glamor": "^2.20.40" }, From b663d4d7aa603eaa15fcaa4d6eae90111da7811e Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 17:47:47 -0500 Subject: [PATCH 09/33] Adds components and index --- .../gatsby-node.js | 58 +++++++++++++++++++ .../src/templates/component.js | 20 +++++++ .../src/templates/index.js | 10 ++++ 3 files changed, 88 insertions(+) create mode 100644 examples/using-react-docgen-transformer/gatsby-node.js create mode 100644 examples/using-react-docgen-transformer/src/templates/component.js create mode 100644 examples/using-react-docgen-transformer/src/templates/index.js diff --git a/examples/using-react-docgen-transformer/gatsby-node.js b/examples/using-react-docgen-transformer/gatsby-node.js new file mode 100644 index 0000000000000..5de9111c95580 --- /dev/null +++ b/examples/using-react-docgen-transformer/gatsby-node.js @@ -0,0 +1,58 @@ +const path = require(`path`) + +exports.createPages = ({ graphql, boundActionCreators }) => { + const { createPage } = boundActionCreators + + console.log(`creating pages`) + + return new Promise((resolve, reject) => { + resolve( + graphql(` + { + allComponentMetadata { + edges { + node { + displayName + } + } + } + } + `) + .then(result => { + if (result.errors) { + reject(new Error(result.errors)) + return + } + + const componentTemplate = path.resolve(`src/templates/component.js`) + const indexTemplate = path.resolve(`src/templates/index.js`) + const allComponents = result.data.allComponentMetadata.edges.map( + edge => edge.node.displayName + ) + + allComponents.forEach(displayName => { + createPage({ + path: `/components/${displayName.toLowerCase()}/`, + component: componentTemplate, + context: { + displayName, + allComponents, + }, + }) + }) + + createPage({ + path: `/components/`, + component: indexTemplate, + context: { + allComponents, + }, + }) + }) + .catch(err => { + console.log(err) + throw new Error(err) + }) + ) + }) +} diff --git a/examples/using-react-docgen-transformer/src/templates/component.js b/examples/using-react-docgen-transformer/src/templates/component.js new file mode 100644 index 0000000000000..3e3963daf1266 --- /dev/null +++ b/examples/using-react-docgen-transformer/src/templates/component.js @@ -0,0 +1,20 @@ +import React from "react" +import PropTypes from "prop-types" + +class ComponentTemplate extends React.Component { + render() { + const { displayName } = this.props.pathContext + + return ( +
+

{displayName}

+
+ ) + } +} + +ComponentTemplate.propTypes = { + data: PropTypes.object, +} + +export default ComponentTemplate diff --git a/examples/using-react-docgen-transformer/src/templates/index.js b/examples/using-react-docgen-transformer/src/templates/index.js new file mode 100644 index 0000000000000..76d0b512c682c --- /dev/null +++ b/examples/using-react-docgen-transformer/src/templates/index.js @@ -0,0 +1,10 @@ +import React from "react" + +class ComponentIndex extends React.Component { + render() { + console.log(this.props) + return
component index
+ } +} + +export default ComponentIndex From d795628e70e7fb1e162fd18a27fd54a82e9b32b6 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 17:48:25 -0500 Subject: [PATCH 10/33] Add prop types --- .../using-react-docgen-transformer/src/templates/component.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/using-react-docgen-transformer/src/templates/component.js b/examples/using-react-docgen-transformer/src/templates/component.js index 3e3963daf1266..2387da62db71d 100644 --- a/examples/using-react-docgen-transformer/src/templates/component.js +++ b/examples/using-react-docgen-transformer/src/templates/component.js @@ -14,7 +14,9 @@ class ComponentTemplate extends React.Component { } ComponentTemplate.propTypes = { - data: PropTypes.object, + pathContext: PropTypes.shape({ + displayName: PropTypes.string, + }), } export default ComponentTemplate From b5dd22087f36391ee52218c4a9c12139b4a07d49 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 18:49:00 -0500 Subject: [PATCH 11/33] Adds component index --- .../gatsby-node.js | 21 ++++++++++++------- .../src/pages/index.js | 11 ++++------ .../src/templates/index.js | 20 ++++++++++++++---- 3 files changed, 34 insertions(+), 18 deletions(-) diff --git a/examples/using-react-docgen-transformer/gatsby-node.js b/examples/using-react-docgen-transformer/gatsby-node.js index 5de9111c95580..16524e7c90ae3 100644 --- a/examples/using-react-docgen-transformer/gatsby-node.js +++ b/examples/using-react-docgen-transformer/gatsby-node.js @@ -27,17 +27,24 @@ exports.createPages = ({ graphql, boundActionCreators }) => { const componentTemplate = path.resolve(`src/templates/component.js`) const indexTemplate = path.resolve(`src/templates/index.js`) const allComponents = result.data.allComponentMetadata.edges.map( - edge => edge.node.displayName + edge => { + const { displayName } = edge.node + return { + displayName, + path: `/components/${displayName.toLowerCase()}/`, + } + } ) - allComponents.forEach(displayName => { + allComponents.forEach(data => { + const { path } = data + const context = Object.assign({}, data, { + allComponents, + }) createPage({ - path: `/components/${displayName.toLowerCase()}/`, + path, component: componentTemplate, - context: { - displayName, - allComponents, - }, + context, }) }) diff --git a/examples/using-react-docgen-transformer/src/pages/index.js b/examples/using-react-docgen-transformer/src/pages/index.js index f06e7e499133b..3d5814fa1286b 100644 --- a/examples/using-react-docgen-transformer/src/pages/index.js +++ b/examples/using-react-docgen-transformer/src/pages/index.js @@ -1,15 +1,12 @@ import React from "react" -import Button from "../components/Button" +import { Route, Redirect } from "react-router-dom" -class IndexComponent extends React.Component { +class Home extends React.Component { render() { return ( -
-

Hello, world!

- -
+ } /> ) } } -export default IndexComponent +export default Home diff --git a/examples/using-react-docgen-transformer/src/templates/index.js b/examples/using-react-docgen-transformer/src/templates/index.js index 76d0b512c682c..d56685f897ffd 100644 --- a/examples/using-react-docgen-transformer/src/templates/index.js +++ b/examples/using-react-docgen-transformer/src/templates/index.js @@ -1,10 +1,22 @@ import React from "react" +import GatsbyLink from "gatsby-link" -class ComponentIndex extends React.Component { +class IndexComponent extends React.Component { render() { - console.log(this.props) - return
component index
+ const { allComponents } = this.props.pathContext + return ( +
+

Hello, world!

+
    + {allComponents.map(({ displayName, path }, index) => ( +
  • + {displayName} +
    • + ))} +
+
+ ) } } -export default ComponentIndex +export default IndexComponent From b0eab2aaf58b2ca2924d7b511f7b4c6685091fb2 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 18:50:38 -0500 Subject: [PATCH 12/33] Link back to component index --- .../using-react-docgen-transformer/src/templates/component.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/using-react-docgen-transformer/src/templates/component.js b/examples/using-react-docgen-transformer/src/templates/component.js index 2387da62db71d..8e36455212a66 100644 --- a/examples/using-react-docgen-transformer/src/templates/component.js +++ b/examples/using-react-docgen-transformer/src/templates/component.js @@ -1,5 +1,6 @@ import React from "react" import PropTypes from "prop-types" +import GatsbyLink from "gatsby-link" class ComponentTemplate extends React.Component { render() { @@ -8,6 +9,9 @@ class ComponentTemplate extends React.Component { return (

{displayName}

+

+ [index] +

) } From d1c64eeaeada3ef857ff9dfb52b20edf07186050 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 19:15:49 -0500 Subject: [PATCH 13/33] Showing props / methods --- .../gatsby-node.js | 23 +++++++++----- .../src/templates/component.js | 30 ++++++++++++++++++- 2 files changed, 45 insertions(+), 8 deletions(-) diff --git a/examples/using-react-docgen-transformer/gatsby-node.js b/examples/using-react-docgen-transformer/gatsby-node.js index 16524e7c90ae3..1b5a36ac97caf 100644 --- a/examples/using-react-docgen-transformer/gatsby-node.js +++ b/examples/using-react-docgen-transformer/gatsby-node.js @@ -13,6 +13,18 @@ exports.createPages = ({ graphql, boundActionCreators }) => { edges { node { displayName + props { + name + type { + value + raw + name + } + description { + text + } + required + } } } } @@ -27,13 +39,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => { const componentTemplate = path.resolve(`src/templates/component.js`) const indexTemplate = path.resolve(`src/templates/index.js`) const allComponents = result.data.allComponentMetadata.edges.map( - edge => { - const { displayName } = edge.node - return { - displayName, - path: `/components/${displayName.toLowerCase()}/`, - } - } + edge => + Object.assign({}, edge.node, { + path: `/components/${edge.node.displayName.toLowerCase()}/`, + }) ) allComponents.forEach(data => { diff --git a/examples/using-react-docgen-transformer/src/templates/component.js b/examples/using-react-docgen-transformer/src/templates/component.js index 8e36455212a66..d006f25ed5d69 100644 --- a/examples/using-react-docgen-transformer/src/templates/component.js +++ b/examples/using-react-docgen-transformer/src/templates/component.js @@ -4,11 +4,38 @@ import GatsbyLink from "gatsby-link" class ComponentTemplate extends React.Component { render() { - const { displayName } = this.props.pathContext + const { displayName, props } = this.props.pathContext return (

{displayName}

+

Props/Methods

+
    + {props.map(({ name, description, type, required }, index) => ( +
  • +

    + + {name} + +

    +
      +
    • +

      {description.text}

      +
      • +
    • +

      + Type: {type.name} +

      +
      • +
    • +

      + Required: {String(required)} +

      +
      • +
    +
    • + ))} +

[index]

@@ -20,6 +47,7 @@ class ComponentTemplate extends React.Component { ComponentTemplate.propTypes = { pathContext: PropTypes.shape({ displayName: PropTypes.string, + props: PropTypes.array, }), } From 7a493d92077990637a97553d8280628a82c775dc Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Fri, 15 Dec 2017 19:22:31 -0500 Subject: [PATCH 14/33] Add size prop to Button --- .../src/components/Button/Button.js | 35 +++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/examples/using-react-docgen-transformer/src/components/Button/Button.js b/examples/using-react-docgen-transformer/src/components/Button/Button.js index f82529f7c2008..845fe5fe252ce 100644 --- a/examples/using-react-docgen-transformer/src/components/Button/Button.js +++ b/examples/using-react-docgen-transformer/src/components/Button/Button.js @@ -21,14 +21,34 @@ const colors = { }, } -const styles = ({ backgroundColor }) => +const sm = `sm` +const md = `md` +const lg = `lg` + +const sizes = { + [sm]: { + fontSize: `14px`, + padding: `12px 20px`, + minWidth: `160px`, + }, + [md]: { + fontSize: `18px`, + padding: `16px 24px`, + minWidth: `200px`, + }, + [lg]: { + fontSize: `22px`, + padding: `20px 28px`, + minWidth: `260px`, + }, +} + +const styles = ({ backgroundColor, size }) => css({ backgroundColor: colors[backgroundColor].primary, + ...sizes[size], color: `rgba(36, 47, 60, 0.66)`, display: `inline-block`, - fontSize: `18px`, - padding: `16px 24px`, - minWidth: `200px`, borderRadius: `3px`, border: 0, cursor: `pointer`, @@ -37,17 +57,20 @@ const styles = ({ backgroundColor }) => }, }) -const Button = ({ backgroundColor, ...rest }) => ( - ``` -Colors are configurable +Colors are configurable. ```
@@ -13,3 +13,13 @@ Colors are configurable
``` + +Sizes are also configurable. + +``` +
+
+
+
+
+``` From d9ceacadef0b9efeba9dd800b90a6ac1e2e784a0 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Sat, 16 Dec 2017 15:15:34 -0500 Subject: [PATCH 23/33] Sets up component index --- .../using-react-docgen-transformer/src/components/index.js | 1 + .../templates/components/ComponentPreview/ComponentPreview.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) create mode 100644 examples/using-react-docgen-transformer/src/components/index.js diff --git a/examples/using-react-docgen-transformer/src/components/index.js b/examples/using-react-docgen-transformer/src/components/index.js new file mode 100644 index 0000000000000..ae0694c99e64c --- /dev/null +++ b/examples/using-react-docgen-transformer/src/components/index.js @@ -0,0 +1 @@ +export { default as Button } from "./Button" diff --git a/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js b/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js index 03f3628131e0c..48725e82b5892 100644 --- a/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js +++ b/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js @@ -2,12 +2,12 @@ import React from "react" import PropTypes from "prop-types" import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live" -import Button from "../../../components/Button" +import * as components from "../../../components" class ComponentPreview extends React.Component { render() { return ( - + From cb6864b5fa326f3afa8551ba8d5bd35a283914d3 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Sat, 16 Dec 2017 15:55:04 -0500 Subject: [PATCH 24/33] Writes dyanmic component index to the cache --- .../gatsby-node.js | 19 +++++++++++++++++++ .../package.json | 1 + .../src/components/index.js | 1 - .../ComponentPreview/ComponentPreview.js | 2 +- 4 files changed, 21 insertions(+), 2 deletions(-) delete mode 100644 examples/using-react-docgen-transformer/src/components/index.js diff --git a/examples/using-react-docgen-transformer/gatsby-node.js b/examples/using-react-docgen-transformer/gatsby-node.js index 708986c09cf0f..423041f188e36 100644 --- a/examples/using-react-docgen-transformer/gatsby-node.js +++ b/examples/using-react-docgen-transformer/gatsby-node.js @@ -1,4 +1,6 @@ const path = require(`path`) +const fs = require(`fs`) +const appRootDir = require(`app-root-dir`).get() const componentTemplate = path.resolve(`src/templates/component.js`) const indexTemplate = path.resolve(`src/templates/index.js`) @@ -14,6 +16,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { allComponentMetadata { edges { node { + id displayName props { name @@ -62,6 +65,22 @@ exports.createPages = ({ graphql, boundActionCreators }) => { }) ) + const exportFileContents = + allComponents + .reduce((accumulator, { id, displayName }) => { + const absolutePath = id.replace(/ absPath of.*$/, ``) + accumulator.push( + `export { default as ${displayName} } from "${absolutePath}"` + ) + return accumulator + }, []) + .join(`\n`) + `\n` + + fs.writeFileSync( + path.join(appRootDir, `.cache/components.js`), + exportFileContents + ) + allComponents.forEach(data => { const { path } = data const context = Object.assign({}, data, { diff --git a/examples/using-react-docgen-transformer/package.json b/examples/using-react-docgen-transformer/package.json index 3d1b4d6328d70..445b11f4d17ec 100644 --- a/examples/using-react-docgen-transformer/package.json +++ b/examples/using-react-docgen-transformer/package.json @@ -4,6 +4,7 @@ "description": "Gatsby example site using using-react-docgen-transformer", "author": "scott.eckenthal@gmail.com", "dependencies": { + "app-root-dir": "^1.0.2", "gatsby": "latest", "gatsby-link": "latest", "gatsby-source-filesystem": "^1.5.11", diff --git a/examples/using-react-docgen-transformer/src/components/index.js b/examples/using-react-docgen-transformer/src/components/index.js deleted file mode 100644 index ae0694c99e64c..0000000000000 --- a/examples/using-react-docgen-transformer/src/components/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Button } from "./Button" diff --git a/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js b/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js index 48725e82b5892..fcab3b3786b03 100644 --- a/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js +++ b/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js @@ -2,7 +2,7 @@ import React from "react" import PropTypes from "prop-types" import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live" -import * as components from "../../../components" +import * as components from "../../../../.cache/components" class ComponentPreview extends React.Component { render() { From 66c61c48a3bfb7872c07f3bcb9b60349697aa093 Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Sat, 16 Dec 2017 16:20:16 -0500 Subject: [PATCH 25/33] Renaming for clarity --- examples/using-react-docgen-transformer/gatsby-node.js | 10 ++++++---- .../{component.js => ComponentPage/ComponentPage.js} | 6 +++--- .../components/ComponentPreview/ComponentPreview.js | 2 +- .../components/ComponentPreview/index.js | 0 .../{ => ComponentPage}/components/Example/Example.js | 0 .../{ => ComponentPage}/components/Example/index.js | 0 .../src/templates/ComponentPage/index.js | 1 + .../src/templates/{index.js => TOC/TOC.js} | 6 +++--- .../src/templates/TOC/index.js | 1 + 9 files changed, 15 insertions(+), 11 deletions(-) rename examples/using-react-docgen-transformer/src/templates/{component.js => ComponentPage/ComponentPage.js} (91%) rename examples/using-react-docgen-transformer/src/templates/{ => ComponentPage}/components/ComponentPreview/ComponentPreview.js (88%) rename examples/using-react-docgen-transformer/src/templates/{ => ComponentPage}/components/ComponentPreview/index.js (100%) rename examples/using-react-docgen-transformer/src/templates/{ => ComponentPage}/components/Example/Example.js (100%) rename examples/using-react-docgen-transformer/src/templates/{ => ComponentPage}/components/Example/index.js (100%) create mode 100644 examples/using-react-docgen-transformer/src/templates/ComponentPage/index.js rename examples/using-react-docgen-transformer/src/templates/{index.js => TOC/TOC.js} (86%) create mode 100644 examples/using-react-docgen-transformer/src/templates/TOC/index.js diff --git a/examples/using-react-docgen-transformer/gatsby-node.js b/examples/using-react-docgen-transformer/gatsby-node.js index 423041f188e36..f92a7297db491 100644 --- a/examples/using-react-docgen-transformer/gatsby-node.js +++ b/examples/using-react-docgen-transformer/gatsby-node.js @@ -2,8 +2,10 @@ const path = require(`path`) const fs = require(`fs`) const appRootDir = require(`app-root-dir`).get() -const componentTemplate = path.resolve(`src/templates/component.js`) -const indexTemplate = path.resolve(`src/templates/index.js`) +const componentPageTemplate = path.resolve( + `src/templates/ComponentPage/index.js` +) +const tableOfContentsTemplate = path.resolve(`src/templates/TOC/index.js`) exports.createPages = ({ graphql, boundActionCreators }) => { const { createPage } = boundActionCreators @@ -88,14 +90,14 @@ exports.createPages = ({ graphql, boundActionCreators }) => { }) createPage({ path, - component: componentTemplate, + component: componentPageTemplate, context, }) }) createPage({ path: `/components/`, - component: indexTemplate, + component: tableOfContentsTemplate, context: { allComponents, }, diff --git a/examples/using-react-docgen-transformer/src/templates/component.js b/examples/using-react-docgen-transformer/src/templates/ComponentPage/ComponentPage.js similarity index 91% rename from examples/using-react-docgen-transformer/src/templates/component.js rename to examples/using-react-docgen-transformer/src/templates/ComponentPage/ComponentPage.js index 01cc5207cf93a..294776db1eb7c 100644 --- a/examples/using-react-docgen-transformer/src/templates/component.js +++ b/examples/using-react-docgen-transformer/src/templates/ComponentPage/ComponentPage.js @@ -4,7 +4,7 @@ import GatsbyLink from "gatsby-link" import Example from "./components/Example" -class ComponentTemplate extends React.Component { +class ComponentPage extends React.Component { render() { const { displayName, props, html } = this.props.pathContext @@ -47,7 +47,7 @@ class ComponentTemplate extends React.Component { } } -ComponentTemplate.propTypes = { +ComponentPage.propTypes = { pathContext: PropTypes.shape({ displayName: PropTypes.string, props: PropTypes.array, @@ -55,4 +55,4 @@ ComponentTemplate.propTypes = { }), } -export default ComponentTemplate +export default ComponentPage diff --git a/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js b/examples/using-react-docgen-transformer/src/templates/ComponentPage/components/ComponentPreview/ComponentPreview.js similarity index 88% rename from examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js rename to examples/using-react-docgen-transformer/src/templates/ComponentPage/components/ComponentPreview/ComponentPreview.js index fcab3b3786b03..58aeb421236dc 100644 --- a/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js +++ b/examples/using-react-docgen-transformer/src/templates/ComponentPage/components/ComponentPreview/ComponentPreview.js @@ -2,7 +2,7 @@ import React from "react" import PropTypes from "prop-types" import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live" -import * as components from "../../../../.cache/components" +import * as components from "../../../../../.cache/components" class ComponentPreview extends React.Component { render() { diff --git a/examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/index.js b/examples/using-react-docgen-transformer/src/templates/ComponentPage/components/ComponentPreview/index.js similarity index 100% rename from examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/index.js rename to examples/using-react-docgen-transformer/src/templates/ComponentPage/components/ComponentPreview/index.js diff --git a/examples/using-react-docgen-transformer/src/templates/components/Example/Example.js b/examples/using-react-docgen-transformer/src/templates/ComponentPage/components/Example/Example.js similarity index 100% rename from examples/using-react-docgen-transformer/src/templates/components/Example/Example.js rename to examples/using-react-docgen-transformer/src/templates/ComponentPage/components/Example/Example.js diff --git a/examples/using-react-docgen-transformer/src/templates/components/Example/index.js b/examples/using-react-docgen-transformer/src/templates/ComponentPage/components/Example/index.js similarity index 100% rename from examples/using-react-docgen-transformer/src/templates/components/Example/index.js rename to examples/using-react-docgen-transformer/src/templates/ComponentPage/components/Example/index.js diff --git a/examples/using-react-docgen-transformer/src/templates/ComponentPage/index.js b/examples/using-react-docgen-transformer/src/templates/ComponentPage/index.js new file mode 100644 index 0000000000000..a75e6920a0c86 --- /dev/null +++ b/examples/using-react-docgen-transformer/src/templates/ComponentPage/index.js @@ -0,0 +1 @@ +export { default } from "./ComponentPage" diff --git a/examples/using-react-docgen-transformer/src/templates/index.js b/examples/using-react-docgen-transformer/src/templates/TOC/TOC.js similarity index 86% rename from examples/using-react-docgen-transformer/src/templates/index.js rename to examples/using-react-docgen-transformer/src/templates/TOC/TOC.js index 8c03630ec30fe..3afd2d7853806 100644 --- a/examples/using-react-docgen-transformer/src/templates/index.js +++ b/examples/using-react-docgen-transformer/src/templates/TOC/TOC.js @@ -2,7 +2,7 @@ import React from "react" import PropTypes from "prop-types" import GatsbyLink from "gatsby-link" -class IndexComponent extends React.Component { +class TOC extends React.Component { render() { const { allComponents } = this.props.pathContext return ( @@ -20,7 +20,7 @@ class IndexComponent extends React.Component { } } -IndexComponent.propTypes = { +TOC.propTypes = { pathContext: PropTypes.shape({ allComponents: PropTypes.arrayOf( PropTypes.shape({ @@ -31,4 +31,4 @@ IndexComponent.propTypes = { }).isRequired, } -export default IndexComponent +export default TOC diff --git a/examples/using-react-docgen-transformer/src/templates/TOC/index.js b/examples/using-react-docgen-transformer/src/templates/TOC/index.js new file mode 100644 index 0000000000000..5991b1f3b5389 --- /dev/null +++ b/examples/using-react-docgen-transformer/src/templates/TOC/index.js @@ -0,0 +1 @@ +export { default } from "./TOC" From 437d183b3780e9b9b8cebe2e2986ec4886b0835a Mon Sep 17 00:00:00 2001 From: Scotty Eckenthal Date: Mon, 18 Dec 2017 09:35:17 -0500 Subject: [PATCH 26/33] Add description --- .../using-react-docgen-transformer/gatsby-node.js | 3 +++ .../src/components/Button/Button.js | 4 ++++ .../src/templates/ComponentPage/ComponentPage.js | 12 +++++++----- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/examples/using-react-docgen-transformer/gatsby-node.js b/examples/using-react-docgen-transformer/gatsby-node.js index f92a7297db491..3d4402edc5d23 100644 --- a/examples/using-react-docgen-transformer/gatsby-node.js +++ b/examples/using-react-docgen-transformer/gatsby-node.js @@ -20,6 +20,9 @@ exports.createPages = ({ graphql, boundActionCreators }) => { node { id displayName + description { + text + } props { name type { diff --git a/examples/using-react-docgen-transformer/src/components/Button/Button.js b/examples/using-react-docgen-transformer/src/components/Button/Button.js index 845fe5fe252ce..3c15fb7c59ac8 100644 --- a/examples/using-react-docgen-transformer/src/components/Button/Button.js +++ b/examples/using-react-docgen-transformer/src/components/Button/Button.js @@ -57,6 +57,10 @@ const styles = ({ backgroundColor, size }) => }, }) +/** + * The `