@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/GenericList/GenericList.tsx

@@ -1,145 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { VirtualItem, useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback } from "react";
-
-type GenericData = {
-	id: string;
-	[key: string]: any;
-};
-
-export type GenericListTypes<T> = {
-	data: T[];
-	renderItem: (item: T) => JSX.Element;
-	itemHeight?: number;
-	containerHeight?: number;
-	containerClasses?: string;
-	listDirection?: "horizontal" | "vertical";
-	hasVirtualization?: boolean;
-	listType: "ordered" | "unordered" | "none";
-};
-
-const GenericList = <T extends GenericData>({
-	data,
-	renderItem,
-	itemHeight,
-	containerHeight,
-	containerClasses = "",
-	listDirection = "vertical",
-	hasVirtualization = false,
-	listType = "none",
-}: GenericListTypes<T>) => {
-	const listClasses = listDirection === "horizontal" ? "flex flex-row" : "flex flex-col";
-	const parentRef = React.createRef<HTMLElement>();
-
-	const [virtualItems, setVirtualItems] = useState<VirtualItem<Element>[]>([]);
-	const [nonVirtualItems, setNonVirtualItems] = useState<T[]>([]);
-
-	const estimateSize = useCallback(
-		() => (itemHeight ? itemHeight : 0),
-		[itemHeight]
-	);
-
-	const count = data.length;
-
-	const virtualizer = useVirtualizer({
-		count,
-		estimateSize,
-		overscan: count,
-		getScrollElement: () => parentRef.current,
-	});
-
-	useEffect(() => {
-		if (hasVirtualization) {
-			setVirtualItems(virtualizer.getVirtualItems());
-		} else {
-			setNonVirtualItems(data);
-		}
-	}, [hasVirtualization, virtualizer, data]);
-
-	return (
-		<>
-			{(() => {
-				switch (listType) {
-					case "ordered":
-						return (
-							<ol
-								ref={parentRef as React.RefObject<HTMLOListElement>}
-								style={
-									hasVirtualization
-										? { height: containerHeight, overflow: "scroll" }
-										: {}
-								}
-								className={`${listClasses} ${containerClasses}`}
-							>
-								{hasVirtualization
-									? virtualItems.map((virtualItem) => (
-										<li
-											key={virtualItem.index}
-											style={{ height: itemHeight }}
-										>
-											{renderItem(data[virtualItem.index])}
-										</li>
-									))
-									: nonVirtualItems.map((item) => (
-										<li key={item.id}>{renderItem(item)}</li>
-									))}
-							</ol>
-						);
-					case "unordered":
-						return (
-							<ul
-								ref={parentRef as React.RefObject<HTMLUListElement>}
-								style={
-									hasVirtualization
-										? { height: containerHeight, overflow: "scroll" }
-										: {}
-								}
-								className={`${listClasses} ${containerClasses}`}
-							>
-								{hasVirtualization
-									? virtualItems.map((virtualItem) => (
-										<li
-											key={virtualItem.index}
-											style={{ height: itemHeight }}
-										>
-											{renderItem(data[virtualItem.index])}
-										</li>
-									))
-									: nonVirtualItems.map((item) => (
-										<li key={item.id}>{renderItem(item)}</li>
-									))}
-							</ul>
-						);
-					case "none":
-					default:
-						return (
-							<div
-								ref={parentRef as React.RefObject<HTMLDivElement>}
-								style={
-									hasVirtualization
-										? { height: containerHeight, overflow: "scroll" }
-										: {}
-								}
-								className={`${listClasses} ${containerClasses}`}
-							>
-								{hasVirtualization
-									? virtualItems.map((virtualItem) => (
-										<div
-											key={virtualItem.index}
-											style={{ height: itemHeight }}
-										>
-											{renderItem(data[virtualItem.index])}
-										</div>
-									))
-									: nonVirtualItems.map((item) => (
-										<div key={item.id}>{renderItem(item)}</div>
-									))}
-							</div>
-						);
-				}
-			})()}
-		</>
-	);
-};
-
-export default GenericList;

