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

2023-11-07 22:17:44 +01:00
parent 71853eafdd
commit e4ce2f4e07
722 changed files with 30300 additions and 186 deletions
@@ -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 }