feat: style tweaks, add quick copy button

Author: chriswhong

package.json

@@ -86,6 +86,7 @@
     "react-loadable": "5.5.0",
     "react-masonry-css": "1.0.16",
     "react-multivalue-text-input": "1.0.0",
+    "react-tooltip": "4.2.21",
     "readable-stream": "3.6.0",
     "redoc": "2.0.0-rc.55",
     "stream-browserify": "3.0.0",

src/components/HeaderLink.js

@@ -19,7 +19,9 @@ const HeaderLink = ({
             <Icon icon='docsRing' size='2xs' className={classNames(colorClass, 'mr-2')}/>
           </div>
         )}
-        <Link colorClassName={'text-black'} to={link}>{text}</Link>
+        <div className='text-left'>
+          <Link colorClassName={'text-black'} to={link}>{text}</Link>
+        </div>
       </li>
     )
   }

src/components/Icon.js

@@ -4,8 +4,10 @@ import Automate from './icon/Automate'
 import Bars from './icon/Bars'
 import Behance from './icon/Behance'
 import CaretRight from './icon/CaretRight'
+import Check from './icon/Check'
 import Clock from './icon/Clock'
 import Close from './icon/Close'
+import Copy from './icon/Copy'
 import Discord from './icon/Discord'
 import DocsRing from './icon/DocsRing'
 import Github from './icon/Github'
