@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,364 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from ".";
+import Text from "../Text/Text";
+import { minCharactersRegex } from "../../utils/inputValidation";
+import { withMemo } from "../../userHoc";
+import { arePropsEqual } from "./InputMemoTypes";
+import FormButton from "../FormButton/FormButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const MemoizedInput = withMemo(Input, arePropsEqual);
+export default {
+    title: "Components/Input",
+    component: MemoizedInput,
+    argTypes: {
+        validateInput: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+            description: "The function that validates the input.",
+        },
+        hasValidation: {
+            control: "none",
+            description: "Whether the input has validation styles turned on.",
+        },
+        errorMessage: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+            description: "The error message if the input validation fails.",
+        },
+        regex: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+            description: "The regex used to validate the input.",
+        },
+        inputType: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+            description: "The type of input.",
+        },
+        inputWidth: {
+            control: "none",
+            description: "The width of the input.",
+        },
+        inputTextSize: {
+            control: "none",
+            description: "The size of the text in the input.",
+        },
+        hasPlaceholder: {
+            control: "none",
+            description: "Whether the input has a placeholder.",
+        },
+        placeholder: {
+            control: "none",
+            description: "The text that appears in the input field.",
+        },
+        hasLeftIcon: {
+            control: "none",
+            description: "If the input has an icon on the left.",
+        },
+        leftIcon: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+            description: "If the input has an icon on the left.",
+        },
+        hasRightIcon: {
+            control: "none",
+            description: "If the input has an icon on the right.",
+        },
+        rightIcon: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+            description: "If the input has an icon on the left.",
+        },
+        iconColor: {
+            control: "none",
+            description: "The color of the icons.",
+        },
+        iconBackgroundColor: {
+            control: "none",
+            description: "The background color of the icons.",
+        },
+        inputShape: {
+            control: "none",
+            description: "The shape of the input.",
+        },
+        borderColor: {
+            control: "none",
+            description: "The border color of the input.",
+        },
+        successBorder: {
+            control: "none",
+            description: "The border color when the input validation results in success.",
+        },
+        errorBorder: {
+            control: "none",
+            description: "The border color when the input validation results in error.",
+        },
+        backgroundColor: {
+            control: "none",
+            description: "The background color of the input.",
+        },
+        hasButton: {
+            control: "none",
+            description: "If the input has a button.",
+        },
+        button: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+            description: "The button that is displayed on the input.",
+        },
+        onClick: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+        },
+        label: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+        },
+        labelVisible: {
+            control: "none",
+            description: "If the input label is visible to all or just screen readers.",
+        },
+        labelPlacement: {
+            control: "none",
+            description: "Where the label is placed in relation to the input field.",
+        },
+        value: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+        },
+        inputName: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+        },
+        onChange: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+        },
+        onButtonClick: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+        },
+        additionalClasses: {
+            control: "none",
+            table: {
+                disable: true,
+            },
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(MemoizedInput, { ...args });
+export const NoIcons = Template.bind({});
+NoIcons.args = {
+    inputType: "search",
+    inputName: "search",
+    hasValidation: false,
+    hasPlaceholder: true,
+    placeholder: "Search",
+    labelVisible: false,
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Search", tag: "h2", additionalClasses: "mb-0 pb-0 pr-2" })),
+    hasLeftIcon: false,
+    hasRightIcon: false,
+    leftIcon: getFontAwesomeIcon("search"),
+    rightIcon: getFontAwesomeIcon("arrow-right"),
+    hasButton: true,
+    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+    inputTextSize: "text-md",
+    inputWidth: "w-96",
+    inputShape: "rounded",
+    backgroundColor: "bg-white",
+    borderColor: "border-green-500",
+};
+export const LeftIcon = Template.bind({});
+LeftIcon.args = {
+    inputType: "text",
+    inputName: "search",
+    hasValidation: false,
+    inputWidth: "w-96",
+    inputShape: "rounded",
+    backgroundColor: "bg-white",
+    borderColor: "border-green-500",
+    hasPlaceholder: true,
+    placeholder: "Search",
+    labelVisible: false,
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Search:", tag: "h2", additionalClasses: "mb-0 pb-0 pr-2" })),
+    hasLeftIcon: true,
+    leftIcon: getFontAwesomeIcon("search"),
+    iconBackgroundColor: "none",
+    hasRightIcon: false,
+    iconColor: "text-green-500",
+    hasButton: false,
+};
+export const RightIcon = Template.bind({});
+RightIcon.args = {
+    inputType: "text",
+    inputName: "search",
+    hasValidation: false,
+    inputWidth: "w-96",
+    inputShape: "rounded",
+    backgroundColor: "bg-gray-500",
+    borderColor: "border-green-500",
+    hasPlaceholder: true,
+    placeholder: "Search",
+    labelVisible: false,
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Search:", tag: "h2", additionalClasses: "mb-0 pb-0 pr-2" })),
+    hasLeftIcon: false,
+    hasRightIcon: true,
+    rightIcon: getFontAwesomeIcon("arrow-right"),
+    iconBackgroundColor: "none",
+    hasButton: false,
+};
+export const DualIcons = Template.bind({});
+DualIcons.args = {
+    inputType: "text",
+    inputName: "search",
+    hasValidation: false,
+    inputWidth: "w-[40rem]",
+    inputShape: "rounded",
+    backgroundColor: "bg-white",
+    borderColor: "border-green-500",
+    placeholder: "Search",
+    hasButton: false,
+    labelVisible: false,
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Search:", tag: "h2", additionalClasses: "mb-0 pb-0 pr-2" })),
+    hasRightIcon: true,
+    hasLeftIcon: true,
+    rightIcon: getFontAwesomeIcon("arrow-right"),
+    leftIcon: getFontAwesomeIcon("search"),
+    iconBackgroundColor: "none",
+};
+export const ButtonWithValidation = Template.bind({});
+ButtonWithValidation.args = {
+    inputType: "search",
+    inputName: "search",
+    hasValidation: true,
+    regex: minCharactersRegex,
+    errorMessage: "Input must be at least three characters",
+    inputWidth: "w-[40rem]",
+    inputShape: "rounded",
+    backgroundColor: "bg-white",
+    borderColor: "border-green-500",
+    errorBorder: "border-red-500",
+    successBorder: "border-green-500",
+    placeholder: "Enter input here...",
+    labelVisible: false,
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Search:", tag: "h2", additionalClasses: "mb-0 pb-0 pr-2" })),
+    hasRightIcon: false,
+    hasLeftIcon: false,
+    hasButton: true,
+    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+};
+export const ButtonWithLeftIcon = Template.bind({});
+ButtonWithLeftIcon.args = {
+    inputType: "text",
+    inputName: "search",
+    hasValidation: false,
+    inputWidth: "w-[40rem]",
+    inputShape: "rounded",
+    backgroundColor: "bg-white",
+    borderColor: "border-green-500",
+    placeholder: "Search",
+    labelVisible: false,
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Search:", tag: "h2", additionalClasses: "mb-0 pb-2 pl-2" })),
+    hasRightIcon: false,
+    hasLeftIcon: true,
+    leftIcon: getFontAwesomeIcon("search"),
+    iconBackgroundColor: "none",
+    hasButton: true,
+    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+};
+export const DateInput = Template.bind({});
+DateInput.args = {
+    inputType: "date",
+    inputName: "birthday",
+    hasValidation: true,
+    inputWidth: "w-48",
+    inputShape: "rounded",
+    backgroundColor: "bg-white",
+    borderColor: "border-green-500",
+    hasPlaceholder: false,
+    labelVisible: true,
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Date of Birth:", tag: "h2", additionalClasses: "mb-0 pb-1 pl-2" })),
+    hasRightIcon: false,
+    hasLeftIcon: false,
+    hasButton: false,
+};
+export const EmailInput = Template.bind({});
+EmailInput.args = {
+    inputType: "email",
+    inputName: "email",
+    hasValidation: false,
+    inputWidth: "w-72",
+    inputShape: "rounded",
+    backgroundColor: "bg-white",
+    borderColor: "border-green-500",
+    hasPlaceholder: false,
+    labelVisible: true,
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Email:", tag: "h2", additionalClasses: "mb-0 pb-1 pl-2" })),
+    hasRightIcon: false,
+    hasLeftIcon: true,
+    leftIcon: getFontAwesomeIcon("envelope"),
+    hasButton: false,
+};
+export const NumberInput = Template.bind({});
+NumberInput.args = {
+    inputType: "number",
+    inputName: "number",
+    hasValidation: false,
+    inputWidth: "w-36",
+    inputShape: "rounded",
+    backgroundColor: "bg-white",
+    borderColor: "border-green-500",
+    hasPlaceholder: false,
+    labelVisible: true,
+    labelPlacement: "left",
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Enter Your Age:", tag: "h2", additionalClasses: "mb-0 pb-0 pr-3" })),
+    hasRightIcon: false,
+    hasLeftIcon: false,
+    hasButton: false,
+};
+export const RangeInput = Template.bind({});
+RangeInput.args = {
+    inputType: "range",
+    inputName: "number",
+    hasValidation: false,
+    inputWidth: "w-36",
+    backgroundColor: "bg-white",
+    borderColor: "border-none",
+    hasPlaceholder: false,
+    labelVisible: true,
+    labelPlacement: "left",
+    label: (_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Select:", tag: "h2", additionalClasses: "mb-0 pb-0 pr-4" })),
+    hasRightIcon: false,
+    hasLeftIcon: false,
+    hasButton: false,
+};

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

@@ -0,0 +1 @@
+import "../../../dist/main.css";

package/dist/components/Input/Input.test.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../../../dist/main.css";
+import { render, screen } from "@testing-library/react";
+import { describe, test, expect, beforeEach } from "vitest";
+import Input from "./Input";
+import Text from "../Text/Text";
+import FormButton from "../FormButton/FormButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+describe("<Input /> with all props", () => {
+    beforeEach(() => {
+        render(_jsx(Input, { hasValidation: false, 
+            // LABEL
+            label: _jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Search for items", tag: "h2", additionalClasses: "mb-0 pb-2 pl-2" }), labelVisible: true, labelPlacement: "left", 
+            // INPUT DETAILS
+            inputName: "search", inputType: "text", 
+            // PLACEHOLDER
+            hasPlaceholder: true, placeholder: "Search for items", 
+            // ICONS
+            hasLeftIcon: false, hasRightIcon: false, iconColor: "black", 
+            // INPUT STYLES
+            inputTextSize: "medium", inputShape: "cornered", borderColor: "green", backgroundColor: "none", inputWidth: "w-96", 
+            // BUTTON
+            hasButton: true, button: _jsx(FormButton, { text: "Submit", as: "button", hoverBackground: "green", backgroundColor: "green", icon: getFontAwesomeIcon("arrow-right"), additionalClasses: "items-center px-4", borderColor: "green", hoverFontColor: "black", shape: "cornered" }) }));
+    });
+    test("renders Input component", () => {
+        expect(screen.getByTestId("input-container")).toBeInTheDocument();
+        expect(screen.getByTestId("input-element")).toBeInTheDocument();
+    });
+    test("renders correct Input label", () => {
+        expect(screen.getByTestId("input-label")).toBeInTheDocument();
+        expect(screen.getByTestId("input-label")).toHaveTextContent("Search for items");
+    });
+    test("renders correct button", () => {
+        expect(screen.getByTestId("submit-button")).toBeInTheDocument();
+        expect(screen.getByTestId("submit-button")).toHaveTextContent("Submit");
+    });
+    test("contains correct placeholder text", () => {
+        const input = screen.getByTestId("input-element");
+        expect(input).toHaveAttribute("placeholder", "Search for items");
+    });
+    test("renders correct border color class", () => {
+        const inputElement = screen.getByTestId("input-element");
+        expect(inputElement).toHaveClass("border-teal-500");
+    });
+});

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

