pixelize-design-library 2.1.20 → 2.1.21

package/src/Theme/themeProps.ts

@@ -1,477 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,200 +0,0 @@
-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);
-    })
-  );
-}