chore: move next admin packages to core repo (#5983)

**What**
- Move packages for `next` version of admin to core repo

**Other**
- Since this PR introduces packages that depend on Vite 5, it also introduces @types/node@^20. We have never had a direct dependency on the types package for Node, and as far as I can see that has resulted in us using the types from Node.js@8, as those are a dependency of one of our dependencies. With the introduction of @types/node@^20, two of our packages had TS errors because they were using the NodeJS.Timer type, which was deprecated in Node.js@14. We should add specific @types/node packages to all our packages, but I haven't done so in this PR to keep it as clean as possible.
- Q: @olivermrbl I've added the new packages to the ignore list for changeset, is this enough to prevent them from being published?

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

@@ -0,0 +1,199 @@
+import {
+  Hint as HintComponent,
+  Label as LabelComponent,
+  Text,
+  clx,
+} from "@medusajs/ui"
+import * as LabelPrimitives from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import { createContext, forwardRef, useContext, useId } from "react"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form"
+import { useTranslation } from "react-i18next"
+
+const Provider = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = 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 = createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const useFormField = () => {
+  const fieldContext = useContext(FormFieldContext)
+  const itemContext = 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 = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = 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 = forwardRef<
+  React.ElementRef<typeof LabelPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root> & {
+    optional?: boolean
+  }
+>(({ className, optional = false, ...props }, ref) => {
+  const { formItemId } = useFormField()
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex items-center gap-x-1">
+      <LabelComponent
+        ref={ref}
+        className={clx(className)}
+        htmlFor={formItemId}
+        size="small"
+        weight="plus"
+        {...props}
+      />
+      {optional && (
+        <Text size="small" leading="compact" className="text-ui-fg-muted">
+          ({t("fields.optional")})
+        </Text>
+      )}
+    </div>
+  )
+})
+Label.displayName = "Form.Label"
+
+const Control = 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 = 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 = 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 }

packages/admin-next/dashboard/src/components/common/form/index.ts

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