feat: Enhance form stories with additional args and alert on submit

- Add args for various checkbox stories to improve usage examples
- Update onSubmit functions in forms to alert submitted data for better feedback
- Refactor handleSelectAll to improve type handling in MultipleCheckboxesForm
- Introduce helper functions for file extraction in FileUpload component

These changes enhance the documentation and usability of form components in the storybook, providing clearer examples and better user interaction.

Author: jaruesink

apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx

@@ -37,6 +37,7 @@ const BasicCheckboxForm = () => {
 };
 
 export const BasicUsage: Story = {
+  args: { name: 'acceptTerms', label: 'I accept the terms and conditions' },
   render: () => <BasicCheckboxForm />,
 };
 
@@ -59,6 +60,7 @@ const DefaultCheckedForm = () => {
 };
 
 export const DefaultChecked: Story = {
+  args: { name: 'newsletter', label: 'Subscribe to newsletter', checked: true },
   render: () => <DefaultCheckedForm />,
 };
 
@@ -81,6 +83,7 @@ const DefaultUncheckedForm = () => {
 };
 
 export const DefaultUnchecked: Story = {
+  args: { name: 'marketing', label: 'Receive marketing emails' },
   render: () => <DefaultUncheckedForm />,
 };
 
@@ -93,8 +96,9 @@ const RequiredValidationForm = () => {
     mode: 'onChange',
   });
 
