Merge pull request #258 from acelaya-forks/feature/copy-to-clipboard

Replace dependency on react-copy-to-clipboard with custom logic

Author: acelaya

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 * [#249](https://github.com/shlinkio/shlink-web-component/issues/249) Replace `react-datepicker` with native `input[type="date"]` and `input[type="datetime-local"]` elements.
+* [#257](https://github.com/shlinkio/shlink-web-component/issues/257) Remove dependency on `react-copy-to-clipboard`.
 
 ### Deprecated
 * *Nothing*

README.md

@@ -172,6 +172,6 @@ export function App() {
 
 Since this is a complex component, this project provides a convenient way to do some manual tests.
 
-Simply run `npm run dev` and a local vite server will be started on port `3002`.
+Simply run `npm run dev` or `docker compose up`, and a local vite server will be started on port `3002`.
 
-Just visit http://localhost:3002 to see your changes in real time.
+Then visit http://localhost:3002 to see your changes in real time.

docker-compose.yml

@@ -4,6 +4,7 @@ services:
     shlink_web_component:
         container_name: shlink_web_component
         image: node:20.5-alpine
+        command: /bin/sh -c "cd /shlink-web-component && npm run dev"
         volumes:
             - ./:/shlink-web-component
         ports:

package-lock.json

@@ -35,8 +35,8 @@
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:js:fix": "npm run lint:js -- --fix",
     "types": "tsc",
-    "dev": "vite serve --host=0.0.0.0 --port 3002",
-    "dev:sub-route": "vite serve --host=0.0.0.0 --port 3003 --base=\"/sub/route\""
+    "dev": "vite serve --host 0.0.0.0 --port 3002",
+    "dev:sub-route": "vite serve --host 0.0.0.0 --port 3003 --base=\"/sub/route\""
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -68,7 +68,6 @@
     "date-fns": "^3.3.1",
     "event-source-polyfill": "^1.0.31",
     "leaflet": "^1.9.4",
-    "react-copy-to-clipboard": "^5.1.0",
     "react-external-link": "^2.2.0",
     "react-leaflet": "^4.2.1",
     "react-swipeable": "^7.0.1",
@@ -85,7 +84,6 @@
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/leaflet": "^1.9.8",
     "@types/react": "^18.2.55",
-    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.2.2",

package.json

@@ -4,11 +4,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { Result } from '@shlinkio/shlink-frontend-kit';
 import { useEffect } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
 import { Tooltip } from 'reactstrap';
 import { ShlinkApiError } from '../../common/ShlinkApiError';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';
+import { copyToClipboard } from '../../utils/helpers/clipboard';
 import type { ShortUrlCreation } from '../reducers/shortUrlCreation';
 import './CreateShortUrlResult.scss';
 
@@ -67,16 +67,14 @@ const CreateShortUrlResult: FCWithDeps<CreateShortUrlResultProps, CreateShortUrl
       )}
       <span><b>Great!</b> The short URL is <b>{shortUrl}</b></span>
 
-      <CopyToClipboard text={shortUrl} onCopy={toggleShowCopyTooltip}>
-        <button
-          className="btn btn-light btn-sm create-short-url-result__copy-btn"
-          id="copyBtn"
-          type="button"
-        >
-          <FontAwesomeIcon icon={copyIcon} /> Copy
-        </button>
-      </CopyToClipboard>
-
+      <button
+        className="btn btn-light btn-sm create-short-url-result__copy-btn"
+        id="copyBtn"
+        type="button"
+        onClick={() => copyToClipboard({ text: shortUrl, onCopy: toggleShowCopyTooltip })}
+      >
+        <FontAwesomeIcon icon={copyIcon} /> Copy <span className="sr-only">{shortUrl} to clipboard</span>
+      </button>
       <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
         Copied!
       </Tooltip>

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -53,7 +53,11 @@ const ShortUrlsRow: FCWithDeps<ShortUrlsRowProps, ShortUrlsRowDeps> = ({ shortUr
             <ExternalLink href={shortUrl.shortUrl} />
           </span>
           <CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
-          <span className="badge bg-warning text-black short-urls-row__copy-hint" hidden={!copiedToClipboard}>
+          <span
+            role="status"
+            className="badge bg-warning text-black short-urls-row__copy-hint"
+            hidden={!copiedToClipboard}
+          >
             Copied short URL!
           </span>
         </span>

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -1,16 +1,22 @@
 import { faClone as copyIcon } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import './CopyToClipboardIcon.scss';
+import type { CopyToClipboardOptions } from '../helpers/clipboard';
+import { copyToClipboard as defaultCopyToClipboard } from '../helpers/clipboard';
+import { UnstyledButton } from './UnstyledButton';
 
-interface CopyToClipboardIconProps {
-  text: string;
-  onCopy?: (text: string, result: boolean) => void;
-}
+type CopyToClipboardIconProps = CopyToClipboardOptions & {
+  copyToClipboard?: typeof defaultCopyToClipboard;
+};
 
-export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ text, onCopy }) => (
-  <CopyToClipboard text={text} onCopy={onCopy}>
-    <FontAwesomeIcon icon={copyIcon} className="ms-2 copy-to-clipboard-icon" />
-  </CopyToClipboard>
+export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = (
+  { text, onCopy, copyToClipboard = defaultCopyToClipboard },
+) => (
+  <UnstyledButton
+    className="ms-2 p-0"
+    aria-label={`Copy ${text} to clipboard`}
+    onClick={() => copyToClipboard({ text, onCopy })}
+  >
+    <FontAwesomeIcon icon={copyIcon} className="fs-5" />
+  </UnstyledButton>
 );

src/utils/components/CopyToClipboardIcon.scss

@@ -0,0 +1,9 @@
+export type CopyToClipboardOptions = {
+  text: string;
+  onCopy?: (text: string, copied: boolean) => void;
+};
+
+export const copyToClipboard = ({ text, onCopy }: CopyToClipboardOptions, navigator_: Navigator = navigator) =>
+  navigator_.clipboard?.writeText(text)
+    .then(() => onCopy?.(text, true))
+    .catch(() => onCopy?.(text, false));

src/utils/components/CopyToClipboardIcon.tsx

@@ -68,9 +68,9 @@ describe('<QrCodeModal />', () => {
 
   it('shows expected components based on server version', () => {
     setUp();
-    const dropdowns = screen.getAllByRole('button');
 
-    expect(dropdowns).toHaveLength(2 + 2); // Add two because of the close and download buttons
+    // Add three because of the close, download and copy-to-clipboard buttons
+    expect(screen.getAllByRole('button')).toHaveLength(2 + 3);
   });
 
   it('saves the QR code image when clicking the Download button', async () => {

src/utils/helpers/clipboard.ts

@@ -3,8 +3,11 @@ import { checkAccessibility } from '../../__helpers__/accessibility';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<CopyToClipboardIcon />', () => {
+  const copyToClipboard = vi.fn();
   const onCopy = vi.fn();
-  const setUp = (text = 'foo') => renderWithEvents(<CopyToClipboardIcon text={text} onCopy={onCopy} />);
+  const setUp = (text = 'foo') => renderWithEvents(
+    <CopyToClipboardIcon text={text} onCopy={onCopy} copyToClipboard={copyToClipboard} />,
+  );
 
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
@@ -20,8 +23,8 @@ describe('<CopyToClipboardIcon />', () => {
   ])('copies content to clipboard when clicked', async (text) => {
     const { user, container } = setUp(text);
 
-    expect(onCopy).not.toHaveBeenCalled();
+    expect(copyToClipboard).not.toHaveBeenCalled();
     container.firstElementChild && await user.click(container.firstElementChild);
-    expect(onCopy).toHaveBeenCalledWith(text, false);
+    expect(copyToClipboard).toHaveBeenCalledWith({ text, onCopy });
   });
 });

test/short-urls/helpers/QrCodeModal.test.tsx

@@ -2,20 +2,27 @@
 
 exports[`<CopyToClipboardIcon /> > wraps expected components 1`] = `
 <div>
-  <svg
-    aria-hidden="true"
-    class="svg-inline--fa fa-clone ms-2 copy-to-clipboard-icon"
-    data-icon="clone"
-    data-prefix="far"
-    focusable="false"
-    role="img"
-    viewBox="0 0 512 512"
-    xmlns="http://www.w3.org/2000/svg"
+  <button
+    aria-label="Copy foo to clipboard"
+    class="border-0 ms-2 p-0"
+    style="background-color: inherit; font-weight: inherit;"
+    type="button"
   >
-    <path
-      d="M64 464H288c8.8 0 16-7.2 16-16V384h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM224 304H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16V288c0 8.8 7.2 16 16 16zm-64-16V64c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64z"
-      fill="currentColor"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-clone fs-5"
+      data-icon="clone"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M64 464H288c8.8 0 16-7.2 16-16V384h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM224 304H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16V288c0 8.8 7.2 16 16 16zm-64-16V64c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
 </div>
 `;

test/utils/components/CopyToClipboardIcon.test.tsx

@@ -0,0 +1,27 @@
+import { fromPartial } from '@total-typescript/shoehorn';
+import { copyToClipboard } from '../../../src/utils/helpers/clipboard';
+
+describe('clipboard', () => {
+  const writeText = vi.fn().mockResolvedValue(undefined);
+  const navigator = fromPartial<Navigator>({
+    clipboard: { writeText },
+  });
+  const text = 'foo';
+  const onCopy = vi.fn();
+
+  it('does nothing when clipboard is not defined', async () => {
+    await copyToClipboard({ text, onCopy }, fromPartial({}));
+    expect(onCopy).not.toHaveBeenCalled();
+  });
+
+  it('invokes callback with true when copying succeeds', async () => {
+    await copyToClipboard({ text, onCopy }, navigator);
+    expect(onCopy).toHaveBeenCalledWith(text, true);
+  });
+
+  it('invokes callback with false when copying fails', async () => {
+    writeText.mockRejectedValue(undefined);
+    await copyToClipboard({ text, onCopy }, navigator);
+    expect(onCopy).toHaveBeenCalledWith(text, false);
+  });
+});