@agility/plenum-ui 2.0.0-rc7 → 2.0.0-rc8

package/dist/lib/tailwind.css

@@ -746,6 +746,10 @@ select {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .static {
   position: static;
 }
@@ -1015,6 +1019,10 @@ select {
   bottom: 24rem;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .left-1 {
   left: 0.25rem;
 }
@@ -27908,6 +27916,11 @@ select {
   border-left-color: rgb(76 29 149 / 0.95);
 }
 
+.border-l-white {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .border-l-yellow-100 {
   --tw-border-opacity: 1;
   border-left-color: rgb(255 245 212 / var(--tw-border-opacity));
@@ -54349,6 +54362,10 @@ select {
   padding-left: 0.75rem;
 }
 
+.pl-7 {
+  padding-left: 1.75rem;
+}
+
 .pl-\[10px\] {
   padding-left: 10px;
 }
@@ -54365,6 +54382,10 @@ select {
   padding-right: 1rem;
 }
 
+.pr-7 {
+  padding-right: 1.75rem;
+}
+
 .pr-9 {
   padding-right: 2.25rem;
 }
@@ -63138,6 +63159,14 @@ select {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.focus-within\:z-10:focus-within {
+  z-index: 10;
+}
+
+.focus-within\:z-20:focus-within {
+  z-index: 20;
+}
+
 .focus-within\:\!border-gray-300:focus-within {
   --tw-border-opacity: 1 !important;
   border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;

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

package/dist/types/stories/molecules/inputs/InputField/InputField.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url";
+export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url" | "currency";
 export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
     /** Callback on change */
     handleChange: (value: string) => void;

package/dist/types/stories/organisms/TextInputSelect/InputSelect.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export type SelectOptions = {
+    label: string;
+    value: string;
+};
+export interface InputSelectProps {
+    align: "left" | "right";
+    /** Show the CTA without Background color and a border seperator */
+    inputOptions: SelectOptions[];
+    /** Onclick callback */
+    onSelectOption?(value: string): void;
+    className?: string;
+    isDisabled?: boolean;
+}
+/** Comment */
+export declare const InputSelect: FC<InputSelectProps>;

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

@@ -0,0 +1,48 @@
+import { FC } from "react";
+import { AcceptedInputTypes } from "@/stories/molecules";
+export type SelectOptions = {
+    label: string;
+    value: string;
+};
+export interface ITextInputSelectProps {
+    /** Input type*/
+    type: AcceptedInputTypes;
+    /** Input ID */
+    id?: string;
+    /** Input Name */
+    name?: string;
+    /** Label for the input */
+    label?: string;
+    /** placeholder for the input */
+    placeholder?: string;
+    /** Force the focus state on the input */
+    isFocused?: boolean;
+    /** Error state */
+    isError?: boolean;
+    /** If field is required */
+    isRequired?: boolean;
+    /** Disabled state */
+    isDisabled?: boolean;
+    /** Set default value */
+    defaultValue?: string;
+    /** Set value */
+    value: string;
+    /** Message shown under the text field */
+    message?: string;
+    /** Input character counter */
+    isShowCounter?: boolean;
+    /** Max length of input character  */
+    maxLength?: number;
+    /** Select input location  */
+    selectLocation?: "left" | "right";
+    /** Prefix  */
+    prefix?: string;
+    /** List of options to show on the select field  */
+    inputOptions?: SelectOptions[];
+    /** Callback on base input */
+    onChange?(value: string): void;
+    /** Callback on input select field */
+    onSelectOption?(value: string): void;
+}
+declare const TextInputSelect: FC<ITextInputSelectProps>;
+export default TextInputSelect;

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

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

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

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

package/package.json

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

package/stories/index.ts

@@ -62,7 +62,9 @@ import {
 	ButtonDropdown,
 	Dropdown,
 	EmptySectionPlaceholder,
-	FormInputWithAddons
+	FormInputWithAddons,
+	TextInputSelect,
+	ITextInputSelectProps
 } from "./organisms"
 
 export type {
@@ -70,6 +72,7 @@ export type {
 	IBadgeProps,
 	IButtonProps,
 	ICapsuleProps,
+	ITextInputSelectProps,
 	IDynamicIconProps,
 	IIconWithShadowProps,
 	ILoaderProps,
@@ -124,5 +127,6 @@ export {
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName,
-	TextInput
+	TextInput,
+	TextInputSelect
 }

package/stories/molecules/inputs/InputField/InputField.tsx

@@ -13,6 +13,7 @@ export type AcceptedInputTypes =
 	| "tel"
 	| "text"
 	| "url"
+	| "currency"
 
 export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
 	/** Callback on change */

package/stories/organisms/TextInputSelect/InputSelect.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useState } from "react"
+import { default as cn } from "classnames"
+
+export type SelectOptions = {
+	label: string
+	value: string
+}
+export interface InputSelectProps {
+	align: "left" | "right"
+	/** Show the CTA without Background color and a border seperator */
+	inputOptions: SelectOptions[]
+	/** Onclick callback */
+	onSelectOption?(value: string): void
+	className?: string
+	isDisabled?: boolean
+}
+
+/** Comment */
+export const InputSelect: FC<InputSelectProps> = ({
+	inputOptions,
+	onSelectOption,
+	align = "right",
+	className,
+	isDisabled
+}: InputSelectProps): JSX.Element | null => {
+	const [selectedOption, setSelectedOption] = useState<string>(inputOptions[0].value)
+
+	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+		const targetValue = e.target.value
+		onSelectOption && onSelectOption(targetValue)
+		setSelectedOption(targetValue)
+	}
+
+	if (!inputOptions?.length) return null
+	return (
+		<select
+			className={cn(
+				"relative z-10 inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 pr-7 text-sm font-medium",
+				"focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500",
+				align === "right"
+					? "-ml-px rounded-r border-l-white text-gray-700"
+					: align === "left"
+					? "-mr-px rounded-l border-r-white text-gray-500 focus-within:z-10"
+					: "",
+				!onSelectOption ? "cursor-default" : "",
+				className
+			)}
+			onChange={handleChange}
+			value={selectedOption}
+			disabled={isDisabled}
+		>
+			{inputOptions.map((option) => (
+				<option key={option.value} value={option.value}>
+					{option.label}
+				</option>
+			))}
+		</select>
+	)
+}

package/stories/organisms/TextInputSelect/TextInputSelect.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import TextInputSelect from "."
+
+const meta: Meta<typeof TextInputSelect> = {
+	title: "Design System/organisms/TextInputSelect",
+	component: TextInputSelect,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof TextInputSelect>
+export const DefaultTextInputSelectStory: Story = {
+	args: {
+		isFocused: false,
+		isError: false,
+		id: "input",
+		name: "input",
+		defaultValue: "",
+		isRequired: false,
+		isDisabled: false,
+		isShowCounter: false,
+		label: "Currency",
+		placeholder: "420.69",
+		type: "currency",
+		inputOptions: [
+			{ label: "USD", value: "USD" },
+			{ label: "CAD", value: "CAD" },
+			{ label: "EUR", value: "EUR" }
+		],
+		prefix: "$"
+	}
+}

package/stories/organisms/TextInputSelect/TextInputSelect.tsx

@@ -0,0 +1,186 @@
+import React, { FC, useEffect, useId, useRef, useState } from "react"
+import { default as cn } from "classnames"
+
+import { InputSelect } from "./InputSelect"
+import { AcceptedInputTypes, InputField } from "@/stories/molecules"
+import InputCounter from "@/stories/molecules/inputs/InputCounter"
+
+export type SelectOptions = {
+	label: string
+	value: string
+}
+
+export interface ITextInputSelectProps {
+	/** Input type*/
+	type: AcceptedInputTypes
+	/** Input ID */
+	id?: string
+	/** Input Name */
+	name?: string
+	/** Label for the input */
+	label?: string
+	/** placeholder for the input */
+	placeholder?: string
+	/** Force the focus state on the input */
+	isFocused?: boolean
+	/** Error state */
+	isError?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Set default value */
+	defaultValue?: string
+	/** Set value */
+	value: string
+	/** Message shown under the text field */
+	message?: string
+	/** Input character counter */
+	isShowCounter?: boolean
+	/** Max length of input character  */
+	maxLength?: number
+	/** Select input location  */
+	selectLocation?: "left" | "right"
+	/** Prefix  */
+	prefix?: string
+	/** List of options to show on the select field  */
+	inputOptions?: SelectOptions[]
+	/** Callback on base input */
+	onChange?(value: string): void
+	/** Callback on input select field */
+	onSelectOption?(value: string): void
+}
+
+const TextInputSelect: FC<ITextInputSelectProps> = ({
+	label,
+	isFocused,
+	isError,
+	id,
+	name,
+	isRequired,
+	type,
+	defaultValue,
+	isDisabled,
+	message,
+	isShowCounter,
+	maxLength,
+	placeholder,
+	inputOptions,
+	selectLocation = "right",
+	prefix,
+	onChange,
+	onSelectOption,
+	value: externalValue
+}: ITextInputSelectProps) => {
+	const [isFocus, setIsFocus] = useState<boolean>(Boolean(isFocused))
+	const [value, setValue] = useState<string>(defaultValue || "")
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	const uniqueID = useId()
+	if (!id) id = `select-${uniqueID}`
+	if (!name) name = id
+
+	useEffect(() => {
+		setValue(externalValue)
+	}, [externalValue])
+
+	// set force focus
+	useEffect(() => {
+		const input = inputRef.current
+		if (!input || isFocus === undefined || isFocused === undefined || isDisabled) return
+		if (isFocus || isFocused) {
+			input.focus()
+		} else {
+			input.blur()
+		}
+	}, [isFocus, isFocused])
+
+	// set label as active if default value is set
+	useEffect(() => {
+		const input = inputRef.current
+		if (!input || defaultValue === undefined || defaultValue === "") return
+	}, [defaultValue])
+
+	const handleInputFocus = (): void => {
+		setIsFocus(true)
+		// add other focus effects here
+	}
+
+	const handleInputBlur = (): void => {
+		setIsFocus(false)
+		// add other focus effects here
+	}
+	const labelStyles = cn("block inline-block font-medium transition-all text-sm text-gray-700 mb-1", {
+		"text-red-500 bg-white": isError
+	})
+
+	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
+
+	return (
+		<div>
+			{label && (
+				<label htmlFor={id} className={labelStyles}>
+					{label}
+					{isRequired && <span className="text-red-500"> *</span>}
+				</label>
+			)}
+			<div className="flex">
+				{inputOptions?.length && selectLocation === "left" && (
+					<InputSelect
+						inputOptions={inputOptions}
+						align="left"
+						onSelectOption={onSelectOption}
+						className={cn(isError ? "border-red-500" : "")}
+						isDisabled={isDisabled}
+					/>
+				)}
+				<div className="relative flex-grow focus-within:z-20">
+					{prefix && (
+						<div className="pointer-events-none pr-10 absolute inset-y-0 left-0 flex items-center pl-3">
+							<span className="text-gray-500 sm:text-sm">{prefix}</span>
+						</div>
+					)}
+					<InputField
+						onFocus={handleInputFocus}
+						onBlur={handleInputBlur}
+						handleChange={(v) => onChange && onChange(v)}
+						ref={inputRef}
+						type={type}
+						name={name}
+						id={id}
+						className={cn(
+							"w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5",
+							"focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm",
+							selectLocation === "right" ? `rounded-l` : `rounded-r`,
+							isError ? "border-red-500" : "",
+							prefix ? `pl-7` : ""
+						)}
+						isDisabled={isDisabled}
+						defaultValue={defaultValue}
+						value={value}
+						maxLength={maxLength}
+						placeholder={placeholder}
+					/>
+				</div>
+				{inputOptions?.length && selectLocation === "right" && (
+					<InputSelect
+						inputOptions={inputOptions}
+						align={"right"}
+						onSelectOption={onSelectOption}
+						isDisabled={isDisabled}
+						className={cn(isError ? "border-red-500" : "")}
+					/>
+				)}
+			</div>
+			<div className="flex flex-row space-x-3">
+				<div className="grow">{message && <span className={discriptionStyles}>{message}</span>}</div>
+				{isShowCounter && (
+					<div className="shrink-0">
+						<InputCounter current={Number(value?.length)} limit={maxLength} />
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
+export default TextInputSelect

package/stories/organisms/TextInputSelect/index.tsx

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

package/stories/organisms/index.ts

@@ -3,6 +3,7 @@ import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown"
 import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "./DropdownComponent"
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
+import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect"
 
 export type {
 	IAnimatedLabelInputProps,
@@ -11,6 +12,7 @@ export type {
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
-	IFormInputWithAddonsProps
+	IFormInputWithAddonsProps,
+	ITextInputSelectProps
 }
-export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons }
+export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect }