refactor: nest shadcn/ui registry in packages/medusa-forms

- Move registry structure to packages/medusa-forms/ for better monorepo organization
- Create shadcn-compatible versions of existing components in src/registry/
- Preserve original medusa-forms components in src/controlled/ (unchanged)
- Update registry.json paths to reflect nested structure
- Generate individual JSON registry files for each component
- Add comprehensive documentation explaining the relationship between registry and original components
- Registry components use @medusajs/ui directly while original components use internal wrappers

Author: codegen-sh[bot]

REGISTRY.md packages/medusa-forms/REGISTRY.mdREGISTRY.md renamed to packages/medusa-forms/REGISTRY.md

@@ -1,19 +1,19 @@
 # Medusa Forms shadcn/ui Registry
 
-This repository provides a custom shadcn/ui registry for medusa-forms components, allowing developers to install them using the native shadcn CLI.
+This package provides a custom shadcn/ui registry for medusa-forms components, allowing developers to install them using the native shadcn CLI.
 
 ## Installation
 
 You can install individual medusa-forms components using the shadcn CLI:
 
 ```bash
 # Install individual components
-npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/registry/controlled-input.json
-npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/registry/controlled-select.json
-npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/registry/controlled-checkbox.json
-npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/registry/controlled-textarea.json
-npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/registry/controlled-datepicker.json
-npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/registry/controlled-currency-input.json
+npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-input.json
+npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-select.json
+npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-checkbox.json
+npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-textarea.json
+npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-datepicker.json
+npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-currency-input.json
 ```
 
 ## Available Components
@@ -148,12 +148,13 @@ Before using these components, make sure you have:
 ✅ **TypeScript Support**: Built-in TypeScript compatibility  
 ✅ **Zero Maintenance**: No CLI package to maintain  
 ✅ **Instant Adoption**: Works with existing shadcn projects  
-✅ **v0 Compatible**: Components work with v0.dev
+✅ **v0 Compatible**: Components work with v0.dev  
+✅ **Monorepo Structure**: Registry is properly nested within the medusa-forms package
 
 ## Registry Structure
 
 ```
-lambda-curry/forms/
+packages/medusa-forms/
 ├── registry.json              # Main registry configuration
 ├── registry/                  # Component registry files
 │   ├── controlled-input.json
@@ -162,20 +163,38 @@ lambda-curry/forms/
 │   ├── controlled-textarea.json
 │   ├── controlled-datepicker.json
 │   └── controlled-currency-input.json
-└── src/registry/             # Component source files
-    ├── controlled-input.tsx
-    ├── controlled-select.tsx
-    ├── controlled-checkbox.tsx
-    ├── controlled-textarea.tsx
-    ├── controlled-datepicker.tsx
-    └── controlled-currency-input.tsx
+├── src/registry/             # Registry-compatible component source files
+│   ├── controlled-input.tsx
+│   ├── controlled-select.tsx
+│   ├── controlled-checkbox.tsx
+│   ├── controlled-textarea.tsx
+│   ├── controlled-datepicker.tsx
+│   └── controlled-currency-input.tsx
+└── src/controlled/           # Original medusa-forms components (unchanged)
+    ├── ControlledInput.tsx
+    ├── ControlledSelect.tsx
+    ├── ControlledCheckbox.tsx
+    ├── ControlledTextArea.tsx
+    ├── ControlledDatePicker.tsx
+    └── ControlledCurrencyInput.tsx
 ```
 
+## Relationship to Existing Components
+
+The registry components in `src/registry/` are **shadcn-compatible versions** of the existing medusa-forms components in `src/controlled/`. Key differences:
+
+- **Registry components**: Use `@medusajs/ui` directly, include built-in labels and error handling, follow shadcn patterns
+- **Original components**: Use internal UI wrappers (`FieldWrapper`, etc.), part of the medusa-forms package API
+
+Both sets of components serve different use cases:
+- Use **registry components** when installing via shadcn CLI into your project
+- Use **original components** when importing the `@lambdacurry/medusa-forms` package directly
+
 ## Contributing
 
 To add new components to the registry:
 
-1. Create the component in `src/registry/`
+1. Create the shadcn-compatible component in `src/registry/`
 2. Add it to the main `registry.json`
 3. Generate the individual JSON file in `registry/`
 4. Update this documentation

registry.json packages/medusa-forms/registry.jsonregistry.json renamed to packages/medusa-forms/registry.json