@@ -22,8 +24,10 @@ const Icon = (props) => {
     bars: <Bars {...props} />,
     behance: <Behance {...props} />,
     caretRight: <CaretRight {...props} />,
+    check: <Check {...props} />,
     clock: <Clock {...props} />,
     close: <Close {...props} />,
+    copy: <Copy {...props} />,
     discord: <Discord {...props} />,
     docsRing: <DocsRing {...props} />,
     github: <Github {...props} />,

src/components/icon/Check.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import CustomIcon from '../CustomIcon'
+
+const Check = (props) => (
+  <CustomIcon {...props}>
+    <path d="M20 6.61938L9 17.6194L4 12.6194" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </CustomIcon>
+)
+
+export default Check

src/components/icon/Copy.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import CustomIcon from '../CustomIcon'
+
+const Copy = (props) => (
+  <CustomIcon {...props}>
+    <path d="M20 10H11C9.89543 10 9 10.8954 9 12V21C9 22.1046 9.89543 23 11 23H20C21.1046 23 22 22.1046 22 21V12C22 10.8954 21.1046 10 20 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M5 16H4C3.46957 16 2.96086 15.7893 2.58579 15.4142C2.21071 15.0391 2 14.5304 2 14V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H13C13.5304 3 14.0391 3.21071 14.4142 3.58579C14.7893 3.96086 15 4.46957 15 5V6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </CustomIcon>
+)
+
+export default Copy

src/components/mdxComponents/codeBlock.js

@@ -1,9 +1,12 @@
-import * as React from 'react'
+import React, { useState, useRef } from 'react'
 import classNames from 'classnames'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import prismTheme from 'prism-react-renderer/themes/github'
 import Loadable from 'react-loadable'
+import ReactTooltip from 'react-tooltip'
+
 import LoadingProvider from './loading'
+import Icon from '../Icon'
 
 // override background and default text color
 prismTheme.plain = {
@@ -30,10 +33,30 @@ const LoadableComponent = Loadable({
 })
 
 /* eslint-disable react/jsx-key */
-const CodeBlock = ({ children: exampleCode, className, containerClassName, ...props }) => {
+const CodeBlock = ({
+  children: exampleCode,
+  className,
+  containerClassName,
+  id = '',
+  copyable = false,
+  ...props
+}) => {
   const match = className.match(/language-(\w*)/)
   const language = match ? match[1] : 'text'
 
+  const tooltipEl = useRef(null)
+  const [copySuccess, setCopySuccess] = useState(false)
+
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text)
+    setCopySuccess(true)
+    ReactTooltip.show(tooltipEl.current)
+    setTimeout(() => {
+      setCopySuccess(false)
+      ReactTooltip.hide(tooltipEl.current)
+    }, 2000)
+  }
+
   let title = ''
   if (className?.includes('title=')) {
     title = className.split('title=')[1]
@@ -45,7 +68,7 @@ const CodeBlock = ({ children: exampleCode, className, containerClassName, ...pr
     )
   } else {
     return (
-      <div className={classNames(containerClassName, 'bg-qrigray-100')}>
+      <div className={classNames(containerClassName, 'bg-qrigray-100 group relative')}>
         {title && (
           <div className='border-b px-4 py-2 text-sm'>
             {title}
@@ -110,6 +133,33 @@ const CodeBlock = ({ children: exampleCode, className, containerClassName, ...pr
             )}
           </Highlight>
         </div>
+        {
+          copyable && (
+            <>
+              <div
+                className={classNames('group-hover:visible absolute bottom-4 right-4 rounded bg-white p-1.5 text-center text-black hover:cursor-pointer', {
+                  invisible: !copySuccess
+                })}
+                style={{ height: 34, width: 34 }}
+                onClick={() => { copyToClipboard(exampleCode) }}
+                data-tip='Copied!'
+                data-for={id}
+                data-event='noevent'
+                ref={tooltipEl}
+              >
+                {!copySuccess && <Icon icon='copy' size='sm' />}
+                {copySuccess && <Icon icon='check' size='sm' className='text-green-600' />}
+              </div>
+              <ReactTooltip
+                id={id}
+                effect='solid'
+                place='bottom'
+                padding='2px'
+                className='codeblock-tooltip'
+              />
+            </>
+          )
+        }
       </div>
     )
   }

src/components/snippets/Snippet.js

@@ -15,7 +15,7 @@ const Snippet = ({ snippet }) => (
       <TagChips tags={snippet.tags} />
     </div>
     <div className='rounded-lg mb-10 overflow-hidden'>
-      <CodeBlock containerClassName='p-5' className='language-python text-sm'>{snippet.code}</CodeBlock>
+      <CodeBlock id={snippet.id} containerClassName='p-5' className='language-python text-sm' copyable>{snippet.code}</CodeBlock>
     </div>
   </>
 

src/components/snippets/SnippetCard.js

@@ -5,6 +5,7 @@ import CodeBlock from '../mdxComponents/CodeBlock'
 import AnchorTag from '../mdxComponents/AnchorTag'
 import Link from '../Link'
 import TagChips from '../TagChips'
+import Icon from '../Icon'
 import markdownComponents from '../mdxComponents'
 
 export const markdownOptions = {
@@ -23,14 +24,19 @@ const TransformSnippetCard = ({ snippet }) => {
     >
       <div className='px-5 py-5'>
         <Link to={`/docs/transform-snippets/${id}`}>
-          <div className='font-bold text-lg mb-2.5'>{title}</div>
+          <div className='flex items-start'>
+            <div className='flex-shrink-0'>
+              <Icon icon='docsRing' size='3xs' className='mr-2 text-qrinavy-700 -mt-0.5'/>
+            </div>
+            <div className='font-bold text-black mb-2 tracking-wide'>{title}</div>
+          </div>
         </Link>
         <div className='text-xs mb-2.5 text-qrigray-400'>
           <Markdown options={markdownOptions}>{description}</Markdown>
         </div>
         <div>{tags && <TagChips tags={tags}/>}</div>
       </div>
-      <CodeBlock containerClassName='p-5' className='language-python text-sm'>{code}</CodeBlock>
+      <CodeBlock id={id} containerClassName='p-5' className='language-python text-sm' copyable>{code}</CodeBlock>
     </div>
   )
 }

src/components/snippets/SnippetEditor.js

@@ -33,7 +33,7 @@ const SnippetEditor = ({ snippet }) => {
         navigate(`/docs/transform-snippets/${id}`)
       }
     } else {
-      const res = createSnippet(body, token)
+      const res = await createSnippet(body, token)
 
       if (res.meta?.code === 200) {
         navigate(`/docs/transform-snippets/${id}`)

src/scss/style.scss

@@ -218,3 +218,9 @@ body {
     -ms-overflow-style: none;  /* IE and Edge */
     scrollbar-width: none;  /* Firefox */
 }
+
+/* custom styles for codeblock tooltip, used in code snippets */
+.codeblock-tooltip {
+  padding: 2px 4px !important;
+  font-size: 12px !important;
+}

tailwind.config.js

@@ -193,7 +193,8 @@ module.exports = {
       cursor: ['hover'],
       borderWidth: ['last'],
       margin: ['last'],
-      padding: ['first', 'last']
+      padding: ['first', 'last'],
+      visibility: ['group-hover']
     }
   },
   plugins: [

yarn.lock

@@ -10556,7 +10556,7 @@ gatsby-plugin-typescript@^3.9.0:
     "@babel/runtime" "^7.14.0"
     babel-plugin-remove-graphql-queries "^3.9.0"
 
-gatsby-plugin-use-query-params@^1.0.1:
+[email protected]:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-use-query-params/-/gatsby-plugin-use-query-params-1.0.1.tgz#5e4982580d2e9bad15d243186cff379afef8a207"
   integrity sha512-k3xaKuf8VhLq6/arocYRZqiQMTQ84ZRY0JklsO4tuKsRqi64b94zGf6B8SZn6yo0fvtJ/zw684DpH77y/iKdbA==
@@ -17293,7 +17293,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
   integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
 
-react-multivalue-text-input@^1.0.0:
+[email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-multivalue-text-input/-/react-multivalue-text-input-1.0.0.tgz#d4ecda3e4a3d2415bfd4df4f6cef5bd389e7c43e"
   integrity sha512-h/QWdyktrLG7hwMq2YtHShApPRyuNNtjFr4LZ4EJOkmSfrnAYOFwrBUcN6Shca7zOcOKuQhe+ZEgXGvcOkjXxA==
@@ -17349,6 +17349,14 @@ react-tabs@^3.2.2:
     clsx "^1.1.0"
     prop-types "^15.5.0"
 
+react-tooltip@^4.2.21:
+  version "4.2.21"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.21.tgz#840123ed86cf33d50ddde8ec8813b2960bfded7f"
+  integrity sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==
+  dependencies:
+    prop-types "^15.7.2"
+    uuid "^7.0.3"
+
 react-transition-group@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
@@ -20717,7 +20725,7 @@ use-debounce@^7.0.0:
   resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-7.0.0.tgz#00a67d23d4fe09905e11145a99278da06c01c880"
   integrity sha512-4fvxEEs7ztdNMh+c497HAgysdq2+Ascem6EaDANGlCIap1JzqfL03Xw8xkYc2lShfXm4uO6PA6V5zcXN7gJdFA==
 
-use-query-params@^1.2.3:
+[email protected]:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-1.2.3.tgz#306c31a0cbc714e8a3b4bd7e91a6a9aaccaa5e22"
   integrity sha512-cdG0tgbzK+FzsV6DAt2CN8Saa3WpRnze7uC4Rdh7l15epSFq7egmcB/zuREvPNwO5Yk80nUpDZpiyHsoq50d8w==
@@ -20799,6 +20807,11 @@ [email protected], uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"