@agility/plenum-ui 1.3.48 → 2.0.0-rc1

package/stories/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,123 @@
+import React, { FC, useMemo } from "react"
+import { default as cn } from "classnames"
+// import Image from "next/image"
+export interface IAvatarProps {
+	/**
+	 * source url for the avatar
+	 */
+	src?: string
+	/**
+	 * Initials we use as fallback if no src is passed
+	 */
+	initials?: string
+	/**
+	 * optional status
+	 */
+	status?: "offline" | "online" | "busy"
+	/**
+	 * avatar picture size (also affects status indicator)
+	 */
+	size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl"
+	/**
+	 * avatar img alt
+	 */
+	alt?: string
+}
+
+/**
+ * Avatar component that shows profile image or name initials of the user
+ */
+const Avatar: FC<IAvatarProps> = ({ src, status, size = "md", alt = "Avatar image", initials }: IAvatarProps) => {
+	const imageStyles = cn("rounded-full", {
+		"h-6 w-6": size === "xxs",
+		"h-8 w-8": size === "xs",
+		"h-10 w-10": size === "sm",
+		"h-12 w-12": size === "md",
+		"h-14 w-14": size === "lg",
+		"h-16 w-16": size === "xl"
+	})
+	const initialsStyles = cn("inline-flex items-center justify-center rounded-full bg-gray-500", {
+		"h-6 w-6": size === "xxs",
+		"h-8 w-8": size === "xs",
+		"h-10 w-10": size === "sm",
+		"h-12 w-12": size === "md",
+		"h-14 w-14": size === "lg",
+		"h-16 w-16": size === "xl"
+	})
+	const fontStyles = cn("font-medium leading-none text-white uppercase", {
+		"text-xs": size === "xxs" || size === "xs",
+		"text-sm": size === "sm",
+		"text-base": size === "md",
+		"text-lg": size === "lg",
+		"text-xl": size === "xl"
+	})
+	const defaultAvatarStyles = cn("inline-block rounded-full overflow-hidden bg-gray-100", {
+		"h-6 w-6": size === "xxs",
+		"h-8 w-8": size === "xs",
+		"h-10 w-10": size === "sm",
+		"h-12 w-12": size === "md",
+		"h-14 w-14": size === "lg",
+		"h-16 w-16": size === "xl"
+	})
+
+	const statusStyles = cn("absolute top-0 right-0 block rounded-full ring-2 ring-white", {
+		"h-1.5 w-1.5": size === "xxs",
+		"h-2 w-2": size === "xs",
+		"h-2.5 w-2.5": size === "sm",
+		"h-3 w-3": size === "md",
+		"h-3.5 w-3.5": size === "lg",
+		"h-4 w-4": size === "xl",
+		"bg-gray-300": status === "offline",
+		"bg-red-400": status === "busy",
+		"bg-green-400": status === "online"
+	})
+	const imageSize: number = useMemo(() => {
+		let imageSize: number = 0
+		switch (size) {
+			case "xxs":
+				imageSize = 24
+				break
+			case "xs":
+				imageSize = 32
+				break
+			case "sm":
+				imageSize = 40
+				break
+			case "md":
+				imageSize = 48
+				break
+			case "lg":
+				imageSize = 56
+				break
+			case "xl":
+				imageSize = 64
+				break
+			default:
+				imageSize = 48
+				break
+		}
+		return imageSize
+	}, [size])
+
+	return (
+		<span className="inline-block relative">
+			{src ? (
+				// eslint-disable-next-line @next/next/no-img-element
+				<img className={imageStyles} width={imageSize} height={imageSize} src={src} alt={alt} loading="eager" />
+			) : initials ? (
+				<span className={initialsStyles}>
+					<span className={fontStyles}>{initials}</span>
+				</span>
+			) : (
+				<span className={defaultAvatarStyles}>
+					<svg className="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+					</svg>
+				</span>
+			)}
+			{status && <span className={statusStyles}></span>}
+		</span>
+	)
+}
+
+export default Avatar

package/stories/atoms/Avatar/index.ts

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

package/stories/atoms/badges/Badge.tsx

