@gobolt/genesis 0.3.26 → 0.3.28

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

@@ -1,106 +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 __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import description from "./TableControlsDescription.md?raw";
-import TableControls from "../TableControls";
-import { mockDataSource } from "@/lib/components/Table//__mocks__/table-mocks";
-var meta = {
-    component: TableControls,
-    title: "Components/Table/TableControls",
-    tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            description: {
-                component: description,
-            },
-        },
-    },
-};
-export default meta;
-export var TableControlsStory = {
-    parameters: {
-        msw: {
-            enabled: true,
-        },
-    },
-    render: function () {
-        var _a = __read(useState({
-            orders: ["Cancelled", "Paused"],
-            warehouse: ["D2C"],
-            availability: ["Out of Stock"],
-        }), 2), groups = _a[0], setGroups = _a[1];
-        var _b = __read(useState({
-            sortOptions: [
-                { value: "2", label: _jsx("span", { children: "Created Date" }) },
-                { value: "3", label: _jsx("span", { children: "Order Status" }) },
-            ],
-            selectedSortOption: "2",
-            searchByPlaceholder: "Search by Address",
-            searchField: "address",
-            isSortedAscending: true,
-            searchValue: "",
-        }), 2), primaryTableRowData = _b[0], setPrimaryTableRowData = _b[1];
-        var onGroupItemClick = function (title, item) {
-            var newGroups = __assign({}, groups);
-            newGroups[title] = newGroups[title].filter(function (group) { return group !== item; });
-            setGroups(newGroups);
-        };
-        var secondaryTableRowData = {
-            groups: groups,
-            totalRecords: mockDataSource.appointments.length,
-        };
-        var onChange = function (actionEvent) {
-            if (actionEvent.event === "groupItemClick") {
-                var _a = actionEvent.payload, title = _a.title, item = _a.item;
-                if (typeof title === "string" && typeof item === "string") {
-                    onGroupItemClick(title, item);
-                }
-            }
-            if (actionEvent.event === "orderClick") {
-                setPrimaryTableRowData(function (previous) { return (__assign(__assign({}, previous), { isSortedAscending: !previous.isSortedAscending })); });
-            }
-            if (actionEvent.event === "primarySortChange") {
-                var value_1 = actionEvent.payload.value;
-                if (typeof value_1 === "string") {
-                    setPrimaryTableRowData(function (previous) { return (__assign(__assign({}, previous), { selectedSortOption: value_1 })); });
-                }
-            }
-            if (actionEvent.event === "inputChange") {
-                var value_2 = actionEvent.payload.value;
-                if (typeof value_2 === "string") {
-                    setPrimaryTableRowData(function (previous) { return (__assign(__assign({}, previous), { searchValue: value_2 })); });
-                }
-            }
-        };
-        var newSecondaryTableRowData = __assign(__assign({}, secondaryTableRowData), { totalRecords: mockDataSource.appointments.length, groups: groups });
-        // add your code here
-        return (_jsx(TableControls, { primaryTableRowData: primaryTableRowData, secondaryTableRowData: newSecondaryTableRowData, onChange: onChange }));
-    },
-};

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

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

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

