@agility/plenum-ui 1.3.50 → 2.0.0-rc10

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -0,0 +1,300 @@
+import React, { Fragment, HTMLAttributes, useState } from "react"
+import { Transition } from "@headlessui/react"
+import { default as cn } from "classnames"
+import {
+	useFloating,
+	autoUpdate,
+	offset,
+	useDismiss,
+	useRole,
+	useClick,
+	useInteractions,
+	FloatingFocusManager,
+	autoPlacement,
+	shift,
+	FloatingPortal,
+	useTransitionStyles,
+	Placement
+} from "@floating-ui/react"
+
+import { ClassNameWithAutocomplete } from "utils/types"
+import { DynamicIcon, IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons"
+
+export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
+	icon?: IDynamicIconProps | UnifiedIconName
+	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
+	placement?: Placement
+	offsetOptions?: Partial<{
+		mainAxis: number
+		crossAxis: number
+		alignmentAxis: number | null
+	}>
+}
+export const defaultClassNames: IDropdownClassnames = {
+	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  ",
+	itemClassname:
+		"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 "
+}
+
+/** Comment */
+const Dropdown: React.FC<IDropdownProps> = ({
+	items,
+	id,
+	label,
+	classNames = defaultClassNames,
+	CustomDropdownTrigger,
+	placement = "bottom-start",
+	offsetOptions,
+	...props
+}: IDropdownProps): JSX.Element | null => {
+	const [isOpen, setIsOpen] = useState(false)
+	const [activeItem, setActiveItem] = useState<React.Key | null>(null)
+
+	// Floating UI logic
+	const { refs, floatingStyles, context } = useFloating({
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		placement,
+		middleware: [
+			offset(offsetOptions ?? 10),
+			autoPlacement({
+				allowedPlacements: [placement, "bottom-start", "bottom-end", "bottom"]
+			}),
+			shift({ rootBoundary: "document" })
+		],
+		whileElementsMounted: autoUpdate
+	})
+	const click = useClick(context)
+	const dismiss = useDismiss(context)
+	const role = useRole(context)
+	const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role])
+	const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+		duration: {
+			open: 200,
+			close: 200
+		},
+		initial: {
+			opacity: 0
+		},
+		open: {
+			opacity: 1
+		}
+	})
+
+	const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames
+
+	return (
+		<div
+			{...{
+				className: groupClassname,
+				role: "combobox",
+				"aria-owns": `${id}-list`,
+				"aria-expanded": isOpen,
+				"aria-haspopup": "listbox",
+				...props
+			}}
+		>
+			<button
+				{...{
+					ref: refs.setReference,
+					className: buttonClassname,
+					onClick: () => {
+						setIsOpen(!isOpen)
+					},
+					...getReferenceProps()
+				}}
+			>
+				{CustomDropdownTrigger ? (
+					<span className="">{CustomDropdownTrigger}</span>
+				) : (
+					<>
+						<span className="pl-1">{label}</span>
+						<DynamicIcon icon="ChevronDownIcon" className="ml-1 h-5 w-6 " />
+					</>
+				)}
+			</button>
+
+			{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"
+						>
+							<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()}
+							>
+								{items.map((itemStack, idx) => {
+									return (
+										<React.Fragment key={`${idx}-list-${id}`}>
+											{itemStack.map(
+												({
+													onClick,
+													label,
+													key,
+													isEmphasized,
+													icon,
+													iconPosition,
+													...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 &&
+																		(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>
+					</FloatingFocusManager>
+				</FloatingPortal>
+			)}
+		</div>
+	)
+}
+
+export default Dropdown

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -0,0 +1,101 @@
+import { IItemProp } from "./DropdownComponent"
+
+export const dropdownDataBase: IItemProp[][] = [
+	[
+		{
+			key: "Copy",
+			label: "Copy",
+			onClick: () => {
+				console.log("Copy action")
+			}
+		}
+	],
+	[
+		{
+			key: "Add to Batch",
+			label: "Add to Batch",
+			onClick: () => {
+				console.log("Add to Batch action")
+			}
+		},
+		{
+			key: "View Batch",
+			label: "View Batch",
+			onClick: () => {
+				console.log("View Batch action")
+			}
+		}
+	],
+	[
+		{
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
+			},
+			isEmphasized: true,
+			key: "Delete"
+		}
+	]
+]
+
+export const dropdownDataWithIcons: IItemProp[][] = [
+	[
+		{
+			icon: {
+				icon: "IconClipboardCopy",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "Copy",
+			label: "Copy",
+			onClick: () => {
+				console.log("Copy action")
+			}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconFolderPlus",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "Add to Batch",
+			label: "Add to Batch",
+			onClick: () => {
+				console.log("Add to Batch action")
+			}
+		},
+		{
+			icon: {
+				icon: "IconEye",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "View Batch",
+			label: "View Batch",
+			onClick: () => {
+				console.log("View Batch action")
+			}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconTrash",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "Delete",
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
+			},
+			isEmphasized: true
+		}
+	]
+]

package/stories/organisms/DropdownComponent/index.ts

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

package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
+import { useRef } from "react"
+
+const meta: Meta<typeof EmptySectionPlaceholder> = {
+	title: "Design System/Organisms/Empty Section Placeholder",
+	component: EmptySectionPlaceholder,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof EmptySectionPlaceholder>
+
+const MissingAttachmentCTA = () => {
+	const fileInputRef = useRef<HTMLInputElement>(null)
+	return (
+		<div className="mb-2 block text-sm font-medium text-gray-600">
+			<input type="file" className="hidden" ref={fileInputRef} />
+			<button
+				className="hover:underline hover:text-gray-700 transition-all"
+				onClick={() => {
+					fileInputRef?.current && fileInputRef.current.click()
+				}}
+			>
+				Upload
+			</button>{" "}
+			<span>OR drag and drop a file</span>
+		</div>
+	)
+}
+
+export const CallsToAction: Story = {
+	args: {
+		icon: { icon: "IconPaperclip" },
+		mutedText: "No File is attached yet",
+		CallToActionComponent: <MissingAttachmentCTA />,
+		actions: [
+			{
+				actionType: "alternative",
+				icon: {
+					icon: "UploadIcon",
+					outline: true
+				},
+				iconPosition: "leading",
+				label: "Upload",
+				onClick: () => window.alert("Clicked")
+			},
+			{
+				actionType: "alternative",
+				icon: {
+					icon: "ViewGridIcon",
+					outline: true
+				},
+				size: "lg",
+				iconPosition: "leading",
+				label: "Browse",
+				onClick: () => window.alert("Clicked")
+			}
+		],
+		isWide: true
+	}
+}
+export const NoActions: Story = {
+	args: {
+		icon: {
+			icon: "PencilAltIcon",
+			className: "h-5 w-5 text-gray-400 ",
+			outline: true
+		},
+		mutedText: "No Recent Changes",
+		primaryMessage: "There haven't been any recent changes\nto the content in this of this instance.",
+		actions: [],
+		isWide: true
+	}
+}

package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import Button, { IButtonProps } from "@/stories/atoms/buttons/Button"
+import { IDynamicIconProps } from "@/stories/atoms/icons"
+import IconWithShadow from "@/stories/atoms/icons/IconWithShadow"
+import { default as cn } from "classnames"
+
+export interface IEmptySectionPlaceholderProps {
+	/** the primary icon to display at top of component */
+	icon: IDynamicIconProps
+	/** the muted text to display below the icon */
+	mutedText?: string
+	/** the primary message to display below the muted text */
+	primaryMessage: string
+	/** the call to action component that if provided will be used instead of primaryMessage */
+	CallToActionComponent?: React.ReactNode
+	/** the actions to display below the primary call to action or message */
+	actions: IButtonProps[]
+	/** whether to display the component in a wide or narrow format */
+	isWide?: boolean
+}
+
+const EmptySectionPlaceholder: React.FC<IEmptySectionPlaceholderProps> = ({
+	icon,
+	mutedText,
+	primaryMessage,
+	CallToActionComponent,
+	actions,
+	isWide
+}) => {
+	return (
+		<div className="flex h-full w-full flex-col items-center justify-center border-2 border-dashed border-gray-300 p-5">
+			<IconWithShadow {...icon} />
+			{mutedText && <p className="my-2 block text-xs text-gray-500">{mutedText}</p>}
+			{CallToActionComponent ? (
+				CallToActionComponent
+			) : (
+				<p className="mb-2 block text-sm font-medium text-gray-600">{primaryMessage}</p>
+			)}
+			{actions.length > 0 ? (
+				<div className={cn("mt-2 flex gap-2", isWide ? "" : "flex-col items-center")}>
+					{actions.map((action, index) => (
+						<Button {...{ ...action }} key={action.label.replaceAll(" ", "-")} />
+					))}
+				</div>
+			) : (
+				<></>
+			)}
+		</div>
+	)
+}
+
+export default EmptySectionPlaceholder

package/stories/organisms/EmptySectionPlaceholder/index.tsx

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

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
+
+const meta: Meta<typeof FormInputWithAddons> = {
+	title: "Design System/organisms/Form Input With Addons",
+	component: FormInputWithAddons,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=85-1269&mode=design"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof FormInputWithAddons>
+
+export const DefaultFormInputWithAddons: Story = {
+	args: {
+		id: "appSearch",
+		name: "appSearch",
+		leadLabel: "Search",
+		addonOffset: 60,
+		labelClass: "text-gray-900",
+		trailIcon: { icon: "SearchIcon" }
+	}
+}

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -0,0 +1,140 @@
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
+import React, { useLayoutEffect, useRef, useState } from "react"
+import { default as cn } from "classnames"
+import InputField, { IInputFieldProps, AcceptedInputTypes } from "@/stories/molecules/inputs/InputField"
+
+export interface IFormInputWithAddonsProps extends Omit<IInputFieldProps, "type"> {
+	leadIcon?: IDynamicIconProps
+	leadLabel?: string
+	trailIcon?: IDynamicIconProps
+	trailLabel?: string
+	iconOutlined?: boolean
+	/** @param addonOffset An extra buffer zone in pixels between the trailing/leading icon or label and search input -- Default is 24 */
+	addonOffset?: number
+	topLabel?: string
+	labelClass?: string
+	containerClassName?: string
+	description?: string
+	leadIconClassNames?: string
+	customIconClass?: string
+	type: AcceptedInputTypes
+}
+
+const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
+	handleChange,
+	value,
+	name,
+	id,
+	placeholder,
+	className,
+	containerClassName,
+	leadIcon,
+	leadLabel,
+	trailIcon,
+	trailLabel,
+	topLabel,
+	labelClass,
+	isDisabled,
+	isReadonly,
+	isError,
+	addonOffset = 24,
+	iconOutlined = false,
+	description,
+	leadIconClassNames,
+	customIconClass,
+	type,
+	...rest
+}) => {
+	// #region logic to determine the width of the lead and or trailing labels in order to offset the input padding by the appropriate amount.
+	const leadLabelRef = useRef<HTMLLabelElement>(null)
+	const trailLabelRef = useRef<HTMLLabelElement>(null)
+	const [leadLabelWidth, setLeadLabelWidth] = useState<number>(0)
+	const [trailLabelWidth, setTrailLabelWidth] = useState<number>(0)
+	useLayoutEffect(() => {
+		setLeadLabelWidth(leadLabelRef.current?.clientWidth || 0)
+		setTrailLabelWidth(trailLabelRef.current?.clientWidth || 0)
+	}, [])
+	// #endregion
+
+	return (
+		<div className={cn("group flex flex-col", containerClassName)}>
+			{!leadLabel && !trailLabel && topLabel && (
+				<label htmlFor={id} className={cn("flex items-center text-sm font-medium text-gray-600", labelClass)}>
+					{topLabel}
+				</label>
+			)}
+			{description && <div className="mb-2 text-sm text-gray-500">{description}</div>}
+			<div className="relative flex-grow">
+				{(leadLabel || leadIcon) && (
+					<label
+						ref={leadLabelRef}
+						htmlFor={id}
+						className={cn(
+							"absolute top-0 bottom-0 left-3 flex items-center justify-center text-sm text-gray-500",
+							labelClass
+						)}
+					>
+						{leadIcon && (
+							<span>
+								<DynamicIcon
+									{...{
+										...leadIcon,
+										className: cn("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
+										outline: iconOutlined
+									}}
+								/>
+							</span>
+						)}
+						{leadLabel && leadLabel}
+					</label>
+				)}
+				<InputField
+					{...{
+						...rest,
+						handleChange,
+						value,
+						id,
+						name,
+						type,
+						autoComplete: "off",
+						disabled: isDisabled,
+						placeholder: placeholder || "",
+						isReadonly,
+						isError,
+						className,
+						// add padding to accomodate inner labels and icons
+						style: {
+							paddingRight: `${trailLabelWidth + addonOffset}px`,
+							paddingLeft: `${leadLabelWidth + addonOffset}px`
+						}
+					}}
+				/>
+				{(trailLabel || trailIcon) && (
+					<label
+						ref={trailLabelRef}
+						htmlFor={id}
+						className={cn(
+							"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
+							labelClass
+						)}
+					>
+						{trailIcon && (
+							<span>
+								<DynamicIcon
+									{...{
+										...trailIcon,
+										className: cn("h-5 w-5 text-gray-400", customIconClass),
+										outline: iconOutlined
+									}}
+								/>
+							</span>
+						)}
+						{trailLabel && trailLabel}
+					</label>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default FormInputWithAddons