sea-chart 0.0.1 → 0.0.2

package/dist/view/wrapper/table/two-dimension-table.js

@@ -0,0 +1,249 @@
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import PivotTableDisplayName from './pivot-table-display-name';
+import { ChartUtils } from '../../../utils';
+import intl from '../../../intl';
+class TwoDimensionTable extends PureComponent {
+  constructor() {
+    super(...arguments);
+    this.getCells = row => {
+      const {
+        result,
+        summaryColumn
+      } = this.props;
+      const {
+        pivot_columns
+      } = result;
+      const {
+        cells
+      } = row;
+      if (!Array.isArray(pivot_columns)) {
+        return [];
+      }
+      return pivot_columns.map(item => {
+        return {
+          ...cells[item.key],
+          column: summaryColumn
+        };
+      });
+    };
+    this.renderHeader = () => {
+      const {
+        result,
+        groupbyColumn,
+        columnGroupbyColumn,
+        selectedCell
+      } = this.props;
+      const {
+        name: groupName
+      } = groupbyColumn;
+      const {
+        name: rowGroupName
+      } = columnGroupbyColumn || {};
+      const {
+        pivot_columns
+      } = result;
+      const {
+        rowIdx: selectRowIdx,
+        cellIdx: selectedCellIdx
+      } = selectedCell || {};
+      const isSelectedTotalCellBottom = selectRowIdx === 0 && selectedCellIdx === (Array.isArray(pivot_columns) ? pivot_columns.length : 0);
+      return /*#__PURE__*/React.createElement("thead", {
+        className: "seatable-table-header-sm"
+      }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
+        let {
+          key
+        } = item;
+        let isSelectedHeaderBottom = selectRowIdx === 0 && selectedCellIdx === index;
+        return /*#__PURE__*/React.createElement("th", {
+          className: classnames('pivot-table-header', {
+            'selected-pivot-cell-top': isSelectedHeaderBottom
+          }),
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: key,
+          column: columnGroupbyColumn || {}
+        }));
+      }), /*#__PURE__*/React.createElement("th", {
+        className: classnames('pivot-table-header', {
+          'selected-pivot-cell-top': isSelectedTotalCellBottom
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total')))));
+    };
+    this.toggleRecords = (cell, selectedCell) => {
+      if (window.isMobile) return;
+      const {
+        rowIdx: selectedRowIdx,
+        cellIdx: selectedCellIdx
+      } = this.props.selectedCell || {};
+      const {
+        rowIdx,
+        cellIdx
+      } = selectedCell;
+      if (rowIdx === selectedRowIdx && selectedCellIdx === cellIdx) return;
+      this.props.toggleRecords(cell, selectedCell);
+    };
+    this.onClickTotals = (recordsList, selectedCell) => {
+      if (window.isMobile) return;
+      const rows = recordsList.flat();
+      const total = rows.length;
+      this.toggleRecords({
+        rows,
+        total
+      }, selectedCell);
+    };
+    this.renderRows = () => {
+      const {
+        result,
+        groupbyColumn,
+        selectedCell,
+        summaryColumn,
+        summaryMethod
+      } = this.props;
+      const {
+        pivot_rows,
+        pivot_columns,
+        pivot_columns_total,
+        pivot_table_total
+      } = result;
+      const {
+        rowIdx: selectRowIdx,
+        cellIdx: selectedCellIdx
+      } = selectedCell || {};
+      const pivotRowsLen = Array.isArray(pivot_rows) ? pivot_rows.length : 0;
+      let pivotColumnCells = [];
+      const isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      const isSelectTotal = selectRowIdx === pivotRowsLen && selectedCellIdx === (Array.isArray(pivot_columns) ? pivot_columns.length : 0);
+      const tableTotalDisplayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, pivot_table_total, summaryMethod);
+      const isValidTableTotalDisplayValue = ChartUtils.isValidValue(tableTotalDisplayValue);
+      return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          name,
+          total
+        } = rowItem;
+        const cells = this.getCells(rowItem);
+        const isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        let pivotRowCells = [];
+        const isSelectedTotalCell = selectRowIdx === rowIdx && selectedCellIdx === cells.length;
+        const isSelectedTotalCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === cells.length;
+        const isSelectedTotalCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === cells.length - 1;
+        if (!Array.isArray(pivot_columns)) {
+          pivotColumnCells[rowIdx] = rowItem.rows || [];
+        }
+        const summaryDisplayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, total, summaryMethod);
+        const isValidSummaryDisplayValue = ChartUtils.isValidValue(summaryDisplayValue);
+        return /*#__PURE__*/React.createElement("tr", {
+          key: 'table-row' + rowIdx
+        }, /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-row-name', {
+            'selected-pivot-cell-left': isSelectedRowNameRight
+          })
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: name,
+          column: groupbyColumn
+        })), Array.isArray(cells) && cells.map((c, cellIdx) => {
+          const isSelectedCell = selectRowIdx === rowIdx && selectedCellIdx === cellIdx;
+          const isSelectedCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === cellIdx;
+          const isSelectedCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === cellIdx;
+          const {
+            column,
+            total
+          } = c;
+          const displayValue = ChartUtils.getSummaryValueDisplayString(column, total, summaryMethod);
+          const isValidDisplayValue = ChartUtils.isValidValue(displayValue);
+          if (c && Array.isArray(c.rows) && c.rows.length > 0) {
+            pivotRowCells.push(...c.rows);
+            if (pivotColumnCells[cellIdx]) {
+              pivotColumnCells[cellIdx].push(...c.rows);
+            } else {
+              pivotColumnCells[cellIdx] = [...c.rows];
+            }
+          }
+          return /*#__PURE__*/React.createElement("td", {
+            className: classnames('pivot-cell', {
+              'pivot-empty-cell': !isValidDisplayValue,
+              'selected-pivot-cell': isSelectedCell,
+              'selected-pivot-cell-top': isSelectedCellTop,
+              'selected-pivot-cell-left': isSelectedCellLeft
+            }),
+            key: "table-cell-".concat(cellIdx)
+            // onClick={() => this.toggleRecords(c, {rowIdx, cellIdx})}
+            ,
+            title: displayValue
+          }, isValidDisplayValue ? displayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+            className: classnames({
+              'selected-pivot-cell-border': isSelectedCell
+            })
+          }));
+        }), /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'pivot-empty-cell': !isValidSummaryDisplayValue,
+            'selected-pivot-cell': isSelectedTotalCell,
+            'selected-pivot-cell-top': isSelectedTotalCellTop,
+            'selected-pivot-cell-left': isSelectedTotalCellLeft
+          })
+          // onClick={() => this.toggleRecords({ rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows, total: total }, { rowIdx, cellIdx: cells.length })}
+          ,
+          title: summaryDisplayValue
+        }, isValidSummaryDisplayValue ? summaryDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'selected-pivot-cell-border': isSelectedTotalCell
+          })
+        })));
+      }), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-column-total', {
+          'selected-pivot-cell-left': isSelectRowTotalCellRight
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total'))), Array.isArray(pivot_columns) && pivot_columns.map((c, index) => {
+        // const pivotColumnCell = pivotColumnCells[index];
+        const isSelectRowTotalCell = selectRowIdx === pivot_rows.length && selectedCellIdx === index;
+        const isSelectRowTotalCellLeft = selectRowIdx === pivot_rows.length && selectedCellIdx - 1 === index;
+        const pivotColumnTotal = pivot_columns_total[c.key];
+        const totalDisplayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summaryMethod);
+        const isValidTotalDisplayValue = ChartUtils.isValidValue(totalDisplayValue);
+        return /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'pivot-empty-cell': !isValidTotalDisplayValue,
+            'selected-pivot-cell': isSelectRowTotalCell,
+            'selected-pivot-cell-left': isSelectRowTotalCellLeft
+          }),
+          key: "total-cell-".concat(index)
+          // onClick={() => this.toggleRecords({ rows: pivotColumnCell, total: pivot_columns_total[c.key] }, { rowIdx: pivot_rows.length, cellIdx: index })}
+          ,
+          title: totalDisplayValue
+        }, isValidTotalDisplayValue ? totalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'selected-pivot-cell-border': isSelectRowTotalCell
+          })
+        }));
+      }), /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-cell pivot-table-total', {
+          'pivot-empty-cell': !isValidTableTotalDisplayValue,
+          'selected-pivot-cell': isSelectTotal
+        })
+        // onClick={() => this.onClickTotals(pivotColumnCells, {rowIdx: pivot_rows.length, cellIdx: Array.isArray(pivot_columns) ? pivot_columns.length : 0})}
+      }, isValidTableTotalDisplayValue ? tableTotalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+        className: classnames({
+          'selected-pivot-cell-border': isSelectTotal
+        })
+      }))));
+    };
+  }
+  render() {
+    const {
+      groupbyColumn,
+      columnGroupbyColumn
+    } = this.props;
+    if (!groupbyColumn) return '';
+    return /*#__PURE__*/React.createElement("table", {
+      className: "sea-chart-pivot-table"
+    }, /*#__PURE__*/React.createElement("caption", {
+      className: "column-title"
+    }, columnGroupbyColumn.name), /*#__PURE__*/React.createElement("caption", {
+      className: "row-title"
+    }, groupbyColumn.name), this.renderHeader(), this.renderRows());
+  }
+}
+export default TwoDimensionTable;

