@agility/plenum-ui 2.2.6 → 2.2.8

package/dist/types/stories/atoms/icons/DynamicIcon.d.ts

@@ -1,15 +1,12 @@
 import React from "react";
-import * as SolidIcons from "@heroicons/react/solid";
-import * as OutlineIcons from "@heroicons/react/outline";
-import * as FA from "react-icons/fa";
+import type * as SolidIcons from "@heroicons/react/solid";
+import type * as OutlineIcons from "@heroicons/react/outline";
 import { TablerIconName } from "./tablerIconNames";
 import { ClassNameWithAutocomplete } from "@/utils/types";
 export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
-export type FAIconName = keyof typeof FA;
-export type UnifiedIconName = TablerIconName | IconName | FAIconName;
+export type UnifiedIconName = TablerIconName | IconName;
 export declare function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons;
 export declare function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
-export declare function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
 export declare function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
 export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     icon: UnifiedIconName;

package/dist/types/stories/atoms/icons/DynamicIcon.stories.d.ts

@@ -2,9 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { DynamicIcon } from "./DynamicIcon";
 declare const meta: Meta<typeof DynamicIcon>;
 type Story = StoryObj<typeof DynamicIcon>;
-export declare const HeroIconSolid: Story;
-export declare const HeroIconOutline: Story;
 export declare const TablerIconSolid: Story;
 export declare const TablerIconOutline: Story;
-export declare const FAIcon: Story;
+export declare const TablerIconBrandGithub: Story;
 export default meta;

package/dist/types/stories/atoms/icons/index.d.ts

@@ -1,4 +1,4 @@
-import { DynamicIcon, FAIconName, IDynamicIconProps, IconName, UnifiedIconName, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./DynamicIcon";
+import { DynamicIcon, IDynamicIconProps, IconName, UnifiedIconName, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./DynamicIcon";
 import IconWithShadow, { IIconWithShadowProps } from "./IconWithShadow";
-export { DynamicIcon, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, IconWithShadow };
-export type { FAIconName, IDynamicIconProps, IconName, UnifiedIconName, IIconWithShadowProps };
+export { DynamicIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, IconWithShadow };
+export type { IDynamicIconProps, IconName, UnifiedIconName, IIconWithShadowProps };

package/dist/types/stories/atoms/index.d.ts

@@ -1,10 +1,10 @@
 import Avatar, { IAvatarProps } from "./Avatar";
 import Badge, { IBadgeProps } from "./badges";
 import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons";
-import { DynamicIcon, FAIconName, IDynamicIconProps, IIconWithShadowProps, IconName, IconWithShadow, UnifiedIconName, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./icons";
+import { DynamicIcon, IDynamicIconProps, IIconWithShadowProps, IconName, IconWithShadow, UnifiedIconName, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./icons";
 import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders";
 import { Heading, HeadingProps } from "./Typography/Heading";
 import { Label, LabelProps } from "./Typography/Label";
 import { Paragraph, ParagraphProps } from "./Typography/Paragraph";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, HeadingProps, LabelProps, ParagraphProps, UnifiedIconName, IconName, FAIconName, BTNActionType };
-export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, Heading, Label, Paragraph, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName };
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, HeadingProps, LabelProps, ParagraphProps, UnifiedIconName, IconName, BTNActionType };
+export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, Heading, Label, Paragraph, isHeroIcon, isTablerIcon, isUnifiedIconName };

package/dist/types/stories/index.d.ts

@@ -1,5 +1,5 @@
-import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps } from "./atoms";
+import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isHeroIcon, isTablerIcon, isUnifiedIconName, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps } from "./atoms";
 import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps, ISimpleSelectOptions } from "./molecules";
 import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps, IAnimatedFormInputWithAddons, AnimatedFormInputWithAddons, DropdownWithMultiSelect, MultiSelectItemProps } from "./organisms";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons, MultiSelectItemProps, HeadingProps, LabelProps, ParagraphProps };
-export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect, Heading, Label, Paragraph };
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons, MultiSelectItemProps, HeadingProps, LabelProps, ParagraphProps };
+export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect, Heading, Label, Paragraph };

package/package.json

@@ -1,10 +1,13 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.2.6",
+	"version": "2.2.8",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
+	"sideEffects": [
+		"**/*.css"
+	],
 	"engines": {
 		"node": ">= 18.0.0"
 	},
@@ -73,7 +76,6 @@
 		"jest-environment-jsdom": "^29.7.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"react-icons": "^4.10.1",
 		"rimraf": "^5.0.1",
 		"storybook": "^7.1.1",
 		"ts-node": "^10.9.2",
@@ -88,7 +90,6 @@
 		"@tabler/icons-react": "^2.27.0",
 		"classnames": "^2.3.2",
 		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"react-icons": "^4.10.1"
+		"react-dom": "18.2.0"
 	}
 }

package/stories/atoms/icons/DynamicIcon.stories.ts

@@ -1,43 +1,31 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { DynamicIcon } from "./DynamicIcon"
+import type { Meta, StoryObj } from "@storybook/react";
+import { DynamicIcon } from "./DynamicIcon";
 
 const meta: Meta<typeof DynamicIcon> = {
 	title: "Design System/atoms/Icons/DynamicIcon",
 	component: DynamicIcon,
 	tags: ["autodocs"]
-}
+};
 
-type Story = StoryObj<typeof DynamicIcon>
+type Story = StoryObj<typeof DynamicIcon>;
 
