@agility/plenum-ui 1.3.50 → 2.0.0-rc10

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,134 @@
+//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,
+	ITextareaProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	TextInput,
+	ITextInputProps,
+	ISimpleSelectOptions
+} from "./molecules"
+// Organism Components, props, and type gaurds.
+import {
+	IAnimatedLabelInputProps,
+	IButtonDropdownProps,
+	IDropdownClassnames,
+	IDropdownProps,
+	IEmptySectionPlaceholderProps,
+	IItemProp,
+	IFormInputWithAddonsProps,
+	AnimatedLabelInput,
+	ButtonDropdown,
+	Dropdown,
+	EmptySectionPlaceholder,
+	FormInputWithAddons,
+	TextInputSelect,
+	ITextInputSelectProps
+} from "./organisms"
+
+export type {
+	IAvatarProps,
+	IBadgeProps,
+	IButtonProps,
+	ICapsuleProps,
+	ITextInputSelectProps,
+	IDynamicIconProps,
+	IIconWithShadowProps,
+	ILoaderProps,
+	IRadialProgressProps,
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ITextareaProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	IAnimatedLabelInputProps,
+	IButtonDropdownProps,
+	IDropdownClassnames,
+	IDropdownProps,
+	IEmptySectionPlaceholderProps,
+	IItemProp,
+	IFormInputWithAddonsProps,
+	UnifiedIconName,
+	IconName,
+	FAIconName,
+	BTNActionType,
+	ITextInputProps,
+	ISimpleSelectOptions
+}
+export {
+	Avatar,
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	AnimatedLabelInput,
+	ButtonDropdown,
+	Dropdown,
+	EmptySectionPlaceholder,
+	FormInputWithAddons,
+	Badge,
+	Button,
+	Capsule,
+	DynamicIcon,
+	IconWithShadow,
+	Loader,
+	RadialProgress,
+	isFAIcon,
+	isHeroIcon,
+	isTablerIcon,
+	isUnifiedIconName,
+	TextInput,
+	TextInputSelect
+}

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,51 @@
+import {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	ITextInputProps,
+	TextInput
+} from "./inputs"
+
+export type {
+	ICheckboxProps,
+	IComboboxProps,
+	IInputFieldProps,
+	IInputLabelProps,
+	INestedInputButtonProps,
+	IRadioProps,
+	ISelectProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
+	IToggleSwitchProps,
+	AcceptedInputTypes,
+	ITextInputProps
+}
+export {
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	TextInput
+}

package/stories/molecules/inputs/InputCounter/InputCounter.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import InputCounter, { IInputCounterProps } from "./InputCounter"
+
+const meta: Meta<typeof InputCounter> = {
+	title: "Design System/molecules/inputs/InputCounter",
+	component: InputCounter,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof InputCounter>
+export const DefaultInputCounterStory: Story = {
+	args: {
+		limit: 100,
+		current: 0
+	} as IInputCounterProps
+}

package/stories/molecules/inputs/InputCounter/InputCounter.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from "react"
+
+export interface IInputCounterProps {
+	/** Counter limit */
+	limit: number | undefined
+	/** Counter current number */
+	current: number
+}
+
+/** Primary UI component for user interaction */
+const InputCounter: FC<IInputCounterProps> = ({ current = 0, limit }) => {
+	return (
+		<div className="mt-1 text-center text-sm text-gray-500 flex gap-1">
+			<div className="currentCount">{current}</div>
+			{(limit || 0) > 0 && (
+				<>
+					<div>/</div>
+					<div className="limitCount">{limit}</div>
+				</>
+			)}
+		</div>
+	)
+}
+export default InputCounter

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

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

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,94 @@
+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"
+	| "currency"
+
+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
+	/**ref for input */
+	ref?: React.Ref<HTMLInputElement>
+}
+
+const InputField: React.FC<IInputFieldProps> = ({
+	type,
+	id,
+	name,
+	value,
+	isFocused,
+	isError,
+	isReadonly,
+	isDisabled,
+	handleChange,
+	required,
+	clientSideCheck = true,
+	placeholder,
+	className,
+	ref,
+	...rest
+}) => {
+
+	return (
+		<input
+			{...{
+				type,
+				id,
+				ref,
+				name,
+				value,
+				onChange: (e) => {
+					console.log(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"
+	}
+}