cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/ListItem/Readme.md

@@ -97,115 +97,3 @@ const initialVariants = [{
   }}
 </Variants>
 ```
-
-### Contextualized items
-
-```jsx
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import List from 'cozy-ui/transpiled/react/List'
-import ListItemByDoc from 'cozy-ui/transpiled/react/ListItem/ListItemByDoc'
-import ListItem from 'cozy-ui/transpiled/react/ListItem'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import Divider from 'cozy-ui/transpiled/react/Divider'
-import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-
-const mockClient = {
-  plugins: {
-    realtime: {
-      subscribe: () => {},
-      unsubscribe: () => {},
-      unsubscribeAll: () => {}
-    }
-  },
-  getStackClient: () => ({
-    uri: 'https://cozy.io/'
-  }),
-  getInstanceOptions: () => ({
-    subdomain: ''
-  })
-}
-
-const contacts = [
-  {
-    _id: 'id01',
-    _type: 'io.cozy.contacts',
-    displayName: 'John Doe',
-    birthday: '25/10/2022',
-    email: [{ address: 'johndoe@cozy.cc', primary: true }],
-    phone: [{ number: '0102030405', primary: true }]
-  },
-  {
-    _id: 'id02',
-    _type: 'io.cozy.contacts',
-    displayName: 'Jason Bourne',
-    birthday: '01/01/2020',
-    email: [{ address: 'jbourne@cozy.cc', primary: true }]
-  }
-]
-
-const files = [
-  {
-    _type: 'io.cozy.files',
-    name: 'File01.pdf',
-    metadata: {
-      number: 12345,
-      refTaxIncome: '153',
-      datetime: '2024-01-11T12:00:00.000Z',
-      datetimeLabel: 'expirationDate',
-      referencedDate: '2024-01-01T12:00:00.000Z',
-      expirationDate: '2024-01-11T12:00:00.000Z',
-      issueDate: '2024-01-11T12:00:00.000Z',
-      noticePeriod: '30',
-      qualification: {
-        label: 'driver_license'
-      }
-    }
-  },
-  {
-    _type: 'io.cozy.files',
-    type: 'file',
-    name: 'Note01.cozy-note',
-    metadata: {
-      title: 'note title',
-      version: 0
-    }
-  }
-]
-
-;
-
-<DemoProvider client={mockClient}>
-  <List>
-    <ListItemByDoc
-      doc={contacts[0]}
-      expandedAttributesProps={{
-        isExpandedAttributesActive: true,
-        expandedAttributes: ['email', 'birthday']
-      }}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={files[0]}
-      expandedAttributesProps={{
-        isExpandedAttributesActive: true,
-        expandedAttributes: ['metadata.number']
-      }}
-      onClick={() => {}}
-    />
-    <ListItemByDoc
-      doc={files[0]}
-      expandedAttributesProps={{ isExpandedAttributesActive: true }}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={files[1]}
-      onClick={() => {}}
-    />
-  </List>
-</DemoProvider>
-```

package/react/Wizard/Readme.md

@@ -11,10 +11,11 @@ import {
   WizardErrors
 } from 'cozy-ui/transpiled/react/Wizard'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import Field from 'cozy-ui/transpiled/react/Field'
+import TextField from 'cozy-ui/transpiled/react/TextField'
 import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
 import NextIcon from 'cozy-ui/transpiled/react/Icons/Next'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 
 const t = x => x
 const isTiny = false
@@ -39,8 +40,8 @@ const WizardExample = ({ onNext, onRegister }) => {
           </WizardTitle>
         </WizardHeader>
         <WizardMain>
-          <Field label='Login' type='text' placeholder='dalailama@cozycloud.cc' />
-          <Field label='Password' type='text' />
+          <TextField className="u-mt-1" variant="outlined" label='Login' type='text' placeholder='dalailama@cozycloud.cc' />
+          <TextField className="u-mt-1" variant="outlined" label='Password' type='text' />
           <WizardErrors tag='p'>
             There is an error
           </WizardErrors>
@@ -73,7 +74,7 @@ initialState = { showExample: isTesting() }
 
 ;
 
-<>
+<DemoProvider>
   <button onClick={() => setState({ showExample: true })}>Show wizard</button><br />
   { state.lastButton ? <>You clicked the "{state.lastButton}" button</> : null}
   { state.showExample &&
@@ -82,5 +83,5 @@ initialState = { showExample: isTesting() }
       onNext={() => setState({ showExample: false, lastButton: 'next' })}
     />
   }
-</>
+</DemoProvider>
 ```

