feat: add markdown parsing on props description

doczjs · Jul 11, 2019 · 1087539 · 1087539
1 parent e593897
commit 1087539
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 4 deletions.
diff --git a/core/docz/package.json b/core/docz/package.json
@@ -31,6 +31,7 @@
     "fast-deep-equal": "^2.0.1",
     "gatsby": "^2.13.14",
     "lodash": "^4.17.14",
+    "marksy": "^8.0.0",
     "match-sorter": "^3.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

diff --git a/core/docz/src/components/Props.tsx b/core/docz/src/components/Props.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { SFC, ComponentType } from 'react'
+import { createElement, SFC, ComponentType, useMemo } from 'react'
 import { first, get } from 'lodash/fp'
 import capitalize from 'capitalize'
+import marksy from 'marksy'
 
 import { doczState } from '../state'
 import { useComponents } from '../hooks'
@@ -122,7 +123,23 @@ export const Props: SFC<PropsProps> = ({
   const value = get('value', found) || []
   const firstDefinition = first(value)
   const definition = value.find((i: any) => i.displayName === componentName)
-  const props = get('props', definition || firstDefinition)
+
+  const compileMarkdown = useMemo(
+    () => marksy({ createElement, elements: components }),
+    [components]
+  )
+
+  const props = useMemo(() => {
+    const props = get('props', definition || firstDefinition)
+    if (props) {
+      for (const key of Object.keys(props)) {
+        if (props[key].description) {
+          props[key].description = compileMarkdown(props[key].description).tree
+        }
+      }
+    }
+    return props
+  }, [compileMarkdown, definition || firstDefinition])
 
   if (!props) return null
   if (!PropsComponent) return null

diff --git a/core/docz/src/types.d.ts b/core/docz/src/types.d.ts
@@ -2,5 +2,6 @@ declare module '@mdx-js/react'
 declare module 'array-sort'
 declare module 'capitalize'
 declare module 'match-sorter'
+declare module 'marksy'
 declare module 'react-router-hash-link'
 declare module 'use-react-router'
diff --git a/core/gatsby-theme-docz/src/components/Props/styles.js b/core/gatsby-theme-docz/src/components/Props/styles.js
@@ -75,7 +75,7 @@ export const propRequired = {
 
 export const openDescBtn = {
   ...mixins.ghostButton,
-  mt: -2,
+  mt: 0,
   ml: 3,
   color: 'props.defaultValue',
 }

diff --git a/examples/basic/src/components/Button.jsx b/examples/basic/src/components/Button.jsx
@@ -65,6 +65,11 @@ export const Button = ({ children, ...props }) => (
 Button.propTypes = {
   /**
    * This is a pretty good description for this prop
+   * Button type. Learn more about `type` attribute [at MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
+   */
+  type: t.oneOf(['button', 'submit', 'reset']),
+  /**
+   * This is a __pretty good__ description for this prop
    */
   scales: t.oneOf(['small', 'normal', 'big']),
   kind: t.oneOf(['primary', 'secondary', 'cancel', 'dark', 'gray']),

diff --git a/yarn.lock b/yarn.lock
@@ -1126,6 +1126,11 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/standalone@^7.4.5":
+  version "7.5.4"
+  resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.5.4.tgz#c57221528619fcd2e8e2425f11d5d7cd79263b80"
+  integrity sha512-BIEymdjzQC0QScjHYklFjrThVUnTqztmspXupRkVVkL9wSQqri9XnIK5GTBipF2eGL5HU4oPbGUCcURFFI8CjA==
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -9291,7 +9296,7 @@ hastscript@^5.0.0:
     property-information "^5.0.1"
     space-separated-tokens "^1.0.0"
 
-he@1.2.x:
+he@1.2.x, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -11742,6 +11747,20 @@ markdown-table@^1.1.0:
   resolved "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
   integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
 
+marked@^0.3.12:
+  version "0.3.19"
+  resolved "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
+  integrity sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==
+
+marksy@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/marksy/-/marksy-8.0.0.tgz#b595f121fd47058df9dda1448f6ee156ab48810a"
+  integrity sha512-mmHcKZojCQAGuKTuu3153viXdCuxUmsSxomFaSOBTkOlfWFOZBmDhmJkOp0CsPMNRQ7m6oN2wflvAHLpBNZVPw==
+  dependencies:
+    "@babel/standalone" "^7.4.5"
+    he "^1.2.0"
+    marked "^0.3.12"
+
 match-sorter@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/match-sorter/-/match-sorter-3.1.1.tgz#a49889245da80a3d6a032eca0c18e21f265bb42a"