@agility/plenum-ui 2.0.0-rc9 → 2.0.1

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -3,15 +3,26 @@ import { IItemProp } from "./DropdownComponent"
 export const dropdownDataBase: IItemProp[][] = [
 	[
 		{
+			icon: {
+				icon: "IconCopy"
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
 			key: "Copy",
-			label: "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: () => {
@@ -19,15 +30,25 @@ export const dropdownDataBase: IItemProp[][] = [
 			}
 		},
 		{
+			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")
@@ -42,13 +63,13 @@ export const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{
 			icon: {
-				icon: "IconClipboardCopy",
+				icon: "IconCopy",
 				className: "h-5 w-5",
 				outline: false
 			},
 			iconPosition: "leading",
 			key: "Copy",
-			label: "Copy",
+			label: "Copy Item",
 			onClick: () => {
 				console.log("Copy action")
 			}

package/stories/organisms/DropdownComponent/index.ts

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

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

@@ -39,7 +39,7 @@ export const CallsToAction: Story = {
 			{
 				actionType: "alternative",
 				icon: {
-					icon: "UploadIcon",
+					icon: "IconUpload",
 					outline: true
 				},
 				iconPosition: "leading",
@@ -49,7 +49,7 @@ export const CallsToAction: Story = {
 			{
 				actionType: "alternative",
 				icon: {
-					icon: "ViewGridIcon",
+					icon: "IconGridDots",
 					outline: true
 				},
 				size: "lg",
@@ -64,7 +64,7 @@ export const CallsToAction: Story = {
 export const NoActions: Story = {
 	args: {
 		icon: {
-			icon: "PencilAltIcon",
+			icon: "IconPencil",
 			className: "h-5 w-5 text-gray-400 ",
 			outline: true
 		},

package/stories/organisms/EmptySectionPlaceholder/index.tsx

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

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

@@ -24,6 +24,6 @@ export const DefaultFormInputWithAddons: Story = {
 		leadLabel: "Search",
 		addonOffset: 60,
 		labelClass: "text-gray-900",
-		trailIcon: { icon: "SearchIcon" }
+		trailIcon: { icon: "IconSearch" }
 	}
 }

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -79,7 +79,12 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 								<DynamicIcon
 									{...{
 										...leadIcon,
-										className: cn("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
+										className: cn(
+											"h-5 w-5 text-gray-400",
+											leadIconClassNames,
+											customIconClass,
+											leadIcon.className
+										),
 										outline: iconOutlined
 									}}
 								/>
@@ -123,7 +128,7 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 								<DynamicIcon
 									{...{
 										...trailIcon,
-										className: cn("h-5 w-5 text-gray-400", customIconClass),
+										className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
 										outline: iconOutlined
 									}}
 								/>

package/stories/organisms/index.ts

@@ -1,18 +1,27 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput"
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
 import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown"
-import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "./DropdownComponent"
+import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent"
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
 import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect"
 
 export type {
 	IAnimatedLabelInputProps,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
 	IFormInputWithAddonsProps,
 	ITextInputSelectProps
 }
-export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect }
+export {
+	AnimatedLabelInput,
+	AnimatedLabelTextArea,
+	ButtonDropdown,
+	Dropdown,
+	EmptySectionPlaceholder,
+	FormInputWithAddons,
+	TextInputSelect
+}

package/tailwind.config.js

@@ -39,6 +39,10 @@ module.exports = {
 			mulish: ["Mulish", "sans-serif"]
 		},
 		extend: {
+			backgroundImage: (theme) => ({
+				"label-gradient-focus": "linear-gradient(to top, #FFF 9px, transparent 9px)",
+				"label-gradient-idle": "linear-gradient(to top, #FFF 8px, transparent 8px)"
+			}),
 			gridTemplateColumns: {
 				// Simple 16 column grid
 				mainContainer: "max-content 1fr 1fr"
@@ -48,6 +52,29 @@ module.exports = {
 				header: "max-content 1fr 1fr"
 			},
 			colors: {
+				"transparent-white-05": "rgba(255, 255, 255, 0.05)",
+				"transparent-white-10": "rgba(255, 255, 255, 0.1)",
+				"transparent-white-20": "rgba(255, 255, 255, 0.2)",
+				"transparent-white-30": "rgba(255, 255, 255, 0.3)",
+				"transparent-white-40": "rgba(255, 255, 255, 0.4)",
+				"transparent-white-50": "rgba(255, 255, 255, 0.5)",
+				"transparent-white-60": "rgba(255, 255, 255, 0.6)",
+				"transparent-white-70": "rgba(255, 255, 255, 0.7)",
+				"transparent-white-80": "rgba(255, 255, 255, 0.8)",
+				"transparent-white-90": "rgba(255, 255, 255, 0.9)",
+
+				"transparent-black-03": "rgba(0, 0, 0, 0.03)",
+				"transparent-black-05": "rgba(0, 0, 0, 0.05)",
+				"transparent-black-10": "rgba(0, 0, 0, 0.1)",
+				"transparent-black-20": "rgba(0, 0, 0, 0.2)",
+				"transparent-black-30": "rgba(0, 0, 0, 0.3)",
+				"transparent-black-40": "rgba(0, 0, 0, 0.4)",
+				"transparent-black-50": "rgba(0, 0, 0, 0.5)",
+				"transparent-black-60": "rgba(0, 0, 0, 0.6)",
+				"transparent-black-70": "rgba(0, 0, 0, 0.7)",
+				"transparent-black-80": "rgba(0, 0, 0, 0.8)",
+				"transparent-black-90": "rgba(0, 0, 0, 0.9)",
+
 				"gray-50": "#F9FAFB",
 				"gray-100": "#F3F4F6",
 				"gray-200": "#E5E7EB",
@@ -56,7 +83,6 @@ module.exports = {
 				"gray-500": "#6B7280",
 				"gray-600": "#4B5563",
 				"gray-700": "#374151",
-				"gray-800": "#1F2937",
 				"gray-900": "#111827",
 
 				"red-50": "#FEF2F2",
@@ -92,6 +118,17 @@ module.exports = {
 				"yellow-800": "#997A18",
 				"yellow-900": "#806614",
 
+				"green-50": "#ECFDF5",
+				"green-100": "#D1FAE5",
+				"green-200": "#A7F3D0",
+				"green-300": "#6EE7B7",
+				"green-400": "#34D399",
+				"green-500": "#10B981",
+				"green-600": "#059669",
+				"green-700": "#047857",
+				"green-800": "#065F46",
+				"green-900": "#064E3B",
+
 				"teal-50": "#F0FDFA",
 				"teal-100": "#CCFBF1",
 				"teal-200": "#99F6E4",
@@ -103,33 +140,33 @@ module.exports = {
 				"teal-800": "#115E59",
 				"teal-900": "#134E4A",
 
-				"cyan-50": "#CFFAFE",
-				"cyan-100": "#A5F3FC",
-				"cyan-200": "#67E8F9",
-				"cyan-300": "#22D3EE",
-				"cyan-400": "#ECFEFF",
+				"cyan-50": "#ECFEFF",
+				"cyan-100": "#CFFAFE",
+				"cyan-200": "#A5F3FC",
+				"cyan-300": "#67E8F9",
+				"cyan-400": "#22D3EE",
 				"cyan-500": "#06B6D4",
 				"cyan-600": "#0891B2",
 				"cyan-700": "#0E7490",
 				"cyan-800": "#155E75",
 				"cyan-900": "#164E63",
 
-				"light-blue-50": "#E0F2FE",
-				"light-blue-100": "#BAE6FD",
-				"light-blue-200": "#7DD3FC",
-				"light-blue-300": "#38BDF8",
-				"light-blue-400": "#F0F9FF",
-				"light-blue-500": "#0EA5E9",
-				"light-blue-600": "#0284C7",
-				"light-blue-700": "#0369A1",
-				"light-blue-800": "#075985",
-				"light-blue-900": "#0C4A6E",
-
-				"blue-50": "#DBEAFE",
-				"blue-100": "#BFDBFE",
-				"blue-200": "#93C5FD",
-				"blue-300": "#60A5FA",
-				"blue-400": "#EFF6FF",
+				"lightBlue-50": "#F0F9FF",
+				"lightBlue-100": "#E0F2FE",
+				"lightBlue-200": "#BAE6FD",
+				"lightBlue-300": "#7DD3FC",
+				"lightBlue-400": "#38BDF8",
+				"lightBlue-500": "#0EA5E9",
+				"lightBlue-600": "#0284C7",
+				"lightBlue-700": "#0369A1",
+				"lightBlue-800": "#075985",
+				"lightBlue-900": "#0C4A6E",
+
+				"blue-50": "#EFF6FF",
+				"blue-100": "#DBEAFE",
+				"blue-200": "#BFDBFE",
+				"blue-300": "#93C5FD",
+				"blue-400": "#60A5FA",
 				"blue-500": "#3B82F6",
 				"blue-600": "#2563EB",
 				"blue-700": "#1D4ED8",
@@ -147,20 +184,21 @@ module.exports = {
 				"purple-800": "#4F00BF",
 				"purple-900": "#4600AA",
 
-				"violet-50": "#EDE9FE",
-				"violet-100": "#DDD6FE",
-				"violet-200": "#C4B5FD",
-				"violet-300": "#A78BFA",
-				"violet-400": "#F5F3FF",
+				"violet-50": "#F5F3FF",
+				"violet-100": "#EDE9FE",
+				"violet-200": "#DDD6FE",
+				"violet-300": "#C4B5FD",
+				"violet-400": "#A78BFA",
 				"violet-500": "#8B5CF6",
 				"violet-600": "#7C3AED",
 				"violet-700": "#6D28D9",
 				"violet-800": "#5B21B6",
 				"violet-900": "#4C1D95",
 
-				"pink-50": "#FCE7F3",
+				"pink-50": "#FDF2F8",
 				"pink-100": "#FCE7F3",
 				"pink-200": "#FBCFE8",
+				"pink-300": "#F9A8D4",
 				"pink-400": "#F472B6",
 				"pink-500": "#EC4899",
 				"pink-600": "#DB2777",
@@ -168,11 +206,11 @@ module.exports = {
 				"pink-800": "#9D174D",
 				"pink-900": "#831843",
 
-				"rose-50": "#FFE4E6",
-				"rose-100": "#FECDD3",
-				"rose-200": "#FDA4AF",
-				"rose-300": "#FB7185",
-				"rose-400": "#FFF1F2",
+				"rose-50": "#FFF1F2",
+				"rose-100": "#FFE4E6",
+				"rose-200": "#FECDD3",
+				"rose-300": "#FDA4AF",
+				"rose-400": "#FB7185",
 				"rose-500": "#F43F5E",
 				"rose-600": "#E11D48",
 				"rose-700": "#BE123C",
@@ -181,12 +219,75 @@ module.exports = {
 			},
 			fontWeight: {
 				medium: 600
+			},
+			fontSize: {
+				xs: ["0.75rem", "1rem"],
+				sm: ["0.875rem", "1.25rem"],
+				base: ["1rem", "1.5rem"],
+				lg: ["1.125rem", "1.75rem"],
+				xl: ["1.25rem", "1.75rem"],
+				"2xl": ["1.5rem", "2rem"],
+				"3xl": ["1.875rem", "2.25rem"],
+				"4xl": ["2.25rem", "2.5rem"],
+				"5xl": ["3rem", "3rem"],
+				"6xl": ["3.75rem", "3.75rem"],
+				"7xl": ["4.5rem", "4.5rem"],
+				"8xl": ["6rem", "6rem"],
+				"9xl": ["8rem", "8rem"]
+			},
+			animation: {
+				enter: "fadeInLeft 300ms ease-out",
+				exit: "fadeOutLeft 300ms ease-in forwards",
+				quickBounce: "quickBounce 200ms ease-out forwards",
+				fadeIn: "fadeIn 400ms ease-in-out forwards"
+			},
+
+			keyframes: {
+				fadeIn: {
+					"0%": {
+						opacity: "0"
+					},
+					"100%": {
+						opacity: "1"
+					}
+				},
+				fadeInLeft: {
+					"0%": {
+						opacity: "0",
+						transform: "translate(-2rem)"
+					},
+					"100%": {
+						opacity: "1",
+						transform: "translate(0)"
+					}
+				},
+				quickBounce: {
+					"0%": {
+						transform: "translateY(0px)"
+					},
+					"50%": {
+						transform: "translateY(-8px)"
+					},
+					"100%": {
+						transform: "translateY(-4px)"
+					}
+				},
+				fadeOutLeft: {
+					"0%": {
+						opacity: "1",
+						transform: "translate(0)"
+					},
+					"100%": {
+						opacity: "0",
+						transform: "translate(-2rem)"
+					}
+				}
+			},
+			transitionProperty: {
+				left: "left",
+				height: "height"
 			}
 		}
 	},
-	plugins: [
-		require("@tailwindcss/forms"),
-		require("@tailwindcss/typography"),
-		require("@headlessui/tailwindcss")
-	]
+	plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("@headlessui/tailwindcss")]
 }

package/tsconfig.lib.json

@@ -3,17 +3,24 @@
 		"declaration": true,
 		"declarationDir": "./dist/types",
 		"outDir": "./dist",
-		"module": "esnext",
+		"module": "ESNext",
 		"rootDir": "./",
-		"target": "es2021",
+		"target": "ESNext",
 		"esModuleInterop": true,
 		"moduleResolution": "node",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": ["./*"]
+			"@/*": [
+				"./*"
+			]
 		},
 		"jsx": "react-jsx"
 	},
-	"include": ["stories/**/*.ts", "utils/**/*.ts"],
-	"exclude": ["node_modules"]
-}
+	"include": [
+		"stories/**/*.ts",
+		"utils/**/*.ts"
+	],
+	"exclude": [
+		"node_modules"
+	]
+}

package/watch.js

@@ -0,0 +1,49 @@
+const path = require('path')
+const esbuild = require("esbuild")
+
+const context = {
+	logLevel: "info",
+	entryPoints: [path.resolve(__dirname, "stories/index.ts")],
+	bundle: true,
+	platform: "browser",
+	target: ["esnext"],
+	minify: true,
+	pure: ["React.createElement"],
+	jsx: 'transform',
+	loader: { '.js': 'jsx' },
+	outdir: path.resolve(__dirname, "dist"),
+	sourcemap: true,
+	external: [
+		"react",
+		"react-dom",
+		"@floating-ui/react",
+		"@headlessui/react",
+		"@headlessui/tailwindcss",
+		"@heroicons/react",
+		"@tabler/icons",
+		"@tabler/icons-react",
+		"classnames",
+		"react-icons",
+		"@storybook/react",
+		"@storybook/addon-designs",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions",
+		"@storybook/addon-links",
+		"@storybook/blocks",
+		"@storybook/manager-api",
+		"@storybook/nextjs",
+		"@storybook/react",
+		"@storybook/testing-library",
+		"@storybook/theming",
+		"storybook"
+	],
+	format: "esm"
+}
+
+async function watch() {
+	const ctx = await esbuild.context(context)
+	ctx.watch()
+	console.log(`Watching....`)
+}
+
+watch()

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/dist/types/stories/molecules/inputs/select/Select.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Select from "./Select";
-declare const meta: Meta<typeof Select>;
-type Story = StoryObj<typeof Select>;
-export declare const DefaultSelect: Story;
-export default meta;

package/dist/types/stories/molecules/inputs/textArea/TextArea.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Textarea from "./TextArea";
-declare const meta: Meta<typeof Textarea>;
-type Story = StoryObj<typeof Textarea>;
-export declare const DefaultTextarea: Story;
-export default meta;

package/stories/layouts/CardLayout/CardLayout.stories.tsx

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

package/stories/layouts/CardLayout/CardLayout.tsx

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

package/stories/layouts/CardLayout/index.tsx

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

package/stories/layouts/ModalLayout/ModalLayout.stories.tsx

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

package/stories/layouts/ModalLayout/ModalLayout.tsx

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

package/stories/layouts/ModalLayout/index.tsx

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

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

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import Select from "./Select"
-const meta: Meta<typeof Select> = {
-	title: "Design System/Molecules/Inputs/Select",
-	component: Select,
-	tags: ["autodocs"]
-}
-type Story = StoryObj<typeof Select>
-export const DefaultSelect: Story = {
-	args: {
-		label: "Label",
-		id: "select",
-		name: "select",
-		options: [
-			{ label: "Canada", value: "value1" },
-			{ label: "USA", value: "value2" }
-		],
-		isDisabled: false,
-		isError: false,
-		isRequired: false
-	}
-}
-export default meta