@agility/plenum-ui 2.0.0-rc2 → 2.0.0-rc21

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -1,5 +1,4 @@
-import React, { Fragment, HTMLAttributes, useState } from "react"
-import { Transition } from "@headlessui/react"
+import React, { HTMLAttributes, useState } from "react"
 import { default as cn } from "classnames"
 import {
 	useFloating,
@@ -18,33 +17,28 @@ import {
 } from "@floating-ui/react"
 
 import { ClassNameWithAutocomplete } from "utils/types"
-import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
+import { DynamicIcon, IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons"
 
 export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
-	icon?: {
-		name: IDynamicIconProps["icon"]
-		className?: ClassNameWithAutocomplete
-		pos?: "trailing" | "leading"
-		outline?: boolean
-	}
+	icon?: IDynamicIconProps
+	iconPosition?: "trailing" | "leading"
 	label: string
 	onClick?(): void
 	isEmphasized?: boolean
 	key: React.Key
 }
-export interface IDropdownClassnames {
-	groupClassname?: ClassNameWithAutocomplete
-	itemsClassname?: ClassNameWithAutocomplete
-	itemClassname?: ClassNameWithAutocomplete
-	activeItemClassname?: ClassNameWithAutocomplete
-	buttonClassname?: ClassNameWithAutocomplete
-}
 export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 	items: IItemProp[][]
 	label: string
 	CustomDropdownTrigger?: React.ReactNode
 	id: string
-	classNames?: IDropdownClassnames
+	groupClassname?: ClassNameWithAutocomplete
+	itemsClassname?: ClassNameWithAutocomplete
+	itemClassname?: ClassNameWithAutocomplete
+	activeItemClassname?: ClassNameWithAutocomplete
+	buttonClassname?: ClassNameWithAutocomplete
+	iconClassname?: ClassNameWithAutocomplete
+	iconSpacingClassname?: ClassNameWithAutocomplete
 	placement?: Placement
 	offsetOptions?: Partial<{
 		mainAxis: number
@@ -52,7 +46,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 		alignmentAxis: number | null
 	}>
 }
