@agility/plenum-ui 2.0.5 → 2.0.7

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/molecules/inputs/NestedInputButton/NestedInputButton.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { IDynamicIconProps } from "@/stories/atoms/icons";
-export interface INestedInputButtonProps {
+export interface INestedInputButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
     /** Icon to be included*/
     icon?: IDynamicIconProps;
     /** CTA label */
@@ -9,9 +9,6 @@ export interface INestedInputButtonProps {
     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>;
 }
 declare const NestedInputButton: React.FC<INestedInputButtonProps>;
 export default NestedInputButton;

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.5",
+	"version": "2.0.7",
 	"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/molecules/inputs/NestedInputButton/NestedInputButton.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
 import { default as cn } from "classnames"
-export interface INestedInputButtonProps {
+export interface INestedInputButtonProps
+	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Icon to be included*/
 	icon?: IDynamicIconProps
 	/** CTA label */
@@ -10,9 +11,6 @@ export interface INestedInputButtonProps {
 	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> = ({
@@ -20,12 +18,10 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 	ctaLabel,
 	align = "right",
 	isClear = false,
-	onClickHandler,
-	buttonProps
+	...props
 }) => {
-	const handleClick = () => {
-		onClickHandler && onClickHandler()
-	}
+	const { ...buttonProps } = props
+	const { onClick } = buttonProps
 	const buttonStyle = cn(
 		"relative flex items-center space-x-2 px-4 py-2 leading-5 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
 		{
@@ -35,10 +31,10 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 			"rounded-l text-gray-500 -mr-px": align === "left"
 		},
 		{
-			"cursor-default": !onClickHandler
+			"cursor-default": !onClick
 		},
 		{
-			"hover:bg-gray-100": onClickHandler && !isClear
+			"hover:bg-gray-100": onClick && !isClear
 		},
 		{
 			"!border-l-white": isClear && align === "right"
@@ -54,7 +50,16 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 		}
 	)
 	return (
-		<button {...{ ...buttonProps, className: buttonStyle, onClick: handleClick }}>
+		<button
+			{...{
+				...buttonProps,
+				className: buttonStyle,
+				onClick: (e) => {
+					e.preventDefault()
+					onClick && onClick(e)
+				}
+			}}
+		>
 			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400 h-5 w-5" }} />}
 			{ctaLabel && <span>{ctaLabel}</span>}
 		</button>

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

@@ -23,7 +23,7 @@ const DefaultArgs: IAnimatedFormInputWithAddons = {
 		icon: { icon: "IconPencil" },
 		align: "right",
 		ctaLabel: "Edit",
-		onClickHandler: () => {
+		onClick: () => {
 			alert("clicked")
 		}
 	}

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
 }