gbs-add-block 0.0.54 → 0.0.56

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.54)
+# GBS Building Blocks 2.0 (v0.0.55)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +6,11 @@ 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://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.54)
+## What's New 🎉 (Ver 0.0.55)
 
 - Updated for more general installation methods
 - Fixed bug in Framework detection for more accuracy
+- Style Update
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/datepicker/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import {
   useDatePickerState,
   useYearMonthNavigation,
@@ -17,7 +17,7 @@ import {
 import Icon from "../icon/Icon";
 import { calender, down, leftArrows, rightArrows } from "../icon/iconPaths";
 import type { DatePickerProps } from "./types";
-import { primary } from "../globalStyle";
+import { iconClass, popUp, primary } from "../globalStyle";
 
 export const DatePicker = ({
   selectedDateValue,
@@ -120,13 +120,13 @@ export const DatePicker = ({
   }
 
   return (
-    <div className="relative inline-block w-full dark:bg-black" ref={dateRef}>
+    <div className="relative inline-block w-full" ref={dateRef}>
       <button
         type="button"
         onClick={toggleDatepicker}
         className={`${
           error ? primary["error-border"] : "border"
-        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white ${
+        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white dark:bg-black ${
           disabled ? "opacity-50 cursor-not-allowed" : ""
         }`}
         disabled={disabled}
@@ -134,10 +134,12 @@ export const DatePicker = ({
         <Icon
           dimensions={{ width: "20", height: "20" }}
           elements={calender}
-          svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+          svgClass={iconClass["grey-common"]}
         />
         <span className={!selectedDate ? "text-gray-400" : ""}>
-          {selectedDate ? selectedDate.toLocaleDateString() : placeholder}
+          {selectedDate
+            ? selectedDate.toLocaleDateString("en-GB")
+            : placeholder}
         </span>
       </button>
       {error && <p className={primary["error-primary"]}>{error}</p>}
@@ -150,7 +152,7 @@ export const DatePicker = ({
       />
 
       {showDatepicker && !disabled && (
-        <div className="absolute z-10 bg-white border border-gray-300 shadow-lg mt-1 w-full rounded dark:bg-black dark:text-white px-2">
+        <div className={popUp["pop-up-style"]}>
           <div className="flex justify-between items-center p-2">
             <button
               type="button"
@@ -237,7 +239,7 @@ export const DatePicker = ({
                       onClick={() => selectYearMonth(currentYear, index)}
                       className={`w-full text-left p-2 cursor-pointer rounded hover:bg-gray-200 transition duration-150 ease-in-out ${
                         index === currentMonth
-                          ? "bg-black text-white hover:bg-blue-600"
+                          ? "bg-black text-white dark:bg-zinc-500"
                           : ""
                       }`}
                     >
@@ -256,7 +258,7 @@ export const DatePicker = ({
                       onClick={() => selectYearMonth(year, currentMonth)}
                       className={`w-full text-left p-2 cursor-pointer rounded hover:bg-gray-200 transition duration-150 ease-in-out ${
                         year === currentYear
-                          ? "bg-black text-white hover:bg-blue-600"
+                          ? "bg-black text-white dark:bg-zinc-500"
                           : ""
                       }`}
                     >
@@ -296,7 +298,7 @@ export const DatePicker = ({
                     disabled={isDisabled}
                     className={`text-center p-1 w-8 h-8 cursor-pointer rounded-md hover:bg-gray-200 transition duration-150 ease-in-out ${
                       isSelected
-                        ? "bg-black text-white hover:bg-gray-800 dark:bg-white"
+                        ? "bg-black text-white hover:bg-gray-800 dark:bg-zinc-500"
                         : ""
                     } ${
                       isDisabled

package/source/components/input/index.tsx

@@ -10,12 +10,13 @@ import { twMerge } from "tailwind-merge";
 import Icon from "../icon/Icon";
 import { eye } from "../icon/iconPaths";
 import type { InputProps } from "./types";
+import { iconClass, inputStyles, primary } from "../globalStyle";
 
 export const Input = ({
   OTPField = false,
   OTPValue = "",
   OTPLength = 4,
-  OTPClass = "w-8 h-10 m-1 border border-gray-600 rounded-lg text-center text-black",
+  OTPClass = inputStyles.otp,
   onOTPValueChange,
   error = undefined,
   ...props
@@ -24,11 +25,6 @@ export const Input = ({
   const [showPassword, setShowPassword] = useState(false);
   const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
-  const defaultClass = `bg-gray-100 p-2 rounded-lg ${
-    error ? "border border-red-600" : ""
-  }`;
-
-  // This will update the OTP Field Value
   const updateOtpValue = (
     index: number,
     e: React.ChangeEvent<HTMLInputElement>
@@ -47,7 +43,6 @@ export const Input = ({
     }
   };
 
-  // Function for handling keyboard navigation in OTP Field
   const handleKeydown = (
     index: number,
     e: React.KeyboardEvent<HTMLInputElement>
@@ -61,7 +56,6 @@ export const Input = ({
     }
   };
 
-  // Password Feild Toggler
   const toggleTypeForPassword = () => {
     setShowPassword(!showPassword);
   };
@@ -69,34 +63,38 @@ export const Input = ({
   return (
     <div>
       {!OTPField ? (
-        <div className="text-input-container w-full relative">
-          <input
-            className={twMerge(
-              defaultClass,
-              "w-full text-black focus:outline-blue-400"
+        <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 === "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>
             )}
-            {...props}
-            type={
-              props.type === "password" && showPassword ? "text" : props.type
-            }
-          />
-          {/* If Type is password, this will show a password visible toggle button */}
-          {props.type && props.type === "password" && (
-            <button
-              type="button"
-              className="absolute inset-y-0 right-0 flex items-center pr-2"
-              onClick={toggleTypeForPassword}
-            >
-              <Icon
-                elements={eye}
-                svgClass={"h-5 w-5 stroke-gray-500 fill-none dark:stroke-white"}
-              />
-            </button>
-          )}
-          {error && <div className="text-xs text-red-500">{error}</div>}
+          </div>
+          {error && <div className={primary["error-primary"]}>{error}</div>}
         </div>
       ) : (
-        <div className="otp-container">
+        <div className={inputStyles.otpContainer}>
           {Array(OTPLength)
             .fill("")
             .map((_, index) => (

package/source/globalStyle.ts

@@ -1,6 +1,6 @@
 export const primary = {
   "error-border": "border border-red-600",
-  "error-primary": "text-xs text-red-500",
+  "error-primary": "text-xs text-red-500 pl-1",
 };
 
 export const popUp = {
@@ -9,5 +9,14 @@ export const popUp = {
 };
 
 export const iconClass = {
-  "grey-common": "h-4 w-4 stroke-gray-500 fill-none dark:stroke-white",
+  "grey-common": "h-4 w-4 stroke-gray-500 fill-none dark:stroke-black",
+  "error-icon": "h-4 w-4 stroke-red-500 fill-none dark:stroke-red-500",
+};
+
+export const inputStyles = {
+  default: "bg-gray-100 p-2 rounded-lg focus:outline-black",
+  error: "border border-red-600",
+  otp: "w-8 h-10 m-1 border border-gray-600 rounded-lg text-center text-black",
+  passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-2",
+  otpContainer: "otp-container",
 };