@agility/plenum-ui 2.1.11 → 2.1.13

package/jest.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "jest";
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+	// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+	dir: "./"
+});
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+	coverageProvider: "v8",
+	testEnvironment: "jsdom",
+	// Add more setup options before each test is run
+	setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"]
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

package/jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.1.11",
+	"version": "2.1.13",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -24,7 +24,8 @@
 		"clean": "rimraf dist",
 		"create-component": "node scripts/create-component.js",
 		"start:local": "bash ./local.sh",
-		"start:watch": "yarn node watch.js"
+		"start:watch": "yarn node watch.js",
+		"test": "vitest"
 	},
 	"dependencies": {
 		"@floating-ui/react": "^0.25.0",
@@ -36,6 +37,7 @@
 		"@tabler/icons-react": "^2.27.0",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.9",
+		"@vitejs/plugin-react": "^4.3.3",
 		"classnames": "^2.3.2",
 		"concurrently": "^7.6.0",
 		"next": "13.1.6",
@@ -56,17 +58,25 @@
 		"@storybook/react": "^7.1.1",
 		"@storybook/testing-library": "^0.2.0",
 		"@storybook/theming": "^7.1.1",
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/jest-dom": "^6.6.2",
+		"@testing-library/react": "^16.0.1",
+		"@types/jest": "^29.5.14",
 		"@types/node": "18.11.18",
 		"autoprefixer": "^10.4.13",
 		"esbuild": "^0.18.19",
 		"eslint": "8.32.0",
 		"eslint-config-next": "13.1.6",
 		"eslint-plugin-storybook": "^0.6.13",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-icons": "^4.10.1",
 		"rimraf": "^5.0.1",
-		"storybook": "^7.1.1"
+		"storybook": "^7.1.1",
+		"ts-node": "^10.9.2",
+		"vitest": "^2.1.4"
 	},
 	"peerDependencies": {
 		"@floating-ui/react": "^0.25.0",

package/setupTests.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

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

@@ -0,0 +1,115 @@
+import Button from "../Button";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+const defaultProps = {
+	label: "Button Test"
+};
+
+describe("<Button>", () => {
+	it("renders with the correct label", () => {
+		render(<Button {...defaultProps} />);
+
+		const buttonElement = screen.getByRole("button");
+		expect(buttonElement).toHaveTextContent("Button Test");
+	});
+
+	describe("actionType", () => {
+		it("renders with primary as default", () => {
+			render(<Button {...defaultProps} />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("bg-violet-800");
+		});
+
+		it("renders with actionType as secondary", () => {
+			render(<Button {...defaultProps} actionType="secondary" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("bg-purple-50");
+		});
+
+		it("renders with actionType as alternative", () => {
+			render(<Button {...defaultProps} actionType="alternative" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("border-gray-300");
+		});
+
+		it("renders with actionType as danger", () => {
+			render(<Button {...defaultProps} actionType="danger" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("bg-red-600");
+		});
+
+		it("renders with actionType as warning", () => {
+			render(<Button {...defaultProps} actionType="warning" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("bg-yellow-500");
+		});
+	});
+
+	describe("size", () => {
+		it("defaults to size sm", () => {
+			render(<Button {...defaultProps} />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("px-[13px]");
+		});
+
+		it("redners with size xs", () => {
+			render(<Button {...defaultProps} size="xs" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("px-[11px]");
+		});
+
+		it("redners with size md", () => {
+			render(<Button {...defaultProps} size="md" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("px-[17px] text-sm");
+		});
+
+		it("redners with size lg", () => {
+			render(<Button {...defaultProps} size="lg" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("px-[17px] text-base");
+		});
+
+		it("redners with size xl", () => {
+			render(<Button {...defaultProps} size="xl" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).toHaveClass("px-[25px]");
+		});
+	});
+
+	describe("asLink", () => {
+		it("renders as <a /> when asLink is true", () => {
+			render(<Button {...defaultProps} asLink={{ href: "#", target: "_blank" }} />);
+
+			const linkElement = screen.getByRole("link");
+			expect(linkElement).toBeInTheDocument();
+		});
+
+		it("renders as <button /> when asLink is false", () => {
+			render(<Button {...defaultProps} />);
+
+			const linkElement = screen.getByRole("button");
+			expect(linkElement).toBeInTheDocument();
+		});
+	});
+
+	it("calls onClick when clicked", () => {
+		const handleClick = vitest.fn();
+		render(<Button {...defaultProps} onClick={handleClick} />);
+
+		const buttonElement = screen.getByRole("button");
+		fireEvent.click(buttonElement);
+
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+});

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

@@ -1,10 +1,10 @@
-import React, { FC } from "react"
+import { FC } from "react";
 
 export interface IInputCounterProps {
 	/** Counter limit */
-	limit: number | undefined
+	limit: number | undefined;
 	/** Counter current number */
-	current: number
+	current: number;
 }
 
 /** Primary UI component for user interaction */
@@ -19,6 +19,6 @@ const InputCounter: FC<IInputCounterProps> = ({ current = 0, limit }) => {
 				</>
 			)}
 		</div>
-	)
-}
-export default InputCounter
+	);
+};
+export default InputCounter;

package/stories/molecules/inputs/InputLabel/InputLabel.tsx

@@ -1,16 +1,16 @@
-import React, { FC } from "react"
-import { default as cn } from "classnames"
+import { FC } from "react";
+import { default as cn } from "classnames";
 
 export interface IInputLabelProps {
 	/** Prop comment */
-	isPlaceholder?: boolean
-	id: string
-	isRequired?: boolean
-	isDisabled?: boolean
-	isError?: boolean
-	isActive?: boolean
-	isFocused?: boolean
-	label?: string
+	isPlaceholder?: boolean;
+	id: string;
+	isRequired?: boolean;
+	isDisabled?: boolean;
+	isError?: boolean;
+	isActive?: boolean;
+	isFocused?: boolean;
+	label?: string;
 }
 
 /** Comment */
@@ -32,14 +32,14 @@ const InputLabel: FC<IInputLabelProps> = ({
 		{ "text-red-500 bg-white": !isPlaceholder && isError },
 		{ "text-gray-500/[.5]": isDisabled },
 		{ "inline-block  transition-all text-sm text-gray-700 mb-1": !isPlaceholder }
-	)
-	if (!label) return null
+	);
+	if (!label) return null;
 	return (
 		<label htmlFor={id} className={labelStyles}>
 			{label}
 			{isRequired && <span className="text-red-500"> *</span>}
 		</label>
-	)
-}
+	);
+};
 
-export default InputLabel
+export default InputLabel;

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
+import type { Meta, StoryObj } from "@storybook/react";
+import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton";
 
 const meta: Meta<typeof NestedInputButton> = {
 	title: "Design System/molecules/inputs/Nested Input Button",
@@ -12,10 +12,10 @@ const meta: Meta<typeof NestedInputButton> = {
 			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=114-2290&mode=dev&device-scaling=100%25&page-id=0%3A1"
 		}
 	}
-}
+};
 
-export default meta
-type Story = StoryObj<typeof NestedInputButton>
+export default meta;
+type Story = StoryObj<typeof NestedInputButton>;
 
 export const RightAligned: Story = {
 	args: {
@@ -25,28 +25,24 @@ export const RightAligned: Story = {
 		},
 		ctaLabel: "Search",
 		align: "right",
-		isClear: false,
-		onClickHandler: () => window.alert("Clicked"),
-		buttonProps: {
-			type: "button"
-		}
+		isClear: false
 	}
-}
+};
 export const LeftAligned: Story = {
 	args: {
 		...RightAligned.args,
 		align: "left"
 	}
-}
+};
 export const IsClear: Story = {
 	args: {
 		...RightAligned.args,
 		isClear: true
 	}
-}
+};
 export const NoIcon: Story = {
 	args: {
 		...RightAligned.args,
 		icon: undefined
 	}
-}
+};

