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

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

@@ -1,81 +1,81 @@
-import React, { useEffect, useState } from "react"
-import { default as cn } from "classnames"
-import { Switch } from "@headlessui/react"
-import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms"
-
-interface ToggleSwitchLabel {
-	text: string | JSX.Element
-	className?: string
-	xPosition?: "left" | "right"
-}
-
-export interface IToggleSwitchProps {
-	isChecked: boolean
-	onChange: (isChecked: boolean) => void
-	label?: ToggleSwitchLabel
-	screenReaderLabel?: string
-	name: string
-	id: string
-	variant?: "base" | "short"
-	withIcon?: IDynamicIconProps
-	disabled?: boolean,
-	groupClassName?: string
-}
-
-const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
-	isChecked,
-	onChange,
-	label,
-	screenReaderLabel,
-	name,
-	id,
-	variant = "base",
-	withIcon,
-	disabled,
-	groupClassName,
-}) => {
-	const [checked, setChecked] = useState<boolean>(isChecked)
-	useEffect(() => setChecked(isChecked), [isChecked])
-
-	return (
-		<Switch.Group as={"div"} className={cn("flex items-center gap-2", groupClassName)}>
-			{label && (label.xPosition === "left" || !label?.xPosition) && (
-				<Switch.Label className={label.className}>{label.text}</Switch.Label>
-			)}
-			<Switch
-				name={name}
-				id={id}
-				checked={checked}
-				onChange={(v: boolean) => {
-					onChange(v)
-					setChecked(v)
-				}}
-				className={cn(
-					{ "w-9 h-4 transition-all": variant === "short", " h-6 w-11": variant === "base" },
-					checked && disabled ? "bg-purple-200" : checked ? "bg-purple-600" : "bg-gray-200",
-					"relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
-				)}
-				disabled={disabled}
-			>
-				{screenReaderLabel && <span className="sr-only">{screenReaderLabel}</span>}
-				<span
-					className={cn(
-						checked ? "translate-x-[22px]" : "translate-x-[2px]",
-						{
-							"border border-gray-200 translate-x-0": variant === "short",
-							"!translate-x-[22px]": checked && variant === "short"
-						},
-						" h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
-					)}
-				>
-					{withIcon && <DynamicIcon {...withIcon} className={"text-gray-400 m-[2px]"} />}
-				</span>
-			</Switch>
-			{label && label.xPosition === "right" && (
-				<Switch.Label className={label.className}>{label.text}</Switch.Label>
-			)}
-		</Switch.Group>
-	)
-}
-
-export default ToggleSwitch
+import React, { useEffect, useState } from "react"
+import { default as cn } from "classnames"
+import { Switch } from "@headlessui/react"
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms"
+
+interface ToggleSwitchLabel {
+	text: string | JSX.Element
+	className?: string
+	xPosition?: "left" | "right"
+}
+
+export interface IToggleSwitchProps {
+	isChecked: boolean
+	onChange: (isChecked: boolean) => void
+	label?: ToggleSwitchLabel
+	screenReaderLabel?: string
+	name: string
+	id: string
+	variant?: "base" | "short"
+	withIcon?: IDynamicIconProps
+	disabled?: boolean,
+	groupClassName?: string
+}
+
+const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
+	isChecked,
+	onChange,
+	label,
+	screenReaderLabel,
+	name,
+	id,
+	variant = "base",
+	withIcon,
+	disabled,
+	groupClassName,
+}) => {
+	const [checked, setChecked] = useState<boolean>(isChecked)
+	useEffect(() => setChecked(isChecked), [isChecked])
+
+	return (
+		<Switch.Group as={"div"} className={cn("flex items-center gap-2", groupClassName)}>
+			{label && (label.xPosition === "left" || !label?.xPosition) && (
+				<Switch.Label className={label.className}>{label.text}</Switch.Label>
+			)}
+			<Switch
+				name={name}
+				id={id}
+				checked={checked}
+				onChange={(v: boolean) => {
+					onChange(v)
+					setChecked(v)
+				}}
+				className={cn(
+					{ "w-9 h-4 transition-all": variant === "short", " h-6 w-11": variant === "base" },
+					checked && disabled ? "bg-purple-200" : checked ? "bg-purple-600" : "bg-gray-200",
+					"relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
+				)}
+				disabled={disabled}
+			>
+				{screenReaderLabel && <span className="sr-only">{screenReaderLabel}</span>}
+				<span
+					className={cn(
+						checked ? "translate-x-[22px]" : "translate-x-[2px]",
+						{
+							"border border-gray-200 translate-x-0": variant === "short",
+							"!translate-x-[22px]": checked && variant === "short"
+						},
+						" h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
+					)}
+				>
+					{withIcon && <DynamicIcon {...withIcon} className={"text-gray-400 m-[2px]"} />}
+				</span>
+			</Switch>
+			{label && label.xPosition === "right" && (
+				<Switch.Label className={label.className}>{label.text}</Switch.Label>
+			)}
+		</Switch.Group>
+	)
+}
+
+export default ToggleSwitch

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

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

package/stories/molecules/tabs/Tabs.stories.tsx

