@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -1,144 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import SearchInput from "./SearchInput";
-import { SearchInputProps } from "./SearchInput.types";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-export default {
-	title: "Components/SearchInput",
-	component: SearchInput,
-	tags: ["autodocs"],
-	argTypes: {
-		onButtonClick: { control: "none", table: { disable: true } },
-		inputType: { control: "none", table: { disable: true } },
-		inputName: { control: "none", table: { disable: true } },
-		placeholder: { control: "none" },
-		hasPlaceholder: { control: "none" },
-		inputTextSize: { control: "none" },
-		inputShape: { control: "none" },
-		backgroundColor: { control: "none" },
-		inputWidth: { control: "none" },
-		inputBorderClasses: { control: "none" },
-		buttonText: { control: "none", table: { disable: true } },
-		buttonIcon: { control: "none", table: { disable: true } },
-		buttonIconClasses: { control: "none" },
-		buttonClasses: { control: "none" },
-		containerClasses: { control: "none" },
-	},
-	parameters: { layout: "centered" },
-} as Meta;
-
-const Template: StoryFn<SearchInputProps> = (args) => <SearchInput {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-	inputType: "text",
-	inputName: "default",
-	hasPlaceholder: true,
-	placeholder: "Type something...",
-	inputTextSize: "text-base",
-	inputShape: "rounded-md",
-	backgroundColor: "bg-white",
-	inputWidth: "w-80",
-	inputBorderClasses: "border border-gray-300",
-	buttonText: <span>Search</span>,
-	buttonClasses: "bg-blue-500 text-white px-4 py-2 rounded-md",
-	buttonIcon: getFontAwesomeIcon("search"),
-	buttonIconClasses: "text-white",
-	containerClasses: "flex items-center space-x-2",
-	onButtonClick: (value) => alert(`Button clicked with input: ${value}`),
-};
-
-export const CommerceSearchInput = Template.bind({});
-CommerceSearchInput.args = {
-	inputType: "search",
-	inputName: "commerceSearch",
-	hasPlaceholder: true,
-	placeholder: "Search for product...",
-	inputTextSize: "text-sm",
-	inputShape: "",
-	backgroundColor: "bg-gray-50",
-	inputWidth: "w-full",
-	inputBorderClasses: "border border-gray-300 focus:outline-none rounded-l-md",
-	buttonIcon: getFontAwesomeIcon("search"),
-	buttonIconClasses: "text-white",
-	buttonClasses: "bg-teal-600 p-2 rounded-r-md hover:bg-teal-700",
-	containerClasses: "flex items-center shadow-sm overflow-hidden",
-	onButtonClick: (value) => console.log(`Searching for: ${value}`),
-};
-
-
-export const WithIconButton = Template.bind({});
-WithIconButton.args = {
-	inputType: "search",
-	inputName: "searchIcon",
-	hasPlaceholder: true,
-	placeholder: "Search...",
-	inputTextSize: "text-md",
-	inputShape: "rounded-full",
-	backgroundColor: "bg-gray-50",
-	inputWidth: "w-64",
-	inputBorderClasses: "border border-gray-400",
-	buttonIcon: getFontAwesomeIcon("magnifying-glass"),
-	buttonIconClasses: "text-blue-500",
-	buttonClasses: "p-2",
-	containerClasses: "flex items-center",
-	onButtonClick: (value) => console.log(`Searching for: ${value}`),
-};
-
-export const WithoutButton = Template.bind({});
-WithoutButton.args = {
-	inputType: "text",
-	inputName: "withoutButton",
-	hasPlaceholder: true,
-	placeholder: "No button here...",
-	inputTextSize: "text-sm",
-	inputShape: "rounded",
-	backgroundColor: "bg-gray-100",
-	inputWidth: "w-full",
-	inputBorderClasses: "border border-gray-300",
-	containerClasses: "flex items-center",
-	onButtonClick: () => { },
-};
-
-export const CustomizedButton = Template.bind({});
-CustomizedButton.args = {
-	inputType: "text",
-	inputName: "customButton",
-	hasPlaceholder: true,
-	placeholder: "Enter your query...",
-	inputTextSize: "text-lg",
-	inputShape: "rounded-lg",
-	backgroundColor: "bg-white",
-	inputWidth: "w-96",
-	inputBorderClasses: "border border-blue-500",
-	buttonText: (
-		<span className="flex items-center space-x-1">
-			{getFontAwesomeIcon("arrow-right")}
-			<span>Go</span>
-		</span>
-	),
-	buttonClasses:
-		"bg-green-600 text-white hover:bg-green-700 transition-colors rounded-full px-5 py-2",
-	buttonIcon: null,
-	containerClasses: "flex items-center space-x-3",
-	onButtonClick: (value) => alert(`Navigating with: ${value}`),
-};
-
-export const DisabledInput = Template.bind({});
-DisabledInput.args = {
-	inputType: "text",
-	inputName: "disabledInput",
-	hasPlaceholder: true,
-	placeholder: "Disabled...",
-	inputTextSize: "text-sm",
-	inputShape: "rounded",
-	backgroundColor: "bg-gray-200",
-	inputWidth: "w-72",
-	inputBorderClasses: "border border-gray-400 cursor-not-allowed",
-	buttonText: <span>Disabled</span>,
-	buttonClasses: "bg-gray-500 text-gray-300 px-4 py-2 rounded",
-	buttonIcon: getFontAwesomeIcon("ban"),
-	buttonIconClasses: "text-gray-400",
-	containerClasses: "flex items-center",
-	onButtonClick: () => alert("Button is disabled."),
-};