package/dist/view/wrapper/treemap.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DataSet from '@antv/data-set';
+import { each, pick } from '@antv/util';
+import { getEllipsisText } from '@antv/g2/esm/util/text';
+import { CHART_SUMMARY_TYPE, EMPTY_NAME } from '../../constants';
+import { ChartUtils } from '../../utils';
+import { registerGeometryLabelLayout } from '../../utils/custom-g2';
+import ChartComponent from './chart-component';
+import intl from '../../intl';
+class Treemap extends ChartComponent {
+  constructor(props) {
+    super(props);
+    // customize label layout: show ellipsis for long labels
+    this.limitInShape = (items, labels, shapes, region) => {
+      each(labels, (label, index) => {
+        const labelBBox = label.getCanvasBBox();
+        const shapeBBox = shapes[index].getBBox();
+        if (labelBBox.minX < shapeBBox.minX || labelBBox.minY < shapeBBox.minY || labelBBox.maxX > shapeBBox.maxX || labelBBox.maxY > shapeBBox.maxY) {
+          const translateX = labelBBox.width - shapeBBox.width + 20;
+          const textShapes = label.findAll(shape => shape.get('type') === 'text');
+          textShapes.forEach(textShape => {
+            const style = pick(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
+            const textBox = textShape.getCanvasBBox();
+            const text = getEllipsisText(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
+            textShape.attr('text', text);
+          });
+        }
+      });
+    };
+    this.createChart = () => {
+      const {
+        canvasStyle
+      } = this.props;
+      this.initChart(this.container, canvasStyle, 0);
+    };
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
+    };
+    this.clearChart = () => {
+      this.chart.annotation().clear(true);
+      this.chart.clear(true);
+    };
+    this.drawChart = () => {
+      let {
+        result: data,
+        chart,
+        tables,
+        summaryColumn
+      } = this.props;
+      const {
+        summary_type,
+        summary_method
+      } = chart.config;
+      const {
+        data: newData,
+        colorSet
+      } = ChartUtils.formatPieChartData(data, chart, tables);
+      if (!Array.isArray(newData)) return;
+      const {
+        DataView
+      } = DataSet;
+      const dv = new DataView();
+      const fullData = {
+        name: 'root',
+        children: newData.map(item => {
+          let name = item.name;
+          item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
+          if (name === '_Others') {
+            item.name = intl.get('Others');
+          }
+          return item;
+        })
+      };
+      dv.source(fullData, {
+        type: 'hierarchy'
+      }).transform({
+        field: 'value',
+        type: 'hierarchy.treemap',
+        tile: 'treemapResquarify',
+        as: ['x', 'y']
+      });
+      const nodes = [];
+      for (const node of dv.getAllNodes()) {
+        if (node.data.name === 'root') {
+          continue;
+        }
+        const eachNode = {
+          name: node.data.name,
+          x: node.x,
+          y: node.y,
+          value: node.data.value,
+          percent: node.data.percent,
+          original_name: node.data.original_name,
+          rows: node.data.rows || null
+        };
+        nodes.push(eachNode);
+      }
+      this.chart.data(nodes);
+      this.chart.scale({
+        x: {
+          nice: true
+        },
+        y: {
+          nice: true
+        }
+      });
+      this.chart.axis(false);
+      this.chart.legend(false);
+      this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">{info}<div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      this.chart.polygon().position('x*y').color('name', colorSet).tooltip('name*value*percent', (name, value, percent) => {
+        const displayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
+        return {
+          name,
+          info: summary_type === CHART_SUMMARY_TYPE.COUNT ? "".concat(value) : "".concat(summaryColumn.name, ": ").concat(displayValue, " (").concat(percent, ")")
+        };
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      }).label('name', {
+        offset: 0,
+        style: {
+          textBaseline: 'middle'
+        },
+        content: obj => {
+          if (obj.name !== 'root') {
+            return obj.name;
+          }
+        },
+        layout: {
+          type: 'custom-limit-in-shape'
+        }
+      });
+      this.chart.interaction('chart-active');
+      this.chart.render();
+    };
+    this.chart = null;
+    registerGeometryLabelLayout('custom-limit-in-shape', this.limitInShape);
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart && this.destroyChart();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sea-chart-container w-100",
+      ref: ref => this.container = ref
+    });
+  }
+}
+Treemap.propTypes = {
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  theme: PropTypes.object
+};
+export default Treemap;

