Selected: {watchedValues.filter(Boolean).length} of {watchedValues.length}
@@ -327,22 +285,22 @@ const CompleteFormExampleComponent = () => {
);
diff --git a/apps/docs/src/medusa-forms/FormIntegrationExamples.stories.tsx b/apps/docs/src/medusa-forms/FormIntegrationExamples.stories.tsx
index f167bd4..1ced503 100644
--- a/apps/docs/src/medusa-forms/FormIntegrationExamples.stories.tsx
+++ b/apps/docs/src/medusa-forms/FormIntegrationExamples.stories.tsx
@@ -9,6 +9,12 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
+// Regex patterns defined at top level for performance
+const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+const PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/;
+const SKU_REGEX = /^[A-Z0-9-]+$/;
+const DIMENSIONS_REGEX = /^\d+(\.\d+)?\s*x\s*\d+(\.\d+)?\s*x\s*\d+(\.\d+)?\s*(inches?|in|cm|centimeters?)?$/i;
+
const meta = {
title: 'Medusa Forms/Form Integration Examples',
component: () => null, // No single component
@@ -142,7 +148,7 @@ export const CompleteRegistrationFormExample: Story = {
rules={{
required: 'Email is required',
pattern: {
- value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+ value: EMAIL_REGEX,
message: 'Invalid email address',
},
}}
@@ -183,7 +189,7 @@ export const CompleteRegistrationFormExample: Story = {
required: 'Password is required',
minLength: { value: 8, message: 'Password must be at least 8 characters' },
pattern: {
- value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+ value: PASSWORD_REGEX,
message:
'Password must contain at least one uppercase letter, one lowercase letter, and one number',
},
@@ -380,7 +386,7 @@ export const ProductCreationFormExample: Story = {
rules={{
required: 'SKU is required',
pattern: {
- value: /^[A-Z0-9-]+$/,
+ value: SKU_REGEX,
message: 'SKU must contain only uppercase letters, numbers, and hyphens',
},
}}
@@ -429,7 +435,7 @@ export const ProductCreationFormExample: Story = {
rules={{
required: 'Dimensions are required',
pattern: {
- value: /^\d+(\.\d+)?\s*x\s*\d+(\.\d+)?\s*x\s*\d+(\.\d+)?\s*(inches?|in|cm|centimeters?)?$/i,
+ value: DIMENSIONS_REGEX,
message: 'Please enter dimensions in format: L x W x H (e.g., 10 x 8 x 6 inches)',
},
}}
@@ -590,7 +596,7 @@ export const FormValidationShowcase: Story = {
rules={{
required: 'Email is required',
pattern: {
- value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+ value: EMAIL_REGEX,
message: 'Invalid email format',
},
}}
diff --git a/package.json b/package.json
index fceb7f2..2126c8c 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,7 @@
"name": "medusa-forms",
"version": "0.1.1",
"private": true,
- "workspaces": [
- "apps/*",
- "packages/*"
- ],
+ "workspaces": ["apps/*", "packages/*"],
"scripts": {
"start": "yarn dev",
"dev": "turbo run dev",
diff --git a/packages/medusa-forms/package.json b/packages/medusa-forms/package.json
index 0a08a81..cc89ff4 100644
--- a/packages/medusa-forms/package.json
+++ b/packages/medusa-forms/package.json
@@ -4,9 +4,7 @@
"main": "./dist/cjs/index.cjs",
"module": "./dist/esm/index.js",
"types": "./dist/types/index.d.ts",
- "files": [
- "dist"
- ],
+ "files": ["dist"],
"exports": {
".": {
"import": {
diff --git a/packages/medusa-forms/src/index.ts b/packages/medusa-forms/src/index.ts
index ca92d9f..588b8c0 100644
--- a/packages/medusa-forms/src/index.ts
+++ b/packages/medusa-forms/src/index.ts
@@ -1,2 +1 @@
export * from './controlled';
-
diff --git a/packages/medusa-forms/src/ui/types.d.ts b/packages/medusa-forms/src/ui/types.d.ts
index 62742d8..f65999c 100644
--- a/packages/medusa-forms/src/ui/types.d.ts
+++ b/packages/medusa-forms/src/ui/types.d.ts
@@ -1,8 +1,18 @@
-import type { CalendarDate, CalendarDateTime, CalendarProps, Granularity } from '@internationalized/date';
-import type { BaseDatePickerProps, Direction, Translations } from '@medusajs/ui';
import type { ReactNode, RefAttributes } from 'react';
import type { Props, SelectInstance } from 'react-select';
import type { CreatableProps } from 'react-select/creatable';
+import type {
+ CalendarDateTime,
+ CalendarDate,
+ CalendarProps,
+ Granularity
+} from '@internationalized/date';
+import type {
+ BaseDatePickerProps,
+ Translations,
+ Direction
+} from '@medusajs/ui';
+import * as React from 'react';
export interface BasicFieldProps {
label?: ReactNode;
@@ -42,7 +52,10 @@ type Option = {
};
type IsMulti = boolean;
-type Group = any;
+type Group = {
+ label: string;
+ options: Option[];
+};
interface PickerProps extends CalendarProps {
/**
From d4e739d3fdf234445ef04b9035eb4e8ba6643588 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Wed, 4 Jun 2025 05:11:45 +0000
Subject: [PATCH 06/16] fix: Clean up unused imports and interfaces
- Remove unused PickerProps interface
- Remove unused CalendarProps, Translations, Direction imports
- Fix import type usage for React
- Reduce linting errors from 710+ to ~215
These changes address the most critical linting issues that could cause test failures.
---
packages/medusa-forms/src/ui/types.d.ts | 42 ++-----------------------
1 file changed, 2 insertions(+), 40 deletions(-)
diff --git a/packages/medusa-forms/src/ui/types.d.ts b/packages/medusa-forms/src/ui/types.d.ts
index f65999c..a9cfbe0 100644
--- a/packages/medusa-forms/src/ui/types.d.ts
+++ b/packages/medusa-forms/src/ui/types.d.ts
@@ -4,15 +4,12 @@ import type { CreatableProps } from 'react-select/creatable';
import type {
CalendarDateTime,
CalendarDate,
- CalendarProps,
Granularity
} from '@internationalized/date';
import type {
- BaseDatePickerProps,
- Translations,
- Direction
+ BaseDatePickerProps
} from '@medusajs/ui';
-import * as React from 'react';
+import type * as React from 'react';
export interface BasicFieldProps {
label?: ReactNode;
@@ -57,41 +54,6 @@ type Group = {
options: Option[];
};
-interface PickerProps extends CalendarProps {
- /**
- * The class name to apply on the date picker.
- */
- className?: string;
- /**
- * Whether the date picker's input is disabled.
- */
- disabled?: boolean;
- /**
- * Whether the date picker's input is required.
- */
- required?: boolean;
- /**
- * The date picker's placeholder.
- */
- placeholder?: string;
- /**
- * The date picker's size.
- */
- size?: 'small' | 'base';
- /**
- * Whether to show a time picker along with the date picker.
- */
- showTimePicker?: boolean;
- /**
- * Translation keys for the date picker. Use this to localize the date picker.
- */
- translations?: Translations;
- id?: string;
- 'aria-invalid'?: boolean;
- 'aria-label'?: string;
- 'aria-labelledby'?: string;
- 'aria-required'?: boolean;
-}
type DatePickerValueProps = {
defaultValue?: Date | null;
From 68320cc10ea0fdab6b3e01dc43db941ad727156a Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Wed, 4 Jun 2025 05:17:26 +0000
Subject: [PATCH 07/16] docs: Fix control prop usage in documentation examples
- Remove unnecessary control prop from component examples
- Update to use FormProvider pattern as per Cursor Rules
- Components use useFormContext() internally, no need to pass control
- Add proper FormProvider wrapper in examples
- Update both Basic Usage and Medusa Integration examples
Fixes the documentation to reflect that Medusa Forms components have built-in hooks and don't require the control prop to be passed explicitly.
---
.../docs/src/0.1 Hello World (start here).mdx | 75 ++++++++++---------
1 file changed, 38 insertions(+), 37 deletions(-)
diff --git a/apps/docs/src/0.1 Hello World (start here).mdx b/apps/docs/src/0.1 Hello World (start here).mdx
index 2bc8f0f..5e4090c 100644
--- a/apps/docs/src/0.1 Hello World (start here).mdx
+++ b/apps/docs/src/0.1 Hello World (start here).mdx
@@ -44,32 +44,32 @@ yarn add @lambdacurry/medusa-forms
### Basic Usage
```tsx
-import { useForm } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
import { ControlledInput, ControlledSelect } from '@lambdacurry/medusa-forms';
function MyForm() {
- const { control, handleSubmit } = useForm();
+ const methods = useForm();
return (
-
+
+
+
);
}
```
@@ -80,25 +80,27 @@ These components are designed to work perfectly in Medusa Admin interfaces:
```tsx
import { RouteConfig } from "@medusajs/admin"
+import { FormProvider, useForm } from "react-hook-form"
import { ControlledInput, ControlledCurrencyInput } from "@lambdacurry/medusa-forms"
const ProductForm = () => {
- // Your Medusa admin form logic here
+ const methods = useForm();
+
return (
-
-
-
-
+
+
+
)
}
@@ -136,4 +138,3 @@ Check out our **Form Integration Examples** story to see complete working forms
---
**Ready to build better forms?** Start exploring the components in the sidebar! 👈
-
From 56ad1ac9c1662740942cefa48da108685be1b642 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Wed, 4 Jun 2025 05:22:47 +0000
Subject: [PATCH 08/16] fix: Remove console statements causing test failures
- Remove console.error from simple-server.js
- Remove console.log from server startup
- Remove debug logging from ControlledSelect stories
- Remove console.log from FormIntegrationExamples stories
- Replace with appropriate comments for better code quality
Addresses linting issues that were causing test failures in CI.
---
apps/docs/simple-server.js | 3 +--
.../src/medusa-forms/ControlledSelect.stories.tsx | 2 +-
.../FormIntegrationExamples.stories.tsx | 6 +++---
packages/medusa-forms/src/ui/types.d.ts | 13 +++----------
4 files changed, 8 insertions(+), 16 deletions(-)
diff --git a/apps/docs/simple-server.js b/apps/docs/simple-server.js
index 51aa9ba..1b386c3 100644
--- a/apps/docs/simple-server.js
+++ b/apps/docs/simple-server.js
@@ -30,7 +30,6 @@ const server = http.createServer((req, res) => {
fs.readFile(filePath, (err, content) => {
if (err) {
- console.error('Error reading file:', filePath, err);
res.writeHead(404);
res.end('Not found');
return;
@@ -42,5 +41,5 @@ const server = http.createServer((req, res) => {
const PORT = 45678;
server.listen(PORT, () => {
- console.log(`Server running on http://127.0.0.1:${PORT}`);
+ // Server started successfully
});
diff --git a/apps/docs/src/medusa-forms/ControlledSelect.stories.tsx b/apps/docs/src/medusa-forms/ControlledSelect.stories.tsx
index 6f0cd93..123154e 100644
--- a/apps/docs/src/medusa-forms/ControlledSelect.stories.tsx
+++ b/apps/docs/src/medusa-forms/ControlledSelect.stories.tsx
@@ -457,7 +457,7 @@ export const InteractiveDemo: Story = {
const handleSelectChange = (value: unknown) => {
setSelectedValue(value as string);
- console.log('Select value changed:', value);
+ // Value changed - could trigger side effects here
};
return (
diff --git a/apps/docs/src/medusa-forms/FormIntegrationExamples.stories.tsx b/apps/docs/src/medusa-forms/FormIntegrationExamples.stories.tsx
index 1ced503..82da8b4 100644
--- a/apps/docs/src/medusa-forms/FormIntegrationExamples.stories.tsx
+++ b/apps/docs/src/medusa-forms/FormIntegrationExamples.stories.tsx
@@ -92,8 +92,8 @@ export const CompleteRegistrationFormExample: Story = {
await new Promise((resolve) => setTimeout(resolve, 2000));
setIsSubmitting(false);
- setSubmitResult(`Registration successful for ${data.firstName} ${data.lastName}!`);
- console.log('Registration data:', data);
+ setSubmitResult(`Registration successful! Welcome, ${data.firstName}!`);
+ // Registration data processed successfully
};
const countryOptions = [
@@ -323,7 +323,7 @@ export const ProductCreationFormExample: Story = {
setIsSubmitting(false);
setSubmitResult(`Product "${data.name}" created successfully!`);
- console.log('Product data:', data);
+ // Product data processed successfully
};
const categoryOptions = [
diff --git a/packages/medusa-forms/src/ui/types.d.ts b/packages/medusa-forms/src/ui/types.d.ts
index a9cfbe0..aa540da 100644
--- a/packages/medusa-forms/src/ui/types.d.ts
+++ b/packages/medusa-forms/src/ui/types.d.ts
@@ -1,15 +1,9 @@
+import type { CalendarDate, CalendarDateTime, Granularity } from '@internationalized/date';
+import type { BaseDatePickerProps } from '@medusajs/ui';
import type { ReactNode, RefAttributes } from 'react';
+import type * as React from 'react';
import type { Props, SelectInstance } from 'react-select';
import type { CreatableProps } from 'react-select/creatable';
-import type {
- CalendarDateTime,
- CalendarDate,
- Granularity
-} from '@internationalized/date';
-import type {
- BaseDatePickerProps
-} from '@medusajs/ui';
-import type * as React from 'react';
export interface BasicFieldProps {
label?: ReactNode;
@@ -54,7 +48,6 @@ type Group = {
options: Option[];
};
-
type DatePickerValueProps = {
defaultValue?: Date | null;
value?: Date | null;
From e6618e51d02541f93fce36206e6b0d4be0bdada5 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Wed, 4 Jun 2025 05:24:02 +0000
Subject: [PATCH 09/16] fix: Remove remaining console.log statements from story
files
- Remove console.log from ControlledCheckbox stories
- Remove console.log from ControlledDatePicker stories
- Remove console.log from ControlledTextArea stories
- Replace with appropriate comments for cleaner code
This addresses the remaining console statement linting errors that were causing test failures.
---
apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx | 2 +-
apps/docs/src/medusa-forms/ControlledDatePicker.stories.tsx | 2 +-
apps/docs/src/medusa-forms/ControlledTextArea.stories.tsx | 6 +++---
3 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx b/apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx
index f7db56a..cb6e732 100644
--- a/apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx
+++ b/apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx
@@ -94,7 +94,7 @@ const RequiredValidationForm = () => {
});
const onSubmit = (data: any) => {
- console.log('Form submitted:', data);
+ // Form data processed successfully
};
return (
diff --git a/apps/docs/src/medusa-forms/ControlledDatePicker.stories.tsx b/apps/docs/src/medusa-forms/ControlledDatePicker.stories.tsx
index e027610..cf255dd 100644
--- a/apps/docs/src/medusa-forms/ControlledDatePicker.stories.tsx
+++ b/apps/docs/src/medusa-forms/ControlledDatePicker.stories.tsx
@@ -49,7 +49,7 @@ const RequiredFieldValidationComponent = () => {
});
const onSubmit = (data: unknown) => {
- console.log('Form submitted:', data);
+ // Form data processed successfully
};
return (
diff --git a/apps/docs/src/medusa-forms/ControlledTextArea.stories.tsx b/apps/docs/src/medusa-forms/ControlledTextArea.stories.tsx
index a4282e2..48754ea 100644
--- a/apps/docs/src/medusa-forms/ControlledTextArea.stories.tsx
+++ b/apps/docs/src/medusa-forms/ControlledTextArea.stories.tsx
@@ -128,7 +128,7 @@ const RequiredFieldForm = () => {
});
const onSubmit = (data: unknown) => {
- console.log('Form submitted:', data);
+ // Form data processed successfully
};
return (
@@ -242,7 +242,7 @@ const ValidationErrorForm = () => {
});
const onSubmit = (data: unknown) => {
- console.log('Form submitted:', data);
+ // Form data processed successfully
};
const hasError = !!form.formState.errors.message;
@@ -331,7 +331,7 @@ const ComprehensiveForm = () => {
});
const onSubmit = (data: unknown) => {
- console.log('Comprehensive form submitted:', data);
+ // Form data processed successfully
};
return (
From 4cb7805bb91772873b94c5e1b264af9b0a0b1b35 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Wed, 4 Jun 2025 19:09:07 +0000
Subject: [PATCH 10/16] config: Ignore storybook-static directory from biome
checks
- Add './apps/docs/storybook-static' to biome.json ignore list
- Reduces linting errors from 536 to 93 (443 error reduction!)
- Reduces warnings from 141 to 44 (97 warning reduction!)
- Generated storybook files should not be linted
This addresses the user request to ignore the storybook-static directory
from biome linting checks, significantly improving the linting output.
---
biome.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/biome.json b/biome.json
index 058d760..446125a 100644
--- a/biome.json
+++ b/biome.json
@@ -5,7 +5,7 @@
"clientKind": "git",
"useIgnoreFile": false
},
- "files": { "ignoreUnknown": false, "ignore": [".turbo", "yarn.lock"] },
+ "files": { "ignoreUnknown": false, "ignore": [".turbo", "yarn.lock", "./apps/docs/storybook-static"] },
"organizeImports": { "enabled": true },
"formatter": {
"enabled": true,
From 919e1ca44d4bbc68ed43dfd162584a046fb66403 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Wed, 4 Jun 2025 19:19:04 +0000
Subject: [PATCH 11/16] config: Add biome overrides to disable
noUnusedFunctionParameters for apps/docs
- Add overrides section to biome.json for apps/docs directory
- Disable noUnusedFunctionParameters rule for documentation/story files
- Add dist directory to ignore list for generated files
- Reduces linting errors from 94 to 5 (89 error reduction!)
- Reduces warnings from 39 to 14 (25 warning reduction!)
- Now only checking 47 files instead of 113
This addresses the user request to disable the noUnusedFunctionParameters
rule for the apps/docs directory, allowing story files to have unused
parameters in example functions without triggering linting errors.
---
biome.json | 19 +++++++++++++++++--
1 file changed, 17 insertions(+), 2 deletions(-)
diff --git a/biome.json b/biome.json
index 446125a..d7e0d39 100644
--- a/biome.json
+++ b/biome.json
@@ -5,7 +5,10 @@
"clientKind": "git",
"useIgnoreFile": false
},
- "files": { "ignoreUnknown": false, "ignore": [".turbo", "yarn.lock", "./apps/docs/storybook-static"] },
+ "files": {
+ "ignoreUnknown": false,
+ "ignore": [".turbo", "yarn.lock", "./apps/docs/storybook-static", "./packages/medusa-forms/dist"]
+ },
"organizeImports": { "enabled": true },
"formatter": {
"enabled": true,
@@ -55,5 +58,17 @@
"useImportExtensions": "off"
}
}
- }
+ },
+ "overrides": [
+ {
+ "include": ["./apps/docs/**/*"],
+ "linter": {
+ "rules": {
+ "correctness": {
+ "noUnusedFunctionParameters": "off"
+ }
+ }
+ }
+ }
+ ]
}
From df3a3f015cc9b6c14678eb8364c4773afb70cde2 Mon Sep 17 00:00:00 2001
From: Jake Ruesink
Date: Wed, 4 Jun 2025 16:12:22 -0500
Subject: [PATCH 12/16] 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.
---
.../ControlledCheckbox.stories.tsx | 37 +++++++++++----
.../ControlledDatePicker.stories.tsx | 1 +
.../ControlledTextArea.stories.tsx | 3 ++
.../medusa-forms/src/ui/FieldCheckbox.tsx | 5 +-
packages/medusa-forms/src/ui/FileUpload.tsx | 46 ++++++++++---------
packages/medusa-forms/src/ui/types.d.ts | 6 +--
6 files changed, 63 insertions(+), 35 deletions(-)
diff --git a/apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx b/apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx
index cb6e732..8ab1d95 100644
--- a/apps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx
+++ b/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: () => ,
};
@@ -59,6 +60,7 @@ const DefaultCheckedForm = () => {
};
export const DefaultChecked: Story = {
+ args: { name: 'newsletter', label: 'Subscribe to newsletter', checked: true },
render: () => ,
};
@@ -81,6 +83,7 @@ const DefaultUncheckedForm = () => {
};
export const DefaultUnchecked: Story = {
+ args: { name: 'marketing', label: 'Receive marketing emails' },
render: () => ,
};
@@ -93,8 +96,9 @@ const RequiredValidationForm = () => {
mode: 'onChange',
});
- const onSubmit = (data: any) => {
+ const onSubmit = (data: Record) => {
// 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: () => ,
};
@@ -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',
}}
/>
Has errors: {form.formState.errors.agreement ? 'Yes' : 'No'}
@@ -154,6 +159,7 @@ const CustomValidationForm = () => {
};
export const CustomValidationMessage: Story = {
+ args: { name: 'agreement', label: 'I agree to the privacy policy' },
render: () => ,
};
@@ -184,6 +190,7 @@ const ErrorStateForm = () => {
};
export const ErrorState: Story = {
+ args: { name: 'errorField', label: 'Checkbox with error state' },
render: () => ,
};
@@ -208,6 +215,7 @@ const DisabledStateForm = () => {
};
export const DisabledState: Story = {
+ args: { name: 'disabledExample', label: 'Disabled checkbox example' },
render: () => ,
};
@@ -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: () => ,
};
@@ -276,7 +286,7 @@ const CompleteFormExampleComponent = () => {
mode: 'onChange',
});
- const onSubmit = (data: any) => {
+ const onSubmit = (data: Record) => {
alert(`Form submitted with data: ${JSON.stringify(data, null, 2)}`);
};
@@ -284,8 +294,11 @@ const CompleteFormExampleComponent = () => {