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

package/stories/molecules/index.ts

@@ -1,51 +1,51 @@
-import {
-	ICheckboxProps,
-	IComboboxProps,
-	IInputFieldProps,
-	IInputLabelProps,
-	INestedInputButtonProps,
-	IRadioProps,
-	ISelectProps,
-	ISimpleSelectOptions,
-	ITextareaProps,
-	IToggleSwitchProps,
-	AcceptedInputTypes,
-	Checkbox,
-	Combobox,
-	InputField,
-	InputLabel,
-	NestedInputButton,
-	Radio,
-	Select,
-	Textarea,
-	ToggleSwitch,
-	ITextInputProps,
-	TextInput
-} from "./inputs"
-
-export type {
-	ICheckboxProps,
-	IComboboxProps,
-	IInputFieldProps,
-	IInputLabelProps,
-	INestedInputButtonProps,
-	IRadioProps,
-	ISelectProps,
-	ISimpleSelectOptions,
-	ITextareaProps,
-	IToggleSwitchProps,
-	AcceptedInputTypes,
-	ITextInputProps
-}
-export {
-	Checkbox,
-	Combobox,
-	InputField,
-	InputLabel,
-	NestedInputButton,
-	Radio,
-	Select,
-	Textarea,
-	ToggleSwitch,
-	TextInput
-}
+import {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	ITextInputProps,
+	TextInput
+} from "./inputs"
+
+export type {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	ITextInputProps
+}
+export {
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	TextInput
+}

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

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

@@ -1,24 +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
+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

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

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

