@agility/plenum-ui 1.3.50 → 2.0.0-rc2

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx

@@ -0,0 +1,64 @@
+import React from "react"
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
+import { default as cn } from "classnames"
+export interface INestedInputButtonProps {
+	/** Icon to be included*/
+	icon?: IDynamicIconProps
+	/** CTA label */
+	ctaLabel?: string
+	/** Alignment */
+	align: "left" | "right"
+	/** Show the CTA without Background color and a border seperator */
+	isClear?: boolean
+	/** Onclick callback */
+	onClickHandler?(): void
+	buttonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+}
+
+const NestedInputButton: React.FC<INestedInputButtonProps> = ({
+	icon,
+	ctaLabel,
+	align = "right",
+	isClear = false,
+	onClickHandler,
+	buttonProps
+}) => {
+	const handleClick = () => {
+		onClickHandler && onClickHandler()
+	}
+	const buttonStyle = cn(
+		"relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
+		{
+			"rounded-r text-gray-500 -ml-px": align === "right"
+		},
+		{
+			"rounded-l text-gray-500 -mr-px": align === "left"
+		},
+		{
+			"cursor-default": !onClickHandler
+		},
+		{
+			"hover:bg-gray-100": onClickHandler && !isClear
+		},
+		{
+			"!border-l-white": isClear && align === "right"
+		},
+		{
+			"!border-r-white": isClear && align === "left"
+		},
+		{
+			"bg-gray-50": !isClear
+		},
+		{
+			"bg-white": isClear
+		}
+	)
+	return (
+		<button {...{ ...buttonProps, className: buttonStyle, onClick: handleClick }}>
+			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400" }} />}
+			{ctaLabel && <span>{ctaLabel}</span>}
+		</button>
+	)
+}
+
+export default NestedInputButton

package/stories/molecules/inputs/NestedInputButton/index.tsx

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

package/stories/molecules/inputs/checkbox/Checkbox.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Checkbox from "./Checkbox"
+const meta: Meta<typeof Checkbox> = {
+	title: "Design System/Molecules/Inputs/Checkbox",
+	component: Checkbox,
+	tags: []
+}
+type Story = StoryObj<typeof Checkbox>
+export const DefaultCheckbox: Story = {
+	args: {
+		label: "Checkbox Label",
+		id: "checkboxId",
+		isDisabled: false,
+		isChecked: false,
+		isRequired: false,
+		isError: false,
+		message: "",
+		onChange: (value: string) => {
+			console.log(`onChange ${value}`)
+		}
+	}
+}
+export default meta

package/stories/molecules/inputs/checkbox/Checkbox.tsx

@@ -0,0 +1,99 @@
+import React, { FC } from "react"
+import { default as cn } from "classnames"
+import InputLabel from "@/stories/molecules/inputs/InputLabel"
+import { useId } from "@/utils/useId"
+
+export interface ICheckboxProps {
+	/** Checkbox label */
+	label: string
+	/** Checkbox ID */
+	id?: string
+	/** Disabled state */
+	isDisabled?: boolean
+	/** value */
+	value?: string
+	/** Check state */
+	isChecked?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Error state */
+	isError?: boolean
+	/** Message or description */
+	message?: string
+	/** Callback on input change */
+	onChange?(value: string, isChecked: boolean): void
+	/** Has a border around the checkbox and label */
+	hasBorder?: boolean
+	/** any arbitrary classNames to add to the wrapper */
+	className?: string
+}
+
+/** Comment */
+const Checkbox: FC<ICheckboxProps> = ({
+	label,
+	id,
+	isDisabled,
+	isChecked,
+	isRequired,
+	isError,
+	message,
+	value,
+	onChange,
+	hasBorder,
+	className,
+	...props
+}: ICheckboxProps) => {
+	const uniqueID = useId()
+	if (!id) id = `cb-${uniqueID}`
+
+	const checkboxStyles = cn(
+		"rounded-sm border-gray-300 text-sm font-normal leading-5 text-purple-600 focus:ring-purple-600",
+		{ "border-red-500 shadow-none": isError }
+	)
+	const wrapperStyles = cn(
+		"relative flex items-center min-h-[38px]",
+		{ "opacity-50": isDisabled },
+		{ "rounded-sm ring-1 px-3 ring-gray-300": hasBorder },
+		{ "py-3": hasBorder && message },
+		className
+	)
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		console.log(e)
+		const targetValue = e.target.value
+		const targetChecked = e.target.checked
+		typeof onChange === "function" && onChange(targetValue, targetChecked)
+	}
+
+	return (
+		<div className={wrapperStyles}>
+			<div className="flex items-center">
+				<input
+					id={id}
+					aria-describedby={`${id}-description`}
+					name={id}
+					value={value}
+					type="checkbox"
+					className={checkboxStyles}
+					disabled={isDisabled}
+					checked={isChecked}
+					onChange={(e) => {
+						handleChange(e)
+					}}
+					{...props}
+				/>
+			</div>
+			<div className="ml-3 text-sm ">
+				<label htmlFor={id} className="font-medium text-gray-700">
+					<InputLabel label={label} isRequired={isRequired} id={id} />
+				</label>
+				{message && (
+					<p id={`${id}-description`} className="text-gray-500">
+						{message}
+					</p>
+				)}
+			</div>
+		</div>
+	)
+}
+export default Checkbox

