gbs-add-block 0.0.90 → 0.0.93

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.90)
+# GBS Building Blocks 2.0 (v0.0.93)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ 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.90)
+## What's New 🎉 (Ver 0.0.93)
 
 - Updated for bug fixes.
 

package/index.cjs

@@ -27,7 +27,6 @@ const CONFIG = {
     "FormRenderer",
     "MaterialInput",
     "ContextMenu",
-    "Skeleton",
     "Navbar",
     "DataGrid",
     "BreadCrumb",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.90",
+  "version": "0.0.93",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/datepicker/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import {
   useDatePickerState,
   useYearMonthNavigation,
@@ -15,7 +15,7 @@ import {
   applyScrollbarStyles,
 } from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
-import { calender, down, leftArrows, rightArrows, x } from "../icon/iconPaths";
+import { calender, down, leftArrow, rightArrow, x } from "../icon/iconPaths";
 import type { DatePickerProps } from "./types";
 import { iconClass, popUp, primary } from "../globalStyle";
 
@@ -139,7 +139,7 @@ export const DatePicker = ({
           type="button"
           onClick={toggleDatepicker}
           disabled={disabled}
-          className="flex items-center gap-2 w-full"
+          className="flex items-center gap-2 w-full cursor-pointer"
         >
           <Icon
             dimensions={{ width: "20", height: "20" }}
@@ -147,9 +147,11 @@ export const DatePicker = ({
             svgClass={iconClass["grey-common"]}
           />
           <span className={!selectedDate ? "text-gray-400 text-sm" : ""}>
-            {selectedDate
-              ? selectedDate.toLocaleDateString("en-GB")
-              : placeholder}
+            {selectedDate ? (
+              <span className="text-sm">{selectedDate.toLocaleDateString("en-GB")}</span>
+            ) : (
+              placeholder
+            )}
           </span>
         </button>
 
@@ -173,33 +175,6 @@ export const DatePicker = ({
       {showDatepicker && !disabled && (
         <div className={popUp["pop-up-style"]}>
           <div className="flex justify-between items-center p-2">
-            <button
-              type="button"
-              onClick={prevMonth}
-              disabled={isAtYearLimit(
-                "prev",
-                currentMonth,
-                currentYear,
-                yearLimitStart,
-                yearLimitEnd
-              )}
-              className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
-                isAtYearLimit(
-                  "prev",
-                  currentMonth,
-                  currentYear,
-                  yearLimitStart,
-                  yearLimitEnd
-                )
-                  ? "opacity-50"
-                  : ""
-              }`}
-            >
-              <Icon
-                elements={leftArrows}
-                svgClass={"stroke-black fill-none dark:stroke-white"}
-              />
-            </button>
             <div className="flex items-center space-x-2">
               <span className="text-md font-semibold">
                 {new Date(currentYear, currentMonth).toLocaleString("default", {
@@ -215,36 +190,70 @@ export const DatePicker = ({
                 <Icon
                   elements={down}
                   svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
                 />
               </button>
             </div>
-            <button
-              type="button"
-              onClick={nextMonth}
-              disabled={isAtYearLimit(
-                "next",
-                currentMonth,
-                currentYear,
-                yearLimitStart,
-                yearLimitEnd
-              )}
-              className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
-                isAtYearLimit(
+
+            <div className="flex items-center space-x-2">
+              <button
+                type="button"
+                onClick={prevMonth}
+                disabled={isAtYearLimit(
+                  "prev",
+                  currentMonth,
+                  currentYear,
+                  yearLimitStart,
+                  yearLimitEnd
+                )}
+                className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
+                  isAtYearLimit(
+                    "prev",
+                    currentMonth,
+                    currentYear,
+                    yearLimitStart,
+                    yearLimitEnd
+                  )
+                    ? "opacity-50"
+                    : ""
+                }`}
+              >
+                <Icon
+                  elements={leftArrow}
+                  svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
+                />
+              </button>
+
+              <button
+                type="button"
+                onClick={nextMonth}
+                disabled={isAtYearLimit(
                   "next",
                   currentMonth,
                   currentYear,
                   yearLimitStart,
                   yearLimitEnd
-                )
-                  ? "opacity-50"
-                  : ""
-              }`}
-            >
-              <Icon
-                elements={rightArrows}
-                svgClass={"stroke-black fill-none dark:stroke-white"}
-              />
-            </button>
+                )}
+                className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
+                  isAtYearLimit(
+                    "next",
+                    currentMonth,
+                    currentYear,
+                    yearLimitStart,
+                    yearLimitEnd
+                  )
+                    ? "opacity-50"
+                    : ""
+                }`}
+              >
+                <Icon
+                  elements={rightArrow}
+                  svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
+                />
+              </button>
+            </div>
           </div>
           {showYearMonthPicker ? (
             <div className="flex p-2 h-[224px] scrollbar">
@@ -351,4 +360,4 @@ export const DatePicker = ({
       )}
     </div>
   );
-};
+};

package/source/globalStyle.ts

@@ -9,7 +9,7 @@ export const popUp = {
 };
 
 export const iconClass = {
-  "grey-common": "h-4 w-4 stroke-gray-500 fill-none dark:stroke-black",
+  "grey-common": "h-4 w-4 stroke-gray-500 fill-none dark:stroke-white",
   "error-icon": "h-4 w-4 stroke-red-500 fill-none dark:stroke-red-500",
 };
 

package/source/components/skeleton/index.tsx

@@ -1,95 +0,0 @@
-/**
- * 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, { useMemo, memo } from "react";
-
-type SkeletonType = "text" | "circle" | "rectangle";
-
-interface SkeletonProps {
-  type?: SkeletonType;
-  lines?: number;
-  height?: string | number;
-  width?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  animationDuration?: number;
-  keyframes?: string;
-}
-
-export const Skeleton: React.FC<SkeletonProps> = memo(
-  ({
-    type = "text",
-    lines = 1,
-    height,
-    width,
-    className = "",
-    style = {},
-    animationDuration = 1.5,
-    keyframes = `
-    @keyframes pulse {
-      0% { opacity: 0.6; }
-      50% { opacity: 1; }
-      100% { opacity: 0.6; }
-    }
-  `,
-  }) => {
-    const getStyle = useMemo(() => {
-      const baseStyle: React.CSSProperties = {
-        backgroundColor: "#e0e0e0",
-        borderRadius: "4px",
-        animation: `pulse ${animationDuration}s ease-in-out 0.5s infinite`,
-        width: width || "100%",
-        ...style,
-      };
-
-      switch (type) {
-        case "text":
-          return {
-            ...baseStyle,
-            height: height || "16px",
-            marginBottom: "8px",
-          };
-        case "circle":
-          return {
-            ...baseStyle,
-            height: height || "48px",
-            width: width || "48px",
-            borderRadius: "50%",
-          };
-        case "rectangle":
-          return {
-            ...baseStyle,
-            height: height || "120px",
-          };
-        default:
-          return baseStyle;
-      }
-    }, [type, height, width, style, animationDuration]);
-
-    const renderLines = useMemo(() => {
-      if (type !== "text" || lines <= 1) return null;
-
-      return Array.from({ length: lines - 1 }, (_, index) => (
-        <div
-          key={index}
-          className={`skeleton-line ${className}`}
-          style={getStyle}
-        />
-      ));
-    }, [type, lines, className, getStyle]);
-
-    return (
-      <div className="skeleton-wrapper" style={{ width: "100%" }}>
-        <style>{keyframes}</style>
-        <div className={`skeleton ${className}`} style={getStyle} />
-        {renderLines}
-      </div>
-    );
-  }
-);
-
-Skeleton.displayName = "Skeleton";