@cratis/components 0.1.9

package/.storybook/main.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { StorybookConfig } from '@storybook/react-vite';
+import type { UserConfig as ViteConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  core: { builder: '@storybook/builder-vite' },
+  staticDirs: ['../public'],
+  // Ensure Vite dev server does not open the browser when Storybook starts
+  async viteFinal(existingConfig: ViteConfig) {
+    const cfg: ViteConfig = { ...existingConfig };
+    cfg.server = { ...(cfg.server || {}), open: false } as unknown;
+    return cfg;
+  }
+};
+
+export default config;

package/CommandDialog/CommandDialog.stories.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { CommandDialog } from './CommandDialog';
+
+const meta: Meta<typeof CommandDialog> = {
+  title: 'CommandDialog/CommandDialog',
+  component: CommandDialog,
+};
+
+export default meta;
+type Story = StoryObj<typeof CommandDialog>;
+
+export const Default: Story = {
+    args: {
+
+    },
+    render: (args) => (
+        <div className="storybook-wrapper">
+            <CommandDialog {...args} />
+        </div>
+    )
+};

package/CommandDialog/CommandDialog.tsx

@@ -0,0 +1,161 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ICommandResult } from '@cratis/arc/commands';
+import { Constructor } from '@cratis/fundamentals';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import React, { createContext, useContext } from 'react';
+import { CommandForm, useCommandFormContext, BeforeExecuteCallback } from '../CommandForm/CommandForm';
+import { useCommandInstance } from '../CommandForm/CommandForm';
+
+export type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;
+export type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;
+
+export interface CommandDialogProps<TCommand, TResponse = object> {
+    command: Constructor<TCommand>;
+    initialValues?: Partial<TCommand>;
+    currentValues?: Partial<TCommand> | undefined;
+    visible: boolean;
+    header: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmIcon?: string;
+    cancelIcon?: string;
+    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;
+    onCancel: () => void;
+    onFieldValidate?: FieldValidator<TCommand>;
+    onFieldChange?: FieldChangeCallback<TCommand>;
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    width?: string;
+}
+
+interface CommandDialogContextValue<TCommand = unknown> {
+    onSuccess: (result: ICommandResult<any>) => void | Promise<void>;
+    onCancel: () => void;
+    confirmLabel: string;
+    cancelLabel: string;
+    confirmIcon: string;
+    cancelIcon: string;
+    onFieldValidate?: FieldValidator<TCommand>;
+    onFieldChange?: FieldChangeCallback<TCommand>;
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+}
+
+const CommandDialogContext = createContext<CommandDialogContextValue<unknown> | undefined>(undefined);
+
+export const useCommandDialogContext = <TCommand = unknown,>() => {
+    const context = useContext(CommandDialogContext);
+    if (!context) {
+        throw new Error('useCommandDialogContext must be used within a CommandDialog');
+    }
+    return context as CommandDialogContextValue<TCommand>;
+};
+
+const CommandDialogFormContent = () => {
+    const command = useCommandInstance();
+    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = useCommandFormContext();
+    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext();
+
+    const handleConfirm = async () => {
+        if (onBeforeExecute) {
+            const transformedValues = onBeforeExecute(command);
+            setCommandValues(transformedValues);
+        }
+        const result = await command.execute();
+        if (result.isSuccess) {
+            await onConfirm(result);
+        } else {
+            setCommandResult(result);
+        }
+    };
+
+    const handleCancel = () => {
+        onCancel();
+    };
+
+    return (
+        <>
+            <div className="card flex flex-wrap justify-content-center gap-3 mt-8">
+                <Button label={confirmLabel} icon={confirmIcon} onClick={handleConfirm} disabled={!isValid} />
+                <Button label={cancelLabel} icon={cancelIcon} severity='secondary' onClick={handleCancel} />
+            </div>
+        </>
+    );
+};
+
+const CommandDialogFieldsWrapper = (props: { children: React.ReactNode }) => {
+    React.Children.forEach(props.children, child => {
+        if (React.isValidElement(child)) {
+            const component = child.type as any;
+            if (component.displayName !== 'CommandFormField') {
+                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);
+            }
+        }
+    });
+
+    return (
+        <CommandForm.Fields>
+            {props.children}
+        </CommandForm.Fields>
+    );
+};
+
+const CommandDialogComponent = <TCommand extends object = any, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {
+    const {
+        command,
+        initialValues,
+        currentValues,
+        visible,
+        header,
+        confirmLabel = 'Confirm',
+        cancelLabel = 'Cancel',
+        confirmIcon = 'pi pi-check',
+        cancelIcon = 'pi pi-times',
+        onConfirm,
+        onCancel,
+        onFieldValidate,
+        onFieldChange,
+        onBeforeExecute,
+        children,
+        style = { width: '50vw' },
+        width
+    } = props;
+
+    const dialogStyle = width ? { ...style, width } : style;
+
+    const contextValue: CommandDialogContextValue<TCommand> = {
+        onSuccess: onConfirm,
+        onCancel,
+        confirmLabel,
+        cancelLabel,
+        confirmIcon,
+        cancelIcon,
+        onFieldValidate,
+        onFieldChange,
+        onBeforeExecute
+    };
+
+    return (
+        <Dialog
+            header={header}
+            visible={visible}
+            style={dialogStyle}
+            onHide={onCancel}
+            contentStyle={{ overflow: 'visible' }}
+        >
+            <CommandDialogContext.Provider value={contextValue}>
+                <CommandForm command={command} initialValues={initialValues} currentValues={currentValues} onFieldValidate={onFieldValidate} onFieldChange={onFieldChange} onBeforeExecute={onBeforeExecute}>
+                    {children}
+                    <CommandDialogFormContent />
+                </CommandForm>
+            </CommandDialogContext.Provider>
+        </Dialog>
+    );
+};
+
+CommandDialogComponent.Fields = CommandDialogFieldsWrapper;
+
+export const CommandDialog = CommandDialogComponent;

