@agility/plenum-ui 2.0.4 → 2.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react"
|
|
2
|
+
import AnimatedFormInputWithAddons, { IAnimatedFormInputWithAddons } from "./AnimatedFormInputWithAddons"
|
|
3
|
+
|
|
4
|
+
const meta: Meta<typeof AnimatedFormInputWithAddons> = {
|
|
5
|
+
title: "Design System/organisms/Animated Form Input with Addons",
|
|
6
|
+
component: AnimatedFormInputWithAddons,
|
|
7
|
+
tags: ["autodocs"],
|
|
8
|
+
argTypes: {}
|
|
9
|
+
}
|
|
10
|
+
const DefaultArgs: IAnimatedFormInputWithAddons = {
|
|
11
|
+
id: "test",
|
|
12
|
+
containerStyles: "w-full",
|
|
13
|
+
label: {
|
|
14
|
+
display: "Input Label"
|
|
15
|
+
},
|
|
16
|
+
placeholder: "Placeholder",
|
|
17
|
+
handleChange: (value: string) => {
|
|
18
|
+
console.log(value)
|
|
19
|
+
},
|
|
20
|
+
type: "text",
|
|
21
|
+
value: "",
|
|
22
|
+
addonBTN: {
|
|
23
|
+
icon: { icon: "IconPencil" },
|
|
24
|
+
align: "right",
|
|
25
|
+
ctaLabel: "Edit",
|
|
26
|
+
onClickHandler: () => {
|
|
27
|
+
alert("clicked")
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default meta
|
|
33
|
+
type Story = StoryObj<typeof AnimatedFormInputWithAddons>
|
|
34
|
+
|
|
35
|
+
export const DefaultStory: Story = {
|
|
36
|
+
args: {
|
|
37
|
+
...DefaultArgs
|
|
38
|
+
} as IAnimatedFormInputWithAddons
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export const AnimatedFormInputWithAddonsStory: Story = {
|
|
42
|
+
args: {
|
|
43
|
+
...DefaultArgs,
|
|
44
|
+
label: { display: "label with placeholder" },
|
|
45
|
+
placeholder: "Placeholder"
|
|
46
|
+
} as IAnimatedFormInputWithAddons
|
|
47
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { default as cn } from "classnames"
|
|
3
|
+
import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
|
|
4
|
+
import InputCounter from "@/stories/molecules/inputs/InputCounter"
|
|
5
|
+
import { INestedInputButtonProps, NestedInputButton } from "@/stories/molecules"
|
|
6
|
+
|
|
7
|
+
interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
|
|
8
|
+
display: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface IAnimatedFormInputWithAddons extends Omit<IInputFieldProps, "handleChange"> {
|
|
12
|
+
id: string
|
|
13
|
+
containerStyles?: string
|
|
14
|
+
message?: string
|
|
15
|
+
required?: boolean
|
|
16
|
+
isError?: boolean
|
|
17
|
+
isShowCounter?: boolean
|
|
18
|
+
maxLength?: number
|
|
19
|
+
label: ILabelProps
|
|
20
|
+
handleChange: (value: string) => void
|
|
21
|
+
labelClassName?: string
|
|
22
|
+
addonBTN: INestedInputButtonProps
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const AnimatedFormInputWithAddons: React.FC<IAnimatedFormInputWithAddons> = (props: IAnimatedFormInputWithAddons) => {
|
|
26
|
+
const {
|
|
27
|
+
id,
|
|
28
|
+
containerStyles,
|
|
29
|
+
message,
|
|
30
|
+
required,
|
|
31
|
+
isError,
|
|
32
|
+
label,
|
|
33
|
+
value,
|
|
34
|
+
isShowCounter,
|
|
35
|
+
maxLength,
|
|
36
|
+
handleChange,
|
|
37
|
+
labelClassName,
|
|
38
|
+
addonBTN,
|
|
39
|
+
...input
|
|
40
|
+
} = props
|
|
41
|
+
|
|
42
|
+
const [hasValue, setHasValue] = React.useState<boolean>(!!value)
|
|
43
|
+
const [valueLength, setValueLength] = React.useState<number>(0)
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<>
|
|
47
|
+
<div className={cn("group relative", containerStyles ? containerStyles : "")}>
|
|
48
|
+
<InputField
|
|
49
|
+
id={id}
|
|
50
|
+
isError={isError}
|
|
51
|
+
value={value}
|
|
52
|
+
handleChange={(v) => {
|
|
53
|
+
setHasValue(!!v)
|
|
54
|
+
setValueLength(v.length)
|
|
55
|
+
if (handleChange) handleChange(v)
|
|
56
|
+
}}
|
|
57
|
+
{...input}
|
|
58
|
+
/>
|
|
59
|
+
|
|
60
|
+
{addonBTN && (
|
|
61
|
+
<div className="absolute top-0 bottom-0 right-0 flex items-center ">
|
|
62
|
+
<NestedInputButton {...addonBTN} />
|
|
63
|
+
</div>
|
|
64
|
+
)}
|
|
65
|
+
<div
|
|
66
|
+
className={cn(
|
|
67
|
+
"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
|
|
68
|
+
hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
|
|
69
|
+
"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
|
|
70
|
+
"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",
|
|
71
|
+
|
|
72
|
+
isError && "!text-red-600"
|
|
73
|
+
)}
|
|
74
|
+
>
|
|
75
|
+
<label htmlFor={id} className={labelClassName}>
|
|
76
|
+
{label.display}
|
|
77
|
+
{required && <span className="text-red-600 ml-1">*</span>}
|
|
78
|
+
</label>
|
|
79
|
+
</div>
|
|
80
|
+
<div className="flex flex-row space-x-3">
|
|
81
|
+
<div className="grow">
|
|
82
|
+
{message && (
|
|
83
|
+
<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
|
|
84
|
+
{message}
|
|
85
|
+
</span>
|
|
86
|
+
)}
|
|
87
|
+
</div>
|
|
88
|
+
{isShowCounter && (
|
|
89
|
+
<div className="shrink-0">
|
|
90
|
+
<InputCounter current={Number(valueLength)} limit={maxLength ?? 150} />
|
|
91
|
+
</div>
|
|
92
|
+
)}
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</>
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default AnimatedFormInputWithAddons
|