package/src/components/GenericList/templates/DummyDataList.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import Text from "../../Text/index";
-
-export type TreeListProps = {
-	item: string;
-};
-
-const TreeList: React.FC<TreeListProps> = ({ item }) => {
-	return (
-		<>
-			<Text
-				size="lg"
-				color="black"
-				text={item}
-				fontFamily="font-mono"
-				tag="p"
-				additionalClasses=""
-			/>
-		</>
-	);
-};
-
-export default TreeList;

package/src/components/GenericList/templates/DynamicIconList.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import IconButton from "../../IconButton/index";
-import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
-import { TagName } from "../../Text/index";
-
-export type IconButtonsListProps = {
-	id: string;
-	iconColor?: string;
-	iconLabel?: string; // Ensure this matches IconButtonTypes if necessary
-	backgroundColor?: string;
-	size?: "xs" | "sm" | "md" | "lg" | string;
-	icon: string;
-	hoverBorder?: "border" | "none" | string;
-	limitCharacters?: (text: string) => string;
-	indicatorSize?: "sm" | "md" | "lg" | string;
-	iconBorder?: "border" | "none" | string;
-	hoverBackground: string;
-	hoverColor: string;
-	limitIndicator: boolean;
-	indicatorNumber: string;
-	additionalContainerClasses: string;
-	onClick?: () => void;
-	text: {
-		size: string;
-		color: string;
-		text: string;
-		fontFamily: string;
-		tag: TagName;
-		additionalClasses: string;
-	};
-	to?: string;
-	href?: string;
-};
-
-const DynamicIconButtonList: React.FC<IconButtonsListProps> = (props) => {
-	return (
-		<IconButton
-			key={props.id}
-			onClick={props.onClick}
-			backgroundColor={props.backgroundColor}
-			iconColor={props.iconColor}
-			iconLabel={props.iconLabel}
-			iconBorder={props.iconBorder}
-			icon={getFontAwesomeIcon(props.icon)}
-			hoverBackgroundColor={props.hoverBackground}
-			hoverBorderColor={props.hoverBorder}
-			indicatorNumber={props.indicatorNumber}
-			indicatorSize={props.indicatorSize}
-			additionalContainerClasses={props.additionalContainerClasses}
-			text={props.text.text}
-		/>
-	);
-};
-
-export default DynamicIconButtonList;

package/src/components/GetSupport/GetSupport.stories.tsx

