@agility/plenum-ui 2.0.0-rc9 → 2.0.0

package/dist/types/stories/atoms/buttons/Button/Alternative/Alternative.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Alternative: Story;
+export declare const AlternativeDisabled: Story;
 export declare const AlternativeTrailingIcon: Story;
 export declare const AlternativeLeadingIcon: Story;
 export declare const AlternativeExtraSmall: Story;

package/dist/types/stories/atoms/buttons/Button/Button.d.ts

@@ -1,7 +1,7 @@
-import { HTMLAttributeAnchorTarget } from "react";
+import React, { HTMLAttributeAnchorTarget } from "react";
 import { UnifiedIconName, IDynamicIconProps } from "../../icons";
 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'. */
@@ -26,10 +26,6 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
     isLoading?: boolean;
     className?: string;
     iconObj?: React.ReactNode;
-    ref?: React.LegacyRef<HTMLButtonElement>;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Button: ({ actionType, size, label, icon, iconObj, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ref, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/types/stories/atoms/buttons/Button/Danger/Danger.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Danger: Story;
+export declare const DangerDisabled: Story;
 export declare const DangerTrailingIcon: Story;
 export declare const DangerLeadingIcon: Story;
 export declare const DangerSimpleIconName: Story;

package/dist/types/stories/atoms/buttons/Button/Primary/Primary.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;
+export declare const PrimaryDisabled: Story;
 export declare const PrimaryLeadingIcon: Story;
 export declare const PrimarySimpleIconName: Story;
 export declare const PrimaryTrailingIcon: Story;

package/dist/types/stories/atoms/buttons/Button/Secondary/Secondary.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Secondary: Story;
+export declare const SecondaryDisabled: Story;
 export declare const SecondaryTrailingIcon: Story;
 export declare const SecondaryLeadingIcon: Story;
 export declare const SecondarySimpleIconName: Story;

package/dist/types/stories/atoms/buttons/Capsule/Capsule.d.ts

@@ -3,7 +3,7 @@ import { BTNActionType } from "../Button/Button";
 /**
  * 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/dist/types/stories/atoms/icons/DynamicIcon.d.ts

@@ -6,12 +6,12 @@ import { TablerIconName } from "./tablerIconNames";
 import { ClassNameWithAutocomplete } from "@/utils/types";
 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 declare function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons;
 export declare function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
 export declare function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
 export declare function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     icon: UnifiedIconName;
     className?: ClassNameWithAutocomplete;
     outline?: boolean;

package/dist/types/stories/atoms/icons/TablerIcon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { TablerIconName } from "./tablerIconNames";
 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/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 } from "./molecules";
-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 };
-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 };
+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, 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/molecules/inputs/InputField/InputField.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "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 */
@@ -23,8 +23,8 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
     required?: boolean;
     /** use input psuedo classes for :valid and :invalid styles. on by default */
     clientSideCheck?: boolean;
-    /**ref for input */
-    ref?: React.Ref<HTMLInputElement>;
+    /** Placeholder text */
+    placeholder?: string;
 }
-declare const InputField: React.FC<IInputFieldProps>;
-export default InputField;
+declare const _InputField: React.ForwardRefExoticComponent<IInputFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default _InputField;

package/dist/types/stories/molecules/inputs/TextInput/TextInput.d.ts

@@ -28,7 +28,7 @@ export interface ITextInputProps {
     /** Max length of input character  */
     maxLength?: number;
     /** Callback on change */
-    onChange(value: string): void;
+    handleChange(value: string): void;
     /** input value */
     value: string;
     /**Placeholder input text*/

package/dist/types/stories/molecules/inputs/select/Select.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-export type ISimpleSelectOptions = {
+export interface ISimpleSelectOptions {
     label: string;
     value: string;
-};
+}
 export interface ISelectProps {
     /** Label */
     label?: string;
@@ -22,6 +22,8 @@ export interface ISelectProps {
     isRequired?: boolean;
     value?: string;
     className?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 declare const Select: React.FC<ISelectProps>;
 export default Select;

package/dist/types/stories/molecules/inputs/textArea/TextArea.d.ts

@@ -1,11 +1,15 @@
 import React from "react";
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+    display: string;
+    htmlFor?: string;
+}
 export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
     /** Input ID */
     id?: string;
     /** Input Name */
     name?: string;
     /** Label for the input */
-    label?: string;
+    label?: ILabelProps;
     /** Error state */
     isError?: boolean;
     /** If field is required */

package/dist/types/stories/molecules/inputs/toggleSwitch/ToggleSwitch.d.ts

@@ -1,18 +1,21 @@
 import React from "react";
 import { IDynamicIconProps } from "@/stories/atoms";
+interface ToggleSwitchLabel {
+    text: string | JSX.Element;
+    className?: string;
+    xPosition?: "left" | "right";
+}
 export interface IToggleSwitchProps {
     isChecked: boolean;
     onChange: (isChecked: boolean) => void;
-    label?: {
-        text: string | JSX.Element;
-        className?: string;
-        xPosition?: "left" | "right";
-    };
-    screenReaderLabel: string;
+    label?: ToggleSwitchLabel;
+    screenReaderLabel?: string;
     name: string;
     id: string;
-    variant: "base" | "short";
+    variant?: "base" | "short";
     withIcon?: IDynamicIconProps;
+    disabled?: boolean;
+    groupClassName?: string;
 }
 declare const ToggleSwitch: React.FC<IToggleSwitchProps>;
 export default ToggleSwitch;

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

@@ -1,18 +1,18 @@
 import React from "react";
 import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
-import { ITextareaProps } from "@/stories/molecules/inputs/textArea/TextArea";
-interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
     display: string;
 }
-export interface IAnimatedLabelInputProps {
+export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
     id: string;
     containerStyles?: string;
     message?: string;
-    input?: IInputFieldProps;
-    textarea?: ITextareaProps;
     required?: boolean;
     isError?: boolean;
+    isShowCounter?: boolean;
+    maxLength?: number;
     label: ILabelProps;
+    handleChange: (value: string) => void;
 }
 declare const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps>;
 export default AnimatedLabelInput;

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

@@ -1,3 +1,3 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput";
-export default AnimatedLabelInput;
 export type { IAnimatedLabelInputProps };
+export default AnimatedLabelInput;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { ITextareaProps } from "@/stories/molecules/inputs/textArea";
+export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
+    id: string;
+    containerStyles?: string;
+    message?: string;
+    required?: boolean;
+    isError?: boolean;
+    handleChange: (value: string) => void;
+}
+declare const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps>;
+export default AnimatedLabelTextArea;

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

@@ -0,0 +1,3 @@
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea";
+export type { IAnimatedLabelTextAreaProps };
+export default AnimatedLabelTextArea;

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

@@ -4,6 +4,7 @@ import { IDropdownProps } from "../DropdownComponent";
 export interface IButtonDropdownProps {
     button: IButtonProps;
     dropDown: IDropdownProps;
+    hideDivider?: boolean;
     placement?: IDropdownProps["placement"];
     offsetOptions?: IDropdownProps["offsetOptions"];
 }

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

@@ -1,36 +1,47 @@
 import React, { HTMLAttributes } from "react";
 import { Placement } from "@floating-ui/react";
 import { ClassNameWithAutocomplete } from "utils/types";
-import { IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons";
-export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
-    icon?: IDynamicIconProps | UnifiedIconName;
+import { IDynamicIconProps } from "@/stories/atoms/icons";
+export interface IItemProp {
+    icon?: IDynamicIconProps;
     iconPosition?: "trailing" | "leading";
-    label: string;
+    label: string | JSX.Element;
     onClick?(): void;
     isEmphasized?: boolean;
     key: React.Key;
-}
-export interface IDropdownClassnames {
-    groupClassname?: ClassNameWithAutocomplete;
-    itemsClassname?: ClassNameWithAutocomplete;
-    itemClassname?: ClassNameWithAutocomplete;
-    activeItemClassname?: ClassNameWithAutocomplete;
-    buttonClassname?: ClassNameWithAutocomplete;
+    iconObj?: JSX.Element;
 }
 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;
+    iconSpacingClassname?: ClassNameWithAutocomplete;
     placement?: Placement;
     offsetOptions?: Partial<{
         mainAxis: number;
         crossAxis: number;
         alignmentAxis: number | null;
     }>;
+    disabled?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
-export declare const defaultClassNames: IDropdownClassnames;
+export declare const defaultClassNames: {
+    groupClassname: string;
+    itemsClassname: string;
+    itemClassname: string;
+    activeItemClassname: string;
+    buttonClassname: string;
+    iconClassname: string;
+    iconSpacingClassname: 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/EmptySectionPlaceholder/index.d.ts

@@ -1,3 +1,3 @@
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
-export default EmptySectionPlaceholder;
 export type { IEmptySectionPlaceholderProps };
+export default EmptySectionPlaceholder;

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

@@ -1,8 +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, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
-export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
+export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };

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-rc9",
+	"version": "2.0.0",
 	"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 ./dist/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/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/Alternative/Alternative.stories.ts

@@ -22,6 +22,16 @@ export const Alternative: Story = {
 		}
 	}
 }
+export const AlternativeDisabled: Story = {
+	args: {
+		actionType: "alternative",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
 export const AlternativeTrailingIcon: Story = {
 	args: {
 		...Alternative.args,