@@ -13,7 +13,7 @@
       "registryDependencies": [],
       "files": [
         {
-          "path": "src/registry/controlled-input.tsx",
+          "path": "packages/medusa-forms/src/registry/controlled-input.tsx",
           "type": "registry:component"
         }
       ]
@@ -27,7 +27,7 @@
       "registryDependencies": [],
       "files": [
         {
-          "path": "src/registry/controlled-select.tsx",
+          "path": "packages/medusa-forms/src/registry/controlled-select.tsx",
           "type": "registry:component"
         }
       ]
@@ -41,7 +41,7 @@
       "registryDependencies": [],
       "files": [
         {
-          "path": "src/registry/controlled-checkbox.tsx",
+          "path": "packages/medusa-forms/src/registry/controlled-checkbox.tsx",
           "type": "registry:component"
         }
       ]
@@ -55,7 +55,7 @@
       "registryDependencies": [],
       "files": [
         {
-          "path": "src/registry/controlled-textarea.tsx",
+          "path": "packages/medusa-forms/src/registry/controlled-textarea.tsx",
           "type": "registry:component"
         }
       ]
@@ -69,7 +69,7 @@
       "registryDependencies": [],
       "files": [
         {
-          "path": "src/registry/controlled-datepicker.tsx",
+          "path": "packages/medusa-forms/src/registry/controlled-datepicker.tsx",
           "type": "registry:component"
         }
       ]
@@ -83,7 +83,7 @@
       "registryDependencies": [],
       "files": [
         {
-          "path": "src/registry/controlled-currency-input.tsx",
+          "path": "packages/medusa-forms/src/registry/controlled-currency-input.tsx",
           "type": "registry:component"
         }
       ]

packages/medusa-forms/registry/controlled-checkbox.json

@@ -0,0 +1,16 @@
+{
+  "name": "controlled-checkbox",
+  "type": "registry:ui",
+  "description": "A checkbox component with react-hook-form integration",
+  "dependencies": [
+    "@medusajs/ui",
+    "react-hook-form",
+    "@hookform/error-message"
+  ],
+  "files": [
+    {
+      "name": "controlled-checkbox.tsx",
+      "content": "\"use client\"\n\nimport type { ComponentProps } from 'react'\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form'\nimport { Checkbox, Label } from '@medusajs/ui'\nimport { ErrorMessage } from '@hookform/error-message'\n\nexport type ControlledCheckboxProps<T extends FieldValues> = Omit<ControllerProps, 'render'> & {\n  name: Path<T>\n  rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>\n  label?: string\n  description?: string\n  required?: boolean\n  disabled?: boolean\n  className?: string\n  onChange?: (checked: boolean) => void\n} & ComponentProps<typeof Checkbox>\n\n/**\n * A controlled checkbox component that integrates with react-hook-form.\n * \n * @example\n * ```tsx\n * import { useForm, FormProvider } from 'react-hook-form'\n * import { ControlledCheckbox } from '@/components/ui/controlled-checkbox'\n * \n * function MyForm() {\n *   const methods = useForm()\n *   \n *   return (\n *     <FormProvider {...methods}>\n *       <form onSubmit={methods.handleSubmit(onSubmit)}>\n *         <ControlledCheckbox\n *           name=\"terms\"\n *           label=\"I agree to the terms and conditions\"\n *           rules={{ required: 'You must agree to the terms' }}\n *         />\n *       </form>\n *     </FormProvider>\n *   )\n * }\n * ```\n */\nexport const ControlledCheckbox = <T extends FieldValues>({\n  name,\n  rules,\n  onChange,\n  label,\n  description,\n  required,\n  ...props\n}: ControlledCheckboxProps<T>) => {\n  const {\n    control,\n    formState: { errors },\n  } = useFormContext<T>()\n\n  return (\n    <div className=\"space-y-2\">\n      <Controller\n        control={control}\n        name={name}\n        rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n        render={({ field }) => (\n          <div className=\"flex items-start space-x-2\">\n            <Checkbox\n              {...field}\n              {...props}\n              id={name}\n              checked={field.value}\n              onCheckedChange={(checked) => {\n                const booleanValue = checked === true\n                if (onChange) {\n                  onChange(booleanValue)\n                }\n                field.onChange(booleanValue)\n              }}\n            />\n            <div className=\"grid gap-1.5 leading-none\">\n              {label && (\n                <Label htmlFor={name}>\n                  {label}\n                  {required && <span className=\"text-red-500 ml-1\">*</span>}\n                </Label>\n              )}\n              {description && (\n                <p className=\"text-xs text-muted-foreground\">\n                  {description}\n                </p>\n              )}\n            </div>\n          </div>\n        )}\n      />\n      <ErrorMessage\n        errors={errors}\n        name={name}\n        render={({ message }) => (\n          <p className=\"text-sm text-red-500\">{message}</p>\n        )}\n      />\n    </div>\n  )\n}\n\n"
+    }
+  ]
+}

