Merge pull request #109 from agility/dlo/revert-tablericon

Reverting the change in tabler icon

Author: DerekAgility

package.json

@@ -1,11 +1,13 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.2.7",
+	"version": "2.2.8",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
-	"sideEffects": ["**/*.css"],
+	"sideEffects": [
+		"**/*.css"
+	],
 	"engines": {
 		"node": ">= 18.0.0"
 	},

stories/atoms/icons/TablerIcon.tsx

@@ -1,65 +1,21 @@
-import React from "react";
+import React, { useState, useEffect, type ComponentType } from "react";
 import { TablerIconName } from "./tablerIconNames";
-import {
-	IconArrowDown,
-	IconArrowUp,
-	IconBan,
-	IconBell,
-	IconBrandGithub,
-	IconCheck,
-	IconChevronDown,
-	IconCode,
-	IconConfetti,
-	IconCopy,
-	IconCube,
-	IconDotsVertical,
-	IconEye,
-	IconEyeCheck,
-	IconEyeOff,
-	IconFolderPlus,
-	IconGridDots,
-	IconPaperclip,
-	IconPencil,
-	IconPlus,
-	IconSearch,
-	IconSelector,
-	IconThumbUp,
-	IconTrash,
-	IconTrashFilled,
-	IconUpload,
-	IconX,
-} from "@tabler/icons-react";
 import { ClassNameWithAutocomplete } from "@/utils/types";
 
-const tablerIconMap = {
-	IconArrowDown,
-	IconArrowUp,
-	IconBan,
-	IconBell,
-	IconBrandGithub,
-	IconCheck,
-	IconChevronDown,
-	IconCode,
-	IconConfetti,
-	IconCopy,
-	IconCube,
-	IconDotsVertical,
-	IconEye,
-	IconEyeCheck,
-	IconEyeOff,
-	IconFolderPlus,
-	IconGridDots,
-	IconPaperclip,
-	IconPencil,
-	IconPlus,
-	IconSearch,
-	IconSelector,
-	IconThumbUp,
-	IconTrash,
-	IconTrashFilled,
-	IconUpload,
-	IconX,
-} as const;
+let iconRegistry: Record<string, ComponentType<any>> | null = null;
+let registryPromise: Promise<void> | null = null;
+
+function loadIconRegistry(): Promise<void> {
+	if (!registryPromise) {
+		registryPromise = import("@tabler/icons-react").then((mod) => {
+			iconRegistry = mod as unknown as Record<string, ComponentType<any>>;
+		});
+	}
+	return registryPromise;
+}
+
+// Kick off load eagerly on module import
+loadIconRegistry();
 
 export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: TablerIconName;
@@ -69,9 +25,18 @@ export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttr
 const TablerIcon: React.FC<ITablerIconProps> = ({
 	icon,
 	className = "w-6 h-6 text-gray-600"
-}: ITablerIconProps): JSX.Element => {
-	const Icon = tablerIconMap[icon as keyof typeof tablerIconMap];
-	if (!Icon) return <></>;
+}: ITablerIconProps): JSX.Element | null => {
+	const [Icon, setIcon] = useState<ComponentType<any> | null>(
+		iconRegistry && icon ? (iconRegistry[icon] ?? null) : null
+	);
+
+	useEffect(() => {
+		if (!icon) { setIcon(null); return; }
+		if (iconRegistry) { setIcon(iconRegistry[icon] ?? null); return; }
+		loadIconRegistry().then(() => setIcon(iconRegistry![icon] ?? null));
+	}, [icon]);
+
+	if (!Icon) return null;
 	return (
 		<i>
 			<Icon className={className} />

stories/organisms/DropdownWithMultiSelect/tests/DropdownWithMultiSelect.test.tsx

@@ -39,12 +39,11 @@ describe("DropdownWithMultiSelect", () => {
 		vi.stubGlobal("ResizeObserver", ResizeObserver);
 	});
 
-	it("renders a button", () => {
+	it("renders a button", async () => {
 		const { container } = render(<DropdownWithMultiSelect {...defaultProps} />);
 		const button = screen.getByRole("button", { name: /Filters/i });
 		expect(button).toBeInTheDocument();
-		const icon = container.querySelector("svg");
-		expect(icon).toBeInTheDocument();
+		await waitFor(() => expect(container.querySelector("svg")).toBeInTheDocument());
 	});
 
 	it("opens the popover and shows options", async () => {