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

packages/design-system/ui/src/components/progress-tabs/index.ts

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

packages/design-system/ui/src/components/progress-tabs/progress-tabs.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+
+import { Container } from "../container"
+import { ProgressTabs } from "./progress-tabs"
+
+const meta: Meta<typeof ProgressTabs> = {
+  title: "Components/ProgressTabs",
+  component: ProgressTabs,
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ProgressTabs>
+
+const Demo = () => {
+  return (
+    <div className="h-screen max-h-[500px] w-screen max-w-[700px] overflow-hidden p-4">
+      <Container className="h-full w-full overflow-hidden p-0">
+        <ProgressTabs defaultValue="tab1">
+          <ProgressTabs.List>
+            <ProgressTabs.Trigger value="tab1">Tab 1</ProgressTabs.Trigger>
+            <ProgressTabs.Trigger value="tab2">Tab 2</ProgressTabs.Trigger>
+            <ProgressTabs.Trigger value="tab3" disabled>
+              Tab 3
+            </ProgressTabs.Trigger>
+          </ProgressTabs.List>
+          <div className="txt-compact-medium text-ui-fg-base border-ui-border-base h-full border-t p-3">
+            <ProgressTabs.Content value="tab1">
+              Tab 1 content
+            </ProgressTabs.Content>
+            <ProgressTabs.Content value="tab2">
+              Tab 2 content
+            </ProgressTabs.Content>
+            <ProgressTabs.Content value="tab3">
+              Tab 3 content
+            </ProgressTabs.Content>
+          </div>
+        </ProgressTabs>
+      </Container>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <Demo />,
+}

packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  CheckCircleSolid,
+  CircleDottedLine,
+  CircleHalfSolid,
+} from "@medusajs/icons"
+import * as ProgressTabsPrimitives from "@radix-ui/react-tabs"
+import * as React from "react"
+
+import { ProgressStatus } from "@/types"
+import { clx } from "@/utils/clx"
+
+const ProgressTabsRoot = (props: ProgressTabsPrimitives.TabsProps) => {
+  return <ProgressTabsPrimitives.Root {...props} />
+}
+ProgressTabsRoot.displayName = "ProgressTabs"
+
+interface IndicatorProps
+  extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
+  status?: ProgressStatus
+}
+
+const ProgressIndicator = ({ status, className, ...props }: IndicatorProps) => {
+  const Icon = React.useMemo(() => {
+    switch (status) {
+      case "not-started":
+        return CircleDottedLine
+      case "in-progress":
+        return CircleHalfSolid
+      case "completed":
+        return CheckCircleSolid
+      default:
+        return CircleDottedLine
+    }
+  }, [status])
+
+  return (
+    <span
+      className={clx(
+        "text-ui-fg-muted group-data-[state=active]/trigger:text-ui-fg-interactive",
+        className
+      )}
+      {...props}
+    >
+      <Icon />
+    </span>
+  )
+}
+
+interface ProgressTabsTriggerProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.Trigger>,
+    "asChild"
+  > {
+  status?: ProgressStatus
+}
+
+const ProgressTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof ProgressTabsPrimitives.Trigger>,
+  ProgressTabsTriggerProps
+>(({ className, children, status = "not-started", ...props }, ref) => (
+  <ProgressTabsPrimitives.Trigger
+    ref={ref}
+    className={clx(
+      "txt-compact-small-plus transition-fg text-ui-fg-muted bg-ui-bg-subtle border-r-ui-border-base inline-flex h-14 w-full max-w-[200px] flex-1 items-center gap-x-2 border-r px-4 text-left outline-none",
+      "group/trigger overflow-hidden text-ellipsis whitespace-nowrap",
+      "disabled:bg-ui-bg-disabled disabled:text-ui-fg-muted",
+      "hover:bg-ui-bg-subtle-hover",
+      "focus:bg-ui-bg-base focus:z-[1]",
+      "data-[state=active]:text-ui-fg-base data-[state=active]:bg-ui-bg-base",
+      className
+    )}
+    {...props}
+  >
+    <ProgressIndicator status={status} />
+    {children}
+  </ProgressTabsPrimitives.Trigger>
+))
+ProgressTabsTrigger.displayName = "ProgressTabs.Trigger"
+
+const ProgressTabsList = React.forwardRef<
+  React.ElementRef<typeof ProgressTabsPrimitives.List>,
+  React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.List>
+>(({ className, ...props }, ref) => (
+  <ProgressTabsPrimitives.List
+    ref={ref}
+    className={clx("flex items-center", className)}
+    {...props}
+  />
+))
+ProgressTabsList.displayName = "ProgressTabs.List"
+
+const ProgressTabsContent = React.forwardRef<
+  React.ElementRef<typeof ProgressTabsPrimitives.Content>,
+  React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.Content>
+>(({ className, ...props }, ref) => {
+  return (
+    <ProgressTabsPrimitives.Content
+      ref={ref}
+      className={clx("outline-none", className)}
+      {...props}
+    />
+  )
+})
+ProgressTabsContent.displayName = "ProgressTabs.Content"
+
+const ProgressTabs = Object.assign(ProgressTabsRoot, {
+  Trigger: ProgressTabsTrigger,
+  List: ProgressTabsList,
+  Content: ProgressTabsContent,
+})
+
+export { ProgressTabs }