@@ -1,18 +1,18 @@
-
-import type { Meta, StoryObj } from "@storybook/react"
-import Tabs, { ITabsProps } from "./Tabs"
-
-const meta: Meta<typeof Tabs> = {
-  title: "Design System/molecules/Tabs",
-  component: Tabs,
-  tags: ["autodocs"],
-  argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof Tabs>
-export const DefaultTabsStory: Story = {
-	args: {
-		
-	}
-}
+
+import type { Meta, StoryObj } from "@storybook/react"
+import Tabs, { ITabsProps } from "./Tabs"
+
+const meta: Meta<typeof Tabs> = {
+  title: "Design System/molecules/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+  argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof Tabs>
+export const DefaultTabsStory: Story = {
+	args: {
+		
+	}
+}

package/stories/molecules/tabs/Tabs.tsx

@@ -1,22 +1,22 @@
-
-import React from  "react"
-import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
-
-export interface ITabsProps {}
-
-const Tabs: React.FC<ITabsProps> = ({}) => {
-  return (
-   <EmptySectionPlaceholder
-			{...{
-				icon: {
-					icon: "IconCode"
-				},
-				mutedText: "Coming Soon! 🚧",
-				primaryMessage: "We're working on this component. Be sure to check back soon!",
-				actions: []
-			}}
-		/>
-  )
-};
-
-export default Tabs;
+
+import React from  "react"
+import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
+
+export interface ITabsProps {}
+
+const Tabs: React.FC<ITabsProps> = ({}) => {
+  return (
+   <EmptySectionPlaceholder
+			{...{
+				icon: {
+					icon: "IconCode"
+				},
+				mutedText: "Coming Soon! 🚧",
+				primaryMessage: "We're working on this component. Be sure to check back soon!",
+				actions: []
+			}}
+		/>
+  )
+};
+
+export default Tabs;

package/stories/molecules/tabs/index.tsx

@@ -1,2 +1,2 @@
-export * from "./Tabs"
-export { default } from "./Tabs"
+export * from "./Tabs"
+export { default } from "./Tabs"

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.stories.tsx

@@ -1,30 +1,30 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput"
-
-const meta: Meta<typeof AnimatedLabelInput> = {
-	title: "Design System/organisms/Animated Label Input",
-	component: AnimatedLabelInput,
-	tags: ["autodocs"],
-	argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof AnimatedLabelInput>
-export const DefaultAnimatedLabelInputsStory: Story = {
-	args: {
-		id: "test",
-		label: {
-			display: "Label"
-		}
-	} as IAnimatedLabelInputProps
-}
-
-export const DefaultAnimatedLabelInputsStoryWithPlaceHolder: Story = {
-	args: {
-		id: "test",
-		label: {
-			display: "Label"
-		},
-		placeholder: "Placeholder"
-	} as IAnimatedLabelInputProps
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput"
+
+const meta: Meta<typeof AnimatedLabelInput> = {
+	title: "Design System/organisms/Animated Label Input",
+	component: AnimatedLabelInput,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof AnimatedLabelInput>
+export const DefaultAnimatedLabelInputsStory: Story = {
+	args: {
+		id: "test",
+		label: {
+			display: "Label"
+		}
+	} as IAnimatedLabelInputProps
+}
+
+export const DefaultAnimatedLabelInputsStoryWithPlaceHolder: Story = {
+	args: {
+		id: "test",
+		label: {
+			display: "Label"
+		},
+		placeholder: "Placeholder"
+	} as IAnimatedLabelInputProps
+}

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -1,66 +1,66 @@
-import React from "react"
-import { default as cn } from "classnames"
-import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
-
-interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
-	display: string
-}
-
-export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
-	id: string
-	containerStyles?: string
-	message?: string
-	required?: boolean
-	isError?: boolean
-	label: ILabelProps
-	handleChange: (value: string) => void
-}
-
-const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimatedLabelInputProps) => {
-	const { id, containerStyles, message, required, isError, label, value, handleChange, ...input } = props
-
-	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
-
-	return (
-		<>
-			<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-				<InputField
-					id={id}
-					isError={isError}
-					value={value}
-					handleChange={(v) => {
-						setHasValue(!!v)
-						if (handleChange) handleChange(v)
-					}}
-					{...input}
-				/>
-				<label
-					className={cn(
-						"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
-						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
-						"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
-						"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
-
-						isError && "!text-red-600"
-					)}
-					htmlFor={id}
-				>
-					{label.display}
-					{required && <span className="text-red-600 ml-1">*</span>}
-				</label>
-
-				<div className="flex flex-row space-x-3">
-					<div className="grow transition-all">
-						{message && (
-							<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
-								{message}
-							</span>
-						)}
-					</div>
-				</div>
-			</div>
-		</>
-	)
-}
-
-export default AnimatedLabelInput
+import React from "react"
+import { default as cn } from "classnames"
+import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
+
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+	display: string
+}
+
+export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
+	id: string
+	containerStyles?: string
+	message?: string
+	required?: boolean
+	isError?: boolean
+	label: ILabelProps
+	handleChange: (value: string) => void
+}
+
+const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimatedLabelInputProps) => {
+	const { id, containerStyles, message, required, isError, label, value, handleChange, ...input } = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+
+	return (
+		<>
+			<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+				<InputField
+					id={id}
+					isError={isError}
+					value={value}
+					handleChange={(v) => {
+						setHasValue(!!v)
+						if (handleChange) handleChange(v)
+					}}
+					{...input}
+				/>
+				<label
+					className={cn(
+						"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+						"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
+						"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+
+						isError && "!text-red-600"
+					)}
+					htmlFor={id}
+				>
+					{label.display}
+					{required && <span className="text-red-600 ml-1">*</span>}
+				</label>
+
+				<div className="flex flex-row space-x-3">
+					<div className="grow transition-all">
+						{message && (
+							<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+								{message}
+							</span>
+						)}
+					</div>
+				</div>
+			</div>
+		</>
+	)
+}
+
+export default AnimatedLabelInput

