@guiexpert/react-table 18.0.2 → 18.0.3

package/{lib → dist/lib}/component-renderer-wrapper.d.ts

@@ -1,4 +1,4 @@
-import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from '../../../table/src/index.ts';
+import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from '../../../table/src';
 export declare class ComponentRendererWrapper implements CellRendererIf {
     private readonly Component;
     constructor(Component: any);

package/{lib → dist/lib}/guiexpert-table.d.ts

@@ -1,4 +1,4 @@
-import { FocusModelIf, GeModelChangeEvent, GeMouseEvent, SelectionModelIf, TableApi, TableModelIf, TableOptions } from '../../../table/src/index.ts';
+import { FocusModelIf, GeModelChangeEvent, GeMouseEvent, SelectionModelIf, TableApi, TableModelIf, TableOptions } from '../../../table/src';
 export type GeMouseEventFn = (evt: GeMouseEvent) => {};
 export type GeCheckboxEventFn = (evt: any[]) => {};
 export type GeTableReadyEventFn = (evt: TableApi) => {};

package/dist/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@guiexpert/react-table",
+  "version": "18.0.2",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "scripts": {
+    "i": "pnpm i",
+    "build": "vite build",
+    "npm-pub:react-table": "npm publish --access public"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@guiexpert/table": "workspace:^",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.1.1",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@testing-library/react": "^14.1.0",
+    "@types/node": "^20.11.17",
+    "vite": "^5.1.1",
+    "vite-plugin-dts": "^3.7.2",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vite-plugin-babel": "^1.2.0",
+    "react-test-renderer": "^18.2.0",
+    "ts-node": "10.9.1",
+    "tsconfig": "^7.0.0",
+    "typescript": "5.2.2"
+  }
+}

package/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: "react-table",
+  preset: "../../jest.preset.js",
+  transform: {
+    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "@nrwl/react/plugins/jest",
+    "^.+\\.[tj]sx?$": ["babel-jest", { presets: ["@nrwl/react/babel"] }]
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  coverageDirectory: "../../coverage/libs/react-table"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/react-table",
-  "version": "18.0.2",
+  "version": "18.0.3",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -8,12 +8,38 @@
     "entryFile": "src/index.ts"
   },
   "scripts": {
-    "npm-pub:react-table": "npm publish --access public"
+    "i": "pnpm i",
+    "patch-version": "node patch.js",
+    "build": "vite build",
+    "npm-pub": "npm publish --access public"
   },
   "exports": {
     ".": {
       "import": "./index.js",
       "require": "./index.cjs"
     }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@guiexpert/table": "workspace:^",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.1.1",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@testing-library/react": "^14.1.0",
+    "@types/node": "^20.11.17",
+    "vite": "^5.1.1",
+    "vite-plugin-dts": "^3.7.2",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vite-plugin-babel": "^1.2.0",
+    "react-test-renderer": "^18.2.0",
+    "ts-node": "10.9.1",
+    "tsconfig": "^7.0.0",
+    "typescript": "5.2.2"
   }
-}
+}

package/patch.js

