jattac.libs.web.responsive-table 0.2.0 → 0.2.2

package/gemini/commit_message.txt

@@ -0,0 +1 @@
+chore: Bump version to 0.2.2

package/gemini/index.md

@@ -0,0 +1 @@
+Please inspect this directory recursively to understand the project in depth. Analyze its purpose, technology stack, core features, and overall structure. Provide a comprehensive explanation based on your findings. Start by listing all relevant files and then read the contents of key files like `package.json`, `README.md`, and any other configuration or source files that seem important.

package/gemini/release_git_steps.md

@@ -1,64 +1,80 @@
-## Release Git Steps
-
-This document outlines the sequence of Git commands to perform at the end of every release cycle to ensure the `master` branch is up-to-date, tagged, and all changes are pushed to the remote repository.
-
-**Prerequisites:**
-- Ensure all development work for the release is complete and committed to the `develop` branch.
-- Ensure you are on the `develop` branch (`git checkout develop`).
-
-**Steps:**
-
-1.  **Stage all changes (if any uncommitted changes exist on `develop`):**
-    ```bash
-    git add .
-    ```
-
-2.  **Commit changes on `develop` (if not already done):**
-    ```bash
-    git commit -m "feat(release): Prepare for new release"
-    # Or, if you have a multi-line message, use a temporary file:
-    # echo "Your detailed commit message" > commit_message.txt
-    # git commit -F commit_message.txt
-    ```
-    *(Note: We assume the main feature/bugfix commits are already on `develop`.)*
-
-3.  **Switch to the `master` branch:**
-    ```bash
-    git checkout master
-    ```
-
-4.  **Merge `develop` into `master`:**
-    ```bash
-    git merge develop
-    ```
-    *This will bring all the latest changes from `develop` into `master`.*
-
-5.  **Get the current version from `package.json`:**
-    ```bash
-    # Manually read the "version" field from package.json
-    # Example: "version": "1.0.0"
-    # Let's assume the version is X.Y.Z
-    ```
-
-6.  **Create a new Git tag for the release:**
-    ```bash
-    git tag vX.Y.Z
-    ```
-    *Replace `X.Y.Z` with the actual version number obtained from `package.json`.*
-
-7.  **Push the `master` branch and all tags to the remote repository:**
-    ```bash
-    git push origin master --tags
-    ```
-
-8.  **Switch back to the `develop` branch:**
-    ```bash
-    git checkout develop
-    ```
-
-9.  **Push the `develop` branch to the remote repository (to ensure it's up-to-date after the merge):**
-    ```bash
-    git push origin develop
-    ```
-
-This sequence ensures a clean release process, updating `master`, creating a version tag, and synchronizing both branches with the remote.
+## Release Git Steps
+
+This document outlines the sequence of Git commands to perform at the end of every release cycle to ensure the `master` branch is up-to-date, tagged, and all changes are pushed to the remote repository.
+
+**Prerequisites:**
+- Ensure all development work for the release is complete and committed to the `develop` branch.
+- Ensure you are on the `develop` branch (`git checkout develop`).
+
+**Steps:**
+
+1.  **Stage all changes (if any uncommitted changes exist on `develop`):**
+    ```bash
+    git add .
+    ```
+
+2.  **Commit changes on `develop` (if not already done):**
+    ```bash
+    git commit -m "feat(release): Release vX.Y.Z
+
+Summarize the key changes, new features, bug fixes, and any breaking changes
+introduced in this release. This message should provide a high-level overview
+of what's new since the last release.
+
+Example:
+- Introduced extensible plugin system with Filter and Infinite Scroll plugins.
+- Refactored animation props into a dedicated object.
+- Added virtualized scrolling for large datasets.
+- Updated dependencies."
+    # Or, if you have a multi-line message, use a temporary file:
+    # echo "Your detailed commit message" > commit_message.txt
+    # git commit -F commit_message.txt
+    ```
+    *(Note: We assume the main feature/bugfix commits are already on `develop`.)*
+
+3.  **Switch to the `master` branch:**
+    ```bash
+    git checkout master
+    ```
+
+4.  **Merge `develop` into `master`:**
+    ```bash
+    git merge develop
+    ```
+    *This will bring all the latest changes from `develop` into `master`.*
+
+5.  **Get the current version from `package.json`:**
+    ```bash
+    # Manually read the "version" field from package.json
+    # Example: "version": "1.0.0"
+    # Let's assume the version is X.Y.Z
+    ```
+
+6.  **Create a new Git tag for the release:**
+    ```bash
+    git tag vX.Y.Z
+    ```
+    *Replace `X.Y.Z` with the actual version number obtained from `package.json`.*
+
+7.  **Push the `master` branch and all tags to the remote repository:**
+    ```bash
+    git push origin master --tags
+    ```
+
+8.  **Switch back to the `develop` branch:**
+    ```bash
+    git checkout develop
+    ```
+
+9.  **Push the `develop` branch to the remote repository (to ensure it's up-to-date after the merge):**
+    ```bash
+    git push origin develop
+    ```
+
+This sequence ensures a clean release process, updating `master`, creating a version tag, and synchronizing both branches with the remote.
+
+10. **Delete temporary files:**
+    ```bash
+    del commit_message.txt
+    ```
+    *Ensure to delete any temporary files created during the release process.*

package/package.json

@@ -1,60 +1,60 @@
-{
-  "name": "jattac.libs.web.responsive-table",
-  "version": "0.2.0",
-  "description": "",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "rollup -c",
-    "lint": "eslint './{src,app}/**/*.{ts,tsx}'",
-    "size": "size-limit",
-    "prepare": "npm run build"
-  },
-  "keywords": [
-    "react",
-    "typescript"
-  ],
-  "author": "Nyingi Maina",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
-    "typescript": ">=3.7.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@size-limit/preset-small-lib": "^10.0.1",
-    "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "identity-obj-proxy": "^3.0.0",
-    "npm": "^10.2.2",
-    "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^4.2.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-generate-package-json": "^3.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "size-limit": "^10.0.1",
-    "typescript": "^5.2.2"
-  },
-  "dependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "react-window": "^1.8.11",
-    "tslib": "^2.6.2"
-  }
-}
+{
+  "name": "jattac.libs.web.responsive-table",
+  "version": "0.2.2",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint './{src,app}/**/*.{ts,tsx}'",
+    "size": "size-limit",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "typescript"
+  ],
+  "author": "Nyingi Maina",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "typescript": ">=3.7.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@size-limit/preset-small-lib": "^10.0.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-window": "^1.8.8",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "identity-obj-proxy": "^3.0.0",
+    "npm": "^10.2.2",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.2.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^10.0.1",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "react-window": "^1.8.11",
+    "tslib": "^2.6.2"
+  }
+}

