Merge branch 'develop' into i18n-translations

Author: cannarocks

.env.development

@@ -2,7 +2,7 @@ REACT_APP_GTM_ID=GTM-WVXPS94
 REACT_APP_GTM_AUTH=HjeAxSQB9e685mi-_8YiDw
 REACT_APP_GTM_ENV=env-4
 REACT_APP_API_URL=/api
-REACT_APP_TRYBER_WP_API_URL=https://dv-crowd.app-quality.com/wp-json/appq/v1
+REACT_APP_TRYBER_WP_API_URL=https://dev.tryber.me/wp-json/appq/v1
 REACT_ZAPIER_WEBHOOK=https://hooks.zapier.com/hooks/catch/5196925/bkxm1k6/
 REACT_APP_STRAPI_URL=https://admin.unguess.io
 REACT_APP_STRAPI_API_URL=https://admin.unguess.io/api

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .eslintcache
 
 generate-devel-token.json
+generate-devel-token-*.json
 
 # vs code configuration
 .vscode

craco.config.js

@@ -19,5 +19,20 @@ const resolvedAliases = Object.fromEntries(
 module.exports = {
   webpack: {
     alias: resolvedAliases,
+    configure: (webpackConfig) => {
+      webpackConfig.module.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      });
+      return webpackConfig;
+    },
+  },
+  babel: {
+    presets: ['@babel/preset-env'],
+    plugins: [
+      '@babel/plugin-proposal-optional-chaining',
+      '@babel/plugin-proposal-nullish-coalescing-operator',
+    ],
   },
 };

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "2.12.83",
+    "@appquality/unguess-design-system": "3.1.2",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

src/App.test.tsx

@@ -1,18 +1,18 @@
 import '../i18n';
-import { GlobalStyle } from '@appquality/unguess-design-system';
+import { GlobalStyle, ToastProvider } from '@appquality/unguess-design-system';
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { useTranslation } from 'react-i18next';
 import Helmet from 'react-helmet';
 import Pages from 'src/common/Pages';
-import { theme } from 'src/app/theme';
+import { appTheme } from 'src/app/theme';
 import { Provider } from 'react-redux';
 import { store } from './store';
 
 const App = () => {
   const { t } = useTranslation();
   return (
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={appTheme}>
         <GlobalStyle />
         <Helmet>
           <meta
@@ -22,7 +22,21 @@ const App = () => {
           <title>UNGUESS - {t('__APP_META_PAYOFF')}</title>
           <meta name="description" content={t('__APP_META_DESCRIPTION')} />
         </Helmet>
-        <Pages />
+        <ToastProvider
+          limit={5}
+          zIndex={500}
+          placementProps={{
+            top: {
+              style: {
+                top:
+                  parseInt(appTheme.components.chrome.header.height, 10) +
+                  appTheme.space.base * 4,
+              },
+            },
+          }}
+        >
+          <Pages />
+        </ToastProvider>
       </ThemeProvider>
     </Provider>
   );

src/app/App.tsx

@@ -1,20 +1,20 @@
 import {
   theme as baseTheme,
-  CHARTS_COLOR_PALETTE,
+  getColor,
 } from '@appquality/unguess-design-system';
 
 export const SEVERITY_COLORS: Record<Severities, string> = {
-  critical: CHARTS_COLOR_PALETTE.mattone,
-  high: CHARTS_COLOR_PALETTE.gubbioLight,
-  medium: CHARTS_COLOR_PALETTE.blueRoyal,
-  low: CHARTS_COLOR_PALETTE.darkPine,
+  critical: baseTheme.palette.red[900],
+  high: baseTheme.palette.yellow[600],
+  medium: baseTheme.palette.blue[600],
+  low: baseTheme.palette.teal[700],
 };
 
 export const SEVERITY_HUES: Record<Severities, string> = {
-  critical: CHARTS_COLOR_PALETTE.mattone,
-  high: CHARTS_COLOR_PALETTE.gubbioLight,
-  medium: CHARTS_COLOR_PALETTE.blueRoyal,
-  low: CHARTS_COLOR_PALETTE.darkPine,
+  critical: baseTheme.palette.red[900],
+  high: baseTheme.palette.yellow[600],
+  medium: baseTheme.palette.blue[600],
+  low: baseTheme.palette.teal[700],
 };
 // temporary fix for the bug state colors
 export const BUG_STATE_COLORS: Record<
@@ -30,38 +30,45 @@ export const BUG_STATE_COLORS: Record<
     color: baseTheme.palette.grey[400],
   },
   'to be imported': {
-    stroke: baseTheme.palette.azure[400],
-    color: baseTheme.palette.azure[400],
+    stroke: baseTheme.palette.azure[500],
+    color: baseTheme.palette.azure[500],
   },
   open: {
-    stroke: baseTheme.palette.azure[400],
-    color: baseTheme.palette.azure[400],
+    stroke: baseTheme.palette.azure[500],
+    color: baseTheme.palette.azure[500],
   },
   'to be retested': {
-    stroke: baseTheme.palette.yellow[400],
-    color: baseTheme.palette.yellow[400],
+    stroke: baseTheme.palette.yellow[500],
+    color: baseTheme.palette.yellow[500],
   },
   solved: {
-    stroke: baseTheme.palette.green[600],
-    color: baseTheme.palette.green[600],
+    stroke: baseTheme.palette.green[500],
+    color: baseTheme.palette.green[500],
   },
   'not a bug': {
     stroke: baseTheme.palette.grey[600],
     color: baseTheme.palette.grey[600],
   },
 };
 
-const theme = {
+const appTheme = {
   ...baseTheme,
   colors: {
     ...baseTheme.colors,
     bySeverity: SEVERITY_COLORS,
     byBugState: BUG_STATE_COLORS,
     bySeverityHues: SEVERITY_HUES,
-    darkPine: CHARTS_COLOR_PALETTE.darkPine,
   },
   components: {
     ...baseTheme.components,
+    text: {
+      neutralColor: baseTheme.colors.foreground,
+      primaryColor: getColor(baseTheme.colors.primaryHue, 600),
+      successColor: getColor(baseTheme.colors.successHue, 700),
+      warningColor: getColor(baseTheme.colors.warningHue, 700),
+      dangerColor: getColor(baseTheme.colors.dangerHue, 700),
+      infoColor: getColor(baseTheme.colors.infoHue, 700),
+    },
     'tables.header_row': {
       height: 'auto',
     },
@@ -72,4 +79,5 @@ const theme = {
   },
 };
 
-export { theme };
+export type AppTheme = typeof appTheme;
+export { appTheme };