@agility/plenum-ui 1.3.50 → 2.0.0-rc10

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,38 @@
+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, ISimpleSelectOptions } from "./select"
+import Textarea, { ITextareaProps } from "./textArea"
+import TextInput, { ITextInputProps } from "./TextInput"
+import ToggleSwitch, { IToggleSwitchProps } from "./toggleSwitch"
+
+export type {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
+	ITextInputProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes
+}
+
+export {
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	TextInput
+}

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

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

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from "react"
+import InputLabel from "@/stories/molecules/inputs/InputLabel"
+import { useId } from "@/utils/useId"
+import { default as cn } from "classnames"
+
+export interface ISimpleSelectOptions {
+	label: string
+	value: string
+}
+export interface ISelectProps {
+	/** Label */
+	label?: string
+	/** Select ID prop */
+	id?: string
+	/** Select name prop */
+	name?: string
+	/** List of options to display in the select menu */
+	options: ISimpleSelectOptions[]
+	/** Select name prop */
+	onChange?(value: string): void
+	/** Select disabled state */
+	isDisabled?: boolean
+	/** Select error state */
+	isError?: boolean
+	/** Select required state */
+	isRequired?: boolean
+
+	value?: string
+
+	className?: string
+}
+const Select: React.FC<ISelectProps> = ({
+	label,
+	id,
+	name,
+	options,
+	onChange,
+	isDisabled,
+	isError,
+	isRequired,
+	value,
+	className
+}) => {
+	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value)
+	const uniqueID = useId()
+	if (!id) id = `select-${uniqueID}`
+	if (!name) name = id
+
+	useEffect(() => {
+		if (value !== undefined && value !== null) {
+			setSelectedOption(value)
+		}
+	}, [value])
+
+	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+		const targetValue = e.target.value
+		typeof onChange == "function" && onChange(targetValue)
+		setSelectedOption(targetValue)
+	}
+	const wrapperStyle = cn({ "opacity-50": isDisabled })
+	return (
+		<div className={wrapperStyle}>
+			{label && (
+				<InputLabel
+					isPlaceholder
+					isActive
+					label={label}
+					isRequired={isRequired}
+					id={id}
+					isError={isError}
+					isDisabled={isDisabled}
+				/>
+			)}
+			<select
+				id={id}
+				name={name}
+				className={cn(
+					"block w-full border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none",
+					"rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+					{ "border-red-500": isError },
+					{ "border-gray-300": !isError },
+					className
+				)}
+				onChange={handleChange}
+				disabled={isDisabled}
+				value={selectedOption}
+			>
+				{options.map(({ value, label }) => {
+					return (
+						<option key={value} value={value}>
+							{label}
+						</option>
+					)
+				})}
+			</select>
+		</div>
+	)
+}
+
+export default Select

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

@@ -0,0 +1,3 @@
+import Select, { ISelectProps, ISimpleSelectOptions } from "./Select"
+export type { ISelectProps, ISimpleSelectOptions }
+export default Select

package/stories/molecules/inputs/textArea/TextArea.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Textarea from "./TextArea"
+const meta: Meta<typeof Textarea> = {
+	title: "Design System/Molecules/Inputs/TextArea",
+	component: Textarea,
+	tags: ["autodocs"]
+}
+const dummyText: string = `Checkmate... Life finds a way. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
+
+I was part of something special. Just my luck, no ice. You really think you can fly that thing? Must go faster... go, go, go, go, go! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.`
+type Story = StoryObj<typeof Textarea>
+export const DefaultTextarea: Story = {
+	args: {
+		id: "appDescription",
+		name: "description",
+		rows: 12,
+		cols: 18,
+		label: "Description",
+		placeholder: dummyText
+	}
+}
+export default meta

package/stories/molecules/inputs/textArea/TextArea.tsx

@@ -0,0 +1,128 @@
+import React, { forwardRef, useEffect, useId, useState } from "react"
+import { default as cn } from "classnames"
+import InputLabel from "../InputLabel"
+import InputCounter from "../InputCounter"
+export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+	/** Input ID */
+	id?: string
+	/** Input Name */
+	name?: string
+	/** Label for the input */
+	label?: string
+	/** Error state */
+	isError?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Set default value */
+	defaultValue?: string
+
+	value?: string
+
+	/** Message shown under the text field */
+	message?: string
+	/** Input character counter */
+	isShowCounter?: boolean
+	/** Max length of input character  */
+	maxLength?: number
+	/** Callback on change */
+	onChange?(value: string): void
+	/** Number of rows */
+	rows?: number
+	/** Number of cols */
+	cols?: number
+	placeholder?: string
+	className?: string
+	ref?: React.LegacyRef<HTMLTextAreaElement>
+}
+
+const Textarea: React.FC<ITextareaProps> = ({
+	id,
+	name,
+	label,
+	isError,
+	isRequired,
+	isDisabled,
+	defaultValue,
+	message,
+	isShowCounter,
+	maxLength,
+	rows = 12,
+	cols = 48,
+	onChange,
+	value: externalValue,
+	placeholder,
+	className,
+	ref,
+	...rest
+}) => {
+	const uniqueID = useId()
+	const [value, setValue] = useState<string | undefined>(externalValue || defaultValue || "")
+	const handleOnchange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+		const targetValue = e.currentTarget.value
+		typeof onChange === "function" && onChange(targetValue)
+		setValue(targetValue)
+	}
+
+	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
+
+	useEffect(() => {
+		//if the external value is updated by the parent component, reset the value in here...
+		if (externalValue !== undefined && externalValue !== null) {
+			setValue(externalValue)
+		}
+	}, [externalValue])
+
+	if (!id) id = `ta-${uniqueID}`
+
+	return (
+		<div>
+			{label && (
+				<InputLabel
+					isPlaceholder
+					isActive
+					label={label}
+					isRequired={isRequired}
+					id={id}
+					isError={isError}
+					isDisabled={isDisabled}
+				/>
+			)}
+			<div>
+				<textarea
+					ref={ref}
+					maxLength={maxLength}
+					onChange={handleOnchange}
+					rows={rows}
+					name={name}
+					id={id}
+					cols={cols}
+					className={cn(
+						"block w-full rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+						{ "border-gray-300 ": !isError },
+						{
+							"border-red-500 outline-red-500 focus:ring-red-500": isError
+						},
+						className
+					)}
+					disabled={isDisabled}
+					defaultValue={defaultValue}
+					value={value}
+					placeholder={placeholder}
+					{...rest}
+				/>
+			</div>
+			<div className="flex flex-row space-x-3">
+				<div className="grow">{message && <span className={discriptionStyles}>{message}</span>}</div>
+				{isShowCounter && (
+					<div className="shrink-0">
+						<InputCounter current={Number(value?.length)} limit={maxLength} />
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default Textarea

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

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