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

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

@@ -1,158 +1,158 @@
-import React, { forwardRef, useEffect, useId, useState } from "react"
-import { default as cn } from "classnames"
-import InputLabel from "../InputLabel"
-import InputCounter from "../InputCounter"
-
-interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
-	display: string
-	htmlFor?: string
-}
-
-export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
-	/** Input ID */
-	id?: string
-	/** Input Name */
-	name?: string
-	/** Label for the input */
-	label?: ILabelProps
-	/** Error state */
-	isError?: boolean
-	/** If field is required */
-	isRequired?: boolean
-	/** Disabled state */
-	isDisabled?: boolean
-	/** Set default value */
-	defaultValue?: string
-
-	value?: 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
-	/** Number of rows */
-	rows?: number
-	/** Number of cols */
-	cols?: number
-	placeholder?: string
-	className?: string
-	ref?: React.LegacyRef<HTMLTextAreaElement>
-}
-
-const Textarea: React.FC<ITextareaProps> = ({
-	id,
-	name,
-	label,
-	isError,
-	isRequired,
-	isDisabled,
-	defaultValue,
-	message,
-	isShowCounter,
-	maxLength,
-	rows = 12,
-	cols = 48,
-	onChange,
-	value,
-	placeholder,
-	className,
-	ref,
-	...rest
-}) => {
-	const uniqueID = useId()
-
-	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
-
-	if (!id) id = `ta-${uniqueID}`
-
-	if (!label) {
-		return (
-			<textarea
-				ref={ref}
-				maxLength={maxLength}
-				onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-					const targetValue = e.target.value
-					if (onChange) {
-						onChange(targetValue)
-					}
-				}}
-				rows={rows}
-				name={name}
-				id={id}
-				cols={cols}
-				className={cn(
-					"peer block w-full rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
-					{ "border-gray-300 ": !isError },
-					{
-						"border-red-500 outline-red-500 focus:ring-red-500": isError
-					},
-					className
-				)}
-				disabled={isDisabled}
-				defaultValue={defaultValue}
-				value={value}
-				placeholder={placeholder}
-				{...rest}
-			/>
-		)
-	}
-
-	//with label
-	return (
-		<div>
-			<InputLabel
-				isPlaceholder
-				isActive
-				label={label.display}
-				isRequired={isRequired}
-				id={id}
-				isError={isError}
-				isDisabled={isDisabled}
-			/>
-
-			<div>
-				<textarea
-					ref={ref}
-					maxLength={maxLength}
-					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-						const targetValue = e.target.value
-						if (onChange) {
-							onChange(targetValue)
-						}
-					}}
-					rows={rows}
-					name={name}
-					id={id}
-					cols={cols}
-					className={cn(
-						"block w-full rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
-						{ "border-gray-300 ": !isError },
-						{
-							"border-red-500 outline-red-500 focus:ring-red-500": isError
-						},
-						className
-					)}
-					disabled={isDisabled}
-					defaultValue={defaultValue}
-					value={value}
-					placeholder={placeholder}
-					{...rest}
-				/>
-			</div>
-			<div className="flex flex-row space-x-3">
-				<div className="grow">{message && <span className={discriptionStyles}>{message}</span>}</div>
-				{isShowCounter && (
-					<div className="shrink-0">
-						<InputCounter current={Number(value?.length)} limit={maxLength} />
-					</div>
-				)}
-			</div>
-		</div>
-	)
-}
-
-export default Textarea
+import React, { forwardRef, useEffect, useId, useState } from "react"
+import { default as cn } from "classnames"
+import InputLabel from "../InputLabel"
+import InputCounter from "../InputCounter"
+
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+	display: string
+	htmlFor?: string
+}
+
+export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+	/** Input ID */
+	id?: string
+	/** Input Name */
+	name?: string
+	/** Label for the input */
+	label?: ILabelProps
+	/** Error state */
+	isError?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Set default value */
+	defaultValue?: string
+
+	value?: 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
+	/** Number of rows */
+	rows?: number
+	/** Number of cols */
+	cols?: number
+	placeholder?: string
+	className?: string
+	ref?: React.LegacyRef<HTMLTextAreaElement>
+}
+
+const Textarea: React.FC<ITextareaProps> = ({
+	id,
+	name,
+	label,
+	isError,
+	isRequired,
+	isDisabled,
+	defaultValue,
+	message,
+	isShowCounter,
+	maxLength,
+	rows = 12,
+	cols = 48,
+	onChange,
+	value,
+	placeholder,
+	className,
+	ref,
+	...rest
+}) => {
+	const uniqueID = useId()
+
+	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
+
+	if (!id) id = `ta-${uniqueID}`
+
+	if (!label) {
+		return (
+			<textarea
+				ref={ref}
+				maxLength={maxLength}
+				onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+					const targetValue = e.target.value
+					if (onChange) {
+						onChange(targetValue)
+					}
+				}}
+				rows={rows}
+				name={name}
+				id={id}
+				cols={cols}
+				className={cn(
+					"peer block w-full rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+					{ "border-gray-300 ": !isError },
+					{
+						"border-red-500 outline-red-500 focus:ring-red-500": isError
+					},
+					className
+				)}
+				disabled={isDisabled}
+				defaultValue={defaultValue}
+				value={value}
+				placeholder={placeholder}
+				{...rest}
+			/>
+		)
+	}
+
+	//with label
+	return (
+		<div>
+			<InputLabel
+				isPlaceholder
+				isActive
+				label={label.display}
+				isRequired={isRequired}
+				id={id}
+				isError={isError}
+				isDisabled={isDisabled}
+			/>
+
+			<div>
+				<textarea
+					ref={ref}
+					maxLength={maxLength}
+					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+						const targetValue = e.target.value
+						if (onChange) {
+							onChange(targetValue)
+						}
+					}}
+					rows={rows}
+					name={name}
+					id={id}
+					cols={cols}
+					className={cn(
+						"block w-full rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+						{ "border-gray-300 ": !isError },
+						{
+							"border-red-500 outline-red-500 focus:ring-red-500": isError
+						},
+						className
+					)}
+					disabled={isDisabled}
+					defaultValue={defaultValue}
+					value={value}
+					placeholder={placeholder}
+					{...rest}
+				/>
+			</div>
+			<div className="flex flex-row space-x-3">
+				<div className="grow">{message && <span className={discriptionStyles}>{message}</span>}</div>
+				{isShowCounter && (
+					<div className="shrink-0">
+						<InputCounter current={Number(value?.length)} limit={maxLength} />
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default Textarea

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

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

package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.stories.tsx

@@ -1,118 +1,118 @@
-import Button from "stories/atoms/buttons/Button/Button"
-
-import type { Meta, StoryObj } from "@storybook/react"
-
-import ToggleSwitch from "./ToggleSwitch"
-const meta: Meta<typeof ToggleSwitch> = {
-	title: "Design System/Molecules/Inputs/ToggleSwitch",
-	component: ToggleSwitch,
-	tags: ["autodocs"]
-}
-type Story = StoryObj<typeof ToggleSwitch>
-export const DefaultToggleSwitch: Story = {
-  args: {
-    isChecked: false,
-    onChange: (v: boolean) => {
-
-    },
-    label: {
-      text: "label me",
-      className: "text-lg text-gray-400",
-      xPosition: "left",
-    },
-    variant: "base",
-    id: "toggle-switch-1",
-    name: "toggle one",
-  },
-}
-export const ShortToggleSwitch: Story = {
-  args: {
-    ...DefaultToggleSwitch.args,
-    label: {
-      text: "label me too",
-      className: "text-lg text-gray-400",
-      xPosition: "left",
-    },
-    variant: "short",
-    id: "toggle-switch-2",
-    name: "toggle two",
-  },
-}
-export const Checked: Story = {
-  args: {
-    ...DefaultToggleSwitch.args,
-    isChecked: true,
-    label: {
-      text: "label me too",
-      className: "text-lg text-gray-400",
-      xPosition: "left",
-    },
-    variant: "base",
-    id: "toggle-switch-3",
-    name: "toggle three",
-  },
-}
-export const WithIcon: Story = {
-	args: {
-		...DefaultToggleSwitch.args,
-		label: {
-			text: "label me three",
-			className: "text-lg text-gray-400",
-			xPosition: "left"
-		},
-		withIcon: {
-			icon: "IconCheck"
-		},
-		variant: "base",
-		id: "toggle-switch-4",
-		name: "toggle four"
-	}
-}
-export const NoLabel: Story = {
-  args: {
-    ...DefaultToggleSwitch.args,
-    label: undefined,
-    variant: "base",
-    id: "toggle-switch-5",
-    name: "toggle five",
-  },
-}
-export const LabelOnTheRight: Story = {
-  args: {
-    ...DefaultToggleSwitch.args,
-    variant: "base",
-    id: "toggle-switch-6",
-    name: "toggle six",
-    label: {
-      text: "Right on!",
-      className: "text-lg text-gray-400",
-      xPosition: "right",
-    },
-  },
-}
-export const JSXLabel: Story = {
-  args: {
-    ...DefaultToggleSwitch.args,
-    variant: "base",
-    id: "toggle-switch-6",
-    name: "toggle five",
-    label: {
-      text: (
-        <span className={"inline-flex gap-2 items-center "}>
-          <Button
-            actionType="primary"
-            label="Fancy Label"
-            onClick={() => {}}
-            icon="IconConfetti"
-            size="xs"
-            className="mr-4"
-          />
-        </span>
-      ),
-      className: "text-lg text-gray-400",
-      xPosition: "left",
-    },
-  },
-}
-
-export default meta
+import Button from "stories/atoms/buttons/Button/Button"
+
+import type { Meta, StoryObj } from "@storybook/react"
+
+import ToggleSwitch from "./ToggleSwitch"
+const meta: Meta<typeof ToggleSwitch> = {
+	title: "Design System/Molecules/Inputs/ToggleSwitch",
+	component: ToggleSwitch,
+	tags: ["autodocs"]
+}
+type Story = StoryObj<typeof ToggleSwitch>
+export const DefaultToggleSwitch: Story = {
+  args: {
+    isChecked: false,
+    onChange: (v: boolean) => {
+
+    },
+    label: {
+      text: "label me",
+      className: "text-lg text-gray-400",
+      xPosition: "left",
+    },
+    variant: "base",
+    id: "toggle-switch-1",
+    name: "toggle one",
+  },
+}
+export const ShortToggleSwitch: Story = {
+  args: {
+    ...DefaultToggleSwitch.args,
+    label: {
+      text: "label me too",
+      className: "text-lg text-gray-400",
+      xPosition: "left",
+    },
+    variant: "short",
+    id: "toggle-switch-2",
+    name: "toggle two",
+  },
+}
+export const Checked: Story = {
+  args: {
+    ...DefaultToggleSwitch.args,
+    isChecked: true,
+    label: {
+      text: "label me too",
+      className: "text-lg text-gray-400",
+      xPosition: "left",
+    },
+    variant: "base",
+    id: "toggle-switch-3",
+    name: "toggle three",
+  },
+}
+export const WithIcon: Story = {
+	args: {
+		...DefaultToggleSwitch.args,
+		label: {
+			text: "label me three",
+			className: "text-lg text-gray-400",
+			xPosition: "left"
+		},
+		withIcon: {
+			icon: "IconCheck"
+		},
+		variant: "base",
+		id: "toggle-switch-4",
+		name: "toggle four"
+	}
+}
+export const NoLabel: Story = {
+  args: {
+    ...DefaultToggleSwitch.args,
+    label: undefined,
+    variant: "base",
+    id: "toggle-switch-5",
+    name: "toggle five",
+  },
+}
+export const LabelOnTheRight: Story = {
+  args: {
+    ...DefaultToggleSwitch.args,
+    variant: "base",
+    id: "toggle-switch-6",
+    name: "toggle six",
+    label: {
+      text: "Right on!",
+      className: "text-lg text-gray-400",
+      xPosition: "right",
+    },
+  },
+}
+export const JSXLabel: Story = {
+  args: {
+    ...DefaultToggleSwitch.args,
+    variant: "base",
+    id: "toggle-switch-6",
+    name: "toggle five",
+    label: {
+      text: (
+        <span className={"inline-flex gap-2 items-center "}>
+          <Button
+            actionType="primary"
+            label="Fancy Label"
+            onClick={() => {}}
+            icon="IconConfetti"
+            size="xs"
+            className="mr-4"
+          />
+        </span>
+      ),
+      className: "text-lg text-gray-400",
+      xPosition: "left",
+    },
+  },
+}
+
+export default meta