@gobolt/genesis 0.3.26 → 0.3.27

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

@@ -1,310 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { Badge } from "@gobolt/genesis/components";
-import React from "react";
-// Helper function for title case
-var startCase = function (string_) {
-    if (string_) {
-        return string_
-            .replaceAll(/([A-Z])/g, " $1")
-            .replace(/^./, function (s) { return s.toUpperCase(); });
-    }
-    return string_;
-};
-export var mockColumns = [
-    {
-        key: "number",
-        title: "Id",
-        dataIndex: "number",
-    },
-    {
-        key: "timeslot",
-        title: "Timeslot",
-        dataIndex: "timerange",
-    },
-    {
-        key: "status",
-        title: "Status",
-        dataIndex: "status",
-        render: function (status) {
-            var colorStateMap = {
-                in_progress: "warning",
-                scheduled: "generic",
-                completed: "success",
-            };
-            var statusLabel = status === "in_progress" ? "in progress" : status;
-            return React.createElement(Badge, {
-                label: startCase(statusLabel),
-                state: colorStateMap[status],
-            });
-        },
-    },
-    {
-        key: "address",
-        title: "Address",
-        render: function (appointment) {
-            var _a = appointment.address, nickname = _a.nickname, address = _a.address;
-            return nickname ? "".concat(nickname, " (").concat(address, ")") : address;
-        },
-    },
-    {
-        title: "Type",
-        dataIndex: "job_subtype",
-        render: function (jobSubtype) {
-            var 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 var mockColumnsWithSortDisabled = mockColumns.map(function (column) { return (__assign({}, column)); });
-export var 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/Table/__stories__/GenesisTable.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/Table/__stories__/GenesisTable.stories.js

@@ -1,23 +0,0 @@
-import description from "./GenesisTableDescription.md?raw";
-import Table from "../TablePagination";
-import { mockColumnsWithSortDisabled, mockDataSource, } from "../__mocks__/table-mocks";
-var meta = {
-    title: "Components/Table",
-    component: Table,
-    tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            description: {
-                component: description,
-            },
-        },
-    },
-};
-export default meta;
-export var Default = {
-    args: {
-        columns: mockColumnsWithSortDisabled,
-        dataSource: mockDataSource.appointments,
-    },
-};

package/dist/components/Table/__stories__/Table.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import TablePagination from "../TablePagination";
-declare const meta: Meta<typeof TablePagination>;
-export default meta;
-type Story = StoryObj<typeof TablePagination>;
-export declare const BulkCheckSelection: Story;
-export declare const RadioSelection: Story;
-export declare const MainContentCell: Story;

package/dist/components/Table/__stories__/Table.stories.js

@@ -1,188 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import description from "./TableDescription.md?raw";
-import Typography from "../../Typography";
-import TablePagination from "../TablePagination";
-import { http } from "msw";
-import { useTable } from "../useTable";
-import { mockColumnsWithSortDisabled, // import that we don't show the Ant Design sorting since it controlled via the table controls
-mockDataSource, } from "../__mocks__/table-mocks";
-var commonUseTableConfig = {
-    columns: mockColumnsWithSortDisabled,
-    filters: {},
-    fetchUrl: "/table/data",
-    fetchOptions: {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-            filters: {
-                order: "asc",
-                search: "",
-                page: 1,
-                per_page: 10,
-                sort: null,
-            },
-        }),
-    },
-    selectionType: "checkbox",
-    simulateDelay: 0,
-    disableRowSelection: function (record) { return ({
-        disabled: record.status === "completed", // Column configuration not to be checked
-        name: record.status.toString(),
-    }); },
-};
-var meta = {
-    component: TablePagination,
-    title: "Components/Table/Table",
-    tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            description: {
-                component: description,
-            },
-        },
-    },
-};
-export default meta;
-export var BulkCheckSelection = {
-    parameters: {
-        msw: {
-            enabled: true,
-            handlers: [
-                http.post("/table/data", function (_a) {
-                    var request = _a.request;
-                    return new Response(JSON.stringify({
-                        data: mockDataSource.appointments,
-                        pagination: {
-                            count: 2,
-                            page: 1,
-                            pages: 1,
-                            per_page: "ALL",
-                        },
-                        meta: {
-                            total_count: mockDataSource.appointments.length,
-                            page: 1,
-                            per_page: 10,
-                        },
-                    }), {
-                        status: 200,
-                        headers: { "Content-Type": "application/json" },
-                    });
-                }),
-            ],
-        },
-    },
-    render: function () {
-        var _a = useTable(commonUseTableConfig), dataSource = _a.dataSource, columns = _a.columns, selectedRows = _a.selectedRows, rowSelection = _a.rowSelection;
-        if (!dataSource)
-            return null;
-        useEffect(function () {
-            console.log("BulkCheckSelection - Selected Rows:", selectedRows);
-        }, [selectedRows]);
-        // handle changes from the table
-        var onTableChange = function (pagination, filters, sorter) {
-            console.log("Table changed:", pagination, filters, sorter);
-        };
-        return (_jsxs("div", { children: [_jsxs("div", { style: { margin: "26px 0px" }, children: [_jsx("div", { style: { margin: "16px 0px" }, children: _jsx(Typography, { variant: "heading3", children: "Table Example" }) }), _jsx(Typography, { variant: "body2", children: "Any rows with Completed status are disabled from selection" })] }), _jsx(TablePagination, { dataSource: dataSource, columns: columns, rowSelection: rowSelection, onChange: onTableChange })] }));
-    },
-};
-export var RadioSelection = {
-    parameters: {
-        msw: {
-            enabled: true,
-            handlers: [
-                http.post("/table/data", function (_a) {
-                    var request = _a.request;
-                    return new Response(JSON.stringify({
-                        data: mockDataSource.appointments,
-                        pagination: {
-                            count: 2,
-                            page: 1,
-                            pages: 1,
-                            per_page: "ALL",
-                        },
-                        meta: {
-                            total_count: mockDataSource.appointments.length,
-                            page: 1,
-                            per_page: 10,
-                        },
-                    }), {
-                        status: 200,
-                        headers: { "Content-Type": "application/json" },
-                    });
-                }),
-            ],
-        },
-    },
-    render: function () {
-        var useTableConfig = __assign(__assign({}, commonUseTableConfig), { selectionType: "radio" });
-        var _a = useTable(useTableConfig), dataSource = _a.dataSource, columns = _a.columns, rowSelection = _a.rowSelection, selectedRows = _a.selectedRows;
-        if (!dataSource)
-            return null;
-        // handle changes from the table
-        var onTableChange = function (pagination, filters, sorter) {
-            console.log("Table changed:", pagination, filters, sorter);
-        };
-        useEffect(function () {
-            console.log("RadioSelection - Selected Rows:", selectedRows);
-        }, [selectedRows]);
-        return (_jsxs("div", { children: [_jsxs("div", { style: { margin: "26px 0px" }, children: [_jsx("div", { style: { margin: "16px 0px" }, children: _jsx(Typography, { variant: "heading3", children: "Radio Selection Example" }) }), _jsx(Typography, { variant: "body2", children: "Any rows with Completed status have been disabled from selection via configuration." })] }), _jsx(TablePagination, { dataSource: dataSource, columns: columns, rowSelection: rowSelection, onChange: onTableChange })] }));
-    },
-};
-export var MainContentCell = {
-    parameters: {
-        msw: {
-            enabled: true,
-            handlers: [
-                http.post("/table/data", function (_a) {
-                    var request = _a.request;
-                    return new Response(JSON.stringify({
-                        data: mockDataSource.appointments,
-                        pagination: {
-                            count: 2,
-                            page: 1,
-                            pages: 1,
-                            per_page: "ALL",
-                        },
-                        meta: {
-                            total_count: mockDataSource.appointments.length,
-                            page: 1,
-                            per_page: 10,
-                        },
-                    }), {
-                        status: 200,
-                        headers: { "Content-Type": "application/json" },
-                    });
-                }),
-            ],
-        },
-    },
-    render: function () {
-        var useTableConfig = __assign(__assign({}, commonUseTableConfig), { selectionType: "radio" });
-        var _a = useTable(useTableConfig), dataSource = _a.dataSource, columns = _a.columns, rowSelection = _a.rowSelection, selectedRows = _a.selectedRows;
-        if (!dataSource)
-            return null;
-        // handle changes from the table
-        var onTableChange = function (pagination, filters, sorter) {
-            console.log("Table changed:", pagination, filters, sorter);
-        };
-        useEffect(function () {
-            console.log("RadioSelection - Selected Rows:", selectedRows);
-        }, [selectedRows]);
-        return (_jsxs("div", { children: [_jsxs("div", { style: { margin: "26px 0px" }, children: [_jsx("div", { style: { margin: "16px 0px" }, children: _jsx(Typography, { variant: "heading3", children: "Main Content Cell Example" }) }), _jsx(Typography, { variant: "body2", children: "In this example, the table cell typography is styled darker and larger than the default" })] }), _jsx(TablePagination, { dataSource: dataSource, columns: columns, rowSelection: rowSelection, onChange: onTableChange, isMainContentCell: true })] }));
-    },
-};