@@ -1,80 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import GetSupport from "./GetSupport";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-export default {
-	title: "Components/GetSupport",
-	component: GetSupport,
-	argTypes: {
-		to: {
-			control: "none",
-			description: "URL to navigate to when the button is clicked.",
-		},
-		icon: {
-			control: "none",
-			description: "FontAwesome icon to be displayed.",
-		},
-		iconClasses: {
-			control: "none",
-			description: "Tailwind CSS classes for icon styling.",
-		},
-		title: {
-			control: "none",
-			description: "The main title text.",
-		},
-		titleClasses: {
-			control: "none",
-			description: "Tailwind CSS classes for title styling.",
-		},
-		subTitle: {
-			control: "none",
-			description: "Optional subtitle text.",
-		},
-		subTitleClasses: {
-			control: "none",
-			description: "Tailwind CSS classes for subtitle styling.",
-		},
-		containerClasses: {
-			control: "none",
-			description: "Tailwind CSS classes for container styling.",
-		},
-		as: {
-			control: "none",
-			description: "The element type to use for the button.",
-		},
-	},
-	tags: ["autodocs"],
-} as Meta;
-
-const Template: StoryFn = (args) => (
-	<GetSupport to={""} icon={null} title={""} {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-	icon: getFontAwesomeIcon("phone"),
-	as: "a",
-	to: "/support",
-	title: "Get Support",
-	iconClasses:
-		"p-4 bg-slate-600 text-white group-hover:text-slate-600 rounded-full group-hover:bg-slate-200",
-	titleClasses: "text-xl font-bold",
-	subTitle: "1-800-123-4567",
-	subTitleClasses: "text-md text-gray-500",
-	containerClasses:
-		"flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group",
-};
-
-export const WithoutPhoneNumber = Template.bind({});
-WithoutPhoneNumber.args = {
-	icon: getFontAwesomeIcon("phone"),
-	as: "a",
-	to: "/support",
-	title: "Get Support",
-	iconClasses:
-		"p-4 bg-slate-600 text-white group-hover:text-slate-600 rounded-full group-hover:bg-slate-200",
-	titleClasses: "text-xl font-bold",
-	subTitleClasses: "text-md text-gray-500",
-	containerClasses:
-		"flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group",
-};

package/src/components/GetSupport/GetSupport.test.tsx

@@ -1,62 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import GetSupport from './GetSupport';
-import { MemoryRouter } from 'react-router-dom';
-import { describe, expect, it } from 'vitest';
-
-describe('GetSupport Component', () => {
-	const defaultProps = {
-		as: 'link',
-		to: '/support',
-		icon: <div>Icon</div>,
-		iconClasses: 'p-2 w-12 h-12 bg-gray-200 rounded-full',
-		title: 'Get Support',
-		titleClasses: 'text-xl font-bold',
-		subTitle: '1-800-123-4567',
-		subTitleClasses: 'text-md text-gray-500',
-		containerClasses: 'flex items-center gap-4 p-2 bg-white rounded-lg',
-	};
-
-	it('renders without crashing', () => {
-		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
-		expect(screen.getByText('Get Support')).toBeInTheDocument();
-	});
-
-	it('renders the title', () => {
-		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
-		expect(screen.getByText('Get Support')).toBeInTheDocument();
-	});
-
-	it('renders the subtitle', () => {
-		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
-		expect(screen.getByText('1-800-123-4567')).toBeInTheDocument();
-	});
-
-	it('applies container classes', () => {
-		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
-		const container = screen.getByRole('link').firstChild;
-		expect(container).toHaveClass('flex items-center gap-4 p-2 bg-white rounded-lg');
-	});
-
-	it('applies title classes', () => {
-		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
-		const title = screen.getByText('Get Support');
-		expect(title).toHaveClass('text-xl font-bold');
-	});
-
-	it('applies subtitle classes', () => {
-		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
-		const subTitle = screen.getByText('1-800-123-4567');
-		expect(subTitle).toHaveClass('text-md text-gray-500');
-	});
-
-	it('renders without subtitle', () => {
-		const { container } = render(
-			<GetSupport
-				{...defaultProps}
-				subTitle={undefined}
-			/>,
-			{ wrapper: MemoryRouter }
-		);
-		expect(container.querySelector('.text-md.text-gray-500')).toBeNull();
-	});
-});

package/src/components/GetSupport/GetSupport.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import FormButton from "../FormButton/FormButton";
-import Text from "../Text/Text";
-import { GetSupportTypes } from "./GetSupport.types";
-
-const GetSupport: React.FC<GetSupportTypes> = ({
-	as,
-	to,
-	icon,
-	iconClasses,
-	title,
-	titleClasses,
-	subTitle,
-	subTitleClasses,
-	containerClasses,
-}) => {
-	return (
-		<FormButton
-			as={as}
-			to={to}
-			text={
-				<div className={`flex  items-center gap-4 ${containerClasses}`}>
-					<div
-						className={`flex items-center justify-center ${iconClasses}`}
-					>
-						{icon}
-					</div>
-					<div className="flex flex-col">
-						<Text
-							size="text-md"
-							color="text-black"
-							text={title}
-							fontFamily="font-serif"
-							tag="p"
-							additionalClasses={titleClasses}
-						/>
-						{subTitle && (
-							<Text
-								size="text-md"
-								color="text-black"
-								text={subTitle}
-								fontFamily="font-serif"
-								tag="p"
-								additionalClasses={subTitleClasses}
-							/>
-						)}
-					</div>
-				</div>
-			}
-			backgroundColor="bg-transparent"
-			fontColor="text-black"
-			borderColor="border-none"
-			shape="rounded-md"
-			additionalClasses={containerClasses}
-		/>
-	);
-};
-
-export default GetSupport;

package/src/components/GetSupport/GetSupport.types.ts

@@ -1,11 +0,0 @@
-export type GetSupportTypes = {
-	as?: string;
-	to: string;
-	icon: JSX.Element | null;
-	iconClasses?: string;
-	title: string;
-	titleClasses?: string;
-	subTitle?: string;
-	subTitleClasses?: string;
-	containerClasses?: string;
-};

package/src/components/HamburgerButton/Hamburger.stories.tsx

@@ -1,225 +0,0 @@
-// src/components/HamburgerButton.stories.tsx
-import { useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { motion, AnimatePresence } from 'framer-motion';
-import HamburgerButton from './HamburgerButton';
-import { HamburgerButtonProps } from './HamburgerButton.types';
-import GetSupport from '../GetSupport/GetSupport';
-import { getFontAwesomeIcon } from '../../utils/getFontAwesomeIcon';
-import IconButton from '../IconButton';
-
-export default {
-	title: 'Components/HamburgerButton',
-	component: HamburgerButton,
-	parameters: {
-		docs: {
-			description: {
-				component: `
-The **HamburgerButton** component toggles between a hamburger icon and an "X" icon with smooth animations using Framer Motion.
-It overlays on top of everything, and a gray background appears on toggle.
-`,
-			},
-		},
-	},
-	argTypes: {
-		containerClasses: {
-			control: 'none',
-			description: 'CSS classes for styling the container of the button.',
-			defaultValue: 'bg-gray-200',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: 'bg-gray-200' },
-			},
-		},
-		burgerAriaLabel: {
-			control: 'none',
-			description: 'Aria-label for accessibility to describe the button.',
-			defaultValue: 'Toggle navigation',
-			table: {
-				type: { summary: 'string' },
-				defaultValue: { summary: 'Toggle navigation' },
-			},
-		},
-		burgerExpandedAlert: {
-			control: 'none',
-			description: 'Indicates whether the burger is in the expanded state.',
-			defaultValue: false,
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		animateBoolean: {
-			control: 'none',
-			description: 'Determines whether the burger animations should play.',
-			defaultValue: false,
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
-			},
-		},
-		handleNav: {
-			action: 'clicked',
-			description: 'Action triggered when the button is clicked.',
-			table: {
-				type: { summary: 'function' },
-			},
-		},
-	},
-	tags: ['autodocs'],
-} as Meta<typeof HamburgerButton>;
-
-const Template: StoryFn<HamburgerButtonProps> = (args) => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const toggleIcon = () => {
-		setIsOpen(!isOpen);
-		args.handleNav();
-	};
-
-	return (
-		<div className="relative h-screen bg-gray-50 overflow-hidden flex items-start justify-end p-4">
-			<AnimatePresence>
-				{isOpen && (
-					<motion.div
-						className="fixed inset-0 bg-white z-30 flex flex-col items-start p-6 space-y-8"
-						initial={{ x: '-100%' }}
-						animate={{ x: '0%' }}
-						exit={{ x: '-100%' }}
-						transition={{ duration: 0.3 }}
-					>
-						<div className="flex items-center space-x-3">
-							<img
-								src="../../../assets/compass-logo.png"
-								alt="Compass Technology"
-								className="h-10"
-							/>
-						</div>
-
-						<div className="flex items-center w-full bg-gray-100 p-1 rounded-full shadow-inner">
-							<input
-								type="text"
-								placeholder="Search for product..."
-								className="flex-grow bg-transparent outline-none px-1 text-gray-700 placeholder-gray-400"
-							/>
-							<button className="bg-teal-600 flex justify-center items-center rounded-full p-3 w-10 h-10 text-white">
-								{getFontAwesomeIcon('search')}
-							</button>
-						</div>
-
-						<div className="flex flex-row justify-start items-center gap-6">
-							<IconButton
-								iconColor="text-black"
-								text="Admin"
-								backgroundColor="bg-gray-200 hover:bg-slate-300"
-								iconSize="h-8 w-8"
-								icon={getFontAwesomeIcon("cog")}
-								notificationCount={0}
-								textClasses="text-black font-serif text-md"
-								onClick={() => alert("Redirect to admin")}
-							/>
-							<IconButton
-								iconColor="text-black"
-								text="Profile"
-								backgroundColor="bg-gray-200 hover:bg-slate-300"
-								iconSize="h-8 w-8"
-								icon={getFontAwesomeIcon("user")}
-								hoverBackgroundColor="hover:bg-gray-300"
-								hoverBorderColor="hover:border-black"
-								notificationCount={34}
-								textClasses="text-black font-serif text-md"
-								onClick={() => alert("Redirect to user")}
-							/>
-							<IconButton
-								iconColor="text-black"
-								text="Notifications"
-								backgroundColor="bg-gray-200 hover:bg-slate-300"
-								iconSize="h-8 w-8"
-								icon={getFontAwesomeIcon("bell")}
-								hoverBackgroundColor="hover:bg-gray-300"
-								hoverBorderColor="hover:border-black"
-								notificationCount={6}
-								textClasses="text-black font-serif text-md"
-								onClick={() => alert("Redirect to notifications")}
-							/>
-							<IconButton
-								iconColor="text-black"
-								text="Cart"
-								backgroundColor="bg-gray-200 hover:bg-slate-300"
-								iconSize="h-8 w-8"
-								icon={getFontAwesomeIcon("shoppingCart")}
-								hoverBackgroundColor="hover:bg-gray-300"
-								hoverBorderColor="hover:border-black"
-								notificationCount={124}
-								textClasses="text-black font-serif text-md"
-								onClick={() => alert("Redirect to cart")}
-							/>
-						</div>
-						<GetSupport
-							icon={getFontAwesomeIcon("phone")}
-							as="a"
-							to="/support"
-							title="Get Support"
-							iconClasses="p-4 bg-gray-200 rounded-full group-hover:bg-slate-300"
-							titleClasses="text-xl font-bold"
-							subTitle="1-800-123-4567"
-							subTitleClasses="text-md text-gray-500"
-							containerClasses="flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group"
-						/>
-					</motion.div>
-				)}
-			</AnimatePresence>
-
-			{/* Hamburger Button */}
-			<motion.button
-				onClick={toggleIcon}
-				className="p-2 z-40 relative"
-				aria-label={args.burgerAriaLabel}
-				aria-expanded={isOpen}
-				initial={false}
-				animate={isOpen ? 'open' : 'closed'}
-			>
-				<motion.div className="relative flex items-center justify-center w-8 h-8">
-					<motion.span
-						className="absolute w-full h-0.5 bg-black"
-						variants={{
-							closed: { rotate: 0, y: -8 },
-							open: { rotate: 45, y: 0 },
-						}}
-						transition={{ duration: 0.3 }}
-					/>
-					<motion.span
-						className="absolute w-full h-0.5 bg-black"
-						variants={{
-							closed: { opacity: 1 },
-							open: { opacity: 0 },
-						}}
-						transition={{ duration: 0.2 }}
-					/>
-					<motion.span
-						className="absolute w-full h-0.5 bg-black"
-						variants={{
-							closed: { rotate: 0, y: 8 },
-							open: { rotate: -45, y: 0 },
-						}}
-						transition={{ duration: 0.3 }}
-					/>
-				</motion.div>
-			</motion.button>
-		</div>
-	);
-};
-
-export const ToggleMenu = Template.bind({});
-ToggleMenu.args = {
-	containerClasses: 'bg-gray-100',
-	burgerAriaLabel: 'Toggle navigation',
-};
-ToggleMenu.parameters = {
-	docs: {
-		description: {
-			story:
-				'This story demonstrates the toggle functionality of the HamburgerButton, transitioning between the hamburger and "X" icons on click, with a gray background appearing on toggle.',
-		},
-	},
-};