@agility/plenum-ui 2.0.0-rc47 → 2.0.0-rc49

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.stories.tsx

@@ -1,52 +1,52 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
-
-const meta: Meta<typeof NestedInputButton> = {
-	title: "Design System/molecules/inputs/Nested Input Button",
-	component: NestedInputButton,
-	tags: ["autodocs"],
-	argTypes: {},
-	parameters: {
-		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=114-2290&mode=dev&device-scaling=100%25&page-id=0%3A1"
-		}
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof NestedInputButton>
-
-export const RightAligned: Story = {
-	args: {
-		icon: {
-			icon: "IconSearch",
-			className: "h-5 w-5 text-gray-400"
-		},
-		ctaLabel: "Search",
-		align: "right",
-		isClear: false,
-		onClickHandler: () => window.alert("Clicked"),
-		buttonProps: {
-			type: "button"
-		}
-	}
-}
-export const LeftAligned: Story = {
-	args: {
-		...RightAligned.args,
-		align: "left"
-	}
-}
-export const IsClear: Story = {
-	args: {
-		...RightAligned.args,
-		isClear: true
-	}
-}
-export const NoIcon: Story = {
-	args: {
-		...RightAligned.args,
-		icon: undefined
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
+
+const meta: Meta<typeof NestedInputButton> = {
+	title: "Design System/molecules/inputs/Nested Input Button",
+	component: NestedInputButton,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=114-2290&mode=dev&device-scaling=100%25&page-id=0%3A1"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof NestedInputButton>
+
+export const RightAligned: Story = {
+	args: {
+		icon: {
+			icon: "IconSearch",
+			className: "h-5 w-5 text-gray-400"
+		},
+		ctaLabel: "Search",
+		align: "right",
+		isClear: false,
+		onClickHandler: () => window.alert("Clicked"),
+		buttonProps: {
+			type: "button"
+		}
+	}
+}
+export const LeftAligned: Story = {
+	args: {
+		...RightAligned.args,
+		align: "left"
+	}
+}
+export const IsClear: Story = {
+	args: {
+		...RightAligned.args,
+		isClear: true
+	}
+}
+export const NoIcon: Story = {
+	args: {
+		...RightAligned.args,
+		icon: undefined
+	}
+}

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx

@@ -1,64 +1,64 @@
-import React from "react"
-import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
-import { default as cn } from "classnames"
-export interface INestedInputButtonProps {
-	/** Icon to be included*/
-	icon?: IDynamicIconProps
-	/** CTA label */
-	ctaLabel?: string
-	/** Alignment */
-	align: "left" | "right"
-	/** Show the CTA without Background color and a border seperator */
-	isClear?: boolean
-	/** Onclick callback */
-	onClickHandler?(): void
-	buttonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
-}
-
-const NestedInputButton: React.FC<INestedInputButtonProps> = ({
-	icon,
-	ctaLabel,
-	align = "right",
-	isClear = false,
-	onClickHandler,
-	buttonProps
-}) => {
-	const handleClick = () => {
-		onClickHandler && onClickHandler()
-	}
-	const buttonStyle = cn(
-		"relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
-		{
-			"rounded-r text-gray-500 -ml-px": align === "right"
-		},
-		{
-			"rounded-l text-gray-500 -mr-px": align === "left"
-		},
-		{
-			"cursor-default": !onClickHandler
-		},
-		{
-			"hover:bg-gray-100": onClickHandler && !isClear
-		},
-		{
-			"!border-l-white": isClear && align === "right"
-		},
-		{
-			"!border-r-white": isClear && align === "left"
-		},
-		{
-			"bg-gray-50": !isClear
-		},
-		{
-			"bg-white": isClear
-		}
-	)
-	return (
-		<button {...{ ...buttonProps, className: buttonStyle, onClick: handleClick }}>
-			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400" }} />}
-			{ctaLabel && <span>{ctaLabel}</span>}
-		</button>
-	)
-}
-
-export default NestedInputButton
+import React from "react"
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
+import { default as cn } from "classnames"
+export interface INestedInputButtonProps {
+	/** Icon to be included*/
+	icon?: IDynamicIconProps
+	/** CTA label */
+	ctaLabel?: string
+	/** Alignment */
+	align: "left" | "right"
+	/** Show the CTA without Background color and a border seperator */
+	isClear?: boolean
+	/** Onclick callback */
+	onClickHandler?(): void
+	buttonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+}
+
+const NestedInputButton: React.FC<INestedInputButtonProps> = ({
+	icon,
+	ctaLabel,
+	align = "right",
+	isClear = false,
+	onClickHandler,
+	buttonProps
+}) => {
+	const handleClick = () => {
+		onClickHandler && onClickHandler()
+	}
+	const buttonStyle = cn(
+		"relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
+		{
+			"rounded-r text-gray-500 -ml-px": align === "right"
+		},
+		{
+			"rounded-l text-gray-500 -mr-px": align === "left"
+		},
+		{
+			"cursor-default": !onClickHandler
+		},
+		{
+			"hover:bg-gray-100": onClickHandler && !isClear
+		},
+		{
+			"!border-l-white": isClear && align === "right"
+		},
+		{
+			"!border-r-white": isClear && align === "left"
+		},
+		{
+			"bg-gray-50": !isClear
+		},
+		{
+			"bg-white": isClear
+		}
+	)
+	return (
+		<button {...{ ...buttonProps, className: buttonStyle, onClick: handleClick }}>
+			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400" }} />}
+			{ctaLabel && <span>{ctaLabel}</span>}
+		</button>
+	)
+}
+
+export default NestedInputButton

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

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

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

@@ -1,32 +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"
-	}
-}
+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

@@ -1,165 +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
+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

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