gbs-add-block 1.0.29 → 1.0.31

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.29)
+# GBS Building Blocks 2.0 (v1.0.30)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +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://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.0.29)
+## What's New 🎉 (Ver 1.0.30)
 
-- DataGrid Bug Fix
+- Type Import Update
 
 ## Authors
 

package/package.json

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

package/source/components/bargraph/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useState } from "react";
-import { BarChartProps } from "./type";
+import type { BarChartProps } from "./type";
 
 export const BarChart: React.FC<BarChartProps> = ({
   data,

package/source/components/breadcrumb/index.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { useLocation } from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
 import { rightArrow } from "../icon/iconPaths";
-import { BreadcrumbsProps } from "./types";
+import type { BreadcrumbsProps } from "./types";
 
 export const Breadcrumb = ({
   showHome = true,

package/source/components/button/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { ButtonHTMLAttributes, ReactNode } from "react";
+import React, { type ButtonHTMLAttributes, type ReactNode } from "react";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: ReactNode;

package/source/components/card/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 
 interface CardProps {
   children?: ReactNode;

package/source/components/checkbox/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { InputHTMLAttributes } from "react";
+import React, { type InputHTMLAttributes } from "react";
 
 export const Checkbox = ({
   ...props

package/source/components/contextmenu/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, MouseEvent } from "react";
-import { ContextMenuProps, Position } from "./types";
+import type { ContextMenuProps, Position } from "./types";
 
 export const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
   const [isVisible, setIsVisible] = useState<boolean>(false);

package/source/components/contextmenu/ContextMenuItem.tsx

@@ -1,4 +1,4 @@
-import { ContextMenuItemProps } from "./types";
+import type { ContextMenuItemProps } from "./types";
 
 export const ContextMenuItem: React.FC<ContextMenuItemProps> = ({
   onClick,

package/source/components/contextmenu/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface Position {
   x: number;

package/source/components/datagrid/context/GridContext.tsx

@@ -7,7 +7,6 @@ import {
   useSearch,
   useFiltering,
   useRowSelection,
-  usePageStatus,
 } from "../hooks";
 
 const GridContext = createContext<GridContextType | undefined>(undefined);
@@ -70,7 +69,13 @@ export const GridProvider: React.FC<{
     goToFirstPage,
     goToPage,
     resetPage,
-  } = usePagination(totalPages, lazy, workingDataSource, pageSettings);
+  } = usePagination(
+    totalPages,
+    lazy,
+    workingDataSource,
+    pageSettings,
+    pageStatus
+  );
 
   // Search functionality
   const { searchParam, handleSearchInput, handleSearch } = useSearch({
@@ -110,9 +115,6 @@ export const GridProvider: React.FC<{
   const { selectedRows, handleSelectAll, handleSelect, isRowSelected } =
     useRowSelection(workingDataSource, onSelectRow);
 
-  // Page status reporting - Bug Report - causes re-rendering when currentPage or totalPages change
-  // usePageStatus(currentPage, totalPages, pageStatus);
-
   // Context value
   const contextValue: GridContextType = {
     // State

package/source/components/datagrid/hooks/usePagination.ts

@@ -4,13 +4,15 @@ export const usePagination = (
   totalPages: number,
   lazy: boolean,
   dataSource?: any[],
-  pageSettings?: { pageNumber: number }
+  pageSettings?: { pageNumber: number },
+  pageStatus?: ({ currentPage }: { currentPage: number }) => void
 ) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [pageStart, setPageStart] = useState(0);
   const [pageEnd, setPageEnd] = useState(10);
   const [prevDataLength, setPrevDataLength] = useState(0);
 
+  // Update page range based on current page
   const updatePageRange = useCallback(
     (page: number) => {
       const start = Math.floor(page / 10) * 10;
@@ -20,6 +22,7 @@ export const usePagination = (
     [totalPages]
   );
 
+  // Initialize page range based on total pages
   useEffect(() => {
     if (!lazy) {
       setPageEnd(Math.min(10, totalPages));
@@ -28,6 +31,13 @@ export const usePagination = (
     }
   }, [totalPages, lazy, pageStart]);
 
+  // Update page status if provided
+  useEffect(() => {
+    if (pageStatus) {
+      pageStatus({ currentPage });
+    }
+  }, [currentPage, pageStatus]);
+
   // This will handle the case when dataSource changes
   // and adjust the current page accordingly in managed workflow
   useEffect(() => {

package/source/components/datagrid/type.ts

@@ -35,7 +35,7 @@ export type GridProps = {
   gridColumnStyleSelectAll?: string;
   gridColumnStyle?: string;
   rowChange?: any;
-  pageStatus?: any;
+  pageStatus?: ({ currentPage }: { currentPage: number }) => void;
   activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
   searchParamValue?: (value: string) => void;
   showTotalPages?: boolean;

package/source/components/formrenderer/componentHandles/CheckBoxHandles.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { CheckboxHandlesProps } from "../types";
+import type { CheckboxHandlesProps } from "../types";
 
 const CheckboxHandles = ({
   item,

package/source/components/formrenderer/componentHandles/DatePickerHandles.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { DatePicker } from "../../datepicker";
-import { DatePickerHandlesProps } from "../types";
+import type { DatePickerHandlesProps } from "../types";
 import { evaluateExpression } from "@grampro/headless-helpers";
 
 export default function DatePickerHandles({

package/source/components/formrenderer/componentHandles/InputHandles.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { validateInput } from "../helperFunctions";
 import { Input } from "../../input";
-import { InputHandlesProps } from "../types";
+import type { InputHandlesProps } from "../types";
 import { evaluateExpression } from "@grampro/headless-helpers";
 import { twMerge } from "tailwind-merge";
 

package/source/components/formrenderer/componentHandles/MultiHandles.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { MultiSelectHandlesProps } from "../types";
+import type { MultiSelectHandlesProps } from "../types";
 import { MultiSelect } from "../../multiselect";
 import { evaluateExpression } from "@grampro/headless-helpers";
 

package/source/components/formrenderer/componentHandles/SelectHandles.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Select } from "../../select";
-import { Option, SelectHandlesProps } from "../types";
+import type { Option, SelectHandlesProps } from "../types";
 import { evaluateExpression } from "@grampro/headless-helpers";
 
 export default function SelectHandles({

package/source/components/formrenderer/helperFunctions.ts

@@ -3,7 +3,7 @@ import SelectHandles from "./componentHandles/SelectHandles";
 import MultiHandles from "./componentHandles/MultiHandles";
 import DatePickerHandles from "./componentHandles/DatePickerHandles";
 import CheckboxHandles from "./componentHandles/CheckBoxHandles";
-import { FormItem } from "./types";
+import type { FormItem } from "./types";
 
 // Component Map
 export const COMPONENT_MAP = {

package/source/components/formrenderer/index.tsx

@@ -7,7 +7,7 @@
 
 import React, { useRef, useState, FormEvent } from "react";
 import { useFormContext } from "@grampro/headless-helpers";
-import { FormItem, FormRendererProps } from "./types";
+import type { FormItem, FormRendererProps } from "./types";
 import { COMPONENT_MAP, validateField } from "./helperFunctions";
 
 const FormRenderer: React.FC<FormRendererProps> = ({

package/source/components/input/types.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes } from "react";
 
 export type InputProps = {
   OTPField?: boolean;

package/source/components/materialInput/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useRef } from "react";
-import { MaterialInputProps } from "./types";
+import type { MaterialInputProps } from "./types";
 
 const MaterialInput = ({
   label,

package/source/components/materialInput/types.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes } from "react";
 
 export type MaterialInputProps = {
   label?: string;

package/source/components/modal/index.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useCallback, memo, useRef } from "react";
 import { twMerge } from "tailwind-merge";
 import Icon from "../icon/Icon";
 import { x } from "../icon/iconPaths";
-import { ModalProps } from "./types";
+import type { ModalProps } from "./types";
 
 const defaultClasses = {
   modal:

package/source/components/navbar/AuthSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AuthSectionProps } from "./types";
+import type { AuthSectionProps } from "./types";
 
 const AuthSection: React.FC<AuthSectionProps> = ({
   showAuthButtons,

package/source/components/navbar/MobileToggle.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { MobileToggleProps } from "./types";
+import type { MobileToggleProps } from "./types";
 
 const MobileToggle: React.FC<MobileToggleProps> = ({ isOpen, toggleMenu }) => {
   return (

package/source/components/navbar/NavItemComponent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NavItem, NavItemComponentProps } from "./types";
+import type { NavItem, NavItemComponentProps } from "./types";
 
 const NavItemComponent: React.FC<NavItemComponentProps> = ({
   items,

package/source/components/navbar/SearchBar.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { SearchBarProps } from "./types";
+import type { SearchBarProps } from "./types";
 
 const SearchBar: React.FC<SearchBarProps> = ({
   variant,

package/source/components/navbar/index.tsx

@@ -10,7 +10,7 @@ import NavItemComponent from "./NavItemComponent";
 import SearchBar from "./SearchBar";
 import AuthSection from "./AuthSection";
 import MobileToggle from "./MobileToggle";
-import { NavbarProps } from "./types";
+import type { NavbarProps } from "./types";
 import {
   getContainerClasses,
   getPositionClasses,

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { MenuItem, IconComponent } from "../type";
+import type { MenuItem, IconComponent } from "../type";
 
 type MenuItemProps = {
   item: MenuItem;

package/source/components/sidebar/components/MenuSection.tsx

@@ -1,4 +1,4 @@
-import { MenuSection as MenuSectionType, IconComponent } from "../type";
+import type { MenuSection as MenuSectionType, IconComponent } from "../type";
 import { MenuItemComponent } from "./MenuItem";
 
 type MenuSectionProps = {

package/source/components/sidebar/components/SidebarFooter.tsx

@@ -1,4 +1,4 @@
-import { MenuItem, IconComponent } from "../type";
+import type { MenuItem, IconComponent } from "../type";
 
 type SidebarFooterProps = {
   footerItems?: MenuItem[];

package/source/components/sidebar/components/SidebarLogo.tsx

@@ -1,4 +1,4 @@
-import { MenuData } from "../type";
+import type { MenuData } from "../type";
 
 type SidebarLogoProps = {
   logo: MenuData["logo"];

package/source/components/sidebar/components/SidebarMenu.tsx

@@ -1,4 +1,4 @@
-import { IconComponent, MenuSection } from "../type";
+import type { IconComponent, MenuSection } from "../type";
 import { MenuSection as MenuSectionComponent } from "./MenuSection";
 
 type SidebarMenuProps = {

package/source/components/sidebar/components/UserProfile.tsx

@@ -1,4 +1,4 @@
-import { MenuData } from "../type";
+import type { MenuData } from "../type";
 
 type UserProfileProps = {
   profile: MenuData["profile"];

package/source/components/sidebar/hooks/useSidebarState.ts

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { MenuData } from "../type";
+import type { MenuData } from "../type";
 
 export const useSidebarState = (menuData: MenuData) => {
   const [sidebarData, setSidebarData] = useState<MenuData>(menuData);

package/source/components/sidebar/index.tsx

@@ -1,4 +1,4 @@
-import { SidebarProps } from "./type";
+import type { SidebarProps } from "./type";
 import { useSidebarState } from "./hooks/useSidebarState";
 import { SidebarLogo } from "./components/SidebarLogo";
 import { SidebarMenu } from "./components/SidebarMenu";

package/source/components/tabs/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useState } from "react";
-import { TabsProps } from "./types";
+import type { TabsProps } from "./types";
 
 export function Tabs({
   tabs,

package/source/components/tabs/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 export interface TabItem {
   id: string;

package/source/components/toast/ToastComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Toast } from "./types";
+import type { Toast } from "./types";
 import { useToastStore } from "./toastStore";
 import ToastIcon from "./ToastIcon";
 

package/source/components/toast/ToastIcon.tsx

@@ -1,4 +1,4 @@
-import { Toast } from "./types";
+import type { Toast } from "./types";
 
 const ToastIcon = ({ type }: { type: Toast["type"] }) => {
   if (!type) return null;

package/source/components/toast/index.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect } from "react";
 import { createPortal } from "react-dom";
-import { ToastPosition } from "./types";
+import type { ToastPosition } from "./types";
 import { useToastStore } from "./toastStore";
 import { ToastComponent } from "./ToastComponent";
 

package/source/components/toast/toastStore.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Toast } from "./types";
+import type { Toast } from "./types";
 
 type ToastState = {
   toasts: Toast[];

package/source/components/toast/useToast.ts

@@ -1,4 +1,4 @@
-import { Toast } from "./types";
+import type { Toast } from "./types";
 import { useToastStore } from "./toastStore";
 
 export function useToast() {

package/source/icon/iconPaths.ts

@@ -177,3 +177,24 @@ export const cloudDownload: any = [
     key: "ui1hmy",
   },
 ];
+
+export const plus: any = [
+  { type: "path", d: "M12 5v14", key: "vertical" },
+  { type: "path", d: "M5 12h14", key: "horizontal" },
+];
+
+export const trash: any = [
+  {
+    type: "path",
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
+    key: "bin",
+    fill: "none",
+  },
+  { type: "path", d: "M3 6h18", key: "lid", fill: "none" },
+  {
+    type: "path",
+    d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+    key: "handle",
+    fill: "none",
+  },
+];

package/source/components/datagrid/hooks/usePageStatus.ts

@@ -1,13 +0,0 @@
-import { useEffect } from "react";
-
-export const usePageStatus = (
-  currentPage: number,
-  totalPages: number,
-  pageStatus?: (status: any) => void
-) => {
-  useEffect(() => {
-    if (pageStatus) {
-      pageStatus({ currentPage, totalPages });
-    }
-  }, [pageStatus, currentPage, totalPages]);
-};