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

packages/design-system/ui/src/components/tooltip/index.ts

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

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

@@ -0,0 +1,34 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { Tooltip } from "./tooltip"
+
+test("Tooltip renders trigger element", () => {
+  render(
+    <Tooltip content="Tooltip text">
+      <div>Hover me</div>
+    </Tooltip>
+  )
+
+  const triggerElement = screen.getByText("Hover me")
+  expect(triggerElement).toBeInTheDocument()
+})
+
+test("Tooltip shows on hover", async () => {
+  render(
+    <Tooltip content="Tooltip text" data-testid="tooltip">
+      <div>Hover me</div>
+    </Tooltip>
+  )
+  const triggerElement = screen.getByText("Hover me")
+
+  const user = userEvent.setup()
+
+  await user.hover(triggerElement)
+
+  await waitFor(() => {
+    const tooltip = screen.getByTestId("tooltip")
+
+    expect(tooltip).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+
+import { InformationCircleSolid } from "@medusajs/icons"
+import { Tooltip } from "./tooltip"
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    side: {
+      options: ["top", "bottom", "left", "right"],
+      control: { type: "radio" },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Tooltip>
+
+export const Default: Story = {
+  args: {
+    content: "The quick brown fox jumps over the lazy dog.",
+    side: "top",
+    children: <InformationCircleSolid />,
+  },
+}

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

@@ -0,0 +1,66 @@
+"use client"
+
+import * as Primitives from "@radix-ui/react-tooltip"
+import * as React from "react"
+
+import { clx } from "@/utils/clx"
+
+interface TooltipProps
+  extends Omit<Primitives.TooltipContentProps, "content" | "onClick">,
+    Pick<
+      Primitives.TooltipProps,
+      "open" | "defaultOpen" | "onOpenChange" | "delayDuration"
+    > {
+  content: React.ReactNode
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  side?: "bottom" | "left" | "top" | "right"
+  maxWidth?: number
+}
+
+const Tooltip = ({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  maxWidth = 220,
+  className,
+  side,
+  sideOffset = 8,
+  onClick,
+  ...props
+}: TooltipProps) => {
+  return (
+    <Primitives.Provider delayDuration={100}>
+      <Primitives.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
+      >
+        <Primitives.Trigger onClick={onClick} asChild>
+          {children}
+        </Primitives.Trigger>
+        <Primitives.Portal>
+          <Primitives.Content
+            side={side}
+            sideOffset={sideOffset}
+            align="center"
+            className={clx(
+              "txt-compact-xsmall-plus text-ui-fg-subtle bg-ui-bg-base shadow-elevation-tooltip rounded-lg px-3 py-2",
+              "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+              className
+            )}
+            {...props}
+            style={{ ...props.style, maxWidth }}
+          >
+            {content}
+          </Primitives.Content>
+        </Primitives.Portal>
+      </Primitives.Root>
+    </Primitives.Provider>
+  )
+}
+
+export { Tooltip }