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

package/stories/molecules/inputs/radio/Radio.tsx

@@ -1,92 +1,92 @@
-import InputLabel from "@/stories/molecules/inputs/InputLabel"
-import { useId } from "@/utils/useId"
-import React from "react"
-import { default as cn } from "classnames"
-export interface IRadioProps {
-	/** group name */
-	name?: string
-	/** Radio label */
-	label: string
-	/** Radio ID */
-	id?: string
-	/** Disabled state */
-	isDisabled?: boolean
-	/** Check state */
-	isChecked?: boolean
-	/** If field is required */
-	isRequired?: boolean
-	/** Error state */
-	isError?: boolean
-	/** Message or description */
-	message?: string
-	/** value */
-	value?: string
-	/** Callback on input change */
-	onChange?(value: string, isChecked: boolean): void
-	/** Callback on click */
-	onClick?(value: string, isChecked: boolean): void
-}
-const Radio: React.FC<IRadioProps> = ({
-	label,
-	id,
-	name,
-	isDisabled = false,
-	isChecked = false,
-	isRequired = false,
-	isError = false,
-	message,
-	onChange,
-	onClick,
-	value
-}) => {
-	const uniqueID = useId()
-	if (!id) id = `input-${uniqueID}`
-	if (!name) name = id
-
-	const checboxStyles = cn("focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300", {
-		"border-red-500 shadow-none": isError
-	})
-	const wrapperStyles = cn("relative flex items-start", { "opacity-50": isDisabled })
-	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const targetValue = e.currentTarget.value
-		const targetChecked = e.currentTarget.checked
-		typeof onChange === "function" && onChange(targetValue, targetChecked)
-	}
-	const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
-		const targetValue = e.currentTarget.value
-		const targetChecked = e.currentTarget.checked
-		typeof onClick === "function" && onClick(targetValue, targetChecked)
-	}
-	return (
-		<div className={wrapperStyles}>
-			<div className="flex items-center h-5">
-				<input
-					id={id}
-					aria-describedby={`${id}-description`}
-					name={name}
-					type="radio"
-					value={value}
-					className={checboxStyles}
-					disabled={isDisabled}
-					defaultChecked={isChecked}
-					onChange={(e) => {
-						handleChange(e)
-					}}
-					onClick={(e) => {
-						handleClick(e)
-					}}
-				/>
-			</div>
-			<div className="ml-3 text-sm">
-				<InputLabel label={label} isRequired={isRequired} id={id} />
-				{message && (
-					<p id={`${id}-description`} className="text-gray-500">
-						{message}
-					</p>
-				)}
-			</div>
-		</div>
-	)
-}
-
-export default Radio
+import InputLabel from "@/stories/molecules/inputs/InputLabel"
+import { useId } from "@/utils/useId"
+import React from "react"
+import { default as cn } from "classnames"
+export interface IRadioProps {
+	/** group name */
+	name?: string
+	/** Radio label */
+	label: string
+	/** Radio ID */
+	id?: string
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Check state */
+	isChecked?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Error state */
+	isError?: boolean
+	/** Message or description */
+	message?: string
+	/** value */
+	value?: string
+	/** Callback on input change */
+	onChange?(value: string, isChecked: boolean): void
+	/** Callback on click */
+	onClick?(value: string, isChecked: boolean): void
+}
+const Radio: React.FC<IRadioProps> = ({
+	label,
+	id,
+	name,
+	isDisabled = false,
+	isChecked = false,
+	isRequired = false,
+	isError = false,
+	message,
+	onChange,
+	onClick,
+	value
+}) => {
+	const uniqueID = useId()
+	if (!id) id = `input-${uniqueID}`
+	if (!name) name = id
+
+	const checboxStyles = cn("focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300", {
+		"border-red-500 shadow-none": isError
+	})
+	const wrapperStyles = cn("relative flex items-start", { "opacity-50": isDisabled })
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const targetValue = e.currentTarget.value
+		const targetChecked = e.currentTarget.checked
+		typeof onChange === "function" && onChange(targetValue, targetChecked)
+	}
+	const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
+		const targetValue = e.currentTarget.value
+		const targetChecked = e.currentTarget.checked
+		typeof onClick === "function" && onClick(targetValue, targetChecked)
+	}
+	return (
+		<div className={wrapperStyles}>
+			<div className="flex items-center h-5">
+				<input
+					id={id}
+					aria-describedby={`${id}-description`}
+					name={name}
+					type="radio"
+					value={value}
+					className={checboxStyles}
+					disabled={isDisabled}
+					defaultChecked={isChecked}
+					onChange={(e) => {
+						handleChange(e)
+					}}
+					onClick={(e) => {
+						handleClick(e)
+					}}
+				/>
+			</div>
+			<div className="ml-3 text-sm">
+				<InputLabel label={label} isRequired={isRequired} id={id} />
+				{message && (
+					<p id={`${id}-description`} className="text-gray-500">
+						{message}
+					</p>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default Radio

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

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

package/stories/molecules/inputs/select/Select.stories.ts

@@ -1,23 +1,23 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import Select from "./Select"
-const meta: Meta<typeof Select> = {
-	title: "Design System/Molecules/Inputs/Select",
-	component: Select,
-	tags: ["autodocs"]
-}
-type Story = StoryObj<typeof Select>
-export const DefaultSelect: Story = {
-	args: {
-		label: "Label",
-		id: "select",
-		name: "select",
-		options: [
-			{ label: "Canada", value: "value1" },
-			{ label: "USA", value: "value2" }
-		],
-		isDisabled: false,
-		isError: false,
-		isRequired: false
-	}
-}
-export default meta
+import type { Meta, StoryObj } from "@storybook/react"
+import Select from "./Select"
+const meta: Meta<typeof Select> = {
+	title: "Design System/Molecules/Inputs/Select",
+	component: Select,
+	tags: ["autodocs"]
+}
+type Story = StoryObj<typeof Select>
+export const DefaultSelect: Story = {
+	args: {
+		label: "Label",
+		id: "select",
+		name: "select",
+		options: [
+			{ label: "Canada", value: "value1" },
+			{ label: "USA", value: "value2" }
+		],
+		isDisabled: false,
+		isError: false,
+		isRequired: false
+	}
+}
+export default meta

package/stories/molecules/inputs/select/Select.tsx

@@ -1,100 +1,108 @@
-import React, { useEffect, useState } from "react"
-import InputLabel from "@/stories/molecules/inputs/InputLabel"
-import { useId } from "@/utils/useId"
-import { default as cn } from "classnames"
-
-export interface ISimpleSelectOptions {
-	label: string
-	value: string
-}
-export interface ISelectProps {
-	/** Label */
-	label?: string
-	/** Select ID prop */
-	id?: string
-	/** Select name prop */
-	name?: string
-	/** List of options to display in the select menu */
-	options: ISimpleSelectOptions[]
-	/** Select name prop */
-	onChange?(value: string): void
-	/** Select disabled state */
-	isDisabled?: boolean
-	/** Select error state */
-	isError?: boolean
-	/** Select required state */
-	isRequired?: boolean
-
-	value?: string
-
-	className?: string
-}
-const Select: React.FC<ISelectProps> = ({
-	label,
-	id,
-	name,
-	options,
-	onChange,
-	isDisabled,
-	isError,
-	isRequired,
-	value,
-	className
-}) => {
-	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value)
-	const uniqueID = useId()
-	if (!id) id = `select-${uniqueID}`
-	if (!name) name = id
-
-	useEffect(() => {
-		if (value !== undefined && value !== null) {
-			setSelectedOption(value)
-		}
-	}, [value])
-
-	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-		const targetValue = e.target.value
-		typeof onChange == "function" && onChange(targetValue)
-		setSelectedOption(targetValue)
-	}
-	const wrapperStyle = cn({ "opacity-50": isDisabled })
-	return (
-		<div className={wrapperStyle}>
-			{label && (
-				<InputLabel
-					isPlaceholder
-					isActive
-					label={label}
-					isRequired={isRequired}
-					id={id}
-					isError={isError}
-					isDisabled={isDisabled}
-				/>
-			)}
-			<select
-				id={id}
-				name={name}
-				className={cn(
-					"block w-full border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none",
-					"rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
-					{ "border-red-500": isError },
-					{ "border-gray-300": !isError },
-					className
-				)}
-				onChange={handleChange}
-				disabled={isDisabled}
-				value={selectedOption}
-			>
-				{options.map(({ value, label }) => {
-					return (
-						<option key={value} value={value}>
-							{label}
-						</option>
-					)
-				})}
-			</select>
-		</div>
-	)
-}
-
-export default Select
+import React, { useEffect, useState } from "react"
+import InputLabel from "@/stories/molecules/inputs/InputLabel"
+import { useId } from "@/utils/useId"
+import { default as cn } from "classnames"
+
+export interface ISimpleSelectOptions {
+	label: string
+	value: string
+}
+export interface ISelectProps {
+	/** Label */
+	label?: string
+	/** Select ID prop */
+	id?: string
+	/** Select name prop */
+	name?: string
+	/** List of options to display in the select menu */
+	options: ISimpleSelectOptions[]
+	/** Select name prop */
+	onChange?(value: string): void
+	/** Select disabled state */
+	isDisabled?: boolean
+	/** Select error state */
+	isError?: boolean
+	/** Select required state */
+	isRequired?: boolean
+
+	value?: string
+
+	className?: string
+
+	onFocus?: () => void
+
+	onBlur?: () => void
+}
+const Select: React.FC<ISelectProps> = ({
+	label,
+	id,
+	name,
+	options,
+	onChange,
+	isDisabled,
+	isError,
+	isRequired,
+	value,
+	className,
+	onFocus,
+	onBlur
+}) => {
+	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value)
+	const uniqueID = useId()
+	if (!id) id = `select-${uniqueID}`
+	if (!name) name = id
+
+	useEffect(() => {
+		if (value !== undefined && value !== null) {
+			setSelectedOption(value)
+		}
+	}, [value])
+
+	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+		const targetValue = e.target.value
+		typeof onChange == "function" && onChange(targetValue)
+		setSelectedOption(targetValue)
+	}
+	const wrapperStyle = cn({ "opacity-50": isDisabled })
+	return (
+		<div className={wrapperStyle}>
+			{label && (
+				<InputLabel
+					isPlaceholder
+					isActive
+					label={label}
+					isRequired={isRequired}
+					id={id}
+					isError={isError}
+					isDisabled={isDisabled}
+				/>
+			)}
+			<select
+				id={id}
+				name={name}
+				className={cn(
+					"block w-full border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none",
+					"rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+					{ "border-red-500": isError },
+					{ "border-gray-300": !isError },
+					className
+				)}
+				onChange={handleChange}
+				disabled={isDisabled}
+				value={selectedOption}
+				onFocus={onFocus}
+				onBlur={onBlur}
+			>
+				{options.map(({ value, label }) => {
+					return (
+						<option key={value} value={value}>
+							{label}
+						</option>
+					)
+				})}
+			</select>
+		</div>
+	)
+}
+
+export default Select

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

@@ -1,3 +1,3 @@
-import Select, { ISelectProps, ISimpleSelectOptions } from "./Select"
-export type { ISelectProps, ISimpleSelectOptions }
-export default Select
+import Select, { ISelectProps, ISimpleSelectOptions } from "./Select"
+export type { ISelectProps, ISimpleSelectOptions }
+export default Select

package/stories/molecules/inputs/textArea/TextArea.stories.ts

@@ -1,22 +1,22 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import Textarea from "./TextArea"
-const meta: Meta<typeof Textarea> = {
-	title: "Design System/Molecules/Inputs/TextArea",
-	component: Textarea,
-	tags: ["autodocs"]
-}
-const dummyText: string = `Checkmate... Life finds a way. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
-
-I was part of something special. Just my luck, no ice. You really think you can fly that thing? Must go faster... go, go, go, go, go! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.`
-type Story = StoryObj<typeof Textarea>
-export const DefaultTextarea: Story = {
-	args: {
-		id: "appDescription",
-		name: "description",
-		rows: 12,
-		cols: 18,
-		label: { display: "Description" },
-		placeholder: dummyText
-	}
-}
-export default meta
+import type { Meta, StoryObj } from "@storybook/react"
+import Textarea from "./TextArea"
+const meta: Meta<typeof Textarea> = {
+	title: "Design System/Molecules/Inputs/TextArea",
+	component: Textarea,
+	tags: ["autodocs"]
+}
+const dummyText: string = `Checkmate... Life finds a way. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
+
+I was part of something special. Just my luck, no ice. You really think you can fly that thing? Must go faster... go, go, go, go, go! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.`
+type Story = StoryObj<typeof Textarea>
+export const DefaultTextarea: Story = {
+	args: {
+		id: "appDescription",
+		name: "description",
+		rows: 12,
+		cols: 18,
+		label: { display: "Description" },
+		placeholder: dummyText
+	}
+}
+export default meta