package/react/index.js

@@ -21,8 +21,6 @@ export {
 } from './Nav'
 export { default as ListItemText } from './ListItemText'
 export { default as SelectionBar } from './SelectionBar'
-export { default as IntentIframe } from './IntentIframe'
-export { default as IntentDialogOpener } from './IntentDialogOpener'
 export { default as Spinner } from './Spinner'
 export { default as Accordion } from './Accordion'
 export { default as AccordionSummary } from './AccordionSummary'
@@ -47,7 +45,6 @@ export { default as Label } from './Label'
 export { default as Checkbox } from './Checkbox'
 export { default as Radio } from './deprecated/Radio'
 export { default as Textarea } from './Textarea'
-export { default as Field } from './Field'
 export { default as Avatar } from './Avatar'
 export { default as IntentHeader } from './IntentHeader'
 export { default as Panel } from './Panel'
@@ -59,7 +56,6 @@ export { default as Counter } from './Counter'
 export { default as Infos } from './deprecated/Infos'
 export { default as InfosCarrousel } from './deprecated/InfosCarrousel'
 export { default as InputGroup } from './InputGroup'
-export { default as AppIcon } from './AppIcon'
 export { default as AppTitle } from './AppTitle'
 export { default as Filename } from './Filename'
 export { default as FilePath } from './FilePath'
@@ -73,7 +69,6 @@ export { default as PercentageLine } from './deprecated/PercentageLine'
 export { default as Popup } from './Popup'
 export { default as IconStack } from './IconStack'
 export { default as QuotaAlert } from './deprecated/QuotaAlert'
