@cratis/components 0.1.9 → 0.1.12

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

package/DataTables/DataTableForQuery.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 { IQueryFor, Paging } from '@cratis/arc/queries';
-import { useQueryWithPaging } from '@cratis/arc.react/queries';
-import { ReactNode, useState } from 'react';
-
- 
-
-/**
- * Props for the DataTableForQuery component
- */
-export interface DataTableForQueryProps<TQuery extends IQueryFor<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 DataTableForQuery = <TQuery extends IQueryFor<TDataType, TArguments>, TDataType, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => {
-    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});
-    const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);
-
-    return (
-        <DataTable
-            value={result.data as unknown}
-            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/index.ts

@@ -1,5 +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 './DataTableForQuery';
-export * from './DataTableForObservableQuery';

package/Dialogs/BusyIndicatorDialog.stories.tsx

@@ -1,26 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { BusyIndicatorDialog } from './BusyIndicatorDialog';
-
-const meta: Meta<typeof BusyIndicatorDialog> = {
-  title: 'Dialogs/BusyIndicatorDialog',
-  component: BusyIndicatorDialog,
-};
-
-export default meta;
-type Story = StoryObj<typeof BusyIndicatorDialog>;
-
-export const Default: Story = {
-  args: {
-    title: 'Loading',
-    message: 'Please wait while we process your request...'
-  },
-  render: (args) => (
-    <div className="storybook-wrapper">
-      <BusyIndicatorDialog {...args} />
-    </div>
-  )
-};

package/Dialogs/BusyIndicatorDialog.tsx

@@ -1,26 +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 { Dialog } from 'primereact/dialog';
-import { BusyIndicatorDialogRequest } from '@cratis/arc.react/dialogs';
-import { ProgressSpinner } from 'primereact/progressspinner';
-
-export const BusyIndicatorDialog = (props: BusyIndicatorDialogRequest) => {
-
-    const headerElement = (
-        <div className="inline-flex align-items-center justify-content-center gap-2">
-            <span className="font-bold white-space-nowrap">{props.title}</span>
-        </div>
-    );
-
-    return (
-        <>
-            <Dialog header={headerElement} modal visible={true} onHide={() => undefined}>
-                <ProgressSpinner />
-                <p className="m-0">
-                    {props.message}
-                </p>
-            </Dialog>
-        </>
-    );
-};

package/Dialogs/ConfirmationDialog.stories.tsx

@@ -1,36 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { ConfirmationDialog } from './ConfirmationDialog';
-import { DialogButtons, DialogComponents, useConfirmationDialog } from '@cratis/arc.react/dialogs';
-
-const meta: Meta<typeof ConfirmationDialog> = {
-    title: 'Dialogs/ConfirmationDialog',
-    component: ConfirmationDialog,
-};
-
-export default meta;
-type Story = StoryObj<typeof ConfirmationDialog>;
-
-const DialogWrapper = ({ title, message }: { title: string; message: string }) => {
-    const [showDialog] = useConfirmationDialog(title, message, DialogButtons.YesNoCancel);
-    return (
-        <button onClick={() => showDialog()}>Show dialog</button>
-    );
-};
-
-export const Default: Story = {
-    args: {
-        title: 'Are you sure you want to proceed?', 
-        message: 'Do you really really want to proceed with this action?'
-    },
-    render: (args: any) => (
-        <div className="storybook-wrapper" >
-            <DialogComponents confirmation={ConfirmationDialog}>
-                <DialogWrapper title={args.title} message={args.message} />
-            </DialogComponents>
-        </div>
-    )
-};

package/Dialogs/ConfirmationDialog.tsx

@@ -1,75 +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 { Dialog } from 'primereact/dialog';
-import { DialogButtons, ConfirmationDialogRequest } from '@cratis/arc.react/dialogs';
-import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
-import { Button } from 'primereact/button';
-
-export const ConfirmationDialog = () => {
-    const { request, closeDialog } = useDialogContext<ConfirmationDialogRequest>();
-
-    const headerElement = (
-        <div className="inline-flex align-items-center justify-content-center gap-2">
-            <span className="font-bold white-space-nowrap">{request.title}</span>
-        </div>
-    );
-
-    const okFooter = (
-        <>
-            <Button label="Ok" icon="pi pi-check" onClick={() => closeDialog(DialogResult.Ok)} autoFocus />
-        </>
-    );
-
-    const okCancelFooter = (
-        <>
-            <Button label="Ok" icon="pi pi-check" onClick={() => closeDialog(DialogResult.Ok)} autoFocus />
-            <Button label="Cancel" icon="pi pi-times" severity='secondary' onClick={() => closeDialog(DialogResult.Cancelled)} />
-        </>
-    );
-
-    const yesNoFooter = (
-        <>
-            <Button label="Yes" icon="pi pi-check" onClick={() => closeDialog(DialogResult.Yes)} autoFocus />
-            <Button label="No" icon="pi pi-times" severity='secondary' onClick={() => closeDialog(DialogResult.No)} />
-        </>
-    );
-
-    const yesNoCancelFooter = (
-        <>
-            <Button label="Yes" icon="pi pi-check" onClick={() => closeDialog(DialogResult.Yes)} autoFocus />
-            <Button label="No" icon="pi pi-times" severity='secondary' onClick={() => closeDialog(DialogResult.No)} />
-        </>
-    );
-
-    const getFooterInterior = () => {
-        switch (request.buttons) {
-            case DialogButtons.Ok:
-                return okFooter;
-            case DialogButtons.OkCancel:
-                return okCancelFooter;
-            case DialogButtons.YesNo:
-                return yesNoFooter;
-            case DialogButtons.YesNoCancel:
-                return yesNoCancelFooter;
-        }
-
-        return (<></>);
-    };
-
-    const footer = (
-        <div className="card flex flex-wrap justify-content-center gap-3">
-            {getFooterInterior()}
-        </div>
-    );
-
-    return (
-        <>
-            <Dialog header={headerElement} modal footer={footer} onHide={() => closeDialog(DialogResult.Cancelled)} visible={true}>
-                <p className="m-0">
-                    {request.message}
-                </p>
-            </Dialog>
-        </>
-    );
-};

package/Dialogs/index.ts

@@ -1,5 +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 './ConfirmationDialog';
-export * from './BusyIndicatorDialog';

package/Dropdown/Dropdown.tsx

@@ -1,23 +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 { Dropdown as PrimeDropdown, DropdownProps as PrimeDropdownProps } from 'primereact/dropdown';
-import { useOverlayZIndex } from '../useOverlayZIndex';
-
-export type DropdownProps = PrimeDropdownProps;
-
-export const Dropdown = React.forwardRef<PrimeDropdown, DropdownProps>((props, ref) => {
-    // Force z-index on the dropdown panel to appear above dialogs
-    useOverlayZIndex('p-dropdown-panel');
-
-    return (
-        <PrimeDropdown
-            ref={ref}
-            {...props}
-            appendTo={props.appendTo ?? document.body}
-        />
-    );
-});
-
-Dropdown.displayName = 'Dropdown';

package/Dropdown/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 './Dropdown';

package/PivotViewer/PivotViewer.stories.tsx

@@ -1,24 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { PivotViewer } from './PivotViewer';
-
-const meta: Meta<typeof PivotViewer> = {
-    title: 'PivotViewer/PivotViewer',
-    component: PivotViewer,
-};
-
-export default meta;
-type Story = StoryObj<typeof PivotViewer>;
-
-export const Default: Story = {
-    args: {
-    },
-    render: (args) => (
-        <div className="storybook-wrapper" >
-            <PivotViewer {...args} data={[]} />
-        </div>
-    )
-};