@medusajs/dashboard 0.0.1

package/src/components/filtering/filter-group/filter-group.tsx

@@ -0,0 +1,54 @@
+import { Button, DropdownMenu } from "@medusajs/ui"
+import { ReactNode } from "react"
+import { useSearchParams } from "react-router-dom"
+
+type FilterGroupProps = {
+  filters: {
+    [key: string]: ReactNode
+  }
+}
+
+export const FilterGroup = ({ filters }: FilterGroupProps) => {
+  const [searchParams] = useSearchParams()
+  const filterKeys = Object.keys(filters)
+
+  if (filterKeys.length === 0) {
+    return null
+  }
+
+  const isClearable = filterKeys.some((key) => searchParams.get(key))
+  const hasMore = !filterKeys.every((key) => searchParams.get(key))
+  const availableKeys = filterKeys.filter((key) => !searchParams.get(key))
+
+  return (
+    <div className="flex items-center flex-wrap gap-2">
+      {hasMore && <AddFilterMenu availableKeys={availableKeys} />}
+      {isClearable && (
+        <Button variant="transparent" size="small">
+          Clear all
+        </Button>
+      )}
+    </div>
+  )
+}
+
+type AddFilterMenuProps = {
+  availableKeys: string[]
+}
+
+const AddFilterMenu = ({ availableKeys }: AddFilterMenuProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button variant="secondary" size="small">
+          Add filter
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {availableKeys.map((key) => (
+          <DropdownMenu.Item key={key}>{key}</DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}

package/src/components/filtering/filter-group/index.ts

@@ -0,0 +1 @@
+export * from "./filter-group"

package/src/components/filtering/order-by/index.ts

@@ -0,0 +1 @@
+export * from "./order-by"

package/src/components/filtering/order-by/order-by.tsx

@@ -0,0 +1,148 @@
+import { ArrowUpDown } from "@medusajs/icons"
+import { DropdownMenu, IconButton } from "@medusajs/ui"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+
+type OrderByProps = {
+  keys: string[]
+}
+
+enum SortDirection {
+  ASC = "asc",
+  DESC = "desc",
+}
+
+type SortState = {
+  key?: string
+  dir: SortDirection
+}
+
+const initState = (params: URLSearchParams): SortState => {
+  const sortParam = params.get("order")
+
+  if (!sortParam) {
+    return {
+      dir: SortDirection.ASC,
+    }
+  }
+
+  const dir = sortParam.startsWith("-") ? SortDirection.DESC : SortDirection.ASC
+  const key = sortParam.replace("-", "")
+
+  return {
+    key,
+    dir,
+  }
+}
+
+const formatKey = (key: string) => {
+  const words = key.split("_")
+  const formattedWords = words.map((word, index) => {
+    if (index === 0) {
+      return word.charAt(0).toUpperCase() + word.slice(1)
+    } else {
+      return word
+    }
+  })
+  return formattedWords.join(" ")
+}
+
+export const OrderBy = ({ keys }: OrderByProps) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [state, setState] = useState<{
+    key?: string
+    dir: SortDirection
+  }>(initState(searchParams))
+
+  const { t } = useTranslation()
+
+  const handleDirChange = (dir: string) => {
+    setState((prev) => ({
+      ...prev,
+      dir: dir as SortDirection,
+    }))
+    updateOrderParam({
+      key: state.key,
+      dir: dir as SortDirection,
+    })
+  }
+
+  const handleKeyChange = (value: string) => {
+    setState((prev) => ({
+      ...prev,
+      key: value,
+    }))
+
+    updateOrderParam({
+      key: value,
+      dir: state.dir,
+    })
+  }
+
+  const updateOrderParam = (state: SortState) => {
+    if (!state.key) {
+      setSearchParams((prev) => {
+        prev.delete("order")
+        return prev
+      })
+
+      return
+    }
+
+    const orderParam =
+      state.dir === SortDirection.ASC ? state.key : `-${state.key}`
+    setSearchParams((prev) => {
+      prev.set("order", orderParam)
+      return prev
+    })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small">
+          <ArrowUpDown />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.RadioGroup
+          value={state.key}
+          onValueChange={handleKeyChange}
+        >
+          {keys.map((key) => (
+            <DropdownMenu.RadioItem
+              key={key}
+              value={key}
+              onSelect={(event) => event.preventDefault()}
+            >
+              {formatKey(key)}
+            </DropdownMenu.RadioItem>
+          ))}
+        </DropdownMenu.RadioGroup>
+        <DropdownMenu.Separator />
+        <DropdownMenu.RadioGroup
+          value={state.dir}
+          onValueChange={handleDirChange}
+        >
+          <DropdownMenu.RadioItem
+            className="flex items-center justify-between"
+            value="asc"
+            onSelect={(event) => event.preventDefault()}
+          >
+            {t("general.ascending")}
+            <DropdownMenu.Label>1 - 30</DropdownMenu.Label>
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem
+            className="flex items-center justify-between"
+            value="desc"
+            onSelect={(event) => event.preventDefault()}
+          >
+            {t("general.descending")}
+            <DropdownMenu.Label>30 - 1</DropdownMenu.Label>
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}

package/src/components/filtering/query/index.ts

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

package/src/components/filtering/query/query.tsx

@@ -0,0 +1,57 @@
+import { Input } from "@medusajs/ui"
+import { debounce } from "lodash"
+import { ChangeEvent, useCallback, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+
+type QueryProps = {
+  placeholder?: string
+}
+
+export const Query = ({ placeholder }: QueryProps) => {
+  const { t } = useTranslation()
+  const placeholderText = placeholder || t("general.search")
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [inputValue, setInputValue] = useState(searchParams.get("q") || "")
+
+  const updateSearchParams = (newValue: string) => {
+    if (!newValue) {
+      setSearchParams((prev) => {
+        prev.delete("q")
+        return prev
+      })
+
+      return
+    }
+
+    setSearchParams((prev) => ({ ...prev, q: newValue || "" }))
+  }
+
+  const debouncedUpdate = useCallback(
+    debounce((newValue: string) => updateSearchParams(newValue), 500),
+    []
+  )
+
+  useEffect(() => {
+    debouncedUpdate(inputValue)
+
+    return () => {
+      debouncedUpdate.cancel()
+    }
+  }, [inputValue, debouncedUpdate])
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value)
+  }
+
+  return (
+    <Input
+      type="search"
+      size="small"
+      value={inputValue}
+      onChange={handleInputChange}
+      placeholder={placeholderText}
+    />
+  )
+}

package/src/components/forms/address-form/address-form.tsx

@@ -0,0 +1,213 @@
+import { Country } from "@medusajs/medusa"
+import { Heading, Input, Select, clx } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+
+import { Control } from "react-hook-form"
+import { AddressSchema } from "../../../lib/schemas"
+import { Form } from "../../common/form"
+import { CountrySelect } from "../../inputs/country-select"
+
+type AddressFieldValues = z.infer<typeof AddressSchema>
+
+type AddressFormProps = {
+  control: Control<AddressFieldValues>
+  countries?: Country[]
+  layout: "grid" | "stack"
+}
+
+export const AddressForm = ({
+  control,
+  countries,
+  layout,
+}: AddressFormProps) => {
+  const { t } = useTranslation()
+
+  const style = clx("gap-4", {
+    "flex flex-col": layout === "stack",
+    "grid grid-cols-2": layout === "grid",
+  })
+
+  return (
+    <div className="flex flex-col gap-y-8">
+      <div className="flex flex-col gap-y-4">
+        <Heading level="h2">{t("addresses.contactHeading")}</Heading>
+        <fieldset className={style}>
+          <Form.Field
+            control={control}
+            name="first_name"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.firstName")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={control}
+            name="last_name"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.lastName")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={control}
+            name="company"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label optional>{t("fields.company")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={control}
+            name="phone"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.phone")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </fieldset>
+      </div>
+      <div className="flex flex-col gap-y-4">
+        <Heading level="h2">{t("addresses.locationHeading")}</Heading>
+        <fieldset className={style}>
+          <Form.Field
+            control={control}
+            name="address_1"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.address")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={control}
+            name="address_2"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label optional>{t("fields.address2")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={control}
+            name="city"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.city")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={control}
+            name="postal_code"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.postalCode")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={control}
+            name="province"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label optional>{t("fields.province")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={control}
+            name="country_code"
+            render={({ field: { ref, onChange, ...field } }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.country")}</Form.Label>
+                  <Form.Control>
+                    {countries ? (
+                      <Select {...field} onValueChange={onChange}>
+                        <Select.Trigger ref={ref}>
+                          <Select.Value />
+                        </Select.Trigger>
+                        <Select.Content>
+                          {countries.map((country) => (
+                            <Select.Item
+                              key={country.iso_2}
+                              value={country.iso_2}
+                            >
+                              {country.display_name}
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select>
+                    ) : (
+                      <CountrySelect {...field} ref={ref} onChange={onChange} /> // When no countries are provided, use the country select component that has a built-in list of all countries
+                    )}
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </fieldset>
+      </div>
+    </div>
+  )
+}

package/src/components/forms/address-form/index.ts

@@ -0,0 +1 @@
+export * from "./address-form"

package/src/components/forms/email-form/email-form.tsx

@@ -0,0 +1,42 @@
+import { Input, clx } from "@medusajs/ui"
+import { Control } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+import { EmailSchema } from "../../../lib/schemas"
+import { Form } from "../../common/form"
+
+type EmailFieldValues = z.infer<typeof EmailSchema>
+
+type EmailFormProps = {
+  control: Control<EmailFieldValues>
+  layout?: "grid" | "stack"
+}
+
+export const EmailForm = ({ control, layout = "stack" }: EmailFormProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      className={clx("gap-4", {
+        "flex flex-col": layout === "stack",
+        "grid grid-cols-2": layout === "grid",
+      })}
+    >
+      <Form.Field
+        control={control}
+        name="email"
+        render={({ field }) => {
+          return (
+            <Form.Item>
+              <Form.Label>{t("fields.email")}</Form.Label>
+              <Form.Control>
+                <Input {...field} />
+              </Form.Control>
+              <Form.ErrorMessage />
+            </Form.Item>
+          )
+        }}
+      />
+    </div>
+  )
+}

package/src/components/forms/email-form/index.ts

@@ -0,0 +1 @@
+export * from "./email-form"

package/src/components/forms/metadata/index.ts

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

package/src/components/forms/metadata/metadata.tsx

@@ -0,0 +1,157 @@
+import { useEffect } from "react"
+import { useTranslation } from "react-i18next"
+import { Alert, Button, Input, Text } from "@medusajs/ui"
+import { Trash } from "@medusajs/icons"
+import { UseFormReturn } from "react-hook-form"
+
+import { MetadataField } from "../../../lib/metadata"
+
+type MetadataProps = {
+  form: UseFormReturn<MetadataField[]>
+}
+
+type FieldProps = {
+  field: MetadataField
+  isLast: boolean
+  onDelete: () => void
+  updateKey: (key: string) => void
+  updateValue: (value: string) => void
+}
+
+function Field({
+  field,
+  updateKey,
+  updateValue,
+  onDelete,
+  isLast,
+}: FieldProps) {
+  const { t } = useTranslation()
+
+  /**
+   * value on the index of deleted field will be undefined,
+   * but we need to keep it to preserve list ordering
+   * so React could correctly render elements when adding/deleting
+   */
+  if (field.isDeleted || field.isIgnored) {
+    return null
+  }
+
+  return (
+    <tr className="group divide-x [&:not(:last-child)]:border-b">
+      <td>
+        <Input
+          className="rounded-none border-none bg-transparent !shadow-none"
+          placeholder={t("fields.key")}
+          defaultValue={field.key}
+          onChange={(e) => {
+            updateKey(e.currentTarget.value)
+          }}
+        />
+      </td>
+      <td className="relative">
+        <Input
+          className="rounded-none border-none bg-transparent pr-[40px] !shadow-none"
+          placeholder={t("fields.value")}
+          defaultValue={field.value}
+          onChange={(e) => {
+            updateValue(e.currentTarget.value)
+          }}
+        />
+        {!isLast && (
+          <Button
+            size="small"
+            variant="transparent"
+            className="text-ui-fg-subtle invisible absolute right-0 top-0 h-[32px] w-[32px] p-0 hover:bg-transparent group-hover:visible"
+            type="button"
+            onClick={onDelete}
+          >
+            <Trash />
+          </Button>
+        )}
+      </td>
+    </tr>
+  )
+}
+
+export function Metadata({ form }: MetadataProps) {
+  const { t } = useTranslation()
+
+  const metadataWatch = form.watch("metadata") as MetadataField[]
+  const ignoredKeys = metadataWatch.filter((k) => k.isIgnored)
+
+  const addKeyPair = () => {
+    form.setValue(
+      `metadata.${metadataWatch.length ? metadataWatch.length : 0}`,
+      { key: "", value: "" }
+    )
+  }
+
+  const onKeyChange = (index: number) => {
+    return (key: string) => {
+      form.setValue(`metadata.${index}.key`, key, { shouldDirty: true })
+
+      if (index === metadataWatch.length - 1) {
+        addKeyPair()
+      }
+    }
+  }
+
+  const onValueChange = (index: number) => {
+    return (value: any) => {
+      form.setValue(`metadata.${index}.value`, value, { shouldDirty: true })
+
+      if (index === metadataWatch.length - 1) {
+        addKeyPair()
+      }
+    }
+  }
+
+  const deleteKeyPair = (index: number) => {
+    return () => {
+      form.setValue(`metadata.${index}.isDeleted`, true, { shouldDirty: true })
+    }
+  }
+
+  return (
+    <div>
+      <Text weight="plus" size="small">
+        {t("fields.metadata")}
+      </Text>
+      <table className="shadow-elevation-card-rest mt-2 w-full table-fixed overflow-hidden rounded">
+        <thead>
+          <tr className="bg-ui-bg-field divide-x border-b">
+            <th>
+              <Text className="px-2 py-1 text-left" weight="plus" size="small">
+                {t("fields.key")}
+              </Text>
+            </th>
+            <th>
+              <Text className="px-2 py-1 text-left" weight="plus" size="small">
+                {t("fields.value")}
+              </Text>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {metadataWatch.map((field, index) => {
+            return (
+              <Field
+                key={index}
+                field={field}
+                updateKey={onKeyChange(index)}
+                updateValue={onValueChange(index)}
+                onDelete={deleteKeyPair(index)}
+                isLast={index === metadataWatch.length - 1}
+              />
+            )
+          })}
+        </tbody>
+      </table>
+      {!!ignoredKeys.length && (
+        <Alert variant="warning" className="mt-2" dismissible>
+          {t("metadata.warnings.ignoredKeys", { keys: ignoredKeys.join(",") })}
+        </Alert>
+      )}
+    </div>
+  )
+}

package/src/components/forms/transfer-ownership-form/index.ts

@@ -0,0 +1 @@
+export * from "./transfer-ownership-form"