diff --git a/core/docz/package.json b/core/docz/package.json index 9997b942c..ce34a9518 100644 --- 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 index afb7f97b6..2b92cc129 100644 --- 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 = ({ 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 index e109a1156..e5922a62a 100644 --- 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 index 01d09ce03..9c9344b6d 100644 --- 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 index 6a84cd21b..a2c51441f 100644 --- 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 index 6c2ea3c56..c414ffb68 100644 --- 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"