pixelize-design-library 2.1.19 → 2.1.20

package/src/Theme/themeProps.ts

@@ -0,0 +1,477 @@
+import "@chakra-ui/react";
+import { Theme as ChakraTheme } from "@chakra-ui/react";
+
+export type CustomThemeProps = {
+  colors: {
+    primary: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+      opacity: {
+        4: string,
+        8: string,
+        16: string,
+        24: string,
+        32: string,
+        40: string,
+        48: string,
+      }
+    };
+    secondary: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+      opacity: {
+        4: string,
+        8: string,
+        16: string,
+        24: string,
+        32: string,
+        40: string,
+        48: string,
+      }
+    };
+    tertiary: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+      opacity: {
+        4: string,
+        8: string,
+        16: string,
+        24: string,
+        32: string,
+        40: string,
+        48: string,
+      }
+    };
+    transparent: string;
+    black: string;
+    white: string;
+    semantic: {
+      success: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+      };
+      error: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+      };
+      warning: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+      };
+      info: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+      };
+    };
+    gray: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    red: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    orange: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    yellow: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    green: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    teal: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    blue: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    cyan: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    purple: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    pink: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    background: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    },
+    text: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    },
+    header: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    },
+    placeholder: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    },
+    boxShadow: {
+      primary: string,
+      error: string,
+      default: string,
+    }
+    sidebar: {
+      background: {
+        50: string,
+        100: string,
+        200: string,
+        300: string,
+        400: string,
+        500: string,
+        600: string,
+        700: string,
+        800: string,
+        900: string,
+      }
+    },
+    boxborder: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    },
+    border: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    },
+    table: {
+      hover: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+      }
+    },
+    disabled: {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    }
+
+    backgroundColor: {
+      main: string;
+      secondary: string;
+      quaternary: string;
+      tertiary: string;
+      light: string;
+      medium: string;
+      accent: string;
+      subtle: string;
+      muted: string;
+      neutral: string;
+    };
+  };
+  fonts: ChakraTheme["fonts"] & {
+    body: string;
+    heading: string;
+    mono: string;
+  };
+  fontSizes: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    "8xl": string;
+    "9xl": string;
+  };
+  fontWeights: {
+    hairline: number;
+    thin: number;
+    light: number;
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+    extrabold: number;
+    black: number;
+  };
+  lineHeights: {
+    normal: string;
+    none: number;
+    shorter: number;
+    short: number;
+    base: number;
+    tall: number;
+    taller: string;
+    [key: string]: string | number;
+  };
+  letterSpacings: {
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+    widest: string;
+  };
+  space: {
+    [key: string]: string;
+  };
+  sizes: {
+    [key: string]: string | any;
+  };
+  breakpoints: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+  };
+  shadows: {
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    outline: string;
+    inner: string;
+    none: string;
+    darkLg: string;
+  };
+  radii: ChakraTheme["radii"] & {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    full: string;
+  };
+  zIndices: ChakraTheme["zIndices"] & {
+    hide: number;
+    auto: string;
+    base: number;
+    docked: number;
+    dropdown: number;
+    sticky: number;
+    banner: number;
+    overlay: number;
+    modal: number;
+    popover: number;
+    skipLink: number;
+    toast: number;
+    tooltip: number;
+  };
+  config: {
+    cssVarPrefix: string;
+  };
+};

package/src/Theme/useCustomTheme.ts

@@ -0,0 +1,6 @@
+import { useTheme as useChakraTheme } from "@chakra-ui/react";
+import { CustomThemeProps } from "./themeProps";
+
+export const useCustomTheme = (): CustomThemeProps => {
+    return useChakraTheme() as CustomThemeProps;
+};

package/src/Utils/table.ts