package/src/components/SearchInput/SearchInput.tsx

@@ -1,81 +0,0 @@
-import React, { useState } from "react";
-import FormButton from "../FormButton/FormButton";
-import { SearchInputProps } from "./SearchInput.types";
-
-const SearchInput: React.FC<SearchInputProps> = ({
-	label,
-	inputName,
-	inputType,
-	hasPlaceholder,
-	placeholder,
-	inputTextSize,
-	inputShape,
-	backgroundColor,
-	inputWidth,
-	inputBorderClasses,
-	buttonClasses,
-	buttonText,
-	buttonIcon,
-	buttonIconClasses,
-	containerClasses,
-	onButtonClick,
-	role,
-	ariaLabel,
-}) => {
-	const [inputValue, setInputValue] = useState<string>("");
-
-	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setInputValue(e.target.value);
-	};
-
-	const handleButtonClick = (
-		event: React.MouseEvent<
-			HTMLButtonElement | HTMLAnchorElement,
-			MouseEvent
-		>
-	) => {
-		event.preventDefault();
-		if (event.currentTarget instanceof HTMLButtonElement) {
-			onButtonClick(inputValue);
-		}
-	};
-
-	return (
-		<div className={containerClasses} role={role} aria-label={ariaLabel}>
-			<form className="w-full">
-				<label htmlFor={inputName} className={`sr-only`}>
-					{label}
-				</label>
-				<div className="flex w-full">
-					<div className="flex w-full">
-						<input
-							type={inputType}
-							placeholder={
-								hasPlaceholder ? placeholder : undefined
-							}
-							name={inputName}
-							id={inputName}
-							value={inputValue}
-							onChange={handleInputChange}
-							className={`flex p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputWidth} ${inputBorderClasses}`}
-						/>
-						<div
-							className={`flex items-center justify-center h-full`}
-						>
-							<FormButton
-								text={buttonText}
-								icon={buttonIcon}
-								iconClasses={buttonIconClasses}
-								as="button"
-								additionalClasses={buttonClasses}
-								onClick={handleButtonClick}
-							/>
-						</div>
-					</div>
-				</div>
-			</form>
-		</div>
-	);
-};
-
-export default SearchInput;

package/src/components/SearchInput/SearchInput.types.ts

@@ -1,28 +0,0 @@
-import React from "react";
-
-export interface SearchInputProps {
-	onChange?: (
-		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
-	) => void;
-	value?: string;
-	label: React.ReactNode;
-	role?: string;
-	ariaLabel?: string;
-	inputType: string;
-	inputName: string;
-	hasPlaceholder: boolean;
-	placeholder: string;
-	containerClasses?: string;
-	inputTextSize?: string;
-	inputWidth?: string;
-	inputShape?: string;
-	borderColor?: string;
-	backgroundColor?: string;
-	inputBorderClasses?: string;
-	additionalClasses?: string;
-	buttonText?: JSX.Element;
-	buttonClasses?: string;
-	buttonIcon?: JSX.Element | null;
-	buttonIconClasses?: string;
-	onButtonClick: (inputValue: string) => void;
-}

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

@@ -1,88 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,32 +0,0 @@
-
-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;
-}