Generated props table using react-docgen

docgen-loader.js

@@ -0,0 +1,12 @@
+const {parse} = require('react-docgen');
+
+const getProps = source => {
+    const before = `const MyComponent = () => <div/>\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;

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"
   }
 }

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 (
+        <table className='props-table'>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th>Default</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+            {Object.entries(props.props).map((value, index) => {
+                return (<tr key={index}>
+                    <td><pre>{value[0]}</pre></td>
+                    <td>{value[1].type.name}</td>
+                    <td><pre>{getDefaultValue(value[1])}</pre></td>
+                    <td>{value[1].description}</td>
+                </tr>)
+            }
+            )}
+
+            </tbody>
+        </table>
+    )
+}
+
+export default PropsTable;

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;
+}

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';
+export {default as UnderConstruction} from './UnderConstruction/UnderConstruction';
+export {default as PropsTable} from './PropsTable/PropsTable';

src/content/docs/components/collapsible/readme.mdx

@@ -1,4 +1,4 @@
-import {Example, PreviewList} from 'components';
+import {Example, PreviewList, PropsTable} from 'components';
 
 The `<Collapsible/>` 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.
+<PropsTable />