chore(ui,icons,ui-preset,toolbox): Move design system packages to monorepo (#5470)

packages/design-system/ui/src/components/copy/copy.spec.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+
+import { Copy } from "./copy"
+
+describe("Copy", () => {
+  it("should render", () => {
+    render(<Copy content="Hello world" />)
+    expect(screen.getByRole("button")).toBeInTheDocument()
+  })
+})

packages/design-system/ui/src/components/copy/copy.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+
+import { Button } from "@/components/button"
+import { Copy } from "./copy"
+
+const meta: Meta<typeof Copy> = {
+  title: "Components/Copy",
+  component: Copy,
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Copy>
+
+export const Default: Story = {
+  args: {
+    content: "Hello world",
+  },
+}
+
+export const AsChild: Story = {
+  args: {
+    content: "Hello world",
+    asChild: true,
+    children: <Button className="text-ui-fg-on-color">Copy</Button>,
+  },
+}

packages/design-system/ui/src/components/copy/copy.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { Tooltip } from "@/components/tooltip"
+import { clx } from "@/utils/clx"
+import { CheckCircleSolid, SquareTwoStack } from "@medusajs/icons"
+import { Slot } from "@radix-ui/react-slot"
+import copy from "copy-to-clipboard"
+import React, { useState } from "react"
+
+type CopyProps = {
+  content: string
+  asChild?: boolean
+}
+
+const Copy = React.forwardRef<
+  HTMLButtonElement,
+  React.HTMLAttributes<HTMLButtonElement> & CopyProps
+>(({ children, className, content, asChild = false, ...props }, ref) => {
+  const [done, setDone] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [text, setText] = useState("Copy")
+
+  const copyToClipboard = () => {
+    setDone(true)
+    copy(content)
+
+    setTimeout(() => {
+      setDone(false)
+    }, 2000)
+  }
+
+  React.useEffect(() => {
+    if (done) {
+      setText("Copied")
+      return
+    }
+
+    setTimeout(() => {
+      setText("Copy")
+    }, 500)
+  }, [done])
+
+  const Component = asChild ? Slot : "button"
+
+  return (
+    <Tooltip content={text} open={done || open} onOpenChange={setOpen}>
+      <Component
+        ref={ref}
+        aria-label="Copy code snippet"
+        type="button"
+        className={clx("text-ui-code-icon h-fit w-fit", className)}
+        onClick={copyToClipboard}
+        {...props}
+      >
+        {children ? children : done ? <CheckCircleSolid /> : <SquareTwoStack />}
+      </Component>
+    </Tooltip>
+  )
+})
+Copy.displayName = "Copy"
+
+export { Copy }

packages/design-system/ui/src/components/copy/index.tsx

@@ -0,0 +1 @@
+export * from "./copy"