@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/Input/Input.tsx

@@ -1,161 +0,0 @@
-import React, { useState } from "react";
-import FormButton from "../FormButton/FormButton";
-import { InputTypes } from ".";
-import { validateInput } from "../../utils/inputValidation";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-const Input: React.FC<InputTypes> = ({
-	// FUNCTIONALITY
-	hasValidation = false,
-	errorMessage,
-	regex,
-	setControlledState,
-	controlledState,
-	// LABEL
-	label,
-	labelVisible = true,
-	labelPlacement = "block",
-	// INPUT DETAILS
-	inputName,
-	inputType,
-	// PLACEHOLDER
-	hasPlaceholder = true,
-	placeholder,
-	// ICONS
-	hasLeftIcon,
-	hasRightIcon,
-	leftIcon,
-	rightIcon,
-	iconColor = "text-gray-500",
-	iconBackgroundColor = "bg-transparent",
-	// INPUT STYLES
-	inputTextSize = "text-base",
-	inputShape = "rounded-md",
-	borderColor = "border-gray-300",
-	backgroundColor = "bg-white",
-	inputWidth = "w-full",
-	errorBorder = "border-red-500",
-	successBorder = "border-green-500",
-	// BUTTON
-	hasButton,
-	button = (
-		<FormButton
-			text="Submit"
-			as="button"
-			hoverBackground="hover:bg-green-500"
-			backgroundColor="bg-red-500"
-			icon={getFontAwesomeIcon("arrow-right")}
-			fontColor="text-white"
-			borderColor="border-green-500"
-			hoverFontColor="hover:text-black"
-			shape="rounded-none"
-			additionalClasses="h-full"
-		/>
-	),
-}) => {
-	const [isValid, setIsValid] = useState<string>("");
-	const [termInternal, setTermInternal] = useState<string>("");
-	const [inputBorderClasses, setInputBorderClasses] = useState<string>(
-		borderColor
-	);
-
-	const inputValue = termInternal || controlledState || "";
-	const setTerm = setControlledState || setTermInternal;
-
-	const handleBorderStyles = () => {
-		if (isValid !== "Success" && isValid !== "") {
-			setInputBorderClasses(errorBorder);
-		} else if (isValid === "Success") {
-			setInputBorderClasses(successBorder);
-		} else if (isValid === "") {
-			setInputBorderClasses(borderColor);
-		}
-	};
-
-	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setTerm(e.target.value);
-
-		if (hasValidation) {
-			let validation =
-				validateInput &&
-				regex &&
-				errorMessage &&
-				validateInput(inputValue, regex, errorMessage);
-			setIsValid(validation || "");
-			handleBorderStyles();
-		}
-	};
-
-	return (
-		<div className={`${labelPlacement} w-full`} data-testid="input-container">
-			<label
-				htmlFor={inputName}
-				className={`${labelVisible ? "block" : "hidden"} pb-1 pl-1`}
-				data-testid="input-label"
-			>
-				{label}
-			</label>
-			{hasButton ? (
-				<div className={`relative ${inputWidth} flex`}>
-					<div className="flex-1 relative">
-						{hasLeftIcon && (
-							<div
-								className={`absolute bottom-1 left-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`}
-							>
-								{leftIcon}
-							</div>
-						)}
-						<input
-							type={inputType}
-							placeholder={hasPlaceholder ? placeholder : undefined}
-							name={inputName}
-							id={inputName}
-							onChange={handleChange}
-							value={inputValue}
-							data-testid="input-element"
-							className={`block w-full border-2 p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputBorderClasses} ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}`}
-						/>
-					</div>
-					{hasButton && (
-						<div
-							className={`flex items-center justify-center ${inputShape} h-full`}
-							data-testid="submit-button"
-						>
-							{button}
-						</div>
-					)}
-				</div>
-			) : (
-				<div className={`relative ${inputWidth} flex`}>
-					{hasLeftIcon && (
-						<div
-							className={`absolute top-1 left-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`}
-						>
-							{leftIcon}
-						</div>
-					)}
-					<input
-						type={inputType}
-						placeholder={hasPlaceholder ? placeholder : undefined}
-						name={inputName}
-						id={inputName}
-						onChange={handleChange}
-						value={inputValue}
-						data-testid="input-element"
-						className={`block w-full border-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputBorderClasses} ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}`}
-					/>
-					{hasRightIcon && (
-						<div
-							className={`absolute top-1 right-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`}
-						>
-							{rightIcon}
-						</div>
-					)}
-				</div>
-			)}
-		</div>
-	);
-};
-
-Input.displayName = "Memo(Input)";
-export default Input;

