@agility/plenum-ui 2.0.0-rc3 → 2.0.0-rc30

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc3",
+	"version": "2.0.0-rc30",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -17,19 +17,35 @@
 		"storybook:tw": "tailwindcss -o ./lib/tailwind.css -w ",
 		"storybook": "npm-run-all -p \"storybook:*\" ",
 		"dev": "yarn storybook",
-		"build:tw": "tailwindcss -o ./lib/tailwind.css",
+		"build:tw": "tailwindcss -o ./dist/tailwind.css",
 		"build:tsc": "yarn node build.js",
 		"prepare": "yarn build",
-		"build": "npm run clean && npm-run-all -s \"build:*\" ",
+		"build": "yarn clean && npm-run-all -s \"build:*\" ",
 		"clean": "rimraf dist",
-		"create-component": "node scripts/create-component.js"
+		"create-component": "node scripts/create-component.js",
+		"start:local": "bash ./local.sh",
+		"start:watch": "yarn node watch.js"
 	},
-	"devDependencies": {
+	"dependencies": {
 		"@floating-ui/react": "^0.25.0",
 		"@headlessui/react": "^1.7.10",
 		"@headlessui/tailwindcss": "^0.1.2",
 		"@heroicons/react": "^1.0.5",
 		"@next/font": "^13.4.12",
+		"@tabler/icons": "^2.26.0",
+		"@tabler/icons-react": "^2.27.0",
+		"@tailwindcss/forms": "^0.5.3",
+		"@tailwindcss/typography": "^0.5.9",
+		"classnames": "^2.3.2",
+		"concurrently": "^7.6.0",
+		"next": "13.1.6",
+		"npm-dts": "^1.3.12",
+		"npm-run-all": "^4.1.5",
+		"postcss": "^8.4.21",
+		"tailwindcss": "^3.2.4",
+		"typescript": "^5.1.6"
+	},
+	"devDependencies": {
 		"@storybook/addon-designs": "^7.0.1",
 		"@storybook/addon-essentials": "^7.1.1",
 		"@storybook/addon-interactions": "^7.1.1",
@@ -40,27 +56,28 @@
 		"@storybook/react": "^7.1.1",
 		"@storybook/testing-library": "^0.2.0",
 		"@storybook/theming": "^7.1.1",
-		"@tabler/icons": "^2.26.0",
-		"@tabler/icons-react": "^2.27.0",
-		"@tailwindcss/forms": "^0.5.3",
-		"@tailwindcss/typography": "^0.5.9",
 		"@types/node": "18.11.18",
 		"autoprefixer": "^10.4.13",
-		"classnames": "^2.3.2",
-		"concurrently": "^7.6.0",
 		"esbuild": "^0.18.19",
 		"eslint": "8.32.0",
 		"eslint-config-next": "13.1.6",
 		"eslint-plugin-storybook": "^0.6.13",
-		"next": "13.1.6",
-		"npm-dts": "^1.3.12",
-		"npm-run-all": "^4.1.5",
-		"postcss": "^8.4.21",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-icons": "^4.10.1",
-		"storybook": "^7.1.1",
-		"tailwindcss": "^3.2.4",
-		"typescript": "^5.1.6"
+		"rimraf": "^5.0.1",
+		"storybook": "^7.1.1"
+	},
+	"peerDependencies": {
+		"@floating-ui/react": "^0.25.0",
+		"@headlessui/react": "^1.7.10",
+		"@headlessui/tailwindcss": "^0.1.2",
+		"@heroicons/react": "^1.0.5",
+		"@tabler/icons": "^2.26.0",
+		"@tabler/icons-react": "^2.27.0",
+		"classnames": "^2.3.2",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-icons": "^4.10.1"
 	}
-}
+}

package/rollup.config.mjs

