@agilant/toga-blox 1.0.9 → 1.0.11

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

@@ -1,50 +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: "none",
-			description: "The font size for the text. Use Tailwind CSS classes like 'text-xs', 'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl'. Default is 'text-base'.",
-		},
-		color: {
-			control: "none",
-			description: "The color of the text. Use Tailwind CSS classes like 'text-red-800', 'text-blue-800', 'text-green-800', 'text-slate-950', 'text-black', etc. Default is 'text-black'.",
-		},
-		tag: {
-			control: "none",
-			description: "The type of HTML element the text should be. Options include 'h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'. Default is 'span'.",
-		},
-		fontFamily: {
-			control: "none",
-			description: "The type of font family. Use Tailwind CSS classes like 'font-sans', 'font-mono', 'font-serif'. Default is 'font-sans'.",
-		},
-		text: {
-			control: "none",
-			description: "The main text displayed on the component.",
-		},
-		additionalClasses: {
-			control: "none",
-			description: "Additional Tailwind CSS classes to be added.",
-		},
-	},
-	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,52 +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="md"
-				color="red"
-				tag="h1"
-				fontFamily="sans"
-			/>
-		);
-	});
-
-	test("renders Text component", () => {
-		expect(screen.getByTestId("text")).toBeInTheDocument();
-	});
-
-	test("contain correct text", () => {
-		expect(screen.getByTestId("text")).toHaveTextContent("Testing");
-	});
-
-	// Style-based tests might need adjustments
-
-	// test("renders correct font color", () => {
-	// 	// Adjust the test based on how the color is applied
-	// 	// For example, if using Tailwind, check for the relevant class instead
-	// 	const textElement = screen.getByTestId("text");
-	// 	expect(textElement).toHaveClass("text-red-500");
-	// });
-
-	FIXME: test("renders correct font size", () => {
-		// Check for class or style attribute
-		const textElement = screen.getByTestId("text");
-		expect(textElement).toHaveClass("text-md"); // Or the specific class for medium size
-	});
-
-	test("renders correct font family", () => {
-		const textElement = screen.getByTestId("text");
-		// Check for the presence of the Tailwind CSS class for 'sans' font family
-		expect(textElement).toHaveClass("font-sans");
-	});
-
-	test("renders correct element type", () => {
-		// Assuming 'as' prop is set to 'h1' in your test setup
-		const textElement = screen.getByTestId("text");
-		expect(textElement.tagName).toBe("H1"); // Check that the element is an '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,120 +0,0 @@
-import React from "react";
-
-import Toaster, { ToasterTypes } from ".";
-import { Meta, StoryFn } from "@storybook/react";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-export default {
-	title: "Components/Toaster",
-	component: Toaster,
-	argTypes: {
-		color: {
-			control: "select",
-			description: "The main color displayed on the toaster",
-			options: ["green-800", "red-800", "blue-800", "orange-800"],
-		},
-
-		icon: {
-			table: {
-				disable: true,
-			},
-		},
-		title: {
-			table: {
-				disable: true,
-			},
-		},
-		message: {
-			control: "text",
-			description: "The main text displayed on the toaster",
-		},
-		additionalClasses: {
-			table: {
-				disable: true,
-			},
-		},
-		clearText: {
-			control: "text",
-			description:
-				"The text displayed on the clear message button if set to true",
-		},
-		hasClearText: {
-			control: "boolean",
-			description: "must be set to true to display the clear text button",
-		},
-		fullColor: {
-			control: "boolean",
-			description: "toggle the background color of toaster",
-		},
-		hasBumper: {
-			control: "boolean",
-			description: "toggle the left bumper toaster",
-		},
-		clearMessage: {
-			table: {
-				disable: true,
-			},
-		},
-	},
-
-	tags: ["autodocs"],
-	parameters: {
-		layout: "centered",
-	},
-} as Meta;
-
-const minWidth = "min-w-[200px]";
-
-const Template: StoryFn<ToasterTypes> = (args) => (
-	<div className="">
-		<Toaster {...args} />
-	</div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-	message: "Your action was successful!",
-	additionalClasses: `border-blue-500 ${minWidth}`,
-};
-
-export const WithIconFail = Template.bind({});
-WithIconFail.args = {
-	...Default.args,
-	message: "Your action failed!",
-	color: "red-800",
-	icon: getFontAwesomeIcon("x"),
-	additionalClasses: `border-red-500 ${minWidth}`,
-};
-
-export const WithIconSuccess = Template.bind({});
-WithIconSuccess.args = {
-	...Default.args,
-	color: "green-800",
-	icon: getFontAwesomeIcon("check"),
-	additionalClasses: `border-green-500 ${minWidth}`,
-};
-
-export const WithIconAlert = Template.bind({});
-WithIconAlert.args = {
-	...Default.args,
-	message: "Alert, are you sure!",
-	color: "orange-800",
-	icon: getFontAwesomeIcon("exclamation"),
-	additionalClasses: `border-orange-500  ${minWidth}`,
-};
-
-export const HasClearMessage = Template.bind({});
-HasClearMessage.args = {
-	...Default.args,
-	clearText: "Clear Message",
-	color: "blue-800",
-	hasClearText: true,
-	clearMessage: () => alert("Message Cleared!"),
-};
-
-export const FullColor = Template.bind({});
-FullColor.args = {
-	...Default.args,
-	fullColor: true,
-	color: "blue-800",
-};

package/src/components/Toaster/Toaster.test.tsx

@@ -1,60 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, expect, beforeEach, test, vi } from "vitest";
-import Toaster from "./Toaster";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-describe("Toaster Component Tests", () => {
-	test("renders correctly with minimal props", () => {
-		render(<Toaster message="Test Message" color="green-500" />);
-		expect(screen.getByTestId("toaster")).toHaveTextContent("Test Message");
-		expect(screen.getByTestId("toaster")).toHaveClass("border-green-500");
-	});
-
-	test("renders with an icon when provided", () => {
-		render(
-			<Toaster
-				message="Test Message"
-				color="bg-blue-500"
-				icon={getFontAwesomeIcon("coffee")}
-			/>
-		);
-		expect(screen.getByTestId("toaster")).toBeInTheDocument();
-	});
-
-	test("renders the title when provided", () => {
-		render(
-			<Toaster
-				message="Test Message"
-				color="red-500"
-				title="Test Title"
-			/>
-		);
-		expect(screen.getByTestId("toaster")).toHaveTextContent("Test Title");
-	});
-
-	test("renders with full color background", () => {
-		render(
-			<Toaster
-				message="Test Message"
-				color="blue-500"
-				title="Test Title"
-				fullColor
-			/>
-		);
-		expect(screen.getByTestId("toaster")).toHaveClass("bg-blue-500");
-	});
-
-	test("clears the message on clear icon click", async () => {
-		const clearMessage = vi.fn();
-		render(
-			<Toaster
-				message="Test Message"
-				color="orange-500"
-				clearMessage={clearMessage}
-			/>
-		);
-		const clearButton = screen.getByTestId("clearMessage");
-		fireEvent.click(clearButton);
-		expect(clearMessage).toHaveBeenCalled();
-	});
-});

package/src/components/Toaster/Toaster.tsx

@@ -1,72 +0,0 @@
-import React from "react";
-import Button from "../FormButton/FormButton";
-import { ToasterTypes } from ".";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-const Toaster: React.FC<ToasterTypes> = ({
-	message,
-	additionalClasses = "",
-	clearMessage,
-	color,
-	icon,
-	fullColor = false,
-	hasBumper = true,
-	title = "",
-	hasClearText,
-	clearText,
-}) => {
-	const handleClearMessage = () => {
-		if (clearMessage) {
-			clearMessage(true);
-		}
-	};
-
-	// Simplified Color Handling
-	const iconColorMap: { [key: string]: string } = {
-		"green-800": "text-green-800",
-		"red-800": "text-red-800",
-		"orange-800": "text-orange-800",
-		"blue-800": "text-blue-800",
-	};
-	const borderClass = `border ${hasBumper ? `border-l-4 border-${color}` : "border-l-1"} `;
-	const backgroundColorClass = fullColor ? `bg-${color}` : "bg-white";
-	const textColorClass = fullColor ? "text-white" : "text-black";
-
-	return (
-		<div
-			data-testid="toaster"
-			className={`${borderClass} border-${color} p-4 shadow-lg shadow-boxShadow text-sm ${backgroundColorClass} rounded ${additionalClasses}`}
-		>
-			{title ? (
-				<h3 className="ml-8 font-bold text-xl text-left">{title}</h3>
-			) : null}
-			<div className="flex items-center justify-between">
-				<span className={`mr-2`}>{icon}</span>
-				<span className={textColorClass}>{message}</span>
-				{clearMessage && !hasClearText && (
-					<span className="cursor-pointer hover:bg-gray-200 py-1 px-2 rounded-md">
-						<span
-							data-testid="clearMessage"
-							onClick={handleClearMessage}
-							className={`cursor-pointer ${textColorClass}`}
-						>
-							{getFontAwesomeIcon("times")}
-						</span>
-					</span>
-				)}
-				{hasClearText && clearText && (
-					<Button
-						onClick={handleClearMessage}
-						text={clearText}
-						shape="outline"
-						type="button"
-						isDisabled={false}
-						additionalClasses="ml-2 px-4"
-					/>
-				)}
-			</div>
-		</div>
-	);
-};
-
-export default Toaster;

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

@@ -1,12 +0,0 @@
-export interface ToasterTypes {
-	message: string;
-	additionalClasses?: string;
-	clearMessage?: React.Dispatch<React.SetStateAction<boolean>>;
-	color: string;
-	icon?: JSX.Element | null;
-	fullColor?: boolean;
-	hasBumper?: boolean;
-	title?: string;
-	hasClearText?: boolean;
-	clearText?: string;
-}

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>
-		);
-	});
-};

package/src/utils/generateNavMenu.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import Text from "../components/Text/Text";
-
-type Link = {
-	link: string;
-	menuItem: string;
-};
-
-type NavItem = {
-	title: string;
-	links: Link[];
-};
-
-type NavItemProps = {
-	navDataList: NavItem[];
-};
-
-export const NavList: React.FC<NavItemProps> = ({ navDataList }) => {
-	return (
-		<>
-			{navDataList.map((item) => (
-				<div className="flex flex-col" key={item.title}>
-					<div data-testid={item.title}>
-						<Text
-							size={"md"}
-							color={"black"}
-							text={item.title}
-							fontFamily={""}
-							additionalClasses="font-bold uppercase mb-3"
-						/>
-					</div>
-					<ul>
-						{item.links.map((link) => (
-							<li key={link.menuItem}>
-								<a
-									className="link link-hover my-3"
-									href={link.link}
-									data-testid={link.menuItem}
-								>
-									<Text
-										size={"sm"}
-										color={"black"}
-										text={link.menuItem}
-										fontFamily={""}
-									/>
-								</a>
-							</li>
-						))}
-					</ul>
-				</div>
-			))}
-		</>
-	);
-};