package/dist/components/Table/__tests__/table.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/Table/__tests__/table.test.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { screen, fireEvent } from "@testing-library/react";
-import { customRender } from "../../../test/setup";
-import { vi } from "vitest";
-import Table from "../Table";
-describe("Table component", function () {
-    var mockData = [
-        { id: 1, name: "John Doe", age: 30 },
-        { id: 2, name: "Jane Smith", age: 25 },
-        { id: 3, name: "Bob Johnson", age: 40 },
-    ];
-    var mockColumns = [
-        { title: "Name", dataIndex: "name", key: "name" },
-        { title: "Age", dataIndex: "age", key: "age" },
-    ];
-    it("renders correctly with data", function () {
-        customRender(_jsx(Table, { dataSource: mockData, columns: mockColumns }));
-        expect(screen.getByTestId("Table")).toBeInTheDocument();
-        expect(screen.getByText("John Doe")).toBeInTheDocument();
-        expect(screen.getByText("Jane Smith")).toBeInTheDocument();
-        expect(screen.getByText("Bob Johnson")).toBeInTheDocument();
-    });
-    it("displays empty state when no data is provided", function () {
-        customRender(_jsx(Table, { dataSource: [], columns: mockColumns }));
-        expect(screen.getByText("No Data")).toBeInTheDocument();
-    });
-    it("handles row selection correctly", function () {
-        var onSelectionChangeMock = vi.fn();
-        customRender(_jsx(Table, { dataSource: mockData, columns: mockColumns, rowSelection: {
-                type: "checkbox",
-                onChange: onSelectionChangeMock,
-            } }));
-        // Find and click checkbox
-        var checkboxes = screen.getAllByRole("checkbox");
-        fireEvent.click(checkboxes[1]); // Select the first row checkbox (index 0 is the header)
-        expect(onSelectionChangeMock).toHaveBeenCalled();
-    });
-    it("applies custom row key correctly", function () {
-        var customData = [
-            { key: "a", name: "John Doe", age: 30 },
-            { key: "b", name: "Jane Smith", age: 25 },
-        ];
-        customRender(_jsx(Table, { dataSource: customData, columns: mockColumns, rowKey: "key" }));
-        expect(screen.getByText("John Doe")).toBeInTheDocument();
-        expect(screen.getByText("Jane Smith")).toBeInTheDocument();
-    });
-});

package/dist/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/Table/styles.js

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