@agilant/toga-blox 1.0.10 → 1.0.11

package/src/components/Text/Text.stories.tsx

@@ -1,87 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import Text from "./Text";
-import { TextTypes } from "./Text.types";
-
-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",
-	},
-} as Meta<TextTypes>;
-
-const Template: StoryFn<TextTypes> = (args) => <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/src/components/Text/Text.test.tsx

@@ -1,45 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, beforeEach, test } from "vitest";
-import Text from "./Text";
-
-describe("<Text />", () => {
-	beforeEach(() => {
-		render(
-			<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.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { TextTypes } from "./Text.types";
-
-const Text: React.FC<TextTypes> = ({
-	size = "text-base",
-	color = "text-black",
-	tag = "span",
-	text,
-	fontFamily = "font-sans",
-	additionalClasses = "",
-	...props
-}) => {
-	const ElementTag: React.ElementType = tag as keyof JSX.IntrinsicElements | React.ComponentType;
-
-	const className = `
-		${size}
-		${color}
-		${fontFamily}
-		${additionalClasses}
-	`;
-
-	return (
-		<ElementTag data-testid="text" className={className} {...props}>
-			{text}
-		</ElementTag>
-	);
-};
-
-export default Text;

package/src/components/Toaster/Toaster.stories.tsx

@@ -1,113 +0,0 @@
-import React from "react";
-import Toaster from ".";
-import { Meta, StoryFn } from "@storybook/react";
-
-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",
-	},
-} as Meta;
-
-const Template: StoryFn = (args) => <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/src/components/Toaster/Toaster.test.tsx

@@ -1,67 +0,0 @@
-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" as "solid" },
-		};
-		const { container } = render(
-			<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(
-			<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(
-			<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(
-			<Toaster
-				message={[testMessage]}
-				hasClearButton
-				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/src/components/Toaster/Toaster.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import { ToasterTypes } from ".";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-const Toaster: React.FC<ToasterTypes> = ({
-	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 (
-		<div
-			data-testid="toaster-test-id"
-			role="alert"
-			aria-live="polite"
-			className={`${shadowClasses} ${containerClasses} ${additionalClasses}`}
-		>
-			{message.map((msg, index) => (
-				<div key={index} className="flex items-center">
-					{maybeIcon && (
-						<div className="mr-4">
-							{getFontAwesomeIcon(maybeIcon.icon, maybeIcon.type)}
-						</div>
-					)}
-
-					<p className={index === 0 ? "font-semibold ml-2" : "ml-2"}>
-						{msg}
-					</p>
-
-					{hasClearButton && (
-						<div
-							data-testid="clear-button"
-							className={`${closeButtonClasses}`}
-							onClick={handleClearMessage}
-						>
-							{getFontAwesomeIcon("x", "solid")}
-						</div>
-					)}
-				</div>
-			))}
-		</div>
-	);
-};
-
-export default Toaster;

package/src/components/Toaster/Toaster.types.ts

@@ -1,13 +0,0 @@
-interface StatusProps {
-	// color: string;
-	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;
-}

package/src/hoc/styling/withStoryBook.tsx

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

package/src/main.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/userHoc/withMemo.tsx

@@ -1,20 +0,0 @@
-// withMemo.jsx
-import React, { memo } from "react";
-
-// Define a generic type that extends React component props
-type ComponentType<P = {}> = React.ComponentType<P>;
-
-// This is the type for the props comparison function
-type ArePropsEqual<P> = (
-	prevProps: Readonly<P>,
-	nextProps: Readonly<P>
-) => boolean;
-
-const withMemo = <P extends {}>(
-	Component: ComponentType<P>,
-	arePropsEqual?: ArePropsEqual<P>
-) => {
-	return memo(Component, arePropsEqual);
-};
-
-export default withMemo;

package/src/utils/assertTagName.tsx

@@ -1,7 +0,0 @@
-import { TagName } from "../components/Text/Text.types";
-function assertTagName(tag: string): asserts tag is TagName {
-	if (!["span", "p", "h1", "h2", "h3", "h4", "h5"].includes(tag)) {
-		throw new Error(`Invalid tag name: ${tag}`);
-	}
-}
-export default assertTagName;

package/src/utils/generateAccordionItem.tsx

@@ -1,96 +0,0 @@
-import React, { Fragment, useState } from "react";
-import { getFontAwesomeIcon } from "./getFontAwesomeIcon";
-
-type NavItem = {
-	title: string;
-	links: { link: string; menuItem: string }[];
-};
-
-type AccordionProps = {
-	navData: NavItem[];
-	accordionParentStyle: string;
-	accordionExpandedStyle: string;
-};
-
-export const Accordion: React.FC<AccordionProps> = ({
-	navData,
-	accordionParentStyle,
-	accordionExpandedStyle,
-}) => {
-	// setting state to be an object, with each key being the index of the accordion item ->
-	//  allows for multiple accordions to be open at once
-	// had to reduce in order for aria-expanded to work
-	const [accordionExpanded, setAccordionExpanded] = useState<
-		Record<number, boolean>
-	>(navData.reduce((acc, _, index) => ({ ...acc, [index]: false }), {}));
-
-	const toggleAccordion = (index: number) => {
-		setAccordionExpanded((prevState) => ({
-			...prevState,
-			[index]: !prevState[index],
-		}));
-	};
-
-	// Expand the accordion when Enter key is pressed for tab users
-	const handleKeyDown = (
-		event: React.KeyboardEvent<HTMLDivElement>,
-		index: number
-	) => {
-		if (event.key === "Enter") {
-			toggleAccordion(index);
-		}
-	};
-
-	return (
-		<>
-			{navData.map((item: NavItem, index: number) => (
-				<Fragment key={item.title}>
-					{/* SCREEN READER:
-						1. should announce expanded status
-						2. should announce that parent item is a button
-						3. should announce title of accordion
-						4. should be able to use enter key to open
-						5. should announce that this is a navigation */}
-					<div
-						className={`cursor-pointer ${accordionParentStyle}`}
-						role="button"
-						onClick={() => toggleAccordion(index)}
-						aria-expanded={accordionExpanded[index]}
-						tabIndex={0}
-						onKeyDown={(event) => handleKeyDown(event, index)} // Attach handleKeyDown function here
-					>
-						<div className="px-6 text-left items-center h-10 select-none flex justify-between flex-row">
-							<div className="flex w-3/4">{item.title}</div>
-							<div className="flex w-1/2 justify-end">
-								{getFontAwesomeIcon(
-									"chevronDown",
-									`text-xs transition-transform duration-300 transform ${accordionExpanded[index] ? "rotate-180" : ""}`
-								)}
-							</div>
-						</div>
-					</div>
-					<div
-						className={`px-6 w-full overflow-hidden transition-[max-height] duration-500 ease-in-out  ${accordionExpanded[index] ? "max-h-96" : "max-h-0"
-							}`}
-						aria-hidden={!accordionExpanded[index]}
-						tabIndex={accordionExpanded[index] ? 0 : -1} // Set tabIndex dynamically
-					>
-						<ul className={`${accordionExpandedStyle}`}>
-							{item.links.map((link) => (
-								<li key={link.menuItem} className="py-1">
-									<a
-										href={link.link}
-										className="hover:underline"
-										data-testid={link.menuItem}
-									>
-										{link.menuItem}
-									</a>
-								</li>
-							))}
-						</ul>
-					</div>
-				</Fragment>
-			))}
-		</>
-	);
-};

package/src/utils/generateFooterContacts.tsx

@@ -1,70 +0,0 @@
-import React from "react";
-import Text from "../components/Text/Text";
-import { ContactInfoItem } from "../components/Footer/ContactInfoItem";
-import { getFontAwesomeIcon } from "./getFontAwesomeIcon";
-
-interface ContactProps {
-	contactDataList: {
-		id: string;
-		address: string;
-		city: string;
-		state: string;
-		googleLink: string;
-		phone: string;
-		email: string;
-	}[];
-}
-
-export const FooterContacts: React.FC<ContactProps> = ({ contactDataList }) => {
-	return contactDataList.map((contact) => {
-		const contactDetails = [
-			{
-				icon: getFontAwesomeIcon("phone"),
-				text: contact.phone,
-			},
-			{
-				icon: getFontAwesomeIcon("envelope"),
-				text: contact.email,
-			},
-		];
-
-		return (
-			<div
-				key={contact.id}
-				data-testid="contact-info"
-				className="flex flex-col pt-2 w-60"
-			>
-				<ContactInfoItem icon={getFontAwesomeIcon("location-dot")}>
-					<a
-						className="flex flex-col hover:underline"
-						href={contact.googleLink}
-						target="_blank"
-					>
-						{[contact.address, contact.city, contact.state].map(
-							(text, index) => (
-								<Text
-									key={index}
-									size={""}
-									color={""}
-									text={text}
-									fontFamily={""}
-								/>
-							)
-						)}
-					</a>
-				</ContactInfoItem>
-				{contactDetails.map((detail, index) => (
-					<ContactInfoItem key={index} icon={detail.icon}>
-						<Text
-							size={""}
-							color={""}
-							text={detail.text}
-							fontFamily={""}
-							additionalClasses="my-1"
-						/>
-					</ContactInfoItem>
-				))}
-			</div>
-		);
-	});
-};