@gobolt/genesis 0.3.26 → 0.3.28

package/dist/components/TableWithControls/components/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/TableWithControls/components/TableWithControls/TableWithControls.d.ts

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

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

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

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

@@ -1,136 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { useTable } from "../Table/useTable";
-import { mockColumns, mockDataSource } from "../Table/__mocks__/table-mocks";
-//import
-const tableControlsData = {
-    primaryTableRowData: {
-        sortOptions: [
-            { value: "status", label: _jsx("span", { children: "Status" }) },
-            { value: "address", label: _jsx("span", { children: "Address" }) },
-            { value: "job_subtype", label: _jsx("span", { children: "Type" }) },
-        ],
-        searchByPlaceholder: "Search by Address",
-        isSortedAscending: true,
-    },
-    secondaryTableRowData: {
-        groups: {
-            orders: ["Cancelled", "Paused"],
-            warehouse: ["D2C"],
-            availability: ["Out of Stock"],
-        },
-        totalRecords: mockDataSource.appointments.length,
-    },
-};
-const startingUseTableConfig = {
-    columns: mockColumns,
-    filters: {
-        order: "asc",
-    },
-    // Disable auto-fetch to allow external data management
-    disableAutoFetch: true,
-    dataSource: [],
-};
-export const useTableWithControls = (tableConfig) => {
-    const [useTableConfig, setUseTableConfig] = useState(startingUseTableConfig);
-    const [groups, setGroups] = useState(tableControlsData.secondaryTableRowData.groups);
-    const [primaryTableRowData, setPrimaryTableRowData] = useState(tableControlsData.primaryTableRowData);
-    const { secondaryTableRowData } = tableControlsData;
-    const newSecondaryTableRowData = {
-        ...secondaryTableRowData,
-        groups,
-        totalRecords: safeDataSource.length,
-    };
-    const { dataSource, columns, rowSelection, updateDataSource } = useTable(useTableConfig);
-    // Ensure we always return a valid object, even if dataSource is empty
-    const safeDataSource = dataSource || [];
-    const onGroupItemClick = (title, item) => {
-        const newGroups = { ...groups };
-        newGroups[title] = newGroups[title].filter((group) => group !== item);
-        setGroups(newGroups);
-    };
-    const onChange = (actionEvent) => {
-        if (actionEvent.event === "inputChange") {
-            const { value } = actionEvent.payload;
-            if (typeof value === "string") {
-                setUseTableConfig((previous) => ({
-                    ...previous,
-                    filters: {
-                        ...previous.filters,
-                        search: value,
-                    },
-                    fetchOptions: {
-                        ...previous.fetchOptions,
-                        body: JSON.stringify({
-                            filters: {
-                                ...previous.filters,
-                                search: value,
-                            },
-                        }),
-                    },
-                }));
-            }
-        }
-        if (actionEvent.event === "primaryChange") {
-            const { value } = actionEvent.payload;
-            if (typeof value === "string") {
-                setUseTableConfig((previous) => ({
-                    ...previous,
-                    filters: {
-                        ...previous.filters,
-                        sort: value,
-                    },
-                    fetchOptions: {
-                        ...previous.fetchOptions,
-                        body: JSON.stringify({
-                            filters: {
-                                ...previous.filters,
-                                sort: value,
-                            },
-                        }),
-                    },
-                }));
-            }
-        }
-        if (actionEvent.event === "groupItemClick") {
-            const { title, item } = actionEvent.payload;
-            if (typeof title === "string" && typeof item === "string") {
-                onGroupItemClick(title, item);
-            }
-        }
-        if (actionEvent.event === "orderClick") {
-            setPrimaryTableRowData((previous) => ({
-                ...previous,
-                isSortedAscending: !previous.isSortedAscending,
-            }));
-            const { value } = actionEvent.payload;
-            if (typeof value === "string") {
-                setUseTableConfig((previous) => ({
-                    ...previous,
-                    filters: {
-                        ...previous.filters,
-                        order: value,
-                    },
-                    fetchOptions: {
-                        ...previous.fetchOptions,
-                        body: JSON.stringify({
-                            filters: {
-                                ...previous.filters,
-                                order: value,
-                            },
-                        }),
-                    },
-                }));
-            }
-        }
-    };
-    return {
-        onChange,
-        primaryTableRowData,
-        secondaryTableRowData: newSecondaryTableRowData,
-        dataSource: safeDataSource,
-        columns,
-        rowSelection,
-        updateDataSource,
-    };
-};

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

