@cratis/components 0.1.9 → 0.1.10

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

package/DataPage/DataPage.tsx

@@ -1,191 +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 { 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

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

package/DataTables/DataTableForObservableQuery.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 './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>);

package/DataTables/DataTableForObservableQuery.tsx

@@ -1,97 +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 { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
-import { Constructor } from '@cratis/fundamentals';
-import { IObservableQueryFor, Paging } from '@cratis/arc/queries';
-import { useObservableQueryWithPaging } from '@cratis/arc.react/queries';
-import { ReactNode, useState } from 'react';
-
- 
-
-/**
- * Props for the DataTableForQuery component
- */
-export interface DataTableForObservableQueryProps<TQuery extends IObservableQueryFor<TDataType>, TDataType, TArguments> {
-    /**
-     * Children to render
-     */
-    children?: ReactNode;
-
-    /**
-     * 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;
-}
-
-const paging = new Paging(0, 20);
-
-/**
- * Represents a DataTable for a query.
- * @param props Props for the component
- * @returns Function to render the DataTableForQuery component
- */
-export const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => {
-    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});
-    const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);
-
-    return (
-        <DataTable
-            value={result.data}
-            lazy
-            rows={paging.pageSize}
-            totalRecords={result.paging.totalItems}
-            paginator
-            alwaysShowPaginator={false}
-            first={result.paging.page * paging.pageSize}
-            onPage={(e) => setPage(e.page ?? 0)}
-            scrollable
-            scrollHeight={'flex'}
-            selectionMode='single'
-            selection={props.selection}
-            onSelectionChange={props.onSelectionChange}
-            dataKey={props.dataKey}
-            filters={filters}
-            filterDisplay='menu'
-            onFilter={(e) => setFilters(e.filters)}
-            globalFilterFields={props.globalFilterFields}
-            emptyMessage={props.emptyMessage}>
-            {props.children}
-        </DataTable>
-    );
-};

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