@agility/plenum-ui 2.0.0-rc2 → 2.0.0-rc21

package/local.sh

@@ -0,0 +1,100 @@
+#! /usr/bin/bash
+
+# ANSI escape codes for formatting
+GREEN_BOLD='\033[1;32m'
+ORANGE_BOLD='\033[1;33m'
+RED_BOLD='\033[1;31m'
+BLUE_BOLD='\033[1;34m'
+RESET='\033[0m'
+DIR="$PWD"
+
+# The required yarn version to use this script
+REQUIRED_YARN_VERSION="1.22.19"
+
+# Get the installed Yarn version
+INSTALLED_YARN_VERSION=$(yarn --version 2>/dev/null)
+
+unlink_package() {
+  local package_name="${1:-@agility/plenum-ui}"
+  if [ -z "$1" ]; then
+    yarn unlink
+  else
+    cd "$DIR/node_modules/$package_name"
+    yarn unlink
+  fi
+  unlink_exit_code=$?
+  if [ $unlink_exit_code -ne 0 ]; then
+    echo -e "${ORANGE_BOLD}agility-cms-manager-app-react:warning${RESET} yarn unlink for '$package_name' encountered an error, but script will continue. \n"
+  fi
+
+  cd "$DIR"
+  echo -e "\n"
+}
+
+link_package() {
+  local package_name="${1:-@agility/plenum-ui}"
+  if [ -z "$1" ]; then
+    yarn link
+  else
+    cd "$DIR/node_modules/$package_name"
+    yarn link
+  fi
+  unlink_exit_code=$?
+  if [ $unlink_exit_code -ne 0 ]; then
+    echo -e "${RED_BOLD}agility-cms-manager-app-react:error${RESET} yarn link for '$package_name' failed. Script cannot continue, exiting script."
+    exit 1
+  else
+    echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} yarn link for '$package_name' successful\n"
+  fi
+
+  cd "$DIR"
+}
+
+check_yarn_version() {
+  # Check if Yarn is installed and compare the version
+  if [ -n "$INSTALLED_YARN_VERSION" ] && [ "$INSTALLED_YARN_VERSION" != "$REQUIRED_YARN_VERSION" ]; then
+    echo -e "${RED_BOLD}error${RESET} Yarn version $required_version is required, but found version $INSTALLED_YARN_VERSION."
+    exit 1
+  fi
+
+  echo -e "${BLUE_BOLD}info${RESET} Yarn version is $INSTALLED_YARN_VERSION. Proceeding with the script...\n"
+}
+
+### START SCRIPT
+
+check_yarn_version
+
+echo -e "Starting @agility/plenum-ui local watch script \n"
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} unlinking existing symlink"
+yarn unlink
+if [ $? -ne 0 ]; then
+  echo "yarn unlink for @agility/plenum-ui encountered an error, but script will continue. \n"
+fi
+
+if [ ! -d "node_modules" ] || [ ! -d "node_modules/react" ] || [ ! -d "node_modules/react-dom" ]; then
+   echo -e "${ORANGE_BOLD}@agility/plenum-ui:warning${RESET} Could not find node_modules."
+   echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} installing dependencies...\n"
+
+   yarn install
+
+   if [ $? -eq 0 ]; then
+      echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} Finished installing dependencies"
+   else
+      echo -e "${RED_BOLD}@agility/plenum-ui:error${RESET} Couldn't install dependencies. Exiting script."
+      exit 1
+  fi
+fi
+
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} unlinking existing symlinks"
+unlink_package react
+unlink_package react-dom
+unlink_package
+
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} setting up symlinks...\n"
+
+link_package react
+link_package react-dom
+link_package 
+
+echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} You can now run 'yarn start-cms:local' in agility-cms-manager-app-react\n"
+yarn start:watch

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc2",
+	"version": "2.0.0-rc21",
 	"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/buttons/Button/Alternative/Alternative.stories.ts

@@ -41,6 +41,13 @@ export const AlternativeExtraSmall: Story = {
 		size: "sm"
 	}
 }
+export const AlternativeSimpleIconName: Story = {
+	args: {
+		...Alternative.args,
+		icon: defaultIcon.icon,
+		iconPosition: "leading"
+	}
+}
 export const AlternativeSmall: Story = {
 	args: {
 		...Alternative.args,

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

@@ -1,20 +1,22 @@
 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
+	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
+	icon?: IDynamicIconProps | UnifiedIconName
 	/** Does the button width grow to fill it's container? */
 	fullWidth?: boolean
 	/** Optionally render as anchor tag */
@@ -30,23 +32,28 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	/** Is the associated content loading? */
 	isLoading?: boolean
 	className?: string
+	iconObj?: React.ReactNode
 }
 /**
  * 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 _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" },
@@ -88,6 +95,7 @@ const Button = ({
 				},
 				className ? className : ""
 			)}
+			ref={ref}
 			{...props}
 		>
 			{CustomSVGIcon &&
@@ -96,11 +104,20 @@ const Button = ({
 				) : (
 					<i>{CustomSVGIcon}</i>
 				))}
+			{iconObj &&
+				iconPosition === "leading" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
 
 			{icon &&
 				iconPosition === "leading" &&
 				(isLoading ? (
 					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
 				) : (
 					<DynamicIcon {...{ ...icon, className: iconStyles }} />
 				))}
@@ -113,11 +130,22 @@ const Button = ({
 				iconPosition === "trailing" &&
 				(isLoading ? (
 					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
 				) : (
 					<DynamicIcon {...{ ...icon, className: iconStyles }} />
 				))}
+			{iconObj &&
+				iconPosition === "trailing" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
 		</button>
 	)
 }
 
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button)
+
 export default Button

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

@@ -38,6 +38,13 @@ export const DangerLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const DangerSimpleIconName: Story = {
+	args: {
+		...Danger.args,
+		icon: "TrashIcon",
+		iconPosition: "leading"
+	}
+}
 export const DangerExtraSmall: Story = {
 	args: {
 		...Danger.args,

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

@@ -39,6 +39,13 @@ export const PrimaryLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const PrimarySimpleIconName: Story = {
+	args: {
+		...Primary.args,
+		icon: "CheckIcon",
+		iconPosition: "leading"
+	}
+}
 export const PrimaryTrailingIcon: Story = {
 	args: {
 		...PrimaryLeadingIcon.args,

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

@@ -41,6 +41,13 @@ export const SecondaryLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const SecondarySimpleIconName: Story = {
+	args: {
+		...Secondary.args,
+		icon: "BellIcon",
+		iconPosition: "leading"
+	}
+}
 export const SecondaryExtraSmall: Story = {
 	args: {
 		...Secondary.args,

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

@@ -1,5 +1,5 @@
 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"
@@ -31,7 +31,8 @@ export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconNam
 	return isTablerIcon(name) || isFAIcon(name)
 }
 
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+//export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+export interface IDynamicIconProps {
 	icon: UnifiedIconName
 	className?: ClassNameWithAutocomplete
 	outline?: boolean

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';