Merge pull request #127 from AppQuality/allow-multiple-design-systems

Allow multiple design systems
AppQuality · Apr 4, 2024 · b02e83b · b02e83b
2 parents 8d49d99 + 492f4aa
commit b02e83b
Show file tree

Hide file tree

Showing 10 changed files with 4,508 additions and 1,368 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:16.19-alpine3.17 as base
+FROM node:18-alpine3.17 as base
 
 COPY package.json ./
 COPY yarn.lock ./

diff --git a/craco.config.js b/craco.config.js
@@ -2,7 +2,9 @@ const path = require(`path`);
 const alias = (prefix = `src`) => ({
   react: `./node_modules/react`,
   "styled-components": `./node_modules/styled-components`,
+  "@zendeskgarden/react-theming": `./node_modules/@zendeskgarden/react-theming`,
   formik: `./node_modules/formik`,
+  "styled-components": `./node_modules/styled-components`,
 });
 
 const SRC = `./src`;
@@ -16,10 +18,26 @@ const resolvedAliases = Object.fromEntries(
 );
 
 module.exports = {
+  eslint: {
+    enable: false,
+  },
   webpack: {
     alias: resolvedAliases,
+    configure: (webpackConfig) => {
+      webpackConfig.module.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+      });
+      return webpackConfig;
+    },
   },
   babel: {
-    plugins: ["@babel/plugin-proposal-numeric-separator"],
+    presets: ["@babel/preset-env"],
+    plugins: [
+      "@babel/plugin-proposal-optional-chaining",
+      "@babel/plugin-proposal-nullish-coalescing-operator",
+      "@babel/plugin-proposal-numeric-separator",
+    ],
   },
 };
diff --git a/package.json b/package.json
@@ -5,15 +5,18 @@
   "homepage": "backoffice/",
   "dependencies": {
     "@analytics/google-tag-manager": "^0.5.3",
-    "@appquality/appquality-design-system": "^1.0.76",
+    "@appquality/appquality-design-system": "2.0.0",
     "@appquality/craft-blocks": "^0.1.27",
     "@appquality/stream-player": "^1.0.6",
+    "@appquality/unguess-design-system": "^3.1.78",
     "@craco/craco": "^6.4.3",
     "@craftjs/core": "^0.2.0-beta.5",
     "@reduxjs/toolkit": "^1.8.3",
     "@sentry/cli": "^2.23.0",
     "@sentry/react": "^7.84.0",
     "@silevis/reactgrid": "^4.0.4",
+    "@zendeskgarden/react-dropdowns": "^8.75.0",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "analytics": "^0.8.1",
     "husky": "^7.0.4",
     "lzutf8": "^0.6.0",
@@ -34,7 +37,7 @@
     "react-transition-group": "^4.4.2",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
-    "styled-components": "^5.3.0",
+    "styled-components": "^6.1.1",
     "uuid": "^9.0.0",
     "web-vitals": "^1.1.2"
   },
@@ -64,7 +67,7 @@
     "generate-schema": ". ./.env.development; npx openapi-typescript $REACT_APP_API_URL/reference/ --output src/utils/schema.ts ",
     "start": "craco start",
     "start:ssl": "craco --openssl-legacy-provider start",
-    "build": "react-scripts build && npm run move",
+    "build": "NODE_OPTIONS=\"--max-old-space-size=8192 --openssl-legacy-provider\" craco build && npm run move",
     "test": "test:e2e:ci",
     "test:e2e:ui": "npx playwright test --ui",
     "test:e2e": "npx playwright test",
