@agility/plenum-ui 2.0.0-rc2 → 2.0.0-rc21

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,7 +38,10 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
 	required?: boolean
 	/** use input psuedo classes for :valid and :invalid styles. on by default */
 	clientSideCheck?: boolean
-	/** use placeholder string */
+	/** Placeholder text */
+	placeholder?: string
+	/**ref for input */
+	ref?: React.Ref<HTMLInputElement>
 }
 
 const InputField: React.FC<IInputFieldProps> = ({
@@ -52,24 +56,26 @@ const InputField: React.FC<IInputFieldProps> = ({
 	handleChange,
 	required,
 	clientSideCheck = true,
-	placeholder,
 	className,
+	placeholder,
+	ref,
 	...rest
 }) => {
 	return (
 		<input
 			{...{
+				ref,
 				type,
 				id,
 				name,
 				value,
 				onChange: (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.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import TextInput, { ITextInputProps } from "./TextInput"
+import React from "react"
+
+const meta: Meta<typeof TextInput> = {
+	title: "Design System/molecules/inputs/TextInput",
+	component: TextInput,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof TextInput>
+
+export const DefaultTextInputStory: Story = {
+	args: {
+		type: "text",
+		label: "Label",
+		isFocused: true,
+		isError: false,
+		id: "id",
+		name: "name",
+		isRequired: true,
+
+		isDisabled: false,
+		isReadonly: false,
+		message: "message",
+		isShowCounter: true,
+		maxLength: 100,
+		placeholder: "placeholder"
+	}
+}

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

@@ -0,0 +1,165 @@
+import React, { forwardRef, useEffect, useId, useRef, useState } from "react"
+import { default as cn } from "classnames"
+import InputLabel from "../InputLabel"
+import InputField, { AcceptedInputTypes } from "../InputField"
+import InputCounter from "../InputCounter"
+
+export interface ITextInputProps {
+	/** Input type*/
+	type: AcceptedInputTypes
+	/** Input ID */
+	id?: string
+	/** Input Name */
+	name?: string
+	/** Label for the input */
+	label?: string
+	/** Force the focus state on the input */
+	isFocused?: boolean
+	/** Error state */
+	isError?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Readonly state */
+	isReadonly?: boolean
+	/** Set default value */
+	defaultValue?: string
+	/** Message shown under the text field */
+	message?: string
+	/** Input character counter */
+	isShowCounter?: boolean
+	/** Max length of input character  */
+	maxLength?: number
+	/** Callback on change */
+	handleChange(value: string): void
+	/** input value */
+	value: string
+	/**Placeholder input text*/
+	placeholder?: string
+
+	className?: string
+}
+
+const TextInput = (
+	{
+		label,
+		isFocused,
+		isError,
+		id,
+		name,
+		isRequired,
+		type,
+		defaultValue,
+		isDisabled,
+		isReadonly,
+		message,
+		isShowCounter,
+		maxLength,
+		handleChange,
+		placeholder,
+		value: externalValue,
+		className,
+		...props
+	}: ITextInputProps,
+	ref: React.Ref<HTMLInputElement>
+) => {
+	const uniqueID = useId()
+	const [isFocus, setIsFocus] = useState<boolean>(Boolean(isFocused))
+
+	const [value, setValue] = useState<string>(externalValue || defaultValue || "")
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	useEffect(() => {
+		//if the external value is updated by the parent component, reset the value in here...
+		if (externalValue !== undefined && externalValue !== null) {
+			setValue(externalValue)
+		}
+	}, [externalValue])
+
+	// set force focus
+	useEffect(() => {
+		const input = inputRef.current
+		if (!input || isFocus === undefined || isDisabled) return
+		if (isFocus) {
+			input.focus()
+		} else {
+			input.blur()
+		}
+	}, [isFocus])
+
+	// set label as active if default value is set
+	useEffect(() => {
+		const input = inputRef.current
+		if (!input || defaultValue === undefined || defaultValue === "") return
+	}, [defaultValue])
+
+	const handleInputFocus = () => setIsFocus(true)
+	// add other focus effects here
+
+	const handleInputBlur = () => setIsFocus(false)
+
+	if (!id) id = `input-${uniqueID}`
+	if (!name) name = id
+
+	return (
+		<div className="relative">
+			<InputLabel
+				isPlaceholder={true}
+				label={label}
+				isRequired={isRequired}
+				id={id}
+				isError={isError}
+				isActive={true}
+				isDisabled={isDisabled}
+			/>
+			<InputField
+				onFocus={handleInputFocus}
+				onBlur={handleInputBlur}
+				handleChange={(v: string) => {
+					setValue(v)
+					handleChange(v)
+				}}
+				ref={ref}
+				type={type}
+				name={name}
+				id={id}
+				className={cn(
+					"w-full rounded border py-2 px-3 text-sm font-normal leading-5",
+					{ "border-gray-300": !isFocus && !isError },
+					{
+						"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500": isFocus && !isError
+					},
+					{
+						"!border-red-500 shadow-none focus:ring-red-500": isError
+					},
+					className
+				)}
+				isDisabled={isDisabled}
+				isReadonly={isReadonly}
+				value={value}
+				defaultValue={defaultValue}
+				maxLength={maxLength}
+				placeholder={placeholder}
+				{...props}
+			/>
+			<div className="flex flex-row space-x-3">
+				<div className="grow">
+					{message && (
+						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+							{message}
+						</span>
+					)}
+				</div>
+				{isShowCounter && (
+					<div className="shrink-0">
+						<InputCounter current={Number(value?.length)} limit={maxLength} />
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
+
+const _TextInput = forwardRef<HTMLInputElement, ITextInputProps>(TextInput)
+export default _TextInput

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

@@ -0,0 +1,5 @@
+import TextInput from "./TextInput"
+import { ITextInputProps } from "./TextInput"
+
+export type { ITextInputProps }
+export default TextInput

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

@@ -53,7 +53,7 @@ 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
 	)

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
 	}
 }

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

@@ -1,67 +1,158 @@
+import React, { forwardRef, useEffect, useId, useState } from "react"
 import { default as cn } from "classnames"
+import InputLabel from "../InputLabel"
+import InputCounter from "../InputCounter"
 
-export interface ITextAreaFieldProps extends React.ComponentPropsWithoutRef<"textarea"> {
-	/** Callback on change */
-	handleChange: (value: string) => void
-	/** textarea ID*/
-	id: string
-	/** textarea Name */
-	name: string
-	/** Force the focus state on the textarea */
-	isFocused?: boolean
-	/** Error condition */
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+	display: string
+	htmlFor?: string
+}
+
+export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+	/** Input ID */
+	id?: string
+	/** Input Name */
+	name?: string
+	/** Label for the input */
+	label?: ILabelProps
+	/** Error state */
 	isError?: boolean
+	/** If field is required */
+	isRequired?: boolean
 	/** Disabled state */
 	isDisabled?: boolean
-	/** Readonly state */
-	isReadonly?: boolean
-	/** textarea value */
-	value: string
-	/** If field is required */
-	required?: boolean
-	/**Allow Text Area Resize*/
-	textAreaResize?: 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 TextAreaField: React.FC<ITextAreaFieldProps> = ({
+
+const Textarea: React.FC<ITextareaProps> = ({
 	id,
 	name,
-	value,
-	isFocused,
+	label,
 	isError,
-	isReadonly,
+	isRequired,
 	isDisabled,
-	handleChange,
-	required,
+	defaultValue,
+	message,
+	isShowCounter,
+	maxLength,
+	rows = 12,
+	cols = 48,
+	onChange,
+	value,
 	placeholder,
 	className,
+	ref,
 	...rest
 }) => {
-	return (
-		<textarea
-			{...{
-				id,
-				name,
-				value,
-				onChange: (e) => {
-					handleChange(e.target.value)
-				},
-				autoFocus: isFocused,
-				readOnly: isReadonly,
-				disabled: isDisabled,
-				required,
-				placeholder: placeholder || " ",
-				"aria-invalid": isError,
-				"aria-disabled": isDisabled,
-				className: cn(
-					"peer w-full resize-y auto-resize rounded border border-gray-300 py-2 px-3 pt-2  text-sm font-normal leading-5 outline-offset-0 ring-offset-0 focus:border-purple-600 focus:ring-purple-600",
-					isError ? "border-red-600 text-red-600" : "",
+	const uniqueID = useId()
+
+	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
+
+	if (!id) id = `ta-${uniqueID}`
+
+	if (!label) {
+		return (
+			<textarea
+				ref={ref}
+				maxLength={maxLength}
+				onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+					const targetValue = e.target.value
+					if (onChange) {
+						onChange(targetValue)
+					}
+				}}
+				rows={rows}
+				name={name}
+				id={id}
+				cols={cols}
+				className={cn(
+					"peer 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
-				),
-				...rest
-			}}
-		/>
+				)}
+				disabled={isDisabled}
+				defaultValue={defaultValue}
+				value={value}
+				placeholder={placeholder}
+				{...rest}
+			/>
+		)
+	}
+
+	//with label
+	return (
+		<div>
+			<InputLabel
+				isPlaceholder
+				isActive
+				label={label.display}
+				isRequired={isRequired}
+				id={id}
+				isError={isError}
+				isDisabled={isDisabled}
+			/>
+
+			<div>
+				<textarea
+					ref={ref}
+					maxLength={maxLength}
+					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+						const targetValue = e.target.value
+						if (onChange) {
+							onChange(targetValue)
+						}
+					}}
+					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 TextAreaField
+export default Textarea

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

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