feat: Add 'Copy link to clipboard' action (#110)

package.json

@@ -79,6 +79,7 @@
     "codemirror": "^5.49.2",
     "command-line-args": "^5.1.1",
     "command-line-usage": "^6.1.0",
+    "copy-to-clipboard": "^3.2.0",
     "css-loader": "^3.3.2",
     "current-git-branch": "^1.1.0",
     "dedent": "^0.7.0",

src/Playroom/CodeEditor/CodeEditor.less

@@ -58,7 +58,7 @@
     margin: 0;
     padding: 0;
     box-shadow: @shadow-small;
-    border-radius: 3px;
+    border-radius: @radius-medium;
     background-color: @code-background;
     font-size: 90%;
     line-height: 150%;
@@ -70,7 +70,7 @@
   .CodeMirror-hint {
     margin: 0;
     padding: 4px 8px;
-    border-radius: 2px;
+    border-radius: @radius-small;
     white-space: pre;
     color: @black;
     cursor: pointer;

src/Playroom/Playroom.tsx

@@ -29,7 +29,7 @@ const getThemeVariable = (name: string) => {
 
 const MIN_HEIGHT =
   getThemeVariable('toolbar-item-size') *
-  getThemeVariable('toolbar-item-count');
+  getThemeVariable('toolbar-max-item-count');
 const MIN_WIDTH =
   getThemeVariable('toolbar-open-size') +
   getThemeVariable('toolbar-closed-size');

src/Playroom/Toolbar/Toolbar.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useReducer, ReactChild } from 'react';
+import React, { useContext, useReducer, ReactChild, useEffect } from 'react';
+import copy from 'copy-to-clipboard';
 import classnames from 'classnames';
 import { PlayroomProps } from '../Playroom';
 import ViewPreference from '../ViewPreference/ViewPreference';
@@ -9,6 +10,7 @@ import ToolbarItem from '../ToolbarItem/ToolbarItem';
 import EditorUndockedSvg from './icons/EditorUndockedSvg';
 import EditorBottomSvg from './icons/EditorBottomSvg';
 import EditorRightSvg from './icons/EditorRightSvg';
+import ShareSvg from './icons/ShareSvg';
 
 // @ts-ignore
 import styles from './Toolbar.less';
@@ -21,18 +23,21 @@ interface Props {
 interface State {
   open: boolean;
   activePreference: 'theme' | 'width' | 'position' | null;
+  copying: boolean;
 }
 
 const initialState: State = {
   open: false,
-  activePreference: null
+  activePreference: null,
+  copying: false
 };
 
 type Action =
   | { type: 'toggleThemes' }
   | { type: 'toggleWidths' }
   | { type: 'togglePosition' }
-  | { type: 'closeToolbar' };
+  | { type: 'closeToolbar' }
+  | { type: 'copyLink'; payload: { active: boolean } };
 
 const reducer = (state: State, action: Action): State => {
   switch (action.type) {
@@ -74,6 +79,15 @@ const reducer = (state: State, action: Action): State => {
       };
     }
 
+    case 'copyLink': {
+      return {
+        ...state,
+        open: false,
+        activePreference: null,
+        copying: action.payload.active
+      };
+    }
+
     default:
       return state;
   }
@@ -105,11 +119,20 @@ export default ({ themes: allThemes, widths: allWidths }: Props) => {
     dispatchPreference
   ] = useContext(StoreContext);
 
-  const [{ open, activePreference }, dispatch] = useReducer(
+  const [{ open, activePreference, copying }, dispatch] = useReducer(
     reducer,
     initialState
   );
 
+  useEffect(() => {
+    if (copying) {
+      copy(window.location.href);
+      setTimeout(() => {
+        dispatch({ type: 'copyLink', payload: { active: false } });
+      }, 2000);
+    }
+  }, [copying]);
+
   const isThemeOpen = activePreference === 'theme' && open;
   const isWidthOpen = activePreference === 'width' && open;
   const isPositionOpen = activePreference === 'position';
@@ -162,6 +185,18 @@ export default ({ themes: allThemes, widths: allWidths }: Props) => {
             >
               <WidthsSvg />
             </ToolbarItem>
+
+            <ToolbarItem
+              active={copying}
+              title="Copy link to clipboard"
+              statusMessage="Link copied to clipboard"
+              showStatus={copying}
+              onClick={() =>
+                dispatch({ type: 'copyLink', payload: { active: true } })
+              }
+            >
+              <ShareSvg />
+            </ToolbarItem>
           </div>
 
           <ToolbarItem

src/Playroom/Toolbar/icons/ShareSvg.tsx

@@ -0,0 +1,47 @@
+import React, { SVGProps } from 'react';
+
+export default (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    focusable="false"
+    fill="currentColor"
+    width="24"
+    height="24"
+    {...props}
+  >
+    <circle
+      cx={18}
+      cy={6}
+      r={2}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeMiterlimit={10}
+    />
+    <circle
+      cx={6}
+      cy={12}
+      r={2}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeMiterlimit={10}
+    />
+    <circle
+      cx={18}
+      cy={18}
+      r={2}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeMiterlimit={10}
+    />
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinejoin="round"
+      d="M8 13l8 4m0-10l-8 4"
+    />
+  </svg>
+);

src/Playroom/ToolbarItem/ToolbarItem.less

@@ -14,7 +14,7 @@
   width: @toolbar-closed-size;
   border: 0;
   padding: 0;
-  background-color: transparent;
+  background-color: @toolbar-background;
   appearance: none;
   outline: none;
   display: flex;
@@ -91,3 +91,24 @@
     opacity: 0;
   }
 }
+
+.status {
+  @height: 30px;
+  position: absolute;
+  top: (@toolbar-item-size - @height) /2;
+  right: @toolbar-closed-size + 10px;
+  height: @height;
+  border-radius: 4px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  font: @text-standard;
+  white-space: nowrap;
+  background-color: @green-1;
+  transition: @transition-medium;
+
+  &:not(.status_show) {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+}

src/Playroom/ToolbarItem/ToolbarItem.tsx

@@ -9,13 +9,17 @@ interface Props {
   active?: boolean;
   title: string;
   count?: number;
+  statusMessage?: string;
+  showStatus?: boolean;
   onClick: () => void;
 }
 export default ({
   children,
   active = false,
   title,
   count = 0,
+  statusMessage,
+  showStatus = false,
   onClick
 }: Props) => {
   const hasSelection = count > 0;
@@ -45,6 +49,13 @@ export default ({
       >
         {count || ''}
       </div>
+      <div
+        className={classnames(styles.status, {
+          [styles.status_show]: showStatus && statusMessage // eslint-disable-line css-modules/no-undef-class
+        })}
+      >
+        {statusMessage}
+      </div>
     </div>
   );
 };

src/Playroom/ViewPreference/ViewPreference.less

@@ -29,7 +29,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    border-radius: 6px;
+    border-radius: @radius-large;
     background-color: currentColor;
     cursor: pointer;
     opacity: 0;
@@ -85,7 +85,7 @@
   padding: @padding-size;
   margin-right: 15px;
   position: relative;
-  border-radius: 6px;
+  border-radius: @radius-large;
   box-shadow: inset 0 0 0px 1px currentColor;
 
   &::after {
@@ -95,7 +95,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    border-radius: 4px;
+    border-radius: @radius-medium;
     box-shadow: 0 0 0 4px currentColor;
     transition: @transition-fast;
     opacity: 0;

src/Playroom/variables.less

@@ -17,6 +17,7 @@
 @blue-2: #005ad2;
 @blue-3: #00439c;
 @blue-4: #040080;
+@green-1: #c5f5e9;
 @white: #fff;
 @gray-1: #f4f4f4;
 @gray-2: #e8e8e8;
@@ -28,6 +29,11 @@
 // Box Shadow:
 @shadow-small: 0 2px 8px rgba(18, 21, 26, 0.3);
 
+// Border radii
+@radius-small: 2px;
+@radius-medium: 4px;
+@radius-large: 6px;
+
 // Transitions
 @transition-speed-fast: 100ms;
 @transition-speed-medium: 200ms;
@@ -62,7 +68,7 @@
 @toolbar-closed-size: 60px;
 @toolbar-open-size: 300px;
 @toolbar-item-size: 60px;
-@toolbar-item-count: 5;
+@toolbar-max-item-count: 4;
 @toolbar-foregound: @gray-4;
 @toolbar-background: @white;
 @toolbar-highlight: @blue-2;