package/stories/molecules/inputs/select/Select.tsx

@@ -95,7 +95,7 @@ const Select: React.FC<ISelectProps> = ({
 			>
 				{options.map(({ value, label }) => {
 					return (
-						<option key={value} value={value}>
+						<option key={value} value={label}>
 							{label}
 						</option>
 					)

package/stories/molecules/inputs/textArea/TextArea.tsx

@@ -1,46 +1,46 @@
-import React, { forwardRef, useEffect, useId, useState } from "react"
-import { default as cn } from "classnames"
-import InputLabel from "../InputLabel"
-import InputCounter from "../InputCounter"
+import React, { useId } from "react";
+import { default as cn } from "classnames";
+import InputLabel from "../InputLabel";
+import InputCounter from "../InputCounter";
 
 interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
-	display: string
-	htmlFor?: string
+	display: string;
+	htmlFor?: string;
 }
 
 export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
 	/** Input ID */
-	id?: string
+	id?: string;
 	/** Input Name */
-	name?: string
+	name?: string;
 	/** Label for the input */
-	label?: ILabelProps
+	label?: ILabelProps;
 	/** Error state */
-	isError?: boolean
+	isError?: boolean;
 	/** If field is required */
-	isRequired?: boolean
+	isRequired?: boolean;
 	/** Disabled state */
-	isDisabled?: boolean
+	isDisabled?: boolean;
 	/** Set default value */
-	defaultValue?: string
+	defaultValue?: string;
 
-	value?: string
+	value?: string;
 
 	/** Message shown under the text field */
-	message?: string
+	message?: string;
 	/** Input character counter */
-	isShowCounter?: boolean
+	isShowCounter?: boolean;
 	/** Max length of input character  */
-	maxLength?: number
+	maxLength?: number;
 	/** Callback on change */
-	onChange?(value: string): void
+	onChange?(value: string): void;
 	/** Number of rows */
-	rows?: number
+	rows?: number;
 	/** Number of cols */
-	cols?: number
-	placeholder?: string
-	className?: string
-	ref?: React.LegacyRef<HTMLTextAreaElement>
+	cols?: number;
+	placeholder?: string;
+	className?: string;
+	ref?: React.LegacyRef<HTMLTextAreaElement>;
 }
 
 const Textarea: React.FC<ITextareaProps> = ({
@@ -63,11 +63,11 @@ const Textarea: React.FC<ITextareaProps> = ({
 	ref,
 	...rest
 }) => {
-	const uniqueID = useId()
+	const uniqueID = useId();
 
-	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
+	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
 
-	if (!id) id = `ta-${uniqueID}`
+	if (!id) id = `ta-${uniqueID}`;
 
 	if (!label) {
 		return (
@@ -75,9 +75,9 @@ const Textarea: React.FC<ITextareaProps> = ({
 				ref={ref}
 				maxLength={maxLength}
 				onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-					const targetValue = e.target.value
+					const targetValue = e.target.value;
 					if (onChange) {
-						onChange(targetValue)
+						onChange(targetValue);
 					}
 				}}
 				rows={rows}
@@ -98,7 +98,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 				placeholder={placeholder}
 				{...rest}
 			/>
-		)
+		);
 	}
 
 	//with label
@@ -119,9 +119,9 @@ const Textarea: React.FC<ITextareaProps> = ({
 					ref={ref}
 					maxLength={maxLength}
 					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-						const targetValue = e.target.value
+						const targetValue = e.target.value;
 						if (onChange) {
-							onChange(targetValue)
+							onChange(targetValue);
 						}
 					}}
 					rows={rows}
@@ -152,7 +152,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 				)}
 			</div>
 		</div>
-	)
-}
+	);
+};
 
