@cratis/components 0.1.9 → 0.1.12

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';

package/CommandForm/DropdownField.tsx

@@ -1,65 +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 { DropdownChangeEvent } from 'primereact/dropdown';
-import { Dropdown } from '../Dropdown';
-import { useCommandFormContext } from './CommandForm';
-
-export interface DropdownFieldProps<TCommand, TOption> {
-    icon?: React.ReactElement;
-    value: PropertyAccessor<TCommand>;
-    options: TOption[];
-    optionIdField: keyof TOption;
-    optionLabelField: keyof TOption;
-    placeholder?: string;
-    onChange?: (value: unknown) => void;
-    currentValue?: unknown;
-    onValueChange?: (value: unknown) => void;
-    required?: boolean;
-    title?: string;
-    description?: string;
-    propertyDescriptor?: PropertyDescriptor;
-    fieldName?: string;
-}
-
-export const DropdownField = <TCommand, TOption>(props: DropdownFieldProps<TCommand, TOption>) => {
-    const [localValue, setLocalValue] = useState(props.currentValue);
-    const required = props.required ?? true;
-    const isValid = !required || localValue !== null && localValue !== undefined;
-    const { setFieldValidity } = useCommandFormContext();
-
-    useEffect(() => {
-        setLocalValue(props.currentValue);
-    }, [props.currentValue]);
-
-    useEffect(() => {
-        if (props.fieldName) {
-            setFieldValidity(props.fieldName, isValid);
-        }
-    }, [isValid, props.fieldName, setFieldValidity]);
-
-    const handleChange = (e: DropdownChangeEvent) => {
-        const newValue = e.value;
-        setLocalValue(newValue);
-        props.onValueChange?.(newValue);
-    };
-
-    return (
-        <Dropdown
-            value={localValue}
-            onChange={handleChange}
-            options={props.options}
-            optionLabel={props.optionLabelField as string}
-            optionValue={props.optionIdField as string}
-            placeholder={props.placeholder || props.title}
-            required={required}
-            invalid={!isValid}
-            className="w-full"
-        />
-    );
-};
-
-DropdownField.displayName = 'CommandFormField';

package/CommandForm/InputTextField.tsx

@@ -1,62 +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 InputTextFieldProps<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 InputTextField = <TCommand,>(props: InputTextFieldProps<TCommand>) => {
-    const [localValue, setLocalValue] = useState(props.currentValue || '');
-    const required = props.required ?? true;
-    const isValid = !required || localValue.trim().length > 0;
-    const { setFieldValidity } = useCommandFormContext();
-
-    // Determine input type based on property descriptor
-    const inputType = props.propertyDescriptor?.type === Number ? 'number' : 'text';
-
-    // Update local value when prop changes from outside
-    useEffect(() => {
-        setLocalValue(props.currentValue || '');
-    }, [props.currentValue]);
-
-    // Report validity changes
-    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={inputType}
-            value={localValue}
-            onChange={handleChange}
-            required={required}
-            invalid={!isValid}
-            placeholder={props.title}
-        />
-    );
-};
-
-InputTextField.displayName = 'CommandFormField';

package/CommandForm/SliderField.tsx

@@ -1,68 +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 { Slider, SliderChangeEvent } from 'primereact/slider';
-import { useCommandFormContext } from './CommandForm';
-
-export interface SliderFieldProps<TCommand> {
-    icon?: React.ReactElement;
-    value: PropertyAccessor<TCommand>;
-    onChange?: (value: unknown) => void;
-    currentValue?: number;
-    onValueChange?: (value: number) => void;
-    required?: boolean;
-    title?: string;
-    description?: string;
-    propertyDescriptor?: PropertyDescriptor;
-    fieldName?: string;
-    min?: number;
-    max?: number;
-    step?: number;
-}
-
-export const SliderField = <TCommand,>(props: SliderFieldProps<TCommand>) => {
-    const [localValue, setLocalValue] = 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 } = useCommandFormContext();
-
-    useEffect(() => {
-        setLocalValue(props.currentValue ?? 0);
-    }, [props.currentValue]);
-
-    useEffect(() => {
-        if (props.fieldName) {
-            setFieldValidity(props.fieldName, isValid);
-        }
-    }, [isValid, props.fieldName, setFieldValidity]);
-
-    const handleChange = (e: SliderChangeEvent) => {
-        const newValue = e.value as number;
-        setLocalValue(newValue);
-        props.onValueChange?.(newValue);
-    };
-
-    return (
-        <div className="p-inputtext w-full flex align-items-center gap-3" style={{ display: 'flex', alignItems: 'center', borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}>
-            <Slider
-                value={localValue}
-                onChange={handleChange}
-                min={min}
-                max={max}
-                step={step}
-                className="flex-1 ml-2"
-            />
-            <span className="font-semibold" style={{ minWidth: '3rem', textAlign: 'right' }}>
-                {localValue.toFixed(2)}
-            </span>
-        </div>
-    );
-};
-
-SliderField.displayName = 'CommandFormField';

