@gobolt/genesis 0.3.26 → 0.3.28

package/dist/components/TableWithControls/components/Table/TableControls/PrimaryTableControlsRow.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import UtilityButton from "../../UtilityButton";
-import IconButton from "../../Button/IconButton";
-import Select from "../../Select";
-import Typography from "../../Typography";
-import Input from "../../Input";
-import { HiMiniAdjustmentsVertical } from "react-icons/hi2";
-import { HiSearch } from "react-icons/hi";
-import { HiOutlineSortAscending, HiOutlineSortDescending, } from "react-icons/hi";
-import { FiSettings } from "react-icons/fi";
-const PrimaryTableControlsRow = ({ sortOptions, searchByPlaceholder = "", searchField = "address", isSortedAscending = true, searchValue = "", selectedSortOption = "", onChange, }) => {
-    const onInputChange = (actionEvent) => {
-        onChange?.({
-            event: "inputChange",
-            payload: actionEvent.payload,
-        });
-    };
-    const onSortChange = (value) => {
-        const sortActionEvent = {
-            event: "primarySortChange",
-            payload: { value },
-        };
-        onChange?.(sortActionEvent);
-    };
-    const onFilterClick = () => {
-        const filterActionEvent = {
-            event: "filterClick",
-            payload: {},
-        };
-        onChange?.(filterActionEvent);
-    };
-    const onSettingsClick = () => {
-        const settingsActionEvent = {
-            event: "settingsClick",
-            payload: {},
-        };
-        onChange?.(settingsActionEvent);
-    };
-    const onOrderClick = () => {
-        const ascendingActionEvent = {
-            event: "orderClick",
-            payload: {
-                value: isSortedAscending ? "desc" : "asc",
-            },
-        };
-        onChange?.(ascendingActionEvent);
-    };
-    return (_jsxs("div", { style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            width: "100%",
-            minWidth: 800,
-            marginBottom: 16,
-        }, children: [_jsxs("div", { style: { display: "flex" }, children: [_jsx(Input, { size: "normal", placeholder: searchByPlaceholder, prefix: _jsx(HiSearch, {}), style: {
-                            padding: "5px 8px",
-                        }, value: searchValue, onChange: onInputChange }), onFilterClick && (_jsx("div", { style: { marginLeft: 16 }, children: _jsx(UtilityButton, { isIconButton: true, icon: _jsx(HiMiniAdjustmentsVertical, { color: "#222222" }), onClick: onFilterClick }) })), onSettingsClick && (_jsx("div", { style: { marginLeft: 16 }, children: _jsx(UtilityButton, { isIconButton: true, icon: _jsx(FiSettings, { color: "#222222" }), onClick: onSettingsClick }) }))] }), _jsxs("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    width: 300,
-                    justifyContent: "flex-end",
-                    marginLeft: "auto",
-                }, children: [_jsx(Typography, { variant: "body1", color: "#6C6C6C", style: {
-                            width: 70,
-                            flexShrink: 0,
-                            textAlign: "right",
-                            paddingRight: 4,
-                            marginRight: 8,
-                        }, children: "Sort by" }), sortOptions && onSortChange ? (_jsx(Select, { options: sortOptions, defaultValue: sortOptions[0].value, value: selectedSortOption, variant: "simple", onChange: onSortChange, style: {
-                            width: 180,
-                            flexShrink: 0,
-                        } })) : null, _jsx("div", { style: {
-                            marginLeft: 8,
-                            flexShrink: 0,
-                        }, children: _jsx(IconButton, { icon: isSortedAscending ? (_jsx(HiOutlineSortDescending, { size: 20 })) : (_jsx(HiOutlineSortAscending, { size: 20 })), onClick: onOrderClick }) })] })] }));
-};
-export default PrimaryTableControlsRow;

package/dist/components/TableWithControls/components/Table/TableControls/SecondaryTableControlsRow.d.ts

@@ -1,11 +0,0 @@
-import type { Change } from "../Table";
-export type Groups = {
-    [key: string]: string[];
-};
-export interface SecondaryTableControlsRowProps {
-    groups: Groups | null;
-    totalRecords: number | null;
-    onChange?: Change;
-}
-declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
-export default SecondaryTableControlsRow;

