@agility/plenum-ui 1.3.50 → 2.0.0-rc1

package/stories/atoms/buttons/Button/Primary/Primary.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Button from "../Button"
+import { defaultIcon } from "../defaultArgs"
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Button> = {
+	title: "Design System/atoms/Buttons/Button/Primary",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=12-149&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+//#region Primary Button Stories
+export const Primary: Story = {
+	args: {
+		actionType: "primary",
+		label: "Button",
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+export const PrimaryLeadingIcon: Story = {
+	args: {
+		...Primary.args,
+		icon: {
+			...defaultIcon,
+			icon: "CheckIcon",
+			outline: false
+		},
+		iconPosition: "leading"
+	}
+}
+export const PrimaryTrailingIcon: Story = {
+	args: {
+		...PrimaryLeadingIcon.args,
+		iconPosition: "trailing"
+	}
+}
+export const PrimaryExtraSmall: Story = {
+	args: {
+		...Primary.args,
+		size: "sm"
+	}
+}
+export const PrimarySmall: Story = {
+	args: {
+		...Primary.args,
+		size: "sm"
+	}
+}
+export const PrimaryMedium: Story = {
+	args: {
+		...Primary.args,
+		size: "md"
+	}
+}
+export const PrimaryLarge: Story = {
+	args: {
+		...Primary.args,
+		size: "lg"
+	}
+}
+export const PrimaryExtraLarge: Story = {
+	args: {
+		...Primary.args,
+		size: "xl"
+	}
+}
+// #endregion

package/stories/atoms/buttons/Button/Secondary/Secondary.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Button from "../Button"
+import { defaultIcon } from "../defaultArgs"
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Button> = {
+	title: "Design System/atoms/Buttons/Button/Secondary",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=12-213&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+// #region Secondary Button Stories
+export const Secondary: Story = {
+	args: {
+		actionType: "secondary",
+		label: "Button",
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+export const SecondaryTrailingIcon: Story = {
+	args: {
+		...Secondary.args,
+		icon: { ...defaultIcon, icon: "Icon3dCubeSphere" },
+		iconPosition: "trailing"
+	}
+}
+export const SecondaryLeadingIcon: Story = {
+	args: {
+		...SecondaryTrailingIcon.args,
+		iconPosition: "leading"
+	}
+}
+export const SecondaryExtraSmall: Story = {
+	args: {
+		...Secondary.args,
+		size: "sm"
+	}
+}
+export const SecondarySmall: Story = {
+	args: {
+		...Secondary.args,
+		size: "sm"
+	}
+}
+export const SecondaryMedium: Story = {
+	args: {
+		...Secondary.args,
+		size: "md"
+	}
+}
+export const SecondaryLarge: Story = {
+	args: {
+		...Secondary.args,
+		size: "lg"
+	}
+}
+export const SecondaryExtraLarge: Story = {
+	args: {
+		...Secondary.args,
+		size: "xl"
+	}
+}
+// #endregion

package/stories/atoms/buttons/Button/defaultArgs.ts

@@ -0,0 +1,9 @@
+import { IDynamicIconProps } from "../../icons"
+
+const defaultIcon: IDynamicIconProps = {
+	icon: "BellIcon",
+	className: "w-5 h-5",
+	outline: true
+}
+
+export { defaultIcon }

package/stories/atoms/buttons/Button/index.ts

@@ -0,0 +1,3 @@
+import Button, { IButtonProps, BTNActionType } from "./Button"
+export type { IButtonProps, BTNActionType }
+export default Button

package/stories/atoms/buttons/Capsule/Alternative/Alternative.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { defaultIcon } from "../../Button/defaultArgs"
+import Capsule from "../Capsule"
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Capsule> = {
+	title: "Design System/atoms/Buttons/Capsule/Alternative",
+	component: Capsule,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Capsule>
+export const Alternative: Story = {
+	args: {
+		label: "Alternative",
+		onClick: () => {
+			window.alert("Button clicked!")
+		},
+		actionType: "alternative"
+	}
+}

package/stories/atoms/buttons/Capsule/Capsule.tsx

@@ -0,0 +1,87 @@
+import { default as cn } from "classnames"
+import { HTMLAttributeAnchorTarget } from "react"
+import { BTNActionType, IButtonProps } from "../Button/Button"
+import { UnifiedIconName } from "../../icons/DynamicIcon"
+
+/**
+ * Capsule Style Button
+ */
+export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
+	/** Is the button a Primary CTA, alternative or danger button? */
+	actionType: BTNActionType
+	/** How lg should the button be? - Defaults to 'base'. */
+	size?: "xs" | "sm" | "md" | "lg" | "xl"
+	/** The Button's text content. */
+	label: string
+	/** Does the button width grow to fill it's container? */
+	fullWidth?: boolean
+	/** Optionally render as anchor tag */
+	asLink?: {
+		href: string
+		target: HTMLAttributeAnchorTarget
+		title?: string
+	}
+	/** Is the associated content loading? */
+	isLoading?: boolean
+	/**Optional Classname String*/
+	className?: string
+}
+const Capsule = ({
+	actionType = "primary",
+	size = "sm",
+	label,
+	fullWidth = false,
+	asLink,
+	isLoading = false,
+	className,
+	...props
+}: ICapsuleProps) => {
+	const iconStyles = cn(
+		{ "text-white": actionType === "primary" || actionType === "danger" },
+		{ "text-purple-700": actionType === "secondary" },
+		{ "text-gray-700": actionType === "alternative" }
+	)
+	const loaderColors = cn(
+		{ "border-r-white": actionType === "primary" },
+		{ "border-purple-200 border-r-purple-700": actionType === "secondary" },
+		{ "border-gray-200 border-r-gray-700": actionType === "alternative" },
+		{ "border-red-800 border-r-white": actionType === "danger" }
+	)
+	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
+
+	return (
+		<button
+			type="button"
+			className={cn(
+				"inline-flex items-center justify-center gap-x-2 text-sm font-medium p-2  !ring-offset-white outline-none   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 transition-all",
+				{ "w-full": fullWidth },
+				{ "px-[11px] py-[7px] text-xs rounded-[15px]": size === "xs" },
+				{ "px-[15px] py-[9px] text-sm rounded-[17px]": size === "sm" },
+				{ "px-[17px] py-[9px] text-sm rounded-[19px]": size === "md" },
+				{ "px-[17px] py-[9px] text-base rounded-[21px]": size === "lg" },
+				{ "px-[25px] py-[13px] text-base rounded-[25px]": size === "xl" },
+				{
+					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 ": actionType === "primary"
+				},
+				{
+					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100":
+						actionType === "secondary"
+				},
+				{
+					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300":
+						actionType === "alternative"
+				},
+				{
+					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 ":
+						actionType === "danger"
+				},
+				className ? className : ""
+			)}
+			{...props}
+		>
+			{label}
+		</button>
+	)
+}
+
+export default Capsule

package/stories/atoms/buttons/Capsule/Danger/Danger.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { defaultIcon } from "../../Button/defaultArgs"
+import Capsule from "../Capsule"
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Capsule> = {
+	title: "Design System/atoms/Buttons/Capsule/Danger",
+	component: Capsule,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Capsule>
+export const Danger: Story = {
+	args: {
+		label: "Danger",
+		onClick: () => {
+			window.alert("Button clicked!")
+		},
+		actionType: "danger"
+	}
+}

package/stories/atoms/buttons/Capsule/Primary/Primary.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { defaultIcon } from "../../Button/defaultArgs"
+import Capsule from "../Capsule"
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Capsule> = {
+	title: "Design System/atoms/Buttons/Capsule/Primary",
+	component: Capsule,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Capsule>
+export const Primary: Story = {
+	args: {
+		label: "Primary",
+		onClick: () => {
+			window.alert("Button clicked!")
+		},
+		actionType: "primary"
+	}
+}

package/stories/atoms/buttons/Capsule/Secondary/Secondary.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { defaultIcon } from "../../Button/defaultArgs"
+import Capsule from "../Capsule"
+
+const meta: Meta<typeof Capsule> = {
+	title: "Design System/atoms/Buttons/Capsule/Secondary",
+	component: Capsule,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Capsule>
+export const Secondary: Story = {
+	args: {
+		label: "Secondary",
+		onClick: () => {
+			window.alert("Button clicked!")
+		},
+		actionType: "secondary"
+	}
+}

package/stories/atoms/buttons/Capsule/index.ts

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

package/stories/atoms/buttons/FloatingActionButton/FloatingActionButton.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import FloatingActionButton, { IFloatingActionButtonProps } from "./FloatingActionButton"
+
+const meta: Meta<typeof FloatingActionButton> = {
+	title: "Design System/atoms/buttons/FloatingActionButton/FloatingActionButton",
+	component: FloatingActionButton,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof FloatingActionButton>
+export const DefaultFloatingActionButtonStory: Story = {
+	args: {}
+}

package/stories/atoms/buttons/FloatingActionButton/FloatingActionButton.tsx

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

package/stories/atoms/buttons/FloatingActionButton/index.tsx

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

package/stories/atoms/buttons/index.ts

@@ -0,0 +1,4 @@
+import Button, { BTNActionType, IButtonProps } from "./Button"
+import Capsule, { ICapsuleProps } from "./Capsule"
+export type { IButtonProps, BTNActionType, ICapsuleProps }
+export { Button, Capsule }

package/stories/atoms/crumb/Crumb.stories.tsx

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

package/stories/atoms/crumb/Crumb.tsx

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

package/stories/atoms/crumb/index.tsx

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

package/stories/atoms/icons/DynamicIcon.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DynamicIcon } from "./DynamicIcon"
+
+const meta: Meta<typeof DynamicIcon> = {
+	title: "Design System/atoms/Icons/DynamicIcon",
+	component: DynamicIcon,
+	tags: ["autodocs"]
+}
+
+type Story = StoryObj<typeof DynamicIcon>
+
+export const HeroIconSolid: Story = {
+	args: {
+		icon: "TrashIcon",
+		outline: false
+	}
+}
+export const HeroIconOutline: Story = {
+	args: {
+		icon: "TrashIcon",
+		outline: true
+	}
+}
+export const TablerIconSolid: Story = {
+	args: {
+		icon: "IconTrashFilled",
+		outline: false
+	}
+}
+export const TablerIconOutline: Story = {
+	args: {
+		icon: "TrashIcon",
+		outline: true
+	}
+}
+export const FAIcon: Story = {
+	args: {
+		icon: "FaGithub",
+		outline: true
+	}
+}
+
+export default meta

package/stories/atoms/icons/DynamicIcon.tsx

@@ -0,0 +1,90 @@
+import React from "react"
+// TODO: Fix heroicons support 
+import * as SolidIcons from "@heroicons/react/solid"
+import * as OutlineIcons from "@heroicons/react/outline"
+import * as TablerIconComponents from "@tabler/icons-react"
+import * as FA from "react-icons/fa"
+import { tablerIconNames, TablerIconName } from "./tablerIconNames"
+import { default as cn } from "classnames"
+
+import TablerIcon from "./TablerIcon"
+import { ClassNameWithAutocomplete } from "@/utils/types"
+
+export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons
+
+export type FAIconName = keyof typeof FA
+
+export type UnifiedIconName = IconName | TablerIconName | FAIconName
+
+export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
+	return name in SolidIcons || name in OutlineIcons
+}
+
+export function isTablerIcon(name: UnifiedIconName): name is TablerIconName {
+	return tablerIconNames.includes(name as TablerIconName)
+}
+
+export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA {
+	return name in FA
+}
+export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName {
+	return isTablerIcon(name) || isFAIcon(name)
+}
+
+export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+	icon: UnifiedIconName
+	className?: ClassNameWithAutocomplete
+	outline?: boolean
+	CustomSVG?: React.ReactNode
+}
+
+export const DynamicIcon = ({
+	icon,
+	className = "w-5 h-5 text-gray-400",
+	outline,
+	CustomSVG,
+	...props
+}: IDynamicIconProps): JSX.Element => {
+	if (CustomSVG) {
+		return <i {...{ ...props, className: "flex items-center justify-center" }}>{CustomSVG}</i>
+	}
+
+	if (isTablerIcon(icon)) {
+		return (
+			<TablerIcon
+				{...{
+					icon,
+					className: cn(className, {
+						"text-gray-600 h-5 w-5": !className
+					}),
+					outline
+				}}
+			/>
+		)
+	}
+	if (isFAIcon(icon)) {
+		const Icon = FA[icon]
+		return (
+			<i {...{ ...props, className: "flex items-center justify-center" }}>
+				<Icon
+					className={cn(className, {
+						"h-5 w-5 text-gray-600": !className
+					})}
+				/>
+			</i>
+		)
+	}
+	if (isHeroIcon(icon)) {
+		const Icon = outline ? OutlineIcons[icon] : SolidIcons[icon]
+		return (
+			<i {...{ ...props, className: "flex items-center justify-center" }}>
+				<Icon
+					className={cn(className, {
+						"h-5 w-5 text-gray-600": !className
+					})}
+				/>
+			</i>
+		)
+	}
+	return <></>
+}

package/stories/atoms/icons/IconWithShadow.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import IconWithShadow from "./IconWithShadow"
+
+const meta: Meta<typeof IconWithShadow> = {
+	title: "Design System/atoms/Icons/Icon With Shadow",
+	component: IconWithShadow,
+	tags: ["autodocs"]
+}
+
+type Story = StoryObj<typeof IconWithShadow>
+
+export const HeroIconSolid: Story = {
+	args: {
+		icon: "CubeTransparentIcon",
+		outline: false
+	}
+}
+export const HeroIconOutline: Story = {
+	args: {
+		icon: "CubeTransparentIcon",
+		outline: true
+	}
+}
+export const TablerIconSolid: Story = {
+	args: {
+		icon: "IconPaperclip",
+		outline: false
+	}
+}
+export const TablerIconOutline: Story = {
+	args: {
+		icon: "IconPaperclip",
+		outline: true
+	}
+}
+export const FAIcon: Story = {
+	args: {
+		icon: "FaGithub",
+		outline: true
+	}
+}
+
+export default meta

package/stories/atoms/icons/IconWithShadow.tsx

@@ -0,0 +1,16 @@
+import { DynamicIcon } from "./DynamicIcon"
+import { default as cn } from "classnames"
+import { IDynamicIconProps } from "./DynamicIcon"
+
+export interface IIconWithShadowProps extends IDynamicIconProps {}
+
+const IconWithShadow: React.FC<IIconWithShadowProps> = (props) => {
+	return (
+		<div className="flex flex-col  items-center justify-center ">
+			<DynamicIcon {...{ ...props, className: cn("h-12 w-12 text-gray-400") }} outline />
+			<div className={cn("mt-2 h-2 w-24 bg-gray-100")} style={{ borderRadius: "40%" }} />
+		</div>
+	)
+}
+
+export default IconWithShadow