From e8bbd182922d7e1957ef65e70d3674afbf335b0b Mon Sep 17 00:00:00 2001 From: DerekAgility Date: Mon, 16 Mar 2026 10:46:24 -0400 Subject: [PATCH] Remove FontAwesome and Hero icons from plenum and bundle --- build.js | 3 +- package.json | 7 +-- stories/atoms/icons/DynamicIcon.stories.ts | 32 ++++------- stories/atoms/icons/DynamicIcon.tsx | 43 +++------------ stories/atoms/icons/TablerIcon.tsx | 64 +++++++++++++++++++++- stories/atoms/icons/index.tsx | 6 +- stories/atoms/index.ts | 4 -- stories/index.ts | 4 -- 8 files changed, 84 insertions(+), 79 deletions(-) diff --git a/build.js b/build.js index ace07110..0fa10d02 100644 --- a/build.js +++ b/build.js @@ -34,8 +34,7 @@ const context = { "@heroicons/react", "@tabler/icons", "@tabler/icons-react", - "classnames", - "react-icons" + "classnames" ], format: "esm" }; diff --git a/package.json b/package.json index af00fbd9..92e58049 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "@agility/plenum-ui", - "version": "2.2.6", + "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" } } diff --git a/stories/atoms/icons/DynamicIcon.stories.ts b/stories/atoms/icons/DynamicIcon.stories.ts index f7566279..ca3f6a55 100644 --- a/stories/atoms/icons/DynamicIcon.stories.ts +++ b/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 = { title: "Design System/atoms/Icons/DynamicIcon", component: DynamicIcon, tags: ["autodocs"] -} +}; -type Story = StoryObj +type Story = StoryObj; -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; diff --git a/stories/atoms/icons/DynamicIcon.tsx b/stories/atoms/icons/DynamicIcon.tsx index cf6a3d07..d4e2300d 100644 --- a/stories/atoms/icons/DynamicIcon.tsx +++ b/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, HTMLElement> { @@ -62,29 +57,5 @@ export const DynamicIcon = ({ ) } - if (isFAIcon(icon)) { - const Icon = FA[icon] - return ( - - - - ) - } - if (isHeroIcon(icon)) { - const Icon = outline ? OutlineIcons[icon] : SolidIcons[icon] - return ( - - - - ) - } return <> } diff --git a/stories/atoms/icons/TablerIcon.tsx b/stories/atoms/icons/TablerIcon.tsx index f28ae150..c0250519 100644 --- a/stories/atoms/icons/TablerIcon.tsx +++ b/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, HTMLElement> { icon: TablerIconName; className?: ClassNameWithAutocomplete; @@ -12,8 +70,8 @@ const TablerIcon: React.FC = ({ 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 ( diff --git a/stories/atoms/icons/index.tsx b/stories/atoms/icons/index.tsx index 9ce7cdf7..f2f9377d 100644 --- a/stories/atoms/icons/index.tsx +++ b/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 } diff --git a/stories/atoms/index.ts b/stories/atoms/index.ts index f7264f58..8d29fe86 100644 --- a/stories/atoms/index.ts +++ b/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 diff --git a/stories/index.ts b/stories/index.ts index 6ccd4188..b402d75f 100644 --- a/stories/index.ts +++ b/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,