@cratis/components 0.1.9 → 0.1.10

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