@agility/plenum-ui 1.3.50 → 2.0.0-rc2

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -0,0 +1,81 @@
+import React, { FC } from "react"
+import { default as cn } from "classnames"
+import Button, { IButtonProps } from "@/stories/atoms/buttons/Button"
+
+import { DynamicIcon } from "@/stories/atoms/icons"
+import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponent"
+
+export interface IButtonDropdownProps {
+	button: IButtonProps
+	dropDown: IDropdownProps
+	placement?: IDropdownProps["placement"]
+	offsetOptions?: IDropdownProps["offsetOptions"]
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement, offsetOptions }) => {
+	const dropDownClasses: IDropdownProps["classNames"] = {
+		...defaultClassNames,
+		groupClassname: cn(
+			"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+			button.actionType === "primary"
+				? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
+				: "",
+			button.actionType === "secondary"
+				? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
+				: "",
+			button.actionType === "alternative"
+				? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
+				: ""
+		)
+	}
+	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
+				{...{
+					...button,
+					className: cn(
+						button.className,
+						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0"
+					)
+				}}
+			/>
+			<div
+				className={cn(
+					"w-[1px] rt",
+					button.actionType === "primary" ? "bg-purple-700" : "",
+					button.actionType === "secondary" ? "bg-purple-200" : "",
+					button.actionType === "alternative" ? "bg-gray-300" : ""
+				)}
+			></div>
+			<Dropdown
+				{...{
+					...(dropDown as IDropdownProps),
+					CustomDropdownTrigger: (
+						<DynamicIcon
+							{...{
+								icon: "ChevronDownIcon",
+								className: cn("h-5 w-5", {
+									"text-white": button.actionType === "primary",
+									"text-purple-700": button.actionType === "secondary",
+									"text-gray-700": button.actionType === "alternative"
+								})
+							}}
+						/>
+					),
+					classNames: dropDownClasses,
+					offsetOptions: offsetOptions ?? {
+						crossAxis: 0,
+						mainAxis: 5, //up/down
+						alignmentAxis: -10 //left/right
+					},
+					placement
+				}}
+			/>
+			<div className="hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" />
+		</div>
+	)
+}
+export default ButtonDropdown

package/stories/organisms/ButtonDropdown/index.tsx

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

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { DynamicIcon } from "@/stories/atoms/icons"
+import { dropdownDataBase, dropdownDataWithIcons } from "./dropdownItems"
+import Dropdown, { defaultClassNames } from "./DropdownComponent"
+
+const meta: Meta<typeof Dropdown> = {
+	title: "Design System/Organisms/Dropdown",
+	component: Dropdown,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+type Story = StoryObj<typeof Dropdown>
+
+const IconElement = () => (
+	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"DotsVerticalIcon"} />
+)
+const defaultArgs: Story["args"] = {
+	items: [...dropdownDataBase],
+	label: "Dropdown",
+	classNames: defaultClassNames,
+	placement: "bottom-end"
+}
+export const WithLabel: Story = {
+	args: {
+		...defaultArgs
+	}
+}
+
+export const CustomTrigger: Story = {
+	args: {
+		...defaultArgs,
+		CustomDropdownTrigger: <IconElement />
+	}
+}
+export const WithLabelAndIcons: Story = {
+	args: {
+		...defaultArgs,
+		items: [...dropdownDataWithIcons]
+	}
+}
+export const WithIcons: Story = {
+	args: {
+		...defaultArgs,
+		items: [...dropdownDataWithIcons],
+		CustomDropdownTrigger: <IconElement />
+	}
+}
+export default meta

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -0,0 +1,269 @@
+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 } from "@/stories/atoms/icons"
+
+export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
+	icon?: {
+		name: IDynamicIconProps["icon"]
+		className?: ClassNameWithAutocomplete
+		pos?: "trailing" | "leading"
+		outline?: boolean
+	}
+	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, ...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
+																			}}
+																		/>
+																	)}
+																<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>
+												)
+											})}
+										</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: {
+				name: "IconClipboardCopy",
+				pos: "leading",
+				className: "h-5 w-5",
+				outline: false
+			},
+			key: "Copy",
+			label: "Copy",
+			onClick: () => {
+				console.log("Copy action")
+			}
+		}
+	],
+	[
+		{
+			icon: {
+				name: "IconFolderPlus",
+				pos: "leading",
+				className: "h-5 w-5",
+				outline: false
+			},
+			key: "Add to Batch",
+			label: "Add to Batch",
+			onClick: () => {
+				console.log("Add to Batch action")
+			}
+		},
+		{
+			icon: {
+				name: "IconEye",
+				pos: "leading",
+				className: "h-5 w-5",
+				outline: false
+			},
+			key: "View Batch",
+			label: "View Batch",
+			onClick: () => {
+				console.log("View Batch action")
+			}
+		}
+	],
+	[
+		{
+			icon: {
+				name: "IconTrash",
+				pos: "leading",
+				className: "h-5 w-5",
+				outline: false
+			},
+			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" }
+	}
+}