@agility/plenum-ui 2.0.0-rc5 → 2.0.0-rc50

package/stories/index.ts

@@ -34,7 +34,7 @@ import {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	Checkbox,
@@ -44,14 +44,18 @@ import {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
-	ToggleSwitch
+	Textarea,
+	ToggleSwitch,
+	TextInput,
+	ITextInputProps,
+	ISimpleSelectOptions
 } from "./molecules"
 // Organism Components, props, and type gaurds.
 import {
 	IAnimatedLabelInputProps,
+	AnimatedLabelTextArea,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
@@ -60,7 +64,9 @@ import {
 	ButtonDropdown,
 	Dropdown,
 	EmptySectionPlaceholder,
-	FormInputWithAddons
+	FormInputWithAddons,
+	TextInputSelect,
+	ITextInputSelectProps
 } from "./organisms"
 
 export type {
@@ -68,6 +74,7 @@ export type {
 	IBadgeProps,
 	IButtonProps,
 	ICapsuleProps,
+	ITextInputSelectProps,
 	IDynamicIconProps,
 	IIconWithShadowProps,
 	ILoaderProps,
@@ -79,12 +86,12 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	IAnimatedLabelInputProps,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
@@ -92,7 +99,9 @@ export type {
 	UnifiedIconName,
 	IconName,
 	FAIconName,
-	BTNActionType
+	BTNActionType,
+	ITextInputProps,
+	ISimpleSelectOptions
 }
 export {
 	Avatar,
@@ -103,9 +112,10 @@ export {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
+	Textarea,
 	ToggleSwitch,
 	AnimatedLabelInput,
+	AnimatedLabelTextArea,
 	ButtonDropdown,
 	Dropdown,
 	EmptySectionPlaceholder,
@@ -120,5 +130,7 @@ export {
 	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
-	isUnifiedIconName
+	isUnifiedIconName,
+	TextInput,
+	TextInputSelect
 }

package/stories/molecules/index.ts

@@ -6,7 +6,8 @@ import {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	Checkbox,
@@ -16,8 +17,10 @@ import {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
-	ToggleSwitch
+	Textarea,
+	ToggleSwitch,
+	ITextInputProps,
+	TextInput
 } from "./inputs"
 
 export type {
@@ -28,8 +31,21 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
 	IToggleSwitchProps,
-	AcceptedInputTypes
+	AcceptedInputTypes,
+	ITextInputProps
+}
+export {
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	TextInput
 }
-export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch }

package/stories/molecules/inputs/InputField/InputField.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { forwardRef } from "react"
 import { default as cn } from "classnames"
 
 export type AcceptedInputTypes =
@@ -13,14 +13,15 @@ export type AcceptedInputTypes =
 	| "tel"
 	| "text"
 	| "url"
+	| "currency"
 
-export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
+export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
 	/** Callback on change */
 	handleChange: (value: string) => void
 	/** Input ID*/
-	id: string
+	id?: string
 	/** Input Name */
-	name: string
+	name?: string
 	/** Force the focus state on the input */
 	isFocused?: boolean
 	/** Error condition */
@@ -37,44 +38,45 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
 	required?: boolean
 	/** use input psuedo classes for :valid and :invalid styles. on by default */
 	clientSideCheck?: boolean
+	/** Placeholder text */
+	placeholder?: string
 	/**ref for input */
-	ref?: React.Ref<HTMLInputElement>
 }
 
-const InputField: React.FC<IInputFieldProps> = ({
-	type,
-	id,
-	name,
-	value,
-	isFocused,
-	isError,
-	isReadonly,
-	isDisabled,
-	handleChange,
-	required,
-	clientSideCheck = true,
-	placeholder,
-	className,
-	ref,
-	...rest
-}) => {
-
+const InputField = (
+	{
+		type,
+		id,
+		name,
+		value,
+		isFocused,
+		isError,
+		isReadonly,
+		isDisabled,
+		handleChange,
+		required,
+		clientSideCheck = true,
+		className,
+		placeholder,
+		...rest
+	}: IInputFieldProps,
+	ref: React.Ref<HTMLInputElement>
+) => {
 	return (
 		<input
 			{...{
+				ref,
 				type,
 				id,
-				ref,
 				name,
 				value,
 				onChange: (e) => {
-					console.log(e)
-					handleChange(e.target.value)
+					if (handleChange) handleChange(e.target.value)
 				},
 				autoFocus: isFocused,
 				readOnly: isReadonly,
 				disabled: isDisabled,
-				placeholder: placeholder || " ",
+				placeholder: placeholder || undefined,
 				required,
 				"aria-invalid": isError,
 				"aria-disabled": isDisabled,
@@ -90,4 +92,5 @@ const InputField: React.FC<IInputFieldProps> = ({
 	)
 }
 
-export default InputField
+const _InputField = forwardRef<HTMLInputElement, IInputFieldProps>(InputField)
+export default _InputField

package/stories/molecules/inputs/TextInput/TextInput.tsx

@@ -32,7 +32,7 @@ export interface ITextInputProps {
 	/** Max length of input character  */
 	maxLength?: number
 	/** Callback on change */
-	onChange(value: string): void
+	handleChange(value: string): void
 	/** input value */
 	value: string
 	/**Placeholder input text*/
@@ -56,7 +56,7 @@ const TextInput = (
 		message,
 		isShowCounter,
 		maxLength,
-		onChange,
+		handleChange,
 		placeholder,
 		value: externalValue,
 		className,
@@ -116,7 +116,10 @@ const TextInput = (
 			<InputField
 				onFocus={handleInputFocus}
 				onBlur={handleInputBlur}
-				handleChange={(v) => setValue(v)}
+				handleChange={(v: string) => {
+					setValue(v)
+					handleChange(v)
+				}}
 				ref={ref}
 				type={type}
 				name={name}

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

@@ -16,7 +16,7 @@ export const DefaultCheckbox: Story = {
 		isError: false,
 		message: "",
 		onChange: (value: string) => {
-			console.log(`onChange ${value}`)
+
 		}
 	}
 }

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

@@ -53,13 +53,12 @@ const Checkbox: FC<ICheckboxProps> = ({
 	const wrapperStyles = cn(
 		"relative flex items-center min-h-[38px]",
 		{ "opacity-50": isDisabled },
-		{ "rounded-sm ring-1 px-3 ring-gray-300": hasBorder },
+		{ "rounded-sm border border-1 px-3 border-gray-200": 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)

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

@@ -44,151 +44,142 @@ 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 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)
-			}
+	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(() => {
+		if (displayValue) {
+			const dv = items.find((i) => i[displayProperty] === displayValue)
+			setSelectedItem(dv)
+		}
+	}, [displayValue])
 
-		useEffect(() => {
-			typeof onChange === "function" && onChange(selectedItem)
-		}, [selectedItem])
+	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>
-				)}
+	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">
-					<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)}
+					<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="IconX" className="h-4 w-4 " aria-hidden="true" />
+						</button>
+					)}
+				</div>
+				<HeadlessUICombobox.Button className={buttonStyles}>
+					<DynamicIcon icon="IconSelector" 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"
+									)
+								}
 							>
-								<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>
+								{({ active, selected }) => (
+									<>
+										<span className={classNames("block truncate", selected ? "font-semibold" : "")}>
+											{`${item[displayProperty]}`}
+										</span>
 
-					{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 }) => (
-										<>
+										{selected && (
 											<span
 												className={classNames(
-													"block truncate",
-													selected ? "font-semibold" : ""
+													"absolute inset-y-0 right-0 flex items-center pr-4",
+													active ? "text-white" : "text-purple-600"
 												)}
 											>
-												{`${item[displayProperty]}`}
+												<DynamicIcon icon="IconCheck" className="h-5 w-5" aria-hidden="true" />
 											</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
+										)}
+									</>
+								)}
+							</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/index.ts

@@ -4,8 +4,8 @@ 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 Select, { ISelectProps, ISimpleSelectOptions } from "./select"
+import Textarea, { ITextareaProps } from "./textArea"
 import TextInput, { ITextInputProps } from "./TextInput"
 import ToggleSwitch, { IToggleSwitchProps } from "./toggleSwitch"
 
@@ -17,7 +17,8 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
 	ITextInputProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes
@@ -31,7 +32,7 @@ export {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
+	Textarea,
 	ToggleSwitch,
 	TextInput
 }

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

@@ -17,10 +17,10 @@ export const DefaultRadio: Story = {
 		message: "",
 		name: "radio-group",
 		onChange: (value: string, checked: boolean) => {
-			console.log(`onChange ${value} ${checked}`)
+
 		},
 		onClick: (value: string, checked: boolean) => {
-			console.log(`onClick ${value} ${checked}`)
+
 		}
 	}
 }

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

@@ -3,7 +3,7 @@ import InputLabel from "@/stories/molecules/inputs/InputLabel"
 import { useId } from "@/utils/useId"
 import { default as cn } from "classnames"
 
-export type ISimpleSelectOptions = {
+export interface ISimpleSelectOptions {
 	label: string
 	value: string
 }
@@ -28,6 +28,10 @@ export interface ISelectProps {
 	value?: string
 
 	className?: string
+
+	onFocus?: () => void
+
+	onBlur?: () => void
 }
 const Select: React.FC<ISelectProps> = ({
 	label,
@@ -39,7 +43,9 @@ const Select: React.FC<ISelectProps> = ({
 	isError,
 	isRequired,
 	value,
-	className
+	className,
+	onFocus,
+	onBlur
 }) => {
 	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value)
 	const uniqueID = useId()
@@ -84,6 +90,8 @@ const Select: React.FC<ISelectProps> = ({
 				onChange={handleChange}
 				disabled={isDisabled}
 				value={selectedOption}
+				onFocus={onFocus}
+				onBlur={onBlur}
 			>
 				{options.map(({ value, label }) => {
 					return (