-  const onSubmit = (data: any) => {
+  const onSubmit = (data: Record<string, unknown>) => {
     // Form data processed successfully
+    alert(`Form data submitted: ${JSON.stringify(data)}`);
   };
 
   return (
@@ -121,6 +125,7 @@ const RequiredValidationForm = () => {
 };
 
 export const RequiredValidation: Story = {
+  args: { name: 'requiredField', label: 'This field is required' },
   render: () => <RequiredValidationForm />,
 };
 
@@ -141,7 +146,7 @@ const CustomValidationForm = () => {
           label="I agree to the privacy policy"
           rules={{
             required: 'Please accept our privacy policy to continue',
-            validate: (value) => value === true || 'You must agree to the privacy policy',
+            validate: (value: boolean) => value === true || 'You must agree to the privacy policy',
           }}
         />
         <div className="text-sm text-gray-600">Has errors: {form.formState.errors.agreement ? 'Yes' : 'No'}</div>
@@ -154,6 +159,7 @@ const CustomValidationForm = () => {
 };
 
 export const CustomValidationMessage: Story = {
+  args: { name: 'agreement', label: 'I agree to the privacy policy' },
   render: () => <CustomValidationForm />,
 };
 
@@ -184,6 +190,7 @@ const ErrorStateForm = () => {
 };
 
 export const ErrorState: Story = {
+  args: { name: 'errorField', label: 'Checkbox with error state' },
   render: () => <ErrorStateForm />,
 };
 
@@ -208,6 +215,7 @@ const DisabledStateForm = () => {
 };
 
 export const DisabledState: Story = {
+  args: { name: 'disabledExample', label: 'Disabled checkbox example' },
   render: () => <DisabledStateForm />,
 };
 
@@ -230,11 +238,12 @@ const MultipleCheckboxesForm = () => {
     form.setValue('selectAll', allSelected);
   }, [allSelected, form]);
 
-  const handleSelectAll = (checked: boolean) => {
-    form.setValue('option1', checked);
-    form.setValue('option2', checked);
-    form.setValue('option3', checked);
-    form.setValue('selectAll', checked);
+  const handleSelectAll = (checked: string | boolean) => {
+    const isChecked = checked === true;
+    form.setValue('option1', isChecked);
+    form.setValue('option2', isChecked);
+    form.setValue('option3', isChecked);
+    form.setValue('selectAll', isChecked);
   };
 
   return (
@@ -260,6 +269,7 @@ const MultipleCheckboxesForm = () => {
 };
 
 export const MultipleCheckboxes: Story = {
+  args: { name: 'selectAll', label: 'Select All' },
   render: () => <MultipleCheckboxesForm />,
 };
 
@@ -276,25 +286,31 @@ const CompleteFormExampleComponent = () => {
     mode: 'onChange',
   });
 
-  const onSubmit = (data: any) => {
+  const onSubmit = (data: Record<string, unknown>) => {
     alert(`Form submitted with data: ${JSON.stringify(data, null, 2)}`);
   };
 
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-[400px] space-y-4">
         <div>
-          <label className="block text-sm font-medium mb-1">Username</label>
+          <label htmlFor="username" className="block text-sm font-medium mb-1">
+            Username
+          </label>
           <input
+            id="username"
             {...form.register('username', { required: 'Username is required' })}
             className="w-full px-3 py-2 border border-gray-300 rounded-md"
             placeholder="Enter username"
           />
         </div>
 
         <div>
-          <label className="block text-sm font-medium mb-1">Email</label>
+          <label htmlFor="email" className="block text-sm font-medium mb-1">
+            Email
+          </label>
           <input
+            id="email"
             {...form.register('email', {
               required: 'Email is required',
               pattern: {
@@ -342,5 +358,6 @@ const CompleteFormExampleComponent = () => {
 };
 
 export const CompleteFormExample: Story = {
+  args: { name: 'exampleForm', label: 'Complete form example' },
   render: () => <CompleteFormExampleComponent />,
 };

apps/docs/src/medusa-forms/ControlledDatePicker.stories.tsx

@@ -50,6 +50,7 @@ const RequiredFieldValidationComponent = () => {
 
   const onSubmit = (data: unknown) => {
     // Form data processed successfully
+    alert(`Form data submitted: ${JSON.stringify(data)}`);
   };
 
   return (

apps/docs/src/medusa-forms/ControlledTextArea.stories.tsx

@@ -129,6 +129,7 @@ const RequiredFieldForm = () => {
 
   const onSubmit = (data: unknown) => {
     // Form data processed successfully
+    alert(`Form data submitted: ${JSON.stringify(data)}`);
   };
 
   return (
@@ -243,6 +244,7 @@ const ValidationErrorForm = () => {
 
   const onSubmit = (data: unknown) => {
     // Form data processed successfully
+    alert(`Form data submitted: ${JSON.stringify(data)}`);
   };
 
   const hasError = !!form.formState.errors.message;
@@ -332,6 +334,7 @@ const ComprehensiveForm = () => {
 
   const onSubmit = (data: unknown) => {
     // Form data processed successfully
+    alert(`Form data submitted: ${JSON.stringify(data)}`);
   };
 
   return (

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

@@ -36,7 +36,10 @@ export const FieldCheckbox: React.FC<FieldCheckboxProps> = ({
             {...fieldProps}
             ref={ref}
             checked={props.checked}
-            onChange={(e) => {}}
+            onChange={(_e) => {
+              // this is a noop since we handle the onChange in the onCheckedChange handler,
+              // but we need to pass a function to the onChange prop because the MedusaCheckbox component expects it
+            }}
             onCheckedChange={(checked) => {
               onChange?.(checked);
             }}

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

@@ -39,32 +39,36 @@ const FileUpload: FC<FileUploadProps> = ({
     }
   };
 
-  const handleFileDrop = (e: DragEvent<HTMLDivElement>) => {
-    setUploadError(false);
-    e.preventDefault();
-
+  const extractFilesFromItems = (items: DataTransferItemList): File[] => {
     const files: File[] = [];
-
-    if (e.dataTransfer.items) {
-      // use DataTransferItemList interface to access the file(s)
-      for (let i = 0; i < e.dataTransfer.items.length; i += 1) {
-        // if dropped items are not files, reject them
-        if (e.dataTransfer.items[i].kind === 'file') {
-          const file = e.dataTransfer.items[i].getAsFile();
-
-          if (file && filetypes.indexOf(file.type) > -1) {
-            files.push(file);
-          }
+    for (const item of items) {
+      if (item.kind === 'file') {
+        const file = item.getAsFile();
+        if (file && filetypes.indexOf(file.type) > -1) {
+          files.push(file);
         }
       }
-    } else {
-      // use DataTransfer interface to access the file(s)
-      for (let i = 0; i < e.dataTransfer.files.length; i += 1) {
-        if (filetypes.indexOf(e.dataTransfer.files[i].type) > -1) {
-          files.push(e.dataTransfer.files[i]);
-        }
+    }
+    return files;
+  };
+
+  const extractFilesFromFileList = (fileList: FileList): File[] => {
+    const files: File[] = [];
+    for (const file of fileList) {
+      if (filetypes.indexOf(file.type) > -1) {
+        files.push(file);
       }
     }
+    return files;
+  };
+
+  const handleFileDrop = (e: DragEvent<HTMLDivElement>) => {
+    setUploadError(false);
+    e.preventDefault();
+
+    const files = e.dataTransfer.items
+      ? extractFilesFromItems(e.dataTransfer.items)
+      : extractFilesFromFileList(e.dataTransfer.files);
 
     if (files.length === 1) {
       onFileChosen(files);

packages/medusa-forms/src/ui/types.d.ts

@@ -61,7 +61,7 @@ type DatePickerValueProps = {
   className?: string;
   modal?: boolean;
 };
-interface DatePickerProps
+export interface DatePickerProps
   extends Omit<BaseDatePickerProps<CalendarDateTime | CalendarDate>, keyof DatePickerValueProps>,
     DatePickerValueProps {}
 
@@ -89,7 +89,7 @@ export type SearchableSelectProps = Props<Option, IsMulti, Group> &
 export type CreatableSelectProps = CreatableProps<Option, IsMulti, Group> &
   RefAttributes<SelectInstance<Option, IsMulti, Group>>;
 
-interface SelectProps extends React.ComponentPropsWithRef {
+export interface SelectProps extends React.ComponentPropsWithRef {
   size?: 'base' | 'small';
   children?: React.ReactNode;
   value?: string;
@@ -98,7 +98,7 @@ interface SelectProps extends React.ComponentPropsWithRef {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-  dir?: Direction;
+  dir?: 'ltr' | 'rtl';
   name?: string;
   autoComplete?: string;
   disabled?: boolean;