@agility/plenum-ui 2.0.0-rc8 → 2.0.0

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,75 @@
 import React from "react"
 import { default as cn } from "classnames"
 import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
-import Textarea, { ITextareaProps } from "@/stories/molecules/inputs/textArea/TextArea"
+import InputCounter from "@/stories/molecules/inputs/InputCounter"
 
-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?: ITextareaProps
 	required?: boolean
 	isError?: boolean
+	isShowCounter?: boolean
+	maxLength?: number
 	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, isShowCounter, maxLength, handleChange, ...input } = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+	const [valueLength, setValueLength] = React.useState<number>(0)
+
 	return (
-		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-			{input && <InputField isError={isError} {...input} />}
-			{textarea && <Textarea 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)
+						setValueLength(v.length)
+						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">
+						{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(valueLength)} limit={maxLength ?? 150} />
+						</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

package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx

@@ -2,74 +2,74 @@ import type { Meta, StoryObj } from "@storybook/react"
 import ButtonDropdown from "."
 import { IItemProp } from "../DropdownComponent"
 
-
 const meta: Meta<typeof ButtonDropdown> = {
 	title: "Design System/Organisms/Button Dropdown",
 	component: ButtonDropdown,
 	tags: ["autodocs"],
 	argTypes: {}
 }
- const dropdownDataWithIcons: IItemProp[][] = [
-		[
-			{
-				icon: {
-					name: "IconClipboardCopy",
-					pos: "leading",
-					className: "h-5 w-5",
-					outline: false
-				},
-				key: "Copy",
-				label: "Copy",
-				onClick: () => {
-					console.log("Copy action")
-				}
-			}
-		],
-		[
-			{
-				icon: {
-					name: "IconFolderPlus",
-					pos: "leading",
-					className: "h-5 w-5",
-					outline: false
-				},
-				key: "Add to Batch",
-				label: "Add to Batch",
-				onClick: () => {
-					console.log("Add to Batch action")
-				}
+const dropdownDataWithIcons: IItemProp[][] = [
+	[
+		{
+			icon: {
+				icon: "IconCopy"
+
+				// className: "h-5 w-5",
+				// outline: false
 			},
-			{
-				icon: {
-					name: "IconEye",
-					pos: "leading",
-					className: "h-5 w-5",
-					outline: false
-				},
-				key: "View Batch",
-				label: "View Batch",
-				onClick: () => {
-					console.log("View Batch action")
-				}
+			iconPosition: "leading",
+			key: "Copy",
+			label: "Copy The Thing",
+			onClick: () => {}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconFolderPlus"
+				// name: "IconFolderPlus",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			key: "Add to Batch",
+			label: "Add to Batch",
+			onClick: () => {
+				console.log("Add to Batch action")
 			}
-		],
-		[
-			{
-				icon: {
-					name: "IconTrash",
-					pos: "leading",
-					className: "h-5 w-5",
-					outline: false
-				},
-				key: "Delete",
-				label: "Delete",
-				onClick: () => {
-					console.log("Delete action")
-				},
-				isEmphasized: true
+		},
+		{
+			icon: {
+				icon: "IconEye",
+				//pos: "leading",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "View Batch",
+			label: "View Batch",
+			onClick: () => {
+				console.log("View Batch action")
 			}
-		]
- ]
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconTrash"
+
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			key: "Delete",
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
+			},
+			isEmphasized: true
+		}
+	]
+]
 
 export default meta
 type Story = StoryObj<typeof ButtonDropdown>

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -8,6 +8,7 @@ import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponen
 export interface IButtonDropdownProps {
 	button: IButtonProps
 	dropDown: IDropdownProps
+	hideDivider?: boolean
 	placement?: IDropdownProps["placement"]
 	offsetOptions?: IDropdownProps["offsetOptions"]
 }
@@ -15,22 +16,7 @@ export interface IButtonDropdownProps {
 /**
  * Primary UI component for user interaction
  */
-const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement, offsetOptions }) => {
-	const dropDownClasses: IDropdownProps["classNames"] = {
-		...defaultClassNames,
-		groupClassname: cn(
-			"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
-			button.actionType === "primary"
-				? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
-				: "",
-			button.actionType === "secondary"
-				? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
-				: "",
-			button.actionType === "alternative"
-				? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
-				: ""
-		)
-	}
+const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, hideDivider = false, placement = "bottom-end", offsetOptions }) => {
 	return (
 		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
 			<Button
@@ -38,40 +24,66 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 					...button,
 					className: cn(
 						button.className,
-						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0"
+						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0",
+						"border-r-transparent"
 					)
 				}}
 			/>
-			<div
+			{!hideDivider && <div
 				className={cn(
 					"w-[1px] rt",
-					button.actionType === "primary" ? "bg-purple-700" : "",
-					button.actionType === "secondary" ? "bg-purple-200" : "",
+					button.actionType === "primary"
+						? "bg-violet-700 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0"
+						: "",
+					button.actionType === "secondary" ? "bg-purple-200 " : "",
 					button.actionType === "alternative" ? "bg-gray-300" : ""
 				)}
-			></div>
+			></div>}
 			<Dropdown
 				{...{
-					...(dropDown as IDropdownProps),
 					CustomDropdownTrigger: (
 						<DynamicIcon
 							{...{
-								icon: "ChevronDownIcon",
+								icon: "IconChevronDown",
 								className: cn("h-5 w-5", {
-									"text-white": button.actionType === "primary",
-									"text-purple-700": button.actionType === "secondary",
+									"text-violet-100": button.actionType === "primary",
+									"text-purple-700 ": button.actionType === "secondary",
 									"text-gray-700": button.actionType === "alternative"
-								})
+								},
+								dropDown.iconClassname
+								),
 							}}
 						/>
 					),
-					classNames: dropDownClasses,
+					buttonClassname: cn(
+						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+						button.actionType === "primary"
+							? cn(
+									"border-violet-700 bg-violet-800  !text-white  hover:border-violet-700 hover:bg-violet-700 active:!border-violet-800 active:bg-violet-800 fill-white",
+									"disabled:bg-violet-400 disabled:text-white disabled:hover:none disabled:active:bg-violet-400 disabled:border-violet-400"
+							  )
+							: "",
+						button.actionType === "secondary"
+							? cn(
+									"border-purple-400 bg-purple-50 text-purple-700   hover:bg-purple-100 active:bg-purple-300 fill-purple-700",
+									"disabled:bg-purple-50 disabled:text-grey-50 disabled:hover:none disabled:active:bg-purple-50 "
+							  )
+							: "",
+						button.actionType === "alternative"
+							? cn(
+									"border-gray-300 bg-white text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100",
+									"disabled:bg-gray-100 disabled:text-gray-500 disabled:hover:none disabled:active:bg-gray-100 disabled:border-gray-300"
+							  )
+							: "",
+						dropDown.buttonClassname
+					),
 					offsetOptions: offsetOptions ?? {
 						crossAxis: 0,
-						mainAxis: 5, //up/down
-						alignmentAxis: -10 //left/right
+						mainAxis: -4, //up/down
+						alignmentAxis: 0 //left/right
 					},
-					placement
+					placement,
+					...(dropDown as IDropdownProps),
 				}}
 			/>
 			<div className="hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" />