@agilant/toga-blox 1.0.6 → 1.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.6",
+	"version": "1.0.8",
 	"description": "",
 	"main": "index.js",
 	"types": "dist/index.d.ts",
@@ -17,55 +17,56 @@
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
-		"@emotion/is-prop-valid": "^1.3.0",
-		"@storybook/addon-docs": "^8.2.5",
-		"@storybook/addon-viewport": "^8.2.5",
-		"@tanstack/react-virtual": "^3.8.3",
-		"@tanstack/virtual-core": "^3.8.3",
+		"@emotion/is-prop-valid": "^1.1.3",
+		"@storybook/addon-docs": "^7.6.6",
+		"@storybook/addon-viewport": "^7.6.10",
+		"@tanstack/react-virtual": "^3.1.3",
+		"@tanstack/virtual-core": "^3.1.3",
 		"classnames": "^2.5.1",
-		"daisyui": "^4",
+		"react-router-dom": "^6.16.0",
+		"daisyui": "^3",
 		"esbuild-wasm": "^0.23.0",
-		"framer-motion": "^11.3.8",
-		"react": "^18.3.1",
-		"react-dom": "^18.3.1",
-		"tslib": "^2.6.3"
+		"framer-motion": "^11.0.8",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"tslib": "^2.3.0"
 	},
 	"devDependencies": {
-		"@fortawesome/fontawesome-svg-core": "^6.6.0",
-		"@fortawesome/free-solid-svg-icons": "^6.6.0",
+		"@fortawesome/fontawesome-svg-core": "^6.5.1",
+		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
-		"@storybook/addon-a11y": "^8.2.5",
-		"@storybook/addon-essentials": "^8.2.5",
-		"@storybook/addon-interactions": "^8.2.5",
-		"@storybook/addon-links": "^8.2.5",
-		"@storybook/addon-onboarding": "^8.2.5",
-		"@storybook/blocks": "^8.2.5",
-		"@storybook/react": "^8.2.5",
-		"@storybook/react-vite": "^8.2.5",
-		"@storybook/test": "^8.2.5",
+		"@storybook/addon-a11y": "^7.6.8",
+		"@storybook/addon-essentials": "^7.6.6",
+		"@storybook/addon-interactions": "^7.6.6",
+		"@storybook/addon-links": "^7.6.6",
+		"@storybook/addon-onboarding": "^1.0.10",
+		"@storybook/blocks": "^7.6.6",
+		"@storybook/react": "^7.6.6",
+		"@storybook/react-vite": "^7.6.6",
+		"@storybook/test": "^7.6.6",
 		"@testing-library/jest-dom": "^6.4.6",
-		"@testing-library/react": "^16.0.0",
+		"@testing-library/react": "^14.3.1",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/react-router-dom": "^5.3.3",
-		"@vitejs/plugin-react": "^4.3.1",
-		"@vitest/coverage-istanbul": "^2.0.4",
-		"@vitest/coverage-v8": "^2.0.4",
-		"autoprefixer": "^10.4.19",
-		"jsdom": "^24.1.1",
-		"nodemon": "^3.1.4",
-		"postcss": "^8.4.39",
-		"react-router-dom": "^6.25.1",
-		"storybook": "^8.2.5",
-		"tailwindcss": "^3.4.6",
-		"typescript": "^5.5.3",
-		"vite": "^5.3.4",
-		"vite-tsconfig-paths": "^4.3.2",
-		"vitest": "^2.0.4"
+		"@vitejs/plugin-react": "^4.2.1",
+		"@vitest/coverage-istanbul": "^1.2.1",
+		"@vitest/coverage-v8": "^1.2.1",
+		"autoprefixer": "^10.4.16",
+		"jsdom": "^23.2.0",
+		"nodemon": "^3.0.2",
+		"postcss": "^8.4.32",
+		"react-router-dom": "^6.16.0",
+		"storybook": "^7.6.6",
+		"tailwindcss": "^3.4.0",
+		"typescript": "^5.3.3",
+		"vite": "^4.5.1",
+		"vite-tsconfig-paths": "^4.2.2",
+		"vitest": "^1.6.0"
 	},
 	"peerDependencies": {
 		"@fortawesome/fontawesome-svg-core": "^1.2.35",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
-		"react-router-dom": "^5.2.0"
+		"react-router-dom": "^6.16.0"
 	}
 }

package/src/components/Badge/Badge.tsx

