Add CopyPrimitive components for copying text functionality

src/core/primitives/Copy/contexts/CopyPrimitiveContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const CopyPrimitiveContext = createContext({});
+
+export default CopyPrimitiveContext;

src/core/primitives/Copy/fragments/CopyPrimitiveFeedback.tsx

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import Primitive from '~/core/primitives/Primitive';
+import CopyPrimitiveContext from '../contexts/CopyPrimitiveContext';
+
+const CopyPrimitiveFeedback = ({ children, isCopiedText = 'Copied!', ...props }: any) => {
+    const { isCopied } = useContext(CopyPrimitiveContext);
+
+    if (!isCopied) {
+        return null;
+    }
+
+    return <Primitive.span {...props}>{isCopiedText}</Primitive.span>;
+};
+
+export default CopyPrimitiveFeedback;

src/core/primitives/Copy/fragments/CopyPrimitiveRoot.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import Primitive from '~/core/primitives/Primitive';
+
+import CopyPrimitiveContext from '../contexts/CopyPrimitiveContext';
+
+const CopyPrimitiveRoot = ({ children, ...props }: any) => {
+    const [isCopied, setIsCopied] = useState(false);
+
+    const values = {
+        isCopied,
+        setIsCopied
+    };
+
+    return (
+        <CopyPrimitiveContext.Provider value={values}>
+            <Primitive.button {...props}>{children}</Primitive.button>
+        </CopyPrimitiveContext.Provider>
+    );
+};
+
+export default CopyPrimitiveRoot;

src/core/primitives/Copy/fragments/CopyPrimitiveTrigger.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import Primitive from '~/core/primitives/Primitive';
+import CopyPrimitiveContext from '../contexts/CopyPrimitiveContext';
+
+// The triggering action (button) is logically part of the copying mechanism
+const CopyTrigger = ({ children, text = '', resetDelay = 2000, ...props }: any) => {
+    const { setIsCopied, isCopied } = useContext(CopyPrimitiveContext);
+
+    const handleClick = () => {
+        if (text) {
+            setIsCopied(true);
+            navigator.clipboard.writeText(text);
+            setTimeout(() => {
+                setIsCopied(false);
+            }, resetDelay);
+        }
+    };
+
+    if (!text || isCopied) {
+        return null;
+    }
+
+    return <Primitive.button {...props} onClick={handleClick}>{children}</Primitive.button>;
+};
+
+export default CopyTrigger;

src/core/primitives/Copy/index.tsx

@@ -0,0 +1,11 @@
+import CopyPrimitiveRoot from './fragments/CopyPrimitiveRoot';
+import CopyTrigger from './fragments/CopyPrimitiveTrigger';
+import CopyFeedback from './fragments/CopyPrimitiveFeedback';
+
+const CopyPrimitive = {
+    Root: CopyPrimitiveRoot,
+    Trigger: CopyTrigger,
+    Feedback: CopyFeedback
+} as const;
+
+export default CopyPrimitive;

src/core/primitives/Copy/stories/CopyPrimitive.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import CopyPrimitive from '../index';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Primitives/CopyPrimitive',
+    component: CopyPrimitive,
+    render: (args: any) => <SandboxEditor>
+        <div >
+            <CopyPrimitive.Root {...args}>
+                <CopyPrimitive.Trigger text="Hello, world!" {...args}>Copy</CopyPrimitive.Trigger>
+                <CopyPrimitive.Feedback {...args}>Copied!</CopyPrimitive.Feedback>
+            </CopyPrimitive.Root>
+        </div>
+    </SandboxEditor>
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Button = {
+    args: {
+        children: 'Copy'
+    }
+};