gbs-add-block 0.0.56 → 0.0.58

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.55)
+# GBS Building Blocks 2.0 (v0.0.58)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,11 +6,10 @@ 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.55)
+## What's New 🎉 (Ver 0.0.58)
 
-- Updated for more general installation methods
-- Fixed bug in Framework detection for more accuracy
-- Style Update
+- Updated for bug fixes.
+- New component "Skeleton" Added.
 
 ## Authors
 

package/index.js

@@ -24,6 +24,7 @@ const CONFIG = {
     "FormRenderer",
     "MaterialInput",
     "ContextMenu",
+    "Skeleton",
   ],
   // Define component dependencies
   dependencies: {

package/package.json

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

package/source/components/input/index.tsx

@@ -50,9 +50,29 @@ export const Input = ({
     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);
     }
   };
 

package/source/components/skeleton/index.tsx

@@ -0,0 +1,90 @@
+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;
+}
+
+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";
+
+export default Skeleton;