From a509ef0332863238b325f168c22780946aa1ed28 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Wed, 7 Feb 2024 14:44:26 +0500 Subject: [PATCH 01/40] ErrorBoundary moved from common to shared --- .../{common => shared}/components/ErrorBoundary/ErrorBoundary.js | 1 + packages/{common => shared}/components/ErrorBoundary/index.js | 0 2 files changed, 1 insertion(+) rename packages/{common => shared}/components/ErrorBoundary/ErrorBoundary.js (99%) rename packages/{common => shared}/components/ErrorBoundary/index.js (100%) diff --git a/packages/common/components/ErrorBoundary/ErrorBoundary.js b/packages/shared/components/ErrorBoundary/ErrorBoundary.js similarity index 99% rename from packages/common/components/ErrorBoundary/ErrorBoundary.js rename to packages/shared/components/ErrorBoundary/ErrorBoundary.js index 32fd46eb05..be8d992605 100644 --- a/packages/common/components/ErrorBoundary/ErrorBoundary.js +++ b/packages/shared/components/ErrorBoundary/ErrorBoundary.js @@ -1,5 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; + import Error520 from "client/Error520"; class ErrorBoundary extends React.Component { diff --git a/packages/common/components/ErrorBoundary/index.js b/packages/shared/components/ErrorBoundary/index.js similarity index 100% rename from packages/common/components/ErrorBoundary/index.js rename to packages/shared/components/ErrorBoundary/index.js From 008fb7232848f5f9ef9ce9ff00613bd138e411e9 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Wed, 7 Feb 2024 15:38:43 +0500 Subject: [PATCH 02/40] Shared:Components:ErrorBoundary Rewritten to typescript --- packages/client/src/App.js | 2 +- .../client/src/components/System/index.js | 2 +- packages/client/src/routes/client.js | 2 +- packages/client/src/routes/confirm.js | 2 +- packages/client/src/routes/portalSettings.js | 204 ++++++++++-------- packages/management/src/Client.tsx | 2 +- packages/management/src/router.tsx | 2 +- .../components/ErrorBoundary/ErrorBoundary.js | 39 ---- .../shared/components/ErrorBoundary/index.js | 1 - .../error-boundary/ErrorBoundary.tsx | 47 ++++ .../error-boundary/ErrorBoundary.types.ts | 9 + packages/shared/index.d.ts | 3 + 12 files changed, 178 insertions(+), 137 deletions(-) delete mode 100644 packages/shared/components/ErrorBoundary/ErrorBoundary.js delete mode 100644 packages/shared/components/ErrorBoundary/index.js create mode 100644 packages/shared/components/error-boundary/ErrorBoundary.tsx create mode 100644 packages/shared/components/error-boundary/ErrorBoundary.types.ts diff --git a/packages/client/src/App.js b/packages/client/src/App.js index ae69ca2096..a045758d4d 100644 --- a/packages/client/src/App.js +++ b/packages/client/src/App.js @@ -2,7 +2,7 @@ import React from "react"; import { RouterProvider } from "react-router-dom"; -import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import ErrorBoundary from "@docspace/shared/components/error-boundary/ErrorBoundary"; import "@docspace/common/custom.scss"; import router from "./router"; diff --git a/packages/client/src/components/System/index.js b/packages/client/src/components/System/index.js index fa96f51f73..db1119e30f 100644 --- a/packages/client/src/components/System/index.js +++ b/packages/client/src/components/System/index.js @@ -1,6 +1,6 @@ import React from "react"; import AppLoader from "@docspace/common/components/AppLoader"; -import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import ErrorBoundary from "@docspace/shared/components/error-boundary/ErrorBoundary"; import Error520 from "client/Error520"; import Error404 from "client/Error404"; diff --git a/packages/client/src/routes/client.js b/packages/client/src/routes/client.js index f3259b21f8..b58f7410ee 100644 --- a/packages/client/src/routes/client.js +++ b/packages/client/src/routes/client.js @@ -4,7 +4,7 @@ import loadable from "@loadable/component"; import PrivateRoute from "@docspace/common/components/PrivateRoute"; import PublicRoute from "@docspace/common/components/PublicRoute"; -import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import ErrorBoundary from "@docspace/shared/components/error-boundary/ErrorBoundary"; import Error404 from "SRC_DIR/pages/Errors/404"; import FilesView from "SRC_DIR/pages/Home/View/Files"; diff --git a/packages/client/src/routes/confirm.js b/packages/client/src/routes/confirm.js index 2e59be5bb5..772a14fba0 100644 --- a/packages/client/src/routes/confirm.js +++ b/packages/client/src/routes/confirm.js @@ -2,7 +2,7 @@ import React from "react"; import loadable from "@loadable/component"; import ConfirmRoute from "../helpers/confirmRoute"; -import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import ErrorBoundary from "@docspace/shared/components/error-boundary/ErrorBoundary"; import Error404 from "SRC_DIR/pages/Errors/404"; import { AuthenticatedAction } from "../helpers/enums"; diff --git a/packages/client/src/routes/portalSettings.js b/packages/client/src/routes/portalSettings.js index 1ce45bad8e..4f7b5ed12f 100644 --- a/packages/client/src/routes/portalSettings.js +++ b/packages/client/src/routes/portalSettings.js @@ -3,7 +3,7 @@ import { Navigate } from "react-router-dom"; import loadable from "@loadable/component"; import PrivateRoute from "@docspace/common/components/PrivateRoute"; -import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import ErrorBoundary from "@docspace/shared/components/error-boundary/ErrorBoundary"; import Error404 from "SRC_DIR/pages/Errors/404"; @@ -11,127 +11,149 @@ import { generalRoutes } from "./general"; const PortalSettings = loadable(() => import("../pages/PortalSettings")); -const CustomizationSettings = loadable(() => - import("../pages/PortalSettings/categories/common/index.js") +const CustomizationSettings = loadable( + () => import("../pages/PortalSettings/categories/common/index.js") ); -const LanguageAndTimeZoneSettings = loadable(() => - import( - "../pages/PortalSettings/categories/common/Customization/language-and-time-zone" - ) +const LanguageAndTimeZoneSettings = loadable( + () => + import( + "../pages/PortalSettings/categories/common/Customization/language-and-time-zone" + ) ); -const WelcomePageSettings = loadable(() => - import( - "../pages/PortalSettings/categories/common/Customization/welcome-page-settings" - ) +const WelcomePageSettings = loadable( + () => + import( + "../pages/PortalSettings/categories/common/Customization/welcome-page-settings" + ) ); -const DNSSettings = loadable(() => - import("../pages/PortalSettings/categories/common/Customization/dns-settings") +const DNSSettings = loadable( + () => + import( + "../pages/PortalSettings/categories/common/Customization/dns-settings" + ) ); -const PortalRenaming = loadable(() => - import( - "../pages/PortalSettings/categories/common/Customization/portal-renaming" - ) +const PortalRenaming = loadable( + () => + import( + "../pages/PortalSettings/categories/common/Customization/portal-renaming" + ) ); -const WhiteLabel = loadable(() => - import("../pages/PortalSettings/categories/common/Branding/whitelabel") +const WhiteLabel = loadable( + () => import("../pages/PortalSettings/categories/common/Branding/whitelabel") ); -const CompanyInfoSettings = loadable(() => - import( - "../pages/PortalSettings/categories/common/Branding/companyInfoSettings" - ) +const CompanyInfoSettings = loadable( + () => + import( + "../pages/PortalSettings/categories/common/Branding/companyInfoSettings" + ) ); -const AdditionalResources = loadable(() => - import( - "../pages/PortalSettings/categories/common/Branding/additionalResources" - ) +const AdditionalResources = loadable( + () => + import( + "../pages/PortalSettings/categories/common/Branding/additionalResources" + ) ); -const SecuritySettings = loadable(() => - import("../pages/PortalSettings/categories/security/index.js") +const SecuritySettings = loadable( + () => import("../pages/PortalSettings/categories/security/index.js") ); -const TfaPage = loadable(() => - import("../pages/PortalSettings/categories/security/access-portal/tfa") +const TfaPage = loadable( + () => import("../pages/PortalSettings/categories/security/access-portal/tfa") ); -const PasswordStrengthPage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/passwordStrength" - ) +const PasswordStrengthPage = loadable( + () => + import( + "../pages/PortalSettings/categories/security/access-portal/passwordStrength" + ) ); -const TrustedMailPage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/trustedMail" - ) +const TrustedMailPage = loadable( + () => + import( + "../pages/PortalSettings/categories/security/access-portal/trustedMail" + ) ); -const IpSecurityPage = loadable(() => - import("../pages/PortalSettings/categories/security/access-portal/ipSecurity") +const IpSecurityPage = loadable( + () => + import( + "../pages/PortalSettings/categories/security/access-portal/ipSecurity" + ) ); -const BruteForceProtectionPage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/bruteForceProtection" - ) +const BruteForceProtectionPage = loadable( + () => + import( + "../pages/PortalSettings/categories/security/access-portal/bruteForceProtection" + ) ); -const AdminMessagePage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/adminMessage" - ) +const AdminMessagePage = loadable( + () => + import( + "../pages/PortalSettings/categories/security/access-portal/adminMessage" + ) ); -const SessionLifetimePage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/sessionLifetime" - ) +const SessionLifetimePage = loadable( + () => + import( + "../pages/PortalSettings/categories/security/access-portal/sessionLifetime" + ) ); -const Integration = loadable(() => - import("../pages/PortalSettings/categories/integration") +const Integration = loadable( + () => import("../pages/PortalSettings/categories/integration") ); -const Payments = loadable(() => - import("../pages/PortalSettings/categories/payments") +const Payments = loadable( + () => import("../pages/PortalSettings/categories/payments") ); -const ThirdParty = loadable(() => - import( - "../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings" - ) +const ThirdParty = loadable( + () => + import( + "../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings" + ) ); -const DocumentService = loadable(() => - import("../pages/PortalSettings/categories/integration/DocumentService") +const DocumentService = loadable( + () => import("../pages/PortalSettings/categories/integration/DocumentService") ); -const SingleSignOn = loadable(() => - import("../pages/PortalSettings/categories/integration/SingleSignOn") +const SingleSignOn = loadable( + () => import("../pages/PortalSettings/categories/integration/SingleSignOn") ); -const SPSettings = loadable(() => - import( - "../pages/PortalSettings/categories/integration/SingleSignOn/SPSettings" - ) +const SPSettings = loadable( + () => + import( + "../pages/PortalSettings/categories/integration/SingleSignOn/SPSettings" + ) ); -const SPMetadata = loadable(() => - import( - "../pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata" - ) +const SPMetadata = loadable( + () => + import( + "../pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata" + ) ); -const DeveloperTools = loadable(() => - import("../pages/PortalSettings/categories/developer-tools/index.js") +const DeveloperTools = loadable( + () => import("../pages/PortalSettings/categories/developer-tools/index.js") ); -const WebhookHistory = loadable(() => - import( - "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory" - ) +const WebhookHistory = loadable( + () => + import( + "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory" + ) ); -const WebhookDetails = loadable(() => - import( - "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails" - ) +const WebhookDetails = loadable( + () => + import( + "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails" + ) ); -const Backup = loadable(() => - import("../pages/PortalSettings/categories/data-management/index") +const Backup = loadable( + () => import("../pages/PortalSettings/categories/data-management/index") ); -const DeleteDataPage = loadable(() => - import("../pages/PortalSettings/categories/delete-data") +const DeleteDataPage = loadable( + () => import("../pages/PortalSettings/categories/delete-data") ); -const RestoreBackup = loadable(() => - import( - "../pages/PortalSettings/categories/data-management/backup/restore-backup/index" - ) +const RestoreBackup = loadable( + () => + import( + "../pages/PortalSettings/categories/data-management/backup/restore-backup/index" + ) ); const Bonus = loadable(() => import("../pages/Bonus")); diff --git a/packages/management/src/Client.tsx b/packages/management/src/Client.tsx index 6438c69c6e..bdc0fd0a94 100644 --- a/packages/management/src/Client.tsx +++ b/packages/management/src/Client.tsx @@ -1,7 +1,7 @@ import React from "react"; import { RouterProvider } from "react-router-dom"; -import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import ErrorBoundary from "@docspace/shared/components/error-boundary/ErrorBoundary"; import router from "./router"; const Client = () => { diff --git a/packages/management/src/router.tsx b/packages/management/src/router.tsx index dede9e7223..f0e95cb7b9 100644 --- a/packages/management/src/router.tsx +++ b/packages/management/src/router.tsx @@ -12,7 +12,7 @@ import Backup from "./categories/backup"; import Restore from "./categories/restore"; import Payments from "./categories/payments"; -import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import ErrorBoundary from "@docspace/shared/components/error-boundary/ErrorBoundary"; import Error404 from "client/Error404"; diff --git a/packages/shared/components/ErrorBoundary/ErrorBoundary.js b/packages/shared/components/ErrorBoundary/ErrorBoundary.js deleted file mode 100644 index be8d992605..0000000000 --- a/packages/shared/components/ErrorBoundary/ErrorBoundary.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; - -import Error520 from "client/Error520"; - -class ErrorBoundary extends React.Component { - constructor(props) { - super(props); - this.state = { error: null }; - } - - // eslint-disable-next-line no-unused-vars - static getDerivedStateFromError(error) { - // Update state so the next render will show the fallback UI. - return { error: error ?? "Unhandled exception" }; - } - - componentDidCatch(error, errorInfo) { - // You can also log the error to an error reporting service - console.error(error, errorInfo); - this.props.onError && this.props.onError(); - } - - render() { - if (this.state.error) { - // You can render any custom fallback UI - return ; - } - - return this.props.children; - } -} - -ErrorBoundary.propTypes = { - children: PropTypes.any, - onError: PropTypes.func, -}; - -export default ErrorBoundary; diff --git a/packages/shared/components/ErrorBoundary/index.js b/packages/shared/components/ErrorBoundary/index.js deleted file mode 100644 index 3cf942473c..0000000000 --- a/packages/shared/components/ErrorBoundary/index.js +++ /dev/null @@ -1 +0,0 @@ -export default from "./ErrorBoundary"; diff --git a/packages/shared/components/error-boundary/ErrorBoundary.tsx b/packages/shared/components/error-boundary/ErrorBoundary.tsx new file mode 100644 index 0000000000..f7e7de8e47 --- /dev/null +++ b/packages/shared/components/error-boundary/ErrorBoundary.tsx @@ -0,0 +1,47 @@ +import React, { ErrorInfo } from "react"; + +import Error520 from "client/Error520"; + +import type { + ErrorBoundaryProps, + ErrorBoundaryState, +} from "./ErrorBoundary.types"; + +class ErrorBoundary extends React.Component< + ErrorBoundaryProps, + ErrorBoundaryState +> { + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { error: null }; + } + + public static getDerivedStateFromError(error?: Error): ErrorBoundaryState { + // Update state so the next render will show the fallback UI. + return { error: error ?? "Unhandled exception" }; + } + + public componentDidCatch(error: Error, errorInfo: ErrorInfo) { + // You can also log the error to an error reporting service + // eslint-disable-next-line no-console + console.error(error, errorInfo); + + const { onError } = this.props; + + onError?.(); + } + + public render() { + const { error } = this.state; + const { children } = this.props; + + if (error) { + // You can render any custom fallback UI + return ; + } + + return children; + } +} + +export default ErrorBoundary; diff --git a/packages/shared/components/error-boundary/ErrorBoundary.types.ts b/packages/shared/components/error-boundary/ErrorBoundary.types.ts new file mode 100644 index 0000000000..49d71d2710 --- /dev/null +++ b/packages/shared/components/error-boundary/ErrorBoundary.types.ts @@ -0,0 +1,9 @@ +import type { PropsWithChildren } from "react"; + +export interface ErrorBoundaryProps extends PropsWithChildren { + onError?: VoidFunction; +} + +export interface ErrorBoundaryState { + error: Error | null | string; +} diff --git a/packages/shared/index.d.ts b/packages/shared/index.d.ts index a6bbf1ed5a..ad39a5cf2c 100644 --- a/packages/shared/index.d.ts +++ b/packages/shared/index.d.ts @@ -28,6 +28,9 @@ declare module "react-values" { export { StringValue, BooleanValue }; } +/** module federation */ +declare module "client/*"; + declare module "resize-image" { type ImageFormat = "png" | "gif" | "bmp" | "jpeg" | "webp"; From 4c2cfce25e2376effb930d4a41247bb5e7660b1d Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 12:48:02 +0500 Subject: [PATCH 03/40] Errors moved from client to shared --- .../src/pages/Errors => shared/components/errors}/401/i18n.js | 0 .../src/pages/Errors => shared/components/errors}/401/index.js | 0 .../src/pages/Errors => shared/components/errors}/403/i18n.js | 0 .../src/pages/Errors => shared/components/errors}/403/index.js | 0 .../src/pages/Errors => shared/components/errors}/404/i18n.js | 0 .../src/pages/Errors => shared/components/errors}/404/index.js | 0 .../src/pages/Errors => shared/components/errors}/520/i18n.js | 0 .../src/pages/Errors => shared/components/errors}/520/index.js | 0 .../Errors => shared/components/errors}/AccessRestricted/i18n.js | 0 .../Errors => shared/components/errors}/AccessRestricted/index.js | 0 .../pages/Errors => shared/components/errors}/Unavailable/i18n.js | 0 .../Errors => shared/components/errors}/Unavailable/index.js | 0 .../src/pages/Errors => shared/components/errors}/index.js | 0 .../src/pages/Errors => shared/components/errors}/offline/i18n.js | 0 .../pages/Errors => shared/components/errors}/offline/index.js | 0 15 files changed, 0 insertions(+), 0 deletions(-) rename packages/{client/src/pages/Errors => shared/components/errors}/401/i18n.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/401/index.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/403/i18n.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/403/index.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/404/i18n.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/404/index.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/520/i18n.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/520/index.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/AccessRestricted/i18n.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/AccessRestricted/index.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/Unavailable/i18n.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/Unavailable/index.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/index.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/offline/i18n.js (100%) rename packages/{client/src/pages/Errors => shared/components/errors}/offline/index.js (100%) diff --git a/packages/client/src/pages/Errors/401/i18n.js b/packages/shared/components/errors/401/i18n.js similarity index 100% rename from packages/client/src/pages/Errors/401/i18n.js rename to packages/shared/components/errors/401/i18n.js diff --git a/packages/client/src/pages/Errors/401/index.js b/packages/shared/components/errors/401/index.js similarity index 100% rename from packages/client/src/pages/Errors/401/index.js rename to packages/shared/components/errors/401/index.js diff --git a/packages/client/src/pages/Errors/403/i18n.js b/packages/shared/components/errors/403/i18n.js similarity index 100% rename from packages/client/src/pages/Errors/403/i18n.js rename to packages/shared/components/errors/403/i18n.js diff --git a/packages/client/src/pages/Errors/403/index.js b/packages/shared/components/errors/403/index.js similarity index 100% rename from packages/client/src/pages/Errors/403/index.js rename to packages/shared/components/errors/403/index.js diff --git a/packages/client/src/pages/Errors/404/i18n.js b/packages/shared/components/errors/404/i18n.js similarity index 100% rename from packages/client/src/pages/Errors/404/i18n.js rename to packages/shared/components/errors/404/i18n.js diff --git a/packages/client/src/pages/Errors/404/index.js b/packages/shared/components/errors/404/index.js similarity index 100% rename from packages/client/src/pages/Errors/404/index.js rename to packages/shared/components/errors/404/index.js diff --git a/packages/client/src/pages/Errors/520/i18n.js b/packages/shared/components/errors/520/i18n.js similarity index 100% rename from packages/client/src/pages/Errors/520/i18n.js rename to packages/shared/components/errors/520/i18n.js diff --git a/packages/client/src/pages/Errors/520/index.js b/packages/shared/components/errors/520/index.js similarity index 100% rename from packages/client/src/pages/Errors/520/index.js rename to packages/shared/components/errors/520/index.js diff --git a/packages/client/src/pages/Errors/AccessRestricted/i18n.js b/packages/shared/components/errors/AccessRestricted/i18n.js similarity index 100% rename from packages/client/src/pages/Errors/AccessRestricted/i18n.js rename to packages/shared/components/errors/AccessRestricted/i18n.js diff --git a/packages/client/src/pages/Errors/AccessRestricted/index.js b/packages/shared/components/errors/AccessRestricted/index.js similarity index 100% rename from packages/client/src/pages/Errors/AccessRestricted/index.js rename to packages/shared/components/errors/AccessRestricted/index.js diff --git a/packages/client/src/pages/Errors/Unavailable/i18n.js b/packages/shared/components/errors/Unavailable/i18n.js similarity index 100% rename from packages/client/src/pages/Errors/Unavailable/i18n.js rename to packages/shared/components/errors/Unavailable/i18n.js diff --git a/packages/client/src/pages/Errors/Unavailable/index.js b/packages/shared/components/errors/Unavailable/index.js similarity index 100% rename from packages/client/src/pages/Errors/Unavailable/index.js rename to packages/shared/components/errors/Unavailable/index.js diff --git a/packages/client/src/pages/Errors/index.js b/packages/shared/components/errors/index.js similarity index 100% rename from packages/client/src/pages/Errors/index.js rename to packages/shared/components/errors/index.js diff --git a/packages/client/src/pages/Errors/offline/i18n.js b/packages/shared/components/errors/offline/i18n.js similarity index 100% rename from packages/client/src/pages/Errors/offline/i18n.js rename to packages/shared/components/errors/offline/i18n.js diff --git a/packages/client/src/pages/Errors/offline/index.js b/packages/shared/components/errors/offline/index.js similarity index 100% rename from packages/client/src/pages/Errors/offline/index.js rename to packages/shared/components/errors/offline/index.js From 797b37a6f9ea2d37c7986cb44ee9c07c2ee779a3 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 12:58:38 +0500 Subject: [PATCH 04/40] ErrorContainer moved from common to shared --- .../components/error-container}/ErrorContainer.js | 0 .../components/error-container}/ErrorContainer.stories.js | 0 .../components/error-container}/ErrorContainer.test.js | 0 .../components/error-container}/README.md | 0 .../components/error-container}/StyledErrorContainer.js | 0 .../ErrorContainer => shared/components/error-container}/index.js | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename packages/{common/components/ErrorContainer => shared/components/error-container}/ErrorContainer.js (100%) rename packages/{common/components/ErrorContainer => shared/components/error-container}/ErrorContainer.stories.js (100%) rename packages/{common/components/ErrorContainer => shared/components/error-container}/ErrorContainer.test.js (100%) rename packages/{common/components/ErrorContainer => shared/components/error-container}/README.md (100%) rename packages/{common/components/ErrorContainer => shared/components/error-container}/StyledErrorContainer.js (100%) rename packages/{common/components/ErrorContainer => shared/components/error-container}/index.js (100%) diff --git a/packages/common/components/ErrorContainer/ErrorContainer.js b/packages/shared/components/error-container/ErrorContainer.js similarity index 100% rename from packages/common/components/ErrorContainer/ErrorContainer.js rename to packages/shared/components/error-container/ErrorContainer.js diff --git a/packages/common/components/ErrorContainer/ErrorContainer.stories.js b/packages/shared/components/error-container/ErrorContainer.stories.js similarity index 100% rename from packages/common/components/ErrorContainer/ErrorContainer.stories.js rename to packages/shared/components/error-container/ErrorContainer.stories.js diff --git a/packages/common/components/ErrorContainer/ErrorContainer.test.js b/packages/shared/components/error-container/ErrorContainer.test.js similarity index 100% rename from packages/common/components/ErrorContainer/ErrorContainer.test.js rename to packages/shared/components/error-container/ErrorContainer.test.js diff --git a/packages/common/components/ErrorContainer/README.md b/packages/shared/components/error-container/README.md similarity index 100% rename from packages/common/components/ErrorContainer/README.md rename to packages/shared/components/error-container/README.md diff --git a/packages/common/components/ErrorContainer/StyledErrorContainer.js b/packages/shared/components/error-container/StyledErrorContainer.js similarity index 100% rename from packages/common/components/ErrorContainer/StyledErrorContainer.js rename to packages/shared/components/error-container/StyledErrorContainer.js diff --git a/packages/common/components/ErrorContainer/index.js b/packages/shared/components/error-container/index.js similarity index 100% rename from packages/common/components/ErrorContainer/index.js rename to packages/shared/components/error-container/index.js From 1b585e3aacc24643ed117797f9c182dfddcb9796 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 15:46:31 +0500 Subject: [PATCH 05/40] Shared:Components:Headline Rewrite to typescript --- .../common/components/Headline/Headline.js | 34 ----------------- .../components/Headline/Headline.stories.js | 37 ------------------- .../components/Headline/Headline.test.js | 15 -------- packages/common/components/Headline/index.js | 1 - .../components/heading/Heading.styled.ts | 12 +++--- .../components/heading/Heading.types.ts | 1 + .../components/headline/Headline.constants.ts | 11 ++++++ .../components/headline/Headline.stories.tsx | 22 +++++++++++ .../components/headline/Headline.styled.ts} | 20 +++------- .../components/headline/Headline.test.tsx | 12 ++++++ .../shared/components/headline/Headline.tsx | 34 +++++++++++++++++ .../components/headline/Headline.types.ts | 20 ++++++++++ .../components/headline}/README.md | 0 13 files changed, 112 insertions(+), 107 deletions(-) delete mode 100644 packages/common/components/Headline/Headline.js delete mode 100644 packages/common/components/Headline/Headline.stories.js delete mode 100644 packages/common/components/Headline/Headline.test.js delete mode 100644 packages/common/components/Headline/index.js create mode 100644 packages/shared/components/headline/Headline.constants.ts create mode 100644 packages/shared/components/headline/Headline.stories.tsx rename packages/{common/components/Headline/StyledHeadline.js => shared/components/headline/Headline.styled.ts} (80%) create mode 100644 packages/shared/components/headline/Headline.test.tsx create mode 100644 packages/shared/components/headline/Headline.tsx create mode 100644 packages/shared/components/headline/Headline.types.ts rename packages/{common/components/Headline => shared/components/headline}/README.md (100%) diff --git a/packages/common/components/Headline/Headline.js b/packages/common/components/Headline/Headline.js deleted file mode 100644 index 358a7f026b..0000000000 --- a/packages/common/components/Headline/Headline.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import StyledHeading from "./StyledHeadline"; -import { classNames } from "@docspace/shared/utils"; - -const Headline = ({ type, className, ...props }) => { - //console.log("Headline render"); - return ( - - ); -}; - -Headline.propTypes = { - level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]), - children: PropTypes.any, - color: PropTypes.string, - title: PropTypes.string, - truncate: PropTypes.bool, - isInline: PropTypes.bool, - type: PropTypes.oneOf(["content", "header", "menu"]), -}; - -Headline.defaultProps = { - title: null, - truncate: false, - isInline: false, - level: 1, -}; - -export default Headline; diff --git a/packages/common/components/Headline/Headline.stories.js b/packages/common/components/Headline/Headline.stories.js deleted file mode 100644 index aa9505deab..0000000000 --- a/packages/common/components/Headline/Headline.stories.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import { storiesOf } from "@storybook/react"; -import { - text, - boolean, - withKnobs, - color, - select, -} from "@storybook/addon-knobs/react"; -import Heading from "."; -import Section from "../../../.storybook/decorators/section"; -import withReadme from "storybook-readme/with-readme"; -import Readme from "./README.md"; - -const type = ["content", "header", "menu"]; -const levels = [1, 2, 3, 4, 5, 6]; - -storiesOf("Components|Heading", module) - .addDecorator(withKnobs) - .addDecorator(withReadme(Readme)) - - .add("base", () => ( -
-
- - {text("Text", "Sample text Heading")} - -
-
- )); diff --git a/packages/common/components/Headline/Headline.test.js b/packages/common/components/Headline/Headline.test.js deleted file mode 100644 index 72911404f2..0000000000 --- a/packages/common/components/Headline/Headline.test.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import { mount } from "enzyme"; -import Headline from "."; - -describe("", () => { - it("renders without error", () => { - const wrapper = mount( - - Some text - - ); - - expect(wrapper).toExist(); - }); -}); diff --git a/packages/common/components/Headline/index.js b/packages/common/components/Headline/index.js deleted file mode 100644 index e86bbc1c6c..0000000000 --- a/packages/common/components/Headline/index.js +++ /dev/null @@ -1 +0,0 @@ -export default from "./Headline"; diff --git a/packages/shared/components/heading/Heading.styled.ts b/packages/shared/components/heading/Heading.styled.ts index 739c907dba..9b5dcf3bc8 100644 --- a/packages/shared/components/heading/Heading.styled.ts +++ b/packages/shared/components/heading/Heading.styled.ts @@ -16,12 +16,12 @@ const styleCss = css<{ font-size: ${(props) => props.theme.getCorrectFontSize(fontSizeStyle(props))}; font-weight: ${(props) => props.theme.heading.fontWeight}; - color: ${(props) => props.colorProp || props.theme.heading.color} - ${(props) => - props.isInline && - css` - display: inline-block; - `}; + color: ${(props) => props.colorProp || props.theme.heading.color}; + ${(props) => + props.isInline && + css` + display: inline-block; + `}; `; const StyledHeading = styled.h1` diff --git a/packages/shared/components/heading/Heading.types.ts b/packages/shared/components/heading/Heading.types.ts index 36d82fa4c0..3a085c812e 100644 --- a/packages/shared/components/heading/Heading.types.ts +++ b/packages/shared/components/heading/Heading.types.ts @@ -1,6 +1,7 @@ import { HeadingLevel, HeadingSize } from "./Heading.enums"; export interface HeadingProps { + id?: string; /** The heading level. It corresponds to the number after the 'H' for the DOM tag. Sets the level for semantic accuracy and accessibility. */ level: HeadingLevel; /** Specifies the headline color */ diff --git a/packages/shared/components/headline/Headline.constants.ts b/packages/shared/components/headline/Headline.constants.ts new file mode 100644 index 0000000000..edd13549d9 --- /dev/null +++ b/packages/shared/components/headline/Headline.constants.ts @@ -0,0 +1,11 @@ +export const size = { + header: "28px", + menu: "23px", + content: "18px", +}; + +export const weight = { + header: 600, + menu: "bold", + content: "bold", +}; diff --git a/packages/shared/components/headline/Headline.stories.tsx b/packages/shared/components/headline/Headline.stories.tsx new file mode 100644 index 0000000000..2894737330 --- /dev/null +++ b/packages/shared/components/headline/Headline.stories.tsx @@ -0,0 +1,22 @@ +import { FC } from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import Headline from "./Headline"; +import type { HeadlineProps } from "./Headline.types"; + +type HeadlineType = FC; + +const meta: Meta = { + title: "Components/Headline", + component: Headline, +}; + +export default meta; + +export const Default: StoryObj = { + args: { + color: "#333", + type: "content", + children: "Sample text heading", + }, +}; diff --git a/packages/common/components/Headline/StyledHeadline.js b/packages/shared/components/headline/Headline.styled.ts similarity index 80% rename from packages/common/components/Headline/StyledHeadline.js rename to packages/shared/components/headline/Headline.styled.ts index a7d3b8cc8b..b679db3074 100644 --- a/packages/common/components/Headline/StyledHeadline.js +++ b/packages/shared/components/headline/Headline.styled.ts @@ -1,26 +1,18 @@ import styled from "styled-components"; -import { Heading } from "@docspace/shared/components/heading"; + import { Base } from "@docspace/shared/themes"; +import { Heading } from "@docspace/shared/components/heading"; import { NoUserSelect, tablet } from "@docspace/shared/utils"; -const size = { - header: "28px", - menu: "23px", - content: "18px", -}; +import { size, weight } from "./Headline.constants"; +import type { StyledHeadingProps } from "./Headline.types"; -const weight = { - header: 600, - menu: "bold", - content: "bold", -}; - -const StyledHeading = styled(Heading)` +const StyledHeading = styled(Heading)` margin: 0; line-height: 50px; font-size: ${(props) => props.theme.getCorrectFontSize( - props.fontSize ? props.fontSize : size[props.headlineType] + props.fontSize ? props.fontSize : size[props.headlineType], )}; font-weight: ${(props) => weight[props.headlineType]}; color: ${(props) => (props.color ? props.color : props.theme.color)}; diff --git a/packages/shared/components/headline/Headline.test.tsx b/packages/shared/components/headline/Headline.test.tsx new file mode 100644 index 0000000000..cce50f7e59 --- /dev/null +++ b/packages/shared/components/headline/Headline.test.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; + +import Headline from "./Headline"; + +import "@testing-library/jest-dom"; + +test(": render without error", () => { + render(headline); + + expect(screen.queryByText("headline")).toBeInTheDocument(); +}); diff --git a/packages/shared/components/headline/Headline.tsx b/packages/shared/components/headline/Headline.tsx new file mode 100644 index 0000000000..6bb21f3006 --- /dev/null +++ b/packages/shared/components/headline/Headline.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { classNames } from "@docspace/shared/utils"; + +import StyledHeading from "./Headline.styled"; +import { HeadlineProps } from "./Headline.types"; + +const Headline = ({ + id, + color, + isInline = false, + level = 1, + title, + truncate = false, + type, + children, + className, +}: HeadlineProps) => { + return ( + + {children} + + ); +}; + +export default Headline; diff --git a/packages/shared/components/headline/Headline.types.ts b/packages/shared/components/headline/Headline.types.ts new file mode 100644 index 0000000000..43ce59c9d1 --- /dev/null +++ b/packages/shared/components/headline/Headline.types.ts @@ -0,0 +1,20 @@ +import type { PropsWithChildren } from "react"; + +export type HeadlineType = "content" | "header" | "menu"; + +export interface HeadlineProps extends PropsWithChildren { + id?: string; + level?: 1 | 2 | 3 | 4 | 5 | 6; + color?: string; + title?: string; + truncate?: boolean; + isInline?: boolean; + type: HeadlineType; + className?: string; +} + +export interface StyledHeadingProps { + fontSize?: string; + color?: string; + headlineType: HeadlineType; +} diff --git a/packages/common/components/Headline/README.md b/packages/shared/components/headline/README.md similarity index 100% rename from packages/common/components/Headline/README.md rename to packages/shared/components/headline/README.md From 16cb669a184731aaf6c813c96e1a03c05db5143b Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 15:47:15 +0500 Subject: [PATCH 06/40] Shared:Utils:ClassNames Fixed type --- packages/shared/utils/classNames.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/shared/utils/classNames.ts b/packages/shared/utils/classNames.ts index 3eaafe32f7..305fcd7989 100644 --- a/packages/shared/utils/classNames.ts +++ b/packages/shared/utils/classNames.ts @@ -1,4 +1,4 @@ -export function classNames(...args: string[] | number[] | {}[]) { +export function classNames(...args: (string | undefined | number | {})[]) { if (args) { let classes: (string | number)[] = []; @@ -26,5 +26,5 @@ export function classNames(...args: string[] | number[] | {}[]) { return classes.join(" "); } - return null; + return ""; } From 44610c20e361324a81fdce862af2f9e59150a0a0 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 16:27:25 +0500 Subject: [PATCH 07/40] Shared:Components:ErrorContainer Rewrite to typescript --- .../error-container/ErrorContainer.stories.js | 21 -------- .../ErrorContainer.stories.tsx | 22 ++++++++ ...rContainer.js => ErrorContainer.styled.ts} | 52 +++++++++++++------ .../error-container/ErrorContainer.test.js | 44 ---------------- .../error-container/ErrorContainer.test.tsx | 24 +++++++++ .../{ErrorContainer.js => ErrorContainer.tsx} | 49 +++++------------ .../error-container/ErrorContainer.types.ts | 14 +++++ .../components/error-container/index.js | 1 - 8 files changed, 108 insertions(+), 119 deletions(-) delete mode 100644 packages/shared/components/error-container/ErrorContainer.stories.js create mode 100644 packages/shared/components/error-container/ErrorContainer.stories.tsx rename packages/shared/components/error-container/{StyledErrorContainer.js => ErrorContainer.styled.ts} (93%) delete mode 100644 packages/shared/components/error-container/ErrorContainer.test.js create mode 100644 packages/shared/components/error-container/ErrorContainer.test.tsx rename packages/shared/components/error-container/{ErrorContainer.js => ErrorContainer.tsx} (94%) create mode 100644 packages/shared/components/error-container/ErrorContainer.types.ts delete mode 100644 packages/shared/components/error-container/index.js diff --git a/packages/shared/components/error-container/ErrorContainer.stories.js b/packages/shared/components/error-container/ErrorContainer.stories.js deleted file mode 100644 index 7d3f6ac25a..0000000000 --- a/packages/shared/components/error-container/ErrorContainer.stories.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import { storiesOf } from "@storybook/react"; -import withReadme from "storybook-readme/with-readme"; -import Readme from "./README.md"; -import { withKnobs, text } from "@storybook/addon-knobs/react"; -import ErrorContainer from "."; - -storiesOf("Components| ErrorContainer", module) - .addDecorator(withKnobs) - .addDecorator(withReadme(Readme)) - .add("base", () => ( - console.log("click")} - /> - )); diff --git a/packages/shared/components/error-container/ErrorContainer.stories.tsx b/packages/shared/components/error-container/ErrorContainer.stories.tsx new file mode 100644 index 0000000000..9cdf1ea4fe --- /dev/null +++ b/packages/shared/components/error-container/ErrorContainer.stories.tsx @@ -0,0 +1,22 @@ +import { FC } from "react"; +import { Meta, StoryObj } from "@storybook/react"; +import { ErrorContainerProps } from "./ErrorContainer.types"; +import ErrorContainer from "./ErrorContainer"; + +type ErrorContainerType = FC; + +const meta: Meta = { + title: "Components/ErrorContainer", + component: ErrorContainer, +}; + +export default meta; + +export const Default: StoryObj = { + args: { + bodyText: "Body", + buttonText: "Button", + headerText: "Header", + customizedBodyText: "Customized body", + }, +}; diff --git a/packages/shared/components/error-container/StyledErrorContainer.js b/packages/shared/components/error-container/ErrorContainer.styled.ts similarity index 93% rename from packages/shared/components/error-container/StyledErrorContainer.js rename to packages/shared/components/error-container/ErrorContainer.styled.ts index f3663ff879..e323b7eba1 100644 --- a/packages/shared/components/error-container/StyledErrorContainer.js +++ b/packages/shared/components/error-container/ErrorContainer.styled.ts @@ -55,7 +55,7 @@ const StyledErrorContainer = styled.div` color: ${(props) => props.theme.errorContainer.bodyText}; } - @media screen and ${desktop} { + @media ${desktop} { body { padding: 24px 24px 0 24px; } @@ -65,7 +65,7 @@ const StyledErrorContainer = styled.div` } } - @media screen and ${mobile} { + @media ${mobile} { body { padding: 18px 18px 0 18px; } @@ -424,15 +424,20 @@ const StyledErrorContainer = styled.div` width: 8.4%; height: 7.39%; z-index: 4; - -webkit-animation: fadein_white-cloud-behind 1s ease-in, + -webkit-animation: + fadein_white-cloud-behind 1s ease-in, move_white-cloud-behind 1s linear 1s infinite alternate; - -moz-animation: fadein_white-cloud-behind 1s ease-in, + -moz-animation: + fadein_white-cloud-behind 1s ease-in, move_white-cloud-behind 1s linear 1s infinite alternate; - -ms-animation: fadein_white-cloud-behind 1s ease-in, + -ms-animation: + fadein_white-cloud-behind 1s ease-in, move_white-cloud-behind 1s linear 1s infinite alternate; - -o-animation: fadein_white-cloud-behind 1s ease-in, + -o-animation: + fadein_white-cloud-behind 1s ease-in, move_white-cloud-behind 1s linear 1s infinite alternate; - animation: fadein_white-cloud-behind 1s ease-in, + animation: + fadein_white-cloud-behind 1s ease-in, move_white-cloud-behind 1s linear 1s infinite alternate; } @@ -539,15 +544,20 @@ const StyledErrorContainer = styled.div` width: 9.86%; height: 9.04%; z-index: 6; - -webkit-animation: fadein_white-cloud-center 1s ease-in, + -webkit-animation: + fadein_white-cloud-center 1s ease-in, move_white-cloud-center 1s linear 1s infinite alternate; - -moz-animation: fadein_white-cloud-center 1s ease-in, + -moz-animation: + fadein_white-cloud-center 1s ease-in, move_white-cloud-center 1s linear 1s infinite alternate; - -ms-animation: fadein_white-cloud-center 1s ease-in, + -ms-animation: + fadein_white-cloud-center 1s ease-in, move_white-cloud-center 1s linear 1s infinite alternate; - -o-animation: fadein_white-cloud-center 1s ease-in, + -o-animation: + fadein_white-cloud-center 1s ease-in, move_white-cloud-center 1s linear 1s infinite alternate; - animation: fadein_white-cloud-center 1s ease-in, + animation: + fadein_white-cloud-center 1s ease-in, move_white-cloud-center 1s linear 1s infinite alternate; } @@ -934,13 +944,21 @@ const StyledErrorContainer = styled.div` width: 12.26%; height: 38.08%; z-index: 11; - -webkit-animation: fadein_baloon 1s, + -webkit-animation: + fadein_baloon 1s, move_baloon 1s linear 1s infinite alternate; - -moz-animation: fadein_baloon 1s, + -moz-animation: + fadein_baloon 1s, + move_baloon 1s linear 1s infinite alternate; + -ms-animation: + fadein_baloon 1s, + move_baloon 1s linear 1s infinite alternate; + -o-animation: + fadein_baloon 1s, + move_baloon 1s linear 1s infinite alternate; + animation: + fadein_baloon 1s, move_baloon 1s linear 1s infinite alternate; - -ms-animation: fadein_baloon 1s, move_baloon 1s linear 1s infinite alternate; - -o-animation: fadein_baloon 1s, move_baloon 1s linear 1s infinite alternate; - animation: fadein_baloon 1s, move_baloon 1s linear 1s infinite alternate; } @keyframes fadein_baloon { diff --git a/packages/shared/components/error-container/ErrorContainer.test.js b/packages/shared/components/error-container/ErrorContainer.test.js deleted file mode 100644 index cd0e2c72b2..0000000000 --- a/packages/shared/components/error-container/ErrorContainer.test.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import { mount } from "enzyme"; -import ErrorContainer from "."; - -describe("", () => { - it("renders without error", () => { - const wrapper = mount(); - - expect(wrapper).toExist(); - }); - - it("renders with props", () => { - const wrapper = mount( - - ); - - expect(wrapper).toExist(); - expect(wrapper.prop("headerText")).toEqual("Some error has happened"); - expect(wrapper.prop("bodyText")).toEqual("Try again later"); - expect(wrapper.prop("buttonText")).toEqual("Go back"); - }); - - it("accepts id", () => { - const wrapper = mount(); - - expect(wrapper.prop("id")).toEqual("testId"); - }); - - it("accepts className", () => { - const wrapper = mount(); - - expect(wrapper.prop("className")).toEqual("test"); - }); - - it("accepts style", () => { - const wrapper = mount(); - - expect(wrapper.getDOMNode().style).toHaveProperty("color", "red"); - }); -}); diff --git a/packages/shared/components/error-container/ErrorContainer.test.tsx b/packages/shared/components/error-container/ErrorContainer.test.tsx new file mode 100644 index 0000000000..4bd3a69efa --- /dev/null +++ b/packages/shared/components/error-container/ErrorContainer.test.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; + +import "@testing-library/jest-dom"; + +import ErrorContainer from "./ErrorContainer"; + +test(": render without error", () => { + render(); + + expect(screen.queryByTestId("ErrorContainer")).toBeInTheDocument(); +}); + +test("renders with props", () => { + render( + , + ); + + expect(screen.queryByText("Some error has happened")).toBeInTheDocument(); + expect(screen.queryByText("Try again later")).toBeInTheDocument(); +}); diff --git a/packages/shared/components/error-container/ErrorContainer.js b/packages/shared/components/error-container/ErrorContainer.tsx similarity index 94% rename from packages/shared/components/error-container/ErrorContainer.js rename to packages/shared/components/error-container/ErrorContainer.tsx index 6550ce8978..895f632327 100644 --- a/packages/shared/components/error-container/ErrorContainer.js +++ b/packages/shared/components/error-container/ErrorContainer.tsx @@ -1,13 +1,13 @@ import React from "react"; -import PropTypes from "prop-types"; -import StyledErrorContainer from "./StyledErrorContainer"; -import Headline from "../Headline"; import { Text } from "@docspace/shared/components/text"; -import { Button } from "@docspace/shared/components/button"; +import { Button, ButtonSize } from "@docspace/shared/components/button"; -const ErrorContainer = (props) => { - //console.log("ErrorContainer render"); +import Headline from "../headline/Headline"; +import StyledErrorContainer from "./ErrorContainer.styled"; +import type { ErrorContainerProps } from "./ErrorContainer.types"; + +const ErrorContainer = (props: ErrorContainerProps) => { const { headerText, bodyText, @@ -15,12 +15,12 @@ const ErrorContainer = (props) => { onClickButton, children, customizedBodyText, - isPrimaryButton, + isPrimaryButton = true, ...rest } = props; return ( - +
{
{headerText && ( - + {headerText} )} - {bodyText && ( - - {bodyText} - - )} + {bodyText && {bodyText}} {customizedBodyText && ( - + {customizedBodyText} )} @@ -358,13 +349,12 @@ const ErrorContainer = (props) => { {buttonText && onClickButton && (
)} @@ -373,17 +363,4 @@ const ErrorContainer = (props) => { ); }; -ErrorContainer.defaultProps = { - isPrimaryButton: true, -}; - -ErrorContainer.propTypes = { - headerText: PropTypes.string, - bodyText: PropTypes.string, - isPrimaryButton: PropTypes.bool, - buttonText: PropTypes.string, - onClickButton: PropTypes.func, - children: PropTypes.any, -}; - export default ErrorContainer; diff --git a/packages/shared/components/error-container/ErrorContainer.types.ts b/packages/shared/components/error-container/ErrorContainer.types.ts new file mode 100644 index 0000000000..d5846a552c --- /dev/null +++ b/packages/shared/components/error-container/ErrorContainer.types.ts @@ -0,0 +1,14 @@ +import type { PropsWithChildren } from "react"; + +export interface ErrorContainerProps extends PropsWithChildren { + id?: string; + className?: string; + style?: React.CSSProperties; + bodyText?: string; + headerText?: string; + buttonText?: string; + isPrimaryButton?: boolean; + customizedBodyText?: string; + + onClickButton?: VoidFunction; +} diff --git a/packages/shared/components/error-container/index.js b/packages/shared/components/error-container/index.js deleted file mode 100644 index 3567a021bb..0000000000 --- a/packages/shared/components/error-container/index.js +++ /dev/null @@ -1 +0,0 @@ -export default from "./ErrorContainer"; From 8e5124896931f2e667bd6582118833cc484684da Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 16:30:11 +0500 Subject: [PATCH 08/40] Shared:Components:ErrorContainer Updated stories --- .../components/error-container/ErrorContainer.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/shared/components/error-container/ErrorContainer.stories.tsx b/packages/shared/components/error-container/ErrorContainer.stories.tsx index 9cdf1ea4fe..44da47b10a 100644 --- a/packages/shared/components/error-container/ErrorContainer.stories.tsx +++ b/packages/shared/components/error-container/ErrorContainer.stories.tsx @@ -14,9 +14,9 @@ export default meta; export const Default: StoryObj = { args: { - bodyText: "Body", - buttonText: "Button", - headerText: "Header", + bodyText: "Try again later", + buttonText: "Go back", + headerText: "Some error has happened", customizedBodyText: "Customized body", }, }; From f4d89afbf0550342ba1feef3ea23700ae9039873 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 19:13:57 +0500 Subject: [PATCH 09/40] crashReport moved from client to shared --- .../src/components/dialogs/ReportDialog/index.js | 2 +- packages/shared/package.json | 2 ++ .../utils/crashReport.ts} | 15 ++++++++++----- yarn.lock | 9 +++++++++ 4 files changed, 22 insertions(+), 6 deletions(-) rename packages/{client/src/helpers/crashReport.js => shared/utils/crashReport.ts} (79%) diff --git a/packages/client/src/components/dialogs/ReportDialog/index.js b/packages/client/src/components/dialogs/ReportDialog/index.js index 7aa851e3d9..b0b1077535 100644 --- a/packages/client/src/components/dialogs/ReportDialog/index.js +++ b/packages/client/src/components/dialogs/ReportDialog/index.js @@ -16,7 +16,7 @@ import { getCrashReport, downloadJson, getCurrentDate, -} from "SRC_DIR/helpers/crashReport"; +} from "@docspace/shared/utils/crashReport"; import { DeviceType } from "@docspace/shared/enums"; const ModalDialogContainer = styled(ModalDialog)` diff --git a/packages/shared/package.json b/packages/shared/package.json index 8f6fbd4178..1fdb96acf1 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -29,6 +29,7 @@ "csvjson-json_beautifier": "^5.0.4", "email-addresses": "^3.1.0", "fast-deep-equal": "^3.1.3", + "file-saver": "^2.0.5", "framer-motion": "^4.1.17", "global": "^4.4.0", "html-to-react": "^1.5.0", @@ -113,6 +114,7 @@ "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.1.2", "@types/eslint": "^8.44.7", + "@types/file-saver": "^2.0.7", "@types/jest": "^29.5.10", "@types/lodash": "^4.14.202", "@types/luxon": "^3.3.1", diff --git a/packages/client/src/helpers/crashReport.js b/packages/shared/utils/crashReport.ts similarity index 79% rename from packages/client/src/helpers/crashReport.js rename to packages/shared/utils/crashReport.ts index b16355aafd..0670fc78ba 100644 --- a/packages/client/src/helpers/crashReport.js +++ b/packages/shared/utils/crashReport.ts @@ -1,27 +1,32 @@ import saveAs from "file-saver"; -export const getCrashReport = (userId, version, language, error) => { +export const getCrashReport = ( + userId: string, + version: string, + language?: string, + error?: Error, +) => { const currentTime = new Date(); const reportTime = currentTime.toUTCString(); const lsObject = JSON.stringify(window.localStorage) || ""; const report = { url: window.origin, - userId: userId, - version: version, + userId, + version, platform: navigator?.platform, userAgent: navigator?.userAgent, language: language || "en", errorMessage: error?.message, errorStack: error?.stack, localStorage: lsObject, - reportTime: reportTime, + reportTime, }; return report; }; -export const downloadJson = (json, fileName) => { +export const downloadJson = (json: string, fileName: string) => { const cleanJson = JSON.stringify(json); const data = new Blob([cleanJson], { type: "application/json" }); const url = window.URL.createObjectURL(data); diff --git a/yarn.lock b/yarn.lock index 46c61be76a..8149fc0471 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3303,6 +3303,7 @@ __metadata: "@testing-library/jest-dom": "npm:^6.1.4" "@testing-library/react": "npm:^14.1.2" "@types/eslint": "npm:^8.44.7" + "@types/file-saver": "npm:^2.0.7" "@types/jest": "npm:^29.5.10" "@types/lodash": "npm:^4.14.202" "@types/luxon": "npm:^3.3.1" @@ -3349,6 +3350,7 @@ __metadata: eslint-plugin-react-hooks: "npm:^4.6.0" eslint-plugin-storybook: "npm:^0.6.15" fast-deep-equal: "npm:^3.1.3" + file-saver: "npm:^2.0.5" framer-motion: "npm:^4.1.17" global: "npm:^4.4.0" html-to-react: "npm:^1.5.0" @@ -8335,6 +8337,13 @@ __metadata: languageName: node linkType: hard +"@types/file-saver@npm:^2.0.7": + version: 2.0.7 + resolution: "@types/file-saver@npm:2.0.7" + checksum: c3d1cd80eab1214767922cabac97681f3fb688e82b74890450d70deaca49537949bbc96d80d363d91e8f0a4752c7164909cc8902d9721c5c4809baafc42a3801 + languageName: node + linkType: hard + "@types/find-cache-dir@npm:^3.2.1": version: 3.2.1 resolution: "@types/find-cache-dir@npm:3.2.1" From 17eec03a845f73e222de00342b6706ccd7965606 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 20:35:53 +0500 Subject: [PATCH 10/40] DocspaceLogo Rewrite to typescript --- packages/client/src/DocspaceLogo/index.js | 46 ------------------- .../components/DocspaceLogoWrapper/index.tsx | 24 ++++++++++ .../Confirm/sub-components/changeOwner.js | 2 +- .../Confirm/sub-components/changePassword.js | 2 +- .../Confirm/sub-components/changePhone.js | 2 +- .../Confirm/sub-components/continuePortal.js | 2 +- .../Confirm/sub-components/createUser.js | 2 +- .../sub-components/deactivatePortal.js | 2 +- .../Confirm/sub-components/profileRemove.js | 2 +- .../Confirm/sub-components/removePortal.js | 2 +- .../Confirm/sub-components/tfaActivation.js | 2 +- .../pages/Confirm/sub-components/tfaAuth.js | 2 +- .../PublicRoom/sub-components/RoomPassword.js | 2 +- packages/client/src/pages/Wizard/index.js | 2 +- .../docspace-logo/DocspaceLogo.styled.ts | 14 ++++++ .../components/docspace-logo/DocspaceLogo.tsx | 31 +++++++++++++ .../docspace-logo/DocspaceLogo.types.ts | 6 +++ .../error-boundary/ErrorBoundary.tsx | 2 +- .../error-boundary/ErrorBoundary.types.ts | 2 +- packages/shared/utils/firebase.ts | 2 +- 20 files changed, 90 insertions(+), 61 deletions(-) delete mode 100644 packages/client/src/DocspaceLogo/index.js create mode 100644 packages/client/src/components/DocspaceLogoWrapper/index.tsx create mode 100644 packages/shared/components/docspace-logo/DocspaceLogo.styled.ts create mode 100644 packages/shared/components/docspace-logo/DocspaceLogo.tsx create mode 100644 packages/shared/components/docspace-logo/DocspaceLogo.types.ts diff --git a/packages/client/src/DocspaceLogo/index.js b/packages/client/src/DocspaceLogo/index.js deleted file mode 100644 index 56d3b8ce12..0000000000 --- a/packages/client/src/DocspaceLogo/index.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import { ReactSVG } from "react-svg"; -import { mobile } from "@docspace/shared/utils"; -import { inject, observer } from "mobx-react"; -import { getLogoFromPath } from "@docspace/shared/utils"; - -const StyledWrapper = styled.div` - .logo-wrapper { - width: 386px; - height: 44px; - } - - @media ${mobile} { - display: none; - } -`; - -const DocspaceLogo = (props) => { - const { className, whiteLabelLogoUrls, theme } = props; - - const logo = getLogoFromPath( - !theme.isBase - ? whiteLabelLogoUrls[1]?.path?.dark - : whiteLabelLogoUrls[1]?.path?.light - ); - - return ( - - {logo ? ( - - ) : ( - <> - )} - - ); -}; - -export default inject(({ settingsStore }) => { - const { whiteLabelLogoUrls, theme } = settingsStore; - - return { - whiteLabelLogoUrls, - theme, - }; -})(observer(DocspaceLogo)); diff --git a/packages/client/src/components/DocspaceLogoWrapper/index.tsx b/packages/client/src/components/DocspaceLogoWrapper/index.tsx new file mode 100644 index 0000000000..dc15959315 --- /dev/null +++ b/packages/client/src/components/DocspaceLogoWrapper/index.tsx @@ -0,0 +1,24 @@ +import { inject, observer } from "mobx-react"; + +import DocspaceLogo from "@docspace/shared/components/docspace-logo/DocspaceLogo"; +import type { DocspaceLogoProps } from "@docspace/shared/components/docspace-logo/DocspaceLogo.types"; + +const DocspaceLogoWrapper = ({ + whiteLabelLogoUrls, + className, +}: Partial) => { + return ( + + ); +}; + +export default inject(({ settingsStore }) => { + const { whiteLabelLogoUrls } = settingsStore; + + return { + whiteLabelLogoUrls, + }; +})(observer(DocspaceLogoWrapper)); diff --git a/packages/client/src/pages/Confirm/sub-components/changeOwner.js b/packages/client/src/pages/Confirm/sub-components/changeOwner.js index 520897bd5b..5bb879dbd3 100644 --- a/packages/client/src/pages/Confirm/sub-components/changeOwner.js +++ b/packages/client/src/pages/Confirm/sub-components/changeOwner.js @@ -13,7 +13,7 @@ import { import withLoader from "../withLoader"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; import { toastr } from "@docspace/shared/components/toast"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; import { ownerChange } from "@docspace/shared/api/settings"; import { getUserFromConfirm } from "@docspace/shared/api/people"; diff --git a/packages/client/src/pages/Confirm/sub-components/changePassword.js b/packages/client/src/pages/Confirm/sub-components/changePassword.js index 91384eeab9..bd7cfc0aa0 100644 --- a/packages/client/src/pages/Confirm/sub-components/changePassword.js +++ b/packages/client/src/pages/Confirm/sub-components/changePassword.js @@ -12,7 +12,7 @@ import { FormWrapper } from "@docspace/shared/components/form-wrapper"; import { createPasswordHash } from "@docspace/shared/utils/common"; import { login } from "@docspace/shared/utils/loginUtils"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; import { getPasswordErrorMessage } from "../../../helpers/utils"; import withLoader from "../withLoader"; import { StyledPage, StyledBody, StyledContent } from "./StyledConfirm"; diff --git a/packages/client/src/pages/Confirm/sub-components/changePhone.js b/packages/client/src/pages/Confirm/sub-components/changePhone.js index d2a9a38400..552b4be682 100644 --- a/packages/client/src/pages/Confirm/sub-components/changePhone.js +++ b/packages/client/src/pages/Confirm/sub-components/changePhone.js @@ -8,7 +8,7 @@ import { inject, observer } from "mobx-react"; import { StyledPage, StyledBody, StyledContent } from "./StyledConfirm"; import withLoader from "../withLoader"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; const ChangePhoneForm = (props) => { const { t, greetingTitle } = props; diff --git a/packages/client/src/pages/Confirm/sub-components/continuePortal.js b/packages/client/src/pages/Confirm/sub-components/continuePortal.js index 8402a5e524..66e2d74f98 100644 --- a/packages/client/src/pages/Confirm/sub-components/continuePortal.js +++ b/packages/client/src/pages/Confirm/sub-components/continuePortal.js @@ -17,7 +17,7 @@ import { import withLoader from "../withLoader"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; const ContinuePortal = (props) => { const { t, greetingTitle, linkData } = props; diff --git a/packages/client/src/pages/Confirm/sub-components/createUser.js b/packages/client/src/pages/Confirm/sub-components/createUser.js index 063395c8d0..8208df13d8 100644 --- a/packages/client/src/pages/Confirm/sub-components/createUser.js +++ b/packages/client/src/pages/Confirm/sub-components/createUser.js @@ -28,7 +28,7 @@ import MoreLoginModal from "@docspace/common/components/MoreLoginModal"; import { EmailInput } from "@docspace/shared/components/email-input"; import { getPasswordErrorMessage } from "../../../helpers/utils"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; import DefaultUserPhoto from "PUBLIC_DIR/images/default_user_photo_size_82-82.png"; import { StyledPage, StyledContent } from "./StyledConfirm"; import { diff --git a/packages/client/src/pages/Confirm/sub-components/deactivatePortal.js b/packages/client/src/pages/Confirm/sub-components/deactivatePortal.js index f899418fca..8b38ae378d 100644 --- a/packages/client/src/pages/Confirm/sub-components/deactivatePortal.js +++ b/packages/client/src/pages/Confirm/sub-components/deactivatePortal.js @@ -17,7 +17,7 @@ import { import withLoader from "../withLoader"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; const DeactivatePortal = (props) => { const { t, greetingTitle, linkData, companyInfoSettingsData } = props; diff --git a/packages/client/src/pages/Confirm/sub-components/profileRemove.js b/packages/client/src/pages/Confirm/sub-components/profileRemove.js index 1c2a0b1928..b7a753bba3 100644 --- a/packages/client/src/pages/Confirm/sub-components/profileRemove.js +++ b/packages/client/src/pages/Confirm/sub-components/profileRemove.js @@ -10,7 +10,7 @@ import { toastr } from "@docspace/shared/components/toast"; import { StyledPage, StyledBody, StyledContent } from "./StyledConfirm"; import withLoader from "../withLoader"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; const ProfileRemoveForm = (props) => { const { t, greetingTitle, linkData, legalTerms, currentColorScheme } = props; diff --git a/packages/client/src/pages/Confirm/sub-components/removePortal.js b/packages/client/src/pages/Confirm/sub-components/removePortal.js index 8db1c760b0..71890c4b98 100644 --- a/packages/client/src/pages/Confirm/sub-components/removePortal.js +++ b/packages/client/src/pages/Confirm/sub-components/removePortal.js @@ -18,7 +18,7 @@ import { import withLoader from "../withLoader"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; const RemovePortal = (props) => { const { t, greetingTitle, linkData, companyInfoSettingsData } = props; diff --git a/packages/client/src/pages/Confirm/sub-components/tfaActivation.js b/packages/client/src/pages/Confirm/sub-components/tfaActivation.js index fb2b3de13a..d79328f3b7 100644 --- a/packages/client/src/pages/Confirm/sub-components/tfaActivation.js +++ b/packages/client/src/pages/Confirm/sub-components/tfaActivation.js @@ -13,7 +13,7 @@ import ErrorContainer from "@docspace/common/components/ErrorContainer"; import { mobile, tablet } from "@docspace/shared/utils"; import { Link } from "@docspace/shared/components/link"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; import { StyledPage, StyledContent } from "./StyledConfirm"; import { getTfaSecretKeyAndQR, diff --git a/packages/client/src/pages/Confirm/sub-components/tfaAuth.js b/packages/client/src/pages/Confirm/sub-components/tfaAuth.js index e68e4bc026..08d352e496 100644 --- a/packages/client/src/pages/Confirm/sub-components/tfaAuth.js +++ b/packages/client/src/pages/Confirm/sub-components/tfaAuth.js @@ -12,7 +12,7 @@ import { toastr } from "@docspace/shared/components/toast"; import withLoader from "../withLoader"; import { mobile } from "@docspace/shared/utils"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; import { StyledPage, StyledContent } from "./StyledConfirm"; import { validateTfaCode } from "@docspace/shared/api/settings"; import { loginWithTfaCode } from "@docspace/shared/api/user"; diff --git a/packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js b/packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js index 7b388f24d9..94b5e071f9 100644 --- a/packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js +++ b/packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js @@ -10,7 +10,7 @@ import { StyledPage, StyledBody, StyledContent } from "./RoomStyles"; import { frameCallCommand } from "@docspace/shared/utils/common"; import { toastr } from "@docspace/shared/components/toast"; import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import DocspaceLogo from "../../../DocspaceLogo"; +import DocspaceLogo from "../../../components/DocspaceLogoWrapper"; import { ValidationStatus } from "../../../helpers/constants"; import PublicRoomIcon from "PUBLIC_DIR/images/icons/32/room/public.svg"; diff --git a/packages/client/src/pages/Wizard/index.js b/packages/client/src/pages/Wizard/index.js index d6adbc3882..88ca6976b9 100644 --- a/packages/client/src/pages/Wizard/index.js +++ b/packages/client/src/pages/Wizard/index.js @@ -42,7 +42,7 @@ import { } from "./StyledWizard"; import { getUserTimezone, getSelectZone } from "./timezonesHelper"; -import DocspaceLogo from "SRC_DIR/DocspaceLogo"; +import DocspaceLogo from "../../components/DocspaceLogoWrapper"; import RefreshReactSvgUrl from "PUBLIC_DIR/images/refresh.react.svg?url"; import { DEFAULT_SELECT_TIMEZONE, diff --git a/packages/shared/components/docspace-logo/DocspaceLogo.styled.ts b/packages/shared/components/docspace-logo/DocspaceLogo.styled.ts new file mode 100644 index 0000000000..7f3159132f --- /dev/null +++ b/packages/shared/components/docspace-logo/DocspaceLogo.styled.ts @@ -0,0 +1,14 @@ +import styled from "styled-components"; + +import { mobile } from "@docspace/shared/utils"; + +export const StyledWrapper = styled.div` + .logo-wrapper { + width: 386px; + height: 44px; + } + + @media ${mobile} { + display: none; + } +`; diff --git a/packages/shared/components/docspace-logo/DocspaceLogo.tsx b/packages/shared/components/docspace-logo/DocspaceLogo.tsx new file mode 100644 index 0000000000..f5fdfe8258 --- /dev/null +++ b/packages/shared/components/docspace-logo/DocspaceLogo.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import { ReactSVG } from "react-svg"; +import { useTheme } from "styled-components"; + +import { classNames, getLogoFromPath } from "@docspace/shared/utils"; + +import { StyledWrapper } from "./DocspaceLogo.styled"; +import type { DocspaceLogoProps } from "./DocspaceLogo.types"; + +const DocspaceLogo = ({ className, whiteLabelLogoUrls }: DocspaceLogoProps) => { + const theme = useTheme(); + + const logo = getLogoFromPath( + theme.isBase + ? whiteLabelLogoUrls[1]?.path?.light + : whiteLabelLogoUrls[1]?.path?.dark, + ); + + return ( + + {logo && ( + + )} + + ); +}; + +export default DocspaceLogo; diff --git a/packages/shared/components/docspace-logo/DocspaceLogo.types.ts b/packages/shared/components/docspace-logo/DocspaceLogo.types.ts new file mode 100644 index 0000000000..04d081ef8c --- /dev/null +++ b/packages/shared/components/docspace-logo/DocspaceLogo.types.ts @@ -0,0 +1,6 @@ +import type { TWhiteLabel } from "@docspace/shared/utils/whiteLabelHelper"; + +export interface DocspaceLogoProps { + className?: string; + whiteLabelLogoUrls: TWhiteLabel[]; +} diff --git a/packages/shared/components/error-boundary/ErrorBoundary.tsx b/packages/shared/components/error-boundary/ErrorBoundary.tsx index f7e7de8e47..df9a109cf7 100644 --- a/packages/shared/components/error-boundary/ErrorBoundary.tsx +++ b/packages/shared/components/error-boundary/ErrorBoundary.tsx @@ -18,7 +18,7 @@ class ErrorBoundary extends React.Component< public static getDerivedStateFromError(error?: Error): ErrorBoundaryState { // Update state so the next render will show the fallback UI. - return { error: error ?? "Unhandled exception" }; + return { error: error ?? new Error("Unhandled exception") }; } public componentDidCatch(error: Error, errorInfo: ErrorInfo) { diff --git a/packages/shared/components/error-boundary/ErrorBoundary.types.ts b/packages/shared/components/error-boundary/ErrorBoundary.types.ts index 49d71d2710..f437685aa8 100644 --- a/packages/shared/components/error-boundary/ErrorBoundary.types.ts +++ b/packages/shared/components/error-boundary/ErrorBoundary.types.ts @@ -5,5 +5,5 @@ export interface ErrorBoundaryProps extends PropsWithChildren { } export interface ErrorBoundaryState { - error: Error | null | string; + error: Error | null; } diff --git a/packages/shared/utils/firebase.ts b/packages/shared/utils/firebase.ts index c4be5c6d92..909fe6f1ee 100644 --- a/packages/shared/utils/firebase.ts +++ b/packages/shared/utils/firebase.ts @@ -166,7 +166,7 @@ class FirebaseHelper { return `https://${domain}/locales/${lng}/CampaignPersonal${banner}.json`; } - async sendCrashReport(report: string) { + async sendCrashReport(report: T) { try { const reportListRef = this.firebaseDB?.ref("reports"); const neReportRef = reportListRef?.push(); From 7b0bd540a38034dc3c96c91b4f5d32e18ae801db Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 8 Feb 2024 20:49:31 +0500 Subject: [PATCH 11/40] ReportDialog moved from client to shared --- packages/client/src/components/dialogs/index.js | 2 -- .../ReportDialog => shared/components/report-dialog}/index.js | 0 2 files changed, 2 deletions(-) rename packages/{client/src/components/dialogs/ReportDialog => shared/components/report-dialog}/index.js (100%) diff --git a/packages/client/src/components/dialogs/index.js b/packages/client/src/components/dialogs/index.js index 70040f3e21..57637a2815 100644 --- a/packages/client/src/components/dialogs/index.js +++ b/packages/client/src/components/dialogs/index.js @@ -35,7 +35,6 @@ import DeleteLinkDialog from "./DeleteLinkDialog"; import MoveToPublicRoom from "./MoveToPublicRoom"; import BackupToPublicRoom from "./BackupToPublicRoom"; import SettingsPluginDialog from "./SettingsPluginDialog"; -import ReportDialog from "./ReportDialog"; import PluginDialog from "./PluginDialog"; import DeletePluginDialog from "./DeletePluginDialog"; import ShareFolderDialog from "./ShareFolderDialog"; @@ -78,7 +77,6 @@ export { MoveToPublicRoom, BackupToPublicRoom, SettingsPluginDialog, - ReportDialog, PluginDialog, DeletePluginDialog, ShareFolderDialog, diff --git a/packages/client/src/components/dialogs/ReportDialog/index.js b/packages/shared/components/report-dialog/index.js similarity index 100% rename from packages/client/src/components/dialogs/ReportDialog/index.js rename to packages/shared/components/report-dialog/index.js From 4541d4cdfab23b9dd2a21b773e92f43fc54be2dc Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Fri, 9 Feb 2024 14:07:14 +0500 Subject: [PATCH 12/40] Shared:Components:ReportDialog Rewrite to typescript --- .../report-dialog/ReportDialog.styled.ts | 36 +++++ .../report-dialog/ReportDialog.types.ts | 13 ++ .../report-dialog/{index.js => index.tsx} | 147 +++++++----------- packages/shared/utils/crashReport.ts | 2 +- 4 files changed, 110 insertions(+), 88 deletions(-) create mode 100644 packages/shared/components/report-dialog/ReportDialog.styled.ts create mode 100644 packages/shared/components/report-dialog/ReportDialog.types.ts rename packages/shared/components/report-dialog/{index.js => index.tsx} (56%) diff --git a/packages/shared/components/report-dialog/ReportDialog.styled.ts b/packages/shared/components/report-dialog/ReportDialog.styled.ts new file mode 100644 index 0000000000..80797681bb --- /dev/null +++ b/packages/shared/components/report-dialog/ReportDialog.styled.ts @@ -0,0 +1,36 @@ +import styled from "styled-components"; + +import { ModalDialog } from "@docspace/shared/components/modal-dialog"; + +export const ModalDialogContainer = styled(ModalDialog)` + #modal-dialog { + width: auto; + max-width: 520px; + max-height: 560px; + } + + .report-description { + margin-bottom: 16px; + } + + .report-wrapper { + margin-top: 8px; + height: 48px; + display: flex; + gap: 16px; + align-items: center; + + .report-filename { + display: flex; + } + + .file-icon { + width: 24px; + user-select: none; + } + + .icon-button { + cursor: pointer; + } + } +`; diff --git a/packages/shared/components/report-dialog/ReportDialog.types.ts b/packages/shared/components/report-dialog/ReportDialog.types.ts new file mode 100644 index 0000000000..948bea47e7 --- /dev/null +++ b/packages/shared/components/report-dialog/ReportDialog.types.ts @@ -0,0 +1,13 @@ +import type FirebaseHelper from "../../utils/firebase"; +import type { TUser } from "../../api/people/types"; +import type { DeviceType } from "../../enums"; + +export interface ReportDialogProps { + onClose: VoidFunction; + visible: boolean; + error: Error; + user: TUser; + version: string; + firebaseHelper: FirebaseHelper; + currentDeviceType: DeviceType; +} diff --git a/packages/shared/components/report-dialog/index.js b/packages/shared/components/report-dialog/index.tsx similarity index 56% rename from packages/shared/components/report-dialog/index.js rename to packages/shared/components/report-dialog/index.tsx index b0b1077535..2f7f8e43c9 100644 --- a/packages/shared/components/report-dialog/index.js +++ b/packages/shared/components/report-dialog/index.tsx @@ -1,17 +1,9 @@ +import React, { useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; + import FileReactSvgUrl from "PUBLIC_DIR/images/icons/24/file.svg?url"; import DownloadReactSvgUrl from "PUBLIC_DIR/images/download.react.svg?url"; -import React, { useEffect, useState } from "react"; -import styled from "styled-components"; -import { useTranslation } from "react-i18next"; -import { inject, observer } from "mobx-react"; - -import { Textarea } from "@docspace/shared/components/textarea"; -import { ModalDialog } from "@docspace/shared/components/modal-dialog"; -import { Text } from "@docspace/shared/components/text"; -import { Button } from "@docspace/shared/components/button"; -import { IconButton } from "@docspace/shared/components/icon-button"; -import { toastr } from "@docspace/shared/components/toast"; import { getCrashReport, downloadJson, @@ -19,40 +11,17 @@ import { } from "@docspace/shared/utils/crashReport"; import { DeviceType } from "@docspace/shared/enums"; -const ModalDialogContainer = styled(ModalDialog)` - #modal-dialog { - width: auto; - max-width: 520px; - max-height: 560px; - } +import { Text } from "../text"; +import { toastr } from "../toast"; +import { Button, ButtonSize } from "../button"; +import { Textarea } from "../textarea"; +import { IconButton } from "../icon-button"; +import { ModalDialogType, ModalDialog } from "../modal-dialog"; - .report-description { - margin-bottom: 16px; - } +import { ModalDialogContainer } from "./ReportDialog.styled"; +import type { ReportDialogProps } from "./ReportDialog.types"; - .report-wrapper { - margin-top: 8px; - height: 48px; - display: flex; - gap: 16px; - align-items: center; - - .report-filename { - display: flex; - } - - .file-icon { - width: 24px; - user-select: none; - } - - .icon-button { - cursor: pointer; - } - } -`; - -const ReportDialog = (props) => { +const ReportDialog = (props: ReportDialogProps) => { const { t, ready } = useTranslation(["Common"]); const { visible, @@ -60,19 +29,22 @@ const ReportDialog = (props) => { error, user, version, - FirebaseHelper, + firebaseHelper, currentDeviceType, } = props; - const [report, setReport] = useState({}); + + const report = useMemo(() => { + return getCrashReport(user.id, version, user.cultureName, error); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const [description, setDescription] = useState(""); - useEffect(() => { - const report = getCrashReport(user.id, version, user.cultureName, error); - setReport(report); - console.log(report); - }, []); + const fileTitle = useMemo( + () => `${t("ErrorReport")} ${getCurrentDate()}`, + [t], + ); - const onChangeTextareaValue = (e) => { + const onChangeTextareaValue = (e: React.ChangeEvent) => { setDescription(e.target.value); }; @@ -80,33 +52,32 @@ const ReportDialog = (props) => { downloadJson(report, fileTitle); }; - const onClickSend = async () => { - try { - const reportWithDescription = Object.assign(report, { - description: description, - }); - await FirebaseHelper.sendCrashReport(reportWithDescription); - toastr.success(t("ErrorReportSuccess")); - onCloseAction(); - } catch (e) { - console.error(e); - toastr.error(e); - } - }; - const onCloseAction = () => { setDescription(""); onClose(); }; - const fileTitle = t("ErrorReport") + " " + getCurrentDate(); + const onClickSend = async () => { + try { + const reportWithDescription = Object.assign(report, { + description, + }); + await firebaseHelper.sendCrashReport(reportWithDescription); + toastr.success(t("ErrorReportSuccess")); + onCloseAction(); + } catch (err) { + toastr.error(err as Error); + // eslint-disable-next-line no-console + console.error(err); + } + }; return ( {t("ErrorReport")} @@ -123,7 +94,7 @@ const ReportDialog = (props) => { fontSize={13} />
- + {fileTitle} @@ -131,42 +102,44 @@ const ReportDialog = (props) => {