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..72507db 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,72 @@ "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-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 +14624,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 793c0f0..cf64f65 100644 --- a/package.json +++ b/package.json @@ -12,36 +12,37 @@ "bugs": "https://github.com/open-amdocs/webrix-docs/issues", "homepage": "https://webrix.amdocs.com", "devDependencies": { - "@babel/cli": "7.13.16", - "@babel/core": "7.14.0", - "@babel/plugin-proposal-class-properties": "7.13.0", - "@babel/plugin-proposal-export-default-from": "7.12.13", + "@babel/cli": "7.12.10", + "@babel/core": "7.12.10", + "@babel/plugin-proposal-class-properties": "7.12.1", + "@babel/plugin-proposal-export-default-from": "7.12.1", "@babel/plugin-syntax-dynamic-import": "7.8.3", - "@babel/plugin-transform-runtime": "7.13.15", - "@babel/preset-env": "7.14.0", - "@babel/preset-react": "7.13.13", + "@babel/plugin-transform-runtime": "7.12.10", + "@babel/preset-env": "7.12.11", + "@babel/preset-react": "7.12.10", "@mdx-js/loader": "1.6.22", "@mdx-js/react": "1.6.22", - "aws-sdk": "2.896.0", + "aws-sdk": "2.289.0", "babel-eslint": "10.1.0", "babel-loader": "8.2.2", "chrome-aws-lambda": "8.0.2", "css-loader": "5.2.4", - "eslint": "7.25.0", - "eslint-plugin-react": "7.23.2", + "eslint": "7.18.0", + "eslint-plugin-react": "7.22.0", "eslint-plugin-react-hooks": "4.2.0", "file-loader": "6.2.0", "html-webpack-plugin": "5.3.1", - "mime-types": "2.1.30", + "mime-types": "2.1.29", "proxy-agent": "4.0.1", "puppeteer": "9.0.0", "puppeteer-core": "8.0.0", "raw-loader": "4.0.2", - "sass": "1.32.12", + "react-docgen": "^5.3.1", + "sass": "1.32.8", "sass-loader": "11.0.1", "sass-resources-loader": "2.2.1", "style-loader": "2.0.0", - "webpack": "5.36.1", + "webpack": "5.35.0", "webpack-cli": "4.6.0", "webpack-dev-server": "3.11.2", "worker-loader": "3.0.8" @@ -55,19 +56,19 @@ "ssr": "node ./ssr" }, "dependencies": { - "@babel/runtime": "7.14.0", + "@babel/runtime": "7.12.5", "@babylonjs/core": "4.1.0", "@babylonjs/loaders": "4.1.0", - "classnames": "2.3.1", - "codesandbox": "2.2.3", + "classnames": "2.2.6", + "codesandbox": "2.2.1", "oimo": "1.0.9", - "prism-react-renderer": "1.2.0", - "react": "17.0.2", - "react-dom": "17.0.2", + "prism-react-renderer": "1.1.1", + "react": "16.14.0", + "react-dom": "16.14.0", "react-helmet": "6.1.0", - "react-icons": "4.2.0", + "react-icons": "4.1.0", "react-router-dom": "5.2.0", "prop-types": "15.7.2", - "webrix": "1.3.0" + "webrix": "1.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 274d324..3794693 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -10,4 +10,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