@agility/plenum-ui 2.0.0-rc4 → 2.0.0-rc41

package/local.sh

@@ -0,0 +1,100 @@
+#! /usr/bin/bash
+
+# ANSI escape codes for formatting
+GREEN_BOLD='\033[1;32m'
+ORANGE_BOLD='\033[1;33m'
+RED_BOLD='\033[1;31m'
+BLUE_BOLD='\033[1;34m'
+RESET='\033[0m'
+DIR="$PWD"
+
+# The required yarn version to use this script
+REQUIRED_YARN_VERSION="1.22.19"
+
+# Get the installed Yarn version
+INSTALLED_YARN_VERSION=$(yarn --version 2>/dev/null)
+
+unlink_package() {
+  local package_name="${1:-@agility/plenum-ui}"
+  if [ -z "$1" ]; then
+    yarn unlink
+  else
+    cd "$DIR/node_modules/$package_name"
+    yarn unlink
+  fi
+  unlink_exit_code=$?
+  if [ $unlink_exit_code -ne 0 ]; then
+    echo -e "${ORANGE_BOLD}agility-cms-manager-app-react:warning${RESET} yarn unlink for '$package_name' encountered an error, but script will continue. \n"
+  fi
+
+  cd "$DIR"
+  echo -e "\n"
+}
+
+link_package() {
+  local package_name="${1:-@agility/plenum-ui}"
+  if [ -z "$1" ]; then
+    yarn link
+  else
+    cd "$DIR/node_modules/$package_name"
+    yarn link
+  fi
+  unlink_exit_code=$?
+  if [ $unlink_exit_code -ne 0 ]; then
+    echo -e "${RED_BOLD}agility-cms-manager-app-react:error${RESET} yarn link for '$package_name' failed. Script cannot continue, exiting script."
+    exit 1
+  else
+    echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} yarn link for '$package_name' successful\n"
+  fi
+
+  cd "$DIR"
+}
+
+check_yarn_version() {
+  # Check if Yarn is installed and compare the version
+  if [ -n "$INSTALLED_YARN_VERSION" ] && [ "$INSTALLED_YARN_VERSION" != "$REQUIRED_YARN_VERSION" ]; then
+    echo -e "${RED_BOLD}error${RESET} Yarn version $required_version is required, but found version $INSTALLED_YARN_VERSION."
+    exit 1
+  fi
+
+  echo -e "${BLUE_BOLD}info${RESET} Yarn version is $INSTALLED_YARN_VERSION. Proceeding with the script...\n"
+}
+
+### START SCRIPT
+
+check_yarn_version
+
+echo -e "Starting @agility/plenum-ui local watch script \n"
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} unlinking existing symlink"
+yarn unlink
+if [ $? -ne 0 ]; then
+  echo "yarn unlink for @agility/plenum-ui encountered an error, but script will continue. \n"
+fi
+
+if [ ! -d "node_modules" ] || [ ! -d "node_modules/react" ] || [ ! -d "node_modules/react-dom" ]; then
+   echo -e "${ORANGE_BOLD}@agility/plenum-ui:warning${RESET} Could not find node_modules."
+   echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} installing dependencies...\n"
+
+   yarn install
+
+   if [ $? -eq 0 ]; then
+      echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} Finished installing dependencies"
+   else
+      echo -e "${RED_BOLD}@agility/plenum-ui:error${RESET} Couldn't install dependencies. Exiting script."
+      exit 1
+  fi
+fi
+
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} unlinking existing symlinks"
+unlink_package react
+unlink_package react-dom
+unlink_package
+
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} setting up symlinks...\n"
+
+link_package react
+link_package react-dom
+link_package 
+
+echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} You can now run 'yarn start-cms:local' in agility-cms-manager-app-react\n"
+yarn start:watch

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc4",
+	"version": "2.0.0-rc41",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -17,19 +17,35 @@
 		"storybook:tw": "tailwindcss -o ./lib/tailwind.css -w ",
 		"storybook": "npm-run-all -p \"storybook:*\" ",
 		"dev": "yarn storybook",
-		"build:tw": "tailwindcss -o ./lib/tailwind.css",
+		"build:tw": "tailwindcss -o ./dist/tailwind.css",
 		"build:tsc": "yarn node build.js",
 		"prepare": "yarn build",
-		"build": "npm run clean && npm-run-all -s \"build:*\" ",
+		"build": "yarn clean && npm-run-all -s \"build:*\" ",
 		"clean": "rimraf dist",
-		"create-component": "node scripts/create-component.js"
+		"create-component": "node scripts/create-component.js",
+		"start:local": "bash ./local.sh",
+		"start:watch": "yarn node watch.js"
 	},
