feat(admin-ui, medusa, medusa-react, medusa-js): Price List UI revamp (#5233)

* progress on cleanup * rm forceMount * close modal on succesful submit * fix: invalidate price list query on useAdminCreatePriceListPrices * sync translation keys * add last translations * sync translation keys * improve tabbing between cells * add comment * fix: remove double variant, set collision boundary on column dropdown * add widgets * update lock file * decrease details info size, and add missing status update function * sync translation keys * add snapshots and remove min/max * add missing filter menu for customer groups table * add translation keys for filter menu * rm unused code * Create tall-apricots-run.md * Update tall-apricots-run.md * fix: discard invalid paste values * add translation keys * bump snapshots + minor fixes * rm console.log * bump snapshots * bump ui packages, and add missing tax inclusive display in New form * update lock file * fix filter menu * update snapshot * update ui package and fix sub menu position --------- Co-authored-by: Sebastian Rindom <skrindom@gmail.com> Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
2023-10-06 08:22:25 -07:00
parent 4ca70a0d0c
commit 0f34e0f381
86 changed files with 9910 additions and 2667 deletions
@@ -0,0 +1,187 @@
+import {
+  Hint as HintComponent,
+  Label as LabelComponent,
+  clx,
+} from "@medusajs/ui"
+import * as LabelPrimitives from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import * as React from "react"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form"
+
+const Provider = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const Field = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within a FormField")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formErrorMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+const Item = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        ref={ref}
+        className={clx("flex flex-col space-y-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+})
+Item.displayName = "Form.Item"
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root>
+>(({ className, ...props }, ref) => {
+  const { formItemId } = useFormField()
+
+  return (
+    <LabelComponent
+      ref={ref}
+      className={clx(className)}
+      htmlFor={formItemId}
+      weight="plus"
+      {...props}
+    />
+  )
+})
+Label.displayName = "Form.Label"
+
+const Control = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formErrorMessageId } =
+    useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formErrorMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+Control.displayName = "Form.Control"
+
+const Hint = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <HintComponent
+      ref={ref}
+      id={formDescriptionId}
+      className={className}
+      {...props}
+    />
+  )
+})
+Hint.displayName = "Form.Hint"
+
+const ErrorMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formErrorMessageId } = useFormField()
+  const msg = error ? String(error?.message) : children
+
+  if (!msg) {
+    return null
+  }
+
+  return (
+    <HintComponent
+      ref={ref}
+      id={formErrorMessageId}
+      className={className}
+      variant={error ? "error" : "info"}
+      {...props}
+    >
+      {msg}
+    </HintComponent>
+  )
+})
+ErrorMessage.displayName = "Form.ErrorMessage"
+
+const Form = Object.assign(Provider, {
+  Item,
+  Label,
+  Control,
+  Hint,
+  ErrorMessage,
+  Field,
+})
+
+export { Form }
@@ -0,0 +1 @@
+export * from "./form"