@agility/plenum-ui 2.0.0-rc9 → 2.0.0

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/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 (

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

@@ -15,7 +15,7 @@ export const DefaultTextarea: Story = {
 		name: "description",
 		rows: 12,
 		cols: 18,
-		label: "Description",
+		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}
-				/>
-			)}
+			<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}

package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.stories.tsx

@@ -13,7 +13,7 @@ export const DefaultToggleSwitch: Story = {
   args: {
     isChecked: false,
     onChange: (v: boolean) => {
-      console.log(v, "v")
+
     },
     label: {
       text: "label me",
@@ -53,21 +53,20 @@ export const Checked: Story = {
   },
 }
 export const WithIcon: Story = {
-  args: {
-    ...DefaultToggleSwitch.args,
-    label: {
-      text: "label me three",
-      className: "text-lg text-gray-400",
-      xPosition: "left",
-    },
-    withIcon: {
-      name: "IconCheck",
-      type: "solid",
-    },
-    variant: "base",
-    id: "toggle-switch-4",
-    name: "toggle four",
-  },
+	args: {
+		...DefaultToggleSwitch.args,
+		label: {
+			text: "label me three",
+			className: "text-lg text-gray-400",
+			xPosition: "left"
+		},
+		withIcon: {
+			icon: "IconCheck"
+		},
+		variant: "base",
+		id: "toggle-switch-4",
+		name: "toggle four"
+	}
 }
 export const NoLabel: Story = {
   args: {

package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx

@@ -2,74 +2,80 @@ import React, { useEffect, useState } from "react"
 import { default as cn } from "classnames"
 import { Switch } from "@headlessui/react"
 import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms"
+
+interface ToggleSwitchLabel {
+	text: string | JSX.Element
+	className?: string
+	xPosition?: "left" | "right"
+}
+
 export interface IToggleSwitchProps {
 	isChecked: boolean
 	onChange: (isChecked: boolean) => void
-	label?: {
-		text: string | JSX.Element
-		className?: string
-		xPosition?: "left" | "right"
-	}
-	screenReaderLabel: string
+	label?: ToggleSwitchLabel
+	screenReaderLabel?: string
 	name: string
 	id: string
-	variant: "base" | "short"
+	variant?: "base" | "short"
 	withIcon?: IDynamicIconProps
+	disabled?: boolean,
+	groupClassName?: string
 }
 
 const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
-  isChecked,
-  onChange,
-  label,
-  screenReaderLabel,
-  name,
-  id,
-  variant = "base",
-  withIcon,
+	isChecked,
+	onChange,
+	label,
+	screenReaderLabel,
+	name,
+	id,
+	variant = "base",
+	withIcon,
+	disabled,
+	groupClassName,
 }) => {
-  const [checked, setChecked] = useState<boolean>(isChecked)
-  useEffect(() => setChecked(isChecked), [isChecked])
+	const [checked, setChecked] = useState<boolean>(isChecked)
+	useEffect(() => setChecked(isChecked), [isChecked])
 
-  return (
-    <Switch.Group as={"div"} className={"flex items-center gap-2"}>
-      {label && label.xPosition === "left" && (
-        <Switch.Label className={label.className}>{label.text}</Switch.Label>
-      )}
-      <Switch
-        name={name}
-        id={id}
-        checked={checked}
-        onChange={(v: boolean) => {
-          onChange(v)
-          setChecked(v)
-        }}
-        className={cn(
-          { "w-9 h-4": variant === "short", " h-6 w-11": variant === "base" },
-          checked ? "bg-purple-600" : "bg-gray-200",
-          "relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
-        )}
-      >
-        <span className="sr-only">{screenReaderLabel}</span>
-        <span
-          className={cn(
-            checked ? "translate-x-[22px]" : "translate-x-[2px]",
-            {
-              "border border-gray-200 translate-x-0": variant === "short",
-              "!translate-x-[22px]": checked && variant === "short",
-            },
-            " h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
-          )}
-        >
-          {withIcon && (
-            <DynamicIcon {...withIcon} className={"text-gray-400 m-[2px]"} />
-          )}
-        </span>
-      </Switch>
-      {label && label.xPosition === "right" && (
-        <Switch.Label className={label.className}>{label.text}</Switch.Label>
-      )}
-    </Switch.Group>
-  )
+	return (
+		<Switch.Group as={"div"} className={cn("flex items-center gap-2", groupClassName)}>
+			{label && (label.xPosition === "left" || !label?.xPosition) && (
+				<Switch.Label className={label.className}>{label.text}</Switch.Label>
+			)}
+			<Switch
+				name={name}
+				id={id}
+				checked={checked}
+				onChange={(v: boolean) => {
+					onChange(v)
+					setChecked(v)
+				}}
+				className={cn(
+					{ "w-9 h-4 transition-all": variant === "short", " h-6 w-11": variant === "base" },
+					checked && disabled ? "bg-purple-200" : checked ? "bg-purple-600" : "bg-gray-200",
+					"relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
+				)}
+				disabled={disabled}
+			>
+				{screenReaderLabel && <span className="sr-only">{screenReaderLabel}</span>}
+				<span
+					className={cn(
+						checked ? "translate-x-[22px]" : "translate-x-[2px]",
+						{
+							"border border-gray-200 translate-x-0": variant === "short",
+							"!translate-x-[22px]": checked && variant === "short"
+						},
+						" h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
+					)}
+				>
+					{withIcon && <DynamicIcon {...withIcon} className={"text-gray-400 m-[2px]"} />}
+				</span>
+			</Switch>
+			{label && label.xPosition === "right" && (
+				<Switch.Label className={label.className}>{label.text}</Switch.Label>
+			)}
+		</Switch.Group>
+	)
 }
 
 export default ToggleSwitch