packages/medusa-forms/registry/controlled-currency-input.json

@@ -0,0 +1,16 @@
+{
+  "name": "controlled-currency-input",
+  "type": "registry:ui",
+  "description": "A currency-input component with react-hook-form integration",
+  "dependencies": [
+    "@medusajs/ui",
+    "react-hook-form",
+    "@hookform/error-message"
+  ],
+  "files": [
+    {
+      "name": "controlled-currency-input.tsx",
+      "content": "\"use client\"\n\nimport type { ComponentProps } from 'react'\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form'\nimport { CurrencyInput, Label } from '@medusajs/ui'\nimport { ErrorMessage } from '@hookform/error-message'\n\nexport type ControlledCurrencyInputProps<T extends FieldValues> = Omit<ControllerProps, 'render'> & {\n  name: Path<T>\n  rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>\n  label?: string\n  placeholder?: string\n  required?: boolean\n  disabled?: boolean\n  className?: string\n  currency?: string\n  onChange?: (value: number | undefined) => void\n} & ComponentProps<typeof CurrencyInput>\n\n/**\n * A controlled currency input component that integrates with react-hook-form.\n * \n * @example\n * ```tsx\n * import { useForm, FormProvider } from 'react-hook-form'\n * import { ControlledCurrencyInput } from '@/components/ui/controlled-currency-input'\n * \n * function MyForm() {\n *   const methods = useForm()\n *   \n *   return (\n *     <FormProvider {...methods}>\n *       <form onSubmit={methods.handleSubmit(onSubmit)}>\n *         <ControlledCurrencyInput\n *           name=\"price\"\n *           label=\"Price\"\n *           placeholder=\"Enter price\"\n *           currency=\"USD\"\n *           rules={{ required: 'Price is required' }}\n *         />\n *       </form>\n *     </FormProvider>\n *   )\n * }\n * ```\n */\nexport const ControlledCurrencyInput = <T extends FieldValues>({\n  name,\n  rules,\n  onChange,\n  label,\n  required,\n  ...props\n}: ControlledCurrencyInputProps<T>) => {\n  const {\n    control,\n    formState: { errors },\n  } = useFormContext<T>()\n\n  return (\n    <div className=\"space-y-2\">\n      {label && (\n        <Label htmlFor={name}>\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Label>\n      )}\n      <Controller\n        control={control}\n        name={name}\n        rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n        render={({ field }) => (\n          <CurrencyInput\n            {...field}\n            {...props}\n            id={name}\n            value={field.value}\n            onValueChange={(value) => {\n              if (onChange) {\n                onChange(value)\n              }\n              field.onChange(value)\n            }}\n          />\n        )}\n      />\n      <ErrorMessage\n        errors={errors}\n        name={name}\n        render={({ message }) => (\n          <p className=\"text-sm text-red-500\">{message}</p>\n        )}\n      />\n    </div>\n  )\n}\n\n"
+    }
+  ]
+}

packages/medusa-forms/registry/controlled-datepicker.json

