@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,88 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Slider from "./Slider";
+import { SliderProps } from "./Slider.types";
+
+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',
+	},
+} as Meta;
+
+const Template: StoryFn<SliderProps> = (args) => <Slider {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+	min: 0,
+	max: 100,
+	step: 1,
+	minValue: 20,
+	maxValue: 80,
+	onMinChange: (value: number) => console.log('Min value changed:', value),
+	onMaxChange: (value: number) => 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: number) => console.log('Min value changed:', value),
+	onMaxChange: (value: number) => 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: number) => console.log('Min value changed:', value),
+	onMaxChange: (value: number) => console.log('Max value changed:', value),
+	title: 'Price Range',
+};

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,139 @@
+import React, { useRef, useState } from "react";
+import { SliderProps } from "./Slider.types";
+
+const Slider: React.FC<SliderProps> = ({
+	min,
+	max,
+	step,
+	minValue,
+	maxValue,
+	onMinChange,
+	onMaxChange,
+	additionalClasses = "",
+	containerClasses = "p-8 border rounded-lg shadow-md bg-white max-w-lg",
+	title = "Range",
+	titleClasses = "text-xl text-black mb-4 font-bold",
+	minLabel = "Min Value",
+	maxLabel = "Max Value",
+	labelClasses = "text-sm text-gray-500",
+	inputClasses = "mt-2 text-lg font-semibold text-gray-900 border border-gray-300 rounded px-2 py-1 text-center w-20",
+	sliderClasses = "relative w-full h-2 bg-gray-300 rounded",
+	rangeClasses = "absolute h-2 bg-teal-500 rounded",
+	thumbClasses = "absolute w-6 h-6 bg-white border-2 border-teal-500 rounded-full cursor-pointer",
+	onAddSection,
+}) => {
+	const [minThumbValue, setMinThumbValue] = useState(minValue);
+	const [maxThumbValue, setMaxThumbValue] = useState(maxValue);
+	const sliderRef = useRef<HTMLDivElement>(null);
+	const isDragging = useRef<"min" | "max" | null>(null);
+
+	const getPercentage = (value: number) =>
+		((value - min) / (max - min)) * 100;
+
+	const handleMinChange = (value: number) => {
+		if (value <= maxThumbValue && value >= min) {
+			setMinThumbValue(value);
+			onMinChange(value);
+		}
+	};
+
+	const handleMaxChange = (value: number) => {
+		if (value >= minThumbValue && value <= max) {
+			setMaxThumbValue(value);
+			onMaxChange(value);
+		}
+	};
+
+	const handlePointerMove = (event: React.PointerEvent) => {
+		if (sliderRef.current && isDragging.current) {
+			const sliderRect = sliderRef.current.getBoundingClientRect();
+			const sliderWidth = sliderRect.width;
+			const clickX = event.clientX - sliderRect.left;
+			const newValue = min + (clickX / sliderWidth) * (max - min);
+
+			if (isDragging.current === "min") {
+				handleMinChange(Math.round(newValue / step) * step);
+			} else if (isDragging.current === "max") {
+				handleMaxChange(Math.round(newValue / step) * step);
+			}
+		}
+	};
+
+	const handlePointerUp = () => {
+		isDragging.current = null;
+	};
+
+	const handlePointerDown = (thumb: "min" | "max") => {
+		isDragging.current = thumb;
+	};
+
+	return (
+		<div className={`${containerClasses} ${additionalClasses}`}>
+			<h3 className={titleClasses}>{title}</h3>
+			<hr className="border-gray-300 mb-6" />
+			<div className="flex justify-between gap-4 mb-6">
+				<div className="flex flex-col items-center">
+					<span className={labelClasses}>{minLabel}</span>
+					<input
+						type="number"
+						value={minThumbValue}
+						onChange={(e) => handleMinChange(Number(e.target.value))}
+						className={inputClasses}
+					/>
+				</div>
+				<div className="flex flex-col items-center">
+					<span className={labelClasses}>{maxLabel}</span>
+					<input
+						type="number"
+						value={maxThumbValue}
+						onChange={(e) => handleMaxChange(Number(e.target.value))}
+						className={inputClasses}
+					/>
+				</div>
+			</div>
+			<div
+				className={sliderClasses}
+				ref={sliderRef}
+				onPointerMove={handlePointerMove}
+				onPointerUp={handlePointerUp}
+				onPointerCancel={handlePointerUp}
+				onPointerLeave={handlePointerUp}
+			>
+				<div
+					className={rangeClasses}
+					style={{
+						left: `${getPercentage(minThumbValue)}%`,
+						right: `${100 - getPercentage(maxThumbValue)}%`,
+					}}
+				/>
+				<div
+					className={thumbClasses}
+					style={{
+						left: `${getPercentage(minThumbValue)}%`,
+						transform: "translate(-50%, -50%)",
+						top: "50%",
+						zIndex: 5,
+					}}
+					onPointerDown={() => handlePointerDown("min")}
+				/>
+				<div
+					className={thumbClasses}
+					style={{
+						left: `${getPercentage(maxThumbValue)}%`,
+						transform: "translate(-50%, -50%)",
+						top: "50%",
+						zIndex: 4,
+					}}
+					onPointerDown={() => handlePointerDown("max")}
+				/>
+			</div>
+			{onAddSection && (
+				<button onClick={onAddSection} className="mt-4 text-blue-500">
+					Add Section
+				</button>
+			)}
+		</div>
+	);
+};
+
+export default Slider;

