@agility/plenum-ui 2.0.0-rc25 → 2.0.0-rc27

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

@@ -6,12 +6,12 @@ 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 = IconName | TablerIconName | FAIconName;
-export declare function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons;
+export type UnifiedIconName = TablerIconName;
 export declare function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
-export declare function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
+export declare function isHeroIcon(name: UnifiedIconName): boolean;
+export declare function isFAIcon(name: UnifiedIconName): boolean;
 export declare function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
-export interface IDynamicIconProps {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     icon: UnifiedIconName;
     className?: ClassNameWithAutocomplete;
     outline?: boolean;

package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { HTMLAttributes } from "react";
 import { Placement } from "@floating-ui/react";
 import { ClassNameWithAutocomplete } from "utils/types";
 import { IDynamicIconProps } from "@/stories/atoms/icons";
@@ -10,7 +10,7 @@ export interface IItemProp {
     isEmphasized?: boolean;
     key: React.Key;
 }
-export interface IDropdownProps {
+export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
     items: IItemProp[][];
     label: string;
     CustomDropdownTrigger?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc25",
+	"version": "2.0.0-rc27",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

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/Danger/Danger.stories.ts

@@ -27,7 +27,7 @@ export const DangerTrailingIcon: Story = {
 		...Danger.args,
 		icon: {
 			...defaultIcon,
-			icon: "TrashIcon"
+			icon: "IconTrash"
 		},
 		iconPosition: "trailing"
 	}
@@ -41,7 +41,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

@@ -33,7 +33,7 @@ export const PrimaryLeadingIcon: Story = {
 		...Primary.args,
 		icon: {
 			...defaultIcon,
-			icon: "CheckIcon",
+			icon: "IconCheck",
 			outline: false
 		},
 		iconPosition: "leading"
@@ -42,7 +42,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

@@ -44,7 +44,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/icons/DynamicIcon.stories.ts

@@ -11,13 +11,13 @@ type Story = StoryObj<typeof DynamicIcon>
 
 export const HeroIconSolid: Story = {
 	args: {
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		outline: false
 	}
 }
 export const HeroIconOutline: Story = {
 	args: {
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		outline: true
 	}
 }
@@ -29,13 +29,13 @@ export const TablerIconSolid: Story = {
 }
 export const TablerIconOutline: Story = {
 	args: {
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		outline: true
 	}
 }
 export const FAIcon: Story = {
 	args: {
-		icon: "FaGithub",
+		icon: "IconBrandGithub",
 		outline: true
 	}
 }

package/stories/atoms/icons/DynamicIcon.tsx

@@ -14,25 +14,33 @@ 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 //HACK to eliminate some icons...|  IconName | FAIconName
 
-export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
-	return name in SolidIcons || name in OutlineIcons
-}
+// export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
+// 	return name in SolidIcons || name in OutlineIcons
+// }
 
 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 isHeroIcon(name: UnifiedIconName) {
+	return false
+}
+
+export function isFAIcon(name: UnifiedIconName) {
+	return false
 }
+
+// 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.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
-export interface IDynamicIconProps {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: UnifiedIconName
 	className?: ClassNameWithAutocomplete
 	outline?: boolean
@@ -50,6 +58,8 @@ export const DynamicIcon = ({
 		return <i {...{ ...props, className: "flex items-center justify-center" }}>{CustomSVG}</i>
 	}
 
+	const iconStr = icon as string
+
 	if (isTablerIcon(icon)) {
 		return (
 			<TablerIcon
@@ -63,29 +73,30 @@ 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>
-		)
-	}
+	//HACK
+	// 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/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/molecules/inputs/combobox/ComboBox.tsx

@@ -44,151 +44,142 @@ function classNames(...classes: string[]) {
 	return classes.filter(Boolean).join(" ")
 }
 
- const Combobox = <T extends Record<string, unknown>>({
-		label,
-		items,
-		displayProperty,
-		displayValue,
-		keyProperty,
-		onChange,
-		placeholder,
-		message,
-		isDisabled,
-		isError,
-		isRequired,
-		id,
-		nullable
- }: IComboboxProps<T>) => {
-		const [query, setQuery] = useState<string>("")
-		const [selectedItem, setSelectedItem] = useState<T | undefined>()
+const Combobox = <T extends Record<string, unknown>>({
+	label,
+	items,
+	displayProperty,
+	displayValue,
+	keyProperty,
+	onChange,
+	placeholder,
+	message,
+	isDisabled,
+	isError,
+	isRequired,
+	id,
+	nullable
+}: IComboboxProps<T>) => {
+	const [query, setQuery] = useState<string>("")
+	const [selectedItem, setSelectedItem] = useState<T | undefined>()
 
-		const onChangeValue = (value: T | undefined) => {
-			if (value && selectedItem && value[keyProperty] === selectedItem[keyProperty]) {
-				setSelectedItem(undefined)
-			} else {
-				setSelectedItem(value)
-			}
+	const onChangeValue = (value: T | undefined) => {
+		if (value && selectedItem && value[keyProperty] === selectedItem[keyProperty]) {
+			setSelectedItem(undefined)
+		} else {
+			setSelectedItem(value)
 		}
+	}
 
-		useEffect(() => {
-			if (displayValue) {
-				const dv = items.find((i) => i[displayProperty] === displayValue)
-				setSelectedItem(dv)
-			}
-		}, [displayValue])
+	useEffect(() => {
+		if (displayValue) {
+			const dv = items.find((i) => i[displayProperty] === displayValue)
+			setSelectedItem(dv)
+		}
+	}, [displayValue])
 
-		useEffect(() => {
-			typeof onChange === "function" && onChange(selectedItem)
-		}, [selectedItem])
+	useEffect(() => {
+		typeof onChange === "function" && onChange(selectedItem)
+	}, [selectedItem])
 
-		const filteredItems =
-			query === ""
-				? items
-				: items.filter((item) => {
-						return `${item[displayProperty]}`.toLowerCase().includes(query.toLowerCase())
-				  })
-		const labelStyles = cn("block text-sm font-medium text-gray-700")
-		const buttonStyles = cn("absolute inset-y-0 right-0 flex items-center rounded-r px-2 focus:outline-none")
-		const optionStyles = cn(
-			"absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-		)
-		return (
-			<HeadlessUICombobox
-				as="div"
-				value={selectedItem}
-				onChange={(e: T | undefined) => onChangeValue(e)}
-				disabled={isDisabled}
-				nullable={nullable ? undefined : false}
-			>
-				{label && (
-					<HeadlessUICombobox.Label className={labelStyles}>
-						<InputLabel
-							isPlaceholder
-							isActive
-							label={label}
-							isRequired={isRequired}
-							id={id}
-							isError={isError}
-							isDisabled={isDisabled}
-						/>
-					</HeadlessUICombobox.Label>
-				)}
+	const filteredItems =
+		query === ""
+			? items
+			: items.filter((item) => {
+					return `${item[displayProperty]}`.toLowerCase().includes(query.toLowerCase())
+			  })
+	const labelStyles = cn("block text-sm font-medium text-gray-700")
+	const buttonStyles = cn("absolute inset-y-0 right-0 flex items-center rounded-r px-2 focus:outline-none")
+	const optionStyles = cn(
+		"absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+	)
+	return (
+		<HeadlessUICombobox
+			as="div"
+			value={selectedItem}
+			onChange={(e: T | undefined) => onChangeValue(e)}
+			disabled={isDisabled}
+			nullable={nullable ? undefined : false}
+		>
+			{label && (
+				<HeadlessUICombobox.Label className={labelStyles}>
+					<InputLabel
+						isPlaceholder
+						isActive
+						label={label}
+						isRequired={isRequired}
+						id={id}
+						isError={isError}
+						isDisabled={isDisabled}
+					/>
+				</HeadlessUICombobox.Label>
+			)}
+			<div className="relative">
 				<div className="relative">
-					<div className="relative">
-						<HeadlessUICombobox.Input
-							className={`w-full rounded border border-gray-300 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm ${
-								isError ? "border-red-500" : ""
-							}`}
-							onChange={(event) => setQuery(event.target.value)}
-							displayValue={(item: Record<string, unknown>) => `${item ? item[displayProperty] : ""}`}
-							placeholder={placeholder}
-						/>
-						{selectedItem && nullable && (
-							<button
-								className="absolute right-8 top-[1px] h-9 w-5 text-gray-400 hover:text-gray-500"
-								onClick={() => setSelectedItem(undefined)}
+					<HeadlessUICombobox.Input
+						className={`w-full rounded border border-gray-300 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm ${
+							isError ? "border-red-500" : ""
+						}`}
+						onChange={(event) => setQuery(event.target.value)}
+						displayValue={(item: Record<string, unknown>) => `${item ? item[displayProperty] : ""}`}
+						placeholder={placeholder}
+					/>
+					{selectedItem && nullable && (
+						<button
+							className="absolute right-8 top-[1px] h-9 w-5 text-gray-400 hover:text-gray-500"
+							onClick={() => setSelectedItem(undefined)}
+						>
+							<DynamicIcon icon="IconX" className="h-4 w-4 " aria-hidden="true" />
+						</button>
+					)}
+				</div>
+				<HeadlessUICombobox.Button className={buttonStyles}>
+					<DynamicIcon icon="IconSelector" className="h-5 w-5 text-gray-400" aria-hidden="true" />
+				</HeadlessUICombobox.Button>
+
+				{filteredItems.length > 0 && (
+					<HeadlessUICombobox.Options className={optionStyles}>
+						{filteredItems.map((item, index) => (
+							<HeadlessUICombobox.Option
+								key={`${item[keyProperty]}-${index}`}
+								value={item}
+								className={({ active }) =>
+									classNames(
+										"relative cursor-default select-none py-2 pl-3 pr-9",
+										active ? "bg-purple-600 text-white" : "text-gray-900"
+									)
+								}
 							>
-								<DynamicIcon icon="XIcon" className="h-4 w-4 " aria-hidden="true" />
-							</button>
-						)}
-					</div>
-					<HeadlessUICombobox.Button className={buttonStyles}>
-						<DynamicIcon icon="SelectorIcon" className="h-5 w-5 text-gray-400" aria-hidden="true" />
-					</HeadlessUICombobox.Button>
+								{({ active, selected }) => (
+									<>
+										<span className={classNames("block truncate", selected ? "font-semibold" : "")}>
+											{`${item[displayProperty]}`}
+										</span>
 
-					{filteredItems.length > 0 && (
-						<HeadlessUICombobox.Options className={optionStyles}>
-							{filteredItems.map((item, index) => (
-								<HeadlessUICombobox.Option
-									key={`${item[keyProperty]}-${index}`}
-									value={item}
-									className={({ active }) =>
-										classNames(
-											"relative cursor-default select-none py-2 pl-3 pr-9",
-											active ? "bg-purple-600 text-white" : "text-gray-900"
-										)
-									}
-								>
-									{({ active, selected }) => (
-										<>
+										{selected && (
 											<span
 												className={classNames(
-													"block truncate",
-													selected ? "font-semibold" : ""
+													"absolute inset-y-0 right-0 flex items-center pr-4",
+													active ? "text-white" : "text-purple-600"
 												)}
 											>
-												{`${item[displayProperty]}`}
+												<DynamicIcon icon="IconCheck" className="h-5 w-5" aria-hidden="true" />
 											</span>
-
-											{selected && (
-												<span
-													className={classNames(
-														"absolute inset-y-0 right-0 flex items-center pr-4",
-														active ? "text-white" : "text-purple-600"
-													)}
-												>
-													<DynamicIcon
-														icon="CheckIcon"
-														className="h-5 w-5"
-														aria-hidden="true"
-													/>
-												</span>
-											)}
-										</>
-									)}
-								</HeadlessUICombobox.Option>
-							))}
-						</HeadlessUICombobox.Options>
-					)}
-				</div>
-				<div className="grow">
-					{message && (
-						<span className={`mt-1 block text-sm ${isError ? `text-red-500` : `text-gray-500`}`}>
-							{message}
-						</span>
-					)}
-				</div>
-			</HeadlessUICombobox>
-		)
- }
-export default Combobox
+										)}
+									</>
+								)}
+							</HeadlessUICombobox.Option>
+						))}
+					</HeadlessUICombobox.Options>
+				)}
+			</div>
+			<div className="grow">
+				{message && (
+					<span className={`mt-1 block text-sm ${isError ? `text-red-500` : `text-gray-500`}`}>
+						{message}
+					</span>
+				)}
+			</div>
+		</HeadlessUICombobox>
+	)
+}
+export default Combobox

package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx

@@ -12,13 +12,14 @@ const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{
 			icon: {
-				icon: "IconClipboardCopy"
+				icon: "IconCopy"
 
 				// className: "h-5 w-5",
 				// outline: false
 			},
+			iconPosition: "leading",
 			key: "Copy",
-			label: "Copy",
+			label: "Copy The Thing",
 			onClick: () => {
 				console.log("Copy action")
 			}
@@ -45,7 +46,7 @@ const dropdownDataWithIcons: IItemProp[][] = [
 				className: "h-5 w-5",
 				outline: false
 			},
-			iconPosition: "trailing",
+			iconPosition: "leading",
 			key: "View Batch",
 			label: "View Batch",
 			onClick: () => {

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -16,7 +16,6 @@ export interface IButtonDropdownProps {
  * Primary UI component for user interaction
  */
 const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement, offsetOptions }) => {
-
 	return (
 		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
 			<Button
@@ -42,7 +41,7 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 					CustomDropdownTrigger: (
 						<DynamicIcon
 							{...{
-								icon: "ChevronDownIcon",
+								icon: "IconChevronDown",
 								className: cn("h-5 w-5", {
 									"text-white": button.actionType === "primary",
 									"text-purple-700": button.actionType === "secondary",

package/stories/organisms/DropdownComponent/Dropdown.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Dropdown> = {
 type Story = StoryObj<typeof Dropdown>
 
 const IconElement = () => (
-	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"DotsVerticalIcon"} />
+	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"IconDotsVertical"} />
 )
 const defaultArgs: Story["args"] = {
 	items: [...dropdownDataBase],

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -29,8 +29,7 @@ export interface IItemProp {
 	key: React.Key
 }
 
-export interface IDropdownProps {
-	//this doesn't need to extend div... extends HTMLAttributes<HTMLDivElement> {
+export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 	items: IItemProp[][]
 	label: string
 	CustomDropdownTrigger?: React.ReactNode
@@ -141,7 +140,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 					<>
 						<span className="pl-1">{label}</span>
 						<DynamicIcon
-							icon="ChevronDownIcon"
+							icon="IconChevronDown"
 							className={cn(defaultClassNames.iconClassname, iconClassname)}
 						/>
 					</>

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -10,7 +10,7 @@ export const dropdownDataBase: IItemProp[][] = [
 				// outline: false
 			},
 			key: "Copy",
-			label: "Copy",
+			label: "Copy to Clipboard",
 			onClick: () => {
 				console.log("Copy action")
 			}
@@ -66,13 +66,13 @@ export const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{
 			icon: {
-				icon: "IconClipboardCopy",
+				icon: "IconCopy",
 				className: "h-5 w-5",
 				outline: false
 			},
 			iconPosition: "leading",
 			key: "Copy",
-			label: "Copy",
+			label: "Copy Item",
 			onClick: () => {
 				console.log("Copy action")
 			}