@agilant/toga-blox 1.0.8 → 1.0.10

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/Text/Text.stories.tsx

@@ -7,28 +7,65 @@ export default {
 	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'.",
+			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: "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'.",
+			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: "none",
-			description: "The type of HTML element the text should be. Options include 'h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'. Default is 'span'.",
+			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: "none",
-			description: "The type of font family. Use Tailwind CSS classes like 'font-sans', 'font-mono', 'font-serif'. Default is 'font-sans'.",
+			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: "none",
+			control: {
+				type: "text", // Text input control
+			},
 			description: "The main text displayed on the component.",
+			defaultValue: "Testing",
 		},
 		additionalClasses: {
-			control: "none",
+			control: {
+				type: "text", // Text input control
+			},
 			description: "Additional Tailwind CSS classes to be added.",
+			defaultValue: "",
 		},
 	},
 	tags: ["autodocs"],

package/src/components/Text/Text.test.tsx

@@ -7,10 +7,10 @@ describe("<Text />", () => {
 		render(
 			<Text
 				text="Testing"
-				size="md"
-				color="red"
+				size="text-md"
+				color="text-red-500"
 				tag="h1"
-				fontFamily="sans"
+				fontFamily="font-sans"
 			/>
 		);
 	});
@@ -23,30 +23,23 @@ describe("<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");
-	// });
+	test("renders correct font color", () => {
+		const textElement = screen.getByTestId("text");
+		expect(textElement).toHaveClass("text-red-500");
+	});
 
-	FIXME: test("renders correct font size", () => {
-		// Check for class or style attribute
+	test("renders correct font size", () => {
 		const textElement = screen.getByTestId("text");
-		expect(textElement).toHaveClass("text-md"); // Or the specific class for medium size
+		expect(textElement).toHaveClass("text-md");
 	});
 
 	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'
+		expect(textElement.tagName).toBe("H1");
 	});
 });