package/src/components/Slider/Slider.types.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/src/components/Submenus/AdminSubmenu.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { AdminSubmenuProps } from "./types";
+
+const AdminSubmenu: React.FC<AdminSubmenuProps> = ({
+	callToActionChildren,
+	secondCallToActionChildren,
+	menuClasses = "p-4 bg-white rounded-lg shadow-lg",
+}) => {
+	return (
+		<div className={menuClasses}>
+			<div>{callToActionChildren}</div>
+			<div>{secondCallToActionChildren}</div>
+		</div>
+	);
+};
+
+export default AdminSubmenu;

package/src/components/Submenus/AlertSubmenu.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import AlertSubmenuItem from "./AlertSubmenuItem";
+import { AlertSubmenuProps } from "./types";
+
+const AlertSubmenu: React.FC<AlertSubmenuProps> = ({
+	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) => (
+		<AlertSubmenuItem
+			key={index}
+			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"
+		/>
+	));
+
+	return (
+		<div className={menuContainerClasses}>
+			<div className={menuHeaderContainerClasses}>
+				<span className={newAlertCountClasses}>
+					{newAlertCount} alerts
+				</span>
+				<button
+					className={clearAlertsTextClasses}
+					onClick={onClearAlerts}
+				>
+					{clearAlertsText}
+				</button>
+			</div>
+			<div className={alertListContainerClasses}>
+				<ul>{alertList}</ul>
+				<div className="text-center p-4 text-gray-500">
+					All up to date!
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default AlertSubmenu;

package/src/components/Submenus/AlertSubmenuItem.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { AlertSubmenuItemProps } from "./types";
+
+const AlertSubmenuItem: React.FC<AlertSubmenuItemProps> = ({
+	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 (
+		<li className={itemContainerClasses}>
+			<a href={link} className="flex items-start gap-4">
+				<div className="flex-shrink-0 pt-2">
+					{status && (
+						<span
+							className={`inline-block w-3 h-3 rounded-full ${statusColor}`}
+							aria-label="New"
+						></span>
+					)}
+				</div>
+				<div>
+					<h6 className={titleClasses}>{title}</h6>
+					{externalLink && (
+						<p className={externalLinkClasses}>{externalLink}</p>
+					)}
+					<p className={subtitleClasses}>{subtitle}</p>
+				</div>
+			</a>
+		</li>
+	);
+};
+
+export default AlertSubmenuItem;

package/src/components/Submenus/types.tsx

@@ -0,0 +1,32 @@
+
+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/src/components/Toaster/Toaster.stories.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 import Toaster, { ToasterTypes } from ".";
 import { Meta, StoryFn } from "@storybook/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faExclamation, faX } from "@fortawesome/free-solid-svg-icons";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 export default {
 	title: "Components/Toaster",
@@ -60,7 +59,6 @@ export default {
 
 	tags: ["autodocs"],
 	parameters: {
-		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
 		layout: "centered",
 	},
 } as Meta;
@@ -84,7 +82,7 @@ WithIconFail.args = {
 	...Default.args,
 	message: "Your action failed!",
 	color: "red-800",
-	icon: <FontAwesomeIcon icon={faX} />,
+	icon: getFontAwesomeIcon("x"),
 	additionalClasses: `border-red-500 ${minWidth}`,
 };
 
@@ -92,7 +90,7 @@ export const WithIconSuccess = Template.bind({});
 WithIconSuccess.args = {
 	...Default.args,
 	color: "green-800",
-	icon: <FontAwesomeIcon icon={faCheck} />,
+	icon: getFontAwesomeIcon("check"),
 	additionalClasses: `border-green-500 ${minWidth}`,
 };
 
@@ -101,7 +99,7 @@ WithIconAlert.args = {
 	...Default.args,
 	message: "Alert, are you sure!",
 	color: "orange-800",
-	icon: <FontAwesomeIcon icon={faExclamation} />,
+	icon: getFontAwesomeIcon("exclamation"),
 	additionalClasses: `border-orange-500  ${minWidth}`,
 };
 

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

@@ -1,8 +1,7 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, expect, beforeEach, test, vi } from "vitest";
 import Toaster from "./Toaster";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCoffee, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 describe("Toaster Component Tests", () => {
 	test("renders correctly with minimal props", () => {
@@ -15,8 +14,8 @@ describe("Toaster Component Tests", () => {
 		render(
 			<Toaster
 				message="Test Message"
-				color="blue-500"
-				icon={<FontAwesomeIcon icon={faCoffee} />}
+				color="bg-blue-500"
+				icon={getFontAwesomeIcon("coffee")}
 			/>
 		);
 		expect(screen.getByTestId("toaster")).toBeInTheDocument();

package/src/components/Toaster/Toaster.tsx

@@ -1,8 +1,7 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import Button from "../FormButton/FormButton";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { ToasterTypes } from ".";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 const Toaster: React.FC<ToasterTypes> = ({
 	message,
@@ -29,13 +28,8 @@ const Toaster: React.FC<ToasterTypes> = ({
 		"orange-800": "text-orange-800",
 		"blue-800": "text-blue-800",
 	};
-	const iconClass = iconColorMap[color] || "";
-	// Improved CSS Class Composition
-	const borderClass = `border ${
-		hasBumper ? `border-l-4 border-${color}` : "border-l-1"
-	} `;
+	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 (
@@ -45,29 +39,27 @@ const Toaster: React.FC<ToasterTypes> = ({
 		>
 			{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 ${iconClass}`}>{icon}</span>
+				<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">
-						<FontAwesomeIcon
+						<span
 							data-testid="clearMessage"
 							onClick={handleClearMessage}
 							className={`cursor-pointer ${textColorClass}`}
-							icon={faTimes}
-						/>
+						>
+							{getFontAwesomeIcon("times")}
+						</span>
 					</span>
 				)}
 				{hasClearText && clearText && (
 					<Button
 						onClick={handleClearMessage}
 						text={clearText}
-						color="primary"
 						shape="outline"
-						type={"button"}
+						type="button"
 						isDisabled={false}
 						additionalClasses="ml-2 px-4"
 					/>

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

@@ -2,8 +2,8 @@ export interface ToasterTypes {
 	message: string;
 	additionalClasses?: string;
 	clearMessage?: React.Dispatch<React.SetStateAction<boolean>>;
-	color: "green-800" | "red-800" | "yellow-800" | "blue-800" | "orange-800";
-	icon?: JSX.Element;
+	color: string;
+	icon?: JSX.Element | null;
 	fullColor?: boolean;
 	hasBumper?: boolean;
 	title?: string;

package/src/utils/assertTagName.tsx

@@ -1,4 +1,4 @@
-import { TagName } from "../components/Text/Text";
+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}`);

package/src/utils/generateAccordionItem.tsx

@@ -1,6 +1,5 @@
 import React, { Fragment, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { getFontAwesomeIcon } from "./getFontAwesomeIcon";
 
 type NavItem = {
 	title: string;
@@ -63,21 +62,16 @@ export const Accordion: React.FC<AccordionProps> = ({
 						<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">
-								<FontAwesomeIcon
-									className={`text-xs transition-transform duration-300 transform ${
-										accordionExpanded[index]
-											? "rotate-180"
-											: ""
-									}`}
-									icon={faChevronDown}
-								/>
+								{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"
-						}`}
+						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
 					>

package/src/utils/generateFooterContacts.tsx

@@ -1,12 +1,7 @@
 import React from "react";
 import Text from "../components/Text/Text";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-	faEnvelope,
-	faLocationDot,
-	faPhone,
-} from "@fortawesome/free-solid-svg-icons";
 import { ContactInfoItem } from "../components/Footer/ContactInfoItem";
+import { getFontAwesomeIcon } from "./getFontAwesomeIcon";
 
 interface ContactProps {
 	contactDataList: {
@@ -24,11 +19,11 @@ export const FooterContacts: React.FC<ContactProps> = ({ contactDataList }) => {
 	return contactDataList.map((contact) => {
 		const contactDetails = [
 			{
-				icon: faPhone,
+				icon: getFontAwesomeIcon("phone"),
 				text: contact.phone,
 			},
 			{
-				icon: faEnvelope,
+				icon: getFontAwesomeIcon("envelope"),
 				text: contact.email,
 			},
 		];
@@ -39,7 +34,7 @@ export const FooterContacts: React.FC<ContactProps> = ({ contactDataList }) => {
 				data-testid="contact-info"
 				className="flex flex-col pt-2 w-60"
 			>
-				<ContactInfoItem icon={faLocationDot}>
+				<ContactInfoItem icon={getFontAwesomeIcon("location-dot")}>
 					<a
 						className="flex flex-col hover:underline"
 						href={contact.googleLink}

package/src/utils/getFontAwesomeIcon.tsx

@@ -1,23 +1,18 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import * as Icons from "@fortawesome/free-solid-svg-icons";
 
-export const getFontAwesomeIcon = (
-	iconName: string
-): React.ReactElement | null => {
+export const getFontAwesomeIcon = (iconName: string, className = ""): React.ReactElement | null => {
 	try {
-		// Extract the required icon using bracket notation
-		const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(
-			1
-		)}`;
-		const icon = (Icons as any)[iconKey];
+		const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(1)}`;
+		const icon = Icons[iconKey as keyof typeof Icons] as IconDefinition;
 
-		if (!icon) {
-			throw new Error(`Icon not found: ${iconName}`);
+		if (icon) {
+			return <FontAwesomeIcon icon={icon} className={className} />;
+		} else {
+			throw new Error(`Icon not found or invalid type: ${iconName}`);
 		}
-
-		// Render the FontAwesomeIcon with the selected icon
-		return <FontAwesomeIcon icon={icon} />;
 	} catch (error) {
 		console.error(`Error loading Font Awesome icon: ${iconName}`, error);
 		return null;