@agility/plenum-ui 2.0.0-rc14 → 2.0.0-rc15

package/dist/types/stories/index.d.ts

@@ -1,5 +1,5 @@
 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";
 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";
-import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, 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, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions };
+import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, 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, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions };
 export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect };

package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts

@@ -10,19 +10,17 @@ export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
     isEmphasized?: boolean;
     key: React.Key;
 }
-export interface IDropdownClassnames {
-    groupClassname?: ClassNameWithAutocomplete;
-    itemsClassname?: ClassNameWithAutocomplete;
-    itemClassname?: ClassNameWithAutocomplete;
-    activeItemClassname?: ClassNameWithAutocomplete;
-    buttonClassname?: ClassNameWithAutocomplete;
-}
 export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
     items: IItemProp[][];
     label: string;
     CustomDropdownTrigger?: React.ReactNode;
     id: string;
-    classNames?: IDropdownClassnames;
+    groupClassname?: ClassNameWithAutocomplete;
+    itemsClassname?: ClassNameWithAutocomplete;
+    itemClassname?: ClassNameWithAutocomplete;
+    activeItemClassname?: ClassNameWithAutocomplete;
+    buttonClassname?: ClassNameWithAutocomplete;
+    iconClassname?: ClassNameWithAutocomplete;
     placement?: Placement;
     offsetOptions?: Partial<{
         mainAxis: number;
@@ -30,7 +28,14 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
         alignmentAxis: number | null;
     }>;
 }
-export declare const defaultClassNames: IDropdownClassnames;
+export declare const defaultClassNames: {
+    groupClassname: string;
+    itemsClassname: string;
+    itemClassname: string;
+    activeItemClassname: string;
+    buttonClassname: string;
+    iconClassname: string;
+};
 /** Comment */
 declare const Dropdown: React.FC<IDropdownProps>;
 export default Dropdown;

package/dist/types/stories/organisms/DropdownComponent/index.d.ts

@@ -1,4 +1,4 @@
-import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "./DropdownComponent";
-export type { IItemProp, IDropdownClassnames, IDropdownProps };
+import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent";
+export type { IItemProp, IDropdownProps };
 export { defaultClassNames };
 export default Dropdown;

package/dist/types/stories/organisms/index.d.ts

@@ -1,9 +1,9 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput";
 import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea";
 import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown";
-import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "./DropdownComponent";
+import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent";
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
 import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
-export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
 export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc14",
+	"version": "2.0.0-rc15",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -19,12 +19,10 @@
 		"dev": "yarn storybook",
 		"build:tw": "tailwindcss -o ./dist/tailwind.css",
 		"build:tsc": "yarn node build.js",
-		"Xbuild:rollup": "rollup -c",
 		"prepare": "yarn build",
 		"build": "yarn clean && npm-run-all -s \"build:*\" ",
 		"clean": "rimraf dist",
