gbs-add-block 1.2.5 → 1.2.6

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.5)
+# GBS Building Blocks 2.0 (v1.2.6)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +6,9 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.2.5)
+## What's New 🎉 (Ver 1.2.6)
 
-- Bar Chart Improvement
-- Data Grid Style Update
+- UI Update (Canditate update for next major change 2.0.0)
 
 ## Authors
 

package/package.json

@@ -1,30 +1,36 @@
-{
-  "name": "gbs-add-block",
-  "version": "1.2.5",
-  "description": "React Component Library",
-  "type": "module",
-  "files": [
-    "index.cjs",
-    "source"
-  ],
-  "engines": {
-    "node": ">=17"
-  },
-  "bin": {
-    "gbs-add-block": "index.cjs"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "Anandhu Remanan",
-  "license": "ISC",
-  "dependencies": {
-    "fs-extra": "^11.0.4",
-    "path": "^0.12.7",
-    "yargs": "^17.7.2"
-  },
-  "devDependencies": {
-    "@types/fs-extra": "^11.0.4"
-  }
-}
+{
+  "name": "gbs-add-block",
+  "version": "1.2.6",
+  "description": "React Component Library",
+  "type": "module",
+  "files": [
+    "index.cjs",
+    "source"
+  ],
+  "engines": {
+    "node": ">=17"
+  },
+  "bin": {
+    "gbs-add-block": "index.cjs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Anandhu Remanan",
+  "license": "ISC",
+  "dependencies": {
+    "fs-extra": "^11.0.4",
+    "path": "^0.12.7",
+    "yargs": "^17.7.2",
+    "@grampro/headless-helpers": "^1.0.21",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/source/components/button/index.tsx

@@ -1,25 +1,42 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { type ButtonHTMLAttributes, type ReactNode } from "react";
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: ReactNode;
-  buttonClass?: string;
-}
-
-export const Button = ({
-  children,
-  buttonClass = "px-2 py-1 bg-black text-white rounded-md hover:bg-gray-700",
-  ...props
-}: ButtonProps) => {
-  return (
-    <button className={buttonClass} {...props}>
-      {children}
-    </button>
-  );
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import { buttonStyles } from "../../globalStyle";
+import type { ComponentSize, ComponentVariant } from "../../theme";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+  variant?: ComponentVariant;
+  size?: ComponentSize;
+  buttonClass?: string;
+}
+
+export const Button = ({
+  children,
+  variant = "primary",
+  size = "md",
+  buttonClass,
+  className,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={twMerge(
+        buttonStyles.base,
+        buttonStyles.sizes[size],
+        buttonStyles.variants[variant],
+        className,
+        buttonClass
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
 };

package/source/components/card/index.tsx

@@ -1,10 +1,31 @@
-import React, { type ReactNode } from "react";
-
-interface CardProps {
-  children?: ReactNode;
-  cardClass?: string;
-}
-
-export function Card({ children, cardClass = "shadow-md rounded-xl p-4" }: CardProps) {
-  return <div className={cardClass}>{children}</div>;
+import React, { type HTMLAttributes, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import { cardStyles } from "../../globalStyle";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  cardClass?: string;
+  interactive?: boolean;
+}
+
+export function Card({
+  children,
+  cardClass,
+  className,
+  interactive = false,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={twMerge(
+        cardStyles.base,
+        interactive ? cardStyles.interactive : "",
+        className,
+        cardClass
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
 }

package/source/components/checkbox/index.tsx

@@ -1,16 +1,25 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { type InputHTMLAttributes } from "react";
-
-export const Checkbox = ({
-  ...props
-}: InputHTMLAttributes<HTMLInputElement>) => {
-  return (
-    <input type="checkbox" className="w-5 h-5 cursor-pointer" {...props} />
-  );
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { type InputHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export const Checkbox = ({
+  className,
+  ...props
+}: InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <input
+      type="checkbox"
+      className={twMerge(
+        "h-5 w-5 cursor-pointer rounded border-slate-300 text-sky-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-55",
+        className
+      )}
+      {...props}
+    />
+  );
 };

package/source/components/datepicker/index.tsx

@@ -17,7 +17,7 @@ import {
 import Icon from "../icon/Icon";
 import { calender, down, leftArrow, rightArrow, x } from "../icon/iconPaths";
 import type { DatePickerProps } from "./types";
-import { iconClass, popUp, primary } from "../globalStyle";
+import { iconClass, popUp, primary } from "../../globalStyle";
 
 export const DatePicker = ({
   selectedDateValue,
@@ -362,3 +362,4 @@ export const DatePicker = ({
     </div>
   );
 };
+

package/source/components/input/index.tsx

@@ -1,144 +1,142 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { useState, useRef } from "react";
-import { twMerge } from "tailwind-merge";
-import Icon from "../icon/Icon";
-import { eye, search } from "../icon/iconPaths";
-import type { InputProps } from "./types";
-import { iconClass, inputStyles, primary } from "../globalStyle";
-
-export const Input = ({
-  OTPField = false,
-  OTPValue = "",
-  OTPLength = 4,
-  OTPClass = inputStyles.otp,
-  onOTPValueChange,
-  error = undefined,
-  ...props
-}: InputProps) => {
-  const [otpValues, setOtpValues] = useState(new Array(OTPLength).fill(""));
-  const [showPassword, setShowPassword] = useState(false);
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
-  const updateOtpValue = (
-    index: number,
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    e.preventDefault();
-    const input = e.target;
-    if (input) {
-      const newOtpValues = [...otpValues];
-      newOtpValues[index] = input.value;
-      setOtpValues(newOtpValues);
-      if (index < OTPLength - 1 && input.value) {
-        inputRefs.current[index + 1]?.focus();
-      }
-      OTPValue = newOtpValues.join("");
-      if (onOTPValueChange) onOTPValueChange(OTPValue);
-    }
-  };
-
-  const handleKeydown = (
-    index: number,
-    e: React.KeyboardEvent<HTMLInputElement>
-  ) => {
-    if (e.key === "Backspace" && otpValues[index] === "" && index > 0) {
-      inputRefs.current[index - 1]?.focus();
-    } else if (e.key === "ArrowLeft" && index > 0) {
-      e.preventDefault();
-      inputRefs.current[index - 1]?.focus();
-      setTimeout(() => {
-        if (inputRefs.current[index - 1]) {
-          const inputEl = inputRefs.current[index - 1];
-          if (inputEl) {
-            const length = inputEl.value.length;
-            inputEl.setSelectionRange(length, length);
-          }
-        }
-      }, 0);
-    } else if (e.key === "ArrowRight" && index < OTPLength - 1) {
-      e.preventDefault();
-      inputRefs.current[index + 1]?.focus();
-      setTimeout(() => {
-        if (inputRefs.current[index + 1]) {
-          const inputEl = inputRefs.current[index + 1];
-          if (inputEl) {
-            const length = inputEl.value.length;
-            inputEl.setSelectionRange(length, length);
-          }
-        }
-      }, 0);
-    }
-  };
-
-  const toggleTypeForPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
-  return (
-    <div>
-      {!OTPField ? (
-        <div className="text-input-container w-full relative flex flex-col">
-          <div className="relative">
-            <input
-              className={twMerge(
-                inputStyles.default,
-                error ? inputStyles.error : "",
-                "w-full text-black pr-10"
-              )}
-              {...props}
-              type={
-                props.type === "password" && showPassword ? "text" : props.type
-              }
-            />
-            {props.type === "search" && (
-              <div className="absolute inset-y-0 right-2 flex items-center">
-                <Icon elements={search} svgClass={iconClass["grey-common"]} />
-              </div>
-            )}
-            {props.type === "password" && (
-              <button
-                type="button"
-                className="absolute inset-y-0 right-2 flex items-center"
-                onClick={toggleTypeForPassword}
-              >
-                <Icon
-                  elements={eye}
-                  svgClass={
-                    error ? iconClass["error-icon"] : iconClass["grey-common"]
-                  }
-                />
-              </button>
-            )}
-          </div>
-          {error && <div className={primary["error-primary"]}>{error}</div>}
-        </div>
-      ) : (
-        <div className={inputStyles.otpContainer}>
-          {Array(OTPLength)
-            .fill("")
-            .map((_, index) => (
-              <input
-                key={index}
-                type="text"
-                maxLength={1}
-                pattern="[0-9]*"
-                value={otpValues[index]}
-                onChange={(e) => updateOtpValue(index, e)}
-                onKeyDown={(e) => handleKeydown(index, e)}
-                ref={(ref) => {
-                  inputRefs.current[index] = ref;
-                }}
-                className={OTPClass}
-              />
-            ))}
-        </div>
-      )}
-    </div>
-  );
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import Icon from "../icon/Icon";
+import { eye, search } from "../icon/iconPaths";
+import type { InputProps } from "./types";
+import { iconClass, inputStyles, primary } from "../../globalStyle";
+
+export const Input = ({
+  OTPField = false,
+  OTPValue = "",
+  OTPLength = 4,
+  OTPClass = inputStyles.otp,
+  onOTPValueChange,
+  error = undefined,
+  className,
+  ...props
+}: InputProps) => {
+  const [otpValues, setOtpValues] = useState(new Array(OTPLength).fill(""));
+  const [showPassword, setShowPassword] = useState(false);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const updateOtpValue = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    e.preventDefault();
+    const input = e.target;
+    if (input) {
+      const newOtpValues = [...otpValues];
+      newOtpValues[index] = input.value;
+      setOtpValues(newOtpValues);
+      if (index < OTPLength - 1 && input.value) {
+        inputRefs.current[index + 1]?.focus();
+      }
+      OTPValue = newOtpValues.join("");
+      if (onOTPValueChange) onOTPValueChange(OTPValue);
+    }
+  };
+
+  const handleKeydown = (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (e.key === "Backspace" && otpValues[index] === "" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      inputRefs.current[index - 1]?.focus();
+      setTimeout(() => {
+        const inputEl = inputRefs.current[index - 1];
+        if (inputEl) {
+          const length = inputEl.value.length;
+          inputEl.setSelectionRange(length, length);
+        }
+      }, 0);
+    } else if (e.key === "ArrowRight" && index < OTPLength - 1) {
+      e.preventDefault();
+      inputRefs.current[index + 1]?.focus();
+      setTimeout(() => {
+        const inputEl = inputRefs.current[index + 1];
+        if (inputEl) {
+          const length = inputEl.value.length;
+          inputEl.setSelectionRange(length, length);
+        }
+      }, 0);
+    }
+  };
+
+  const toggleTypeForPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div>
+      {!OTPField ? (
+        <div className="text-input-container relative flex w-full flex-col">
+          <div className="relative">
+            <input
+              className={twMerge(
+                inputStyles.default,
+                error ? inputStyles.error : "",
+                "w-full pr-10",
+                className
+              )}
+              {...props}
+              type={
+                props.type === "password" && showPassword ? "text" : props.type
+              }
+            />
+            {props.type === "search" && (
+              <div className="absolute inset-y-0 right-2 flex items-center">
+                <Icon elements={search} svgClass={iconClass["grey-common"]} />
+              </div>
+            )}
+            {props.type === "password" && (
+              <button
+                type="button"
+                className="absolute inset-y-0 right-2 flex items-center rounded-md p-1"
+                onClick={toggleTypeForPassword}
+              >
+                <Icon
+                  elements={eye}
+                  svgClass={
+                    error ? iconClass["error-icon"] : iconClass["grey-common"]
+                  }
+                />
+              </button>
+            )}
+          </div>
+          {error && <div className={primary["error-primary"]}>{error}</div>}
+        </div>
+      ) : (
+        <div className={inputStyles.otpContainer}>
+          {Array(OTPLength)
+            .fill("")
+            .map((_, index) => (
+              <input
+                key={index}
+                type="text"
+                maxLength={1}
+                pattern="[0-9]*"
+                value={otpValues[index]}
+                onChange={(e) => updateOtpValue(index, e)}
+                onKeyDown={(e) => handleKeydown(index, e)}
+                ref={(ref) => {
+                  inputRefs.current[index] = ref;
+                }}
+                className={OTPClass}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
 };