package/package.json

@@ -1,48 +1,42 @@
 {
   "name": "sea-chart",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
     "@antv/g2": "4.1.46",
-    "@seafile/seafile-calendar": "0.0.24",
-    "babel-plugin-on-demand-loading": "^0.0.9",
+    "@seafile/seafile-calendar": "^0.0.24",
     "classnames": "^2.3.2",
     "dayjs": "1.10.7",
-    "dtable-ui-component": "4.3.2",
-    "dtable-utils": "4.3.5",
     "is-hotkey": "0.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react-select": "5.7.0",
+    "react-sweet-progress": "^1.1.2",
     "reactstrap": "8.9.0",
     "shallowequal": "^1.1.0",
-    "style-loader": "0.23.1",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^3.0.0"
   },
   "peerDependencies": {
-    "@antv/scale": "0.3.14"
+    "@antv/scale": "0.3.14",
+    "babel-plugin-on-demand-loading": "^0.0.9",
+    "dtable-ui-component": "~4.4.0",
+    "dtable-utils": "~4.3.*",
+    "prop-types": "15.8.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "scripts": {
+    "clean": "rm -rf dist && mkdir dist",
+    "start.bak": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "build-storybook": "build-storybook -c .storybook -o docs",
-    "lint": "lint-staged",
-    "clean:esm": "rm -rf es && mkdir es",
-    "clean:lib": "rm -rf lib && mkdir lib",
-    "clean:dist": "rm -rf dist && mkdir dist",
+    "pub:dist": "export BABEL_ENV=production && ./node_modules/.bin/babel src --out-dir dist --copy-files",
     "eslint": "eslint --ext .jsx,.js src --max-warnings=0",
-    "pub:esm": "npm run clean:esm && export BABEL_ENV=node && ./node_modules/.bin/babel src --out-dir es --copy-files",
-    "pub:lib": "npm run clean:lib && export BABEL_ENV=production && ./node_modules/.bin/babel src --out-dir lib --copy-files",
-    "pub:umd": "npm run build",
-    "pub:optimized": "rm lib/index.local.js && rm -rf lib/app",
-    "push-translate": "tx push -s",
-    "pull-translate": "tx pull -f",
+    "lint": "lint-staged",
+    "pub:optimized": "rm dist/config.js",
     "prepare": "husky install",
-    "prepublishOnly": "npm run pub:lib && npm run pub:umd && npm run pub:optimized",
+    "prepublishOnly": "npm run clean && npm run pub:dist",
     "release": "release-it",
-    "start": "node scripts/start.js",
-    "storybook": "start-storybook -p 6006",
-    "test": "node scripts/test.js"
+    "start": "export NODE_ENV=development LOG_ENV=rc && node dev-server.js"
   },
   "lint-staged": {
     "src/**/*.js": [
@@ -71,90 +65,87 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-export-default-from": "^7.8.3",
-    "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
-    "@babel/plugin-transform-runtime": "^7.10.1",
-    "@babel/polyfill": "^7.10.1",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/runtime": "^7.14.0",
-    "@storybook/addon-actions": "^5.3.14",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-links": "^5.3.14",
-    "@storybook/addons": "^5.3.14",
-    "@storybook/react": "^7.5.0",
-    "@svgr/webpack": "4.3.3",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "@typescript-eslint/eslint-plugin": "^2.10.0",
-    "@typescript-eslint/parser": "^2.10.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@babel/cli": "7.22.10",
+    "@babel/core": "7.22.11",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "7.22.14",
+    "@babel/runtime": "^7.10.2",
+    "@gatsbyjs/reach-router": "^1.3.9",
+    "@svgr/webpack": "6.5.1",
+    "@types/jest": "29.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.2.0",
+    "@typescript-eslint/parser": "^2.2.0",
+    "axios": "^1.6.0",
     "babel-eslint": "10.0.3",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "26.6.3",
     "babel-loader": "8.0.6",
-    "babel-plugin-import": "^1.13.6",
-    "babel-plugin-named-asset-import": "^0.3.6",
-    "babel-preset-react-app": "^9.1.1",
-    "camelcase": "^5.3.1",
-    "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "css-loader": "3.4.2",
-    "dotenv": "8.2.0",
+    "babel-plugin-import": "^1.13.8",
+    "babel-plugin-named-asset-import": "^0.3.4",
+    "babel-preset-react-app": "^9.0.2",
+    "browserslist": "^4.8.0",
+    "camelcase": "^5.2.0",
+    "case-sensitive-paths-webpack-plugin": "2.2.0",
+    "clean-webpack-plugin": "4.0.0",
+    "core-js": "^3.35.1",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "5.0.1",
+    "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
-    "enzyme": "^3.11.0",
-    "eslint": "^6.6.0",
-    "eslint-config-react-app": "^5.2.0",
-    "eslint-loader": "3.0.3",
-    "eslint-plugin-flowtype": "4.6.0",
-    "eslint-plugin-import": "2.20.0",
+    "ejs": "3.1.8",
+    "eslint": "^6.8.0",
+    "eslint-config-react-app": "^5.0.2",
+    "eslint-loader": "4.0.2",
+    "eslint-plugin-flowtype": "3.13.0",
+    "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.18.0",
+    "eslint-plugin-react": "7.14.3",
     "eslint-plugin-react-hooks": "^1.6.1",
-    "file-loader": "4.3.0",
-    "fs-extra": "^8.1.0",
-    "html-webpack-plugin": "4.0.0-beta.11",
-    "husky": "^6.0.0",
-    "i18next": "22.4.9",
-    "i18next-browser-languagedetector": "7.0.1",
-    "i18next-xhr-backend": "3.2.2",
+    "file-loader": "6.2.0",
+    "fs-extra": "^10.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",
-    "jest": "24.9.0",
-    "jest-environment-jsdom-fourteen": "1.0.1",
-    "jest-resolve": "24.9.0",
-    "jest-watch-typeahead": "0.4.2",
+    "is-wsl": "^1.1.0",
+    "jest": "26.6.3",
+    "koa": "2.13.4",
+    "koa-router": "7.3.0",
+    "koa-send": "5.0.1",
+    "koa2-cors": "2.0.6",
     "lint-staged": "14.0.0",
-    "mini-css-extract-plugin": "0.9.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "pnp-webpack-plugin": "1.6.0",
-    "postcss-flexbugs-fixes": "4.1.0",
-    "postcss-loader": "3.0.0",
-    "postcss-normalize": "8.0.1",
-    "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "4.0.1",
-    "react-app-polyfill": "^3.0.0",
+    "mini-css-extract-plugin": "^1.3.5",
+    "object-assign": "4.1.1",
+    "pnp-webpack-plugin": "1.5.0",
+    "postcss": "8.4.31",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "postcss-safe-parser": "^6.0.0",
+    "prettier": "3.1.0",
+    "raf": "3.4.0",
+    "react": "17.0.0",
+    "react-app-polyfill": "^1.0.4",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "17.0.2",
-    "react-element-to-jsx-string": "^14.3.1",
-    "react-i18next": "^10.12.2",
-    "react-responsive": "^8.0.3",
-    "react-select": "5.7.0",
-    "react-sweet-progress": "^1.1.2",
-    "react-transition-group": "^4.4.1",
+    "react-dom": "17.0.0",
+    "react-hot-loader": "4.13.1",
+    "react-mentions": "4.4.7",
+    "regenerator-runtime": "^0.14.1",
     "release-it": "16.2.1",
-    "resolve": "1.15.0",
-    "resolve-url-loader": "3.1.5",
-    "sass-loader": "8.0.2",
-    "semver": "6.3.1",
-    "terser-webpack-plugin": "2.3.4",
-    "ts-pnp": "1.1.5",
-    "url-loader": "2.3.0",
-    "webpack": "4.41.5",
-    "webpack-dev-server": "3.11.3",
-    "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "resolve": "1.12.0",
+    "resolve-url-loader": "5.0.0",
+    "sass-loader": "13.3.2",
+    "style-loader": "^1.0.1",
+    "terser-webpack-plugin": "4.2.3",
+    "ts-pnp": "1.1.4",
+    "url-loader": "4.1.1",
+    "webpack": "5.88.2",
+    "webpack-dev-server": "4.15.1",
+    "webpack-manifest-plugin": "5.0.0",
+    "webpack-merge": "5.8.0",
+    "workbox-webpack-plugin": "7.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }