@agility/plenum-ui 2.0.0-rc47 → 2.0.0-rc49

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -1,145 +1,145 @@
-import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
-import React, { useLayoutEffect, useRef, useState } from "react"
-import { default as cn } from "classnames"
-import InputField, { IInputFieldProps, AcceptedInputTypes } from "@/stories/molecules/inputs/InputField"
-
-export interface IFormInputWithAddonsProps extends Omit<IInputFieldProps, "type"> {
-	leadIcon?: IDynamicIconProps
-	leadLabel?: string
-	trailIcon?: IDynamicIconProps
-	trailLabel?: string
-	iconOutlined?: boolean
-	/** @param addonOffset An extra buffer zone in pixels between the trailing/leading icon or label and search input -- Default is 24 */
-	addonOffset?: number
-	topLabel?: string
-	labelClass?: string
-	containerClassName?: string
-	description?: string
-	leadIconClassNames?: string
-	customIconClass?: string
-	type: AcceptedInputTypes
-}
-
-const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
-	handleChange,
-	value,
-	name,
-	id,
-	placeholder,
-	className,
-	containerClassName,
-	leadIcon,
-	leadLabel,
-	trailIcon,
-	trailLabel,
-	topLabel,
-	labelClass,
-	isDisabled,
-	isReadonly,
-	isError,
-	addonOffset = 24,
-	iconOutlined = false,
-	description,
-	leadIconClassNames,
-	customIconClass,
-	type,
-	...rest
-}) => {
-	// #region logic to determine the width of the lead and or trailing labels in order to offset the input padding by the appropriate amount.
-	const leadLabelRef = useRef<HTMLLabelElement>(null)
-	const trailLabelRef = useRef<HTMLLabelElement>(null)
-	const [leadLabelWidth, setLeadLabelWidth] = useState<number>(0)
-	const [trailLabelWidth, setTrailLabelWidth] = useState<number>(0)
-	useLayoutEffect(() => {
-		setLeadLabelWidth(leadLabelRef.current?.clientWidth || 0)
-		setTrailLabelWidth(trailLabelRef.current?.clientWidth || 0)
-	}, [])
-	// #endregion
-
-	return (
-		<div className={cn("group flex flex-col", containerClassName)}>
-			{!leadLabel && !trailLabel && topLabel && (
-				<label htmlFor={id} className={cn("flex items-center text-sm font-medium text-gray-600", labelClass)}>
-					{topLabel}
-				</label>
-			)}
-			{description && <div className="mb-2 text-sm text-gray-500">{description}</div>}
-			<div className="relative flex-grow">
-				{(leadLabel || leadIcon) && (
-					<label
-						ref={leadLabelRef}
-						htmlFor={id}
-						className={cn(
-							"absolute top-0 bottom-0 left-3 flex items-center justify-center text-sm text-gray-500",
-							labelClass
-						)}
-					>
-						{leadIcon && (
-							<span>
-								<DynamicIcon
-									{...{
-										...leadIcon,
-										className: cn(
-											"h-5 w-5 text-gray-400",
-											leadIconClassNames,
-											customIconClass,
-											leadIcon.className
-										),
-										outline: iconOutlined
-									}}
-								/>
-							</span>
-						)}
-						{leadLabel && leadLabel}
-					</label>
-				)}
-				<InputField
-					{...{
-						...rest,
-						handleChange,
-						value,
-						id,
-						name,
-						type,
-						autoComplete: "off",
-						disabled: isDisabled,
-						placeholder: placeholder || "",
-						isReadonly,
-						isError,
-						className,
-						// add padding to accomodate inner labels and icons
-						style: {
-							paddingRight: `${trailLabelWidth + addonOffset}px`,
-							paddingLeft: `${leadLabelWidth + addonOffset}px`
-						}
-					}}
-				/>
-				{(trailLabel || trailIcon) && (
-					<label
-						ref={trailLabelRef}
-						htmlFor={id}
-						className={cn(
-							"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
-							labelClass
-						)}
-					>
-						{trailIcon && (
-							<span>
-								<DynamicIcon
-									{...{
-										...trailIcon,
-										className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
-										outline: iconOutlined
-									}}
-								/>
-							</span>
-						)}
-						{trailLabel && trailLabel}
-					</label>
-				)}
-			</div>
-		</div>
-	)
-}
-
-export default FormInputWithAddons
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
+import React, { useLayoutEffect, useRef, useState } from "react"
+import { default as cn } from "classnames"
+import InputField, { IInputFieldProps, AcceptedInputTypes } from "@/stories/molecules/inputs/InputField"
+
+export interface IFormInputWithAddonsProps extends Omit<IInputFieldProps, "type"> {
+	leadIcon?: IDynamicIconProps
+	leadLabel?: string
+	trailIcon?: IDynamicIconProps
+	trailLabel?: string
+	iconOutlined?: boolean
+	/** @param addonOffset An extra buffer zone in pixels between the trailing/leading icon or label and search input -- Default is 24 */
+	addonOffset?: number
+	topLabel?: string
+	labelClass?: string
+	containerClassName?: string
+	description?: string
+	leadIconClassNames?: string
+	customIconClass?: string
+	type: AcceptedInputTypes
+}
+
+const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
+	handleChange,
+	value,
+	name,
+	id,
+	placeholder,
+	className,
+	containerClassName,
+	leadIcon,
+	leadLabel,
+	trailIcon,
+	trailLabel,
+	topLabel,
+	labelClass,
+	isDisabled,
+	isReadonly,
+	isError,
+	addonOffset = 24,
+	iconOutlined = false,
+	description,
+	leadIconClassNames,
+	customIconClass,
+	type,
+	...rest
+}) => {
+	// #region logic to determine the width of the lead and or trailing labels in order to offset the input padding by the appropriate amount.
+	const leadLabelRef = useRef<HTMLLabelElement>(null)
+	const trailLabelRef = useRef<HTMLLabelElement>(null)
+	const [leadLabelWidth, setLeadLabelWidth] = useState<number>(0)
+	const [trailLabelWidth, setTrailLabelWidth] = useState<number>(0)
+	useLayoutEffect(() => {
+		setLeadLabelWidth(leadLabelRef.current?.clientWidth || 0)
+		setTrailLabelWidth(trailLabelRef.current?.clientWidth || 0)
+	}, [])
+	// #endregion
+
+	return (
+		<div className={cn("group flex flex-col", containerClassName)}>
+			{!leadLabel && !trailLabel && topLabel && (
+				<label htmlFor={id} className={cn("flex items-center text-sm font-medium text-gray-600", labelClass)}>
+					{topLabel}
+				</label>
+			)}
+			{description && <div className="mb-2 text-sm text-gray-500">{description}</div>}
+			<div className="relative flex-grow">
+				{(leadLabel || leadIcon) && (
+					<label
+						ref={leadLabelRef}
+						htmlFor={id}
+						className={cn(
+							"absolute top-0 bottom-0 left-3 flex items-center justify-center text-sm text-gray-500",
+							labelClass
+						)}
+					>
+						{leadIcon && (
+							<span>
+								<DynamicIcon
+									{...{
+										...leadIcon,
+										className: cn(
+											"h-5 w-5 text-gray-400",
+											leadIconClassNames,
+											customIconClass,
+											leadIcon.className
+										),
+										outline: iconOutlined
+									}}
+								/>
+							</span>
+						)}
+						{leadLabel && leadLabel}
+					</label>
+				)}
+				<InputField
+					{...{
+						...rest,
+						handleChange,
+						value,
+						id,
+						name,
+						type,
+						autoComplete: "off",
+						disabled: isDisabled,
+						placeholder: placeholder || "",
+						isReadonly,
+						isError,
+						className,
+						// add padding to accomodate inner labels and icons
+						style: {
+							paddingRight: `${trailLabelWidth + addonOffset}px`,
+							paddingLeft: `${leadLabelWidth + addonOffset}px`
+						}
+					}}
+				/>
+				{(trailLabel || trailIcon) && (
+					<label
+						ref={trailLabelRef}
+						htmlFor={id}
+						className={cn(
+							"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
+							labelClass
+						)}
+					>
+						{trailIcon && (
+							<span>
+								<DynamicIcon
+									{...{
+										...trailIcon,
+										className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
+										outline: iconOutlined
+									}}
+								/>
+							</span>
+						)}
+						{trailLabel && trailLabel}
+					</label>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default FormInputWithAddons

package/stories/organisms/FormInputWithAddons/index.tsx

@@ -1,3 +1,3 @@
-import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
-export type { IFormInputWithAddonsProps }
-export default FormInputWithAddons
+import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
+export type { IFormInputWithAddonsProps }
+export default FormInputWithAddons

package/stories/organisms/TextInputSelect/InputSelect.tsx

@@ -1,59 +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>
-	)
-}
+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

@@ -1,33 +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: "$"
-	}
-}
+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: "$"
+	}
+}