cozy-ui 75.6.1 → 76.0.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [76.0.0](https://github.com/cozy/cozy-ui/compare/v75.6.1...v76.0.0) (2022-10-05)
+
+
+### Bug Fixes
+
+* **List:** Change default color and position of List element ([2f11d48](https://github.com/cozy/cozy-ui/commit/2f11d48))
+* **NestedSelect:** Remove useless divider in header ([b4c4f46](https://github.com/cozy/cozy-ui/commit/b4c4f46))
+* **NestedSelect:** Remove useless style override in ItemRow ([b9e347e](https://github.com/cozy/cozy-ui/commit/b9e347e))
+
+
+### Features
+
+* Add CircularChart component ([d1b7283](https://github.com/cozy/cozy-ui/commit/d1b7283))
+
+
+### BREAKING CHANGES
+
+* **List:** Style, color and position of List elements have been readjusted. The result may not be appropriate for your use case, refer to the documentation to apply adjustments if necessary.
+
 ## [75.6.1](https://github.com/cozy/cozy-ui/compare/v75.6.0...v75.6.1) (2022-09-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "75.6.1",
+  "version": "76.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/CircularChart/CircularChartProgress.jsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import { makeStyles } from '../styles'
+import MuiCircularProgress from '../CircularProgress'
+
+const useStyles = makeStyles({
+  root: {
+    position: ({ position }) => position ?? undefined
+  },
+  svg: {
+    transform: 'rotate(-117deg)'
+  },
+  circle: {
+    strokeLinecap: 'round'
+  },
+  colorPrimary: {
+    color: ({ color }) => color ?? undefined
+  }
+})
+
+const computeValue = value => (value * 65) / 100
+
+const CircularChartProgress = forwardRef(
+  ({ value, position, color, size, thickness, ...props }, ref) => {
+    const styles = useStyles({ color, position })
+    const computedValue = computeValue(value)
+
+    return (
+      <MuiCircularProgress
+        ref={ref}
+        classes={styles}
+        value={computedValue}
+        thickness={thickness}
+        size={size}
+        {...props}
+      />
+    )
+  }
+)
+
+CircularChartProgress.displayName = 'CircularChartProgress'
+
+CircularChartProgress.defaultProps = {
+  value: 0,
+  variant: 'determinate',
+  size: 150,
+  thickness: 2.3
+}
+
+CircularChartProgress.propTypes = {
+  value: PropTypes.number,
+  position: PropTypes.string,
+  color: PropTypes.string,
+  size: PropTypes.number,
+  thickness: PropTypes.number
+}
+
+export default CircularChartProgress

package/react/CircularChart/CircularProgressWithBackground.jsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import Box from '../Box'
+import CircularChartProgress from './CircularChartProgress'
+
+const CircularProgressWithBackground = forwardRef(
+  ({ value, color, backgroundColor, size, thickness, ...props }, ref) => {
+    return (
+      <Box ref={ref} position="relative" display="inline-flex" {...props}>
+        <CircularChartProgress
+          size={size}
+          color={backgroundColor}
+          thickness={thickness}
+          position="absolute"
+          value={100}
+        />
+        <CircularChartProgress
+          value={value}
+          color={color}
+          size={size}
+          thickness={thickness}
+        />
+      </Box>
+    )
+  }
+)
+
+CircularProgressWithBackground.displayName = 'CircularProgressWithBackground'
+
+CircularProgressWithBackground.defaultProps = {
+  backgroundColor: 'var(--actionColorGhost)'
+}
+
+CircularProgressWithBackground.propTypes = {
+  value: PropTypes.number,
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  size: PropTypes.number,
+  thickness: PropTypes.number
+}
+
+export default CircularProgressWithBackground

package/react/CircularChart/Readme.md

@@ -0,0 +1,130 @@
+### Basic usage
+
+```bash
+import CircularChart from 'cozy-ui/transpiled/react/CircularChart'
+
+<CircularChart primaryProps={{ value: 70 }} secondaryProps={{ value: 30 }}>
+  {children}
+</CircularChart>
+```
+
+### Demo
+
+```jsx
+import CircularChart from 'cozy-ui/transpiled/react/CircularChart'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Box from 'cozy-ui/transpiled/react/Box'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import BikeIcon from 'cozy-ui/transpiled/react/Icons/Bike'
+
+;
+
+<Grid container>
+
+  <Grid item xs={12} sm={6} className="u-mb-1">
+    <div>
+      <CircularChart
+        primaryProps={{ value: 70 }}
+      >
+        {isTesting()
+          ? <Icon icon={BikeIcon} size={72} />
+          : <Box fontSize="4.5rem">🚴</Box>
+        }
+      </CircularChart>
+    </div>
+    <div>
+      <CircularChart
+        size="medium"
+        primaryProps={{ value: 70 }}
+      >
+        {isTesting()
+          ? <Icon icon={BikeIcon} size={48} />
+          : <Box fontSize="3rem">🚴</Box>
+        }
+      </CircularChart>
+    </div>
+    <div>
+      <CircularChart
+        size="small"
+        primaryProps={{ value: 70 }}
+      >
+        {isTesting()
+          ? <Icon icon={BikeIcon} size={40} />
+          : <Box fontSize="2.5rem">🚴</Box>
+        }
+      </CircularChart>
+    </div>
+  </Grid>
+
+  <Grid item xs={12} sm={6} className="u-mb-1">
+    <div>
+      <CircularChart
+        primaryProps={{ value: 70 }}
+        secondaryProps={{ value: 30 }}
+      >
+        {isTesting()
+          ? <Icon icon={BikeIcon} size={72} />
+          : <Box fontSize="4.5rem">🚴</Box>
+        }
+      </CircularChart>
+    </div>
+    <div>
+      <CircularChart
+        size="medium"
+        primaryProps={{ value: 70 }}
+        secondaryProps={{ value: 30 }}
+      >
+        {isTesting()
+          ? <Icon icon={BikeIcon} size={48} />
+          : <Box fontSize="3rem">🚴</Box>
+        }
+      </CircularChart>
+    </div>
+    <div>
+      <CircularChart
+        size="small"
+        primaryProps={{ value: 70 }}
+        secondaryProps={{ value: 30 }}
+      >
+        {isTesting()
+          ? <Icon icon={BikeIcon} size={40} />
+          : <Box fontSize="2.5rem">🚴</Box>
+        }
+      </CircularChart>
+    </div>
+  </Grid>
+
+</Grid>
+```
+
+### Fully customised
+
+```jsx
+import CircularChart from 'cozy-ui/transpiled/react/CircularChart'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+;
+
+<>
+  <CircularChart
+    primaryProps={{
+      value: 70,
+      color: '#BA5AE8',
+      backgroundColor: '#BA5AE83D',
+      size: 200,
+      thickness: 3
+    }}
+    secondaryProps={{
+      value: 30,
+      color: '#F1B61E',
+      backgroundColor: '#F1B61E3D',
+      size: 165,
+      thickness: 0.75
+    }}
+  >
+    <Typography variant="h3">Main title</Typography>
+    <Typography>secondary text</Typography>
+  </CircularChart>
+</>
+```

package/react/CircularChart/helper.spec.ts

@@ -0,0 +1,97 @@
+import { makeSizeAndThickness } from './helpers'
+
+describe('makeSizeAndThickness', () => {
+  describe('with hasTwoBar false', () => {
+    it('small values', () => {
+      const res = makeSizeAndThickness('small', false)
+
+      expect(res).toStrictEqual({
+        primarySizeAndThickness: {
+          size: 85,
+          thickness: 2.66
+        },
+        secondarySizeAndThickness: {
+          size: 73,
+          thickness: 2.5
+        }
+      })
+    })
+
+    it('medium values', () => {
+      const res = makeSizeAndThickness('medium', false)
+
+      expect(res).toStrictEqual({
+        primarySizeAndThickness: {
+          size: 102,
+          thickness: 2.527
+        },
+        secondarySizeAndThickness: {
+          size: 88,
+          thickness: 2.2
+        }
+      })
+    })
+
+    it('large values', () => {
+      const res = makeSizeAndThickness('large', false)
+
+      expect(res).toStrictEqual({
+        primarySizeAndThickness: {
+          size: 150,
+          thickness: 2.261
+        },
+        secondarySizeAndThickness: {
+          size: 132,
+          thickness: 1.9
+        }
+      })
+    })
+  })
+
+  describe('with hasTwoBar true', () => {
+    it('small values', () => {
+      const res = makeSizeAndThickness('small', true)
+
+      expect(res).toStrictEqual({
+        primarySizeAndThickness: {
+          size: 85,
+          thickness: 2
+        },
+        secondarySizeAndThickness: {
+          size: 73,
+          thickness: 2.5
+        }
+      })
+    })
+
+    it('medium values', () => {
+      const res = makeSizeAndThickness('medium', true)
+
+      expect(res).toStrictEqual({
+        primarySizeAndThickness: {
+          size: 102,
+          thickness: 1.9
+        },
+        secondarySizeAndThickness: {
+          size: 88,
+          thickness: 2.2
+        }
+      })
+    })
+
+    it('large values', () => {
+      const res = makeSizeAndThickness('large', true)
+
+      expect(res).toStrictEqual({
+        primarySizeAndThickness: {
+          size: 150,
+          thickness: 1.7
+        },
+        secondarySizeAndThickness: {
+          size: 132,
+          thickness: 1.9
+        }
+      })
+    })
+  })
+})

package/react/CircularChart/helpers.ts

@@ -0,0 +1,46 @@
+const makeThickness = (thickness: number, hasTwoBar: boolean): number => {
+  return hasTwoBar ? thickness : thickness * 1.33
+}
+
+export const makeSizeAndThickness = (
+  size: string,
+  hasTwoBar: boolean
+): object => {
+  switch (size) {
+    case 'small':
+      return {
+        primarySizeAndThickness: {
+          size: 85,
+          thickness: makeThickness(2, hasTwoBar)
+        },
+        secondarySizeAndThickness: {
+          size: 73,
+          thickness: 2.5
+        }
+      }
+
+    case 'medium':
+      return {
+        primarySizeAndThickness: {
+          size: 102,
+          thickness: makeThickness(1.9, hasTwoBar)
+        },
+        secondarySizeAndThickness: {
+          size: 88,
+          thickness: 2.2
+        }
+      }
+
+    default:
+      return {
+        primarySizeAndThickness: {
+          size: 150,
+          thickness: makeThickness(1.7, hasTwoBar)
+        },
+        secondarySizeAndThickness: {
+          size: 132,
+          thickness: 1.9
+        }
+      }
+  }
+}

package/react/CircularChart/index.jsx

@@ -0,0 +1,77 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import Box from '../Box'
+import CircularProgressWithBackground from './CircularProgressWithBackground'
+import { makeSizeAndThickness } from './helpers'
+
+const CircularChart = forwardRef(
+  ({ size, primaryProps, secondaryProps, children, ...props }, ref) => {
+    const {
+      primarySizeAndThickness,
+      secondarySizeAndThickness
+    } = makeSizeAndThickness(size, Boolean(secondaryProps))
+
+    return (
+      <Box
+        ref={ref}
+        position="relative"
+        display="inline-flex"
+        justifyContent="center"
+        alignItems="center"
+        {...props}
+      >
+        {Boolean(primaryProps) && (
+          <CircularProgressWithBackground
+            {...primarySizeAndThickness}
+            {...primaryProps}
+          />
+        )}
+        {Boolean(secondaryProps) && (
+          <CircularProgressWithBackground
+            {...secondarySizeAndThickness}
+            {...secondaryProps}
+            position="absolute"
+          />
+        )}
+        <Box
+          position="absolute"
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          paddingBottom="1rem"
+        >
+          {children}
+        </Box>
+      </Box>
+    )
+  }
+)
+
+CircularChart.displayName = 'CircularChart'
+
+CircularChart.defaultProps = {
+  size: 'large'
+}
+
+CircularChart.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  primaryProps: PropTypes.shape({
+    value: PropTypes.number,
+    color: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    size: PropTypes.number,
+    thickness: PropTypes.number
+  }),
+  secondaryProps: PropTypes.shape({
+    value: PropTypes.number,
+    color: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    size: PropTypes.number,
+    thickness: PropTypes.number
+  }),
+  children: PropTypes.node
+}
+
+export default CircularChart