@cratis/components 0.1.9

package/dist/cjs/CommandForm/CommandForm.js

@@ -0,0 +1,179 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var CommandFormFields = require('./CommandFormFields.js');
+var commands = require('@cratis/arc.react/commands');
+var React = require('react');
+var panel = require('primereact/panel');
+
+const CommandFormContext = React.createContext(undefined);
+const useCommandFormContext = () => {
+    const context = React.useContext(CommandFormContext);
+    if (!context) {
+        throw new Error('useCommandFormContext must be used within a CommandForm');
+    }
+    return context;
+};
+const useCommandInstance = () => {
+    const { commandInstance } = useCommandFormContext();
+    return commandInstance;
+};
+const useSetCommandResult = () => {
+    const { setCommandResult } = useCommandFormContext();
+    return setCommandResult;
+};
+const CommandFormFieldsWrapper = (props) => {
+    React.Children.forEach(props.children, child => {
+        if (React.isValidElement(child)) {
+            const component = child.type;
+            if (component.displayName !== 'CommandFormField') {
+                throw new Error(`Only CommandFormField components are allowed as children of CommandForm.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);
+            }
+        }
+    });
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+CommandFormFieldsWrapper.displayName = 'CommandFormFieldsWrapper';
+const getCommandFormFields = (props) => {
+    if (!props.children) {
+        return { fieldsOrColumns: [], otherChildren: [], initialValuesFromFields: {} };
+    }
+    let fields = [];
+    const columns = [];
+    let hasColumns = false;
+    const otherChildren = [];
+    let initialValuesFromFields = {};
+    const extractInitialValue = (field) => {
+        const fieldProps = field.props;
+        if (fieldProps.currentValue !== undefined && fieldProps.value) {
+            const propertyAccessor = fieldProps.value;
+            const propertyName = getPropertyNameFromAccessor(propertyAccessor);
+            if (propertyName) {
+                initialValuesFromFields = { ...initialValuesFromFields, [propertyName]: fieldProps.currentValue };
+            }
+        }
+    };
+    React.Children.toArray(props.children).forEach(child => {
+        if (!React.isValidElement(child)) {
+            otherChildren.push(child);
+            return;
+        }
+        const component = child.type;
+        if (component.displayName === 'CommandFormColumn') {
+            hasColumns = true;
+            const childProps = child.props;
+            const columnFields = React.Children.toArray(childProps.children).filter(child => {
+                if (React.isValidElement(child)) {
+                    const comp = child.type;
+                    if (comp.displayName === 'CommandFormField') {
+                        extractInitialValue(child);
+                        return true;
+                    }
+                }
+                return false;
+            });
+            columns.push({ fields: columnFields });
+        }
+        else if (component.displayName === 'CommandFormField') {
+            extractInitialValue(child);
+            fields.push(child);
+        }
+        else if (component === CommandFormFieldsWrapper || component.displayName === 'CommandFormFieldsWrapper') {
+            const childProps = child.props;
+            const relevantChildren = React.Children.toArray(childProps.children).filter(child => {
+                if (React.isValidElement(child)) {
+                    const component = child.type;
+                    if (component.displayName === 'CommandFormField') {
+                        extractInitialValue(child);
+                        return true;
+                    }
+                }
+                return false;
+            });
+            fields = [...fields, ...relevantChildren];
+        }
+        else {
+            otherChildren.push(child);
+        }
+    });
+    return { fieldsOrColumns: hasColumns ? columns : fields, otherChildren, initialValuesFromFields };
+};
+function getPropertyNameFromAccessor(accessor) {
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+    return match ? match[1] : '';
+}
+const CommandFormComponent = (props) => {
+    const { fieldsOrColumns, otherChildren, initialValuesFromFields } = React.useMemo(() => getCommandFormFields(props), [props.children]);
+    const valuesFromCurrentValues = React.useMemo(() => {
+        if (!props.currentValues)
+            return {};
+        const tempCommand = new props.command();
+        const commandProperties = tempCommand.properties || [];
+        const extracted = {};
+        commandProperties.forEach((propertyName) => {
+            if (props.currentValues[propertyName] !== undefined) {
+                extracted[propertyName] = props.currentValues[propertyName];
+            }
+        });
+        return extracted;
+    }, [props.currentValues, props.command]);
+    const mergedInitialValues = React.useMemo(() => ({
+        ...valuesFromCurrentValues,
+        ...initialValuesFromFields,
+        ...props.initialValues
+    }), [valuesFromCurrentValues, initialValuesFromFields, props.initialValues]);
+    const [commandInstance, setCommandValues] = commands.useCommand(props.command, mergedInitialValues);
+    const [commandResult, setCommandResult] = React.useState(undefined);
+    const [fieldValidities, setFieldValidities] = React.useState({});
+    const [customFieldErrors, setCustomFieldErrors] = React.useState({});
+    React.useEffect(() => {
+        if (mergedInitialValues && Object.keys(mergedInitialValues).length > 0) {
+            setCommandValues(mergedInitialValues);
+        }
+    }, [mergedInitialValues, setCommandValues]);
+    const isValid = Object.values(fieldValidities).every(valid => valid);
+    const setFieldValidity = React.useCallback((fieldName, isFieldValid) => {
+        setFieldValidities(prev => ({ ...prev, [fieldName]: isFieldValid }));
+    }, []);
+    const setCustomFieldError = React.useCallback((fieldName, error) => {
+        setCustomFieldErrors(prev => {
+            if (error === undefined) {
+                const newErrors = { ...prev };
+                delete newErrors[fieldName];
+                return newErrors;
+            }
+            return { ...prev, [fieldName]: error };
+        });
+    }, []);
+    const getFieldError = (propertyName) => {
+        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 (jsxRuntime.jsxs(CommandFormContext.Provider, { value: { command: props.command, commandInstance, setCommandValues, commandResult, setCommandResult, getFieldError, isValid, setFieldValidity, onFieldValidate: props.onFieldValidate, onFieldChange: props.onFieldChange, onBeforeExecute: props.onBeforeExecute, customFieldErrors, setCustomFieldError }, children: [jsxRuntime.jsx(CommandFormFields.CommandFormFields, { fields: hasColumns ? undefined : fieldsOrColumns, columns: hasColumns ? fieldsOrColumns : undefined }), exceptionMessages.length > 0 && (jsxRuntime.jsx("div", { className: "card flex flex-row gap-3 mt-3", children: jsxRuntime.jsx(panel.Panel, { header: "The server responded with", className: "w-full", children: jsxRuntime.jsx("ul", { children: exceptionMessages.map((msg, idx) => (jsxRuntime.jsx("li", { children: msg }, idx))) }) }) })), otherChildren] }));
+};
+const CommandFormColumnComponent = (_props) => {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+CommandFormColumnComponent.displayName = 'CommandFormColumn';
+CommandFormComponent.Fields = CommandFormFieldsWrapper;
+CommandFormComponent.Column = CommandFormColumnComponent;
+const CommandForm = CommandFormComponent;
+
+exports.CommandForm = CommandForm;
+exports.useCommandFormContext = useCommandFormContext;
+exports.useCommandInstance = useCommandInstance;
+exports.useSetCommandResult = useSetCommandResult;
+//# sourceMappingURL=CommandForm.js.map

package/dist/cjs/CommandForm/CommandForm.js.map

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

package/dist/cjs/CommandForm/CommandFormField.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const CommandFormField = (_props) => {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+CommandFormField.displayName = 'CommandFormField';
+
+exports.CommandFormField = CommandFormField;
+//# sourceMappingURL=CommandFormField.js.map

package/dist/cjs/CommandForm/CommandFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandFormField.js","sources":["../../../CommandForm/CommandFormField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { PropertyAccessor } from '@cratis/fundamentals';\n\nexport interface CommandFormFieldProps<TCommand = unknown> {\n    icon?: React.ReactElement;\n    /** Accessor function that selects a property on the command, e.g. c => c.name */\n    value?: PropertyAccessor<TCommand>;\n    /** Current value for the property (injected by CommandFormFields) */\n    currentValue?: unknown;\n    /** Called when the field value changes (injected by CommandFormFields) */\n    onValueChange?: (value: unknown) => void;\n    onChange?: (value: unknown) => void;\n    required?: boolean;\n    title?: string;\n    description?: string;\n    propertyDescriptor?: unknown;\n    fieldName?: string;\n}\n\nexport const CommandFormField = <TCommand,>(_props?: CommandFormFieldProps<TCommand>) => {\n    void _props;\n    return <></>;\n};\n\nCommandFormField.displayName = 'CommandFormField';\n"],"names":["_jsx"],"mappings":";;;;AAqBO,MAAM,gBAAgB,GAAG,CAAY,MAAwC,KAAI;AAEpF,IAAA,OAAOA,uCAAK;AAChB;AAEA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/cjs/CommandForm/CommandFormFields.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var CommandForm = require('./CommandForm.js');
+var React = require('react');
+var tooltip = require('primereact/tooltip');
+
+const CommandFormFieldWrapper = ({ field, index }) => {
+    const context = CommandForm.useCommandFormContext();
+    const fieldProps = field.props;
+    const propertyAccessor = fieldProps.value;
+    const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : '';
+    const currentValue = propertyName ? context.commandInstance?.[propertyName] : undefined;
+    const errorMessage = propertyName ? context.getFieldError(propertyName) : undefined;
+    const propertyDescriptor = propertyName && context.commandInstance?.propertyDescriptors
+        ? context.commandInstance.propertyDescriptors.find((pd) => pd.name === propertyName)
+        : undefined;
+    const clonedField = React.cloneElement(field, {
+        ...fieldProps,
+        currentValue,
+        propertyDescriptor,
+        fieldName: propertyName,
+        onValueChange: (value) => {
+            if (propertyName) {
+                const oldValue = currentValue;
+                if (context.onFieldValidate) {
+                    const validationError = context.onFieldValidate(context.commandInstance, propertyName, oldValue, value);
+                    context.setCustomFieldError(propertyName, validationError);
+                }
+                context.setCommandValues({ [propertyName]: value });
+                if (context.onFieldChange) {
+                    context.onFieldChange(context.commandInstance, propertyName, oldValue, value);
+                }
+            }
+            fieldProps.onChange?.(value);
+        },
+        required: fieldProps.required ?? true,
+        invalid: !!errorMessage
+    });
+    const tooltipId = fieldProps.description ? `tooltip-${propertyName}-${index}` : undefined;
+    return (jsxRuntime.jsxs("div", { style: { width: '100%' }, children: [jsxRuntime.jsxs("div", { className: "p-inputgroup", style: { width: '100%' }, children: [fieldProps.description && (jsxRuntime.jsx(tooltip.Tooltip, { target: `.${tooltipId}`, content: fieldProps.description })), fieldProps.icon && (jsxRuntime.jsx("span", { className: `p-inputgroup-addon ${tooltipId || ''}`, children: fieldProps.icon })), clonedField] }), errorMessage && (jsxRuntime.jsx("small", { className: "p-error block mt-1", children: errorMessage }))] }));
+};
+const CommandFormFields = (props) => {
+    const { fields, columns } = props;
+    if (columns && columns.length > 0) {
+        return (jsxRuntime.jsx("div", { className: "card flex flex-column md:flex-row gap-3", children: columns.map((column, columnIndex) => (jsxRuntime.jsx("div", { className: "flex flex-column gap-3 flex-1", children: column.fields.map((field, index) => {
+                    const fieldProps = field.props;
+                    const propertyAccessor = fieldProps.value;
+                    const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${columnIndex}-${index}`;
+                    return (jsxRuntime.jsx(CommandFormFieldWrapper, { field: field, index: index }, propertyName));
+                }) }, `column-${columnIndex}`))) }));
+    }
+    return (jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }, children: (fields || []).map((field, index) => {
+            const fieldProps = field.props;
+            const propertyAccessor = fieldProps.value;
+            const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${index}`;
+            return (jsxRuntime.jsx(CommandFormFieldWrapper, { field: field, index: index }, propertyName));
+        }) }));
+};
+function getPropertyName(accessor) {
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+    return match ? match[1] : '';
+}
+
+exports.CommandFormFields = CommandFormFields;
+//# sourceMappingURL=CommandFormFields.js.map

package/dist/cjs/CommandForm/CommandFormFields.js.map

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

package/dist/cjs/CommandForm/DatePickerField.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var inputtext = require('primereact/inputtext');
+var CommandForm = require('./CommandForm.js');
+
+const DatePickerField = (props) => {
+    const [localValue, setLocalValue] = React.useState(props.currentValue || '');
+    const required = props.required ?? true;
+    const isValid = !required || localValue.trim().length > 0;
+    const { setFieldValidity } = CommandForm.useCommandFormContext();
+    React.useEffect(() => {
+        setLocalValue(props.currentValue || '');
+    }, [props.currentValue]);
+    React.useEffect(() => {
+        if (props.fieldName) {
+            setFieldValidity(props.fieldName, isValid);
+        }
+    }, [isValid, props.fieldName, setFieldValidity]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setLocalValue(newValue);
+        props.onValueChange?.(newValue);
+    };
+    return (jsxRuntime.jsx(inputtext.InputText, { type: "date", value: localValue, onChange: handleChange, required: required, invalid: !isValid, placeholder: props.title }));
+};
+DatePickerField.displayName = 'CommandFormField';
+
+exports.DatePickerField = DatePickerField;
+//# sourceMappingURL=DatePickerField.js.map

package/dist/cjs/CommandForm/DatePickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerField.js","sources":["../../../CommandForm/DatePickerField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PropertyAccessor } from '@cratis/fundamentals';\nimport { PropertyDescriptor } from '@cratis/arc/reflection';\nimport React, { useState, useEffect } from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { useCommandFormContext } from './CommandForm';\n\nexport interface DatePickerFieldProps<TCommand> {\n    icon?: React.ReactElement;\n    value: PropertyAccessor<TCommand>;\n    onChange?: (value: unknown) => void;\n    currentValue?: string;\n    onValueChange?: (value: string) => void;\n    required?: boolean;\n    title?: string;\n    description?: string;\n    propertyDescriptor?: PropertyDescriptor;\n    fieldName?: string;\n}\n\nexport const DatePickerField = <TCommand,>(props: DatePickerFieldProps<TCommand>) => {\n    const [localValue, setLocalValue] = useState(props.currentValue || '');\n    const required = props.required ?? true;\n    const isValid = !required || localValue.trim().length > 0;\n    const { setFieldValidity } = useCommandFormContext();\n\n    useEffect(() => {\n        setLocalValue(props.currentValue || '');\n    }, [props.currentValue]);\n\n    useEffect(() => {\n        if (props.fieldName) {\n            setFieldValidity(props.fieldName, isValid);\n        }\n    }, [isValid, props.fieldName, setFieldValidity]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        setLocalValue(newValue);\n        props.onValueChange?.(newValue);\n    };\n\n    return (\n        <InputText\n            type=\"date\"\n            value={localValue}\n            onChange={handleChange}\n            required={required}\n            invalid={!isValid}\n            placeholder={props.title}\n        />\n    );\n};\n\nDatePickerField.displayName = 'CommandFormField';\n"],"names":["useState","useCommandFormContext","useEffect","_jsx","InputText"],"mappings":";;;;;;;AAsBO,MAAM,eAAe,GAAG,CAAY,KAAqC,KAAI;AAChF,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;AACtE,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI;AACvC,IAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;AACzD,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAGC,iCAAqB,EAAE;IAEpDC,eAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;AAC3C,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAExBA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,YAAA,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QAC9C;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAsC,KAAI;AAC5D,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC/B,aAAa,CAAC,QAAQ,CAAC;AACvB,QAAA,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;AACnC,IAAA,CAAC;AAED,IAAA,QACIC,cAAA,CAACC,mBAAS,EAAA,EACN,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,OAAO,EACjB,WAAW,EAAE,KAAK,CAAC,KAAK,EAAA,CAC1B;AAEV;AAEA,eAAe,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/cjs/CommandForm/DropdownField.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Dropdown = require('../Dropdown/Dropdown.js');
+var CommandForm = require('./CommandForm.js');
+
+const DropdownField = (props) => {
+    const [localValue, setLocalValue] = React.useState(props.currentValue);
+    const required = props.required ?? true;
+    const isValid = !required || localValue !== null && localValue !== undefined;
+    const { setFieldValidity } = CommandForm.useCommandFormContext();
+    React.useEffect(() => {
+        setLocalValue(props.currentValue);
+    }, [props.currentValue]);
+    React.useEffect(() => {
+        if (props.fieldName) {
+            setFieldValidity(props.fieldName, isValid);
+        }
+    }, [isValid, props.fieldName, setFieldValidity]);
+    const handleChange = (e) => {
+        const newValue = e.value;
+        setLocalValue(newValue);
+        props.onValueChange?.(newValue);
+    };
+    return (jsxRuntime.jsx(Dropdown.Dropdown, { value: localValue, onChange: handleChange, options: props.options, optionLabel: props.optionLabelField, optionValue: props.optionIdField, placeholder: props.placeholder || props.title, required: required, invalid: !isValid, className: "w-full" }));
+};
+DropdownField.displayName = 'CommandFormField';
+
+exports.DropdownField = DropdownField;
+//# sourceMappingURL=DropdownField.js.map

package/dist/cjs/CommandForm/DropdownField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownField.js","sources":["../../../CommandForm/DropdownField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PropertyAccessor } from '@cratis/fundamentals';\nimport { PropertyDescriptor } from '@cratis/arc/reflection';\nimport React, { useState, useEffect } from 'react';\nimport { DropdownChangeEvent } from 'primereact/dropdown';\nimport { Dropdown } from '../Dropdown';\nimport { useCommandFormContext } from './CommandForm';\n\nexport interface DropdownFieldProps<TCommand, TOption> {\n    icon?: React.ReactElement;\n    value: PropertyAccessor<TCommand>;\n    options: TOption[];\n    optionIdField: keyof TOption;\n    optionLabelField: keyof TOption;\n    placeholder?: string;\n    onChange?: (value: unknown) => void;\n    currentValue?: unknown;\n    onValueChange?: (value: unknown) => void;\n    required?: boolean;\n    title?: string;\n    description?: string;\n    propertyDescriptor?: PropertyDescriptor;\n    fieldName?: string;\n}\n\nexport const DropdownField = <TCommand, TOption>(props: DropdownFieldProps<TCommand, TOption>) => {\n    const [localValue, setLocalValue] = useState(props.currentValue);\n    const required = props.required ?? true;\n    const isValid = !required || localValue !== null && localValue !== undefined;\n    const { setFieldValidity } = useCommandFormContext();\n\n    useEffect(() => {\n        setLocalValue(props.currentValue);\n    }, [props.currentValue]);\n\n    useEffect(() => {\n        if (props.fieldName) {\n            setFieldValidity(props.fieldName, isValid);\n        }\n    }, [isValid, props.fieldName, setFieldValidity]);\n\n    const handleChange = (e: DropdownChangeEvent) => {\n        const newValue = e.value;\n        setLocalValue(newValue);\n        props.onValueChange?.(newValue);\n    };\n\n    return (\n        <Dropdown\n            value={localValue}\n            onChange={handleChange}\n            options={props.options}\n            optionLabel={props.optionLabelField as string}\n            optionValue={props.optionIdField as string}\n            placeholder={props.placeholder || props.title}\n            required={required}\n            invalid={!isValid}\n            className=\"w-full\"\n        />\n    );\n};\n\nDropdownField.displayName = 'CommandFormField';\n"],"names":["useState","useCommandFormContext","useEffect","_jsx","Dropdown"],"mappings":";;;;;;;AA2BO,MAAM,aAAa,GAAG,CAAoB,KAA4C,KAAI;AAC7F,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,YAAY,CAAC;AAChE,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI;AACvC,IAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,SAAS;AAC5E,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAGC,iCAAqB,EAAE;IAEpDC,eAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC;AACrC,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAExBA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,YAAA,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QAC9C;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAsB,KAAI;AAC5C,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK;QACxB,aAAa,CAAC,QAAQ,CAAC;AACvB,QAAA,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;AACnC,IAAA,CAAC;IAED,QACIC,cAAA,CAACC,iBAAQ,EAAA,EACL,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,gBAA0B,EAC7C,WAAW,EAAE,KAAK,CAAC,aAAuB,EAC1C,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,KAAK,EAC7C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,OAAO,EACjB,SAAS,EAAC,QAAQ,EAAA,CACpB;AAEV;AAEA,aAAa,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/cjs/CommandForm/InputTextField.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var inputtext = require('primereact/inputtext');
+var CommandForm = require('./CommandForm.js');
+
+const InputTextField = (props) => {
+    const [localValue, setLocalValue] = React.useState(props.currentValue || '');
+    const required = props.required ?? true;
+    const isValid = !required || localValue.trim().length > 0;
+    const { setFieldValidity } = CommandForm.useCommandFormContext();
+    const inputType = props.propertyDescriptor?.type === Number ? 'number' : 'text';
+    React.useEffect(() => {
+        setLocalValue(props.currentValue || '');
+    }, [props.currentValue]);
+    React.useEffect(() => {
+        if (props.fieldName) {
+            setFieldValidity(props.fieldName, isValid);
+        }
+    }, [isValid, props.fieldName, setFieldValidity]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setLocalValue(newValue);
+        props.onValueChange?.(newValue);
+    };
+    return (jsxRuntime.jsx(inputtext.InputText, { type: inputType, value: localValue, onChange: handleChange, required: required, invalid: !isValid, placeholder: props.title }));
+};
+InputTextField.displayName = 'CommandFormField';
+
+exports.InputTextField = InputTextField;
+//# sourceMappingURL=InputTextField.js.map

package/dist/cjs/CommandForm/InputTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputTextField.js","sources":["../../../CommandForm/InputTextField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PropertyAccessor } from '@cratis/fundamentals';\nimport { PropertyDescriptor } from '@cratis/arc/reflection';\nimport React, { useState, useEffect } from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { useCommandFormContext } from './CommandForm';\n\nexport interface InputTextFieldProps<TCommand> {\n    icon?: React.ReactElement;\n    value: PropertyAccessor<TCommand>;\n    onChange?: (value: unknown) => void;\n    currentValue?: string;\n    onValueChange?: (value: string) => void;\n    required?: boolean;\n    title?: string;\n    description?: string;\n    propertyDescriptor?: PropertyDescriptor;\n    fieldName?: string;\n}\n\nexport const InputTextField = <TCommand,>(props: InputTextFieldProps<TCommand>) => {\n    const [localValue, setLocalValue] = useState(props.currentValue || '');\n    const required = props.required ?? true;\n    const isValid = !required || localValue.trim().length > 0;\n    const { setFieldValidity } = useCommandFormContext();\n\n    // Determine input type based on property descriptor\n    const inputType = props.propertyDescriptor?.type === Number ? 'number' : 'text';\n\n    // Update local value when prop changes from outside\n    useEffect(() => {\n        setLocalValue(props.currentValue || '');\n    }, [props.currentValue]);\n\n    // Report validity changes\n    useEffect(() => {\n        if (props.fieldName) {\n            setFieldValidity(props.fieldName, isValid);\n        }\n    }, [isValid, props.fieldName, setFieldValidity]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        setLocalValue(newValue);\n        props.onValueChange?.(newValue);\n    };\n\n    return (\n        <InputText\n            type={inputType}\n            value={localValue}\n            onChange={handleChange}\n            required={required}\n            invalid={!isValid}\n            placeholder={props.title}\n        />\n    );\n};\n\nInputTextField.displayName = 'CommandFormField';\n"],"names":["useState","useCommandFormContext","useEffect","_jsx","InputText"],"mappings":";;;;;;;AAsBO,MAAM,cAAc,GAAG,CAAY,KAAoC,KAAI;AAC9E,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;AACtE,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI;AACvC,IAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;AACzD,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAGC,iCAAqB,EAAE;AAGpD,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,kBAAkB,EAAE,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM;IAG/EC,eAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;AAC3C,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAGxBA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,YAAA,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QAC9C;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAsC,KAAI;AAC5D,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC/B,aAAa,CAAC,QAAQ,CAAC;AACvB,QAAA,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;AACnC,IAAA,CAAC;AAED,IAAA,QACIC,cAAA,CAACC,mBAAS,EAAA,EACN,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,OAAO,EACjB,WAAW,EAAE,KAAK,CAAC,KAAK,EAAA,CAC1B;AAEV;AAEA,cAAc,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/cjs/CommandForm/SliderField.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var slider = require('primereact/slider');
+var CommandForm = require('./CommandForm.js');
+
+const SliderField = (props) => {
+    const [localValue, setLocalValue] = React.useState(props.currentValue ?? 0);
+    const required = props.required ?? true;
+    const min = props.min ?? 0;
+    const max = props.max ?? 1;
+    const step = props.step ?? 0.01;
+    const isValid = !required || (localValue >= min && localValue <= max);
+    const { setFieldValidity } = CommandForm.useCommandFormContext();
+    React.useEffect(() => {
+        setLocalValue(props.currentValue ?? 0);
+    }, [props.currentValue]);
+    React.useEffect(() => {
+        if (props.fieldName) {
+            setFieldValidity(props.fieldName, isValid);
+        }
+    }, [isValid, props.fieldName, setFieldValidity]);
+    const handleChange = (e) => {
+        const newValue = e.value;
+        setLocalValue(newValue);
+        props.onValueChange?.(newValue);
+    };
+    return (jsxRuntime.jsxs("div", { className: "p-inputtext w-full flex align-items-center gap-3", style: { display: 'flex', alignItems: 'center', borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }, children: [jsxRuntime.jsx(slider.Slider, { value: localValue, onChange: handleChange, min: min, max: max, step: step, className: "flex-1 ml-2" }), jsxRuntime.jsx("span", { className: "font-semibold", style: { minWidth: '3rem', textAlign: 'right' }, children: localValue.toFixed(2) })] }));
+};
+SliderField.displayName = 'CommandFormField';
+
+exports.SliderField = SliderField;
+//# sourceMappingURL=SliderField.js.map

package/dist/cjs/CommandForm/SliderField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.js","sources":["../../../CommandForm/SliderField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PropertyAccessor } from '@cratis/fundamentals';\nimport { PropertyDescriptor } from '@cratis/arc/reflection';\nimport React, { useState, useEffect } from 'react';\nimport { Slider, SliderChangeEvent } from 'primereact/slider';\nimport { useCommandFormContext } from './CommandForm';\n\nexport interface SliderFieldProps<TCommand> {\n    icon?: React.ReactElement;\n    value: PropertyAccessor<TCommand>;\n    onChange?: (value: unknown) => void;\n    currentValue?: number;\n    onValueChange?: (value: number) => void;\n    required?: boolean;\n    title?: string;\n    description?: string;\n    propertyDescriptor?: PropertyDescriptor;\n    fieldName?: string;\n    min?: number;\n    max?: number;\n    step?: number;\n}\n\nexport const SliderField = <TCommand,>(props: SliderFieldProps<TCommand>) => {\n    const [localValue, setLocalValue] = useState(props.currentValue ?? 0);\n    const required = props.required ?? true;\n    const min = props.min ?? 0;\n    const max = props.max ?? 1;\n    const step = props.step ?? 0.01;\n    const isValid = !required || (localValue >= min && localValue <= max);\n    const { setFieldValidity } = useCommandFormContext();\n\n    useEffect(() => {\n        setLocalValue(props.currentValue ?? 0);\n    }, [props.currentValue]);\n\n    useEffect(() => {\n        if (props.fieldName) {\n            setFieldValidity(props.fieldName, isValid);\n        }\n    }, [isValid, props.fieldName, setFieldValidity]);\n\n    const handleChange = (e: SliderChangeEvent) => {\n        const newValue = e.value as number;\n        setLocalValue(newValue);\n        props.onValueChange?.(newValue);\n    };\n\n    return (\n        <div className=\"p-inputtext w-full flex align-items-center gap-3\" style={{ display: 'flex', alignItems: 'center', borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}>\n            <Slider\n                value={localValue}\n                onChange={handleChange}\n                min={min}\n                max={max}\n                step={step}\n                className=\"flex-1 ml-2\"\n            />\n            <span className=\"font-semibold\" style={{ minWidth: '3rem', textAlign: 'right' }}>\n                {localValue.toFixed(2)}\n            </span>\n        </div>\n    );\n};\n\nSliderField.displayName = 'CommandFormField';\n"],"names":["useState","useCommandFormContext","useEffect","_jsxs","_jsx","Slider"],"mappings":";;;;;;;AAyBO,MAAM,WAAW,GAAG,CAAY,KAAiC,KAAI;AACxE,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC;AACrE,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI;AACvC,IAAA,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,IAAA,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,IAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,IAAI;AAC/B,IAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,KAAK,UAAU,IAAI,GAAG,IAAI,UAAU,IAAI,GAAG,CAAC;AACrE,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAGC,iCAAqB,EAAE;IAEpDC,eAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC;AAC1C,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAExBA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,YAAA,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QAC9C;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAoB,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAe;QAClC,aAAa,CAAC,QAAQ,CAAC;AACvB,QAAA,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;AACnC,IAAA,CAAC;AAED,IAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CACjKC,eAACC,aAAM,EAAA,EACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,aAAa,GACzB,EACFD,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,EAAA,QAAA,EAC1E,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAA,CACnB,CAAA,EAAA,CACL;AAEd;AAEA,WAAW,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/cjs/CommandForm/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var CommandForm = require('./CommandForm.js');
+var CommandFormField = require('./CommandFormField.js');
+var CommandFormFields = require('./CommandFormFields.js');
+var InputTextField = require('./InputTextField.js');
+var DatePickerField = require('./DatePickerField.js');
+var DropdownField = require('./DropdownField.js');
+var SliderField = require('./SliderField.js');
+
+
+
+exports.CommandForm = CommandForm.CommandForm;
+exports.useCommandFormContext = CommandForm.useCommandFormContext;
+exports.useCommandInstance = CommandForm.useCommandInstance;
+exports.useSetCommandResult = CommandForm.useSetCommandResult;
+exports.CommandFormField = CommandFormField.CommandFormField;
+exports.CommandFormFields = CommandFormFields.CommandFormFields;
+exports.InputTextField = InputTextField.InputTextField;
+exports.DatePickerField = DatePickerField.DatePickerField;
+exports.DropdownField = DropdownField.DropdownField;
+exports.SliderField = SliderField.SliderField;
+//# sourceMappingURL=index.js.map

package/dist/cjs/CommandForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/Common/Page.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const Page = ({ title, children, panel, ...rest }) => {
+    return (jsxRuntime.jsxs("div", { className: 'flex flex-col h-full', ...rest, children: [jsxRuntime.jsx("h1", { className: 'text-3xl mt-3 mb-4', children: title }), jsxRuntime.jsx("main", { className: `overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`, children: children })] }));
+};
+
+exports.Page = Page;
+//# sourceMappingURL=Page.js.map

package/dist/cjs/Common/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sources":["../../../Common/Page.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport interface PageProps extends HTMLAttributes<HTMLDivElement> {\n    title: string;\n    children?: ReactNode;\n    panel?: boolean\n}\n\nexport const Page = ({ title, children, panel, ...rest }: PageProps) => {\n    return (\n        <div className='flex flex-col h-full' {...rest}>\n            <h1 className='text-3xl mt-3 mb-4'>{title}</h1>\n            <main className={`overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`}>\n                {children}\n            </main>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAWO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAa,KAAI;AACnE,IAAA,QACIA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,GAAK,IAAI,EAAA,QAAA,EAAA,CAC1CC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,GAAM,EAC/CA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,+CAA+C,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,EAAA,QAAA,EACjF,QAAQ,EAAA,CACN,CAAA,EAAA,CACL;AAEd;;;;"}

package/dist/cjs/DataPage/DataPage.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Page = require('../Common/Page.js');
+var menubar = require('primereact/menubar');
+var queries = require('@cratis/arc/queries');
+var DataTableForObservableQuery = require('../DataTables/DataTableForObservableQuery.js');
+var DataTableForQuery = require('../DataTables/DataTableForQuery.js');
+var allotment = require('allotment');
+
+const MenuItem = (_) => {
+    return null;
+};
+const MenuItems = ({ children }) => {
+    const context = React.useContext(DataPageContext);
+    const isDisabled = React.useMemo(() => {
+        return !context.selectedItem;
+    }, [context.selectedItem]);
+    const items = React.useMemo(() => {
+        const menuItems = [];
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child) && child.type == MenuItem) {
+                const Icon = child.props.icon;
+                const menuItem = { ...child.props };
+                menuItem.icon = jsxRuntime.jsx(Icon, { className: 'mr-2' });
+                menuItem.disabled = isDisabled && child.props.disableOnUnselected;
+                menuItems.push(menuItem);
+            }
+        });
+        return menuItems;
+    }, [children, context.selectedItem]);
+    return (jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx(menubar.Menubar, { "aria-label": "Actions", model: items }) }));
+};
+const Columns = ({ children }) => {
+    const context = React.useContext(DataPageContext);
+    if (context.query.prototype instanceof queries.QueryFor) {
+        return (jsxRuntime.jsx(DataTableForQuery.DataTableForQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, children: children }));
+    }
+    else {
+        return (jsxRuntime.jsx(DataTableForObservableQuery.DataTableForObservableQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, children: children }));
+    }
+};
+const DataPageContext = React.createContext(null);
+const DataPage = (props) => {
+    const [selectedItem, setSelectedItem] = React.useState(undefined);
+    const selectionChanged = (e) => {
+        setSelectedItem(e.value);
+        if (props.onSelectionChange) {
+            props.onSelectionChange(e);
+        }
+    };
+    const context = { ...props, selectedItem, onSelectionChanged: selectionChanged };
+    return (jsxRuntime.jsx(DataPageContext.Provider, { value: context, children: jsxRuntime.jsx(Page.Page, { title: props.title, panel: true, children: jsxRuntime.jsxs(allotment.Allotment, { className: "h-full", proportionalLayout: false, children: [jsxRuntime.jsx(allotment.Allotment.Pane, { className: "flex-grow", children: props.children }), props.detailsComponent && selectedItem &&
+                        jsxRuntime.jsx(allotment.Allotment.Pane, { preferredSize: "450px", children: jsxRuntime.jsx(props.detailsComponent, { item: selectedItem }) })] }) }) }));
+};
+DataPage.MenuItems = MenuItems;
+DataPage.Columns = Columns;
+
+exports.Columns = Columns;
+exports.DataPage = DataPage;
+exports.MenuItem = MenuItem;
+exports.MenuItems = MenuItems;
+//# sourceMappingURL=DataPage.js.map