@@ -0,0 +1,36 @@
+import React from "react";
+export interface InputTypes {
+    onChange?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    value?: string;
+    hasValidation?: boolean;
+    validateInput?: (inputValue: string | number, inputType: string) => string;
+    hasErrorMessage?: boolean;
+    errorMessage?: string;
+    regex?: RegExp;
+    setControlledState?: (value: string) => void;
+    controlledState?: string;
+    labelVisible: boolean;
+    label: React.ReactNode;
+    labelPlacement?: "top" | "left";
+    inputType: string;
+    inputName: string;
+    hasPlaceholder: boolean;
+    placeholder: string;
+    hasLeftIcon?: boolean;
+    hasRightIcon?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconColor?: "green" | "blue" | "black" | string;
+    iconBackgroundColor?: "green" | "white" | "blue" | "green" | "none" | string;
+    inputTextSize?: "small" | "medium" | "large" | string;
+    inputWidth?: string;
+    inputShape?: "cornered" | "semiRounded" | "rounded" | string;
+    borderColor?: "green" | "blue" | "grey" | "black" | "none" | string;
+    backgroundColor?: "white" | "blue" | "green" | "none" | string;
+    additionalClasses?: string | undefined;
+    errorBorder?: "red" | "orange" | string;
+    successBorder?: "green" | "blue" | "grey" | "black" | string;
+    hasButton?: boolean;
+    button?: React.ReactNode;
+    onButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}

