feat: added script copy button (#342)

* feat: added script copy button * feat: added dependecy, removed the dock change * fix: update scripts * fix: update sidebar * fix: update docs * fix: update * fix: update --------- Co-authored-by: Dillion Verma <hello@dillion.io>
magicuidesign · Dec 24, 2024 · b7ef970 · b7ef970
1 parent bd8ab82
commit b7ef970
Show file tree

Hide file tree

Showing 14 changed files with 521 additions and 75 deletions.
diff --git a/__registry__/index.tsx b/__registry__/index.tsx
@@ -148,6 +148,19 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: [],
     },
+    "script-copy-btn": {
+      name: "script-copy-btn",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: ["registry/default/magicui/script-copy-btn.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/magicui/script-copy-btn.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
     marquee: {
       name: "marquee",
       type: "registry:ui",
@@ -1031,6 +1044,19 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: [],
     },
+    "script-copy-btn-demo": {
+      name: "script-copy-btn-demo",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: ["registry/default/example/script-copy-btn-demo.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/example/script-copy-btn-demo.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
     "marquee-demo": {
       name: "marquee-demo",
       type: "registry:example",

diff --git a/config/docs.ts b/config/docs.ts
@@ -201,6 +201,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "",
         },
+        {
+          title: "Script Copy Button",
+          href: `/docs/components/script-copy-btn`,
+          items: [],
+          label: "New",
+        },
         {
           title: "Scratch To Reveal",
           href: `/docs/components/scratch-to-reveal`,

diff --git a/content/docs/components/script-copy-btn.mdx b/content/docs/components/script-copy-btn.mdx
@@ -0,0 +1,50 @@
+---
+title: Script Copy Button
+date: 2023-11-18
+description: Copy code to clipboard
+author: dillionverma
+published: true
+---
+
+<ComponentPreview name="script-copy-btn-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add "https://magicui.design/r/script-copy-btn"
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="script-copy-btn" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop                       | Type                     | Description                                                 | Default |
+| -------------------------- | ------------------------ | ----------------------------------------------------------- | ------- |
+| className                  | string                   | The class name to be applied to the component               |         |
+| showMultiplePackageOptions | boolean                  | Whether to show options for multiple package managers       | true    |
+| codeLanguage               | string                   | The language of the code snippet (e.g., "shell")            |         |
+| lightTheme                 | string                   | The theme to use for light mode                             |         |
+| darkTheme                  | string                   | The theme to use for dark mode                              |         |
+| commandMap                 | Record \<string, string> | A map of package manager names to their respective commands |         |
diff --git a/package.json b/package.json
@@ -27,10 +27,10 @@
     "@heroicons/react": "^2.1.3",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
@@ -46,7 +46,7 @@
     "@types/lodash.template": "^4.5.3",
     "autoprefixer": "10.4.14",
     "canvas-confetti": "^1.9.3",
-    "class-variance-authority": "^0.6.0",
+    "class-variance-authority": "^0.6.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "cobe": "^0.6.3",
@@ -69,7 +69,7 @@
     "react": "18.3.1",
     "react-day-picker": "^8.9.1",
     "react-dom": "18.3.1",
-    "react-hook-form": "^7.45.0",
+    "react-hook-form": "^7.50.1",
     "react-icon-cloud": "^4.1.4",
     "react-tweet": "^3.2.1",
     "schema-dts": "^1.1.2",
@@ -88,7 +88,7 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.6.4",
-    "@types/node": "^20.8.9",
+    "@types/node": "^20.11.22",
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
     "@types/unist": "^3.0.2",
@@ -99,7 +99,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-tailwindcss": "3.13.1",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.5",
+    "lint-staged": "^15.2.7",
     "mdast-util-toc": "^6.1.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",