feat(docz-theme-default): add copy to clipboard on pre

packages/docz-theme-default/package.json

@@ -21,6 +21,7 @@
     "tslint": "tslint --project ."
   },
   "dependencies": {
+    "copy-text-to-clipboard": "^1.0.4",
     "docz": "^0.6.2",
     "emotion": "^9.2.6",
     "emotion-theming": "^9.2.6",

packages/docz-theme-default/src/components/ui/Button.tsx

@@ -0,0 +1,13 @@
+import styled from 'react-emotion'
+
+export const Button = styled('button')`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  outline: none;
+  border: none;
+`
+
+export const ButtonLink = styled(Button)`
+  background: transparent;
+`

packages/docz-theme-default/src/components/ui/ButtonSwap.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { SFC } from 'react'
+import { Toggle } from 'react-powerplug'
+
+import { Button as BaseButton } from './Button'
+
+type AnimatedButtonProps = React.ButtonHTMLAttributes<any> & {
+  swap: React.ReactNode
+  as?: React.ComponentType<React.ButtonHTMLAttributes<any>>
+}
+
+export const ButtonSwap: SFC<AnimatedButtonProps> = ({
+  as: Button = BaseButton,
+  onClick,
+  swap,
+  children,
+  ...props
+}) => (
+  <Toggle>
+    {({ toggle, on }: any) => {
+      const handleClick = (ev: any) => {
+        toggle()
+        onClick && onClick(ev)
+        setTimeout(toggle, 500)
+      }
+
+      return (
+        <Button onClick={handleClick} {...props}>
+          {on ? swap : children}
+        </Button>
+      )
+    }}
+  </Toggle>
+)

packages/docz-theme-default/src/components/ui/Pre.tsx

@@ -1,18 +1,31 @@
 import * as React from 'react'
-import { SFC, Fragment } from 'react'
+import { SFC, Component, Fragment } from 'react'
 import { ThemeConfig } from 'docz'
+import styled, { css, cx } from 'react-emotion'
 import rgba from 'polished/lib/color/rgba'
-import styled, { cx } from 'react-emotion'
+import Clipboard from 'react-feather/dist/icons/clipboard'
+import Check from 'react-feather/dist/icons/check'
 import SyntaxHighlighter from 'react-syntax-highlighter/prism-light'
+import copy from 'copy-text-to-clipboard'
+
+import { ButtonSwap } from './ButtonSwap'
+import { ButtonLink } from './Button'
 
 const PrismTheme = styled('pre')`
   ${p => p.theme.prismTheme};
   ${p => p.theme.mq(p.theme.styles.pre)};
+  overflow-y: hidden;
   padding: 30px;
   margin: 0;
   flex: 1;
 `
 
+const getChildren = (children: any) => {
+  return children && typeof children !== 'string'
+    ? children.props.children
+    : children
+}
+
 const getLanguage = (children: any) => {
   if (typeof children === 'string') return 'language-jsx'
   return children.props.props.className
@@ -26,7 +39,6 @@ const getCode = (content: any): SFC => ({ children }) => {
 const Wrapper = styled('div')`
   display: flex;
   position: relative;
-  overflow-y: hidden;
   border: 1px solid ${p => p.theme.colors.border};
   border-radius: 5px;
   background: ${p => p.theme.colors.preBg};
@@ -40,6 +52,24 @@ const Wrapper = styled('div')`
   }
 `
 
+const Actions = styled('div')`
+  display: flex;
+  flex-direction: column;
+`
+
+const CopyButton = styled(ButtonSwap)`
+  padding: 7px 10px;
+  background: transparent;
+  font-size: 12px;
+  text-transform: uppercase;
+  color: ${p => rgba(p.theme.colors.text, 0.4)};
+  transition: color 0.3s;
+
+  &:hover {
+    color: ${p => rgba(p.theme.colors.text, 0.7)};
+  }
+`
+
 const Nullable: SFC = ({ children }) => <Fragment>{children}</Fragment>
 
 const linesStyle = (colors: any) => ({
@@ -54,24 +84,48 @@ interface PreProps {
   className?: string
 }
 
-export const Pre: SFC<PreProps> = ({ children, className }) => (
-  <ThemeConfig>
-    {config => (
-      <Wrapper className={className}>
-        <SyntaxHighlighter
-          language="javascript"
-          showLineNumbers
-          useInlineStyles={false}
-          lineProps={{ class: 'helo' }}
-          lineNumberContainerStyle={linesStyle(config.colors)}
-          PreTag={Nullable}
-          CodeTag={getCode(children)}
-        >
-          {children && typeof children !== 'string'
-            ? children.props.children
-            : children}
-        </SyntaxHighlighter>
-      </Wrapper>
-    )}
-  </ThemeConfig>
-)
+export class Pre extends Component<PreProps> {
+  public render(): JSX.Element {
+    const { children, className } = this.props
+    const content = getChildren(children)
+
+    const check = (
+      <Check
+        width={17}
+        className={css`
+          stroke: #00b894;
+        `}
+      />
+    )
+
+    return (
+      <ThemeConfig>
+        {config => (
+          <Wrapper className={className}>
+            <SyntaxHighlighter
+              language="javascript"
+              showLineNumbers
+              useInlineStyles={false}
+              lineProps={{ class: 'helo' }}
+              lineNumberContainerStyle={linesStyle(config.colors)}
+              PreTag={Nullable}
+              CodeTag={getCode(children)}
+            >
+              {getChildren(content)}
+            </SyntaxHighlighter>
+            <Actions>
+              <CopyButton
+                as={ButtonLink}
+                title="Copy to clipboard"
+                onClick={() => copy(content)}
+                swap={check}
+              >
+                <Clipboard width={15} />
+              </CopyButton>
+            </Actions>
+          </Wrapper>
+        )}
+      </ThemeConfig>
+    )
+  }
+}

packages/docz-theme-default/src/types.d.ts

@@ -1,6 +1,9 @@
+declare module 'copy-text-to-clipboard'
 declare module 'react-breakpoints'
 declare module 'react-feather/dist/icons/chevron-down'
 declare module 'react-feather/dist/icons/search'
+declare module 'react-feather/dist/icons/clipboard'
+declare module 'react-feather/dist/icons/check'
 declare module 'react-lightweight-tooltip'
 declare module 'react-powerplug'
 declare module 'react-syntax-highlighter/prism-light'

yarn.lock

@@ -3823,6 +3823,10 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
+copy-text-to-clipboard@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-1.0.4.tgz#2286ff6c53495962c5318d34746d256939069c49"
+
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"