-export const defaultClassNames: IDropdownClassnames = {
+export const defaultClassNames = {
 	groupClassname: "flex inline-block text-left",
 	itemsClassname:
 		"mt-2 origin-bottom-right rounded bg-white shadow-lg z-20 divide-y divide-gray-100  border border-gray-300  ",
@@ -60,7 +54,9 @@ export const defaultClassNames: IDropdownClassnames = {
 		"group flex font-muli  cursor-pointer items-center px-4 py-2 text-sm transition-all hover:bg-gray-100 hover:text-gray-900 justify-between gap-4 ",
 	activeItemClassname: "block px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 hover:text-gray-900",
 	buttonClassname:
-		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all   text-gray-400 hover:text-gray-600 "
+		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all text-gray-400 hover:text-gray-600 ",
+	iconClassname: "ml-1 h-5 w-6",
+	iconSpacingClassname: "flex items-center gap-x-4"
 }
 
 /** Comment */
@@ -68,7 +64,13 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	items,
 	id,
 	label,
-	classNames = defaultClassNames,
+	groupClassname,
+	itemsClassname,
+	itemClassname,
+	activeItemClassname,
+	buttonClassname,
+	iconClassname,
+	iconSpacingClassname,
 	CustomDropdownTrigger,
 	placement = "bottom-start",
 	offsetOptions,
@@ -108,12 +110,10 @@ const Dropdown: React.FC<IDropdownProps> = ({
 		}
 	})
 
-	const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames
-
 	return (
 		<div
 			{...{
-				className: groupClassname,
+				className: cn(defaultClassNames.groupClassname, groupClassname),
 				role: "combobox",
 				"aria-owns": `${id}-list`,
 				"aria-expanded": isOpen,
@@ -124,7 +124,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 			<button
 				{...{
 					ref: refs.setReference,
-					className: buttonClassname,
+					className: cn(defaultClassNames.buttonClassname, buttonClassname),
 					onClick: () => {
 						setIsOpen(!isOpen)
 					},
@@ -136,7 +136,10 @@ const Dropdown: React.FC<IDropdownProps> = ({
 				) : (
 					<>
 						<span className="pl-1">{label}</span>
-						<DynamicIcon icon="ChevronDownIcon" className="ml-1 h-5 w-6 " />
+						<DynamicIcon
+							icon="ChevronDownIcon"
+							className={cn(defaultClassNames.iconClassname, iconClassname)}
+						/>
 					</>
 				)}
 			</button>
@@ -144,121 +147,142 @@ const Dropdown: React.FC<IDropdownProps> = ({
 			{isMounted && items.length > 0 && isOpen && (
 				<FloatingPortal>
 					<FloatingFocusManager context={context} modal={true}>
-						<Transition
-							as={Fragment}
-							show={isOpen}
-							enter="transition ease-out duration-100"
-							enterFrom="transform opacity-0 scale-95"
-							enterTo="transform opacity-100 scale-100"
-							leave="transition ease-in duration-75"
-							leaveFrom="transform opacity-100 scale-100"
-							leaveTo="transform opacity-0 scale-95"
+						<div
+							{...getFloatingProps()}
+							className={cn(defaultClassNames.itemsClassname, itemsClassname)}
+							ref={refs.setFloating}
+							aria-labelledby={label}
+							style={{
+								position: context.strategy,
+								top: Math.round(context.y ?? 0),
+								left: Math.round(context.x ?? 0),
+								width: "max-content",
+								maxWidth: "min(calc(100vw - 10px), 25rem)",
+								...floatingStyles
+							}}
 						>
-							<ul
-								{...{
-									...getFloatingProps(),
-									className: itemsClassname,
-									ref: refs.setFloating,
-									// style: floatingStyles,
-									"aria-labelledby": label,
-									id: `${id}-list`,
-									role: "listbox",
-									style: {
-										position: context.strategy,
-										top: Math.round(context.y ?? 0),
-										left: Math.round(context.x ?? 0),
-										width: "max-content",
-										maxWidth: "min(calc(100vw - 10px), 25rem)",
-										...floatingStyles
-									}
-								}}
-								className={itemsClassname}
-								ref={refs.setFloating}
-								aria-labelledby={label}
-								{...getFloatingProps()}
-							>
+							<ul id={`${id}-list`} role="listbox" style={{ ...transitionStyles }}>
 								{items.map((itemStack, idx) => {
 									return (
 										<React.Fragment key={`${idx}-list-${id}`}>
-											{itemStack.map(({ onClick, label, key, isEmphasized, icon, ...rest }) => {
-												const active = activeItem && activeItem === key
-												const itemClass = cn(
-													itemClassname,
-													"group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
-													{
-														"text-red-500": isEmphasized
-													},
-													{
-														"text-gray-900": !isEmphasized
-													},
-													{
-														"bg-gray-100 text-gray-900": active
-													},
-													active ? activeItemClassname : "",
-													{
-														"bg-gray-100 text-red-500 hover:text-red-500":
-															active && isEmphasized
-													},
-													itemClassname
-												)
-
-												return (
-													<li key={key}>
-														<button
-															{...{
-																onClick: () => {
-																	setActiveItem(key)
-																	onClick && onClick()
-																},
-																key,
-																className: cn(itemClass, "w-full"),
-																...rest
-															}}
-														>
-															<div className="flex items-center gap-x-4">
-																{icon &&
-																	(icon.pos === "leading" ||
-																		icon?.pos === undefined) && (
-																		<DynamicIcon
-																			{...{
-																				icon: icon.name,
-																				className: cn(
-																					icon.className,
-																					{
-																						"text-red-500": isEmphasized
-																					},
-																					"opacity-60 group-hover:opacity-100"
-																				),
-																				outline: icon.outline
-																			}}
-																		/>
+											{itemStack.map(
+												(
+													{ onClick, label, key, isEmphasized, icon, iconPosition, ...rest },
+													idx
+												) => {
+													const active = activeItem && activeItem === key
+													const itemClass = cn(
+														defaultClassNames.itemClassname,
+														itemClassname,
+														"group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
+														{
+															"text-red-500": isEmphasized
+														},
+														{
+															"text-gray-900": !isEmphasized
+														},
+														{
+															"bg-gray-100 text-gray-900": active
+														},
+														active
+															? cn(
+																	defaultClassNames.activeItemClassname,
+																	activeItemClassname
+															  )
+															: "",
+														{
+															"bg-gray-100 text-red-500 hover:text-red-500":
+																active && isEmphasized
+														}
+													)
+													return (
+														<li key={`${key}-${idx}`}>
+															<button
+																{...{
+																	onClick: () => {
+																		setActiveItem(key)
+																		onClick && onClick()
+																	},
+																	key: key,
+																	className: cn(itemClass, "w-full"),
+																	...rest
+																}}
+															>
+																<div
+																	className={cn(
+																		defaultClassNames.iconSpacingClassname,
+																		iconSpacingClassname
 																	)}
-																<div className="whitespace-nowrap">{label}</div>
-																{icon && icon.pos === "trailing" && (
-																	<DynamicIcon
-																		{...{
-																			icon: icon.name,
-																			className: cn(
-																				icon.className,
-																				{
-																					"text-red-500": isEmphasized
-																				},
-																				"opacity-60 group-"
-																			),
-																			outline: icon.outline
-																		}}
-																	/>
-																)}
-															</div>
-														</button>
-													</li>
-												)
-											})}
+																>
+																	{icon &&
+																		(iconPosition === "leading" ||
+																			iconPosition === undefined) &&
+																		(typeof icon === "string" ? (
+																			<DynamicIcon
+																				{...{
+																					icon: icon,
+																					className: cn(
+																						{
+																							"text-red-500": isEmphasized
+																						},
+																						"opacity-60 group"
+																					)
+																				}}
+																			/>
+																		) : (
+																			<DynamicIcon
+																				{...{
+																					...icon,
+																					className: cn(
+																						icon.className,
+																						{
+																							"text-red-500": isEmphasized
+																						},
+																						"opacity-60 group"
+																					)
+																				}}
+																			/>
+																		))}
+																	<div className="whitespace-nowrap">{label}</div>
+																	{icon &&
+																		iconPosition === "trailing" &&
+																		(typeof icon === "string" ? (
+																			<DynamicIcon
+																				{...{
+																					icon: icon,
+																					className: cn(
+																						{
+																							"text-red-500": isEmphasized
+																						},
+																						"opacity-60 group"
+																					)
+																				}}
+																			/>
+																		) : (
+																			<DynamicIcon
+																				{...{
+																					...icon,
+																					className: cn(
+																						icon.className,
+																						{
+																							"text-red-500": isEmphasized
+																						},
+																						"opacity-60 group"
+																					)
+																				}}
+																			/>
+																		))}
+																</div>
+															</button>
+														</li>
+													)
+												}
+											)}
 										</React.Fragment>
 									)
 								})}
 							</ul>
-						</Transition>
+						</div>
 					</FloatingFocusManager>
 				</FloatingPortal>
 			)}

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -3,6 +3,12 @@ import { IItemProp } from "./DropdownComponent"
 export const dropdownDataBase: IItemProp[][] = [
 	[
 		{
+			icon: {
+				icon: "IconCopy"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			key: "Copy",
 			label: "Copy",
 			onClick: () => {
@@ -12,6 +18,12 @@ export const dropdownDataBase: IItemProp[][] = [
 	],
 	[
 		{
+			icon: {
+				icon: "IconPlus"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			key: "Add to Batch",
 			label: "Add to Batch",
 			onClick: () => {
@@ -19,6 +31,12 @@ export const dropdownDataBase: IItemProp[][] = [
 			}
 		},
 		{
+			icon: {
+				icon: "IconEye"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			key: "View Batch",
 			label: "View Batch",
 			onClick: () => {
@@ -28,6 +46,12 @@ export const dropdownDataBase: IItemProp[][] = [
 	],
 	[
 		{
+			icon: {
+				icon: "IconTrash"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			label: "Delete",
 			onClick: () => {
 				console.log("Delete action")
@@ -42,11 +66,11 @@ export const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{
 			icon: {
-				name: "IconClipboardCopy",
-				pos: "leading",
+				icon: "IconClipboardCopy",
 				className: "h-5 w-5",
 				outline: false
 			},
+			iconPosition: "leading",
 			key: "Copy",
 			label: "Copy",
 			onClick: () => {
@@ -57,11 +81,11 @@ export const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{
 			icon: {
-				name: "IconFolderPlus",
-				pos: "leading",
+				icon: "IconFolderPlus",
 				className: "h-5 w-5",
 				outline: false
 			},
+			iconPosition: "leading",
 			key: "Add to Batch",
 			label: "Add to Batch",
 			onClick: () => {
@@ -70,11 +94,11 @@ export const dropdownDataWithIcons: IItemProp[][] = [
 		},
 		{
 			icon: {
-				name: "IconEye",
-				pos: "leading",
+				icon: "IconEye",
 				className: "h-5 w-5",
 				outline: false
 			},
+			iconPosition: "leading",
 			key: "View Batch",
 			label: "View Batch",
 			onClick: () => {
@@ -85,11 +109,11 @@ export const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{
 			icon: {
-				name: "IconTrash",
-				pos: "leading",
+				icon: "IconTrash",
 				className: "h-5 w-5",
 				outline: false
 			},
+			iconPosition: "leading",
 			key: "Delete",
 			label: "Delete",
 			onClick: () => {

package/stories/organisms/DropdownComponent/index.ts

@@ -1,4 +1,4 @@
-import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "./DropdownComponent"
-export type { IItemProp, IDropdownClassnames, IDropdownProps }
+import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent"
+export type { IItemProp, IDropdownProps }
 export { defaultClassNames }
 export default Dropdown

package/stories/organisms/EmptySectionPlaceholder/index.tsx

@@ -1,3 +1,4 @@
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
-export default EmptySectionPlaceholder
+
 export type { IEmptySectionPlaceholderProps }
+export default EmptySectionPlaceholder

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -79,7 +79,12 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 								<DynamicIcon
 									{...{
 										...leadIcon,
-										className: cn("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
+										className: cn(
+											"h-5 w-5 text-gray-400",
+											leadIconClassNames,
+											customIconClass,
+											leadIcon.className
+										),
 										outline: iconOutlined
 									}}
 								/>
@@ -123,7 +128,7 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 								<DynamicIcon
 									{...{
 										...trailIcon,
-										className: cn("h-5 w-5 text-gray-400", customIconClass),
+										className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
 										outline: iconOutlined
 									}}
 								/>

package/stories/organisms/TextInputSelect/InputSelect.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useState } from "react"
+import { default as cn } from "classnames"
+
+export type SelectOptions = {
+	label: string
+	value: string
+}
+export interface InputSelectProps {
+	align: "left" | "right"
+	/** Show the CTA without Background color and a border seperator */
+	inputOptions: SelectOptions[]
+	/** Onclick callback */
+	onSelectOption?(value: string): void
+	className?: string
+	isDisabled?: boolean
+}
+
+/** Comment */
+export const InputSelect: FC<InputSelectProps> = ({
+	inputOptions,
+	onSelectOption,
+	align = "right",
+	className,
+	isDisabled
+}: InputSelectProps): JSX.Element | null => {
+	const [selectedOption, setSelectedOption] = useState<string>(inputOptions[0].value)
+
+	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+		const targetValue = e.target.value
+		onSelectOption && onSelectOption(targetValue)
+		setSelectedOption(targetValue)
+	}
+
+	if (!inputOptions?.length) return null
+	return (
+		<select
+			className={cn(
+				"relative z-10 inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 pr-7 text-sm font-medium",
+				"focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500",
+				align === "right"
+					? "-ml-px rounded-r border-l-white text-gray-700"
+					: align === "left"
+					? "-mr-px rounded-l border-r-white text-gray-500 focus-within:z-10"
+					: "",
+				!onSelectOption ? "cursor-default" : "",
+				className
+			)}
+			onChange={handleChange}
+			value={selectedOption}
+			disabled={isDisabled}
+		>
+			{inputOptions.map((option) => (
+				<option key={option.value} value={option.value}>
+					{option.label}
+				</option>
+			))}
+		</select>
+	)
+}

package/stories/organisms/TextInputSelect/TextInputSelect.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import TextInputSelect from "."
+
+const meta: Meta<typeof TextInputSelect> = {
+	title: "Design System/organisms/TextInputSelect",
+	component: TextInputSelect,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof TextInputSelect>
+export const DefaultTextInputSelectStory: Story = {
+	args: {
+		isFocused: false,
+		isError: false,
+		id: "input",
+		name: "input",
+		defaultValue: "",
+		isRequired: false,
+		isDisabled: false,
+		isShowCounter: false,
+		label: "Currency",
+		placeholder: "420.69",
+		type: "currency",
+		inputOptions: [
+			{ label: "USD", value: "USD" },
+			{ label: "CAD", value: "CAD" },
+			{ label: "EUR", value: "EUR" }
+		],
+		prefix: "$"
+	}
+}