From e93c1b67c1816a05725af6d83e73c612742cbeda Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Thu, 16 Feb 2023 18:09:28 +0200 Subject: [PATCH 1/7] bump react version --- package.json | 8 ++++---- src/index.tsx | 10 +++++---- tsconfig.json | 56 +++++++++++++++++++++++++-------------------------- yarn.lock | 55 ++++++++++---------------------------------------- 4 files changed, 49 insertions(+), 80 deletions(-) diff --git a/package.json b/package.json index c1c9c8718..14bbed223 100644 --- a/package.json +++ b/package.json @@ -31,9 +31,9 @@ "patch-package": "^6.4.7", "pigeon-maps": "^0.19.7", "postinstall-postinstall": "^2.1.0", - "react": "^17.0.2", + "react": "^18.2.0", "react-country-flag": "^3.0.2", - "react-dom": "^17.0.2", + "react-dom": "^18.2.0", "react-helmet-async": "^1.3.0", "react-i18next": "^11.11.4", "react-infinite-scroll-component": "^6.1.0", @@ -91,8 +91,8 @@ "@types/country-list": "^2.1.0", "@types/google-map-react": "^2.1.3", "@types/leaflet": "^1.7.9", - "@types/react": "^17.0.43", - "@types/react-dom": "^17.0.14", + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", "@types/react-helmet": "^6.1.5", "@types/react-responsive": "^8.0.2", "@types/react-router-dom": "^5.1.7", diff --git a/src/index.tsx b/src/index.tsx index bda40653e..87bf5f85f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,20 +5,22 @@ import * as serviceWorkerRegistration from './serviceWorkerRegistration'; import 'config/config'; import { Provider } from 'react-redux'; import { store } from '@app/store/store'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import React from 'react'; interface EventTarget { state?: 'activated'; } -ReactDOM.render( +const container = document.getElementById('root') as HTMLElement; +const root = createRoot(container); + +root.render( , - document.getElementById('root'), ); serviceWorkerRegistration.register({ @@ -37,4 +39,4 @@ serviceWorkerRegistration.register({ // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +reportWebVitals(console.log); diff --git a/tsconfig.json b/tsconfig.json index 27e22f044..0b665df09 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,28 +1,28 @@ -{ - "extends": "./tsconfig.paths.json", - "compilerOptions": { - "baseUrl": "./src/", - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] -} +{ + "extends": "./tsconfig.paths.json", + "compilerOptions": { + "baseUrl": "./src/", + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} diff --git a/yarn.lock b/yarn.lock index df17e2355..8ea8d69fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2776,12 +2776,12 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:^17.0.14": - version: 17.0.18 - resolution: "@types/react-dom@npm:17.0.18" +"@types/react-dom@npm:^18.0.11": + version: 18.0.11 + resolution: "@types/react-dom@npm:18.0.11" dependencies: - "@types/react": ^17 - checksum: b74525b1a13a0e27fe20859ff7a7e8f7e4581fb9d45ed1b6447ad1534d86f813818353c39d0df2e28f9d2b9be2e3af1908c244b2214a979393d19f217665e614 + "@types/react": "*" + checksum: 579691e4d5ec09688087568037c35edf8cfb1ab3e07f6c60029280733ee7b5c06d66df6fcc90786702c93ac8cb13bc7ff16c79ddfc75d082938fbaa36e1cdbf4 languageName: node linkType: hard @@ -11058,8 +11058,8 @@ __metadata: "@types/country-list": ^2.1.0 "@types/google-map-react": ^2.1.3 "@types/leaflet": ^1.7.9 - "@types/react": ^17.0.43 - "@types/react-dom": ^17.0.14 + "@types/react": ^18.0.28 + "@types/react-dom": ^18.0.11 "@types/react-helmet": ^6.1.5 "@types/react-responsive": ^8.0.2 "@types/react-router-dom": ^5.1.7 @@ -11097,9 +11097,9 @@ __metadata: pigeon-maps: ^0.19.7 postinstall-postinstall: ^2.1.0 prettier: ^2.3.1 - react: ^17.0.2 + react: ^18.2.0 react-country-flag: ^3.0.2 - react-dom: ^17.0.2 + react-dom: ^18.2.0 react-helmet-async: ^1.3.0 react-i18next: ^11.11.4 react-infinite-scroll-component: ^6.1.0 @@ -14993,7 +14993,7 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:>= 16.3": +"react-dom@npm:>= 16.3, react-dom@npm:^18.2.0": version: 18.2.0 resolution: "react-dom@npm:18.2.0" dependencies: @@ -15005,19 +15005,6 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^17.0.2": - version: 17.0.2 - resolution: "react-dom@npm:17.0.2" - dependencies: - loose-envify: ^1.1.0 - object-assign: ^4.1.1 - scheduler: ^0.20.2 - peerDependencies: - react: 17.0.2 - checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c - languageName: node - linkType: hard - "react-error-overlay@npm:6.0.9": version: 6.0.9 resolution: "react-error-overlay@npm:6.0.9" @@ -15399,7 +15386,7 @@ __metadata: languageName: node linkType: hard -"react@npm:>= 16.3": +"react@npm:>= 16.3, react@npm:^18.2.0": version: 18.2.0 resolution: "react@npm:18.2.0" dependencies: @@ -15408,16 +15395,6 @@ __metadata: languageName: node linkType: hard -"react@npm:^17.0.2": - version: 17.0.2 - resolution: "react@npm:17.0.2" - dependencies: - loose-envify: ^1.1.0 - object-assign: ^4.1.1 - checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b - languageName: node - linkType: hard - "read-pkg-up@npm:^7.0.1": version: 7.0.1 resolution: "read-pkg-up@npm:7.0.1" @@ -16210,16 +16187,6 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.20.2": - version: 0.20.2 - resolution: "scheduler@npm:0.20.2" - dependencies: - loose-envify: ^1.1.0 - object-assign: ^4.1.1 - checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc - languageName: node - linkType: hard - "scheduler@npm:^0.23.0": version: 0.23.0 resolution: "scheduler@npm:0.23.0" From 5be6b326c1fb5d1c59b2568eac8401c1d5790632 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 17 Feb 2023 12:17:18 +0200 Subject: [PATCH 2/7] create react app changes EOL from LF to CRLF --- tsconfig.json | 56 +++++++++++++++++++++++++-------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 0b665df09..27e22f044 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,28 +1,28 @@ -{ - "extends": "./tsconfig.paths.json", - "compilerOptions": { - "baseUrl": "./src/", - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] -} +{ + "extends": "./tsconfig.paths.json", + "compilerOptions": { + "baseUrl": "./src/", + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} From 7993b8dc8e3e477ba53707e1fd0c8ddafe942fcd Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 20 Feb 2023 11:19:23 +0200 Subject: [PATCH 3/7] bump other react dependent libs --- package.json | 10 ++-- .../NotificationsOverlay.tsx | 4 +- .../common/NFTCardHeader/NFTCardHeader.tsx | 4 +- src/hocs/ErrorBoundary.tsx | 43 ++++++++++++++++ .../maps/GoogleMapsPage/GoogleMapsPage.tsx | 6 ++- .../uiComponentsPages/forms/RatesPage.tsx | 4 +- src/styles/themes/constants.ts | 10 ++-- yarn.lock | 50 +++++++++---------- 8 files changed, 89 insertions(+), 42 deletions(-) create mode 100644 src/hocs/ErrorBoundary.tsx diff --git a/package.json b/package.json index 14bbed223..6116affc1 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "echarts": "^5.1.2", "echarts-for-react": "^3.0.1", "elt-react-credit-cards": "^0.0.1", - "google-map-react": "^2.1.10", + "google-map-react": "^2.2.0", "i18next": "^20.4.0", "leaflet": "^1.7.1", "patch-package": "^6.4.7", @@ -41,7 +41,7 @@ "react-leaflet": "next", "react-phone-number-input": "^3.2.17", "react-redux": "^7.2.6", - "react-responsive": "^8.2.0", + "react-responsive": "^9.0.2", "react-router-dom": "^6.0.2", "react-router-hash-link": "^2.4.3", "react-scripts": "4.0.3", @@ -89,12 +89,12 @@ ], "devDependencies": { "@types/country-list": "^2.1.0", - "@types/google-map-react": "^2.1.3", + "@types/google-map-react": "^2.1.7", "@types/leaflet": "^1.7.9", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@types/react-helmet": "^6.1.5", - "@types/react-responsive": "^8.0.2", + "@types/react-responsive": "^8.0.5", "@types/react-router-dom": "^5.1.7", "@types/react-router-hash-link": "^2.4.4", "@types/react-simple-maps": "^1.0.7", @@ -128,7 +128,7 @@ "node": "16.x" }, "resolutions": { - "@types/react": "^17.0.43", + "@types/react": "^18.0.28", "react-error-overlay": "6.0.9" }, "packageManager": "yarn@3.1.1", diff --git a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx index 5b96894e3..63ea2ff82 100644 --- a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx +++ b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx @@ -40,7 +40,9 @@ export const NotificationsOverlay: React.FC = ({ description: ( - {{ place: t((notification as Mention).place) }} + { + { place: t((notification as Mention).place) } as any // todo: remove any + } ), diff --git a/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.tsx b/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.tsx index 15ad8b322..0de4fb03a 100644 --- a/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.tsx +++ b/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.tsx @@ -1,12 +1,12 @@ import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -import React from 'react'; +import React, { PropsWithChildren } from 'react'; import * as S from './NFTCardHeader.styles'; interface NFTCardHeaderProps { title: string; } -export const NFTCardHeader: React.FC = ({ title, children }) => { +export const NFTCardHeader: React.FC> = ({ title, children }) => { return ( diff --git a/src/hocs/ErrorBoundary.tsx b/src/hocs/ErrorBoundary.tsx new file mode 100644 index 000000000..f7c2bdcbf --- /dev/null +++ b/src/hocs/ErrorBoundary.tsx @@ -0,0 +1,43 @@ +import { Component, ReactNode, ErrorInfo, ComponentType, PropsWithChildren } from 'react'; + +interface ErrorBoundaryState { + error: Error | null; +} + +export class ErrorBoundary extends Component { + state: ErrorBoundaryState = { error: null }; + + componentDidCatch(error: Error, errorInfo: ErrorInfo): void { + this.setState({ error }); + console.error(error, errorInfo); + } + + static getDerivedStateFromError(error: Error): ErrorBoundaryState { + return { error }; + } + + render(): ReactNode { + const { error } = this.state; + + if (!error) { + return this.props.children; + } + + return ( +
+

Something went wrong.

+
{error.toString()}
+
+ ); + } +} + +export const withErrorBoundary = ( + Component: ComponentType, +): ((props: Props) => JSX.Element) => { + return (props: Props) => ( + + + + ); +}; diff --git a/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx b/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx index 59ab008b9..ed75d3c3e 100644 --- a/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx +++ b/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx @@ -6,11 +6,13 @@ import { useTranslation } from 'react-i18next'; import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; import * as S from '@app/pages/maps/maps.styles'; +import { ErrorBoundary } from '@app/hocs/ErrorBoundary'; + const GoogleMaps: React.FC = () => { const { t } = useTranslation(); return ( - <> + {t('common.googleMap')} { defaultZoom={6} /> - + ); }; diff --git a/src/pages/uiComponentsPages/forms/RatesPage.tsx b/src/pages/uiComponentsPages/forms/RatesPage.tsx index cf963eeac..6e5202ae3 100644 --- a/src/pages/uiComponentsPages/forms/RatesPage.tsx +++ b/src/pages/uiComponentsPages/forms/RatesPage.tsx @@ -31,8 +31,8 @@ const RatesPage: React.FC = () => { - index + 1} /> - customIcons[index + 1]} /> + (index as number) + 1} /> + customIcons[(index as number) + 1]} /> diff --git a/src/styles/themes/constants.ts b/src/styles/themes/constants.ts index 6173f2661..369753191 100644 --- a/src/styles/themes/constants.ts +++ b/src/styles/themes/constants.ts @@ -13,7 +13,7 @@ export const BASE_COLORS = { blue: '#0000ff', skyblue: '#35a0dc', red: '#ff5252', -}; +} as const; export const LAYOUT = { mobile: { @@ -27,12 +27,12 @@ export const LAYOUT = { paddingHorizontal: '2.25rem', headerHeight: '5.625rem', }, -}; +} as const; export const FONT_FAMILY = { main: 'Montserrat', secondary: 'Lato', -}; +} as const; export const FONT_SIZE = { xxs: '0.75rem', @@ -43,7 +43,7 @@ export const FONT_SIZE = { xxl: '1.5rem', xxxl: '1.625rem', xxxxl: '2rem', -}; +} as const; export const FONT_WEIGHT = { thin: '100', @@ -55,7 +55,7 @@ export const FONT_WEIGHT = { bold: '700', extraBold: '800', black: '900', -}; +} as const; export const BREAKPOINTS = { xs: 360, diff --git a/yarn.lock b/yarn.lock index 8ea8d69fa..f945b64cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2621,7 +2621,7 @@ __metadata: languageName: node linkType: hard -"@types/google-map-react@npm:^2.1.3": +"@types/google-map-react@npm:^2.1.7": version: 2.1.7 resolution: "@types/google-map-react@npm:2.1.7" dependencies: @@ -2806,7 +2806,7 @@ __metadata: languageName: node linkType: hard -"@types/react-responsive@npm:^8.0.2": +"@types/react-responsive@npm:^8.0.5": version: 8.0.5 resolution: "@types/react-responsive@npm:8.0.5" dependencies: @@ -2868,14 +2868,14 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:^17.0.43": - version: 17.0.53 - resolution: "@types/react@npm:17.0.53" +"@types/react@npm:^18.0.28": + version: 18.0.28 + resolution: "@types/react@npm:18.0.28" dependencies: "@types/prop-types": "*" "@types/scheduler": "*" csstype: ^3.0.2 - checksum: dacfde02c260fd98bed2eb775ed0c7ce1397be4c0844f907a50763b081a4008f81f57071889a16eb1350ddcf0927f3cf1a6541702c8ad03de3c70383ef931e3f + checksum: e752df961105e5127652460504785897ca6e77259e0da8f233f694f9e8f451cde7fa0709d4456ade0ff600c8ce909cfe29f9b08b9c247fa9b734e126ec53edd7 languageName: node linkType: hard @@ -3756,8 +3756,8 @@ __metadata: linkType: hard "antd@npm:^4.22.4": - version: 4.24.7 - resolution: "antd@npm:4.24.7" + version: 4.24.8 + resolution: "antd@npm:4.24.8" dependencies: "@ant-design/colors": ^6.0.0 "@ant-design/icons": ^4.7.0 @@ -3793,7 +3793,7 @@ __metadata: rc-steps: ~5.0.0-alpha.2 rc-switch: ~3.2.0 rc-table: ~7.26.0 - rc-tabs: ~12.5.0 + rc-tabs: ~12.5.6 rc-textarea: ~0.4.5 rc-tooltip: ~5.2.0 rc-tree: ~5.7.0 @@ -3805,7 +3805,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 676752f2c69d856f2ab9f08d920df685b7c8e4d49c7c208d401d83657d352ec88c5b7f6088d0a55f8eb136253a12d41ec9976ead0fc2f3b41ad0ba1290d7dbe4 + checksum: 99744b6769454f961e8332b571a1785c7c6d9e1c125dedaaa2314348faccda66dd48c2eec6bb9f71de5474b47ccf02cfed5132d29645b038b144c5701143669f languageName: node linkType: hard @@ -8570,7 +8570,7 @@ __metadata: languageName: node linkType: hard -"google-map-react@npm:^2.1.10": +"google-map-react@npm:^2.2.0": version: 2.2.0 resolution: "google-map-react@npm:2.2.0" dependencies: @@ -11056,12 +11056,12 @@ __metadata: "@lit-labs/react": ^1.0.2 "@reduxjs/toolkit": ^1.7.1 "@types/country-list": ^2.1.0 - "@types/google-map-react": ^2.1.3 + "@types/google-map-react": ^2.1.7 "@types/leaflet": ^1.7.9 "@types/react": ^18.0.28 "@types/react-dom": ^18.0.11 "@types/react-helmet": ^6.1.5 - "@types/react-responsive": ^8.0.2 + "@types/react-responsive": ^8.0.5 "@types/react-router-dom": ^5.1.7 "@types/react-router-hash-link": ^2.4.4 "@types/react-simple-maps": ^1.0.7 @@ -11086,7 +11086,7 @@ __metadata: eslint-plugin-prettier: ^3.4.0 eslint-plugin-react: ^7.24.0 eslint-plugin-react-hooks: ^4.3.0 - google-map-react: ^2.1.10 + google-map-react: ^2.2.0 husky: ^6.0.0 i18next: ^20.4.0 leaflet: ^1.7.1 @@ -11107,7 +11107,7 @@ __metadata: react-leaflet: next react-phone-number-input: ^3.2.17 react-redux: ^7.2.6 - react-responsive: ^8.2.0 + react-responsive: ^9.0.2 react-router-dom: ^6.0.2 react-router-hash-link: ^2.4.3 react-scripts: 4.0.3 @@ -14466,8 +14466,8 @@ __metadata: linkType: hard "rc-drawer@npm:~6.1.0": - version: 6.1.2 - resolution: "rc-drawer@npm:6.1.2" + version: 6.1.3 + resolution: "rc-drawer@npm:6.1.3" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/portal": ^1.0.0-6 @@ -14477,7 +14477,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 0d7f5cd56bcad80ebc11dd3d1c5b13ef620e8790fac67af62180938c9baa0e671cbd6aaf9588ebd1978de39a2791dcf4f0da56dd366797bada43d2d31ef575ad + checksum: 09fa3085312f668b27e0a8acae7f560a7d45ad52e4554020a6d3801352331b1173b20f57d32f876cfc1b359bd3088190e90bd7815619144d6d50b83c4ab44196 languageName: node linkType: hard @@ -14800,7 +14800,7 @@ __metadata: languageName: node linkType: hard -"rc-tabs@npm:~12.5.0": +"rc-tabs@npm:~12.5.6": version: 12.5.6 resolution: "rc-tabs@npm:12.5.6" dependencies: @@ -15187,17 +15187,17 @@ __metadata: languageName: node linkType: hard -"react-responsive@npm:^8.2.0": - version: 8.2.0 - resolution: "react-responsive@npm:8.2.0" +"react-responsive@npm:^9.0.2": + version: 9.0.2 + resolution: "react-responsive@npm:9.0.2" dependencies: hyphenate-style-name: ^1.0.0 matchmediaquery: ^0.3.0 prop-types: ^15.6.1 - shallow-equal: ^1.1.0 + shallow-equal: ^1.2.1 peerDependencies: react: ">=16.8.0" - checksum: 59c6be6934a3412f0de9416c1ba25bbbb043706a9dd530e9c92c04172c6efb96202e2ff0b72d589aa99edea92098e27a3bb3532d6281299deab5e4a64c62535f + checksum: 97c827db903125f256d7197161bf4c1d77044b12aa2fee05b7d0dc2317eab62897c006a68940c5399c209da2732e4901e92a93bf09c113ac9334232bb842ffd4 languageName: node linkType: hard @@ -16417,7 +16417,7 @@ __metadata: languageName: node linkType: hard -"shallow-equal@npm:^1.1.0": +"shallow-equal@npm:^1.2.1": version: 1.2.1 resolution: "shallow-equal@npm:1.2.1" checksum: 4f1645cc516e7754c4438db687e1da439a5f29a7dba2ba90c5f88e5708aeb17bc4355ba45cad805b0e95dc898e37d8bf6d77d854919c7512f89939986cff8cd1 From 36a72b198e6ee5aa14b4d736248bd46a58550e23 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 24 Feb 2023 14:51:55 +0200 Subject: [PATCH 4/7] update libs to support react 18 --- README.md | 2 +- package.json | 7 +- patches/react-trello+2.2.11.patch | 107 ------ src/@types/trello.d.ts | 214 ----------- .../kanban/AddCardLink/AddCardLink.styles.ts | 15 - .../apps/kanban/AddCardLink/AddCardLink.tsx | 15 - .../apps/kanban/Card/Card.styles.ts | 100 ----- src/components/apps/kanban/Card/Card.tsx | 143 ------- .../apps/kanban/Kanban/Kanban.styles.ts | 17 - src/components/apps/kanban/Kanban/Kanban.tsx | 38 -- .../kanban/LaneHeader/LaneHeader.styles.ts | 22 -- .../apps/kanban/LaneHeader/LaneHeader.tsx | 39 -- .../kanban/NewLaneForm/NewLaneForm.styles.ts | 36 -- .../apps/kanban/NewLaneForm/NewLaneForm.tsx | 33 -- .../NewLaneSection/NewLaneSection.styles.ts | 37 -- .../kanban/NewLaneSection/NewLaneSection.tsx | 21 - src/components/apps/kanban/interfaces.ts | 19 - .../NewCardForm/NewCardForm.styles.ts | 38 -- .../newCardForm/NewCardForm/NewCardForm.tsx | 68 ---- .../ParticipantsDropdown.styles.ts | 51 --- .../ParticipantsDropdown.tsx | 79 ---- .../TagDropdown/TagDropdown.styles.ts | 53 --- .../newCardForm/TagDropdown/TagDropdown.tsx | 72 ---- .../common/BaseHashTag/BaseHashTag.styles.ts | 11 +- .../layouts/main/sider/sidebarNavigation.tsx | 5 - src/components/router/AppRouter.tsx | 3 - src/constants/config/components.ts | 7 - src/constants/kanbanData.ts | 108 ------ src/constants/kanbanPeople.ts | 15 - src/constants/kanbanTags.ts | 37 -- src/locales/de/translation.json | 13 - src/locales/en/translation.json | 13 - src/pages/KanbanPage.tsx | 17 - .../maps/GoogleMapsPage/GoogleMapsPage.tsx | 27 +- tsconfig.json | 56 +-- yarn.lock | 359 ++++-------------- 36 files changed, 131 insertions(+), 1766 deletions(-) delete mode 100644 patches/react-trello+2.2.11.patch delete mode 100644 src/@types/trello.d.ts delete mode 100644 src/components/apps/kanban/AddCardLink/AddCardLink.styles.ts delete mode 100644 src/components/apps/kanban/AddCardLink/AddCardLink.tsx delete mode 100644 src/components/apps/kanban/Card/Card.styles.ts delete mode 100644 src/components/apps/kanban/Card/Card.tsx delete mode 100644 src/components/apps/kanban/Kanban/Kanban.styles.ts delete mode 100644 src/components/apps/kanban/Kanban/Kanban.tsx delete mode 100644 src/components/apps/kanban/LaneHeader/LaneHeader.styles.ts delete mode 100644 src/components/apps/kanban/LaneHeader/LaneHeader.tsx delete mode 100644 src/components/apps/kanban/NewLaneForm/NewLaneForm.styles.ts delete mode 100644 src/components/apps/kanban/NewLaneForm/NewLaneForm.tsx delete mode 100644 src/components/apps/kanban/NewLaneSection/NewLaneSection.styles.ts delete mode 100644 src/components/apps/kanban/NewLaneSection/NewLaneSection.tsx delete mode 100644 src/components/apps/kanban/interfaces.ts delete mode 100644 src/components/apps/kanban/newCardForm/NewCardForm/NewCardForm.styles.ts delete mode 100644 src/components/apps/kanban/newCardForm/NewCardForm/NewCardForm.tsx delete mode 100644 src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts delete mode 100644 src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx delete mode 100644 src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts delete mode 100644 src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.tsx delete mode 100644 src/constants/kanbanData.ts delete mode 100644 src/constants/kanbanPeople.ts delete mode 100644 src/constants/kanbanTags.ts delete mode 100644 src/pages/KanbanPage.tsx diff --git a/README.md b/README.md index 3e383fa7d..d57d08bf9 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Check out a [live demo](https://altence.com/lightence-landing). - 💯 60+ ready-to-use customizable UI components - 🚄 All-set business flow: login, sign up, forgot password, profile flows - 🐝 Custom pages: 400 error, 500 error, profile -- 🗞️ Built-in apps: News Feed, Kanban +- 🗞️ Built-in apps: News Feed - 👍 Fully typescripted - ✅ Clean code: enjoy the world-recognized code style with our own enhancements - 🧱 Solid architecture: in compliance with the best architectural practices diff --git a/package.json b/package.json index 6116affc1..5b85d58d5 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@ant-design/icons": "^4.6.2", "@craco/craco": "^6.1.2", "@lit-labs/react": "^1.0.2", + "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", "antd": "^4.22.4", "antd-mask-input": "^2.0.7", @@ -25,12 +26,9 @@ "echarts": "^5.1.2", "echarts-for-react": "^3.0.1", "elt-react-credit-cards": "^0.0.1", - "google-map-react": "^2.2.0", "i18next": "^20.4.0", "leaflet": "^1.7.1", - "patch-package": "^6.4.7", "pigeon-maps": "^0.19.7", - "postinstall-postinstall": "^2.1.0", "react": "^18.2.0", "react-country-flag": "^3.0.2", "react-dom": "^18.2.0", @@ -47,7 +45,6 @@ "react-scripts": "4.0.3", "react-simple-maps": "^2.3.0", "react-slick": "^0.28.1", - "react-trello": "^2.2.11", "react-verification-input": "^2.0.3", "round-slider": "altence/round-slider#refactor/slider", "slick-carousel": "^1.8.1", @@ -78,7 +75,6 @@ "lint": "eslint \"*/**/*.{js,ts,tsx}\" --fix", "lint:styles": "stylelint '*/**/*.{js,ts,tsx}'", "prepare": "husky install", - "postinstall": "patch-package", "buildThemes": "lessc --js --clean-css=\"--s1 --advanced\" src/styles/themes/main.less public/themes/main.css" }, "browserslist": [ @@ -89,7 +85,6 @@ ], "devDependencies": { "@types/country-list": "^2.1.0", - "@types/google-map-react": "^2.1.7", "@types/leaflet": "^1.7.9", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", diff --git a/patches/react-trello+2.2.11.patch b/patches/react-trello+2.2.11.patch deleted file mode 100644 index 24fc742ba..000000000 --- a/patches/react-trello+2.2.11.patch +++ /dev/null @@ -1,107 +0,0 @@ -diff --git a/node_modules/react-trello/dist/controllers/BoardContainer.js b/node_modules/react-trello/dist/controllers/BoardContainer.js -index 2173f22..9ca1122 100644 ---- a/node_modules/react-trello/dist/controllers/BoardContainer.js -+++ b/node_modules/react-trello/dist/controllers/BoardContainer.js -@@ -162,20 +162,20 @@ class BoardContainer extends _react.Component { - } - } - -- UNSAFE_componentWillReceiveProps(nextProps) { -- // nextProps.data changes when external Board input props change and nextProps.reducerData changes due to event bus or UI changes -- const _this$props4 = this.props, -+ componentDidUpdate(prevProps) { -+ // this.props.data changes when external Board input props change and this.props.reducerData changes due to event bus or UI changes -+ const _this$props4 = prevProps, - data = _this$props4.data, - reducerData = _this$props4.reducerData, - onDataChange = _this$props4.onDataChange; - -- if (nextProps.reducerData && !(0, _isEqual.default)(reducerData, nextProps.reducerData)) { -- onDataChange(nextProps.reducerData); -+ if (this.props.reducerData && !(0, _isEqual.default)(reducerData, this.props.reducerData)) { -+ onDataChange(this.props.reducerData); - } - -- if (nextProps.data && !(0, _isEqual.default)(nextProps.data, data)) { -- this.props.actions.loadBoard(nextProps.data); -- onDataChange(nextProps.data); -+ if (this.props.data && !(0, _isEqual.default)(this.props.data, data)) { -+ this.props.actions.loadBoard(this.props.data); -+ onDataChange(this.props.data); - } - } - -diff --git a/node_modules/react-trello/dist/controllers/Lane.js b/node_modules/react-trello/dist/controllers/Lane.js -index 51cf13f..6263c71 100644 ---- a/node_modules/react-trello/dist/controllers/Lane.js -+++ b/node_modules/react-trello/dist/controllers/Lane.js -@@ -283,10 +283,10 @@ class Lane extends _react.Component { - }); - } - -- UNSAFE_componentWillReceiveProps(nextProps) { -- if (!(0, _isEqual.default)(this.props.cards, nextProps.cards)) { -+ componentDidUpdate(prevProps) { -+ if (!(0, _isEqual.default)(prevProps.cards, this.props.cards)) { - this.setState({ -- currentPage: nextProps.currentPage -+ currentPage: this.props.currentPage - }); - } - } -diff --git a/node_modules/react-trello/dist/widgets/InlineInput.js b/node_modules/react-trello/dist/widgets/InlineInput.js -index e37e137..7e96fdb 100644 ---- a/node_modules/react-trello/dist/widgets/InlineInput.js -+++ b/node_modules/react-trello/dist/widgets/InlineInput.js -@@ -20,7 +20,9 @@ var _autosize = _interopRequireDefault(require("autosize")); - class InlineInputController extends _react.default.Component { - constructor(...args) { - super(...args); -- (0, _defineProperty2.default)(this, "onFocus", e => e.target.select()); -+ (0, _defineProperty2.default)(this, "onFocus", e => { -+ e.target.select(); -+ }); - (0, _defineProperty2.default)(this, "onMouseDown", e => { - if (document.activeElement != e.target) { - e.preventDefault(); -@@ -67,8 +69,8 @@ class InlineInputController extends _react.default.Component { - }); - } - -- UNSAFE_componentWillReceiveProps(nextProps) { -- this.setValue(nextProps.value); -+ componentDidUpdate() { -+ this.setValue(this.props.value); - } - - render() { -@@ -76,7 +78,9 @@ class InlineInputController extends _react.default.Component { - autoFocus = _this$props.autoFocus, - border = _this$props.border, - value = _this$props.value, -- placeholder = _this$props.placeholder; -+ placeholder = _this$props.placeholder, -+ className = _this$props.className; -+ - return _react.default.createElement(_Base.InlineInput, { - ref: this.setRef, - border: border, -@@ -84,7 +88,7 @@ class InlineInputController extends _react.default.Component { - onFocus: this.onFocus, - onBlur: this.onBlur, - onKeyDown: this.onKeyDown, -- placeholder: value.length == 0 ? undefined : placeholder, -+ placeholder: placeholder, - defaultValue: value, - autoComplete: "off", - autoCorrect: "off", -@@ -92,7 +96,8 @@ class InlineInputController extends _react.default.Component { - spellCheck: "false", - dataGramm: "false", - rows: 1, -- autoFocus: autoFocus -+ autoFocus: autoFocus, -+ className: className - }); - } - diff --git a/src/@types/trello.d.ts b/src/@types/trello.d.ts deleted file mode 100644 index 43ac1643d..000000000 --- a/src/@types/trello.d.ts +++ /dev/null @@ -1,214 +0,0 @@ -/* eslint-disable @typescript-eslint/ban-types */ - -/* - Types for react-trello (https://gist.github.com/G-Rath/b9331e480aff4c613294b0c2682bf034) -*/ - -declare class ReactTrelloBoard extends React.Component> {} - -declare namespace ReactTrello { - /** - * react-trello uses `React.cloneElement`, so these props - * will have to be added to `defaultProps`, otherwise - * TypeScript will (understandably) freak out. - */ - interface NewCardTemplateProps { - laneId: string; - onAdd: (card: Card) => void; - onCancel: () => void; - } - - interface BoardData { - lanes: Array>; - } - - type node = unknown & React.ReactNode; - type element = unknown & React.ReactElement; - - type Special = unknown; - - interface EventBus { - publish: (any) => void; - } - - interface DraggableCard { - id?: string; - title: string; - description?: string; - label?: string; - metadata?: any; - } - - interface Lane { - id: string; - title?: string; - label?: string; - cards?: Array; - disallowAddingCard?: boolean; - } - - interface BoardProps { - /** - * Makes all cards and lanes draggable. Default: false - */ - draggable?: boolean; - /** - * Set to false to disable lane dragging. Default: true - */ - laneDraggable?: boolean; - /** - * Set to false to disable lane dragging. Default: true - */ - canAddLanes?: boolean; - /** - * Set to false to disable card dragging. Default: true - */ - cardDraggable?: boolean; - /** - * Make the lanes with cards collapsible. Default: false - */ - collapsibleLanes?: boolean; - /** - * Makes the entire board editable. Allow cards to be added or deleted Default: false - */ - editable?: boolean; - /** - * Callback function triggered when card drag is started: handleDragStart(cardId, laneId) - */ - handleDragStart?: (cardId: string, laneId: string) => void; - /** - * Callback function triggered when card drag ends: handleDragEnd(cardId, sourceLaneId, targetLaneId, position, cardDetails) - */ - handleDragEnd?: ( - cardId: string, - sourceLandId: string, - targetLaneId: string, - position: number, - cardDetails: Card, - ) => void; - /** - * Callback function triggered when lane drag is started: handleLaneDragStart(laneId) - */ - handleLaneDragStart?: (laneId: string) => void; - /** - * Callback function triggered when lane drag ends: handleLaneDragEnd(laneId, newPosition) - */ - handleLaneDragEnd?: (laneId: string, newPosition: number) => void; - /** - * CSS class to be applied to Card when being dragged - */ - cardDragClass?: string; - /** - * CSS class to be applied to Lane when being dragged - */ - laneDragClass?: string; - /** - * Called when a lane is scrolled to the end: onLaneScroll(requestedPage, laneId) - */ - onLaneScroll?: (requestedPage: unknown, laneId: string) => void; - /** - * Called when a card is clicked: onCardClick(cardId, metadata, laneId) - */ - onCardClick?: (cardId: string, metaData: CardMetaData, laneId: string) => void; - /** - * Called when a new card is added: onCardAdd(card, laneId) - */ - onCardAdd?: (card: DraggableCard, laneId: string) => void; - /** - * Pass custom element to replace the Add Card link at the end of the lane (when board is editable) - */ - components?: { - AddCardLink?: React.Element; - NewCardForm?: React.Element; - Card?: React.Element; - LaneHeader?: React.Element; - AddCardLink?: React.Element; - NewLaneSection?: React.Element; - NewLaneForm?: React.Element; - }; - - addCardLink?: React.Element; - /** - * Pass a custom new card template to add new cards to a lane (when board is editable) - */ - newCardTemplate?: node; - /** - * Pass a custom new lane template to add new lanes to a board (when board is editable) - */ - newLaneTemplate?: node; - /** - * Disable showing the delete icon to the top right corner of the card (when board is editable) - */ - hideCardDeleteIcon?: boolean; - /** - * Called when a card is deleted: onCardDelete(cardId, laneId) - */ - onCardDelete?: (cardId: string, laneId: string) => void; - /** - * Called when a lane is clicked: onLaneClick(laneId). Card clicks are not propagated to lane click event - */ - onLaneClick?: (laneId: string) => void; - /** - * Used to specify the logic to sort cards on a lane: laneSortFunction(card1, card2) - */ - laneSortFunction?: (card1: Card, card2: Card) => void; - /** - * This is a special function that providers a publishHook to pass new events to the board. See details in Publish Events section - */ - eventBusHandle?: (hook: EventBus) => void; - /** - * Called everytime the data changes due to user interaction or event bus: onDataChange(newData) - */ - onDataChange?: (newData: unknown) => void; - /** - * Pass css style props to board container - */ - style?: React.CSSProperties; - /** - * Pass css style props to lane container - */ - laneStyle?: React.CSSProperties; - - /** - * Pass css style props to card container - */ - cardStyle?: React.CSSProperties; - - /** - * Boolean to indicate a custom card template will be specified. Add the card component as child to Board - */ - customCardLayout?: boolean; - /** - * Pass custom lane header as react component to modify appearance - */ - customLaneHeader?: element; - /** - * Actual board data in the form of json - */ - data: BoardData; - /** - * If cards have tags, use this prop to modify their style - */ - tagStyle?: object; - addLaneTitle?: string; - addCardTitle?: string; - } -} - -declare module 'react-trello' { - export default ReactTrelloBoard; -} - -declare module 'react-trello/dist/styles/Base'; - -declare module 'react-trello/dist/widgets/InlineInput'; - -declare module 'react-trello/dist/widgets/DeleteButton'; - -declare module 'react-trello/dist/components/Card/Tag'; - -declare module 'react-trello/dist/components/Lane/LaneHeader/LaneMenu'; - -declare module 'react-trello/dist/styles/Elements'; - -declare module 'react-trello/dist/widgets/EditableLabel'; diff --git a/src/components/apps/kanban/AddCardLink/AddCardLink.styles.ts b/src/components/apps/kanban/AddCardLink/AddCardLink.styles.ts deleted file mode 100644 index b55738019..000000000 --- a/src/components/apps/kanban/AddCardLink/AddCardLink.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { BORDER_RADIUS, FONT_SIZE } from '@app/styles/themes/constants'; -import styled from 'styled-components'; - -export const AddCardWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - height: 3.75rem; - width: 100%; - border: 1px solid var(--border-color); - border-radius: ${BORDER_RADIUS}; - cursor: pointer; - font-size: ${FONT_SIZE.xxl}; - color: var(--border-color); -`; diff --git a/src/components/apps/kanban/AddCardLink/AddCardLink.tsx b/src/components/apps/kanban/AddCardLink/AddCardLink.tsx deleted file mode 100644 index b5cb64881..000000000 --- a/src/components/apps/kanban/AddCardLink/AddCardLink.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { PlusOutlined } from '@ant-design/icons'; -import * as S from './AddCardLink.styles'; - -interface AddCardLinkProps { - onClick: () => void; -} - -export const AddCardLink: React.FC = ({ onClick }) => { - return ( - - - - ); -}; diff --git a/src/components/apps/kanban/Card/Card.styles.ts b/src/components/apps/kanban/Card/Card.styles.ts deleted file mode 100644 index dc1e32fbd..000000000 --- a/src/components/apps/kanban/Card/Card.styles.ts +++ /dev/null @@ -1,100 +0,0 @@ -import styled from 'styled-components'; -import { - CardRightContent as RightContent, - CardTitle as Title, - CardHeader as Header, - Detail, - MovableCardWrapper, - Footer, -} from 'react-trello/dist/styles/Base'; -import { DownOutlined } from '@ant-design/icons'; -import InlineInput from 'react-trello/dist/widgets/InlineInput'; -import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; -import { BaseCollapse } from '@app/components/common/BaseCollapse/BaseCollapse'; - -interface ArrowDownIcon { - $expanded: boolean; -} - -export const CardContent = styled(BaseCollapse.Panel)` - & .ant-collapse-content .ant-collapse-content-box { - padding: 0; - } -`; - -export const CollapseCard = styled(BaseCollapse)` - background: transparent; - & .ant-collapse-item { - border: none; - } - & .ant-collapse-item.ant-collapse-no-arrow > .ant-collapse-header { - padding: 0; - } - - & .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box { - padding: 0; - } -`; - -export const ParticipantsWrapper = styled.div` - display: flex; - flex-direction: column; - gap: 1rem; -`; - -export const ArrowDownIcon = styled(DownOutlined)` - transform: ${(props) => `rotate(${props.$expanded ? 0 : 180}deg)`}; -`; - -export const CardWrapper = styled(MovableCardWrapper)` - position: relative; -`; - -export const CardRightContent = styled(RightContent)` - display: flex; - justify-content: flex-end; - align-items: center; - gap: 1rem; - padding-right: 0; -`; - -export const CardTitle = styled(Title)` - font-size: ${FONT_SIZE.md}; - line-height: 1.375rem; - font-weight: ${FONT_WEIGHT.semibold}; - color: var(--text-main-color); - margin-left: -0.5rem; - display: flex; -`; - -export const CardHeader = styled(Header)` - border-bottom: none; - margin-bottom: 0; - padding-bottom: 0; - min-height: 1.375rem; - display: flex; - align-items: center; -`; - -export const CardDetails = styled(Detail)` - font-size: ${FONT_SIZE.xs}; - font-weight: ${FONT_WEIGHT.medium}; - color: var(--text-main-color); - margin-left: -0.5rem; - margin-top: 1rem; - display: flex; -`; - -export const CardFooter = styled(Footer)` - display: flex; - border: none; - padding-top: 1rem; - gap: 0.625rem; - justify-content: flex-start; -`; - -export const Input = styled(InlineInput)` - && { - max-height: 28.125rem; - } -`; diff --git a/src/components/apps/kanban/Card/Card.tsx b/src/components/apps/kanban/Card/Card.tsx deleted file mode 100644 index 3eefc224f..000000000 --- a/src/components/apps/kanban/Card/Card.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { MoreOutlined } from '@ant-design/icons'; -import { BaseDropdown } from '@app/components/common/BaseDropdown/Dropdown'; -import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; -import { ParticipantsDropdown } from '@app/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown'; -import { TagDropdown } from '@app/components/apps/kanban/newCardForm/TagDropdown/TagDropdown'; -import { CardState, Tag as ITag, Participant as IParticipant } from '@app/components/apps/kanban/interfaces'; -import * as S from './Card.styles'; - -interface CardProps { - style: CSSStyleSheet; - onClick: () => void; - onDelete: () => void; - onChange: (card: CardState) => void; - className: string; - id: string | number; - title: string; - description: string; - tags: ITag[]; - participants: IParticipant[]; - cardDraggable: boolean; - editable: boolean; -} - -export const Card: React.FC = ({ - style, - onClick, - onDelete, - onChange, - className, - id, - title, - description, - tags = [], - participants = [], - cardDraggable, - editable, -}) => { - const { t } = useTranslation(); - const [isExpanded, setIsExpanded] = useState(true); - - const onArrowPress = () => { - setIsExpanded(!isExpanded); - }; - - const updateCard = (card: CardState) => { - onChange({ ...card, id }); - }; - - const onDeleteCard = () => { - onDelete(); - }; - - const updateTags = (tags: ITag[]) => { - updateCard({ tags }); - }; - - const updateParticipants = (participants: IParticipant[]) => { - updateCard({ participants }); - }; - - const editPopoverItems = [ - { - key: '1', - label: t('common.delete'), - onClick: onDeleteCard, - }, - { - key: '2', - label: t('kanban.archive'), - onClick: onDeleteCard, - }, - ]; - - return ( - - - - { - e.stopPropagation(); - }} - > - {editable ? ( - updateCard({ title: value })} - /> - ) : ( - title - )} - - - } /> - - } - onClick={(e) => { - e.stopPropagation(); - }} - /> - - - - } - > - - {editable ? ( - updateCard({ description: value })} - /> - ) : ( - description - )} - - - - - - - - - - - - ); -}; diff --git a/src/components/apps/kanban/Kanban/Kanban.styles.ts b/src/components/apps/kanban/Kanban/Kanban.styles.ts deleted file mode 100644 index 6349aaa14..000000000 --- a/src/components/apps/kanban/Kanban/Kanban.styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { LAYOUT } from '@app/styles/themes/constants'; -import { media } from '@app/styles/themes/constants'; -import Board from 'react-trello'; -import styled from 'styled-components'; - -export const Kanban = styled(Board)` - background: transparent; - height: 100%; - padding: 0 ${LAYOUT.mobile.paddingHorizontal}; - - margin: 0 -${LAYOUT.mobile.paddingHorizontal}; - - @media only screen and ${media.md} { - padding: 0 ${LAYOUT.desktop.paddingHorizontal}; - margin: 0 -${LAYOUT.desktop.paddingHorizontal}; - } -`; diff --git a/src/components/apps/kanban/Kanban/Kanban.tsx b/src/components/apps/kanban/Kanban/Kanban.tsx deleted file mode 100644 index 8e835392c..000000000 --- a/src/components/apps/kanban/Kanban/Kanban.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { NewCardForm } from '../newCardForm/NewCardForm/NewCardForm'; -import { Card } from '../Card/Card'; -import { LaneHeader } from '../LaneHeader/LaneHeader'; -import { AddCardLink } from '../AddCardLink/AddCardLink'; -import { NewLaneSection } from '../NewLaneSection/NewLaneSection'; -import { NewLaneForm } from '../NewLaneForm/NewLaneForm'; -import { kanbanData } from '@app/constants/kanbanData'; -import * as S from './Kanban.styles'; -import { BORDER_RADIUS } from '@app/styles/themes/constants'; - -export const Kanban: React.FC = () => { - return ( - - ); -}; diff --git a/src/components/apps/kanban/LaneHeader/LaneHeader.styles.ts b/src/components/apps/kanban/LaneHeader/LaneHeader.styles.ts deleted file mode 100644 index b4a6bf9c7..000000000 --- a/src/components/apps/kanban/LaneHeader/LaneHeader.styles.ts +++ /dev/null @@ -1,22 +0,0 @@ -import styled from 'styled-components'; -import { LaneHeader } from 'react-trello/dist/styles/Base'; -import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; - -export const Header = styled(LaneHeader)` - color: var(--text-main-color); - width: 16rem; - padding: 0; -`; - -export const Title = styled.div` - font-size: ${FONT_SIZE.lg}; - overflow: hidden; - text-overflow: ellipsis; - font-weight: ${FONT_WEIGHT.bold}; - color: var(--primary-color); -`; - -export const Dot = styled.span` - padding-left: 0.625rem; - padding-right: 0.3125rem; -`; diff --git a/src/components/apps/kanban/LaneHeader/LaneHeader.tsx b/src/components/apps/kanban/LaneHeader/LaneHeader.tsx deleted file mode 100644 index 841c27240..000000000 --- a/src/components/apps/kanban/LaneHeader/LaneHeader.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useMemo } from 'react'; -import InlineInput from 'react-trello/dist/widgets/InlineInput'; -import * as S from './LaneHeader.styles'; -import { CardState } from '../interfaces'; - -interface LaneHeaderProps { - updateTitle: () => void; - editLaneTitle: boolean; - style: CSSStyleSheet; - title: string; - onDoubleClick: () => void; - cards: Array; -} - -export const LaneHeader: React.FC = ({ - updateTitle, - onDoubleClick, - editLaneTitle = false, - title, - style, - cards, -}) => { - const numberOfCards = useMemo(() => (cards?.length ? `${cards.length}` : ''), [cards?.length]); - return ( - - - {editLaneTitle ? ( - - ) : ( - <> - {title} - {cards.length ? · : ''} - {numberOfCards} - - )} - - - ); -}; diff --git a/src/components/apps/kanban/NewLaneForm/NewLaneForm.styles.ts b/src/components/apps/kanban/NewLaneForm/NewLaneForm.styles.ts deleted file mode 100644 index 0e48287dd..000000000 --- a/src/components/apps/kanban/NewLaneForm/NewLaneForm.styles.ts +++ /dev/null @@ -1,36 +0,0 @@ -import styled from 'styled-components'; -import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/BaseButtonsForm'; -import { BaseButtonsGroup } from '@app/components/common/forms/components/BaseButtonsGroup/BaseButtonsGroup'; -import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants'; - -export const Form = styled(BaseButtonsForm)` - width: 16rem; - border-radius: ${BORDER_RADIUS}; - background-color: var(--background-color); - padding: 1.25rem 1rem; -`; - -export const FooterButtons = styled(BaseButtonsGroup)` - margin-top: 1rem; - margin-bottom: 0.625rem; -`; - -export const FormInput = styled(BaseButtonsForm.Item)` - @media only screen and ${media.xl} { - margin-bottom: 1.5rem; - } - - font-weight: ${FONT_WEIGHT.medium}; - max-height: 1.25rem; - & .ant-input { - padding: 0; - font-size: ${FONT_SIZE.md}; - font-weight: inherit; - } - & .ant-input::placeholder { - color: var(--text-light-color); - } - & .ant-form-item-control-input { - min-height: auto; - } -`; diff --git a/src/components/apps/kanban/NewLaneForm/NewLaneForm.tsx b/src/components/apps/kanban/NewLaneForm/NewLaneForm.tsx deleted file mode 100644 index 83606ea9a..000000000 --- a/src/components/apps/kanban/NewLaneForm/NewLaneForm.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { v4 as uuidv4 } from 'uuid'; -import { useTranslation } from 'react-i18next'; -import * as S from './NewLaneForm.styles'; -import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; - -interface NewLaneFormProps { - onAdd: (values: { id: string; title: string }) => void; - onCancel: () => void; -} - -export const NewLaneForm: React.FC = ({ onAdd, onCancel }) => { - const { t } = useTranslation(); - const handleSubmit = (values: { title: string }) => { - onAdd({ - id: uuidv4(), - title: values.title || t('kanban.unnamedLabel'), - }); - }; - - return ( - } - onFinish={handleSubmit} - > - - - - - ); -}; diff --git a/src/components/apps/kanban/NewLaneSection/NewLaneSection.styles.ts b/src/components/apps/kanban/NewLaneSection/NewLaneSection.styles.ts deleted file mode 100644 index 453fedf57..000000000 --- a/src/components/apps/kanban/NewLaneSection/NewLaneSection.styles.ts +++ /dev/null @@ -1,37 +0,0 @@ -import styled from 'styled-components'; -import { NewLaneSection as NewLane } from 'react-trello/dist/styles/Base'; -import { PlusOutlined } from '@ant-design/icons'; -import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; - -export const NewLaneSection = styled(NewLane)` - background: var(--skyblue); - margin-top: 53.28px; // Calculate based on lanes padding, margin and lane header height - height: 24rem; - width: 16rem; - border-radius: 0.4375rem; - filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.07)); - padding: 3.4375rem 1.5625rem; - display: flex; - flex-direction: column; - align-items: center; -`; - -export const CreateNewColumn = styled.div` - font-size: ${FONT_SIZE.md}; - font-weight: ${FONT_WEIGHT.semibold}; - color: var(--text-secondary-color); - display: flex; - align-items: center; - cursor: pointer; -`; - -export const NewLaneImage = styled.img` - margin-top: 3.25rem; - height: 12.625rem; -`; - -export const PlusIcon = styled(PlusOutlined)` - font-size: ${FONT_SIZE.md}; - color: var(--text-secondary-color); - margin-right: 0.625rem; -`; diff --git a/src/components/apps/kanban/NewLaneSection/NewLaneSection.tsx b/src/components/apps/kanban/NewLaneSection/NewLaneSection.tsx deleted file mode 100644 index 61d333a20..000000000 --- a/src/components/apps/kanban/NewLaneSection/NewLaneSection.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import * as S from './NewLaneSection.styles'; -import NewLaneImage from '../../../../assets/images/new-lane.webp'; -import { useTranslation } from 'react-i18next'; - -interface NewLaneSectionProps { - onClick: () => void; -} - -export const NewLaneSection: React.FC = ({ onClick }) => { - const { t } = useTranslation(); - return ( - - - - {t('kanban.createColumn')} - - - - ); -}; diff --git a/src/components/apps/kanban/interfaces.ts b/src/components/apps/kanban/interfaces.ts deleted file mode 100644 index 7ca02aa04..000000000 --- a/src/components/apps/kanban/interfaces.ts +++ /dev/null @@ -1,19 +0,0 @@ -export interface Tag { - id: string; - title: string; - bgColor: 'error' | 'warning' | 'success' | 'primary'; -} - -export interface Participant { - id: string; - name: string; - avatar?: string; -} - -export interface CardState { - id?: number | string; - title?: string; - description?: string; - tags?: Tag[]; - participants?: Participant[]; -} diff --git a/src/components/apps/kanban/newCardForm/NewCardForm/NewCardForm.styles.ts b/src/components/apps/kanban/newCardForm/NewCardForm/NewCardForm.styles.ts deleted file mode 100644 index 01700cc91..000000000 --- a/src/components/apps/kanban/newCardForm/NewCardForm/NewCardForm.styles.ts +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components'; -import { CardWrapper as Card } from 'react-trello/dist/styles/Base'; -import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm'; -import { BaseButtonsGroup } from '@app/components/common/forms/components/BaseButtonsGroup/BaseButtonsGroup'; -import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; - -export const FooterButtons = styled(BaseButtonsGroup)` - margin-top: 1rem; -`; - -export const FormInput = styled(BaseForm.Item)` - font-weight: ${FONT_WEIGHT.medium}; - max-height: 1.25rem; - - &:first-child { - font-weight: ${FONT_WEIGHT.semibold}; - } - - .ant-input { - padding: 0; - font-size: ${FONT_SIZE.xs}; - font-weight: inherit; - } - - .ant-input::placeholder { - color: var(--text-light-color); - } - - .ant-form-item-control-input { - min-height: auto; - } -`; - -export const CardWrapper = styled(Card)` - padding: 1.25rem 1rem; - - background: var(--background-color); -`; diff --git a/src/components/apps/kanban/newCardForm/NewCardForm/NewCardForm.tsx b/src/components/apps/kanban/newCardForm/NewCardForm/NewCardForm.tsx deleted file mode 100644 index e67f69198..000000000 --- a/src/components/apps/kanban/newCardForm/NewCardForm/NewCardForm.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { useMemo, useState } from 'react'; -import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/BaseButtonsForm'; -import { useTranslation } from 'react-i18next'; -import { CardState, Tag, Participant } from '../../interfaces'; -import { TagDropdown } from '../TagDropdown/TagDropdown'; -import * as S from './NewCardForm.styles'; -import { ParticipantsDropdown } from '../ParticipantsDropdown/ParticipantsDropdown'; -import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; - -const formInputs = [ - { - title: 'kanban.title', - name: 'title', - }, - { - title: 'kanban.description', - name: 'description', - }, -]; - -interface NewCardFormProps { - onAdd: (state: CardState) => void; - onCancel: () => void; -} - -export const NewCardForm: React.FC = ({ onAdd, onCancel }) => { - const [selectedTags, setSelectedTags] = useState([]); - const [selectedParticipants, setSelectedParticipants] = useState([]); - const [isLoading, setLoading] = useState(false); - - const { t } = useTranslation(); - - const onFinish = (values: []) => { - setLoading(true); - setTimeout(() => { - onAdd({ ...values, tags: selectedTags, participants: selectedParticipants }); - setLoading(false); - }, 1000); - }; - - const formItems = useMemo( - () => - formInputs.map((item, index) => ( - - - - )), - [t], - ); - - return ( - - } - onFinish={onFinish} - > - {formItems} - - - - - ); -}; diff --git a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts b/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts deleted file mode 100644 index d643dd00c..000000000 --- a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts +++ /dev/null @@ -1,51 +0,0 @@ -import styled from 'styled-components'; -import { CloseOutlined } from '@ant-design/icons'; -import { FONT_SIZE } from '@app/styles/themes/constants'; -import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox'; - -export const PopoverCheckbox = styled(BaseCheckbox)` - margin-right: 0.75rem; -`; - -export const RemoveParticipantWrapper = styled.div` - position: absolute; - right: 1rem; - top: 1rem; - cursor: pointer; -`; - -export const AddParticipant = styled.span` - font-size: ${FONT_SIZE.xs}; - line-height: 1.25rem; - text-decoration: underline; - color: var(--text-light-color); -`; - -export const ParticipantsWrapper = styled.div` - display: flex; - flex-direction: column; - gap: 1rem; -`; - -export const ParticipantRow = styled.div` - display: flex; - align-items: center; -`; - -export const ParticipantAvatar = styled.img` - height: 1.5625rem; - width: 1.5625rem; - border-radius: 50%; -`; - -export const ParticipantName = styled.div` - font-size: ${FONT_SIZE.xs}; - color: var(--text-main-color); - margin-left: 0.625rem; - margin-right: 0.625rem; -`; - -export const RemoveParticipant = styled(CloseOutlined)` - color: var(--text-light-color); - font-size: ${FONT_SIZE.xxs}; -`; diff --git a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx b/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx deleted file mode 100644 index c06c7c336..000000000 --- a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useCallback, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { BaseDropdown } from '@app/components/common/BaseDropdown/Dropdown'; -import { Participant as IParticipant } from '../../interfaces'; -import { kanbanPeople } from 'constants/kanbanPeople'; -import StubAvatar from '../../../../../assets/images/stub-avatar.webp'; -import * as S from './ParticipantsDropdown.styles'; - -interface ParticipantsDropdownProps { - selectedParticipants: IParticipant[]; - setSelectedParticipants: (state: IParticipant[]) => void; -} - -export const ParticipantsDropdown: React.FC = ({ - selectedParticipants, - setSelectedParticipants, -}) => { - const { t } = useTranslation(); - const kanbanPeopleData = useMemo(() => Object.values(kanbanPeople), []); - const selectedParticipantsIds = useMemo(() => selectedParticipants.map((item) => item.id), [selectedParticipants]); - - const onPeopleClick = useCallback( - (tag: IParticipant) => { - const isExist = selectedParticipantsIds.includes(tag.id); - - if (isExist) { - setSelectedParticipants(selectedParticipants.filter((item) => item.id !== tag.id)); - } else { - setSelectedParticipants([...selectedParticipants, tag]); - } - }, - [selectedParticipantsIds, selectedParticipants, setSelectedParticipants], - ); - - const items = useMemo( - () => - kanbanPeopleData.map((participant: IParticipant, i) => ({ - key: `${i + 1}`, - label: ( - { - onPeopleClick(participant); - e.stopPropagation(); - }} - > - - - {participant.name} - - ), - })), - [kanbanPeopleData, onPeopleClick, selectedParticipantsIds], - ); - - return ( - - {selectedParticipants && selectedParticipants.length > 0 ? ( - - {selectedParticipants.map((participant) => ( - - - {participant.name} - { - e.stopPropagation(); - onPeopleClick(participant); - }} - /> - - ))} - - ) : ( - - {t('kanban.addParticipant')} - - )} - - ); -}; diff --git a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts b/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts deleted file mode 100644 index 830fa04a5..000000000 --- a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts +++ /dev/null @@ -1,53 +0,0 @@ -import styled from 'styled-components'; -import { FONT_SIZE } from '@app/styles/themes/constants'; -import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox'; - -interface TagProps { - backgroundColor: 'error' | 'warning' | 'success' | 'primary'; -} - -export const EditTagPopoverLine = styled.span` - line-height: 1.25rem; - display: flex; - &:last-child { - padding-bottom: 0; - } - align-items: center; - cursor: pointer; -`; - -export const PopoverCheckbox = styled(BaseCheckbox)``; - -export const TagWrapper = styled.span` - height: 1.875rem; - background-color: ${(props) => `var(--${props.backgroundColor}-color)`}; - padding: 0.3125rem 0.625rem; - color: var(--text-secondary-color); - border-radius: 0.5rem; - font-size: ${FONT_SIZE.xs}; - margin-left: 1rem; -`; - -export const TagsWrapper = styled.div` - display: flex; - flex-wrap: wrap; - gap: 0.625rem; - margin-bottom: 1rem; - min-height: 1.25rem; - align-items: center; -`; - -export const TagPlusWrapper = styled.span` - display: flex; - height: 1.875rem; - align-items: center; - color: var(--lightgrey); - font-size: ${FONT_SIZE.xxl}; -`; - -export const AddTag = styled.span` - font-size: ${FONT_SIZE.xs}; - line-height: 1.25rem; - text-decoration: underline; - color: var(--text-light-color); -`; diff --git a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.tsx b/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.tsx deleted file mode 100644 index 0bc9b63bb..000000000 --- a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useCallback, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { BaseDropdown } from '@app/components/common/BaseDropdown/Dropdown'; -import { Tag as ITag } from '../../interfaces'; -import { kanbanTags } from 'constants/kanbanTags'; -import * as S from './TagDropdown.styles'; -import { BaseHashTag } from '@app/components/common/BaseHashTag/BaseHashTag'; -import { PlusCircleFilled } from '@ant-design/icons'; - -interface TagDropdownProps { - selectedTags: ITag[]; - setSelectedTags: (state: ITag[]) => void; -} - -export const TagDropdown: React.FC = ({ selectedTags, setSelectedTags }) => { - const { t } = useTranslation(); - - const kanbanTagData = useMemo(() => Object.values(kanbanTags), []); - const selectedTagsIds = useMemo(() => selectedTags.map((item) => item.id), [selectedTags]); - - const onTagClick = useCallback( - (tag: ITag) => { - const isExist = selectedTagsIds.includes(tag.id); - - if (isExist) { - setSelectedTags(selectedTags.filter((item) => item.id !== tag.id)); - } else { - setSelectedTags([...selectedTags, tag]); - } - }, - [selectedTags, selectedTagsIds, setSelectedTags], - ); - - const items = useMemo( - () => - kanbanTagData.map((tag, i) => ({ - key: `${i + 1}`, - label: ( - { - onTagClick(tag); - e.stopPropagation(); - }} - > - - #{tag.title} - - ), - })), - [kanbanTagData, onTagClick, selectedTagsIds], - ); - - return ( - - {selectedTags && selectedTags.length > 0 ? ( - - {selectedTags.map((tag) => ( - onTagClick(tag)} /> - ))} - - - - - ) : ( - - {t('kanban.addTag')} - - )} - - ); -}; diff --git a/src/components/common/BaseHashTag/BaseHashTag.styles.ts b/src/components/common/BaseHashTag/BaseHashTag.styles.ts index 61f09f3c8..858c667b7 100644 --- a/src/components/common/BaseHashTag/BaseHashTag.styles.ts +++ b/src/components/common/BaseHashTag/BaseHashTag.styles.ts @@ -1,6 +1,5 @@ import styled from 'styled-components'; import { CloseOutlined } from '@ant-design/icons'; -import { TagSpan } from 'react-trello/dist/styles/Base'; import { FONT_SIZE } from '@app/styles/themes/constants'; export const RemoveTagWrapper = styled.span` @@ -16,7 +15,15 @@ export const RemoveTagIcon = styled(CloseOutlined)` cursor: pointer; `; -export const TagWrapper = styled(TagSpan)` +// https://github.com/rcdexta/react-trello/blob/68cfec88a14312da00a5ca0e1a29bc8de40321d8/src/styles/Base.js#L210 +export const TagSpan = styled.span` + padding: 2px 3px; + border-radius: 3px; + margin: 2px 5px; + font-size: 70%; +`; + +export const TagWrapper = styled.span` border-radius: 0.5rem; display: flex; justify-content: center; diff --git a/src/components/layouts/main/sider/sidebarNavigation.tsx b/src/components/layouts/main/sider/sidebarNavigation.tsx index 97307cdf5..9db09da82 100644 --- a/src/components/layouts/main/sider/sidebarNavigation.tsx +++ b/src/components/layouts/main/sider/sidebarNavigation.tsx @@ -44,11 +44,6 @@ export const sidebarNavigation: SidebarNavigationItem[] = [ key: 'feed', url: '/apps/feed', }, - { - title: 'common.kanban', - key: 'kanban', - url: '/apps/kanban', - }, ], }, { diff --git a/src/components/router/AppRouter.tsx b/src/components/router/AppRouter.tsx index f234ee4f1..a823a77f2 100644 --- a/src/components/router/AppRouter.tsx +++ b/src/components/router/AppRouter.tsx @@ -18,7 +18,6 @@ import NftDashboardPage from '@app/pages/DashboardPages/NftDashboardPage'; import MedicalDashboardPage from '@app/pages/DashboardPages/MedicalDashboardPage'; const NewsFeedPage = React.lazy(() => import('@app/pages/NewsFeedPage')); -const KanbanPage = React.lazy(() => import('@app/pages/KanbanPage')); const DataTablesPage = React.lazy(() => import('@app/pages/DataTablesPage')); const ChartsPage = React.lazy(() => import('@app/pages/ChartsPage')); const ServerErrorPage = React.lazy(() => import('@app/pages/ServerErrorPage')); @@ -67,7 +66,6 @@ export const MEDICAL_DASHBOARD_PATH = '/medical-dashboard'; const MedicalDashboard = withLoading(MedicalDashboardPage); const NftDashboard = withLoading(NftDashboardPage); const NewsFeed = withLoading(NewsFeedPage); -const Kanban = withLoading(KanbanPage); const AdvancedForm = withLoading(AdvancedFormsPage); // UI Components @@ -135,7 +133,6 @@ export const AppRouter: React.FC = () => { } /> } /> - } /> } /> diff --git a/src/constants/config/components.ts b/src/constants/config/components.ts index 7e5708a82..8c071c7a5 100644 --- a/src/constants/config/components.ts +++ b/src/constants/config/components.ts @@ -118,13 +118,6 @@ export const components: Component[] = [ categories: ['apps'], keywords: ['feed', 'apps'], }, - { - name: 'Kanban', - title: 'common.kanban', - url: `/apps/kanban`, - categories: ['apps'], - keywords: ['kanban', 'apps', 'trello'], - }, { name: 'Log in', title: 'common.login', diff --git a/src/constants/kanbanData.ts b/src/constants/kanbanData.ts deleted file mode 100644 index 9aaff76df..000000000 --- a/src/constants/kanbanData.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { kanbanTags } from './kanbanTags'; -import { kanbanPeople } from './kanbanPeople'; - -const { high, medium, low, ui, dev } = kanbanTags; -const { anna, pavel } = kanbanPeople; - -export const kanbanData = { - lanes: [ - { - id: '1', - title: 'Backlog', - cards: [ - { - id: '11', - title: 'Marketing', - description: - 'Nam augue nibh, lobortis quis velit quis, pretium ultricies ante. Aenean nisi nibh, ornare id augue id, pharetra feugiat orci.', - tags: [high], - participants: [anna, pavel], - }, - { - id: '12', - title: 'Build a sales team', - description: - 'Fusce facilisis massa mauris, id varius justo ornare sit amet. Vivamus ut blandit nibh. Curabitur in feugiat mi.', - tags: [medium, dev], - participants: [anna, pavel], - }, - { - id: '13', - title: 'Explain every detail of the product', - description: - 'Praesent eget eleifend neque, a fermentum ex. Etiam ligula tellus, fringilla lobortis ultricies at, congue id sapien. Proin ex urna, accumsan id mattis sit amet, bibendum sed neque. Suspendisse consectetur justo purus. Duis sit amet ornare risus.', - tags: [low, dev], - participants: [anna, pavel], - }, - ], - }, - { - id: '2', - title: 'In Progress', - cards: [ - { - id: '21', - title: 'Plan the build', - description: - 'Quisque ultricies est non orci vestibulum, et iaculis mauris euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vulputate auctor massa vehicula iaculis.', - tags: [ui], - participants: [anna], - }, - { - id: '22', - title: 'Rich $1 billion valuation', - description: - 'Phasellus ornare massa non cursus aliquet. Fusce pulvinar metus quis dui eleifend maximus. Proin nec libero aliquet, feugiat neque a, lobortis ipsum.', - tags: [medium], - participants: [anna, pavel], - }, - ], - }, - { - id: '3', - title: 'Ready for test', - cards: [ - { - id: '31', - title: 'Brainstorming meetings', - description: - 'Phasellus eu neque at dui dapibus tristique vel quis nunc. Nam eget ultrices urna, tincidunt tempus lacus. Aenean quis euismod odio, et bibendum felis.', - tags: [dev], - participants: [pavel], - }, - { - id: '32', - title: 'Research how to crush the competition', - description: `Etiam varius purus ut dolor ultrices, id eleifend ligula lobortis. Nunc sagittis libero id enim ultrices consequat. Fusce facilisis dui vulputate nisi malesuada, nec mollis tellus dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;`, - tags: [low, dev], - }, - { - id: '33', - title: 'Aquire funding for scaling', - description: - 'Sed a euismod ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi venenatis sem nec est cursus, at commodo massa luctus.', - tags: [high], - }, - ], - }, - { - id: '4', - title: 'Done', - cards: [ - { - id: '41', - title: 'Finalize requirements', - description: - 'onec dictum mauris nisi, a ultricies turpis dignissim in. Nullam eleifend mauris sed augue malesuada porttitor a nec sapien. Sed nec ex ex. Mauris tellus felis, aliquet quis nulla sit amet, venenatis pharetra mauris. Nunc felis ligula, porta nec gravida a, maximus a purus.', - tags: [medium], - }, - { - id: '42', - title: 'Reach $0.5 billion valuation', - description: `Nam elementum dui rutrum massa consectetur volutpat. Aenean congue massa ac dictum fringilla. Quisque in nunc id ligula condimentum aliquam. Maecenas volutpat, tellus at ornare cursus, risus neque ornare erat, at euismod nisi diam a justo.`, - tags: [low, dev], - }, - ], - }, - ], -}; diff --git a/src/constants/kanbanPeople.ts b/src/constants/kanbanPeople.ts deleted file mode 100644 index 4a85f6b78..000000000 --- a/src/constants/kanbanPeople.ts +++ /dev/null @@ -1,15 +0,0 @@ -const avatar1 = process.env.REACT_APP_ASSETS_BUCKET + '/avatars/avatar1.webp'; -const avatar2 = process.env.REACT_APP_ASSETS_BUCKET + '/avatars/avatar2.webp'; - -export const kanbanPeople = { - anna: { - id: 'Alex', - name: 'Alex', - avatar: avatar1, - }, - pavel: { - id: 'Pavel', - name: 'Pavel', - avatar: avatar2, - }, -}; diff --git a/src/constants/kanbanTags.ts b/src/constants/kanbanTags.ts deleted file mode 100644 index 055dca0df..000000000 --- a/src/constants/kanbanTags.ts +++ /dev/null @@ -1,37 +0,0 @@ -interface Tag { - id: string; - title: string; - bgColor: 'error' | 'warning' | 'success' | 'primary'; -} - -interface KanbanTags { - [key: string]: Tag; -} - -export const kanbanTags: KanbanTags = { - high: { - id: 'high', - title: 'high', - bgColor: 'error', - }, - medium: { - id: 'medium', - title: 'medium', - bgColor: 'warning', - }, - low: { - id: 'low', - title: 'low', - bgColor: 'success', - }, - ui: { - id: 'ui', - title: 'ui', - bgColor: 'primary', - }, - dev: { - id: 'dev', - title: 'dev', - bgColor: 'primary', - }, -}; diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json index b532d1abe..d2ddbd733 100644 --- a/src/locales/de/translation.json +++ b/src/locales/de/translation.json @@ -168,7 +168,6 @@ "info": "Information", "input": "Eingang", "inputCode": "6-stelligen Code eingeben", - "kanban": "Kanban", "keywords": "Irgendwelche Schlüsselwörter?", "kg": "kg", "lastName": "Nachname", @@ -514,18 +513,6 @@ "small": "Kleine Größe", "textarea": "Textbereich" }, - "kanban": { - "addParticipant": "Beauftragten festlegen", - "addTags": "Tags hinzufügen", - "createColumn": "Neue Spalte erstellen", - "description": "Beschreibung", - "label": "Etikett", - "sameTag": "Sie können nicht dasselbe Tag hinzufügen!", - "tags": "Stichworte", - "title": "Titel", - "unnamedLabel": "Unbenanntes Etikett", - "archive": "Archivieren" - }, "login": { "facebookLink": "Weiter mit Facebook", "googleLink": "Weiter mit Google", diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index c1fb71358..ceeb314c7 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -168,7 +168,6 @@ "info": "Information", "input": "Input", "inputCode": "Input 6 digit code", - "kanban": "Kanban", "keywords": "Any keywords?", "kg": "kg", "lastName": "Last Name", @@ -514,18 +513,6 @@ "small": "small size", "textarea": "Textarea" }, - "kanban": { - "addParticipant": "Set assignee", - "addTag": "Add tag", - "createColumn": "Create new column", - "description": "Description", - "label": "Label", - "sameTag": "You can't add the same tag!", - "tags": "Tags", - "title": "Title", - "unnamedLabel": "Unnamed label", - "archive": "Archive" - }, "login": { "facebookLink": "Continue with Facebook", "googleLink": "Continue with Google", diff --git a/src/pages/KanbanPage.tsx b/src/pages/KanbanPage.tsx deleted file mode 100644 index a4baf39be..000000000 --- a/src/pages/KanbanPage.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { Kanban } from '@app/components/apps/kanban/Kanban/Kanban'; -import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; - -const KanbanPage: React.FC = () => { - const { t } = useTranslation(); - - return ( - <> - {t('common.kanban')} - - - ); -}; - -export default KanbanPage; diff --git a/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx b/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx index ed75d3c3e..73866b9fa 100644 --- a/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx +++ b/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import GoogleMapReact from 'google-map-react'; +import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'; import { useTranslation } from 'react-i18next'; import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; @@ -11,17 +11,28 @@ import { ErrorBoundary } from '@app/hocs/ErrorBoundary'; const GoogleMaps: React.FC = () => { const { t } = useTranslation(); + const { isLoaded, loadError } = useJsApiLoader({ googleMapsApiKey: '' }); + + if (loadError) { + return <>{loadError.message}; + } + return ( {t('common.googleMap')} - + {isLoaded ? ( + + ) : ( + <> + )} ); diff --git a/tsconfig.json b/tsconfig.json index 27e22f044..0b665df09 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,28 +1,28 @@ -{ - "extends": "./tsconfig.paths.json", - "compilerOptions": { - "baseUrl": "./src/", - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] -} +{ + "extends": "./tsconfig.paths.json", + "compilerOptions": { + "baseUrl": "./src/", + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} diff --git a/yarn.lock b/yarn.lock index f945b64cb..3fc641d8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1506,7 +1506,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.20.13 resolution: "@babel/runtime@npm:7.20.13" dependencies: @@ -1676,7 +1676,7 @@ __metadata: languageName: node linkType: hard -"@googlemaps/js-api-loader@npm:^1.7.0": +"@googlemaps/js-api-loader@npm:1.15.1": version: 1.15.1 resolution: "@googlemaps/js-api-loader@npm:1.15.1" dependencies: @@ -1685,6 +1685,16 @@ __metadata: languageName: node linkType: hard +"@googlemaps/markerclusterer@npm:2.0.15": + version: 2.0.15 + resolution: "@googlemaps/markerclusterer@npm:2.0.15" + dependencies: + fast-deep-equal: ^3.1.3 + supercluster: ^7.1.3 + checksum: bb3201212fe4e0d18a22979ad1aaf9796f958ddb5e2a8bc3aa4d2666ce8e81d70d05ebca7c1d8c85027775678d825408795ff34d925316f244e027dee9b0a883 + languageName: node + linkType: hard + "@hapi/address@npm:2.x.x": version: 2.1.4 resolution: "@hapi/address@npm:2.1.4" @@ -2055,13 +2065,6 @@ __metadata: languageName: node linkType: hard -"@mapbox/point-geometry@npm:^0.1.0": - version: 0.1.0 - resolution: "@mapbox/point-geometry@npm:0.1.0" - checksum: ed41c1ce0140de81039424415d9a199abba72cdb2287314e1b8c3e295da3224f7e8c1b0ae99a9b097703e7abe63e1978a518e29896989cc8bba3d482360bc22f - languageName: node - linkType: hard - "@nodelib/fs.scandir@npm:2.1.5": version: 2.1.5 resolution: "@nodelib/fs.scandir@npm:2.1.5" @@ -2186,6 +2189,37 @@ __metadata: languageName: node linkType: hard +"@react-google-maps/api@npm:^2.18.1": + version: 2.18.1 + resolution: "@react-google-maps/api@npm:2.18.1" + dependencies: + "@googlemaps/js-api-loader": 1.15.1 + "@googlemaps/markerclusterer": 2.0.15 + "@react-google-maps/infobox": 2.16.0 + "@react-google-maps/marker-clusterer": 2.16.1 + "@types/google.maps": 3.50.5 + invariant: 2.2.4 + peerDependencies: + react: ^16.8 || ^17 || ^18 + react-dom: ^16.8 || ^17 || ^18 + checksum: ad665f8ce617615bdb5a92c14867a8796b9f86be6fafc7aa6685510b5618fc5e80ea3f0b0a92fcdea75662aefacc63b1cd69a98928f43b8d2af23894e8b33470 + languageName: node + linkType: hard + +"@react-google-maps/infobox@npm:2.16.0": + version: 2.16.0 + resolution: "@react-google-maps/infobox@npm:2.16.0" + checksum: ce2532d760f56d0eef99be38fda4867efffde31ee0ba9a27f4264e54bfce90d2034664f67c17a7fa11465b516f3c91f94e6d42f3bc7b7582e139b0b04fd16e0d + languageName: node + linkType: hard + +"@react-google-maps/marker-clusterer@npm:2.16.1": + version: 2.16.1 + resolution: "@react-google-maps/marker-clusterer@npm:2.16.1" + checksum: 2b65cbe34b1e52c90bb0b175774e4296896064749b05a53344b21fd8c029d35228e0ea338bcefec97cc511505cc8b9b8ba579862b3ddd915c5f7260697509e27 + languageName: node + linkType: hard + "@react-leaflet/core@npm:^2.0.0-beta.1": version: 2.1.0 resolution: "@react-leaflet/core@npm:2.1.0" @@ -2621,12 +2655,10 @@ __metadata: languageName: node linkType: hard -"@types/google-map-react@npm:^2.1.7": - version: 2.1.7 - resolution: "@types/google-map-react@npm:2.1.7" - dependencies: - "@types/react": "*" - checksum: 0e8e014208e39624c861616021b4f8f8e085caaad3600418f33e6bf2481451ea97a1167ae4a2157cf3d1e397905721955a012b00e55d7c07d7e4bd95694dc69e +"@types/google.maps@npm:3.50.5": + version: 3.50.5 + resolution: "@types/google.maps@npm:3.50.5" + checksum: 1754518ffc1719c2086834ee1cab45b4a2a0ec007f3d1101d46afda46d7ef96a989ab977333352a1c73c5267ce2e7bec7e5bfeb74146a723be746279c3ad086c languageName: node linkType: hard @@ -3471,13 +3503,6 @@ __metadata: languageName: node linkType: hard -"@yarnpkg/lockfile@npm:^1.1.0": - version: 1.1.0 - resolution: "@yarnpkg/lockfile@npm:1.1.0" - checksum: 05b881b4866a3546861fee756e6d3812776ea47fa6eb7098f983d6d0eefa02e12b66c3fff931574120f196286a7ad4879ce02743c8bb2be36c6a576c7852083a - languageName: node - linkType: hard - "abab@npm:^2.0.3, abab@npm:^2.0.5": version: 2.0.6 resolution: "abab@npm:2.0.6" @@ -4154,13 +4179,6 @@ __metadata: languageName: node linkType: hard -"autosize@npm:^4.0.2": - version: 4.0.4 - resolution: "autosize@npm:4.0.4" - checksum: da3a53a699ef8a4cfea8f0eea2303459b3986754278d506f60c08084b3a0a34bd6fa525becaf1edcffe4eb9517b67a6442aacf6b02aee1d406e5a794ec47d4ce - languageName: node - linkType: hard - "available-typed-arrays@npm:^1.0.5": version: 1.0.5 resolution: "available-typed-arrays@npm:1.0.5" @@ -5074,7 +5092,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2": +"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.1": version: 4.1.2 resolution: "chalk@npm:4.1.2" dependencies: @@ -5218,7 +5236,7 @@ __metadata: languageName: node linkType: hard -"classnames@npm:2.x, classnames@npm:>= 2.0, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2": +"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2": version: 2.3.2 resolution: "classnames@npm:2.3.2" checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e @@ -5825,7 +5843,7 @@ __metadata: languageName: node linkType: hard -"cross-spawn@npm:^6.0.0, cross-spawn@npm:^6.0.5": +"cross-spawn@npm:^6.0.0": version: 6.0.5 resolution: "cross-spawn@npm:6.0.5" dependencies: @@ -6401,13 +6419,6 @@ __metadata: languageName: node linkType: hard -"deep-diff@npm:^0.3.5": - version: 0.3.8 - resolution: "deep-diff@npm:0.3.8" - checksum: 8a0fb6cbe468e50211836f8daa1c14798b2d7436bfbcb7d8eb0902e0d61bf1dfd48d5b9edd46a10596182b90ad25f87461b8e55111ff9257b6067ad0676f79c9 - languageName: node - linkType: hard - "deep-equal@npm:^1.0.1": version: 1.1.1 resolution: "deep-equal@npm:1.1.1" @@ -7636,7 +7647,7 @@ __metadata: languageName: node linkType: hard -"eventemitter3@npm:^4.0.0, eventemitter3@npm:^4.0.4": +"eventemitter3@npm:^4.0.0": version: 4.0.7 resolution: "eventemitter3@npm:4.0.7" checksum: 1875311c42fcfe9c707b2712c32664a245629b42bb0a5a84439762dd0fd637fc54d078155ea83c2af9e0323c9ac13687e03cfba79b03af9f40c89b4960099374 @@ -8053,15 +8064,6 @@ __metadata: languageName: node linkType: hard -"find-yarn-workspace-root@npm:^2.0.0": - version: 2.0.0 - resolution: "find-yarn-workspace-root@npm:2.0.0" - dependencies: - micromatch: ^4.0.2 - checksum: fa5ca8f9d08fe7a54ce7c0a5931ff9b7e36f9ee7b9475fb13752bcea80ec6b5f180fa5102d60b376d5526ce924ea3fc6b19301262efa0a5d248dd710f3644242 - languageName: node - linkType: hard - "flat-cache@npm:^3.0.4": version: 3.0.4 resolution: "flat-cache@npm:3.0.4" @@ -8203,7 +8205,7 @@ __metadata: languageName: node linkType: hard -"fs-extra@npm:^9.0.0, fs-extra@npm:^9.0.1": +"fs-extra@npm:^9.0.1": version: 9.1.0 resolution: "fs-extra@npm:9.1.0" dependencies: @@ -8570,21 +8572,6 @@ __metadata: languageName: node linkType: hard -"google-map-react@npm:^2.2.0": - version: 2.2.0 - resolution: "google-map-react@npm:2.2.0" - dependencies: - "@googlemaps/js-api-loader": ^1.7.0 - "@mapbox/point-geometry": ^0.1.0 - eventemitter3: ^4.0.4 - prop-types: ^15.7.2 - peerDependencies: - react: ^16.0.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 - checksum: 4fe4155e2eebf0747f55bd9982fbab12a35b01afe69b8348834bc6eaf1e608d589c38f9cd5dff0f9bf7448d6e55c3fcfa7ecd0b62706606f1c497cd5211714f4 - languageName: node - linkType: hard - "gopd@npm:^1.0.1": version: 1.0.1 resolution: "gopd@npm:1.0.1" @@ -9227,15 +9214,6 @@ __metadata: languageName: node linkType: hard -"immutability-helper@npm:^2.8.1": - version: 2.9.1 - resolution: "immutability-helper@npm:2.9.1" - dependencies: - invariant: ^2.2.0 - checksum: 8b66d20c22d517d4bff861616adec67294f1cf40bc1aedf68a5ebd5ae42c56593dc6c9bfb507f18705048bdecec03ef01f2b7817d6864fd7b06cbcc5e1f3f855 - languageName: node - linkType: hard - "import-cwd@npm:^2.0.0": version: 2.1.0 resolution: "import-cwd@npm:2.1.0" @@ -9408,7 +9386,7 @@ __metadata: languageName: node linkType: hard -"invariant@npm:^2.2.0, invariant@npm:^2.2.4": +"invariant@npm:2.2.4, invariant@npm:^2.2.4": version: 2.2.4 resolution: "invariant@npm:2.2.4" dependencies: @@ -10860,10 +10838,10 @@ __metadata: languageName: node linkType: hard -"just-curry-it@npm:^3.1.0": - version: 3.2.1 - resolution: "just-curry-it@npm:3.2.1" - checksum: 21b7bd6aaccfc908a89d16238f6b05408fd83a0489269ca5068bf99bcbc4e98c92afc368d86c64769be8c98580aabf822e00bb4c5c372d1a60619404a92cfbe0 +"kdbush@npm:^3.0.0": + version: 3.0.0 + resolution: "kdbush@npm:3.0.0" + checksum: bc5fa433958e42664a8a92457e4f0d1db55b3b8e36956aac0102964adb2eab043bdbff156570dc8d867144ceff588fb7a1c6e099ba9be068cd1767a73e1ace92 languageName: node linkType: hard @@ -10906,15 +10884,6 @@ __metadata: languageName: node linkType: hard -"klaw-sync@npm:^6.0.0": - version: 6.0.0 - resolution: "klaw-sync@npm:6.0.0" - dependencies: - graceful-fs: ^4.1.11 - checksum: 0da397f8961313c3ef8f79fb63af9002cde5a8fb2aeb1a37351feff0dd6006129c790400c3f5c3b4e757bedcabb13d21ec0a5eaef5a593d59515d4f2c291e475 - languageName: node - linkType: hard - "kleur@npm:^3.0.3": version: 3.0.3 resolution: "kleur@npm:3.0.3" @@ -11054,9 +11023,9 @@ __metadata: "@ant-design/icons": ^4.6.2 "@craco/craco": ^6.1.2 "@lit-labs/react": ^1.0.2 + "@react-google-maps/api": ^2.18.1 "@reduxjs/toolkit": ^1.7.1 "@types/country-list": ^2.1.0 - "@types/google-map-react": ^2.1.7 "@types/leaflet": ^1.7.9 "@types/react": ^18.0.28 "@types/react-dom": ^18.0.11 @@ -11086,16 +11055,13 @@ __metadata: eslint-plugin-prettier: ^3.4.0 eslint-plugin-react: ^7.24.0 eslint-plugin-react-hooks: ^4.3.0 - google-map-react: ^2.2.0 husky: ^6.0.0 i18next: ^20.4.0 leaflet: ^1.7.1 less: ^4.1.2 less-plugin-clean-css: ^1.5.1 lint-staged: ^11.0.0 - patch-package: ^6.4.7 pigeon-maps: ^0.19.7 - postinstall-postinstall: ^2.1.0 prettier: ^2.3.1 react: ^18.2.0 react-country-flag: ^3.0.2 @@ -11113,7 +11079,6 @@ __metadata: react-scripts: 4.0.3 react-simple-maps: ^2.3.0 react-slick: ^0.28.1 - react-trello: ^2.2.11 react-verification-input: ^2.0.3 round-slider: "altence/round-slider#refactor/slider" slick-carousel: ^1.8.1 @@ -12574,7 +12539,7 @@ __metadata: languageName: node linkType: hard -"open@npm:^7.0.2, open@npm:^7.4.2": +"open@npm:^7.0.2": version: 7.4.2 resolution: "open@npm:7.4.2" dependencies: @@ -12649,13 +12614,6 @@ __metadata: languageName: node linkType: hard -"os-tmpdir@npm:~1.0.2": - version: 1.0.2 - resolution: "os-tmpdir@npm:1.0.2" - checksum: 5666560f7b9f10182548bf7013883265be33620b1c1b4a4d405c25be2636f970c5488ff3e6c48de75b55d02bde037249fe5dbfbb4c0fb7714953d56aed062e6d - languageName: node - linkType: hard - "p-each-series@npm:^2.1.0": version: 2.2.0 resolution: "p-each-series@npm:2.2.0" @@ -12862,30 +12820,6 @@ __metadata: languageName: node linkType: hard -"patch-package@npm:^6.4.7": - version: 6.5.1 - resolution: "patch-package@npm:6.5.1" - dependencies: - "@yarnpkg/lockfile": ^1.1.0 - chalk: ^4.1.2 - cross-spawn: ^6.0.5 - find-yarn-workspace-root: ^2.0.0 - fs-extra: ^9.0.0 - is-ci: ^2.0.0 - klaw-sync: ^6.0.0 - minimist: ^1.2.6 - open: ^7.4.2 - rimraf: ^2.6.3 - semver: ^5.6.0 - slash: ^2.0.0 - tmp: ^0.0.33 - yaml: ^1.10.2 - bin: - patch-package: index.js - checksum: 8530ffa30f11136b527c6eddf6da48fa12856ee510a47edb1f9cdf8a025636adb82968f5fae778b5e04ce8c87915ebdf5911422b54add59a5a42e372a8f30eb2 - languageName: node - linkType: hard - "path-browserify@npm:0.0.1": version: 0.0.1 resolution: "path-browserify@npm:0.0.1" @@ -14015,13 +13949,6 @@ __metadata: languageName: node linkType: hard -"postinstall-postinstall@npm:^2.1.0": - version: 2.1.0 - resolution: "postinstall-postinstall@npm:2.1.0" - checksum: e1d34252cf8d2c5641c7d2db7426ec96e3d7a975f01c174c68f09ef5b8327bc8d5a9aa2001a45e693db2cdbf69577094d3fe6597b564ad2d2202b65fba76134b - languageName: node - linkType: hard - "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -14993,7 +14920,7 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:>= 16.3, react-dom@npm:^18.2.0": +"react-dom@npm:^18.2.0": version: 18.2.0 resolution: "react-dom@npm:18.2.0" dependencies: @@ -15073,7 +15000,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0": +"react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f @@ -15100,13 +15027,6 @@ __metadata: languageName: node linkType: hard -"react-lifecycles-compat@npm:^3.0.0": - version: 3.0.4 - resolution: "react-lifecycles-compat@npm:3.0.4" - checksum: a904b0fc0a8eeb15a148c9feb7bc17cec7ef96e71188280061fc340043fd6d8ee3ff233381f0e8f95c1cf926210b2c4a31f38182c8f35ac55057e453d6df204f - languageName: node - linkType: hard - "react-phone-number-input@npm:^3.2.17": version: 3.2.18 resolution: "react-phone-number-input@npm:3.2.18" @@ -15123,42 +15043,6 @@ __metadata: languageName: node linkType: hard -"react-popopo@npm:^2.1.9": - version: 2.1.9 - resolution: "react-popopo@npm:2.1.9" - dependencies: - classnames: ">= 2.0" - prop-types: ^15.7.2 - react: ">= 16.3" - react-dom: ">= 16.3" - styled-components: ">= 4.0" - peerDependencies: - classnames: ">= 2.0" - react: ">= 16.3" - react-dom: ">= 16.3" - styled-components: ">= 4.0" - checksum: e0488eb23f38918e23e976cc108c34bcd7f98f0490143dcaf425749afc40e8832dae7cc1edec83170fe49ece5650f275faff69e03d50faa7bdfa0ee8c136b9fe - languageName: node - linkType: hard - -"react-redux@npm:^5.0.7": - version: 5.1.2 - resolution: "react-redux@npm:5.1.2" - dependencies: - "@babel/runtime": ^7.1.2 - hoist-non-react-statics: ^3.3.0 - invariant: ^2.2.4 - loose-envify: ^1.1.0 - prop-types: ^15.6.1 - react-is: ^16.6.0 - react-lifecycles-compat: ^3.0.0 - peerDependencies: - react: ^0.14.0 || ^15.0.0-0 || ^16.0.0-0 - redux: ^2.0.0 || ^3.0.0 || ^4.0.0-0 - checksum: 2079b57f4d25a8b2f535009eb7f5be53c5d3334b4ad2224f63309e3caa1b90209f6b6321c2bd509f715333102d645a8ed698f2c6298f05801095776c295478a8 - languageName: node - linkType: hard - "react-redux@npm:^7.2.6": version: 7.2.9 resolution: "react-redux@npm:7.2.9" @@ -15347,35 +15231,6 @@ __metadata: languageName: node linkType: hard -"react-trello@npm:^2.2.11": - version: 2.2.11 - resolution: "react-trello@npm:2.2.11" - dependencies: - autosize: ^4.0.2 - classnames: ^2.2.6 - immutability-helper: ^2.8.1 - lodash: ^4.17.11 - prop-types: ^15.7.2 - react-popopo: ^2.1.9 - react-redux: ^5.0.7 - redux: ^4.0.0 - redux-actions: ^2.6.1 - redux-logger: ^3.0.6 - trello-smooth-dnd: 1.0.0 - uuid: ^3.3.2 - peerDependencies: - lodash: ">= 4.17.11" - react: "*" - react-dom: "*" - react-redux: ">= 5.0.7" - redux: ">= 4.0.0" - redux-actions: ">= 2.6.1" - redux-logger: ">= 3.0.6" - styled-components: ">= 4.0.3" - checksum: c577db2a6deb5552507997056190f3f8f912c4e413d5135803021604af7033357490d602e84a9cb706e44cfa83e8007d52f58ab65772e41b46765cac607d94d1 - languageName: node - linkType: hard - "react-verification-input@npm:^2.0.3": version: 2.0.8 resolution: "react-verification-input@npm:2.0.8" @@ -15386,7 +15241,7 @@ __metadata: languageName: node linkType: hard -"react@npm:>= 16.3, react@npm:^18.2.0": +"react@npm:^18.2.0": version: 18.2.0 resolution: "react@npm:18.2.0" dependencies: @@ -15483,35 +15338,6 @@ __metadata: languageName: node linkType: hard -"reduce-reducers@npm:^0.4.3": - version: 0.4.3 - resolution: "reduce-reducers@npm:0.4.3" - checksum: 6e33cafc4e7c67e8973fbde543839c3efd982a712a4fb15f6cdf45072a9fa2c17aef1f9a44330665a2c351ac7ebbb8a47afcec2932ee486c72cfd04ed1e2ad0c - languageName: node - linkType: hard - -"redux-actions@npm:^2.6.1": - version: 2.6.5 - resolution: "redux-actions@npm:2.6.5" - dependencies: - invariant: ^2.2.4 - just-curry-it: ^3.1.0 - loose-envify: ^1.4.0 - reduce-reducers: ^0.4.3 - to-camel-case: ^1.0.0 - checksum: 677a727d0be42aa1cbdb4c8d6296b4167c0c4ce4f28d36453764edba3c4dc5f82064290ce494209fa56eeb245262b4cdc58e7e6a50fe2f17e1d94d79c387e9e3 - languageName: node - linkType: hard - -"redux-logger@npm:^3.0.6": - version: 3.0.6 - resolution: "redux-logger@npm:3.0.6" - dependencies: - deep-diff: ^0.3.5 - checksum: c40f63c44c6475cf6374ae0eaa810d913f142614cb80692a0beacaf135c5dc3eb3e2cdd4296f01446ba48cb69b82e81363b84d829f1f6659382c991022a814ac - languageName: node - linkType: hard - "redux-thunk@npm:^2.4.2": version: 2.4.2 resolution: "redux-thunk@npm:2.4.2" @@ -16529,13 +16355,6 @@ __metadata: languageName: node linkType: hard -"slash@npm:^2.0.0": - version: 2.0.0 - resolution: "slash@npm:2.0.0" - checksum: 512d4350735375bd11647233cb0e2f93beca6f53441015eea241fe784d8068281c3987fbaa93e7ef1c38df68d9c60013045c92837423c69115297d6169aa85e6 - languageName: node - linkType: hard - "slash@npm:^3.0.0": version: 3.0.0 resolution: "slash@npm:3.0.0" @@ -17204,7 +17023,7 @@ __metadata: languageName: node linkType: hard -"styled-components@npm:>= 4.0, styled-components@npm:^5.3.0": +"styled-components@npm:^5.3.0": version: 5.3.6 resolution: "styled-components@npm:5.3.6" dependencies: @@ -17332,6 +17151,15 @@ __metadata: languageName: node linkType: hard +"supercluster@npm:^7.1.3": + version: 7.1.5 + resolution: "supercluster@npm:7.1.5" + dependencies: + kdbush: ^3.0.0 + checksum: 69863238870093b96617135884721b6343746e14f396b2d67d6b55c52c362ec0516c5e386aa21815e75a9cef2054e831ac34023d0d8b600091d28cea0794f027 + languageName: node + linkType: hard + "supports-color@npm:8.1.1, supports-color@npm:^8.0.0": version: 8.1.1 resolution: "supports-color@npm:8.1.1" @@ -17628,15 +17456,6 @@ __metadata: languageName: node linkType: hard -"tmp@npm:^0.0.33": - version: 0.0.33 - resolution: "tmp@npm:0.0.33" - dependencies: - os-tmpdir: ~1.0.2 - checksum: 902d7aceb74453ea02abbf58c203f4a8fc1cead89b60b31e354f74ed5b3fb09ea817f94fb310f884a5d16987dd9fa5a735412a7c2dd088dd3d415aa819ae3a28 - languageName: node - linkType: hard - "tmpl@npm:1.0.5": version: 1.0.5 resolution: "tmpl@npm:1.0.5" @@ -17651,15 +17470,6 @@ __metadata: languageName: node linkType: hard -"to-camel-case@npm:^1.0.0": - version: 1.0.0 - resolution: "to-camel-case@npm:1.0.0" - dependencies: - to-space-case: ^1.0.0 - checksum: 2f74cfcffa58e8ddede7e01a03eda2cc3f0ab50efdad1d0f1092d55b4e499be43846d1f9087c458fa9efde4958e407738197d65858272c56c915b649b9ca1e62 - languageName: node - linkType: hard - "to-fast-properties@npm:^2.0.0": version: 2.0.0 resolution: "to-fast-properties@npm:2.0.0" @@ -17667,13 +17477,6 @@ __metadata: languageName: node linkType: hard -"to-no-case@npm:^1.0.0": - version: 1.0.2 - resolution: "to-no-case@npm:1.0.2" - checksum: 1d85326eeb89f9f3a805bf5b395bcabb8556e882350164c1faa10846076732f4cec02ac95b016e7d6bb2f55e448ce5dd227c7699ec43e387c705a5b2b1ee2963 - languageName: node - linkType: hard - "to-object-path@npm:^0.3.0": version: 0.3.0 resolution: "to-object-path@npm:0.3.0" @@ -17714,15 +17517,6 @@ __metadata: languageName: node linkType: hard -"to-space-case@npm:^1.0.0": - version: 1.0.0 - resolution: "to-space-case@npm:1.0.0" - dependencies: - to-no-case: ^1.0.0 - checksum: 157cebe3e98e7cb465fe1978cf26450cc8ea8e637a01039854fac7ed60ad074e5e18b32333cc5f30df81b81ca374d63df768cd4c1fa0fe672605f965376227f4 - languageName: node - linkType: hard - "toggle-selection@npm:^1.0.6": version: 1.0.6 resolution: "toggle-selection@npm:1.0.6" @@ -17778,13 +17572,6 @@ __metadata: languageName: node linkType: hard -"trello-smooth-dnd@npm:1.0.0": - version: 1.0.0 - resolution: "trello-smooth-dnd@npm:1.0.0" - checksum: 979326f8bce26b9b5f0caa911298ce00dc3e8b57edaf99beaf29cdc6ac15e411a8b3452e071dea842a399cc9a54214cf0d845bcc4e4f79cc9479ddbafcf701eb - languageName: node - linkType: hard - "trim-newlines@npm:^3.0.0": version: 3.0.1 resolution: "trim-newlines@npm:3.0.1" @@ -19219,7 +19006,7 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^1.10.0, yaml@npm:^1.10.2": +"yaml@npm:^1.10.0": version: 1.10.2 resolution: "yaml@npm:1.10.2" checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f From e6e87d5f41b6fe64639290d250514642ae59444f Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 24 Feb 2023 17:01:36 +0200 Subject: [PATCH 5/7] remove ErrorBoundary.tsx --- src/hocs/ErrorBoundary.tsx | 43 ------------------- src/index.tsx | 2 +- .../maps/GoogleMapsPage/GoogleMapsPage.tsx | 6 +-- 3 files changed, 3 insertions(+), 48 deletions(-) delete mode 100644 src/hocs/ErrorBoundary.tsx diff --git a/src/hocs/ErrorBoundary.tsx b/src/hocs/ErrorBoundary.tsx deleted file mode 100644 index f7c2bdcbf..000000000 --- a/src/hocs/ErrorBoundary.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, ReactNode, ErrorInfo, ComponentType, PropsWithChildren } from 'react'; - -interface ErrorBoundaryState { - error: Error | null; -} - -export class ErrorBoundary extends Component { - state: ErrorBoundaryState = { error: null }; - - componentDidCatch(error: Error, errorInfo: ErrorInfo): void { - this.setState({ error }); - console.error(error, errorInfo); - } - - static getDerivedStateFromError(error: Error): ErrorBoundaryState { - return { error }; - } - - render(): ReactNode { - const { error } = this.state; - - if (!error) { - return this.props.children; - } - - return ( -
-

Something went wrong.

-
{error.toString()}
-
- ); - } -} - -export const withErrorBoundary = ( - Component: ComponentType, -): ((props: Props) => JSX.Element) => { - return (props: Props) => ( - - - - ); -}; diff --git a/src/index.tsx b/src/index.tsx index 87bf5f85f..ded2d8da7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -39,4 +39,4 @@ serviceWorkerRegistration.register({ // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(console.log); +reportWebVitals(); diff --git a/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx b/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx index 73866b9fa..bc55612d8 100644 --- a/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx +++ b/src/pages/maps/GoogleMapsPage/GoogleMapsPage.tsx @@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next'; import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; import * as S from '@app/pages/maps/maps.styles'; -import { ErrorBoundary } from '@app/hocs/ErrorBoundary'; - const GoogleMaps: React.FC = () => { const { t } = useTranslation(); @@ -18,7 +16,7 @@ const GoogleMaps: React.FC = () => { } return ( - + <> {t('common.googleMap')} {isLoaded ? ( @@ -34,7 +32,7 @@ const GoogleMaps: React.FC = () => { <> )} - + ); }; From ac86138e1c230cc98680ad40e4efafbcf0bfe184 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 24 Feb 2023 18:39:29 +0200 Subject: [PATCH 6/7] remove warning --- .../NotificationsOverlay/NotificationsOverlay.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx index 63ea2ff82..56373b76b 100644 --- a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx +++ b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, ReactNode } from 'react'; import { Trans } from 'react-i18next'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; @@ -41,7 +41,7 @@ export const NotificationsOverlay: React.FC = ({ { - { place: t((notification as Mention).place) } as any // todo: remove any + { place: t((notification as Mention).place) } as unknown as ReactNode // todo: remove casting } From 6f59d53beb72e9df8d7032c37830d8305dd0d334 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 27 Feb 2023 12:52:28 +0200 Subject: [PATCH 7/7] remove unused component, CRLF to LF --- .../common/BaseHashTag/BaseHashTag.styles.ts | 8 --- tsconfig.json | 56 +++++++++---------- 2 files changed, 28 insertions(+), 36 deletions(-) diff --git a/src/components/common/BaseHashTag/BaseHashTag.styles.ts b/src/components/common/BaseHashTag/BaseHashTag.styles.ts index 858c667b7..2a0083959 100644 --- a/src/components/common/BaseHashTag/BaseHashTag.styles.ts +++ b/src/components/common/BaseHashTag/BaseHashTag.styles.ts @@ -15,14 +15,6 @@ export const RemoveTagIcon = styled(CloseOutlined)` cursor: pointer; `; -// https://github.com/rcdexta/react-trello/blob/68cfec88a14312da00a5ca0e1a29bc8de40321d8/src/styles/Base.js#L210 -export const TagSpan = styled.span` - padding: 2px 3px; - border-radius: 3px; - margin: 2px 5px; - font-size: 70%; -`; - export const TagWrapper = styled.span` border-radius: 0.5rem; display: flex; diff --git a/tsconfig.json b/tsconfig.json index 0b665df09..27e22f044 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,28 +1,28 @@ -{ - "extends": "./tsconfig.paths.json", - "compilerOptions": { - "baseUrl": "./src/", - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] -} +{ + "extends": "./tsconfig.paths.json", + "compilerOptions": { + "baseUrl": "./src/", + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +}