From 1f9a14e5ee51c96ff59c827c4dae56b28fefbdae Mon Sep 17 00:00:00 2001 From: dolevb13 Date: Tue, 27 Apr 2021 10:31:47 +0300 Subject: [PATCH 1/2] Generated props table using react-docgen --- docgen-loader.js | 12 ++++ package-lock.json | 57 +++++++++++++++++++ package.json | 1 + src/components/PropsTable/PropsTable.jsx | 38 +++++++++++++ src/components/PropsTable/PropsTable.scss | 8 +++ src/components/index.js | 3 +- .../docs/components/collapsible/readme.mdx | 9 +-- 7 files changed, 120 insertions(+), 8 deletions(-) create mode 100644 docgen-loader.js create mode 100644 src/components/PropsTable/PropsTable.jsx create mode 100644 src/components/PropsTable/PropsTable.scss diff --git a/docgen-loader.js b/docgen-loader.js new file mode 100644 index 0000000..bdc922b --- /dev/null +++ b/docgen-loader.js @@ -0,0 +1,12 @@ +const {parse} = require('react-docgen'); + +const getProps = source => { + const before = `const MyComponent = () =>
\n`; + source = source.replace('export const ', before + 'MyComponent.'); + source = source.replace('export const ', 'MyComponent.'); + source += '\nexport default MyComponent;'; + const parseOutput = parse(source); + return `export default ${JSON.stringify(parseOutput)}`; +} + +module.exports = getProps; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f9e02fe..d675103 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8957,6 +8957,12 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "min-indent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", + "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true + }, "mini-create-react-context": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz", @@ -9138,6 +9144,15 @@ } } }, + "node-dir": { + "version": "0.1.17", + "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz", + "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=", + "dev": true, + "requires": { + "minimatch": "^3.0.2" + } + }, "node-fetch": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", @@ -10909,6 +10924,39 @@ "prop-types": "^15.6.2" } }, + "react-docgen": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.3.1.tgz", + "integrity": "sha512-YG7YujVTwlLslr2Ny8nQiUfbBuEwKsLHJdQTSdEga1eY/nRFh/7LjCWUn6ogYhu2WDKg4z+6W/BJtUi+DPUIlA==", + "dev": true, + "requires": { + "@babel/core": "^7.7.5", + "@babel/runtime": "^7.7.6", + "ast-types": "^0.14.2", + "commander": "^2.19.0", + "doctrine": "^3.0.0", + "neo-async": "^2.6.1", + "node-dir": "^0.1.10", + "strip-indent": "^3.0.0" + }, + "dependencies": { + "ast-types": { + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz", + "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==", + "dev": true, + "requires": { + "tslib": "^2.0.1" + } + }, + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==", + "dev": true + } + } + }, "react-dom": { "version": "16.14.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", @@ -12518,6 +12566,15 @@ "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==", "dev": true }, + "strip-indent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, + "requires": { + "min-indent": "^1.0.0" + } + }, "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", diff --git a/package.json b/package.json index 5135b7a..cf64f65 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "puppeteer": "9.0.0", "puppeteer-core": "8.0.0", "raw-loader": "4.0.2", + "react-docgen": "^5.3.1", "sass": "1.32.8", "sass-loader": "11.0.1", "sass-resources-loader": "2.2.1", diff --git a/src/components/PropsTable/PropsTable.jsx b/src/components/PropsTable/PropsTable.jsx new file mode 100644 index 0000000..f351f4b --- /dev/null +++ b/src/components/PropsTable/PropsTable.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import props from '!../../../docgen-loader!../../../../webrix/src/components/Collapsible/Collapsible.props.js'; +import './PropsTable.scss' + +const PropsTable = () => { + + const getDefaultValue = value => { + const defaultValue = value.defaultValue ? value.defaultValue.value : null; + return defaultValue === 'noop' ? '() => null' : defaultValue; + } + + return ( + + + + + + + + + + + {Object.entries(props.props).map((value, index) => { + return ( + + + + + ) + } + )} + + +
NameTypeDefaultDescription
{value[0]}
{value[1].type.name}
{getDefaultValue(value[1])}
{value[1].description}
+ ) +} + +export default PropsTable; \ No newline at end of file diff --git a/src/components/PropsTable/PropsTable.scss b/src/components/PropsTable/PropsTable.scss new file mode 100644 index 0000000..3b2c0bf --- /dev/null +++ b/src/components/PropsTable/PropsTable.scss @@ -0,0 +1,8 @@ +.props-table pre { + background-color: rgb(246, 248, 250); + display: inline-block; + white-space: pre-line; + padding: 0 7px; + margin: 0; + font-size: .8em; +} \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index df51304..cdbf9dd 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -9,4 +9,5 @@ export {default as Highlighter} from './Highlighter/Highlighter'; export {default as Loader} from './Loader/Loader'; export {default as Preview} from './Preview/Preview'; export {default as PreviewList} from './Preview/PreviewList'; -export {default as UnderConstruction} from './UnderConstruction/UnderConstruction'; \ No newline at end of file +export {default as UnderConstruction} from './UnderConstruction/UnderConstruction'; +export {default as PropsTable} from './PropsTable/PropsTable'; \ No newline at end of file diff --git a/src/content/docs/components/collapsible/readme.mdx b/src/content/docs/components/collapsible/readme.mdx index 5a17e03..5cbd81b 100644 --- a/src/content/docs/components/collapsible/readme.mdx +++ b/src/content/docs/components/collapsible/readme.mdx @@ -1,4 +1,4 @@ -import {Example, PreviewList} from 'components'; +import {Example, PreviewList, PropsTable} from 'components'; The `` component allows you to collapse/expand an element with arbitrary content height and apply a nice transition to it. This is a challenge to achieve with CSS only, since it's impossible @@ -46,9 +46,4 @@ const {Collapsible} = Webrix.components; ### Props -Name|Type|Default|Description ----|---|---|--- -`children`|node|required|Specifies the content to be shown. -`expanded`|boolean|`false`|Specifies whether the content should be shown or not. -`onTransitionEnd`|func|`() => null`|Specifies a function to be called when the *height* transition ends, when expanding or collapsing. Receives the event object as an argument. -`duration`|number|`300`|Specifies the transition duration. \ No newline at end of file + \ No newline at end of file From aa340d3537c4208b74c26b419d7c11eddfa4d31d Mon Sep 17 00:00:00 2001 From: dolevb13 Date: Tue, 27 Apr 2021 10:31:47 +0300 Subject: [PATCH 2/2] Generated props table using react-docs Added PropsTable --- docgen-loader.js | 12 ++++ package-lock.json | 57 +++++++++++++++++++ src/components/PropsTable/PropsTable.jsx | 38 +++++++++++++ src/components/PropsTable/PropsTable.scss | 8 +++ src/components/index.js | 3 +- .../docs/components/collapsible/readme.mdx | 9 +-- 6 files changed, 119 insertions(+), 8 deletions(-) create mode 100644 docgen-loader.js create mode 100644 src/components/PropsTable/PropsTable.jsx create mode 100644 src/components/PropsTable/PropsTable.scss diff --git a/docgen-loader.js b/docgen-loader.js new file mode 100644 index 0000000..bdc922b --- /dev/null +++ b/docgen-loader.js @@ -0,0 +1,12 @@ +const {parse} = require('react-docgen'); + +const getProps = source => { + const before = `const MyComponent = () =>
\n`; + source = source.replace('export const ', before + 'MyComponent.'); + source = source.replace('export const ', 'MyComponent.'); + source += '\nexport default MyComponent;'; + const parseOutput = parse(source); + return `export default ${JSON.stringify(parseOutput)}`; +} + +module.exports = getProps; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c9bad76..53fbb02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10798,6 +10798,12 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "min-indent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", + "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true + }, "mini-create-react-context": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz", @@ -11007,6 +11013,15 @@ } } }, + "node-dir": { + "version": "0.1.17", + "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz", + "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=", + "dev": true, + "requires": { + "minimatch": "^3.0.2" + } + }, "node-fetch": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", @@ -12785,6 +12800,39 @@ "object-assign": "^4.1.1" } }, + "react-docgen": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.3.1.tgz", + "integrity": "sha512-YG7YujVTwlLslr2Ny8nQiUfbBuEwKsLHJdQTSdEga1eY/nRFh/7LjCWUn6ogYhu2WDKg4z+6W/BJtUi+DPUIlA==", + "dev": true, + "requires": { + "@babel/core": "^7.7.5", + "@babel/runtime": "^7.7.6", + "ast-types": "^0.14.2", + "commander": "^2.19.0", + "doctrine": "^3.0.0", + "neo-async": "^2.6.1", + "node-dir": "^0.1.10", + "strip-indent": "^3.0.0" + }, + "dependencies": { + "ast-types": { + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz", + "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==", + "dev": true, + "requires": { + "tslib": "^2.0.1" + } + }, + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==", + "dev": true + } + } + }, "react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", @@ -14543,6 +14591,15 @@ "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==", "dev": true }, + "strip-indent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, + "requires": { + "min-indent": "^1.0.0" + } + }, "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", diff --git a/src/components/PropsTable/PropsTable.jsx b/src/components/PropsTable/PropsTable.jsx new file mode 100644 index 0000000..f351f4b --- /dev/null +++ b/src/components/PropsTable/PropsTable.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import props from '!../../../docgen-loader!../../../../webrix/src/components/Collapsible/Collapsible.props.js'; +import './PropsTable.scss' + +const PropsTable = () => { + + const getDefaultValue = value => { + const defaultValue = value.defaultValue ? value.defaultValue.value : null; + return defaultValue === 'noop' ? '() => null' : defaultValue; + } + + return ( + + + + + + + + + + + {Object.entries(props.props).map((value, index) => { + return ( + + + + + ) + } + )} + + +
NameTypeDefaultDescription
{value[0]}
{value[1].type.name}
{getDefaultValue(value[1])}
{value[1].description}
+ ) +} + +export default PropsTable; \ No newline at end of file diff --git a/src/components/PropsTable/PropsTable.scss b/src/components/PropsTable/PropsTable.scss new file mode 100644 index 0000000..3b2c0bf --- /dev/null +++ b/src/components/PropsTable/PropsTable.scss @@ -0,0 +1,8 @@ +.props-table pre { + background-color: rgb(246, 248, 250); + display: inline-block; + white-space: pre-line; + padding: 0 7px; + margin: 0; + font-size: .8em; +} \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index df51304..cdbf9dd 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -9,4 +9,5 @@ export {default as Highlighter} from './Highlighter/Highlighter'; export {default as Loader} from './Loader/Loader'; export {default as Preview} from './Preview/Preview'; export {default as PreviewList} from './Preview/PreviewList'; -export {default as UnderConstruction} from './UnderConstruction/UnderConstruction'; \ No newline at end of file +export {default as UnderConstruction} from './UnderConstruction/UnderConstruction'; +export {default as PropsTable} from './PropsTable/PropsTable'; \ No newline at end of file diff --git a/src/content/docs/components/collapsible/readme.mdx b/src/content/docs/components/collapsible/readme.mdx index 5a17e03..5cbd81b 100644 --- a/src/content/docs/components/collapsible/readme.mdx +++ b/src/content/docs/components/collapsible/readme.mdx @@ -1,4 +1,4 @@ -import {Example, PreviewList} from 'components'; +import {Example, PreviewList, PropsTable} from 'components'; The `` component allows you to collapse/expand an element with arbitrary content height and apply a nice transition to it. This is a challenge to achieve with CSS only, since it's impossible @@ -46,9 +46,4 @@ const {Collapsible} = Webrix.components; ### Props -Name|Type|Default|Description ----|---|---|--- -`children`|node|required|Specifies the content to be shown. -`expanded`|boolean|`false`|Specifies whether the content should be shown or not. -`onTransitionEnd`|func|`() => null`|Specifies a function to be called when the *height* transition ends, when expanding or collapsing. Receives the event object as an argument. -`duration`|number|`300`|Specifies the transition duration. \ No newline at end of file + \ No newline at end of file