-export default Textarea
+export default Textarea;

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.stories.tsx

@@ -1,26 +1,26 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
+import type { Meta, StoryObj } from "@storybook/react";
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea";
 
 const meta: Meta<typeof AnimatedLabelTextArea> = {
 	title: "Design System/organisms/Animated Label Text Area",
 	component: AnimatedLabelTextArea,
 	tags: ["autodocs"],
 	argTypes: {}
-}
+};
 
-export default meta
-type Story = StoryObj<typeof AnimatedLabelTextArea>
+export default meta;
+type Story = StoryObj<typeof AnimatedLabelTextArea>;
 export const DefaultAnimatedLabelTextAreasStory: Story = {
 	args: {
 		id: "test",
-		label: "Label"
+		message: "Label"
 	} as IAnimatedLabelTextAreaProps
-}
+};
 
 export const DefaultAnimatedLabelTextAreasStoryWithPlaceholder: Story = {
 	args: {
 		id: "test",
-		label: "Label",
+		message: "Label",
 		placeholder: "Placeholder"
 	} as IAnimatedLabelTextAreaProps
-}
+};

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
+import type { Meta, StoryObj } from "@storybook/react";
+import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
 
 const meta: Meta<typeof FormInputWithAddons> = {
 	title: "Design System/organisms/Form Input With Addons",
@@ -12,10 +12,10 @@ const meta: Meta<typeof FormInputWithAddons> = {
 			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=85-1269&mode=design"
 		}
 	}
-}
+};
 
-export default meta
-type Story = StoryObj<typeof FormInputWithAddons>
+export default meta;
+type Story = StoryObj<typeof FormInputWithAddons>;
 
 export const DefaultFormInputWithAddons: Story = {
 	args: {
@@ -26,7 +26,7 @@ export const DefaultFormInputWithAddons: Story = {
 		labelClass: "text-gray-900",
 		trailIcon: { icon: "IconSearch" }
 	}
-}
+};
 export const FormInputWithAddonBTN: Story = {
 	args: {
 		id: "appSearch",
@@ -39,10 +39,7 @@ export const FormInputWithAddonBTN: Story = {
 				className: "h-5 w-5 text-gray-400"
 			},
 			ctaLabel: "Edit",
-			align: "right",
-			onClickHandler: () => {
-				alert("Button Clicked")
-			}
+			align: "right"
 		}
 	}
-}
+};

package/tsconfig.json

@@ -1,29 +1,30 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./*"]
+		},
+		"types": ["vitest/globals"]
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"exclude": ["node_modules"]
 }

package/utils/types.ts

@@ -1,3 +1,2 @@
-import { HTMLAttributes } from "react"
-import React from "react"
-export type ClassNameWithAutocomplete = React.ComponentPropsWithoutRef<"div">["className"] 
+import React from "react";
+export type ClassNameWithAutocomplete = React.ComponentPropsWithoutRef<"div">["className"];

package/vitest.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+	plugins: [react()],
+	test: {
+		globals: true,
+		environment: "jsdom",
+		setupFiles: "./setupTests.js"
+	}
+});