@agilant/toga-blox 1.0.172 → 1.0.174

package/dist/utils/formaTableData.js

@@ -81,16 +81,31 @@ export function baseFormatTableData(columnTitles, accessors, columnConfigs, rend
     return columnTitles.map((title, i) => {
         const accessor = accessors[i];
         const key = `col${i + 1}`;
-        // Find the config by `key`
-        const rawConfig = columnConfigs.find((c) => c.key === key) || {
+        /* ------------------------------------------------------------
+     Build a *complete* config object for this column:
+     - start with safe defaults
+     - override with whatever came from columnConfigs
+  ------------------------------------------------------------ */
+        const cfg = {
             key,
             type: "DEFAULT",
+            isFilterable: false,
+            isSortable: false,
+            isCopyable: false,
+            ...columnConfigs.find((c) => c.key === key),
         };
-        const Cell = createCellRenderer(rawConfig);
+        const Cell = createCellRenderer(cfg);
+        /* ------------------------------------------------------------
+     Expose the flags + type so the app layer can read them later
+  ------------------------------------------------------------ */
         return {
             Header: title,
             accessor,
             Cell: ({ value }) => _jsx(Cell, { value: value }),
+            type: cfg.type,
+            isFilterable: !!cfg.isFilterable,
+            isSortable: !!cfg.isSortable,
+            isCopyable: !!cfg.isCopyable,
         };
     });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.172",
+	"version": "1.0.174",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -22,7 +22,6 @@
 		"README.md"
 	],
 	"dependencies": {
-		"@agilant/toga-blox": "^1.0.171",
 		"@emotion/is-prop-valid": "^1.1.3",
 		"@fortawesome/pro-light-svg-icons": "^6.7.2",
 		"@fortawesome/pro-regular-svg-icons": "^6.7.2",

package/dist/components/FormButton/FormButton.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type { FormButtonProps } from "./FormButton.types";
-declare const FormButton: React.FC<FormButtonProps>;
-export default FormButton;

package/dist/components/FormButton/FormButton.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FormButton = ({ onClick, text, fontFamily, backgroundColor, customWidth, customHeight, shape, borderColor, icon, additionalClasses, type = "button", to, href, isDisabled = false, hasShadow, as: Element = "button", hoverBackground, hoverFontColor, hoverUnderline = false, hoverBorderColor, iconClasses, ...props }) => {
-    const baseFormButtonClasses = "flex items-center justify-center";
-    const hoverClasses = !isDisabled
-        ? `${hoverBackground} ${hoverFontColor} ${hoverUnderline ? "underline underline-offset-4" : ""} ${hoverBorderColor}`
-        : "";
-    const buttonColorClasses = `${backgroundColor} ${borderColor}`;
-    const cursorClasses = isDisabled
-        ? "cursor-not-allowed opacity-50"
-        : "cursor-pointer";
-    const textStyleClasses = `${fontFamily}`;
-    const buttonShapeClasses = shape;
-    const buttonClasses = `
-    ${baseFormButtonClasses}
-    ${buttonColorClasses}
-    ${buttonShapeClasses}
-    ${textStyleClasses}
-    ${hoverClasses}
-    ${cursorClasses}
-    ${hasShadow ? "shadow-md" : ""}
-    ${customWidth}
-    ${customHeight}
-    ${additionalClasses}
-  `.trim();
-    const handleClick = (e) => {
-        if (isDisabled) {
-            e.preventDefault();
-            return;
-        }
-        onClick?.(e);
-    };
-    const baseProps = {
-        className: buttonClasses,
-        onClick: handleClick,
-        "aria-disabled": isDisabled ? "true" : "false",
-    };
-    let ElementProps = { ...baseProps };
-    if (Element === "a" && href) {
-        ElementProps = { ...baseProps, href };
-    }
-    else if (Element === "button") {
-        ElementProps = { ...baseProps, type };
-    }
-    else {
-        ElementProps = { ...baseProps };
-    }
-    return (_jsxs(Element, { ...ElementProps, ...props, children: [icon && _jsx("span", { className: iconClasses, children: icon }), text] }));
-};
-export default FormButton;

package/dist/components/FormButton/FormButton.stories.d.ts

@@ -1,12 +0,0 @@
-import { Meta } from "@storybook/react";
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Compass: any;
-export declare const Disabled: any;
-export declare const WithIcon: any;
-export declare const IconOnly: any;
-export declare const ClearCartButton: any;
-export declare const RightIconButton: any;
-export declare const ConfirmRequestButton: any;
-export declare const FourButtonsRow: any;

package/dist/components/FormButton/FormButton.stories.js

@@ -1,200 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import FormButton from "./FormButton";
-import Text from "../Text/Text";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-export default {
-    title: "Components/FormButton",
-    component: FormButton,
-    argTypes: {
-        onClick: {
-            table: {
-                disable: true,
-            },
-            control: "none",
-        },
-        text: {
-            control: "none",
-            description: "The main text displayed on the button.",
-        },
-        fontFamily: {
-            control: "none",
-            description: "The font family of the button text.",
-        },
-        backgroundColor: {
-            control: "none",
-            description: "The background color of the button. Use Tailwind CSS color classes.",
-        },
-        borderColor: {
-            control: "none",
-            description: "The color of the border of the button. Use Tailwind CSS border color classes.",
-        },
-        shape: {
-            control: "none",
-            description: "The shape of the button. Use Tailwind CSS border radius classes.",
-        },
-        hoverBackground: {
-            control: "none",
-            description: "The background color of the button on hover. Use Tailwind CSS color classes.",
-        },
-        hoverFontColor: {
-            control: "none",
-            description: "The text color of the button on hover. Use Tailwind CSS color classes.",
-        },
-        hoverUnderline: {
-            control: "none",
-            description: "Whether the text is underlined on hover.",
-        },
-        hoverBorderColor: {
-            control: "none",
-            description: "The border color of the button on hover. Use Tailwind CSS border color classes.",
-        },
-        isDisabled: {
-            control: "none",
-            description: "Whether the button is disabled and cannot be clicked.",
-        },
-        hasShadow: {
-            control: "none",
-            description: "Tailwind CSS class to add a shadow to the button.",
-        },
-        customWidth: {
-            control: "none",
-            description: "Custom width for the button. Can be a Tailwind CSS class.",
-        },
-        customHeight: {
-            control: "none",
-            description: "Custom height for the button. Can be a Tailwind CSS class.",
-        },
-        additionalClasses: {
-            control: "none",
-            description: "Additional Tailwind CSS classes to apply to the button.",
-        },
-        icon: {
-            control: "none",
-            description: "An optional icon element to display inside the button.",
-        },
-        iconClasses: {
-            control: "none",
-            description: "Classes for styling the icon inside the button.",
-        },
-        as: {
-            control: "none",
-            description: "Defines the type of element to render, such as a 'button', 'a', or a React Router 'Link'.",
-        },
-        href: {
-            control: "none",
-            description: "If 'as' is 'a', this specifies the 'href' for an anchor element.",
-        },
-        to: {
-            control: "none",
-            description: "If 'as' is 'Link', this specifies the 'to' prop for React Router 'Link'.",
-        },
-    },
-    tags: ['autodocs'],
-    parameters: {
-        docs: {
-            description: {
-                component: "The `FormButton` component is a versatile button component that supports different types of elements like `button`, `a`, and `Link` from React Router. It's highly customizable with Tailwind CSS classes."
-            },
-        },
-        layout: "centered",
-    },
-};
-const Template = (args) => _jsx(FormButton, { ...args });
-export const Default = Template.bind({});
-Default.args = {
-    text: "Default Button",
-    backgroundColor: "bg-blue-600",
-    fontFamily: "font-sans",
-    borderColor: "border-none",
-    shape: "rounded-md",
-    hoverBackground: "hover:bg-blue-700",
-    hoverFontColor: "hover:text-black",
-    onClick: () => alert("Button clicked!"),
-    additionalClasses: "p-2",
-};
-export const Compass = Template.bind({});
-Compass.args = {
-    text: _jsx(Text, { size: "", color: "", text: "Compass Button", fontFamily: "" }),
-    backgroundColor: "bg-green-400",
-    fontFamily: "font-sans",
-    shape: "rounded-md",
-    borderColor: "border-none",
-    hoverBackground: "hover:bg-green-700",
-    hoverFontColor: "hover:text-white",
-    hoverBorderColor: "hover:border-green-900",
-    hoverUnderline: false,
-    onClick: () => alert("Button clicked!"),
-    as: "a",
-    href: "#",
-    additionalClasses: "p-2",
-};
-export const Disabled = Template.bind({});
-Disabled.args = {
-    ...Default.args,
-    text: _jsx(Text, { size: "", color: "", text: "Disabled Button", fontFamily: "" }),
-    isDisabled: true,
-};
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-    ...Default.args,
-    text: (_jsx(Text, { size: "", color: "", text: "Button with icon", fontFamily: "", additionalClasses: "pl-2" })),
-    icon: getFontAwesomeIcon("coffee"),
-    shape: "rounded-none",
-    hoverUnderline: false,
-    onClick: () => alert("Button clicked!"),
-    iconClasses: "pl-2",
-};
-export const IconOnly = Template.bind({});
-IconOnly.args = {
-    fontFamily: "font-sans",
-    shape: "rounded",
-    hoverBackground: "hover:bg-gray-100",
-    hoverUnderline: false,
-    icon: getFontAwesomeIcon("trash"),
-    additionalClasses: "flex justify-center items-center px-4 py-3 bg-gray-50",
-    onClick: () => alert("Icon button clicked!"),
-};
-export const ClearCartButton = Template.bind({});
-ClearCartButton.args = {
-    text: _jsx(Text, { size: "", color: "", text: "Clear Cart", fontFamily: "" }),
-    fontFamily: "font-sans",
-    shape: "rounded-md",
-    hoverBackground: "hover:bg-gray-100",
-    hoverFontColor: "hover:text-black",
-    hoverBorderColor: "hover:border-red-700",
-    hoverUnderline: false,
-    icon: getFontAwesomeIcon("trash"),
-    iconClasses: "order-first",
-    additionalClasses: "px-5 py-6 bg-gray-50 border-red-500 gap-2",
-    onClick: () => alert("Cart Cleared!"),
-};
-export const RightIconButton = Template.bind({});
-RightIconButton.args = {
-    text: _jsx(Text, { size: "", color: "text-white", text: "Next", fontFamily: "" }),
-    backgroundColor: "bg-gray-500",
-    shape: "rounded-md",
-    hoverBackground: "hover:bg-gray-700",
-    hoverFontColor: "hover:text-white",
-    hoverBorderColor: "hover:border-blue-700",
-    hoverUnderline: false,
-    icon: getFontAwesomeIcon("arrow-right"),
-    additionalClasses: "px-6 py-3 flex-row-reverse",
-    iconClasses: "ml-2",
-    onClick: () => alert("Next clicked!"),
-};
-export const ConfirmRequestButton = Template.bind({});
-ConfirmRequestButton.args = {
-    text: _jsx(Text, { size: "", color: "", text: "CONFIRM REQUEST", fontFamily: "" }),
-    backgroundColor: "bg-[#9ca3af]",
-    fontFamily: "font-sans",
-    borderColor: "border-none",
-    shape: "rounded-md",
-    hoverUnderline: false,
-    isDisabled: true,
-    additionalClasses: "py-3 px-6",
-};
-export const FourButtonsRow = Template.bind({});
-FourButtonsRow.args = {};
-FourButtonsRow.decorators = [
-    (Story) => (_jsxs("div", { className: "flex divide-x divide-gray-200 rounded-md overflow-hidden border border-gray-200", children: [_jsx(FormButton, { text: "All", backgroundColor: "bg-teal-600", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverUnderline: false, additionalClasses: "py-2 px-4 text-white", onClick: () => alert("All clicked!") }), _jsx(FormButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("boxes", "mr-2"), "Bundles"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Bundles clicked!") }), _jsx(FormButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("clipboard", "mr-2"), "Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Categories clicked!") }), _jsx(FormButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("plus", "mr-2"), "Custom Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Custom Categories clicked!") })] })),
-];

package/dist/components/FormButton/FormButton.test.d.ts

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

package/dist/components/FormButton/FormButton.test.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, expect, test, vi } from "vitest";
-import Button from "./FormButton";
-import { MemoryRouter } from "react-router-dom";
-describe("Button", () => {
-    test("renders correctly", () => {
-        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Default Button", backgroundColor: "green", shape: "outline" }) }));
-        expect(screen.getByText("Default Button")).toBeInTheDocument();
-    });
-    test("is clickable", () => {
-        const mockOnClick = vi.fn();
-        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Clickable Button", backgroundColor: "green", shape: "outline", onClick: mockOnClick }) }));
-        fireEvent.click(screen.getByText("Clickable Button"));
-        expect(mockOnClick).toHaveBeenCalled();
-    });
-    test("has correct text", () => {
-        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Default Button", backgroundColor: "green", shape: "outline" }) }));
-        expect(screen.getByText("Default Button")).toHaveTextContent("Default Button");
-    });
-});
-describe("Disabled Button", () => {
-    test("is disabled", () => {
-        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Disabled Button", backgroundColor: "green", shape: "outline", isDisabled: true }) }));
-        expect(screen.getByText("Disabled Button")).toHaveAttribute("aria-disabled", "true");
-    });
-});

package/dist/components/FormButton/FormButton.types.d.ts

@@ -1,24 +0,0 @@
-import React, { ElementType } from "react";
-export interface FormButtonProps {
-    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-    text?: string | JSX.Element;
-    fontFamily?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-    customWidth?: string;
-    customHeight?: string;
-    shape?: string;
-    icon?: JSX.Element | null;
-    additionalClasses?: string;
-    type?: "button" | "submit" | "reset";
-    to?: string;
-    href?: string;
-    isDisabled?: boolean;
-    hasShadow?: string;
-    as?: ElementType | string;
-    hoverBackground?: string;
-    hoverFontColor?: string;
-    hoverUnderline?: boolean;
-    hoverBorderColor?: string;
-    iconClasses?: string;
-}

package/dist/components/FormButton/FormButton.types.js

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

package/dist/components/FormButton/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./FormButton";
-export * from "./FormButton.types";

package/dist/components/FormButton/index.js

@@ -1,2 +0,0 @@
-export { default } from "./FormButton";
-export * from "./FormButton.types";