@@ -1,82 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { screen, fireEvent } from "@testing-library/react";
-import { ThemeProvider } from "styled-components";
-import CustomPagination, { PaginationStyle } from "../CustomPagination";
-import { lightTheme } from "../../../../styles/theme";
-import { customRender as render } from "../../../../test/setup";
-var renderWithTheme = function (component) {
-    return render(_jsx(ThemeProvider, { theme: lightTheme, children: component }));
-};
-describe("CustomPagination", function () {
-    var mockOnChange = vi.fn();
-    beforeEach(function () {
-        mockOnChange.mockClear();
-    });
-    describe("Simple Pagination Style", function () {
-        it("renders first 5 pages when total pages > 5", function () {
-            renderWithTheme(_jsx(CustomPagination, { current: 1, total: 100, pageSize: 10, onChange: mockOnChange, paginationStyle: PaginationStyle.SIMPLE }));
-            expect(screen.getByText("1")).toBeInTheDocument();
-            expect(screen.getByText("2")).toBeInTheDocument();
-            expect(screen.getByText("3")).toBeInTheDocument();
-            expect(screen.getByText("4")).toBeInTheDocument();
-            expect(screen.getByText("5")).toBeInTheDocument();
-        });
-        it("disables previous button on first page", function () {
-            renderWithTheme(_jsx(CustomPagination, { current: 1, total: 100, pageSize: 10, onChange: mockOnChange, paginationStyle: PaginationStyle.SIMPLE }));
-            var previousButton = screen.getByLabelText("Previous Page");
-            expect(previousButton).toHaveAttribute("disabled");
-        });
-        it("calls onChange when clicking page number", function () {
-            renderWithTheme(_jsx(CustomPagination, { current: 1, total: 100, pageSize: 10, onChange: mockOnChange, paginationStyle: PaginationStyle.SIMPLE }));
-            fireEvent.click(screen.getByText("3"));
-            expect(mockOnChange).toHaveBeenCalledWith(3, 10);
-        });
-    });
-    describe("Truncated Pagination Style", function () {
-        it("shows ellipsis and last page when total pages > 5", function () {
-            renderWithTheme(_jsx(CustomPagination, { current: 1, total: 100, pageSize: 10, onChange: mockOnChange, paginationStyle: PaginationStyle.TRUNCATED }));
-            expect(screen.getByText("...")).toBeInTheDocument();
-            expect(screen.getByText("10")).toBeInTheDocument();
-        });
-    });
-    describe("Centered Pagination Style", function () {
-        it("shows correct range of pages around current page", function () {
-            renderWithTheme(_jsx(CustomPagination, { current: 5, total: 100, pageSize: 10, onChange: mockOnChange, paginationStyle: PaginationStyle.CENTERED }));
-            expect(screen.getByText("1")).toBeInTheDocument();
-            expect(screen.getByText("3")).toBeInTheDocument();
-            expect(screen.getByText("4")).toBeInTheDocument();
-            expect(screen.getByText("5")).toBeInTheDocument();
-            expect(screen.getByText("6")).toBeInTheDocument();
-            expect(screen.getByText("7")).toBeInTheDocument();
-            expect(screen.getByText("10")).toBeInTheDocument();
-        });
-    });
-    describe("End Focused Pagination Style", function () {
-        it("shows first page, ellipsis and last 5 pages", function () {
-            renderWithTheme(_jsx(CustomPagination, { current: 8, total: 100, pageSize: 10, onChange: mockOnChange, paginationStyle: PaginationStyle.END_FOCUSED }));
-            expect(screen.getByText("1")).toBeInTheDocument();
-            expect(screen.getByText("...")).toBeInTheDocument();
-            expect(screen.getByText("6")).toBeInTheDocument();
-            expect(screen.getByText("7")).toBeInTheDocument();
-            expect(screen.getByText("8")).toBeInTheDocument();
-            expect(screen.getByText("9")).toBeInTheDocument();
-            expect(screen.getByText("10")).toBeInTheDocument();
-        });
-    });
-    describe("Navigation buttons", function () {
-        it("enables both buttons when on middle page", function () {
-            renderWithTheme(_jsx(CustomPagination, { current: 5, total: 100, pageSize: 10, onChange: mockOnChange, paginationStyle: PaginationStyle.SIMPLE }));
-            var previousButton = screen.getByLabelText("Previous Page");
-            var nextButton = screen.getByLabelText("Next Page");
-            expect(previousButton).not.toHaveAttribute("disabled");
-            expect(nextButton).not.toHaveAttribute("disabled");
-        });
-        it("calls onChange with correct page numbers when clicking navigation buttons", function () {
-            renderWithTheme(_jsx(CustomPagination, { current: 5, total: 100, pageSize: 10, onChange: mockOnChange, paginationStyle: PaginationStyle.SIMPLE }));
-            fireEvent.click(screen.getByLabelText("Previous Page"));
-            expect(mockOnChange).toHaveBeenCalledWith(4, 10);
-            fireEvent.click(screen.getByLabelText("Next Page"));
-            expect(mockOnChange).toHaveBeenCalledWith(6, 10);
-        });
-    });
-});

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

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

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

