@agility/plenum-ui 2.2.5 → 2.2.7

package/dist/tailwind.css

@@ -1940,8 +1940,8 @@ select {
   min-height: 0px !important;
 }
 
-.min-h-\[38px\] {
-  min-height: 38px;
+.min-h-\[20px\] {
+  min-height: 20px;
 }
 
 .w-1 {

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,11 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.2.5",
+	"version": "2.2.7",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
+	"sideEffects": ["**/*.css"],
 	"engines": {
 		"node": ">= 18.0.0"
 	},
@@ -73,7 +74,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 +88,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,66 @@
 import React from "react";
 import { TablerIconName } from "./tablerIconNames";
-import * as TablerIcons from "@tabler/icons-react";
+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;
+
 export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: TablerIconName;
 	className?: ClassNameWithAutocomplete;
@@ -12,8 +70,8 @@ const TablerIcon: React.FC<ITablerIconProps> = ({
 	icon,
 	className = "w-6 h-6 text-gray-600"
 }: ITablerIconProps): JSX.Element => {
-	//@ts-ignore
-	const Icon = TablerIcons[icon];
+	const Icon = tablerIconMap[icon as keyof typeof tablerIconMap];
+	if (!Icon) return <></>;
 	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/molecules/inputs/checkbox/Checkbox.tsx

@@ -57,7 +57,7 @@ const Checkbox: FC<ICheckboxProps> = ({
 		{ "border-red-500 shadow-none": isError }
 	);
 	const wrapperStyles = cn(
-		"relative flex items-center min-h-[38px]",
+		"relative flex items-center min-h-[20px]",
 		{ "opacity-50": isDisabled },
 		{ "rounded-sm border border-1 px-3 border-gray-200": hasBorder },
 		{ "py-3": hasBorder && message },