jattac.libs.web.responsive-table 0.2.3 → 0.2.4

package/package.json

@@ -1,19 +1,26 @@
 {
   "name": "jattac.libs.web.responsive-table",
-  "version": "0.2.3",
-  "description": "",
+  "version": "0.2.4",
+  "description": "A fully responsive, customizable, and lightweight React table component with a modern, mobile-first design and a powerful plugin system.",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "rollup -c",
+    "watch": "rollup -c -w",
     "lint": "eslint './{src,app}/**/*.{ts,tsx}'",
     "size": "size-limit",
     "prepare": "npm run build"
   },
   "keywords": [
     "react",
-    "typescript"
+    "typescript",
+    "table",
+    "responsive",
+    "component"
   ],
   "author": "Nyingi Maina",
   "license": "MIT",
@@ -25,6 +32,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^10.0.1",
     "@testing-library/react": "^14.0.0",
@@ -38,7 +46,6 @@
     "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",
@@ -53,8 +60,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
     "react-window": "^1.8.11",
     "tslib": "^2.6.2"
   }
-}
+}

package/.eslintrc.json

@@ -1,8 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "extends": ["plugin:@typescript-eslint/recommended"],
-  "rules": {
-    "@typescript-eslint/no-var-requires": "warn"
-  }
-}

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120
-}

package/gemini/index.md

@@ -1 +0,0 @@
-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/project_analysis.md

@@ -1,41 +0,0 @@
-
-Based on the files, here's an in-depth understanding of the project:
-
-**Project Goal:**
-
-The project, `jattac.libs.web.responsive-table`, is a reusable **React component library** that provides a highly customizable and responsive table. The key feature is its ability to transform from a traditional tabular layout on larger screens to a more readable card-based layout on mobile devices.
-
-**Core Functionality & Features:**
-
-*   **Responsiveness:** This is the primary selling point. It automatically adapts the table's presentation based on the screen width (`mobileBreakpoint` prop), ensuring a good user experience on both desktop and mobile.
-*   **Data-Driven:** The table is populated with data passed through the `data` prop. The structure of the table (columns) is defined by the `columnDefinitions` prop.
-*   **Customizable Rendering:** The `cellRenderer` function in the column definitions allows developers to render any React component within a cell, enabling rich content like buttons, links, formatted text, and more.
-*   **Dynamic Columns:** Column definitions can be functions, allowing for the dynamic creation of columns based on application state or data properties (e.g., showing an "Admin Actions" column only for admin users).
-*   **Interactivity:**
-    *   **Row Clicks:** The `onRowClick` prop allows for handling clicks on entire table rows.
-    *   **Header Clicks:** The `interactivity` property on a column definition enables click handlers for table headers, useful for sorting or filtering actions.
-*   **Loading and Empty States:**
-    *   It provides a `isLoading` prop to display a skeleton loader while data is being fetched, improving the user experience.
-    *   A customizable `noDataComponent` can be shown when there's no data to display.
-*   **Animations:** It supports optional staggered entrance animations for rows (`animateOnLoad` prop) to make the table feel more dynamic.
-*   **Table Footer:** The `footerRows` prop allows for adding a footer to the table, which is also responsive. This is useful for displaying summary information like totals.
-*   **Styling:** It uses CSS Modules (`ResponsiveTable.module.css`) for scoped styling, preventing style conflicts with other parts of an application. It also uses CSS variables for easy theming.
-
-**Project Structure & Technology Stack:**
-
-*   **Language:** TypeScript (`.ts`, `.tsx`) and JavaScript for the build configuration.
-*   **Framework:** React.
-*   **Build Tool:** Rollup is used to bundle the library for distribution. The `rollup.config.js` file defines the build process, including plugins for handling TypeScript, PostCSS (for CSS Modules), and resolving dependencies.
-*   **Package Manager:** npm.
-*   **Linting & Formatting:** ESLint and Prettier are used to maintain code quality and consistency.
-*   **Testing:** While no test files are present, the `package.json` includes dependencies for `@testing-library/react`, indicating that testing is intended for this project.
-*   **Distribution:** The `dist` directory (ignored by Git) is the output for the bundled library, which is then published to npm. The `package.json` defines the entry points (`main`, `module`, `types`).
-
-**Development & Maintenance:**
-
-*   The project includes shell scripts (`set-origin-urls.sh`, `update-dependancies.sh`) to help with development tasks like updating remote URLs and managing dependencies.
-*   The `README.md` is comprehensive, providing clear installation instructions, getting-started examples, and a detailed API reference. This is crucial for a library intended for other developers to use.
-
-**Overall Impression:**
-
-This is a well-structured and well-documented React component library. It solves a common problem (responsive tables) with a modern and flexible approach. The focus on customization, performance (debounced resize handling), and developer experience (clear documentation, helpful scripts) makes it a high-quality project. The use of TypeScript, CSS Modules, and a proper build process are all signs of a professional and maintainable codebase.

package/gemini/project_memos.md

@@ -1,3 +0,0 @@
-# Project Memos
-
-- It is of utmost importance to clean up any temporary files created during a task. Always delete temporary files, such as commit_message.txt, after they have served their purpose.

package/gemini/release_git_steps.md

@@ -1,80 +0,0 @@
-## 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/rollup.config.js

