cozy-ui 62.1.2 → 62.2.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [62.2.0](https://github.com/cozy/cozy-ui/compare/v62.1.4...v62.2.0) (2022-03-22)
+
+
+### Bug Fixes
+
+* **deps:** Upgrade few packages ([5df4e2b](https://github.com/cozy/cozy-ui/commit/5df4e2b))
+
+
+### Features
+
+* Add Typescript support ([1ad1a48](https://github.com/cozy/cozy-ui/commit/1ad1a48))
+* Handle FlagshipUI for cozy-drive cases ([6fa0228](https://github.com/cozy/cozy-ui/commit/6fa0228))
+* Refactor setFlagshipUI feature ([64ca864](https://github.com/cozy/cozy-ui/commit/64ca864))
+* Update cozy-intent for flagship-UI ([2b3d026](https://github.com/cozy/cozy-ui/commit/2b3d026))
+
+## [62.1.4](https://github.com/cozy/cozy-ui/compare/v62.1.3...v62.1.4) (2022-03-03)
+
+
+### Bug Fixes
+
+* Do not stretch small screenshots ([4af1a3f](https://github.com/cozy/cozy-ui/commit/4af1a3f))
+
+## [62.1.3](https://github.com/cozy/cozy-ui/compare/v62.1.2...v62.1.3) (2022-03-02)
+
+
+### Bug Fixes
+
+* **AppIcon:** Add appData to getIconUrl without using blob ([9e99569](https://github.com/cozy/cozy-ui/commit/9e99569))
+
 ## [62.1.2](https://github.com/cozy/cozy-ui/compare/v62.1.1...v62.1.2) (2022-02-24)
 
 

package/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 } }]],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "62.1.2",
+  "version": "62.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -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,25 +86,25 @@
     "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",
     "copyfiles": "2.1.1",
-    "cozy-client": "^27.5.1",
+    "cozy-client": "27.19.1",
     "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",
     "cssnano": "4.1.11",
     "cssnano-preset-advanced": "4.0.8",
     "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",
@@ -168,7 +171,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": ">=4.12",
-    "cozy-client": ">=27.5.1",
+    "cozy-client": ">=27.19.1",
     "cozy-device-helper": "^1.16.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
@@ -197,7 +200,9 @@
       "js",
       "jsx",
       "json",
-      "styl"
+      "styl",
+      "ts",
+      "tsx"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
@@ -210,7 +215,7 @@
       "react-styleguidist/lib"
     ],
     "transform": {
-      "^.+\\.jsx?$": "babel-jest"
+      "^.+\\.(ts|tsx|js|jsx)?$": "babel-jest"
     },
     "transformIgnorePatterns": [
       "node_modules/(?!(react-styleguidist)/)"

package/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'

package/react/AppIcon/index.jsx

@@ -49,6 +49,7 @@ export class AppIcon extends Component {
     return client.getStackClient().getIconURL({
       type,
       slug: app.slug || app,
+      appData: app,
       priority
     })
   }
@@ -59,6 +60,7 @@ export class AppIcon extends Component {
 
   async load() {
     const { app, fetchIcon, onReady, client } = this.props
+
     const loadFn = fetchIcon || this.fetchIcon
     let loadedUrl
     let loadError

package/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)
     })

package/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()
-  })
 })

package/react/CipherIcon/index.jsx

@@ -6,7 +6,7 @@ import Icon from '../Icon'
 import { withClient } from 'cozy-client'
 import { AppDoctype } from '../proptypes'
 
-import KeychainIcon from 'cozy-ui/transpiled/react/Icons/Keychain'
+import KeychainIcon from '../Icons/Keychain'
 
 class CipherIcon extends React.PureComponent {
   constructor(props) {
@@ -17,9 +17,10 @@ class CipherIcon extends React.PureComponent {
   fetchIcon() {
     const { client, konnector } = this.props
 
-    return client.stackClient.getIconURL({
+    return client.getStackClient().getIconURL({
       type: 'konnector',
-      slug: konnector.slug || konnector
+      slug: konnector.slug || konnector,
+      appData: konnector
     })
   }
 

package/react/CipherIcon/index.spec.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import CipherIcon from './index'
+
+jest.mock('cozy-client', () => ({
+  withClient: Component => {
+    const client = {
+      getStackClient: () => ({
+        getIconURL: ({ type, appData }) => {
+          console.log('getIconUrl called with:')
+          console.log(type)
+          console.log(appData)
+        }
+      })
+    }
+    return konnector => (
+      <Component client={client} konnector={{ ...konnector }} />
+    )
+  }
+}))
+
+jest.mock('../AppIcon', () => ({ fetchIcon }) => (
+  <button data-testid="app-icon" onClick={fetchIcon}></button>
+))
+
+describe('CipherIcon', () => {
+  it('should provide appData to getIconUrl in order to get icon simply, when oauth not needed', () => {
+    // Given
+    jest.spyOn(console, 'log').mockImplementation()
+    const konnector = {
+      name: 'PropTypes.string',
+      slug: 'slug',
+      links: {
+        icon: 'icon url'
+      },
+      latest_version: {
+        version: 'version'
+      }
+    }
+    const { getByTestId } = render(<CipherIcon konnector={konnector} />)
+
+    // When
+    fireEvent.click(getByTestId('app-icon'))
+
+    // Then
+    expect(console.log).toHaveBeenNthCalledWith(1, 'getIconUrl called with:')
+    expect(console.log).toHaveBeenNthCalledWith(2, 'konnector')
+    expect(console.log).toHaveBeenNthCalledWith(3, { konnector })
+  })
+})

package/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>
   )
 }

package/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 => {

package/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

package/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

package/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" />

package/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} />
 }

package/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"

package/react/Sidebar/index.jsx

@@ -2,12 +2,32 @@ import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import styles from './styles.styl'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { useTheme } from '@material-ui/core'
 
-const Sidebar = ({ children, className, ...restProps }) => (
-  <aside className={cx(styles['o-sidebar'], className)} {...restProps}>
-    {children}
-  </aside>
-)
+const Sidebar = ({ children, className, ...restProps }) => {
+  const theme = useTheme()
+
+  useSetFlagshipUI(
+    {
+      bottomBackground: theme.palette.background.default,
+      bottomTheme: 'dark'
+    },
+    {
+      bottomBackground: theme.palette.background.paper
+    }
+  )
+
+  return (
+    <aside
+      id="sidebar"
+      className={cx(styles['o-sidebar'], className)}
+      {...restProps}
+    >
+      {children}
+    </aside>
+  )
+}
 
 Sidebar.propTypes = {
   children: PropTypes.node,

package/react/Viewer/index.jsx

@@ -12,6 +12,8 @@ import ViewerByFile from './ViewerByFile'
 import { isValidForPanel } from './helpers'
 import PanelContent from './Panel/PanelContent'
 import FooterContent from './Footer/FooterContent'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { useTheme } from '@material-ui/core'
 
 const KEY_CODE_LEFT = 37
 const KEY_CODE_RIGHT = 39
@@ -149,6 +151,19 @@ const ViewerInformationsWrapper = ({
   validForPanel,
   toolbarRef
 }) => {
+  const theme = useTheme()
+  const sidebar = document.querySelector('[class*="sidebar"]')
+
+  useSetFlagshipUI(
+    {
+      bottomBackground: theme.palette.background.paper,
+      bottomTheme: 'dark'
+    },
+    {
+      bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper']
+    }
+  )
+
   return (
     <>
       {!disableFooter && (

package/react/__snapshots__/examples.spec.jsx.snap

@@ -8090,7 +8090,7 @@ exports[`SelectBox should render examples: SelectBox 14`] = `"<div><button>Toggl
 
 exports[`Sidebar should render examples: Sidebar 1`] = `
 "<div>
-  <aside class=\\"styles__o-sidebar___1295j\\" id=\\"sidebar\\">
+  <aside id=\\"sidebar\\" class=\\"styles__o-sidebar___1295j\\">
     <nav role=\\"navigation\\">
       <ul class=\\"styles__c-nav___33dZy\\">
         <li class=\\"styles__c-nav-item___3XOLK\\" id=\\"nav-item\\"><a class=\\"styles__c-nav-link___3mK6W styles__is-active___2D0jN\\"><span class=\\"styles__c-nav-icon___hrJUe\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path fill-rule=\\"evenodd\\" d=\\"M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zm-1.503-34.897c.83-1.438 2.175-1.44 3.007 0l9.992 17.294c.83 1.438.16 2.603-1.504 2.603H14.008c-1.661 0-2.336-1.162-1.504-2.603l9.993-17.294zm.082 5.323A1.334 1.334 0 0123.93 17h.141c.79 0 1.395.633 1.35 1.426l-.365 6.576c-.03.551-.499.998-1.055.998a1.069 1.069 0 01-1.055-.998l-.366-6.576zM22.5 29c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5z\\"></path></svg></span><span class=\\"styles__c-nav-text___1J3yU\\">Warn</span></a></li>

package/react/helpers/tracker.jsx

@@ -180,7 +180,7 @@ export const trackEvent = (event, trackerForTest) => {
   if (tracker) {
     let trackEventArray = []
     if (event && event[0]) {
-      //Like that, we can do trackEvent(['Drive', 'option1']) without thinking of adding this `trackEvent` attr
+      // Like that, we can do trackEvent(['Drive', 'option1']) without thinking of adding this `trackEvent` attr
       if (event[0] !== 'trackEvent') {
         trackEventArray = event.unshift('trackEvent')
       }

package/react/hooks/useRealtime.js

@@ -38,6 +38,8 @@ const useRealtime = (client, specs, deps) => {
     })
   }
 
+  // TODO: why is there a conditional hook here?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     subscribeRealtime()