@@ -0,0 +1,16 @@
+import fs from 'fs';
+
+const packageJsonPath = 'package.json';
+
+try {
+  const pack = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const currentVersion = pack.version;
+  const [major, minor, patch] = currentVersion.split('.').map(Number);
+  const newPatchVersion = `${major}.${minor}.${patch + 1}`;
+  pack.version = newPatchVersion;
+  fs.writeFileSync(packageJsonPath, JSON.stringify(pack, null, 2));
+  console.log(`${pack.name} -> version patched to ${newPatchVersion}.`);
+
+} catch (error) {
+  console.error('Error:', error);
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./lib/guiexpert-table";
+export * from "./lib/component-renderer-wrapper";

package/src/lib/component-renderer-wrapper.ts

@@ -0,0 +1,39 @@
+import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from "@guiexpert/table";
+import { createRoot } from "react-dom/client";
+
+
+export class ComponentRendererWrapper implements CellRendererIf {
+
+  constructor(
+    private readonly Component: any
+  ) {
+    console.info(Component);
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    const props = {
+      cellDiv,
+      rowIndex,
+      columnIndex,
+      areaIdent,
+      areaModel,
+      cellValue
+    };
+    const root = createRoot(cellDiv, {});
+    root.render(this.Component(props));
+
+    return () => {
+      root.unmount();
+    };
+  }
+
+
+}

package/src/lib/guiexpert-table.tsx

@@ -0,0 +1,168 @@
+import {
+  EventListenerIf,
+  FocusModelIf,
+  GeModelChangeEvent,
+  GeMouseEvent, LicenseManager, SelectionModelIf,
+  SimpleDomService,
+  TableApi,
+  TableModelIf,
+  TableOptions,
+  TableScope
+} from '@guiexpert/table';
+import { useEffect, useRef } from "react";
+
+export type GeMouseEventFn = (evt: GeMouseEvent) => {};
+export type GeCheckboxEventFn = (evt: any[]) => {};
+export type GeTableReadyEventFn = (evt: TableApi) => {};
+export type GeModelChangeEventFn = (evt: GeModelChangeEvent) => {};
+export type GeSelectionChangeEventFn = (evt: SelectionModelIf) => {};
+export type GeFocusChangeEventFn = (evt: FocusModelIf) => {};
+
+export interface GuiexpertTableProps {
+  tableModel: TableModelIf,
+  tableOptions?: TableOptions,
+  mouseMoved?: GeMouseEventFn,
+  contextmenu?: GeMouseEventFn,
+  mouseClicked?: GeMouseEventFn,
+  mouseDragging?: GeMouseEventFn,
+  mouseDraggingEnd?: GeMouseEventFn,
+  checkboxChanged?: GeCheckboxEventFn,
+  modelChanged?: GeModelChangeEventFn,
+  selectionChanged?: GeSelectionChangeEventFn;
+  focusChanged?: GeFocusChangeEventFn;
+  tableReady?: GeTableReadyEventFn,
+  licenseKey?: string,
+}
+
+/**
+ * Initialize and render the GuiexpertTable component.
+ *
+ * @param {Object} props - The properties of the GuiexpertTable component.
+ * @param {TableModel} props.tableModel - The model for the table.
+ * @param {TableOptions} [props.tableOptions=new TableOptions()] - The options for the table.
+ * @param {Function} [props.mouseMoved] - The callback for mouse movement events.
+ * @param {Function} [props.checkboxChanged] - The callback for checkbox change events.
+ * @param {Function} [props.contextmenu] - The callback for context menu events.
+ * @param {Function} [props.modelChanged] - The callback for model change events.
+ * @param {Function} [props.mouseClicked] - The callback for mouse click events.
+ * @param {Function} [props.mouseDragging] - The callback for mouse dragging events.
+ * @param {Function} [props.mouseDraggingEnd] - The callback for mouse dragging end events.
+ * @param {Function} [props.tableReady] - The callback for when the table is ready.
+ * @param {string} [props.licenseKey] - The license key for the GuiexpertTable component.
+ *
+ * @returns {JSX.Element} - The rendered GuiexpertTable component.
+ */
+export function GuiexpertTable(
+  {
+    tableModel,
+    tableOptions = new TableOptions(),
+    mouseMoved,
+    checkboxChanged,
+    contextmenu,
+    modelChanged,
+    mouseClicked,
+    mouseDragging,
+    mouseDraggingEnd,
+    selectionChanged,
+    focusChanged,
+    tableReady,
+    licenseKey
+  }: GuiexpertTableProps) {
+
+  const myContainer = useRef(null);
+  let initialized = false;
+
+  useEffect(() => {
+    if (myContainer.current && !initialized) {
+      initTable(myContainer.current);
+      initialized = true;
+    }
+  });
+
+  let root: HTMLDivElement | null;
+
+  const initTable = (ele: HTMLDivElement) => {
+    const listener: EventListenerIf = {
+
+      onSelectionChanged(model: SelectionModelIf): void {
+        if (selectionChanged) {
+          selectionChanged(model);
+        }
+      },
+
+      onFocusChanged(model: FocusModelIf): void{
+        if (focusChanged) {
+          focusChanged(model);
+        }
+      },
+
+      onCheckboxChanged: (evt: any[]) => {
+        if (checkboxChanged) {
+          checkboxChanged(evt);
+        }
+      },
+
+      onContextmenu: (evt: GeMouseEvent) => {
+        if (contextmenu) {
+          contextmenu(evt);
+        }
+      },
+
+      onModelChanged: (evt: GeModelChangeEvent) => {
+        if (modelChanged) {
+          modelChanged(evt);
+        }
+      },
+
+      onMouseClicked: (evt: GeMouseEvent) => {
+        if (mouseClicked) {
+          mouseClicked(evt);
+        }
+      },
+
+      onMouseDragging: (evt: GeMouseEvent) => {
+        if (mouseDragging) {
+          mouseDragging(evt);
+        }
+      },
+
+      onMouseDraggingEnd: (evt: GeMouseEvent) => {
+        if (mouseDraggingEnd) {
+          mouseDraggingEnd(evt);
+        }
+      },
+
+      onMouseMoved: (evt: GeMouseEvent) => {
+        if (mouseMoved) {
+          mouseMoved(evt);
+        }
+      }
+    };
+
+    const tableScope = new TableScope(
+      ele, tableModel, new SimpleDomService(), tableOptions, listener
+    );
+    tableScope.firstInit();
+    if (tableReady) {
+      tableReady(tableScope.getApi());
+    }
+    if (licenseKey) LicenseManager.getInstance().setLicenseKey(licenseKey);
+  };
+
+  return (
+    <div
+      ref={myContainer}
+      className="container-div"
+      style={{
+        width: "100%",
+        height: "100%",
+        background: "transparent",
+        padding: "0",
+        margin: "0"
+      }}></div>
+  );
+}
+
+export default GuiexpertTable;
+
+

package/src/lib/react-table.module.css

@@ -0,0 +1,8 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
+

package/src/lib/react-table.spec.tsx

@@ -0,0 +1,6 @@
+describe("ReactTable", () => {
+  // it("should render successfully", () => {
+  //   const { baseElement } = render(<ReactTable />);
+  //   expect(baseElement).toBeTruthy();
+  // });
+});

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": [
+      "vite/client"
+    ]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "vite/client"
+    ]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": [
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,69 @@
+
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import viteTsConfigPaths from "vite-tsconfig-paths";
+import dts from "vite-plugin-dts";
+import { join } from "path";
+import {viteStaticCopy} from "vite-plugin-static-copy";
+
+export default defineConfig({
+  cacheDir: "../../node_modules/.vite/react-table",
+
+  plugins: [
+    dts({
+      entryRoot: "src",
+      tsconfigPath: join(__dirname, "tsconfig.lib.json"),
+      
+    }),
+    react(),
+
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'README.md',
+          dest: './'
+        },
+        {
+          src: 'package.json',
+          dest: './'
+        }
+      ]
+    })
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [
+  //    viteTsConfigPaths({
+  //      root: '../../',
+  //    }),
+  //  ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: "src/index.ts",
+      name: "react-table",
+      fileName: "index",
+      // Change this to the formats you want to support.
+      // Don't forgot to update your package.json as well.
+      formats: ["es", "cjs"]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ["react", "react-dom", "react/jsx-runtime"]
+    }
+  },
+  resolve: {
+    alias: [
+      {
+        find: /@guiexpert\/table/,
+        replacement: join(__dirname, '..', 'table', 'src'),
+      },
+    ],
+  }
+
+});