@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import InputField from "./InputField"
-
-const meta: Meta<typeof InputField> = {
-	title: "Design System/molecules/inputs/Input Field",
-	component: InputField,
-	tags: ["autodocs"],
-	argTypes: {},
-	parameters: {
-		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=114-1861&mode=dev&device-scaling=100%25&page-id=0%3A1"
-		}
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof InputField>
-
-export const DefaultInputField: Story = {
-	args: {
-		id: "input",
-		name: "input",
-		type: "text",
-		placeholder: "Base Input Field",
-		defaultValue: "",
-		isDisabled: false
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import InputField from "./InputField"
+
+const meta: Meta<typeof InputField> = {
+	title: "Design System/molecules/inputs/Input Field",
+	component: InputField,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=114-1861&mode=dev&device-scaling=100%25&page-id=0%3A1"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof InputField>
+
+export const DefaultInputField: Story = {
+	args: {
+		id: "input",
+		name: "input",
+		type: "text",
+		placeholder: "Base Input Field",
+		defaultValue: "",
+		isDisabled: false
+	}
+}

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

@@ -1,96 +1,96 @@
-import React, { forwardRef } from "react"
-import { default as cn } from "classnames"
-
-export type AcceptedInputTypes =
-	| "date"
-	| "datetime-local"
-	| "email"
-	| "month"
-	| "number"
-	| "password"
-	| "search"
-	| "submit"
-	| "tel"
-	| "text"
-	| "url"
-	| "currency"
-
-export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-	/** Callback on change */
-	handleChange: (value: string) => void
-	/** Input ID*/
-	id?: string
-	/** Input Name */
-	name?: string
-	/** Force the focus state on the input */
-	isFocused?: boolean
-	/** Error condition */
-	isError?: boolean
-	/** Disabled state */
-	isDisabled?: boolean
-	/** Readonly state */
-	isReadonly?: boolean
-	/** Input value */
-	value: string
-	/** Type of Text Input to Render eg. "text", "email" */
-	type: AcceptedInputTypes
-	/** If field is required */
-	required?: boolean
-	/** use input psuedo classes for :valid and :invalid styles. on by default */
-	clientSideCheck?: boolean
-	/** Placeholder text */
-	placeholder?: string
-	/**ref for input */
-}
-
-const InputField = (
-	{
-		type,
-		id,
-		name,
-		value,
-		isFocused,
-		isError,
-		isReadonly,
-		isDisabled,
-		handleChange,
-		required,
-		clientSideCheck = true,
-		className,
-		placeholder,
-		...rest
-	}: IInputFieldProps,
-	ref: React.Ref<HTMLInputElement>
-) => {
-	return (
-		<input
-			{...{
-				ref,
-				type,
-				id,
-				name,
-				value,
-				onChange: (e) => {
-					if (handleChange) handleChange(e.target.value)
-				},
-				autoFocus: isFocused,
-				readOnly: isReadonly,
-				disabled: isDisabled,
-				placeholder: placeholder || undefined,
-				required,
-				"aria-invalid": isError,
-				"aria-disabled": isDisabled,
-				className: cn(
-					"peer w-full rounded border border-gray-200  px-3 text-sm font-normal  leading-5 outline-offset-0 ring-offset-0 focus:border-purple-600 focus:ring-purple-600   ",
-					isError ? "!border-red-600 !text-red-600 focus:!ring-red-600" : "",
-					isReadonly ? "!border-gray-400 !text-gray-500 focus:!ring-gray-400" : "",
-					className
-				),
-				...rest
-			}}
-		/>
-	)
-}
-
-const _InputField = forwardRef<HTMLInputElement, IInputFieldProps>(InputField)
-export default _InputField
+import React, { forwardRef } from "react"
+import { default as cn } from "classnames"
+
+export type AcceptedInputTypes =
+	| "date"
+	| "datetime-local"
+	| "email"
+	| "month"
+	| "number"
+	| "password"
+	| "search"
+	| "submit"
+	| "tel"
+	| "text"
+	| "url"
+	| "currency"
+
+export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+	/** Callback on change */
+	handleChange: (value: string) => void
+	/** Input ID*/
+	id?: string
+	/** Input Name */
+	name?: string
+	/** Force the focus state on the input */
+	isFocused?: boolean
+	/** Error condition */
+	isError?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Readonly state */
+	isReadonly?: boolean
+	/** Input value */
+	value: string
+	/** Type of Text Input to Render eg. "text", "email" */
+	type: AcceptedInputTypes
+	/** If field is required */
+	required?: boolean
+	/** use input psuedo classes for :valid and :invalid styles. on by default */
+	clientSideCheck?: boolean
+	/** Placeholder text */
+	placeholder?: string
+	/**ref for input */
+}
+
+const InputField = (
+	{
+		type,
+		id,
+		name,
+		value,
+		isFocused,
+		isError,
+		isReadonly,
+		isDisabled,
+		handleChange,
+		required,
+		clientSideCheck = true,
+		className,
+		placeholder,
+		...rest
+	}: IInputFieldProps,
+	ref: React.Ref<HTMLInputElement>
+) => {
+	return (
+		<input
+			{...{
+				ref,
+				type,
+				id,
+				name,
+				value,
+				onChange: (e) => {
+					if (handleChange) handleChange(e.target.value)
+				},
+				autoFocus: isFocused,
+				readOnly: isReadonly,
+				disabled: isDisabled,
+				placeholder: placeholder || undefined,
+				required,
+				"aria-invalid": isError,
+				"aria-disabled": isDisabled,
+				className: cn(
+					"peer w-full rounded border border-gray-200  px-3 text-sm font-normal  leading-5 outline-offset-0 ring-offset-0 focus:border-purple-600 focus:ring-purple-600   ",
+					isError ? "!border-red-600 !text-red-600 focus:!ring-red-600" : "",
+					isReadonly ? "!border-gray-400 !text-gray-500 focus:!ring-gray-400" : "",
+					className
+				),
+				...rest
+			}}
+		/>
+	)
+}
+
+const _InputField = forwardRef<HTMLInputElement, IInputFieldProps>(InputField)
+export default _InputField

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

@@ -1,3 +1,3 @@
-import InputField, { AcceptedInputTypes, IInputFieldProps } from "./InputField"
-export type { AcceptedInputTypes, IInputFieldProps }
-export default InputField
+import InputField, { AcceptedInputTypes, IInputFieldProps } from "./InputField"
+export type { AcceptedInputTypes, IInputFieldProps }
+export default InputField

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

@@ -1,19 +1,19 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import InputLabel from "./InputLabel"
-
-const meta: Meta<typeof InputLabel> = {
-	title: "Design System/molecules/inputs/Input Label",
-	component: InputLabel,
-	tags: ["autodocs"],
-	argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof InputLabel>
-
-export const Default: Story = {
-	args: {
-		label: "Label",
-		id: "input-label"
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import InputLabel from "./InputLabel"
+
+const meta: Meta<typeof InputLabel> = {
+	title: "Design System/molecules/inputs/Input Label",
+	component: InputLabel,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof InputLabel>
+
+export const Default: Story = {
+	args: {
+		label: "Label",
+		id: "input-label"
+	}
+}

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

@@ -1,45 +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
+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

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