Add form input components with field wrapper for Medusa UI

packages/medusa-forms/src/ui/CurrencyInput.tsx

@@ -1,12 +1,15 @@
 import { CurrencyInput as MedusaCurrencyInput } from '@medusajs/ui';
-import { forwardRef } from 'react';
+import { type FC } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, MedusaCurrencyInputProps } from './types';
 
-export type Props = MedusaCurrencyInputProps & BasicFieldProps;
+export type Props = MedusaCurrencyInputProps & BasicFieldProps & {
+  ref?: React.Ref<HTMLInputElement>;
+};
 
 const Wrapper = FieldWrapper<Props>;
 
-export const CurrencyInput: React.FC<Props> = forwardRef<HTMLInputElement, Props>((props, ref) => (
+export const CurrencyInput: FC<Props> = ({ ref, ...props }) => (
   <Wrapper {...props}>{(inputProps) => <MedusaCurrencyInput {...inputProps} ref={ref} />}</Wrapper>
-));
+);
+

packages/medusa-forms/src/ui/DatePicker.tsx

@@ -1,12 +1,15 @@
 import { DatePicker } from '@medusajs/ui';
-import { forwardRef } from 'react';
+import { type FC } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, DatePickerProps } from './types';
 
-export type Props = DatePickerProps & BasicFieldProps;
+export type Props = DatePickerProps & BasicFieldProps & {
+  ref?: React.Ref<HTMLInputElement>;
+};
 
 const Wrapper = FieldWrapper<Props>;
 
-export const DatePickerInput: React.FC<Props> = forwardRef<HTMLInputElement, Props>((props, ref) => {
+export const DatePickerInput: FC<Props> = ({ ref, ...props }) => {
   return <Wrapper {...props}>{(inputProps) => <DatePicker {...{ ...inputProps, ref }} />}</Wrapper>;
-});
+};
+

packages/medusa-forms/src/ui/FieldCheckbox.tsx

@@ -1,6 +1,5 @@
 import { Checkbox as MedusaCheckbox } from '@medusajs/ui';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import { Label } from './Label';
 import type { BasicFieldProps } from './types';
@@ -9,43 +8,53 @@ export type CheckedState = boolean | 'indeterminate';
 export type FieldCheckboxProps = BasicFieldProps & {
   checked?: CheckedState;
   onChange?: (checked: CheckedState) => void;
+  ref?: React.Ref<HTMLButtonElement>;
 };
 
-export const FieldCheckbox: React.FC<FieldCheckboxProps> = forwardRef<HTMLButtonElement, FieldCheckboxProps>(
-  ({ label, labelClassName, labelTooltip, wrapperClassName, errorClassName, formErrors, onChange, ...props }, ref) => {
-    return (
-      <FieldWrapper<FieldCheckboxProps>
-        wrapperClassName={wrapperClassName}
-        errorClassName={errorClassName}
-        formErrors={formErrors}
-        {...props}
-      >
-        {(fieldProps) => (
-          <div className="flex items-center">
-            <MedusaCheckbox
-              {...fieldProps}
-              ref={ref}
-              checked={props.checked}
-              onChange={(e) => {}}
-              onCheckedChange={(checked) => {
-                onChange?.(checked);
+export const FieldCheckbox: React.FC<FieldCheckboxProps> = ({ 
+  label, 
+  labelClassName, 
+  labelTooltip, 
+  wrapperClassName, 
+  errorClassName, 
+  formErrors, 
+  onChange, 
+  ref,
+  ...props 
+}) => {
+  return (
+    <FieldWrapper<FieldCheckboxProps>
+      wrapperClassName={wrapperClassName}
+      errorClassName={errorClassName}
+      formErrors={formErrors}
+      {...props}
+    >
+      {(fieldProps) => (
+        <div className="flex items-center">
+          <MedusaCheckbox
+            {...fieldProps}
+            ref={ref}
+            checked={props.checked}
+            onChange={(e) => {}}
+            onCheckedChange={(checked) => {
+              onChange?.(checked);
+            }}
+          />
+
+          {label && (
+            <Label
+              htmlFor={props.name}
+              onClick={() => {
+                onChange?.(!props.checked);
               }}
-            />
+              className={clsx('ml-2 !mb-0 font-normal [&>label]:!cursor-pointer', labelClassName)}
+            >
+              {label}
+            </Label>
+          )}
+        </div>
+      )}
+    </FieldWrapper>
+  );
+};
 
-            {label && (
-              <Label
-                htmlFor={props.name}
-                onClick={() => {
-                  onChange?.(!props.checked);
-                }}
-                className={clsx('ml-2 !mb-0 font-normal [&>label]:!cursor-pointer', labelClassName)}
-              >
-                {label}
-              </Label>
-            )}
-          </div>
-        )}
-      </FieldWrapper>
-    );
-  },
-);

packages/medusa-forms/src/ui/Input.tsx

@@ -1,12 +1,14 @@
 import { Input as MedusaInput } from '@medusajs/ui';
-import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, MedusaInputProps } from './types';
 
-export type Props = MedusaInputProps & BasicFieldProps;
+export type Props = MedusaInputProps & BasicFieldProps & {
+  ref?: React.Ref<HTMLInputElement>;
+};
 
 const Wrapper = FieldWrapper<Props>;
 
-export const Input: React.FC<Props> = forwardRef<HTMLInputElement, Props>((props, ref) => (
+export const Input: React.FC<Props> = ({ ref, ...props }) => (
   <Wrapper {...props}>{(inputProps) => <MedusaInput {...inputProps} ref={ref} />}</Wrapper>
-));
+);
+

packages/medusa-forms/src/ui/Select.tsx

@@ -1,19 +1,20 @@
 import { Select as MedusaSelect } from '@medusajs/ui';
-import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, SelectProps } from './types';
 
-export type Props = SelectProps & BasicFieldProps;
+export type Props = SelectProps & BasicFieldProps & {
+  ref?: React.Ref<unknown>;
+};
 
 const Wrapper = FieldWrapper<Props>;
 
-const SelectComponent = forwardRef<unknown, Props>((props, ref) => {
+const SelectComponent: React.FC<Props> = ({ ref, ...props }) => {
   return (
     <Wrapper {...props}>
       {(inputProps) => <MedusaSelect {...{ ...inputProps, ref }}>{props.children}</MedusaSelect>}
     </Wrapper>
   );
-});
+};
 
 type SelectComponent = typeof SelectComponent & {
   Trigger: typeof MedusaSelect.Trigger;
@@ -28,3 +29,4 @@ export const Select: SelectComponent = Object.assign(SelectComponent, {
   Content: MedusaSelect.Content,
   Item: MedusaSelect.Item,
 });
+

packages/medusa-forms/src/ui/TextArea.tsx

@@ -1,12 +1,14 @@
 import { Textarea } from '@medusajs/ui';
-import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, TextAreaProps } from './types';
 
-export type Props = TextAreaProps & BasicFieldProps;
+export type Props = TextAreaProps & BasicFieldProps & {
+  ref?: React.Ref<HTMLTextAreaElement>;
+};
 
 const Wrapper = FieldWrapper<Props>;
 
-export const TextArea: React.FC<Props> = forwardRef((props, ref) => (
+export const TextArea: React.FC<Props> = ({ ref, ...props }) => (
   <Wrapper {...props}>{(inputProps) => <Textarea {...inputProps} ref={ref} />}</Wrapper>
-));
+);
+