fix(docs): Added new lines and spacing to props default values

Hyperkid123 · Jan 28, 2021 · 2f2e1fd · 2f2e1fd
1 parent c4de4b3
commit 2f2e1fd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/docs/docs-generator.js b/packages/docs/docs-generator.js
@@ -9,6 +9,13 @@ const COMPONENTS_JSON = 'component-docs.json';
 const componentsDest = path.resolve(__dirname, './pages/components');
 const navDest = path.resolve(__dirname, './components/navigation');
 
+function newLineReplacer(str) {
+    return str.replace(/<br \/>\s+/gm, (str) => {
+        const spacers = str.match(/\s/gm || []);
+        return str.replace(/<br \/>\s/, `<br />${spacers.map(() => `<span className="default-prop-spacer"></span>`).join('')}`);
+    });
+}
+
 const propTypeGeneratorMapper = {
     string: primitiveGenerator,
     number: primitiveGenerator,
@@ -52,7 +59,7 @@ function shapeGenerator({ value }) {
         ...acc,
         [`${name}${value.required ? '*' : ''}`]: propTypeGeneratorMapper[value.name](value)
     }), {});
-    return `<code>${JSON.stringify(shape).replace(/("|\\")/gm, '').replace(/:/gm, ': ').replace(/,/gm, ', ')}</code>`;
+    return `<code>${newLineReplacer(JSON.stringify(shape, null, 2).replace(/\n/gm, '<br />').replace(/("|\\")/gm, '').replace(/:/gm, ': ').replace(/,/gm, ', '))}</code>`;
 }
 
 function getPropType(propType, file, { description, name }) {
@@ -79,12 +86,15 @@ function getPropType(propType, file, { description, name }) {
         }
     }
 
-    return typeof propType === 'object' ? `<code>${JSON.stringify(propType)}</code>` : `<code>${propType}</code>`;
+    return typeof propType === 'object' ? `<code>${newLineReplacer(JSON.stringify(propType, null, 2).replace(/\n/gm, '<br />'))}</code>` : `<code>${propType}</code>`;
 }
 
 function generateDefaultValue(value) {
     if (value.defaultValue) {
-        return `\`${value.defaultValue.value.replace(/\n/gm, '')}\``;
+        return `\`${newLineReplacer(JSON.stringify(value.defaultValue.value, null, 2)
+        .replace(/\\n/gm, '  ')
+        .replace(/(^"|\^"|"$|"(?=\{)|(?<=})")/gm, ''))
+        .replace(/((\\")(?=\s)|(?<==)(\\"))/gm, '"')}\``;
     }
 
     return '';

diff --git a/packages/docs/styles/globals.css b/packages/docs/styles/globals.css
@@ -11,3 +11,7 @@ body {
 .pf-c-page {
   min-height: 100vh;
 }
+
+.default-prop-spacer {
+  padding-left: 4px;
+}