Merge pull request #30 from lowdefy/aggrid

feat(aggrid): Add aggrid plugin.

.changeset/happy-worms-sell.md

@@ -0,0 +1,5 @@
+---
+'@lowdefy/community-plugin-aggrid': major
+---
+
+Release new plugin community-plugin-aggrid.

apps/docs/lowdefy.yaml

@@ -12,11 +12,14 @@ plugins:
     version: 'workspace:*'
   - name: '@lowdefy/community-plugin-xlsx'
     version: 'workspace:*'
+  - name: '@lowdefy/community-plugin-aggrid'
+    version: 'workspace:*'
 
 menus:
   _ref: menus.yaml
 
 pages:
+  - _ref: community-plugin-aggrid/AgGrid.yaml
   - _ref: community-plugin-confetti/Confetti.yaml
   - _ref: community-plugin-nodemailer/EmailProvider.yaml
   - _ref: community-plugin-mongodb/MongoDB.yaml

plugins/community-plugin-aggrid/jest.config.js

@@ -0,0 +1,22 @@
+export default {
+  clearMocks: true,
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.js'],
+  coverageDirectory: 'coverage',
+  coveragePathIgnorePatterns: [
+    '<rootDir>/dist/',
+    '<rootDir>/src/test',
+    '<rootDir>/src/index.js',
+    '<rootDir>/src/blocks.js',
+    '<rootDir>/src/types.js',
+  ],
+  coverageReporters: [['lcov', { projectRoot: '../../../..' }], 'text', 'clover'],
+  errorOnDeprecated: true,
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/src/test'],
+  transform: {
+    '^.+\\.(t|j)sx?$': ['@swc/jest', { configFile: '../../../../.swcrc.test' }],
+    '\\.yaml$': '@lowdefy/jest-yaml-transform',
+  },
+  snapshotSerializers: ['@emotion/jest/serializer', 'jest-serializer-html'],
+};

