@agility/plenum-ui 2.0.0-rc3 → 2.0.0-rc5

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

@@ -0,0 +1,10 @@
+import { FC } from "react";
+export interface IInputCounterProps {
+    /** Counter limit */
+    limit: number | undefined;
+    /** Counter current number */
+    current: number;
+}
+/** Primary UI component for user interaction */
+declare const InputCounter: FC<IInputCounterProps>;
+export default InputCounter;

package/dist/types/stories/molecules/inputs/InputCounter/index.d.ts

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

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { AcceptedInputTypes } from "../InputField";
+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;
+}
+declare const _TextInput: React.ForwardRefExoticComponent<ITextInputProps & React.RefAttributes<HTMLInputElement>>;
+export default _TextInput;

package/dist/types/stories/molecules/inputs/TextInput/index.d.ts

@@ -0,0 +1,4 @@
+import TextInput from "./TextInput";
+import { ITextInputProps } from "./TextInput";
+export type { ITextInputProps };
+export default TextInput;

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

@@ -6,6 +6,7 @@ import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
 import Radio, { IRadioProps } from "./radio";
 import Select, { ISelectProps } from "./select";
 import TextAreaField, { ITextAreaFieldProps } from "./textArea";
+import TextInput, { ITextInputProps } from "./TextInput";
 import ToggleSwitch, { IToggleSwitchProps } from "./toggleSwitch";
-export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes };
-export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch };
+export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, ITextInputProps, IToggleSwitchProps, AcceptedInputTypes };
+export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch, TextInput };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc3",
+	"version": "2.0.0-rc5",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -17,7 +17,7 @@
 		"storybook:tw": "tailwindcss -o ./lib/tailwind.css -w ",
 		"storybook": "npm-run-all -p \"storybook:*\" ",
 		"dev": "yarn storybook",
-		"build:tw": "tailwindcss -o ./lib/tailwind.css",
+		"build:tw": "tailwindcss -o ./dist/lib/tailwind.css",
 		"build:tsc": "yarn node build.js",
 		"prepare": "yarn build",
 		"build": "npm run clean && npm-run-all -s \"build:*\" ",

package/stories/Introduction.mdx

@@ -143,7 +143,7 @@ In your app entry point (i.e. \`_app.tsx\`), import the \`globals.css\` file fro
 
 ```jsx
 import "<RELATIVE_PATH>/globals.css";
-import "@agility/plenum-ui/lib/tailwind.css";
+import "@agility/plenum-ui/dist/lib/tailwind.css";
 ```
 
 Make sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.

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,5 @@
+import TextInput from "./TextInput"
+import { ITextInputProps } from "./TextInput"
+
+export type { ITextInputProps }
+export default TextInput

package/stories/molecules/inputs/index.ts

@@ -6,6 +6,7 @@ import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
 import Radio, { IRadioProps } from "./radio"
 import Select, { ISelectProps } from "./select"
 import TextAreaField, { ITextAreaFieldProps } from "./textArea"
+import TextInput, { ITextInputProps } from "./TextInput"
 import ToggleSwitch, { IToggleSwitchProps } from "./toggleSwitch"
 
 export type {
@@ -17,8 +18,20 @@ export type {
 	IRadioProps,
 	ISelectProps,
 	ITextAreaFieldProps,
+	ITextInputProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes
 }
 
-export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch }
+export {
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	TextAreaField,
+	ToggleSwitch,
+	TextInput
+}