package/src/Data/IResponsiveTableColumnDefinition.tsx

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
-
-export default interface IResponsiveTableColumnDefinition<TData> {
-  displayLabel: ReactNode;
-  cellRenderer: (data: TData) => ReactNode;
-  interactivity?: {
-    id: string;
-    onHeaderClick?: (id: string) => void;
-    className?: string;
-  };
-  getFilterableValue?: (data: TData) => string | number;
-}
+import { ReactNode } from 'react';
+
+export default interface IResponsiveTableColumnDefinition<TData> {
+  displayLabel: ReactNode;
+  cellRenderer: (data: TData) => ReactNode;
+  interactivity?: {
+    id: string;
+    onHeaderClick?: (id: string) => void;
+    className?: string;
+  };
+  getFilterableValue?: (data: TData) => string | number;
+}

package/src/Plugins/FilterPlugin.tsx

@@ -1,71 +1,71 @@
-import React from 'react';
-import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
-import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
-
-export class FilterPlugin<TData> implements IResponsiveTablePlugin<TData> {
-  public id = 'filter';
-  private filterText = '';
-  private api!: IPluginAPI<TData>;
-
-  constructor() {
-  }
-
-  public onPluginInit = (api: IPluginAPI<TData>) => {
-    this.api = api;
-  };
-
-  public renderHeader = () => {
-    if (!this.api.filterProps?.showFilter) {
-      return null;
-    }
-    return (
-      <div style={{ float: 'right', marginBottom: '1rem' }}>
-        <input
-          type="text"
-          placeholder={this.api.filterProps.filterPlaceholder || "Search..."}
-          onChange={this.handleFilterChange}
-          style={{
-            padding: '0.5rem',
-            border: '1px solid #ccc',
-            borderRadius: '4px',
-          }}
-        />
-      </div>
-    );
-  };
-
-  public processData = (data: TData[]): TData[] => {
-    if (!this.filterText || !this.api.columnDefinitions) {
-      return data;
-    }
-
-    const lowercasedFilter = this.filterText.toLowerCase();
-
-    return data.filter((row) => {
-      return this.api.columnDefinitions!.some((colDef) => {
-        // If colDef is a function, it won't have getFilterableValue, so skip it.
-        if (typeof colDef === 'function') {
-          return false;
-        }
-
-        // Now we know colDef is an object (IResponsiveTableColumnDefinition<TData>)
-        const typedColDef = colDef as IResponsiveTableColumnDefinition<TData>;
-
-        // Check if getFilterableValue exists and is a function
-        if (typedColDef.getFilterableValue && typeof typedColDef.getFilterableValue === 'function') {
-          const value = typedColDef.getFilterableValue(row);
-          return value?.toString().toLowerCase().includes(lowercasedFilter);
-        }
-        return false; // If getFilterableValue is not present or not a function
-      });
-    });
-  };
-
-  private handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Debounce the filter change
-    setTimeout(() => {
-      this.filterText = e.target.value;
-      this.api.forceUpdate();
-    }, 300);
-  };
-}
+import React from 'react';
+import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
+import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
+
+export class FilterPlugin<TData> implements IResponsiveTablePlugin<TData> {
+  public id = 'filter';
+  private filterText = '';
+  private api!: IPluginAPI<TData>;
+
+  constructor() {
+  }
+
+  public onPluginInit = (api: IPluginAPI<TData>) => {
+    this.api = api;
+  };
+
+  public renderHeader = () => {
+    if (!this.api.filterProps?.showFilter) {
+      return null;
+    }
+    return (
+      <div style={{ float: 'right', marginBottom: '1rem' }}>
+        <input
+          type="text"
+          placeholder={this.api.filterProps.filterPlaceholder || "Search..."}
+          onChange={this.handleFilterChange}
+          style={{
+            padding: '0.5rem',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+      </div>
+    );
+  };
+
+  public processData = (data: TData[]): TData[] => {
+    if (!this.filterText || !this.api.columnDefinitions) {
+      return data;
+    }
+
+    const lowercasedFilter = this.filterText.toLowerCase();
+
+    return data.filter((row) => {
+      return this.api.columnDefinitions!.some((colDef) => {
+        // If colDef is a function, it won't have getFilterableValue, so skip it.
+        if (typeof colDef === 'function') {
+          return false;
+        }
+
+        // Now we know colDef is an object (IResponsiveTableColumnDefinition<TData>)
+        const typedColDef = colDef as IResponsiveTableColumnDefinition<TData>;
+
+        // Check if getFilterableValue exists and is a function
+        if (typedColDef.getFilterableValue && typeof typedColDef.getFilterableValue === 'function') {
+          const value = typedColDef.getFilterableValue(row);
+          return value?.toString().toLowerCase().includes(lowercasedFilter);
+        }
+        return false; // If getFilterableValue is not present or not a function
+      });
+    });
+  };
+
+  private handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Debounce the filter change
+    setTimeout(() => {
+      this.filterText = e.target.value;
+      this.api.forceUpdate();
+    }, 300);
+  };
+}

package/src/Plugins/IResponsiveTablePlugin.ts

@@ -1,48 +1,48 @@
-import { ReactNode } from 'react';
-import { ColumnDefinition } from '../UI/ResponsiveTable';
-
-export interface IResponsiveTablePlugin<TData> {
-  // A unique identifier for the plugin
-  id: string;
-
-  // Optional: Renders a UI component above the table
-  renderHeader?: () => ReactNode;
-
-  // Optional: Renders a UI component below the table
-  renderFooter?: () => ReactNode;
-
-  // Optional: Processes the data before it's rendered
-  processData?: (data: TData[]) => TData[];
-
-  // Optional: A callback that the table can use to provide the plugin with its own API
-  onPluginInit?: (api: IPluginAPI<TData>) => void;
-}
-
-export interface IPluginAPI<TData> {
-  // Function to get the current data from the table
-  getData: () => TData[];
-
-  // Function to force the table to re-render
-  forceUpdate: () => void;
-
-  // Function to get the column definitions from the table
-  columnDefinitions: ColumnDefinition<TData>[];
-
-  // Function to get the scrollable element of the table
-  getScrollableElement?: () => HTMLElement | null;
-
-  // Optional: Infinite scroll props from the ResponsiveTable component
-  infiniteScrollProps?: {
-    enableInfiniteScroll?: boolean;
-    onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
-    hasMore?: boolean;
-    loadingMoreComponent?: ReactNode;
-    noMoreDataComponent?: ReactNode;
-  };
-
-  // Optional: Filter props from the ResponsiveTable component
-  filterProps?: {
-    showFilter?: boolean;
-    filterPlaceholder?: string;
-  };
-}
+import { ReactNode } from 'react';
+import { ColumnDefinition } from '../UI/ResponsiveTable';
+
+export interface IResponsiveTablePlugin<TData> {
+  // A unique identifier for the plugin
+  id: string;
+
+  // Optional: Renders a UI component above the table
+  renderHeader?: () => ReactNode;
+
+  // Optional: Renders a UI component below the table
+  renderFooter?: () => ReactNode;
+
+  // Optional: Processes the data before it's rendered
+  processData?: (data: TData[]) => TData[];
+
+  // Optional: A callback that the table can use to provide the plugin with its own API
+  onPluginInit?: (api: IPluginAPI<TData>) => void;
+}
+
+export interface IPluginAPI<TData> {
+  // Function to get the current data from the table
+  getData: () => TData[];
+
+  // Function to force the table to re-render
+  forceUpdate: () => void;
+
+  // Function to get the column definitions from the table
+  columnDefinitions: ColumnDefinition<TData>[];
+
+  // Function to get the scrollable element of the table
+  getScrollableElement?: () => HTMLElement | null;
+
+  // Optional: Infinite scroll props from the ResponsiveTable component
+  infiniteScrollProps?: {
+    enableInfiniteScroll?: boolean;
+    onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
+    hasMore?: boolean;
+    loadingMoreComponent?: ReactNode;
+    noMoreDataComponent?: ReactNode;
+  };
+
+  // Optional: Filter props from the ResponsiveTable component
+  filterProps?: {
+    showFilter?: boolean;
+    filterPlaceholder?: string;
+  };
+}