@@ -0,0 +1,127 @@
+import React from "react"
+import { default as cn } from "classnames"
+import { ClassNameWithAutocomplete } from "@/utils/types"
+import { DynamicIcon } from "../icons"
+export interface IBadgeProps {
+	/** The content scheme of the badge */
+	color: "primary" | "secondary" | "danger" | "warning" | "success" | "info" | "basic" | "pink"
+	/** Render with slightly rounded corners or as a pill shape */
+	variant: "rounded" | "pill"
+	/** The text content of the badge */
+	label: string
+	/** The size of the badge */
+	size?: "sm" | "lg"
+	/** Render a loader inside the badge */
+	loading?: boolean
+	/** Render with a small circle in a darker shade of the color chosen*/
+	statusDot?: boolean
+	/** Render with a button to remove the badge */
+	removeButton?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+	/** Render the badge as a clickable button */
+	actionButton?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+}
+const Badge: React.FC<IBadgeProps> = ({
+	color,
+	variant,
+	label,
+	size = "sm",
+	loading,
+	statusDot,
+	removeButton,
+	actionButton
+}) => {
+	const badgeStyles = cn(
+		"text-sm flex items-center font-medium py-[2px] focus:ring-1 focus:ring-purple-600 focus:ring-offset-2 focus:ring-offset-white outline-0",
+		{
+			"rounded-[3px]": variant === "rounded",
+			"rounded-full px-[6px]": variant === "pill",
+			"rounded-full": variant === "pill" && size === "lg",
+			"px-[6px] text-xs": size === "sm",
+			"px-[10px]": size === "lg",
+			"pl-[10px]": !statusDot && size === "lg",
+			"pl-2": !statusDot && size === "sm",
+			"pr-3": !removeButton && size === "lg",
+			"pr-[10px]": !removeButton && size === "sm",
+			"gap-x-[6px]": statusDot || removeButton || loading,
+			"bg-purple-100 text-purple-800 ": color === "primary",
+			"bg-violet-100 text-violet-800": color === "secondary",
+			"bg-pink-100 text-pink-800": color === "pink",
+			"bg-red-100 text-red-800": color === "danger",
+			"bg-blue-100 text-blue-800": color === "info",
+			"bg-green-100 text-green-800": color === "success",
+			"bg-yellow-100 text-yellow-800": color === "warning",
+			"bg-gray-100 text-gray-800": color === "basic"
+		}
+	)
+	const statusDotStyles = cn("rounded-full h-[6px] p-[1px] w-[6px]", {
+		"bg-purple-400 text-purple-400": color === "primary",
+		"bg-violet-400 text-violet-400": color === "secondary",
+		"bg-pink-400 text-pink-400": color === "pink",
+		"bg-red-400 text-red-400": color === "danger",
+		"bg-blue-400 text-blue-400": color === "info",
+		"bg-green-400 text-green-400": color === "success",
+		"bg-yellow-400 text-yellow-400": color === "warning",
+		"bg-gray-400 text-gray-400": color === "basic"
+	})
+	const removeButtonStyles: ClassNameWithAutocomplete = cn(
+		"h-4 w-4 group-focus-within:ring-1 group-focus-within:ring-purple-600 rounded-full  group-focus-within:ring-offset-[1px] group-focus-within:ring-offset-white outline-0",
+		{
+			"text-purple-400": color === "primary",
+			"text-violet-400": color === "secondary",
+			"text-pink-400": color === "pink",
+			"text-red-400": color === "danger",
+			"text-blue-400": color === "info",
+			"text-green-400": color === "success",
+			"text-yellow-400": color === "warning",
+			"text-gray-400": color === "basic"
+		}
+	)
+
+	const loaderStyles = cn("h-4 w-4 rounded-full border-2 animate-spin", {
+		"border-purple-400 !border-r-purple-200": color === "primary",
+		"border-violet-400 !border-r-violet-200": color === "secondary",
+		"border-pink-400 !border-r-pink-200": color === "pink",
+		"border-red-400 !border-r-red-200": color === "danger",
+		"border-blue-400 !border-r-blue-200": color === "info",
+		"border-green-400 !border-r-green-200": color === "success",
+		"border-yellow-400 !border-r-yellow-200": color === "warning",
+		"border-gray-400 !border-r-gray-200": color === "basic"
+	})
+
+	return actionButton ? (
+		<button {...{ ...actionButton, className: badgeStyles }}>
+			{statusDot && <div className={statusDotStyles} role="status" />}
+			{label}
+			{removeButton && (
+				<button
+					{...{
+						removeButton,
+						"aria-label": `Remove ${label}`,
+						className: `${removeButton?.className || ""} group outline-0 `
+					}}
+				>
+					<DynamicIcon {...{ icon: "IconX", className: removeButtonStyles }} />
+				</button>
+			)}
+		</button>
+	) : (
+		<div className={badgeStyles}>
+			{loading && <div className={loaderStyles} role="status" />}
+			{!loading && statusDot && <div className={statusDotStyles} role="status" />}
+			{label}
+			{!loading && removeButton && (
+				<button
+					{...{
+						...removeButton,
+						"aria-label": `Remove ${label}`,
+						className: `${removeButton?.className || ""} group outline-0 `
+					}}
+				>
+					<DynamicIcon {...{ icon: "XIcon", className: removeButtonStyles }} />
+				</button>
+			)}
+		</div>
+	)
+}
+
+export default Badge

