@agility/plenum-ui 2.0.0-rc2 → 2.0.0-rc4

package/dist/types/stories/atoms/buttons/Button/Alternative/Alternative.stories.d.ts

@@ -7,6 +7,7 @@ export declare const Alternative: Story;
 export declare const AlternativeTrailingIcon: Story;
 export declare const AlternativeLeadingIcon: Story;
 export declare const AlternativeExtraSmall: Story;
+export declare const AlternativeSimpleIconName: Story;
 export declare const AlternativeSmall: Story;
 export declare const AlternativeMedium: Story;
 export declare const AlternativeLarge: Story;

package/dist/types/stories/atoms/buttons/Button/Button.d.ts

@@ -1,15 +1,15 @@
 import { HTMLAttributeAnchorTarget } from "react";
-import { IDynamicIconProps } from "../../icons";
+import { UnifiedIconName, IDynamicIconProps } from "../../icons";
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger";
 export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
     /** Is the button a Primary CTA, alternative or danger button? */
-    actionType: BTNActionType;
+    actionType?: BTNActionType;
     /** How lg should the button be? - Defaults to 'base'. */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** The Button's text content. */
     label: string;
     /** The Icon to be displayed inside the button. */
-    icon?: IDynamicIconProps;
+    icon?: IDynamicIconProps | UnifiedIconName;
     /** Does the button width grow to fill it's container? */
     fullWidth?: boolean;
     /** Optionally render as anchor tag */
@@ -25,9 +25,11 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
     /** Is the associated content loading? */
     isLoading?: boolean;
     className?: string;
+    iconObj?: React.ReactNode;
+    ref?: React.LegacyRef<HTMLButtonElement>;
 }
 /**
  * Primary UI component for user interaction
  */
-declare const Button: ({ actionType, size, label, icon, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ actionType, size, label, icon, iconObj, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ref, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/types/stories/atoms/buttons/Button/Danger/Danger.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof Button>;
 export declare const Danger: Story;
 export declare const DangerTrailingIcon: Story;
 export declare const DangerLeadingIcon: Story;
+export declare const DangerSimpleIconName: Story;
 export declare const DangerExtraSmall: Story;
 export declare const DangerSmall: Story;
 export declare const DangerMedium: Story;

package/dist/types/stories/atoms/buttons/Button/Primary/Primary.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;
 export declare const PrimaryLeadingIcon: Story;
+export declare const PrimarySimpleIconName: Story;
 export declare const PrimaryTrailingIcon: Story;
 export declare const PrimaryExtraSmall: Story;
 export declare const PrimarySmall: Story;

package/dist/types/stories/atoms/buttons/Button/Secondary/Secondary.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof Button>;
 export declare const Secondary: Story;
 export declare const SecondaryTrailingIcon: Story;
 export declare const SecondaryLeadingIcon: Story;
+export declare const SecondarySimpleIconName: Story;
 export declare const SecondaryExtraSmall: Story;
 export declare const SecondarySmall: Story;
 export declare const SecondaryMedium: Story;

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

@@ -23,6 +23,8 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
     required?: boolean;
     /** use input psuedo classes for :valid and :invalid styles. on by default */
     clientSideCheck?: boolean;
+    /**ref for input */
+    ref?: React.Ref<HTMLInputElement>;
 }
 declare const InputField: React.FC<IInputFieldProps>;
 export default InputField;

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

@@ -1,14 +1,10 @@
 import React, { HTMLAttributes } from "react";
 import { Placement } from "@floating-ui/react";
 import { ClassNameWithAutocomplete } from "utils/types";
-import { IDynamicIconProps } from "@/stories/atoms/icons";
+import { IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons";
 export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
-    icon?: {
-        name: IDynamicIconProps["icon"];
-        className?: ClassNameWithAutocomplete;
-        pos?: "trailing" | "leading";
-        outline?: boolean;
-    };
+    icon?: IDynamicIconProps | UnifiedIconName;
+    iconPosition?: "trailing" | "leading";
     label: string;
     onClick?(): void;
     isEmphasized?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc2",
+	"version": "2.0.0-rc4",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -63,4 +63,4 @@
 		"tailwindcss": "^3.2.4",
 		"typescript": "^5.1.6"
 	}
-}
+}

package/stories/atoms/buttons/Button/Alternative/Alternative.stories.ts

@@ -41,6 +41,13 @@ export const AlternativeExtraSmall: Story = {
 		size: "sm"
 	}
 }
