Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions Directory.Packages.props
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
</PropertyGroup>
<ItemGroup>
<!-- Cratis -->
<PackageVersion Include="Cratis.Chronicle" Version="15.2.16" />
<PackageVersion Include="Cratis.Chronicle.AspNetCore" Version="15.2.16" />
<PackageVersion Include="Cratis.Chronicle" Version="15.2.17" />
<PackageVersion Include="Cratis.Chronicle.AspNetCore" Version="15.2.17" />
<PackageVersion Include="Cratis.Fundamentals" Version="7.6.0" />
<PackageVersion Include="Cratis.Metrics.Roslyn" Version="7.6.0" />
<!-- Microsoft -->
Expand All @@ -33,7 +33,7 @@
<PackageVersion Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.0" />
<PackageVersion Include="handlebars.net" Version="2.1.6" />
<PackageVersion Include="castle.core" Version="5.2.1" />
<PackageVersion Include="Swashbuckle.AspNetCore" Version="10.1.3" />
<PackageVersion Include="Swashbuckle.AspNetCore" Version="10.1.4" />
<PackageVersion Include="Microsoft.Extensions.Resilience" Version="10.3.0" />
<PackageVersion Include="Testcontainers.MsSql" Version="4.10.0" />
<PackageVersion Include="Testcontainers.PostgreSql" Version="4.10.0" />
Expand All @@ -45,7 +45,7 @@
<!-- Analysis -->
<PackageVersion Include="StyleCop.Analyzers" Version="1.2.0-beta.556" NoWarn="NU5104" />
<PackageVersion Include="Roslynator.Analyzers" Version="4.15.0" />
<PackageVersion Include="Meziantou.Analyzer" Version="3.0.1" />
<PackageVersion Include="Meziantou.Analyzer" Version="3.0.9" />
<!-- Specifications -->
<PackageVersion Include="Cratis.Specifications.XUnit" Version="3.0.4" />
<PackageVersion Include="xunit" Version="2.9.3" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ function EditUserModal({ userId, onClose }: { userId: string, onClose: () => voi
return (
<Modal open={open} onClose={onClose}>
<h2>Edit User</h2>
<CommandForm<UpdateUser> command={UpdateUser} initialValues={command}>
<CommandForm command={UpdateUser} initialValues={command}>
<InputTextField<UpdateUser> value={c => c.name} title="Name" required />
<InputTextField<UpdateUser> value={c => c.email} type="email" title="Email" required />
</CommandForm>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
<CommandForm<RegisterUser>
<CommandForm
command={RegisterUser}
validateOn="change"
autoServerValidate={true}
Expand Down Expand Up @@ -51,7 +51,7 @@ If the user continues typing before the throttle timer expires, the timer resets
To avoid excessive server calls during rapid typing, use the `autoServerValidateThrottle` prop to delay validation:

```tsx
<CommandForm<RegisterUser>
<CommandForm
command={RegisterUser}
validateOn="change"
autoServerValidate={true}
Expand Down Expand Up @@ -152,7 +152,7 @@ The validation endpoint returns a `CommandResult` with validation errors:
The frontend automatically handles the validation response and displays errors:

```tsx
<CommandForm<RegisterUser>
<CommandForm
command={RegisterUser}
validateOn="change"
autoServerValidate={true}
Expand Down Expand Up @@ -327,7 +327,7 @@ function RegistrationForm() {
<div className="registration-form">
<h2>Create Your Account</h2>

<CommandForm<RegisterUser>
<CommandForm
command={RegisterUser}
validateOn="change"
autoServerValidate={true}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ interface UserCommand {

function UserForm() {
return (
<CommandForm<UserCommand> command={UserCommand}>
<CommandForm command={UserCommand}>
<PrimeInputTextField<UserCommand>
value={c => c.name}
title="Full Name"
Expand Down Expand Up @@ -454,7 +454,7 @@ import {

function MyForm() {
return (
<CommandForm<MyCommand> command={MyCommand}>
<CommandForm command={MyCommand}>
<PrimeInputTextField<MyCommand> value={c => c.name} title="Name" />
<PrimeNumberField<MyCommand> value={c => c.age} title="Age" min={0} max={120} />
<PrimeSwitchField<MyCommand> value={c => c.active} title="Active" />
Expand Down
26 changes: 13 additions & 13 deletions Documentation/frontend/react/commands/command-form/customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ By default, CommandForm displays field titles above each field when they are def
Set the `showTitles` prop to `false`:

```tsx
<CommandForm<MyCommand> command={MyCommand} showTitles={false}>
<CommandForm command={MyCommand} showTitles={false}>
<InputTextField<MyCommand> value={c => c.name} title="Full Name" />
<InputTextField<MyCommand> value={c => c.email} type="email" title="Email Address" />
</CommandForm>
Expand All @@ -22,7 +22,7 @@ Set the `showTitles` prop to `false`:
Combine `showTitles={false}` with custom heading or label elements:

```tsx
<CommandForm<MyCommand> command={MyCommand} showTitles={false}>
<CommandForm command={MyCommand} showTitles={false}>
<h3 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
Full Name
</h3>
Expand Down Expand Up @@ -53,7 +53,7 @@ CommandForm automatically displays error messages below fields when validation f
Set the `showErrors` prop to `false`:

```tsx
<CommandForm<MyCommand> command={MyCommand} showErrors={false}>
<CommandForm command={MyCommand} showErrors={false}>
<InputTextField<MyCommand> value={c => c.email} type="email" title="Email" required />
<InputTextField<MyCommand> value={c => c.password} type="password" title="Password" required />
</CommandForm>
Expand All @@ -72,7 +72,7 @@ function MyForm() {
const passwordError = getFieldError('password');

return (
<CommandForm<MyCommand> command={MyCommand} showErrors={false}>
<CommandForm command={MyCommand} showErrors={false}>
<InputTextField<MyCommand> value={c => c.email} type="email" title="Email" required />
{emailError && (
<div className="error-message" style={{
Expand Down Expand Up @@ -108,7 +108,7 @@ function MyForm() {
const hasErrors = commandResult?.validationResults && commandResult.validationResults.length > 0;

return (
<CommandForm<MyCommand> command={MyCommand} showErrors={false}>
<CommandForm command={MyCommand} showErrors={false}>
{hasErrors && (
<div className="error-summary" style={{
backgroundColor: '#fee',
Expand Down Expand Up @@ -197,7 +197,7 @@ const CustomFieldContainer = ({ title, errorMessage, children }: FieldContainerP
Then use it with CommandForm:

```tsx
<CommandForm<MyCommand>
<CommandForm
command={MyCommand}
fieldContainerComponent={CustomFieldContainer}
>
Expand Down Expand Up @@ -316,7 +316,7 @@ const PrimeReactFieldDecorator = ({ icon, description, children }: FieldDecorato
Use it with CommandForm:

```tsx
<CommandForm<MyCommand>
<CommandForm
command={MyCommand}
fieldDecoratorComponent={PrimeReactFieldDecorator}
>
Expand Down Expand Up @@ -376,7 +376,7 @@ const CustomErrorDisplay = ({ errors, fieldName }: ErrorDisplayProps) => (
Use it with CommandForm:

```tsx
<CommandForm<MyCommand>
<CommandForm
command={MyCommand}
errorDisplayComponent={CustomErrorDisplay}
>
Expand Down Expand Up @@ -421,7 +421,7 @@ const PrimeReactTooltip = ({ description, children }: TooltipWrapperProps) => {
Use it with CommandForm:

```tsx
<CommandForm<MyCommand>
<CommandForm
command={MyCommand}
tooltipComponent={PrimeReactTooltip}
>
Expand All @@ -447,7 +447,7 @@ For lightweight customization without creating custom components, use the CSS cl
### Using Custom CSS Classes

```tsx
<CommandForm<MyCommand>
<CommandForm
command={MyCommand}
errorClassName="my-error-message"
iconAddonClassName="my-icon-addon"
Expand Down Expand Up @@ -520,7 +520,7 @@ const PrimeErrorDisplay = ({ errors }) => (

function MyForm() {
return (
<CommandForm<MyCommand>
<CommandForm
command={MyCommand}
fieldDecoratorComponent={PrimeFieldDecorator}
errorDisplayComponent={PrimeErrorDisplay}
Expand Down Expand Up @@ -564,7 +564,7 @@ const TailwindErrorDisplay = ({ errors }) => (

function MyForm() {
return (
<CommandForm<MyCommand>
<CommandForm
command={MyCommand}
fieldDecoratorComponent={TailwindFieldDecorator}
errorDisplayComponent={TailwindErrorDisplay}
Expand All @@ -581,7 +581,7 @@ function MyForm() {
You can combine multiple customization options for complete control:

```tsx
<CommandForm<MyCommand>
<CommandForm
command={MyCommand}
showTitles={false} // Disable auto titles
showErrors={true} // Keep auto errors
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function OrderForm() {
}

return (
<CommandForm<CreateOrder> command={CreateOrder}>
<CommandForm command={CreateOrder}>
<SelectField<CreateOrder>
value={c => c.productId}
title="Product"
Expand Down Expand Up @@ -66,7 +66,7 @@ function LocationForm() {
}, [command.country]);

return (
<CommandForm<SaveLocation> command={SaveLocation}>
<CommandForm command={SaveLocation}>
<SelectField<SaveLocation>
value={c => c.country}
title="Country"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function OrderForm() {
};

return (
<CommandForm<CreateOrder>
<CommandForm
command={CreateOrder}
beforeExecute={handleBeforeExecute}
>
Expand Down Expand Up @@ -65,7 +65,7 @@ function SmartForm() {

return (
<div>
<CommandForm<UpdateProfile> command={UpdateProfile}>
<CommandForm command={UpdateProfile}>
<InputTextField<UpdateProfile> value={c => c.name} title="Name" />
<InputTextField<UpdateProfile> value={c => c.email} type="email" title="Email" />
</CommandForm>
Expand Down Expand Up @@ -126,7 +126,7 @@ function AutoSaveForm() {
}, [command.hasChanges]);

return (
<CommandForm<UpdateDraft> command={UpdateDraft}>
<CommandForm command={UpdateDraft}>
<InputTextField<UpdateDraft> value={c => c.title} title="Title" />
<TextAreaField<UpdateDraft> value={c => c.content} title="Content" rows={10} />
<div style={{ fontSize: '0.875rem', color: '#6b7280', marginTop: '0.5rem' }}>
Expand Down
4 changes: 2 additions & 2 deletions Documentation/frontend/react/commands/command-form/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function CustomSubmitButton() {
}

// Use within CommandForm
<CommandForm<UpdateProfile> command={UpdateProfile}>
<CommandForm command={UpdateProfile}>
<InputTextField<UpdateProfile> value={c => c.name} title="Name" />
<CustomSubmitButton />
</CommandForm>
Expand Down Expand Up @@ -72,7 +72,7 @@ function MyComponent() {
return (
<div>
<button onClick={handleValidate}>Check Validity</button>
<CommandForm<CreateOrder> command={CreateOrder} initialValues={command}>
<CommandForm command={CreateOrder} initialValues={command}>
<SelectField<CreateOrder>
value={c => c.productId}
title="Product"
Expand Down
4 changes: 2 additions & 2 deletions Documentation/frontend/react/commands/command-form/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class UserCommand extends Command {

function MyForm() {
return (
<CommandForm<UserCommand> command={UserCommand}>
<CommandForm command={UserCommand}>
<InputTextField<UserCommand>
value={c => c.name}
title="Name"
Expand Down Expand Up @@ -73,7 +73,7 @@ function MyForm() {
Set initial values for the form:

```tsx
<CommandForm<UserCommand>
<CommandForm
command={UserCommand}
initialValues={{
name: 'John Doe',
Expand Down
8 changes: 4 additions & 4 deletions Documentation/frontend/react/commands/command-form/layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ CommandForm renders children in the order they are defined. You can create custo
CommandForm provides a built-in `CommandForm.Column` component for creating responsive multi-column layouts:

```tsx
<CommandForm<UpdateProfile> command={UpdateProfile}>
<CommandForm command={UpdateProfile}>
<h3>Personal Information</h3>

<CommandForm.Column>
Expand Down Expand Up @@ -45,7 +45,7 @@ The `CommandForm.Column` component:
For more control over layout, you can use CSS Grid directly:

```tsx
<CommandForm<UpdateProfile> command={UpdateProfile}>
<CommandForm command={UpdateProfile}>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
<InputTextField<UpdateProfile> value={c => c.firstName} title="First Name" />
<InputTextField<UpdateProfile> value={c => c.lastName} title="Last Name" />
Expand All @@ -69,7 +69,7 @@ For more control over layout, you can use CSS Grid directly:
## Grouped Fields

```tsx
<CommandForm<RegisterUser> command={RegisterUser}>
<CommandForm command={RegisterUser}>
<fieldset style={{ border: '1px solid #e5e7eb', borderRadius: '0.5rem', padding: '1rem', marginBottom: '1rem' }}>
<legend style={{ fontWeight: 'bold', padding: '0 0.5rem' }}>Account Information</legend>
<InputTextField<RegisterUser> value={c => c.username} title="Username" />
Expand All @@ -95,7 +95,7 @@ function RegistrationForm() {
const command = useCommandInstance(RegisterUser);

return (
<CommandForm<RegisterUser> command={RegisterUser}>
<CommandForm command={RegisterUser}>
<InputTextField<RegisterUser> value={c => c.email} type="email" title="Email" />

<SelectField<RegisterUser>
Expand Down
Loading
Loading