Feat/navbar overhaul

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["cozy-app"],
+  "extends": ["cozy-app/react"],
   "rules": {
     "no-console": "off",
     "react/display-name": "off"
@@ -12,5 +12,8 @@
     "react": {
       "version": "16.5.2"
     }
+  },
+  "parserOptions": {
+    "project": "tsconfig.json"
   }
 }

babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
           }
         ]
       ],
-      ignore: ['**/*.spec.jsx', '**/*.spec.js']
+      ignore: ['**/*.spec.jsx', '**/*.spec.js', '**/*.spec.tsx', '**/*.spec.ts']
     },
     test: {
       presets: [['cozy-app', { transformRuntime: { helpers: true } }]],

docs/webpack.config.js

@@ -7,12 +7,12 @@ module.exports = {
     alias: {
       docs: __dirname
     },
-    extensions: ['.jsx', '.js', '.json', '.styl']
+    extensions: ['.jsx', '.js', '.json', '.styl', '.ts', '.tsx']
   },
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         loader: 'babel-loader'
       },

package.json

@@ -27,14 +27,14 @@
     "build:doc:config": "copyfiles -u 1 docs/*.md docs/_config.yml build",
     "build:doc:kss": "kss --destination build/styleguide --title 'Cozy-UI Styleguide' --source stylus --builder node_modules/michelangelo/kss_styleguide/custom-template --homepage styleguide.md --css app.css",
     "build:doc:react": "styleguidist build --config docs/styleguide.config.js",
-    "build": "env BABEL_ENV=transpilation babel react/ --out-dir transpiled/react --verbose",
+    "build": "env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx react/ --out-dir transpiled/react --verbose",
     "clean:doc:kss": "rm -rf build/styleguide",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "deploy:doc": "git-directory-deploy --directory build/ --branch gh-pages",
     "makeSvgr": "scripts/generate-svgr-icon.sh",
     "lint": "npm-run-all 'lint:*'",
     "lint:commit": "git merge-base HEAD master && commitlint --from=$(git merge-base HEAD master) --to=HEAD || true",
-    "lint:js": "eslint 'react/**/*.jsx' 'react/**/*.js' 'docs/styleguide.config.js'",
+    "lint:js": "eslint 'react/**/*.jsx' 'react/**/*.js' 'react/**/*.ts' 'docs/styleguide.config.js'",
     "lint:stylus": "stylint stylus --config .stylintrc",
     "lint:md": "remark . -o -S",
     "palette": "scripts/make-palette.sh",
