@agility/plenum-ui 2.0.4 → 2.0.6

package/dist/types/stories/index.d.ts

@@ -1,5 +1,5 @@
 import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./atoms";
 import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps, ISimpleSelectOptions } from "./molecules";
-import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps } from "./organisms";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions };
-export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect };
+import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps, IAnimatedFormInputWithAddons, AnimatedFormInputWithAddons } from "./organisms";
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons };
+export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons };

package/dist/types/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
+import { INestedInputButtonProps } from "@/stories/molecules";
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+    display: string;
+}
+export interface IAnimatedFormInputWithAddons extends Omit<IInputFieldProps, "handleChange"> {
+    id: string;
+    containerStyles?: string;
+    message?: string;
+    required?: boolean;
+    isError?: boolean;
+    isShowCounter?: boolean;
+    maxLength?: number;
+    label: ILabelProps;
+    handleChange: (value: string) => void;
+    labelClassName?: string;
+    addonBTN: INestedInputButtonProps;
+}
+declare const AnimatedFormInputWithAddons: React.FC<IAnimatedFormInputWithAddons>;
+export default AnimatedFormInputWithAddons;

package/dist/types/stories/organisms/AnimatedFormInputWithAddons/index.d.ts

@@ -0,0 +1,3 @@
+import AnimatedFormInputWithAddons, { IAnimatedFormInputWithAddons } from "./AnimatedFormInputWithAddons";
+export type { IAnimatedFormInputWithAddons };
+export default AnimatedFormInputWithAddons;

package/dist/types/stories/organisms/index.d.ts

@@ -5,5 +5,6 @@ import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent";
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
 import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
-export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
-export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
+import AnimatedFormInputWithAddons, { IAnimatedFormInputWithAddons } from "./AnimatedFormInputWithAddons";
+export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps, IAnimatedFormInputWithAddons };
+export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, AnimatedFormInputWithAddons };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.4",
+	"version": "2.0.6",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/index.ts

@@ -66,7 +66,9 @@ import {
 	EmptySectionPlaceholder,
 	FormInputWithAddons,
 	TextInputSelect,
-	ITextInputSelectProps
+	ITextInputSelectProps,
+	IAnimatedFormInputWithAddons,
+	AnimatedFormInputWithAddons
 } from "./organisms"
 
 export type {
@@ -101,7 +103,8 @@ export type {
 	FAIconName,
 	BTNActionType,
 	ITextInputProps,
-	ISimpleSelectOptions
+	ISimpleSelectOptions,
+	IAnimatedFormInputWithAddons
 }
 export {
 	Avatar,
@@ -132,5 +135,6 @@ export {
 	isTablerIcon,
 	isUnifiedIconName,
 	TextInput,
-	TextInputSelect
+	TextInputSelect,
+	AnimatedFormInputWithAddons
 }

package/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import AnimatedFormInputWithAddons, { IAnimatedFormInputWithAddons } from "./AnimatedFormInputWithAddons"
+
+const meta: Meta<typeof AnimatedFormInputWithAddons> = {
+	title: "Design System/organisms/Animated Form Input with Addons",
+	component: AnimatedFormInputWithAddons,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+const DefaultArgs: IAnimatedFormInputWithAddons = {
+	id: "test",
+	containerStyles: "w-full",
+	label: {
+		display: "Input Label"
+	},
+	placeholder: "Placeholder",
+	handleChange: (value: string) => {
+		console.log(value)
+	},
+	type: "text",
+	value: "",
+	addonBTN: {
+		icon: { icon: "IconPencil" },
+		align: "right",
+		ctaLabel: "Edit",
+		onClickHandler: () => {
+			alert("clicked")
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof AnimatedFormInputWithAddons>
+
+export const DefaultStory: Story = {
+	args: {
+		...DefaultArgs
+	} as IAnimatedFormInputWithAddons
+}
+
+export const AnimatedFormInputWithAddonsStory: Story = {
+	args: {
+		...DefaultArgs,
+		label: { display: "label with placeholder" },
+		placeholder: "Placeholder"
+	} as IAnimatedFormInputWithAddons
+}

package/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.tsx

@@ -0,0 +1,99 @@
+import React from "react"
+import { default as cn } from "classnames"
+import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
+import InputCounter from "@/stories/molecules/inputs/InputCounter"
+import { INestedInputButtonProps, NestedInputButton } from "@/stories/molecules"
+
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+	display: string
+}
+
+export interface IAnimatedFormInputWithAddons extends Omit<IInputFieldProps, "handleChange"> {
+	id: string
+	containerStyles?: string
+	message?: string
+	required?: boolean
+	isError?: boolean
+	isShowCounter?: boolean
+	maxLength?: number
+	label: ILabelProps
+	handleChange: (value: string) => void
+	labelClassName?: string
+	addonBTN: INestedInputButtonProps
+}
+
+const AnimatedFormInputWithAddons: React.FC<IAnimatedFormInputWithAddons> = (props: IAnimatedFormInputWithAddons) => {
+	const {
+		id,
+		containerStyles,
+		message,
+		required,
+		isError,
+		label,
+		value,
+		isShowCounter,
+		maxLength,
+		handleChange,
+		labelClassName,
+		addonBTN,
+		...input
+	} = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+	const [valueLength, setValueLength] = React.useState<number>(0)
+
+	return (
+		<>
+			<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}
+				/>
+
+				{addonBTN && (
+					<div className="absolute top-0 bottom-0 right-0 flex items-center ">
+						<NestedInputButton {...addonBTN} />
+					</div>
+				)}
+				<div
+					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:!bg-label-gradient-focus group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+
+						isError && "!text-red-600"
+					)}
+				>
+					<label htmlFor={id} className={labelClassName}>
+						{label.display}
+						{required && <span className="text-red-600 ml-1">*</span>}
+					</label>
+				</div>
+				<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>
+		</>
+	)
+}
+
+export default AnimatedFormInputWithAddons

package/stories/organisms/AnimatedFormInputWithAddons/index.tsx

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

package/stories/organisms/index.ts

@@ -5,7 +5,7 @@ import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent"
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
 import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect"
-
+import AnimatedFormInputWithAddons, { IAnimatedFormInputWithAddons } from "./AnimatedFormInputWithAddons"
 export type {
 	IAnimatedLabelInputProps,
 	IAnimatedLabelTextAreaProps,
@@ -14,7 +14,8 @@ export type {
 	IEmptySectionPlaceholderProps,
 	IItemProp,
 	IFormInputWithAddonsProps,
-	ITextInputSelectProps
+	ITextInputSelectProps,
+	IAnimatedFormInputWithAddons
 }
 export {
 	AnimatedLabelInput,
@@ -23,5 +24,6 @@ export {
 	Dropdown,
 	EmptySectionPlaceholder,
 	FormInputWithAddons,
-	TextInputSelect
+	TextInputSelect,
+	AnimatedFormInputWithAddons
 }