@gobolt/genesis 0.3.26 → 0.3.27

package/dist/components/Table/Table/Table.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as S from "./styles";
-import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
-function Table({ columns, dataSource, rowKey = "id", size = "small", onChange, rowSelection, pagination, isMainContentCell = false, ...rest }) {
-    const paginationConfig = pagination === false
-        ? false
-        : {
-            ...pagination,
-            itemRender: undefined, // Clear any existing itemRender to avoid conflicts
-            render: (properties) => (_jsx(CustomPagination, { ...properties, paginationStyle: pagination?.paginationStyle || PaginationStyle.SIMPLE })),
-        };
-    return (_jsx(S.Table, { "data-testid": "Table", dataSource: dataSource, columns: columns, rowKey: rowKey, locale: { emptyText: "No Data" }, size: size, onChange: onChange, rowSelection: rowSelection, pagination: paginationConfig, "$isMainContentCell": isMainContentCell, ...rest }));
-}
-export default Table;

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

@@ -1,13 +0,0 @@
-import React from "react";
-import type { PaginationProps } from "antd";
-export declare enum PaginationStyle {
-    SIMPLE = "simple",// Shows just 1-5
-    TRUNCATED = "truncated",// Shows 1-5...20
-    CENTERED = "centered",// Shows 1...4-5-6-7-8...20
-    END_FOCUSED = "endFocused"
-}
-interface CustomPaginationProperties extends Omit<PaginationProps, "itemRender"> {
-    paginationStyle?: PaginationStyle;
-}
-declare const CustomPagination: React.FC<CustomPaginationProperties>;
-export default CustomPagination;

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

