fix(docs): Add link reference for nexted prop types.

Hyperkid123 · Jan 28, 2021 · d7b7131 · d7b7131
1 parent 6cd885a
commit d7b7131
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/packages/components/src/PrimaryToolbar/PrimaryToolbar.js b/packages/components/src/PrimaryToolbar/PrimaryToolbar.js
@@ -141,12 +141,18 @@ PrimaryToolbar.propTypes = {
     id: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
     className: PropTypes.string,
     toggleIsExpanded: PropTypes.func,
+    /** @reference [BulkSelect props](/components/BulkSelect) */
     bulkSelect: PropTypes.shape(BulkSelect.propTypes),
+    /** @reference [ConditionalFilter props](/components/ConditionalFilter) */
     filterConfig: PropTypes.shape(ConditionalFilter.propTypes),
     dedicatedAction: PropTypes.node,
+    /** @reference [PF pagination props](https://www.patternfly.org/v4/components/pagination#pagination) */
     pagination: PropTypes.shape(Pagination.propTypes),
+    /** @reference [SortBy props](/components/SortBy) */
     sortByConfig: PropTypes.shape(SortBy.propTypes),
+    /** @reference [DownloadButton props](/components/DownloadButton) */
     exportConfig: PropTypes.shape(DownloadButton.propTypes),
+    /** @reference [FilterChips props](/components/FilterChips) */
     activeFiltersConfig: PropTypes.shape(FilterChips.propTypes),
     children: PropTypes.node,
     actionsConfig: PropTypes.shape({

diff --git a/packages/docs/docs-generator.js b/packages/docs/docs-generator.js
@@ -27,7 +27,8 @@ const propTypeGeneratorMapper = {
     instanceOf: ({ value }) => value,
     enum: enumGenerator,
     custom: ({ raw }) => raw,
-    object: primitiveGenerator
+    object: primitiveGenerator,
+    undefined: primitiveGenerator
 };
 
 function primitiveGenerator({ name }) {
@@ -43,22 +44,26 @@ function unionGenerator({ value }) {
 }
 
 function arrayOfGenerator({ value }) {
-    return `Array of: ${propTypeGeneratorMapper[value.name](value)}`;
+    return `<code>Array of:</code> ${propTypeGeneratorMapper[value.name](value)}`;
 }
 
 function shapeGenerator({ value }) {
     const shape = Object.entries(value).reduce((acc, [ name, value ]) => ({
         ...acc,
         [`${name}${value.required ? '*' : ''}`]: propTypeGeneratorMapper[value.name](value)
     }), {});
-    return JSON.stringify(shape);
+    return `<code>${JSON.stringify(shape).replace(/("|\\")/gm, '').replace(/:/gm, ': ').replace(/,/gm, ', ')}</code>`;
 }
 
 function getPropType(propType, file, { description, name }) {
     if (description && description.includes('@extensive')) {
         return `Check the full prop type definition [here](#${name}).`;
     }
 
+    if (description && description.includes('@reference')) {
+        return `<code>Object</code>`;
+    }
+
     if (typeof propType === 'string') {
         return propType;
     }
@@ -74,7 +79,7 @@ function getPropType(propType, file, { description, name }) {
         }
     }
 
-    return JSON.stringify(propType);
+    return typeof propType === 'object' ? `<code>${JSON.stringify(propType)}</code>` : `<code>${propType}</code>`;
 }
 
 function generateDefaultValue(value) {
@@ -86,14 +91,13 @@ function generateDefaultValue(value) {
 }
 
 function generateComponentDescription(description) {
+    const result = { value: description };
     if (description.includes('@deprecated')) {
-        return {
-            deprecated: true,
-            value: description.replace('@deprecated', '')
-        };
+        result.deprecated = true;
+        result.value = result.value.replace('@deprecated', '');
     }
 
-    return { value: description };
+    return result;
 }
 
 function generateMDImports({ examples, description, extensiveProps }) {
@@ -118,11 +122,18 @@ function generatePropDescription(prop) {
         return '';
     }
 
+    const result = { ...prop };
+
     if (prop.description && prop.description.includes('@extensive')) {
-        return prop.description.replace('@extensive', '');
+        result.description.replace('@extensive', '');
+    }
+
+    if (prop.description.includes('@reference')) {
+        result.reference = true;
+        result.description = result.description.replace('@reference', '');
     }
 
-    return prop.description;
+    return result.description;
 }
 
 function getExtensiveProps(props, file) {