From 19bf7ea718914b43b73015ac7b0e6ac3efff58bb Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Sat, 12 May 2018 00:49:16 -0300 Subject: [PATCH] feat: add support for highlight code sections --- examples/basic/src/components/Button.mdx | 2 +- examples/basic/src/hocs/withProps.mdx | 15 ++++++ packages/docz-core/package.json | 1 - packages/docz-core/src/types.d.ts | 1 - packages/docz-core/src/utils/plugin-hast.ts | 8 ++-- packages/docz-theme-default/package.json | 4 ++ .../docz-theme-default/src/components/Pre.tsx | 47 +++++++++++++++++++ .../src/components/Render.tsx | 6 +-- .../src/components/index.tsx | 1 + .../src/modules/Doc/index.tsx | 1 + yarn.lock | 32 ++++++++----- 11 files changed, 93 insertions(+), 25 deletions(-) create mode 100644 packages/docz-theme-default/src/components/Pre.tsx diff --git a/examples/basic/src/components/Button.mdx b/examples/basic/src/components/Button.mdx index f8b0278a2..2af38295b 100644 --- a/examples/basic/src/components/Button.mdx +++ b/examples/basic/src/components/Button.mdx @@ -29,4 +29,4 @@ Buttons make common actions more obvious and help users more easily perform them - diff --git a/examples/basic/src/hocs/withProps.mdx b/examples/basic/src/hocs/withProps.mdx index cdd2c8477..405c9eeb1 100644 --- a/examples/basic/src/hocs/withProps.mdx +++ b/examples/basic/src/hocs/withProps.mdx @@ -6,3 +6,18 @@ export const meta = doc('withProp') # withProps This section talk about withProps hoc + +```jsx +import React from 'react' +import { withProps } from '@lib/withProps' + +const mapProps = () => ({ + greet: 'Hi' +}) + +export const Greeter = withProps(mapProps)( + ({ greet, name }) => ( +
{greet} {name}
+ ) +) +``` diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json index fd4f55731..d09bb896d 100644 --- a/packages/docz-core/package.json +++ b/packages/docz-core/package.json @@ -47,7 +47,6 @@ "koa-static": "^4.0.2", "load-cfg": "^0.0.1", "lodash.get": "^4.4.2", - "node-prismjs": "^0.1.1", "prettier": "^1.12.0", "react-hot-loader": "4.1.2", "remark-parse": "^5.0.0", diff --git a/packages/docz-core/src/types.d.ts b/packages/docz-core/src/types.d.ts index 6681e2a3b..49b391a29 100644 --- a/packages/docz-core/src/types.d.ts +++ b/packages/docz-core/src/types.d.ts @@ -8,7 +8,6 @@ declare module 'unist-util-visit' declare module 'unist-util-find' declare module 'unist-util-remove' declare module 'hast-util-to-string' -declare module 'node-prismjs' declare module 'remark-parse' declare module 'to-vfile' declare module 'art-template' diff --git a/packages/docz-core/src/utils/plugin-hast.ts b/packages/docz-core/src/utils/plugin-hast.ts index 38c13616c..b4f6644b0 100644 --- a/packages/docz-core/src/utils/plugin-hast.ts +++ b/packages/docz-core/src/utils/plugin-hast.ts @@ -1,5 +1,4 @@ import visit from 'unist-util-visit' -import prism from 'node-prismjs' import nodeToString from 'hast-util-to-string' import { format } from '../utils/format' @@ -18,12 +17,11 @@ const addCodeProp = (node: any) => { if (isPlayground(name)) { const code = format(nodeToString(node)).slice(1, Infinity) - const html = prism.highlight(code, prism.languages.jsx) const codeComponent = `( - 
-        
-
+ + {\`${code}\`} + )` node.value = node.value.replace( diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json index 946fa0857..f02839abb 100644 --- a/packages/docz-theme-default/package.json +++ b/packages/docz-theme-default/package.json @@ -16,11 +16,13 @@ "build": "libundler build --ts -e all --c --sm" }, "dependencies": { + "classnames": "^2.2.5", "docz": "^0.0.1", "emotion": "^9.1.2", "emotion-normalize": "^7.0.1", "history": "^4.7.2", "polished": "^1.9.2", + "prismjs": "^1.14.0", "react": "^16.3.2", "react-dom": "^16.3.2", "react-emotion": "^9.1.2", @@ -38,6 +40,8 @@ "@babel/plugin-proposal-class-properties": "^7.0.0-beta.44", "@babel/preset-env": "^7.0.0-beta.44", "@babel/preset-react": "^7.0.0-beta.44", + "@types/classnames": "^2.2.3", + "@types/prismjs": "^1.9.0", "@types/react-router-dom": "^4.2.6", "babel-plugin-emotion": "^9.1.0" } diff --git a/packages/docz-theme-default/src/components/Pre.tsx b/packages/docz-theme-default/src/components/Pre.tsx new file mode 100644 index 000000000..19dfb7f72 --- /dev/null +++ b/packages/docz-theme-default/src/components/Pre.tsx @@ -0,0 +1,47 @@ +import 'prismjs/components/prism-jsx' + +import React, { PureComponent } from 'react' +import cx from 'classnames' +import prism from 'prismjs' +import styled from 'react-emotion' + +import * as colors from '../styles/colors' + +const PreStyled = styled('pre')` + border: 1px solid ${colors.border}; +` + +interface PreProps { + className: string + children: any +} + +export class Pre extends PureComponent { + private el: any + + public render(): JSX.Element { + const { children } = this.props + const childrenProps = children.props.props + const childrenClassName = childrenProps && childrenProps.className + + const className = cx('react-prism', this.props.className, childrenClassName) + + return ( + (this.el = ref)} className={className}> + {children.props.children} + + ) + } + + public componentDidMount(): void { + this.highlightCode() + } + + public componentDidUpdate(): void { + this.highlightCode() + } + + private highlightCode(): void { + prism.highlightElement(this.el) + } +} diff --git a/packages/docz-theme-default/src/components/Render.tsx b/packages/docz-theme-default/src/components/Render.tsx index 3e3cb92fc..73443b230 100644 --- a/packages/docz-theme-default/src/components/Render.tsx +++ b/packages/docz-theme-default/src/components/Render.tsx @@ -6,16 +6,14 @@ import styled from 'react-emotion' import * as colors from '../styles/colors' const ComponentWrapper = styled('div')` - position: relative; padding: 2rem; - background: white; + background: transparent; border: 1px solid ${colors.border}; + border-bottom: 0; border-radius: 3px 3px 0 0; ` const CodeWrapper = styled('div')` - border: 1px solid ${colors.border}; - border-top: 0; border-radius: 0 0 3px 3px; pre { diff --git a/packages/docz-theme-default/src/components/index.tsx b/packages/docz-theme-default/src/components/index.tsx index 73caa7833..b362652c0 100644 --- a/packages/docz-theme-default/src/components/index.tsx +++ b/packages/docz-theme-default/src/components/index.tsx @@ -1,4 +1,5 @@ export { Container } from './Container' +export { Pre } from './Pre' export { H1 } from './H1' export { H2 } from './H2' export { H3 } from './H3' diff --git a/packages/docz-theme-default/src/modules/Doc/index.tsx b/packages/docz-theme-default/src/modules/Doc/index.tsx index f1fc6b5f5..67700141b 100644 --- a/packages/docz-theme-default/src/modules/Doc/index.tsx +++ b/packages/docz-theme-default/src/modules/Doc/index.tsx @@ -20,6 +20,7 @@ export const Doc: SFC = ({ id, route, component: Component }) => ( table: components.Table, render: components.Render, tooltip: components.Tooltip, + pre: components.Pre, }} /> diff --git a/yarn.lock b/yarn.lock index 746dba944..765d82d94 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1329,6 +1329,10 @@ "@types/events" "*" "@types/node" "*" +"@types/classnames@^2.2.3": + version "2.2.3" + resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5" + "@types/clean-css@*": version "3.4.30" resolved "https://registry.npmjs.org/@types/clean-css/-/clean-css-3.4.30.tgz#0052c136f5248002428e3638b37de4a39818641d" @@ -1430,6 +1434,10 @@ version "1.12.1" resolved "https://registry.npmjs.org/@types/prettier/-/prettier-1.12.1.tgz#d8aa9c353adc3e8c1c6e51e7acb642315fd79d2d" +"@types/prismjs@^1.9.0": + version "1.9.0" + resolved "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.9.0.tgz#38af9491e2f105079a443703ee675fb27371ec94" + "@types/react-dom@^16.0.5": version "16.0.5" resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.5.tgz#a757457662e3819409229e8f86795ff37b371f96" @@ -2383,6 +2391,10 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.5: + version "2.2.5" + resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" + clean-css@4.1.x: version "4.1.11" resolved "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a" @@ -2403,9 +2415,9 @@ cli-width@^2.0.0: version "2.2.0" resolved "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" -clipboard@^1.5.5: - version "1.7.1" - resolved "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b" +clipboard@^2.0.0: + version "2.0.1" + resolved "https://registry.npmjs.org/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a" dependencies: good-listener "^1.2.2" select "^1.1.2" @@ -5864,12 +5876,6 @@ node-pre-gyp@^0.9.0: semver "^5.3.0" tar "^4" -node-prismjs@^0.1.1: - version "0.1.1" - resolved "https://registry.npmjs.org/node-prismjs/-/node-prismjs-0.1.1.tgz#e9dac3304981501e328acdbc74361830b3da1eb3" - dependencies: - prismjs "~1.6.0" - node-status-codes@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f" @@ -6398,11 +6404,11 @@ pretty-time@^1.0.0: is-number "^5.0.0" nanoseconds "^1.0.0" -prismjs@~1.6.0: - version "1.6.0" - resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365" +prismjs@^1.14.0: + version "1.14.0" + resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0" optionalDependencies: - clipboard "^1.5.5" + clipboard "^2.0.0" private@^0.1.6, private@~0.1.5: version "0.1.8"