@agility/plenum-ui 1.3.50 → 2.0.0-rc2

package/stories/atoms/index.ts

@@ -0,0 +1,46 @@
+import Avatar, { IAvatarProps } from "./Avatar"
+import Badge, { IBadgeProps } from "./badges"
+import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons"
+import {
+	DynamicIcon,
+	FAIconName,
+	IDynamicIconProps,
+	IIconWithShadowProps,
+	IconName,
+	IconWithShadow,
+	UnifiedIconName,
+	isFAIcon,
+	isHeroIcon,
+	isTablerIcon,
+	isUnifiedIconName
+} from "./icons"
+import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders"
+
+export type {
+	IAvatarProps,
+	IBadgeProps,
+	IButtonProps,
+	ICapsuleProps,
+	IDynamicIconProps,
+	IIconWithShadowProps,
+	ILoaderProps,
+	IRadialProgressProps,
+	UnifiedIconName,
+	IconName,
+	FAIconName,
+	BTNActionType
+}
+export {
+	Avatar,
+	Badge,
+	Button,
+	Capsule,
+	DynamicIcon,
+	IconWithShadow,
+	Loader,
+	RadialProgress,
+	isFAIcon,
+	isHeroIcon,
+	isTablerIcon,
+	isUnifiedIconName
+}

package/stories/atoms/loaders/Loader.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Loader from "./Loader"
+
+const meta: Meta<typeof Loader> = {
+	title: "Design System/atoms/Loaders/Loader",
+	component: Loader
+}
+
+type Story = StoryObj<typeof Loader>
+
+export const DefaultLoader: Story = {
+  args: { className: "" },
+}
+
+export default meta

package/stories/atoms/loaders/Loader.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import classNames, { default as cn } from "classnames"
+
+export interface ILoaderProps {
+	className?: string
+}
+const Loader: React.FC<ILoaderProps> = ({ className }) => {
+  const outerLoaderStyles = cn(
+    "rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
+    className ? className : "border-purple-700 border-r-gray-200"
+  )
+  return <i className={outerLoaderStyles} role="status" />
+}
+
+export default Loader

package/stories/atoms/loaders/NProgress/RadialProgress.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import RadialProgress from "./RadialProgress"
+
+const meta: Meta<typeof RadialProgress> = {
+	title: "Design System/atoms/Loaders/NProgress/RadialProgress",
+	component: RadialProgress
+}
+
+type Story = StoryObj<typeof RadialProgress>
+
+export const DefaultRadialProgress: Story = {
+	args: {
+		inputValue: 33,
+		radius: 20,
+		children: <></>
+	}
+}
+
+export default meta

