@agilant/toga-blox 1.0.5

package/src/components/GenericList/GenericList.tsx

@@ -0,0 +1,146 @@
+import React, { useRef, useEffect, useState } from "react";
+import { VirtualItem, useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback } from "react";
+import { getListDirectionClasses } from "./genericListClassNames";
+
+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,
+	hasVirtualization = false,
+	listType,
+}: GenericListTypes<T>) => {
+	let listClasses = getListDirectionClasses(listDirection);
+	let parentRef = React.createRef<HTMLElement>();
+
+	const [virtualItems, setVirtualItems] = useState<VirtualItem[]>([]);
+	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/genericListClassNames.tsx

@@ -0,0 +1,8 @@
+import classNames from "classNames";
+
+export const getListDirectionClasses = (listDirection: string | undefined) => {
+	return classNames({
+		"flex": listDirection === "horizontal",
+		"flex flex-col": listDirection === "vertical",
+	});
+};

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

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

@@ -0,0 +1,74 @@
+import React from "react";
+import Icon from "../../Icon/index";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+import Text from "../../Text/index";
+import { TagName } from "../../Text/index";
+
+export type IconsListProps = {
+	item: {
+		iconColor?: string;
+		iconLabel: string;
+		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;
+		id: string;
+		hoverBackground: string;
+		hoverColor: string;
+		limitIndicator: boolean;
+		indicatorNumber: string;
+		additionalContainerClasses: string;
+		to?: string;
+		href?: string;
+		text: {
+			size: string;
+			color: string;
+			text: string;
+			fontFamily: string;
+			tag: TagName;
+			additionalClasses: string;
+		};
+	};
+};
+// TODO: create a genetic list comp with TanStack Virtual and move this into the template dir in the Generic list dir
+// https://tanstack.com/virtual/latest/docs/introduction
+const DynamicIconList: React.FC<IconsListProps> = ({ item }) => {
+	return (
+		<>
+			<Icon
+				key={item.id}
+				to={item.to}
+				href={item.href}
+				limitCharacters={item.limitCharacters}
+				backgroundColor={item.backgroundColor}
+				iconColor={item.iconColor}
+				iconLabel={item.iconLabel}
+				iconBorder={item.iconBorder}
+				size={item.size}
+				icon={getFontAwesomeIcon(item.icon)}
+				hoverBackground={item.hoverBackground}
+				hoverBorder={item.hoverBorder}
+				limitIndicator={item.limitIndicator}
+				indicatorNumber={item.indicatorNumber}
+				indicatorSize={item.indicatorSize}
+				hoverColor={item.hoverColor}
+				additionalContainerClasses={item.additionalContainerClasses}
+				text={
+					<Text
+						size={item.text.size}
+						color={item.text.color}
+						text={item.text.text}
+						fontFamily={item.text.fontFamily}
+						tag={item.text.tag}
+						additionalClasses={item.text.additionalClasses}
+					/>
+				}
+			/>
+		</>
+	);
+};
+
+export default DynamicIconList;

package/src/components/HamburgerButton/HamburgerButton.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { motion} from "framer-motion";
+
+import { HamburgerButtonTypes } from "./HamburgerButton.types";
+
+
+const HamburgerButton: React.FC<HamburgerButtonTypes> = ({
+	burgerAriaLabel,
+	burgerExpandedAlert,
+	animateBoolean,
+	handleNav,
+}) => {
+	return (
+		<div className="flex min-h-20">
+			<div className="pl-2 mx-auto my-auto hidden max-xl:flex">
+				{
+					<motion.button
+						aria-label={burgerAriaLabel}
+						aria-expanded={burgerExpandedAlert === "True"}
+						data-testid="hamburger-button"
+						initial="hide"
+						animate={animateBoolean ? "show" : "hide"}
+						onClick={handleNav}
+						className="flex flex-col space-y-1 relative z-10 p-2"
+					>
+						<motion.span
+							variants={{
+								hide: {
+									rotate: 0,
+								},
+								show: {
+									rotate: 45,
+									y: 5,
+								},
+							}}
+							className="w-6 bg-black h-px block"
+						></motion.span>
+						<motion.span
+							variants={{
+								hide: {
+									opacity: 1,
+								},
+								show: {
+									opacity: 0,
+								},
+							}}
+							className="w-6 bg-black h-px block"
+						></motion.span>
+						<motion.span
+							variants={{
+								hide: {
+									rotate: 0,
+								},
+								show: {
+									rotate: -45,
+									y: -5,
+								},
+							}}
+							className="w-6 bg-black h-px block"
+						></motion.span>
+					</motion.button>
+				}
+			</div>
+		</div>
+	);
+};
+
+export default HamburgerButton;

package/src/components/HamburgerButton/HamburgerButton.types.tsx

@@ -0,0 +1,6 @@
+export interface HamburgerButtonTypes {
+	burgerAriaLabel: string;
+	burgerExpandedAlert: string;
+	animateBoolean: boolean;
+	handleNav: () => void;
+}

package/src/components/HamburgerButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./HamburgerButton";
+export * from "./HamburgerButton.types";

package/src/components/Header/DUMMYICONDATA.json

@@ -0,0 +1,136 @@
+{
+	"DUMMYICONCOMPASSDATA": [
+		{
+			"id": "1",
+			"icon": "user",
+			"href": "#",
+			"to": "",
+			"iconColor": "black",
+			"iconLabel": "account",
+			"iconBorder": "none",
+			"backgroundColor": "green",
+			"hoverBackground": "green",
+			"hoverBorder": "green",
+			"hoverColor": "green",
+			"size": "xs",
+			"additionalContainerClasses": "",
+			"indicatorNumber": "",
+			"limitIndicator": true,
+			"indicatorSize": "sm",
+			"text": {
+				"size": "xs",
+				"color": "primary",
+				"text": "Account",
+				"fontFamily": "serif",
+				"tag": "span",
+				"additionalClasses": "m-0 p-0"
+			}
+		},
+		{
+			"id": "2",
+			"icon": "infoCircle",
+			"href": "#",
+			"to": "",
+			"iconColor": "black",
+			"iconLabel": "information",
+			"iconBorder": "none",
+			"backgroundColor": "green",
+			"hoverBackground": "green",
+			"hoverBorder": "green",
+			"hoverColor": "green",
+			"size": "xs",
+			"additionalContainerClasses": "",
+			"indicatorNumber": "",
+			"limitIndicator": true,
+			"indicatorSize": "sm",
+			"text": {
+				"size": "xs",
+				"color": "primary",
+				"text": "Info",
+				"fontFamily": "serif",
+				"tag": "span",
+				"additionalClasses": "m-0 p-0"
+			}
+		},
+		{
+			"id": "3",
+			"icon": "bell",
+			"href": "#",
+			"to": "",
+			"iconColor": "black",
+			"iconLabel": "notifications",
+			"iconBorder": "none",
+			"backgroundColor": "green",
+			"hoverBackground": "green",
+			"hoverBorder": "green",
+			"hoverColor": "green",
+			"size": "xs",
+			"additionalContainerClasses": "",
+			"indicatorNumber": "100",
+			"limitIndicator": true,
+			"indicatorSize": "sm",
+			"text": {
+				"size": "xs",
+				"color": "primary",
+				"text": "Notifications",
+				"fontFamily": "serif",
+				"tag": "span",
+				"additionalClasses": "m-0 p-0"
+			}
+		},
+		{
+			"id": "4",
+			"icon": "shoppingCart",
+			"href": "#",
+			"to": "",
+			"iconColor": "black",
+			"iconLabel": "shopping cart",
+			"iconBorder": "none",
+			"backgroundColor": "green",
+			"hoverBackground": "green",
+			"hoverBorder": "green",
+			"hoverColor": "green",
+			"size": "xs",
+			"additionalContainerClasses": "",
+			"indicatorNumber": "",
+			"limitIndicator": true,
+			"indicatorSize": "sm",
+			"text": {
+				"size": "xs",
+				"color": "primary",
+				"text": "Cart",
+				"fontFamily": "serif",
+				"tag": "span",
+				"additionalClasses": "m-0 p-0"
+			}
+		}
+	],
+	"DUMMYICONTOGADATA": [
+		{
+			"id": "1",
+			"icon": "user",
+			"href": "#",
+			"to": "",
+			"iconColor": "black",
+			"iconLabel": "account",
+			"iconBorder": "none",
+			"backgroundColor": "blue",
+			"hoverBackground": "blue",
+			"hoverBorder": "none",
+			"hoverColor": "blue",
+			"size": "xs",
+			"additionalContainerClasses": "",
+			"indicatorNumber": "",
+			"limitIndicator": true,
+			"indicatorSize": "sm",
+			"text": {
+				"size": "xs",
+				"color": "primary",
+				"text": "Account",
+				"fontFamily": "serif",
+				"tag": "span",
+				"additionalClasses": "m-0 p-0"
+			}
+		}
+	]
+}