package/stories/molecules/inputs/checkbox/index.ts

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

package/stories/molecules/inputs/combobox/ComboBox.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Combobox from "./ComboBox"
+
+const meta: Meta<typeof Combobox> = {
+	title: "Design System/Molecules/Inputs/Combobox",
+	component: Combobox,
+	tags: ["autodocs"]
+}
+type Story = StoryObj<typeof Combobox>
+interface ComboItem {
+	[value: string]: string
+}
+
+const comboboxlist: ComboItem[] = [
+	{ value: "Leslie Alexander" },
+	{ value: "Alishba Molloy" },
+	{ value: "Raya Oconnell" },
+	{ value: "Danica Sweet" },
+	{ value: "Ralph Brook" },
+	{ value: "Tamar Tapia" },
+	{ value: "Cara Avila" },
+	{ value: "Jayson Cisneros" },
+	{ value: "Tracey Reader" },
+	{ value: "Rahima Fritz" },
+	{ value: "Vera Pritchard" }
+]
+export const DefaultComboBox: Story = {
+	args: {
+		label: "",
+		items: comboboxlist,
+		displayProperty: "value",
+		keyProperty: "value",
+		placeholder: "Select",
+		id: "combobox",
+		isRequired: false,
+		isError: false,
+		isDisabled: false,
+		nullable: false
+	}
+}
+export default meta

package/stories/molecules/inputs/combobox/ComboBox.tsx

@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from "react"
+import { default as cn } from "classnames"
+import { Combobox as HeadlessUICombobox } from "@headlessui/react"
+import InputLabel from "@/stories/molecules/inputs/InputLabel"
+import { DynamicIcon } from "@/stories/atoms/icons"
+
+export interface IComboboxProps<T extends Record<string, unknown>> {
+	/** Label */
+	label?: string
+	/** ID */
+	id: string
+	/** Array of items to display */
+	items: T[]
+	/** the item property to use as the key */
+	keyProperty: string
+
+	/** the item property to use as the display */
+	displayProperty: string
+	/** Placeholder */
+	placeholder?: string
+	/** Callback to trigger on change */
+	onChange?(value: T | undefined): void
+	/** Select disabled state */
+	isDisabled?: boolean
+	/** Select error state */
+	isError?: boolean
+	/** Select required state */
+	isRequired?: boolean
+	/** Message shown under field */
+	message?: string
+
+	displayValue?: string
+
+	/**
+	 * Whether this item is nullable or not.
+	 *
+	 * @type {boolean}
+	 * @memberof ComboboxProps
+	 */
+	nullable?: boolean
+}
+
+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 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(() => {
+			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>
+				)}
+				<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)}
+							>
+								<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>
+
+					{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 }) => (
+										<>
+											<span
+												className={classNames(
+													"block truncate",
+													selected ? "font-semibold" : ""
+												)}
+											>
+												{`${item[displayProperty]}`}
+											</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

package/stories/molecules/inputs/combobox/index.ts

@@ -0,0 +1,3 @@
+import Combobox, { IComboboxProps } from "./ComboBox"
+export type { IComboboxProps }
+export default Combobox

package/stories/molecules/inputs/index.ts

@@ -0,0 +1,24 @@
+import Checkbox, { ICheckboxProps } from "./checkbox"
+import Combobox, { IComboboxProps } from "./combobox"
+import InputField, { AcceptedInputTypes, IInputFieldProps } from "./InputField"
+import InputLabel, { IInputLabelProps } from "./InputLabel"
+import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
+import Radio, { IRadioProps } from "./radio"
+import Select, { ISelectProps } from "./select"
+import TextAreaField, { ITextAreaFieldProps } from "./textArea"
+import ToggleSwitch, { IToggleSwitchProps } from "./toggleSwitch"
+
+export type {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ITextAreaFieldProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes
+}
+
+export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch }

package/stories/molecules/inputs/radio/Radio.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Radio from "./Radio"
+const meta: Meta<typeof Radio> = {
+	title: "Design System/Molecules/Inputs/Radio",
+	component: Radio,
+	tags: []
+}
+type Story = StoryObj<typeof Radio>
+export const DefaultRadio: Story = {
+	args: {
+		label: "Radio Label",
+		id: "radioId",
+		isDisabled: false,
+		isChecked: false,
+		isRequired: false,
+		isError: false,
+		message: "",
+		name: "radio-group",
+		onChange: (value: string, checked: boolean) => {
+			console.log(`onChange ${value} ${checked}`)
+		},
+		onClick: (value: string, checked: boolean) => {
+			console.log(`onClick ${value} ${checked}`)
+		}
+	}
+}
+export default meta

package/stories/molecules/inputs/radio/Radio.tsx

@@ -0,0 +1,92 @@
+import InputLabel from "@/stories/molecules/inputs/InputLabel"
+import { useId } from "@/utils/useId"
+import React from "react"
+import { default as cn } from "classnames"
+export interface IRadioProps {
+	/** group name */
+	name?: string
+	/** Radio label */
+	label: string
+	/** Radio ID */
+	id?: string
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Check state */
+	isChecked?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Error state */
+	isError?: boolean
+	/** Message or description */
+	message?: string
+	/** value */
+	value?: string
+	/** Callback on input change */
+	onChange?(value: string, isChecked: boolean): void
+	/** Callback on click */
+	onClick?(value: string, isChecked: boolean): void
+}
+const Radio: React.FC<IRadioProps> = ({
+	label,
+	id,
+	name,
+	isDisabled = false,
+	isChecked = false,
+	isRequired = false,
+	isError = false,
+	message,
+	onChange,
+	onClick,
+	value
+}) => {
+	const uniqueID = useId()
+	if (!id) id = `input-${uniqueID}`
+	if (!name) name = id
+
+	const checboxStyles = cn("focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300", {
+		"border-red-500 shadow-none": isError
+	})
+	const wrapperStyles = cn("relative flex items-start", { "opacity-50": isDisabled })
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const targetValue = e.currentTarget.value
+		const targetChecked = e.currentTarget.checked
+		typeof onChange === "function" && onChange(targetValue, targetChecked)
+	}
+	const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
+		const targetValue = e.currentTarget.value
+		const targetChecked = e.currentTarget.checked
+		typeof onClick === "function" && onClick(targetValue, targetChecked)
+	}
+	return (
+		<div className={wrapperStyles}>
+			<div className="flex items-center h-5">
+				<input
+					id={id}
+					aria-describedby={`${id}-description`}
+					name={name}
+					type="radio"
+					value={value}
+					className={checboxStyles}
+					disabled={isDisabled}
+					defaultChecked={isChecked}
+					onChange={(e) => {
+						handleChange(e)
+					}}
+					onClick={(e) => {
+						handleClick(e)
+					}}
+				/>
+			</div>
+			<div className="ml-3 text-sm">
+				<InputLabel label={label} isRequired={isRequired} id={id} />
+				{message && (
+					<p id={`${id}-description`} className="text-gray-500">
+						{message}
+					</p>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default Radio

package/stories/molecules/inputs/radio/index.ts

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

package/stories/molecules/inputs/select/Select.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Select from "./Select"
+const meta: Meta<typeof Select> = {
+	title: "Design System/Molecules/Inputs/Select",
+	component: Select,
+	tags: ["autodocs"]
+}
+type Story = StoryObj<typeof Select>
+export const DefaultSelect: Story = {
+	args: {
+		label: "Label",
+		id: "select",
+		name: "select",
+		options: [
+			{ label: "Canada", value: "value1" },
+			{ label: "USA", value: "value2" }
+		],
+		isDisabled: false,
+		isError: false,
+		isRequired: false
+	}
+}
+export default meta