-export const HeroIconSolid: Story = {
-	args: {
-		icon: "TrashIcon",
-		outline: false
-	}
-}
-export const HeroIconOutline: Story = {
-	args: {
-		icon: "TrashIcon",
-		outline: true
-	}
-}
 export const TablerIconSolid: Story = {
 	args: {
 		icon: "IconTrashFilled",
 		outline: false
 	}
-}
+};
 export const TablerIconOutline: Story = {
 	args: {
 		icon: "IconTrash",
 		outline: true
 	}
-}
-export const FAIcon: Story = {
+};
+export const TablerIconBrandGithub: Story = {
 	args: {
-		icon: "FaGithub",
+		icon: "IconBrandGithub",
 		outline: true
 	}
-}
+};
 
-export default meta
+export default meta;

package/stories/atoms/icons/DynamicIcon.tsx

@@ -1,8 +1,7 @@
 import React from "react"
-// TODO: Fix heroicons support
-import * as SolidIcons from "@heroicons/react/solid"
-import * as OutlineIcons from "@heroicons/react/outline"
-import * as FA from "react-icons/fa"
+// TODO: Fix heroicons support — using import type to avoid bundling full icon sets
+import type * as SolidIcons from "@heroicons/react/solid"
+import type * as OutlineIcons from "@heroicons/react/outline"
 import { tablerIconNames, TablerIconName } from "./tablerIconNames"
 import { default as cn } from "classnames"
 
@@ -10,24 +9,20 @@ import { ClassNameWithAutocomplete } from "@/utils/types"
 import TablerIcon from "./TablerIcon"
 
 export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons
-export type FAIconName = keyof typeof FA
 
-export type UnifiedIconName = TablerIconName | IconName | FAIconName
+export type UnifiedIconName = TablerIconName | IconName
 
+// isHeroIcon: heroicon support is pending (TODO: Fix heroicons support)
 export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
-	return name in SolidIcons || name in OutlineIcons
+	return false
 }
 
 export function isTablerIcon(name: UnifiedIconName): name is TablerIconName {
 	return tablerIconNames.includes(name as TablerIconName)
 }
 
-export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA {
-	return name in FA
-}
-
 export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName {
-	return isTablerIcon(name) // || isHeroIcon(name) || isFAIcon(name)
+	return isTablerIcon(name)
 }
 
 export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -62,29 +57,5 @@ export const DynamicIcon = ({
 		)
 	}
 
-	if (isFAIcon(icon)) {
-		const Icon = FA[icon]
-		return (
-			<i {...{ ...props, className: "flex items-center justify-center" }}>
-				<Icon
-					className={cn(className, {
-						"h-5 w-5 text-gray-600": !className
-					})}
-				/>
-			</i>
-		)
-	}
-	if (isHeroIcon(icon)) {
-		const Icon = outline ? OutlineIcons[icon] : SolidIcons[icon]
-		return (
-			<i {...{ ...props, className: "flex items-center justify-center" }}>
-				<Icon
-					className={cn(className, {
-						"h-5 w-5 text-gray-600": !className
-					})}
-				/>
-			</i>
-		)
-	}
 	return <></>
 }

package/stories/atoms/icons/TablerIcon.tsx

@@ -1,8 +1,22 @@
-import React from "react";
+import React, { useState, useEffect, type ComponentType } from "react";
 import { TablerIconName } from "./tablerIconNames";
-import * as TablerIcons from "@tabler/icons-react";
 import { ClassNameWithAutocomplete } from "@/utils/types";
 
+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;
 	className?: ClassNameWithAutocomplete;
@@ -11,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 => {
-	//@ts-ignore
-	const Icon = TablerIcons[icon];
+}: 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} />

package/stories/atoms/icons/index.tsx

@@ -1,14 +1,12 @@
 import {
 	DynamicIcon,
-	FAIconName,
 	IDynamicIconProps,
 	IconName,
 	UnifiedIconName,
-	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName
 } from "./DynamicIcon"
 import IconWithShadow, { IIconWithShadowProps } from "./IconWithShadow"
-export { DynamicIcon, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, IconWithShadow }
-export type { FAIconName, IDynamicIconProps, IconName, UnifiedIconName, IIconWithShadowProps }
+export { DynamicIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, IconWithShadow }
+export type { IDynamicIconProps, IconName, UnifiedIconName, IIconWithShadowProps }

package/stories/atoms/index.ts

@@ -3,13 +3,11 @@ import Badge, { IBadgeProps } from "./badges";
 import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons";
 import {
 	DynamicIcon,
-	FAIconName,
 	IDynamicIconProps,
 	IIconWithShadowProps,
 	IconName,
 	IconWithShadow,
 	UnifiedIconName,
-	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName
@@ -32,7 +30,6 @@ export type {
 	ParagraphProps,
 	UnifiedIconName,
 	IconName,
-	FAIconName,
 	BTNActionType
 };
 export {
@@ -47,7 +44,6 @@ export {
 	Heading,
 	Label,
 	Paragraph,
-	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName

package/stories/index.ts

@@ -10,7 +10,6 @@ import {
 	IRadialProgressProps,
 	UnifiedIconName,
 	IconName,
-	FAIconName,
 	BTNActionType,
 	Avatar,
 	Badge,
@@ -20,7 +19,6 @@ import {
 	IconWithShadow,
 	Loader,
 	RadialProgress,
-	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName,
@@ -108,7 +106,6 @@ export type {
 	IFormInputWithAddonsProps,
 	UnifiedIconName,
 	IconName,
-	FAIconName,
 	BTNActionType,
 	ITextInputProps,
 	ISimpleSelectOptions,
@@ -142,7 +139,6 @@ export {
 	IconWithShadow,
 	Loader,
 	RadialProgress,
-	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName,

package/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 () => {