@agility/plenum-ui 1.3.48 → 2.0.0-rc1

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

@@ -0,0 +1,100 @@
+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 type 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

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

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

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

@@ -0,0 +1,20 @@
+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,
+		placeholder: dummyText
+	}
+}
+export default meta

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

@@ -0,0 +1,67 @@
+import { default as cn } from "classnames"
+
+export interface ITextAreaFieldProps extends React.ComponentPropsWithoutRef<"textarea"> {
+	/** Callback on change */
+	handleChange: (value: string) => void
+	/** textarea ID*/
+	id: string
+	/** textarea Name */
+	name: string
+	/** Force the focus state on the textarea */
+	isFocused?: boolean
+	/** Error condition */
+	isError?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Readonly state */
+	isReadonly?: boolean
+	/** textarea value */
+	value: string
+	/** If field is required */
+	required?: boolean
+	/**Allow Text Area Resize*/
+	textAreaResize?: boolean
+	className?: string
+}
+const TextAreaField: React.FC<ITextAreaFieldProps> = ({
+	id,
+	name,
+	value,
+	isFocused,
+	isError,
+	isReadonly,
+	isDisabled,
+	handleChange,
+	required,
+	placeholder,
+	className,
+	...rest
+}) => {
+	return (
+		<textarea
+			{...{
+				id,
+				name,
+				value,
+				onChange: (e) => {
+					handleChange(e.target.value)
+				},
+				autoFocus: isFocused,
+				readOnly: isReadonly,
+				disabled: isDisabled,
+				required,
+				placeholder: placeholder || " ",
+				"aria-invalid": isError,
+				"aria-disabled": isDisabled,
+				className: cn(
+					"peer w-full resize-y auto-resize rounded border border-gray-300 py-2 px-3 pt-2  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" : "",
+					className
+				),
+				...rest
+			}}
+		/>
+	)
+}
+
+export default TextAreaField

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

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

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

@@ -0,0 +1,119 @@
+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) => {
+      console.log(v, "v")
+    },
+    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: {
+      name: "IconCheck",
+      type: "solid",
+    },
+    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

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react"
+import { default as cn } from "classnames"
+import { Switch } from "@headlessui/react"
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms"
+export interface IToggleSwitchProps {
+	isChecked: boolean
+	onChange: (isChecked: boolean) => void
+	label?: {
+		text: string | JSX.Element
+		className?: string
+		xPosition?: "left" | "right"
+	}
+	screenReaderLabel: string
+	name: string
+	id: string
+	variant: "base" | "short"
+	withIcon?: IDynamicIconProps
+}
+
+const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
+  isChecked,
+  onChange,
+  label,
+  screenReaderLabel,
+  name,
+  id,
+  variant = "base",
+  withIcon,
+}) => {
+  const [checked, setChecked] = useState<boolean>(isChecked)
+  useEffect(() => setChecked(isChecked), [isChecked])
+
+  return (
+    <Switch.Group as={"div"} className={"flex items-center gap-2"}>
+      {label && label.xPosition === "left" && (
+        <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": variant === "short", " h-6 w-11": variant === "base" },
+          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"
+        )}
+      >
+        <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

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

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

@@ -0,0 +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: {
+		
+	}
+}

package/stories/molecules/tabs/Tabs.tsx

@@ -0,0 +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;

package/stories/molecules/tabs/index.tsx

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

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

@@ -0,0 +1,21 @@
+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"
+		},
+		input: {}
+	} as IAnimatedLabelInputProps
+}

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { default as cn } from "classnames"
+import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
+import TextAreaField, { ITextAreaFieldProps } from "@/stories/molecules/inputs/textArea/TextArea"
+
+interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+	display: string
+}
+
+export interface IAnimatedLabelInputProps {
+	id: string
+	containerStyles?: string
+	message?: string
+	input?: IInputFieldProps
+	textarea?: ITextAreaFieldProps
+	required?: boolean
+	isError?: boolean
+	label: ILabelProps
+}
+
+const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = ({
+	id,
+	label,
+	input,
+	message,
+	textarea,
+	required,
+	isError,
+	containerStyles
+}) => {
+	return (
+		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+			{input && <InputField isError={isError} {...input} />}
+			{textarea && <TextAreaField isError={isError} {...textarea} />}
+			<label
+				className={cn(
+					"absolute left-1 z-10 ml-[.172rem] inline-block bg-white px-1 text-xs  transition-all peer-placeholder-shown:top-2 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-600",
+					"-top-[9px] group-focus-within:!-top-[12px] group-focus-within:!left-1  group-focus-within:!ml-[.172rem]  group-focus-within:!text-xs",
+					isError && "!text-red-600"
+				)}
+				htmlFor={id}
+			>
+				{label.display}
+				{required && <span className="text-red-600">*</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

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

package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import ButtonDropdown from "."
+import { IItemProp } from "../DropdownComponent"
+
+
+const meta: Meta<typeof ButtonDropdown> = {
+	title: "Design System/Organisms/Button Dropdown",
+	component: ButtonDropdown,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+ const dropdownDataWithIcons: IItemProp[][] = [
+		[
+			{
+				icon: {
+					name: "IconClipboardCopy",
+					pos: "leading",
+					className: "h-5 w-5",
+					outline: false
+				},
+				key: "Copy",
+				label: "Copy",
+				onClick: () => {
+					console.log("Copy action")
+				}
+			}
+		],
+		[
+			{
+				icon: {
+					name: "IconFolderPlus",
+					pos: "leading",
+					className: "h-5 w-5",
+					outline: false
+				},
+				key: "Add to Batch",
+				label: "Add to Batch",
+				onClick: () => {
+					console.log("Add to Batch action")
+				}
+			},
+			{
+				icon: {
+					name: "IconEye",
+					pos: "leading",
+					className: "h-5 w-5",
+					outline: false
+				},
+				key: "View Batch",
+				label: "View Batch",
+				onClick: () => {
+					console.log("View Batch action")
+				}
+			}
+		],
+		[
+			{
+				icon: {
+					name: "IconTrash",
+					pos: "leading",
+					className: "h-5 w-5",
+					outline: false
+				},
+				key: "Delete",
+				label: "Delete",
+				onClick: () => {
+					console.log("Delete action")
+				},
+				isEmphasized: true
+			}
+		]
+ ]
+
+export default meta
+type Story = StoryObj<typeof ButtonDropdown>
+
+export const Primary: Story = {
+	args: {
+		button: {
+			label: "Primary",
+			actionType: "primary"
+		},
+		dropDown: {
+			items: dropdownDataWithIcons,
+			label: "Dropdown",
+			id: "dropdown-primary"
+		},
+		placement: "bottom-end"
+	}
+}
+export const Secondary: Story = {
+	args: {
+		button: {
+			label: "Secondary",
+			actionType: "secondary"
+		},
+		dropDown: {
+			label: "Dropdown",
+			id: "dropdown-secondary",
+			items: dropdownDataWithIcons
+		},
+		placement: "bottom-end"
+	}
+}
+export const Alternative: Story = {
+	args: {
+		button: {
+			label: "Alternative",
+			actionType: "alternative"
+		},
+		dropDown: {
+			label: "Dropdown",
+			id: "dropdown-secondary",
+			items: dropdownDataWithIcons
+		},
+		placement: "bottom-end"
+	}
+}