package/stories/atoms/loaders/NProgress/RadialProgress.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from "react"
+import { default as cn } from "classnames"
+export interface IRadialProgressProps extends React.PropsWithChildren {
+	/** Percentage value to display */
+	inputValue: number
+	/** Radius for the circle - Max value of 100 */
+	radius: number
+	/** Additional classnames */
+	className?: string
+}
+
+const RadialProgress: React.FC<IRadialProgressProps> = ({
+  inputValue,
+  radius,
+  children,
+  className,
+}) => {
+  const r = radius / 2
+
+  if (inputValue < 0) {
+    inputValue = 0
+  }
+  if (inputValue > 100) {
+    inputValue = 100
+  }
+  if (radius < 0) {
+    radius = 0
+  }
+  if (radius > 100) {
+    radius = 100
+  }
+  const drawPercentage = useMemo(() => {
+    const roundCircum = Math.round(2 * r * Math.PI)
+    console.log(roundCircum, "circumference")
+    console.log(inputValue, "input value")
+    return (inputValue * roundCircum) / 50
+  }, [inputValue, r])
+
+  const xyPos = (radius + 2) * -1
+  const viewPortXY = (radius + 2) * 2
+  return (
+    <div
+      className={cn(`overflow-visible`, className && className)}
+      style={{ height: `${viewPortXY}px`, width: `${viewPortXY}px` }}
+    >
+      <svg
+        viewBox={`${xyPos} ${xyPos} ${viewPortXY} ${viewPortXY}`}
+        data-percent={drawPercentage}
+        fill="none"
+      >
+        <circle
+          className="-rotate-90 stroke-gray-200 stroke-1"
+          cx={0}
+          cy={0}
+          r={radius}
+        ></circle>
+        <circle
+          strokeDasharray={`${drawPercentage} 999`}
+          className="m-1 -rotate-90 stroke-purple-600 stroke-1 transition-all"
+          cx={0}
+          cy={0}
+          r={radius}
+        ></circle>
+      </svg>
+      <div
+        className={cn(
+          `h-[${viewPortXY}px] w-[${viewPortXY}px] absolute inset-0 flex items-center justify-center overflow-hidden `
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default RadialProgress

package/stories/atoms/loaders/NProgress/index.ts

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

package/stories/atoms/loaders/index.ts

@@ -0,0 +1,4 @@
+import Loader, { ILoaderProps } from "./Loader"
+import RadialProgress, { IRadialProgressProps } from "./NProgress"
+export { Loader, RadialProgress }
+export type { ILoaderProps, IRadialProgressProps }

package/stories/index.ts

@@ -0,0 +1,124 @@
+//Atomic Components, props, and type gaurds.
+import {
+	IAvatarProps,
+	IBadgeProps,
+	IButtonProps,
+	ICapsuleProps,
+	IDynamicIconProps,
+	IIconWithShadowProps,
+	ILoaderProps,
+	IRadialProgressProps,
+	UnifiedIconName,
+	IconName,
+	FAIconName,
+	BTNActionType,
+	Avatar,
+	Badge,
+	Button,
+	Capsule,
+	DynamicIcon,
+	IconWithShadow,
+	Loader,
+	RadialProgress,
+	isFAIcon,
+	isHeroIcon,
+	isTablerIcon,
+	isUnifiedIconName
+} from "./atoms"
+// Molecular Components, props, and type gaurds.
+import {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ITextAreaFieldProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	TextAreaField,
+	ToggleSwitch
+} from "./molecules"
+// Organism Components, props, and type gaurds.
+import {
+	IAnimatedLabelInputProps,
+	IButtonDropdownProps,
+	IDropdownClassnames,
+	IDropdownProps,
+	IEmptySectionPlaceholderProps,
+	IItemProp,
+	IFormInputWithAddonsProps,
+	AnimatedLabelInput,
+	ButtonDropdown,
+	Dropdown,
+	EmptySectionPlaceholder,
+	FormInputWithAddons
+} from "./organisms"
+
+export type {
+	IAvatarProps,
+	IBadgeProps,
+	IButtonProps,
+	ICapsuleProps,
+	IDynamicIconProps,
+	IIconWithShadowProps,
+	ILoaderProps,
+	IRadialProgressProps,
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ITextAreaFieldProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	IAnimatedLabelInputProps,
+	IButtonDropdownProps,
+	IDropdownClassnames,
+	IDropdownProps,
+	IEmptySectionPlaceholderProps,
+	IItemProp,
+	IFormInputWithAddonsProps,
+	UnifiedIconName,
+	IconName,
+	FAIconName,
+	BTNActionType
+}
+export {
+	Avatar,
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	TextAreaField,
+	ToggleSwitch,
+	AnimatedLabelInput,
+	ButtonDropdown,
+	Dropdown,
+	EmptySectionPlaceholder,
+	FormInputWithAddons,
+	Badge,
+	Button,
+	Capsule,
+	DynamicIcon,
+	IconWithShadow,
+	Loader,
+	RadialProgress,
+	isFAIcon,
+	isHeroIcon,
+	isTablerIcon,
+	isUnifiedIconName
+}

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

@@ -0,0 +1,18 @@
+
+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

@@ -0,0 +1,22 @@
+
+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

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

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

@@ -0,0 +1,18 @@
+
+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

@@ -0,0 +1,22 @@
+
+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

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

package/stories/molecules/index.ts

@@ -0,0 +1,35 @@
+import {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ITextAreaFieldProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	TextAreaField,
+	ToggleSwitch
+} from "./inputs"
+
+export type {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ITextAreaFieldProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes
+}
+export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch }

package/stories/molecules/inputs/InputField/InputField.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import InputField from "./InputField"
+
+const meta: Meta<typeof InputField> = {
+	title: "Design System/molecules/inputs/Input Field",
+	component: InputField,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=114-1861&mode=dev&device-scaling=100%25&page-id=0%3A1"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof InputField>
+
+export const DefaultInputField: Story = {
+	args: {
+		id: "input",
+		name: "input",
+		type: "text",
+		placeholder: "Base Input Field",
+		defaultValue: "",
+		isDisabled: false
+	}
+}

package/stories/molecules/inputs/InputField/InputField.tsx

@@ -0,0 +1,88 @@
+import React from "react"
+import { default as cn } from "classnames"
+
+export type AcceptedInputTypes =
+	| "date"
+	| "datetime-local"
+	| "email"
+	| "month"
+	| "number"
+	| "password"
+	| "search"
+	| "submit"
+	| "tel"
+	| "text"
+	| "url"
+
+export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
+	/** Callback on change */
+	handleChange: (value: string) => void
+	/** Input ID*/
+	id: string
+	/** Input Name */
+	name: string
+	/** Force the focus state on the input */
+	isFocused?: boolean
+	/** Error condition */
+	isError?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Readonly state */
+	isReadonly?: boolean
+	/** Input value */
+	value: string
+	/** Type of Text Input to Render eg. "text", "email" */
+	type: AcceptedInputTypes
+	/** If field is required */
+	required?: boolean
+	/** use input psuedo classes for :valid and :invalid styles. on by default */
+	clientSideCheck?: boolean
+	/** use placeholder string */
+}
+
+const InputField: React.FC<IInputFieldProps> = ({
+	type,
+	id,
+	name,
+	value,
+	isFocused,
+	isError,
+	isReadonly,
+	isDisabled,
+	handleChange,
+	required,
+	clientSideCheck = true,
+	placeholder,
+	className,
+	...rest
+}) => {
+	return (
+		<input
+			{...{
+				type,
+				id,
+				name,
+				value,
+				onChange: (e) => {
+					handleChange(e.target.value)
+				},
+				autoFocus: isFocused,
+				readOnly: isReadonly,
+				disabled: isDisabled,
+				placeholder: placeholder || " ",
+				required,
+				"aria-invalid": isError,
+				"aria-disabled": isDisabled,
+				className: cn(
+					"peer w-full rounded border border-gray-200  px-3 text-sm font-normal  leading-5 outline-offset-0 ring-offset-0 focus:border-purple-600 focus:ring-purple-600   ",
+					isError ? "!border-red-600 !text-red-600 focus:!ring-red-600" : "",
+					isReadonly ? "!border-gray-400 !text-gray-500 focus:!ring-gray-400" : "",
+					className
+				),
+				...rest
+			}}
+		/>
+	)
+}
+
+export default InputField

package/stories/molecules/inputs/InputField/index.tsx

@@ -0,0 +1,3 @@
+import InputField, { AcceptedInputTypes, IInputFieldProps } from "./InputField"
+export type { AcceptedInputTypes, IInputFieldProps }
+export default InputField

package/stories/molecules/inputs/InputLabel/InputLabel.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import InputLabel from "./InputLabel"
+
+const meta: Meta<typeof InputLabel> = {
+	title: "Design System/molecules/inputs/Input Label",
+	component: InputLabel,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof InputLabel>
+
+export const Default: Story = {
+	args: {
+		label: "Label",
+		id: "input-label"
+	}
+}

package/stories/molecules/inputs/InputLabel/InputLabel.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react"
+import { default as cn } from "classnames"
+
+export interface IInputLabelProps {
+	/** Prop comment */
+	isPlaceholder?: boolean
+	id: string
+	isRequired?: boolean
+	isDisabled?: boolean
+	isError?: boolean
+	isActive?: boolean
+	isFocused?: boolean
+	label?: string
+}
+
+/** Comment */
+const InputLabel: FC<IInputLabelProps> = ({
+	isPlaceholder = false,
+	id,
+	isRequired,
+	isDisabled,
+	isActive,
+	isError,
+	label
+}: IInputLabelProps) => {
+	const labelStyles = cn(
+		"z-[2]",
+		{ "inline-block font-medium transition-all text-sm text-gray-700 mb-1": !isPlaceholder },
+		{ "inline-block font-medium ml-2 relative transition-all": isPlaceholder },
+		{ "text-sm text-gray-400 px-2 top-8": isPlaceholder && !isActive },
+		{ "text-xs text-gray-700 px-1 top-[10px] bg-white": isPlaceholder && isActive },
+		{ "text-xs text-red-500 px-1 top-[10px] bg-white": isPlaceholder && isError },
+		{ "text-red-500 bg-white": !isPlaceholder && isError },
+		{ "text-gray-700/[.5]": isDisabled }
+	)
+	if (!label) return null
+	return (
+		<label htmlFor={id} className={labelStyles}>
+			{label}
+			{isRequired && <span className="text-red-500"> *</span>}
+		</label>
+	)
+}
+
+export default InputLabel

package/stories/molecules/inputs/InputLabel/index.tsx

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

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
+
+const meta: Meta<typeof NestedInputButton> = {
+	title: "Design System/molecules/inputs/Nested Input Button",
+	component: NestedInputButton,
+	tags: ["autodocs"],
+	argTypes: {},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=114-2290&mode=dev&device-scaling=100%25&page-id=0%3A1"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof NestedInputButton>
+
+export const RightAligned: Story = {
+	args: {
+		icon: {
+			icon: "IconSearch",
+			className: "h-5 w-5 text-gray-400"
+		},
+		ctaLabel: "Search",
+		align: "right",
+		isClear: false,
+		onClickHandler: () => window.alert("Clicked"),
+		buttonProps: {
+			type: "button"
+		}
+	}
+}
+export const LeftAligned: Story = {
+	args: {
+		...RightAligned.args,
+		align: "left"
+	}
+}
+export const IsClear: Story = {
+	args: {
+		...RightAligned.args,
+		isClear: true
+	}
+}
+export const NoIcon: Story = {
+	args: {
+		...RightAligned.args,
+		icon: undefined
+	}
+}