@agilant/toga-blox 1.0.5

package/src/components/GenericList/DUMMYLISTDATA.json

@@ -0,0 +1,560 @@
+{
+	"trees": [
+		"Oak",
+		"Maple",
+		"Pine",
+		"Spruce",
+		"Birch",
+		"Cedar",
+		"Poplar",
+		"Ash",
+		"Elm",
+		"Willow",
+		"Beech",
+		"Fir",
+		"Cherry",
+		"Apple",
+		"Palm",
+		"Sequoia",
+		"Redwood",
+		"Cypress",
+		"Sycamore",
+		"Mahogany",
+		"Walnut",
+		"Chestnut",
+		"Gum",
+		"Eucalyptus",
+		"Alder",
+		"Yew",
+		"Hemlock",
+		"Acacia",
+		"Olive",
+		"Locust",
+		"Boxelder",
+		"Sweetgum",
+		"Blackwood",
+		"Paulownia",
+		"Persimmon",
+		"Larch",
+		"Redbud",
+		"Dogwood",
+		"Hophornbeam",
+		"Hornbeam",
+		"Kauri",
+		"Pecan",
+		"Moringa",
+		"Baobab",
+		"Butternut",
+		"Black cherry",
+		"Balsa",
+		"Tulip tree",
+		"Horse chestnut",
+		"Silver birch",
+		"Japanese maple",
+		"Paperbark maple",
+		"Mangrove",
+		"Fig",
+		"Rubber tree",
+		"Sugar maple",
+		"Yellowwood",
+		"Lime tree",
+		"Ironwood",
+		"Whitebeam",
+		"Monkey puzzle tree",
+		"Black locust",
+		"Catalpa",
+		"Hawthorn",
+		"Lime",
+		"Hackberry",
+		"Tupelo",
+		"Hornbeam",
+		"Mulberry",
+		"Rowan",
+		"Witch hazel",
+		"Japanese cedar",
+		"Tamarind",
+		"Tasmanian blue gum",
+		"Paper birch",
+		"Black walnut",
+		"Cacao",
+		"Blackwood acacia",
+		"Ponderosa pine",
+		"Jackfruit",
+		"Bristlecone pine",
+		"Yucca",
+		"Norway spruce",
+		"Banyan",
+		"Persimmon",
+		"Ebony",
+		"Madrone",
+		"Chinaberry",
+		"Red pine",
+		"Black oak",
+		"Red oak",
+		"White oak",
+		"Swamp oak",
+		"Cork oak",
+		"Water oak",
+		"Sandalwood",
+		"Australian pine",
+		"Coast redwood",
+		"Dawn redwood",
+		"Bald cypress",
+		"Western red cedar",
+		"Eastern red cedar",
+		"Northern white cedar",
+		"Black cedar",
+		"White cedar",
+		"Cedar of Lebanon",
+		"Western hemlock",
+		"Eastern hemlock",
+		"Mountain hemlock",
+		"Carolina hemlock",
+		"Douglas fir",
+		"Grand fir",
+		"Noble fir",
+		"Silver fir",
+		"White fir",
+		"Fraser fir",
+		"Balsam fir",
+		"Loblolly pine",
+		"Longleaf pine",
+		"Slash pine",
+		"Shortleaf pine",
+		"Pitch pine",
+		"Virginia pine",
+		"Pond pine",
+		"Table Mountain pine",
+		"White pine",
+		"Eastern white pine",
+		"Western white pine",
+		"Sugar pine",
+		"Yellow pine",
+		"Spruce pine",
+		"Chilean pine",
+		"Caribbean pine",
+		"Aleppo pine",
+		"Monterey pine",
+		"Radiata pine",
+		"Scots pine",
+		"Siberian pine",
+		"Afghan pine",
+		"Bhutan pine",
+		"Sumatran pine",
+		"Creosote bush",
+		"Jojoba",
+		"Joshua tree",
+		"Ocotillo",
+		"Palo verde",
+		"Arizona cypress",
+		"Mexican cypress",
+		"Leyland cypress",
+		"Bald cypress",
+		"Montezuma cypress",
+		"Desert willow",
+		"Blue palo verde",
+		"Ironwood",
+		"Mesquite",
+		"Screwbean mesquite",
+		"Honey mesquite",
+		"Velvet mesquite",
+		"Tamarisk",
+		"Date palm",
+		"California fan palm",
+		"Washingtonia palm",
+		"Windmill palm",
+		"Coconut palm",
+		"Sago palm",
+		"Cycad",
+		"Norfolk Island pine",
+		"Bunya pine",
+		"Cook pine",
+		"Monkey puzzle tree",
+		"Wollemi pine",
+		"Kauri pine",
+		"Klinki pine",
+		"New Caledonia pine",
+		"Mountain ash",
+		"Tallowwood",
+		"Spotted gum",
+		"Sydney blue gum",
+		"Alpine ash",
+		"Tasmanian oak",
+		"Myrtle beech",
+		"Blackbutt",
+		"Jarrah",
+		"Karri",
+		"Wandoo",
+		"Swamp gum",
+		"Red ironbark",
+		"River red gum",
+		"Manna gum",
+		"Snow gum",
+		"Grey gum",
+		"Yellow box",
+		"Red box",
+		"Blakely's red gum",
+		"Stringybark",
+		"Ribbon gum",
+		"Apple box",
+		"Mountain gum",
+		"Blue gum",
+		"White ironbark",
+		"White box",
+		"Coolabah",
+		"Brush box",
+		"Cypress pine",
+		"White cypress",
+		"Black cypress",
+		"Mallee",
+		"Coolibah",
+		"Silver princess",
+		"Yate",
+		"Karri",
+		"Tuart",
+		"Peppermint",
+		"Acorn",
+		"Alder buckthorn",
+		"Almond",
+		"American beech",
+		"American chestnut",
+		"American holly",
+		"Amur cork tree",
+		"Amur maple",
+		"Arbutus",
+		"Aspen",
+		"Australian cedar",
+		"Avocado",
+		"Bamboo",
+		"Balsa",
+		"Bay laurel",
+		"Bayberry",
+		"Beech",
+		"Betula pendula",
+		"Black cherry",
+		"Black locust",
+		"Black mangrove",
+		"Black poplar",
+		"Black tupelo",
+		"Black walnut",
+		"Black willow",
+		"Bottlebrush",
+		"Breadfruit",
+		"Broadleaf maple",
+		"Buckeye",
+		"Butternut",
+		"Canary Island pine",
+		"Carob",
+		"Carolina silverbell",
+		"Carrotwood",
+		"Cascara",
+		"Catalina cherry",
+		"Cedar elm",
+		"Celtis occidentalis",
+		"Cherry laurel",
+		"Chinese elm",
+		"Chinese pistache",
+		"Chinese tallow",
+		"Chinese wisteria",
+		"Chinkapin oak",
+		"Chinquapin",
+		"Chitalpa",
+		"Chocolate tree",
+		"Chokecherry",
+		"Cinnamon tree",
+		"Citrus",
+		"Cladrastis kentukea",
+		"Coast live oak",
+		"Cockspur hawthorn",
+		"Colorado blue spruce",
+		"Common fig",
+		"Common hackberry",
+		"Coral tree",
+		"Cordia",
+		"Cork oak",
+		"Cornelian cherry",
+		"Cottonwood",
+		"Crabapple",
+		"Crepe myrtle",
+		"Date palm",
+		"Dawn redwood",
+		"Deodar cedar",
+		"Desert willow",
+		"Devilwood",
+		"Dombeya",
+		"Douglas fir",
+		"Dragon tree",
+		"Dwarf flowering almond",
+		"Eastern red cedar",
+		"Eastern white pine",
+		"English elm",
+		"English oak",
+		"English walnut",
+		"European ash",
+		"European beech",
+		"European hornbeam",
+		"European larch",
+		"European mountain ash",
+		"European olive",
+		"European white birch",
+		"European yew",
+		"Evergreen magnolia",
+		"False cypress",
+		"False indigo",
+		"False spirea",
+		"Fern pine",
+		"Firethorn",
+		"Flame tree",
+		"Flowering dogwood",
+		"Foxtail palm",
+		"Fragrant sumac",
+		"Frangipani",
+		"Franklin tree",
+		"Fremont cottonwood",
+		"French tamarisk",
+		"Fringe tree",
+		"Redbud",
+		"Sassafras",
+		"Sourwood",
+		"Balsam poplar",
+		"Black birch",
+		"Black cottonwood",
+		"Black locust",
+		"Black pine",
+		"Black tupelo",
+		"Black willow",
+		"Blue ash",
+		"Blue beech",
+		"Blue gum",
+		"Blue spruce",
+		"Bottlebrush",
+		"Boxelder",
+		"Butternut",
+		"California bay laurel",
+		"Carolina ash",
+		"Catalina ironwood",
+		"Cedar elm",
+		"Celtis occidentalis",
+		"Cherry birch",
+		"Cherry plum",
+		"Chestnut oak",
+		"Chinaberry",
+		"Chinquapin oak",
+		"Cinnamon tree",
+		"Coastal redwood",
+		"Coral tree",
+		"Cork oak",
+		"Cornelian cherry",
+		"Cottonwood",
+		"Crabapple",
+		"Crepe myrtle",
+		"Date palm",
+		"Dawn redwood",
+		"Devilwood",
+		"Dogwood",
+		"Dwarf flowering almond",
+		"Dwarf palmetto",
+		"Eastern cottonwood",
+		"Eastern redbud",
+		"English elm",
+		"English oak",
+		"English walnut",
+		"European beech",
+		"European hornbeam",
+		"European larch",
+		"European mountain ash",
+		"European olive",
+		"European white birch",
+		"European yew",
+		"Evergreen magnolia",
+		"False cypress",
+		"False indigo",
+		"Fern pine",
+		"Firethorn",
+		"Flame tree",
+		"Flowering dogwood",
+		"Franklin tree",
+		"Fremont cottonwood",
+		"French tamarisk",
+		"Fringe tree",
+		"Golden rain tree",
+		"Goldenchain tree",
+		"Gopherwood",
+		"Gray birch",
+		"Gray poplar",
+		"Hackberry",
+		"Hawthorn",
+		"Hickory",
+		"Holly",
+		"Honey locust",
+		"Hophornbeam",
+		"Indian rosewood",
+		"Jack pine",
+		"Joshua tree",
+		"Kentucky coffeetree",
+		"Korean pine",
+		"Lacebark elm",
+		"Laurel oak",
+		"Lemon-scented gum",
+		"Linden",
+		"Littleleaf linden",
+		"London plane",
+		"Macadamia nut",
+		"Magnolia",
+		"Maidenhair tree",
+		"Maple-leaved oak",
+		"Mimosa",
+		"Montezuma pine",
+		"Monterey cypress",
+		"Mountain ash",
+		"Mulga",
+		"Mulga acacia",
+		"Mulga brush",
+		"Mulga wattle",
+		"Nectarine",
+		"Nettle tree",
+		"Northern catalpa",
+		"Northern red oak",
+		"Nut pine",
+		"Oregon ash",
+		"Osage orange",
+		"Ostrich foot fern",
+		"Pagoda tree",
+		"Palmetto",
+		"Paradise tree",
+		"Peppercorn tree",
+		"Pepperwood",
+		"Persimmon",
+		"Persian ironwood",
+		"Persian lilac",
+		"Persian silk tree",
+		"Persimmon",
+		"Pignut hickory",
+		"Pindo palm",
+		"Pink snowbush",
+		"Plane tree",
+		"Plum",
+		"Poison oak",
+		"Poison sumac",
+		"Pomelo tree",
+		"Pond cypress",
+		"Prickly ash",
+		"Primrose tree",
+		"Purple ash",
+		"Quaking aspen",
+		"Queensland kauri",
+		"Queensland maple",
+		"Queensland red cedar",
+		"Queensland walnut",
+		"Quercus ilex",
+		"Red alder",
+		"Red ash",
+		"Red bottlebrush",
+		"Red cedar",
+		"Red maple",
+		"Red mulberry",
+		"Red pine",
+		"Red spruce",
+		"Red-tipped photinia",
+		"Redwood",
+		"Ribbonwood",
+		"River birch",
+		"River red gum",
+		"Rock elm",
+		"Rose gum",
+		"Royal palm",
+		"Russian olive",
+		"Rusty fig",
+		"Saffron tree",
+		"Sago palm",
+		"Salmon gum",
+		"Salt cedar",
+		"Sandalwood",
+		"Sandpaper fig",
+		"Sawtooth oak",
+		"Scarlet oak",
+		"Scots pine",
+		"Sea holly",
+		"Sea trumpet",
+		"Serviceberry",
+		"Shagbark hickory",
+		"Shingle oak",
+		"Shumard oak",
+		"Siberian elm",
+		"Silk floss tree",
+		"Silk oak",
+		"Silky oak",
+		"Silver birch",
+		"Silver dollar tree",
+		"Silver linden",
+		"Silver maple",
+		"Silver wattle",
+		"Silverberry",
+		"Silvertop ash",
+		"Sitka spruce",
+		"Smooth bark Australian pine",
+		"Snow gum",
+		"Sour cherry",
+		"Southern catalpa",
+		"Southern live oak",
+		"Southern magnolia",
+		"Southern red oak",
+		"Southern sugar maple",
+		"Southern wax myrtle",
+		"Spanish cedar",
+		"Spanish oak",
+		"Spindle tree",
+		"Spruce",
+		"Star fruit tree",
+		"Sugar gum",
+		"Sugarberry",
+		"Summer chocolate mimosa",
+		"Swamp bay",
+		"Swamp black gum",
+		"Swamp chestnut oak",
+		"Swamp cottonwood",
+		"Swamp mahogany",
+		"Swamp maple",
+		"Swamp white oak",
+		"Sweet bay",
+		"Sweet birch",
+		"Sweet cherry",
+		"Sweet chestnut",
+		"Sweet gum",
+		"Sweet olive",
+		"Sweet viburnum",
+		"Sycamore maple",
+		"Tamarack",
+		"Tamarillo",
+		"Tamarind",
+		"Tangelo",
+		"Tangor",
+		"Tan oak",
+		"Tanoak",
+		"Tasmanian blackwood",
+		"Tasmanian cherry",
+		"Tasmanian snow gum",
+		"Tea tree",
+		"Texas ash",
+		"Thornless honeylocust",
+		"Thujopsis dolabrata",
+		"Tibetan cherry",
+		"Tibetan fir",
+		"Tilia tomentosa",
+		"Toog",
+		"Toothache tree",
+		"Toyon",
+		"Tree of heaven",
+		"Trumpet tree",
+		"Tulip tree",
+		"Umbrella pine",
+		"Velvet mesquite",
+		"Velvetleaf",
+		"Virginia pine",
+		"Walnut",
+		"Wattle",
+		"Wax myrtle",
+		"Weeping willow",
+		"Western hemlock"
+	]
+}