@@ -1,74 +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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { customRender } from "../../../../test/setup";
-import { useTheme } from "../../../../utils/styled";
-import TableControls from "../";
-// this tests proves that useTheme is working and that the ThemeProvider is included within the GenesisProvider!
-var DebugTheme = function (_a) {
-    var children = _a.children;
-    var theme = useTheme();
-    var wideBreakpoint = theme.breakpoints.wide;
-    return (_jsx("div", { children: _jsxs("p", { children: ["wide ", wideBreakpoint] }) }));
-};
-describe("<TableControls />", function () {
-    var properties;
-    beforeEach(function () {
-        properties = {
-            onChange: vi.fn(),
-            primaryTableRowData: {
-                sortOptions: [
-                    { value: "1", label: "First Option" },
-                    { value: "2", label: "Second Option" },
-                ],
-            },
-            secondaryTableRowData: {
-                groups: { orders: ["Cancelled", "Paused"] },
-                totalRecords: 100,
-            },
-        };
-    });
-    var renderComponent = function () { return customRender(_jsx(TableControls, __assign({}, properties))); };
-    var renderDebugTheme = function () { return customRender(_jsx(DebugTheme, {})); };
-    it("should render the debug theme component proving that the ThemeProvider is includes the GenesisProvider!", function () {
-        var getByText = renderDebugTheme().getByText;
-        expect(getByText("wide 1280")).toBeInTheDocument();
-    });
-    // TODO: add tests for the TableControls component
-    // once I learn why it's complaining about the useTheme hook!
-    /*
-    it("should render both primary and secondary controls when all props provided", () => {
-      const { debug } = customRender(<TableControls {...props} />);
-      debug();
-      const tableControls = screen.getByTestId("TableControls");
-      expect(tableControls).toBeInTheDocument();
-    });
-  
-   
-    it("should call onPrimaryChange when sort option changes", () => {
-      renderComponent();
-      // Trigger sort change
-      props.primaryTableRowData.onPrimaryChange("2");
-      expect(props.primaryTableRowData.onPrimaryChange).toHaveBeenCalledWith("2");
-    });
-  
-    it("should not render secondary controls when secondaryTableRowData is null", () => {
-      props.secondaryTableRowData = null;
-      const { queryByText } = renderComponent();
-      expect(queryByText("100")).not.toBeInTheDocument();
-    });
-  
-    it("should display correct total records in secondary controls", () => {
-      const { getByText } = renderComponent();
-      expect(getByText("100")).toBeInTheDocument();
-    });*/
-});

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

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

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

@@ -1,13 +0,0 @@
-import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
-interface StyledTableControlsProperties {
-    theme?: GenesisTheme;
-    type?: "primary" | "secondary";
-    state?: "active" | "disabled";
-}
-export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
-    colors: any;
-    borderRadius: any;
-    sizing: any;
-}, type?: string, state?: string) => string;
-export declare const StyledTableControls: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTableControlsProperties>> & string;
-export {};

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

@@ -1,16 +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";
-export var getGenesisClass = function (_a, type, state) {
-    var colors = _a.colors, borderRadius = _a.borderRadius, sizing = _a.sizing;
-    if (type === void 0) { type = "primary"; }
-    if (state === void 0) { state = "active"; }
-    return "\n  .class-name-here {\n   } \n ";
-};
-export var StyledTableControls = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, type = _a.type, state = _a.state;
-    return getGenesisClass(theme, type, state);
-});
-var templateObject_1;

package/dist/components/Table/TablePagination.js

@@ -1,28 +0,0 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import Table from "./Table";
-import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
-var TablePagination = function (_a) {
-    var columns = _a.columns, dataSource = _a.dataSource, rowSelection = _a.rowSelection, onChange = _a.onChange, _b = _a.paginationStyle, paginationStyle = _b === void 0 ? PaginationStyle.SIMPLE : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 10 : _c, isMainContentCell = _a.isMainContentCell;
-    var _d = __read(useState(1), 2), current = _d[0], setCurrent = _d[1];
-    var total = dataSource.length;
-    var paginatedData = dataSource.slice((current - 1) * pageSize, current * pageSize);
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0px" }, children: [_jsx(Table, { columns: columns, dataSource: paginatedData, rowSelection: rowSelection, onChange: onChange, pagination: false, isMainContentCell: isMainContentCell }), _jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 16 }, children: _jsx(CustomPagination, { paginationStyle: paginationStyle, current: current, total: total, pageSize: pageSize, onChange: setCurrent }) })] }));
-};
-export default TablePagination;

package/dist/components/Table/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/Table/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/Table/Typography/index.d.ts

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

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

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

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