@agility/plenum-ui 1.3.50 → 2.0.0-rc10

package/stories/molecules/inputs/InputLabel/InputLabel.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react"
+import { default as cn } from "classnames"
+
+export interface IInputLabelProps {
+	/** Prop comment */
+	isPlaceholder?: boolean
+	id: string
+	isRequired?: boolean
+	isDisabled?: boolean
+	isError?: boolean
+	isActive?: boolean
+	isFocused?: boolean
+	label?: string
+}
+
+/** Comment */
+const InputLabel: FC<IInputLabelProps> = ({
+	isPlaceholder = false,
+	id,
+	isRequired,
+	isDisabled,
+	isActive,
+	isError,
+	label
+}: IInputLabelProps) => {
+	const labelStyles = cn(
+		"z-[2]",
+		{ "inline-block font-medium transition-all text-sm text-gray-700 mb-1": !isPlaceholder },
+		{ "inline-block font-medium ml-2 relative transition-all": isPlaceholder },
+		{ "text-sm text-gray-400 px-2 top-8": isPlaceholder && !isActive },
+		{ "text-xs text-gray-700 px-1 top-[10px] bg-white": isPlaceholder && isActive },
+		{ "text-xs text-red-500 px-1 top-[10px] bg-white": isPlaceholder && isError },
+		{ "text-red-500 bg-white": !isPlaceholder && isError },
+		{ "text-gray-700/[.5]": isDisabled }
+	)
+	if (!label) return null
+	return (
+		<label htmlFor={id} className={labelStyles}>
+			{label}
+			{isRequired && <span className="text-red-500"> *</span>}
+		</label>
+	)
+}
+
+export default InputLabel

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

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

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
+
+const meta: Meta<typeof NestedInputButton> = {
+	title: "Design System/molecules/inputs/Nested Input Button",
+	component: NestedInputButton,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=114-2290&mode=dev&device-scaling=100%25&page-id=0%3A1"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof NestedInputButton>
+
+export const RightAligned: Story = {
+	args: {
+		icon: {
+			icon: "IconSearch",
+			className: "h-5 w-5 text-gray-400"
+		},
+		ctaLabel: "Search",
+		align: "right",
+		isClear: false,
+		onClickHandler: () => window.alert("Clicked"),
+		buttonProps: {
+			type: "button"
+		}
+	}
+}
+export const LeftAligned: Story = {
+	args: {
+		...RightAligned.args,
+		align: "left"
+	}
+}
+export const IsClear: Story = {
+	args: {
+		...RightAligned.args,
+		isClear: true
+	}
+}
+export const NoIcon: Story = {
+	args: {
+		...RightAligned.args,
+		icon: undefined
+	}
+}

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx

@@ -0,0 +1,64 @@
+import React from "react"
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
+import { default as cn } from "classnames"
+export interface INestedInputButtonProps {
+	/** Icon to be included*/
+	icon?: IDynamicIconProps
+	/** CTA label */
+	ctaLabel?: string
+	/** Alignment */
+	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> = ({
+	icon,
+	ctaLabel,
+	align = "right",
+	isClear = false,
+	onClickHandler,
+	buttonProps
+}) => {
+	const handleClick = () => {
+		onClickHandler && onClickHandler()
+	}
+	const buttonStyle = cn(
+		"relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
+		{
+			"rounded-r text-gray-500 -ml-px": align === "right"
+		},
+		{
+			"rounded-l text-gray-500 -mr-px": align === "left"
+		},
+		{
+			"cursor-default": !onClickHandler
+		},
+		{
+			"hover:bg-gray-100": onClickHandler && !isClear
+		},
+		{
+			"!border-l-white": isClear && align === "right"
+		},
+		{
+			"!border-r-white": isClear && align === "left"
+		},
+		{
+			"bg-gray-50": !isClear
+		},
+		{
+			"bg-white": isClear
+		}
+	)
+	return (
+		<button {...{ ...buttonProps, className: buttonStyle, onClick: handleClick }}>
+			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400" }} />}
+			{ctaLabel && <span>{ctaLabel}</span>}
+		</button>
+	)
+}
+
+export default NestedInputButton

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

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

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/checkbox/Checkbox.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Checkbox from "./Checkbox"
+const meta: Meta<typeof Checkbox> = {
+	title: "Design System/Molecules/Inputs/Checkbox",
+	component: Checkbox,
+	tags: []
+}
+type Story = StoryObj<typeof Checkbox>
+export const DefaultCheckbox: Story = {
+	args: {
+		label: "Checkbox Label",
+		id: "checkboxId",
+		isDisabled: false,
+		isChecked: false,
+		isRequired: false,
+		isError: false,
+		message: "",
+		onChange: (value: string) => {
+			console.log(`onChange ${value}`)
+		}
+	}
+}
+export default meta

package/stories/molecules/inputs/checkbox/Checkbox.tsx

@@ -0,0 +1,99 @@
+import React, { FC } from "react"
+import { default as cn } from "classnames"
+import InputLabel from "@/stories/molecules/inputs/InputLabel"
+import { useId } from "@/utils/useId"
+
+export interface ICheckboxProps {
+	/** Checkbox label */
+	label: string
+	/** Checkbox ID */
+	id?: string
+	/** Disabled state */
+	isDisabled?: boolean
+	/** value */
+	value?: string
+	/** Check state */
+	isChecked?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Error state */
+	isError?: boolean
+	/** Message or description */
+	message?: string
+	/** Callback on input change */
+	onChange?(value: string, isChecked: boolean): void
+	/** Has a border around the checkbox and label */
+	hasBorder?: boolean
+	/** any arbitrary classNames to add to the wrapper */
+	className?: string
+}
+
+/** Comment */
+const Checkbox: FC<ICheckboxProps> = ({
+	label,
+	id,
+	isDisabled,
+	isChecked,
+	isRequired,
+	isError,
+	message,
+	value,
+	onChange,
+	hasBorder,
+	className,
+	...props
+}: ICheckboxProps) => {
+	const uniqueID = useId()
+	if (!id) id = `cb-${uniqueID}`
+
+	const checkboxStyles = cn(
+		"rounded-sm border-gray-300 text-sm font-normal leading-5 text-purple-600 focus:ring-purple-600",
+		{ "border-red-500 shadow-none": isError }
+	)
+	const wrapperStyles = cn(
+		"relative flex items-center min-h-[38px]",
+		{ "opacity-50": isDisabled },
+		{ "rounded-sm ring-1 px-3 ring-gray-300": hasBorder },
+		{ "py-3": hasBorder && message },
+		className
+	)
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		console.log(e)
+		const targetValue = e.target.value
+		const targetChecked = e.target.checked
+		typeof onChange === "function" && onChange(targetValue, targetChecked)
+	}
+
+	return (
+		<div className={wrapperStyles}>
+			<div className="flex items-center">
+				<input
+					id={id}
+					aria-describedby={`${id}-description`}
+					name={id}
+					value={value}
+					type="checkbox"
+					className={checkboxStyles}
+					disabled={isDisabled}
+					checked={isChecked}
+					onChange={(e) => {
+						handleChange(e)
+					}}
+					{...props}
+				/>
+			</div>
+			<div className="ml-3 text-sm ">
+				<label htmlFor={id} className="font-medium text-gray-700">
+					<InputLabel label={label} isRequired={isRequired} id={id} />
+				</label>
+				{message && (
+					<p id={`${id}-description`} className="text-gray-500">
+						{message}
+					</p>
+				)}
+			</div>
+		</div>
+	)
+}
+export default Checkbox

package/stories/molecules/inputs/checkbox/index.ts

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

package/stories/molecules/inputs/combobox/ComboBox.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Combobox from "./ComboBox"
+
+const meta: Meta<typeof Combobox> = {
+	title: "Design System/Molecules/Inputs/Combobox",
+	component: Combobox,
+	tags: ["autodocs"]
+}
+type Story = StoryObj<typeof Combobox>
+interface ComboItem {
+	[value: string]: string
+}
+
+const comboboxlist: ComboItem[] = [
+	{ value: "Leslie Alexander" },
+	{ value: "Alishba Molloy" },
+	{ value: "Raya Oconnell" },
+	{ value: "Danica Sweet" },
+	{ value: "Ralph Brook" },
+	{ value: "Tamar Tapia" },
+	{ value: "Cara Avila" },
+	{ value: "Jayson Cisneros" },
+	{ value: "Tracey Reader" },
+	{ value: "Rahima Fritz" },
+	{ value: "Vera Pritchard" }
+]
+export const DefaultComboBox: Story = {
+	args: {
+		label: "",
+		items: comboboxlist,
+		displayProperty: "value",
+		keyProperty: "value",
+		placeholder: "Select",
+		id: "combobox",
+		isRequired: false,
+		isError: false,
+		isDisabled: false,
+		nullable: false
+	}
+}
+export default meta