refactor: Update theme structure and remove default theme props (#13)

- Removed defaultThemeProps and integrated theme properties directly into the theme structure.
- Updated MultiLevelTable and TableRow components to utilize the new theme structure with levelColors for row backgrounds.
- Enhanced row styling logic in TableRow component using useMemo for performance optimization.
- Changed package name in package-lock.json to reflect the correct organization.

Author: abhay-keyvalue

package-lock.json

@@ -14,7 +14,7 @@ import type { PaginationProps } from "./Pagination";
 import { TableHeader } from "./TableHeader";
 import { TableRow } from "./TableRow";
 import { SortType } from '../constants/sort';
-import { defaultThemeProps } from "../defaultThemeProps";
+import { defaultTheme } from "../constants/theme";
 import { mergeThemeProps } from "../mergeThemeProps";
 import type { ThemeProps } from "../types/theme";
 import type {
@@ -62,7 +62,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
   descendingIcon,
   expandIcon,
 }) => {
-  const mergedTheme = mergeThemeProps(defaultThemeProps, theme);
+  const mergedTheme = mergeThemeProps(defaultTheme, theme);
   const [filterInput, setFilterInput] = useState("");
 
   /**

src/components/MultiLevelTable.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import type { Cell, Row } from "react-table";
 
@@ -48,24 +48,23 @@ export const TableRow: React.FC<TableRowProps> = ({
   theme,
   expandIcon,
 }) => {
-  const getRowClassName = () => {
+  const getRowClassName = useMemo(() => {
     const classes = ["table-row"];
 
     if (isExpanded) classes.push("table-row-expanded");
     if (level === 0) classes.push("table-row-main");
     else classes.push("table-row-nested");
 
     return classes.join(" ");
-  };
-
-  const getRowStyle = () => {
-    if (level === 0)
-      return { backgroundColor: theme.table?.row?.mainBackground };
-    if (isExpanded)
-      return { backgroundColor: theme.table?.row?.expandedBackground };
+  }, [isExpanded, level]);
 
-    return { backgroundColor: theme.table?.row?.nestedBackground };
-  };
+  const getRowStyle = useMemo(() => {
+    const rowShades = theme.table?.row?.levelColors || [];
+    // Use the level to determine which shade to use, defaulting to the lightest shade for deeper nesting
+    const shadeIndex = Math.min(level, rowShades.length - 1);
+    
+    return { backgroundColor: rowShades[shadeIndex]?.background };
+  }, [level, theme.table?.row?.levelColors]);
 
   const handleExpandClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -77,7 +76,7 @@ export const TableRow: React.FC<TableRowProps> = ({
     const dataItem = row as DataItem;
 
     return (
-      <tr className={getRowClassName()} style={getRowStyle()}>
+      <tr className={getRowClassName} style={getRowStyle}>
         {columns.map((column: Column, index: number) => {
           const value = dataItem[column.key as keyof DataItem];
           const displayValue =
@@ -121,8 +120,8 @@ export const TableRow: React.FC<TableRowProps> = ({
     <tr
       key={key}
       {...rowProps}
-      className={getRowClassName()}
-      style={getRowStyle()}
+      className={getRowClassName}
+      style={getRowStyle}
     >
       {tableRow.cells.map((cell: Cell<DataItem>, index: number) => (
         <TableCell

src/components/TableRow.tsx

@@ -1,92 +1,47 @@
-import type { Theme } from '../types/theme';
+import type { ThemeProps } from "../types/theme";
 
-export const defaultTheme: Theme = {
-  light: {
-    colors: {
-      primaryColor: '#2c3e50',
-      textColor: '#2c3e50',
-      borderColor: '#e0e0e0',
-      background: '#ffffff',
-    },
-    table: {
-      header: {
-        background: '#2c3e50',
-        textColor: '#ffffff',
-        borderColor: '#e0e0e0',
-      },
-      row: {
-        mainBackground: '#ffffff',
-        nestedBackground: '#f1f3f5',
-        expandedBackground: '#f8f9fa',
-        hoverBackground: '#f5f5f5',
-      },
-      cell: {
-        textColor: '#2c3e50',
-        borderColor: '#e0e0e0',
-        nestedPadding: '16px',
-      },
-    },
-    pagination: {
-      button: {
-        background: '#2c3e50',
-        textColor: '#ffffff',
-        disabledOpacity: '0.5',
-      },
-      select: {
-        background: '#ffffff',
-        textColor: '#2c3e50',
-        borderColor: '#e0e0e0',
-      },
-      info: {
-        textColor: '#2c3e50',
-      },
-    },
-    expandIcon: {
-      color: '#2c3e50',
-    },
+export const defaultTheme: ThemeProps = {
+  colors: {
+    primaryColor: "#2c3e50",
+    textColor: "#2c3e50",
+    borderColor: "#e0e0e0",
+    background: "#ffffff",
   },
-  dark: {
-    colors: {
-      primaryColor: '#3498db',
-      textColor: '#ecf0f1',
-      borderColor: '#34495e',
-      background: '#2c3e50',
+  table: {
+    header: {
+      background: "#2c3e50",
+      textColor: "#ffffff",
+      borderColor: "#e0e0e0",
+    },
+    row: {
+      levelColors: [
+        { background: "#ffffff" },
+        { background: "#f1f3f5" },
+        { background: "#f8f9fa" },
+      ],
+    },
+    cell: {
+      textColor: "#2c3e50",
+      borderColor: "#e0e0e0",
+      nestedPadding: "16px",
     },
-    table: {
-      header: {
-        background: '#34495e',
-        textColor: '#ecf0f1',
-        borderColor: '#2c3e50',
-      },
-      row: {
-        mainBackground: '#2c3e50',
-        nestedBackground: '#34495e',
-        expandedBackground: '#2c3e50',
-        hoverBackground: '#3d566e',
-      },
-      cell: {
-        textColor: '#ecf0f1',
-        borderColor: '#34495e',
-        nestedPadding: '16px',
-      },
+  },
+  pagination: {
+    button: {
+      background: "#2c3e50",
+      textColor: "#ffffff",
+      disabledOpacity: "0.5",
     },
-    pagination: {
-      button: {
-        background: '#3498db',
-        textColor: '#ffffff',
-        disabledOpacity: '0.5',
-      },
-      select: {
-        background: '#34495e',
-        textColor: '#ecf0f1',
-        borderColor: '#2c3e50',
-      },
-      info: {
-        textColor: '#ecf0f1',
-      },
+    select: {
+      background: "#ffffff",
+      textColor: "#2c3e50",
+      borderColor: "#e0e0e0",
     },
-    expandIcon: {
-      color: '#ecf0f1',
+    info: {
+      textColor: "#2c3e50",
     },
   },
-}; 
+  expandIcon: {
+    color: "#2c3e50",
+  },
+};

src/constants/theme.ts

@@ -16,9 +16,7 @@ export const lightTheme: ThemeProps = {
       borderColor: '#dee2e6',
     },
     row: {
-      mainBackground: '#ffffff',
-      nestedBackground: '#f8f9fa',
-      expandedBackground: '#e9ecef',
+      levelColors: [{background: '#ffffff'}, {background: '#f1f3f5'}, {background: '#f8f9fa'}]
     },
     filter: {
       background: 'transparent',
@@ -64,9 +62,7 @@ export const darkTheme: ThemeProps = {
       borderColor: '#495057',
     },
     row: {
-      mainBackground: '#343a40',
-      nestedBackground: '#2b3035',
-      expandedBackground: '#212529',
+      levelColors: [{background: '#2c3e50'}, {background: '#34495e'}, {background: '#2c3e50'}]
     },
     filter: {
       background: 'transparent',
@@ -94,4 +90,5 @@ export const darkTheme: ThemeProps = {
   expandIcon: {
     color: '#e9ecef',
   },
-}; 
+}; 
+

src/defaultThemeProps.ts

@@ -7,21 +7,22 @@ export interface ThemeProps {
   colors?: {
     background?: string;
     primaryColor?: string;
+    textColor?: string;
     borderColor?: string;
   };
   table?: {
     header?: {
       background?: string;
       textColor?: string;
+      borderColor?: string;
     };
     cell?: {
       textColor?: string;
       borderColor?: string;
+      nestedPadding?: string;
     };
     row?: {
-      mainBackground?: string;
-      nestedBackground?: string;
-      expandedBackground?: string;
+      levelColors?: {background: string}[];
     };
     filter?: {
       background?: string;