-		"create-component": "node scripts/create-component.js",
-		"buildsh": "./scripts/build.sh --external:react --external:react-dom"
+		"create-component": "node scripts/create-component.js"
 	},
 	"devDependencies": {
 		"@floating-ui/react": "^0.25.0",
@@ -32,9 +30,6 @@
 		"@headlessui/tailwindcss": "^0.1.2",
 		"@heroicons/react": "^1.0.5",
 		"@next/font": "^13.4.12",
-		"@rollup/plugin-commonjs": "^21.0.1",
-		"@rollup/plugin-node-resolve": "^13.1.3",
-		"@rollup/plugin-typescript": "^11.1.2",
 		"@storybook/addon-designs": "^7.0.1",
 		"@storybook/addon-essentials": "^7.1.1",
 		"@storybook/addon-interactions": "^7.1.1",
@@ -67,11 +62,6 @@
 		"react-dom": "18.2.0",
 		"react-icons": "^4.10.1",
 		"rimraf": "^5.0.1",
-		"rollup": "3.28.0",
-		"rollup-plugin-dts": "^5.3.1",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-typescript2": "^0.35.0",
 		"storybook": "^7.1.1",
 		"tailwindcss": "^3.2.4",
 		"typescript": "^5.1.6"

package/stories/index.ts

@@ -56,7 +56,6 @@ import {
 	AnimatedLabelTextArea,
 	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
@@ -93,7 +92,6 @@ export type {
 	IAnimatedLabelInputProps,
 	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -16,21 +16,7 @@ export interface IButtonDropdownProps {
  * Primary UI component for user interaction
  */
 const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement, offsetOptions }) => {
-	const dropDownClasses: IDropdownProps["classNames"] = {
-		...defaultClassNames,
-		groupClassname: cn(
-			"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
-			button.actionType === "primary"
-				? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
-				: "",
-			button.actionType === "secondary"
-				? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
-				: "",
-			button.actionType === "alternative"
-				? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
-				: ""
-		)
-	}
+
 	return (
 		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
 			<Button
@@ -65,7 +51,18 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 							}}
 						/>
 					),
-					classNames: dropDownClasses,
+					groupClassname: cn(
+						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+						button.actionType === "primary"
+							? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
+							: "",
+						button.actionType === "secondary"
+							? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
+							: "",
+						button.actionType === "alternative"
+							? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
+							: ""
+					),
 					offsetOptions: offsetOptions ?? {
 						crossAxis: 0,
 						mainAxis: 5, //up/down

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -28,19 +28,17 @@ export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
 	isEmphasized?: boolean
 	key: React.Key
 }
-export interface IDropdownClassnames {
-	groupClassname?: ClassNameWithAutocomplete
-	itemsClassname?: ClassNameWithAutocomplete
-	itemClassname?: ClassNameWithAutocomplete
-	activeItemClassname?: ClassNameWithAutocomplete
-	buttonClassname?: ClassNameWithAutocomplete
-}
 export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 	items: IItemProp[][]
 	label: string
 	CustomDropdownTrigger?: React.ReactNode
 	id: string
-	classNames?: IDropdownClassnames
+	groupClassname?: ClassNameWithAutocomplete
+	itemsClassname?: ClassNameWithAutocomplete
+	itemClassname?: ClassNameWithAutocomplete
+	activeItemClassname?: ClassNameWithAutocomplete
+	buttonClassname?: ClassNameWithAutocomplete
+	iconClassname?: ClassNameWithAutocomplete
 	placement?: Placement
 	offsetOptions?: Partial<{
 		mainAxis: number
@@ -48,7 +46,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 		alignmentAxis: number | null
 	}>
 }
