@agility/plenum-ui 2.0.0-rc9 → 2.0.1

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,
@@ -86,6 +86,7 @@ const TextInput = (
 		} else {
 			input.blur()
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isFocus])
 
 	// set label as active if default value is set
@@ -103,7 +104,7 @@ const TextInput = (
 	if (!name) name = id
 
 	return (
-		<div className="relative">
+		<div className="relative group">
 			<InputLabel
 				isPlaceholder={true}
 				label={label}
@@ -116,20 +117,27 @@ const TextInput = (
 			<InputField
 				onFocus={handleInputFocus}
 				onBlur={handleInputBlur}
-				handleChange={(v) => setValue(v)}
+				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-gray-300": !isFocus && !isError && !isDisabled },
 					{
-						"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500": isFocus && !isError
+						"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500":
+							isFocus && !isError && !isDisabled
 					},
 					{
 						"!border-red-500 shadow-none focus:ring-red-500": isError
 					},
+					{
+						"placeholder:text-gray-300 !border-gray-300 !outline-gray-300 focus:!ring-gray-300": isDisabled
+					},
 					className
 				)}
 				isDisabled={isDisabled}
@@ -150,7 +158,7 @@ const TextInput = (
 				</div>
 				{isShowCounter && (
 					<div className="shrink-0">
-						<InputCounter current={Number(value?.length)} limit={maxLength} />
+						<InputCounter current={Number(value?.length)} limit={maxLength ?? 150} />
 					</div>
 				)}
 			</div>

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

@@ -26,6 +26,8 @@ export interface ICheckboxProps {
 	hasBorder?: boolean
 	/** any arbitrary classNames to add to the wrapper */
 	className?: string
+	/** Label ClassName */
+	labelClassName?: string
 }
 
 /** Comment */
@@ -41,6 +43,7 @@ const Checkbox: FC<ICheckboxProps> = ({
 	onChange,
 	hasBorder,
 	className,
+	labelClassName,
 	...props
 }: ICheckboxProps) => {
 	const uniqueID = useId()
@@ -53,13 +56,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)
@@ -84,9 +86,10 @@ const Checkbox: FC<ICheckboxProps> = ({
 				/>
 			</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}

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/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.stories.tsx

@@ -0,0 +1,53 @@
+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"],
+	argTypes: {},
+	decorators: [
+		(Story, context) => {
+			if (context.name === "Default Select Dark BG") {
+				return (
+					<div className="bg-transparent-black-03 rounded p-6">
+						<Story />
+					</div>
+				)
+			}
+			return <Story />
+		}
+	]
+}
+
+export default meta
+type TStory = StoryObj<typeof Select>
+
+export const DefaultSelect: TStory = {
+	args: {
+		label: "Label",
+		id: "select",
+		name: "select",
+		options: [
+			{ label: "Canada", value: "value1" },
+			{ label: "USA", value: "value2" }
+		],
+		isDisabled: false,
+		isError: false,
+		isRequired: false
+	}
+}
+export const DefaultSelectDarkBG: TStory = {
+	args: {
+		label: "Label",
+		id: "select",
+		name: "select",
+		options: [
+			{ label: "Canada", value: "value1" },
+			{ label: "USA", value: "value2" }
+		],
+		isDisabled: false,
+		isError: false,
+		isRequired: false
+	}
+}

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()
@@ -57,7 +63,7 @@ const Select: React.FC<ISelectProps> = ({
 		typeof onChange == "function" && onChange(targetValue)
 		setSelectedOption(targetValue)
 	}
-	const wrapperStyle = cn({ "opacity-50": isDisabled })
+	const wrapperStyle = cn("group", { "opacity-50": isDisabled })
 	return (
 		<div className={wrapperStyle}>
 			{label && (
@@ -84,6 +90,8 @@ const Select: React.FC<ISelectProps> = ({
 				onChange={handleChange}
 				disabled={isDisabled}
 				value={selectedOption}
+				onFocus={onFocus}
+				onBlur={onBlur}
 			>
 				{options.map(({ value, label }) => {
 					return (

package/stories/molecules/inputs/textArea/{TextArea.stories.ts → TextArea.stories.tsx}

@@ -3,7 +3,20 @@ import Textarea from "./TextArea"
 const meta: Meta<typeof Textarea> = {
 	title: "Design System/Molecules/Inputs/TextArea",
 	component: Textarea,
-	tags: ["autodocs"]
+	tags: ["autodocs"],
+	argTypes: {},
+	decorators: [
+		(Story, context) => {
+			if (context.name === "Default Textarea Dark BG") {
+				return (
+					<div className="bg-transparent-black-03 rounded p-6">
+						<Story />
+					</div>
+				)
+			}
+			return <Story />
+		}
+	]
 }
 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?
 
@@ -15,7 +28,17 @@ export const DefaultTextarea: Story = {
 		name: "description",
 		rows: 12,
 		cols: 18,
-		label: "Description",
+		label: { display: "Description" },
+		placeholder: dummyText
+	}
+}
+export const DefaultTextareaDarkBG: Story = {
+	args: {
+		id: "appDescription",
+		name: "description",
+		rows: 12,
+		cols: 18,
+		label: { display: "Description" },
 		placeholder: dummyText
 	}
 }

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

@@ -2,13 +2,19 @@ import React, { forwardRef, useEffect, useId, useState } from "react"
 import { default as cn } from "classnames"
 import InputLabel from "../InputLabel"
 import InputCounter from "../InputCounter"
+
+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?: string
+	label?: ILabelProps
 	/** Error state */
 	isError?: boolean
 	/** If field is required */
@@ -51,49 +57,73 @@ const Textarea: React.FC<ITextareaProps> = ({
 	rows = 12,
 	cols = 48,
 	onChange,
-	value: externalValue,
+	value,
 	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}`
 
+	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
+				)}
+				disabled={isDisabled}
+				defaultValue={defaultValue}
+				value={value}
+				placeholder={placeholder}
+				{...rest}
+			/>
+		)
+	}
+
+	//with label
 	return (
-		<div>
-			{label && (
-				<InputLabel
-					isPlaceholder
-					isActive
-					label={label}
-					isRequired={isRequired}
-					id={id}
-					isError={isError}
-					isDisabled={isDisabled}
-				/>
-			)}
+		<div className="group">
+			<InputLabel
+				isPlaceholder
+				isActive
+				label={label.display}
+				isRequired={isRequired}
+				id={id}
+				isError={isError}
+				isDisabled={isDisabled}
+			/>
+
 			<div>
 				<textarea
 					ref={ref}
 					maxLength={maxLength}
-					onChange={handleOnchange}
+					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+						const targetValue = e.target.value
+						if (onChange) {
+							onChange(targetValue)
+						}
+					}}
 					rows={rows}
 					name={name}
 					id={id}