package/CommandDialog/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './CommandDialog';

package/CommandForm/CommandForm.stories.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { CommandForm } from './CommandForm';
+
+const meta: Meta<typeof CommandForm> = {
+  title: 'CommandForm/CommandForm',
+  component: CommandForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof CommandForm>;
+export const Default: Story = {
+    args: {
+
+    },
+    render: (args) => (
+        <div className="storybook-wrapper">
+            <CommandForm {...args} />
+        </div>
+    )
+};

package/CommandForm/CommandForm.tsx

@@ -0,0 +1,266 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CommandFormFields, ColumnInfo } from './CommandFormFields';
+import { Constructor } from '@cratis/fundamentals';
+import { useCommand, SetCommandValues } from '@cratis/arc.react/commands';
+import { ICommandResult } from '@cratis/arc/commands';
+import React, { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import type { CommandFormFieldProps } from './CommandFormField';
+import { Panel } from 'primereact/panel';
+
+export type BeforeExecuteCallback<TCommand> = (values: TCommand) => TCommand;
+
+export interface CommandFormProps<TCommand extends object> {
+    command: Constructor<TCommand>;
+    initialValues?: Partial<TCommand>;
+    currentValues?: Partial<TCommand> | undefined;
+    onFieldValidate?: (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;
+    onFieldChange?: (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+    children?: React.ReactNode;
+}
+
+interface CommandFormContextValue<TCommand> {
+    command: Constructor<TCommand>;
+    commandInstance: TCommand;
+    setCommandValues: SetCommandValues<TCommand>;
+    commandResult?: ICommandResult<unknown>;
+    setCommandResult: (result: ICommandResult<unknown>) => void;
+    getFieldError: (propertyName: string) => string | undefined;
+    isValid: boolean;
+    setFieldValidity: (fieldName: string, isValid: boolean) => void;
+    onFieldValidate?: (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;
+    onFieldChange?: (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+    customFieldErrors: Record<string, string>;
+    setCustomFieldError: (fieldName: string, error: string | undefined) => void;
+}
+
+const CommandFormContext = createContext<CommandFormContextValue<any> | undefined>(undefined);
+
+export const useCommandFormContext = <TCommand,>() => {
+    const context = useContext(CommandFormContext);
+    if (!context) {
+        throw new Error('useCommandFormContext must be used within a CommandForm');
+    }
+    return context as CommandFormContextValue<TCommand>;
+};
+
+// Hook to get just the command instance for easier access
+export const useCommandInstance = <TCommand = any>() => {
+    const { commandInstance } = useCommandFormContext<any>();
+    return commandInstance as TCommand;
+};
+
+// Hook to get setCommandResult for easier access
+export const useSetCommandResult = () => {
+    const { setCommandResult } = useCommandFormContext();
+    return setCommandResult;
+};
+
+const CommandFormFieldsWrapper = (props: { children: React.ReactNode }) => {
+    React.Children.forEach(props.children, child => {
+        if (React.isValidElement(child)) {
+            const component = child.type as any;
+            if (component.displayName !== 'CommandFormField') {
+                throw new Error(`Only CommandFormField components are allowed as children of CommandForm.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);
+            }
+        }
+    });
+
+    return <></>;
+};
+
+CommandFormFieldsWrapper.displayName = 'CommandFormFieldsWrapper';
+
+const getCommandFormFields = <TCommand,>(props: { children?: React.ReactNode }): { fieldsOrColumns: React.ReactElement[] | ColumnInfo[], otherChildren: React.ReactNode[], initialValuesFromFields: Partial<TCommand> } => {
+    if (!props.children) {
+        return { fieldsOrColumns: [], otherChildren: [], initialValuesFromFields: {} };
+    }
+    let fields: React.ReactElement<CommandFormFieldProps<any>>[] = [];
+    const columns: ColumnInfo[] = [];
+    let hasColumns = false;
+    const otherChildren: React.ReactNode[] = [];
+    let initialValuesFromFields: Partial<TCommand> = {};
+
+    const extractInitialValue = (field: React.ReactElement) => {
+        const fieldProps = field.props as any;
+        if (fieldProps.currentValue !== undefined && fieldProps.value) {
+            const propertyAccessor = fieldProps.value;
+            const propertyName = getPropertyNameFromAccessor(propertyAccessor);
+            if (propertyName) {
+                initialValuesFromFields = { ...initialValuesFromFields, [propertyName]: fieldProps.currentValue } as Partial<TCommand>;
+            }
+        }
+    };
+
+    React.Children.toArray(props.children).forEach(child => {
+        if (!React.isValidElement(child)) {
+            otherChildren.push(child);
+            return;
+        }
+
+        const component = child.type as any;
+
+        // Check if child is a CommandFormColumn
+        if (component.displayName === 'CommandFormColumn') {
+            hasColumns = true;
+            const childProps = child.props as { children?: React.ReactNode };
+            const columnFields = React.Children.toArray(childProps.children).filter(child => {
+                if (React.isValidElement(child)) {
+                    const comp = child.type as any;
+                    if (comp.displayName === 'CommandFormField') {
+                        extractInitialValue(child as React.ReactElement);
+                        return true;
+                    }
+                }
+                return false;
+            }) as React.ReactElement[];
+            columns.push({ fields: columnFields as React.ReactElement<CommandFormFieldProps<any>>[] });
+        }
+        // Check if child is a CommandFormField (direct child)
+        else if (component.displayName === 'CommandFormField') {
+            extractInitialValue(child as React.ReactElement);
+            fields.push(child as React.ReactElement<CommandFormFieldProps<any>>);
+        }
+        // Check if child is Fields wrapper (backwards compatibility)
+        else if (component === CommandFormFieldsWrapper || component.displayName === 'CommandFormFieldsWrapper') {
+            const childProps = child.props as { children: React.ReactNode };
+            const relevantChildren = React.Children.toArray(childProps.children).filter(child => {
+                if (React.isValidElement(child)) {
+                    const component = child.type as any;
+                    if (component.displayName === 'CommandFormField') {
+                        extractInitialValue(child as React.ReactElement);
+                        return true;
+                    }
+                }
+                return false;
+            }) as React.ReactElement[];
+            fields = [...fields, ...(relevantChildren as React.ReactElement<CommandFormFieldProps<any>>[])];
+        }
+        // Everything else is not a field, keep it as other children
+        else {
+            otherChildren.push(child);
+        }
+    });
+
+    return { fieldsOrColumns: hasColumns ? columns : fields, otherChildren, initialValuesFromFields };
+};
+
+// Helper function to extract property name from accessor function
+function getPropertyNameFromAccessor<T>(accessor: (obj: T) => unknown): string {
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+    return match ? match[1] : '';
+}
+
+const CommandFormComponent = <TCommand extends object = any>(props: CommandFormProps<TCommand>) => {
+    const { fieldsOrColumns, otherChildren, initialValuesFromFields } = useMemo(() => getCommandFormFields<TCommand>(props), [props.children]);
+
+    // Extract matching properties from currentValues
+    const valuesFromCurrentValues = useMemo(() => {
+        if (!props.currentValues) return {};
+
+        const tempCommand = new props.command();
+        const commandProperties = (tempCommand as any).properties || [];
+        const extracted: Partial<TCommand> = {};
+
+        commandProperties.forEach((propertyName: string) => {
+            if ((props.currentValues as any)[propertyName] !== undefined) {
+                (extracted as any)[propertyName] = (props.currentValues as any)[propertyName];
+            }
+        });
+
+        return extracted;
+    }, [props.currentValues, props.command]);
+
+    // Merge initialValues prop with values extracted from field currentValue props and currentValues
+    const mergedInitialValues = useMemo(() => ({
+        ...valuesFromCurrentValues,
+        ...initialValuesFromFields,
+        ...props.initialValues
+    }), [valuesFromCurrentValues, initialValuesFromFields, props.initialValues]);
+
+    // useCommand returns [instance, setter] for the typed command. Provide generics so commandInstance is TCommand.
+    const [commandInstance, setCommandValues] = useCommand<any>(props.command as Constructor<any>, mergedInitialValues as Partial<any>);
+    const [commandResult, setCommandResult] = useState<ICommandResult<unknown> | undefined>(undefined);
+    const [fieldValidities, setFieldValidities] = useState<Record<string, boolean>>({});
+    const [customFieldErrors, setCustomFieldErrors] = useState<Record<string, string>>({});
+
+    // Update command values when mergedInitialValues changes (e.g., when data loads asynchronously)
+    React.useEffect(() => {
+        if (mergedInitialValues && Object.keys(mergedInitialValues).length > 0) {
+            setCommandValues(mergedInitialValues as TCommand);
+        }
+    }, [mergedInitialValues, setCommandValues]);
+
+    const isValid = Object.values(fieldValidities).every(valid => valid);
+
+    const setFieldValidity = useCallback((fieldName: string, isFieldValid: boolean) => {
+        setFieldValidities(prev => ({ ...prev, [fieldName]: isFieldValid }));
+    }, []);
+
+    const setCustomFieldError = useCallback((fieldName: string, error: string | undefined) => {
+        setCustomFieldErrors(prev => {
+            if (error === undefined) {
+                const newErrors = { ...prev };
+                delete newErrors[fieldName];
+                return newErrors;
+            }
+            return { ...prev, [fieldName]: error };
+        });
+    }, []);
+
+    const getFieldError = (propertyName: string): string | undefined => {
+        // Check custom field errors first
+        if (customFieldErrors[propertyName]) {
+            return customFieldErrors[propertyName];
+        }
+
+        if (!commandResult || !commandResult.validationResults) {
+            return undefined;
+        }
+
+        for (const validationResult of commandResult.validationResults) {
+            if (validationResult.members && validationResult.members.includes(propertyName)) {
+                return validationResult.message;
+            }
+        }
+
+        return undefined;
+    };
+
+    const exceptionMessages = commandResult?.exceptionMessages || [];
+    const hasColumns = fieldsOrColumns.length > 0 && 'fields' in fieldsOrColumns[0];
+
+    return (
+        <CommandFormContext.Provider value={{ command: props.command, commandInstance, setCommandValues, commandResult, setCommandResult, getFieldError, isValid, setFieldValidity, onFieldValidate: props.onFieldValidate, onFieldChange: props.onFieldChange, onBeforeExecute: props.onBeforeExecute, customFieldErrors, setCustomFieldError }}>
+            <CommandFormFields fields={hasColumns ? undefined : (fieldsOrColumns as React.ReactElement<CommandFormFieldProps<any>>[])} columns={hasColumns ? fieldsOrColumns as ColumnInfo[] : undefined} />
+            {exceptionMessages.length > 0 && (
+                <div className="card flex flex-row gap-3 mt-3">
+                    <Panel header="The server responded with" className="w-full">
+                        <ul>
+                            {exceptionMessages.map((msg, idx) => (
+                                <li key={idx}>{msg}</li>
+                            ))}
+                        </ul>
+                    </Panel>
+                </div>
+            )}
+            {otherChildren}
+        </CommandFormContext.Provider>
+    );
+};
+
+const CommandFormColumnComponent = (_props: { children: React.ReactNode }) => {
+    void _props;
+    return <></>;
+};
+
+CommandFormColumnComponent.displayName = 'CommandFormColumn';
+
+CommandFormComponent.Fields = CommandFormFieldsWrapper;
+CommandFormComponent.Column = CommandFormColumnComponent;
+
+export const CommandForm = CommandFormComponent;

package/CommandForm/CommandFormField.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { PropertyAccessor } from '@cratis/fundamentals';
+
+export interface CommandFormFieldProps<TCommand = unknown> {
+    icon?: React.ReactElement;
+    /** Accessor function that selects a property on the command, e.g. c => c.name */
+    value?: PropertyAccessor<TCommand>;
+    /** Current value for the property (injected by CommandFormFields) */
+    currentValue?: unknown;
+    /** Called when the field value changes (injected by CommandFormFields) */
+    onValueChange?: (value: unknown) => void;
+    onChange?: (value: unknown) => void;
+    required?: boolean;
+    title?: string;
+    description?: string;
+    propertyDescriptor?: unknown;
+    fieldName?: string;
+}
+
+export const CommandFormField = <TCommand,>(_props?: CommandFormFieldProps<TCommand>) => {
+    void _props;
+    return <></>;
+};
+
+CommandFormField.displayName = 'CommandFormField';

package/CommandForm/CommandFormFields.tsx

@@ -0,0 +1,142 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useCommandFormContext } from './CommandForm';
+import React from 'react';
+import { Tooltip } from 'primereact/tooltip';
+import type { CommandFormFieldProps } from './CommandFormField';
+
+export interface ColumnInfo {
+    fields: React.ReactElement<CommandFormFieldProps<any>>[];
+}
+
+export interface CommandFormFieldsProps {
+    fields?: React.ReactElement<CommandFormFieldProps<any>>[];
+    columns?: ColumnInfo[];
+}
+
+// Separate component for each field to prevent re-rendering all fields
+const CommandFormFieldWrapper = ({ field, index }: { field: React.ReactElement<CommandFormFieldProps<any>>; index: number }) => {
+    const context = useCommandFormContext<any>();
+    const fieldProps = field.props as CommandFormFieldProps<any>;
+    const propertyAccessor = fieldProps.value;
+
+    // Get the property name from the accessor function
+    const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : '';
+
+    // Get the current value from the command instance
+    const currentValue = propertyName ? (context.commandInstance as any)?.[propertyName] : undefined;
+
+    // Get the error message for this field, if any
+    const errorMessage = propertyName ? context.getFieldError(propertyName) : undefined;
+
+    // Get the property descriptor for this field from the command instance
+    const propertyDescriptor = propertyName && (context.commandInstance as any)?.propertyDescriptors
+        ? (context.commandInstance as any).propertyDescriptors.find((pd: any) => pd.name === propertyName)
+        : undefined;
+
+    // Clone the field element with the current value and onChange handler
+    const clonedField = React.cloneElement(field as React.ReactElement, {
+        ...fieldProps,
+        currentValue,
+        propertyDescriptor,
+        fieldName: propertyName,
+        onValueChange: (value: unknown) => {
+            if (propertyName) {
+                const oldValue = currentValue;
+
+                // Call custom field validator if provided
+                if (context.onFieldValidate) {
+                    const validationError = context.onFieldValidate(context.commandInstance as any, propertyName, oldValue, value);
+                    context.setCustomFieldError(propertyName, validationError);
+                }
+
+                context.setCommandValues({ [propertyName]: value } as any);
+
+                // Call field change callback if provided
+                if (context.onFieldChange) {
+                    context.onFieldChange(context.commandInstance as any, propertyName, oldValue, value);
+                }
+            }
+            fieldProps.onChange?.(value as any);
+        },
+        required: fieldProps.required ?? true,
+        invalid: !!errorMessage
+    } as any);
+
+    const tooltipId = fieldProps.description ? `tooltip-${propertyName}-${index}` : undefined;
+
+    return (
+        <div style={{ width: '100%' }}>
+            <div className="p-inputgroup" style={{ width: '100%' }}>
+                {fieldProps.description && (
+                    <Tooltip target={`.${tooltipId}`} content={fieldProps.description} />
+                )}
+                {fieldProps.icon && (
+                    <span className={`p-inputgroup-addon ${tooltipId || ''}`}>
+                        {fieldProps.icon}
+                    </span>
+                )}
+                {clonedField}
+            </div>
+            {errorMessage && (
+                <small className="p-error block mt-1">{errorMessage}</small>
+            )}
+        </div>
+    );
+};
+
+export const CommandFormFields = (props: CommandFormFieldsProps) => {
+    const { fields, columns } = props;
+
+    // Render columns if provided
+    if (columns && columns.length > 0) {
+        return (
+            <div className="card flex flex-column md:flex-row gap-3">
+                {columns.map((column, columnIndex) => (
+                    <div key={`column-${columnIndex}`} className="flex flex-column gap-3 flex-1">
+                            {column.fields.map((field, index) => {
+                                const fieldProps = field.props as CommandFormFieldProps<any>;
+                                const propertyAccessor = fieldProps.value;
+                                const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${columnIndex}-${index}`;
+
+                                return (
+                                    <CommandFormFieldWrapper
+                                        key={propertyName}
+                                        field={field}
+                                        index={index}
+                                    />
+                                );
+                            })}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    // Render fields (single column layout)
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+            {(fields || []).map((field, index) => {
+                const fieldProps = field.props as CommandFormFieldProps<any>;
+                const propertyAccessor = fieldProps.value;
+                const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${index}`;
+
+                return (
+                    <CommandFormFieldWrapper
+                        key={propertyName}
+                        field={field}
+                        index={index}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+// Helper function to extract property name from accessor function
+function getPropertyName<T>(accessor: (obj: T) => unknown): string {
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+    return match ? match[1] : '';
+}