-export const defaultClassNames: IDropdownClassnames = {
+export const defaultClassNames = {
 	groupClassname: "flex inline-block text-left",
 	itemsClassname:
 		"mt-2 origin-bottom-right rounded bg-white shadow-lg z-20 divide-y divide-gray-100  border border-gray-300  ",
@@ -56,7 +54,8 @@ export const defaultClassNames: IDropdownClassnames = {
 		"group flex font-muli  cursor-pointer items-center px-4 py-2 text-sm transition-all hover:bg-gray-100 hover:text-gray-900 justify-between gap-4 ",
 	activeItemClassname: "block px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 hover:text-gray-900",
 	buttonClassname:
-		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all   text-gray-400 hover:text-gray-600 "
+		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all   text-gray-400 hover:text-gray-600 ",
+	iconClassname: "ml-1 h-5 w-6"
 }
 
 /** Comment */
@@ -64,7 +63,12 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	items,
 	id,
 	label,
-	classNames = defaultClassNames,
+	groupClassname = defaultClassNames.groupClassname,
+	itemsClassname = defaultClassNames.itemsClassname,
+	itemClassname = defaultClassNames.itemClassname,
+	activeItemClassname = defaultClassNames.activeItemClassname,
+	buttonClassname = defaultClassNames.buttonClassname,
+	iconClassname = defaultClassNames.iconClassname,
 	CustomDropdownTrigger,
 	placement = "bottom-start",
 	offsetOptions,
@@ -104,8 +108,6 @@ const Dropdown: React.FC<IDropdownProps> = ({
 		}
 	})
 
-	const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames
-
 	return (
 		<div
 			{...{
@@ -132,7 +134,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 				) : (
 					<>
 						<span className="pl-1">{label}</span>
-						<DynamicIcon icon="ChevronDownIcon" className="ml-1 h-5 w-6 " />
+						<DynamicIcon icon="ChevronDownIcon" className={iconClassname} />
 					</>
 				)}
 			</button>

package/stories/organisms/DropdownComponent/index.ts

@@ -1,4 +1,4 @@
-import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "./DropdownComponent"
-export type { IItemProp, IDropdownClassnames, IDropdownProps }
+import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent"
+export type { IItemProp, IDropdownProps }
 export { defaultClassNames }
 export default Dropdown

package/stories/organisms/index.ts

@@ -1,7 +1,7 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput"
 import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
 import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown"
-import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "./DropdownComponent"
+import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent"
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
 import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect"
@@ -10,7 +10,6 @@ export type {
 	IAnimatedLabelInputProps,
 	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/scripts/build.sh

@@ -1,53 +0,0 @@
-#!/usr/bin/env bash
-set -e
-
-SCRIPT_DIR=$(cd ${0%/*} && pwd -P)
-
-# Known variables
-SRC='./stories'
-DST='./dist'
-name="plenum-ui"
-input="./${SRC}/index.ts"
-
-# Find executables
-esbuild=$(yarn bin esbuild)
-tsc=$(yarn bin tsc)
-resolver="${SCRIPT_DIR}/resolve-files.js"
-rewriteImports="${SCRIPT_DIR}/rewrite-imports.js"
-
-# Setup shared options for esbuild
-sharedOptions=()
-sharedOptions+=("--platform=browser")
-sharedOptions+=("--target=es2019")
-
-# Generate actual builds
-# ESM
-resolverOptions=()
-resolverOptions+=($SRC)
-resolverOptions+=('/**/*.{ts,tsx}')
-resolverOptions+=('--ignore=.test.,__mocks__')
-INPUT_FILES=$($resolver ${resolverOptions[@]})
-
-NODE_ENV=production  $esbuild $INPUT_FILES --format=esm --outdir=$DST               --outbase=$SRC --minify --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="false" ${sharedOptions[@]} &
-NODE_ENV=production  $esbuild $input       --format=esm --outfile=$DST/$name.esm.js --outbase=$SRC --minify --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="false" ${sharedOptions[@]} &
-
-# Common JS
-NODE_ENV=production  $esbuild $input --format=cjs --outfile=$DST/$name.prod.cjs --minify --bundle --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="false" ${sharedOptions[@]} $@ &
-NODE_ENV=development $esbuild $input --format=cjs --outfile=$DST/$name.dev.cjs           --bundle --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="true" ${sharedOptions[@]} $@ &
-
-# Generate types
-tsc --emitDeclarationOnly --project tsconfig.lib.json --outDir $DST &
-
-# Copy build files over
-cp -rf ./build/ $DST
-
-# Wait for all the scripts to finish
-wait
-
-# Rewrite ESM imports 😤
-$rewriteImports "$DST" '/**/*.js'
-$rewriteImports "$DST" '/**/*.d.ts'
-
-# Remove test related files
-rm -rf `$resolver "$DST" '/**/*.{test,__mocks__,}.*'`
-rm -rf `$resolver "$DST" '/**/test-utils/*'`

package/scripts/resolve-files.js

@@ -1,32 +0,0 @@
-#!/usr/bin/env node
-let fastGlob = require('fast-glob')
-
-let parts = process.argv.slice(2)
-let [args, flags] = parts.reduce(
-	([args, flags], part) => {
-		if (part.startsWith('--')) {
-			flags[part.slice(2, part.indexOf('='))] = part.slice(part.indexOf('=') + 1)
-		} else {
-			args.push(part)
-		}
-		return [args, flags]
-	},
-	[[], {}]
-)
-
-flags.ignore = flags.ignore ?? ''
-flags.ignore = flags.ignore.split(',').filter(Boolean)
-
-console.log(
-	fastGlob
-		.sync(args.join(''))
-		.filter((file) => {
-			for (let ignore of flags.ignore) {
-				if (file.includes(ignore)) {
-					return false
-				}
-			}
-			return true
-		})
-		.join('\n')
-)

package/scripts/rewrite-imports.js

@@ -1,24 +0,0 @@
-#!/usr/bin/env node
-
-let fs = require('fs')
-let path = require('path')
-let fastGlob = require('fast-glob')
-
-console.time('Rewrote imports in')
-fastGlob.sync([process.argv.slice(2).join('')]).forEach((file) => {
-	file = path.resolve(process.cwd(), file)
-	let content = fs.readFileSync(file, 'utf8')
-	let result = content.replace(/(import|export)([^"']*?)(["'])\.(.*?)\3/g, (full, a, b, _, d) => {
-		// For idempotency reasons, if `.js` already exists, then we can skip this. This allows us to
-		// run this script over and over again without adding .js files every time.
-		if (d.endsWith('.js')) {
-			return full
-		}
-
-		return `${a}${b}'.${d}.js'`
-	})
-	if (result !== content) {
-		fs.writeFileSync(file, result, 'utf8')
-	}
-})
-console.timeEnd('Rewrote imports in')