@@ -90,6 +93,7 @@
   "devDependencies": {
     "@appquality/fixture-generator": "^1.0.3",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@currents/playwright": "^0.12.1",
     "@playwright/test": "^1.41.2",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
@@ -99,7 +103,7 @@
     "@types/react-gtm-module": "^2.0.3",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.4",
-    "@types/styled-components": "^5.1.23",
+    "@types/styled-components": "^5.1.34",
     "@types/uuid": "^8.3.4",
     "jest-canvas-mock": "^2.4.0",
     "msw": "^0.47.4",
@@ -111,6 +115,7 @@
     "typescript": "4.9.5"
   },
   "resolutions": {
+    "//": "See https://github.com/facebook/create-react-app/issues/11773",
     "react-error-overlay": "6.0.9"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,32 +1,27 @@
 import "./App.css";
 
-import {
-  aqBootstrapTheme,
-  GlobalStyle,
-} from "@appquality/appquality-design-system";
-import { Provider } from "react-redux";
-import { BrowserRouter, Route, Router, Switch } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { createBrowserHistory } from "history";
+import { Provider } from "react-redux";
+import { BrowserRouter, Route, Router, Switch } from "react-router-dom";
 import BugsList from "src/pages/BugsList";
-import CampaignPreselection from "src/pages/campaigns/preselectionForm";
 import AdminPayments from "src/pages/Payments";
 import Create from "src/pages/Popups/Create";
 import List from "src/pages/Popups/List";
 import Update from "src/pages/Popups/Update";
+import CampaignPreselection from "src/pages/campaigns/preselectionForm";
 import { setupStore } from "src/store";
-import { ThemeProvider } from "styled-components";
-import SiteWideMessages from "./features/SiteWideMessages";
-import Campaigns from "./pages/campaigns";
-import CampaignPreselectionList from "./pages/campaigns/preselectionFormList";
-import SelectionPage from "./pages/campaigns/selection";
+import { PageTemplate } from "./features/PageTemplate";
+import SentryWrapper from "./features/SentryWrapper";
 import Jotform from "./pages/Jotform";
 import Prospect from "./pages/Prospect";
+import UxDashboard from "./pages/UxDashboard";
 import AgreementsList from "./pages/agreements/list";
-import SingleAgreementEdit from "./pages/agreements/view-edit";
 import SingleAgreementNew from "./pages/agreements/new";
-import UxDashboard from "./pages/UxDashboard";
-import SentryWrapper from "./features/SentryWrapper";
+import SingleAgreementEdit from "./pages/agreements/view-edit";
+import Campaigns from "./pages/campaigns";
+import CampaignPreselectionList from "./pages/campaigns/preselectionFormList";
+import SelectionPage from "./pages/campaigns/selection";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 const history = createBrowserHistory();
@@ -35,68 +30,67 @@ function App() {
   return (
     <SentryWrapper history={history}>
       <Provider store={setupStore()}>
-        <ThemeProvider theme={aqBootstrapTheme}>
-          <GlobalStyle />
-          <SiteWideMessages />
-          <BrowserRouter>
-            <Router history={history}>
-              <Switch>
-                <SentryRoute
-                  path={`/backoffice/campaigns/:id/bugs`}
-                  component={BugsList}
-                />
-                <SentryRoute
-                  path={`/backoffice/campaigns/:id/prospect`}
-                  component={Prospect}
-                />
-                <SentryRoute path={`/backoffice/new`} component={Create} />
-                <SentryRoute
-                  path="/backoffice/payments"
-                  component={AdminPayments}
-                />
-                <SentryRoute path="/backoffice/jotform" component={Jotform} />
-                <SentryRoute
-                  path="/backoffice/campaigns/preselection-forms/new"
-                  component={CampaignPreselection}
-                />
-                <SentryRoute
-                  path="/backoffice/campaigns/preselection-forms/:id"
-                  component={CampaignPreselection}
-                />
-                <SentryRoute
-                  path="/backoffice/campaigns/preselection-forms"
-                  component={CampaignPreselectionList}
-                />
-                <SentryRoute
-                  path="/backoffice/campaigns/:id/selection"
-                  component={SelectionPage}
-                />
-                <SentryRoute
-                  path="/backoffice/campaigns/:id/ux-dashboard"
-                  component={UxDashboard}
-                />
-                <SentryRoute
-                  path="/backoffice/campaigns"
-                  component={Campaigns}
-                />
-                <SentryRoute
-                  path="/backoffice/agreements/new"
-                  component={SingleAgreementNew}
-                />
-                <SentryRoute
-                  path="/backoffice/agreements/:id"
-                  component={SingleAgreementEdit}
-                />
-                <SentryRoute
-                  path="/backoffice/agreements"
-                  component={AgreementsList}
-                />
-                <SentryRoute path={`/backoffice/:id`} component={Update} />
-                <SentryRoute path={`/backoffice`} component={List} />
-              </Switch>
-            </Router>
-          </BrowserRouter>
-        </ThemeProvider>
+        <BrowserRouter>
+          <Router history={history}>
+            <Switch>
+              <SentryRoute
+                path={`/backoffice/campaigns/:id/bugs`}
+                component={BugsList}
+              />
+              <SentryRoute
+                path={`/backoffice/campaigns/:id/prospect`}
+                component={Prospect}
+              />
+              <SentryRoute path={`/backoffice/new`} component={Create} />
+              <SentryRoute
+                path="/backoffice/payments"
+                component={AdminPayments}
+              />
+              <SentryRoute path="/backoffice/jotform" component={Jotform} />
+              <SentryRoute
+                path="/backoffice/campaigns/preselection-forms/new"
+                component={CampaignPreselection}
+              />
+              <SentryRoute
+                path="/backoffice/campaigns/preselection-forms/:id"
+                component={CampaignPreselection}
+              />
+              <SentryRoute
+                path="/backoffice/campaigns/preselection-forms"
+                component={CampaignPreselectionList}
+              />
+              <SentryRoute
+                path="/backoffice/campaigns/:id/selection"
+                component={SelectionPage}
+              />
+              <SentryRoute
+                path="/backoffice/campaigns/:id/ux-dashboard"
+                component={UxDashboard}
+              />
+              <SentryRoute path="/backoffice/campaigns" component={Campaigns} />
+              <SentryRoute
+                path="/backoffice/agreements/new"
+                component={SingleAgreementNew}
+              />
+              <SentryRoute
+                path="/backoffice/agreements/:id"
+                component={SingleAgreementEdit}
+              />
+              <SentryRoute
+                path="/backoffice/agreements"
+                component={AgreementsList}
+              />
+              <SentryRoute
+                path={`/backoffice/testUnguess`}
+                component={() => (
+                  <PageTemplate type="unguess">TestUnguess</PageTemplate>
+                )}
+              />
+              <SentryRoute path={`/backoffice/:id`} component={Update} />
+              <SentryRoute path={`/backoffice`} component={List} />
+            </Switch>
+          </Router>
+        </BrowserRouter>
       </Provider>
     </SentryWrapper>
   );

diff --git a/src/features/PageTemplate.tsx b/src/features/PageTemplate.tsx
@@ -1,9 +1,27 @@
+import {
+  aqBootstrapTheme,
+  GlobalStyle,
+} from "@appquality/appquality-design-system";
+import {
+  ToastProvider,
+  GlobalStyle as UnguessGlobalStyle,
+} from "@appquality/unguess-design-system";
+import * as Sentry from "@sentry/react";
+import { ThemeProvider as UnguessThemeProvider } from "@zendeskgarden/react-theming";
 import React from "react";
-import { useGetUsersMeQuery } from "src/services/tryberApi";
 import TagManager from "react-gtm-module";
-import * as Sentry from "@sentry/react";
+import { useGetUsersMeQuery } from "src/services/tryberApi";
+import { ThemeProvider } from "styled-components";
+import SiteWideMessages from "./SiteWideMessages";
+import { appTheme } from "./unguessTheme";
 
-export const PageTemplate = ({ children }: { children: React.ReactNode }) => {
+export const PageTemplate = ({
+  type = "tryber",
+  children,
+}: {
+  type?: "tryber" | "unguess";
+  children: React.ReactNode;
+}) => {
   const {
     data: user,
     error,
@@ -38,5 +56,34 @@ export const PageTemplate = ({ children }: { children: React.ReactNode }) => {
     }
     return null;
   }
-  return <>{children}</>;
+  if (type === "unguess") {
+    return (
+      <UnguessThemeProvider theme={appTheme}>
+        <UnguessGlobalStyle />
+        <ToastProvider
+          limit={5}
+          zIndex={500}
+          placementProps={{
+            top: {
+              style: {
+                top:
+                  parseInt(appTheme.components.chrome.header.height, 10) +
+                  appTheme.space.base * 4,
+              },
+            },
+          }}
+        >
+          {children}
+        </ToastProvider>
+      </UnguessThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider theme={aqBootstrapTheme}>
+      <GlobalStyle />
+      <SiteWideMessages />
+      {children}
+    </ThemeProvider>
+  );
 };
diff --git a/src/features/unguessTheme/index.tsx b/src/features/unguessTheme/index.tsx
@@ -0,0 +1,5 @@
+import { theme as baseTheme } from "@appquality/unguess-design-system";
+
+const appTheme = baseTheme;
+
+export { appTheme };
diff --git a/src/pages/BugsList/Table/TableButton.tsx b/src/pages/BugsList/Table/TableButton.tsx
@@ -1,12 +1,15 @@
+import { Button } from "@appquality/appquality-design-system";
+import { ButtonProps } from "@appquality/appquality-design-system/dist/stories/button/_types";
 import React from "react";
 import styled from "styled-components";
-import { Button } from "@appquality/appquality-design-system";
 
-const StyledButton = styled(({ children, style, href, ...rest }) => (
-  <Button as="a" style={style} href={href} {...rest}>
-    {children}
-  </Button>
-))`
+const StyledButton = styled(
+  ({ children, style, href, ...rest }: ButtonProps) => (
+    <Button as="a" style={style} href={href} {...rest}>
+      {children}
+    </Button>
+  )
+)`
   border: none;
   padding: 0;
   background-color: transparent;