feat(blocks-aggrid): Add aggrid as a default block.

packages/plugins/blocks/blocks-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'],
+};

packages/plugins/blocks/blocks-aggrid/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@lowdefy/blocks-aggrid",
+  "version": "4.0.0-alpha.12",
+  "license": "Apache-2.0",
+  "description": "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": "yarn swc",
+    "clean": "rm -rf dist",
+    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
+    "prepare": "yarn build",
+    "swc": "swc src --out-dir dist --config-file ../../../../.swcrc --delete-dir-on-start && yarn copyfiles",
+    "test:watch": "jest --coverage --watch",
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "@ag-grid-community/all-modules": "27.3.0",
+    "@ag-grid-community/core": "27.3.0",
+    "@ag-grid-community/react": "27.3.0",
+    "@lowdefy/block-utils": "4.0.0-alpha.12",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
+  },
+  "devDependencies": {
+    "@emotion/jest": "11.9.1",
+    "@lowdefy/block-dev": "4.0.0-alpha.12",
+    "@lowdefy/jest-yaml-transform": "4.0.0-alpha.12",
+    "@swc/cli": "0.1.57",
+    "@swc/core": "1.2.194",
+    "@swc/jest": "0.2.21",
+    "@testing-library/dom": "8.13.0",
+    "@testing-library/react": "13.3.0",
+    "@testing-library/user-event": "14.2.0",
+    "copyfiles": "2.4.1",
+    "jest": "28.1.0",
+    "jest-environment-jsdom": "28.1.0",
+    "jest-serializer-html": "7.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/plugins/blocks/blocks-aggrid/src/AgGrid.js

@@ -0,0 +1,143 @@
+/*
+  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 from 'react';
+
+import { AgGridReact } from '@ag-grid-community/react';
+import { AllCommunityModules } from '@ag-grid-community/all-modules';
+
+class AgGrid extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onGridReady = this.onGridReady.bind(this);
+    this.onRowClick = this.onRowClick.bind(this);
+    this.onCellClicked = this.onCellClicked.bind(this);
+    this.onRowSelected = this.onRowSelected.bind(this);
+    this.onSelectionChanged = this.onSelectionChanged.bind(this);
+    this.onFilterChanged = this.onFilterChanged.bind(this);
+  }
+
+  // see https://stackoverflow.com/questions/55182118/ag-grid-resize-detail-height-when-data-changes
+  componentDidUpdate() {
+    if (this.gridApi) {
+      this.gridApi.resetRowHeights();
+    }
+  }
+
+  onGridReady(params) {
+    this.gridApi = params.api;
+    this.gridColumnApi = params.columnApi;
+    this.props.methods.registerMethod('exportDataAsCsv', (args) =>
+      this.gridApi.exportDataAsCsv(args)
+    );
+    this.props.methods.registerMethod('sizeColumnsToFit', () => this.gridApi.sizeColumnsToFit());
+    this.props.methods.registerMethod('setFilterModel', (model) =>
+      this.gridApi.setFilterModel(model)
+    );
+    this.props.methods.registerMethod('setQuickFilter', (value) =>
+      this.gridApi.setQuickFilter(value)
+    );
+    this.props.methods.registerMethod('autoSize', (args = {}) => {
+      const { skipHeader, colIds } = args;
+      const allColumnIds = colIds || [];
+      if (!colIds) {
+        this.gridColumnApi.getAllColumns().forEach((column) => {
+          allColumnIds.push(column.getId());
+        });
+      }
+      this.gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
+    });
+  }
+
+  onRowClick(event) {
+    if (this.props.events.onRowClick) {
+      this.props.methods.triggerEvent({
+        event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        index: parseInt(event.node.id),
+        name: 'onRowClick',
+        rowIndex: event.rowIndex,
+      });
+    }
+  }
+
+  onCellClicked(event) {
+    if (this.props.events.onCellClick) {
+      this.props.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: this.gridApi.getSelectedRows(),
+        },
+      });
+    }
+  }
+
+  onRowSelected(event) {
+    if (!event.node.selected) return; // see https://stackoverflow.com/a/63265775/2453657
+    if (this.props.events.onRowSelected) {
+      this.props.methods.triggerEvent({
+        event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        index: parseInt(event.node.id),
+        name: 'onRowSelected',
+        rowIndex: event.rowIndex,
+      });
+    }
+  }
+
+  onSelectionChanged() {
+    if (this.props.events.onSelectionChanged) {
+      this.props.methods.triggerEvent({
+        name: 'onSelectionChanged',
+        event: { selected: this.gridApi.getSelectedRows() },
+      });
+    }
+  }
+
+  onFilterChanged(event) {
+    if (this.props.events.onFilterChanged) {
+      this.props.methods.triggerEvent({
+        name: 'onFilterChanged',
+        event: { rows: event.api.rowModel.rowsToDisplay.map((row) => row.data) },
+      });
+    }
+  }
+
+  render() {
+    const { quickFilterValue, ...someProperties } = this.props.properties;
+    if (quickFilterValue && quickFilterValue === '') {
+      this.gridApi.setQuickFilter(quickFilterValue); // check if empty string matches all
+    }
+    return (
+      <AgGridReact
+        onFilterChanged={this.onFilterChanged}
+        onSelectionChanged={this.onSelectionChanged}
+        onRowSelected={this.onRowSelected}
+        onRowClicked={this.onRowClick}
+        onCellClicked={this.onCellClicked}
+        onGridReady={this.onGridReady}
+        modules={AllCommunityModules}
+        {...someProperties}
+      />
+    );
+  }
+}
+
+export default AgGrid;