-	"devDependencies": {
+	"dependencies": {
 		"@floating-ui/react": "^0.25.0",
 		"@headlessui/react": "^1.7.10",
 		"@headlessui/tailwindcss": "^0.1.2",
 		"@heroicons/react": "^1.0.5",
 		"@next/font": "^13.4.12",
+		"@tabler/icons": "^2.26.0",
+		"@tabler/icons-react": "^2.27.0",
+		"@tailwindcss/forms": "^0.5.3",
+		"@tailwindcss/typography": "^0.5.9",
+		"classnames": "^2.3.2",
+		"concurrently": "^7.6.0",
+		"next": "13.1.6",
+		"npm-dts": "^1.3.12",
+		"npm-run-all": "^4.1.5",
+		"postcss": "^8.4.21",
+		"tailwindcss": "^3.2.4",
+		"typescript": "^5.1.6"
+	},
+	"devDependencies": {
 		"@storybook/addon-designs": "^7.0.1",
 		"@storybook/addon-essentials": "^7.1.1",
 		"@storybook/addon-interactions": "^7.1.1",
@@ -40,27 +56,28 @@
 		"@storybook/react": "^7.1.1",
 		"@storybook/testing-library": "^0.2.0",
 		"@storybook/theming": "^7.1.1",
-		"@tabler/icons": "^2.26.0",
-		"@tabler/icons-react": "^2.27.0",
-		"@tailwindcss/forms": "^0.5.3",
-		"@tailwindcss/typography": "^0.5.9",
 		"@types/node": "18.11.18",
 		"autoprefixer": "^10.4.13",
-		"classnames": "^2.3.2",
-		"concurrently": "^7.6.0",
 		"esbuild": "^0.18.19",
 		"eslint": "8.32.0",
 		"eslint-config-next": "13.1.6",
 		"eslint-plugin-storybook": "^0.6.13",
-		"next": "13.1.6",
-		"npm-dts": "^1.3.12",
-		"npm-run-all": "^4.1.5",
-		"postcss": "^8.4.21",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-icons": "^4.10.1",
-		"storybook": "^7.1.1",
-		"tailwindcss": "^3.2.4",
-		"typescript": "^5.1.6"
+		"rimraf": "^5.0.1",
+		"storybook": "^7.1.1"
+	},
+	"peerDependencies": {
+		"@floating-ui/react": "^0.25.0",
+		"@headlessui/react": "^1.7.10",
+		"@headlessui/tailwindcss": "^0.1.2",
+		"@heroicons/react": "^1.0.5",
+		"@tabler/icons": "^2.26.0",
+		"@tabler/icons-react": "^2.27.0",
+		"classnames": "^2.3.2",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-icons": "^4.10.1"
 	}
-}
+}

package/rollup.config.mjs

@@ -0,0 +1,42 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+
+
+const config = [
+	{
+
+		input: 'stories/index.ts',
+
+		output: [
+			{
+				file: "lib/index.js",
+				format: 'cjs',
+				sourcemap: true
+			},
+			{
+				file: "lib/index.esm.js",
+				format: 'esm',
+				sourcemap: true
+			}
+		],
+		external: ["react", "react-dom"],
+		plugins: [
+			peerDepsExternal(),
+			resolve(),
+			commonjs(),
+			typescript({
+				tsconfig: "./tsconfig.lib.json",
+			})
+		]
+	},
+	{
+		input: "lib/esm/types/index.d.ts",
+		output: [{ file: "dist/index.d.ts", format: "esm" }],
+		plugins: [dts()],
+		external: ["react", "react-dom"],
+	},
+];
+
+export default config;

package/stories/Introduction.mdx