@@ -1,7 +0,0 @@
-export interface TooltipProps {
-    tip: string;
-    placement?: "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
-    children?: React.ReactNode;
-}
-declare const Tooltip: ({ tip, children }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
-export default Tooltip;

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as S from "./styles";
-import { Typography } from "@gobolt/genesis/components";
-import { TYPOGRAPHY_VARIANT } from "@gobolt/genesis/constants";
-const Tooltip = ({ tip = "", children }) => {
-    return (_jsx(S.Tooltip, { "data-testid": "Tooltip", placement: "top", title: _jsx("div", { style: { marginTop: 2 }, children: _jsx(Typography, { variant: TYPOGRAPHY_VARIANT.body2, color: "white", children: tip }) }), children: children }));
-};
-export default Tooltip;

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

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

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

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

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

@@ -1,26 +0,0 @@
-import styled from "@gobolt/genesis/utils/styled";
-import { Tooltip as AntTooltip } from "antd";
-export const getGenesisClass = ({ colors, borderRadius, sizing }, type = "primary", state = "active") => `
-  .ant-tooltip {
-    --antd-arrow-background-color: ${colors.surface.dark};
-  }
-
-  .ant-tooltip-inner {
-    background-color: ${colors.surface.dark};
-    border-radius: ${borderRadius.sm};
-    padding: ${sizing.xs} ${sizing.sm};
-    font-size: 14px;
-    line-height: 20px;
-    color: ${colors.onsurface.white};
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
-  .ant-tooltip-arrow-content {
-    background-color: ${colors.surface.dark};
-  }
-`;
-export const Tooltip = styled(AntTooltip) `
-  ${({ theme, type, state }) => {
-    return getGenesisClass(theme, type, state);
-}}
-`;

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

@@ -1,17 +0,0 @@
-import React, { CSSProperties } from "react";
-import { TYPE, TYPOGRAPHY_VARIANT, STATE } from "@gobolt/genesis/constants";
-type HeadingLevel = 1 | 2 | 3 | 4 | 5;
-export interface TypographyProps {
-    children: React.ReactNode;
-    variant?: keyof typeof TYPOGRAPHY_VARIANT;
-    themeType?: keyof typeof TYPE;
-    state?: keyof typeof STATE;
-    color?: string;
-    level?: HeadingLevel;
-    isText?: boolean;
-    isFullWidth?: boolean;
-    style?: CSSProperties;
-    isDisabled?: boolean;
-}
-declare const Typography: ({ children, themeType, variant, state, color, isText, isFullWidth, style, isDisabled, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
-export default Typography;

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

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as S from "./styles";
-import { useGenesis } from "@gobolt/genesis/providers";
-import { TYPE, TYPOGRAPHY_VARIANT, STATE, } from "@gobolt/genesis/constants";
-const Typography = ({ children, themeType = TYPE.secondary, variant = TYPOGRAPHY_VARIANT.body1, state = STATE.active, color, isText = false, isFullWidth, style, isDisabled, ...rest }) => {
-    const { breakpoint } = useGenesis();
-    if (variant.startsWith("display") || variant.startsWith("heading")) {
-        const level = variant.split("heading")[1] || variant.split("display")[1];
-        return (_jsx(S.Headline, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, level: Number.parseInt(level), "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
-    }
-    if (isText) {
-        return (_jsx(S.Text, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
-    }
-    return (_jsx(S.Paragraph, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
-};
-export default Typography;

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

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

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

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

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

@@ -1,3 +0,0 @@
-export declare const Headline: any;
-export declare const Paragraph: any;
-export declare const Text: any;

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

@@ -1,54 +0,0 @@
-import styled from "@gobolt/genesis/utils/styled";
-import { Typography as AntTypography } from "antd";
-const getVariant = (typography, variant, breakpoint) => {
-    return `
-        font-size: ${typography[breakpoint][variant].fontSize}px !important;
-        line-height: ${typography[breakpoint][variant].lineHeight};
-        letter-spacing: ${typography[breakpoint][variant].letterSpacing}px;
-        font-weight: ${typography[breakpoint][variant].fontWeight};
-      `;
-};
-const getColor = (color, colors, $themeType) => {
-    if (color) {
-        return color;
-    }
-    return colors[$themeType].active.color;
-};
-const getFontFamily = (variant) => {
-    return `
-    ${variant.includes("digits")
-        ? "'Roboto Mono', sans-serif"
-        : "'Inter', sans-serif"} !important;
-  `;
-};
-const getGenesisTypographyClass = ({ colors, typography }, $themeType, variant, state, breakpoint, color, $isFullWidth) => `
-    &.ant-typography {
-      font-family: ${getFontFamily(variant)};
-      color: ${getColor(color, colors, $themeType)} !important;
-      ${getVariant(typography, variant, breakpoint)}
-      margin-bottom: 0 !important;
-      width: ${$isFullWidth ? "100%" : "auto"};
-      line-height: 1;
-
-      &:disabled {
-        color: ${colors.status.disabled.default} !important;
-        userSelect: none;
-        cursor: not-allowed;
-      }
-    } 
-`;
-export const Headline = styled(AntTypography.Title) `
-  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
-    return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
-}}
-`;
-export const Paragraph = styled(AntTypography.Paragraph) `
-  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
-    return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
-}}
-`;
-export const Text = styled(AntTypography.Text) `
-  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
-    return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
-}}
-`;

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

@@ -1,5 +0,0 @@
-import type { ButtonProps } from "../Button";
-export interface UtilityButtonProps extends Omit<ButtonProps, "themeType"> {
-}
-declare const UtilityButton: ({ children, onClick, state, isIconButton, size, ...rest }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default UtilityButton;

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Button from "../Button";
-import { TYPE } from "../../constants";
-const UtilityButton = ({ children, onClick, state = "active", isIconButton = false, size = "normal", ...rest }) => {
-    const buttonState = state === "active" || state === "disabled" ? state : "active";
-    const themeType = TYPE.utility;
-    return (_jsx(Button, { onClick: onClick, themeType: themeType, state: buttonState, disabled: state === "disabled" || rest.disabled, isIconButton: isIconButton, size: size, ...rest, children: children }));
-};
-export default UtilityButton;

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

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

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

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

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

@@ -1,2 +0,0 @@
-declare const DropdownChevron: (properties: any) => import("react/jsx-runtime").JSX.Element;
-export default DropdownChevron;

package/dist/components/TableWithControls/components/shared/DropdownChevron.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useGenesis } from "@gobolt/genesis/providers";
-const DropdownChevron = (properties) => {
-    const { theme } = useGenesis();
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", ...properties, children: _jsx("path", { fill: "#222", fillRule: "evenodd", d: "M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z", clipRule: "evenodd" }) }));
-};
-export default DropdownChevron;