gbs-add-block 0.0.85 → 0.0.88

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.85)
+# GBS Building Blocks 2.0 (v0.0.88)
 
 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.85)
+## What's New 🎉 (Ver 0.0.88)
 
 - 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.85",
+  "version": "0.0.88",
   "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/datagrid/context/GridContext.tsx

@@ -92,6 +92,7 @@ export const GridProvider: React.FC<{
     gridColumnStyle = "p-2 text-xs",
     rowChange = () => {},
     pageStatus = () => {},
+    activeFilterArrayValue = [],
   } = props;
 
   // States Handling Grid
@@ -133,9 +134,13 @@ export const GridProvider: React.FC<{
     const handleDataSource = async () => {
       if (Array.isArray(dataSource) && dataSource.length > 0) {
         setWorkingDataSource(dataSource);
-        const totalPages = Math.ceil(
-          dataSource.length / pageSettings.pageNumber
-        );
+
+        // if lazy is true, then totalPages will be taken from pageSettings
+        const totalPages =
+          lazy && pageSettings.totalPages
+            ? pageSettings.totalPages
+            : Math.ceil(dataSource.length / pageSettings.pageNumber);
+
         setTotalPages(totalPages);
         setPageEnd(Math.min(10, totalPages));
       } else if (typeof dataSource === "string") {
@@ -289,6 +294,8 @@ export const GridProvider: React.FC<{
     setWorkingColumns(updatedColumns);
     setWorkingDataSource(updatedFullDataSource);
     setActiveFilterArray(updatedActiveFilterArray);
+    if (activeFilterArrayValue)
+      activeFilterArrayValue(updatedActiveFilterArray);
     resetPage(updatedFullDataSource);
   }
 
@@ -305,6 +312,8 @@ export const GridProvider: React.FC<{
     setWorkingColumns(updatedColumns);
     setWorkingDataSource(updatedDataSource);
     setActiveFilterArray(updatedActiveFilterArray);
+    if (activeFilterArrayValue)
+      activeFilterArrayValue(updatedActiveFilterArray);
     resetPage(updatedDataSource);
   }
 

package/source/components/datagrid/layout/index.tsx

@@ -26,6 +26,7 @@ const GridContent = forwardRef((_, ref) => {
     prevPage,
     goToFirstPage,
     goToEndPage,
+    activeFilterArray,
   } = useGridContext();
 
   // Making Grid Functions Accessible in Parent
@@ -41,6 +42,7 @@ const GridContent = forwardRef((_, ref) => {
         handleSearch,
         handleApplyFilter,
         clearFilter,
+        getActiveFilters: () => activeFilterArray,
       };
     },
     [
@@ -52,6 +54,7 @@ const GridContent = forwardRef((_, ref) => {
       handleSearch,
       handleApplyFilter,
       clearFilter,
+      activeFilterArray,
     ]
   );
 

package/source/components/datagrid/type.ts

@@ -2,6 +2,13 @@ import { ChangeEvent } from "react";
 
 interface PageSettingsProps {
   pageNumber: number;
+  totalPages?: number;
+}
+
+interface ActiveFilterArrayValue {
+  filterColumn: string;
+  filterCondition: string;
+  filterValue: string;
 }
 
 export type GridProps = {
@@ -29,6 +36,7 @@ export type GridProps = {
   gridColumnStyle?: string;
   rowChange?: any;
   pageStatus?: any;
+  activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
 };
 
 interface GridColumn {

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;
 };