cozy-ui 128.5.0 → 128.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [128.7.0](https://github.com/cozy/cozy-ui/compare/v128.6.0...v128.7.0) (2025-09-09)
+
+
+### Features
+
+* Add Storage component ([76c74ed](https://github.com/cozy/cozy-ui/commit/76c74ed))
+
+# [128.6.0](https://github.com/cozy/cozy-ui/compare/v128.5.0...v128.6.0) (2025-09-08)
+
+
+### Features
+
+* **DropdownText:** add color prop for Typography and update README example ([f5006b0](https://github.com/cozy/cozy-ui/commit/f5006b0))
+
 # [128.5.0](https://github.com/cozy/cozy-ui/compare/v128.4.0...v128.5.0) (2025-09-08)
 
 

package/package.json

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

package/react/DropdownText/Readme.md

@@ -22,7 +22,7 @@ const variants = [
 
 <>
   <Grid container>
-    <Grid item xs={6}>
+    <Grid item xs={6} sm={3} sd={2}>
       Default
       {variants.map((variant, index) => (
         <div key={index} className='u-mb-1'>
@@ -32,7 +32,7 @@ const variants = [
         </div>
       ))}
     </Grid>
-    <Grid item xs={6}>
+    <Grid item xs={6} sm={3} sd={2}>
       Disabled
       {variants.map((variant, index) => (
         <div key={index} className='u-mb-1'>
@@ -42,7 +42,29 @@ const variants = [
         </div>
       ))}
     </Grid>
+    <Grid item xs={6} sm={3} sd={2}>
+      Color primary
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownText variant={variant} color="primary">
+            {variant}
+          </DropdownText>
+        </div>
+      ))}
+    </Grid>
+    <Grid item xs={6} sm={3} sd={2}>
+      Color error 
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownText variant={variant} color="error">
+            {variant}
+          </DropdownText>
+        </div>
+      ))}
+    </Grid>
   </Grid>
+
+  <p>
   <div style={{ border: '1px dashed var(--borderMainColor)', marginBottom: '1rem' }}>
     <DropdownText>
       This is a long text without ellipsis without restrictive container
@@ -68,5 +90,6 @@ const variants = [
       Space between text and icon
     </DropdownText>
   </div>
+  </p>
 </>
 ```

package/react/DropdownText/index.jsx

@@ -16,14 +16,14 @@ const useStyles = makeStyles(theme => ({
   },
   typography: {
     color: ({ disabled }) =>
-      theme.palette.text[disabled ? 'disabled' : 'primary']
+      disabled ? theme.palette.text.disabled : undefined
   },
   endIcon: {
     display: 'flex',
     marginLeft: '5px',
     marginTop: ({ variant }) => (variant === 'body1' ? '3px' : undefined),
     color: ({ disabled }) =>
-      theme.palette.text[disabled ? 'disabled' : 'primary']
+      disabled ? theme.palette.text.disabled : undefined
   }
 }))
 
@@ -48,7 +48,7 @@ const DropdownText = forwardRef(
       variant = 'body1',
       disabled = false,
       noWrap = false,
-      color = 'primary',
+      color = 'initial',
       children,
       innerTextProps,
       innerIconContainerProps,
@@ -57,11 +57,12 @@ const DropdownText = forwardRef(
     },
     ref
   ) => {
-    const styles = useStyles({ spaceBetween, disabled, color, variant })
+    const styles = useStyles({ spaceBetween, disabled, variant })
 
     return (
       <div ref={ref} className={styles.container} {...props}>
         <Typography
+          color={color}
           classes={{ root: styles.typography }}
           variant={variant}
           noWrap={noWrap}
@@ -70,6 +71,7 @@ const DropdownText = forwardRef(
           {children}
         </Typography>
         <Typography
+          color={color}
           classes={{ root: styles.endIcon }}
           {...innerIconContainerProps}
         >
@@ -85,6 +87,8 @@ const DropdownText = forwardRef(
 )
 
 DropdownText.propTypes = {
+  /** Color used by Typography component */
+  color: PropTypes.string,
   /** Whether there is a space between the label and the icon */
   spaceBetween: PropTypes.bool,
   /** Variant used by Typography component */

package/react/Storage/Readme.md

@@ -0,0 +1,46 @@
+```jsx
+import Storage from 'cozy-ui/transpiled/react/Storage'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+const client = {
+  store: {
+    getState: () => {},
+    subscribe: () => {},
+    unsubscribe: () => {}
+  },
+  getInstanceOptions: () => {},
+  query: () => {},
+  getQueryFromState: queryName => {
+    if (queryName === 'io.cozy.settings/io.cozy.settings.instance') {
+      return {
+        data: {
+          uuid: "uid123"
+        }
+      }
+    } else if (queryName === 'io.cozy.settings/io.cozy.settings.context') {
+      return {
+        data: {
+          manager_url: "http://manager-url/",
+          enable_premium_links: true
+        }
+      }
+    } else if (queryName === 'io.cozy.settings/io.cozy.settings.disk-usage') {
+      return {
+        data: {
+          used: "500000000",
+          quota: "1000000000"
+        }
+      }
+    }
+  }
+}
+
+;
+
+<DemoProvider client={client}>
+  <div className="u-p-1-half u-maw-5">
+    <Storage onlyDesktop={false} />
+  </div>
+</DemoProvider>
+
+```

package/react/Storage/StorageButton.jsx

@@ -0,0 +1,34 @@
+import cx from 'classnames'
+import React from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+
+import { locales } from './locales'
+import Button from '../Buttons'
+import Icon from '../Icon'
+import TwakeWorkplaceIcon from '../Icons/TwakeWorkplace'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const StorageButton = ({ className }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const instanceInfo = useInstanceInfo()
+
+  return (
+    <Button
+      className={cx('u-bdrs-4', className)}
+      variant="secondary"
+      label={t('Storage.increase')}
+      startIcon={<Icon icon={TwakeWorkplaceIcon} size={22} />}
+      size="small"
+      height="auto"
+      fullWidth
+      component="a"
+      target="_blank"
+      href={buildPremiumLink(instanceInfo)}
+    />
+  )
+}
+
+export default StorageButton

package/react/Storage/StorageProgress.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { makeDiskInfos } from 'cozy-client/dist/models/instance'
+
+import { locales } from './locales'
+import Icon from '../Icon'
+import CloudIcon from '../Icons/Cloud'
+import { LinearProgress } from '../Progress'
+import Typography from '../Typography'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+/**
+ * Show remaining disk space with a progress bar
+ */
+const StorageProgress = () => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  const { diskUsage } = useInstanceInfo()
+
+  const { humanDiskQuota, humanDiskUsage, percentUsage } = makeDiskInfos(
+    diskUsage.data?.used,
+    diskUsage.data?.quota
+  )
+
+  return (
+    <>
+      <div className="u-flex u-flex-items-center">
+        <Icon
+          className="u-mr-half"
+          icon={CloudIcon}
+          size={24}
+          color="var(--iconTextColor)"
+        />
+        <Typography variant="caption">{t('Storage.title')}</Typography>
+      </div>
+      <LinearProgress
+        className="u-mv-half"
+        variant="determinate"
+        value={parseInt(percentUsage)}
+      />
+      <Typography variant="caption">
+        {t('Storage.availability', {
+          smart_count: (humanDiskQuota - humanDiskUsage).toFixed(2)
+        })}
+      </Typography>
+    </>
+  )
+}
+
+export default StorageProgress

package/react/Storage/index.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { shouldDisplayOffers } from 'cozy-client/dist/models/instance'
+import { isFlagshipApp } from 'cozy-device-helper'
+
+import StorageButton from './StorageButton'
+import StorageProgress from './StorageProgress'
+import useBreakpoints from '../providers/Breakpoints'
+
+const Storage = ({ onlyDesktop }) => {
+  const { isDesktop, isMobile } = useBreakpoints()
+  const instanceInfo = useInstanceInfo()
+
+  if (onlyDesktop && !isDesktop) return null
+
+  const showStorageButton =
+    instanceInfo.isLoaded &&
+    !isFlagshipApp() &&
+    !isMobile &&
+    shouldDisplayOffers(instanceInfo)
+
+  return (
+    <>
+      <StorageProgress />
+      {showStorageButton && <StorageButton className="u-mt-1" />}
+    </>
+  )
+}
+
+Storage.propTypes = {
+  /** Component enabled only for desktop. Using `false` will enable it for mobile and tablet also. */
+  onlyDesktop: PropTypes.bool
+}
+
+Storage.defaultProps = {
+  onlyDesktop: true
+}
+
+export default Storage

package/react/Storage/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "Storage": {
+    "title": "Storage",
+    "availability": "%{smart_count} GB available",
+    "increase": "Increase the space"
+  }
+}

package/react/Storage/locales/fr.json

@@ -0,0 +1,7 @@
+{
+  "Storage": {
+    "title": "Stockage",
+    "availability": "%{smart_count} Go disponible",
+    "increase": "Augmenter l'espace"
+  }
+}

package/react/Storage/locales/index.jsx

@@ -0,0 +1,7 @@
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}

package/transpiled/react/DropdownText/index.js

@@ -21,7 +21,7 @@ var useStyles = makeStyles(function (theme) {
     typography: {
       color: function color(_ref2) {
         var disabled = _ref2.disabled;
-        return theme.palette.text[disabled ? 'disabled' : 'primary'];
+        return disabled ? theme.palette.text.disabled : undefined;
       }
     },
     endIcon: {
@@ -33,7 +33,7 @@ var useStyles = makeStyles(function (theme) {
       },
       color: function color(_ref4) {
         var disabled = _ref4.disabled;
-        return theme.palette.text[disabled ? 'disabled' : 'primary'];
+        return disabled ? theme.palette.text.disabled : undefined;
       }
     }
   };
@@ -61,7 +61,7 @@ var DropdownText = /*#__PURE__*/forwardRef(function (_ref5, ref) {
       _ref5$noWrap = _ref5.noWrap,
       noWrap = _ref5$noWrap === void 0 ? false : _ref5$noWrap,
       _ref5$color = _ref5.color,
-      color = _ref5$color === void 0 ? 'primary' : _ref5$color,
+      color = _ref5$color === void 0 ? 'initial' : _ref5$color,
       children = _ref5.children,
       innerTextProps = _ref5.innerTextProps,
       innerIconContainerProps = _ref5.innerIconContainerProps,
@@ -71,19 +71,20 @@ var DropdownText = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   var styles = useStyles({
     spaceBetween: spaceBetween,
     disabled: disabled,
-    color: color,
     variant: variant
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: styles.container
   }, props), /*#__PURE__*/React.createElement(Typography, _extends({
+    color: color,
     classes: {
       root: styles.typography
     },
     variant: variant,
     noWrap: noWrap
   }, innerTextProps), children), /*#__PURE__*/React.createElement(Typography, _extends({
+    color: color,
     classes: {
       root: styles.endIcon
     }
@@ -93,6 +94,9 @@ var DropdownText = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   }, innerIconProps))));
 });
 DropdownText.propTypes = {
+  /** Color used by Typography component */
+  color: PropTypes.string,
+
   /** Whether there is a space between the label and the icon */
   spaceBetween: PropTypes.bool,
 

package/transpiled/react/Storage/StorageButton.d.ts

@@ -0,0 +1,4 @@
+export default StorageButton;
+declare function StorageButton({ className }: {
+    className: any;
+}): JSX.Element;

package/transpiled/react/Storage/StorageButton.js

@@ -0,0 +1,36 @@
+import cx from 'classnames';
+import React from 'react';
+import { useInstanceInfo } from 'cozy-client';
+import { buildPremiumLink } from 'cozy-client/dist/models/instance';
+import { locales } from "cozy-ui/transpiled/react/Storage/locales";
+import Button from "cozy-ui/transpiled/react/Buttons";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import TwakeWorkplaceIcon from "cozy-ui/transpiled/react/Icons/TwakeWorkplace";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var StorageButton = function StorageButton(_ref) {
+  var className = _ref.className;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var instanceInfo = useInstanceInfo();
+  return /*#__PURE__*/React.createElement(Button, {
+    className: cx('u-bdrs-4', className),
+    variant: "secondary",
+    label: t('Storage.increase'),
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: TwakeWorkplaceIcon,
+      size: 22
+    }),
+    size: "small",
+    height: "auto",
+    fullWidth: true,
+    component: "a",
+    target: "_blank",
+    href: buildPremiumLink(instanceInfo)
+  });
+};
+
+export default StorageButton;

package/transpiled/react/Storage/StorageProgress.d.ts

@@ -0,0 +1,5 @@
+export default StorageProgress;
+/**
+ * Show remaining disk space with a progress bar
+ */
+declare function StorageProgress(): JSX.Element;

package/transpiled/react/Storage/StorageProgress.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useInstanceInfo } from 'cozy-client';
+import { makeDiskInfos } from 'cozy-client/dist/models/instance';
+import { locales } from "cozy-ui/transpiled/react/Storage/locales";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud";
+import { LinearProgress } from "cozy-ui/transpiled/react/Progress";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+/**
+ * Show remaining disk space with a progress bar
+ */
+
+var StorageProgress = function StorageProgress() {
+  var _diskUsage$data, _diskUsage$data2;
+
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useInstanceInfo = useInstanceInfo(),
+      diskUsage = _useInstanceInfo.diskUsage;
+
+  var _makeDiskInfos = makeDiskInfos((_diskUsage$data = diskUsage.data) === null || _diskUsage$data === void 0 ? void 0 : _diskUsage$data.used, (_diskUsage$data2 = diskUsage.data) === null || _diskUsage$data2 === void 0 ? void 0 : _diskUsage$data2.quota),
+      humanDiskQuota = _makeDiskInfos.humanDiskQuota,
+      humanDiskUsage = _makeDiskInfos.humanDiskUsage,
+      percentUsage = _makeDiskInfos.percentUsage;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex u-flex-items-center"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "u-mr-half",
+    icon: CloudIcon,
+    size: 24,
+    color: "var(--iconTextColor)"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, t('Storage.title'))), /*#__PURE__*/React.createElement(LinearProgress, {
+    className: "u-mv-half",
+    variant: "determinate",
+    value: parseInt(percentUsage)
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, t('Storage.availability', {
+    smart_count: (humanDiskQuota - humanDiskUsage).toFixed(2)
+  })));
+};
+
+export default StorageProgress;

package/transpiled/react/Storage/index.d.ts

@@ -0,0 +1,14 @@
+export default Storage;
+declare function Storage({ onlyDesktop }: {
+    onlyDesktop: any;
+}): JSX.Element | null;
+declare namespace Storage {
+    namespace propTypes {
+        const onlyDesktop: PropTypes.Requireable<boolean>;
+    }
+    namespace defaultProps {
+        const onlyDesktop_1: boolean;
+        export { onlyDesktop_1 as onlyDesktop };
+    }
+}
+import PropTypes from "prop-types";

package/transpiled/react/Storage/index.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useInstanceInfo } from 'cozy-client';
+import { shouldDisplayOffers } from 'cozy-client/dist/models/instance';
+import { isFlagshipApp } from 'cozy-device-helper';
+import StorageButton from "cozy-ui/transpiled/react/Storage/StorageButton";
+import StorageProgress from "cozy-ui/transpiled/react/Storage/StorageProgress";
+import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
+
+var Storage = function Storage(_ref) {
+  var onlyDesktop = _ref.onlyDesktop;
+
+  var _useBreakpoints = useBreakpoints(),
+      isDesktop = _useBreakpoints.isDesktop,
+      isMobile = _useBreakpoints.isMobile;
+
+  var instanceInfo = useInstanceInfo();
+  if (onlyDesktop && !isDesktop) return null;
+  var showStorageButton = instanceInfo.isLoaded && !isFlagshipApp() && !isMobile && shouldDisplayOffers(instanceInfo);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StorageProgress, null), showStorageButton && /*#__PURE__*/React.createElement(StorageButton, {
+    className: "u-mt-1"
+  }));
+};
+
+Storage.propTypes = {
+  /** Component enabled only for desktop. Using `false` will enable it for mobile and tablet also. */
+  onlyDesktop: PropTypes.bool
+};
+Storage.defaultProps = {
+  onlyDesktop: true
+};
+export default Storage;

package/transpiled/react/Storage/locales/index.d.ts

@@ -0,0 +1,6 @@
+export namespace locales {
+    export { en };
+    export { fr };
+}
+import en from "./en.json";
+import fr from "./fr.json";

package/transpiled/react/Storage/locales/index.js

@@ -0,0 +1,18 @@
+var en = {
+  Storage: {
+    title: "Storage",
+    availability: "%{smart_count} GB available",
+    increase: "Increase the space"
+  }
+};
+var fr = {
+  Storage: {
+    title: "Stockage",
+    availability: "%{smart_count} Go disponible",
+    increase: "Augmenter l'espace"
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr
+};