diff --git a/Directory.Packages.props b/Directory.Packages.props index a07faf8c1..17947717d 100644 --- a/Directory.Packages.props +++ b/Directory.Packages.props @@ -5,8 +5,8 @@ - - + + @@ -33,7 +33,7 @@ - + @@ -45,7 +45,7 @@ - + diff --git a/Documentation/frontend/react/commands/command-form/advanced-patterns.md b/Documentation/frontend/react/commands/command-form/advanced-patterns.md index d66cc0dcf..232549f49 100644 --- a/Documentation/frontend/react/commands/command-form/advanced-patterns.md +++ b/Documentation/frontend/react/commands/command-form/advanced-patterns.md @@ -84,7 +84,7 @@ function EditUserModal({ userId, onClose }: { userId: string, onClose: () => voi return (

Edit User

- command={UpdateUser} initialValues={command}> + value={c => c.name} title="Name" required /> value={c => c.email} type="email" title="Email" required /> diff --git a/Documentation/frontend/react/commands/command-form/auto-server-validation.md b/Documentation/frontend/react/commands/command-form/auto-server-validation.md index 6d63985e2..95b1305fb 100644 --- a/Documentation/frontend/react/commands/command-form/auto-server-validation.md +++ b/Documentation/frontend/react/commands/command-form/auto-server-validation.md @@ -18,7 +18,7 @@ Auto server validation is designed for scenarios where you need to validate data Enable auto server validation by setting the `autoServerValidate` prop: ```tsx - + + +

Create Your Account

- + command={UserCommand}> + value={c => c.name} title="Full Name" @@ -454,7 +454,7 @@ import { function MyForm() { return ( - command={MyCommand}> + value={c => c.name} title="Name" /> value={c => c.age} title="Age" min={0} max={120} /> value={c => c.active} title="Active" /> diff --git a/Documentation/frontend/react/commands/command-form/customization.md b/Documentation/frontend/react/commands/command-form/customization.md index a1d65930f..152b9b7c6 100644 --- a/Documentation/frontend/react/commands/command-form/customization.md +++ b/Documentation/frontend/react/commands/command-form/customization.md @@ -11,7 +11,7 @@ By default, CommandForm displays field titles above each field when they are def Set the `showTitles` prop to `false`: ```tsx - command={MyCommand} showTitles={false}> + value={c => c.name} title="Full Name" /> value={c => c.email} type="email" title="Email Address" /> @@ -22,7 +22,7 @@ Set the `showTitles` prop to `false`: Combine `showTitles={false}` with custom heading or label elements: ```tsx - command={MyCommand} showTitles={false}> +

Full Name

@@ -53,7 +53,7 @@ CommandForm automatically displays error messages below fields when validation f Set the `showErrors` prop to `false`: ```tsx - command={MyCommand} showErrors={false}> + value={c => c.email} type="email" title="Email" required /> value={c => c.password} type="password" title="Password" required /> @@ -72,7 +72,7 @@ function MyForm() { const passwordError = getFieldError('password'); return ( - command={MyCommand} showErrors={false}> + value={c => c.email} type="email" title="Email" required /> {emailError && (
0; return ( - command={MyCommand} showErrors={false}> + {hasErrors && (
+ @@ -316,7 +316,7 @@ const PrimeReactFieldDecorator = ({ icon, description, children }: FieldDecorato Use it with CommandForm: ```tsx - + @@ -376,7 +376,7 @@ const CustomErrorDisplay = ({ errors, fieldName }: ErrorDisplayProps) => ( Use it with CommandForm: ```tsx - + @@ -421,7 +421,7 @@ const PrimeReactTooltip = ({ description, children }: TooltipWrapperProps) => { Use it with CommandForm: ```tsx - + @@ -447,7 +447,7 @@ For lightweight customization without creating custom components, use the CSS cl ### Using Custom CSS Classes ```tsx - + ( function MyForm() { return ( - + ( function MyForm() { return ( - + + command={CreateOrder}> + value={c => c.productId} title="Product" @@ -66,7 +66,7 @@ function LocationForm() { }, [command.country]); return ( - command={SaveLocation}> + value={c => c.country} title="Country" diff --git a/Documentation/frontend/react/commands/command-form/form-lifecycle.md b/Documentation/frontend/react/commands/command-form/form-lifecycle.md index 5a6fe5145..4fd2ff81e 100644 --- a/Documentation/frontend/react/commands/command-form/form-lifecycle.md +++ b/Documentation/frontend/react/commands/command-form/form-lifecycle.md @@ -24,7 +24,7 @@ function OrderForm() { }; return ( - + @@ -65,7 +65,7 @@ function SmartForm() { return (
- command={UpdateProfile}> + value={c => c.name} title="Name" /> value={c => c.email} type="email" title="Email" /> @@ -126,7 +126,7 @@ function AutoSaveForm() { }, [command.hasChanges]); return ( - command={UpdateDraft}> + value={c => c.title} title="Title" /> value={c => c.content} title="Content" rows={10} />
diff --git a/Documentation/frontend/react/commands/command-form/hooks.md b/Documentation/frontend/react/commands/command-form/hooks.md index f42666d7d..0bbfa514d 100644 --- a/Documentation/frontend/react/commands/command-form/hooks.md +++ b/Documentation/frontend/react/commands/command-form/hooks.md @@ -36,7 +36,7 @@ function CustomSubmitButton() { } // Use within CommandForm - command={UpdateProfile}> + value={c => c.name} title="Name" /> @@ -72,7 +72,7 @@ function MyComponent() { return (
- command={CreateOrder} initialValues={command}> + value={c => c.productId} title="Product" diff --git a/Documentation/frontend/react/commands/command-form/index.md b/Documentation/frontend/react/commands/command-form/index.md index 69e9db391..a22f69d44 100644 --- a/Documentation/frontend/react/commands/command-form/index.md +++ b/Documentation/frontend/react/commands/command-form/index.md @@ -25,7 +25,7 @@ class UserCommand extends Command { function MyForm() { return ( - command={UserCommand}> + value={c => c.name} title="Name" @@ -73,7 +73,7 @@ function MyForm() { Set initial values for the form: ```tsx - + command={UpdateProfile}> +

Personal Information

@@ -45,7 +45,7 @@ The `CommandForm.Column` component: For more control over layout, you can use CSS Grid directly: ```tsx - command={UpdateProfile}> +
value={c => c.firstName} title="First Name" /> value={c => c.lastName} title="Last Name" /> @@ -69,7 +69,7 @@ For more control over layout, you can use CSS Grid directly: ## Grouped Fields ```tsx - command={RegisterUser}> +
Account Information value={c => c.username} title="Username" /> @@ -95,7 +95,7 @@ function RegistrationForm() { const command = useCommandInstance(RegisterUser); return ( - command={RegisterUser}> + value={c => c.email} type="email" title="Email" /> diff --git a/Documentation/frontend/react/commands/command-form/validation.md b/Documentation/frontend/react/commands/command-form/validation.md index a55b03a3f..4b75679f8 100644 --- a/Documentation/frontend/react/commands/command-form/validation.md +++ b/Documentation/frontend/react/commands/command-form/validation.md @@ -20,7 +20,7 @@ CommandForm provides flexible control over when validation occurs through the `v By default, validation occurs when a field loses focus (blur event). This provides a balance between immediate feedback and not interrupting the user while typing: ```tsx - command={RegisterUser} validateOn="blur"> + value={c => c.email} type="email" title="Email" required /> value={c => c.password} type="password" title="Password" required /> @@ -33,7 +33,7 @@ By default, validation occurs when a field loses focus (blur event). This provid Validation runs immediately as the user types. This provides the fastest feedback but can be distracting: ```tsx - command={RegisterUser} validateOn="change"> + value={c => c.email} type="email" title="Email" required /> value={c => c.password} type="password" title="Password" required /> @@ -46,7 +46,7 @@ Validation runs immediately as the user types. This provides the fastest feedbac Validation runs on both change and blur events: ```tsx - command={RegisterUser} validateOn="both"> + value={c => c.email} type="email" title="Email" required /> value={c => c.password} type="password" title="Password" required /> @@ -63,7 +63,7 @@ Control whether validation validates just the changed field or all fields: By default, only the field that changed is validated. This is more efficient and provides focused feedback: ```tsx - + @@ -79,7 +79,7 @@ In this example, when the username field loses focus, only username validation r Set `validateAllFieldsOnChange` to `true` to validate the entire form when any field changes: ```tsx - + + command={T} validateOn="blur" /> + ``` **Aggressive validation (real-time feedback)**: ```tsx - command={T} validateOn="change" validateAllFieldsOnChange={true} /> + ``` **Show all errors immediately**: ```tsx - command={T} validateOn="blur" validateOnInit={true} /> + ``` ## Required Fields @@ -148,7 +148,7 @@ For automatic server-side validation as users type, see [Auto Server Validation] Mark fields as required using the `required` prop: ```tsx - command={RegisterUser}> + value={c => c.email} type="email" title="Email" required /> value={c => c.password} type="password" title="Password" required /> value={c => c.agreeToTerms} title="Terms" label="I agree" required /> @@ -166,7 +166,7 @@ By default, CommandForm displays error messages below each invalid field: ```tsx // Errors shown automatically for invalid/required fields - command={CreateAccount}> + value={c => c.username} title="Username" required /> {/* Error appears here if username is empty or invalid */} @@ -180,7 +180,7 @@ By default, CommandForm displays error messages below each invalid field: Disable automatic errors to implement custom error rendering: ```tsx - command={CreateAccount} showErrors={false}> + value={c => c.username} title="Username" required /> {/* No automatic error rendering */} @@ -193,7 +193,7 @@ See [Customization](./customization.md) for custom error rendering patterns. Field components leverage HTML5 validation attributes: ```tsx - command={UpdateProfile}> + {/* Email format validation */} value={c => c.email} @@ -261,7 +261,7 @@ public class CreateUserHandler : ICommandHandler ### Form Usage ```tsx - command={CreateUser}> + value={c => c.email} type="email" title="Email" required /> value={c => c.username} title="Username" required /> @@ -287,7 +287,7 @@ function MyForm() { const hasAnyErrors = commandResult?.validationResults && commandResult.validationResults.length > 0; return ( - command={CreateAccount} showErrors={false}> + value={c => c.email} type="email" title="Email" required /> {/* Check for specific field errors */} @@ -335,7 +335,7 @@ function MyForm() { }, [command.hasChanges]); return ( - command={CreateAccount}> + value={c => c.email} type="email" title="Email" required /> value={c => c.username} title="Username" required /> @@ -368,7 +368,7 @@ function RegistrationForm() { }; return ( - command={RegisterUser} showErrors={false}> + value={c => c.email} type="email" diff --git a/Source/JavaScript/Arc.React/commands/CommandForm/CommandForm.stories.tsx b/Source/JavaScript/Arc.React/commands/CommandForm/CommandForm.stories.tsx index 875c85045..25054423c 100644 --- a/Source/JavaScript/Arc.React/commands/CommandForm/CommandForm.stories.tsx +++ b/Source/JavaScript/Arc.React/commands/CommandForm/CommandForm.stories.tsx @@ -80,7 +80,7 @@ export const Default: Story = {

This form demonstrates validation on blur. Fields are validated when you leave them.

- + - + This form shows how to customize title rendering using a custom fieldContainerComponent.

- + This form shows how to disable built-in error messages and render custom ones.

- + This form shows how to use a custom component for rendering field containers.

- +
- + - + - + { const error = handleFieldValidate(command, fieldName, oldValue, newValue); @@ -1038,7 +1038,7 @@ export const BeforeExecuteCallback: Story = { Perfect for sanitizing input, formatting data, or adding computed fields.

- + { @@ -1152,7 +1152,7 @@ export const CurrentValuesVsInitialValues: Story = {
- + - + tooltipComponent for styled tooltips.

- + - + - + - + @@ -1613,7 +1613,7 @@ export const ValidationOnChange: Story = { but be aware it can feel aggressive to users.

- + @@ -1659,7 +1659,7 @@ export const ValidationOnBoth: Story = { continuous feedback once you start editing a field.

- + @@ -1705,7 +1705,7 @@ export const ValidationOnInit: Story = { show validation errors right away, such as when editing a record that has invalid data.

- + - + - + { CommandFormColumnComponent.displayName = 'CommandFormColumn'; -CommandFormComponent.Fields = CommandFormFieldsWrapper; -CommandFormComponent.Column = CommandFormColumnComponent; +// Export as function to enable proper type inference from command prop +export function CommandForm( + props: CommandFormProps +): React.ReactElement { + return {...props} />; +} -export const CommandForm = CommandFormComponent; +// Attach static members for backwards compatibility +CommandForm.Fields = CommandFormFieldsWrapper; +CommandForm.Column = CommandFormColumnComponent;