@@ -0,0 +1,200 @@
+import { useCallback, useEffect, useRef } from "react";
+import { DataObject, TableHeaderProps } from "../Components/Table/TableProps";
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+export function SortMultiColumnData(
+  data: Record<string, string | number>[],
+  sortConfig: {
+    column: string | number;
+    direction: string;
+  }[]
+) {
+  if (!sortConfig.length) return data;
+  return [...data].sort((a, b) => {
+    for (const { column, direction } of sortConfig) {
+      if (direction === "none") {
+        continue;
+      }
+      const dirMultiplier = direction === "asc" ? 1 : -1;
+      // Compare values for the current column
+      if (a[column] < b[column]) return -1 * dirMultiplier;
+      if (a[column] > b[column]) return 1 * dirMultiplier;
+
+      // If values are equal, continue to the next sorting rule
+    }
+    return 0; // Return 0 if all sort conditions are equal
+  });
+}
+
+export const calculateLeftOffset = (
+  columns: number[],
+  index: number
+): number => {
+  return columns.slice(0, index).reduce((sum, width) => sum + width, 0);
+};
+
+export const searchAndSortData = (
+  data: DataObject[],
+  searchValues: Record<string, string>
+) => {
+  const filteredData = data.filter((item) => {
+    return Object.keys(searchValues).every((key) => {
+      const searchValue = searchValues[key].toLowerCase();
+      return item[key].toString().toLowerCase().includes(searchValue);
+    });
+  });
+
+  return filteredData.sort((a, b) => {
+    let aMatchCount = 0;
+    let bMatchCount = 0;
+
+    Object.keys(searchValues).forEach((key) => {
+      const searchValue = searchValues[key].toLowerCase();
+
+      if (a[key] && a[key].toString().toLowerCase() === searchValue) {
+        aMatchCount++;
+      }
+      if (b[key] && b[key].toString().toLowerCase() === searchValue) {
+        bMatchCount++;
+      }
+
+      if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
+        aMatchCount += 0.5;
+      }
+      if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
+        bMatchCount += 0.5;
+      }
+    });
+
+    return bMatchCount - aMatchCount;
+  });
+};
+
+export function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timer: NodeJS.Timeout;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}
+
+export function useDebounce<T extends (...args: any[]) => void>(
+  callback: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  const callbackRef = useRef(callback);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const debouncedFn = useCallback(
+    (...args: Parameters<T>) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay]
+  );
+
+  return debouncedFn;
+}
+
+export const pageSizeCalculation = (records: number) => {
+  const pageSize = [5, 10];
+  if (records > 100) {
+    return [25, 50, 100];
+  } else if (records > 50) {
+    return [5, 10, 20];
+  }
+  return pageSize;
+};
+
+type TableCellCalculationProps = {
+  isFrozen?: boolean;
+  columnWidths: number[];
+  headerIndex: number;
+  isCheckbox?: boolean;
+  header: TableHeaderProps;
+  row: DataObject;
+  freezedBgColor?: string;
+  index: number;
+};
+
+export const TableCellCalculation = ({
+  isFrozen,
+  columnWidths,
+  headerIndex,
+  isCheckbox,
+  header,
+  row,
+  freezedBgColor,
+  index,
+}: TableCellCalculationProps) => {
+  const theme = useCustomTheme();
+  const leftOffset = isFrozen
+    ? calculateLeftOffset(columnWidths, headerIndex) + (isCheckbox ? 50 : 0)
+    : 0;
+  let cellBgColor = undefined;
+  let cellTextColor = undefined;
+  if (row.cellStyle?.[header.id]) {
+    cellBgColor =
+      row.cellStyle?.[header.id]?.bg ?? theme.colors.backgroundColor.light;
+    cellTextColor = row.cellStyle?.[header.id]?.color ?? undefined;
+  } else if (isFrozen) {
+    cellBgColor = freezedBgColor ?? undefined;
+    cellTextColor = freezedBgColor ?? undefined;
+  } else if (index % 2 === 1) {
+    cellBgColor = theme.colors.backgroundColor.light;
+  }
+
+  let rowBgColor = undefined;
+  let rowTextColor = undefined;
+  if (row.rowStyle) {
+    rowBgColor = row.rowStyle?.bg;
+    rowTextColor = row.rowStyle?.color;
+  }
+
+  return { leftOffset, cellBgColor, rowBgColor, cellTextColor, rowTextColor };
+};
+
+/**
+ * Filters array of objects by checking all property values against the search query.
+ *
+ * @param data - Array of objects
+ * @param query - Search string
+ * @returns Filtered data
+ */
+export function globalSearchFilter<T extends Record<string, any>>(
+  data: T[],
+  query: string
+): T[] {
+  if (!query.trim()) return data;
+
+  const lowerQuery = query.toLowerCase();
+
+  return data.filter((item) =>
+    Object.values(item).some((val) => {
+      if (
+        val === null ||
+        val === undefined ||
+        typeof val === "object" ||
+        typeof val === "function"
+      ) {
+        return false;
+      }
+
+      return String(val).toLowerCase().includes(lowerQuery);
+    })
+  );
+}