cozy-ui 62.1.3 → 62.3.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [62.3.0](https://github.com/cozy/cozy-ui/compare/v62.2.0...v62.3.0) (2022-03-25)
+
+
+### Features
+
+* Implement openApp animation from cozy-ui ([45e9e3b](https://github.com/cozy/cozy-ui/commit/45e9e3b))
+
+# [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)
 
 

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.3",
+  "version": "62.3.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,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)/)"

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

@@ -111,8 +111,9 @@ export class AppIcon extends Component {
           <img
             alt={alt}
             className={cx(styles['c-app-icon'], className)}
-            src={icon}
             onError={this.handleError}
+            ref={this.props.iconRef}
+            src={icon}
           />
         )
       case ERRORED:
@@ -128,6 +129,7 @@ export class AppIcon extends Component {
             icon={fallbackIcon || CubeIcon}
             width="100%"
             color={palette['coolGrey']}
+            iconRef={this.props.iconRef}
           />
         )
     }

package/react/AppLinker/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+
 import {
   checkApp,
   startApp,
@@ -9,6 +10,8 @@ import {
   isAndroid,
   isFlagshipApp
 } from 'cozy-device-helper'
+import { WebviewContext } from 'cozy-intent'
+import logger from 'cozy-logger'
 
 import {
   generateUniversalLink,
@@ -17,7 +20,6 @@ import {
 } from './native'
 import { NATIVE_APP_INFOS } from './native.config'
 import expiringMemoize from './expiringMemoize'
-import { WebviewContext } from 'cozy-intent'
 
 const expirationDelay = 10 * 1000
 const memoizedCheckApp = expiringMemoize(
@@ -36,6 +38,13 @@ export class AppLinker extends React.Component {
 
   constructor(props) {
     super(props)
+
+    this.imgRef = null
+  }
+
+  setImgRef = img => {
+    this.imgRef = img
+    this.setState({ imgRef: this.imgRef })
   }
 
   componentDidMount() {
@@ -69,7 +78,7 @@ export class AppLinker extends React.Component {
     }
   }
 
-  static getOnClickHref(props, nativeAppIsAvailable, context) {
+  static getOnClickHref(props, nativeAppIsAvailable, context, imgRef) {
     const { app, nativePath } = props
     const slug = AppLinker.getSlug(props)
     let href = props.href
@@ -79,15 +88,21 @@ export class AppLinker extends React.Component {
 
     if (isFlagshipApp()) {
       if (!context)
-        console.warn(
-          'FlagshipApp detected but no context found. Is the app wrapped in WebviewIntentProvider?'
+        logger.warn(
+          'FlagshipApp detected but no context found. Is the app wrapped in <WebviewIntentProvider? />'
         )
 
       if (context) {
+        const imgPayload =
+          imgRef &&
+          JSON.stringify({
+            ...imgRef.getBoundingClientRect().toJSON()
+          })
+
         return {
           onClick: event => {
             event.preventDefault()
-            context.call('openApp', href, app)
+            context.call('openApp', href, app, imgPayload)
           },
           href: '#'
         }
@@ -180,9 +195,16 @@ export class AppLinker extends React.Component {
     const { href, onClick } = AppLinker.getOnClickHref(
       this.props,
       nativeAppIsAvailable,
-      this.context
+      this.context,
+      this.state.imgRef
     )
-    return children({ ...appInfo, onClick: onClick, href })
+
+    return children({
+      ...appInfo,
+      iconRef: this.setImgRef,
+      onClick: onClick,
+      href
+    })
   }
 }
 

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/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/Icons/Cube.jsx

@@ -1,9 +1,9 @@
 // Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/cube.svg` to regenerate;
 import React from 'react'
 
-function SvgCube(props) {
+function SvgCube({ iconRef, ...props }) {
   return (
-    <svg viewBox="0 0 16 16" {...props}>
+    <svg viewBox="0 0 16 16" {...props} ref={iconRef}>
       <path d="M1 11.009V5.5c0-.55.39-.773.872-.498l5.256 3.003c.476.272.872.944.872 1.495v5.508c0 .549-.39.772-.872.497l-5.256-3.003C1.396 12.231 1 11.56 1 11.01zm15 0c0 .55-.396 1.222-.872 1.494l-5.256 3.003c-.481.275-.872.052-.872-.497V9.5c0-.55.396-1.223.872-1.495l5.256-3.003c.481-.275.872-.052.872.498v5.508zM9.35 6.982c-.47.288-1.237.284-1.7 0l-4.8-2.954c-.47-.29-.463-.732.027-.995L7.623.477c.485-.261 1.264-.264 1.754 0l4.746 2.556c.485.26.49.71.027.995l-4.8 2.954z" />
     </svg>
   )

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()