plugins/community-plugin-aggrid/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@lowdefy/community-plugin-aggrid",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "description": "Community plugin for AgGrid Blocks for Lowdefy.",
+  "homepage": "https://lowdefy.com",
+  "keywords": [
+    "lowdefy",
+    "lowdefy blocks",
+    "aggrid",
+    "table",
+    "lowdefy plugin"
+  ],
+  "bugs": {
+    "url": "https://github.com/lowdefy/lowdefy/issues"
+  },
+  "contributors": [
+    {
+      "name": "Gerrie van Wyk",
+      "url": "https://github.com/Gervwyk"
+    },
+    {
+      "name": "Johann Möller",
+      "url": "https://github.com/JohannMoller"
+    },
+    {
+      "name": "Sam Tolmay",
+      "url": "https://github.com/SamTolmay"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lowdefy/lowdefy.git"
+  },
+  "type": "module",
+  "exports": {
+    "./*": "./dist/*",
+    "./blocks": "./dist/blocks.js",
+    "./types": "./dist/types.js"
+  },
+  "files": [
+    "dist/*"
+  ],
+  "scripts": {
+    "build": "swc src --out-dir dist --config-file ../../.swcrc --delete-dir-on-start --copy-files",
+    "clean": "rm -rf dist",
+    "prepare": "pnpm build"
+  },
+  "dependencies": {
+    "@ag-grid-community/client-side-row-model": "30.2.0",
+    "@ag-grid-community/core": "30.2.0",
+    "@ag-grid-community/csv-export": "30.2.0",
+    "@ag-grid-community/react": "30.2.0",
+    "@ag-grid-community/styles": "30.2.0",
+    "@lowdefy/block-utils": "4.0.0-rc.11",
+    "@lowdefy/helpers": "4.0.0-rc.11",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@swc/cli": "0.1.57",
+    "@swc/core": "1.2.194",
+    "@swc/jest": "0.2.21",
+    "jest": "28.1.0",
+    "swc-loader": "0.2.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

plugins/community-plugin-aggrid/src/AgGrid.js

@@ -0,0 +1,166 @@
+/*
+  Copyright 2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { AgGridReact } from '@ag-grid-community/react';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { CsvExportModule } from '@ag-grid-community/csv-export';
+
+import processColDefs from './processColDefs.js';
+
+const AgGrid = ({ properties, methods, loading, events }) => {
+  const {
+    quickFilterValue,
+    columnDefs,
+    defaultColDef,
+    rowData: newRowData,
+    ...someProperties
+  } = properties;
+  const [rowData, setRowData] = useState(newRowData ?? []);
+
+  const gridRef = useRef();
+
+  const memoDefaultColDef = useMemo(() => defaultColDef);
+
+  const onRowClick = useCallback((event) => {
+    if (events.onRowClick) {
+      methods.triggerEvent({
+        name: 'onRowClick',
+        event: {
+          row: event.data,
+          selected: gridRef.current.api.getSelectedRows(),
+          index: parseInt(event.node.id),
+          rowIndex: event.rowIndex,
+        },
+      });
+    }
+  }, []);
+  const onCellClicked = useCallback((event) => {
+    if (events.onCellClick) {
+      methods.triggerEvent({
+        name: 'onCellClick',
+        event: {
+          cell: { column: event.colDef.field, value: event.value },
+          colId: event.column.colId,
+          index: parseInt(event.node.id),
+          row: event.data,
+          rowIndex: event.rowIndex,
+          selected: gridRef.current.api.getSelectedRows(),
+        },
+      });
+    }
+  }, []);
+  const onRowSelected = useCallback((event) => {
+    if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+    if (events.onRowSelected) {
+      methods.triggerEvent({
+        name: 'onRowSelected',
+        event: {
+          index: parseInt(event.node.id),
+          row: event.data,
+          rowIndex: event.rowIndex,
+          selected: gridRef.current.api.getSelectedRows(),
+        },
+      });
+    }
+  }, []);
+  const onSelectionChanged = useCallback(() => {
+    if (events.onSelectionChanged) {
+      methods.triggerEvent({
+        name: 'onSelectionChanged',
+        event: { selected: gridRef.current.api.getSelectedRows() },
+      });
+    }
+  }, []);
+
+  const onFilterChanged = useCallback((event) => {
+    if (events.onFilterChanged) {
+      methods.triggerEvent({
+        name: 'onFilterChanged',
+        event: {
+          rows: event.api.rowModel.rowsToDisplay.map((row) => row.data),
+          filter: this.gridApi.getFilterModel(),
+        },
+      });
+    }
+  }, []);
+
+  const onSortChanged = useCallback((event) => {
+    if (events.onSortChanged) {
+      methods.triggerEvent({
+        name: 'onSortChanged',
+        event: {
+          rows: event.api.rowModel.rowsToDisplay.map((row) => row.data),
+          sort: event.columnApi.getColumnState().filter((col) => Boolean(col.sort)),
+        },
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    methods.registerMethod('exportDataAsCsv', (args) => gridRef.current.api.exportDataAsCsv(args));
+    methods.registerMethod('exportDataAsCsv', (args) => gridRef.current.api.exportDataAsCsv(args));
+    methods.registerMethod('sizeColumnsToFit', () => gridRef.current.api.sizeColumnsToFit());
+    methods.registerMethod('setFilterModel', (model) => gridRef.current.api.setFilterModel(model));
+    methods.registerMethod('setQuickFilter', (value) => gridRef.current.api.setQuickFilter(value));
+    methods.registerMethod('autoSize', (args = {}) => {
+      const { skipHeader, colIds } = args;
+      const allColumnIds = colIds || [];
+      if (!colIds) {
+        gridRef.current.columnApi.getAllColumns().forEach((column) => {
+          allColumnIds.push(column.getId());
+        });
+      }
+      gridRef.current.columnApi.autoSizeColumns(allColumnIds, skipHeader);
+    });
+    if (gridRef.current.api) {
+      if (loading) {
+        gridRef.current.api.showLoadingOverlay();
+      }
+      if (!loading) {
+        gridRef.current.api.hideOverlay();
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (JSON.stringify(rowData) !== JSON.stringify(newRowData)) {
+      setRowData(newRowData);
+    }
+  }, [newRowData]);
+
+  if (quickFilterValue && quickFilterValue === '') {
+    gridRef.current.api.setQuickFilter(quickFilterValue); // check if empty string matches all
+  }
+  return (
+    <AgGridReact
+      {...someProperties}
+      rowData={rowData}
+      defaultColDef={memoDefaultColDef}
+      onFilterChanged={onFilterChanged}
+      onSortChanged={onSortChanged}
+      onSelectionChanged={onSelectionChanged}
+      onRowSelected={onRowSelected}
+      onRowClicked={onRowClick}
+      onCellClicked={onCellClicked}
+      modules={[ClientSideRowModelModule, CsvExportModule]}
+      columnDefs={processColDefs(columnDefs, methods)}
+      ref={gridRef}
+    />
+  );
+};
+
+export default AgGrid;