From 7c74d172eac0fedacdb8f8ebfb21372493aeb1ef Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Sun, 17 Nov 2024 23:32:07 +0530
Subject: [PATCH 1/2] Add CopyPrimitive components for copying text
 functionality

---
 .../Copy/contexts/CopyPrimitiveContext.tsx    |  5 ++++
 .../Copy/fragments/CopyPrimitiveFeedback.tsx  | 15 +++++++++++
 .../Copy/fragments/CopyPrimitiveRoot.tsx      | 21 +++++++++++++++
 .../Copy/fragments/CopyPrimitiveTrigger.tsx   | 26 +++++++++++++++++++
 src/core/primitives/Copy/index.tsx            | 11 ++++++++
 .../Copy/stories/CopyPrimitive.stories.tsx    | 24 +++++++++++++++++
 6 files changed, 102 insertions(+)
 create mode 100644 src/core/primitives/Copy/contexts/CopyPrimitiveContext.tsx
 create mode 100644 src/core/primitives/Copy/fragments/CopyPrimitiveFeedback.tsx
 create mode 100644 src/core/primitives/Copy/fragments/CopyPrimitiveRoot.tsx
 create mode 100644 src/core/primitives/Copy/fragments/CopyPrimitiveTrigger.tsx
 create mode 100644 src/core/primitives/Copy/index.tsx
 create mode 100644 src/core/primitives/Copy/stories/CopyPrimitive.stories.tsx

diff --git a/src/core/primitives/Copy/contexts/CopyPrimitiveContext.tsx b/src/core/primitives/Copy/contexts/CopyPrimitiveContext.tsx
new file mode 100644
index 00000000..26ea58fb
--- /dev/null
+++ b/src/core/primitives/Copy/contexts/CopyPrimitiveContext.tsx
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const CopyPrimitiveContext = createContext({});
+
+export default CopyPrimitiveContext;
diff --git a/src/core/primitives/Copy/fragments/CopyPrimitiveFeedback.tsx b/src/core/primitives/Copy/fragments/CopyPrimitiveFeedback.tsx
new file mode 100644
index 00000000..6c51b470
--- /dev/null
+++ b/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;
diff --git a/src/core/primitives/Copy/fragments/CopyPrimitiveRoot.tsx b/src/core/primitives/Copy/fragments/CopyPrimitiveRoot.tsx
new file mode 100644
index 00000000..7557233e
--- /dev/null
+++ b/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;
diff --git a/src/core/primitives/Copy/fragments/CopyPrimitiveTrigger.tsx b/src/core/primitives/Copy/fragments/CopyPrimitiveTrigger.tsx
new file mode 100644
index 00000000..df10d1ac
--- /dev/null
+++ b/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;
diff --git a/src/core/primitives/Copy/index.tsx b/src/core/primitives/Copy/index.tsx
new file mode 100644
index 00000000..82d25646
--- /dev/null
+++ b/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;
diff --git a/src/core/primitives/Copy/stories/CopyPrimitive.stories.tsx b/src/core/primitives/Copy/stories/CopyPrimitive.stories.tsx
new file mode 100644
index 00000000..65afc535
--- /dev/null
+++ b/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'
+    }
+};

From b192cc06d8e263490af1b22e53c8de895224f183 Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Mon, 18 Nov 2024 00:07:01 +0530
Subject: [PATCH 2/2] Add Copy component with trigger, feedback, and styles

---
 src/components/ui/Avatar/Avatar.tsx           |  3 +-
 src/components/ui/Copy/Copy.tsx               | 20 ++++++++++
 .../ui/Copy/stories/Copy.stories.tsx          | 39 +++++++++++++++++++
 .../Copy/fragments/CopyPrimitiveFeedback.tsx  |  6 +--
 .../Copy/fragments/CopyPrimitiveRoot.tsx      | 10 +++--
 .../Copy/fragments/CopyPrimitiveTrigger.tsx   | 12 +++---
 .../Copy/stories/CopyPrimitive.stories.tsx    |  2 +-
 styles/themes/components/copy.scss            | 23 +++++++++++
 styles/themes/default.scss                    |  1 +
 9 files changed, 101 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ui/Copy/Copy.tsx
 create mode 100644 src/components/ui/Copy/stories/Copy.stories.tsx
 create mode 100644 styles/themes/components/copy.scss

diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx
index 3bdd781f..17d92c9d 100644
--- a/src/components/ui/Avatar/Avatar.tsx
+++ b/src/components/ui/Avatar/Avatar.tsx
@@ -16,12 +16,11 @@ export type AvatarProps = {
 
 const Avatar = ({ customRootClass = '', fallback, className, src, alt, ...props }: AvatarProps) => {
     return (
-        <AvatarPrimitive.Root src={src} customRootClass={customRootClass}>
+        <AvatarPrimitive.Root src={src} customRootClass={customRootClass} {...props}>
             <AvatarPrimitive.Image
                 src={src}
                 alt={alt}
                 className={className}
-                {...props}
             />
             <AvatarPrimitive.Fallback>
                 {fallback}
diff --git a/src/components/ui/Copy/Copy.tsx b/src/components/ui/Copy/Copy.tsx
new file mode 100644
index 00000000..f910f56d
--- /dev/null
+++ b/src/components/ui/Copy/Copy.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import CopyPrimitive from '~/core/primitives/Copy';
+
+const COMPONENT_NAME = 'Copy';
+
+const Copy = ({ customRootClass = '', children, isCopiedContent = 'Copied!', resetDelay = 2000, copyContent = '', ...props }: any) => {
+    return <CopyPrimitive.Root asChild customRootClass={customRootClass} {...props}>
+        <CopyPrimitive.Trigger resetDelay={resetDelay} copyContent={copyContent} >{children}</CopyPrimitive.Trigger>
+        <CopyPrimitive.Feedback >
+            {isCopiedContent}
+        </CopyPrimitive.Feedback>
+    </CopyPrimitive.Root>;
+};
+
+Copy.displayName = COMPONENT_NAME;
+Copy.Root = CopyPrimitive.Root;
+Copy.Trigger = CopyPrimitive.Trigger;
+Copy.Feedback = CopyPrimitive.Feedback;
+
+export default Copy;
diff --git a/src/components/ui/Copy/stories/Copy.stories.tsx b/src/components/ui/Copy/stories/Copy.stories.tsx
new file mode 100644
index 00000000..c79369b6
--- /dev/null
+++ b/src/components/ui/Copy/stories/Copy.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Copy from '../Copy';
+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
+
+const CopyIcon = () => <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>;
+
+const TickIcon = () => <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>;
+
+export default {
+    title: 'Components/Copy',
+    component: Copy,
+    render: (args: any) => <SandboxEditor>
+        <div >
+            <Copy.Root {...args}>
+                <Copy.Trigger copyContent="Hello, world!" {...args}>
+                    <div className="flex items-center gap-2">
+                        <span>Copy</span>
+                        <CopyIcon />
+                    </div>
+                </Copy.Trigger>
+                <Copy.Feedback {...args}>
+                    <div className="flex items-center gap-2">
+                        <span>Copied!</span>
+                        <TickIcon />
+                    </div>
+                </Copy.Feedback>
+            </Copy.Root>
+        </div>
+    </SandboxEditor>
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Button = {
+    args: {
+        children: 'Copy'
+    }
+};
diff --git a/src/core/primitives/Copy/fragments/CopyPrimitiveFeedback.tsx b/src/core/primitives/Copy/fragments/CopyPrimitiveFeedback.tsx
index 6c51b470..bab77ec0 100644
--- a/src/core/primitives/Copy/fragments/CopyPrimitiveFeedback.tsx
+++ b/src/core/primitives/Copy/fragments/CopyPrimitiveFeedback.tsx
@@ -2,14 +2,14 @@ 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);
+const CopyPrimitiveFeedback = ({ children, className = '', ...props }: any) => {
+    const { isCopied, rootClass } = useContext(CopyPrimitiveContext);
 
     if (!isCopied) {
         return null;
     }
 
-    return <Primitive.span {...props}>{isCopiedText}</Primitive.span>;
+    return <Primitive.span className={`${rootClass}-feedback ${className}`} {...props}>{children}</Primitive.span>;
 };
 
 export default CopyPrimitiveFeedback;
diff --git a/src/core/primitives/Copy/fragments/CopyPrimitiveRoot.tsx b/src/core/primitives/Copy/fragments/CopyPrimitiveRoot.tsx
index 7557233e..3c564bca 100644
--- a/src/core/primitives/Copy/fragments/CopyPrimitiveRoot.tsx
+++ b/src/core/primitives/Copy/fragments/CopyPrimitiveRoot.tsx
@@ -1,19 +1,23 @@
 import React, { useState } from 'react';
 import Primitive from '~/core/primitives/Primitive';
 
+import { customClassSwitcher } from '~/core/customClassSwitcher';
+
 import CopyPrimitiveContext from '../contexts/CopyPrimitiveContext';
 
-const CopyPrimitiveRoot = ({ children, ...props }: any) => {
+const CopyPrimitiveRoot = ({ customRootClass = '', className = '', children, ...props }: any) => {
     const [isCopied, setIsCopied] = useState(false);
+    const rootClass = customClassSwitcher(customRootClass, 'Copy');
 
     const values = {
         isCopied,
-        setIsCopied
+        setIsCopied,
+        rootClass
     };
 
     return (
         <CopyPrimitiveContext.Provider value={values}>
-            <Primitive.button {...props}>{children}</Primitive.button>
+            <Primitive.span className={`${rootClass} ${className}`} {...props}>{children}</Primitive.span>
         </CopyPrimitiveContext.Provider>
     );
 };
diff --git a/src/core/primitives/Copy/fragments/CopyPrimitiveTrigger.tsx b/src/core/primitives/Copy/fragments/CopyPrimitiveTrigger.tsx
index df10d1ac..101b799f 100644
--- a/src/core/primitives/Copy/fragments/CopyPrimitiveTrigger.tsx
+++ b/src/core/primitives/Copy/fragments/CopyPrimitiveTrigger.tsx
@@ -3,24 +3,24 @@ 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 CopyTrigger = ({ children, className = '', copyContent = '', resetDelay = 2000, ...props }: any) => {
+    const { setIsCopied, isCopied, rootClass } = useContext(CopyPrimitiveContext);
 
     const handleClick = () => {
-        if (text) {
+        if (copyContent) {
             setIsCopied(true);
-            navigator.clipboard.writeText(text);
+            navigator.clipboard.writeText(copyContent);
             setTimeout(() => {
                 setIsCopied(false);
             }, resetDelay);
         }
     };
 
-    if (!text || isCopied) {
+    if (!copyContent || isCopied) {
         return null;
     }
 
-    return <Primitive.button {...props} onClick={handleClick}>{children}</Primitive.button>;
+    return <Primitive.button className={`${rootClass}-trigger ${className}`} {...props} onClick={handleClick}>{children}</Primitive.button>;
 };
 
 export default CopyTrigger;
diff --git a/src/core/primitives/Copy/stories/CopyPrimitive.stories.tsx b/src/core/primitives/Copy/stories/CopyPrimitive.stories.tsx
index 65afc535..4a3521e0 100644
--- a/src/core/primitives/Copy/stories/CopyPrimitive.stories.tsx
+++ b/src/core/primitives/Copy/stories/CopyPrimitive.stories.tsx
@@ -9,7 +9,7 @@ export default {
     render: (args: any) => <SandboxEditor>
         <div >
             <CopyPrimitive.Root {...args}>
-                <CopyPrimitive.Trigger text="Hello, world!" {...args}>Copy</CopyPrimitive.Trigger>
+                <CopyPrimitive.Trigger copyContent="Hello, world!" {...args}>Copy</CopyPrimitive.Trigger>
                 <CopyPrimitive.Feedback {...args}>Copied!</CopyPrimitive.Feedback>
             </CopyPrimitive.Root>
         </div>
diff --git a/styles/themes/components/copy.scss b/styles/themes/components/copy.scss
new file mode 100644
index 00000000..bdad7882
--- /dev/null
+++ b/styles/themes/components/copy.scss
@@ -0,0 +1,23 @@
+.rad-ui-copy{
+    border: 1px solid var(--rad-ui-color-gray-700);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background-color: var(--rad-ui-color-gray-100);
+    border-radius: 12px;
+    cursor: pointer;
+
+    .rad-ui-copy-trigger{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px;
+    }
+
+    .rad-ui-copy-feedback{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px;
+    }
+}
diff --git a/styles/themes/default.scss b/styles/themes/default.scss
index 84640c0d..aa48dd70 100644
--- a/styles/themes/default.scss
+++ b/styles/themes/default.scss
@@ -7,6 +7,7 @@
 @import "./components/button.scss";
 @import "./components/callout.scss";
 @import "./components/card.scss";
+@import "./components/copy.scss";
 @import "./components/table.scss";
 @import "./components/code.scss";
 @import "./components/heading.scss";