Skip to content

Commit

Permalink
fix(docs): Add JSON view component for complex prop type structures.
Browse files Browse the repository at this point in the history
  • Loading branch information
Hyperkid123 committed Jan 28, 2021
1 parent 27b2958 commit cb5d74e
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,14 @@ const TextInputProps = {

ConditionalFilter.propTypes = {
hideLabel: PropTypes.bool,
/**
* @extensive
*/
items: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
label: PropTypes.node,
value: PropTypes.string,
type: PropTypes.oneOf(Object.values(conditionalFilterType)),
type: PropTypes.oneOf([ 'text', 'checkbox', 'radio', 'custom', 'group' ]),
filterValues: PropTypes.oneOfType([ PropTypes.shape(TextInputProps), PropTypes.shape({
...TextInputProps,
value: PropTypes.oneOfType([
Expand Down
33 changes: 33 additions & 0 deletions packages/docs/components/extensive-prop/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import dynamic from 'next/dynamic';
import { createUseStyles } from 'react-jss';

const ReactJson = dynamic(
() => import('react-json-view'),
{ ssr: false }
);

const useStyles = createUseStyles({
jsonContainer: {
backgroundColor: '#031a16',
borderRadius: 8,
padding: 16
}
});

const ExtensiveProp = ({ data }) => {
const classes = useStyles();
const { required, description, defaultValue, ...src } = JSON.parse(data);
return (
<div className={classes.jsonContainer}>
<ReactJson className="foo" theme="apathy" collapsed={3} src={src} />
</div>
);
};

ExtensiveProp.propTypes = {
data: PropTypes.any
};

export default ExtensiveProp;
4 changes: 3 additions & 1 deletion packages/docs/components/layout/mdx-provider-components.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import { Title, Card, CardBody } from '@patternfly/react-core';

const H1 = ({ className, ...props }) => <Title className="pf-u-mb-lg" headingLevel="h1" {...props} />;
const H2 = ({ className, ...props }) => <Title className="pf-u-mb-lg" headingLevel="h2" {...props} />;
const Table = props => <Card><CardBody><table className="pf-c-table pf-m-grid-md" {...props} /></CardBody></Card>;
const H3 = ({ className, ...props }) => <Title className="pf-u-mb-lg" headingLevel="h2" {...props} />;
const Table = props => <Card className="pf-u-mb-lg"><CardBody><table className="pf-c-table pf-m-grid-md" {...props} /></CardBody></Card>;

const components = {
h1: H1,
h2: H2,
h3: H3,
table: Table
};

Expand Down
45 changes: 41 additions & 4 deletions packages/docs/docs-generator.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable max-len */
const path = require('path');
const glob = require('glob');
const fse = require('fs-extra');
Expand Down Expand Up @@ -53,7 +54,11 @@ function shapeGenerator({ value }) {
return JSON.stringify(shape);
}

function getPropType(propType, file) {
function getPropType(propType, file, { description, name }) {
if (description && description.includes('@extensive')) {
return `Check the full prop type definition [here](#${name}).`;
}

if (typeof propType === 'string') {
return propType;
}
Expand Down Expand Up @@ -91,24 +96,53 @@ function generateComponentDescription(description) {
return { value: description };
}

function generateMDImports({ examples, description }) {
function generateMDImports({ examples, description, extensiveProps }) {
let imports = '';
if (examples.length > 0) {
imports = imports.concat(`import ExampleComponent from '@docs/example-component'`, '\n');
}

if (extensiveProps.length > 0) {
imports = imports.concat(`import ExtensiveProp from '@docs/extensive-prop'`, '\n');
}

if (description.deprecated) {
imports = imports.concat(`import DeprecationWarn from '@docs/deprecation-warn'`, '\n\n', '<DeprecationWarn />', '\n');
}

return imports;
}

function generatePropDescription(prop) {
if (!prop.description) {
return '';
}

if (prop.description && prop.description.includes('@extensive')) {
return prop.description.replace('@extensive', '');
}

return prop.description;
}

function getExtensiveProps(props, file) {
if (!props) {
return [];
}

return Object.entries(props)
.filter(([ , value ]) => value.description && value.description.includes('@extensive')).map(([ name, value ]) => {
return { name, value: getPropType(value, file, {}) };
});
}

async function generateMD(file, API) {
const name = file.split('/').pop().replace('.js', '');
const examples = glob.sync(path.resolve(__dirname, `./examples/${name}/*.js`));
const description = generateComponentDescription(API.description);
const imports = generateMDImports({ examples, description });
const extensiveProps = getExtensiveProps(API.props, file);
const imports = generateMDImports({ examples, description, extensiveProps });

const content = `${imports}
# ${API.displayName}${description.value ? `
${description.value}` : ''}${examples.length > 0 ? `
Expand All @@ -121,9 +155,12 @@ ${API.props ? `## Props
|name|type|default|description|
|----|----|-------|-----------|
${Object.entries(API.props).map(([ name, value ]) => `|${name}${value.required ? '*' : ''}|${getPropType(value.type, file)}|${generateDefaultValue(value)}|${value.description ? value.description : ''}|
${Object.entries(API.props).map(([ name, value ]) => `|${name}${value.required ? '*' : ''}|${getPropType(value.type, file, { name, ...value })}|${generateDefaultValue(value)}|${generatePropDescription(value)}|
`).join('')}` : '\n'}
${extensiveProps.map((data) => `### <a name="${data.name}"></a>${data.name}
<ExtensiveProp data={${JSON.stringify(data.value)}} />`)}
`;
return fse.writeFile(`${componentsDest}/${name}.md`, content);
}
Expand Down
3 changes: 2 additions & 1 deletion packages/docs/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ module.exports = withMDX(withCSS({
...config.resolve.alias,
'@docs/example-component': path.resolve(__dirname, './components/example-component'),
'@docs/examples': path.resolve(__dirname, './examples'),
'@docs/deprecation-warn': path.resolve(__dirname, './components/deprecation-warn')
'@docs/deprecation-warn': path.resolve(__dirname, './components/deprecation-warn'),
'@docs/extensive-prop': path.resolve(__dirname, './components/extensive-prop')
};

config.module.rules.push({
Expand Down
1 change: 1 addition & 0 deletions packages/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"prism-react-renderer": "^1.1.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-json-view": "^1.19.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5"
Expand Down

0 comments on commit cb5d74e

Please sign in to comment.