@@ -1,23 +0,0 @@
-const postcss = require('rollup-plugin-postcss');
-const typescript = require('@rollup/plugin-typescript');
-const peerDepsExternal = require('rollup-plugin-peer-deps-external');
-const resolve = require('@rollup/plugin-node-resolve').default;
-const commonjs = require('@rollup/plugin-commonjs');
-
-module.exports = {
-  input: 'src/index.tsx',
-  output: {
-    dir: 'dist',
-    format: 'cjs',
-    sourcemap: true,
-  },
-  plugins: [
-    peerDepsExternal(),
-    resolve(),
-    typescript(),
-    commonjs(),
-    postcss({
-      modules: true,
-    }),
-  ],
-};

package/set-origin-urls.sh

@@ -1,32 +0,0 @@
-#!/bin/bash
-
-read -p "Enter your Personal Access Token (PAT): " pat
-
-# Get the current remote URL
-current_url=$(git remote get-url origin)
-
-# Determine if the remote is GitHub or Azure DevOps
-if [[ "$current_url" == *"github.com"* ]]; then
-    repo_url=$(echo "$current_url" | sed -E 's#https://([^@]+@)?github.com/#https://github.com/#')
-    new_url=$(echo "$repo_url" | sed -E "s#https://github.com/#https://$pat@github.com/#")
-elif [[ "$current_url" == *"visualstudio.com"* || "$current_url" == *"dev.azure.com"* ]]; then
-    repo_url=$(echo "$current_url" | sed -E 's#https://([^@]+@)?([^/]+)/#https://\2/#')
-    new_url=$(echo "$repo_url" | sed -E "s#https://#https://$pat@#")
-else
-    echo "Unsupported remote URL format."
-    exit 1
-fi
-
-echo "Current remote URL: $current_url"
-echo "Constructed new remote URL: $new_url"
-read -p "Do you want to proceed with updating the remote URL? (y/n): " confirm
-if [[ "$confirm" != "y" ]]; then
-    echo "Operation canceled."
-    exit 1
-fi
-
-git remote set-url origin "$new_url"
-
-echo "Updated remote URL to: $new_url"
-
-git remote -v

package/src/Data/IFooterColumnDefinition.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-
-export default interface IFooterColumnDefinition {
-  colSpan: number;
-  cellRenderer: () => ReactNode;
-  /**
-   * An optional, explicit label for the footer cell, especially for mobile view.
-   * If not provided, the table could try to infer it from the corresponding column.
-   */
-  displayLabel?: ReactNode;
-
-  /**
-   * An optional click handler for the footer cell.
-   */
-  onCellClick?: () => void;
-
-  /**
-   * Optional class name for custom styling of the footer cell.
-   */
-  className?: string;
-}

package/src/Data/IFooterRowDefinition.ts

@@ -1,5 +0,0 @@
-import IFooterColumnDefinition from './IFooterColumnDefinition';
-
-export default interface IFooterRowDefinition {
-  columns: IFooterColumnDefinition[];
-}

package/src/Data/IResponsiveTableColumnDefinition.tsx

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

package/src/Plugins/InfiniteScrollPlugin.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
-
-export class InfiniteScrollPlugin<TData> implements IResponsiveTablePlugin<TData> {
-  public id = 'infinite-scroll';
-  private api!: IPluginAPI<TData>;
-  private isLoadingMore = false;
-
-  constructor() {
-  }
-
-  public onPluginInit = (api: IPluginAPI<TData>) => {
-    this.api = api;
-    this.attachScrollListener();
-  };
-
-  private attachScrollListener = () => {
-    const scrollableElement = this.api.getScrollableElement?.();
-    if (scrollableElement) {
-      scrollableElement.addEventListener('scroll', this.handleScroll);
-    }
-  };
-
-  private handleScroll = async () => {
-    const scrollableElement = this.api.getScrollableElement?.();
-    if (!scrollableElement || !this.api.infiniteScrollProps?.enableInfiniteScroll) {
-      return;
-    }
-
-    const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
-
-    const scrollThreshold = 200; // Load more data when 200px from the bottom
-
-    if (
-      scrollHeight - scrollTop - clientHeight < scrollThreshold &&
-      this.api.infiniteScrollProps.hasMore &&
-      !this.isLoadingMore
-    ) {
-      this.isLoadingMore = true;
-      this.api.forceUpdate(); // Trigger re-render to show loading component
-
-      const newData = await this.api.infiniteScrollProps.onLoadMore?.(this.api.getData());
-
-      if (newData) {
-        // The main component will handle appending data via processData
-      } else {
-        // No more data, update hasMore in parent if necessary
-      }
-
-      this.isLoadingMore = false;
-      this.api.forceUpdate(); // Trigger re-render to hide loading component
-    }
-  };
-
-  public processData = (data: TData[]): TData[] => {
-    // This plugin doesn't modify the data directly, but rather triggers loading more.
-    // The main component's data prop should be updated by the consumer of the table.
-    return data;
-  };
-
-  public renderFooter = () => {
-    if (!this.api.infiniteScrollProps) {
-      return null;
-    }
-
-    if (this.isLoadingMore) {
-      return this.api.infiniteScrollProps.loadingMoreComponent || <div>Loading more...</div>;
-    } else if (!this.api.infiniteScrollProps.hasMore) {
-      return this.api.infiniteScrollProps.noMoreDataComponent || <div>No more data.</div>;
-    }
-    return null;
-  };
-}