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

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

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

package/stories/molecules/tabs/index.tsx

@@ -1,3 +1,2 @@
-
-export { default } from './Tabs';
-export * from './Tabs';
+export * from "./Tabs"
+export { default } from "./Tabs"

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.stories.tsx

@@ -11,11 +11,20 @@ const meta: Meta<typeof AnimatedLabelInput> = {
 export default meta
 type Story = StoryObj<typeof AnimatedLabelInput>
 export const DefaultAnimatedLabelInputsStory: Story = {
+	args: {
+		id: "test",
+		label: {
+			display: "Label"
+		}
+	} as IAnimatedLabelInputProps
+}
+
+export const DefaultAnimatedLabelInputsStoryWithPlaceHolder: Story = {
 	args: {
 		id: "test",
 		label: {
 			display: "Label"
 		},
-		input: {}
+		placeholder: "Placeholder"
 	} as IAnimatedLabelInputProps
 }

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -1,59 +1,65 @@
 import React from "react"
 import { default as cn } from "classnames"
 import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
-import TextAreaField, { ITextAreaFieldProps } from "@/stories/molecules/inputs/textArea/TextArea"
 
-interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
 	display: string
 }
 
-export interface IAnimatedLabelInputProps {
+export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
 	id: string
 	containerStyles?: string
 	message?: string
-	input?: IInputFieldProps
-	textarea?: ITextAreaFieldProps
 	required?: boolean
 	isError?: boolean
 	label: ILabelProps
+	handleChange: (value: string) => void
 }
 
-const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = ({
-	id,
-	label,
-	input,
-	message,
-	textarea,
-	required,
-	isError,
-	containerStyles
-}) => {
+const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimatedLabelInputProps) => {
+	const { id, containerStyles, message, required, isError, label, value, handleChange, ...input } = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+
 	return (
-		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-			{input && <InputField isError={isError} {...input} />}
-			{textarea && <TextAreaField isError={isError} {...textarea} />}
-			<label
-				className={cn(
-					"absolute left-1 z-10 ml-[.172rem] inline-block bg-white px-1 text-xs  transition-all peer-placeholder-shown:top-2 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-600",
-					"-top-[9px] group-focus-within:!-top-[12px] group-focus-within:!left-1  group-focus-within:!ml-[.172rem]  group-focus-within:!text-xs",
-					isError && "!text-red-600"
-				)}
-				htmlFor={id}
-			>
-				{label.display}
-				{required && <span className="text-red-600">*</span>}
-			</label>
-
-			<div className="flex flex-row space-x-3">
-				<div className="grow transition-all">
-					{message && (
-						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
-							{message}
-						</span>
+		<>
+			<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+				<InputField
+					id={id}
+					isError={isError}
+					value={value}
+					handleChange={(v) => {
+						setHasValue(!!v)
+						if (handleChange) handleChange(v)
+					}}
+					{...input}
+				/>
+				<label
+					className={cn(
+						"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+						"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
+						"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+
+						isError && "!text-red-600"
 					)}
+					htmlFor={id}
+				>
+					{label.display}
+					{required && <span className="text-red-600 ml-1">*</span>}
+				</label>
+
+				<div className="flex flex-row space-x-3">
+					<div className="grow transition-all">
+						{message && (
+							<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+								{message}
+							</span>
+						)}
+					</div>
 				</div>
 			</div>
-		</div>
+		</>
 	)
 }
 

package/stories/organisms/AnimatedLabelInput/index.tsx

@@ -1,3 +1,3 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput"
-export default AnimatedLabelInput
 export type { IAnimatedLabelInputProps }
+export default AnimatedLabelInput

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
+
+const meta: Meta<typeof AnimatedLabelTextArea> = {
+	title: "Design System/organisms/Animated Label Text Area",
+	component: AnimatedLabelTextArea,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof AnimatedLabelTextArea>
+export const DefaultAnimatedLabelTextAreasStory: Story = {
+	args: {
+		id: "test",
+		label: "Label"
+	} as IAnimatedLabelTextAreaProps
+}
+
+export const DefaultAnimatedLabelTextAreasStoryWithPlaceholder: Story = {
+	args: {
+		id: "test",
+		label: "Label",
+		placeholder: "Placeholder"
+	} as IAnimatedLabelTextAreaProps
+}

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import { default as cn } from "classnames"
+
+import TextArea, { ITextareaProps } from "@/stories/molecules/inputs/textArea"
+
+export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
+	id: string
+	containerStyles?: string
+	message?: string
+	required?: boolean
+	isError?: boolean
+	handleChange: (value: string) => void
+}
+
+const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAnimatedLabelTextAreaProps) => {
+	const { id, containerStyles, message, required, isError, label, value, handleChange, onChange, ...input } = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+
+	return (
+		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+			<TextArea
+				id={id}
+				isError={isError}
+				value={value}
+				{...input}
+				onChange={(v) => {
+					setHasValue(!!v)
+					if (handleChange) handleChange(v)
+				}}
+				label={undefined}
+			/>
+			<label
+				className={cn(
+					"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+					hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+					"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
+					"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+
+					isError && "!text-red-600"
+				)}
+				htmlFor={label?.htmlFor || id}
+			>
+				{label?.display}
+				{required && <span className="text-red-600 ml-1">*</span>}
+			</label>
+
+			<div className="flex flex-row space-x-3">
+				<div className="grow transition-all">
+					{message && (
+						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+							{message}
+						</span>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default AnimatedLabelTextArea

package/stories/organisms/AnimatedLabelTextArea/index.tsx

@@ -0,0 +1,3 @@
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
+export type { IAnimatedLabelTextAreaProps }
+export default AnimatedLabelTextArea