package/dist/components/Input/Input.types.js

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

package/dist/components/Input/InputMemoTypes.d.ts

@@ -0,0 +1,2 @@
+import { InputTypes } from ".";
+export declare const arePropsEqual: (prevProps: InputTypes, nextProps: InputTypes) => boolean;

package/dist/components/Input/InputMemoTypes.js

@@ -0,0 +1,28 @@
+export const arePropsEqual = (prevProps, nextProps) => {
+    return (prevProps.hasValidation === nextProps.hasValidation &&
+        prevProps.errorMessage === nextProps.errorMessage &&
+        prevProps.regex === nextProps.regex &&
+        prevProps.label === nextProps.label &&
+        prevProps.labelVisible === nextProps.labelVisible &&
+        prevProps.labelPlacement === nextProps.labelPlacement &&
+        prevProps.inputName === nextProps.inputName &&
+        prevProps.inputType === nextProps.inputType &&
+        prevProps.hasPlaceholder === nextProps.hasPlaceholder &&
+        prevProps.placeholder === nextProps.placeholder &&
+        prevProps.hasLeftIcon === nextProps.hasLeftIcon &&
+        prevProps.hasRightIcon === nextProps.hasRightIcon &&
+        prevProps.leftIcon === nextProps.leftIcon &&
+        prevProps.rightIcon === nextProps.rightIcon &&
+        prevProps.iconColor === nextProps.iconColor &&
+        prevProps.iconBackgroundColor === nextProps.iconBackgroundColor &&
+        prevProps.inputTextSize === nextProps.inputTextSize &&
+        prevProps.inputShape === nextProps.inputShape &&
+        prevProps.borderColor === nextProps.borderColor &&
+        prevProps.backgroundColor === nextProps.backgroundColor &&
+        prevProps.inputWidth === nextProps.inputWidth &&
+        prevProps.errorBorder === nextProps.errorBorder &&
+        prevProps.successBorder === nextProps.successBorder &&
+        prevProps.additionalClasses === nextProps.additionalClasses &&
+        prevProps.hasButton === nextProps.hasButton &&
+        prevProps.button === nextProps.button);
+};

