@cratis/components 0.1.9 → 0.1.10

package/CommandDialog/CommandDialog.tsx

@@ -1,161 +0,0 @@
-// 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

@@ -1,4 +0,0 @@
-// 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

@@ -1,24 +0,0 @@
-// 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

@@ -1,266 +0,0 @@
-// 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

@@ -1,27 +0,0 @@
-// 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

@@ -1,142 +0,0 @@
-// 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] : '';
-}

package/CommandForm/DatePickerField.tsx

@@ -1,57 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { PropertyAccessor } from '@cratis/fundamentals';
-import { PropertyDescriptor } from '@cratis/arc/reflection';
-import React, { useState, useEffect } from 'react';
-import { InputText } from 'primereact/inputtext';
-import { useCommandFormContext } from './CommandForm';
-
-export interface DatePickerFieldProps<TCommand> {
-    icon?: React.ReactElement;
-    value: PropertyAccessor<TCommand>;
-    onChange?: (value: unknown) => void;
-    currentValue?: string;
-    onValueChange?: (value: string) => void;
-    required?: boolean;
-    title?: string;
-    description?: string;
-    propertyDescriptor?: PropertyDescriptor;
-    fieldName?: string;
-}
-
-export const DatePickerField = <TCommand,>(props: DatePickerFieldProps<TCommand>) => {
-    const [localValue, setLocalValue] = useState(props.currentValue || '');
-    const required = props.required ?? true;
-    const isValid = !required || localValue.trim().length > 0;
-    const { setFieldValidity } = useCommandFormContext();
-
-    useEffect(() => {
-        setLocalValue(props.currentValue || '');
-    }, [props.currentValue]);
-
-    useEffect(() => {
-        if (props.fieldName) {
-            setFieldValidity(props.fieldName, isValid);
-        }
-    }, [isValid, props.fieldName, setFieldValidity]);
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newValue = e.target.value;
-        setLocalValue(newValue);
-        props.onValueChange?.(newValue);
-    };
-
-    return (
-        <InputText
-            type="date"
-            value={localValue}
-            onChange={handleChange}
-            required={required}
-            invalid={!isValid}
-            placeholder={props.title}
-        />
-    );
-};
-
-DatePickerField.displayName = 'CommandFormField';