@cratis/components 0.1.9

package/CommandForm/DatePickerField.tsx

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+// 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>);

package/DataPage/DataPage.tsx

@@ -0,0 +1,191 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ReactNode, useMemo } from 'react';
+import { Page } from '../Common/Page';
+import React from 'react';
+import { MenuItem as PrimeMenuItem } from 'primereact/menuitem';
+import { Menubar } from 'primereact/menubar';
+import { IObservableQueryFor, IQueryFor, QueryFor } from '@cratis/arc/queries';
+import { DataTableForObservableQuery } from '../DataTables/DataTableForObservableQuery';
+import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
+import { DataTableForQuery } from '../DataTables/DataTableForQuery';
+import { Allotment } from 'allotment';
+import { Constructor } from '@cratis/fundamentals';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export interface MenuItemProps extends PrimeMenuItem {
+    disableOnUnselected?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MenuItem = (_: MenuItemProps) => {
+    return null;
+};
+
+export interface MenuItemsProps {
+    children: ReactNode;
+}
+
+export interface ColumnProps {
+    children: ReactNode;
+}
+
+export const MenuItems = ({ children }: MenuItemsProps) => {
+    const context = React.useContext(DataPageContext);
+
+    const isDisabled = useMemo(() => {
+        return !context.selectedItem;
+    }, [context.selectedItem]);
+
+    const items = useMemo(() => {
+        const menuItems: PrimeMenuItem[] = [];
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement<MenuItemProps>(child) && child.type == MenuItem) {
+                const Icon = child.props.icon;
+                const menuItem = { ...child.props };
+                menuItem.icon = <Icon className='mr-2' />;
+                menuItem.disabled = isDisabled && child.props.disableOnUnselected;
+                menuItems.push(menuItem);
+            }
+        });
+
+        return menuItems;
+    }, [children, context.selectedItem]);
+
+    return (
+        <div className="px-4 py-2">
+            <Menubar aria-label="Actions" model={items} />
+        </div>);
+};
+
+export const Columns = ({ children }: ColumnProps) => {
+
+    const context = React.useContext(DataPageContext);
+
+    if (context.query.prototype instanceof QueryFor) {
+        return (
+            <DataTableForQuery {...context} selection={context.selectedItem} onSelectionChange={context.onSelectionChanged}>
+                {children}
+            </DataTableForQuery>);
+
+    } else {
+        return (
+            <DataTableForObservableQuery {...context} selection={context.selectedItem} onSelectionChange={context.onSelectionChanged}>
+                {children}
+            </DataTableForObservableQuery>);
+    }
+};
+
+export interface IDetailsComponentProps<TDataType> {
+    item: TDataType;
+
+}
+
+interface IDataPageContext extends DataPageProps<any, any, any> {
+    selectedItem: any;
+    onSelectionChanged: (e: DataTableSelectionSingleChangeEvent<any>) => void;
+}
+
+const DataPageContext = React.createContext<IDataPageContext>(null as any);
+
+/**
+ * Props for the DataPage component
+ */
+export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType>, TDataType, TArguments> {
+    /**
+     * The title of the page
+     */
+    title: string;
+
+    /**
+     * Children to render, for this it means menu items and columns. Use <DataPage.MenuItems> and <DataPage.Columns> for this.
+     */
+    children: ReactNode;
+
+    /**
+     * Component to render when the selection changes
+     */
+    detailsComponent?: React.FC<IDetailsComponentProps<any>>;
+
+    /**
+     * The type of query to use
+     */
+    query: Constructor<TQuery>;
+
+    /**
+     * Optional arguments to pass to the query
+     */
+    queryArguments?: TArguments;
+
+    /**
+     * The message to show when there is no data
+     */
+    emptyMessage: string;
+
+    /**
+     * The key to use for the data
+     */
+    dataKey?: string | undefined;
+
+    /**
+     * The current selection.
+     */
+    selection?: any | undefined | null;
+
+    /**
+     * Callback for when the selection changes
+     */
+    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<any>): void;
+
+    /**
+     * Fields to use for global filtering
+     */
+    globalFilterFields?: string[] | undefined;
+
+    /**
+     * Default filters to use
+     */
+    defaultFilters?: DataTableFilterMeta;
+}
+
+/**
+ * Represents a data driven page with a menu and custom defined columns for the data table.
+ * @param props Props for the DataPage component
+ * @returns Function to render the DataPage component
+ */
+const DataPage = <TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType, TArguments>, TDataType, TArguments extends object>(props: DataPageProps<TQuery, TDataType, TArguments>) => {
+    const [selectedItem, setSelectedItem] = React.useState(undefined);
+
+    const selectionChanged = (e: DataTableSelectionSingleChangeEvent<any>) => {
+        setSelectedItem(e.value);
+        if (props.onSelectionChange) {
+            props.onSelectionChange(e);
+        }
+    };
+
+    const context = { ...props, selectedItem, onSelectionChanged: selectionChanged };
+
+    return (
+        <DataPageContext.Provider value={context}>
+            <Page title={props.title} panel={true}>
+                <Allotment className="h-full" proportionalLayout={false}>
+                    <Allotment.Pane className="flex-grow">
+                        {props.children}
+                    </Allotment.Pane>
+                    {props.detailsComponent && selectedItem &&
+                        <Allotment.Pane preferredSize="450px">
+                            <props.detailsComponent item={selectedItem} />
+                        </Allotment.Pane>
+                    }
+                </Allotment>
+            </Page>
+        </DataPageContext.Provider>
+    );
+};
+
+DataPage.MenuItems = MenuItems;
+DataPage.Columns = Columns;
+
+export { DataPage };

package/DataPage/index.ts

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

package/DataTables/DataTableForObservableQuery.stories.tsx

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