cozy-ui 62.9.0 → 62.11.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [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)
+
+
+### Bug Fixes
+
+* bump convict from 6.0.0 to 6.2.2 ([403c38e](https://github.com/cozy/cozy-ui/commit/403c38e))
+
 # [62.9.0](https://github.com/cozy/cozy-ui/compare/v62.8.0...v62.9.0) (2022-04-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "62.9.0",
+  "version": "62.11.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -113,6 +113,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 +154,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 +166,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 +203,8 @@
   },
   "jest": {
     "setupFilesAfterEnv": [
-      "./test/jestsetup.js"
+      "./test/jestsetup.js",
+      "jest-canvas-mock"
     ],
     "moduleFileExtensions": [
       "js",

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

package/react/PieChart/index.spec.jsx

@@ -0,0 +1,123 @@
+import { makeOptions, makeData } from './index'
+
+describe('makeOptions', () => {
+  it('should return default options', () => {
+    const options = makeOptions({ options: {}, single: false })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 }
+    })
+  })
+
+  it('should return default options for a single pie chart', () => {
+    const options = makeOptions({ options: {}, single: true })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 },
+      plugins: { tooltip: { filter: expect.any(Function) } }
+    })
+  })
+
+  it('should return default and customized options', () => {
+    const options = makeOptions({ options: { foo: 'bar' }, single: false })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 },
+      foo: 'bar'
+    })
+  })
+
+  it('should return default and customized options for a single pie chart', () => {
+    const options = makeOptions({ options: { foo: 'bar' }, single: true })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 },
+      plugins: { tooltip: { filter: expect.any(Function) } },
+      foo: 'bar'
+    })
+  })
+
+  it('should return default and customized options for a single pie chart even for customized default option', () => {
+    const options = makeOptions({
+      options: { plugins: { tooltip: { foo: 'bar' } } },
+      single: true
+    })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 },
+      plugins: {
+        tooltip: {
+          foo: 'bar',
+          filter: expect.any(Function)
+        }
+      }
+    })
+  })
+})
+
+describe('makeData', () => {
+  it('should return previous data is not a single pie chart', () => {
+    const prevData = { labels: ['Health'] }
+    const data = makeData({
+      data: prevData,
+      single: false,
+      theme: { palette: { primary: { main: '#fff' } } }
+    })
+
+    expect(data).toStrictEqual(prevData)
+  })
+
+  it('should add backgroud color for a single pie chart', () => {
+    const data = makeData({
+      data: { labels: ['Health'] },
+      single: true,
+      theme: { palette: { primary: { main: '#fff' } } }
+    })
+
+    expect(data).toStrictEqual({
+      labels: ['Health'],
+      datasets: [{ backgroundColor: ['#fff', 'transparent'] }]
+    })
+  })
+
+  it('should not mutate previous data for a single pie chart', () => {
+    const prevData = { labels: ['Health'] }
+    makeData({
+      data: prevData,
+      single: true,
+      theme: { palette: { primary: { main: '#fff' } } }
+    })
+
+    expect(prevData).toStrictEqual({ labels: ['Health'] })
+  })
+})