cozy-ui 128.6.0 → 128.7.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

package/package.json

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

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/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
+};