package/src/components/GenericList/GenericList.stories.tsx

@@ -0,0 +1,104 @@
+import { Meta } from "@storybook/react";
+import GenericList from "./GenericList";
+import GenericListTypes from "./GenericList";
+import DynamicIconList from "./templates/DynamicIconList";
+import DUMMYICONDATA from "../Header/DUMMYICONDATA.json";
+import DUMMYLISTDATA from "./DUMMYLISTDATA.json";
+import { IconsListProps } from "./templates/DynamicIconList";
+import { TreeListProps } from "./templates/DummyDataList";
+import TreeList from "./templates/DummyDataList";
+
+export default {
+	title: "Components/GenericList",
+	component: GenericList,
+	argTypes: {
+		listDirection: {
+			control: "select",
+			options: ["horizontal", "vertical"],
+			description: "Whether the list is horizontal or vertical",
+		},
+		listType: {
+			table: {
+				disable: true,
+			},
+		},
+		hasVirtualization: {
+			table: {
+				disable: true,
+			},
+		},
+		containerClasses: {
+			table: {
+				disable: true,
+			},
+		},
+		itemHeight: {
+			table: {
+				disable: true,
+			},
+		},
+		containerHeight: {
+			table: {
+				disable: true,
+			},
+		},
+		renderItem: {
+			table: {
+				disable: true,
+			},
+		},
+		data: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+	},
+} as Meta;
+
+const Template: typeof GenericListTypes & { args?: any } = (args) => (
+	<GenericList {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+	containerClasses: "flex justify-center w-96 bg-slate-100",
+	data: DUMMYICONDATA.DUMMYICONCOMPASSDATA,
+	itemHeight: 20,
+	containerHeight: 72,
+	hasVirtualization: true,
+	renderItem: (item: IconsListProps["item"]) => (
+		<DynamicIconList item={item} />
+	),
+	listDirection: "horizontal",
+	listType: "none",
+};
+
+export const VerticalList = Template.bind({});
+VerticalList.args = {
+	containerClasses: "w-96 bg-slate-100",
+	data: DUMMYICONDATA.DUMMYICONCOMPASSDATA,
+	itemHeight: 150,
+	containerHeight: 300,
+	hasVirtualization: true,
+	renderItem: (item: IconsListProps["item"]) => (
+		<DynamicIconList item={item} />
+	),
+	listDirection: "vertical",
+	listType: "none",
+};
+
+export const LargeDataSet = Template.bind({});
+LargeDataSet.args = {
+	containerClasses: "bg-slate-100 w-120 h-120 p-8",
+	data: DUMMYLISTDATA.trees.flatMap((tree) => [tree, tree]),
+	itemHeight: 50,
+	containerHeight: 300,
+	hasVirtualization: true,
+	renderItem: (item: TreeListProps["item"]) => <TreeList item={item} />,
+	listDirection: "vertical",
+	listType: "unordered",
+};

package/src/components/GenericList/GenericList.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import GenericList from "./GenericList";
+import DUMMYICONDATA from "../Header/DUMMYICONDATA.json";
+import DynamicIconList from "./templates/DynamicIconList";
+
+describe("<GenericList />", () => {
+	beforeEach(() => {
+		render(
+			<GenericList
+				data={DUMMYICONDATA.DUMMYICONCOMPASSDATA}
+				renderItem={(item) => <DynamicIconList item={item} />}
+				itemHeight={20}
+				containerHeight={72}
+				listType="unordered"
+				containerClasses="bg-gray-100 w-36 border-2 border-teal-500"
+				listDirection="vertical"
+				hasVirtualization={false}
+			/>
+		);
+	});
+
+		test("contains correct icon images", () => {
+			expect(screen.getByTestId("user")).toBeInTheDocument();
+			expect(screen.getByTestId("circle-info")).toBeInTheDocument();
+			expect(screen.getByTestId("bell")).toBeInTheDocument();
+			expect(screen.getByTestId("cart-shopping")).toBeInTheDocument();
+		});
+});