cozy-ui 62.9.1 → 62.12.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [62.12.0](https://github.com/cozy/cozy-ui/compare/v62.11.0...v62.12.0) (2022-04-26)
+
+
+### Bug Fixes
+
+* Hide bottom of screen in immersive mode ([65fcc5f](https://github.com/cozy/cozy-ui/commit/65fcc5f))
+* Revert icons to white in immersive mode ([43bc925](https://github.com/cozy/cozy-ui/commit/43bc925))
+* Upgrade cozy-intent and cozy-device-helper ([44904b4](https://github.com/cozy/cozy-ui/commit/44904b4))
+
+
+### Features
+
+* Use new caller API in components ([10742b0](https://github.com/cozy/cozy-ui/commit/10742b0))
+
+# [62.11.0](https://github.com/cozy/cozy-ui/compare/v62.10.0...v62.11.0) (2022-04-22)
+
+
+### Features
+
+* Add dropdown ([ee214f8](https://github.com/cozy/cozy-ui/commit/ee214f8))
+
+# [62.10.0](https://github.com/cozy/cozy-ui/compare/v62.9.1...v62.10.0) (2022-04-21)
+
+
+### Features
+
+* Add chart.js and react-chartjs-2 packages ([16df033](https://github.com/cozy/cozy-ui/commit/16df033))
+* Add PieChart component ([b7ce49f](https://github.com/cozy/cozy-ui/commit/b7ce49f))
+
 ## [62.9.1](https://github.com/cozy/cozy-ui/compare/v62.9.0...v62.9.1) (2022-04-21)
 
 

package/CODEOWNERS

@@ -0,0 +1,2 @@
+# General code owners
+*       @JF-Cozy @Merkur39 @trollepierre @Ldoppea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "62.9.1",
+  "version": "62.12.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -43,7 +43,6 @@
     "prebuild:css:kss": "mkdir -p build/styleguide && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl",
     "prebuild:doc:kss": "run-s clean:doc:kss build:css:kss",
     "prepare": "yarn release",
-    "prepush": "[[ $(git rev-parse --abbrev-ref HEAD) != 'gh-pages' ]] && yarn lint || true",
     "release": "npm-run-all --parallel sprite palette && yarn build",
     "semantic-release": "semantic-release",
     "sprite": "scripts/make-icon-sprite.sh",
@@ -92,10 +91,10 @@
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.4.1",
     "cozy-client": "27.19.1",
-    "cozy-device-helper": "^1.16.1",
+    "cozy-device-helper": "1.18.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "1.13.0",
+    "cozy-intent": "1.16.1",
     "cozy-sharing": "^3.10.0",
     "cozy-stack-client": "27.19.1",
     "css-loader": "0.28.11",
@@ -113,6 +112,7 @@
     "http-server": "0.13.0",
     "husky": "0.14.3",
     "identity-obj-proxy": "3.0.0",
+    "jest-canvas-mock": "2.3.1",
     "jest-cli": "^26.6.3",
     "kss": "3.0.1",
     "kss-webpack-plugin": "1.5.0",
@@ -153,6 +153,7 @@
   "dependencies": {
     "@babel/runtime": "^7.3.4",
     "@popperjs/core": "^2.4.4",
+    "chart.js": "3.7.1",
     "classnames": "^2.2.5",
     "cozy-interapp": "^0.5.4",
     "date-fns": "^1.28.5",
@@ -164,6 +165,7 @@
     "node-polyglot": "^2.2.2",
     "normalize.css": "^8.0.0",
     "piwik-react-router": "0.12.1",
+    "react-chartjs-2": "4.1.0",
     "react-markdown": "^4.0.8",
     "react-pdf": "^4.0.5",
     "react-popper": "^2.2.3",
@@ -200,7 +202,8 @@
   },
   "jest": {
     "setupFilesAfterEnv": [
-      "./test/jestsetup.js"
+      "./test/jestsetup.js",
+      "jest-canvas-mock"
     ],
     "moduleFileExtensions": [
       "js",

package/react/ActionMenu/index.jsx

@@ -121,7 +121,8 @@ const ActionMenu = ({
       topOverlay: 'transparent',
       topBackground: theme.palette.background.paper,
       topTheme: 'dark'
-    }
+    },
+    'cozy-ui/ActionMenu'
   )
 
   if (placement)

package/react/BottomSheet/BottomSheet.jsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
 
+import { flagshipMetadata } from 'cozy-device-helper'
+
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
@@ -27,6 +29,15 @@ const makeStyles = ({ isTopPosition }) => ({
   },
   stack: {
     backgroundColor: 'var(--defaultBackgroundColor)'
+  },
+  flagshipImmersive: {
+    backgroundColor: 'var(--paperBackgroundColor)',
+    bottom: 0,
+    content: '',
+    height: 'var(--flagship-bottom-height)',
+    position: 'fixed',
+    width: '100%',
+    zIndex: 'var(--zIndex-modal)'
   }
 })
 
@@ -97,18 +108,11 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
         )
       : 0
 
-    // Will return 0 if the variable is not set
-    const flagshipBottomOffset = Number(
-      getComputedStyle(document.body)
-        .getPropertyValue('--flagship-bottom-height')
-        .replace('px', '')
-    )
-
     const minHeight =
       headerRef.current.offsetHeight +
       actionButtonsHeight +
       actionButtonsBottomMargin +
-      flagshipBottomOffset
+      (flagshipMetadata.navbarHeight || 0)
 
     // Used so that the bottomSheet can be opened to the top,
     // without stopping at the content height
@@ -149,43 +153,47 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
   })
 
   return (
-    <MuiBottomSheet
-      peekHeights={peekHeights}
-      defaultHeight={initPos}
-      backdrop={false}
-      fullHeight={false}
-      onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
-      styles={{ root: styles.root }}
-      threshold={0}
-      // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
-      springConfig={{
-        tension: defaultBottomSheetSpringConfig.tension,
-        friction: defaultBottomSheetSpringConfig.friction,
-        clamp: defaultBottomSheetSpringConfig.clamp
-      }}
-      disabledClosing={true}
-      snapPointSeekerMode="next"
-    >
-      <div ref={innerContentRef}>
-        <Paper
-          data-testid="bottomSheet-header"
-          className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
-          ref={headerRef}
-          elevation={0}
-          square
-        >
-          <div style={styles.indicator} />
-        </Paper>
-        <Stack
-          style={styles.stack}
-          className="u-flex u-flex-column u-ov-hidden"
-          spacing="s"
-        >
-          {overriddenChildren}
-        </Stack>
-      </div>
-      <div style={{ height: bottomSpacerHeight }} />
-    </MuiBottomSheet>
+    <>
+      {flagshipMetadata.immersive && <span style={styles.flagshipImmersive} />}
+
+      <MuiBottomSheet
+        peekHeights={peekHeights}
+        defaultHeight={initPos}
+        backdrop={false}
+        fullHeight={false}
+        onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
+        styles={{ root: styles.root }}
+        threshold={0}
+        // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
+        springConfig={{
+          tension: defaultBottomSheetSpringConfig.tension,
+          friction: defaultBottomSheetSpringConfig.friction,
+          clamp: defaultBottomSheetSpringConfig.clamp
+        }}
+        disabledClosing={true}
+        snapPointSeekerMode="next"
+      >
+        <div ref={innerContentRef}>
+          <Paper
+            data-testid="bottomSheet-header"
+            className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
+            ref={headerRef}
+            elevation={0}
+            square
+          >
+            <div style={styles.indicator} />
+          </Paper>
+          <Stack
+            style={styles.stack}
+            className="u-flex u-flex-column u-ov-hidden"
+            spacing="s"
+          >
+            {overriddenChildren}
+          </Stack>
+        </div>
+        <div style={{ height: bottomSpacerHeight }} />
+      </MuiBottomSheet>
+    </>
   )
 }
 

package/react/Dialog/index.jsx

@@ -3,6 +3,8 @@ import { RemoveScroll } from 'react-remove-scroll'
 import { default as MUIDialog } from '@material-ui/core/Dialog'
 import { useTheme } from '@material-ui/core'
 
+import { flagshipMetadata } from 'cozy-device-helper'
+
 import useBreakpoints from '../hooks/useBreakpoints'
 import { useCozyTheme } from '../CozyTheme'
 import themesStyles from '../../stylus/settings/palette.styl'
@@ -47,16 +49,18 @@ const Dialog = props => {
         },
     {
       bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'],
-      bottomTheme: 'dark',
+      bottomTheme: flagshipMetadata.immersive ? 'light' : 'dark',
       bottomOverlay: 'transparent',
       topOverlay: 'transparent',
       topBackground:
         cozBar && getComputedStyle(cozBar).getPropertyValue('background-color'),
       topTheme:
-        cozBar && cozBar.classList.contains('coz-theme-primary')
+        flagshipMetadata.immersive ||
+        (cozBar && cozBar.classList.contains('coz-theme-primary'))
           ? 'light'
           : 'dark'
-    }
+    },
+    'cozy-ui/Dialog'
   )
 
   return (

package/react/DropdownText/Readme.md

@@ -0,0 +1,53 @@
+This component can be used as a trigger to open menus, for example an ActionMenu component. There is also `DropdownButton` which offers the same possibilities, but with the added button wrapper.
+
+```jsx
+import DropdownText from 'cozy-ui/transpiled/react/DropdownText'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+
+const variants = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'subtitle1',
+  'subtitle2',
+  'body1',
+  'body2',
+  'caption'
+]
+
+;
+
+<>
+  <Grid container>
+    <Grid item xs={6}>
+      Default
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownText variant={variant}>
+            {variant}
+          </DropdownText>
+        </div>
+      ))}
+    </Grid>
+    <Grid item xs={6}>
+      Disabled
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownText variant={variant} disabled>
+            {variant}
+          </DropdownText>
+        </div>
+      ))}
+    </Grid>
+  </Grid>
+  <DropdownText spaceBetween style={{ border: '1px solid var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
+    Space between text and icon
+  </DropdownText>
+  <DropdownText style={{ border: '1px solid var(--borderMainColor)' }}>
+    Text with<br />breaking spaces<br />inside content
+  </DropdownText>
+</>
+```

package/react/DropdownText/index.jsx

@@ -0,0 +1,79 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/core/styles'
+
+import Typography from '../Typography'
+import Icon from '../Icon'
+import BottomIcon from '../Icons/Bottom'
+
+const useStyles = makeStyles(theme => ({
+  endIcon: {
+    marginLeft: '5px'
+  },
+  typography: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    justifyContent: ({ spaceBetween }) =>
+      spaceBetween ? 'space-between' : 'left',
+    color: ({ disabled }) =>
+      theme.palette.text[disabled ? 'disabled' : 'primary']
+  }
+}))
+
+const endIconSizeByVariant = {
+  h1: 24,
+  h2: 17,
+  h3: 15,
+  h4: 14,
+  h5: 13,
+  h6: 12,
+  body1: 12,
+  body2: 11,
+  caption: 10,
+  subtitle1: 11,
+  subtitle2: 10
+}
+
+const DropdownText = forwardRef(
+  (
+    {
+      spaceBetween = false,
+      variant = 'body1',
+      disabled = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const styles = useStyles({ spaceBetween, disabled })
+
+    return (
+      <Typography
+        ref={ref}
+        classes={{ root: styles.typography }}
+        variant={variant}
+        {...props}
+      >
+        {children}
+        <Icon
+          className={styles.endIcon}
+          icon={BottomIcon}
+          size={endIconSizeByVariant[variant]}
+        />
+      </Typography>
+    )
+  }
+)
+
+DropdownText.propTypes = {
+  /** Whether there is a space between the label and the icon */
+  spaceBetween: PropTypes.bool,
+  /** Variant used by Typography component */
+  variant: PropTypes.string,
+  /** Whether the component is disabled */
+  disabled: PropTypes.bool,
+  children: PropTypes.node
+}
+
+export default DropdownText

package/react/PieChart/Readme.md

@@ -0,0 +1,53 @@
+#### PieChart
+
+```jsx
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import PieChart from 'cozy-ui/transpiled/react/PieChart'
+
+;
+
+<Grid container>
+  <Grid item xs={12} sm={6}>
+    <PieChart
+      single={true}
+      primaryText="60 %"
+      secondaryText="of the total"
+      data={{
+        labels: ['Health'],
+        datasets: [{ data: [60, 40] }]
+      }}
+      options={{
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: tooltipItems => `${tooltipItems.label}: ${tooltipItems.raw}%`
+            }
+          }
+        }
+      }}
+    />
+  </Grid>
+  <Grid item xs={12} sm={6}>
+    <PieChart
+      primaryText="105 €"
+      secondaryText="on the period"
+      data={{
+        labels: ['Earnings', 'Children', 'Sports', 'Housing', 'Health'],
+        datasets: [{
+          data: [40, 30, 20, 10, 5],
+          backgroundColor: ['#8978FF', '#FF7B5E', '#F85AA8', '#F1B61E', '#15CACD']
+        }]
+      }}
+      options={{
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: tooltipItems => `${tooltipItems.label}: ${tooltipItems.raw}€`
+            }
+          }
+        }
+      }}
+    />
+  </Grid>
+</Grid>
+```

package/react/PieChart/index.jsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js'
+import { Doughnut } from 'react-chartjs-2'
+import { useTheme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import set from 'lodash/set'
+import cloneDeep from 'lodash/cloneDeep'
+
+import Typography from '../Typography'
+import isTesting from '../helpers/isTesting'
+
+ChartJS.register(ArcElement, Tooltip)
+
+const useStyles = makeStyles(theme => ({
+  container: {
+    position: 'relative',
+    zIndex: '1',
+    width: '192px',
+    height: '192px'
+  },
+  background: {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    border: '24px solid var(--actionColorGhost)',
+    borderRadius: '100%',
+    zIndex: -1,
+    backgroundColor: ({ single }) =>
+      !single && theme.palette.type === 'dark'
+        ? theme.palette.primary.main
+        : 'none',
+    boxShadow: ({ single }) =>
+      !single && theme.palette.type === 'dark'
+        ? `0 0 0 2px ${theme.palette.primary.main}`
+        : 'none'
+  },
+  centerText: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    top: '25px',
+    left: '25px',
+    right: '25px',
+    bottom: '25px',
+    borderRadius: '50%',
+    zIndex: '-1'
+  },
+  typography: {
+    color: ({ single }) =>
+      !single && theme.palette.type === 'dark'
+        ? theme.palette.primary.contrastText
+        : theme.palette.text.primary
+  }
+}))
+
+export const makeOptions = ({ options, single }) => {
+  const madeOptions = {
+    cutout: '75%',
+    elements: {
+      arc: {
+        borderWidth: 0
+      }
+    },
+    animation: isTesting() ? false : { duration: 1000 },
+    ...options
+  }
+  if (single) set(madeOptions, 'plugins.tooltip.filter', item => item.label)
+
+  return madeOptions
+}
+
+export const makeData = ({ data, single, theme }) => {
+  const madeData = cloneDeep(data)
+  if (single)
+    set(madeData, 'datasets[0].backgroundColor', [
+      theme.palette.primary.main,
+      'transparent'
+    ])
+
+  return madeData
+}
+
+const PieChart = ({
+  data,
+  options = {},
+  primaryText,
+  secondaryText,
+  single = false,
+  className,
+  ...props
+}) => {
+  const theme = useTheme()
+  const classes = useStyles({ single })
+  const madeOptions = makeOptions({ options, single })
+  const madeData = makeData({ data, single, theme })
+
+  return (
+    <div className={cx(classes.container, className)} {...props}>
+      <div className={classes.background} />
+      <Doughnut data={madeData} options={madeOptions} />
+      {(primaryText || secondaryText) && (
+        <div className={classes.centerText}>
+          {primaryText && (
+            <Typography classes={{ root: classes.typography }} variant="h3">
+              {primaryText}
+            </Typography>
+          )}
+          {secondaryText && (
+            <Typography classes={{ root: classes.typography }} variant="body2">
+              {secondaryText}
+            </Typography>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+PieChart.propTypes = {
+  /** Data to be passed to chart.js graph */
+  data: PropTypes.object.isRequired,
+  /** Options to be passed to chart.js graph */
+  options: PropTypes.object,
+  /** Text to show as primary */
+  primaryText: PropTypes.string,
+  /** Text to show as secondary */
+  secondaryText: PropTypes.string,
+  /** Whether to use a single data */
+  single: PropTypes.bool,
+  className: PropTypes.string
+}
+
+export default PieChart