@@ -0,0 +1,16 @@
+{
+  "name": "controlled-datepicker",
+  "type": "registry:ui",
+  "description": "A datepicker component with react-hook-form integration",
+  "dependencies": [
+    "@medusajs/ui",
+    "react-hook-form",
+    "@hookform/error-message"
+  ],
+  "files": [
+    {
+      "name": "controlled-datepicker.tsx",
+      "content": "\"use client\"\n\nimport type { ComponentProps } from 'react'\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form'\nimport { DatePicker, Label } from '@medusajs/ui'\nimport { ErrorMessage } from '@hookform/error-message'\n\nexport type ControlledDatePickerProps<T extends FieldValues> = Omit<ControllerProps, 'render'> & {\n  name: Path<T>\n  rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>\n  label?: string\n  placeholder?: string\n  required?: boolean\n  disabled?: boolean\n  className?: string\n  onChange?: (date: Date | undefined) => void\n} & ComponentProps<typeof DatePicker>\n\n/**\n * A controlled date picker component that integrates with react-hook-form.\n * \n * @example\n * ```tsx\n * import { useForm, FormProvider } from 'react-hook-form'\n * import { ControlledDatePicker } from '@/components/ui/controlled-datepicker'\n * \n * function MyForm() {\n *   const methods = useForm()\n *   \n *   return (\n *     <FormProvider {...methods}>\n *       <form onSubmit={methods.handleSubmit(onSubmit)}>\n *         <ControlledDatePicker\n *           name=\"birthDate\"\n *           label=\"Birth Date\"\n *           placeholder=\"Select your birth date\"\n *           rules={{ required: 'Birth date is required' }}\n *         />\n *       </form>\n *     </FormProvider>\n *   )\n * }\n * ```\n */\nexport const ControlledDatePicker = <T extends FieldValues>({\n  name,\n  rules,\n  onChange,\n  label,\n  placeholder,\n  required,\n  ...props\n}: ControlledDatePickerProps<T>) => {\n  const {\n    control,\n    formState: { errors },\n  } = useFormContext<T>()\n\n  return (\n    <div className=\"space-y-2\">\n      {label && (\n        <Label htmlFor={name}>\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Label>\n      )}\n      <Controller\n        control={control}\n        name={name}\n        rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n        render={({ field }) => (\n          <DatePicker\n            {...field}\n            {...props}\n            value={field.value}\n            onChange={(date) => {\n              if (onChange) {\n                onChange(date)\n              }\n              field.onChange(date)\n            }}\n            placeholder={placeholder}\n          />\n        )}\n      />\n      <ErrorMessage\n        errors={errors}\n        name={name}\n        render={({ message }) => (\n          <p className=\"text-sm text-red-500\">{message}</p>\n        )}\n      />\n    </div>\n  )\n}\n\n"
+    }
+  ]
+}

packages/medusa-forms/registry/controlled-input.json

@@ -0,0 +1,16 @@
+{
+  "name": "controlled-input",
+  "type": "registry:ui",
+  "description": "A input component with react-hook-form integration",
+  "dependencies": [
+    "@medusajs/ui",
+    "react-hook-form",
+    "@hookform/error-message"
+  ],
+  "files": [
+    {
+      "name": "controlled-input.tsx",
+      "content": "\"use client\"\n\nimport type { ComponentProps } from 'react'\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form'\nimport { Input, Label } from '@medusajs/ui'\nimport { ErrorMessage } from '@hookform/error-message'\n\nexport type ControlledInputProps<T extends FieldValues> = Omit<ControllerProps, 'render'> & {\n  name: Path<T>\n  rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>\n  label?: string\n  placeholder?: string\n  required?: boolean\n  disabled?: boolean\n  className?: string\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\n} & ComponentProps<typeof Input>\n\n/**\n * A controlled input component that integrates with react-hook-form.\n * \n * @example\n * ```tsx\n * import { useForm, FormProvider } from 'react-hook-form'\n * import { ControlledInput } from '@/components/ui/controlled-input'\n * \n * function MyForm() {\n *   const methods = useForm()\n *   \n *   return (\n *     <FormProvider {...methods}>\n *       <form onSubmit={methods.handleSubmit(onSubmit)}>\n *         <ControlledInput\n *           name=\"email\"\n *           label=\"Email\"\n *           placeholder=\"Enter your email\"\n *           rules={{ required: 'Email is required' }}\n *         />\n *       </form>\n *     </FormProvider>\n *   )\n * }\n * ```\n */\nexport const ControlledInput = <T extends FieldValues>({\n  name,\n  rules,\n  onChange,\n  label,\n  required,\n  ...props\n}: ControlledInputProps<T>) => {\n  const {\n    control,\n    formState: { errors },\n  } = useFormContext<T>()\n\n  return (\n    <div className=\"space-y-2\">\n      {label && (\n        <Label htmlFor={name}>\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Label>\n      )}\n      <Controller\n        control={control}\n        name={name}\n        rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n        render={({ field }) => (\n          <Input\n            {...field}\n            {...props}\n            id={name}\n            onChange={(evt) => {\n              if (onChange) {\n                onChange(evt)\n              }\n              field.onChange(evt)\n            }}\n          />\n        )}\n      />\n      <ErrorMessage\n        errors={errors}\n        name={name}\n        render={({ message }) => (\n          <p className=\"text-sm text-red-500\">{message}</p>\n        )}\n      />\n    </div>\n  )\n}\n\n"
+    }
+  ]
+}