@agility/plenum-ui 2.0.0-rc4 → 2.0.0-rc40

package/stories/atoms/loaders/Loader.tsx

@@ -1,15 +1,21 @@
 import React from "react"
-import classNames, { default as cn } from "classnames"
+import { default as cn } from "classnames"
 
 export interface ILoaderProps {
 	className?: string
 }
 const Loader: React.FC<ILoaderProps> = ({ className }) => {
-  const outerLoaderStyles = cn(
-    "rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
-    className ? className : "border-purple-700 border-r-gray-200"
-  )
-  return <i className={outerLoaderStyles} role="status" />
+	return (
+		<>
+			<i
+				className={cn(
+					"rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
+					className ? className : "border-purple-700 border-r-gray-200"
+				)}
+				role="status"
+			/>
+		</>
+	)
 }
 
 export default Loader

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

@@ -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,6 +38,8 @@ 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>
 }
@@ -53,28 +56,26 @@ const InputField: React.FC<IInputFieldProps> = ({
 	handleChange,
 	required,
 	clientSideCheck = true,
-	placeholder,
 	className,
+	placeholder,
 	ref,
 	...rest
 }) => {
-
 	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,

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/TextInput/index.tsx

@@ -1,3 +1,5 @@
+import TextInput from "./TextInput"
+import { ITextInputProps } from "./TextInput"
 
-export { default } from './TextInput';
-export * from './TextInput';
+export type { ITextInputProps }
+export default TextInput

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,9 @@ 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"
 
 export type {
@@ -16,9 +17,22 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
+	ITextInputProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes
 }
 
-export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch }
+export {
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	TextInput
+}

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
 }

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

@@ -1,19 +1,21 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import TextArea from "./TextArea"
-const meta: Meta<typeof TextArea> = {
+import Textarea from "./TextArea"
+const meta: Meta<typeof Textarea> = {
 	title: "Design System/Molecules/Inputs/TextArea",
-	component: 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 = {
+type Story = StoryObj<typeof Textarea>
+export const DefaultTextarea: Story = {
 	args: {
 		id: "appDescription",
 		name: "description",
 		rows: 12,
+		cols: 18,
+		label: { display: "Description" },
 		placeholder: dummyText
 	}
 }