diff --git a/.changeset/lucky-terms-hammer.md b/.changeset/lucky-terms-hammer.md new file mode 100644 index 0000000000..5e1a4d234c --- /dev/null +++ b/.changeset/lucky-terms-hammer.md @@ -0,0 +1,6 @@ +--- +"@medusajs/ui": patch +"@medusajs/dashboard": patch +--- + +feat(ui,dashboard): Move Divider component to UI package diff --git a/packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx b/packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx index 3b4d748104..ca406063bc 100644 --- a/packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx b/packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx index 067e78e60e..ac4db2666e 100644 --- a/packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/inventory/inventory-create/components/inventory-create-form/inventory-create-form.tsx b/packages/admin/dashboard/src/routes/inventory/inventory-create/components/inventory-create-form/inventory-create-form.tsx index f5e7b2a12e..734b335c40 100644 --- a/packages/admin/dashboard/src/routes/inventory/inventory-create/components/inventory-create-form/inventory-create-form.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/locations/common/components/conditional-price-form/conditional-price-form.tsx b/packages/admin/dashboard/src/routes/locations/common/components/conditional-price-form/conditional-price-form.tsx index 003f19cb7e..64d4254e3e 100644 --- a/packages/admin/dashboard/src/routes/locations/common/components/conditional-price-form/conditional-price-form.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx b/packages/admin/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx index a138571b24..8927b8693e 100644 --- a/packages/admin/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-option-details-form.tsx b/packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-option-details-form.tsx index 6fba5c25ef..5df46ac546 100644 --- a/packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-option-details-form.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx b/packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx index 3df1f5be55..bed53bbe99 100644 --- a/packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/price-lists/price-list-configuration/components/price-list-configuration-form/price-list-configuration-form.tsx b/packages/admin/dashboard/src/routes/price-lists/price-list-configuration/components/price-list-configuration-form/price-list-configuration-form.tsx index ed3d34f99b..a3808e9755 100644 --- a/packages/admin/dashboard/src/routes/price-lists/price-list-configuration/components/price-list-configuration-form/price-list-configuration-form.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx b/packages/admin/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx index eef7ec84d0..22302c19a3 100644 --- a/packages/admin/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx index 79f902e747..87ca9a7c62 100644 --- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/products/common/components/category-combobox/category-combobox.tsx b/packages/admin/dashboard/src/routes/products/common/components/category-combobox/category-combobox.tsx index c729fa6bda..088dccec57 100644 --- a/packages/admin/dashboard/src/routes/products/common/components/category-combobox/category-combobox.tsx +++ b/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" diff --git a/packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx b/packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx index 38d0205b15..f19678c170 100644 --- a/packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx +++ b/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, diff --git a/packages/admin/dashboard/src/routes/products/product-import/components/import-summary.tsx b/packages/admin/dashboard/src/routes/products/product-import/components/import-summary.tsx index 5f15b5942a..8aef4afa75 100644 --- a/packages/admin/dashboard/src/routes/products/product-import/components/import-summary.tsx +++ b/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 ( -
+
- + { return ( -
+
{title} diff --git a/packages/admin/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx b/packages/admin/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx index 7d3214bf79..9401703e90 100644 --- a/packages/admin/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx +++ b/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 { diff --git a/packages/admin/dashboard/src/routes/tax-regions/common/components/tax-override-card/tax-override-card.tsx b/packages/admin/dashboard/src/routes/tax-regions/common/components/tax-override-card/tax-override-card.tsx index 064ca4c9c7..951b084b31 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/common/components/tax-override-card/tax-override-card.tsx +++ b/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) + return acc + }, + {} as Record + ) const validKeys = Object.values(TaxRateRuleReferenceType) const numberOfTargets = Object.keys(groupedRules).map((key) => diff --git a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-create/components/tax-region-override-create-form/tax-region-tax-override-create.tsx b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-create/components/tax-region-override-create-form/tax-region-tax-override-create.tsx index 559931071f..c46ddce0f7 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-create/components/tax-region-override-create-form/tax-region-tax-override-create.tsx +++ b/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" diff --git a/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 b/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 index 1425ac7e43..f96942bf89 100644 --- a/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 +++ b/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" diff --git a/packages/design-system/ui/src/components/divider/divider.stories.tsx b/packages/design-system/ui/src/components/divider/divider.stories.tsx new file mode 100644 index 0000000000..64b7e06886 --- /dev/null +++ b/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 = { + title: "Components/Divider", + component: Divider, + parameters: { + layout: "centered", + }, + render: (args) => ( +
+ +
+ ), +} + +export default meta + +type Story = StoryObj + +export const Horizontal: Story = { + args: { + orientation: "horizontal", + }, +} + +export const Vertical: Story = { + args: { + orientation: "vertical", + }, +} + +export const Dashed: Story = { + args: { + variant: "dashed", + }, +} diff --git a/packages/admin/dashboard/src/components/common/divider/divider.tsx b/packages/design-system/ui/src/components/divider/divider.tsx similarity index 87% rename from packages/admin/dashboard/src/components/common/divider/divider.tsx rename to packages/design-system/ui/src/components/divider/divider.tsx index 913aa95514..9123eafd43 100644 --- a/packages/admin/dashboard/src/components/common/divider/divider.tsx +++ b/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, "children"> { + extends Omit, "children"> { orientation?: "horizontal" | "vertical" variant?: "dashed" | "solid" } diff --git a/packages/admin/dashboard/src/components/common/divider/index.ts b/packages/design-system/ui/src/components/divider/index.ts similarity index 100% rename from packages/admin/dashboard/src/components/common/divider/index.ts rename to packages/design-system/ui/src/components/divider/index.ts diff --git a/packages/design-system/ui/src/index.ts b/packages/design-system/ui/src/index.ts index 0a7c01fe02..405523a1e2 100644 --- a/packages/design-system/ui/src/index.ts +++ b/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"