simple-table-core 0.1.4 → 0.1.6

package/dist/components/Animate.d.ts

@@ -0,0 +1,7 @@
+interface AnimateProps {
+    allowHorizontalAnimate?: boolean;
+    children: any;
+    pause?: boolean;
+}
+declare const Animate: ({ allowHorizontalAnimate, children, pause, }: AnimateProps) => any;
+export default Animate;

package/dist/components/SimpleTable/SimpleTable.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import HeaderObject from "../../types/HeaderObject";
+import "../../styles/simple-table.css";
+interface SpreadsheetProps {
+    defaultHeaders: HeaderObject[];
+    enableColumnResizing?: boolean;
+    height?: string;
+    hideFooter?: boolean;
+    nextIcon?: ReactNode;
+    prevIcon?: ReactNode;
+    rows: {
+        [key: string]: string | number | boolean | undefined | null;
+    }[];
+    rowsPerPage?: number;
+    shouldPaginate?: boolean;
+}
+declare const SimpleTable: ({ defaultHeaders, enableColumnResizing, height, hideFooter, nextIcon, prevIcon, rows, rowsPerPage, shouldPaginate, }: SpreadsheetProps) => import("react/jsx-runtime").JSX.Element;
+export default SimpleTable;

package/dist/components/SimpleTable/TableBody.d.ts