package/dist/components/TableWithControls/components/Table/TableControls/SecondaryTableControlsRow.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Badge from "../../Badge";
-import Typography from "../../Typography";
-import Tooltip from "../../Tooltip";
-import { getIcon } from "../../../utils/icon-util";
-const GroupItem = ({ title, items, onGroupItemClick }) => {
-    if (items.length === 0)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { tip: title, children: _jsx("div", { style: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        width: 24,
-                        height: 24,
-                    }, children: getIcon(title) }) }), _jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => (_jsx(Badge, { label: item, hasClose: true, state: "generic", size: "small", onClick: () => onGroupItemClick(title, item) }, item.toString()))) })] }));
-};
-const GroupsRow = ({ groups, onGroupItemClick }) => {
-    if (!groups)
-        return null;
-    const groupArray = Object.entries(groups).map(([title, items]) => ({
-        title,
-        items,
-    }));
-    return (_jsx("div", { style: { display: "flex", gap: 4 }, children: groupArray.length > 0
-            ? groupArray.map((group) => (_jsx(GroupItem, { title: group.title, items: group.items, onGroupItemClick: onGroupItemClick }, group.title)))
-            : null }));
-};
-const SecondaryTableControlsRow = ({ groups, totalRecords, onChange, }) => {
-    const onGroupItemClick = (title, item) => {
-        const groupItemClickEvent = {
-            event: "groupItemClick",
-            payload: { title, item },
-        };
-        onChange?.(groupItemClickEvent);
-    };
-    return (_jsxs("div", { style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "flex-end",
-            marginTop: 8,
-        }, children: [_jsx(GroupsRow, { groups: groups, onGroupItemClick: onGroupItemClick }), totalRecords > 0 ? (_jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` })) : null] }));
-};
-export default SecondaryTableControlsRow;

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

@@ -1,14 +0,0 @@
-import type { PrimaryTableControlsRowProps } from "./PrimaryTableControlsRow";
-import type { SecondaryTableControlsRowProps } from "./SecondaryTableControlsRow";
-import type { ActionEvent, TableEventPayload } from "../../../types/events";
-export type TableControlsData = {
-    primaryTableRowData: PrimaryTableControlsRowProps;
-    secondaryTableRowData?: SecondaryTableControlsRowProps;
-};
-export interface TableControlsProps {
-    primaryTableRowData: PrimaryTableControlsRowProps;
-    secondaryTableRowData?: SecondaryTableControlsRowProps;
-    onChange: (event: ActionEvent<TableEventPayload>) => void;
-}
-declare const TableControls: ({ primaryTableRowData, secondaryTableRowData, onChange, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
-export default TableControls;

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

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import PrimaryTableControlsRow from "./PrimaryTableControlsRow";
-import SecondaryTableControlsRow from "./SecondaryTableControlsRow";
-const TableControls = ({ primaryTableRowData, secondaryTableRowData, onChange, }) => {
-    const onPrimaryChange = (actionEvent) => {
-        onChange(actionEvent);
-    };
-    const onSecondaryChange = (actionEvent) => {
-        onChange(actionEvent);
-    };
-    return (_jsxs("div", { "data-testid": "TableControls", style: { margin: "16px 0px" }, children: [_jsx(PrimaryTableControlsRow, { sortOptions: primaryTableRowData.sortOptions, searchByPlaceholder: primaryTableRowData.searchByPlaceholder, isSortedAscending: primaryTableRowData.isSortedAscending, onChange: onPrimaryChange, searchValue: primaryTableRowData.searchValue, selectedSortOption: primaryTableRowData.selectedSortOption }), secondaryTableRowData ? (_jsx(SecondaryTableControlsRow, { groups: secondaryTableRowData.groups, totalRecords: secondaryTableRowData.totalRecords, onChange: onSecondaryChange })) : null] }));
-};
-export default TableControls;

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

@@ -1,2 +0,0 @@
-export { default } from "./TableControls";
-export type { TableControlsProps } from "./TableControls";

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

@@ -1 +0,0 @@
-export { default } from "./TableControls";

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

@@ -1,13 +0,0 @@
-import { PaginationStyle } from "./TableControls/CustomPagination";
-import type { ColumnType } from "antd/es/table";
-export interface TablePaginationProps<T> {
-    columns: ColumnType<T>[];
-    dataSource: T[];
-    rowSelection?: any;
-    onChange?: (...arguments_: any[]) => void;
-    paginationStyle?: PaginationStyle;
-    pageSize?: number;
-    isMainContentCell?: boolean;
-}
-declare const TablePagination: <T extends Record<string, any>>({ columns, dataSource, rowSelection, onChange, paginationStyle, pageSize, isMainContentCell, }: TablePaginationProps<T>) => import("react/jsx-runtime").JSX.Element;
-export default TablePagination;

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

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import Table from "./Table";
-import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
-const TablePagination = ({ columns, dataSource, rowSelection, onChange, paginationStyle = PaginationStyle.SIMPLE, pageSize = 10, isMainContentCell, }) => {
-    const [current, setCurrent] = useState(1);
-    const total = dataSource.length;
-    const paginatedData = dataSource.slice((current - 1) * pageSize, current * pageSize);
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0px" }, children: [_jsx(Table, { columns: columns, dataSource: paginatedData, rowSelection: rowSelection, onChange: onChange, pagination: false, isMainContentCell: isMainContentCell }), _jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 16 }, children: _jsx(CustomPagination, { paginationStyle: paginationStyle, current: current, total: total, pageSize: pageSize, onChange: setCurrent }) })] }));
-};
-export default TablePagination;

package/dist/components/TableWithControls/components/Table/__mocks__/table-mocks.d.ts

@@ -1,20 +0,0 @@
-import { ColumnsType } from "antd/es/table";
-export interface AppointmentWithSimpleAddress {
-    id: string;
-    number: string;
-    timerange: string;
-    status: AppointmentStatus;
-    address: {
-        nickname: string;
-        address: string;
-    };
-    job_subtype: "delivery" | "pickup";
-}
-export interface MockDataSource {
-    appointments: AppointmentWithSimpleAddress[];
-}
-type AppointmentStatus = "scheduled" | "completed" | "cancelled" | "in_progress";
-export declare const mockColumns: ColumnsType<AppointmentWithSimpleAddress>;
-export declare const mockColumnsWithSortDisabled: ColumnsType<AppointmentWithSimpleAddress>;
-export declare const mockDataSource: MockDataSource;
-export {};

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

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

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

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

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

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

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

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