diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 1658ad576a..0000000000 --- a/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ -frontend/node_modules/** -# **/*.js \ No newline at end of file diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 28907f42d8..0000000000 --- a/.prettierrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "semi": true, - "trailingComma": "es5", - "printWidth": 120, - "singleQuote": true, - "arrowParens": "always", - "proseWrap": "preserve" -} \ No newline at end of file diff --git a/.version b/.version index d5cc44d1d3..b09a54cb9b 100644 --- a/.version +++ b/.version @@ -1 +1 @@ -0.7.2 \ No newline at end of file +0.7.3 \ No newline at end of file diff --git a/.vscode/extension.json b/.vscode/extension.json new file mode 100644 index 0000000000..fbddc72229 --- /dev/null +++ b/.vscode/extension.json @@ -0,0 +1,11 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "CoenraadS.bracket-pair-colorizer", + "mgmcdermott.vscode-language-babel", + "formulahendry.auto-rename-tag", + "xabikos.javascriptsnippets", + "streetsidesoftware.code-spell-checker", + "esbenp.prettier-vscode" + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..8e9ce74d63 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,14 @@ +{ + "[javascript, typescript]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + }, + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact" + ], + "eslint.format.enable": true, + "editor.formatOnSave": true, + +} \ No newline at end of file diff --git a/README.md b/README.md index 736cb190f3..9664fd390f 100644 --- a/README.md +++ b/README.md @@ -6,14 +6,21 @@ ToolJet is an **open-source no-code framework** to build and deploy internal tools quickly without much effort from the engineering teams. You can connect to your data sources such as databases ( like PostgreSQL, MongoDB, Elasticsearch, etc ), API endpoints ( ToolJet supports importing OpenAPI spec & OAuth2 authorization) and external services ( like Stripe, Slack, Google Sheets, Airtable ) and use our pre-built UI widgets to build internal tools. +![Docker Cloud Build Status](https://img.shields.io/docker/cloud/build/tooljet/tooljet-ce) +![GitHub contributors](https://img.shields.io/github/contributors/tooljet/tooljet) [![GitHub issues](https://img.shields.io/github/issues/ToolJet/ToolJet)](https://github.com/ToolJet/ToolJet/issues) [![GitHub stars](https://img.shields.io/github/stars/ToolJet/ToolJet)](https://github.com/ToolJet/ToolJet/stargazers) +![GitHub closed issues](https://img.shields.io/github/issues-closed/tooljet/tooljet) +![GitHub pull requests](https://img.shields.io/github/issues-pr-raw/tooljet/tooljet) +![GitHub release (latest by date)](https://img.shields.io/github/v/release/tooljet/tooljet) +![GitHub commit activity](https://img.shields.io/github/commit-activity/m/tooljet/tooljet) [![GitHub license](https://img.shields.io/github/license/ToolJet/ToolJet)](https://github.com/ToolJet/ToolJet) +

- +

@@ -29,7 +36,6 @@ ToolJet is an **open-source no-code framework** to build and deploy internal too - Write JS code almost anywhere in the builder - Query editors for all supported data sources - Transform query results using JS code -- Import endpoints from OpenAPI specs - All the credentials are securely encrypted using `aes-256-gcm`. - ToolJet acts only as a proxy and doesn't store any data. - Support for OAuth @@ -44,8 +50,6 @@ You can deploy ToolJet on Heroku for free using the one-click-deployment button

- - ## Examples [Building a Github contributor leaderboard using ToolJet](https://blog.tooljet.io/building-a-github-contributor-leaderboard-using-tooljet/)
@@ -65,5 +69,10 @@ We use the git-flow branching model. The base branch is develop. If you are look Read our contributing guide (CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to ToolJet.
[Contributing Guide](https://docs.tooljet.io/docs/contributing-guide/setup/docker) +## Contributors + + + + ## Licence -ToolJet © 2021, ToolJet Inc - Released under the GNU General Public License v3.0. +ToolJet © 2021, ToolJet Solutions Inc - Released under the GNU General Public License v3.0. diff --git a/docker/client.Dockerfile.dev b/docker/client.Dockerfile.dev index d86a2f8895..e1c90d3efd 100644 --- a/docker/client.Dockerfile.dev +++ b/docker/client.Dockerfile.dev @@ -12,6 +12,7 @@ ENV PATH /app/node_modules/.bin:$PATH # Fix for heap limit allocation issue ENV NODE_OPTIONS="--max-old-space-size=2048" + # install app dependencies COPY package.json package-lock.json ./ RUN npm install diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js deleted file mode 100644 index 45c9767f46..0000000000 --- a/frontend/.eslintrc.js +++ /dev/null @@ -1,37 +0,0 @@ -module.exports = { - env: { - browser: true, - es2021: true - }, - - parser: 'babel-eslint', - - parserOptions: { - ecmaFeatures: { - jsx: true - }, - ecmaVersion: 12, - sourceType: 'module' - }, - extends: [ - 'plugin:react/recommended', - 'prettier', - 'airbnb-base/legacy' - ], - plugins: ['html', 'react', 'prettier', 'babel'], - rules: { - "react/prop-types": 0, - "no-underscore-dangle": ["error", { "allow": ["_self"] }], - "max-len": 0, - "no-bitwise": 0, - "no-use-before-define": ["error", { "variables": false, "functions": false }], - "no-nested-ternary": 0, - "no-loop-func": 0, - - }, - settings: { - react: { - version: "detect" - } - } -}; diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json new file mode 100644 index 0000000000..b705cb1a22 --- /dev/null +++ b/frontend/.eslintrc.json @@ -0,0 +1,56 @@ +{ + "env": { + "browser": true, + "amd": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended", + "plugin:import/errors", + "plugin:import/warnings", + "plugin:prettier/recommended", + "plugin:cypress/recommended" + ], + "parser": "babel-eslint", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": ["react", "prettier"], + "rules": { + "prettier/prettier": [ + "error", + { + "semi": true, + "trailingComma": "es5", + "printWidth": 120, + "singleQuote": true, + "arrowParens": "always", + "proseWrap": "preserve" + } + ], + "react/prop-types": 0, + "react/display-name": "off", + "no-unused-vars": [2, { "args": "after-used", "argsIgnorePattern": "reject" }], + "react/no-deprecated": 0, + "no-prototype-builtins": 0 + }, + "settings": { + "react": { + "version": "detect" + }, + "import/resolver": "webpack" + }, + "globals": { + "fetch": true, + "process": true, + "module": true, + "__dirname": true + } +} + \ No newline at end of file diff --git a/frontend/cypress/plugins/index.js b/frontend/cypress/plugins/index.js index be566ad6d6..97409954b9 100644 --- a/frontend/cypress/plugins/index.js +++ b/frontend/cypress/plugins/index.js @@ -1,16 +1,12 @@ -const webpackPreprocessor = require('@cypress/webpack-preprocessor') - module.exports = (on, config) => { if (config.testingType === 'component') { - const { startDevServer } = require('@cypress/webpack-dev-server') + const { startDevServer } = require('@cypress/webpack-dev-server'); // Your project's Webpack configuration - const webpackConfig = require('../../webpack.config.js') + const webpackConfig = require('../../webpack.config.js'); - on('dev-server:start', (options) => - startDevServer({ options, webpackConfig }) - ) + on('dev-server:start', (options) => startDevServer({ options, webpackConfig })); } - return config -} \ No newline at end of file + return config; +}; diff --git a/frontend/cypress/support/index.js b/frontend/cypress/support/index.js index d68db96df2..37a498fb5b 100644 --- a/frontend/cypress/support/index.js +++ b/frontend/cypress/support/index.js @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import './commands'; // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 851413fd15..0ecc197a4f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -22,6 +22,7 @@ "array-move": "^3.0.1", "babel-loader": "^8.0.5", "babel-plugin-console-source": "^2.0.5", + "babel-plugin-import": "^1.13.3", "bootstrap": "^4.6.0", "dompurify": "^2.2.7", "draft-js": "^0.11.7", @@ -36,7 +37,6 @@ "papaparse": "^5.3.0", "plotly.js-basic-dist-min": "^1.58.4", "query-string": "^6.13.6", - "re-resizable": "^6.9.0", "react": "^16.14.0", "react-bootstrap": "^1.5.2", "react-color": "^2.19.3", @@ -52,7 +52,6 @@ "react-loading-skeleton": "^2.2.0", "react-plotly.js": "^2.5.1", "react-qr-reader": "^2.2.1", - "react-resizable": "^1.11.1", "react-rnd": "^10.3.0", "react-router-dom": "^5.0.0", "react-scripts": "3.4.3", @@ -74,9 +73,17 @@ "@cypress/webpack-dev-server": "^1.3.1", "@cypress/webpack-preprocessor": "^5.9.0", "@svgr/webpack": "^5.5.0", - "babel-plugin-import": "^1.13.3", "cypress": "^7.4.0", + "eslint": "^7.32.0", + "eslint-config-prettier": "^8.3.0", + "eslint-import-resolver-webpack": "^0.13.1", + "eslint-plugin-cypress": "^2.12.1", + "eslint-plugin-import": "^2.24.2", + "eslint-plugin-prettier": "^3.4.1", + "eslint-plugin-react": "^7.25.2", + "eslint-plugin-react-hooks": "^4.2.0", "path": "^0.12.7", + "prettier": "^2.3.2", "webpack": "^4.29.6", "webpack-dev-server": "^3.11.2" } @@ -1968,6 +1975,73 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, + "node_modules/@eslint/eslintrc": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", + "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==", + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.1.1", + "espree": "^7.3.0", + "globals": "^13.9.0", + "ignore": "^4.0.6", + "import-fresh": "^3.2.1", + "js-yaml": "^3.13.1", + "minimatch": "^3.0.4", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "13.11.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz", + "integrity": "sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==", + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/eslintrc/node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/eslintrc/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "engines": { + "node": ">=4" + } + }, + "node_modules/@eslint/eslintrc/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@googlemaps/js-api-loader": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.11.1.tgz", @@ -2015,6 +2089,24 @@ "@hapi/hoek": "^8.3.0" } }, + "node_modules/@humanwhocodes/config-array": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", + "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==", + "dependencies": { + "@humanwhocodes/object-schema": "^1.2.0", + "debug": "^4.1.1", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=10.10.0" + } + }, + "node_modules/@humanwhocodes/object-schema": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz", + "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==" + }, "node_modules/@icons/material": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", @@ -3331,6 +3423,11 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==" }, + "node_modules/@types/json5": { + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", + "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" + }, "node_modules/@types/minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz", @@ -4244,6 +4341,12 @@ "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=" }, + "node_modules/array-find": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-find/-/array-find-1.0.0.tgz", + "integrity": "sha1-bI4obRHtdoMn+OYuzuhzU8o+eLg=", + "dev": true + }, "node_modules/array-find-index": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", @@ -4341,6 +4444,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/array.prototype.flatmap": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz", + "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==", + "dependencies": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.1", + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/arrify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", @@ -4669,7 +4789,6 @@ "version": "1.13.3", "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz", "integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==", - "dev": true, "dependencies": { "@babel/helper-module-imports": "^7.0.0", "@babel/runtime": "^7.0.0" @@ -8059,6 +8178,25 @@ "node": ">=4.3.0 <5.0.0 || >=5.10" } }, + "node_modules/enquirer": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", + "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==", + "dependencies": { + "ansi-colors": "^4.1.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/enquirer/node_modules/ansi-colors": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", + "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==", + "engines": { + "node": ">=6" + } + }, "node_modules/entities": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", @@ -8099,26 +8237,28 @@ } }, "node_modules/es-abstract": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz", - "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==", + "version": "1.18.6", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.6.tgz", + "integrity": "sha512-kAeIT4cku5eNLNuUKhlmtuk1/TRZvQoYccn6TO0cSVdf1kzB0T7+dYuVK9MWM7l+/53W2Q8M7N2c6MQvhXFcUQ==", "dependencies": { "call-bind": "^1.0.2", "es-to-primitive": "^1.2.1", "function-bind": "^1.1.1", "get-intrinsic": "^1.1.1", + "get-symbol-description": "^1.0.0", "has": "^1.0.3", "has-symbols": "^1.0.2", - "is-callable": "^1.2.3", + "internal-slot": "^1.0.3", + "is-callable": "^1.2.4", "is-negative-zero": "^2.0.1", - "is-regex": "^1.1.2", - "is-string": "^1.0.5", - "object-inspect": "^1.9.0", + "is-regex": "^1.1.4", + "is-string": "^1.0.7", + "object-inspect": "^1.11.0", "object-keys": "^1.1.1", "object.assign": "^4.1.2", "string.prototype.trimend": "^1.0.4", "string.prototype.trimstart": "^1.0.4", - "unbox-primitive": "^1.0.0" + "unbox-primitive": "^1.0.1" }, "engines": { "node": ">= 0.4" @@ -8214,6 +8354,74 @@ "source-map": "~0.6.1" } }, + "node_modules/eslint": { + "version": "7.32.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz", + "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==", + "dependencies": { + "@babel/code-frame": "7.12.11", + "@eslint/eslintrc": "^0.4.3", + "@humanwhocodes/config-array": "^0.5.0", + "ajv": "^6.10.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.0.1", + "doctrine": "^3.0.0", + "enquirer": "^2.3.5", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^5.1.1", + "eslint-utils": "^2.1.0", + "eslint-visitor-keys": "^2.0.0", + "espree": "^7.3.1", + "esquery": "^1.4.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "functional-red-black-tree": "^1.0.1", + "glob-parent": "^5.1.2", + "globals": "^13.6.0", + "ignore": "^4.0.6", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "js-yaml": "^3.13.1", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.0.4", + "natural-compare": "^1.4.0", + "optionator": "^0.9.1", + "progress": "^2.0.0", + "regexpp": "^3.1.0", + "semver": "^7.2.1", + "strip-ansi": "^6.0.0", + "strip-json-comments": "^3.1.0", + "table": "^6.0.9", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-config-prettier": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", + "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", + "dev": true, + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-config-react-app": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz", @@ -8234,26 +8442,85 @@ } }, "node_modules/eslint-import-resolver-node": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz", - "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==", + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz", + "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==", "dependencies": { - "debug": "^2.6.9", - "resolve": "^1.13.1" + "debug": "^3.2.7", + "resolve": "^1.20.0" } }, "node_modules/eslint-import-resolver-node/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dependencies": { - "ms": "2.0.0" + "ms": "^2.1.1" } }, - "node_modules/eslint-import-resolver-node/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + "node_modules/eslint-import-resolver-webpack": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.13.1.tgz", + "integrity": "sha512-O/8mG6AHmaKYSMb4lWxiXPpaARxOJ4rMQEHJ8vTgjS1MXooJA3KPgBPPAdOPoV17v5ML5120qod5FBLM+DtgEw==", + "dev": true, + "dependencies": { + "array-find": "^1.0.0", + "debug": "^3.2.7", + "enhanced-resolve": "^0.9.1", + "find-root": "^1.1.0", + "has": "^1.0.3", + "interpret": "^1.4.0", + "is-core-module": "^2.4.0", + "is-regex": "^1.1.3", + "lodash": "^4.17.21", + "resolve": "^1.20.0", + "semver": "^5.7.1" + }, + "engines": { + "node": "^16 || ^15 || ^14 || ^13 || ^12 || ^11 || ^10 || ^9 || ^8 || ^7 || ^6" + }, + "peerDependencies": { + "eslint-plugin-import": ">=1.4.0", + "webpack": ">=1.11.0" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/enhanced-resolve": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz", + "integrity": "sha1-TW5omzcl+GCQknzMhs2fFjW4ni4=", + "dev": true, + "dependencies": { + "graceful-fs": "^4.1.2", + "memory-fs": "^0.2.0", + "tapable": "^0.1.8" + }, + "engines": { + "node": ">=0.6" + } + }, + "node_modules/eslint-import-resolver-webpack/node_modules/memory-fs": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz", + "integrity": "sha1-8rslNovBIeORwlIN6Slpyu4KApA=", + "dev": true + }, + "node_modules/eslint-import-resolver-webpack/node_modules/tapable": { + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz", + "integrity": "sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=", + "dev": true, + "engines": { + "node": ">=0.6" + } }, "node_modules/eslint-loader": { "version": "3.0.3", @@ -8276,11 +8543,11 @@ } }, "node_modules/eslint-module-utils": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz", - "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.2.tgz", + "integrity": "sha512-QG8pcgThYOuqxupd06oYTZoNOGaUdTY1PqK+oS6ElF6vs4pBdk/aYxFVQQXzcrAqp9m7cl7lb2ubazX+g16k2Q==", "dependencies": { - "debug": "^2.6.9", + "debug": "^3.2.7", "pkg-dir": "^2.0.0" }, "engines": { @@ -8288,11 +8555,11 @@ } }, "node_modules/eslint-module-utils/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dependencies": { - "ms": "2.0.0" + "ms": "^2.1.1" } }, "node_modules/eslint-module-utils/node_modules/find-up": { @@ -8318,11 +8585,6 @@ "node": ">=4" } }, - "node_modules/eslint-module-utils/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" - }, "node_modules/eslint-module-utils/node_modules/p-limit": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", @@ -8372,6 +8634,18 @@ "node": ">=4" } }, + "node_modules/eslint-plugin-cypress": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.12.1.tgz", + "integrity": "sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==", + "dev": true, + "dependencies": { + "globals": "^11.12.0" + }, + "peerDependencies": { + "eslint": ">= 3.2.1" + } + }, "node_modules/eslint-plugin-flowtype": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.6.0.tgz", @@ -8386,6 +8660,297 @@ "eslint": ">=6.1.0" } }, + "node_modules/eslint-plugin-import": { + "version": "2.24.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.24.2.tgz", + "integrity": "sha512-hNVtyhiEtZmpsabL4neEj+6M5DCLgpYyG9nzJY8lZQeQXEn5UPW1DpUdsMHMXsq98dbNm7nt1w9ZMSVpfJdi8Q==", + "dependencies": { + "array-includes": "^3.1.3", + "array.prototype.flat": "^1.2.4", + "debug": "^2.6.9", + "doctrine": "^2.1.0", + "eslint-import-resolver-node": "^0.3.6", + "eslint-module-utils": "^2.6.2", + "find-up": "^2.0.0", + "has": "^1.0.3", + "is-core-module": "^2.6.0", + "minimatch": "^3.0.4", + "object.values": "^1.1.4", + "pkg-up": "^2.0.0", + "read-pkg-up": "^3.0.0", + "resolve": "^1.20.0", + "tsconfig-paths": "^3.11.0" + }, + "engines": { + "node": ">=4" + }, + "peerDependencies": { + "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0" + } + }, + "node_modules/eslint-plugin-import/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/eslint-plugin-import/node_modules/doctrine": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", + "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/eslint-plugin-import/node_modules/find-up": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", + "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "dependencies": { + "locate-path": "^2.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/load-json-file": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", + "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", + "dependencies": { + "graceful-fs": "^4.1.2", + "parse-json": "^4.0.0", + "pify": "^3.0.0", + "strip-bom": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/locate-path": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", + "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", + "dependencies": { + "p-locate": "^2.0.0", + "path-exists": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "node_modules/eslint-plugin-import/node_modules/p-limit": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", + "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", + "dependencies": { + "p-try": "^1.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/p-locate": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", + "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", + "dependencies": { + "p-limit": "^1.1.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/p-try": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", + "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", + "dependencies": { + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/path-exists": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", + "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/path-type": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", + "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", + "dependencies": { + "pify": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/pkg-up": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz", + "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=", + "dependencies": { + "find-up": "^2.1.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/read-pkg": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", + "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", + "dependencies": { + "load-json-file": "^4.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/read-pkg-up": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz", + "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=", + "dependencies": { + "find-up": "^2.0.0", + "read-pkg": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-import/node_modules/strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint-plugin-prettier": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", + "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==", + "dev": true, + "dependencies": { + "prettier-linter-helpers": "^1.0.0" + }, + "engines": { + "node": ">=6.0.0" + }, + "peerDependencies": { + "eslint": ">=5.0.0", + "prettier": ">=1.13.0" + }, + "peerDependenciesMeta": { + "eslint-config-prettier": { + "optional": true + } + } + }, + "node_modules/eslint-plugin-react": { + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.25.2.tgz", + "integrity": "sha512-elx4585wgmryanJK4C5IoSKQyVZ+e7H0t2JOOtJNBql0cuercvSShvRReuLBbfx8687yW5yv+UL7pXwMsd6adQ==", + "dependencies": { + "array-includes": "^3.1.3", + "array.prototype.flatmap": "^1.2.4", + "doctrine": "^2.1.0", + "estraverse": "^5.2.0", + "has": "^1.0.3", + "jsx-ast-utils": "^2.4.1 || ^3.0.0", + "minimatch": "^3.0.4", + "object.entries": "^1.1.4", + "object.fromentries": "^2.0.4", + "object.values": "^1.1.4", + "prop-types": "^15.7.2", + "resolve": "^2.0.0-next.3", + "string.prototype.matchall": "^4.0.5" + }, + "engines": { + "node": ">=4" + }, + "peerDependencies": { + "eslint": "^3 || ^4 || ^5 || ^6 || ^7" + } + }, + "node_modules/eslint-plugin-react-hooks": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/eslint-plugin-react/node_modules/doctrine": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", + "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/eslint-plugin-react/node_modules/estraverse": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", + "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/eslint-plugin-react/node_modules/resolve": { + "version": "2.0.0-next.3", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz", + "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==", + "dependencies": { + "is-core-module": "^2.2.0", + "path-parse": "^1.0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -8420,6 +8985,308 @@ "node": ">=4" } }, + "node_modules/eslint/node_modules/@babel/code-frame": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz", + "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==", + "dependencies": { + "@babel/highlight": "^7.10.4" + } + }, + "node_modules/eslint/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/eslint/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/eslint/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/eslint/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/eslint/node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/eslint/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/eslint-visitor-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", + "engines": { + "node": ">=10" + } + }, + "node_modules/eslint/node_modules/globals": { + "version": "13.11.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz", + "integrity": "sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==", + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/eslint/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/eslint/node_modules/optionator": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", + "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.3" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/eslint/node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/eslint/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "engines": { + "node": ">=4" + } + }, + "node_modules/eslint/node_modules/semver": { + "version": "7.3.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", + "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/eslint/node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/strip-ansi": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", + "dependencies": { + "ansi-regex": "^5.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/eslint/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/eslint/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + }, + "node_modules/espree": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz", + "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==", + "dependencies": { + "acorn": "^7.4.0", + "acorn-jsx": "^5.3.1", + "eslint-visitor-keys": "^1.3.0" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -8934,6 +9801,12 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "node_modules/fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "node_modules/fast-glob": { "version": "2.2.7", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz", @@ -9068,6 +9941,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/file-entry-cache": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dependencies": { + "flat-cache": "^3.0.4" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, "node_modules/file-loader": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz", @@ -9325,6 +10209,37 @@ "node": ">= 0.10" } }, + "node_modules/flat-cache": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", + "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", + "dependencies": { + "flatted": "^3.1.0", + "rimraf": "^3.0.2" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/flat-cache/node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/flatted": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz", + "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==" + }, "node_modules/flatten": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz", @@ -9664,6 +10579,21 @@ "node": ">=6" } }, + "node_modules/get-symbol-description": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz", + "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==", + "dependencies": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", @@ -9969,6 +10899,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-tostringtag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", + "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", + "dependencies": { + "has-symbols": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/has-unicode": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", @@ -10897,9 +11841,9 @@ "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" }, "node_modules/is-callable": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz", - "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz", + "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==", "engines": { "node": ">= 0.4" }, @@ -10932,9 +11876,9 @@ } }, "node_modules/is-core-module": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", - "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz", + "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==", "dependencies": { "has": "^1.0.3" }, @@ -11198,12 +12142,12 @@ "dev": true }, "node_modules/is-regex": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz", - "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", "dependencies": { "call-bind": "^1.0.2", - "has-symbols": "^1.0.1" + "has-tostringtag": "^1.0.0" }, "engines": { "node": ">= 0.4" @@ -11242,9 +12186,12 @@ } }, "node_modules/is-string": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz", - "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", + "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==", + "dependencies": { + "has-tostringtag": "^1.0.0" + }, "engines": { "node": ">= 0.4" }, @@ -12277,6 +13224,18 @@ "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz", "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==" }, + "node_modules/jsx-ast-utils": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz", + "integrity": "sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==", + "dependencies": { + "array-includes": "^3.1.3", + "object.assign": "^4.1.2" + }, + "engines": { + "node": ">=4.0" + } + }, "node_modules/killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -12685,6 +13644,11 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "node_modules/lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=" + }, "node_modules/lodash.curry": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", @@ -12705,6 +13669,11 @@ "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=" }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" + }, "node_modules/lodash.once": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", @@ -12733,6 +13702,11 @@ "lodash._reinterpolate": "^3.0.0" } }, + "node_modules/lodash.truncate": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", + "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=" + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -14000,9 +14974,9 @@ } }, "node_modules/object-inspect": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz", - "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==", + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz", + "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==", "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -14067,14 +15041,13 @@ } }, "node_modules/object.entries": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.3.tgz", - "integrity": "sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz", + "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==", "dependencies": { - "call-bind": "^1.0.0", + "call-bind": "^1.0.2", "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.1", - "has": "^1.0.3" + "es-abstract": "^1.18.2" }, "engines": { "node": ">= 0.4" @@ -14125,14 +15098,13 @@ } }, "node_modules/object.values": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.3.tgz", - "integrity": "sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz", + "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==", "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.2", - "has": "^1.0.3" + "es-abstract": "^1.18.2" }, "engines": { "node": ">= 0.4" @@ -15879,6 +16851,30 @@ "node": ">=0.10.0" } }, + "node_modules/prettier": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "dependencies": { + "fast-diff": "^1.1.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -16849,19 +17845,6 @@ "react-dom": "~16" } }, - "node_modules/react-resizable": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.11.1.tgz", - "integrity": "sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q==", - "dependencies": { - "prop-types": "15.x", - "react-draggable": "^4.0.3" - }, - "peerDependencies": { - "react": "0.14.x || 15.x || 16.x || 17.x", - "react-dom": "0.14.x || 15.x || 16.x || 17.x" - } - }, "node_modules/react-rnd": { "version": "10.3.0", "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.3.0.tgz", @@ -18533,6 +19516,14 @@ "node": ">=0.10.0" } }, + "node_modules/require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/require-main-filename": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", @@ -19881,14 +20872,15 @@ } }, "node_modules/string.prototype.matchall": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz", - "integrity": "sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz", + "integrity": "sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==", "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.2", - "has-symbols": "^1.0.1", + "es-abstract": "^1.18.2", + "get-intrinsic": "^1.1.1", + "has-symbols": "^1.0.2", "internal-slot": "^1.0.3", "regexp.prototype.flags": "^1.3.1", "side-channel": "^1.0.4" @@ -20134,6 +21126,141 @@ "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz", "integrity": "sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==" }, + "node_modules/table": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz", + "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==", + "dependencies": { + "ajv": "^8.0.1", + "lodash.clonedeep": "^4.5.0", + "lodash.truncate": "^4.4.2", + "slice-ansi": "^4.0.0", + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/table/node_modules/ajv": { + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.3.tgz", + "integrity": "sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/table/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/table/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/table/node_modules/astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/table/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/table/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/table/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, + "node_modules/table/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "engines": { + "node": ">=8" + } + }, + "node_modules/table/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + }, + "node_modules/table/node_modules/slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "dependencies": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/table/node_modules/string-width": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz", + "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/table/node_modules/strip-ansi": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", + "dependencies": { + "ansi-regex": "^5.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -20627,6 +21754,36 @@ } } }, + "node_modules/tsconfig-paths": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz", + "integrity": "sha512-7ecdYDnIdmv639mmDwslG6KQg1Z9STTz1j7Gcz0xa+nshh/gKDAHcPxRbWOsA3SPp0tXP2leTcY9Kw+NAkfZzA==", + "dependencies": { + "@types/json5": "^0.0.29", + "json5": "^1.0.1", + "minimist": "^1.2.0", + "strip-bom": "^3.0.0" + } + }, + "node_modules/tsconfig-paths/node_modules/json5": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "dependencies": { + "minimist": "^1.2.0" + }, + "bin": { + "json5": "lib/cli.js" + } + }, + "node_modules/tsconfig-paths/node_modules/strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "engines": { + "node": ">=4" + } + }, "node_modules/tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", @@ -23846,6 +25003,51 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, + "@eslint/eslintrc": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", + "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==", + "requires": { + "ajv": "^6.12.4", + "debug": "^4.1.1", + "espree": "^7.3.0", + "globals": "^13.9.0", + "ignore": "^4.0.6", + "import-fresh": "^3.2.1", + "js-yaml": "^3.13.1", + "minimatch": "^3.0.4", + "strip-json-comments": "^3.1.1" + }, + "dependencies": { + "globals": { + "version": "13.11.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz", + "integrity": "sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==", + "requires": { + "type-fest": "^0.20.2" + } + }, + "import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + } + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" + }, + "type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==" + } + } + }, "@googlemaps/js-api-loader": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.11.1.tgz", @@ -23888,6 +25090,21 @@ "@hapi/hoek": "^8.3.0" } }, + "@humanwhocodes/config-array": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", + "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==", + "requires": { + "@humanwhocodes/object-schema": "^1.2.0", + "debug": "^4.1.1", + "minimatch": "^3.0.4" + } + }, + "@humanwhocodes/object-schema": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz", + "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==" + }, "@icons/material": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", @@ -24865,6 +26082,11 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==" }, + "@types/json5": { + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", + "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" + }, "@types/minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz", @@ -25582,6 +26804,12 @@ "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=" }, + "array-find": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-find/-/array-find-1.0.0.tgz", + "integrity": "sha1-bI4obRHtdoMn+OYuzuhzU8o+eLg=", + "dev": true + }, "array-find-index": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", @@ -25646,6 +26874,17 @@ "es-abstract": "^1.18.0-next.1" } }, + "array.prototype.flatmap": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz", + "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==", + "requires": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.1", + "function-bind": "^1.1.1" + } + }, "arrify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", @@ -25910,7 +27149,6 @@ "version": "1.13.3", "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz", "integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==", - "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", "@babel/runtime": "^7.0.0" @@ -28661,6 +29899,21 @@ } } }, + "enquirer": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", + "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==", + "requires": { + "ansi-colors": "^4.1.1" + }, + "dependencies": { + "ansi-colors": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", + "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==" + } + } + }, "entities": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", @@ -28692,26 +29945,28 @@ } }, "es-abstract": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz", - "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==", + "version": "1.18.6", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.6.tgz", + "integrity": "sha512-kAeIT4cku5eNLNuUKhlmtuk1/TRZvQoYccn6TO0cSVdf1kzB0T7+dYuVK9MWM7l+/53W2Q8M7N2c6MQvhXFcUQ==", "requires": { "call-bind": "^1.0.2", "es-to-primitive": "^1.2.1", "function-bind": "^1.1.1", "get-intrinsic": "^1.1.1", + "get-symbol-description": "^1.0.0", "has": "^1.0.3", "has-symbols": "^1.0.2", - "is-callable": "^1.2.3", + "internal-slot": "^1.0.3", + "is-callable": "^1.2.4", "is-negative-zero": "^2.0.1", - "is-regex": "^1.1.2", - "is-string": "^1.0.5", - "object-inspect": "^1.9.0", + "is-regex": "^1.1.4", + "is-string": "^1.0.7", + "object-inspect": "^1.11.0", "object-keys": "^1.1.1", "object.assign": "^4.1.2", "string.prototype.trimend": "^1.0.4", "string.prototype.trimstart": "^1.0.4", - "unbox-primitive": "^1.0.0" + "unbox-primitive": "^1.0.1" } }, "es-to-primitive": { @@ -28780,6 +30035,255 @@ "source-map": "~0.6.1" } }, + "eslint": { + "version": "7.32.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz", + "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==", + "requires": { + "@babel/code-frame": "7.12.11", + "@eslint/eslintrc": "^0.4.3", + "@humanwhocodes/config-array": "^0.5.0", + "ajv": "^6.10.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.0.1", + "doctrine": "^3.0.0", + "enquirer": "^2.3.5", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^5.1.1", + "eslint-utils": "^2.1.0", + "eslint-visitor-keys": "^2.0.0", + "espree": "^7.3.1", + "esquery": "^1.4.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "functional-red-black-tree": "^1.0.1", + "glob-parent": "^5.1.2", + "globals": "^13.6.0", + "ignore": "^4.0.6", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "js-yaml": "^3.13.1", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.0.4", + "natural-compare": "^1.4.0", + "optionator": "^0.9.1", + "progress": "^2.0.0", + "regexpp": "^3.1.0", + "semver": "^7.2.1", + "strip-ansi": "^6.0.0", + "strip-json-comments": "^3.1.0", + "table": "^6.0.9", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz", + "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==", + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" + }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + }, + "eslint-visitor-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==" + }, + "globals": { + "version": "13.11.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz", + "integrity": "sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==", + "requires": { + "type-fest": "^0.20.2" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" + }, + "import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + } + }, + "levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "requires": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + } + }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "requires": { + "yallist": "^4.0.0" + } + }, + "optionator": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", + "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", + "requires": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.3" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==" + }, + "prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" + }, + "semver": { + "version": "7.3.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", + "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "requires": { + "lru-cache": "^6.0.0" + } + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==" + }, + "strip-ansi": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", + "requires": { + "ansi-regex": "^5.0.0" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "requires": { + "has-flag": "^4.0.0" + } + }, + "type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "requires": { + "prelude-ls": "^1.2.1" + } + }, + "type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==" + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "requires": { + "isexe": "^2.0.0" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + } + } + }, + "eslint-config-prettier": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", + "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", + "dev": true, + "requires": {} + }, "eslint-config-react-app": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz", @@ -28789,26 +30293,74 @@ } }, "eslint-import-resolver-node": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz", - "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==", + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz", + "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==", "requires": { - "debug": "^2.6.9", - "resolve": "^1.13.1" + "debug": "^3.2.7", + "resolve": "^1.20.0" }, "dependencies": { "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "requires": { - "ms": "2.0.0" + "ms": "^2.1.1" + } + } + } + }, + "eslint-import-resolver-webpack": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.13.1.tgz", + "integrity": "sha512-O/8mG6AHmaKYSMb4lWxiXPpaARxOJ4rMQEHJ8vTgjS1MXooJA3KPgBPPAdOPoV17v5ML5120qod5FBLM+DtgEw==", + "dev": true, + "requires": { + "array-find": "^1.0.0", + "debug": "^3.2.7", + "enhanced-resolve": "^0.9.1", + "find-root": "^1.1.0", + "has": "^1.0.3", + "interpret": "^1.4.0", + "is-core-module": "^2.4.0", + "is-regex": "^1.1.3", + "lodash": "^4.17.21", + "resolve": "^1.20.0", + "semver": "^5.7.1" + }, + "dependencies": { + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" } }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + "enhanced-resolve": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz", + "integrity": "sha1-TW5omzcl+GCQknzMhs2fFjW4ni4=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "memory-fs": "^0.2.0", + "tapable": "^0.1.8" + } + }, + "memory-fs": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz", + "integrity": "sha1-8rslNovBIeORwlIN6Slpyu4KApA=", + "dev": true + }, + "tapable": { + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz", + "integrity": "sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=", + "dev": true } } }, @@ -28825,20 +30377,20 @@ } }, "eslint-module-utils": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz", - "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.2.tgz", + "integrity": "sha512-QG8pcgThYOuqxupd06oYTZoNOGaUdTY1PqK+oS6ElF6vs4pBdk/aYxFVQQXzcrAqp9m7cl7lb2ubazX+g16k2Q==", "requires": { - "debug": "^2.6.9", + "debug": "^3.2.7", "pkg-dir": "^2.0.0" }, "dependencies": { "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "requires": { - "ms": "2.0.0" + "ms": "^2.1.1" } }, "find-up": { @@ -28858,11 +30410,6 @@ "path-exists": "^3.0.0" } }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" - }, "p-limit": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", @@ -28899,6 +30446,15 @@ } } }, + "eslint-plugin-cypress": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.12.1.tgz", + "integrity": "sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==", + "dev": true, + "requires": { + "globals": "^11.12.0" + } + }, "eslint-plugin-flowtype": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.6.0.tgz", @@ -28907,6 +30463,218 @@ "lodash": "^4.17.15" } }, + "eslint-plugin-import": { + "version": "2.24.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.24.2.tgz", + "integrity": "sha512-hNVtyhiEtZmpsabL4neEj+6M5DCLgpYyG9nzJY8lZQeQXEn5UPW1DpUdsMHMXsq98dbNm7nt1w9ZMSVpfJdi8Q==", + "requires": { + "array-includes": "^3.1.3", + "array.prototype.flat": "^1.2.4", + "debug": "^2.6.9", + "doctrine": "^2.1.0", + "eslint-import-resolver-node": "^0.3.6", + "eslint-module-utils": "^2.6.2", + "find-up": "^2.0.0", + "has": "^1.0.3", + "is-core-module": "^2.6.0", + "minimatch": "^3.0.4", + "object.values": "^1.1.4", + "pkg-up": "^2.0.0", + "read-pkg-up": "^3.0.0", + "resolve": "^1.20.0", + "tsconfig-paths": "^3.11.0" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "doctrine": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", + "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "requires": { + "esutils": "^2.0.2" + } + }, + "find-up": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", + "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "requires": { + "locate-path": "^2.0.0" + } + }, + "load-json-file": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", + "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", + "requires": { + "graceful-fs": "^4.1.2", + "parse-json": "^4.0.0", + "pify": "^3.0.0", + "strip-bom": "^3.0.0" + } + }, + "locate-path": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", + "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", + "requires": { + "p-locate": "^2.0.0", + "path-exists": "^3.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "p-limit": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", + "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", + "requires": { + "p-try": "^1.0.0" + } + }, + "p-locate": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", + "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", + "requires": { + "p-limit": "^1.1.0" + } + }, + "p-try": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", + "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=" + }, + "parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", + "requires": { + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1" + } + }, + "path-exists": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", + "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=" + }, + "path-type": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", + "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", + "requires": { + "pify": "^3.0.0" + } + }, + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" + }, + "pkg-up": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz", + "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=", + "requires": { + "find-up": "^2.1.0" + } + }, + "read-pkg": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", + "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", + "requires": { + "load-json-file": "^4.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^3.0.0" + } + }, + "read-pkg-up": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz", + "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=", + "requires": { + "find-up": "^2.0.0", + "read-pkg": "^3.0.0" + } + }, + "strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=" + } + } + }, + "eslint-plugin-prettier": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", + "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==", + "dev": true, + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, + "eslint-plugin-react": { + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.25.2.tgz", + "integrity": "sha512-elx4585wgmryanJK4C5IoSKQyVZ+e7H0t2JOOtJNBql0cuercvSShvRReuLBbfx8687yW5yv+UL7pXwMsd6adQ==", + "requires": { + "array-includes": "^3.1.3", + "array.prototype.flatmap": "^1.2.4", + "doctrine": "^2.1.0", + "estraverse": "^5.2.0", + "has": "^1.0.3", + "jsx-ast-utils": "^2.4.1 || ^3.0.0", + "minimatch": "^3.0.4", + "object.entries": "^1.1.4", + "object.fromentries": "^2.0.4", + "object.values": "^1.1.4", + "prop-types": "^15.7.2", + "resolve": "^2.0.0-next.3", + "string.prototype.matchall": "^4.0.5" + }, + "dependencies": { + "doctrine": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", + "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "requires": { + "esutils": "^2.0.2" + } + }, + "estraverse": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", + "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==" + }, + "resolve": { + "version": "2.0.0-next.3", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz", + "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==", + "requires": { + "is-core-module": "^2.2.0", + "path-parse": "^1.0.6" + } + } + } + }, + "eslint-plugin-react-hooks": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", + "requires": {} + }, "eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -28929,6 +30697,16 @@ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==" }, + "espree": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz", + "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==", + "requires": { + "acorn": "^7.4.0", + "acorn-jsx": "^5.3.1", + "eslint-visitor-keys": "^1.3.0" + } + }, "esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -29344,6 +31122,12 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "fast-glob": { "version": "2.2.7", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz", @@ -29469,6 +31253,14 @@ "escape-string-regexp": "^1.0.5" } }, + "file-entry-cache": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "requires": { + "flat-cache": "^3.0.4" + } + }, "file-loader": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz", @@ -29682,6 +31474,30 @@ "resolve-dir": "^1.0.1" } }, + "flat-cache": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", + "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", + "requires": { + "flatted": "^3.1.0", + "rimraf": "^3.0.2" + }, + "dependencies": { + "rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "requires": { + "glob": "^7.1.3" + } + } + } + }, + "flatted": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz", + "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==" + }, "flatten": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz", @@ -29928,6 +31744,15 @@ "pump": "^3.0.0" } }, + "get-symbol-description": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz", + "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==", + "requires": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.1.1" + } + }, "get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", @@ -30161,6 +31986,14 @@ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz", "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==" }, + "has-tostringtag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", + "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", + "requires": { + "has-symbols": "^1.0.2" + } + }, "has-unicode": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", @@ -30889,9 +32722,9 @@ "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" }, "is-callable": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz", - "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==" + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz", + "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==" }, "is-ci": { "version": "2.0.0", @@ -30915,9 +32748,9 @@ } }, "is-core-module": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", - "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz", + "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==", "requires": { "has": "^1.0.3" } @@ -31089,12 +32922,12 @@ "dev": true }, "is-regex": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz", - "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", "requires": { "call-bind": "^1.0.2", - "has-symbols": "^1.0.1" + "has-tostringtag": "^1.0.0" } }, "is-regexp": { @@ -31118,9 +32951,12 @@ "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" }, "is-string": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz", - "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==" + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", + "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==", + "requires": { + "has-tostringtag": "^1.0.0" + } }, "is-svg": { "version": "3.0.0", @@ -31955,6 +33791,15 @@ "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz", "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==" }, + "jsx-ast-utils": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz", + "integrity": "sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==", + "requires": { + "array-includes": "^3.1.3", + "object.assign": "^4.1.2" + } + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -32278,6 +34123,11 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=" + }, "lodash.curry": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", @@ -32298,6 +34148,11 @@ "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=" }, + "lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" + }, "lodash.once": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", @@ -32326,6 +34181,11 @@ "lodash._reinterpolate": "^3.0.0" } }, + "lodash.truncate": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", + "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -33351,9 +35211,9 @@ "integrity": "sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==" }, "object-inspect": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz", - "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==" + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz", + "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==" }, "object-is": { "version": "1.1.5", @@ -33394,14 +35254,13 @@ } }, "object.entries": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.3.tgz", - "integrity": "sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz", + "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==", "requires": { - "call-bind": "^1.0.0", + "call-bind": "^1.0.2", "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.1", - "has": "^1.0.3" + "es-abstract": "^1.18.2" } }, "object.fromentries": { @@ -33434,14 +35293,13 @@ } }, "object.values": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.3.tgz", - "integrity": "sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz", + "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==", "requires": { "call-bind": "^1.0.2", "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.2", - "has": "^1.0.3" + "es-abstract": "^1.18.2" } }, "obuf": { @@ -34872,6 +36730,21 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", + "dev": true + }, + "prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "requires": { + "fast-diff": "^1.1.2" + } + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -35638,15 +37511,6 @@ "webrtc-adapter": "^7.2.1" } }, - "react-resizable": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.11.1.tgz", - "integrity": "sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q==", - "requires": { - "prop-types": "15.x", - "react-draggable": "^4.0.3" - } - }, "react-rnd": { "version": "10.3.0", "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.3.0.tgz", @@ -36930,6 +38794,11 @@ "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=" }, + "require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==" + }, "require-main-filename": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", @@ -38039,14 +39908,15 @@ } }, "string.prototype.matchall": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz", - "integrity": "sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz", + "integrity": "sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==", "requires": { "call-bind": "^1.0.2", "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.2", - "has-symbols": "^1.0.1", + "es-abstract": "^1.18.2", + "get-intrinsic": "^1.1.1", + "has-symbols": "^1.0.2", "internal-slot": "^1.0.3", "regexp.prototype.flags": "^1.3.1", "side-channel": "^1.0.4" @@ -38234,6 +40104,106 @@ "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz", "integrity": "sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==" }, + "table": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz", + "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==", + "requires": { + "ajv": "^8.0.1", + "lodash.clonedeep": "^4.5.0", + "lodash.truncate": "^4.4.2", + "slice-ansi": "^4.0.0", + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0" + }, + "dependencies": { + "ajv": { + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.3.tgz", + "integrity": "sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==", + "requires": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + } + }, + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" + }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + }, + "astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==" + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, + "is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" + }, + "json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + }, + "slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "requires": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + } + }, + "string-width": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz", + "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==", + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.0" + } + }, + "strip-ansi": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", + "requires": { + "ansi-regex": "^5.0.0" + } + } + } + }, "tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -38607,6 +40577,32 @@ "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz", "integrity": "sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ==" }, + "tsconfig-paths": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz", + "integrity": "sha512-7ecdYDnIdmv639mmDwslG6KQg1Z9STTz1j7Gcz0xa+nshh/gKDAHcPxRbWOsA3SPp0tXP2leTcY9Kw+NAkfZzA==", + "requires": { + "@types/json5": "^0.0.29", + "json5": "^1.0.1", + "minimist": "^1.2.0", + "strip-bom": "^3.0.0" + }, + "dependencies": { + "json5": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "requires": { + "minimist": "^1.2.0" + } + }, + "strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=" + } + } + }, "tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index a38c8cda6d..3392c76fd4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,7 +3,6 @@ "version": "0.1.0", "private": true, "dependencies": { - "babel-plugin-import": "^1.13.3", "@babel/core": "^7.4.3", "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/preset-env": "^7.4.3", @@ -18,6 +17,7 @@ "array-move": "^3.0.1", "babel-loader": "^8.0.5", "babel-plugin-console-source": "^2.0.5", + "babel-plugin-import": "^1.13.3", "bootstrap": "^4.6.0", "dompurify": "^2.2.7", "draft-js": "^0.11.7", @@ -32,7 +32,6 @@ "papaparse": "^5.3.0", "plotly.js-basic-dist-min": "^1.58.4", "query-string": "^6.13.6", - "re-resizable": "^6.9.0", "react": "^16.14.0", "react-bootstrap": "^1.5.2", "react-color": "^2.19.3", @@ -48,7 +47,6 @@ "react-loading-skeleton": "^2.2.0", "react-plotly.js": "^2.5.1", "react-qr-reader": "^2.2.1", - "react-resizable": "^1.11.1", "react-rnd": "^10.3.0", "react-router-dom": "^5.0.0", "react-scripts": "3.4.3", @@ -71,13 +69,24 @@ "@cypress/webpack-preprocessor": "^5.9.0", "@svgr/webpack": "^5.5.0", "cypress": "^7.4.0", + "eslint": "^7.32.0", + "eslint-config-prettier": "^8.3.0", + "eslint-import-resolver-webpack": "^0.13.1", + "eslint-plugin-cypress": "^2.12.1", + "eslint-plugin-import": "^2.24.2", + "eslint-plugin-prettier": "^3.4.1", + "eslint-plugin-react": "^7.25.2", + "eslint-plugin-react-hooks": "^4.2.0", "path": "^0.12.7", + "prettier": "^2.3.2", "webpack": "^4.29.6", "webpack-dev-server": "^3.11.2" }, "scripts": { "start": "webpack-dev-server --open --port 8082 --host 0.0.0.0", "build": "webpack -p && cp -a ./assets/. ./build/assets/", + "lint": "eslint . '**/*.{js,jsx}'", + "format": "eslint . --fix '**/*.{js,jsx}'", "test": "react-scripts test", "eject": "react-scripts eject" }, diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx index 6ca33d99ab..9e38f1136c 100644 --- a/frontend/src/App/App.jsx +++ b/frontend/src/App/App.jsx @@ -15,7 +15,7 @@ import 'react-toastify/dist/ReactToastify.css'; import { ManageOrgUsers } from '@/ManageOrgUsers'; import { SettingsPage } from '../SettingsPage/SettingsPage'; import { OnboardingModal } from '@/Onboarding/OnboardingModal'; -import {ForgotPassword} from '@/ForgotPassword' +import { ForgotPassword } from '@/ForgotPassword'; import { ResetPassword } from '@/ResetPassword'; import { lt } from 'semver'; @@ -27,7 +27,7 @@ class App extends React.Component { currentUser: null, fetchedMetadata: false, onboarded: true, - darkMode: localStorage.getItem('darkMode') === 'true' + darkMode: localStorage.getItem('darkMode') === 'true', }; } @@ -40,56 +40,107 @@ class App extends React.Component { logout = () => { authenticationService.logout(); history.push('/login'); - } + }; switchDarkMode = (newMode) => { this.setState({ darkMode: newMode }); localStorage.setItem('darkMode', newMode); - } + }; render() { const { currentUser, fetchedMetadata, updateAvailable, onboarded, darkMode } = this.state; - if(currentUser && fetchedMetadata === false) { + if (currentUser && fetchedMetadata === false) { tooljetService.fetchMetaData().then((data) => { this.setState({ fetchedMetadata: true, onboarded: data.onboarded }); - if(lt(data.installed_version, data.latest_version) && data.version_ignored === false) { + if (lt(data.installed_version, data.latest_version) && data.version_ignored === false) { this.setState({ updateAvailable: true }); } - }) + }); } return (
- {updateAvailable &&
-

Update available

-

A new version of ToolJet has been released.

-
- Read release notes & update - { tooljetService.skipVersion(); this.setState({ updateAvailable: false }); }} className="btn">Skip this version + {updateAvailable && ( +
+

Update available

+

A new version of ToolJet has been released.

+
-
} + )} - {!onboarded && - - } + {!onboarded && } - - + + - - + + - - - - - - + + + + + +
); diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js index 0c8a7fa642..0111eb2619 100644 --- a/frontend/src/Editor/ActionTypes.js +++ b/frontend/src/Editor/ActionTypes.js @@ -2,51 +2,39 @@ export const ActionTypes = [ { name: 'Show Alert', id: 'show-alert', - options: [ - { name: 'message', type: 'text', default: 'Message !' } - ] + options: [{ name: 'message', type: 'text', default: 'Message !' }], }, { name: 'Run Query', id: 'run-query', - options: [ - { queryId: '' } - ] + options: [{ queryId: '' }], }, { name: 'Open Webpage', id: 'open-webpage', - options: [ - { name: 'url', type: 'text', default: 'https://example.com' } - ] + options: [{ name: 'url', type: 'text', default: 'https://example.com' }], }, { name: 'Go to app', id: 'go-to-app', options: [ { name: 'app', type: 'text', default: '' }, - { name: 'queryParams', type: 'code', default: '[]' } - ] + { name: 'queryParams', type: 'code', default: '[]' }, + ], }, { name: 'Show Modal', id: 'show-modal', - options: [ - { name: 'modal', type: 'text', default: '' } - ] + options: [{ name: 'modal', type: 'text', default: '' }], }, { name: 'Close Modal', id: 'close-modal', - options: [ - { name: 'modal', type: 'text', default: '' } - ] + options: [{ name: 'modal', type: 'text', default: '' }], }, { name: 'Copy to clipboard', id: 'copy-to-clipboard', - options: [ - { name: 'copy-to-clipboard', type: 'text', default: '' } - ] - } + options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }], + }, ]; diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx index 9ad04f3266..1fefeca782 100644 --- a/frontend/src/Editor/Box.jsx +++ b/frontend/src/Editor/Box.jsx @@ -17,9 +17,9 @@ import { Modal } from './Components/Modal'; import { Chart } from './Components/Chart'; import { Map } from './Components/Map/Map'; import { QrScanner } from './Components/QrScanner/QrScanner'; -import { ToggleSwitch } from './Components/Toggle' -import { RadioButton } from './Components/RadioButton' -import { StarRating } from './Components/StarRating' +import { ToggleSwitch } from './Components/Toggle'; +import { RadioButton } from './Components/RadioButton'; +import { StarRating } from './Components/StarRating'; import { renderTooltip } from '../_helpers/appUtils'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import '@/_styles/custom.scss'; @@ -45,12 +45,11 @@ const AllComponents = { QrScanner, ToggleSwitch, RadioButton, - StarRating + StarRating, }; export const Box = function Box({ id, - mode, width, height, yellow, @@ -66,7 +65,7 @@ export const Box = function Box({ changeCanDrag, containerProps, darkMode, - removeComponent + removeComponent, }) { const backgroundColor = yellow ? 'yellow' : ''; @@ -86,49 +85,49 @@ export const Box = function Box({ renderTooltip({props, text: `${component.description}`})} + trigger={!inCanvas ? ['hover', 'focus'] : null} + overlay={(props) => renderTooltip({ props, text: `${component.description}` })} > -
- {inCanvas ? ( - - ) : ( -
-
-
-
-
- {component.displayName} +
+ {inCanvas ? ( + + ) : ( +
+
+
+
+
+ {component.displayName} +
-
- )} -
+ )} +
); }; diff --git a/frontend/src/Editor/BoxDragPreview.jsx b/frontend/src/Editor/BoxDragPreview.jsx index 1cfa332741..608feb3b28 100644 --- a/frontend/src/Editor/BoxDragPreview.jsx +++ b/frontend/src/Editor/BoxDragPreview.jsx @@ -11,7 +11,7 @@ export const BoxDragPreview = memo(function BoxDragPreview({ item, currentLayout [tickTock] ); - const layouts = item.layouts; + const layouts = item.layouts; let { width, height } = layouts ? item.layouts[currentLayout] : {}; if (item.id === undefined) { @@ -21,9 +21,14 @@ export const BoxDragPreview = memo(function BoxDragPreview({ item, currentLayout return (
-
+
); }); diff --git a/frontend/src/Editor/CodeBuilder/CodeBuilder.jsx b/frontend/src/Editor/CodeBuilder/CodeBuilder.jsx index 3d1df1f657..ca9f2eb7c7 100644 --- a/frontend/src/Editor/CodeBuilder/CodeBuilder.jsx +++ b/frontend/src/Editor/CodeBuilder/CodeBuilder.jsx @@ -2,13 +2,11 @@ import React, { useState } from 'react'; import CodeMirror from '@uiw/react-codemirror'; import 'codemirror/theme/duotone-light.css'; import { componentTypes } from '../Components/components'; -import { DataSourceTypes } from '../DataSourceManager/DataSourceTypes'; +import { DataSourceTypes } from '../DataSourceManager/SourceComponents'; import { debounce } from 'lodash'; import Fuse from 'fuse.js'; -export function CodeBuilder({ - initialValue, onChange, components, dataQueries -}) { +export function CodeBuilder({ initialValue, onChange, components, dataQueries }) { const [showDropdown, setShowDropdown] = useState(false); const [cursorPosition, setCursorPosition] = useState(0); const [currentValue, setCurrentValue] = useState(initialValue); @@ -130,7 +128,7 @@ export function CodeBuilder({ mode: 'javascript', lineWrapping: true, scrollbarStyle: null, - lineNumbers: false + lineNumbers: false, }} /> {showDropdown && ( diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx index 5b89433563..8e7c1d7201 100644 --- a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx +++ b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx @@ -57,10 +57,12 @@ export function CodeHinter({ }); useEffect(() => { setRealState(currentState); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentState.components]); let suggestions = useMemo(() => { return getSuggestionKeys(realState); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [realState.components, realState.queries]); function valueChanged(editor, onChange, suggestions, ignoreBraces) { diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.spec.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.spec.jsx index 666f297259..2cf3fc7173 100644 --- a/frontend/src/Editor/CodeBuilder/CodeHinter.spec.jsx +++ b/frontend/src/Editor/CodeBuilder/CodeHinter.spec.jsx @@ -1,33 +1,27 @@ -import * as React from 'react' -import { mount } from '@cypress/react' -import { CodeHinter } from './CodeHinter' +import * as React from 'react'; +import { mount } from '@cypress/react'; +import { CodeHinter } from './CodeHinter'; it('Codehinter', () => { - mount( console.log(value)} + /> + ); - }, - globals: { - - } - }} - initialValue={''} - theme="duotone-light" - mode="javascript" - lineNumbers={true} - className="query-hinter" - onChange={(value) => {}} - />) - - cy.get('.code-hinter') - .click() - .type('{{') - .contains('{{}}') // autocomplete for dynamic variables -}) - \ No newline at end of file + cy.get('.code-hinter').click().type('{{').contains('{{}}'); // autocomplete for dynamic variables +}); diff --git a/frontend/src/Editor/CodeBuilder/utils.js b/frontend/src/Editor/CodeBuilder/utils.js index 001557141e..2c16334789 100644 --- a/frontend/src/Editor/CodeBuilder/utils.js +++ b/frontend/src/Editor/CodeBuilder/utils.js @@ -6,16 +6,15 @@ export function getSuggestionKeys(currentState) { _.keys(currentState).forEach((key) => { _.keys(currentState[key]).forEach((key2) => { _.keys(currentState[key][key2]).forEach((key3) => { - suggestions.push(`${key}.${key2}.${key3}`) - }) - }) + suggestions.push(`${key}.${key2}.${key3}`); + }); + }); }); return suggestions; } export function generateHints(word, suggestions) { - - if(word === '') { + if (word === '') { return suggestions; } @@ -38,25 +37,25 @@ export function computeCurrentWord(editor, _cursorPosition, ignoreBraces = false export function makeOverlay(style) { return { + // eslint-disable-next-line no-unused-vars token: function (stream, state) { var ch; - if (stream.match("{{")) { + if (stream.match('{{')) { while ((ch = stream.next()) != null) - if (ch == "}" && stream.next() == "}") { - stream.eat("}"); + if (ch == '}' && stream.next() == '}') { + stream.eat('}'); return style; } } - while (stream.next() != null && !stream.match("{{", false)) { } + // eslint-disable-next-line no-empty + while (stream.next() != null && !stream.match('{{', false)) {} return null; - } - } + }, + }; } export function onBeforeChange(editor, change, ignoreBraces = false) { - - if(!ignoreBraces) { - + if (!ignoreBraces) { const cursor = editor.getCursor(); const line = cursor.line; const ch = cursor.ch; @@ -64,33 +63,30 @@ export function onBeforeChange(editor, change, ignoreBraces = false) { const isLastCharacterBrace = value.slice(ch - 1, value.length) === '{'; if (isLastCharacterBrace && change.origin === '+input' && change.text[0] === '{') { - change.text[0] = '{}}' + change.text[0] = '{}}'; // editor.setCursor({ line: 0, ch: ch }) } - } return change; } export function canShowHint(editor, ignoreBraces = false) { - - if(!editor.hasFocus()) return false; + if (!editor.hasFocus()) return false; const cursor = editor.getCursor(); const line = cursor.line; const ch = cursor.ch; const value = editor.getLine(line); - if(ignoreBraces && value.length > 0) return true; + if (ignoreBraces && value.length > 0) return true; return value.slice(ch, ch + 2) === '}}'; } export function handleChange(editor, onChange, suggestions, ignoreBraces = false) { - let state = editor.state.matchHighlighter; - editor.addOverlay(state.overlay = makeOverlay(state.options.style)); + editor.addOverlay((state.overlay = makeOverlay(state.options.style))); const cursor = editor.getCursor(); const currentWord = computeCurrentWord(editor, cursor.ch, ignoreBraces); @@ -103,11 +99,11 @@ export function handleChange(editor, onChange, suggestions, ignoreBraces = false return { from: { line: cursor.line, ch: cursor.ch - currentWord.length }, to: cursor, - list: hints - } - } + list: hints, + }; + }, }; if (canShowHint(editor, ignoreBraces)) { editor.showHint(options); } -}; +} diff --git a/frontend/src/Editor/Components/Button.jsx b/frontend/src/Editor/Components/Button.jsx index 1496faf59e..5ef061188d 100644 --- a/frontend/src/Editor/Components/Button.jsx +++ b/frontend/src/Editor/Components/Button.jsx @@ -1,10 +1,8 @@ import React, { useState, useEffect } from 'react'; import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils'; -var tinycolor = require("tinycolor2"); +var tinycolor = require('tinycolor2'); -export const Button = function Button({ - id, width, height, component, onComponentClick, currentState -}) { +export const Button = function Button({ id, width, height, component, onComponentClick, currentState }) { console.log('currentState', currentState); const [loadingState, setLoadingState] = useState(false); @@ -15,6 +13,7 @@ export const Button = function Button({ const newState = resolveReferences(loadingStateProperty.value, currentState, false); setLoadingState(newState); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentState]); const text = component.definition.properties.text.value; @@ -23,12 +22,15 @@ export const Button = function Button({ const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } const computedStyles = { backgroundColor, @@ -36,7 +38,7 @@ export const Button = function Button({ width, height, display: parsedWidgetVisibility ? '' : 'none', - '--tblr-btn-color-darker': tinycolor(backgroundColor).darken(8).toString() + '--tblr-btn-color-darker': tinycolor(backgroundColor).darken(8).toString(), }; return ( @@ -44,7 +46,10 @@ export const Button = function Button({ disabled={parsedDisabledState} className={`jet-button btn btn-primary p-1 ${loadingState === true ? ' btn-loading' : ''}`} style={computedStyles} - onClick={(event) => {event.stopPropagation(); onComponentClick(id, component)}} + onClick={(event) => { + event.stopPropagation(); + onComponentClick(id, component); + }} > {text} diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx index b3d6097804..b0920f3347 100644 --- a/frontend/src/Editor/Components/Chart.jsx +++ b/frontend/src/Editor/Components/Chart.jsx @@ -4,14 +4,9 @@ import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils'; // Use plotly basic bundle import Plotly from 'plotly.js-basic-dist-min'; import createPlotlyComponent from 'react-plotly.js/factory'; -const Plot = createPlotlyComponent(Plotly) - -import Skeleton from 'react-loading-skeleton'; - -export const Chart = function Chart({ - id, width, height, component, onComponentClick, currentState, darkMode -}) { +const Plot = createPlotlyComponent(Plotly); +export const Chart = function Chart({ id, width, height, component, onComponentClick, currentState, darkMode }) { const [loadingState, setLoadingState] = useState(false); const [chartData, setChartData] = useState([]); @@ -19,28 +14,31 @@ export const Chart = function Chart({ const disabledState = component.definition.styles?.disabledState?.value ?? false; let parsedWidgetVisibility = widgetVisibility; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; - + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } useEffect(() => { const loadingStateProperty = component.definition.properties.loadingState; if (loadingStateProperty && currentState) { const newState = resolveReferences(loadingStateProperty.value, currentState, false); - setLoadingState(newState); + setLoadingState(newState); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentState]); const computedStyles = { width, height, display: parsedWidgetVisibility ? '' : 'none', - background: darkMode ? '#1f2936' : 'white' + background: darkMode ? '#1f2936' : 'white', }; - // darkMode ? '#1f2936' : 'white' const dataProperty = component.definition.properties.data; const dataString = dataProperty ? dataProperty.value : []; @@ -66,73 +64,84 @@ export const Chart = function Chart({ title: { text: title, font: { - color: fontColor - } + color: fontColor, + }, }, legend: { text: title, font: { - color: fontColor - } + color: fontColor, + }, }, xaxis: { showgrid: showGridLines, showline: true, - color: fontColor + color: fontColor, }, yaxis: { - showgrid: showGridLines, - showline: true, - color: fontColor - } - } + showgrid: showGridLines, + showline: true, + color: fontColor, + }, + }; const data = resolveReferences(dataString, currentState, []); useEffect(() => { - let rawData = data || []; - if(typeof rawData === 'string') { + if (typeof rawData === 'string') { try { rawData = JSON.parse(dataString); - } catch (err) { rawData = []; } + } catch (err) { + rawData = []; + } } - if(!Array.isArray(rawData)) { rawData = []; } + if (!Array.isArray(rawData)) { + rawData = []; + } let newData = []; - if(chartType === 'pie') { - newData = [{ - type: chartType, - values: rawData.map((item) => item["value"]), - labels: rawData.map((item) => item["label"]), - }]; + if (chartType === 'pie') { + newData = [ + { + type: chartType, + values: rawData.map((item) => item['value']), + labels: rawData.map((item) => item['label']), + }, + ]; } else { - newData = [{ - type: chartType || 'line', - x: rawData.map((item) => item["x"]), - y: rawData.map((item) => item["y"]), - marker: { color: markerColor } - }]; + newData = [ + { + type: chartType || 'line', + x: rawData.map((item) => item['x']), + y: rawData.map((item) => item['y']), + marker: { color: markerColor }, + }, + ]; } setChartData(newData); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [data, chartType]); return (
{event.stopPropagation(); onComponentClick(id, component)}} + onClick={(event) => { + event.stopPropagation(); + onComponentClick(id, component); + }} > - {loadingState === true ? + {loadingState === true ? (
- : + ) : ( - } + )}
); }; diff --git a/frontend/src/Editor/Components/Checkbox.jsx b/frontend/src/Editor/Components/Checkbox.jsx index a06b4e9725..84448646b9 100644 --- a/frontend/src/Editor/Components/Checkbox.jsx +++ b/frontend/src/Editor/Components/Checkbox.jsx @@ -9,22 +9,24 @@ export const Checkbox = function Checkbox({ onComponentClick, currentState, onComponentOptionChanged, - onEvent + onEvent, }) { - const label = component.definition.properties.label.value; const textColorProperty = component.definition.styles.textColor; const textColor = textColorProperty ? textColorProperty.value : '#000'; const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } function toggleValue(e) { const checked = e.target.checked; @@ -37,7 +39,15 @@ export const Checkbox = function Checkbox({ } return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + >
); diff --git a/frontend/src/Editor/Components/Container.jsx b/frontend/src/Editor/Components/Container.jsx index 849189bd1c..9eb8ae0a1b 100644 --- a/frontend/src/Editor/Components/Container.jsx +++ b/frontend/src/Editor/Components/Container.jsx @@ -10,43 +10,42 @@ export const Container = function Container({ containerProps, width, currentState, - removeComponent + removeComponent, }) { - const backgroundColor = component.definition.styles.backgroundColor.value; const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } const computedStyles = { backgroundColor, width, height, - display: parsedWidgetVisibility ? 'flex' : 'none' + display: parsedWidgetVisibility ? 'flex' : 'none', }; const parentRef = useRef(null); return ( -
containerProps.onComponentClick(id, component)} style={computedStyles}> - - +
containerProps.onComponentClick(id, component)} + style={computedStyles} + > + +
); }; diff --git a/frontend/src/Editor/Components/Datepicker.jsx b/frontend/src/Editor/Components/Datepicker.jsx index fe2c1da162..a2049e6bd5 100644 --- a/frontend/src/Editor/Components/Datepicker.jsx +++ b/frontend/src/Editor/Components/Datepicker.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import Datetime from 'react-datetime'; import 'react-datetime/css/react-datetime.css'; import { resolveReferences, resolveWidgetFieldValue, validateWidget } from '@/_helpers/utils'; @@ -10,7 +10,7 @@ export const Datepicker = function Datepicker({ component, onComponentClick, currentState, - onComponentOptionChanged + onComponentOptionChanged, }) { console.log('currentState', currentState); @@ -19,55 +19,89 @@ export const Datepicker = function Datepicker({ const enableDateProp = component.definition.properties.enableDate; const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; + const defaultValue = component.definition.properties?.defaultValue?.value ?? ''; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } - + } catch (err) { + console.log(err); + } const enableTime = resolveReferences(enableTimeProp.value, currentState, false); let enableDate = true; if (enableDateProp) { + // eslint-disable-next-line no-unused-vars enableDate = resolveReferences(enableDateProp.value, currentState, true); } - - let dateFormat = formatProp + + let dateFormat = formatProp; try { dateFormat = resolveReferences(formatProp, currentState); - } catch (err) { console.log(err); } - - function onDateChange(event) { - onComponentOptionChanged(component, 'value', event.format(dateFormat.value)); + } catch (err) { + console.log(err); } - const value = currentState?.components[component?.name]?.value; + function onDateChange(event) { + const value = event._isAMomentObject ? event.format(dateFormat.value) : event; + setDateText(value); + onComponentOptionChanged(component, 'value', value); + } + + let value = defaultValue; + if (value && currentState) value = resolveReferences(value, currentState, ''); + + const [dateText, setDateText] = useState(value); + + useEffect(() => { + setDateText(value); + onComponentOptionChanged(component, 'value', value); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [value]); const validationData = validateWidget({ validationObject: component.definition.validation, widgetValue: value, - currentState - }) + currentState, + }); const { isValid, validationError } = validationData; const currentValidState = currentState?.components[component?.name]?.isValid; - if(currentValidState !== isValid) { + if (currentValidState !== isValid) { onComponentOptionChanged(component, 'isValid', isValid); } return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> - { + event.stopPropagation(); + onComponentClick(id, component); + }} + > + { + return ( + + ); + }} />
{validationError}
diff --git a/frontend/src/Editor/Components/DaterangePicker.jsx b/frontend/src/Editor/Components/DaterangePicker.jsx index b4459597bd..afacc6dc6d 100644 --- a/frontend/src/Editor/Components/DaterangePicker.jsx +++ b/frontend/src/Editor/Components/DaterangePicker.jsx @@ -12,7 +12,7 @@ export const DaterangePicker = function DaterangePicker({ component, onComponentClick, currentState, - onComponentOptionChanged + onComponentOptionChanged, }) { console.log('currentState', currentState); @@ -21,18 +21,20 @@ export const DaterangePicker = function DaterangePicker({ const formatProp = component.definition.properties.format; const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; - + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; const [focusedInput, setFocusedInput] = useState(null); const [startDate, setStartDate] = useState(startDateProp ? startDateProp.value : null); const [endDate, setEndDate] = useState(endDateProp ? endDateProp.value : null); let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } function onDateChange(dates) { const start = dates.startDate; @@ -55,7 +57,13 @@ export const DaterangePicker = function DaterangePicker({ } return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + > { return { name: parsedDisplayValues[index], value: value }; - }) + }), ]; - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } const currentValueProperty = component.definition.properties.value; const value = currentValueProperty ? currentValueProperty.value : ''; const [currentValue, setCurrentValue] = useState(''); - let newValue = value; if (currentValueProperty && currentState) { @@ -63,14 +71,14 @@ export const DropDown = function DropDown({ const validationData = validateWidget({ validationObject: component.definition.validation, widgetValue: currentValue, - currentState - }) + currentState, + }); const { isValid, validationError } = validationData; const currentValidState = currentState?.components[component?.name]?.isValid; - if(currentValidState !== isValid) { + if (currentValidState !== isValid) { onComponentOptionChanged(component, 'isValid', isValid); } @@ -79,13 +87,23 @@ export const DropDown = function DropDown({ }, [newValue]); useEffect(() => { - onComponentOptionChanged(component, 'value', currentValue).then(() => onEvent('onSelect', { component }) ); + onComponentOptionChanged(component, 'value', currentValue).then(() => onEvent('onSelect', { component })); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentValue]); return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + >
- +
- ); + return
; } return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> - } debounce={500}> +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + > + } debounce={500}>
diff --git a/frontend/src/Editor/Components/Map/Map.jsx b/frontend/src/Editor/Components/Map/Map.jsx index 9cd3866627..75be5ce4c0 100644 --- a/frontend/src/Editor/Components/Map/Map.jsx +++ b/frontend/src/Editor/Components/Map/Map.jsx @@ -1,8 +1,6 @@ -import React, { useEffect, useState, useCallback } from 'react'; -import { GoogleMap, LoadScript } from '@react-google-maps/api'; -import { Marker } from '@react-google-maps/api'; +import React, { useState, useCallback } from 'react'; +import { GoogleMap, LoadScript, Marker, Autocomplete } from '@react-google-maps/api'; import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils'; -import { Autocomplete } from '@react-google-maps/api'; import { darkModeStyles } from './styles'; export const Map = function Map({ @@ -88,6 +86,7 @@ export const Map = function Map({ ]).then(() => onEvent('onBoundsChange', { component })); } + // eslint-disable-next-line react-hooks/exhaustive-deps const onLoad = useCallback(function onLoad(mapInstance) { setGmap(mapInstance); onComponentOptionsChanged(component, [['center', mapInstance.center?.toJSON()]]); @@ -151,7 +150,7 @@ export const Map = function Map({ {Array.isArray(markers) && ( <> {markers.map((marker, index) => ( - handleMarkerClick(index)} /> + handleMarkerClick(index)} /> ))} )} diff --git a/frontend/src/Editor/Components/Map/styles.js b/frontend/src/Editor/Components/Map/styles.js index 352803840e..0378b259c1 100644 --- a/frontend/src/Editor/Components/Map/styles.js +++ b/frontend/src/Editor/Components/Map/styles.js @@ -1,137 +1,137 @@ export const darkModeStyles = [ - { - "featureType": "all", - "elementType": "labels.text.fill", - "stylers": [ - { - "color": "#ffffff" - } - ] - }, - { - "featureType": "all", - "elementType": "labels.text.stroke", - "stylers": [ - { - "color": "#000000" - }, - { - "lightness": 13 - } - ] - }, - { - "featureType": "administrative", - "elementType": "geometry.fill", - "stylers": [ - { - "color": "#000000" - } - ] - }, - { - "featureType": "administrative", - "elementType": "geometry.stroke", - "stylers": [ - { - "color": "#144b53" - }, - { - "lightness": 14 - }, - { - "weight": 1.4 - } - ] - }, - { - "featureType": "landscape", - "elementType": "all", - "stylers": [ - { - "color": "#08304b" - } - ] - }, - { - "featureType": "poi", - "elementType": "geometry", - "stylers": [ - { - "color": "#0c4152" - }, - { - "lightness": 5 - } - ] - }, - { - "featureType": "road.highway", - "elementType": "geometry.fill", - "stylers": [ - { - "color": "#000000" - } - ] - }, - { - "featureType": "road.highway", - "elementType": "geometry.stroke", - "stylers": [ - { - "color": "#0b434f" - }, - { - "lightness": 25 - } - ] - }, - { - "featureType": "road.arterial", - "elementType": "geometry.fill", - "stylers": [ - { - "color": "#000000" - } - ] - }, - { - "featureType": "road.arterial", - "elementType": "geometry.stroke", - "stylers": [ - { - "color": "#0b3d51" - }, - { - "lightness": 16 - } - ] - }, - { - "featureType": "road.local", - "elementType": "geometry", - "stylers": [ - { - "color": "#000000" - } - ] - }, - { - "featureType": "transit", - "elementType": "all", - "stylers": [ - { - "color": "#146474" - } - ] - }, - { - "featureType": "water", - "elementType": "all", - "stylers": [ - { - "color": "#021019" - } - ] - } - ]; + { + featureType: 'all', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#ffffff', + }, + ], + }, + { + featureType: 'all', + elementType: 'labels.text.stroke', + stylers: [ + { + color: '#000000', + }, + { + lightness: 13, + }, + ], + }, + { + featureType: 'administrative', + elementType: 'geometry.fill', + stylers: [ + { + color: '#000000', + }, + ], + }, + { + featureType: 'administrative', + elementType: 'geometry.stroke', + stylers: [ + { + color: '#144b53', + }, + { + lightness: 14, + }, + { + weight: 1.4, + }, + ], + }, + { + featureType: 'landscape', + elementType: 'all', + stylers: [ + { + color: '#08304b', + }, + ], + }, + { + featureType: 'poi', + elementType: 'geometry', + stylers: [ + { + color: '#0c4152', + }, + { + lightness: 5, + }, + ], + }, + { + featureType: 'road.highway', + elementType: 'geometry.fill', + stylers: [ + { + color: '#000000', + }, + ], + }, + { + featureType: 'road.highway', + elementType: 'geometry.stroke', + stylers: [ + { + color: '#0b434f', + }, + { + lightness: 25, + }, + ], + }, + { + featureType: 'road.arterial', + elementType: 'geometry.fill', + stylers: [ + { + color: '#000000', + }, + ], + }, + { + featureType: 'road.arterial', + elementType: 'geometry.stroke', + stylers: [ + { + color: '#0b3d51', + }, + { + lightness: 16, + }, + ], + }, + { + featureType: 'road.local', + elementType: 'geometry', + stylers: [ + { + color: '#000000', + }, + ], + }, + { + featureType: 'transit', + elementType: 'all', + stylers: [ + { + color: '#146474', + }, + ], + }, + { + featureType: 'water', + elementType: 'all', + stylers: [ + { + color: '#021019', + }, + ], + }, +]; diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx index b0cc403fcc..0ae7833ab1 100644 --- a/frontend/src/Editor/Components/Modal.jsx +++ b/frontend/src/Editor/Components/Modal.jsx @@ -4,16 +4,9 @@ import Button from 'react-bootstrap/Button'; import { SubCustomDragLayer } from '../SubCustomDragLayer'; import { SubContainer } from '../SubContainer'; import { ConfigHandle } from '../ConfigHandle'; -import { resolveWidgetFieldValue, resolveReferences } from '../../_helpers/utils'; +import { resolveWidgetFieldValue } from '../../_helpers/utils'; -export const Modal = function Modal({ - id, - component, - height, - mode, - containerProps, - currentState -}) { +export const Modal = function Modal({ id, component, height, containerProps, currentState }) { const [show, showModal] = useState(false); const parentRef = useRef(null); @@ -25,12 +18,14 @@ export const Modal = function Modal({ const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; useEffect(() => { const componentState = containerProps.currentState.components[component.name]; const canShowModel = componentState ? componentState.show : false; showModal(canShowModel); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [containerProps.currentState.components[component.name]]); function hideModal() { @@ -51,17 +46,11 @@ export const Modal = function Modal({ animation={false} onEscapeKeyDown={() => showModal(false)} > - {containerProps.mode === 'edit' && - - } + {containerProps.mode === 'edit' && ( + + )} - - {title} - + {title}
diff --git a/frontend/src/Editor/Components/Multiselect.jsx b/frontend/src/Editor/Components/Multiselect.jsx index 3cfdc3550e..d2ca129e07 100644 --- a/frontend/src/Editor/Components/Multiselect.jsx +++ b/frontend/src/Editor/Components/Multiselect.jsx @@ -9,7 +9,7 @@ export const Multiselect = function Multiselect({ component, onComponentClick, currentState, - onComponentOptionChanged + onComponentOptionChanged, }) { console.log('currentState', currentState); @@ -19,7 +19,8 @@ export const Multiselect = function Multiselect({ const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; const parsedValues = JSON.parse(values); const parsedDisplayValues = JSON.parse(displayValues); @@ -27,7 +28,7 @@ export const Multiselect = function Multiselect({ const selectOptions = [ ...parsedValues.map((value, index) => { return { name: parsedDisplayValues[index], value: value }; - }) + }), ]; const currentValueProperty = component.definition.properties.values; @@ -40,19 +41,30 @@ export const Multiselect = function Multiselect({ } let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } useEffect(() => { setCurrentValue(newValue); }, [newValue]); return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + >
- +
{ setNumber(parseInt(newNumber)); onComponentOptionChanged(component, 'value', parseInt(newNumber)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [newNumber]); const placeholder = component.definition.properties.placeholder.value; const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } return ( {event.stopPropagation(); onComponentClick(id, component)}} + onClick={(event) => { + event.stopPropagation(); + onComponentClick(id, component); + }} onChange={(e) => { setNumber(parseInt(e.target.value)); onComponentOptionChanged(component, 'value', parseInt(e.target.value)); @@ -48,7 +54,7 @@ export const NumberInput = function NumberInput({ type="number" className="form-control" placeholder={placeholder} - style={{ width, height, display:parsedWidgetVisibility ? '' : 'none' }} + style={{ width, height, display: parsedWidgetVisibility ? '' : 'none' }} value={number} /> ); diff --git a/frontend/src/Editor/Components/QrScanner/ErrorModal.jsx b/frontend/src/Editor/Components/QrScanner/ErrorModal.jsx index 890f4e2648..409ae536ab 100644 --- a/frontend/src/Editor/Components/QrScanner/ErrorModal.jsx +++ b/frontend/src/Editor/Components/QrScanner/ErrorModal.jsx @@ -1,34 +1,41 @@ -import React, { useState } from 'react'; +import React from 'react'; export default function ErrorModal() { - - const [show, setShow] = React.useState(true) + const [show, setShow] = React.useState(true); const close = () => { - setShow(false) - } - - return( + setShow(false); + }; + + return (
- { - show ? -
-
-
-
QR Scanner is not working
- -
-
- Please make sure a camera is available on your device. Try closing your browser and opening it again, if it doesn't work, please contact support. -
-
- -
+ {show ? ( +
+
+
+
QR Scanner is not working
+ +
+
+ Please make sure a camera is available on your device. Try closing your browser and opening it again, if + it doesn't work, please contact support. +
+
+
- : - '' - } +
+ ) : ( + '' + )}
); -}; +} diff --git a/frontend/src/Editor/Components/QrScanner/QrScanner.jsx b/frontend/src/Editor/Components/QrScanner/QrScanner.jsx index b4b4fbfcad..85a1fb925e 100644 --- a/frontend/src/Editor/Components/QrScanner/QrScanner.jsx +++ b/frontend/src/Editor/Components/QrScanner/QrScanner.jsx @@ -3,10 +3,7 @@ import QrReader from 'react-qr-reader'; import ErrorModal from './ErrorModal'; import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils'; -export const QrScanner = function QrScanner({ - component, onEvent, onComponentOptionChanged, currentState -}) { - +export const QrScanner = function QrScanner({ component, onEvent, onComponentOptionChanged, currentState }) { const handleError = async (errorMessage) => { console.log(errorMessage); setErrorOccured(true); @@ -16,7 +13,7 @@ export const QrScanner = function QrScanner({ if (data != null) { onEvent('onDetect', { component, data: data }); onComponentOptionChanged(component, 'lastDetectedValue', data); - }; + } }; let [errorOccured, setErrorOccured] = useState(false); @@ -24,25 +21,20 @@ export const QrScanner = function QrScanner({ const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } return ( -
- { - errorOccured ? - - : - - } +
+ {errorOccured ? : }
); }; diff --git a/frontend/src/Editor/Components/RadioButton.jsx b/frontend/src/Editor/Components/RadioButton.jsx index c50084425c..a2b93ca810 100644 --- a/frontend/src/Editor/Components/RadioButton.jsx +++ b/frontend/src/Editor/Components/RadioButton.jsx @@ -1,7 +1,6 @@ import React from 'react'; import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils'; - export const RadioButton = function RadioButton({ id, width, @@ -10,9 +9,8 @@ export const RadioButton = function RadioButton({ onComponentClick, currentState, onComponentOptionChanged, - onEvent + onEvent, }) { - const label = component.definition.properties.label.value; const textColorProperty = component.definition.styles.textColor; const textColor = textColorProperty ? textColorProperty.value : '#000'; @@ -23,25 +21,32 @@ export const RadioButton = function RadioButton({ const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedValues = values; try { parsedValues = resolveReferences(values, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } let parsedDisplayValues = displayValues; try { parsedDisplayValues = resolveReferences(displayValues, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } let parsedDefaultValue = defaultValue; try { parsedDefaultValue = resolveReferences(defaultValue, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } let selectOptions = []; @@ -49,33 +54,54 @@ export const RadioButton = function RadioButton({ selectOptions = [ ...parsedValues.map((value, index) => { return { name: parsedDisplayValues[index], value: value }; - }) + }), ]; - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } - + } catch (err) { + console.log(err); + } function onSelect(event) { - const selection = event.target.value + const selection = event.target.value; onComponentOptionChanged(component, 'value', selection); if (selection) { onEvent('onSelectionChange', { component }); - } + } } return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> - {label} +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + > + + {label} +
onSelect(e)}> {selectOptions.map((option, index) => ( -
diff --git a/frontend/src/Editor/Components/RichTextEditor.jsx b/frontend/src/Editor/Components/RichTextEditor.jsx index 4977a82ef1..8193fef0ad 100644 --- a/frontend/src/Editor/Components/RichTextEditor.jsx +++ b/frontend/src/Editor/Components/RichTextEditor.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Editor, EditorState } from "draft-js"; -import "draft-js/dist/Draft.css"; +import 'draft-js/dist/Draft.css'; import { DraftEditor } from './DraftEditor'; import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils'; @@ -11,33 +10,37 @@ export const RichTextEditor = function RichTextEditor({ component, onComponentClick, currentState, - onComponentOptionChanged + onComponentOptionChanged, }) { - const placeholder = component.definition.properties.placeholder.value; const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } function handleChange(html) { onComponentOptionChanged(component, 'value', html); } return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> - +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + > +
); }; diff --git a/frontend/src/Editor/Components/StarRating/icons/half-star.js b/frontend/src/Editor/Components/StarRating/icons/half-star.js index dcb73d6209..9e2818aa8d 100644 --- a/frontend/src/Editor/Components/StarRating/icons/half-star.js +++ b/frontend/src/Editor/Components/StarRating/icons/half-star.js @@ -1,47 +1,44 @@ -import React from 'react' +import React from 'react'; -export default ({ fill = '#ffb400'}) => { +export default ({ fill = '#ffb400' }) => { return ( - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + l39.232,79.493c5.686,11.522,16.676,19.508,29.391,21.354l106.192,15.431L412.235,348.222z" + /> + + + + + + + + + + + + + + + - ) -} + ); +}; diff --git a/frontend/src/Editor/Components/StarRating/icons/star-outline.js b/frontend/src/Editor/Components/StarRating/icons/star-outline.js index 1d6843a0f7..39bba4eccd 100644 --- a/frontend/src/Editor/Components/StarRating/icons/star-outline.js +++ b/frontend/src/Editor/Components/StarRating/icons/star-outline.js @@ -1,44 +1,41 @@ -import React from 'react' +import React from 'react'; -export default ({ fill = '#ffb400'}) => { +export default ({ fill = '#ffb400' }) => { return ( - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + l52,105c3.1,5.2,8.3,9.4,14.6,10.4l116.2,16.6L342.663,288.078z" + /> + + + + + + + + + + + + + + + - ) -} + ); +}; diff --git a/frontend/src/Editor/Components/StarRating/icons/star.js b/frontend/src/Editor/Components/StarRating/icons/star.js index 3f9ec8b224..c076506ca6 100644 --- a/frontend/src/Editor/Components/StarRating/icons/star.js +++ b/frontend/src/Editor/Components/StarRating/icons/star.js @@ -1,44 +1,41 @@ -import React from 'react' +import React from 'react'; -export default ({ fill = '#ffb400'}) => { +export default ({ fill = '#ffb400' }) => { return ( - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + l13.091-12.761C55.838,22.336,55.936,21.939,55.818,21.578z" + /> + + + + + + + + + + + + + + + - ) -} \ No newline at end of file + ); +}; diff --git a/frontend/src/Editor/Components/StarRating/index.js b/frontend/src/Editor/Components/StarRating/index.js index d637270f98..2548b9db47 100644 --- a/frontend/src/Editor/Components/StarRating/index.js +++ b/frontend/src/Editor/Components/StarRating/index.js @@ -23,13 +23,16 @@ export const StarRating = function StarRating({ const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } const tooltips = component.definition.properties.tooltips.value ?? []; const _tooltips = resolveReferences(tooltips, currentState, []) ?? []; @@ -54,12 +57,14 @@ export const StarRating = function StarRating({ React.useEffect(() => { setRatingIndex(defaultSelected - 1); onComponentOptionChanged(component, 'value', defaultSelected); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultSelected]); React.useEffect(() => { setTimeout(() => { onComponentOptionChanged(component, 'value', defaultSelected); - }, 1000) + }, 1000); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); function handleClick(idx) { @@ -84,7 +89,15 @@ export const StarRating = function StarRating({ }; return ( -
{event.stopPropagation(); onComponentClick(id, component)}} style={{display:parsedWidgetVisibility ? '' : 'none'}}> +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + style={{ display: parsedWidgetVisibility ? '' : 'none' }} + > {/* TODO: Add label color defination property instead of hardcoded color*/} {label} diff --git a/frontend/src/Editor/Components/StarRating/star.js b/frontend/src/Editor/Components/StarRating/star.js index 77c92d7160..d07fd17b98 100644 --- a/frontend/src/Editor/Components/StarRating/star.js +++ b/frontend/src/Editor/Components/StarRating/star.js @@ -37,6 +37,7 @@ const Star = ({ React.useEffect(() => { setIcon(isHalfStar ? halfStar : star); setOutlineIcon(isHalfStar ? halfStar : starOutline); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [color]); const ref = React.useRef(null); diff --git a/frontend/src/Editor/Components/Table/CustomSelect.jsx b/frontend/src/Editor/Components/Table/CustomSelect.jsx index 5825b9b3b3..752ccfd8d4 100644 --- a/frontend/src/Editor/Components/Table/CustomSelect.jsx +++ b/frontend/src/Editor/Components/Table/CustomSelect.jsx @@ -1,26 +1,29 @@ import React from 'react'; import SelectSearch from 'react-select-search'; -export const CustomSelect = ({ options, value, multiple, disabled, onChange }) => { - - function renderValue(valueProps) { - if(valueProps) { - return valueProps.value.split(', ').map((value) => {value}); - } +export const CustomSelect = ({ options, value, multiple, onChange }) => { + function renderValue(valueProps) { + if (valueProps) { + return valueProps.value.split(', ').map((value, index) => ( + + {value} + + )); } + } - return ( -
- -
- ); -}; \ No newline at end of file + return ( +
+ +
+ ); +}; diff --git a/frontend/src/Editor/Components/Table/Datepicker.jsx b/frontend/src/Editor/Components/Table/Datepicker.jsx index 6f6dd80da8..c60defb4b2 100644 --- a/frontend/src/Editor/Components/Table/Datepicker.jsx +++ b/frontend/src/Editor/Components/Table/Datepicker.jsx @@ -2,80 +2,72 @@ import React from 'react'; import Datetime from 'react-datetime'; import 'react-datetime/css/react-datetime.css'; import '@/_styles/custom.scss'; -import moment from 'moment' +import moment from 'moment'; -export const Datepicker = function Datepicker({value, onChange, readOnly, isTimeChecked, dateFormat}) { - - const [date, setDate] = React.useState(value) +export const Datepicker = function Datepicker({ value, onChange, readOnly, isTimeChecked, dateFormat }) { + const [date, setDate] = React.useState(value); - const dateChange = (e) => { - if(isTimeChecked) { - setDate(e.format(`${dateFormat} LT`)) - } else { - setDate(e.format(dateFormat)) - } + const dateChange = (e) => { + if (isTimeChecked) { + setDate(e.format(`${dateFormat} LT`)); + } else { + setDate(e.format(dateFormat)); + } + }; + + React.useEffect(() => { + if (!isTimeChecked) { + setDate(moment(value, 'DD-MM-YYYY').format(dateFormat)); } - React.useEffect(() => { - const _date = isTimeChecked ? moment(value, `${dateFormat} LT`) : moment(value, dateFormat) + if (isTimeChecked) { + setDate(moment(value, 'DD-MM-YYYY LT').format(`${dateFormat} LT`)); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isTimeChecked, readOnly, dateFormat]); - if(!isTimeChecked) { - setDate(moment(value, 'DD-MM-YYYY').format(dateFormat)) - } + let inputProps = { + disabled: !readOnly, + }; - if(isTimeChecked) { - setDate(moment(value, 'DD-MM-YYYY LT' ).format(`${dateFormat} LT`)) - } - - },[isTimeChecked, readOnly, dateFormat]) + const [isDatepickerOpen, setIsDatepickerOpen] = React.useState(false); + const onDatepickerClose = () => { + onChange(date); + setIsDatepickerOpen((prev) => !prev); + }; - let inputProps = { - disabled: !readOnly, + React.useEffect(() => { + const myElement = document.querySelector('.cell-type-datepicker'); + + myElement.parentNode.style.position = 'absolute'; + myElement.style.position = 'relative'; + myElement.style.marginTop = '2px'; + myElement.style.left = '50%'; + myElement.style.width = '250px'; + myElement.style.transform = 'translate(-50%, -25%)'; + + return () => { + myElement.parentNode.style.position = ''; + myElement.style.position = ''; + myElement.style.marginTop = ''; + myElement.style.left = ''; + myElement.style.width = ''; + myElement.style.transform = ''; }; + }, [isDatepickerOpen]); - const [isDatepickerOpen, setIsDatepickerOpen] = React.useState(false) - - const onDatepickerClose = () => { - onChange(date) - setIsDatepickerOpen((prev) => !prev) - } - - React.useEffect(() => { - const myElement = document.querySelector('.cell-type-datepicker') - - myElement.parentNode.style.position = 'absolute' - myElement.style.position = 'relative' - myElement.style.marginTop = '2px' - myElement.style.left = '50%' - myElement.style.width = '250px' - myElement.style.transform = 'translate(-50%, -25%)' - - - return () => { - myElement.parentNode.style.position = '' - myElement.style.position = '' - myElement.style.marginTop = '' - myElement.style.left = '' - myElement.style.width = '' - myElement.style.transform = '' - } - - },[isDatepickerOpen]) - - return ( - <> - - - ) - + return ( + <> + + + ); }; - diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx index 60091289dc..bc701d116a 100644 --- a/frontend/src/Editor/Components/Table/Pagination.jsx +++ b/frontend/src/Editor/Components/Table/Pagination.jsx @@ -7,7 +7,7 @@ export const Pagination = function Pagination({ autoCanNextPage, autoPageCount, autoPageOptions, - lastActivePageIndex + lastActivePageIndex, }) { const [pageIndex, setPageIndex] = useState(lastActivePageIndex ?? 1); const [pageCount, setPageCount] = useState(autoPageCount); @@ -17,13 +17,12 @@ export const Pagination = function Pagination({ }, [autoPageCount]); useEffect(() => { - - if(serverSide && lastActivePageIndex > 0) { - setPageCount(lastActivePageIndex) - } else if(serverSide || lastActivePageIndex === 0) { - setPageIndex(1) + if (serverSide && lastActivePageIndex > 0) { + setPageCount(lastActivePageIndex); + } else if (serverSide || lastActivePageIndex === 0) { + setPageIndex(1); } - }, [serverSide, lastActivePageIndex ]) + }, [serverSide, lastActivePageIndex]); function gotoPage(page) { setPageIndex(page); @@ -42,48 +41,35 @@ export const Pagination = function Pagination({ } return ( -
- {!serverSide - && - } - {' '} - - - {serverSide && - - {pageIndex} - - } - {!serverSide && - - {pageIndex} of {autoPageOptions.length} - - } - - {' '} - - {!serverSide - && - } -
+
+ {!serverSide && ( + + )} + {' '} + + {serverSide && {pageIndex}} + {!serverSide && ( + + {pageIndex} of {autoPageOptions.length} + + )} + + {' '} + {!serverSide && ( + + )} +
); }; diff --git a/frontend/src/Editor/Components/Table/Radio.jsx b/frontend/src/Editor/Components/Table/Radio.jsx index 7786e7600d..747c54ff92 100644 --- a/frontend/src/Editor/Components/Table/Radio.jsx +++ b/frontend/src/Editor/Components/Table/Radio.jsx @@ -1,20 +1,30 @@ -import React, { useState } from 'react'; +import React from 'react'; export const Radio = ({ options, value, onChange, readOnly }) => { - value = value === undefined ? [] : value; options = Array.isArray(options) ? options : []; return (
- {options.map((option) => -
); -}; \ No newline at end of file +}; diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index 0ff84693ee..7380683c4b 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/frontend/src/Editor/Components/Table/Table.jsx @@ -1,3 +1,5 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable react-hooks/exhaustive-deps */ import React, { useMemo, useState, useEffect } from 'react'; import { useTable, @@ -7,7 +9,7 @@ import { useAsyncDebounce, usePagination, useBlockLayout, - useResizeColumns + useResizeColumns, } from 'react-table'; import { resolveReferences, resolveWidgetFieldValue, validateWidget } from '@/_helpers/utils'; import SelectSearch, { fuzzySearch } from 'react-select-search'; @@ -17,7 +19,7 @@ import { Pagination } from './Pagination'; import { CustomSelect } from './CustomSelect'; import { Tags } from './Tags'; import { Radio } from './Radio'; -import { Toggle } from './Toggle' +import { Toggle } from './Toggle'; import { Datepicker } from './Datepicker'; var _ = require('lodash'); @@ -34,7 +36,7 @@ export function Table({ changeCanDrag, onComponentOptionChanged, onComponentOptionsChanged, - darkMode + darkMode, }) { const color = component.definition.styles.textColor.value; const actions = component.definition.properties.actions || { value: [] }; @@ -57,7 +59,8 @@ export function Table({ const showBulkUpdateActions = resolveWidgetFieldValue(showBulkUpdateActionsProperty, currentState) ?? true; // default is true for backward compatibility const clientSidePaginationProperty = component.definition.properties.clientSidePagination?.value; - const clientSidePagination = resolveWidgetFieldValue(clientSidePaginationProperty, currentState) ?? !serverSidePagination; // default is true for backward compatibility + const clientSidePagination = + resolveWidgetFieldValue(clientSidePaginationProperty, currentState) ?? !serverSidePagination; // default is true for backward compatibility const tableTypeProperty = component.definition.styles.tableType; let tableType = tableTypeProperty ? tableTypeProperty.value : 'table-bordered'; @@ -66,12 +69,15 @@ export function Table({ const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } const [loadingState, setLoadingState] = useState(false); @@ -111,7 +117,7 @@ export function Table({ const newFilters = filters; newFilters[index].value = { ...newFilters[index].value, - operation: value + operation: value, }; setFilters(newFilters); setAllFilters(newFilters.filter((filter) => filter.id !== '')); @@ -121,7 +127,7 @@ export function Table({ const newFilters = filters; newFilters[index].value = { ...newFilters[index].value, - value: value + value: value, }; setFilters(newFilters); setAllFilters(newFilters.filter((filter) => filter.id !== '')); @@ -146,7 +152,7 @@ export function Table({ const defaultColumn = React.useMemo( () => ({ minWidth: 60, - width: 268 + width: 268, }), [] ); @@ -163,26 +169,24 @@ export function Table({ let newChangeset = { ...changeSet, [index]: { - ...obj - } + ...obj, + }, }; obj = _.set(rowData, key, value); let newDataUpdates = { - ...dataUpdates, - [index]: { ...obj } + ...dataUpdates, + [index]: { ...obj }, }; onComponentOptionsChanged(component, [ ['dataUpdates', newDataUpdates], - ['changeSet', newChangeset] + ['changeSet', newChangeset], ]); } - function getExportFileBlob({ - columns, data - }) { + function getExportFileBlob({ columns, data }) { const headerNames = columns.map((col) => col.exportValue); const csvString = Papa.unparse({ fields: headerNames, data }); return new Blob([csvString], { type: 'text/csv' }); @@ -190,14 +194,14 @@ export function Table({ function onPageIndexChanged(page) { onComponentOptionChanged(component, 'pageIndex', page).then(() => { - onEvent('onPageChanged', { component, data: {} }); + onEvent('onPageChanged', { component, data: {} }); }); } function handleChangesSaved() { Object.keys(changeSet).forEach((key) => { tableData[key] = { - ..._.merge(tableData[key], changeSet[key]) + ..._.merge(tableData[key], changeSet[key]), }; }); @@ -217,7 +221,9 @@ export function Table({ } if (filterValue.operation === 'matches') { - return rows.filter((row) => row.values[columnIds[0]].toString().toLowerCase().includes(filterValue.value.toLowerCase())); + return rows.filter((row) => + row.values[columnIds[0]].toString().toLowerCase().includes(filterValue.value.toLowerCase()) + ); } if (filterValue.operation === 'gt') { @@ -260,7 +266,13 @@ export function Table({ const columnType = column.columnType; const columnOptions = {}; - if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge' || columnType === 'badges' || columnType === 'radio') { + if ( + columnType === 'dropdown' || + columnType === 'multiselect' || + columnType === 'badge' || + columnType === 'badges' || + columnType === 'radio' + ) { const values = resolveReferences(column.values, currentState) || []; const labels = resolveReferences(column.labels, currentState, []) || []; @@ -271,8 +283,8 @@ export function Table({ } } if (columnType === 'datepicker') { - column.isTimeChecked = column.isTimeChecked ? column.isTimeChecked : false - column.dateFormat = column.dateFormat ? column.dateFormat : 'DD/MM/YYYY' + column.isTimeChecked = column.isTimeChecked ? column.isTimeChecked : false; + column.dateFormat = column.dateFormat ? column.dateFormat : 'DD/MM/YYYY'; } const width = columnSize || defaultColumn.width; @@ -290,34 +302,33 @@ export function Table({ const cellValue = rowChangeSet ? rowChangeSet[column.name] || cell.value : cell.value; if (columnType === 'string' || columnType === undefined || columnType === 'default') { - const textColor = resolveReferences(column.textColor, currentState, { cellValue }); const cellStyles = { - color: textColor === undefined ? darkMode === true ? '#fff' : 'black' : textColor - } + color: textColor === undefined ? (darkMode === true ? '#fff' : 'black') : textColor, + }; if (column.isEditable) { const validationData = validateWidget({ validationObject: { regex: { - value: column.regex + value: column.regex, }, minLength: { - value: column.minLength + value: column.minLength, }, maxLength: { - value: column.maxLength + value: column.maxLength, }, customRule: { - value: column.customRule - } + value: column.customRule, + }, }, widgetValue: cellValue, currentState, - customResolveObjects: { cellValue } - }) - + customResolveObjects: { cellValue }, + }); + const { isValid, validationError } = validationData; return ( @@ -327,48 +338,60 @@ export function Table({ style={cellStyles} onKeyDown={(e) => { if (e.key === 'Enter') { - if(e.target.defaultValue !== e.target.value) { - handleCellValueChange(cell.row.index, column.key || column.name, e.target.value, cell.row.original); + if (e.target.defaultValue !== e.target.value) { + handleCellValueChange( + cell.row.index, + column.key || column.name, + e.target.value, + cell.row.original + ); } } }} onBlur={(e) => { - if(e.target.defaultValue !== e.target.value) { - handleCellValueChange(cell.row.index, column.key || column.name, e.target.value, cell.row.original); + if (e.target.defaultValue !== e.target.value) { + handleCellValueChange( + cell.row.index, + column.key || column.name, + e.target.value, + cell.row.original + ); } }} className={`form-control-plaintext form-control-plaintext-sm ${!isValid ? 'is-invalid' : ''}`} defaultValue={cellValue} /> -
{validationError}
+
{validationError}
); } return {cellValue}; - } if (columnType === 'text') { - return ; - } if (columnType === 'dropdown') { - + > + ); + } + if (columnType === 'dropdown') { const validationData = validateWidget({ validationObject: { customRule: { - value: column.customRule - } + value: column.customRule, + }, }, widgetValue: cellValue, currentState, - customResolveObjects: { cellValue } - }) + customResolveObjects: { cellValue }, + }); const { isValid, validationError } = validationData; @@ -387,7 +410,8 @@ export function Table({
{validationError}
); - } if (columnType === 'multiselect') { + } + if (columnType === 'multiselect') { return (
); - } if (columnType === 'badge') { + } + if (columnType === 'badge') { return (
); - } if (columnType === 'badges') { + } + if (columnType === 'badges') { return (
); - } if (columnType === 'tags') { + } + if (columnType === 'tags') { return (
{ handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original); @@ -439,7 +467,8 @@ export function Table({ />
); - } if (columnType === 'radio') { + } + if (columnType === 'radio') { return (
{ handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original); }} - /> + />
); - } if (columnType === 'toggle') { + } + if (columnType === 'toggle') { return (
); - } if (columnType === 'datepicker') { + } + if (columnType === 'datepicker') { return (
actions.value.filter(action => action.position === 'left') - const rightActions = () => actions.value.filter(action => [undefined, 'right'].includes(action.position)) + const leftActions = () => actions.value.filter((action) => action.position === 'left'); + const rightActions = () => actions.value.filter((action) => [undefined, 'right'].includes(action.position)); - const leftActionsCellData = leftActions().length > 0 - ? [ - { - id: 'leftActions', - Header: 'Actions', - accessor: 'edit', - width: columnSizes.leftActions || defaultColumn.width, - Cell: (cell) => { - return leftActions().map((action) => ( + const leftActionsCellData = + leftActions().length > 0 + ? [ + { + id: 'leftActions', + Header: 'Actions', + accessor: 'edit', + width: columnSizes.leftActions || defaultColumn.width, + Cell: (cell) => { + return leftActions().map((action) => ( - )); - } - } - ] - : []; + )); + }, + }, + ] + : []; - const rightActionsCellData = rightActions().length > 0 - ? [ - { - id: 'rightActions', - Header: 'Actions', - accessor: 'edit', - width: columnSizes.rightActions || defaultColumn.width, - Cell: (cell) => { - return rightActions().map((action) => ( + const rightActionsCellData = + rightActions().length > 0 + ? [ + { + id: 'rightActions', + Header: 'Actions', + accessor: 'edit', + width: columnSizes.rightActions || defaultColumn.width, + Cell: (cell) => { + return rightActions().map((action) => ( - )); - } - } - ] - : []; + )); + }, + }, + ] + : []; - - const optionsData = columnData.map(column => column.columnOptions?.selectOptions); + const optionsData = columnData.map((column) => column.columnOptions?.selectOptions); const columns = useMemo( () => [...leftActionsCellData, ...columnData, ...rightActionsCellData], - [JSON.stringify(columnData), + [ + JSON.stringify(columnData), leftActionsCellData.length, rightActionsCellData.length, componentState.changeSet, JSON.stringify(optionsData), - JSON.stringify(component.definition.properties.columns) + JSON.stringify(component.definition.properties.columns), ] // Hack: need to fix ); @@ -567,7 +600,7 @@ export function Table({ const computedStyles = { color, - width: `${width}px` + width: `${width}px`, }; const { @@ -590,16 +623,17 @@ export function Table({ preGlobalFilteredRows, setGlobalFilter, state: { pageIndex, pageSize }, - exportData + exportData, } = useTable( { + autoResetPage: false, columns, data, defaultColumn, - initialState: { pageIndex: 0, pageSize: -1}, - pageCount: -1, - manualPagination: false, - getExportFileBlob + initialState: { pageIndex: 0, pageSize: -1 }, + pageCount: -1, + manualPagination: false, + getExportFileBlob, }, useFilters, useGlobalFilter, @@ -610,32 +644,28 @@ export function Table({ useExportData ); - - React.useEffect(() => { - if(serverSidePagination || !clientSidePagination) { - setPageSize(-1) - } - if(!serverSidePagination && clientSidePagination) { - setPageSize(10) + if (serverSidePagination || !clientSidePagination) { + setPageSize(-1); } - - },[clientSidePagination, serverSidePagination]) + if (!serverSidePagination && clientSidePagination) { + setPageSize(10); + } + }, [clientSidePagination, serverSidePagination]); useEffect(() => { - const pageData = page.map(row => row.original); - const currentData = rows.map(row => row.original);; + const pageData = page.map((row) => row.original); + const currentData = rows.map((row) => row.original); onComponentOptionsChanged(component, [ ['currentPageData', pageData], - ['currentData', currentData] + ['currentData', currentData], ]); }, [tableData.length, componentState.changeSet]); - useEffect(() => { if (!state.columnResizing.isResizingColumn) { changeCanDrag(true); - paramUpdated(id, 'columnSizes', { ...columnSizes, ...state.columnResizing.columnWidths}); + paramUpdated(id, 'columnSizes', { ...columnSizes, ...state.columnResizing.columnWidths }); } else { changeCanDrag(false); } @@ -649,16 +679,15 @@ export function Table({ }, 200); const handleSearchTextChange = (text) => { - setValue(text); onChange(text); onComponentOptionChanged(component, 'searchText', text).then(() => { - if(serverSideSearch === true ) { + if (serverSideSearch === true) { onEvent('onSearch', { component, data: {} }); } }); - } + }; return (
@@ -667,18 +696,16 @@ export function Table({ className="global-search-field" defaultValue={value || ''} onBlur={(e) => { - handleSearchTextChange(e.target.value) + handleSearchTextChange(e.target.value); }} onKeyDown={(e) => { - if(e.key === 'Enter') { - handleSearchTextChange(e.target.value) + if (e.key === 'Enter') { + handleSearchTextChange(e.target.value); } - } - - } + }} placeholder={`${count} records`} style={{ - border: '0' + border: '0', }} />
@@ -689,26 +716,32 @@ export function Table({
{event.stopPropagation(); onComponentClick(id, component)}} + style={{ width: `${width}px`, height: `${height}px`, display: parsedWidgetVisibility ? '' : 'none' }} + onClick={(event) => { + event.stopPropagation(); + onComponentClick(id, component); + }} > {/* Show top bar unless search box is disabled and server pagination is enabled */} - {displaySearchBox && + {displaySearchBox && (
- {displaySearchBox &&
- -
} + {displaySearchBox && ( +
+ +
+ )}
- } + )}
- {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column) => ( + {headerGroups.map((headerGroup, index) => ( + + {headerGroup.headers.map((column, index) => ( - {!loadingState && page.length === 0 && -
no data
- } + {!loadingState && page.length === 0 && ( +
+
no data
+
+ )} {!loadingState && ( {console.log('page', page)} - {page.map((row) => { + {page.map((row, index) => { prepareRow(row); return ( { @@ -742,20 +778,26 @@ export function Table({ onEvent('onRowClicked', { component, data: row.original }); }} > - {row.cells.map((cell) => { + {row.cells.map((cell, index) => { let cellProps = cell.getCellProps(); if (componentState.changeSet) { if (componentState.changeSet[cell.row.index]) { + const currentColumn = columnData.find((column) => column.id === cell.column.id); - const currentColumn = columnData.find(column => column.id === cell.column.id); - - if (_.get(componentState.changeSet[cell.row.index], currentColumn?.accessor, undefined) !== undefined) { + if ( + _.get(componentState.changeSet[cell.row.index], currentColumn?.accessor, undefined) !== + undefined + ) { console.log('componentState.changeSet', componentState.changeSet); cellProps.style.backgroundColor = '#ffffde'; } } } - return ; + return ( + + ); })} ); @@ -771,30 +813,35 @@ export function Table({ )} - {(clientSidePagination || serverSidePagination || Object.keys(componentState.changeSet || {}).length > 0 || showFilterButton || showDownloadButton) && + {(clientSidePagination || + serverSidePagination || + Object.keys(componentState.changeSet || {}).length > 0 || + showFilterButton || + showDownloadButton) && (
- {(clientSidePagination || serverSidePagination) && + {(clientSidePagination || serverSidePagination) && ( - } + )}
- {(showBulkUpdateActions && Object.keys(componentState.changeSet || {}).length > 0) && ( + {showBulkUpdateActions && Object.keys(componentState.changeSet || {}).length > 0 && (
- } + )} {isFiltersVisible && (
@@ -868,7 +915,7 @@ export function Table({ { name: 'greater than', value: 'gt' }, { name: 'less than', value: 'lt' }, { name: 'greater than or equals', value: 'gte' }, - { name: 'less than or equals', value: 'lte' } + { name: 'less than or equals', value: 'lte' }, ]} value={filter.value.operation} search={true} diff --git a/frontend/src/Editor/Components/Table/Tags.jsx b/frontend/src/Editor/Components/Table/Tags.jsx index ff99ca723b..3a4871acce 100644 --- a/frontend/src/Editor/Components/Table/Tags.jsx +++ b/frontend/src/Editor/Components/Table/Tags.jsx @@ -1,62 +1,67 @@ import React, { useState } from 'react'; -export const Tags = ({ value, onChange }) => { +export const Tags = ({ value, onChange, readOnly }) => { + value = value || []; - value = value || []; + const [showForm, setShowForm] = useState(false); - const [ showForm, setShowForm ] = useState(false); - - function addTag(text) { - if(text !== '') { - value.push(text); - onChange(value); - } else { - setShowForm(false); - } + function addTag(text) { + if (text !== '') { + value.push(text); + onChange(value); + } else { + setShowForm(false); } + } - function removeTag(text) { - const newValue = value.filter(tag => tag !== text); - onChange(newValue); - setShowForm(false); - } + function removeTag(text) { + const newValue = value.filter((tag) => tag !== text); + onChange(newValue); + setShowForm(false); + } - function handleFormKeyDown(e) { - if(e.key === 'Enter') { - addTag(e.target.value) - } - } - - function renderTag(text) { - return - {text} - removeTag(text)}> - x - - ; + function handleFormKeyDown(e) { + if (e.key === 'Enter') { + addTag(e.target.value); } + } + function renderTag(text) { return ( -
- {value.map((item) => { - return renderTag(item) - })} - - {!showForm && - setShowForm(true)}>{'+'} - } - - {showForm && - - addTag(e.target.value)} - onKeyDown={handleFormKeyDown} - /> - - } -
+ + {text} + {!readOnly && ( + removeTag(text)}> + x + + )} + ); -}; \ No newline at end of file + } + + return ( +
+ {value.map((item) => { + return renderTag(item); + })} + + {!showForm && !readOnly && ( + setShowForm(true)}> + {'+'} + + )} + + {showForm && ( + + addTag(e.target.value)} + onKeyDown={handleFormKeyDown} + /> + + )} +
+ ); +}; diff --git a/frontend/src/Editor/Components/Table/Toggle.jsx b/frontend/src/Editor/Components/Table/Toggle.jsx index 0c02eb5fef..68b743b4ef 100644 --- a/frontend/src/Editor/Components/Table/Toggle.jsx +++ b/frontend/src/Editor/Components/Table/Toggle.jsx @@ -1,24 +1,26 @@ import React, { useState } from 'react'; -export const Toggle = ({readOnly, value, onChange, activeColor, options }) => { - const [on, setOn] = useState(() => value) +export const Toggle = ({ readOnly, value, onChange, activeColor }) => { + const [on, setOn] = useState(() => value); const toggle = () => { - setOn((prev) => !prev) - onChange(!on) - } + setOn((prev) => !prev); + onChange(!on); + }; return (
- +
); -}; \ No newline at end of file +}; diff --git a/frontend/src/Editor/Components/Text.jsx b/frontend/src/Editor/Components/Text.jsx index 9167d671a0..33031a0ffd 100644 --- a/frontend/src/Editor/Components/Text.jsx +++ b/frontend/src/Editor/Components/Text.jsx @@ -1,17 +1,15 @@ import React, { useState, useEffect } from 'react'; import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils'; import DOMPurify from 'dompurify'; -import Skeleton from 'react-loading-skeleton'; -export const Text = function Text({ - id, width, height, component, onComponentClick, currentState -}) { +export const Text = function Text({ id, width, height, component, onComponentClick, currentState }) { const text = component.definition.properties.text.value; const color = component.definition.styles.textColor.value; const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; const [loadingState, setLoadingState] = useState(false); @@ -21,6 +19,7 @@ export const Text = function Text({ const newState = resolveReferences(loadingStateProperty.value, currentState, false); setLoadingState(newState); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentState]); let data = text; @@ -37,21 +36,31 @@ export const Text = function Text({ } let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } const computedStyles = { color, width, height, display: parsedWidgetVisibility ? 'flex' : 'none', - alignItems: 'center' + alignItems: 'center', }; return ( -
{event.stopPropagation(); onComponentClick(id, component)}}> +
{ + event.stopPropagation(); + onComponentClick(id, component); + }} + > {!loadingState &&
} {loadingState === true && (
diff --git a/frontend/src/Editor/Components/TextArea.jsx b/frontend/src/Editor/Components/TextArea.jsx index d418bb1f26..2d9acd1023 100644 --- a/frontend/src/Editor/Components/TextArea.jsx +++ b/frontend/src/Editor/Components/TextArea.jsx @@ -8,9 +8,8 @@ export const TextArea = function TextArea({ component, onComponentClick, currentState, - onComponentOptionChanged + onComponentOptionChanged, }) { - const value = component.definition.properties.value ? component.definition.properties.value.value : ''; const [text, setText] = useState(value); @@ -23,24 +22,31 @@ export const TextArea = function TextArea({ useEffect(() => { setText(newText); onComponentOptionChanged(component, 'value', newText); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [newText]); - + const placeholder = component.definition.properties.placeholder.value; const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const disabledState = component.definition.styles?.disabledState?.value ?? false; - const parsedDisabledState = typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; + const parsedDisabledState = + typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState; let parsedWidgetVisibility = widgetVisibility; - + try { parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []); - } catch (err) { console.log(err); } + } catch (err) { + console.log(err); + } return ( ); diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx index 9341645ee8..3632d78184 100644 --- a/frontend/src/Editor/Components/TextInput.jsx +++ b/frontend/src/Editor/Components/TextInput.jsx @@ -32,6 +32,7 @@ export const TextInput = function TextInput({ useEffect(() => { setText(newText); onComponentOptionChanged(component, 'value', newText); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [newText]); const validationData = validateWidget({ diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js index 73c6b443d1..2c7cc29af9 100644 --- a/frontend/src/Editor/Components/components.js +++ b/frontend/src/Editor/Components/components.js @@ -35,15 +35,19 @@ export const componentTypes = [ }, styles: { textColor: { type: 'color', displayName: 'Text Color' }, - tableType: { type: 'select', displayName: 'Table type', options: [ - { name: 'Bordered', value: '' }, - { name: 'Borderless', value: 'table-borderless' }, - { name: 'Classic', value: 'table-classic' }, - { name: 'Striped', value: 'table-striped' }, - { name: 'Striped & bordered', value: 'table-striped table-bordered' } - ] }, - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + tableType: { + type: 'select', + displayName: 'Table type', + options: [ + { name: 'Bordered', value: '' }, + { name: 'Borderless', value: 'table-borderless' }, + { name: 'Classic', value: 'table-classic' }, + { name: 'Striped', value: 'table-striped' }, + { name: 'Striped & bordered', value: 'table-striped table-bordered' }, + ], + }, + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { selectedRow: {}, @@ -82,8 +86,8 @@ export const componentTypes = [ events: [], styles: { textColor: { value: '' }, - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -110,8 +114,8 @@ export const componentTypes = [ styles: { backgroundColor: { type: 'color', displayName: 'Background color' }, textColor: { type: 'color', displayName: 'Text color' }, - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: {}, definition: { @@ -128,8 +132,8 @@ export const componentTypes = [ styles: { backgroundColor: { value: '#3c92dc' }, textColor: { value: '#fff' }, - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -164,8 +168,8 @@ export const componentTypes = [ }, events: {}, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { show: null, @@ -183,16 +187,16 @@ export const componentTypes = [ type: { value: `line` }, data: { value: `[ - { "x": 100, "y": "Jan"}, - { "x": 80, "y": "Feb"}, - { "x": 40, "y": "Mar"} + { "x": "Jan", "y": 100}, + { "x": "Feb", "y": 80}, + { "x": "Mar", "y": 40} ]`, }, }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -223,7 +227,7 @@ export const componentTypes = [ }, events: {}, styles: { - disabledState: {type: 'code', displayName: 'Disable'} + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { show: null, @@ -239,7 +243,7 @@ export const componentTypes = [ }, events: [], styles: { - disabledState: {value: '{{false}}'} + disabledState: { value: '{{false}}' }, }, }, }, @@ -258,28 +262,28 @@ export const componentTypes = [ }, properties: { value: { type: 'code', displayName: 'Default value' }, - placeholder: { type: 'code', displayName: 'Placeholder' } + placeholder: { type: 'code', displayName: 'Placeholder' }, }, validation: { regex: { type: 'code', displayName: 'Regex' }, minLength: { type: 'code', displayName: 'Min length' }, maxLength: { type: 'code', displayName: 'Max length' }, - customRule: { type: 'code', displayName: 'Custom validation' } + customRule: { type: 'code', displayName: 'Custom validation' }, }, events: {}, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { - value: '', + value: '', }, definition: { validation: { regex: { value: '' }, minLength: { value: null }, maxLength: { value: null }, - customRule: { value: null } + customRule: { value: null }, }, others: { showOnDesktop: { value: true }, @@ -287,12 +291,12 @@ export const componentTypes = [ }, properties: { value: { value: '' }, - placeholder: { value: 'Placeholder text' } + placeholder: { value: 'Placeholder text' }, }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -311,12 +315,12 @@ export const componentTypes = [ }, properties: { value: { type: 'code', displayName: 'Default value' }, - placeholder: { type: 'code', displayName: 'Placeholder' } + placeholder: { type: 'code', displayName: 'Placeholder' }, }, events: {}, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { value: 0, @@ -328,12 +332,12 @@ export const componentTypes = [ }, properties: { value: { value: '' }, - placeholder: { value: '0' } + placeholder: { value: '0' }, }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -347,24 +351,25 @@ export const componentTypes = [ height: 30, }, validation: { - customRule: { type: 'code', displayName: 'Custom validation' } + customRule: { type: 'code', displayName: 'Custom validation' }, }, others: { showOnDesktop: { type: 'toggle', displayName: 'Show on desktop? ' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile?' }, }, properties: { + defaultValue: { type: 'code', displayName: 'Default value' }, format: { type: 'code', displayName: 'Format' }, enableTime: { type: 'code', displayName: 'Enable time selection?' }, enableDate: { type: 'code', displayName: 'Enable date selection?' }, }, events: {}, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { - value: {}, + value: '', }, definition: { others: { @@ -372,17 +377,18 @@ export const componentTypes = [ showOnMobile: { value: false }, }, validation: { - customRule: { value: null } + customRule: { value: null }, }, properties: { + defaultValue: { value: '' }, format: { value: 'DD/MM/YYYY' }, enableTime: { value: '{{false}}' }, enableDate: { value: '{{true}}' }, }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -408,8 +414,8 @@ export const componentTypes = [ }, styles: { textColor: { type: 'color', displayName: 'Text Color' }, - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: {}, definition: { @@ -423,8 +429,8 @@ export const componentTypes = [ events: [], styles: { textColor: { value: '#000' }, - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -452,8 +458,8 @@ export const componentTypes = [ }, styles: { textColor: { type: 'color', displayName: 'Text Color' }, - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: {}, definition: { @@ -471,8 +477,8 @@ export const componentTypes = [ events: [], styles: { textColor: { value: '#000' }, - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -497,8 +503,8 @@ export const componentTypes = [ }, styles: { textColor: { type: 'color', displayName: 'Text Color' }, - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: {}, definition: { @@ -512,8 +518,8 @@ export const componentTypes = [ events: [], styles: { textColor: { value: '#000' }, - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -536,8 +542,8 @@ export const componentTypes = [ }, events: {}, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { value: {}, @@ -553,8 +559,8 @@ export const componentTypes = [ }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -576,8 +582,8 @@ export const componentTypes = [ }, events: {}, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { endDate: {}, @@ -593,8 +599,8 @@ export const componentTypes = [ }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -618,8 +624,8 @@ export const componentTypes = [ events: [], styles: { textColor: { type: 'color', displayName: 'Text Color' }, - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: {}, definition: { @@ -635,8 +641,8 @@ export const componentTypes = [ events: [], styles: { textColor: { value: '#000' }, - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -660,8 +666,8 @@ export const componentTypes = [ onClick: { displayName: 'On click' }, }, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: {}, definition: { @@ -675,8 +681,8 @@ export const componentTypes = [ }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -693,13 +699,12 @@ export const componentTypes = [ showOnDesktop: { type: 'toggle', displayName: 'Show on desktop? ' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile?' }, }, - properties: { - }, + properties: {}, events: {}, styles: { backgroundColor: { type: 'color' }, - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: {}, definition: { @@ -713,8 +718,8 @@ export const componentTypes = [ events: [], styles: { backgroundColor: { value: '#fff' }, - visibility: {value: '{{true}}'}, - disabledState: {value:'{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -732,7 +737,7 @@ export const componentTypes = [ showOnMobile: { type: 'toggle', displayName: 'Show on mobile?' }, }, validation: { - customRule: { type: 'code', displayName: 'Custom validation' } + customRule: { type: 'code', displayName: 'Custom validation' }, }, properties: { label: { type: 'code', displayName: 'Label' }, @@ -744,8 +749,8 @@ export const componentTypes = [ onSelect: { displayName: 'On select' }, }, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { value: null, @@ -756,7 +761,7 @@ export const componentTypes = [ showOnMobile: { value: false }, }, validation: { - customRule: { value: null } + customRule: { value: null }, }, properties: { label: { value: 'Select' }, @@ -767,8 +772,8 @@ export const componentTypes = [ }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -795,8 +800,8 @@ export const componentTypes = [ onSelect: { displayName: 'On select' }, }, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { values: {}, @@ -815,8 +820,8 @@ export const componentTypes = [ }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -838,8 +843,8 @@ export const componentTypes = [ }, events: {}, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { value: {}, @@ -854,8 +859,8 @@ export const componentTypes = [ }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -901,8 +906,8 @@ export const componentTypes = [ onMarkerClick: { displayName: 'On marker click' }, }, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { center: {}, @@ -923,8 +928,8 @@ export const componentTypes = [ addNewMarkers: { value: '{{false}}' }, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -946,8 +951,8 @@ export const componentTypes = [ onDetect: { displayName: 'On detect' }, }, styles: { - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { lastDetectedValue: '', @@ -960,8 +965,8 @@ export const componentTypes = [ properties: {}, events: [], styles: { - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, @@ -990,8 +995,8 @@ export const componentTypes = [ }, styles: { textColor: { type: 'color', displayName: 'Star Color' }, - visibility: {type: 'code', displayName: 'Visibility'}, - disabledState: {type: 'code', displayName: 'Disable'} + visibility: { type: 'code', displayName: 'Visibility' }, + disabledState: { type: 'code', displayName: 'Disable' }, }, exposedVariables: { value: 0, @@ -1012,8 +1017,8 @@ export const componentTypes = [ events: [], styles: { textColor: { value: '#ffb400' }, - visibility: {value: '{{true}}'}, - disabledState: {value: '{{false}}'} + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, }, diff --git a/frontend/src/Editor/ConfigHandle.jsx b/frontend/src/Editor/ConfigHandle.jsx index 36213c1000..3bfb2d4a92 100644 --- a/frontend/src/Editor/ConfigHandle.jsx +++ b/frontend/src/Editor/ConfigHandle.jsx @@ -1,39 +1,35 @@ import React from 'react'; -export const ConfigHandle = function ConfigHandle({ - id, - component, - configHandleClicked, - dragRef, - removeComponent -}) { - -return
- { e.preventDefault(); e.stopPropagation(); configHandleClicked(id, component) }} - className="badge badge bg-azure-lt" - role="button" - > - - {component.name} - - - removeComponent({id})} - style={{marginRight: '5px'}} +export const ConfigHandle = function ConfigHandle({ id, component, configHandleClicked, dragRef, removeComponent }) { + return ( +
+ { + e.preventDefault(); + e.stopPropagation(); + configHandleClicked(id, component); + }} + className="badge badge bg-azure-lt" + role="button" + > + + {component.name} + + removeComponent({ id })} + />
-} + ); +}; diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index c8a9293251..832a24ded0 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -7,10 +7,10 @@ import update from 'immutability-helper'; import { componentTypes } from './Components/components'; import { computeComponentName } from '@/_helpers/utils'; - - function uuidv4() { - return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)); + return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => + (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16) + ); } export const Container = ({ @@ -31,13 +31,12 @@ export const Container = ({ deviceWindowWidth, scaleValue, selectedComponent, - darkMode + darkMode, }) => { - const styles = { width: currentLayout === 'mobile' ? deviceWindowWidth : 1292, height: 2400, - position: 'absolute' + position: 'absolute', }; const components = appDefinition.components; @@ -55,8 +54,8 @@ export const Container = ({ setBoxes( update(boxes, { [id]: { - $merge: { layouts } - } + $merge: { layouts }, + }, }) ); console.log('new boxes - 1', boxes); @@ -67,17 +66,18 @@ export const Container = ({ useEffect(() => { console.log('new boxes - 2', boxes); appDefinitionChanged({ ...appDefinition, components: boxes }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [boxes]); const { draggingState } = useDragLayer((monitor) => { - if(monitor.isDragging()) { - if(!monitor.getItem().parent) { - return { draggingState: true } + if (monitor.isDragging()) { + if (!monitor.getItem().parent) { + return { draggingState: true }; } else { - return { draggingState: false } + return { draggingState: false }; } } else { - return { draggingState: false } + return { draggingState: false }; } }); @@ -89,8 +89,7 @@ export const Container = ({ () => ({ accept: ItemTypes.BOX, drop(item, monitor) { - - if(item.parent) { + if (item.parent) { return; } @@ -112,7 +111,7 @@ export const Container = ({ let deltaX = 0; let deltaY = 0; - if(delta) { + if (delta) { deltaX = delta.x; deltaY = delta.y; } @@ -135,13 +134,12 @@ export const Container = ({ ...boxes[id]['layouts'][item.currentLayout], top: top, left: left, - } - } - } + }, + }, + }, }; setBoxes(newBoxes); - } else { // This is a new component componentMeta = componentTypes.find((component) => component.component === item.component.component); @@ -153,8 +151,8 @@ export const Container = ({ const offsetFromLeftOfWindow = canvasBoundingRect.left; const currentOffset = monitor.getSourceClientOffset(); - left = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow); - top = Math.round(currentOffset.y + (currentOffset.y * (1 - zoomLevel)) - offsetFromTopOfWindow); + left = Math.round(currentOffset.x + currentOffset.x * (1 - zoomLevel) - offsetFromLeftOfWindow); + top = Math.round(currentOffset.y + currentOffset.y * (1 - zoomLevel) - offsetFromTopOfWindow); id = uuidv4(); @@ -162,7 +160,7 @@ export const Container = ({ [left, top] = doSnapToGrid(left, top); } - if(item.currentLayout === 'mobile') { + if (item.currentLayout === 'mobile') { componentData.definition.others.showOnDesktop.value = false; componentData.definition.others.showOnMobile.value = true; } @@ -177,14 +175,14 @@ export const Container = ({ left: left, width: componentMeta.defaultSize.width, height: componentMeta.defaultSize.height, - } - } - } + }, + }, + }, }); } return undefined; - } + }, }), [moveBox] ); @@ -199,10 +197,10 @@ export const Container = ({ top: 100, left: 0, width: 445, - height: 500 + height: 500, }; - let { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData; + let { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData; top = y; left = x; @@ -220,10 +218,13 @@ export const Container = ({ ...boxes[id]['layouts'], [currentLayout]: { ...boxes[id]['layouts'][currentLayout], - width, height, top, left - } - } - } + width, + height, + top, + left, + }, + }, + }, }; setBoxes(newBoxes); @@ -241,12 +242,12 @@ export const Container = ({ ...boxes[id].component.definition, properties: { ...boxes[id].component.definition.properties, - [param]: value - } - } - } - } - } + [param]: value, + }, + }, + }, + }, + }, }) ); } @@ -255,60 +256,63 @@ export const Container = ({ return (
{Object.keys(boxes).map((key) => { - const box = boxes[key]; - const canShowInCurrentLayout = box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value; + const canShowInCurrentLayout = + box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value; - if(!box.parent && canShowInCurrentLayout) { - return setIsResizing(status)} - inCanvas={true} - zoomLevel={zoomLevel} - configHandleClicked={configHandleClicked} - removeComponent={removeComponent} - currentLayout={currentLayout} - scaleValue={scaleValue} - deviceWindowWidth={deviceWindowWidth} - isSelectedComponent={selectedComponent? selectedComponent.id === key : false} - darkMode={darkMode} - containerProps={{ - mode, - snapToGrid, - onComponentClick, - onEvent, - appDefinition, - appDefinitionChanged, - currentState, - onComponentOptionChanged, - onComponentOptionsChanged, - appLoading, - zoomLevel, - configHandleClicked, - removeComponent, - currentLayout, - scaleValue, - deviceWindowWidth, - selectedComponent, - darkMode - }} - /> + if (!box.parent && canShowInCurrentLayout) { + return ( + setIsResizing(status)} + inCanvas={true} + zoomLevel={zoomLevel} + configHandleClicked={configHandleClicked} + removeComponent={removeComponent} + currentLayout={currentLayout} + scaleValue={scaleValue} + deviceWindowWidth={deviceWindowWidth} + isSelectedComponent={selectedComponent ? selectedComponent.id === key : false} + darkMode={darkMode} + containerProps={{ + mode, + snapToGrid, + onComponentClick, + onEvent, + appDefinition, + appDefinitionChanged, + currentState, + onComponentOptionChanged, + onComponentOptionsChanged, + appLoading, + zoomLevel, + configHandleClicked, + removeComponent, + currentLayout, + scaleValue, + deviceWindowWidth, + selectedComponent, + darkMode, + }} + /> + ); } - } - )} + })} {Object.keys(boxes).length === 0 && !appLoading && !isDragging && ( -
-
You haven't added any components yet. Drag components from the right sidebar and drop here.
+
+
+ You haven't added any components yet. Drag components from the right sidebar and drop here. +
)} {appLoading && ( diff --git a/frontend/src/Editor/CustomDragLayer.jsx b/frontend/src/Editor/CustomDragLayer.jsx index eea664295e..5bb94bb01e 100644 --- a/frontend/src/Editor/CustomDragLayer.jsx +++ b/frontend/src/Editor/CustomDragLayer.jsx @@ -10,13 +10,13 @@ const layerStyles = { left: 0, top: 0, width: '100%', - height: '100%' + height: '100%', }; function getItemStyles(delta, item, initialOffset, currentOffset, currentLayout) { if (!initialOffset || !currentOffset) { return { - display: 'none' + display: 'none', }; } let { x, y } = currentOffset; @@ -28,18 +28,19 @@ function getItemStyles(delta, item, initialOffset, currentOffset, currentLayout) const realCanvasDelta = realCanvasBoundingRect.x - canvasContainerBoundingRect.x; - if (id) { // Dragging within the canvas + if (id) { + // Dragging within the canvas x = Math.round(item.layouts[currentLayout].left + delta.x); y = Math.round(item.layouts[currentLayout].top + delta.y); - - } else { // New component being dragged from components sidebar + } else { + // New component being dragged from components sidebar const offsetFromTopOfWindow = realCanvasBoundingRect.top; const offsetFromLeftOfWindow = realCanvasBoundingRect.left; const zoomLevel = item.zoomLevel; - x = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow); - y = Math.round(currentOffset.y + (currentOffset.y * (1 - zoomLevel)) - offsetFromTopOfWindow); + x = Math.round(currentOffset.x + currentOffset.x * (1 - zoomLevel) - offsetFromLeftOfWindow); + y = Math.round(currentOffset.y + currentOffset.y * (1 - zoomLevel) - offsetFromTopOfWindow); } [x, y] = snapToGrid(x, y); @@ -49,24 +50,22 @@ function getItemStyles(delta, item, initialOffset, currentOffset, currentLayout) const transform = `translate(${x}px, ${y}px)`; return { transform, - WebkitTransform: transform + WebkitTransform: transform, }; } export const CustomDragLayer = ({ currentLayout }) => { - const { - itemType, isDragging, item, initialOffset, currentOffset, delta - } = useDragLayer((monitor) => ({ + const { itemType, isDragging, item, initialOffset, currentOffset, delta } = useDragLayer((monitor) => ({ item: monitor.getItem(), itemType: monitor.getItemType(), initialOffset: monitor.getInitialSourceClientOffset(), currentOffset: monitor.getSourceClientOffset(), isDragging: monitor.isDragging(), - delta: monitor.getDifferenceFromInitialOffset() + delta: monitor.getDifferenceFromInitialOffset(), })); function renderItem() { switch (itemType) { case ItemTypes.BOX: - return ; + return ; default: return null; } @@ -78,9 +77,7 @@ export const CustomDragLayer = ({ currentLayout }) => { return (
-
- {renderItem()} -
+
{renderItem()}
); }; diff --git a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx index 753f5a2108..3f8ec9bc22 100644 --- a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx +++ b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx @@ -3,10 +3,9 @@ import { datasourceService, authenticationService } from '@/_services'; import Modal from 'react-bootstrap/Modal'; import Button from 'react-bootstrap/Button'; import { toast } from 'react-toastify'; -import { dataBaseSources, apiSources, DataSourceTypes } from './DataSourceTypes'; import { defaultOptions } from './DefaultOptions'; import { TestConnection } from './TestConnection'; -import { SourceComponents } from './SourceComponents'; +import { DataBaseSources, ApiSources, DataSourceTypes, SourceComponents } from './SourceComponents'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import config from 'config'; @@ -204,7 +203,7 @@ class DataSourceManager extends React.Component {

DATABASES

- {dataBaseSources.map((dataSource) => ( + {DataBaseSources.map((dataSource) => (
this.selectDataSource(dataSource)}>
@@ -227,7 +226,7 @@ class DataSourceManager extends React.Component {

APIS

- {apiSources.map((dataSource) => ( + {ApiSources.map((dataSource) => (
this.selectDataSource(dataSource)}>
@@ -292,7 +291,11 @@ class DataSourceManager extends React.Component {
- + Read documentation diff --git a/frontend/src/Editor/DataSourceManager/DataSourceTypes.js b/frontend/src/Editor/DataSourceManager/DataSourceTypes.js deleted file mode 100644 index 68484a08a0..0000000000 --- a/frontend/src/Editor/DataSourceManager/DataSourceTypes.js +++ /dev/null @@ -1,226 +0,0 @@ -export const dataBaseSources = [ - { - name: 'PostgreSQL', - kind: 'postgresql', - options: { - host: { type: 'string' }, - port: { type: 'string' }, - database: { type: 'string' }, - username: { type: 'string' }, - password: { type: 'string', encrypted: true } - }, - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - } - }, - { - name: 'MySQL', - kind: 'mysql', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - host: { type: 'string' }, - port: { type: 'string' }, - database: { type: 'string' }, - username: { type: 'string' }, - password: { type: 'string', encrypted: true } - } - }, - { - name: 'SQL Server', - kind: 'mssql', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - host: { type: 'string' }, - port: { type: 'string' }, - database: { type: 'string' }, - username: { type: 'string' }, - password: { type: 'string', encrypted: true } - } - }, - { - name: 'MongoDB', - kind: 'mongodb', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - host: { type: 'string' }, - port: { type: 'string' }, - username: { type: 'string' }, - password: { type: 'string', encrypted: true }, - connection_type: { type: 'options'}, - connection_string: { type: 'string', encrypted: true } - } - }, - { - name: 'Firestore', - kind: 'firestore', - exposedVariables: { - isLoading: {}, - data: [], - rawData: [] - }, - options: { - gcp_key: { type: 'string', encrypted: true } - } - }, - { - name: 'DynamoDB', - kind: 'dynamodb', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - region: { type: 'string' }, - access_key: { type: 'string' }, - secret_key: { type: 'string', encrypted: true } - } - }, - { - name: 'Elasticsearch', - kind: 'elasticsearch', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - host: { type: 'string' }, - port: { type: 'string' }, - username: { type: 'string' }, - password: { type: 'string', encrypted: true } - } - }, - { - name: 'Redis', - kind: 'redis', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - host: { type: 'string' }, - port: { type: 'string' }, - username: { type: 'string' }, - password: { type: 'string', encrypted: true } - } - } -]; - -export const apiSources = [ - { - name: 'Rest API', - kind: 'restapi', - options: { - url: { type: 'string' }, - auth_type: { type: 'string' }, - grant_type: { type: 'string' }, - add_token_to: { type: 'string' }, - header_prefix: { type: 'string' }, - access_token_url: { type: 'string' }, - client_id: { type: 'string' }, - client_secret: { type: 'string', encrypted: true }, - scopes: { type: 'string' }, - auth_url: { type: 'string' }, - client_auth: { type: 'string' }, - headers: { type: 'array' }, - custom_auth_params: { type: 'array' } - }, - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - customTesting: true - }, - { - name: 'GraphQL', - kind: 'graphql', - options: { - url: { type: 'string' }, - headers: { type: 'array' }, - url_params: { type: 'array' }, - body: { type: 'array' }, - }, - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - customTesting: true - }, - { - name: 'Stripe', - kind: 'stripe', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - api_key: { type: 'string', encrypted: true } - }, - customTesting: true - }, - { - name: 'Airtable', - kind: 'airtable', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - api_key: { type: 'string', encrypted: true } - }, - customTesting: true - }, - { - name: 'Google Sheets', - kind: 'googlesheets', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - api_key: { type: 'string', encrypted: true } - }, - customTesting: true, - hideSave: true - }, - { - name: 'Slack', - kind: 'slack', - exposedVariables: { - isLoading: {}, - data: {}, - rawData: {} - }, - options: { - api_key: { type: 'string', encrypted: true } - }, - customTesting: true, - hideSave: true - } -]; - -export const DataSourceTypes = [ - ...dataBaseSources, - ...apiSources -]; diff --git a/frontend/src/Editor/DataSourceManager/DefaultOptions.js b/frontend/src/Editor/DataSourceManager/DefaultOptions.js index 1f078e859e..cd6c2f1bac 100644 --- a/frontend/src/Editor/DataSourceManager/DefaultOptions.js +++ b/frontend/src/Editor/DataSourceManager/DefaultOptions.js @@ -5,7 +5,7 @@ export const defaultOptions = { database: { value: '' }, username: { value: '' }, password: { value: '' }, - ssl_enabled: { value: true } + ssl_enabled: { value: true }, }, mysql: { host: { value: 'localhost' }, @@ -20,13 +20,13 @@ export const defaultOptions = { port: { value: 1433 }, database: { value: '' }, username: { value: '' }, - password: { value: '' } + password: { value: '' }, }, redis: { host: { value: 'localhost' }, port: { value: 6379 }, username: { value: '' }, - password: { value: '' } + password: { value: '' }, }, mongodb: { database: { value: '' }, @@ -35,7 +35,7 @@ export const defaultOptions = { username: { value: '' }, password: { value: '' }, connection_type: { value: 'manual' }, - connection_string: { value: ''} + connection_string: { value: '' }, }, elasticsearch: { @@ -43,16 +43,16 @@ export const defaultOptions = { host: { value: 'localhost' }, port: { value: 9200 }, username: { value: '' }, - password: { value: '' } + password: { value: '' }, }, stripe: { - api_key: { value: '' } + api_key: { value: '' }, }, airtable: { - api_key: { value: '' } + api_key: { value: '' }, }, firestore: { - gcp_key: { value: '' } + gcp_key: { value: '' }, }, restapi: { url: { value: '' }, @@ -67,22 +67,22 @@ export const defaultOptions = { auth_url: { value: '' }, client_auth: { value: 'header' }, headers: { value: [['', '']] }, - custom_auth_params: { value: [['', '']] } + custom_auth_params: { value: [['', '']] }, }, graphql: { url: { value: '' }, headers: { value: [['', '']] }, - url_params: { value: [['', '']] } + url_params: { value: [['', '']] }, }, googlesheets: { - access_type: { value: 'read' } + access_type: { value: 'read' }, }, slack: { - access_type: { value: 'read' } + access_type: { value: 'read' }, }, dynamodb: { - region: { value: ''}, - access_key: { value: ''}, - secret_key: { value: ''} - } + region: { value: '' }, + access_key: { value: '' }, + secret_key: { value: '' }, + }, }; diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Airtable.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Airtable.schema.json index ad8319814c..c7c42e515d 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Airtable.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Airtable.schema.json @@ -4,6 +4,19 @@ "title": "Airtable datasource", "description": "A schema defining airtable datasource", "type": "object", + "source": { + "name": "Airtable", + "kind": "airtable", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "api_key": { "type": "string", "encrypted": true } + }, + "customTesting": true + }, "properties": { "api_key": { "$label": "API key", diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Googlesheets.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Googlesheets.schema.json index e3d34f355e..12609fe29d 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Googlesheets.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Googlesheets.schema.json @@ -4,6 +4,20 @@ "title": "Google Sheets datasource", "description": "A schema defining google sheets datasource", "type": "object", + "source": { + "name": "Google Sheets", + "kind": "googlesheets", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "api_key": { "type": "string", "encrypted": true } + }, + "customTesting": true, + "hideSave": true + }, "properties": { "sheets": { "$label": "", diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Graphql.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Graphql.schema.json index 4d4c2f38f1..1b89f372be 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Graphql.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Graphql.schema.json @@ -4,6 +4,22 @@ "title": "Graphql datasource", "description": "A schema defining graphql datasource", "type": "object", + "source": { + "name": "GraphQL", + "kind": "graphql", + "options": { + "url": { "type": "string" }, + "headers": { "type": "array" }, + "url_params": { "type": "array" }, + "body": { "type": "array" } + }, + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "customTesting": true + }, "properties": { "url": { "$label": "URL", diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Restapi.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Restapi.schema.json index 41e3b071e1..7efd5a7bf7 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Restapi.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Restapi.schema.json @@ -4,6 +4,31 @@ "title": "Restapi datasource", "description": "A schema defining restapi datasource", "type": "object", + "source": { + "name": "Rest API", + "kind": "restapi", + "options": { + "url": { "type": "string" }, + "auth_type": { "type": "string" }, + "grant_type": { "type": "string" }, + "add_token_to": { "type": "string" }, + "header_prefix": { "type": "string" }, + "access_token_url": { "type": "string" }, + "client_id": { "type": "string" }, + "client_secret": { "type": "string", "encrypted": true }, + "scopes": { "type": "string" }, + "auth_url": { "type": "string" }, + "client_auth": { "type": "string" }, + "headers": { "type": "array" }, + "custom_auth_params": { "type": "array" } + }, + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "customTesting": true + }, "properties": { "url": { "$label": "URL", diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Slack.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Slack.schema.json index c07bbd9708..74cd3d77bb 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Slack.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Slack.schema.json @@ -4,6 +4,20 @@ "title": "Slack datasource", "description": "A schema defining slack datasource", "type": "object", + "source": { + "name": "Slack", + "kind": "slack", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "api_key": { "type": "string", "encrypted": true } + }, + "customTesting": true, + "hideSave": true + }, "properties": { "sheets": { "$label": "", diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Stripe.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Stripe.schema.json index 806bb25a22..7a10be364b 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Stripe.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Api/Stripe.schema.json @@ -4,6 +4,19 @@ "title": "Stripe datasource", "description": "A schema defining stripe datasource", "type": "object", + "source": { + "name": "Stripe", + "kind": "stripe", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "api_key": { "type": "string", "encrypted": true } + }, + "customTesting": true + }, "properties": { "api_key": { "$label": "API key", diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Dynamodb.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Dynamodb.schema.json index 744ea7a6e1..ae4ff83ba4 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Dynamodb.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Dynamodb.schema.json @@ -4,6 +4,20 @@ "title": "Dynamodb datasource", "description": "A schema defining dynamodb datasource", "type": "object", + "source": { + "name": "DynamoDB", + "kind": "dynamodb", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "region": { "type": "string" }, + "access_key": { "type": "string" }, + "secret_key": { "type": "string", "encrypted": true } + } + }, "properties": { "region": { "$label": "Region", diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Elasticsearch.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Elasticsearch.schema.json index a25b28de97..c4fc71f6ac 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Elasticsearch.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Elasticsearch.schema.json @@ -4,6 +4,21 @@ "title": "Elastic search datasource", "description": "A schema defining elastic search datasource", "type": "object", + "source": { + "name": "Elasticsearch", + "kind": "elasticsearch", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "host": { "type": "string" }, + "port": { "type": "string" }, + "username": { "type": "string" }, + "password": { "type": "string", "encrypted": true } + } + }, "properties": { "host": { "$label": "Host", @@ -21,13 +36,13 @@ "$label": "Username", "$key": "username", "type": "text", - "description": "Enter username field" + "description": "Enter username" }, "password": { "$label": "Password", "$key": "password", "type": "password", - "description": "Enter password field" + "description": "Enter password" } }, "required": ["scheme", "host", "port", "password"] diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Firestore.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Firestore.schema.json index 288d138da9..43ac997369 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Firestore.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Firestore.schema.json @@ -4,6 +4,18 @@ "title": "Firestore datasource", "description": "A schema defining firestore datasource", "type": "object", + "source": { + "name": "Firestore", + "kind": "firestore", + "exposedVariables": { + "isLoading": {}, + "data": [], + "rawData": [] + }, + "options": { + "gcp_key": { "type": "string", "encrypted": true } + } + }, "properties": { "gcp_key": { "$label": "Private key", diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mongodb.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mongodb.schema.json index 15a438d268..633a8fe856 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mongodb.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mongodb.schema.json @@ -4,6 +4,23 @@ "title": "Mongodb datasource", "description": "A schema defining mongodb datasource", "type": "object", + "source": { + "name": "MongoDB", + "kind": "mongodb", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "host": { "type": "string" }, + "port": { "type": "string" }, + "username": { "type": "string" }, + "password": { "type": "string", "encrypted": true }, + "connection_type": { "type": "options" }, + "connection_string": { "type": "string", "encrypted": true } + } + }, "properties": { "connection_type": { "$label": "", @@ -38,13 +55,13 @@ "$label": "Username", "$key": "username", "type": "text", - "description": "Enter username field" + "description": "Enter username" }, "password": { "$label": "Password", "$key": "password", "type": "password", - "description": "Enter password field" + "description": "Enter password" } }, "string": { diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mssql.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mssql.schema.json index c002398709..b088e74464 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mssql.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mssql.schema.json @@ -4,6 +4,22 @@ "title": "Mssql datasource", "description": "A schema defining mssql datasource", "type": "object", + "source": { + "name": "SQL Server", + "kind": "mssql", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "host": { "type": "string" }, + "port": { "type": "string" }, + "database": { "type": "string" }, + "username": { "type": "string" }, + "password": { "type": "string", "encrypted": true } + } + }, "properties": { "host": { "$label": "Host", @@ -27,19 +43,19 @@ "$label": "Username", "$key": "username", "type": "text", - "description": "Enter username field" + "description": "Enter username" }, "password": { "$label": "Password", "$key": "password", "type": "password", - "description": "Enter password field" + "description": "Enter password" }, "azure": { "$label": "Azure", "$key": "azure", "type": "toggle", - "description": "Toggle for azure" + "description": "Toggle for azure" } }, "required": ["host", "port", "username", "password"] diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mysql.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mysql.schema.json index 903684f312..cf1aab8306 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mysql.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Mysql.schema.json @@ -4,6 +4,22 @@ "title": "Mysql datasource", "description": "A schema defining mysql datasource", "type": "object", + "source": { + "name": "MySQL", + "kind": "mysql", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "host": { "type": "string" }, + "port": { "type": "string" }, + "database": { "type": "string" }, + "username": { "type": "string" }, + "password": { "type": "string", "encrypted": true } + } + }, "properties": { "host": { "$label": "Host", @@ -33,13 +49,13 @@ "$label": "Username", "$key": "username", "type": "text", - "description": "Enter username field" + "description": "Enter username" }, "password": { "$label": "Password", "$key": "password", "type": "password", - "description": "Enter password field" + "description": "Enter password" } }, "required": ["host", "port", "username", "password"] diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Postgresql.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Postgresql.schema.json index 0c1f527ed2..6f9171505a 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Postgresql.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Postgresql.schema.json @@ -4,6 +4,22 @@ "title": "Postgresql datasource", "description": "A schema defining postgresql datasource", "type": "object", + "source": { + "name": "PostgreSQL", + "kind": "postgresql", + "options": { + "host": { "type": "string" }, + "port": { "type": "string" }, + "database": { "type": "string" }, + "username": { "type": "string" }, + "password": { "type": "string", "encrypted": true } + }, + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + } + }, "properties": { "host": { "$label": "Host", @@ -33,13 +49,13 @@ "$label": "Username", "$key": "username", "type": "text", - "description": "Enter username field" + "description": "Enter username" }, "password": { "$label": "Password", "$key": "password", "type": "password", - "description": "Enter password field" + "description": "Enter password" } }, "required": ["host", "port", "username", "database", "password"] diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Redis.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Redis.schema.json index 1cf954619e..4e7e6ee886 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Redis.schema.json +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Redis.schema.json @@ -4,6 +4,21 @@ "title": "Redis datasource", "description": "A schema defining redis datasource", "type": "object", + "source": { + "name": "Redis", + "kind": "redis", + "exposedVariables": { + "isLoading": {}, + "data": {}, + "rawData": {} + }, + "options": { + "host": { "type": "string" }, + "port": { "type": "string" }, + "username": { "type": "string" }, + "password": { "type": "string", "encrypted": true } + } + }, "properties": { "host": { "$label": "Host", @@ -21,13 +36,13 @@ "$label": "Username", "$key": "username", "type": "text", - "description": "Enter username field" + "description": "Enter username" }, "password": { "$label": "Password", "$key": "password", "type": "password", - "description": "Enter password field" + "description": "Enter password" } }, "required": ["scheme", "host", "port", "password"] diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Mysql.jsx b/frontend/src/Editor/DataSourceManager/SourceComponents/Mysql.jsx index 31703aba72..1a49212933 100644 --- a/frontend/src/Editor/DataSourceManager/SourceComponents/Mysql.jsx +++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Mysql.jsx @@ -1,8 +1,6 @@ import React from 'react'; -export const Mysql = ({ - optionchanged, options -}) => { +export const Mysql = ({ optionchanged, options }) => { return (
@@ -25,9 +23,7 @@ export const Mysql = ({ />
- + ; -const Restapi = ({ ...rest }) => ; -const Graphql = ({ ...rest }) => ; +const Airtable = ({ ...rest }) => ( + +); +const Restapi = ({ ...rest }) => ( + +); +const Graphql = ({ ...rest }) => ( + +); const Stripe = ({ ...rest }) => ; -const Googlesheets = ({ ...rest }) => ; +const Googlesheets = ({ ...rest }) => ( + +); const Slack = ({ ...rest }) => ; -const Dynamodb = ({ ...rest }) => ; -const Elasticsearch = ({ ...rest }) => ; +const Dynamodb = ({ ...rest }) => ( + +); +const Elasticsearch = ({ ...rest }) => ( + +); const Redis = ({ ...rest }) => ; -const Firestore = ({ ...rest }) => ; -const Mongodb = ({ ...rest }) => ; -const Postgresql = ({ ...rest }) => ; +const Firestore = ({ ...rest }) => ( + +); +const Mongodb = ({ ...rest }) => ( + +); +const Postgresql = ({ ...rest }) => ( + +); const Mysql = ({ ...rest }) => ; const Mssql = ({ ...rest }) => ; +export const DataBaseSources = [ + DynamodbSchema.source, + ElasticsearchSchema.source, + RedisSchema.source, + FirestoreSchema.source, + MongodbSchema.source, + PostgresqlSchema.source, + MysqlSchema.source, + MssqlSchema.source, +]; +export const ApiSources = [ + AirtableSchema.source, + RestapiSchema.source, + GraphqlSchema.source, + StripeSchema.source, + GooglesheetSchema.source, + SlackSchema.source, +]; +export const DataSourceTypes = [...DataBaseSources, ...ApiSources]; + export const SourceComponents = { Elasticsearch, Redis, @@ -47,5 +85,5 @@ export const SourceComponents = { Airtable, Graphql, Mysql, - Mssql + Mssql, }; diff --git a/frontend/src/Editor/DataSourceManager/TestConnection.jsx b/frontend/src/Editor/DataSourceManager/TestConnection.jsx index b35f6e8156..7d75336a0d 100644 --- a/frontend/src/Editor/DataSourceManager/TestConnection.jsx +++ b/frontend/src/Editor/DataSourceManager/TestConnection.jsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react'; import Button from 'react-bootstrap/Button'; -import { toast } from 'react-toastify'; -import { ToastContainer } from 'react-toastify'; +import { toast, ToastContainer } from 'react-toastify'; import { datasourceService } from '@/_services'; export const TestConnection = ({ kind, options, onConnectionTestFailed }) => { @@ -29,7 +28,7 @@ export const TestConnection = ({ kind, options, onConnectionTestFailed }) => { datasourceService.test(kind, options).then( (data) => { setTestingStatus(false); - if(data.status === 'ok') { + if (data.status === 'ok') { setConnectionStatus('success'); } else { setConnectionStatus('failed'); diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx index 244d747f8e..dd1f4c5ac2 100644 --- a/frontend/src/Editor/DraggableBox.jsx +++ b/frontend/src/Editor/DraggableBox.jsx @@ -1,9 +1,9 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useState } from 'react'; import { useDrag } from 'react-dnd'; import { ItemTypes } from './ItemTypes'; import { getEmptyImage } from 'react-dnd-html5-backend'; import { Box } from './Box'; -import { Resizable } from 're-resizable'; import { ConfigHandle } from './ConfigHandle'; import { Rnd } from 'react-rnd'; @@ -45,14 +45,13 @@ function getStyles(left, top, isDragging, component, isSelectedComponent) { // const transform = `translate3d(${left}px, ${top}px, 0)`; return { position: 'absolute', - height: '100%', // transform, // WebkitTransform: transform, zIndex: isSelectedComponent ? 2 : 1, // IE fallback: hide the real node using CSS when dragging // because IE will ignore our custom "empty image" drag preview. opacity: isDragging ? 0 : 1, - height: isDragging ? 0 : '', + height: isDragging ? 0 : '100%', }; } @@ -62,8 +61,6 @@ export const DraggableBox = function DraggableBox({ title, left, top, - width, - height, parent, component, index, diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx index 64d3443b5d..e2cc4a37db 100644 --- a/frontend/src/Editor/Editor.jsx +++ b/frontend/src/Editor/Editor.jsx @@ -7,7 +7,7 @@ import { CustomDragLayer } from './CustomDragLayer'; import { LeftSidebar } from './LeftSidebar'; import { componentTypes } from './Components/components'; import { Inspector } from './Inspector/Inspector'; -import { DataSourceTypes } from './DataSourceManager/DataSourceTypes'; +import { DataSourceTypes } from './DataSourceManager/SourceComponents'; import { QueryManager } from './QueryManager'; import { toast } from 'react-toastify'; import { Link } from 'react-router-dom'; @@ -22,7 +22,7 @@ import { onQueryCancel, runQuery, setStateAsync, - computeComponentState + computeComponentState, } from '@/_helpers/appUtils'; import { Confirm } from './Viewer/Confirm'; import ReactTooltip from 'react-tooltip'; @@ -74,7 +74,7 @@ class Editor extends React.Component { currentUser: userVars, urlparams: JSON.parse(JSON.stringify(queryString.parse(props.location.search))), }, - errors: {} + errors: {}, }, apps: [], dataQueriesDefaultText: "You haven't created queries yet.", @@ -89,7 +89,7 @@ class Editor extends React.Component { this.fetchApps(0); appService.getApp(appId).then((data) => { - const dataDefinition = data.definition || {components: {}} + const dataDefinition = data.definition || { components: {} }; this.setState( { app: data, @@ -107,7 +107,7 @@ class Editor extends React.Component { computeComponentState(this, this.state.appDefinition.components); } - ) + ); }); this.fetchDataSources(); @@ -192,11 +192,11 @@ class Editor extends React.Component { }; setAppDefinitionFromVersion = (version) => { - this.appDefinitionChanged(version.definition || {components: {}}) + this.appDefinitionChanged(version.definition || { components: {} }); this.setState({ - editingVersion: version - }) - } + editingVersion: version, + }); + }; dataSourcesChanged = () => { this.fetchDataSources(); @@ -274,7 +274,7 @@ class Editor extends React.Component { ...this.state.appDefinition.components, [newDefinition.id]: { ...this.state.appDefinition.components[newDefinition.id], - component: newDefinition.component + component: newDefinition.component, }, }, }, @@ -328,11 +328,11 @@ class Editor extends React.Component { deleteDataQuery = () => { this.setState({ showDataQueryDeletionConfirmation: true }); - } + }; cancelDeleteDataQuery = () => { - this.setState({ showDataQueryDeletionConfirmation: false}); - } + this.setState({ showDataQueryDeletionConfirmation: false }); + }; executeDataQueryDeletion = () => { this.setState({ showDataQueryDeletionConfirmation: false, isDeletingDataQuery: true }); @@ -351,7 +351,7 @@ class Editor extends React.Component { setShowHiddenOptionsForDataQuery = (dataQueryId) => { this.setState({ showHiddenOptionsForDataQueryId: dataQueryId }); - } + }; renderDataQuery = (dataQuery) => { const sourceMeta = DataSourceTypes.find((source) => source.kind === dataQuery.kind); @@ -360,7 +360,7 @@ class Editor extends React.Component { if (this.state.selectedQuery) { isSeletedQuery = dataQuery.id === this.state.selectedQuery.id; } - const isQueryBeingDeleted = this.state.isDeletingDataQuery && isSeletedQuery + const isQueryBeingDeleted = this.state.isDeletingDataQuery && isSeletedQuery; const { currentState } = this.state; const isLoading = currentState.queries[dataQuery.name] ? currentState.queries[dataQuery.name].isLoading : false; @@ -376,6 +376,7 @@ class Editor extends React.Component { >
{dataQuery.name}
- { isQueryBeingDeleted ? ( + {isQueryBeingDeleted ? (
@@ -518,7 +519,7 @@ class Editor extends React.Component { showDataQueryDeletionConfirmation, isDeletingDataQuery, apps, - defaultComponentStateComputed + defaultComponentStateComputed, } = this.state; const appLink = slug ? `/applications/${slug}` : ''; @@ -651,7 +652,7 @@ class Editor extends React.Component { app={app} darkMode={this.props.darkMode} onVersionDeploy={this.onVersionDeploy} - editingVersionId={this.state.editingVersion ? this.state.editingVersion.id : null } + editingVersionId={this.state.editingVersion ? this.state.editingVersion.id : null} setAppDefinitionFromVersion={this.setAppDefinitionFromVersion} /> )} @@ -679,7 +680,7 @@ class Editor extends React.Component { style={{ transform: `scale(${zoomLevel})` }} >
- {defaultComponentStateComputed && + {defaultComponentStateComputed && ( - } + )}
@@ -728,19 +729,25 @@ class Editor extends React.Component {
QUERIES
- this.setState({ - selectedQuery: {}, - editingQuery: false, - addingQuery: true - })} + className="btn btn-sm btn-light btn-px-1 text-muted" + onClick={() => + this.setState({ + selectedQuery: {}, + editingQuery: false, + addingQuery: true, + }) + } > + diff --git a/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx b/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx index 29bf30d529..322a50c7e0 100644 --- a/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx +++ b/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx @@ -2,44 +2,39 @@ import React, { useState, useEffect } from 'react'; import SelectSearch, { fuzzySearch } from 'react-select-search'; import { CodeHinter } from '../../CodeBuilder/CodeHinter'; -export function GotoApp({ - getAllApps, - currentState, - event, - handlerChanged, - eventIndex - }) { +export function GotoApp({ getAllApps, currentState, event, handlerChanged, eventIndex }) { const queryParamChangeHandler = (index, key, value) => { - event.queryParams[index][key] = value - handlerChanged(eventIndex, 'queryParams', event.queryParams) - } + event.queryParams[index][key] = value; + handlerChanged(eventIndex, 'queryParams', event.queryParams); + }; const addQueryParam = () => { if (!event.queryParams) { - event.queryParams = [] - handlerChanged(eventIndex, 'queryParams', event.queryParams) + event.queryParams = []; + handlerChanged(eventIndex, 'queryParams', event.queryParams); } - event.queryParams.push(['', '']) - handlerChanged(eventIndex, 'queryParams', event.queryParams) - setNumberOfQueryparams(numberOfQueryParams + 1) - } + event.queryParams.push(['', '']); + handlerChanged(eventIndex, 'queryParams', event.queryParams); + setNumberOfQueryparams(numberOfQueryParams + 1); + }; - const deleteQueryParam = index => { - event.queryParams.splice(index, 1) - handlerChanged(eventIndex, 'queryParams', event.queryParams) - setNumberOfQueryparams(numberOfQueryParams - 1) - } + const deleteQueryParam = (index) => { + event.queryParams.splice(index, 1); + handlerChanged(eventIndex, 'queryParams', event.queryParams); + setNumberOfQueryparams(numberOfQueryParams - 1); + }; - const [numberOfQueryParams, setNumberOfQueryparams] = useState(0) + const [numberOfQueryParams, setNumberOfQueryparams] = useState(0); + // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(() => { if (event.queryParams) { - setNumberOfQueryparams(event.queryParams.length) + setNumberOfQueryparams(event.queryParams.length); } - }) + }); - return( + return (
- {Array(numberOfQueryParams).fill(0).map((_, index) => -
-
- queryParamChangeHandler(index, 0, value)} - mode='javascript' - className="form-control codehinter-query-editor-input" - height={30} - /> - queryParamChangeHandler(index, 1, value)} - mode='javascript' - className="form-control codehinter-query-editor-input" - height={30} - /> - deleteQueryParam(index)} - >x + {Array(numberOfQueryParams) + .fill(0) + .map((_, index) => ( +
+
+ queryParamChangeHandler(index, 0, value)} + mode="javascript" + className="form-control codehinter-query-editor-input" + height={30} + /> + queryParamChangeHandler(index, 1, value)} + mode="javascript" + className="form-control codehinter-query-editor-input" + height={30} + /> + deleteQueryParam(index)}> + x + +
-
- )} + ))} - +
- ) + ); } diff --git a/frontend/src/Editor/Inspector/Components/Chart.jsx b/frontend/src/Editor/Inspector/Components/Chart.jsx index a4b790bbdc..3da96091fc 100644 --- a/frontend/src/Editor/Inspector/Components/Chart.jsx +++ b/frontend/src/Editor/Inspector/Components/Chart.jsx @@ -1,6 +1,5 @@ import React from 'react'; import { renderElement } from '../Utils'; -import { Color } from '../Elements/Color'; import { CodeHinter } from '../../CodeBuilder/CodeHinter'; class Chart extends React.Component { @@ -8,7 +7,14 @@ class Chart extends React.Component { super(props); const { - dataQueries, component, paramUpdated, componentMeta, eventUpdated, eventOptionUpdated, components, currentState + dataQueries, + component, + paramUpdated, + componentMeta, + eventUpdated, + eventOptionUpdated, + components, + currentState, } = props; this.state = { @@ -19,7 +25,7 @@ class Chart extends React.Component { eventUpdated, eventOptionUpdated, components, - currentState + currentState, }; } @@ -32,7 +38,7 @@ class Chart extends React.Component { eventUpdated, eventOptionUpdated, components, - currentState + currentState, } = this.props; this.setState({ @@ -43,48 +49,67 @@ class Chart extends React.Component { eventUpdated, eventOptionUpdated, components, - currentState + currentState, }); } render() { - const { - dataQueries, - component, - paramUpdated, - componentMeta, - eventUpdated, - eventOptionUpdated, - components, - currentState - } = this.state; + const { dataQueries, component, paramUpdated, componentMeta, components, currentState } = this.state; const data = this.state.component.component.definition.properties.data; return (
- {renderElement(component, componentMeta, paramUpdated, dataQueries, 'title', 'properties', currentState, components)} - {renderElement(component, componentMeta, paramUpdated, dataQueries, 'type', 'properties', currentState, components)} + {renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + 'title', + 'properties', + currentState, + components + )} + {renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + 'type', + 'properties', + currentState, + components + )}
this.props.paramUpdated({ name: 'data' }, 'value', value, 'properties')} - /> + currentState={this.props.currentState} + initialValue={data.value} + theme={this.props.darkMode ? 'monokai' : 'duotone-light'} + mode="javascript" + lineNumbers={false} + className="chart-input pr-2" + onChange={(value) => this.props.paramUpdated({ name: 'data' }, 'value', value, 'properties')} + />
- {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components))} + {Object.keys(componentMeta.styles).map((style) => + renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components) + )} {renderElement(component, componentMeta, paramUpdated, dataQueries, 'loadingState', 'properties', currentState)} {renderElement(component, componentMeta, paramUpdated, dataQueries, 'markerColor', 'properties', currentState)} - {renderElement(component, componentMeta, paramUpdated, dataQueries, 'showGridLines', 'properties', currentState)} + {renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + 'showGridLines', + 'properties', + currentState + )}
); } diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index 6268d5f734..60a0e86f52 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -7,7 +7,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import Popover from 'react-bootstrap/Popover'; import { Color } from '../Elements/Color'; import SelectSearch, { fuzzySearch } from 'react-select-search'; -import { v4 as uuidv4 } from 'uuid'; +import { v4 as uuidv4 } from 'uuid'; import { EventManager } from '../EventManager'; import { CodeHinter } from '../../CodeBuilder/CodeHinter'; @@ -16,7 +16,14 @@ class Table extends React.Component { super(props); const { - dataQueries, component, paramUpdated, componentMeta, eventUpdated, eventOptionUpdated, components, currentState + dataQueries, + component, + paramUpdated, + componentMeta, + eventUpdated, + eventOptionUpdated, + components, + currentState, } = props; this.state = { @@ -29,7 +36,7 @@ class Table extends React.Component { components, currentState, actionPopOverRootClose: true, - showPopOver: false + showPopOver: false, }; } @@ -42,7 +49,7 @@ class Table extends React.Component { eventUpdated, eventOptionUpdated, components, - currentState + currentState, } = this.props; this.setState({ @@ -53,7 +60,7 @@ class Table extends React.Component { eventUpdated, eventOptionUpdated, components, - currentState + currentState, }); } @@ -65,9 +72,9 @@ class Table extends React.Component { actionButtonEventsChanged = (events, index) => { let actions = this.props.component.component.definition.properties.actions.value; - actions[index]['events'] = events + actions[index]['events'] = events; this.props.paramUpdated({ name: 'actions' }, 'value', actions, 'properties'); - } + }; actionButtonEventUpdated = (event, value, extraData) => { const actions = this.props.component.component.definition.properties.actions; @@ -75,7 +82,7 @@ class Table extends React.Component { let newValues = actions.value; newValues[index][event.name] = { - actionId: value + actionId: value, }; this.props.paramUpdated({ name: 'actions' }, 'value', newValues, 'properties'); @@ -90,7 +97,7 @@ class Table extends React.Component { newValues[index][event.name].options = { ...options, - [option]: value + [option]: value, }; this.props.paramUpdated({ name: 'actions' }, 'value', newValues, 'properties'); @@ -114,7 +121,7 @@ class Table extends React.Component { { name: 'Radio', value: 'radio' }, { name: 'Multiselect', value: 'multiselect' }, { name: 'Toggle switch', value: 'toggle' }, - { name: 'Date Picker', value: 'datepicker' } + { name: 'Date Picker', value: 'datepicker' }, ]} value={column.columnType} search={true} @@ -152,93 +159,95 @@ class Table extends React.Component { />
- {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && -
-
- - this.onColumnItemChange(index, 'textColor', value)} - /> -
- {column.isEditable && -
-
Validation
-
- - this.onColumnItemChange(index, 'regex', value)} - /> -
-
- - this.onColumnItemChange(index, 'minLength', value)} - /> -
-
- - this.onColumnItemChange(index, 'maxLength', value)} - /> -
-
- - this.onColumnItemChange(index, 'customRule', value)} - /> -
+ {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && ( +
+
+ + this.onColumnItemChange(index, 'textColor', value)} + />
- } - -
- - } + {column.isEditable && ( +
+
Validation
+
+ + this.onColumnItemChange(index, 'regex', value)} + /> +
+
+ + this.onColumnItemChange(index, 'minLength', value)} + /> +
+
+ + this.onColumnItemChange(index, 'maxLength', value)} + /> +
+
+ + this.onColumnItemChange(index, 'customRule', value)} + /> +
+
+ )} +
+ )} - {column.columnType === 'toggle' && + {column.columnType === 'toggle' && (
this.onColumnItemChange(index, 'activeColor', color)} />
- } + )} - {(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges' || column.columnType === 'radio') && ( + {(column.columnType === 'dropdown' || + column.columnType === 'multiselect' || + column.columnType === 'badge' || + column.columnType === 'badges' || + column.columnType === 'radio') && (
@@ -246,7 +255,7 @@ class Table extends React.Component { currentState={this.props.currentState} initialValue={column.values} theme={this.props.darkMode ? 'monokai' : 'default'} - mode= "javascript" + mode="javascript" lineNumbers={false} placeholder={'{{[1, 2, 3]}}'} onChange={(value) => this.onColumnItemChange(index, 'values', value)} @@ -258,7 +267,7 @@ class Table extends React.Component { currentState={this.props.currentState} initialValue={column.labels} theme={this.props.darkMode ? 'monokai' : 'default'} - mode= "javascript" + mode="javascript" lineNumbers={false} placeholder={'{{["one", "two", "three"]}}'} onChange={(value) => this.onColumnItemChange(index, 'labels', value)} @@ -267,27 +276,27 @@ class Table extends React.Component {
)} - {column.columnType === 'dropdown' && + {column.columnType === 'dropdown' && ( <> - {column.isEditable && -
-
Validation
-
- - this.onColumnItemChange(index, 'customRule', value)} - /> + {column.isEditable && ( +
+
Validation
+
+ + this.onColumnItemChange(index, 'customRule', value)} + /> +
-
- } + )} - } + )} {column.columnType === 'datepicker' && (
@@ -304,22 +313,20 @@ class Table extends React.Component { placeholder={'DD-MM-YYYY'} />
-
+
-
- )}
+ if (events.length === 0) { + return ( +
+
+ +
+
+ ); } - return
-
- {renderHandlers(events)} - -
- -
- -} + +
+ ); +}; diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx index ceee03cbab..d32d3f2e5a 100644 --- a/frontend/src/Editor/Inspector/Inspector.jsx +++ b/frontend/src/Editor/Inspector/Inspector.jsx @@ -11,24 +11,27 @@ export const Inspector = ({ selectedComponentId, componentDefinitionChanged, dataQueries, - removeComponent, allComponents, componentChanged, currentState, apps, darkMode, - switchSidebarTab + switchSidebarTab, }) => { - - const selectedComponent = { id: selectedComponentId, component: allComponents[selectedComponentId].component, layouts: allComponents[selectedComponentId].layouts} + const selectedComponent = { + id: selectedComponentId, + component: allComponents[selectedComponentId].component, + layouts: allComponents[selectedComponentId].layouts, + }; const [component, setComponent] = useState(selectedComponent); const [components, setComponents] = useState(allComponents); - + const componentMeta = componentTypes.find((comp) => component.component.component === comp.component); useEffect(() => { setComponent(selectedComponent); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedComponent.component.definition]); useEffect(() => { @@ -42,7 +45,9 @@ export const Inspector = ({ setComponent(newComponent); componentChanged(newComponent); } else { - toast.error('Invalid query name. Should be unique and only include letters, numbers and underscore.', { hideProgressBar: true }); + toast.error('Invalid query name. Should be unique and only include letters, numbers and underscore.', { + hideProgressBar: true, + }); } } @@ -56,7 +61,7 @@ export const Inspector = ({ allParams[param.name] = {}; } - if(attr) { + if (attr) { allParams[param.name][attr] = value; } else { allParams[param.name] = value; @@ -68,65 +73,61 @@ export const Inspector = ({ ...component, component: { ...component.component, - definition: newDefinition - } + definition: newDefinition, + }, }; setComponent(newComponent); componentDefinitionChanged(newComponent); } - function layoutPropertyChanged(param, attr, value, paramType) { + function layoutPropertyChanged(param, attr, value, paramType) { paramUpdated(param, attr, value, paramType); // User wants to show the widget on mobile devices - if(param.name === 'showOnMobile' && value === true) { - + if (param.name === 'showOnMobile' && value === true) { let newComponent = { - ...component + ...component, }; const { width, height } = newComponent.layouts['desktop']; newComponent['layouts'] = { ...newComponent.layouts, - mobile: { - top: 100, - left: 0, - width: Math.min(width, 445), - height: height - } - } + mobile: { + top: 100, + left: 0, + width: Math.min(width, 445), + height: height, + }, + }; setComponent(newComponent); componentDefinitionChanged(newComponent).then(() => { - // Child componets should also have a mobile layout const childComponents = Object.keys(allComponents).filter((key) => allComponents[key].parent === component.id); childComponents.forEach((componentId) => { let newChild = { id: componentId, - ...allComponents[componentId] + ...allComponents[componentId], }; const { width, height } = newChild.layouts['desktop']; newChild['layouts'] = { ...newChild.layouts, - mobile: { - top: 100, - left: 0, - width: Math.min(width, 445), - height: height - } - } + mobile: { + top: 100, + left: 0, + width: Math.min(width, 445), + height: height, + }, + }; componentDefinitionChanged(newChild); - }); }); - } } @@ -135,7 +136,7 @@ export const Inspector = ({ newDefinition.events[event.name] = { actionId }; let newComponent = { - ...component + ...component, }; setComponent(newComponent); @@ -147,7 +148,7 @@ export const Inspector = ({ newDefinition.events = newEvents; let newComponent = { - ...component + ...component, }; setComponent(newComponent); @@ -163,7 +164,7 @@ export const Inspector = ({ newDefinition.events[event.name] = { ...eventDefinition, options: { ...eventDefinition.options, [option]: value } }; let newComponent = { - ...component + ...component, }; setComponent(newComponent); @@ -174,30 +175,26 @@ export const Inspector = ({
-
- handleComponentNameChange(e.target.value)} - className="form-control-plaintext form-control-plaintext-sm mt-1" - value={component.component.name} - /> - - - -
+
+ handleComponentNameChange(e.target.value)} + className="form-control-plaintext form-control-plaintext-sm mt-1" + value={component.component.name} + /> + + + +
-
-
- {componentMeta.component === 'Table' && + {componentMeta.component === 'Table' && (
@@ -724,17 +757,20 @@ export function Table({ ))}
{cell.render('Cell')} + {cell.render('Cell')} +
- } + )} - {componentMeta.component === 'Chart' && + {componentMeta.component === 'Chart' && ( - } - - {!['Table', 'Chart'].includes(componentMeta.component) && -
- {Object.keys(componentMeta.properties).map((property) => renderElement(component, componentMeta, paramUpdated, dataQueries, property, 'properties', currentState, components, darkMode))} - - {Object.keys(componentMeta.styles).length > 0 &&
Style
} - {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components))} + )} - {Object.keys(componentMeta.events).length > 0 && + {!['Table', 'Chart'].includes(componentMeta.component) && ( +
+ {Object.keys(componentMeta.properties).map((property) => + renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + property, + 'properties', + currentState, + components, + darkMode + ) + )} + + {Object.keys(componentMeta.styles).length > 0 &&
Style
} + {Object.keys(componentMeta.styles).map((style) => + renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + style, + 'styles', + currentState, + components + ) + )} + + {Object.keys(componentMeta.events).length > 0 && (
{Object.keys(componentMeta.events).length > 0 &&
Events
} @@ -248,31 +268,61 @@ export const Inspector = ({ apps={apps} />
- } + )} - {Object.keys(componentMeta.validation || {}).length > 0 && + {Object.keys(componentMeta.validation || {}).length > 0 && (
Validation
- {Object.keys(componentMeta.validation).map((property) => renderElement(component, componentMeta, paramUpdated, dataQueries, property, 'validation', currentState, components, darkMode))} + {Object.keys(componentMeta.validation).map((property) => + renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + property, + 'validation', + currentState, + components, + darkMode + ) + )}
- } - - + )}
- } + )} {/* Show on desktop & show on mobile params */}
Layout
- {renderElement(component, componentMeta, layoutPropertyChanged, dataQueries, 'showOnDesktop', 'others', currentState, components)} - {renderElement(component, componentMeta, layoutPropertyChanged, dataQueries, 'showOnMobile', 'others', currentState, components)} + {renderElement( + component, + componentMeta, + layoutPropertyChanged, + dataQueries, + 'showOnDesktop', + 'others', + currentState, + components + )} + {renderElement( + component, + componentMeta, + layoutPropertyChanged, + dataQueries, + 'showOnMobile', + 'others', + currentState, + components + )}
diff --git a/frontend/src/Editor/Inspector/QuerySelector.jsx b/frontend/src/Editor/Inspector/QuerySelector.jsx index e70fecc46a..61853acc5f 100644 --- a/frontend/src/Editor/Inspector/QuerySelector.jsx +++ b/frontend/src/Editor/Inspector/QuerySelector.jsx @@ -1,19 +1,8 @@ import React, { useState } from 'react'; import SelectSearch, { fuzzySearch } from 'react-select-search'; -import Collapse from 'react-bootstrap/Collapse' - -export const QuerySelector = ({ - param, - definition, - eventUpdated, - eventOptionUpdated, - dataQueries, - extraData, - eventMeta, - currentState, - components -}) => { +import Collapse from 'react-bootstrap/Collapse'; +export const QuerySelector = ({ param, definition, eventOptionUpdated, dataQueries, extraData, eventMeta }) => { const [open, setOpen] = useState(false); function onChange(value) { @@ -34,9 +23,7 @@ export const QuerySelector = ({
{ - setText(100) - onZoomChanged(1) - setOpen(false) + setText(100); + onZoomChanged(1); + setOpen(false); }} > - + { - setText(90) - onZoomChanged(0.9) - setOpen(false) + setText(90); + onZoomChanged(0.9); + setOpen(false); }} > - + { - setText(80) - onZoomChanged(0.8) - setOpen(false) + setText(80); + onZoomChanged(0.8); + setOpen(false); }} > - + { - setText(70) - onZoomChanged(0.7) - setOpen(false) + setText(70); + onZoomChanged(0.7); + setOpen(false); }} > - + { - setText(60) - onZoomChanged(0.6) - setOpen(false) + setText(60); + onZoomChanged(0.6); + setOpen(false); }} > - +
- 100% - 100%
- 90% - 90%
- 80% - 80%
- 70% - 70%
- 60% - 60%
@@ -79,5 +74,5 @@ export const LeftSidebarZoom = ({ onZoomChanged }) => {
- ) -} + ); +}; diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx index a4831f5f87..2c7308835b 100644 --- a/frontend/src/Editor/ManageAppUsers.jsx +++ b/frontend/src/Editor/ManageAppUsers.jsx @@ -6,7 +6,6 @@ import { toast } from 'react-toastify'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import 'react-toastify/dist/ReactToastify.css'; import Skeleton from 'react-loading-skeleton'; -import SelectSearch, { fuzzySearch } from 'react-select-search'; import { debounce } from 'lodash'; class ManageAppUsers extends React.Component { @@ -21,7 +20,7 @@ class ManageAppUsers extends React.Component { isSlugVerificationInProgress: false, addingUser: false, organizationUsers: [], - newUser: {} + newUser: {}, }; } @@ -30,29 +29,33 @@ class ManageAppUsers extends React.Component { this.fetchAppUsers(); - organizationService.getUsers(null).then((data) => this.setState({ - organizationUsers: data.users - })); + organizationService.getUsers(null).then((data) => + this.setState({ + organizationUsers: data.users, + }) + ); this.setState({ appId }); } fetchAppUsers = () => { - appService.getAppUsers(this.props.app.id).then((data) => this.setState({ - users: data.users, - isLoading: false - })); + appService.getAppUsers(this.props.app.id).then((data) => + this.setState({ + users: data.users, + isLoading: false, + }) + ); }; hideModal = () => { this.setState({ - showModal: false + showModal: false, }); }; addUser = () => { this.setState({ - addingUser: true + addingUser: true, }); const { organizationUserId, role } = this.state.newUser; @@ -73,87 +76,79 @@ class ManageAppUsers extends React.Component { toggleAppVisibility = () => { const newState = !this.state.app.is_public; this.setState({ - ischangingVisibility: true + ischangingVisibility: true, }); - appService.setVisibility(this.state.app.id, newState).then(data => { + // eslint-disable-next-line no-unused-vars + appService.setVisibility(this.state.app.id, newState).then((data) => { this.setState({ ischangingVisibility: false, app: { ...this.state.app, - is_public: newState - } + is_public: newState, + }, }); if (newState) { toast.success('Application is now public.', { hideProgressBar: true, - position: 'top-center' + position: 'top-center', }); } else { toast.success('Application visibility set to private', { hideProgressBar: true, - position: 'top-center' + position: 'top-center', }); } }); - } + }; - handleSetSlug = (event) => { - const newSlug = event.target.value || this.props.app.id; - this.setState({ isSlugVerificationInProgress: true }); + handleSetSlug = (event) => { + const newSlug = event.target.value || this.props.app.id; + this.setState({ isSlugVerificationInProgress: true }); - appService - .setSlug(this.state.app.id, newSlug) - .then(() => { - this.setState({ - slugError: null, - isSlugVerificationInProgress: false - }); - this.props.handleSlugChange(newSlug); - }) - .catch(({ error }) => { - this.setState({ - slugError: error, - isSlugVerificationInProgress: false - }); + appService + .setSlug(this.state.app.id, newSlug) + .then(() => { + this.setState({ + slugError: null, + isSlugVerificationInProgress: false, }); - } + this.props.handleSlugChange(newSlug); + }) + .catch(({ error }) => { + this.setState({ + slugError: error, + isSlugVerificationInProgress: false, + }); + }); + }; - delayedSlugChange = debounce(e => { - this.handleSetSlug(e); - }, 500); + delayedSlugChange = debounce((e) => { + this.handleSetSlug(e); + }, 500); - render() { - const { - addingUser, - isLoading, - users, - organizationUsers, - newUser, - app, - slugError, - isSlugVerificationInProgress - } = this.state; - const appId = app.id; - const appLink = `${window.location.origin}/applications/`; - const shareableLink = appLink + (this.props.slug || appId); - const slugButtonClass = isSlugVerificationInProgress? '' : slugError !== null ? 'is-invalid' : 'is-valid'; + render() { + const { isLoading, app, slugError, isSlugVerificationInProgress } = this.state; + const appId = app.id; + const appLink = `${window.location.origin}/applications/`; + const shareableLink = appLink + (this.props.slug || appId); + const slugButtonClass = isSlugVerificationInProgress ? '' : slugError !== null ? 'is-invalid' : 'is-valid'; - return ( + return (
- @@ -192,24 +187,30 @@ class ManageAppUsers extends React.Component {
{appLink}
- { e.persist(); this.delayedSlugChange(e); }} - defaultValue={this.props.slug} /> - { isSlugVerificationInProgress && ( + { + e.persist(); + this.delayedSlugChange(e); + }} + defaultValue={this.props.slug} + /> + {isSlugVerificationInProgress && (
- )} + )}
toast.success('Link copied to clipboard', { - hideProgressBar: true, - position: 'bottom-center' - }) + onCopy={() => + toast.success('Link copied to clipboard', { + hideProgressBar: true, + position: 'bottom-center', + }) } > @@ -302,8 +303,8 @@ class ManageAppUsers extends React.Component {
- ); - } + ); + } } export { ManageAppUsers }; diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Airtable.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Airtable.jsx index 343714bc7d..752a67d3cf 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Airtable.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Airtable.jsx @@ -9,13 +9,13 @@ class Airtable extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -24,8 +24,8 @@ class Airtable extends React.Component { { options: { ...this.state.options, - operation - } + operation, + }, }, () => { this.props.optionsChanged(this.state.options); @@ -228,4 +228,4 @@ class Airtable extends React.Component { } } -export { Airtable }; \ No newline at end of file +export { Airtable }; diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Dynamodb.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Dynamodb.jsx index cf70f77f56..493d8a8a0d 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Dynamodb.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Dynamodb.jsx @@ -9,13 +9,13 @@ class Dynamodb extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -24,8 +24,8 @@ class Dynamodb extends React.Component { { options: { ...this.state.options, - operation - } + operation, + }, }, () => { this.props.optionsChanged(this.state.options); @@ -48,7 +48,7 @@ class Dynamodb extends React.Component { { value: 'get_item', name: 'Get Item' }, { value: 'query_table', name: 'Query Table' }, { value: 'scan_table', name: 'Scan Table' }, - { value: 'delete_item', name: 'Delete Item' } + { value: 'delete_item', name: 'Delete Item' }, ]} value={this.state.options.operation} search={true} @@ -60,13 +60,17 @@ class Dynamodb extends React.Component { />
- {(['query_table'].includes(this.state.options.operation)) && ( + {['query_table'].includes(this.state.options.operation) && (
)} - {(['scan_table'].includes(this.state.options.operation)) && ( + {['scan_table'].includes(this.state.options.operation) && (
)} - {(['get_item', 'delete_item'].includes(this.state.options.operation)) && ( + {['get_item', 'delete_item'].includes(this.state.options.operation) && (
@@ -110,7 +118,11 @@ class Dynamodb extends React.Component { { this.props.optionsChanged(this.state.options); @@ -46,9 +45,9 @@ class Elasticsearch extends React.Component { changeOption(this, 'index', value)} /> -
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Firestore.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Firestore.jsx index e85d680d52..71d5224419 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Firestore.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Firestore.jsx @@ -9,13 +9,13 @@ class Firestore extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -24,8 +24,8 @@ class Firestore extends React.Component { { options: { ...this.state.options, - [option]: JSON.parse(value) - } + [option]: JSON.parse(value), + }, }, () => { this.props.optionsChanged(this.state.options); @@ -38,8 +38,8 @@ class Firestore extends React.Component { { options: { ...this.state.options, - operation - } + operation, + }, }, () => { this.props.optionsChanged(this.state.options); @@ -60,11 +60,11 @@ class Firestore extends React.Component { options={[ { value: 'get_document', name: 'Get Document' }, { value: 'query_collection', name: 'Query collection' }, - { value: 'add_document', name: 'Add Document to Collection'}, + { value: 'add_document', name: 'Add Document to Collection' }, { value: 'update_document', name: 'Update Document' }, { value: 'set_document', name: 'Set Document' }, { value: 'bulk_update', name: 'Bulk update using document id' }, - { value: 'delete_document', name: 'Delete Document'}, + { value: 'delete_document', name: 'Delete Document' }, ]} value={this.state.options.operation} search={true} @@ -75,45 +75,52 @@ class Firestore extends React.Component { placeholder="Select.." />
- {(this.state.options.operation === 'get_document' || this.state.options.operation === 'delete_document') && ( -
-
- - changeOption(this, 'path', value)} - /> + {(this.state.options.operation === 'get_document' || + this.state.options.operation === 'delete_document') && ( +
+
+ + changeOption(this, 'path', value)} + /> +
-
- )} - {(this.state.options.operation === 'set_document' - || this.state.options.operation === 'update_document' || this.state.options.operation === 'add_document') && ( -
-
- - changeOption(this, 'path', value)} - /> + )} + {(this.state.options.operation === 'set_document' || + this.state.options.operation === 'update_document' || + this.state.options.operation === 'add_document') && ( +
+
+ + changeOption(this, 'path', value)} + /> +
+
+ + changeOption(this, 'body', value)} + /> +
-
- - changeOption(this, 'body', value)} - /> -
-
- )} + )} {this.state.options.operation === 'bulk_update' && (
@@ -146,7 +153,7 @@ class Firestore extends React.Component { theme: this.props.darkMode ? 'monokai' : 'default', mode: 'javascript', lineWrapping: true, - scrollbarStyle: null + scrollbarStyle: null, }} />
@@ -166,13 +173,31 @@ class Firestore extends React.Component {
- changeOption(this, 'order', value)} - /> +
+
+ changeOption(this, 'order_field', value)} + /> +
+
+ { + changeOption(this, 'order_type', value); + }} + filterOptions={fuzzySearch} + /> +
+
@@ -202,12 +227,13 @@ class Firestore extends React.Component { options={[ { value: '==', name: '==' }, { value: '<', name: '<' }, - { value: '>', name: '>'}, + { value: '>', name: '>' }, { value: '<=', name: '<=' }, { value: '>=', name: '>=' }, { value: 'array-contains', name: 'array-contains' }, - { value: 'in', name: 'in'}, - { value: 'array-contains-any', name: 'array-contains-any'}, + { value: 'in', name: 'in' }, + { value: 'array-contains-any', name: 'array-contains-any' }, + { value: '', name: 'None' }, ]} value={this.state.options.where_operation} search={true} diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Googlesheets.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Googlesheets.jsx index a95fbd3d34..cbdd6ebd31 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Googlesheets.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Googlesheets.jsx @@ -9,13 +9,13 @@ class Googlesheets extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -24,8 +24,8 @@ class Googlesheets extends React.Component { { options: { ...this.state.options, - [option]: JSON.parse(value) - } + [option]: JSON.parse(value), + }, }, () => { this.props.optionsChanged(this.state.options); @@ -38,8 +38,8 @@ class Googlesheets extends React.Component { { options: { ...this.state.options, - operation - } + operation, + }, }, () => { this.props.optionsChanged(this.state.options); @@ -86,6 +86,20 @@ class Googlesheets extends React.Component { className="form-control" />
+ {['read'].includes(this.state.options.operation) && ( +
+ + { + changeOption(this, 'spreadsheet_range', e.target.value); + }} + className="form-control" + /> +
+ )}
)} - {this.state.options.operation === 'append' && ( + {this.state.options.operation === 'append' && (
changeOption(this, 'rows', value)} + currentState={this.props.currentState} + initialValue={options.rows} + theme={this.props.darkMode ? 'monokai' : 'duotone-light'} + lineNumbers={true} + className="query-hinter" + onChange={(value) => changeOption(this, 'rows', value)} />
- )} + )} - {this.state.options.operation === 'delete_row' && ( -
-
-
- - { - changeOption(this, 'row_index', e.target.value); - }} - className="form-control" - /> + {this.state.options.operation === 'delete_row' && ( +
+
+
+ + { + changeOption(this, 'row_index', e.target.value); + }} + className="form-control" + /> +
-
- )} + )} - {this.state.options.operation === 'info' && ( + {this.state.options.operation === 'info' && (
- )} + )}
); } diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Graphql.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Graphql.jsx index 97b628023f..897d75350d 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Graphql.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Graphql.jsx @@ -11,7 +11,7 @@ class Graphql extends React.Component { componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Mongodb.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Mongodb.jsx index 66527267a5..0b6597cd7a 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Mongodb.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Mongodb.jsx @@ -10,13 +10,13 @@ class Mongodb extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -25,8 +25,8 @@ class Mongodb extends React.Component { { options: { ...this.state.options, - [option]: JSON.parse(value) - } + [option]: JSON.parse(value), + }, }, () => { this.props.optionsChanged(this.state.options); @@ -39,8 +39,8 @@ class Mongodb extends React.Component { { options: { ...this.state.options, - operation - } + operation, + }, }, () => { this.props.optionsChanged(this.state.options); diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Mssql.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Mssql.jsx index 08d9f85dd5..77e4a2b077 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Mssql.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Mssql.jsx @@ -11,7 +11,7 @@ class Mssql extends React.Component { componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx index 051d56ff61..09c3bae4be 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx @@ -10,13 +10,13 @@ class Mysql extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -31,7 +31,7 @@ class Mysql extends React.Component { changeOption(this, 'table', value)} - /> + currentState={this.props.currentState} + initialValue={this.state.options.table} + onChange={(value) => changeOption(this, 'table', value)} + />
@@ -110,7 +110,7 @@ class Mysql extends React.Component { theme: 'duotone-light', mode: 'javascript', lineWrapping: true, - scrollbarStyle: null + scrollbarStyle: null, }} />
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx index cc67f1d449..552b626e91 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx @@ -10,13 +10,13 @@ class Postgresql extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -31,7 +31,7 @@ class Postgresql extends React.Component { -
+
changeOption(this, 'table', value)} - /> + currentState={this.props.currentState} + initialValue={this.state.options.table} + onChange={(value) => changeOption(this, 'table', value)} + />
@@ -108,7 +108,7 @@ class Postgresql extends React.Component { theme: 'duotone-light', mode: 'javascript', lineWrapping: true, - scrollbarStyle: null + scrollbarStyle: null, }} />
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Redis.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Redis.jsx index 3b752af747..9c0acbe6b3 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Redis.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Redis.jsx @@ -8,13 +8,13 @@ class Redis extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -36,7 +36,7 @@ class Redis extends React.Component { theme: this.props.darkMode ? 'monokai' : 'duotone-light', mode: 'sql', lineWrapping: true, - scrollbarStyle: null + scrollbarStyle: null, }} />
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Restapi/index.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Restapi/index.jsx index c23223fd59..503cc6367e 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Restapi/index.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Restapi/index.jsx @@ -2,7 +2,7 @@ import 'codemirror/theme/duotone-light.css'; import React from 'react'; import SelectSearch, { fuzzySearch } from 'react-select-search'; -import { isEmpty, defaults } from 'lodash' +import { isEmpty, defaults } from 'lodash'; import Tabs from './Tabs'; import { changeOption } from '../utils'; @@ -11,29 +11,29 @@ import { CodeHinter } from '../../../CodeBuilder/CodeHinter'; class Restapi extends React.Component { constructor(props) { super(props); - const options = defaults({...props.options}, {headers: [], url_params: [], body: []}) + const options = defaults({ ...props.options }, { headers: [], url_params: [], body: [] }); this.state = { - options + options, }; } componentDidMount() { try { - if(isEmpty(this.state.options['headers'])) { + if (isEmpty(this.state.options['headers'])) { this.addNewKeyValuePair('headers'); } setTimeout(() => { - if(isEmpty(this.state.options['url_params'])) { + if (isEmpty(this.state.options['url_params'])) { this.addNewKeyValuePair('url_params'); } }, 1000); setTimeout(() => { - if(isEmpty(this.state.options['body'])) { + if (isEmpty(this.state.options['body'])) { this.addNewKeyValuePair('body'); } }, 1000); } catch (error) { - console.log(error) + console.log(error); } } diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Slack.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Slack.jsx index f4fb62719b..61d01c2af5 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Slack.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Slack.jsx @@ -9,13 +9,13 @@ class Slack extends React.Component { super(props); this.state = { - options: this.props.options + options: this.props.options, }; } componentDidMount() { this.setState({ - options: this.props.options + options: this.props.options, }); } @@ -24,8 +24,8 @@ class Slack extends React.Component { { options: { ...this.state.options, - [option]: JSON.parse(value) - } + [option]: JSON.parse(value), + }, }, () => { this.props.optionsChanged(this.state.options); @@ -38,8 +38,8 @@ class Slack extends React.Component { { options: { ...this.state.options, - operation - } + operation, + }, }, () => { this.props.optionsChanged(this.state.options); @@ -59,7 +59,7 @@ class Slack extends React.Component {
- {this.state.options.operation === 'send_message' - &&
+ {this.state.options.operation === 'send_message' && ( +
- changeOption(this, 'channel', value)} - /> + changeOption(this, 'channel', value)} + />
- changeOption(this, 'message', value)} - /> + changeOption(this, 'message', value)} + />
{/*
@@ -109,7 +109,7 @@ class Slack extends React.Component {
*/}
- } + )}
)}
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Stripe.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Stripe.jsx index 2f8a6b82a8..963a70c96c 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Stripe.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Stripe.jsx @@ -8,27 +8,27 @@ const operationColorMapping = { get: 'azure', post: 'green', delete: 'red', - put: 'yellow' + put: 'yellow', }; class Stripe extends React.Component { constructor(props) { super(props); this.state = { - loadingSpec: true + loadingSpec: true, }; } componentDidMount() { this.setState({ - loadingSpec: true, + loadingSpec: true, options: { params: { path: {}, query: {}, - request: {} - } - } + request: {}, + }, + }, }); this.fetchOpenApiSpec(); @@ -37,20 +37,22 @@ class Stripe extends React.Component { fetchOpenApiSpec = () => { this.setState({ loadingSpec: true }); - openapiService.fetchSpecFromUrl('https://raw.githubusercontent.com/stripe/openapi/master/openapi/spec3.json').then((response) => { - response.text().then(text => { - const data = JSON.parse(text); - this.setState({ specJson: data, loadingSpec: false}); + openapiService + .fetchSpecFromUrl('https://raw.githubusercontent.com/stripe/openapi/master/openapi/spec3.json') + .then((response) => { + response.text().then((text) => { + const data = JSON.parse(text); + this.setState({ specJson: data, loadingSpec: false }); + }); }); - }) - } + }; changeOption(option, value) { this.setState({ options: { ...this.state.options, - [option]: value - } + [option]: value, + }, }); } @@ -64,8 +66,8 @@ class Stripe extends React.Component { options: { ...this.state.options, path, - operation - } + operation, + }, }, () => { this.props.optionsChanged(this.state.options); @@ -81,13 +83,13 @@ class Stripe extends React.Component { ...options.params, [paramType]: { ...options.params[paramType], - [paramName]: value - } - } + [paramName]: value, + }, + }, }; this.setState({ - options: newOptions + options: newOptions, }); this.props.optionsChanged(newOptions); @@ -117,7 +119,7 @@ class Stripe extends React.Component { options.push({ value: `${operation},${path}`, name: path, - operation: operation + operation: operation, }); } } @@ -145,14 +147,14 @@ class Stripe extends React.Component { return (
- {loadingSpec && + {loadingSpec && (
Please wait whle we load the OpenAPI specification for Stripe.
- } + )} - {(options && !loadingSpec) && ( + {options && !loadingSpec && (
@@ -185,7 +187,12 @@ class Stripe extends React.Component {
PATH
{pathParams.map((param) => (
- + { _ref.props.optionsChanged(_ref.state.options); } ); -}; \ No newline at end of file +} diff --git a/frontend/src/Editor/QueryManager/QueryManager.jsx b/frontend/src/Editor/QueryManager/QueryManager.jsx index 1598dc61ac..abc10337b2 100644 --- a/frontend/src/Editor/QueryManager/QueryManager.jsx +++ b/frontend/src/Editor/QueryManager/QueryManager.jsx @@ -1,7 +1,6 @@ import React from 'react'; import { dataqueryService } from '@/_services'; import { toast } from 'react-toastify'; -import { isEmpty } from 'lodash'; import 'react-toastify/dist/ReactToastify.css'; import SelectSearch, { fuzzySearch } from 'react-select-search'; import ReactTooltip from 'react-tooltip'; @@ -60,7 +59,6 @@ class QueryManager extends React.Component { } else { this.setState({ options: {}, - selectedDataSource: null, selectedQuery: null, selectedDataSource: paneHeightChanged ? this.state.selectedDataSource : props.selectedDataSource, }); @@ -304,7 +302,7 @@ class QueryManager extends React.Component { this.previewPanelRef.current.scrollIntoView(); }) .catch(({ error, data }) => { - console.log(error); + console.log(error, data); }); }} className={`btn btn-secondary m-1 float-right1 ${previewLoading ? ' btn-loading' : ''}`} diff --git a/frontend/src/Editor/QueryManager/Transformation.jsx b/frontend/src/Editor/QueryManager/Transformation.jsx index bff7c4e461..8194b6851c 100644 --- a/frontend/src/Editor/QueryManager/Transformation.jsx +++ b/frontend/src/Editor/QueryManager/Transformation.jsx @@ -1,32 +1,27 @@ -import React, { useState, useEffect, useMemo } from 'react'; -import CodeMirror from '@uiw/react-codemirror'; +import React, { useState } from 'react'; import 'codemirror/theme/base16-light.css'; -import { handleChange, onBeforeChange, getSuggestionKeys } from '../CodeBuilder/utils'; +// import { getSuggestionKeys } from '../CodeBuilder/utils'; import 'codemirror/mode/javascript/javascript'; import 'codemirror/addon/hint/show-hint'; import 'codemirror/addon/search/match-highlighter'; import 'codemirror/addon/hint/show-hint.css'; import { CodeHinter } from '../CodeBuilder/CodeHinter'; - export const Transformation = ({ changeOption, options, currentState, darkMode }) => { - const defaultValue = options.transformation - || `// write your code here + const defaultValue = + options.transformation || + `// write your code here // return value will be set as data and the original data will be available as rawData return data.filter(row => row.amount > 1000);`; const [value, setValue] = useState(defaultValue); - useEffect(() => { - setValue(defaultValue); - }, [defaultValue]); - + // let suggestions = useMemo(() => getSuggestionKeys(currentState), [currentState.components, currentState.queries]); function codeChanged(value) { + setValue(() => value); changeOption('transformation', value); } - let suggestions = useMemo(() => getSuggestionKeys(currentState), [currentState.components, currentState.queries]); - return (