@@ -0,0 +1,19 @@
+import HeaderObject from "../../types/HeaderObject";
+interface TableBodyProps {
+    getBorderClass: (rowIndex: number, columnIndex: number) => string;
+    handleMouseDown: (rowIndex: number, columnIndex: number) => void;
+    handleMouseOver: (rowIndex: number, columnIndex: number) => void;
+    headers: HeaderObject[];
+    isSelected: (rowIndex: number, columnIndex: number) => boolean;
+    isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
+    isWidthDragging: boolean;
+    shouldDisplayLastColumnCell: boolean;
+    shouldPaginate: boolean;
+    sortedRows: {
+        [key: string]: any;
+    }[];
+}
+declare const TableBody: ({ getBorderClass, handleMouseDown, handleMouseOver, headers, isSelected, isTopLeftCell, isWidthDragging, shouldDisplayLastColumnCell, shouldPaginate, sortedRows, }: TableBodyProps & {
+    shouldDisplayLastColumnCell: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TableBody;

package/dist/components/SimpleTable/TableCell.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface TableCellProps {
+    rowIndex: number;
+    colIndex: number;
+    content: any;
+    isSelected: boolean;
+    isTopLeftCell: boolean;
+    borderClass: string;
+    onMouseDown: (rowIndex: number, colIndex: number) => void;
+    onMouseOver: (rowIndex: number, colIndex: number) => void;
+    isLastRow: boolean;
+}
+declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export default TableCell;

package/dist/components/SimpleTable/TableFooter.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+interface TableFooterProps {
+    currentPage: number;
+    hideFooter?: boolean;
+    nextIcon?: ReactNode;
+    onPageChange: (page: number) => void;
+    prevIcon?: ReactNode;
+    rowsPerPage: number;
+    totalRows: number;
+}
+declare const TableFooter: ({ currentPage, hideFooter, nextIcon, onPageChange, prevIcon, rowsPerPage, totalRows, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableFooter;

package/dist/components/SimpleTable/TableHeader.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from "react";
+import HeaderObject from "../../types/HeaderObject";
+interface TableHeaderProps {
+    enableColumnResizing: boolean;
+    forceUpdate: () => void;
+    headersRef: React.RefObject<HeaderObject[]>;
+    isWidthDragging: boolean;
+    onSort: (columnIndex: number) => void;
+    onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
+    setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
+    shouldDisplayLastColumnCell: boolean;
+}
+declare const TableHeader: ({ enableColumnResizing, forceUpdate, headersRef, isWidthDragging, onSort, onTableHeaderDragEnd, setIsWidthDragging, shouldDisplayLastColumnCell, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TableHeader;

package/dist/components/SimpleTable/TableHeaderCell.d.ts

@@ -0,0 +1,15 @@
+import { SetStateAction, Dispatch } from "react";
+import HeaderObject from "../../types/HeaderObject";
+interface TableHeaderCellProps {
+    draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
+    enableColumnResizing: boolean;
+    forceUpdate: () => void;
+    headersRef: React.RefObject<HeaderObject[]>;
+    hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
+    index: number;
+    onSort: (columnIndex: number) => void;
+    onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
+    setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
+}
+declare const TableHeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableHeaderCell;

package/dist/components/SimpleTable/TableLastColumnCell.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const TableLastColumnCell: import("react").ForwardRefExoticComponent<{
+    isLastRow?: boolean | undefined;
+    visible: boolean;
+} & import("react").RefAttributes<unknown>>;
+export default TableLastColumnCell;

package/dist/components/SimpleTable/TableRowSeparator.d.ts

@@ -0,0 +1,2 @@
+declare const TableRowSeparator: () => import("react/jsx-runtime").JSX.Element;
+export default TableRowSeparator;

package/dist/consts/SampleData.d.ts

@@ -0,0 +1,19 @@
+import HeaderObject from "../types/HeaderObject";
+export declare const SAMPLE_HEADERS: HeaderObject[];
+export declare const inventoryData: {
+    id: string;
+    productName: string;
+    category: string;
+    quantity: number;
+    price: string;
+    supplier: string;
+    location: string;
+    reorderLevel: number;
+    sku: string;
+    description: string;
+    weight: string;
+    dimensions: string;
+    barcode: string;
+    expirationDate: string;
+    manufacturer: string;
+}[];

package/dist/helpers/calculateBoundingBoxes.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface BoundingBox {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+}
+declare const calculateBoundingBoxes: (children: ReactNode) => {
+    [key: string]: BoundingBox;
+};
+export default calculateBoundingBoxes;

package/dist/helpers/shuffleArray.d.ts

@@ -0,0 +1 @@
+export default function shuffleArray(array: any[]): any[];

package/dist/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: (value: any) => undefined;
+export default usePrevious;

package/dist/hooks/useSelection.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import HeaderObject from "../types/HeaderObject";
+interface Cell {
+    row: number;
+    col: number;
+}
+declare const useSelection: (rows: {
+    [key: string]: any;
+}[], headers: HeaderObject[]) => {
+    selectedCells: Cell[];
+    handleMouseDown: (rowIndex: number, colIndex: number) => void;
+    handleMouseOver: (rowIndex: number, colIndex: number) => void;
+    handleMouseUp: () => void;
+    isSelected: (rowIndex: number, colIndex: number) => boolean;
+    getBorderClass: (rowIndex: number, colIndex: number) => string;
+    isTopLeftCell: (rowIndex: number, colIndex: number) => boolean;
+    setSelectedCells: import("react").Dispatch<import("react").SetStateAction<Cell[]>>;
+};
+export default useSelection;

package/dist/hooks/useTableHeaderCell.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import HeaderObject from "../types/HeaderObject";
+interface UseTableHeaderCellProps {
+    draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
+    headersRef: React.RefObject<HeaderObject[]>;
+    hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
+    onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
+}
+declare const useTableHeaderCell: ({ draggedHeaderRef, headersRef, hoveredHeaderRef, onTableHeaderDragEnd, }: UseTableHeaderCellProps) => {
+    handleDragStart: (header: HeaderObject) => void;
+    handleDragOver: (hoveredHeader: HeaderObject) => void;
+    handleDragEnd: () => void;
+};
+export default useTableHeaderCell;

package/dist/icons/AngleLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const AngleLeftIcon: React.FC;
+export default AngleLeftIcon;

package/dist/icons/AngleRightIcon.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const AngleRightIcon: React.FC;
+export default AngleRightIcon;

package/{src/index.tsx → dist/index.d.ts}

@@ -1,3 +1,2 @@
 import SimpleTable from "./components/SimpleTable/SimpleTable";
-
 export { SimpleTable };

package/dist/stories/SimpleTable.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SimpleTable: Story;

package/dist/stories/SimpleTableExample.d.ts

@@ -0,0 +1 @@
+export declare const SampleTable: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/HeaderObject.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+type HeaderObject = {
+    label: string;
+    accessor: string;
+    width: number;
+    cellRenderer?: (row: {
+        [key: string]: any;
+    }) => ReactNode;
+};
+export default HeaderObject;

package/dist/utils/performanceUtils.d.ts

@@ -0,0 +1 @@
+export declare const throttle: (func: (...args: any[]) => void, limit: number) => (this: any, ...args: any[]) => void;

package/dist/utils/sortUtils.d.ts

@@ -0,0 +1,15 @@
+import HeaderObject from "../types/HeaderObject";
+export declare const onSort: (headers: HeaderObject[], rows: {
+    [key: string]: any;
+}[], sortConfig: {
+    key: HeaderObject;
+    direction: string;
+} | null, columnIndex: number) => {
+    sortedData: {
+        [key: string]: any;
+    }[];
+    newSortConfig: {
+        key: HeaderObject;
+        direction: string;
+    };
+};

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "simple-table-core",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "react": "^18.3.1"
   },

package/.storybook/main.ts

@@ -1,18 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from "@storybook/react";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/rollup.config.js

@@ -1,27 +0,0 @@
-import babel from "@rollup/plugin-babel";
-import resolve from "@rollup/plugin-node-resolve";
-import postcss from "rollup-plugin-postcss";
-import typescript from "@rollup/plugin-typescript";
-import { terser } from "rollup-plugin-terser";
-
-export default {
-  input: "src/index.tsx",
-  output: {
-    file: "dist/index.js",
-    format: "esm",
-  },
-  plugins: [
-    postcss({
-      plugins: [],
-      minimize: true,
-    }),
-    babel({
-      exclude: "node_modules/**",
-      presets: ["@babel/preset-react"],
-    }),
-    resolve(),
-    typescript(),
-    terser(),
-  ],
-  external: ["react", "react/jsx-runtime"],
-};

package/src/components/Animate.tsx

@@ -1,69 +0,0 @@
-import React, { useState, useLayoutEffect, useEffect } from "react";
-import usePrevious from "../hooks/usePrevious";
-import calculateBoundingBoxes from "../helpers/calculateBoundingBoxes";
-
-interface AnimateProps {
-  allowHorizontalAnimate?: boolean;
-  children: any;
-  pause?: boolean;
-}
-
-const Animate = ({
-  allowHorizontalAnimate = true,
-  children,
-  pause,
-}: AnimateProps) => {
-  const [boundingBox, setBoundingBox] = useState<any>({});
-  const [prevBoundingBox, setPrevBoundingBox] = useState<any>({});
-  const prevChildren = usePrevious(children);
-
-  useLayoutEffect(() => {
-    const newBoundingBox = calculateBoundingBoxes(children);
-    setBoundingBox(newBoundingBox);
-  }, [children]);
-
-  useLayoutEffect(() => {
-    const prevBoundingBox = calculateBoundingBoxes(prevChildren);
-    setPrevBoundingBox(prevBoundingBox);
-  }, [prevChildren]);
-
-  useEffect(() => {
-    if (pause) return;
-    const hasPrevBoundingBox = Object.keys(prevBoundingBox).length;
-
-    if (hasPrevBoundingBox) {
-      React.Children.forEach(children, (child) => {
-        const domNode = child.ref.current;
-        const firstBox = prevBoundingBox[child.key];
-        const lastBox = boundingBox[child.key];
-
-        const changeInX = firstBox.left - lastBox.left;
-        const changeInY = !allowHorizontalAnimate
-          ? firstBox.top - lastBox.top
-          : 0;
-
-        const absoluteChangeInX = Math.abs(changeInX);
-        const absoluteChangeInY = Math.abs(changeInY);
-
-        if (absoluteChangeInX > 10 || absoluteChangeInY > 10) {
-          requestAnimationFrame(() => {
-            // Before the DOM paints, invert child to old position
-            domNode.style.transform = `translate(${changeInX}px, ${changeInY}px)`;
-            domNode.style.transition = "transform 0s";
-
-            requestAnimationFrame(() => {
-              // After the previous frame, remove
-              // the transition to play the animation
-              domNode.style.transform = "";
-              domNode.style.transition = "transform 500ms";
-            });
-          });
-        }
-      });
-    }
-  }, [boundingBox, prevBoundingBox, children, pause, allowHorizontalAnimate]);
-
-  return children;
-};
-
-export default Animate;

package/src/components/SimpleTable/SimpleTable.tsx

@@ -1,165 +0,0 @@
-import {
-  useState,
-  useRef,
-  useEffect,
-  useReducer,
-  ReactNode,
-  useMemo,
-} from "react";
-import useSelection from "../../hooks/useSelection";
-import TableHeader from "./TableHeader";
-import { onSort } from "../../utils/sortUtils";
-import TableBody from "./TableBody";
-import HeaderObject from "../../types/HeaderObject";
-import TableFooter from "./TableFooter";
-import AngleLeftIcon from "../../icons/AngleLeftIcon";
-import AngleRightIcon from "../../icons/AngleRightIcon";
-import "../../styles/simple-table.css";
-
-interface SpreadsheetProps {
-  defaultHeaders: HeaderObject[];
-  enableColumnResizing?: boolean;
-  height?: string;
-  hideFooter?: boolean;
-  nextIcon?: ReactNode;
-  prevIcon?: ReactNode;
-  rows: { [key: string]: string | number | boolean | undefined | null }[];
-  rowsPerPage?: number;
-  shouldPaginate?: boolean;
-}
-
-const SimpleTable = ({
-  defaultHeaders,
-  enableColumnResizing = true,
-  height,
-  hideFooter = false,
-  nextIcon = <AngleRightIcon />,
-  prevIcon = <AngleLeftIcon />,
-  rows,
-  rowsPerPage = 10,
-  shouldPaginate = true,
-}: SpreadsheetProps) => {
-  const [isWidthDragging, setIsWidthDragging] = useState(false);
-  const headersRef = useRef(defaultHeaders);
-  const [sortedRows, setSortedRows] = useState(rows);
-  const [sortConfig, setSortConfig] = useState<{
-    key: HeaderObject;
-    direction: string;
-  } | null>(null);
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const tableRef = useRef<HTMLDivElement>(null);
-
-  const shouldDisplayLastColumnCell = useMemo(() => {
-    if (!tableRef.current) return false;
-    const totalColumnWidth = headersRef.current.reduce(
-      (acc, header) => acc + header.width,
-      0
-    );
-    return totalColumnWidth < tableRef.current.clientWidth;
-  }, []);
-
-  const {
-    handleMouseDown,
-    handleMouseOver,
-    handleMouseUp,
-    isSelected,
-    getBorderClass,
-    isTopLeftCell,
-    setSelectedCells,
-  } = useSelection(sortedRows, headersRef.current);
-
-  const handleSort = (columnIndex: number) => {
-    const { sortedData, newSortConfig } = onSort(
-      headersRef.current,
-      sortedRows,
-      sortConfig,
-      columnIndex
-    );
-    setSortedRows(sortedData);
-    setSortConfig(newSortConfig);
-  };
-
-  const onTableHeaderDragEnd = (newHeaders: HeaderObject[]) => {
-    headersRef.current = newHeaders;
-    forceUpdate();
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (!target.closest(".st-table-cell")) {
-        setSelectedCells([]);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [setSelectedCells]);
-
-  const currentRows = shouldPaginate
-    ? sortedRows.slice(
-        (currentPage - 1) * rowsPerPage,
-        currentPage * rowsPerPage
-      )
-    : sortedRows;
-
-  return (
-    <div
-      ref={tableRef}
-      className="st-table-wrapper"
-      style={height ? { height } : {}}
-    >
-      <div
-        className="st-table"
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        style={{
-          gridTemplateColumns: `${headersRef.current
-            ?.map((header) => `${header.width}px`)
-            .join(" ")} 1fr`,
-        }}
-      >
-        <TableHeader
-          enableColumnResizing={enableColumnResizing}
-          forceUpdate={forceUpdate}
-          headersRef={headersRef}
-          isWidthDragging={isWidthDragging}
-          onSort={handleSort}
-          onTableHeaderDragEnd={onTableHeaderDragEnd}
-          setIsWidthDragging={setIsWidthDragging}
-          shouldDisplayLastColumnCell={shouldDisplayLastColumnCell}
-        />
-        <TableBody
-          getBorderClass={getBorderClass}
-          handleMouseDown={handleMouseDown}
-          handleMouseOver={handleMouseOver}
-          headers={headersRef.current}
-          isSelected={isSelected}
-          isTopLeftCell={isTopLeftCell}
-          isWidthDragging={isWidthDragging}
-          shouldDisplayLastColumnCell={shouldDisplayLastColumnCell}
-          shouldPaginate={shouldPaginate}
-          sortedRows={currentRows}
-        />
-      </div>
-      {shouldPaginate && (
-        <TableFooter
-          currentPage={currentPage}
-          hideFooter={hideFooter}
-          onPageChange={setCurrentPage}
-          rowsPerPage={rowsPerPage}
-          totalRows={sortedRows.length}
-          nextIcon={nextIcon}
-          prevIcon={prevIcon}
-        />
-      )}
-    </div>
-  );
-};
-
-export default SimpleTable;

package/src/components/SimpleTable/TableBody.tsx

@@ -1,79 +0,0 @@
-import { createRef, Fragment } from "react";
-import TableCell from "./TableCell";
-import Animate from "../Animate";
-import HeaderObject from "../../types/HeaderObject";
-import TableLastColumnCell from "./TableLastColumnCell";
-import TableRowSeparator from "./TableRowSeparator";
-
-interface TableBodyProps {
-  getBorderClass: (rowIndex: number, columnIndex: number) => string;
-  handleMouseDown: (rowIndex: number, columnIndex: number) => void;
-  handleMouseOver: (rowIndex: number, columnIndex: number) => void;
-  headers: HeaderObject[];
-  isSelected: (rowIndex: number, columnIndex: number) => boolean;
-  isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
-  isWidthDragging: boolean;
-  shouldDisplayLastColumnCell: boolean;
-  shouldPaginate: boolean;
-  sortedRows: { [key: string]: any }[];
-}
-
-const TableBody = ({
-  getBorderClass,
-  handleMouseDown,
-  handleMouseOver,
-  headers,
-  isSelected,
-  isTopLeftCell,
-  isWidthDragging,
-  shouldDisplayLastColumnCell,
-  shouldPaginate,
-  sortedRows,
-}: TableBodyProps & { shouldDisplayLastColumnCell: boolean }) => {
-  return (
-    <>
-      {sortedRows.map((row, rowIndex) => {
-        return (
-          <Fragment key={row.id}>
-            <Animate
-              allowHorizontalAnimate={shouldPaginate}
-              pause={isWidthDragging}
-            >
-              {headers.map((header, columnIndex) => {
-                let content = row[header.accessor];
-
-                if (header.cellRenderer) {
-                  content = header.cellRenderer(row);
-                }
-
-                return (
-                  <TableCell
-                    borderClass={getBorderClass(rowIndex, columnIndex)}
-                    colIndex={columnIndex}
-                    content={content}
-                    isSelected={isSelected(rowIndex, columnIndex)}
-                    isTopLeftCell={isTopLeftCell(rowIndex, columnIndex)}
-                    key={header.accessor}
-                    onMouseDown={() => handleMouseDown(rowIndex, columnIndex)}
-                    onMouseOver={() => handleMouseOver(rowIndex, columnIndex)}
-                    ref={createRef()}
-                    rowIndex={rowIndex}
-                    isLastRow={rowIndex === sortedRows.length - 1}
-                  />
-                );
-              })}
-              <TableLastColumnCell
-                isLastRow={rowIndex === sortedRows.length - 1}
-                ref={createRef()}
-                visible={shouldDisplayLastColumnCell}
-              />
-            </Animate>
-            {rowIndex !== sortedRows.length - 1 && <TableRowSeparator />}
-          </Fragment>
-        );
-      })}
-    </>
-  );
-};
-
-export default TableBody;