@@ -0,0 +1,42 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+
+
+const config = [
+	{
+
+		input: 'stories/index.ts',
+
+		output: [
+			{
+				file: "lib/index.js",
+				format: 'cjs',
+				sourcemap: true
+			},
+			{
+				file: "lib/index.esm.js",
+				format: 'esm',
+				sourcemap: true
+			}
+		],
+		external: ["react", "react-dom"],
+		plugins: [
+			peerDepsExternal(),
+			resolve(),
+			commonjs(),
+			typescript({
+				tsconfig: "./tsconfig.lib.json",
+			})
+		]
+	},
+	{
+		input: "lib/esm/types/index.d.ts",
+		output: [{ file: "dist/index.d.ts", format: "esm" }],
+		plugins: [dts()],
+		external: ["react", "react-dom"],
+	},
+];
+
+export default config;

package/stories/Introduction.mdx

@@ -143,7 +143,7 @@ In your app entry point (i.e. \`_app.tsx\`), import the \`globals.css\` file fro
 
 ```jsx
 import "<RELATIVE_PATH>/globals.css";
-import "@agility/plenum-ui/lib/tailwind.css";
+import "@agility/plenum-ui/dist/lib/tailwind.css";
 ```
 
 Make sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.

package/stories/atoms/badges/Badge.tsx

@@ -117,7 +117,7 @@ const Badge: React.FC<IBadgeProps> = ({
 						className: `${removeButton?.className || ""} group outline-0 `
 					}}
 				>
-					<DynamicIcon {...{ icon: "XIcon", className: removeButtonStyles }} />
+					<DynamicIcon {...{ icon: "IconX", className: removeButtonStyles }} />
 				</button>
 			)}
 		</div>

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

@@ -1,12 +1,14 @@
 import Loader from "stories/atoms/loaders/Loader"
 import { default as cn } from "classnames"
-import { HTMLAttributeAnchorTarget } from "react"
+import React, { HTMLAttributeAnchorTarget, forwardRef } 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"> {
+
+export interface IButtonProps
+	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType?: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */
@@ -31,26 +33,27 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	isLoading?: boolean
 	className?: string
 	iconObj?: React.ReactNode
-	ref?: React.LegacyRef<HTMLButtonElement>
 }
 /**
  * Primary UI component for user interaction
  */
-const Button = ({
-	actionType = "primary",
-	size = "sm",
-	label,
-	icon,
-	iconObj,
-	CustomSVGIcon,
-	fullWidth = false,
-	iconPosition = "trailing",
-	asLink,
-	isLoading = false,
-	className,
-	ref,
-	...props
-}: IButtonProps) => {
+const _Button = (
+	{
+		actionType = "primary",
+		size = "sm",
+		label,
+		icon,
+		iconObj,
+		CustomSVGIcon,
+		fullWidth = false,
+		iconPosition = "leading",
+		asLink,
+		isLoading = false,
+		className,
+		...props
+	}: IButtonProps,
+	ref: React.LegacyRef<HTMLButtonElement>
+) => {
 	const iconStyles = cn(
 		{ "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
 		{ "text-purple-700 h-5 w-5 ": actionType === "secondary" },
@@ -143,4 +146,6 @@ const Button = ({
 	)
 }
 
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button)
+
 export default Button

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

@@ -27,7 +27,7 @@ export const DangerTrailingIcon: Story = {
 		...Danger.args,
 		icon: {
 			...defaultIcon,
-			icon: "TrashIcon"
+			icon: "IconTrash"
 		},
 		iconPosition: "trailing"
 	}
@@ -41,7 +41,7 @@ export const DangerLeadingIcon: Story = {
 export const DangerSimpleIconName: Story = {
 	args: {
 		...Danger.args,
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		iconPosition: "leading"
 	}
 }

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

@@ -33,7 +33,7 @@ export const PrimaryLeadingIcon: Story = {
 		...Primary.args,
 		icon: {
 			...defaultIcon,
-			icon: "CheckIcon",
+			icon: "IconCheck",
 			outline: false
 		},
 		iconPosition: "leading"
@@ -42,7 +42,7 @@ export const PrimaryLeadingIcon: Story = {
 export const PrimarySimpleIconName: Story = {
 	args: {
 		...Primary.args,
-		icon: "CheckIcon",
+		icon: "IconCheck",
 		iconPosition: "leading"
 	}
 }

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

@@ -44,7 +44,7 @@ export const SecondaryLeadingIcon: Story = {
 export const SecondarySimpleIconName: Story = {
 	args: {
 		...Secondary.args,
-		icon: "BellIcon",
+		icon: "IconBell",
 		iconPosition: "leading"
 	}
 }

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

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

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

@@ -6,7 +6,8 @@ import { UnifiedIconName } from "../../icons/DynamicIcon"
 /**
  * Capsule Style Button
  */
-export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface ICapsuleProps
+	extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */

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

@@ -29,7 +29,7 @@ export const TablerIconSolid: Story = {
 }
 export const TablerIconOutline: Story = {
 	args: {
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		outline: true
 	}
 }

package/stories/atoms/icons/DynamicIcon.tsx

@@ -1,20 +1,18 @@
 import React from "react"
-// TODO: Fix heroicons support 
+// 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"
+import TablerIcon from "./TablerIcon"
 
 export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons
-
 export type FAIconName = keyof typeof FA
 
-export type UnifiedIconName = IconName | TablerIconName | FAIconName
+export type UnifiedIconName = TablerIconName | IconName | FAIconName
 
 export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
 	return name in SolidIcons || name in OutlineIcons
@@ -27,11 +25,12 @@ export function isTablerIcon(name: UnifiedIconName): name is 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)
+	return isTablerIcon(name) // || isHeroIcon(name) || isFAIcon(name)
 }
 
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: UnifiedIconName
 	className?: ClassNameWithAutocomplete
 	outline?: boolean
@@ -62,6 +61,7 @@ export const DynamicIcon = ({
 			/>
 		)
 	}
+
 	if (isFAIcon(icon)) {
 		const Icon = FA[icon]
 		return (

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

@@ -11,13 +11,13 @@ type Story = StoryObj<typeof IconWithShadow>
 
 export const HeroIconSolid: Story = {
 	args: {
-		icon: "CubeTransparentIcon",
+		icon: "IconCube",
 		outline: false
 	}
 }
 export const HeroIconOutline: Story = {
 	args: {
-		icon: "CubeTransparentIcon",
+		icon: "IconCube",
 		outline: true
 	}
 }
@@ -35,7 +35,7 @@ export const TablerIconOutline: Story = {
 }
 export const FAIcon: Story = {
 	args: {
-		icon: "FaGithub",
+		icon: "IconBrandGithub",
 		outline: true
 	}
 }

package/stories/atoms/icons/TablerIcon.tsx

@@ -3,7 +3,7 @@ import { TablerIconName } from "./tablerIconNames"
 import * as TablerIcons from "@tabler/icons-react"
 import { ClassNameWithAutocomplete } from "@/utils/types"
 
-export interface ITablerIconProps extends React.ComponentProps<"i"> {
+export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: TablerIconName
 	className?: ClassNameWithAutocomplete
 }

package/stories/atoms/loaders/Loader.tsx

@@ -1,15 +1,21 @@
 import React from "react"
-import classNames, { default as cn } from "classnames"
+import { 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" />
+	return (
+		<>
+			<i
+				className={cn(
+					"rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
+					className ? className : "border-purple-700 border-r-gray-200"
+				)}
+				role="status"
+			/>
+		</>
+	)
 }
 
 export default Loader

package/stories/index.ts

@@ -34,7 +34,7 @@ import {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	Checkbox,
@@ -44,14 +44,18 @@ import {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
-	ToggleSwitch
+	Textarea,
+	ToggleSwitch,
+	TextInput,
+	ITextInputProps,
+	ISimpleSelectOptions
 } from "./molecules"
 // Organism Components, props, and type gaurds.
 import {
 	IAnimatedLabelInputProps,
+	AnimatedLabelTextArea,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
@@ -60,7 +64,9 @@ import {
 	ButtonDropdown,
 	Dropdown,
 	EmptySectionPlaceholder,
-	FormInputWithAddons
+	FormInputWithAddons,
+	TextInputSelect,
+	ITextInputSelectProps
 } from "./organisms"
 
 export type {
@@ -68,6 +74,7 @@ export type {
 	IBadgeProps,
 	IButtonProps,
 	ICapsuleProps,
+	ITextInputSelectProps,
 	IDynamicIconProps,
 	IIconWithShadowProps,
 	ILoaderProps,
@@ -79,12 +86,12 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	IAnimatedLabelInputProps,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
@@ -92,7 +99,9 @@ export type {
 	UnifiedIconName,
 	IconName,
 	FAIconName,
-	BTNActionType
+	BTNActionType,
+	ITextInputProps,
+	ISimpleSelectOptions
 }
 export {
 	Avatar,
@@ -103,9 +112,10 @@ export {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
+	Textarea,
 	ToggleSwitch,
 	AnimatedLabelInput,
+	AnimatedLabelTextArea,
 	ButtonDropdown,
 	Dropdown,
 	EmptySectionPlaceholder,
@@ -120,5 +130,7 @@ export {
 	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
-	isUnifiedIconName
+	isUnifiedIconName,
+	TextInput,
+	TextInputSelect
 }

package/stories/molecules/index.ts

@@ -6,7 +6,8 @@ import {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	Checkbox,
@@ -16,8 +17,10 @@ import {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
-	ToggleSwitch
+	Textarea,
+	ToggleSwitch,
+	ITextInputProps,
+	TextInput
 } from "./inputs"
 
 export type {
@@ -28,8 +31,21 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ISimpleSelectOptions,
+	ITextareaProps,
 	IToggleSwitchProps,
-	AcceptedInputTypes
+	AcceptedInputTypes,
+	ITextInputProps
+}
+export {
+	Checkbox,
+	Combobox,
+	InputField,
+	InputLabel,
+	NestedInputButton,
+	Radio,
+	Select,
+	Textarea,
+	ToggleSwitch,
+	TextInput
 }
-export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch }

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.tsx

@@ -13,14 +13,15 @@ export type AcceptedInputTypes =
 	| "tel"
 	| "text"
 	| "url"
+	| "currency"
 
-export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
+export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
 	/** Callback on change */
 	handleChange: (value: string) => void
 	/** Input ID*/
-	id: string
+	id?: string
 	/** Input Name */
-	name: string
+	name?: string
 	/** Force the focus state on the input */
 	isFocused?: boolean
 	/** Error condition */
@@ -37,7 +38,10 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
 	required?: boolean
 	/** use input psuedo classes for :valid and :invalid styles. on by default */
 	clientSideCheck?: boolean
-	/** use placeholder string */
+	/** Placeholder text */
+	placeholder?: string
+	/**ref for input */
+	ref?: React.Ref<HTMLInputElement>
 }
 
 const InputField: React.FC<IInputFieldProps> = ({
@@ -52,24 +56,26 @@ const InputField: React.FC<IInputFieldProps> = ({
 	handleChange,
 	required,
 	clientSideCheck = true,
-	placeholder,
 	className,
+	placeholder,
+	ref,
 	...rest
 }) => {
 	return (
 		<input
 			{...{
+				ref,
 				type,
 				id,
 				name,
 				value,
 				onChange: (e) => {
-					handleChange(e.target.value)
+					if (handleChange) handleChange(e.target.value)
 				},
 				autoFocus: isFocused,
 				readOnly: isReadonly,
 				disabled: isDisabled,
-				placeholder: placeholder || " ",
+				placeholder: placeholder || undefined,
 				required,
 				"aria-invalid": isError,
 				"aria-disabled": isDisabled,