+export const AlternativeSimpleIconName: Story = {
+	args: {
+		...Alternative.args,
+		icon: defaultIcon.icon,
+		iconPosition: "leading"
+	}
+}
 export const AlternativeSmall: Story = {
 	args: {
 		...Alternative.args,

package/stories/atoms/buttons/Button/Button.tsx

@@ -8,13 +8,13 @@ import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
 export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	/** Is the button a Primary CTA, alternative or danger button? */
-	actionType: BTNActionType
+	actionType?: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */
 	size?: "xs" | "sm" | "md" | "lg" | "xl"
 	/** The Button's text content. */
 	label: string
 	/** The Icon to be displayed inside the button. */
-	icon?: IDynamicIconProps
+	icon?: IDynamicIconProps | UnifiedIconName
 	/** Does the button width grow to fill it's container? */
 	fullWidth?: boolean
 	/** Optionally render as anchor tag */
@@ -30,6 +30,8 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	/** Is the associated content loading? */
 	isLoading?: boolean
 	className?: string
+	iconObj?: React.ReactNode
+	ref?: React.LegacyRef<HTMLButtonElement>
 }
 /**
  * Primary UI component for user interaction
@@ -39,12 +41,14 @@ const Button = ({
 	size = "sm",
 	label,
 	icon,
+	iconObj,
 	CustomSVGIcon,
 	fullWidth = false,
 	iconPosition = "trailing",
 	asLink,
 	isLoading = false,
 	className,
+	ref,
 	...props
 }: IButtonProps) => {
 	const iconStyles = cn(
@@ -88,6 +92,7 @@ const Button = ({
 				},
 				className ? className : ""
 			)}
+			ref={ref}
 			{...props}
 		>
 			{CustomSVGIcon &&
@@ -96,11 +101,20 @@ const Button = ({
 				) : (
 					<i>{CustomSVGIcon}</i>
 				))}
+			{iconObj &&
+				iconPosition === "leading" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
 
 			{icon &&
 				iconPosition === "leading" &&
 				(isLoading ? (
 					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
 				) : (
 					<DynamicIcon {...{ ...icon, className: iconStyles }} />
 				))}
@@ -113,9 +127,18 @@ const Button = ({
 				iconPosition === "trailing" &&
 				(isLoading ? (
 					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
 				) : (
 					<DynamicIcon {...{ ...icon, className: iconStyles }} />
 				))}
+			{iconObj &&
+				iconPosition === "trailing" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
 		</button>
 	)
 }

package/stories/atoms/buttons/Button/Danger/Danger.stories.ts

@@ -38,6 +38,13 @@ export const DangerLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const DangerSimpleIconName: Story = {
+	args: {
+		...Danger.args,
+		icon: "TrashIcon",
+		iconPosition: "leading"
+	}
+}
 export const DangerExtraSmall: Story = {
 	args: {
 		...Danger.args,

package/stories/atoms/buttons/Button/Primary/Primary.stories.ts

@@ -39,6 +39,13 @@ export const PrimaryLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const PrimarySimpleIconName: Story = {
+	args: {
+		...Primary.args,
+		icon: "CheckIcon",
+		iconPosition: "leading"
+	}
+}
 export const PrimaryTrailingIcon: Story = {
 	args: {
 		...PrimaryLeadingIcon.args,

package/stories/atoms/buttons/Button/Secondary/Secondary.stories.ts

@@ -41,6 +41,13 @@ export const SecondaryLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const SecondarySimpleIconName: Story = {
+	args: {
+		...Secondary.args,
+		icon: "BellIcon",
+		iconPosition: "leading"
+	}
+}
 export const SecondaryExtraSmall: Story = {
 	args: {
 		...Secondary.args,

package/stories/molecules/inputs/InputCounter/InputCounter.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import InputCounter, { IInputCounterProps } from "./InputCounter"
+
+const meta: Meta<typeof InputCounter> = {
+	title: "Design System/molecules/inputs/InputCounter",
+	component: InputCounter,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof InputCounter>
+export const DefaultInputCounterStory: Story = {
+	args: {
+		limit: 100,
+		current: 0
+	} as IInputCounterProps
+}

package/stories/molecules/inputs/InputCounter/InputCounter.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from "react"
+
+export interface IInputCounterProps {
+	/** Counter limit */
+	limit: number | undefined
+	/** Counter current number */
+	current: number
+}
+
+/** Primary UI component for user interaction */
+const InputCounter: FC<IInputCounterProps> = ({ current = 0, limit }) => {
+	return (
+		<div className="mt-1 text-center text-sm text-gray-500 flex gap-1">
+			<div className="currentCount">{current}</div>
+			{(limit || 0) > 0 && (
+				<>
+					<div>/</div>
+					<div className="limitCount">{limit}</div>
+				</>
+			)}
+		</div>
+	)
+}
+export default InputCounter

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

@@ -0,0 +1,3 @@
+
+export { default } from './InputCounter';
+export * from './InputCounter';

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

@@ -37,7 +37,8 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
 	required?: boolean
 	/** use input psuedo classes for :valid and :invalid styles. on by default */
 	clientSideCheck?: boolean
-	/** use placeholder string */
+	/**ref for input */
+	ref?: React.Ref<HTMLInputElement>
 }
 
 const InputField: React.FC<IInputFieldProps> = ({
@@ -54,16 +55,20 @@ const InputField: React.FC<IInputFieldProps> = ({
 	clientSideCheck = true,
 	placeholder,
 	className,
+	ref,
 	...rest
 }) => {
+
 	return (
 		<input
 			{...{
 				type,
 				id,
+				ref,
 				name,
 				value,
 				onChange: (e) => {
+					console.log(e)
 					handleChange(e.target.value)
 				},
 				autoFocus: isFocused,

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

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

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

@@ -0,0 +1,162 @@
+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 */
+	onChange(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,
+		onChange,
+		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) => setValue(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

@@ -0,0 +1,3 @@
+
+export { default } from './TextInput';
+export * from './TextInput';