gbs-add-block 0.0.84 → 0.0.87

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.84)
+# GBS Building Blocks 2.0 (v0.0.87)
 
 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://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.84)
+## What's New 🎉 (Ver 0.0.87)
 
 - Updated for bug fixes.
-- New Component Card, Tabs & SideBar Added
 
 ## Authors
 

package/index.cjs

@@ -31,6 +31,7 @@ const CONFIG = {
     "Navbar",
     "DataGrid",
     "BreadCrumb",
+    "Bargraph"
   ],
   // Define component dependencies
   dependencies: {

package/package.json

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

package/source/components/bargraph/index.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { useState } from "react";
+import { BarChartProps } from "./type";
+
+export const BarChart: React.FC<BarChartProps> = ({
+  data,
+  height = 300,
+  title = "Title",
+  showXValue = true,
+}) => {
+  const [hoveredBar, setHoveredBar] = useState<number | null>(null);
+  const maxValue = Math.max(...data.map((d) => d.value));
+  const chartHeight = height * 0.8; // Leave room for labels
+
+  // Calculate y-axis ticks
+  const yAxisTicks = Array.from({ length: 6 }, (_, i) =>
+    Math.round((maxValue * i) / 5)
+  );
+
+  return (
+    <div className="w-full p-4">
+      <h2 className="text-sm font-bold mb-16 text-gray-800 text-left">
+        {title}
+      </h2>
+
+      <div className="flex">
+        {/* Y-axis labels */}
+        <div className="flex flex-col justify-between pr-2 text-right">
+          {yAxisTicks.reverse().map((tick, i) => (
+            <div
+              key={i}
+              className="text-xs text-gray-500 h-8 flex items-center justify-end"
+            >
+              {tick}
+            </div>
+          ))}
+        </div>
+
+        {/* Chart area */}
+        <div className="flex-1">
+          <div className="relative h-48">
+            {/* Bars */}
+            <div className="absolute bottom-0 left-0 right-0 flex items-end h-40 space-x-1 pt-4">
+              {data.map((d, i) => {
+                const barHeight = (d.value / maxValue) * chartHeight;
+                const isHovered = hoveredBar === i;
+
+                return (
+                  <div key={i} className="flex flex-col items-center flex-1">
+                    {/* Value label on top of bar when hovered */}
+                    {isHovered && (
+                      <div className="mb-1 text-xs font-medium bg-gray-800 text-white px-2 py-1 rounded shadow-lg z-10">
+                        {d.value}
+                      </div>
+                    )}
+
+                    {/* Bar */}
+                    <div
+                      className={`w-full ${
+                        isHovered ? "bg-zinc-800" : "bg-black"
+                      } rounded-t transition-all duration-200 ease-in-out relative`}
+                      style={{
+                        height: `${barHeight}px`,
+                        boxShadow: isHovered
+                          ? "0 4px 12px rgba(59, 130, 246, 0.5)"
+                          : "none",
+                      }}
+                      onMouseEnter={() => setHoveredBar(i)}
+                      onMouseLeave={() => setHoveredBar(null)}
+                    ></div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* X-axis */}
+          <div className="flex border-t border-gray-300 pt-2 mt-2">
+            {data.map((d, i) => (
+              <div key={i} className="flex-1 text-center">
+                <div className="text-sm font-medium text-gray-700">
+                  {d.label}
+                </div>
+                {showXValue && (
+                  <div className="text-xs text-gray-500 mt-1">{d.value}</div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/source/components/bargraph/type.ts

@@ -0,0 +1,11 @@
+type BarData = {
+  label: string;
+  value: number;
+};
+
+export type BarChartProps = {
+  data: BarData[];
+  height?: number;
+  title?: string;
+  showXValue?: boolean;
+};

package/source/components/formrenderer/index.tsx

@@ -12,7 +12,7 @@ import { COMPONENT_MAP, validateField } from "./helperFunctions";
 
 const FormRenderer: React.FC<FormRendererProps> = ({
   onSubmit,
-  sourceData = [],
+  schema = [],
   formFormationClass = "grid grid-cols-1 gap-2",
   formParentClass = "w-96",
 }) => {
@@ -24,7 +24,7 @@ const FormRenderer: React.FC<FormRendererProps> = ({
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    const requirementErrorItems = sourceData
+    const requirementErrorItems = schema
       .filter((item) => item.required && item.name)
       .reduce((errors: string[], item) => {
         const field = formRef.current?.querySelector(
@@ -76,15 +76,15 @@ const FormRenderer: React.FC<FormRendererProps> = ({
     );
   };
 
-  // If no source data is found, return a message
-  if (!sourceData.length) {
+  // If no schema data is found, return a message
+  if (!schema.length) {
     return <div>No Source Data Found</div>;
   }
 
   return (
     <form ref={formRef} onSubmit={handleSubmit} className={formParentClass}>
       <div className={formFormationClass}>
-        {sourceData.map(renderFormComponent)}
+        {schema.map(renderFormComponent)}
       </div>
     </form>
   );

package/source/components/formrenderer/types.ts

@@ -38,7 +38,7 @@ export type FormItem = {
 
 export type FormRendererProps = {
   onSubmit?: (formData: FormData) => void;
-  sourceData?: FormItem[] | undefined;
+  schema?: FormItem[] | undefined;
   formFormationClass?: string;
   formParentClass?: string;
 };

package/source/components/sidebar/components/MenuItem.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { MenuItem, IconComponent } from "../type";
 
 type MenuItemProps = {
@@ -12,6 +13,13 @@ export const MenuItemComponent = ({
   onToggle,
 }: MenuItemProps) => {
   const IconComponent = iconMap[item.icon] || (() => null);
+  const [path, setPath] = useState("");
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setPath(window.location.pathname);
+    }
+  }, []);
 
   return (
     <li>
@@ -26,7 +34,7 @@ export const MenuItemComponent = ({
             : undefined
         }
         className={`flex items-center py-2 px-3 rounded-md text-sm ${
-          item.active
+          item.path === path
             ? "bg-gray-100 text-black font-medium"
             : "text-gray-700 hover:bg-gray-50"
         }`}