@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Slider/Slider.stories.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Slider from "./Slider";
+export default {
+    title: 'Components/Slider',
+    component: Slider,
+    argTypes: {
+        min: {
+            control: 'none',
+            description: 'The minimum value of the range. Example: `0`',
+        },
+        title: {
+            control: 'none',
+            description: 'The title of the range. Example: `Temperature Range`',
+        },
+        max: {
+            control: 'none',
+            description: 'The maximum value of the range. Example: `100`',
+        },
+        step: {
+            control: 'none',
+            description: 'The step value for the range. Example: `1`',
+        },
+        minValue: {
+            control: 'none',
+            description: 'The initial minimum value. Example: `10`',
+        },
+        maxValue: {
+            control: 'none',
+            description: 'The initial maximum value. Example: `90`',
+        },
+        onMinChange: {
+            control: 'none',
+            description: 'Callback function when the minimum value changes. Example: `(value: number) => console.log(value)`',
+        },
+        onMaxChange: {
+            control: 'none',
+            description: 'Callback function when the maximum value changes. Example: `(value: number) => console.log(value)`',
+        },
+        additionalClasses: {
+            control: 'none',
+            description: 'Additional CSS classes for the component. Example: `my-custom-slider`',
+        },
+    },
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Template = (args) => _jsx(Slider, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    min: 0,
+    max: 100,
+    step: 1,
+    minValue: 20,
+    maxValue: 80,
+    onMinChange: (value) => console.log('Min value changed:', value),
+    onMaxChange: (value) => console.log('Max value changed:', value),
+    title: 'Range',
+};
+export const TemperatureRange = Template.bind({});
+TemperatureRange.args = {
+    min: -50,
+    max: 50,
+    step: 0.5,
+    minValue: -10,
+    maxValue: 30,
+    onMinChange: (value) => console.log('Min value changed:', value),
+    onMaxChange: (value) => console.log('Max value changed:', value),
+    title: 'Temperature Range',
+};
+export const PriceRange = Template.bind({});
+PriceRange.args = {
+    min: 0,
+    max: 2000,
+    step: 1,
+    minValue: 900,
+    maxValue: 1578,
+    onMinChange: (value) => console.log('Min value changed:', value),
+    onMaxChange: (value) => console.log('Max value changed:', value),
+    title: 'Price Range',
+};

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

@@ -0,0 +1,21 @@
+export interface SliderProps {
+    min: number;
+    max: number;
+    step: number;
+    minValue: number;
+    maxValue: number;
+    onMinChange: (value: number) => void;
+    onMaxChange: (value: number) => void;
+    additionalClasses?: string;
+    containerClasses?: string;
+    title?: string;
+    titleClasses?: string;
+    minLabel?: string;
+    maxLabel?: string;
+    labelClasses?: string;
+    inputClasses?: string;
+    sliderClasses?: string;
+    rangeClasses?: string;
+    thumbClasses?: string;
+    onAddSection?: () => void;
+}

package/dist/components/Slider/Slider.types.js

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

package/dist/components/Submenus/AdminSubmenu.d.ts

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

package/dist/components/Submenus/AdminSubmenu.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AdminSubmenu = ({ callToActionChildren, secondCallToActionChildren, menuClasses = "p-4 bg-white rounded-lg shadow-lg", }) => {
+    return (_jsxs("div", { className: menuClasses, children: [_jsx("div", { children: callToActionChildren }), _jsx("div", { children: secondCallToActionChildren })] }));
+};
+export default AdminSubmenu;

package/dist/components/Submenus/AlertSubmenu.d.ts

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

package/dist/components/Submenus/AlertSubmenu.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AlertSubmenuItem from "./AlertSubmenuItem";
+const AlertSubmenu = ({ data, newAlertCount, newAlertColor, onClearAlerts, newAlertCountClasses = "text-gray-900 font-semibold", clearAlertsTextClasses = "text-blue-600 hover:underline", clearAlertsText = "Mark all as Read", menuContainerClasses = "rounded-lg border border-stroke bg-white shadow-lg", menuHeaderContainerClasses = "flex justify-between items-center p-4 border-b border-gray-200", alertListContainerClasses = "overflow-y-auto max-h-[300px] divide-y divide-gray-200", }) => {
+    const alertList = data.map((alert, index) => (_jsx(AlertSubmenuItem, { link: alert.link, title: alert.title, subtitle: alert.subtitle, status: alert.status, statusColor: newAlertColor, externalLink: alert.externalLink, titleClasses: "font-medium text-gray-900", externalLinkClasses: "text-sm text-blue-600", subtitleClasses: "text-sm text-gray-500", itemContainerClasses: "p-4 hover:bg-gray-50" }, index)));
+    return (_jsxs("div", { className: menuContainerClasses, children: [_jsxs("div", { className: menuHeaderContainerClasses, children: [_jsxs("span", { className: newAlertCountClasses, children: [newAlertCount, " alerts"] }), _jsx("button", { className: clearAlertsTextClasses, onClick: onClearAlerts, children: clearAlertsText })] }), _jsxs("div", { className: alertListContainerClasses, children: [_jsx("ul", { children: alertList }), _jsx("div", { className: "text-center p-4 text-gray-500", children: "All up to date!" })] })] }));
+};
+export default AlertSubmenu;

package/dist/components/Submenus/AlertSubmenuItem.d.ts

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

package/dist/components/Submenus/AlertSubmenuItem.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AlertSubmenuItem = ({ link = "#", title, externalLink, subtitle, status, statusColor = "bg-blue-500", itemContainerClasses = "flex justify-between items-center p-4", titleClasses = "font-medium text-gray-900", externalLinkClasses = "text-sm text-blue-600", subtitleClasses = "text-sm text-gray-500", }) => {
+    return (_jsx("li", { className: itemContainerClasses, children: _jsxs("a", { href: link, className: "flex items-start gap-4", children: [_jsx("div", { className: "flex-shrink-0 pt-2", children: status && (_jsx("span", { className: `inline-block w-3 h-3 rounded-full ${statusColor}`, "aria-label": "New" })) }), _jsxs("div", { children: [_jsx("h6", { className: titleClasses, children: title }), externalLink && (_jsx("p", { className: externalLinkClasses, children: externalLink })), _jsx("p", { className: subtitleClasses, children: subtitle })] })] }) }));
+};
+export default AlertSubmenuItem;

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

@@ -0,0 +1,29 @@
+export interface AlertSubmenuItemProps {
+    link?: string;
+    title: string;
+    externalLink?: string;
+    subtitle?: string;
+    status?: string;
+    statusColor?: string;
+    itemContainerClasses?: string;
+    titleClasses?: string;
+    externalLinkClasses?: string;
+    subtitleClasses?: string;
+}
+export interface AlertSubmenuProps<T = Record<string, any>> {
+    data: T[];
+    newAlertCount?: number;
+    newAlertColor?: string;
+    onClearAlerts?: () => void;
+    newAlertCountClasses?: string;
+    clearAlertsTextClasses?: string;
+    clearAlertsText?: string;
+    menuContainerClasses?: string;
+    menuHeaderContainerClasses?: string;
+    alertListContainerClasses?: string;
+}
+export interface AdminSubmenuProps {
+    callToActionChildren?: JSX.Element;
+    secondCallToActionChildren?: JSX.Element;
+    menuClasses?: string;
+}

package/dist/components/Submenus/types.js

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

package/dist/components/Text/Text.d.ts

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

package/dist/components/Text/Text.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Text = ({ size = "text-base", color = "text-black", tag = "span", text, fontFamily = "font-sans", additionalClasses = "", ...props }) => {
+    const ElementTag = tag;
+    const className = `
+		${size}
+		${color}
+		${fontFamily}
+		${additionalClasses}
+	`;
+    return (_jsx(ElementTag, { "data-testid": "text", className: className, ...props, children: text }));
+};
+export default Text;

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

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { TextTypes } from "./Text.types";
+declare const _default: Meta<TextTypes>;
+export default _default;
+export declare const Primary: any;

package/dist/components/Text/Text.stories.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text from "./Text";
+export default {
+    title: "Components/Text",
+    component: Text,
+    argTypes: {
+        size: {
+            control: {
+                type: "select", // Dropdown control
+            },
+            options: [
+                "text-xs",
+                "text-sm",
+                "text-md",
+                "text-lg",
+                "text-xl",
+                "text-2xl",
+                "text-3xl",
+                "text-base",
+            ], // Define options explicitly
+            description: "The font size for the text. Use Tailwind CSS classes like 'text-xs', 'text-sm', 'text-md', etc. Default is 'text-base'.",
+        },
+        color: {
+            control: {
+                type: "select", // Dropdown control
+            },
+            options: [
+                "text-red-800",
+                "text-blue-800",
+                "text-green-800",
+                "text-slate-950",
+                "text-black",
+            ],
+            description: "The color of the text. Use Tailwind CSS classes like 'text-red-800', 'text-blue-800', 'text-black', etc. Default is 'text-black'.",
+        },
+        tag: {
+            control: {
+                type: "select", // Dropdown control
+            },
+            options: ["h1", "h2", "h3", "h4", "h5", "p", "span"], // Ensure valid HTML tags are listed
+            description: "The type of HTML element the text should be. Options include 'h1', 'h2', 'p', etc. Default is 'span'.",
+        },
+        fontFamily: {
+            control: {
+                type: "select", // Dropdown control
+            },
+            options: ["font-sans", "font-mono", "font-serif"], // Define the font-family options
+            description: "The type of font family. Use Tailwind CSS classes like 'font-sans', 'font-mono', etc. Default is 'font-sans'.",
+        },
+        text: {
+            control: {
+                type: "text", // Text input control
+            },
+            description: "The main text displayed on the component.",
+            defaultValue: "Testing",
+        },
+        additionalClasses: {
+            control: {
+                type: "text", // Text input control
+            },
+            description: "Additional Tailwind CSS classes to be added.",
+            defaultValue: "",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(Text, { ...args });
+export const Primary = Template.bind({});
+Primary.args = {
+    size: "text-2xl",
+    color: "text-blue-500",
+    tag: "h2",
+    fontFamily: "font-mono",
+    text: "Testing",
+    additionalClasses: "p-5",
+};

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

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

package/dist/components/Text/Text.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Text from "./Text";
+describe("<Text />", () => {
+    beforeEach(() => {
+        render(_jsx(Text, { text: "Testing", size: "text-md", color: "text-red-500", tag: "h1", fontFamily: "font-sans" }));
+    });
+    test("renders Text component", () => {
+        expect(screen.getByTestId("text")).toBeInTheDocument();
+    });
+    test("contain correct text", () => {
+        expect(screen.getByTestId("text")).toHaveTextContent("Testing");
+    });
+    test("renders correct font color", () => {
+        const textElement = screen.getByTestId("text");
+        expect(textElement).toHaveClass("text-red-500");
+    });
+    test("renders correct font size", () => {
+        const textElement = screen.getByTestId("text");
+        expect(textElement).toHaveClass("text-md");
+    });
+    test("renders correct font family", () => {
+        const textElement = screen.getByTestId("text");
+        expect(textElement).toHaveClass("font-sans");
+    });
+    test("renders correct element type", () => {
+        const textElement = screen.getByTestId("text");
+        expect(textElement.tagName).toBe("H1");
+    });
+});

package/{src/components/Text/Text.types.ts → dist/components/Text/Text.types.d.ts}

@@ -1,12 +1,10 @@
 import { ReactNode } from "react";
-
 export type TagName = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | string;
-
 export interface TextTypes {
-	size?: string;
-	color?: string;
-	tag?: TagName;
-	text: ReactNode;
-	fontFamily?: string;
-	additionalClasses?: string;
+    size?: string;
+    color?: string;
+    tag?: TagName;
+    text: ReactNode;
+    fontFamily?: string;
+    additionalClasses?: string;
 }

package/dist/components/Text/Text.types.js

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

package/dist/components/Text/index.js

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

package/dist/components/Toaster/Toaster.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ToasterTypes } from ".";
+declare const Toaster: React.FC<ToasterTypes>;
+export default Toaster;

package/dist/components/Toaster/Toaster.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const Toaster = ({ message, additionalClasses, clearMessage, hasClearButton, statusProps = {
+    colorClass: "bg-gray-100 border border-gray-500 text-gay-800",
+    icon: { icon: "circleCheck", type: "solid" },
+}, }) => {
+    const handleClearMessage = () => {
+        if (clearMessage) {
+            alert("Message Cleared!");
+            clearMessage(true);
+        }
+    };
+    // Pull out colorClass and icon from statusProps
+    const { colorClass, icon: maybeIcon } = statusProps;
+    // We'll combine colorClass with other container styles
+    const containerClasses = colorClass ?? "";
+    // Your existing custom classes
+    const shadowClasses = `shadow-lg shadow-boxShadow rounded-lg`;
+    const closeButtonClasses = `cursor-pointer text-xs ml-4`;
+    return (_jsx("div", { "data-testid": "toaster-test-id", role: "alert", "aria-live": "polite", className: `${shadowClasses} ${containerClasses} ${additionalClasses}`, children: message.map((msg, index) => (_jsxs("div", { className: "flex items-center", children: [maybeIcon && (_jsx("div", { className: "mr-4", children: getFontAwesomeIcon(maybeIcon.icon, maybeIcon.type) })), _jsx("p", { className: index === 0 ? "font-semibold ml-2" : "ml-2", children: msg }), hasClearButton && (_jsx("div", { "data-testid": "clear-button", className: `${closeButtonClasses}`, onClick: handleClearMessage, children: getFontAwesomeIcon("x", "solid") }))] }, index))) }));
+};
+export default Toaster;

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

@@ -0,0 +1,23 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+/**
+ * Default
+ */
+export declare const Default: any;
+/**
+ * WithIconFail
+ */
+export declare const WithIconFail: any;
+/**
+ * WithIconSuccess
+ */
+export declare const WithIconSuccess: any;
+/**
+ * WithIconAlert
+ */
+export declare const WithIconAlert: any;
+/**
+ * HasClearMessage
+ */
+export declare const HasClearMessage: any;

package/dist/components/Toaster/Toaster.stories.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Toaster from ".";
+export default {
+    title: "Components/Toaster",
+    component: Toaster,
+    argTypes: {
+        message: {
+            control: "array",
+            description: "The main messages displayed on the toaster, passed as an array.",
+        },
+        additionalClasses: {
+            control: "text",
+            description: "Additional Tailwind CSS classes for the toaster container.",
+        },
+        hasClearButton: {
+            control: "boolean",
+            description: "Toggle to show or hide the clear message button.",
+        },
+        clearMessage: {
+            action: "Message Cleared!",
+        },
+        statusProps: {
+            control: "object",
+            description: "Object containing colorClass and optional icon config.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(Toaster, { message: [], ...args });
+/**
+ * Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+    message: ["Your action was successful!"],
+    statusProps: {
+        // Pass the literal Tailwind classes instead of color: "green"
+        colorClass: "bg-green-100 border border-green-500 text-green-800",
+    },
+    additionalClasses: "p-5",
+};
+/**
+ * WithIconFail
+ */
+export const WithIconFail = Template.bind({});
+WithIconFail.args = {
+    message: ["Your action failed!"],
+    statusProps: {
+        // Red variant
+        colorClass: "bg-red-100 border border-red-500 text-red-800",
+        icon: { icon: "x", type: "solid" },
+    },
+    additionalClasses: "p-5",
+};
+/**
+ * WithIconSuccess
+ */
+export const WithIconSuccess = Template.bind({});
+WithIconSuccess.args = {
+    message: ["Action completed successfully!"],
+    statusProps: {
+        // Green variant
+        colorClass: "bg-green-100 border border-green-600 text-green-800",
+        icon: { icon: "circleCheck", type: "solid" },
+    },
+    additionalClasses: "p-5",
+};
+/**
+ * WithIconAlert
+ */
+export const WithIconAlert = Template.bind({});
+WithIconAlert.args = {
+    message: ["Alert: Are you sure?"],
+    statusProps: {
+        // Gray variant
+        colorClass: "bg-yellow-100 border border-yellow-500 text-yellow-800",
+        icon: { icon: "triangleExclamation", type: "solid" },
+    },
+    additionalClasses: "p-5",
+};
+/**
+ * HasClearMessage
+ */
+export const HasClearMessage = Template.bind({});
+HasClearMessage.args = {
+    message: [
+        "Message can be cleared and input has different padding from the additionalClasses prop",
+    ],
+    hasClearButton: true,
+    clearMessage: () => {
+        alert("Message Cleared!");
+    },
+    statusProps: {
+        // Orange variant
+        colorClass: "bg-orange-100 border border-orange-500 text-orange-800",
+        icon: { icon: "circleCheck", type: "solid" },
+    },
+    additionalClasses: "py-2 px-5",
+};

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

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

package/dist/components/Toaster/Toaster.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, test, vi } from "vitest";
+import Toaster from "./Toaster";
+const testId = "toaster-test-id";
+const testMessage = "Test Message";
+describe("Toaster Component Tests", () => {
+    test("renders the FA icon when passed in props", () => {
+        const customStatusProps = {
+            icon: { icon: "circleCheck", type: "solid" },
+        };
+        const { container } = render(_jsx(Toaster, { message: ["Success!"], statusProps: customStatusProps }));
+        const iconEl = container.querySelector(".fa-circle-check");
+        expect(iconEl).toBeInTheDocument();
+    });
+    test("does not render an icon when icon is not in props", () => {
+        const customStatusProps = {};
+        const { container } = render(_jsx(Toaster, { message: ["Success!"], statusProps: customStatusProps }));
+        const iconEl = container.querySelector(".fa-circle-check");
+        expect(iconEl).not.toBeInTheDocument();
+    });
+    test("renders correct colors for status", () => {
+        const customStatusProps = {
+            colorClass: "bg-green-100 border border-green-500 text-green-800",
+        };
+        render(_jsx(Toaster, { message: [testMessage], statusProps: customStatusProps }));
+        expect(screen.getByTestId(testId)).toHaveTextContent(testMessage);
+        expect(screen.getByTestId(testId)).toHaveClass(`${customStatusProps.colorClass}`);
+    });
+    test("calls clearMessage callback when the clear button is clicked", async () => {
+        // Arrange
+        const mockClearMessage = vi.fn();
+        const mockAlert = vi
+            .spyOn(window, "alert")
+            .mockImplementation(() => { });
+        render(_jsx(Toaster, { message: [testMessage], hasClearButton: true, clearMessage: mockClearMessage }));
+        // Act - Click the clear button
+        const clearButton = screen.getByTestId("clear-button");
+        await userEvent.click(clearButton);
+        // Assert
+        expect(mockAlert).toHaveBeenCalledWith("Message Cleared!");
+        expect(mockClearMessage).toHaveBeenCalledWith(true);
+        // Cleanup
+        mockAlert.mockRestore();
+    });
+});

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

@@ -0,0 +1,15 @@
+interface StatusProps {
+    icon?: {
+        icon: string;
+        type: "solid" | "regular";
+    };
+    colorClass?: string;
+}
+export interface ToasterTypes {
+    message: string[];
+    additionalClasses?: string;
+    clearMessage?: React.Dispatch<React.SetStateAction<boolean>>;
+    hasClearButton?: boolean;
+    statusProps?: StatusProps;
+}
+export {};

package/dist/components/Toaster/Toaster.types.js

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

package/dist/components/Toaster/index.js

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

package/dist/hoc/index.d.ts

@@ -0,0 +1 @@
+export { default as withStoryBook } from "./styling/withStoryBook";

package/dist/hoc/styling/withStoryBook.d.ts

@@ -0,0 +1,6 @@
+import React, { CSSProperties } from "react";
+export interface WithStoryBookProps {
+    storybookStyle?: CSSProperties;
+}
+declare const withStoryBook: <P extends object>(Component: React.ComponentType<P>) => React.FC<P & WithStoryBookProps>;
+export default withStoryBook;

package/dist/hoc/styling/withStoryBook.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const withStoryBook = (Component) => {
+    return ({ storybookStyle, ...props }) => {
+        return (_jsx("div", { style: storybookStyle, children: _jsx(Component, { ...props }) }));
+    };
+};
+export default withStoryBook;