@cratis/components 0.1.9

package/DataTables/DataTableForObservableQuery.tsx

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

@@ -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 './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

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

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

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

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

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

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

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

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

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

package/PivotViewer/PivotViewer.stories.tsx

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