Merge branch 'develop' into fix/clickable-rows

packages/admin-next/dashboard/src/components/common/icon-avatar/icon-avatar.tsx

@@ -3,19 +3,32 @@ import { PropsWithChildren } from "react"
 
 type IconAvatarProps = PropsWithChildren<{
   className?: string
+  size?: "small" | "large" | "xlarge"
 }>
 
 /**
  * Use this component when a design calls for an avatar with an icon.
  *
  * The `<Avatar/>` component from `@medusajs/ui` does not support passing an icon as a child.
  */
-export const IconAvatar = ({ children, className }: IconAvatarProps) => {
+export const IconAvatar = ({
+  size = "small",
+  children,
+  className,
+}: IconAvatarProps) => {
   return (
     <div
       className={clx(
-        "shadow-borders-base bg-ui-bg-base flex size-7 items-center justify-center rounded-md",
-        "[&>div]:bg-ui-bg-field [&>div]:text-ui-fg-subtle [&>div]:flex [&>div]:size-6 [&>div]:items-center [&>div]:justify-center [&>div]:rounded-[4px]",
+        "shadow-borders-base flex size-7 items-center justify-center",
+        "[&>div]:bg-ui-bg-field [&>div]:text-ui-fg-subtle [&>div]:flex [&>div]:size-6 [&>div]:items-center [&>div]:justify-center",
+        {
+          "size-7 rounded-md [&>div]:size-6 [&>div]:rounded-[4px]":
+            size === "small",
+          "size-10 rounded-lg [&>div]:size-9 [&>div]:rounded-[6px]":
+            size === "large",
+          "size-12 rounded-xl [&>div]:size-11 [&>div]:rounded-[10px]":
+            size === "xlarge",
+        },
         className
       )}
     >

packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx

@@ -136,6 +136,23 @@ export const GeneralSectionSkeleton = ({
   )
 }
 
+export const TableFooterSkeleton = ({ layout }: { layout: "fill" | "fit" }) => {
+  return (
+    <div
+      className={clx("flex items-center justify-between p-4", {
+        "border-t": layout === "fill",
+      })}
+    >
+      <Skeleton className="h-7 w-[138px]" />
+      <div className="flex items-center gap-x-2">
+        <Skeleton className="h-7 w-24" />
+        <Skeleton className="h-7 w-11" />
+        <Skeleton className="h-7 w-11" />
+      </div>
+    </div>
+  )
+}
+
 type TableSkeletonProps = {
   rowCount?: number
   search?: boolean
@@ -182,20 +199,7 @@ export const TableSkeleton = ({
           <Skeleton key={row} className="h-10 w-full rounded-none" />
         ))}
       </div>
-      {pagination && (
-        <div
-          className={clx("flex items-center justify-between p-4", {
-            "border-t": layout === "fill",
-          })}
-        >
-          <Skeleton className="h-7 w-[138px]" />
-          <div className="flex items-center gap-x-2">
-            <Skeleton className="h-7 w-24" />
-            <Skeleton className="h-7 w-11" />
-            <Skeleton className="h-7 w-11" />
-          </div>
-        </div>
-      )}
+      {pagination && <TableFooterSkeleton layout={layout} />}
     </div>
   )
 }

packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-country-select-cell.tsx

@@ -3,7 +3,7 @@ import { clx } from "@medusajs/ui"
 import { ComponentPropsWithoutRef, forwardRef, memo } from "react"
 import { Controller } from "react-hook-form"
 
-import { countries } from "../../../lib/countries"
+import { countries } from "../../../lib/data/countries"
 import { useDataGridCell } from "../hooks"
 import { DataGridCellProps } from "../types"
 import { DataGridCellContainer } from "./data-grid-cell-container"

packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-currency-cell.tsx

@@ -1,7 +1,7 @@
 import CurrencyInput from "react-currency-input-field"
 import { Controller } from "react-hook-form"
 
-import { currencies } from "../../../lib/currencies"
+import { currencies } from "../../../lib/data/currencies"
 import { useDataGridCell } from "../hooks"
 import { DataGridCellProps } from "../types"
 import { DataGridCellContainer } from "./data-grid-cell-container"

packages/admin-next/dashboard/src/components/inputs/country-select/country-select.tsx

@@ -8,7 +8,7 @@ import {
 import { TrianglesMini } from "@medusajs/icons"
 import { clx } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
-import { countries } from "../../../lib/countries"
+import { countries } from "../../../lib/data/countries"
 
 export const CountrySelect = forwardRef<
   HTMLSelectElement,

packages/admin-next/dashboard/src/components/inputs/percentage-input/percentage-input.tsx

@@ -1,7 +1,11 @@
-import { Input, Text } from "@medusajs/ui"
+import { Input, Text, clx } from "@medusajs/ui"
 import { ComponentProps, ElementRef, forwardRef } from "react"
+import Primitive from "react-currency-input-field"
 
-export const PercentageInput = forwardRef<
+/**
+ * @deprecated Use `PercentageInput` instead
+ */
+export const DeprecatedPercentageInput = forwardRef<
   ElementRef<typeof Input>,
   Omit<ComponentProps<typeof Input>, "type">
 >(({ min = 0, max = 100, step = 0.0001, ...props }, ref) => {
@@ -29,4 +33,43 @@ export const PercentageInput = forwardRef<
     </div>
   )
 })
-PercentageInput.displayName = "HandleInput"
+DeprecatedPercentageInput.displayName = "PercentageInput"
+
+export const PercentageInput = forwardRef<
+  ElementRef<"input">,
+  ComponentProps<typeof Primitive>
+>(({ min = 0, decimalScale = 2, className, ...props }, ref) => {
+  return (
+    <div className="relative">
+      <Primitive
+        ref={ref as any} // dependency is typed incorrectly
+        min={min}
+        autoComplete="off"
+        decimalScale={decimalScale}
+        decimalsLimit={decimalScale}
+        {...props}
+        className={clx(
+          "caret-ui-fg-base bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 pr-10 text-right outline-none",
+          "placeholder:text-ui-fg-muted text-ui-fg-base",
+          "hover:bg-ui-bg-field-hover",
+          "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+          "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+          "invalid::border-ui-border-error invalid:shadow-borders-error",
+          "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+          className
+        )}
+      />
+      <div className="absolute inset-y-0 right-0 z-10 flex w-8 items-center justify-center border-l">
+        <Text
+          className="text-ui-fg-muted"
+          size="small"
+          leading="compact"
+          weight="plus"
+        >
+          %
+        </Text>
+      </div>
+    </div>
+  )
+})
+PercentageInput.displayName = "PercentageInput"

packages/admin-next/dashboard/src/components/inputs/province-select/index.ts

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

packages/admin-next/dashboard/src/components/inputs/province-select/province-select.tsx

@@ -0,0 +1,111 @@
+import {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from "react"
+
+import { TrianglesMini } from "@medusajs/icons"
+import { clx } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { getCountryProvinceObjectByIso2 } from "../../../lib/data/country-states"
+
+interface ProvinceSelectProps extends ComponentPropsWithoutRef<"select"> {
+  /**
+   * ISO 3166-1 alpha-2 country code
+   */
+  country_code: string
+  /**
+   * Whether to use the ISO 3166-1 alpha-2 code or the name of the province as the value
+   *
+   * @default "iso_2"
+   */
+  valueAs?: "iso_2" | "name"
+  placeholder?: string
+}
+
+export const ProvinceSelect = forwardRef<
+  HTMLSelectElement,
+  ProvinceSelectProps
+>(
+  (
+    {
+      className,
+      disabled,
+      placeholder,
+      country_code,
+      valueAs = "iso_2",
+      ...props
+    },
+    ref
+  ) => {
+    const { t } = useTranslation()
+    const innerRef = useRef<HTMLSelectElement>(null)
+
+    useImperativeHandle(ref, () => innerRef.current as HTMLSelectElement)
+
+    const isPlaceholder = innerRef.current?.value === ""
+
+    const provinceObject = getCountryProvinceObjectByIso2(country_code)
+
+    if (!provinceObject) {
+      disabled = true
+    }
+
+    const options = Object.entries(provinceObject?.options ?? {}).map(
+      ([iso2, name]) => {
+        return (
+          <option key={iso2} value={valueAs === "iso_2" ? iso2 : name}>
+            {name}
+          </option>
+        )
+      }
+    )
+
+    const placeholderText = provinceObject
+      ? t(`taxRegions.fields.sublevels.placeholders.${provinceObject.type}`)
+      : ""
+
+    const placeholderOption = provinceObject ? (
+      <option value="" disabled className="text-ui-fg-muted">
+        {placeholder || placeholderText}
+      </option>
+    ) : null
+
+    return (
+      <div className="relative">
+        <TrianglesMini
+          className={clx(
+            "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
+            {
+              "text-ui-fg-disabled": disabled,
+            }
+          )}
+        />
+        <select
+          disabled={disabled}
+          className={clx(
+            "bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 outline-none",
+            "placeholder:text-ui-fg-muted text-ui-fg-base",
+            "hover:bg-ui-bg-field-hover",
+            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+            "invalid::border-ui-border-error invalid:shadow-borders-error",
+            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+            {
+              "text-ui-fg-muted": isPlaceholder,
+            },
+            className
+          )}
+          {...props}
+          ref={innerRef}
+        >
+          {/* Add an empty option so the first option is preselected */}
+          {placeholderOption}
+          {options}
+        </select>
+      </div>
+    )
+  }
+)
+ProvinceSelect.displayName = "CountrySelect"

packages/admin-next/dashboard/src/components/layout/nav-item/nav-item.tsx

@@ -107,10 +107,7 @@ export const NavItem = ({
             <ul>
               {items.map((item) => {
                 return (
-                  <li
-                    key={item.to}
-                    className="flex h-[32px] items-center gap-x-1 pl-2"
-                  >
+                  <li key={item.to} className="flex h-[32px] items-center pl-1">
                     <div
                       role="presentation"
                       className="flex h-full w-5 items-center justify-center"

packages/admin-next/dashboard/src/components/layout/pages/index.ts

@@ -0,0 +1,2 @@
+export * from "./single-column-page"
+export * from "./two-column-page"

packages/admin-next/dashboard/src/components/layout/pages/single-column-page/index.ts

@@ -0,0 +1 @@
+export * from "./single-column-page"

packages/admin-next/dashboard/src/components/layout/pages/single-column-page/single-column-page.tsx

@@ -0,0 +1,38 @@
+import { Outlet } from "react-router-dom"
+import { JsonViewSection } from "../../../common/json-view-section"
+import { PageProps } from "../types"
+
+export const SingleColumnPage = <TData,>({
+  children,
+  widgets,
+  data,
+  hasOutlet,
+  showJSON,
+}: PageProps<TData>) => {
+  const { before, after } = widgets
+  const widgetProps = { data }
+
+  if (showJSON && !data) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        "`showJSON` is true but no data is provided. To display JSON, provide data prop."
+      )
+    }
+
+    showJSON = false
+  }
+
+  return (
+    <div className="flex flex-col gap-y-3">
+      {before.widgets.map((w, i) => {
+        return <w.Component {...widgetProps} key={i} />
+      })}
+      {children}
+      {after.widgets.map((w, i) => {
+        return <w.Component {...widgetProps} key={i} />
+      })}
+      {showJSON && <JsonViewSection data={data!} />}
+      {hasOutlet && <Outlet />}
+    </div>
+  )
+}

packages/admin-next/dashboard/src/components/layout/pages/two-column-page/index.ts

@@ -0,0 +1 @@
+export * from "./two-column-page"