@@ -50,7 +50,7 @@ const Badge: React.FC<BadgeTypes> = ({
 		case "href":
 			return (
 				<>
-					<a {...baseProps} href={href} className={`${badgeClasses}`}>
+					<a {...baseProps} href={href} className={badgeClasses}>
 						{renderContent()}
 					</a>
 				</>
@@ -62,7 +62,7 @@ const Badge: React.FC<BadgeTypes> = ({
 						<Link
 							{...baseProps}
 							to={to}
-							className={`${badgeClasses}`}
+							className={badgeClasses}
 						>
 							{renderContent()}
 						</Link>
@@ -73,7 +73,7 @@ const Badge: React.FC<BadgeTypes> = ({
 		case "span":
 			return (
 				<>
-					<span className={`${badgeClasses}`}>{renderContent()}</span>
+					<span className={badgeClasses}>{renderContent()}</span>
 				</>
 			);
 		default:

package/src/components/CounterButton/CounterButton.stories.tsx

@@ -0,0 +1,91 @@
+import { ChangeEvent, useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import CounterButton from "../CounterButton/CounterButton";
+import { CounterButtonTypes } from "../CounterButton/CounterButton.types";
+
+export default {
+	title: "Components/CounterButton",
+	component: CounterButton,
+	argTypes: {
+		count: {
+			control: "none",
+			description:
+				"The initial count value to be displayed in the input field.",
+		},
+		containerClassName: {
+			control: "none",
+			description:
+				"Additional classes for styling the outer container of the counter.",
+		},
+		inputClassName: {
+			control: "none",
+			description: "Additional classes for styling the input field.",
+		},
+		buttonClassName: {
+			control: "none",
+			description:
+				"Additional classes for styling the increment and decrement buttons.",
+		},
+		iconClasses: {
+			control: "none",
+			description: "Additional classes for styling the icons.",
+		},
+		onIncrementClick: {
+			table: { disable: true },
+			control: "none",
+			description: "Function to handle increment button click.",
+		},
+		onDecrementClick: {
+			table: { disable: true },
+			control: "none",
+			description: "Function to handle decrement button click.",
+		},
+	},
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+	},
+} as Meta;
+
+const Template: StoryFn<CounterButtonTypes> = (args) => {
+	const [count, setCount] = useState(args.count);
+
+	const handleIncrement = () => {
+		setCount((prevCount) => prevCount + 1);
+	};
+
+	const handleDecrement = () => {
+		setCount((prevCount) => prevCount - 1);
+	};
+
+	const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const newCount =
+			e.target.value === "" || e.target.value === null
+				? 0
+				: parseInt(e.target.value, 10);
+		if (!isNaN(newCount) && newCount >= 0) {
+			setCount(newCount);
+		}
+	};
+
+	return (
+		<CounterButton
+			{...args}
+			count={count}
+			onIncrementClick={handleIncrement}
+			onDecrementClick={handleDecrement}
+			onInputChange={handleInputChange}
+		/>
+	);
+};
+
+export const Default = Template.bind({});
+Default.args = {
+	count: 1,
+	containerClassName:
+		"flex items-center border border-gray-300 rounded-lg overflow-hidden ",
+	inputClassName:
+		"w-full h-full text-center text-xl border-none outline-none m-0 p-0 bg-white",
+	buttonClassName: "w-12 h-12 flex items-center justify-center",
+	iconClasses: "fill-current text-blue-600",
+};

package/src/components/CounterButton/CounterButton.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import FormButton from "../FormButton/FormButton";
+import { CounterButtonTypes } from "./CounterButton.types";
+import Text from "../Text/Text";
+
+const CounterButton: React.FC<CounterButtonTypes> = ({
+	count,
+	containerClassName,
+	inputClassName,
+	buttonClassName,
+	iconClasses,
+	onIncrementClick,
+	onDecrementClick,
+	onInputChange,
+}) => {
+	return (
+		<div className={containerClassName}>
+			<FormButton
+				icon={
+					<svg
+						width={12}
+						height={12}
+						viewBox="0 0 12 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						className={iconClasses}
+					>
+						<path d="M11.0626 6.43135H0.937598C0.712598 6.43135 0.506348 6.24385 0.506348 6.0001C0.506348 5.7751 0.693848 5.56885 0.937598 5.56885H11.0626C11.2876 5.56885 11.4938 5.75635 11.4938 6.0001C11.4938 6.2251 11.2876 6.43135 11.0626 6.43135Z" />
+					</svg>
+				}
+				text={
+					<Text
+						size={""}
+						color={""}
+						text={"Decrement"}
+						fontFamily={""}
+						additionalClasses="sr-only"
+					/>
+				}
+				backgroundColor="clear"
+				fontColor="black"
+				size="md"
+				borderColor="none"
+				shape="cornered"
+				additionalClasses={buttonClassName}
+				onClick={onDecrementClick}
+			/>
+			<div
+				className={`w-16 h-12 flex justify-center items-center border-x border-gray-300`}
+			>
+				<input
+					type="text"
+					value={count}
+					className={inputClassName}
+					onChange={onInputChange}
+					onFocus={(e) => e.target.select()}
+				/>
+			</div>
+			<FormButton
+				icon={
+					<svg
+						width={12}
+						height={12}
+						viewBox="0 0 12 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						className={iconClasses}
+					>
+						<g clipPath="url(#clip0_1032_24236)">
+							<path d="M11.2501 5.5876H6.43135V0.750098C6.43135 0.525098 6.24385 0.318848 6.0001 0.318848C5.7751 0.318848 5.56885 0.506348 5.56885 0.750098V5.5876H0.750098C0.525098 5.5876 0.318848 5.7751 0.318848 6.01885C0.318848 6.24385 0.506348 6.4501 0.750098 6.4501H5.5876V11.2501C5.5876 11.4751 5.7751 11.6813 6.01885 11.6813C6.24385 11.6813 6.4501 11.4938 6.4501 11.2501V6.43135H11.2501C11.4751 6.43135 11.6813 6.24385 11.6813 6.0001C11.6813 5.7751 11.4751 5.5876 11.2501 5.5876Z" />
+						</g>
+						<defs>
+							<clipPath id="clip0_1032_24236">
+								<rect width={12} height={12} fill="white" />
+							</clipPath>
+						</defs>
+					</svg>
+				}
+				text={
+					<Text
+						size={""}
+						color={""}
+						text={"Increment"}
+						fontFamily={""}
+						additionalClasses="sr-only"
+					/>
+				}
+				backgroundColor="clear"
+				fontColor="black"
+				size="md"
+				borderColor="none"
+				shape="cornered"
+				additionalClasses={buttonClassName}
+				onClick={onIncrementClick}
+			/>
+		</div>
+	);
+};
+
+export default CounterButton;

package/src/components/CounterButton/CounterButton.types.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, MouseEvent } from "react";
+
+export interface CounterButtonTypes {
+	count: number;
+	containerClassName?: string;
+	inputClassName?: string;
+	buttonClassName?: string;
+	iconClasses?: string;
+	onIncrementClick: () => void;
+	onDecrementClick: () => void;
+	onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}

package/src/components/FormButton/FormButton.test.tsx

@@ -9,7 +9,7 @@ describe("Button", () => {
 			<MemoryRouter>
 				<Button
 					text="Default Button"
-					color="green"
+					backgroundColor="green"
 					size="md"
 					shape="outline"
 				/>
@@ -24,7 +24,7 @@ describe("Button", () => {
 			<MemoryRouter>
 				<Button
 					text="Clickable Button"
-					color="green"
+					backgroundColor="green"
 					size="md"
 					shape="outline"
 					onClick={mockOnClick}
@@ -40,7 +40,7 @@ describe("Button", () => {
 			<MemoryRouter>
 				<Button
 					text="Default Button"
-					color="green"
+					backgroundColor="green"
 					size="md"
 					shape="outline"
 				/>
@@ -58,7 +58,7 @@ describe("Disabled Button", () => {
 			<MemoryRouter>
 				<Button
 					text="Disabled Button"
-					color="green"
+					backgroundColor="green"
 					size="md"
 					shape="outline"
 					isDisabled

package/src/components/FormButton/FormButton.tsx

@@ -32,9 +32,8 @@ const FormButton: React.FC<ButtonTypes> = ({
 }) => {
 	const baseFormButtonClasses = "flex items-center justify-center";
 	const hoverClasses = !isDisabled
-		? `hover:${hoverBackground} hover:${hoverFontColor} ${
-				hoverUnderline ? "hover:underline hover:underline-offset-4" : ""
-		  } hover:${hoverBorderColor}`
+		? `hover:${hoverBackground} hover:${hoverFontColor} ${hoverUnderline ? "hover:underline hover:underline-offset-4" : ""
+		} hover:${hoverBorderColor}`
 		: "";
 	const buttonColorClasses = `${backgroundColor} ${fontColor} ${borderColor}`;
 	const cursorClasses = isDisabled
@@ -86,7 +85,7 @@ const FormButton: React.FC<ButtonTypes> = ({
 
 	return (
 		<Element {...props}>
-			{icon && <span className={`${iconClasses}`}>{icon}</span>}
+			{icon && <span className={iconClasses}>{icon}</span>}
 			{text}
 		</Element>
 	);