refactor: Update controlled components to use consistent prop types

jaruesink · jaruesink · commit 706a6ef01f30 · 2025-06-01T23:20:10.000-05:00
- Renamed internal prop types to Controlled*Props for ControlledCheckbox, ControlledCurrencyInput, ControlledDatePicker, ControlledInput, ControlledSelect, and ControlledTextArea for clarity and consistency.
- Updated import statements for UI components to align with new prop type names.
- Enhanced type definitions to improve type safety and maintainability across controlled components.
diff --git a/packages/medusa-forms/src/controlled/ControlledCheckbox.tsx b/packages/medusa-forms/src/controlled/ControlledCheckbox.tsx
@@ -8,13 +8,18 @@ import {
 } from 'react-hook-form';
 import { FieldCheckbox, type FieldCheckboxProps } from '../ui/FieldCheckbox';
 
-type Props<T extends FieldValues> = Omit<FieldCheckboxProps, 'name'> &
+export type ControlledCheckboxProps<T extends FieldValues> = Omit<FieldCheckboxProps, 'name'> &
   Omit<ControllerProps, 'render'> & {
     name: Path<T>;
     rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
   };
 
-export const ControlledCheckbox = <T extends FieldValues>({ name, rules, onChange, ...props }: Props<T>) => {
+export const ControlledCheckbox = <T extends FieldValues>({
+  name,
+  rules,
+  onChange,
+  ...props
+}: ControlledCheckboxProps<T>) => {
   const {
     control,
     formState: { errors },
diff --git a/packages/medusa-forms/src/controlled/ControlledCurrencyInput.tsx b/packages/medusa-forms/src/controlled/ControlledCurrencyInput.tsx
@@ -7,14 +7,18 @@ import {
   type RegisterOptions,
   useFormContext,
 } from 'react-hook-form';
-import { CurrencyInput, type Props as CurrencyInputProps } from '../ui/CurrencyInput';
+import { CurrencyInput, type CurrencyInputProps } from '../ui/CurrencyInput';
 
-type Props<T extends FieldValues> = CurrencyInputProps &
+export type ControlledCurrencyInputProps<T extends FieldValues> = CurrencyInputProps &
   Omit<ControllerProps, 'render' | 'control'> & {
     name: Path<T>;
   };
 
-export const ControlledCurrencyInput = <T extends FieldValues>({ name, rules, ...props }: Props<T>) => {
+export const ControlledCurrencyInput = <T extends FieldValues>({
+  name,
+  rules,
+  ...props
+}: ControlledCurrencyInputProps<T>) => {
   const { control } = useFormContext<T>();
 
   return (
diff --git a/packages/medusa-forms/src/controlled/ControlledDatePicker.tsx b/packages/medusa-forms/src/controlled/ControlledDatePicker.tsx
@@ -6,14 +6,18 @@ import {
   type RegisterOptions,
   useFormContext,
 } from 'react-hook-form';
-import { DatePickerInput, type Props as DatePickerProps } from '../ui/DatePicker';
+import { DatePickerInput, type DatePickerProps } from '../ui/DatePicker';
 
-type Props<T extends FieldValues> = DatePickerProps &
+export type ControlledDatePickerProps<T extends FieldValues> = DatePickerProps &
   Omit<ControllerProps, 'render' | 'control'> & {
     name: Path<T>;
   };
 
-export const ControlledDatePicker = <T extends FieldValues>({ name, rules, ...props }: Props<T>) => {
+export const ControlledDatePicker = <T extends FieldValues>({
+  name,
+  rules,
+  ...props
+}: ControlledDatePickerProps<T>) => {
   const { control } = useFormContext<T>();
   return (
     <Controller<T>
diff --git a/packages/medusa-forms/src/controlled/ControlledInput.tsx b/packages/medusa-forms/src/controlled/ControlledInput.tsx
@@ -7,16 +7,21 @@ import {
   type RegisterOptions,
   useFormContext,
 } from 'react-hook-form';
-import { Input, type Props as InputProps } from '../ui/Input';
+import { Input, type InputProps } from '../ui/Input';
 
-type Props<T extends FieldValues> = InputProps &
+export type ControlledInputProps<T extends FieldValues> = InputProps &
   Omit<ControllerProps, 'render'> & {
     name: Path<T>;
     rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
   } & ComponentProps<typeof Input> &
   Omit<ControllerProps<T>, 'render'>;
 
-export const ControlledInput = <T extends FieldValues>({ name, rules, onChange, ...props }: Props<T>) => {
+export const ControlledInput = <T extends FieldValues>({
+  name,
+  rules,
+  onChange,
+  ...props
+}: ControlledInputProps<T>) => {
   const {
     control,
     formState: { errors },
diff --git a/packages/medusa-forms/src/controlled/ControlledSelect.tsx b/packages/medusa-forms/src/controlled/ControlledSelect.tsx
@@ -8,9 +8,9 @@ import {
   type RegisterOptions,
   useFormContext,
 } from 'react-hook-form';
-import { Select, type Props as SelectProps } from '../ui/Select';
+import { Select, type SelectProps } from '../ui/Select';
 
-type Props<T extends FieldValues> = SelectProps &
+export type ControlledSelectProps<T extends FieldValues> = SelectProps &
   Omit<ControllerProps, 'render'> & {
     name: Path<T>;
     onBlur?: () => void;
@@ -34,7 +34,7 @@ export const ControlledSelect = <T extends FieldValues>({
   onChange,
   onBlur,
   ...props
-}: Props<T>) => {
+}: ControlledSelectProps<T>) => {
   const { control } = useFormContext<T>();
   return (
     <Controller<T>
diff --git a/packages/medusa-forms/src/controlled/ControlledTextArea.tsx b/packages/medusa-forms/src/controlled/ControlledTextArea.tsx
@@ -7,16 +7,16 @@ import {
   type RegisterOptions,
   useFormContext,
 } from 'react-hook-form';
-import { TextArea, type Props as TextAreaProps } from '../ui/TextArea';
+import { TextArea, type TextAreaProps } from '../ui/TextArea';
 
-type Props<T extends FieldValues> = TextAreaProps &
+export type ControlledTextAreaProps<T extends FieldValues> = TextAreaProps &
   Omit<ControllerProps, 'render'> & {
     name: Path<T>;
     rules?: RegisterOptions<T, Path<T>>;
   } & React.ComponentProps<typeof TextArea> &
   Omit<ControllerProps<T>, 'render'>;
 
-export const ControlledTextArea = <T extends FieldValues>({ name, rules, ...props }: Props<T>) => {
+export const ControlledTextArea = <T extends FieldValues>({ name, rules, ...props }: ControlledTextAreaProps<T>) => {
   const { control } = useFormContext<T>();
   return (
     <Controller<T>
diff --git a/packages/medusa-forms/src/controlled/index.ts b/packages/medusa-forms/src/controlled/index.ts
@@ -0,0 +1,6 @@
+export * from './ControlledCheckbox';
+export * from './ControlledCurrencyInput';
+export * from './ControlledDatePicker';
+export * from './ControlledInput';
+export * from './ControlledSelect';
+export * from './ControlledTextArea';
diff --git a/packages/medusa-forms/src/ui/ColorInput.tsx b/packages/medusa-forms/src/ui/ColorInput.tsx
@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import { Input } from './Input';
 
-interface ColorInputProps {
+export interface ColorInputProps {
   onChange: (color: string) => void;
   selectedColor: string;
   onKeyDown?: (e: React.KeyboardEvent) => void;
diff --git a/packages/medusa-forms/src/ui/CurrencyInput.tsx b/packages/medusa-forms/src/ui/CurrencyInput.tsx
@@ -4,13 +4,13 @@ import type { FC } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, MedusaCurrencyInputProps } from './types';
 
-export type Props = MedusaCurrencyInputProps &
+export type CurrencyInputProps = MedusaCurrencyInputProps &
   BasicFieldProps & {
     ref?: React.Ref<HTMLInputElement>;
   };
 
-const Wrapper = FieldWrapper<Props>;
+const Wrapper = FieldWrapper<CurrencyInputProps>;
 
-export const CurrencyInput: FC<Props> = ({ ref, ...props }) => (
+export const CurrencyInput: FC<CurrencyInputProps> = ({ ref, ...props }) => (
   <Wrapper {...props}>{(inputProps) => <MedusaCurrencyInput {...inputProps} ref={ref} />}</Wrapper>
 );
diff --git a/packages/medusa-forms/src/ui/DatePicker.tsx b/packages/medusa-forms/src/ui/DatePicker.tsx
@@ -2,15 +2,15 @@ import { DatePicker } from '@medusajs/ui';
 import type * as React from 'react';
 import type { FC } from 'react';
 import { FieldWrapper } from './FieldWrapper';
-import type { BasicFieldProps, DatePickerProps } from './types';
+import type { BasicFieldProps, DatePickerProps as MedusaDatePickerProps } from './types';
 
-export type Props = DatePickerProps &
+export type DatePickerProps = MedusaDatePickerProps &
   BasicFieldProps & {
     ref?: React.Ref<HTMLInputElement>;
   };
 
-const Wrapper = FieldWrapper<Props>;
+const Wrapper = FieldWrapper<DatePickerProps>;
 
-export const DatePickerInput: FC<Props> = ({ ref, ...props }) => {
+export const DatePickerInput: FC<DatePickerProps> = ({ ref, ...props }) => {
   return <Wrapper {...props}>{(inputProps) => <DatePicker {...{ ...inputProps, ref }} />}</Wrapper>;
 };
diff --git a/packages/medusa-forms/src/ui/Input.tsx b/packages/medusa-forms/src/ui/Input.tsx
@@ -3,13 +3,13 @@ import type * as React from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, MedusaInputProps } from './types';
 
-export type Props = MedusaInputProps &
+export type InputProps = MedusaInputProps &
   BasicFieldProps & {
     ref?: React.Ref<HTMLInputElement>;
   };
 
-const Wrapper = FieldWrapper<Props>;
+const Wrapper = FieldWrapper<InputProps>;
 
-export const Input: React.FC<Props> = ({ ref, ...props }) => (
+export const Input: React.FC<InputProps> = ({ ref, ...props }) => (
   <Wrapper {...props}>{(inputProps) => <MedusaInput {...inputProps} ref={ref} />}</Wrapper>
 );
diff --git a/packages/medusa-forms/src/ui/Label.tsx b/packages/medusa-forms/src/ui/Label.tsx
@@ -3,15 +3,15 @@ import { Label as MedusaLabel, Tooltip } from '@medusajs/ui';
 import clsx from 'clsx';
 import type * as React from 'react';
 
-interface Props {
+export interface LabelProps {
   htmlFor?: string;
   children: React.ReactNode;
   tooltip?: string;
   className?: string;
   onClick?: () => void;
 }
 
-export const Label = ({ htmlFor, children, tooltip, className, ...props }: Props) => (
+export const Label = ({ htmlFor, children, tooltip, className, ...props }: LabelProps) => (
   <div className={clsx('flex items-center mb-2 text-gray-500 w-full', className)}>
     <MedusaLabel htmlFor={htmlFor} size="xsmall" {...props}>
       {children}
diff --git a/packages/medusa-forms/src/ui/Select.tsx b/packages/medusa-forms/src/ui/Select.tsx
@@ -1,16 +1,16 @@
 import { Select as MedusaSelect } from '@medusajs/ui';
 import type * as React from 'react';
 import { FieldWrapper } from './FieldWrapper';
-import type { BasicFieldProps, SelectProps } from './types';
+import type { BasicFieldProps, SelectProps as MedusaSelectProps } from './types';
 
-export type Props = SelectProps &
+export type SelectProps = MedusaSelectProps &
   BasicFieldProps & {
     ref?: React.Ref<unknown>;
   };
 
-const Wrapper = FieldWrapper<Props>;
+const Wrapper = FieldWrapper<SelectProps>;
 
-const SelectComponent: React.FC<Props> = ({ ref, ...props }) => {
+const SelectComponent: React.FC<SelectProps> = ({ ref, ...props }) => {
   return (
     <Wrapper {...props}>
       {(inputProps) => <MedusaSelect {...{ ...inputProps, ref }}>{props.children}</MedusaSelect>}
diff --git a/packages/medusa-forms/src/ui/TextArea.tsx b/packages/medusa-forms/src/ui/TextArea.tsx
@@ -1,15 +1,15 @@
 import { Textarea } from '@medusajs/ui';
 import type * as React from 'react';
 import { FieldWrapper } from './FieldWrapper';
-import type { BasicFieldProps, TextAreaProps } from './types';
+import type { BasicFieldProps, TextAreaProps as MedusaTextAreaProps } from './types';
 
-export type Props = TextAreaProps &
+export type TextAreaProps = MedusaTextAreaProps &
   BasicFieldProps & {
     ref?: React.Ref<HTMLTextAreaElement>;
   };
 
-const Wrapper = FieldWrapper<Props>;
+const Wrapper = FieldWrapper<TextAreaProps>;
 
-export const TextArea: React.FC<Props> = ({ ref, ...props }) => (
+export const TextArea: React.FC<TextAreaProps> = ({ ref, ...props }) => (
   <Wrapper {...props}>{(inputProps) => <Textarea {...inputProps} ref={ref} />}</Wrapper>
 );
diff --git a/packages/medusa-forms/src/ui/index.ts b/packages/medusa-forms/src/ui/index.ts
@@ -0,0 +1,13 @@
+export * from './Button';
+export * from './ColorInput';
+export * from './CurrencyInput';
+export * from './DatePicker';
+export * from './Error';
+export * from './FieldCheckbox';
+export * from './FieldGroup';
+export * from './FieldWrapper';
+export * from './FileUpload';
+export * from './Input';
+export * from './Label';
+export * from './Select';
+export * from './TextArea';
