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

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -1,122 +1,122 @@
-import { IItemProp } from "./DropdownComponent"
-
-export const dropdownDataBase: IItemProp[][] = [
-	[
-		{
-			icon: {
-				icon: "IconCopy"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
-			key: "Copy",
-			label: "Copy to Clipboard",
-			onClick: () => {
-				console.log("Copy action")
-			}
-		},
-
-		{
-			icon: {
-				icon: "IconPlus"
-				// 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: {
-				icon: "IconEye"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
-			key: "View Batch",
-			label: "View Batch",
-			onClick: () => {
-				console.log("View Batch action")
-			}
-		},
-		{
-			icon: {
-				icon: "IconTrash"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
-			label: "Delete",
-			onClick: () => {
-				console.log("Delete action")
-			},
-			isEmphasized: true,
-			key: "Delete"
-		}
-	]
-]
-
-export const dropdownDataWithIcons: IItemProp[][] = [
-	[
-		{
-			icon: {
-				icon: "IconCopy",
-				className: "h-5 w-5",
-				outline: false
-			},
-			iconPosition: "leading",
-			key: "Copy",
-			label: "Copy Item",
-			onClick: () => {
-				console.log("Copy action")
-			}
-		}
-	],
-	[
-		{
-			icon: {
-				icon: "IconFolderPlus",
-				className: "h-5 w-5",
-				outline: false
-			},
-			iconPosition: "leading",
-			key: "Add to Batch",
-			label: "Add to Batch",
-			onClick: () => {
-				console.log("Add to Batch action")
-			}
-		},
-		{
-			icon: {
-				icon: "IconEye",
-				className: "h-5 w-5",
-				outline: false
-			},
-			iconPosition: "leading",
-			key: "View Batch",
-			label: "View Batch",
-			onClick: () => {
-				console.log("View Batch action")
-			}
-		}
-	],
-	[
-		{
-			icon: {
-				icon: "IconTrash",
-				className: "h-5 w-5",
-				outline: false
-			},
-			iconPosition: "leading",
-			key: "Delete",
-			label: "Delete",
-			onClick: () => {
-				console.log("Delete action")
-			},
-			isEmphasized: true
-		}
-	]
-]
+import { IItemProp } from "./DropdownComponent"
+
+export const dropdownDataBase: IItemProp[][] = [
+	[
+		{
+			icon: {
+				icon: "IconCopy"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			key: "Copy",
+			label: "Copy to Clipboard",
+			onClick: () => {
+				console.log("Copy action")
+			}
+		},
+
+		{
+			icon: {
+				icon: "IconPlus"
+				// 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: {
+				icon: "IconEye"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			key: "View Batch",
+			label: "View Batch",
+			onClick: () => {
+				console.log("View Batch action")
+			}
+		},
+		{
+			icon: {
+				icon: "IconTrash"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
+			},
+			isEmphasized: true,
+			key: "Delete"
+		}
+	]
+]
+
+export const dropdownDataWithIcons: IItemProp[][] = [
+	[
+		{
+			icon: {
+				icon: "IconCopy",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "Copy",
+			label: "Copy Item",
+			onClick: () => {
+				console.log("Copy action")
+			}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconFolderPlus",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "Add to Batch",
+			label: "Add to Batch",
+			onClick: () => {
+				console.log("Add to Batch action")
+			}
+		},
+		{
+			icon: {
+				icon: "IconEye",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "View Batch",
+			label: "View Batch",
+			onClick: () => {
+				console.log("View Batch action")
+			}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconTrash",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "Delete",
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
+			},
+			isEmphasized: true
+		}
+	]
+]

package/stories/organisms/DropdownComponent/index.ts

@@ -1,4 +1,4 @@
-import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent"
-export type { IItemProp, IDropdownProps }
-export { defaultClassNames }
-export default Dropdown
+import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent"
+export type { IItemProp, IDropdownProps }
+export { defaultClassNames }
+export default Dropdown

package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.stories.tsx

@@ -1,76 +1,76 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
-import { useRef } from "react"
-
-const meta: Meta<typeof EmptySectionPlaceholder> = {
-	title: "Design System/Organisms/Empty Section Placeholder",
-	component: EmptySectionPlaceholder,
-	tags: ["autodocs"],
-	argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof EmptySectionPlaceholder>
-
-const MissingAttachmentCTA = () => {
-	const fileInputRef = useRef<HTMLInputElement>(null)
-	return (
-		<div className="mb-2 block text-sm font-medium text-gray-600">
-			<input type="file" className="hidden" ref={fileInputRef} />
-			<button
-				className="hover:underline hover:text-gray-700 transition-all"
-				onClick={() => {
-					fileInputRef?.current && fileInputRef.current.click()
-				}}
-			>
-				Upload
-			</button>{" "}
-			<span>OR drag and drop a file</span>
-		</div>
-	)
-}
-
-export const CallsToAction: Story = {
-	args: {
-		icon: { icon: "IconPaperclip" },
-		mutedText: "No File is attached yet",
-		CallToActionComponent: <MissingAttachmentCTA />,
-		actions: [
-			{
-				actionType: "alternative",
-				icon: {
-					icon: "IconUpload",
-					outline: true
-				},
-				iconPosition: "leading",
-				label: "Upload",
-				onClick: () => window.alert("Clicked")
-			},
-			{
-				actionType: "alternative",
-				icon: {
-					icon: "IconGridDots",
-					outline: true
-				},
-				size: "lg",
-				iconPosition: "leading",
-				label: "Browse",
-				onClick: () => window.alert("Clicked")
-			}
-		],
-		isWide: true
-	}
-}
-export const NoActions: Story = {
-	args: {
-		icon: {
-			icon: "IconPencil",
-			className: "h-5 w-5 text-gray-400 ",
-			outline: true
-		},
-		mutedText: "No Recent Changes",
-		primaryMessage: "There haven't been any recent changes\nto the content in this of this instance.",
-		actions: [],
-		isWide: true
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
+import { useRef } from "react"
+
+const meta: Meta<typeof EmptySectionPlaceholder> = {
+	title: "Design System/Organisms/Empty Section Placeholder",
+	component: EmptySectionPlaceholder,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof EmptySectionPlaceholder>
+
+const MissingAttachmentCTA = () => {
+	const fileInputRef = useRef<HTMLInputElement>(null)
+	return (
+		<div className="mb-2 block text-sm font-medium text-gray-600">
+			<input type="file" className="hidden" ref={fileInputRef} />
+			<button
+				className="hover:underline hover:text-gray-700 transition-all"
+				onClick={() => {
+					fileInputRef?.current && fileInputRef.current.click()
+				}}
+			>
+				Upload
+			</button>{" "}
+			<span>OR drag and drop a file</span>
+		</div>
+	)
+}
+
+export const CallsToAction: Story = {
+	args: {
+		icon: { icon: "IconPaperclip" },
+		mutedText: "No File is attached yet",
+		CallToActionComponent: <MissingAttachmentCTA />,
+		actions: [
+			{
+				actionType: "alternative",
+				icon: {
+					icon: "IconUpload",
+					outline: true
+				},
+				iconPosition: "leading",
+				label: "Upload",
+				onClick: () => window.alert("Clicked")
+			},
+			{
+				actionType: "alternative",
+				icon: {
+					icon: "IconGridDots",
+					outline: true
+				},
+				size: "lg",
+				iconPosition: "leading",
+				label: "Browse",
+				onClick: () => window.alert("Clicked")
+			}
+		],
+		isWide: true
+	}
+}
+export const NoActions: Story = {
+	args: {
+		icon: {
+			icon: "IconPencil",
+			className: "h-5 w-5 text-gray-400 ",
+			outline: true
+		},
+		mutedText: "No Recent Changes",
+		primaryMessage: "There haven't been any recent changes\nto the content in this of this instance.",
+		actions: [],
+		isWide: true
+	}
+}

package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.tsx

@@ -1,52 +1,52 @@
-import React from "react"
-import Button, { IButtonProps } from "@/stories/atoms/buttons/Button"
-import { IDynamicIconProps } from "@/stories/atoms/icons"
-import IconWithShadow from "@/stories/atoms/icons/IconWithShadow"
-import { default as cn } from "classnames"
-
-export interface IEmptySectionPlaceholderProps {
-	/** the primary icon to display at top of component */
-	icon: IDynamicIconProps
-	/** the muted text to display below the icon */
-	mutedText?: string
-	/** the primary message to display below the muted text */
-	primaryMessage: string
-	/** the call to action component that if provided will be used instead of primaryMessage */
-	CallToActionComponent?: React.ReactNode
-	/** the actions to display below the primary call to action or message */
-	actions: IButtonProps[]
-	/** whether to display the component in a wide or narrow format */
-	isWide?: boolean
-}
-
-const EmptySectionPlaceholder: React.FC<IEmptySectionPlaceholderProps> = ({
-	icon,
-	mutedText,
-	primaryMessage,
-	CallToActionComponent,
-	actions,
-	isWide
-}) => {
-	return (
-		<div className="flex h-full w-full flex-col items-center justify-center border-2 border-dashed border-gray-300 p-5">
-			<IconWithShadow {...icon} />
-			{mutedText && <p className="my-2 block text-xs text-gray-500">{mutedText}</p>}
-			{CallToActionComponent ? (
-				CallToActionComponent
-			) : (
-				<p className="mb-2 block text-sm font-medium text-gray-600">{primaryMessage}</p>
-			)}
-			{actions.length > 0 ? (
-				<div className={cn("mt-2 flex gap-2", isWide ? "" : "flex-col items-center")}>
-					{actions.map((action, index) => (
-						<Button {...{ ...action }} key={action.label.replaceAll(" ", "-")} />
-					))}
-				</div>
-			) : (
-				<></>
-			)}
-		</div>
-	)
-}
-
-export default EmptySectionPlaceholder
+import React from "react"
+import Button, { IButtonProps } from "@/stories/atoms/buttons/Button"
+import { IDynamicIconProps } from "@/stories/atoms/icons"
+import IconWithShadow from "@/stories/atoms/icons/IconWithShadow"
+import { default as cn } from "classnames"
+
+export interface IEmptySectionPlaceholderProps {
+	/** the primary icon to display at top of component */
+	icon: IDynamicIconProps
+	/** the muted text to display below the icon */
+	mutedText?: string
+	/** the primary message to display below the muted text */
+	primaryMessage: string
+	/** the call to action component that if provided will be used instead of primaryMessage */
+	CallToActionComponent?: React.ReactNode
+	/** the actions to display below the primary call to action or message */
+	actions: IButtonProps[]
+	/** whether to display the component in a wide or narrow format */
+	isWide?: boolean
+}
+
+const EmptySectionPlaceholder: React.FC<IEmptySectionPlaceholderProps> = ({
+	icon,
+	mutedText,
+	primaryMessage,
+	CallToActionComponent,
+	actions,
+	isWide
+}) => {
+	return (
+		<div className="flex h-full w-full flex-col items-center justify-center border-2 border-dashed border-gray-300 p-5">
+			<IconWithShadow {...icon} />
+			{mutedText && <p className="my-2 block text-xs text-gray-500">{mutedText}</p>}
+			{CallToActionComponent ? (
+				CallToActionComponent
+			) : (
+				<p className="mb-2 block text-sm font-medium text-gray-600">{primaryMessage}</p>
+			)}
+			{actions.length > 0 ? (
+				<div className={cn("mt-2 flex gap-2", isWide ? "" : "flex-col items-center")}>
+					{actions.map((action, index) => (
+						<Button {...{ ...action }} key={action.label.replaceAll(" ", "-")} />
+					))}
+				</div>
+			) : (
+				<></>
+			)}
+		</div>
+	)
+}
+
+export default EmptySectionPlaceholder

package/stories/organisms/EmptySectionPlaceholder/index.tsx

@@ -1,4 +1,4 @@
-import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
-
-export type { IEmptySectionPlaceholderProps }
-export default EmptySectionPlaceholder
+import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
+
+export type { IEmptySectionPlaceholderProps }
+export default EmptySectionPlaceholder

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx

@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
-
-const meta: Meta<typeof FormInputWithAddons> = {
-	title: "Design System/organisms/Form Input With Addons",
-	component: FormInputWithAddons,
-	tags: ["autodocs"],
-	argTypes: {},
-	parameters: {
-		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=85-1269&mode=design"
-		}
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof FormInputWithAddons>
-
-export const DefaultFormInputWithAddons: Story = {
-	args: {
-		id: "appSearch",
-		name: "appSearch",
-		leadLabel: "Search",
-		addonOffset: 60,
-		labelClass: "text-gray-900",
-		trailIcon: { icon: "IconSearch" }
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
+
+const meta: Meta<typeof FormInputWithAddons> = {
+	title: "Design System/organisms/Form Input With Addons",
+	component: FormInputWithAddons,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=85-1269&mode=design"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof FormInputWithAddons>
+
+export const DefaultFormInputWithAddons: Story = {
+	args: {
+		id: "appSearch",
+		name: "appSearch",
+		leadLabel: "Search",
+		addonOffset: 60,
+		labelClass: "text-gray-900",
+		trailIcon: { icon: "IconSearch" }
+	}
+}