-export { OnlyOfficePaywall, PasswordSharingPaywall } from './Paywall'
 export {
   default as ViewStack,
   ModalStack,
@@ -82,8 +77,6 @@ export {
 } from './deprecated/ViewStack'
 export { default as DateMonthPicker } from './DateMonthPicker'
 export { default as NestedSelect, NestedSelectModal } from './NestedSelect'
-export { default as ContactsList } from './ContactsList'
-export { default as ContactsListModal } from './ContactsListModal'
 export {
   default as ExperimentalDialog,
   ExperimentalDialogActions,
@@ -92,20 +85,16 @@ export {
 
 export { default as BarContextProvider } from './BarContextProvider'
 export { default as BarTitle } from './BarTitle'
-export { default as UploadQueue } from './UploadQueue'
 export { default as CozyTheme } from './providers/CozyTheme'
 export { default as Paper } from './Paper'
 export { default as ProgressionBanner } from './ProgressionBanner'
 export { default as Fab, ExtendableFab } from './Fab'
-export { default as SquareAppIcon } from './SquareAppIcon'
-export { default as FileImageLoader } from './FileImageLoader'
 export { default as Radios } from './Radios'
 export {
   default as BottomSheet,
   BottomSheetItem,
   BottomSheetHeader
 } from './BottomSheet'
-export { default as FilePicker } from './FilePicker'
 export { default as Chips } from './Chips'
 export { default as PieChart } from './PieChart'
 export { default as DropdownText } from './DropdownText'
@@ -122,10 +111,6 @@ export { default as InputBase } from './InputBase'
 export { default as SearchBar } from './SearchBar'
 export { default as Thumbnail } from './Thumbnail'
 export { default as ButtonBase } from './ButtonBase'
-export { default as QualificationGrid } from './QualificationGrid'
-export { default as QualificationItem } from './QualificationItem'
-export { default as QualificationIcon } from './QualificationIcon'
-export { default as QualificationModal } from './QualificationModal'
 export { default as Timeline } from './Timeline'
 export { default as TimelineConnector } from './TimelineConnector'
 export { default as TimelineContent } from './TimelineContent'

package/react/providers/CozyTheme/index.jsx

@@ -1,11 +1,11 @@
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { createContext, useContext } from 'react'
 
 import log from 'cozy-logger'
 
-import CozyThemeWithQuery from './CozyThemeWithQuery'
-import DumbCozyTheme from './DumbCozyTheme'
-import { isRsg } from '../../hooks/useSetFlagshipUi/helpers'
+import MuiCozyTheme from '../../MuiCozyTheme'
+import useMediaQuery from '../../hooks/useMediaQuery'
 
 export const CozyThemeContext = createContext()
 
@@ -31,28 +31,64 @@ export const useCozyTheme = () => {
   return context
 }
 
-const CozyTheme = ({ ignoreCozySettings, ...props }) => {
-  const Comp =
-    ignoreCozySettings || process.env.NODE_ENV === 'test' || isRsg
-      ? DumbCozyTheme
-      : CozyThemeWithQuery
+const CozyTheme = ({
+  variant,
+  className,
+  ignoreItself,
+  settingsThemeType,
+  children
+}) => {
+  const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
+  const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
 
-  return <Comp {...props} />
+  const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
+    ? 'dark'
+    : 'light'
+  const filteredSettingsThemeType = ['light', 'dark'].includes(
+    settingsThemeType
+  )
+    ? settingsThemeType
+    : undefined
+
+  const selfThemeType =
+    uiThemeType || filteredSettingsThemeType || deviceThemeType
+  const selfThemeVariant = uiThemeVariant || variant
+
+  return (
+    <CozyThemeContext.Provider
+      value={{
+        type: selfThemeType,
+        variant: selfThemeVariant,
+        isLight: selfThemeType === 'light'
+      }}
+    >
+      <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
+        <div
+          className={cx(className, {
+            [`TwakeTheme--${selfThemeType}-${selfThemeVariant}`]:
+              Boolean(selfThemeVariant),
+            'u-dc': ignoreItself
+          })}
+        >
+          {children}
+        </div>
+      </MuiCozyTheme>
+    </CozyThemeContext.Provider>
+  )
 }
 
 CozyTheme.propTypes = {
   variant: PropTypes.oneOf(['normal', 'inverted']),
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: PropTypes.bool,
-  /** Bypasses the request that retrieves the app's settings in order to define the theme type */
-  ignoreCozySettings: PropTypes.bool,
+  /** Theme type from io.cozy.settings.instance */
+  settingsThemeType: PropTypes.oneOf(['light', 'dark', 'auto']),
   className: PropTypes.string,
   children: PropTypes.node
 }
 
 CozyTheme.defaultProps = {
   variant: 'normal',
-  ignoreCozySettings: false,
   ignoreItself: true
 }
 

package/react/providers/DemoProvider.jsx

@@ -1,42 +1,22 @@
 import React from 'react'
 
-import { CozyProvider } from 'cozy-client'
-
 import { BreakpointsProvider } from './Breakpoints'
 import CozyTheme from './CozyTheme'
 import AlertProvider from '../providers/Alert'
 import I18n from '../providers/I18n'
 
-const defaultClient = {
-  plugins: {
-    realtime: {
-      subscribe: () => {},
-      unsubscribe: () => {},
-      unsubscribeAll: () => {}
-    }
-  },
-  getStackClient: () => ({
-    uri: 'https://cozy.io/'
-  }),
-  getInstanceOptions: () => ({
-    subdomain: ''
-  })
-}
-
-const DemoProvider = ({ client, variant, dictRequire, children }) => {
+const DemoProvider = ({ variant, dictRequire, children }) => {
   const lang = localStorage.getItem('lang') || 'en'
   const _dictRequire = dictRequire ? dictRequire : () => ({})
 
   return (
-    <CozyProvider client={client || defaultClient}>
-      <BreakpointsProvider>
-        <AlertProvider>
-          <I18n lang={lang} dictRequire={_dictRequire}>
-            <CozyTheme variant={variant}>{children}</CozyTheme>
-          </I18n>
-        </AlertProvider>
-      </BreakpointsProvider>
-    </CozyProvider>
+    <BreakpointsProvider>
+      <AlertProvider>
+        <I18n lang={lang} dictRequire={_dictRequire}>
+          <CozyTheme variant={variant}>{children}</CozyTheme>
+        </I18n>
+      </AlertProvider>
+    </BreakpointsProvider>
   )
 }
 

package/rsgscreenshots.json

@@ -1,9 +1,4 @@
 {
-  "UploadQueue": {
-    "viewports": {
-      "desktop": "1200x700"
-    }
-  },
   "BottomSheet": {
     "viewports": {
       "desktop": "1200x700",

package/transpiled/react/ActionsMenu/Actions/addToFavorites.d.ts

@@ -1,14 +1,14 @@
-export function addToFavorites({ showAlert }: {
+export function addToFavorites({ client, showAlert, splitFilename }: {
+    client: any;
     showAlert: any;
+    splitFilename: any;
 }): {
     name: string;
     icon: typeof StarOutlineIcon;
     label: any;
     displayCondition: (docs: any) => any;
     Component: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-    action: (docs: any, { client }: {
-        client: any;
-    }) => Promise<void>;
+    action: (docs: any) => Promise<void>;
 };
 import StarOutlineIcon from "../../Icons/StarOutline";
 import React from "react";

package/transpiled/react/ActionsMenu/Actions/addToFavorites.js

@@ -14,7 +14,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 import React, { forwardRef } from 'react';
-import { splitFilename } from 'cozy-client/dist/models/file';
 import { getActionsI18n } from "cozy-ui/transpiled/react/ActionsMenu/Actions/locales/withActionsLocales";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import StarOutlineIcon from "cozy-ui/transpiled/react/Icons/StarOutline";
@@ -37,7 +36,9 @@ var makeComponent = function makeComponent(label, icon) {
 };
 
 export var addToFavorites = function addToFavorites(_ref) {
-  var showAlert = _ref.showAlert;
+  var client = _ref.client,
+      showAlert = _ref.showAlert,
+      splitFilename = _ref.splitFilename;
 
   var _getActionsI18n = getActionsI18n(),
       t = _getActionsI18n.t;
@@ -57,56 +58,55 @@ export var addToFavorites = function addToFavorites(_ref) {
     },
     Component: makeComponent(label, icon),
     action: function () {
-      var _action = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(docs, _ref2) {
-        var client, _iterator, _step, doc, _splitFilename, filename;
+      var _action = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(docs) {
+        var _iterator, _step, doc, _splitFilename, filename;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                client = _ref2.client;
-                _context.prev = 1;
+                _context.prev = 0;
                 _iterator = _createForOfIteratorHelper(docs);
-                _context.prev = 3;
+                _context.prev = 2;
 
                 _iterator.s();
 
-              case 5:
+              case 4:
                 if ((_step = _iterator.n()).done) {
-                  _context.next = 11;
+                  _context.next = 10;
                   break;
                 }
 
                 doc = _step.value;
-                _context.next = 9;
+                _context.next = 8;
                 return client.save(_objectSpread(_objectSpread({}, doc), {}, {
                   cozyMetadata: _objectSpread(_objectSpread({}, doc.cozyMetadata), {}, {
                     favorite: true
                   })
                 }));
 
-              case 9:
-                _context.next = 5;
+              case 8:
+                _context.next = 4;
                 break;
 
-              case 11:
-                _context.next = 16;
+              case 10:
+                _context.next = 15;
                 break;
 
-              case 13:
-                _context.prev = 13;
-                _context.t0 = _context["catch"](3);
+              case 12:
+                _context.prev = 12;
+                _context.t0 = _context["catch"](2);
 
                 _iterator.e(_context.t0);
 
-              case 16:
-                _context.prev = 16;
+              case 15:
+                _context.prev = 15;
 
                 _iterator.f();
 
-                return _context.finish(16);
+                return _context.finish(15);
 
-              case 19:
+              case 18:
                 _splitFilename = splitFilename(docs[0]), filename = _splitFilename.filename;
                 showAlert({
                   message: t('favorites.add.success', {
@@ -115,26 +115,26 @@ export var addToFavorites = function addToFavorites(_ref) {
                   }),
                   severity: 'success'
                 });
-                _context.next = 26;
+                _context.next = 25;
                 break;
 
-              case 23:
-                _context.prev = 23;
-                _context.t1 = _context["catch"](1);
+              case 22:
+                _context.prev = 22;
+                _context.t1 = _context["catch"](0);
                 showAlert({
                   message: t('favorites.error'),
                   severity: 'error'
                 });
 
-              case 26:
+              case 25:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[1, 23], [3, 13, 16, 19]]);
+        }, _callee, null, [[0, 22], [2, 12, 15, 18]]);
       }));
 
-      function action(_x, _x2) {
+      function action(_x) {
         return _action.apply(this, arguments);
       }
 

package/transpiled/react/ActionsMenu/Actions/download.d.ts

@@ -1,12 +1,13 @@
-export function download({ encryptedUrl }: {
+export function download({ client, encryptedUrl, downloadFile }: {
+    client: any;
     encryptedUrl: any;
+    downloadFile: any;
 }): {
     name: string;
     icon: typeof DownloadIcon;
     label: any;
     Component: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-    action: (docs: any, { client, webviewIntent, driveId }: {
-        client: any;
+    action: (docs: any, { webviewIntent, driveId }: {
         webviewIntent: any;
         driveId: any;
     }) => any;

package/transpiled/react/ActionsMenu/Actions/download.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { downloadFile } from 'cozy-client/dist/models/file';
 import { getActionsI18n } from "cozy-ui/transpiled/react/ActionsMenu/Actions/locales/withActionsLocales";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import DownloadIcon from "cozy-ui/transpiled/react/Icons/Download";
@@ -23,7 +22,9 @@ var makeComponent = function makeComponent(label, icon) {
 };
 
 export var download = function download(_ref) {
-  var encryptedUrl = _ref.encryptedUrl;
+  var client = _ref.client,
+      encryptedUrl = _ref.encryptedUrl,
+      downloadFile = _ref.downloadFile;
 
   var _getActionsI18n = getActionsI18n(),
       t = _getActionsI18n.t;
@@ -36,8 +37,7 @@ export var download = function download(_ref) {
     label: label,
     Component: makeComponent(label, icon),
     action: function action(docs, _ref2) {
-      var client = _ref2.client,
-          webviewIntent = _ref2.webviewIntent,
+      var webviewIntent = _ref2.webviewIntent,
           driveId = _ref2.driveId;
       return downloadFile({
         client: client,

package/transpiled/react/ActionsMenu/Actions/helpers.d.ts

@@ -4,5 +4,5 @@ export function getOnlyNeededActions(actions: any, docs: any): any;
 export function makeBase64FromFile(file: File): Promise<string | null>;
 export function fileToArrayBuffer(file: File): Promise<ArrayBuffer>;
 export function addFileToPdf(pdfDoc: PDFDocument, file: File): Promise<ArrayBuffer>;
-export function makePdfBlob(client: import('cozy-client/types/CozyClient').default, docs: array): Promise<object>;
+export function makePdfBlob({ client, docs, fetchBlobFileById }: object): Promise<object>;
 import { PDFDocument } from "pdf-lib/cjs/api";