@@ -68,7 +68,10 @@
   ],
   "devDependencies": {
     "@babel/cli": "7.11.5",
-    "@babel/core": "7.11.5",
+    "@babel/core": "7.16.12",
+    "@babel/helper-builder-react-jsx": "7.16.7",
+    "@babel/helper-define-map": "7.16.7",
+    "@babel/helper-regex": "7.10.5",
     "@cozy/codemods": "^1.9.0",
     "@material-ui/core": "4.12.3",
     "@semantic-release/changelog": "5.0.1",
@@ -83,7 +86,7 @@
     "babel-loader": "8.1.0",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-json-import": "0.3.2",
-    "babel-preset-cozy-app": "1.9.2",
+    "babel-preset-cozy-app": "2.0.2",
     "browserslist-config-cozy": "0.4.0",
     "commitlint": "7.6.1",
     "commitlint-config-cozy": "0.6.0",
@@ -92,7 +95,7 @@
     "cozy-device-helper": "^1.16.1",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "^1.6.0",
+    "cozy-intent": "1.13.0",
     "cozy-sharing": "^3.10.0",
     "cozy-stack-client": "27.19.1",
     "css-loader": "0.28.11",
@@ -101,8 +104,7 @@
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "4.19.1",
-    "eslint-config-cozy-app": "0.5.1",
+    "eslint-config-cozy-app": "4.0.0",
     "express": "^4.17.1",
     "focus-trap-react": "^6.0.0",
     "git-directory-deploy": "1.5.1",
@@ -198,7 +200,9 @@
       "js",
       "jsx",
       "json",
-      "styl"
+      "styl",
+      "ts",
+      "tsx"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
@@ -211,7 +215,7 @@
       "react-styleguidist/lib"
     ],
     "transform": {
-      "^.+\\.jsx?$": "babel-jest"
+      "^.+\\.(ts|tsx|js|jsx)?$": "babel-jest"
     },
     "transformIgnorePatterns": [
       "node_modules/(?!(react-styleguidist)/)"

react/ActionMenu/index.jsx

@@ -1,16 +1,19 @@
-import React from 'react'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import PropTypes from 'prop-types'
+import React from 'react'
 import cx from 'classnames'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import styles from './styles.styl'
-import { Media, Bd, Img } from '../Media'
+import { usePopper } from 'react-popper'
+import { useTheme } from '@material-ui/core'
+
 import BottomDrawer from '../BottomDrawer'
+import Radio from '../Radio'
+import createDepreciationLogger from '../helpers/createDepreciationLogger'
+import styles from './styles.styl'
 import useBreakpoints from '../hooks/useBreakpoints'
+import { Media, Bd, Img } from '../Media'
 import { getCssVariableValue } from '../utils/color'
-import Radio from '../Radio'
 import { spacingProp } from '../Stack'
-import { usePopper } from 'react-popper'
-import createDepreciationLogger from '../helpers/createDepreciationLogger'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 
 const ActionMenuWrapper = ({
   inline,
@@ -101,6 +104,26 @@ const ActionMenu = ({
   anchorElRef,
   containerElRef
 }) => {
+  const theme = useTheme()
+  const sidebar = document.getElementById('sidebar')
+
+  useSetFlagshipUI(
+    {
+      bottomBackground: theme.palette.background.paper,
+      bottomTheme: 'dark',
+      topOverlay: getCssVariableValue('overlay'), // TODO: refactor to semantic variable
+      topBackground: theme.palette.background.paper,
+      topTheme: 'light'
+    },
+    {
+      bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'],
+      bottomTheme: 'dark',
+      topOverlay: 'transparent',
+      topBackground: theme.palette.background.paper,
+      topTheme: 'dark'
+    }
+  )
+
   if (placement)
     logDepecratedPlacement(
       '<ActionMenu placement /> is deprecated, use <ActionMenu popperOptions={{ placement }} /> instead'

react/AppSections/categories.js

@@ -21,6 +21,7 @@ const multiGroupBy = (iter, grouper) => {
   for (const obj of iter) {
     const values = grouper(obj) || []
     values.forEach(v => {
+      // eslint-disable-next-line no-prototype-builtins
       if (!groups.hasOwnProperty(v)) groups[v] = []
       groups[v].push(obj)
     })

react/BarContextProvider/index.spec.jsx

@@ -33,6 +33,7 @@ const IntentComponent = () => {
   let render
 
   try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     webviewIntent = useWebviewIntent()
     render = webviewIntent.foo
   } catch {
@@ -172,27 +173,4 @@ describe('BarContextProvider', () => {
 
     expect(queryByText(mockVoidWebviewService)).toBeInTheDocument()
   })
-
-  it('should not try to provide a cozy-intent context if one is provided', () => {
-    // Set Web context
-    window.cozy.isFlagshipApp = false
-
-    const client = createMockClient({})
-    const mockStore = configureStore()
-    const store = mockStore(x => x)
-
-    const { queryByText } = render(
-      <Provider store={store}>
-        <CozyProvider client={client}>
-          <I18n lang="en" dictRequire={() => locales}>
-            <App webviewService={mockWebviewService}>
-              <IntentComponent />
-            </App>
-          </I18n>
-        </CozyProvider>
-      </Provider>
-    )
-
-    expect(queryByText(mockWebviewService.foo)).not.toBeInTheDocument()
-  })
 })

react/Dialog/index.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
-import { default as MUIDialog } from '@material-ui/core/Dialog'
 import { RemoveScroll } from 'react-remove-scroll'
+import { default as MUIDialog } from '@material-ui/core/Dialog'
+import { useTheme } from '@material-ui/core'
+
 import useBreakpoints from '../hooks/useBreakpoints'
 import { useCozyTheme } from '../CozyTheme'
 import themesStyles from '../../stylus/settings/palette.styl'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 
 const Dialog = props => {
   const { isMobile, isTablet } = useBreakpoints()
@@ -21,12 +24,47 @@ const Dialog = props => {
     (props.open || props.opened) && shouldBlockScroll
       ? RemoveScroll
       : React.Fragment
+  const cozyTheme = useCozyTheme()
+  const theme = useTheme()
+  const cozBar = document.querySelector('.coz-bar-wrapper')
+  const sidebar = document.getElementById('sidebar')
 
-  const theme = useCozyTheme()
+  useSetFlagshipUI(
+    props.fullScreen
+      ? {
+          bottomBackground: theme.palette.background.paper,
+          bottomTheme: 'dark',
+          topBackground: theme.palette.background.paper,
+          topTheme: 'dark'
+        }
+      : {
+          bottomBackground: theme.palette.background.default,
+          bottomTheme: 'light',
+          bottomOverlay: 'rgba(0, 0, 0, 0.5)',
+          topOverlay: 'rgba(0, 0, 0, 0.5)',
+          topBackground: theme.palette.background.paper,
+          topTheme: 'light'
+        },
+    {
+      bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'],
+      bottomTheme: 'dark',
+      bottomOverlay: 'transparent',
+      topOverlay: 'transparent',
+      topBackground:
+        cozBar && getComputedStyle(cozBar).getPropertyValue('background-color'),
+      topTheme:
+        cozBar && cozBar.classList.contains('coz-theme-primary')
+          ? 'light'
+          : 'dark'
+    }
+  )
 
   return (
     <Wrapper>
-      <MUIDialog className={themesStyles[`CozyTheme--${theme}`]} {...props} />
+      <MUIDialog
+        className={themesStyles[`CozyTheme--${cozyTheme}`]}
+        {...props}
+      />
     </Wrapper>
   )
 }

react/IntentIframe/IntentIframe.jsx

@@ -48,6 +48,7 @@ class IntentIframe extends React.Component {
     })
       .start(this.intentViewer, this.onFrameLoaded)
       .then(result => {
+        // eslint-disable-next-line promise/always-return
         result ? onTerminate && onTerminate(result) : onCancel()
       })
       .catch(error => {

react/Popup/index.jsx

@@ -12,6 +12,7 @@ import { isMobileApp } from 'cozy-device-helper'
  */
 // source https://stackoverflow.com/a/16861050
 export function popupCenter(w, h) {
+  // eslint-disable-next-line no-redeclare
   /* global screen */
   // Fixes dual-screen position
   //                      Most browsers      Firefox

react/PopupOpener/index.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 // customized function to center a popup window
 // source https://stackoverflow.com/a/16861050
 export function openCenteredPopup(url, title, w, h) {
+  // eslint-disable-next-line no-redeclare
   /* global screen */
   var width =
     window.innerWidth || document.documentElement.clientWidth || screen.width

react/PushClientButton/index.jsx

@@ -13,10 +13,11 @@ const ButtonClient = props => {
   return (
     <a
       href={href}
-      //eslint-disable-next-line react/jsx-no-target-blank
+      // eslint-disable-next-line react/jsx-no-target-blank
       target="_blank"
       className={cx(styles['c-btn-client'], className)}
       onClick={onClick}
+      rel="noreferrer"
     >
       <figure>
         <Icon icon={icon || DeviceLaptopIcon} size="32" />

react/QuotaAlert/index.jsx

@@ -65,6 +65,8 @@ const QuotaAlert = ({ onClose }) => {
   if (isMobileApp()) {
     return <QuotaModalAlert onClose={onClose} />
   }
+  // TODO: why is there a conditional hook here?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const instanceInfo = useInstance(client)
   return <QuotaModalAlert instance={instanceInfo} onClose={onClose} />
 }

react/SelectionBar/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 
@@ -11,6 +11,8 @@ import useBreakpoints from '../hooks/useBreakpoints'
 import styles from './styles.styl'
 
 import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+import { useWebviewIntent } from 'cozy-intent'
+import { useTheme } from '@material-ui/core'
 
 /*
 
@@ -39,6 +41,37 @@ const SelectionBar = ({ actions, selected, hideSelectionBar }) => {
       action.displayCondition === undefined || action.displayCondition(selected)
     )
   })
+  const webviewIntent = useWebviewIntent()
+  const theme = useTheme()
+
+  // This component is always rendered but hidden with CSS if there is no selection
+  // That is why we do not use useSetFlagship API here because that hook can not accept changing values
+  useEffect(() => {
+    if (!webviewIntent || !theme) return
+
+    selectedCount === 0 &&
+      webviewIntent &&
+      webviewIntent.call('setFlagshipUI', {
+        bottomBackground: theme.palette.background.default,
+        bottomTheme: 'dark'
+      })
+
+    selectedCount > 0 &&
+      webviewIntent &&
+      webviewIntent.call('setFlagshipUI', {
+        bottomBackground: theme.palette.grey[700],
+        bottomTheme: 'light'
+      })
+
+    return () =>
+      webviewIntent &&
+      theme &&
+      webviewIntent.call('setFlagshipUI', {
+        bottomBackground: theme.palette.background.default,
+        bottomTheme: 'dark'
+      })
+  }, [selectedCount, webviewIntent])
+
   return (
     <div
       data-testid="selectionBar"