@@ -1,158 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from "styled-components";
-import { PaginationNumber } from "./PaginationNumber";
-export var PaginationStyle;
-(function (PaginationStyle) {
-    PaginationStyle["SIMPLE"] = "simple";
-    PaginationStyle["TRUNCATED"] = "truncated";
-    PaginationStyle["CENTERED"] = "centered";
-    PaginationStyle["END_FOCUSED"] = "endFocused";
-})(PaginationStyle || (PaginationStyle = {}));
-const PaginationContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin: 0;
-  gap: 0 0;
-`;
-const ChevronButton = styled.button `
-  background: transparent;
-  border: none;
-  color: ${({ theme, disabled }) => disabled ? theme.colors.onsurface["copy-light"] || "#B0B0B0" : "#222"};
-  font-size: 32px;
-  height: 40px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
-  margin-right: ${({ $right }) => ($right ? "0" : "8px")};
-  margin-left: ${({ $right }) => ($right ? "8px" : "0")};
-  transition: color 0.2s;
-`;
-const ChevronIcon = ({ left = false }) => (_jsx("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: left ? "M17.5 21L11.5 14L17.5 7" : "M10.5 7L16.5 14L10.5 21", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const getSimplePages = (current, total) => {
-    // Always show 1-5, but don't exceed total
-    const pages = [];
-    for (let index = 1; index <= Math.min(5, total); index++) {
-        pages.push(index);
-    }
-    return pages;
-};
-const CustomPagination = ({ paginationStyle = PaginationStyle.SIMPLE, current = 1, total = 1, pageSize = 10, onChange, ...properties }) => {
-    const pageCount = Math.ceil(total / pageSize);
-    const handleChange = (page) => {
-        if (onChange)
-            onChange(page, pageSize);
-    };
-    if (paginationStyle === PaginationStyle.SIMPLE) {
-        const pages = getSimplePages(current, pageCount);
-        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_) => (_jsx(PaginationNumber, { active: number_ === current, onClick: () => handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_))), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
-    }
-    if (paginationStyle === PaginationStyle.TRUNCATED) {
-        // Show 1 2 3 4 5 ... last
-        const pages = [];
-        for (let index = 1; index <= Math.min(5, pageCount); index++) {
-            pages.push(index);
-        }
-        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_) => (_jsx(PaginationNumber, { active: number_ === current, onClick: () => handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_))), pageCount > 5 && (_jsxs(_Fragment, { children: [_jsx("span", { style: {
-                                color: "#7F7F7F",
-                                fontWeight: 600,
-                                fontSize: 16,
-                                margin: "0 8px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                paddingBottom: 10,
-                            }, children: "..." }), _jsx(PaginationNumber, { active: current === pageCount, onClick: () => handleChange(pageCount), "aria-label": `Page ${pageCount}`, children: pageCount }, pageCount)] })), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
-    }
-    if (paginationStyle === PaginationStyle.CENTERED) {
-        // Show 1 ... left mid mid mid mid ... last
-        // Always show 5 numbers, current centered if possible
-        const pages = [];
-        const visibleCount = 5;
-        const sideCount = 2; // numbers to show on each side of current
-        let start = Math.max(2, current - 2);
-        let end = Math.min(pageCount - 1, current + 2);
-        // Adjust if near the start
-        if (current <= 3) {
-            start = 2;
-            end = 6;
-        }
-        // Adjust if near the end
-        if (current >= pageCount - 2) {
-            start = pageCount - 4;
-            end = pageCount - 1;
-        }
-        start = Math.max(2, start);
-        end = Math.min(pageCount - 1, end);
-        // Always show first page
-        pages.push(1);
-        // Show left ellipsis if needed
-        if (start > 2) {
-            pages.push("left-ellipsis");
-        }
-        // Show middle pages
-        for (let index = start; index <= end; index++) {
-            pages.push(index);
-        }
-        // Show right ellipsis if needed
-        if (end < pageCount - 1) {
-            pages.push("right-ellipsis");
-        }
-        // Always show last page if more than 1
-        if (pageCount > 1) {
-            pages.push(pageCount);
-        }
-        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_, index) => {
-                    if (number_ === "left-ellipsis" || number_ === "right-ellipsis") {
-                        return (_jsx("span", { style: {
-                                color: "#7F7F7FB0",
-                                fontWeight: 600,
-                                fontSize: 16,
-                                margin: "0 8px",
-                                height: "40px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                paddingBottom: 10,
-                            }, children: "..." }, number_ + index));
-                    }
-                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: () => typeof number_ === "number" && handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_));
-                }), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
-    }
-    if (paginationStyle === PaginationStyle.END_FOCUSED) {
-        // Show 1 ... last 5 pages
-        const pages = [];
-        // Always show first page
-        pages.push(1);
-        // If more than 6 pages, show ellipsis
-        if (pageCount > 6) {
-            pages.push("left-ellipsis");
-        }
-        // Show last 5 pages
-        const start = Math.max(2, pageCount - 4);
-        for (let index = start; index <= pageCount; index++) {
-            pages.push(index);
-        }
-        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_, index) => {
-                    if (number_ === "left-ellipsis") {
-                        return (_jsx("span", { style: {
-                                color: "#7F7F7F",
-                                fontWeight: 600,
-                                fontSize: 18,
-                                margin: "0 8px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                height: "40px",
-                                paddingBottom: 10,
-                            }, children: "..." }, number_ + index));
-                    }
-                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: () => typeof number_ === "number" && handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_));
-                }), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
-    }
-    // Fallback for other styles (not implemented yet)
-    return null;
-};
-export default CustomPagination;

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

@@ -1,7 +0,0 @@
-import React from "react";
-interface PaginationNumberProperties extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    active?: boolean;
-    children: React.ReactNode;
-}
-export declare const PaginationNumber: React.FC<PaginationNumberProperties>;
-export {};

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-import Typography from "../../Typography";
-const NumberButton = styled.button `
-  background: ${({ $active, theme }) => $active ? theme.colors.primary.default.backgroundColor : "transparent"};
-  color: ${({ $active, theme }) => $active ? "#fff" : theme.colors.onsurface["copy-light"] || "#6C6C6C"};
-  border: none;
-  border-radius: 4px;
-  min-width: 24px;
-  height: 24px;
-  padding: 4px 7px;
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0 4px;
-  cursor: pointer;
-  transition: background 0.2s, color 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: inherit;
-  white-space: nowrap;
-
-  &:hover {
-    background: ${({ $active, theme }) => $active
-    ? theme.colors.primary.default.backgroundColor
-    : theme.colors.primary.default.backgroundColor + "22"};
-    color: #fff;
-  }
-`;
-export const PaginationNumber = ({ active, children, ...properties }) => (_jsx(NumberButton, { "$active": active, "aria-current": active ? "page" : undefined, ...properties, children: _jsx(Typography, { variant: "digits3", color: active ? "white" : "#6C6C6C", children: children }) }));

package/dist/components/Table/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/Table/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/Table/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;
-};

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

@@ -1,141 +0,0 @@
-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/Table/Table.js

@@ -1,33 +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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as S from "./styles";
-import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
-function Table(_a) {
-    var columns = _a.columns, dataSource = _a.dataSource, _b = _a.rowKey, rowKey = _b === void 0 ? "id" : _b, _c = _a.size, size = _c === void 0 ? "small" : _c, onChange = _a.onChange, rowSelection = _a.rowSelection, pagination = _a.pagination, _d = _a.isMainContentCell, isMainContentCell = _d === void 0 ? false : _d, rest = __rest(_a, ["columns", "dataSource", "rowKey", "size", "onChange", "rowSelection", "pagination", "isMainContentCell"]);
-    var paginationConfig = pagination === false
-        ? false
-        : __assign(__assign({}, pagination), { itemRender: undefined, render: function (properties) { return (_jsx(CustomPagination, __assign({}, properties, { paginationStyle: (pagination === null || pagination === void 0 ? void 0 : pagination.paginationStyle) || PaginationStyle.SIMPLE }))); } });
-    return (_jsx(S.Table, __assign({ "data-testid": "Table", dataSource: dataSource, columns: columns, rowKey: rowKey, locale: { emptyText: "No Data" }, size: size, onChange: onChange, rowSelection: rowSelection, pagination: paginationConfig, "$isMainContentCell": isMainContentCell }, rest)));
-}
-export default Table;