@gobolt/genesis 0.3.22 → 0.3.23

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
+    colors: any;
+    borderRadius: any;
+    sizing: any;
+}, type?: string, state?: string) => string;
+export declare const Tooltip: any;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,163 @@
+export declare const TYPE: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    destructive: string;
+    utility: string;
+    icon: string;
+};
+export declare const BREAKPOINTS: {
+    wide: string;
+    medium: string;
+    narrow: string;
+};
+export declare const STATE: {
+    active: string;
+    hover: string;
+    pressed: string;
+    focussed: string;
+    disabled: string;
+    error: string;
+    success: string;
+    warning: string;
+    progress: string;
+    info: string;
+    filled: string;
+    generic: string;
+    removed: string;
+    hollow: string;
+};
+export declare const TYPOGRAPHY_VARIANT: {
+    display1: string;
+    display2: string;
+    display3: string;
+    heading1: string;
+    heading2: string;
+    heading3: string;
+    subHeading1: string;
+    subHeading2: string;
+    subHeading3: string;
+    body1: string;
+    body2: string;
+    body3: string;
+    body4: string;
+    body5: string;
+    message: string;
+    overline1: string;
+    overline2: string;
+    overline3: string;
+    label1: string;
+    label2: string;
+    label3: string;
+    link1: string;
+    link2: string;
+    link3: string;
+    digits1: string;
+    digits2: string;
+    digits3: string;
+};
+export declare const BUTTON_VARIANT: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+};
+export declare const SIZE: {
+    small: string;
+    medium: string;
+    large: string;
+    standard: string;
+};
+export declare const BADGE: {
+    appointment: string;
+    asn: string;
+    inventory: string;
+    parcel: string;
+    product: string;
+    route: string;
+    shipment: string;
+    shoppingCart: string;
+    system: string;
+};
+declare const _default: {
+    TYPE: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        destructive: string;
+        utility: string;
+        icon: string;
+    };
+    BREAKPOINTS: {
+        wide: string;
+        medium: string;
+        narrow: string;
+    };
+    STATE: {
+        active: string;
+        hover: string;
+        pressed: string;
+        focussed: string;
+        disabled: string;
+        error: string;
+        success: string;
+        warning: string;
+        progress: string;
+        info: string;
+        filled: string;
+        generic: string;
+        removed: string;
+        hollow: string;
+    };
+    TYPOGRAPHY_VARIANT: {
+        display1: string;
+        display2: string;
+        display3: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        subHeading1: string;
+        subHeading2: string;
+        subHeading3: string;
+        body1: string;
+        body2: string;
+        body3: string;
+        body4: string;
+        body5: string;
+        message: string;
+        overline1: string;
+        overline2: string;
+        overline3: string;
+        label1: string;
+        label2: string;
+        label3: string;
+        link1: string;
+        link2: string;
+        link3: string;
+        digits1: string;
+        digits2: string;
+        digits3: string;
+    };
+    BUTTON_VARIANT: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    SIZE: {
+        small: string;
+        medium: string;
+        large: string;
+        standard: string;
+    };
+    BADGE: {
+        appointment: string;
+        asn: string;
+        inventory: string;
+        parcel: string;
+        product: string;
+        route: string;
+        shipment: string;
+        shoppingCart: string;
+        system: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,89 @@
+export const TYPE = {
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
+    destructive: "destructive",
+    utility: "utility",
+    icon: "icon",
+};
+export const BREAKPOINTS = {
+    wide: "wide",
+    medium: "medium",
+    narrow: "narrow",
+};
+export const STATE = {
+    active: "active",
+    hover: "hover",
+    pressed: "pressed",
+    focussed: "focus",
+    disabled: "disabled",
+    error: "error",
+    success: "success",
+    warning: "warning",
+    progress: "progress",
+    info: "info",
+    filled: "filled",
+    generic: "generic",
+    removed: "removed",
+    hollow: "hollow",
+};
+export const TYPOGRAPHY_VARIANT = {
+    display1: "display1",
+    display2: "display2",
+    display3: "display3",
+    heading1: "heading1",
+    heading2: "heading2",
+    heading3: "heading3",
+    subHeading1: "subHeading1",
+    subHeading2: "subHeading2",
+    subHeading3: "subHeading3",
+    body1: "body1",
+    body2: "body2",
+    body3: "body3",
+    body4: "body4",
+    body5: "body5",
+    message: "message",
+    overline1: "overline1",
+    overline2: "overline2",
+    overline3: "overline3",
+    label1: "label1",
+    label2: "label2",
+    label3: "label3",
+    link1: "link1",
+    link2: "link2",
+    link3: "link3",
+    digits1: "digits1",
+    digits2: "digits2",
+    digits3: "digits3",
+};
+export const BUTTON_VARIANT = {
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
+};
+export const SIZE = {
+    small: "small",
+    medium: "medium",
+    large: "large",
+    standard: "standard",
+};
+export const BADGE = {
+    appointment: "appointment",
+    asn: "asn",
+    inventory: "inventory",
+    parcel: "parcel",
+    product: "product",
+    route: "route",
+    shipment: "shipment",
+    shoppingCart: "shopping cart",
+    system: "system",
+};
+export default {
+    TYPE,
+    BREAKPOINTS,
+    STATE,
+    TYPOGRAPHY_VARIANT,
+    BUTTON_VARIANT,
+    SIZE,
+    BADGE,
+};

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

@@ -0,0 +1,22 @@
+export interface BaseEventPayload {
+    value: string;
+}
+export interface TableEventPayload {
+    title?: string;
+    item?: unknown;
+    value?: string | number;
+}
+export interface ActionEvent<T = Record<string, unknown>> {
+    event?: string;
+    payload: T;
+    type?: string;
+}
+export interface FilterChangeEvent {
+    id: string;
+    label: string;
+    type: string;
+    value: string;
+    onChange: (event: ActionEvent) => void;
+}
+export interface InputEvent extends ActionEvent<BaseEventPayload> {
+}

package/dist/components/TableWithControls/types/events.js

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