feat(ui,dashboard): Move Divider component to UI package (#11357)

.changeset/lucky-terms-hammer.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/ui": patch
+"@medusajs/dashboard": patch
+---
+
+feat(ui,dashboard): Move Divider component to UI package

packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx

@@ -14,12 +14,11 @@ import {
   Tag,
   Users,
 } from "@medusajs/icons"
-import { Avatar, DropdownMenu, Text, clx } from "@medusajs/ui"
+import { Avatar, Divider, DropdownMenu, Text, clx } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
 import { useStore } from "../../../hooks/api/store"
-import { Divider } from "../../common/divider"
 import { Skeleton } from "../../common/skeleton"
 import { INavItem, NavItem } from "../../layout/nav-item"
 import { Shell } from "../../layout/shell"

packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx

@@ -1,11 +1,10 @@
 import { ArrowUturnLeft, MinusMini } from "@medusajs/icons"
-import { IconButton, Text, clx } from "@medusajs/ui"
+import { clx, Divider, IconButton, Text } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { Fragment, useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 
-import { Divider } from "../../common/divider"
 import { INavItem, NavItem } from "../nav-item"
 import { Shell } from "../shell"
 

packages/admin/dashboard/src/routes/inventory/inventory-create/components/inventory-create-form/inventory-create-form.tsx

@@ -1,12 +1,13 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import {
   Button,
+  clx,
+  Divider,
   Heading,
   Input,
   ProgressStatus,
   ProgressTabs,
   Textarea,
-  clx,
   toast,
 } from "@medusajs/ui"
 import { useCallback, useEffect, useState } from "react"
@@ -14,7 +15,6 @@ import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
 import { HttpTypes } from "@medusajs/types"
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { SwitchBox } from "../../../../../components/common/switch-box"
 import { CountrySelect } from "../../../../../components/inputs/country-select"

packages/admin/dashboard/src/routes/locations/common/components/conditional-price-form/conditional-price-form.tsx

@@ -11,6 +11,7 @@ import {
   Button,
   clx,
   CurrencyInput,
+  Divider,
   Heading,
   IconButton,
   Label,
@@ -30,7 +31,6 @@ import {
 import { Trans, useTranslation } from "react-i18next"
 
 import { formatValue } from "react-currency-input-field"
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { StackedFocusModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"

packages/admin/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx

@@ -11,6 +11,7 @@ import { HttpTypes } from "@medusajs/types"
 import {
   Badge,
   Container,
+  Divider,
   Heading,
   IconButton,
   StatusBadge,
@@ -23,7 +24,6 @@ import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
-import { Divider } from "../../../../../components/common/divider"
 import { NoRecords } from "../../../../../components/common/empty-table-content"
 import { IconAvatar } from "../../../../../components/common/icon-avatar"
 import { LinkButton } from "../../../../../components/common/link-button"

packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-option-details-form.tsx

@@ -1,10 +1,9 @@
-import { Heading, Input, RadioGroup, Select, Text } from "@medusajs/ui"
+import { Divider, Heading, Input, RadioGroup, Select, Text } from "@medusajs/ui"
 import { UseFormReturn } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
 import { HttpTypes } from "@medusajs/types"
 
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { SwitchBox } from "../../../../../components/common/switch-box"
 import { Combobox } from "../../../../../components/inputs/combobox"

packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx

@@ -1,11 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod"
 import { HttpTypes } from "@medusajs/types"
-import { Button, Input, RadioGroup, toast } from "@medusajs/ui"
+import { Button, Divider, Input, RadioGroup, toast } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
-import { zodResolver } from "@hookform/resolvers/zod"
 import * as zod from "zod"
 
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { SwitchBox } from "../../../../../components/common/switch-box"
 import { Combobox } from "../../../../../components/inputs/combobox"

packages/admin/dashboard/src/routes/price-lists/price-list-configuration/components/price-list-configuration-form/price-list-configuration-form.tsx

@@ -4,6 +4,7 @@ import { HttpTypes } from "@medusajs/types"
 import {
   Button,
   DatePicker,
+  Divider,
   Heading,
   IconButton,
   Text,
@@ -14,7 +15,6 @@ import { useFieldArray, useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
 
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { StackedDrawer } from "../../../../../components/modals/stacked-drawer"

packages/admin/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx

@@ -2,6 +2,7 @@ import { MagnifyingGlass, XMarkMini } from "@medusajs/icons"
 import {
   Button,
   DatePicker,
+  Divider,
   Heading,
   IconButton,
   Input,
@@ -14,7 +15,6 @@ import {
 import { useFieldArray, type UseFormReturn } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { StackedFocusModal } from "../../../../../components/modals/stacked-focus-modal"
 import { useStackedModal } from "../../../../../components/modals/stacked-modal-provider"

packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx

@@ -1,11 +1,10 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Button, Heading, Input, Switch, toast } from "@medusajs/ui"
+import { Button, Divider, Heading, Input, Switch, toast } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
 
 import { HttpTypes } from "@medusajs/types"
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { Combobox } from "../../../../../components/inputs/combobox"
 import { CountrySelect } from "../../../../../components/inputs/country-select"

packages/admin/dashboard/src/routes/products/common/components/category-combobox/category-combobox.tsx

@@ -6,7 +6,7 @@ import {
   XMarkMini,
 } from "@medusajs/icons"
 import { AdminProductCategoryResponse } from "@medusajs/types"
-import { Text, clx } from "@medusajs/ui"
+import { Divider, Text, clx } from "@medusajs/ui"
 import { Popover as RadixPopover } from "radix-ui"
 import {
   CSSProperties,
@@ -22,7 +22,6 @@ import {
   useState,
 } from "react"
 import { Trans, useTranslation } from "react-i18next"
-import { Divider } from "../../../../../components/common/divider"
 import { TextSkeleton } from "../../../../../components/common/skeleton"
 import { useProductCategories } from "../../../../../hooks/api/categories"
 import { useDebouncedSearch } from "../../../../../hooks/use-debounced-search"

packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx

@@ -1,8 +1,7 @@
-import { Heading } from "@medusajs/ui"
+import { Divider, Heading } from "@medusajs/ui"
 import { UseFormReturn } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
-import { Divider } from "../../../../../components/common/divider"
 import {
   FormExtensionZone,
   useDashboardExtension,

packages/admin/dashboard/src/routes/products/product-import/components/import-summary.tsx

@@ -1,6 +1,5 @@
 import { HttpTypes } from "@medusajs/types"
-import { Divider } from "../../../../components/common/divider"
-import { Text } from "@medusajs/ui"
+import { Divider, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 
 export const ImportSummary = ({
@@ -11,12 +10,12 @@ export const ImportSummary = ({
   const { t } = useTranslation()
 
   return (
-    <div className="shadow-elevation-card-rest bg-ui-bg-component transition-fg rounded-md flex flex-row px-3 py-2">
+    <div className="shadow-elevation-card-rest bg-ui-bg-component transition-fg flex flex-row rounded-md px-3 py-2">
       <Stat
         title={summary.toCreate.toLocaleString()}
         description={t("products.import.upload.productsToCreate")}
       />
-      <Divider orientation="vertical" className="px-3 h-10" />
+      <Divider orientation="vertical" className="h-10 px-3" />
       <Stat
         title={summary.toUpdate.toLocaleString()}
         description={t("products.import.upload.productsToUpdate")}
@@ -33,7 +32,7 @@ const Stat = ({
   description: string
 }) => {
   return (
-    <div className="flex-1 flex flex-col justify-center">
+    <div className="flex flex-1 flex-col justify-center">
       <Text size="xlarge" className="font-sans font-medium">
         {title}
       </Text>

packages/admin/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx

@@ -13,6 +13,7 @@ import {
   Button,
   clx,
   CurrencyInput,
+  Divider,
   Heading,
   Input,
   ProgressStatus,
@@ -25,7 +26,6 @@ import { useEffect, useMemo, useState } from "react"
 import { useForm, useWatch } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
 import { z } from "zod"
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { DeprecatedPercentageInput } from "../../../../../components/inputs/percentage-input"
 import {

packages/admin/dashboard/src/routes/tax-regions/common/components/tax-override-card/tax-override-card.tsx

@@ -5,14 +5,20 @@ import {
   TriangleRightMini,
 } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
-import { Badge, IconButton, StatusBadge, Text, Tooltip } from "@medusajs/ui"
+import {
+  Badge,
+  Divider,
+  IconButton,
+  StatusBadge,
+  Text,
+  Tooltip,
+} from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { ComponentPropsWithoutRef } from "react"
 import { useTranslation } from "react-i18next"
 
 import { FetchError } from "@medusajs/js-sdk"
 import { ActionMenu } from "../../../../../components/common/action-menu"
-import { Divider } from "../../../../../components/common/divider"
 import { useProductTypes } from "../../../../../hooks/api/product-types"
 import { useProducts } from "../../../../../hooks/api/products"
 import { formatPercentage } from "../../../../../lib/percentage-helpers"
@@ -31,15 +37,18 @@ export const TaxOverrideCard = ({ taxRate }: TaxOverrideCardProps) => {
     return null
   }
 
-  const groupedRules = taxRate.rules.reduce((acc, rule) => {
-    if (!acc[rule.reference]) {
-      acc[rule.reference] = []
-    }
+  const groupedRules = taxRate.rules.reduce(
+    (acc, rule) => {
+      if (!acc[rule.reference]) {
+        acc[rule.reference] = []
+      }
 
-    acc[rule.reference].push(rule.reference_id)
+      acc[rule.reference].push(rule.reference_id)
 
-    return acc
-  }, {} as Record<string, string[]>)
+      return acc
+    },
+    {} as Record<string, string[]>
+  )
 
   const validKeys = Object.values(TaxRateRuleReferenceType)
   const numberOfTargets = Object.keys(groupedRules).map((key) =>

packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-create/components/tax-region-override-create-form/tax-region-tax-override-create.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import {
   Button,
+  Divider,
   Heading,
   Hint,
   Input,
@@ -16,7 +17,6 @@ import { z } from "zod"
 import { MagnifyingGlass } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { useTranslation } from "react-i18next"
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { SwitchBox } from "../../../../../components/common/switch-box"
 import { PercentageInput } from "../../../../../components/inputs/percentage-input"

packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/components/tax-region-tax-override-edit-form/tax-region-tax-override-edit-form.tsx

@@ -3,6 +3,7 @@ import { MagnifyingGlass } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import {
   Button,
+  Divider,
   Heading,
   Hint,
   Input,
@@ -16,7 +17,6 @@ import { useFieldArray, useForm, useWatch } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
 
-import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { SwitchBox } from "../../../../../components/common/switch-box"
 import { PercentageInput } from "../../../../../components/inputs/percentage-input"

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+
+import { Divider } from "./divider"
+
+const meta: Meta<typeof Divider> = {
+  title: "Components/Divider",
+  component: Divider,
+  parameters: {
+    layout: "centered",
+  },
+  render: (args) => (
+    <div className="flex h-[200px] w-[200px] items-center justify-center">
+      <Divider {...args} />
+    </div>
+  ),
+}
+
+export default meta
+
+type Story = StoryObj<typeof Divider>
+
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+}
+
+export const Vertical: Story = {
+  args: {
+    orientation: "vertical",
+  },
+}
+
+export const Dashed: Story = {
+  args: {
+    variant: "dashed",
+  },
+}

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

@@ -1,8 +1,8 @@
-import { clx } from "@medusajs/ui"
-import { ComponentPropsWithoutRef } from "react"
+import { clx } from "@/utils/clx"
+import * as React from "react"
 
 interface DividerProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
   orientation?: "horizontal" | "vertical"
   variant?: "dashed" | "solid"
 }

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

@@ -13,6 +13,7 @@ export { Container } from "./components/container"
 export { Copy } from "./components/copy"
 export { CurrencyInput } from "./components/currency-input"
 export { DatePicker } from "./components/date-picker"
+export { Divider } from "./components/divider"
 export { Drawer } from "./components/drawer"
 export { DropdownMenu } from "./components/dropdown-menu"
 export { FocusModal } from "./components/focus-modal"