@agility/plenum-ui 1.3.50 → 2.0.0-rc10

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 Textarea, { ITextareaProps } 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?: ITextareaProps
+	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 && <Textarea 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"
+	}
+}

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -0,0 +1,81 @@
+import React, { FC } from "react"
+import { default as cn } from "classnames"
+import Button, { IButtonProps } from "@/stories/atoms/buttons/Button"
+
+import { DynamicIcon } from "@/stories/atoms/icons"
+import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponent"
+
+export interface IButtonDropdownProps {
+	button: IButtonProps
+	dropDown: IDropdownProps
+	placement?: IDropdownProps["placement"]
+	offsetOptions?: IDropdownProps["offsetOptions"]
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement, offsetOptions }) => {
+	const dropDownClasses: IDropdownProps["classNames"] = {
+		...defaultClassNames,
+		groupClassname: cn(
+			"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+			button.actionType === "primary"
+				? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
+				: "",
+			button.actionType === "secondary"
+				? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
+				: "",
+			button.actionType === "alternative"
+				? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
+				: ""
+		)
+	}
+	return (
+		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
+			<Button
+				{...{
+					...button,
+					className: cn(
+						button.className,
+						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0"
+					)
+				}}
+			/>
+			<div
+				className={cn(
+					"w-[1px] rt",
+					button.actionType === "primary" ? "bg-purple-700" : "",
+					button.actionType === "secondary" ? "bg-purple-200" : "",
+					button.actionType === "alternative" ? "bg-gray-300" : ""
+				)}
+			></div>
+			<Dropdown
+				{...{
+					...(dropDown as IDropdownProps),
+					CustomDropdownTrigger: (
+						<DynamicIcon
+							{...{
+								icon: "ChevronDownIcon",
+								className: cn("h-5 w-5", {
+									"text-white": button.actionType === "primary",
+									"text-purple-700": button.actionType === "secondary",
+									"text-gray-700": button.actionType === "alternative"
+								})
+							}}
+						/>
+					),
+					classNames: dropDownClasses,
+					offsetOptions: offsetOptions ?? {
+						crossAxis: 0,
+						mainAxis: 5, //up/down
+						alignmentAxis: -10 //left/right
+					},
+					placement
+				}}
+			/>
+			<div className="hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" />
+		</div>
+	)
+}
+export default ButtonDropdown

package/stories/organisms/ButtonDropdown/index.tsx

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

package/stories/organisms/DropdownComponent/Dropdown.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { DynamicIcon } from "@/stories/atoms/icons"
+import { dropdownDataBase, dropdownDataWithIcons } from "./dropdownItems"
+import Dropdown, { defaultClassNames } from "./DropdownComponent"
+
+const meta: Meta<typeof Dropdown> = {
+	title: "Design System/Organisms/Dropdown",
+	component: Dropdown,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+type Story = StoryObj<typeof Dropdown>
+
+const IconElement = () => (
+	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"DotsVerticalIcon"} />
+)
+const defaultArgs: Story["args"] = {
+	items: [...dropdownDataBase],
+	label: "Dropdown",
+	classNames: defaultClassNames,
+	placement: "bottom-end"
+}
+export const WithLabel: Story = {
+	args: {
+		...defaultArgs
+	}
+}
+
+export const CustomTrigger: Story = {
+	args: {
+		...defaultArgs,
+		CustomDropdownTrigger: <IconElement />
+	}
+}
+export const WithLabelAndIcons: Story = {
+	args: {
+		...defaultArgs,
+		items: [...dropdownDataWithIcons]
+	}
+}
+export const WithIcons: Story = {
+	args: {
+		...defaultArgs,
+		items: [...dropdownDataWithIcons],
+		CustomDropdownTrigger: <IconElement />
+	}
+}
+export default meta