package/stories/atoms/badges/Pill/Pill.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Badge from "../Badge"
+
+const meta: Meta<typeof Badge> = {
+	title: "Design System/atoms/Badges/Pill",
+	component: Badge,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=12-755&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+type Story = StoryObj<typeof Badge>
+export const SmallPrimaryPill: Story = {
+	args: {
+		variant: "pill",
+		label: "Badge",
+		color: "primary"
+	}
+}
+export const PillAsButton: Story = {
+	args: {
+		variant: "pill",
+		label: "Badge",
+		color: "primary",
+		actionButton: { onClick: () => window.alert("action button clicked") }
+	}
+}
+export const SmallPrimaryPillWithRemoveButton: Story = {
+	args: {
+		...SmallPrimaryPill.args,
+		removeButton: { onClick: () => window.alert("remove button clicked") }
+	}
+}
+export const SmallPrimaryPillWithStatusDot: Story = {
+	args: {
+		...SmallPrimaryPill.args,
+		statusDot: true
+	}
+}
+export const SmallPrimaryPillWithStatusDotAndRemoveButton: Story = {
+	args: {
+		...SmallPrimaryPillWithRemoveButton.args,
+		...SmallPrimaryPillWithStatusDot.args
+	}
+}
+export const LargePrimaryPill: Story = {
+	args: {
+		variant: "pill",
+		label: "Badge",
+		color: "primary",
+		size: "lg"
+	}
+}
+export const LargePrimaryPillWithRemoveButton: Story = {
+	args: {
+		...LargePrimaryPill.args,
+		removeButton: { onClick: () => window.alert("remove button clicked") }
+	}
+}
+export const LargePrimaryPillWithStatusDot: Story = {
+	args: {
+		...LargePrimaryPill.args,
+		statusDot: true
+	}
+}
+export const LargePrimaryPillWithStatusDotAndRemoveButton: Story = {
+	args: {
+		...LargePrimaryPillWithRemoveButton.args,
+		...LargePrimaryPillWithStatusDot.args
+	}
+}
+export default meta

package/stories/atoms/badges/Rounded/Rounded.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Badge from "../Badge"
+
+const meta: Meta<typeof Badge> = {
+	title: "Design System/atoms/Badges/Rounded",
+	component: Badge,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=12-755&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+type Story = StoryObj<typeof Badge>
+export const SmallPrimaryRounded: Story = {
+	args: {
+		variant: "rounded",
+		label: "Badge",
+		color: "primary"
+	}
+}
+export const RoundedAsButton: Story = {
+	args: {
+		variant: "rounded",
+		label: "Badge",
+		color: "primary",
+		actionButton: { onClick: () => window.alert("action button clicked") }
+	}
+}
+export const SmallPrimaryRoundedWithRemoveButton: Story = {
+	args: {
+		...SmallPrimaryRounded.args,
+		removeButton: { onClick: () => window.alert("remove button clicked") }
+	}
+}
+export const SmallPrimaryRoundedWithStatusDot: Story = {
+	args: {
+		...SmallPrimaryRounded.args,
+		statusDot: true
+	}
+}
+export const SmallPrimaryRoundedWithStatusDotAndRemoveButton: Story = {
+	args: {
+		...SmallPrimaryRoundedWithRemoveButton.args,
+		...SmallPrimaryRoundedWithStatusDot.args
+	}
+}
+export const LargePrimaryRounded: Story = {
+	args: {
+		variant: "rounded",
+		label: "Badge",
+		color: "primary",
+		size: "lg"
+	}
+}
+export const LargePrimaryRoundedWithRemoveButton: Story = {
+	args: {
+		...LargePrimaryRounded.args,
+		removeButton: { onClick: () => window.alert("remove button clicked") }
+	}
+}
+export const LargePrimaryRoundedWithStatusDot: Story = {
+	args: {
+		...LargePrimaryRounded.args,
+		statusDot: true
+	}
+}
+export const LargePrimaryRoundedWithStatusDotAndRemoveButton: Story = {
+	args: {
+		...LargePrimaryRoundedWithRemoveButton.args,
+		...LargePrimaryRoundedWithStatusDot.args
+	}
+}
+export default meta

package/stories/atoms/badges/index.ts

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

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

@@ -0,0 +1,69 @@
+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/Alternative",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+// #region Alternative Button Stories
+export const Alternative: Story = {
+	args: {
+		actionType: "alternative",
+		label: "Button",
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+export const AlternativeTrailingIcon: Story = {
+	args: {
+		...Alternative.args,
+		icon: defaultIcon,
+		iconPosition: "trailing"
+	}
+}
+export const AlternativeLeadingIcon: Story = {
+	args: {
+		...AlternativeTrailingIcon.args,
+		iconPosition: "leading"
+	}
+}
+export const AlternativeExtraSmall: Story = {
+	args: {
+		...Alternative.args,
+		size: "sm"
+	}
+}
+export const AlternativeSmall: Story = {
+	args: {
+		...Alternative.args,
+		size: "sm"
+	}
+}
+export const AlternativeMedium: Story = {
+	args: {
+		...Alternative.args,
+		size: "md"
+	}
+}
+
+export const AlternativeLarge: Story = {
+	args: {
+		...Alternative.args,
+		size: "lg"
+	}
+}
+export const AlternativeExtraLarge: Story = {
+	args: {
+		...Alternative.args,
+		size: "xl"
+	}
+}
+// #endregion

package/stories/atoms/buttons/Button/Button.tsx

@@ -0,0 +1,123 @@
+import Loader from "stories/atoms/loaders/Loader"
+import { default as cn } from "classnames"
+import { HTMLAttributeAnchorTarget } from "react"
+import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
+
+// import Loader from "../loaders/loader/Loader"
+
+export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
+export interface IButtonProps 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
+	/** The Icon to be displayed inside the button. */
+	icon?: IDynamicIconProps
+	/** Does the button width grow to fill it's container? */
+	fullWidth?: boolean
+	/** Optionally render as anchor tag */
+	asLink?: {
+		href: string
+		target: HTMLAttributeAnchorTarget
+		title?: string
+	}
+	/** The placement of the icon relative to the text content. */
+	iconPosition?: "trailing" | "leading"
+	/** Use an custom svg element */
+	CustomSVGIcon?: JSX.Element
+	/** Is the associated content loading? */
+	isLoading?: boolean
+	className?: string
+}
+/**
+ * Primary UI component for user interaction
+ */
+const Button = ({
+	actionType = "primary",
+	size = "sm",
+	label,
+	icon,
+	CustomSVGIcon,
+	fullWidth = false,
+	iconPosition = "trailing",
+	asLink,
+	isLoading = false,
+	className,
+	...props
+}: IButtonProps) => {
+	const iconStyles = cn(
+		{ "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
+		{ "text-purple-700 h-5 w-5 ": actionType === "secondary" },
+		{ "text-gray-700  h-5 w-5": 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  font-medium p-2 rounded-[3px] !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": size === "xs" },
+				{ "px-[13px] py-[9px] text-sm": size === "sm" },
+				{ "px-[17px] py-[9px] text-sm": size === "md" },
+				{ "px-[17px] py-[9px] text-base": size === "lg" },
+				{ "px-[25px] py-[13px] text-base": 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}
+		>
+			{CustomSVGIcon &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : (
+					<i>{CustomSVGIcon}</i>
+				))}
+
+			{icon &&
+				iconPosition === "leading" &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : (
+					<DynamicIcon {...{ ...icon, className: iconStyles }} />
+				))}
+
+			{!icon && !CustomSVGIcon && isLoading && (
+				<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+			)}
+			{label}
+			{icon &&
+				iconPosition === "trailing" &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : (
+					<DynamicIcon {...{ ...icon, className: iconStyles }} />
+				))}
+		</button>
+	)
+}
+
+export default Button

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

@@ -0,0 +1,71 @@
+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/Danger",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+// #region Danger Button Stories
+export const Danger: Story = {
+	args: {
+		actionType: "danger",
+		label: "Danger Zone!",
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+export const DangerTrailingIcon: Story = {
+	args: {
+		...Danger.args,
+		icon: {
+			...defaultIcon,
+			icon: "TrashIcon"
+		},
+		iconPosition: "trailing"
+	}
+}
+export const DangerLeadingIcon: Story = {
+	args: {
+		...DangerTrailingIcon.args,
+		iconPosition: "leading"
+	}
+}
+export const DangerExtraSmall: Story = {
+	args: {
+		...Danger.args,
+		size: "sm"
+	}
+}
+export const DangerSmall: Story = {
+	args: {
+		...Danger.args,
+		size: "sm"
+	}
+}
+export const DangerMedium: Story = {
+	args: {
+		...Danger.args,
+		size: "md"
+	}
+}
+export const DangerLarge: Story = {
+	args: {
+		...Danger.args,
+		size: "lg"
+	}
+}
+export const DangerExtraLarge: Story = {
+	args: {
+		...Danger.args,
+		size: "xl"
+	}
+}
+// #endregion