@@ -143,7 +143,7 @@ In your app entry point (i.e. \`_app.tsx\`), import the \`globals.css\` file fro
 
 ```jsx
 import "<RELATIVE_PATH>/globals.css";
-import "@agility/plenum-ui/lib/tailwind.css";
+import "@agility/plenum-ui/dist/lib/tailwind.css";
 ```
 
 Make sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.

package/stories/atoms/badges/Badge.tsx

@@ -117,7 +117,7 @@ const Badge: React.FC<IBadgeProps> = ({
 						className: `${removeButton?.className || ""} group outline-0 `
 					}}
 				>
-					<DynamicIcon {...{ icon: "XIcon", className: removeButtonStyles }} />
+					<DynamicIcon {...{ icon: "IconX", className: removeButtonStyles }} />
 				</button>
 			)}
 		</div>

package/stories/atoms/buttons/Button/Alternative/Alternative.stories.ts

@@ -22,6 +22,16 @@ export const Alternative: Story = {
 		}
 	}
 }
+export const AlternativeDisabled: Story = {
+	args: {
+		actionType: "alternative",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
 export const AlternativeTrailingIcon: Story = {
 	args: {
 		...Alternative.args,

package/stories/atoms/buttons/Button/Button.tsx

@@ -1,12 +1,14 @@
 import Loader from "stories/atoms/loaders/Loader"
 import { default as cn } from "classnames"
-import { HTMLAttributeAnchorTarget } from "react"
+import React, { HTMLAttributeAnchorTarget, forwardRef } from "react"
 import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
 
 // import Loader from "../loaders/loader/Loader"
 
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
-export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+
+export interface IButtonProps
+	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType?: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */
@@ -31,26 +33,27 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	isLoading?: boolean
 	className?: string
 	iconObj?: React.ReactNode
-	ref?: React.LegacyRef<HTMLButtonElement>
 }
 /**
  * Primary UI component for user interaction
  */
-const Button = ({
-	actionType = "primary",
-	size = "sm",
-	label,
-	icon,
-	iconObj,
-	CustomSVGIcon,
-	fullWidth = false,
-	iconPosition = "trailing",
-	asLink,
-	isLoading = false,
-	className,
-	ref,
-	...props
-}: IButtonProps) => {
+const _Button = (
+	{
+		actionType = "primary",
+		size = "sm",
+		label,
+		icon,
+		iconObj,
+		CustomSVGIcon,
+		fullWidth = false,
+		iconPosition = "leading",
+		asLink,
+		isLoading = false,
+		className,
+		...props
+	}: IButtonProps,
+	ref: React.LegacyRef<HTMLButtonElement>
+) => {
 	const iconStyles = cn(
 		{ "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
 		{ "text-purple-700 h-5 w-5 ": actionType === "secondary" },
@@ -64,11 +67,89 @@ const Button = ({
 	)
 	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
 
-	return (
+	return asLink ? (
+		<a
+			{...{
+				href: asLink.href,
+				target: asLink.target,
+				title: asLink.title,
+				className: cn(
+					"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+					{ "w-full": fullWidth },
+					{ "px-[11px] py-[7px] text-xs": size === "xs" },
+					{ "px-[13px] py-[9px] text-sm": size === "sm" },
+					{ "px-[17px] py-[9px] text-sm": size === "md" },
+					{ "px-[17px] py-[9px] text-base": size === "lg" },
+					{ "px-[25px] py-[13px] text-base": size === "xl" },
+					{
+						"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 disabled:bg-purple-400 disabled:focus-visible:ring-0":
+							actionType === "primary"
+					},
+					{
+						" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+							actionType === "secondary"
+					},
+					{
+						"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
+							actionType === "alternative"
+					},
+					{
+						" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+							actionType === "danger"
+					},
+					className ? className : ""
+				)
+			}}
+		>
+			{" "}
+			{CustomSVGIcon &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : (
+					<i>{CustomSVGIcon}</i>
+				))}
+			{iconObj &&
+				iconPosition === "leading" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
+			{icon &&
+				iconPosition === "leading" &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
+				) : (
+					<DynamicIcon {...{ ...icon, className: iconStyles }} />
+				))}
+			{!icon && !CustomSVGIcon && isLoading && (
+				<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+			)}
+			{label}
+			{icon &&
+				iconPosition === "trailing" &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
+				) : (
+					<DynamicIcon {...{ ...icon, className: iconStyles }} />
+				))}
+			{iconObj &&
+				iconPosition === "trailing" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
+		</a>
+	) : (
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2  font-medium p-2 rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs": size === "xs" },
 				{ "px-[13px] py-[9px] text-sm": size === "sm" },
@@ -76,18 +157,19 @@ const Button = ({
 				{ "px-[17px] py-[9px] text-base": size === "lg" },
 				{ "px-[25px] py-[13px] text-base": size === "xl" },
 				{
-					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 ": actionType === "primary"
+					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 disabled:bg-purple-400 disabled:focus-visible:ring-0":
+						actionType === "primary"
 				},
 				{
-					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100":
+					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
 						actionType === "secondary"
 				},
 				{
-					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300":
+					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
 						actionType === "alternative"
 				},
 				{
-					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 ":
+					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
 						actionType === "danger"
 				},
 				className ? className : ""
@@ -143,4 +225,6 @@ const Button = ({
 	)
 }
 
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button)
+
 export default Button

package/stories/atoms/buttons/Button/Danger/Danger.stories.ts

@@ -22,12 +22,24 @@ export const Danger: Story = {
 		}
 	}
 }
+
+export const DangerDisabled: Story = {
+	args: {
+		actionType: "danger",
+		label: "Danger Zone!",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const DangerTrailingIcon: Story = {
 	args: {
 		...Danger.args,
 		icon: {
 			...defaultIcon,
-			icon: "TrashIcon"
+			icon: "IconTrash"
 		},
 		iconPosition: "trailing"
 	}
@@ -41,7 +53,7 @@ export const DangerLeadingIcon: Story = {
 export const DangerSimpleIconName: Story = {
 	args: {
 		...Danger.args,
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/Primary/Primary.stories.ts

@@ -28,12 +28,24 @@ export const Primary: Story = {
 		}
 	}
 }
+
+export const PrimaryDisabled: Story = {
+	args: {
+		actionType: "primary",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const PrimaryLeadingIcon: Story = {
 	args: {
 		...Primary.args,
 		icon: {
 			...defaultIcon,
-			icon: "CheckIcon",
+			icon: "IconCheck",
 			outline: false
 		},
 		iconPosition: "leading"
@@ -42,7 +54,7 @@ export const PrimaryLeadingIcon: Story = {
 export const PrimarySimpleIconName: Story = {
 	args: {
 		...Primary.args,
-		icon: "CheckIcon",
+		icon: "IconCheck",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/Secondary/Secondary.stories.ts

@@ -28,6 +28,18 @@ export const Secondary: Story = {
 		}
 	}
 }
+
+export const SecondaryDisabled: Story = {
+	args: {
+		actionType: "secondary",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const SecondaryTrailingIcon: Story = {
 	args: {
 		...Secondary.args,
@@ -44,7 +56,7 @@ export const SecondaryLeadingIcon: Story = {
 export const SecondarySimpleIconName: Story = {
 	args: {
 		...Secondary.args,
-		icon: "BellIcon",
+		icon: "IconBell",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/defaultArgs.ts

@@ -1,7 +1,7 @@
 import { IDynamicIconProps } from "../../icons"
 
 const defaultIcon: IDynamicIconProps = {
-	icon: "BellIcon",
+	icon: "IconBell",
 	className: "w-5 h-5",
 	outline: true
 }

package/stories/atoms/buttons/Capsule/Capsule.tsx

@@ -6,7 +6,8 @@ import { UnifiedIconName } from "../../icons/DynamicIcon"
 /**
  * Capsule Style Button
  */
-export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface ICapsuleProps
+	extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */

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

@@ -29,7 +29,7 @@ export const TablerIconSolid: Story = {
 }
 export const TablerIconOutline: Story = {
 	args: {
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		outline: true
 	}
 }

package/stories/atoms/icons/DynamicIcon.tsx

@@ -1,20 +1,18 @@
 import React from "react"
-// TODO: Fix heroicons support 
+// TODO: Fix heroicons support
 import * as SolidIcons from "@heroicons/react/solid"
 import * as OutlineIcons from "@heroicons/react/outline"
-import * as TablerIconComponents from "@tabler/icons-react"
 import * as FA from "react-icons/fa"
 import { tablerIconNames, TablerIconName } from "./tablerIconNames"
 import { default as cn } from "classnames"
 
-import TablerIcon from "./TablerIcon"
 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 = IconName | TablerIconName | FAIconName
+export type UnifiedIconName = TablerIconName | IconName | FAIconName
 
 export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
 	return name in SolidIcons || name in OutlineIcons
@@ -27,11 +25,12 @@ export function isTablerIcon(name: UnifiedIconName): name is 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) || isFAIcon(name)
+	return isTablerIcon(name) // || isHeroIcon(name) || isFAIcon(name)
 }
 
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: UnifiedIconName
 	className?: ClassNameWithAutocomplete
 	outline?: boolean
@@ -62,6 +61,7 @@ export const DynamicIcon = ({
 			/>
 		)
 	}
+
 	if (isFAIcon(icon)) {
 		const Icon = FA[icon]
 		return (

package/stories/atoms/icons/IconWithShadow.stories.ts

@@ -11,13 +11,13 @@ type Story = StoryObj<typeof IconWithShadow>
 
 export const HeroIconSolid: Story = {
 	args: {
-		icon: "CubeTransparentIcon",
+		icon: "IconCube",
 		outline: false
 	}
 }
 export const HeroIconOutline: Story = {
 	args: {
-		icon: "CubeTransparentIcon",
+		icon: "IconCube",
 		outline: true
 	}
 }
@@ -35,7 +35,7 @@ export const TablerIconOutline: Story = {
 }
 export const FAIcon: Story = {
 	args: {
-		icon: "FaGithub",
+		icon: "IconBrandGithub",
 		outline: true
 	}
 }

package/stories/atoms/icons/TablerIcon.tsx

@@ -3,7 +3,7 @@ import { TablerIconName } from "./tablerIconNames"
 import * as TablerIcons from "@tabler/icons-react"
 import { ClassNameWithAutocomplete } from "@/utils/types"
 
-export interface ITablerIconProps extends React.ComponentProps<"i"> {
+export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: TablerIconName
 	className?: ClassNameWithAutocomplete
 }