feat(dashboard): Product create from - details (#7121)

**What** - First part of the product creation form. - New components: - ChipInput - Allows users to input chips into a input field. Chips are created by hitting the `,` or `Enter / Return` keys. Deleting a chip is done by hitting `Backspace` when the cursor is next to chip, or clicking the `X` button in the chip. Used for inputting option values. - SortableList - A sortable drag-n-drop list that allows the user to re-arrange the order of items. Used for re-arranging the ranking of variants. - ChipGroup - New re-usable component that is used to render a group of values as Chips. This should be used for SplitView form items. - CategoryCombobox - (WIP) Nested Combobox component for selecting multiple categories a product should be associated with. - New hooks: - useComboboxData - Hook for easily managing the state of comboboxes. - useDebouncedSearch - Hook for managing debounced search queries.
2024-05-03 10:37:36 +00:00
parent e42308557e
commit fdee748eed
84 changed files with 2837 additions and 1588 deletions
@@ -0,0 +1,67 @@
+import {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from "react"
+
+import { TrianglesMini } from "@medusajs/icons"
+import { clx } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { countries } from "../../../lib/countries"
+
+export const CountrySelect = forwardRef<
+  HTMLSelectElement,
+  ComponentPropsWithoutRef<"select"> & { placeholder?: string }
+>(({ className, disabled, placeholder, ...props }, ref) => {
+  const { t } = useTranslation()
+  const innerRef = useRef<HTMLSelectElement>(null)
+
+  useImperativeHandle(ref, () => innerRef.current as HTMLSelectElement)
+
+  const isPlaceholder = innerRef.current?.value === ""
+
+  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 */}
+        <option value="" disabled className="text-ui-fg-muted">
+          {placeholder || t("fields.selectCountry")}
+        </option>
+        {countries.map((country) => {
+          return (
+            <option key={country.iso_2} value={country.iso_2}>
+              {country.display_name}
+            </option>
+          )
+        })}
+      </select>
+    </div>
+  )
+})
+CountrySelect.displayName = "CountrySelect"
@@ -0,0 +1 @@
+export * from "./country-select"