@gobolt/genesis 0.3.21 → 0.3.23

package/dist/components/TableWithControls/components/Table/__mocks__/table-mocks.js

@@ -0,0 +1,301 @@
+import { Badge } from "@gobolt/genesis/components";
+import React from "react";
+// Helper function for title case
+const startCase = (string_) => {
+    if (string_) {
+        return string_
+            .replaceAll(/([A-Z])/g, " $1")
+            .replace(/^./, (s) => s.toUpperCase());
+    }
+    return string_;
+};
+export const mockColumns = [
+    {
+        key: "number",
+        title: "Id",
+        dataIndex: "number",
+    },
+    {
+        key: "timeslot",
+        title: "Timeslot",
+        dataIndex: "timerange",
+    },
+    {
+        key: "status",
+        title: "Status",
+        dataIndex: "status",
+        render: (status) => {
+            const colorStateMap = {
+                in_progress: "warning",
+                scheduled: "generic",
+                completed: "success",
+            };
+            const statusLabel = status === "in_progress" ? "in progress" : status;
+            return React.createElement(Badge, {
+                label: startCase(statusLabel),
+                state: colorStateMap[status],
+            });
+        },
+    },
+    {
+        key: "address",
+        title: "Address",
+        render: (appointment) => {
+            const { address: { nickname, address }, } = appointment;
+            return nickname ? `${nickname} (${address})` : address;
+        },
+    },
+    {
+        title: "Type",
+        dataIndex: "job_subtype",
+        render: (jobSubtype) => {
+            const colorStateMap = {
+                delivery: "info",
+                pickup: "success",
+            };
+            return React.createElement(Badge, {
+                label: startCase(jobSubtype),
+                state: colorStateMap[jobSubtype],
+            });
+        },
+    },
+];
+// Note: it's important that we don't show the Ant Design sorting since it controlled via the table controls
+export const mockColumnsWithSortDisabled = mockColumns.map((column) => ({
+    ...column,
+}));
+export const mockDataSource = {
+    appointments: [
+        {
+            id: "1",
+            number: "1",
+            timerange: "9:00 AM - 10:00 AM",
+            status: "in_progress",
+            address: {
+                nickname: "Home",
+                address: "123 Main St",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "2",
+            number: "2",
+            timerange: "10:00 AM - 11:00 AM",
+            status: "scheduled",
+            address: {
+                nickname: "Work",
+                address: "456 Elm St",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "3",
+            number: "3",
+            timerange: "11:00 AM - 12:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Store",
+                address: "789 Oak St",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "4",
+            number: "4",
+            timerange: "1:00 PM - 2:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Office",
+                address: "321 Pine St",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "5",
+            number: "5",
+            timerange: "2:00 PM - 3:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Library",
+                address: "555 Book Lane",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "6",
+            number: "6",
+            timerange: "3:00 PM - 4:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Gym",
+                address: "777 Fitness Ave",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "7",
+            number: "7",
+            timerange: "4:00 PM - 5:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Mall",
+                address: "888 Shopping Center",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "8",
+            number: "8",
+            timerange: "9:00 AM - 10:00 AM",
+            status: "completed",
+            address: {
+                nickname: "School",
+                address: "999 Education Rd",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "9",
+            number: "9",
+            timerange: "10:00 AM - 11:00 AM",
+            status: "scheduled",
+            address: {
+                nickname: "Restaurant",
+                address: "111 Food Court",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "10",
+            number: "10",
+            timerange: "11:00 AM - 12:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Park",
+                address: "222 Green Ave",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "11",
+            number: "11",
+            timerange: "1:00 PM - 2:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Beach",
+                address: "333 Shore Dr",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "12",
+            number: "12",
+            timerange: "2:00 PM - 3:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Hotel",
+                address: "444 Stay Blvd",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "13",
+            number: "13",
+            timerange: "3:00 PM - 4:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Airport",
+                address: "666 Flight Way",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "14",
+            number: "14",
+            timerange: "4:00 PM - 5:00 PM",
+            status: "cancelled",
+            address: {
+                nickname: "Stadium",
+                address: "777 Sports Complex",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "15",
+            number: "15",
+            timerange: "9:00 AM - 10:00 AM",
+            status: "scheduled",
+            address: {
+                nickname: "Theater",
+                address: "888 Show Ave",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "16",
+            number: "16",
+            timerange: "10:00 AM - 11:00 AM",
+            status: "scheduled",
+            address: {
+                nickname: "Museum",
+                address: "999 History Lane",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "17",
+            number: "17",
+            timerange: "11:00 AM - 12:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Zoo",
+                address: "123 Animal Park",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "18",
+            number: "18",
+            timerange: "1:00 PM - 2:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Bank",
+                address: "456 Money St",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "19",
+            number: "19",
+            timerange: "2:00 PM - 3:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Post Office",
+                address: "789 Mail Road",
+            },
+            job_subtype: "delivery",
+        },
+        {
+            id: "20",
+            number: "20",
+            timerange: "3:00 PM - 4:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Church",
+                address: "321 Faith Street",
+            },
+            job_subtype: "pickup",
+        },
+        {
+            id: "21",
+            number: "21",
+            timerange: "4:00 PM - 5:00 PM",
+            status: "scheduled",
+            address: {
+                nickname: "Pharmacy",
+                address: "654 Health Ave",
+            },
+            job_subtype: "delivery",
+        },
+    ],
+};

package/dist/components/TableWithControls/components/Table/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from "./TablePagination";
+export { default as Table } from "./Table";
+export type { TableProps } from "./Table";
+export type { TablePaginationProps } from "./TablePagination";
+export { useTable } from "./useTable";
+export type { UseTableConfig } from "./useTable";

package/dist/components/TableWithControls/components/Table/index.js

@@ -0,0 +1,3 @@
+export { default } from "./TablePagination";
+export { default as Table } from "./Table";
+export { useTable } from "./useTable";

package/dist/components/TableWithControls/components/Table/styles.d.ts

@@ -0,0 +1,14 @@
+import { TableProps } from "antd";
+import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
+export interface StyledTableProps<T = any> extends TableProps<T> {
+    theme?: GenesisTheme;
+    $isMainContentCell?: boolean;
+}
+export declare const getGenesisClass: ({ colors, borderRadius, sizing, typography, components }: {
+    colors: any;
+    borderRadius: any;
+    sizing: any;
+    typography: any;
+    components: any;
+}, $isMainContentCell: any) => string;
+export declare const Table: any;

package/dist/components/TableWithControls/components/Table/styles.js

@@ -0,0 +1,64 @@
+import styled from "@gobolt/genesis/utils/styled";
+import { Table as AntTable } from "antd";
+export const getGenesisClass = ({ colors, borderRadius, sizing, typography, components }, $isMainContentCell) => {
+    // Log the hovered color and the entire tableCell object
+    return `
+    &.ant-table-wrapper {
+      // Add your custom styles here
+    }
+
+    .ant-table {
+      // Add your custom table styles here
+    }
+
+    .ant-table-cell {
+      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
+      color: ${$isMainContentCell
+        ? colors.onsurface.copy
+        : colors.onsurface["copy-light"]} !important;
+      background-color: ${components.tableCell.surface} !important;
+      transition: background-color 0.2s ease;
+    }
+
+    .ant-table-tbody > tr:hover > td,
+    .ant-table-tbody > tr:hover > .ant-table-cell {
+      background-color: ${components.tableCell.hover} !important;
+    }
+
+    .ant-table-cell-selected {
+      background-color: ${components.tableCell.selected} !important;
+    }
+
+    .ant-table-thead > tr > th {
+      // Add your custom header styles here
+      font-family: 'Inter', sans-serif;
+      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
+      font-weight: 400;
+      color: ${$isMainContentCell
+        ? colors.onsurface.copy
+        : colors.onsurface["copy-light"]} !important;
+    }
+
+    .ant-table-tbody > tr  {
+      // Add your custom row styles here
+    }
+
+    .ant-table-tbody > tr > td {
+      // Add your custom cell styles here
+      font-family: 'Inter', sans-serif;
+      font-size: 14px;
+      color: ${colors.onsurface["copy-light"]};
+    }
+
+    .ant-table-tbody > tr.ant-table-row-selected > td,
+    .ant-table-tbody > tr.ant-table-row-selected > .ant-table-cell {
+      background-color: ${components.tableCell.selected} !important;
+      color: #fff !important;
+    }
+  `;
+};
+export const Table = styled(AntTable) `
+  ${({ theme, $isMainContentCell }) => {
+    return getGenesisClass(theme, $isMainContentCell);
+}}
+`;

package/dist/components/TableWithControls/components/Table/useTable.d.ts

@@ -0,0 +1,26 @@
+import type { ColumnsType } from "antd/es/table";
+import type { SelectionType } from "./Table";
+export type UseTableConfig = {
+    columns: ColumnsType<any>;
+    filters?: Record<string, any>;
+    fetchUrl?: string;
+    fetchOptions?: RequestInit;
+    selectionType?: SelectionType;
+    simulateDelay?: number;
+    disableRowSelection?: (record: any) => unknown;
+    disableAutoFetch?: boolean;
+    dataSource?: any[];
+};
+export declare const useTable: <T extends Record<string, any>>(useTableConfig: any) => {
+    isLoading: boolean;
+    rowSelection: {
+        type: SelectionType;
+        onChange: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+        getCheckboxProps: (record: any) => unknown;
+    };
+    selectedRows: T[];
+    updateDataSource: (newDataSource: T[]) => void;
+    dataSource: T[];
+    columns: ColumnsType<T>;
+    error: Error | null;
+};

package/dist/components/TableWithControls/components/Table/useTable.js

@@ -0,0 +1,141 @@
+import { useState, useEffect, useCallback } from "react";
+// Function to sort data by field and order
+const sortData = (data, sorter) => {
+    // Handle case when no sorting is applied
+    if (!sorter || (Array.isArray(sorter) && sorter.length === 0)) {
+        return [...data];
+    }
+    // Handle multiple sorters
+    if (Array.isArray(sorter)) {
+        return [...data].sort((a, b) => {
+            for (const sort of sorter) {
+                if (!sort.field)
+                    continue;
+                const field = sort.field;
+                const aValue = a[field];
+                const bValue = b[field];
+                if (aValue < bValue)
+                    return sort.order === "ascend" ? -1 : 1;
+                if (aValue > bValue)
+                    return sort.order === "ascend" ? 1 : -1;
+            }
+            return 0;
+        });
+    }
+    // Handle single sorter
+    if (sorter.field) {
+        const field = sorter.field;
+        return [...data].sort((a, b) => {
+            const aValue = a[field];
+            const bValue = b[field];
+            if (sorter.order === "ascend") {
+                if (aValue < bValue)
+                    return -1;
+                if (aValue > bValue)
+                    return 1;
+                return 0;
+            }
+            if (sorter.order === "descend") {
+                if (aValue < bValue)
+                    return 1;
+                if (aValue > bValue)
+                    return -1;
+                return 0;
+            }
+            return 0;
+        });
+    }
+    return [...data];
+};
+/*
+Example of disableRowSelection function which can be passed to the useTable hook
+const disableRowSelection = (record: any) => ({
+      disabled: record.status === "completed", // Column configuration not to be checked
+      name: record.status.toString(),
+});
+*/
+const defaultRowSelection = (record) => ({
+    disabled: false, // Add your disable logic here
+    name: record.id,
+});
+export const useTable = (useTableConfig) => {
+    const [isLoading, setLoading] = useState(true);
+    const { columns, filters = null, fetchUrl = "/table/data", fetchOptions = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(filters),
+    }, selectionType = "checkbox", simulateDelay = 0, disableRowSelection = defaultRowSelection, disableAutoFetch = false, dataSource: initialDataSource = [], } = useTableConfig;
+    // State to hold the original data and the current data
+    const [originalData, setOriginalData] = useState(initialDataSource);
+    const [data, setData] = useState({
+        dataSource: initialDataSource,
+        columns,
+        error: null,
+    });
+    const [selectedRows, setSelectedRows] = useState([]);
+    // Load initial data
+    useEffect(() => {
+        // If auto-fetch is disabled and we have initial data, skip fetching
+        if (disableAutoFetch && initialDataSource.length > 0) {
+            setLoading(false);
+            return;
+        }
+        const fetchData = async () => {
+            try {
+                const response = await fetch(fetchUrl, fetchOptions);
+                const result = await response.json();
+                const sourceData = result.data || [];
+                setOriginalData(sourceData);
+                setData({
+                    dataSource: sourceData,
+                    columns,
+                    error: null,
+                });
+            }
+            catch (error) {
+                console.error("Error fetching table data:", error);
+                // Fallback to static data
+                setData({
+                    dataSource: [],
+                    columns,
+                    error: error instanceof Error ? error : new Error(String(error)),
+                });
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        if (simulateDelay > 0) {
+            setTimeout(fetchData, simulateDelay);
+        }
+        else {
+            fetchData();
+        }
+    }, [fetchOptions, disableAutoFetch, initialDataSource]);
+    const handleRowSelection = useCallback((selectedRowKeys, selectedRows) => {
+        console.log("Row Selected:", selectedRowKeys, selectedRows);
+        setSelectedRows(selectedRows);
+    }, []);
+    // Function to manually update data source (for external data fetching)
+    const updateDataSource = useCallback((newDataSource) => {
+        setOriginalData(newDataSource);
+        setData((prev) => ({
+            ...prev,
+            dataSource: newDataSource,
+        }));
+    }, []);
+    const rowSelection = {
+        type: selectionType,
+        onChange: handleRowSelection,
+        getCheckboxProps: disableRowSelection,
+    };
+    return {
+        ...data,
+        isLoading,
+        rowSelection,
+        selectedRows,
+        updateDataSource,
+    };
+};

package/dist/components/TableWithControls/components/TableWithControls/TableWithControls.d.ts

@@ -0,0 +1,12 @@
+import type { TableProps } from "../Table";
+import { type TableControlsData } from "../Table/TableControls/TableControls";
+export interface TableWithControlsProps {
+    tableControlsData: TableControlsData;
+    tableData: TableProps<Record<string, any>>;
+    onChange: (event: {
+        event: string;
+        payload: any;
+    }) => void;
+}
+declare const TableWithControls: ({ tableData, tableControlsData, onChange, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default TableWithControls;

package/dist/components/TableWithControls/components/TableWithControls/TableWithControls.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import TableControls from "../Table/TableControls";
+import Table from "../Table";
+const TableWithControls = ({ tableData, tableControlsData, onChange, }) => {
+    const { primaryTableRowData, secondaryTableRowData } = tableControlsData;
+    const { dataSource, columns, rowSelection } = tableData;
+    // handle changes from the table controls
+    const onTableControlsChange = (event) => {
+        onChange(event);
+    };
+    // handle changes from the table
+    const onTableChange = (pagination, filters, sorter) => {
+        onChange({
+            event: "tableChange",
+            payload: { pagination, filters, sorter },
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TableControls, { primaryTableRowData: primaryTableRowData, secondaryTableRowData: secondaryTableRowData, onChange: onTableControlsChange }), _jsx(Table, { dataSource: dataSource, columns: columns, rowSelection: rowSelection, onChange: onTableChange })] }));
+};
+export default TableWithControls;

package/dist/components/TableWithControls/components/TableWithControls/useTableWithControls.d.ts

@@ -0,0 +1,29 @@
+import { type UseTableConfig } from "../Table/useTable";
+import { ActionEvent, TableEventPayload } from "../../types/events";
+export declare const useTableWithControls: (tableConfig: UseTableConfig) => {
+    onChange: (actionEvent: ActionEvent<TableEventPayload>) => void;
+    primaryTableRowData: {
+        sortOptions: {
+            value: string;
+            label: import("react/jsx-runtime").JSX.Element;
+        }[];
+        searchByPlaceholder: string;
+        isSortedAscending: boolean;
+    };
+    secondaryTableRowData: {
+        groups: {
+            orders: string[];
+            warehouse: string[];
+            availability: string[];
+        };
+        totalRecords: number;
+    };
+    dataSource: Record<string, any>[];
+    columns: import("antd").TableColumnsType<Record<string, any>>;
+    rowSelection: {
+        type: import("../Table/Table").SelectionType;
+        onChange: (selectedRowKeys: React.Key[], selectedRows: Record<string, any>[]) => void;
+        getCheckboxProps: (record: any) => unknown;
+    };
+    updateDataSource: (newDataSource: Record<string, any>[]) => void;
+};