Skip to content

Added Copy component #499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 31, 2024
Merged

Added Copy component #499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7feb126
Added Copy component
GoldGroove06 Oct 31, 2024
bf9e9ac
Merge branch 'rad-ui:main' into main
GoldGroove06 Oct 31, 2024
1c52147
Added Copy component `Copy.js`
GoldGroove06 Oct 31, 2024
195bf05
Merge branch 'main' of https://github.com/GoldGroove06/radui-fork
GoldGroove06 Oct 31, 2024
de1f542
Updated `Copy.js`
GoldGroove06 Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions docs/app/docs/first-steps/installation/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Text from "@radui/ui/Text"
import Heading from "@radui/ui/Heading"
import Link from "@radui/ui/Link"
import Code from "@radui/ui/Code"
import Copy from "@/components/Copy"


const PAGE_NAME = 'INSTALLATION'
Expand All @@ -23,12 +24,12 @@ const Introduction = () => {
</Text>

<Text className="mt-4 mb-1 font-medium">Using Yarn</Text>
<Code>
yarn add @radui/ui
<Code >
<Copy>yarn add @radui/ui</Copy>
</Code>
<Text className="mt-4 mb-1 font-medium">Using npm</Text>
<Code>
npm install @radui/ui --save
<Copy>npm install @radui/ui --save</Copy>
</Code>
</Documentation.Section>
</Documentation>
Expand Down
45 changes: 45 additions & 0 deletions docs/components/Copy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
"use client";
import { useState,useEffect } from "react"


function Copy({ children }) {
const [isCopied, setIsCopied] = useState(false)
Comment on lines +5 to +6
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add prop validation for better reliability.

Consider adding PropTypes or TypeScript interfaces to validate the children prop.

+import PropTypes from 'prop-types';

 function Copy({ children }) {
     const [isCopied, setIsCopied] = useState(false)
 }
+
+Copy.propTypes = {
+    children: PropTypes.node.isRequired,
+};
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function Copy({ children }) {
const [isCopied, setIsCopied] = useState(false)
import PropTypes from 'prop-types';
function Copy({ children }) {
const [isCopied, setIsCopied] = useState(false)
}
Copy.propTypes = {
children: PropTypes.node.isRequired,
};


const handleCopy = () => {
navigator.clipboard.writeText(children)
setIsCopied(true)

}
Comment on lines +8 to +12
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add error handling for clipboard operations.

The clipboard operation could fail and should be handled appropriately. Also, check for clipboard API availability.

 const handleCopy = () => {
-    navigator.clipboard.writeText(children)
-    setIsCopied(true)
+    if (!navigator?.clipboard) {
+        console.warn('Clipboard API not available');
+        return;
+    }
+    navigator.clipboard.writeText(children)
+        .then(() => setIsCopied(true))
+        .catch(err => {
+            console.error('Failed to copy:', err);
+        });
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const handleCopy = () => {
navigator.clipboard.writeText(children)
setIsCopied(true)
}
const handleCopy = () => {
if (!navigator?.clipboard) {
console.warn('Clipboard API not available');
return;
}
navigator.clipboard.writeText(children)
.then(() => setIsCopied(true))
.catch(err => {
console.error('Failed to copy:', err);
});
}


useEffect(() => {
let timeout;
if (isCopied) {
timeout = setTimeout(() => {
setIsCopied(false);
}, 2000);
}
return () => clearTimeout(timeout);
}, [isCopied]);
Comment on lines +14 to +22
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider making the timeout duration configurable.

The timeout duration is hardcoded to 2000ms. Consider making it a prop for better flexibility.

-function Copy({ children }) {
+function Copy({ children, copyTimeout = 2000 }) {
     // ...
     if (isCopied) {
         timeout = setTimeout(() => {
             setIsCopied(false);
-        }, 2000);
+        }, copyTimeout);
     }
     // ...
 }

Committable suggestion was skipped due to low confidence.


const TickIcon = () => {
return <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>
};

const CopyIcon = () => {
return <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>
}

return(
<span className = "flex items-center">
{children}
<button
onClick={handleCopy}
className=" m-0.5 mr-0 ml-2 px-1.5 py-1.5 border border-blue-500 text-sm font-bold rounded text-blue ;">
{isCopied ? <TickIcon /> : <CopyIcon />}
</button>
</span>

)
}

export default Copy