package/stories/organisms/AnimatedLabelInput/index.tsx

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

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.stories.tsx

@@ -1,26 +1,26 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
-
-const meta: Meta<typeof AnimatedLabelTextArea> = {
-	title: "Design System/organisms/Animated Label Text Area",
-	component: AnimatedLabelTextArea,
-	tags: ["autodocs"],
-	argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof AnimatedLabelTextArea>
-export const DefaultAnimatedLabelTextAreasStory: Story = {
-	args: {
-		id: "test",
-		label: "Label"
-	} as IAnimatedLabelTextAreaProps
-}
-
-export const DefaultAnimatedLabelTextAreasStoryWithPlaceholder: Story = {
-	args: {
-		id: "test",
-		label: "Label",
-		placeholder: "Placeholder"
-	} as IAnimatedLabelTextAreaProps
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
+
+const meta: Meta<typeof AnimatedLabelTextArea> = {
+	title: "Design System/organisms/Animated Label Text Area",
+	component: AnimatedLabelTextArea,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof AnimatedLabelTextArea>
+export const DefaultAnimatedLabelTextAreasStory: Story = {
+	args: {
+		id: "test",
+		label: "Label"
+	} as IAnimatedLabelTextAreaProps
+}
+
+export const DefaultAnimatedLabelTextAreasStoryWithPlaceholder: Story = {
+	args: {
+		id: "test",
+		label: "Label",
+		placeholder: "Placeholder"
+	} as IAnimatedLabelTextAreaProps
+}

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx

@@ -1,61 +1,61 @@
-import React from "react"
-import { default as cn } from "classnames"
-
-import TextArea, { ITextareaProps } from "@/stories/molecules/inputs/textArea"
-
-export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
-	id: string
-	containerStyles?: string
-	message?: string
-	required?: boolean
-	isError?: boolean
-	handleChange: (value: string) => void
-}
-
-const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAnimatedLabelTextAreaProps) => {
-	const { id, containerStyles, message, required, isError, label, value, handleChange, onChange, ...input } = props
-
-	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
-
-	return (
-		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-			<TextArea
-				id={id}
-				isError={isError}
-				value={value}
-				{...input}
-				onChange={(v) => {
-					setHasValue(!!v)
-					if (handleChange) handleChange(v)
-				}}
-				label={undefined}
-			/>
-			<label
-				className={cn(
-					"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
-					hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
-					"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
-					"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
-
-					isError && "!text-red-600"
-				)}
-				htmlFor={label?.htmlFor || id}
-			>
-				{label?.display}
-				{required && <span className="text-red-600 ml-1">*</span>}
-			</label>
-
-			<div className="flex flex-row space-x-3">
-				<div className="grow transition-all">
-					{message && (
-						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
-							{message}
-						</span>
-					)}
-				</div>
-			</div>
-		</div>
-	)
-}
-
-export default AnimatedLabelTextArea
+import React from "react"
+import { default as cn } from "classnames"
+
+import TextArea, { ITextareaProps } from "@/stories/molecules/inputs/textArea"
+
+export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
+	id: string
+	containerStyles?: string
+	message?: string
+	required?: boolean
+	isError?: boolean
+	handleChange: (value: string) => void
+}
+
+const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAnimatedLabelTextAreaProps) => {
+	const { id, containerStyles, message, required, isError, label, value, handleChange, onChange, ...input } = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+
+	return (
+		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+			<TextArea
+				id={id}
+				isError={isError}
+				value={value}
+				{...input}
+				onChange={(v) => {
+					setHasValue(!!v)
+					if (handleChange) handleChange(v)
+				}}
+				label={undefined}
+			/>
+			<label
+				className={cn(
+					"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+					hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+					"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
+					"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+
+					isError && "!text-red-600"
+				)}
+				htmlFor={label?.htmlFor || id}
+			>
+				{label?.display}
+				{required && <span className="text-red-600 ml-1">*</span>}
+			</label>
+
+			<div className="flex flex-row space-x-3">
+				<div className="grow transition-all">
+					{message && (
+						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+							{message}
+						</span>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default AnimatedLabelTextArea

package/stories/organisms/AnimatedLabelTextArea/index.tsx

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