package/CommandForm/index.ts

@@ -1,10 +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 './CommandForm';
-export * from './CommandFormField';
-export * from './CommandFormFields';
-export * from './InputTextField';
-export * from './DatePickerField';
-export * from './DropdownField';
-export * from './SliderField';

package/Common/ErrorBoundary.stories.tsx

@@ -1,10 +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 * as Comp from './ErrorBoundary';
-const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
-
-export default { title: 'Common/ErrorBoundary', component: Component };
-
-export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);

package/Common/ErrorBoundary.tsx

@@ -1,41 +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 { Component, ErrorInfo, ReactNode } from 'react';
-
-interface Props {
-    children: ReactNode;
-}
-interface State {
-    hasError: boolean;
-    error: Error;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-    public state: State = {
-        hasError: false,
-        error: new Error(),
-    };
-
-    public static getDerivedStateFromError(error: Error): State {
-        return { hasError: true, error: error };
-    }
-
-    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.error('Uncaught error:', error, errorInfo);
-    }
-
-    public render() {
-        if (this.state.hasError) {
-            return (
-                <div className='p-4'>
-                    <h1 className='text-3xl m-3'>Error</h1>
-                    <p>{this.state.error.message}</p>
-                    <p>{this.state.error.stack}</p>
-                </div>
-            );
-        }
-
-        return this.props.children;
-    }
-}

package/Common/FormElement.stories.tsx

@@ -1,10 +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 * as Comp from './FormElement';
-const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
-
-export default { title: 'Common/FormElement', component: Component };
-
-export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);

package/Common/FormElement.tsx

@@ -1,20 +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 interface FormElementProps {
-    children: React.ReactNode;
-    icon: React.ReactNode;
-}
-
-export const FormElement = (props: FormElementProps) => {
-    return (
-        <div className="card flex flex-column md:flex-row gap-3">
-            <div className="p-inputgroup flex-1">
-                <span className="p-inputgroup-addon">
-                    {props.icon}
-                </span>
-                {props.children}
-            </div>
-        </div>
-    );
-};

package/Common/Page.stories.tsx

@@ -1,10 +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 * as Comp from './Page';
-const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
-
-export default { title: 'Common/Page', component: Component };
-
-export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);

package/Common/Page.tsx

@@ -1,21 +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 { HTMLAttributes, ReactNode } from 'react';
-
-export interface PageProps extends HTMLAttributes<HTMLDivElement> {
-    title: string;
-    children?: ReactNode;
-    panel?: boolean
-}
-
-export const Page = ({ title, children, panel, ...rest }: PageProps) => {
-    return (
-        <div className='flex flex-col h-full' {...rest}>
-            <h1 className='text-3xl mt-3 mb-4'>{title}</h1>
-            <main className={`overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`}>
-                {children}
-            </main>
-        </div>
-    );
-};

package/Common/index.ts

@@ -1,6 +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 './ErrorBoundary';
-export * from './Page';
-export * from './FormElement';

package/DataPage/DataPage.stories.tsx

@@ -1,10 +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 * as Comp from './DataPage';
-const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
-
-export default { title: 'DataPage/DataPage', component: Component };
-
-export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);