package/src/components/Input/Input.types.ts

@@ -1,52 +0,0 @@
-import React from "react";
-
-export interface InputTypes {
-	// FUNCTIONALITY
-	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;
-	// LABEL
-	labelVisible: boolean;
-	label: React.ReactNode; // text that is displayed as the label, required bc it's either shown or only shown to screen readers
-	labelPlacement?: "top" | "left";
-	// INPUT DETAILS
-	inputType: string;
-	inputName: string; // required bc connects the label to the input
-	// PLACEHOLDER
-	hasPlaceholder: boolean;
-	placeholder: string;
-	// ICONS
-	hasLeftIcon?: boolean;
-	hasRightIcon?: boolean;
-	leftIcon?: React.ReactNode;
-	rightIcon?: React.ReactNode;
-	iconColor?: "green" | "blue" | "black" | string;
-	iconBackgroundColor?:
-		| "green"
-		| "white"
-		| "blue"
-		| "green"
-		| "none"
-		| string;
-	// INPUT STYLE
-	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;
-	// BUTTON
-	hasButton?: boolean;
-	button?: React.ReactNode;
-	onButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}

package/src/components/Input/InputMemoTypes.tsx

@@ -1,32 +0,0 @@
-import { InputTypes } from ".";
-
-export const arePropsEqual = (prevProps: InputTypes, nextProps: InputTypes) => {
-	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/src/components/MobileMenu/MobileMenu.tsx

@@ -1,41 +0,0 @@
-
-import { MobileMenuTypes } from "./MobileMenu.types";
-import { useHeaderContext } from "../Header/headerContext";
-
-const MobileMenu: React.FC<MobileMenuTypes> = ({
-	badge,
-	nav,
-	input,
-	icons,
-	mobileMenuClasses,
-}) => {
-	const {
-		hasMobileIcons,
-		hasMobileNavItems,
-		hasMobileBadge,
-		hasMobileSearchBar,
-	} = useHeaderContext();
-
-	return (
-		<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}`}
-		>
-			{hasMobileNavItems && <div className="mb-12">{nav}</div>}
-			{hasMobileBadge && (
-				<div className="flex w-1/2 mb-12 mx-auto">{badge}</div>
-			)}
-			{hasMobileIcons && icons && (
-				<div className="flex justify-around w-full mb-12">{icons}</div>
-			)}
-			{hasMobileSearchBar && (
-				<div className="flex w-full [&:has(:focus-visible)]:ring-2">
-					{input}
-				</div>
-			)}
-		</nav>
-	);
-};
-
-export default MobileMenu;

package/src/components/MobileMenu/MobileMenu.types.tsx

@@ -1,28 +0,0 @@
-
-
-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/src/components/Nav/DUMMYNAVDATA.json

@@ -1,234 +0,0 @@
-{
-	"DUMMYNAVDATA": [
-		{
-			"id": "1",
-			"title": "About",
-			"to": "",
-			"links": [
-				{
-					"menuItem": "Features",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Pricing",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Support",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Forums",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				}
-			]
-		},
-		{
-			"id": "2",
-			"title": "Projects",
-			"to": "",
-			"links": [
-				{
-					"menuItem": "Contribute",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Media assets",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Changelog",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Releases",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Upcoming",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Past",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Extra",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Extra Two",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				}
-			]
-		},
-		{
-			"id": "3",
-			"title": "Community",
-			"to": "fake link",
-			"links": [
-				{
-					"menuItem": "Join Discord",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Follow on Twitter",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Email newsletter",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "GitHub discussions",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				}
-			]
-		},
-		{
-			"id": "4",
-			"title": "Store",
-			"to": "",
-			"links": [
-				{
-					"menuItem": "Computers",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "IpadsIpadsIpadsIpadsIpadsIpadsIpadsIpads",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Accessories",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				}
-			]
-		}
-	],
-	"DUMMYCOMPASSNAVDATA": [
-		{
-			"id": "1",
-			"title": "Products",
-			"to": "",
-			"links": [
-				{
-					"menuItem": "Features",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Pricing",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Support",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Forums",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				}
-			]
-		},
-		{
-			"id": "2",
-			"title": "Kits",
-			"to": "",
-			"links": [
-				{
-					"menuItem": "Contribute",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Media assets",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Changelog",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Releases",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Upcoming",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Past",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Extra",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				},
-				{
-					"menuItem": "Extra Two",
-					"link": "#",
-					"src": null,
-					"alt": ""
-				}
-			]
-		}
-	]
-}