package/dist/components/Input/index.js

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

package/dist/components/MobileMenu/MobileMenu.d.ts

@@ -0,0 +1,3 @@
+import { MobileMenuTypes } from "./MobileMenu.types";
+declare const MobileMenu: React.FC<MobileMenuTypes>;
+export default MobileMenu;

package/dist/components/MobileMenu/MobileMenu.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHeaderContext } from "../Header/headerContext";
+const MobileMenu = ({ badge, nav, input, icons, mobileMenuClasses, }) => {
+    const { hasMobileIcons, hasMobileNavItems, hasMobileBadge, hasMobileSearchBar, } = useHeaderContext();
+    return (_jsxs("nav", { "data-testid": "secondary-nav", "aria-label": "Secondary navigation", className: `flex flex-col justify-start z-[1000] top-0 w-full h-full pt-16 pb-12 px-4 overflow-scroll ${mobileMenuClasses}`, children: [hasMobileNavItems && _jsx("div", { className: "mb-12", children: nav }), hasMobileBadge && (_jsx("div", { className: "flex w-1/2 mb-12 mx-auto", children: badge })), hasMobileIcons && icons && (_jsx("div", { className: "flex justify-around w-full mb-12", children: icons })), hasMobileSearchBar && (_jsx("div", { className: "flex w-full [&:has(:focus-visible)]:ring-2", children: input }))] }));
+};
+export default MobileMenu;

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

@@ -0,0 +1,20 @@
+export interface MobileMenuTypes {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    handleNav?: () => void;
+    hasSearchBar?: boolean;
+    hasNavItems?: boolean;
+    hasBadge?: boolean;
+    hasIcons?: boolean;
+    hasMobileIcons?: boolean;
+    hasMobileNavItems?: boolean;
+    hasMobileBadge?: boolean;
+    hasMobileSearchBar?: boolean;
+    mobileMenuClasses?: string;
+    hasGlass?: boolean;
+    backgroundColor?: string;
+    nav?: React.ReactNode;
+    badge?: React.ReactNode;
+    input?: React.ReactNode;
+    icons?: React.ReactNode;
+    mobileCloseIcon?: JSX.Element | undefined | null;
+}

package/dist/components/MobileMenu/MobileMenu.types.js

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

package/dist/components/MobileMenu/index.js

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