cozy-ui 133.0.0-beta.1 → 133.0.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [133.0.0](https://github.com/cozy/cozy-ui/compare/v132.1.0...v133.0.0) (2025-10-30)
+
+
+### Features
+
+* **ActionsMenu/ActionsItems:** No longer pass `client` in actions implicitly ([aeaa262](https://github.com/cozy/cozy-ui/commit/aeaa262))
+* **Actions:** Some actions doesn't import `downloadFile` anymore ([df7a36f](https://github.com/cozy/cozy-ui/commit/df7a36f))
+* **Actions:** Some actions doesn't import `fetchBlobFileById, isFile` anymore ([98cf97f](https://github.com/cozy/cozy-ui/commit/98cf97f))
+* **Actions:** Some actions doesn't import `generateWebLink` anymore ([809011e](https://github.com/cozy/cozy-ui/commit/809011e))
+* **Actions:** Some actions doesn't import `splitFilename` anymore ([c13841c](https://github.com/cozy/cozy-ui/commit/c13841c))
+* **BarContextProvider:** Removed ([c080cd2](https://github.com/cozy/cozy-ui/commit/c080cd2))
+* Remove all components related to cozy-client ([840168a](https://github.com/cozy/cozy-ui/commit/840168a))
+* Remove deprecated `modify` and `viewInContacts` actions ([17dc240](https://github.com/cozy/cozy-ui/commit/17dc240))
+
+
+### BREAKING CHANGES
+
+* If you use a component in that list, you must import it from `cozy-ui-plus` instead: `AppIcon, AppLinker, AppSections, AppTitle, CipherIcon, ContactPicker, Contacts/AddModal, Contacts/GroupsSelect, Contacts/Header, ContactsList, ContactsListModal, AuthenticationDialogs, Field, FileImageLoader, FilePicker, hooks/useClientErrors, IntentDialogOpener, IntentIframe, Labs/CollectionField, ListItem/ListItemByDoc, ListItem/ListItemBase, ListItem/ListItemContact, ListItem/ListItemFile, Paywall, providers/CozyTheme, providers/Intent, QualificationGrid, QualificationIcon, QualificationItem, QualificationModal, ShortcutTile, SquareAppIcon, Storage, UploadQueue, Wizard`.
+
+Please note that these components have been completely removed: `deprecated/IntentModal, deprecated/IntentOpener, deprecated/QuotaAlert`
+* If you used `deprecated/ActionMenu/Actions/modif` and `deprecated/ActionMenu/Actions/viewInContacts` please use those in `/ActionsMenu/Actions` instead
+* **BarContextProvider:** If you use `BarContextProvider` you must create it yourself. Take a look to the code to copy/paste
+* **Actions:** You must `import { fetchBlobFileById, isFile } from 'cozy-client/dist/models/file'` and pass it as action's option `makeActions([], { fetchBlobFileById, isFile })` when using `print` action.
+* **Actions:** You must `import { downloadFile } from 'cozy-client/dist/models/file'` and pass it as action's option `makeActions([], { downloadFile })` when using `download` action.
+* **Actions:** You must `import { splitFilename } from 'cozy-client/dist/models/file'` and pass it as action's option `makeActions([], { splitFilename })` when using `addToFavorites`, `removeFromFavorites` actions.
+* **Actions:** You must `import { generateWebLink } from 'cozy-client'` and pass it as action's option `makeActions([], { generateWebLink })` when using `modify`, `viewInContacts`, `viewInDrive` actions.
+* **ActionsMenu/ActionsItems:** You have to pass `client` yourself as option when creating an action, for actions that used `client` as arg `action: (docs, { client }) => {}` . The simplest way to do that: `const actions = makeActions([ ...someActions ], { client })`
+
+# [132.1.0](https://github.com/cozy/cozy-ui/compare/v132.0.0...v132.1.0) (2025-10-30)
+
+
+### Features
+
+* Add shared drive icons :sparkles: ([2eaee77](https://github.com/cozy/cozy-ui/commit/2eaee77))
+
 # [132.0.0](https://github.com/cozy/cozy-ui/compare/v131.2.0...v132.0.0) (2025-10-27)
 
 

package/assets/icons/ui/file-type-shared-drive-grey.svg

@@ -0,0 +1 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_13717_2258)"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.4 1.62H8L6.4 0H1.6C.72 0 0 .73 0 1.62v9.75c0 .89.71 1.62 1.59 1.62h12.8c.88 0 1.6-.73 1.6-1.62V3.25c0-.89-.72-1.62-1.6-1.62l.01-.01ZM11.09 8.9c0 .93-.77 1.7-1.7 1.7H6c-.93 0-1.7-.77-1.7-1.7V5.51c0-.93.77-1.7 1.7-1.7h.77c.19 0 .31.12.31.31s-.12.31-.31.31H6c-.59 0-1.08.49-1.08 1.08V8.9c0 .59.49 1.08 1.08 1.08h3.39c.59 0 1.08-.49 1.08-1.08v-.46c0-.19.12-.31.31-.31s.31.12.31.31v.46Zm.52-2.71L9.76 8.04c-.09.09-.22.12-.34.06-.12-.03-.19-.15-.19-.28v-.93h-.62c-.83 0-1.54.52-1.79 1.33a.3.3 0 0 1-.28.22c-.13 0-.25-.09-.31-.22-.06-.22-.09-.46-.09-.71 0-1.36 1.11-2.47 2.47-2.47h.62v-.93c0-.12.06-.25.19-.28.12-.06.25-.03.34.06l1.85 1.85c.12.12.12.31 0 .43v.02Z" fill="#A6A6A6"/></g><defs><clipPath id="clip0_13717_2258"><path fill="#fff" d="M0 0h16v13H0z"/></clipPath></defs></svg>

package/assets/icons/ui/file-type-shared-drive.svg

@@ -0,0 +1 @@
+<svg width="96" height="78" viewBox="0 0 96 78" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48 9.75h38.4c5.28 0 9.6 4.386 9.6 9.75v48.75c0 5.364-4.32 9.75-9.6 9.75H9.6C4.32 78 0 73.614 0 68.25l.048-58.5C.048 4.386 4.32 0 9.6 0h28.8L48 9.75Z" fill="url(#paint0_linear_13714_2236)"/><path d="M56.673 62.55H39.176c-4.772 0-8.749-3.976-8.749-8.748V36.305c0-4.772 3.977-8.748 8.749-8.748h3.976c.955 0 1.591.636 1.591 1.59 0 .955-.636 1.59-1.59 1.59h-3.977c-3.022 0-5.567 2.546-5.567 5.568v17.497c0 3.022 2.545 5.567 5.567 5.567h17.497c3.022 0 5.567-2.545 5.567-5.567v-2.386c0-.955.636-1.59 1.59-1.59.955 0 1.591.635 1.591 1.59v2.386c0 4.772-3.977 8.748-8.748 8.748ZM42.039 51.416c-.636 0-1.273-.477-1.59-1.114-.319-1.113-.478-2.386-.478-3.658 0-6.999 5.726-12.725 12.725-12.725h3.181v-4.772c0-.636.319-1.272.955-1.431.636-.319 1.272-.16 1.75.318l9.543 9.543c.636.637.636 1.591 0 2.227l-9.544 9.544c-.477.477-1.113.636-1.75.318-.636-.159-.954-.795-.954-1.431v-4.772h-3.18c-4.296 0-7.954 2.704-9.227 6.84-.158.636-.795 1.113-1.431 1.113Z" fill="#8DBCFF"/><path d="M56.673 61.55H39.176c-4.772 0-8.749-3.976-8.749-8.748V35.305c0-4.772 3.977-8.748 8.749-8.748h3.976c.955 0 1.591.636 1.591 1.59 0 .955-.636 1.59-1.59 1.59h-3.977c-3.022 0-5.567 2.546-5.567 5.568v17.497c0 3.022 2.545 5.567 5.567 5.567h17.497c3.022 0 5.567-2.545 5.567-5.567v-2.386c0-.955.636-1.59 1.59-1.59.955 0 1.591.635 1.591 1.59v2.386c0 4.772-3.977 8.748-8.748 8.748ZM42.039 50.416c-.636 0-1.273-.477-1.59-1.114-.319-1.113-.478-2.386-.478-3.658 0-6.999 5.726-12.725 12.725-12.725h3.181v-4.772c0-.636.319-1.272.955-1.431.636-.319 1.272-.16 1.75.318l9.543 9.543c.636.637.636 1.591 0 2.227l-9.544 9.544c-.477.477-1.113.636-1.75.318-.636-.159-.954-.795-.954-1.431v-4.772h-3.18c-4.296 0-7.954 2.704-9.227 6.84-.158.636-.795 1.113-1.431 1.113Z" fill="url(#paint1_linear_13714_2236)"/><defs><linearGradient id="paint0_linear_13714_2236" x1="48" y1="0" x2="48" y2="94.5" gradientUnits="userSpaceOnUse"><stop offset=".044" stop-color="#1D7AFF"/><stop offset=".13" stop-color="#7CB2FF"/><stop offset=".617" stop-color="#76AFFF"/><stop offset="1" stop-color="#4290FF"/></linearGradient><linearGradient id="paint1_linear_13714_2236" x1="49.092" y1="11.943" x2="49.447" y2="68.954" gradientUnits="userSpaceOnUse"><stop stop-color="#76AFFF"/><stop offset=".781" stop-color="#1D7AFF"/></linearGradient></defs></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "133.0.0-beta.1",
+  "version": "133.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -201,5 +201,6 @@
   },
   "browserslist": [
     "extends browserslist-config-cozy"
-  ]
+  ],
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/react/Icon/Readme.md

@@ -730,6 +730,8 @@ import FileTypeServerIcon from 'cozy-ui/transpiled/react/Icons/FileTypeServer'
 import FileTypeImageIcon from 'cozy-ui/transpiled/react/Icons/FileTypeImage'
 import FileTypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
 import FileTypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
+import FileTypeSharedDriveIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSharedDrive'
+import FileTypeSharedDriveGreyIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSharedDriveGrey'
 import FileTypeSheetIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSheet'
 import FileTypeSlideIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSlide'
 import FileTypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
@@ -782,6 +784,8 @@ const icons = [
   FileTypeImageIcon,
   FileTypeNoteIcon,
   FileTypePdfIcon,
+  FileTypeSharedDriveIcon,
+  FileTypeSharedDriveGreyIcon,
   FileTypeSheetIcon,
   FileTypeSlideIcon,
   FileTypeTextIcon,
@@ -801,7 +805,7 @@ const icons = [
   PhotosIcon,
   TopSelectIcon,
   TrashDuotoneIcon,
-  TwakeWorkplace,
+  TwakeWorkplace
 ]
 
 initialState = { size: 16 }
@@ -1026,9 +1030,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import Grid from 'cozy-ui/transpiled/react/Grid'
 import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite'
 
-const availableIcons = ['account', 'bottom-select', 'check-white', 'cloud-broken', 'contacts', 'cozy-authentification', 'cozy-logo', 'cozy-upgrade', 'credit-card-large', 'dash-white', 'device-browser', 'device-laptop', 'device-phone', 'device-tablet', 'file-type-audio', 'file-type-banking-account' , 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-server', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'keychain', 'logout-large', 'papers', 'only-office', 'store', 'top-select', 'trash-duotone', 'cozy']
-
-;
+const availableIcons = ['account', 'bottom-select', 'check-white', 'cloud-broken', 'contacts', 'cozy-authentification', 'cozy-logo', 'cozy-upgrade', 'credit-card-large', 'dash-white', 'device-browser', 'device-laptop', 'device-phone', 'device-tablet', 'file-type-audio', 'file-type-banking-account' , 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-server', 'file-type-shared-drive', 'file-type-shared-drive-grey', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'keychain', 'logout-large', 'papers', 'only-office', 'store', 'top-select', 'trash-duotone', 'cozy'];
 
 <Grid container spacing={2}>
   <Sprite />

package/react/Icons/FileTypeSharedDrive.jsx

@@ -0,0 +1,51 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/file-type-shared-drive.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeSharedDrive(props) {
+  return (
+    <svg viewBox="0 0 96 78" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48 9.75h38.4c5.28 0 9.6 4.386 9.6 9.75v48.75c0 5.364-4.32 9.75-9.6 9.75H9.6C4.32 78 0 73.614 0 68.25l.048-58.5C.048 4.386 4.32 0 9.6 0h28.8L48 9.75z"
+        fill="url(#file-type-shared-drive_svg__paint0_linear_13714_2236)"
+      />
+      <path
+        d="M56.673 62.55H39.176c-4.772 0-8.749-3.976-8.749-8.748V36.305c0-4.772 3.977-8.748 8.749-8.748h3.976c.955 0 1.591.636 1.591 1.59 0 .955-.636 1.59-1.59 1.59h-3.977c-3.022 0-5.567 2.546-5.567 5.568v17.497c0 3.022 2.545 5.567 5.567 5.567h17.497c3.022 0 5.567-2.545 5.567-5.567v-2.386c0-.955.636-1.59 1.59-1.59.955 0 1.591.635 1.591 1.59v2.386c0 4.772-3.977 8.748-8.748 8.748zM42.039 51.416c-.636 0-1.273-.477-1.59-1.114-.319-1.113-.478-2.386-.478-3.658 0-6.999 5.726-12.725 12.725-12.725h3.181v-4.772c0-.636.319-1.272.955-1.431.636-.319 1.272-.16 1.75.318l9.543 9.543c.636.637.636 1.591 0 2.227l-9.544 9.544c-.477.477-1.113.636-1.75.318-.636-.159-.954-.795-.954-1.431v-4.772h-3.18c-4.296 0-7.954 2.704-9.227 6.84-.158.636-.795 1.113-1.431 1.113z"
+        fill="#8DBCFF"
+      />
+      <path
+        d="M56.673 61.55H39.176c-4.772 0-8.749-3.976-8.749-8.748V35.305c0-4.772 3.977-8.748 8.749-8.748h3.976c.955 0 1.591.636 1.591 1.59 0 .955-.636 1.59-1.59 1.59h-3.977c-3.022 0-5.567 2.546-5.567 5.568v17.497c0 3.022 2.545 5.567 5.567 5.567h17.497c3.022 0 5.567-2.545 5.567-5.567v-2.386c0-.955.636-1.59 1.59-1.59.955 0 1.591.635 1.591 1.59v2.386c0 4.772-3.977 8.748-8.748 8.748zM42.039 50.416c-.636 0-1.273-.477-1.59-1.114-.319-1.113-.478-2.386-.478-3.658 0-6.999 5.726-12.725 12.725-12.725h3.181v-4.772c0-.636.319-1.272.955-1.431.636-.319 1.272-.16 1.75.318l9.543 9.543c.636.637.636 1.591 0 2.227l-9.544 9.544c-.477.477-1.113.636-1.75.318-.636-.159-.954-.795-.954-1.431v-4.772h-3.18c-4.296 0-7.954 2.704-9.227 6.84-.158.636-.795 1.113-1.431 1.113z"
+        fill="url(#file-type-shared-drive_svg__paint1_linear_13714_2236)"
+      />
+      <defs>
+        <linearGradient
+          id="file-type-shared-drive_svg__paint0_linear_13714_2236"
+          x1={48}
+          y1={0}
+          x2={48}
+          y2={94.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.044} stopColor="#1D7AFF" />
+          <stop offset={0.13} stopColor="#7CB2FF" />
+          <stop offset={0.617} stopColor="#76AFFF" />
+          <stop offset={1} stopColor="#4290FF" />
+        </linearGradient>
+        <linearGradient
+          id="file-type-shared-drive_svg__paint1_linear_13714_2236"
+          x1={49.092}
+          y1={11.943}
+          x2={49.447}
+          y2={68.954}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#76AFFF" />
+          <stop offset={0.781} stopColor="#1D7AFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgFileTypeSharedDrive

package/react/Icons/FileTypeSharedDriveGrey.jsx

@@ -0,0 +1,24 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/file-type-shared-drive-grey.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeSharedDriveGrey(props) {
+  return (
+    <svg viewBox="0 0 16 13" fill="none" {...props}>
+      <g clipPath="url(#file-type-shared-drive-grey_svg__clip0_13717_2258)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.4 1.62H8L6.4 0H1.6C.72 0 0 .73 0 1.62v9.75c0 .89.71 1.62 1.59 1.62h12.8c.88 0 1.6-.73 1.6-1.62V3.25c0-.89-.72-1.62-1.6-1.62l.01-.01zM11.09 8.9c0 .93-.77 1.7-1.7 1.7H6c-.93 0-1.7-.77-1.7-1.7V5.51c0-.93.77-1.7 1.7-1.7h.77c.19 0 .31.12.31.31s-.12.31-.31.31H6c-.59 0-1.08.49-1.08 1.08V8.9c0 .59.49 1.08 1.08 1.08h3.39c.59 0 1.08-.49 1.08-1.08v-.46c0-.19.12-.31.31-.31s.31.12.31.31v.46zm.52-2.71L9.76 8.04c-.09.09-.22.12-.34.06-.12-.03-.19-.15-.19-.28v-.93h-.62c-.83 0-1.54.52-1.79 1.33a.3.3 0 01-.28.22c-.13 0-.25-.09-.31-.22-.06-.22-.09-.46-.09-.71 0-1.36 1.11-2.47 2.47-2.47h.62v-.93c0-.12.06-.25.19-.28.12-.06.25-.03.34.06l1.85 1.85c.12.12.12.31 0 .43v.02z"
+          fill="#A6A6A6"
+        />
+      </g>
+      <defs>
+        <clipPath id="file-type-shared-drive-grey_svg__clip0_13717_2258">
+          <path fill="#fff" d="M0 0h16v13H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgFileTypeSharedDriveGrey

package/scripts/screenshots/fetchAllComponents.js

@@ -0,0 +1,114 @@
+const sortBy = require('lodash/sortBy')
+const flattenDeep = require('lodash/flattenDeep')
+const { sleep } = require('./helpers')
+
+const pushAll = (arr, items) => arr.push.apply(arr, items)
+
+const formatLink = (parsedStyleguideURL, relativeLink) => {
+  if (parsedStyleguideURL.protocol === 'file:') {
+    return `file://${relativeLink}`
+  } else {
+    return `${parsedStyleguideURL.toString()}${relativeLink}`
+  }
+}
+
+const getComponentNameFromTestId = testId => {
+  return testId.split('-example-')[0]
+}
+
+/**
+ * Fetch all available components on the styleguide and returns an array
+ * of { name, link } describing each component.
+ * Components are sorted by name.
+ */
+const fetchAllComponents = async (page, args, config) => {
+  const styleguideIndexURL = `${args.styleguideUrl}/index.html`
+
+  console.log(`➡️ Opening styleguide ${styleguideIndexURL}`)
+  await page.goto(styleguideIndexURL, {
+    waitUntil: 'load',
+    timeout: 0
+  })
+
+  console.log('➡️ Extracting links')
+
+  // We want to take screenshot for individual example, so we :
+  // - extract categories (link from the side menu with no ?id=)
+  // - go to category's page
+  // - look for `.rsg--controls-40 a` which is the open isolated for examples
+  // - look for its closest data-testid to get the name
+  const categoriesName = await page.evaluate(() => {
+    const sidebarSelector = '.rsg--sidebar-4'
+    return Array.from(document.querySelectorAll(`${sidebarSelector} a`))
+      .filter(v => !v.href.includes('?id='))
+      .map(x => x.text)
+      .filter(x => x !== 'Cozy-ui documentation') // see section's name in styleguide.config.js
+  })
+
+  const sortedCategoriesNames = sortBy(
+    categoriesName.map(catName => ({
+      link: styleguideIndexURL + '#/' + catName,
+      name: catName
+    })),
+    x => x.name
+  )
+
+  const allLinks = []
+  const parsedStyleguideURL = new URL(args.styleguideUrl)
+
+  for (const cate of sortedCategoriesNames) {
+    await page.goto(cate.link, { waitUntil: 'load', timeout: 0 })
+    await sleep(100)
+
+    const componentLinks = flattenDeep(
+      await page.evaluate(config => {
+        const componentSectionSelector = '.rsg--root-23'
+        const exampleToolbarSelector = '.rsg--toolbar-41'
+        const componentToolbarSelector = '.rsg--toolbar-11'
+        const openIsolatedButtonSelector = '.rsg--button-21'
+        const componentContainers = document.querySelectorAll(
+          componentSectionSelector
+        )
+
+        return Array.from(componentContainers, componentContainer => {
+          const componentId = componentContainer.dataset.testid.replace(
+            '-container',
+            ''
+          )
+          const perExampleScreenshot =
+            config[componentId] && config[componentId].perExampleScreenshot
+
+          const isolateButtons = componentContainer.querySelectorAll(
+            `${
+              perExampleScreenshot
+                ? exampleToolbarSelector
+                : componentToolbarSelector
+            } ${openIsolatedButtonSelector}`
+          )
+
+          return Array.from(isolateButtons).map(btn => {
+            const testId = btn.dataset.testid.replace('-isolate-button', '')
+
+            return {
+              testId,
+              link: btn.getAttribute('href')
+            }
+          })
+        })
+      }, config)
+    )
+
+    pushAll(
+      allLinks,
+      componentLinks.map(link => ({
+        ...link,
+        link: formatLink(parsedStyleguideURL, link.link),
+        name: getComponentNameFromTestId(link.testId)
+      }))
+    )
+  }
+
+  return allLinks
+}
+
+module.exports = fetchAllComponents

package/scripts/screenshots/helpers.js

@@ -0,0 +1,39 @@
+const path = require('path')
+const fs = require('fs')
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+const readConfig = async () => {
+  const configPath = path.join(process.cwd(), 'rsgscreenshots.json')
+  if (fs.existsSync(configPath)) {
+    return JSON.parse(fs.readFileSync(configPath))
+  } else {
+    return {}
+  }
+}
+
+const builtinViewports = {
+  mobile: '320x480',
+  desktop: '800x600'
+}
+
+const parseViewportArgument = viewportStr => {
+  viewportStr = builtinViewports[viewportStr] || viewportStr
+  const splitted = viewportStr.split('x')
+  if (!splitted[1]) {
+    console.warn(
+      `Viewport format unsupported (${viewportStr}), supported format example: 800x600. You can also use built-in viewport names: ${Object.keys(
+        builtinViewports
+      ).join(', ')}.`
+    )
+    throw new Error('Bad viewport format')
+  }
+  return { width: parseInt(splitted[0]), height: parseInt(splitted[1]) }
+}
+
+module.exports = {
+  sleep,
+  readConfig,
+  builtinViewports,
+  parseViewportArgument
+}

package/scripts/screenshots/parser.js

@@ -0,0 +1,61 @@
+const path = require('path')
+const { ArgumentParser } = require('argparse')
+const { builtinViewports } = require('./helpers')
+
+const pathArgument = p => {
+  if (p.startsWith('/')) {
+    return p
+  } else {
+    return path.join(process.cwd(), p)
+  }
+}
+
+const urlArgument = rawURL => {
+  const c = new URL(rawURL) //eslint-disable-line no-unused-vars
+  return rawURL
+}
+
+const makeParser = () => {
+  const parser = new ArgumentParser()
+
+  parser.addArgument('--mode', {
+    choices: ['react', 'kss'],
+    defaultValue: 'react'
+  })
+  parser.addArgument('--screenshot-dir', {
+    required: true,
+    dest: 'screenshotDir',
+    type: pathArgument
+  })
+  parser.addArgument('--styleguide-url', {
+    required: true,
+    dest: 'styleguideUrl',
+    type: urlArgument
+  })
+  parser.addArgument('--kss-dir', {
+    required: true,
+    dest: 'kssDir',
+    type: pathArgument
+  })
+  parser.addArgument('--viewport', {
+    defaultValue: builtinViewports.desktop
+  })
+  parser.addArgument('--no-empty-screenshot-dir', {
+    action: 'storeFalse',
+    defaultValue: true,
+    dest: 'emptyScreenshotDir'
+  })
+  parser.addArgument('--component')
+  parser.addArgument('--cache-file', {
+    defaultValue: '/tmp/cozy-ui-e2e-screenshots-cache.json',
+    dest: 'cacheFile'
+  })
+  parser.addArgument('--no-cache', {
+    dest: 'cacheFile',
+    action: 'storeFalse'
+  })
+
+  return parser
+}
+
+module.exports = makeParser

package/scripts/screenshots/prepares.js

@@ -0,0 +1,58 @@
+const path = require('path')
+const fs = require('fs')
+
+const emptyDirectory = directory => {
+  for (const filename of fs.readdirSync(directory)) {
+    fs.unlinkSync(path.join(directory, filename))
+  }
+}
+
+/**
+ * Ensure directories are ready for taking screenshots.
+ *
+ * - Throws if styleguide has not been built
+ * - Creates the screenshot dir if it does not exist
+ *
+ * @param {string} options.screenshotDir - Where to store screenshots
+ * @param {boolean} options.emptyScreenshotDir - Whether to empty the screenshot dir
+ *
+ */
+const prepareFS = async options => {
+  const { screenshotDir, emptyScreenshotDir } = options
+  if (!fs.existsSync(screenshotDir)) {
+    console.log(`Creating screenshot directory ${screenshotDir}`)
+    fs.mkdirSync(screenshotDir)
+  } else if (emptyScreenshotDir) {
+    console.log(`Emptying screenshot directory ${screenshotDir}`)
+    emptyDirectory(screenshotDir)
+  }
+}
+
+/**
+ * Opens and configure browser and page.
+ * Returns { browser, page }
+ */
+const prepareBrowser = async (puppeteer, options) => {
+  const browser = await puppeteer.launch({
+    headless: 'new',
+    executablePath: `/usr/bin/google-chrome` // could be `/Applications/Chrome.app/Contents/MacOS/Chrome` on MacOS
+  })
+  const page = await browser.newPage()
+  // Put Argos in user agent
+  await page.setUserAgent(
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36; Argos'
+  )
+  await page.emulateMediaFeatures([
+    { name: 'prefers-reduced-motion', value: 'reduce' }
+  ])
+  page.setViewport(options.viewport)
+  await page.setDefaultNavigationTimeout(0)
+  await page.evaluateOnNewDocument(({ type, variant }) => {
+    localStorage.clear()
+    localStorage.setItem('ui-theme-type', type)
+    localStorage.setItem('ui-theme-variant', variant)
+  }, options.theme)
+  return { browser, page }
+}
+
+module.exports = { prepareFS, prepareBrowser }

package/scripts/screenshots/screenshotComponent.js

@@ -0,0 +1,68 @@
+const path = require('path')
+
+const { sleep } = require('./helpers')
+
+const rootDirectory = path.join(__dirname, '../')
+
+const formatViewport = viewport => `${viewport.width}x${viewport.height}`
+
+const getDefaultScreenshotName = ({
+  component,
+  viewport,
+  suffix,
+  type,
+  variant
+}) =>
+  `${component.testId}-${
+    suffix ? `${suffix}-` : ''
+  }${type}-${variant}-${formatViewport(viewport)}.png`
+
+/**
+ * Screenshot a component to the screenshot directory, taking care of
+ * resizing the viewport before-hand so that the viewport fits the
+ * component.
+ */
+const screenshotComponent = async (page, options) => {
+  const { component, screenshotDir, viewport, type, variant, componentConfig } =
+    options
+  const { link, name } = component
+
+  await page.goto(link)
+  await page.addStyleTag({ content: 'body {height: auto;}' }) // to resize viewport according to its content
+  await sleep(200) // to be sure the page is entirely loaded
+
+  const getScreenshotName =
+    options.getScreenshotName || getDefaultScreenshotName
+
+  const screenshot = async suffix => {
+    await page.screenshot({
+      path: path.join(
+        screenshotDir,
+        getScreenshotName({ component, viewport, suffix, type, variant })
+      ),
+      fullPage: componentConfig?.fullPage ?? true,
+      optimizeForSpeed: true,
+      captureBeyondViewport: false
+    })
+  }
+
+  await page.bringToFront()
+
+  if (options.componentConfig && options.componentConfig.script) {
+    const componentScript = require(path.join(
+      rootDirectory,
+      options.componentConfig.script
+    ))
+    console.log(`Executing custom script for ${name}`)
+    await componentScript(page, screenshot)
+  } else {
+    console.log(
+      `Screenshotting ${name} for ${type}-${variant} theme at ${formatViewport(
+        viewport
+      )}`
+    )
+    await screenshot()
+  }
+}
+
+module.exports = screenshotComponent

package/scripts/screenshots/screenshotKSSStyleguide.js

@@ -0,0 +1,60 @@
+const path = require('path')
+
+const LINK_BASE = 'file://'
+
+const screenshotKSSStyleguide = async (page, args) => {
+  const resolveLink = relativePage =>
+    `${LINK_BASE}${path.join(args.kssDir, relativePage)}`
+  const kssPage = resolveLink('index.html')
+  await page.goto(kssPage)
+
+  // We do not screenshot utilities because
+  //  - their screenshots are huge
+  //  - they do not change often and the probability of mistake is low
+  const ignore = [/^utilities/]
+
+  const WIDTH = 800
+  await page.setViewport({ width: WIDTH, height: 800 })
+  const links = await page.evaluate(() => {
+    const navLinks = Array.from(
+      document.querySelectorAll('.kss-nav > .kss-nav__item > a[href]')
+    )
+    return navLinks.map(node => node.getAttribute('href'))
+  })
+
+  for (const link of links) {
+    await page
+    await page.goto(resolveLink(link))
+
+    const sections = Array.from(await page.$$('.kss-section--depth-2')).concat(
+      Array.from(await page.$$('.kss-section--depth-3'))
+    )
+    for (let section of sections) {
+      const idProp = await section.getProperty('id')
+      const idValue = await idProp.jsonValue()
+      const id = idValue.replace('kssref-', '')
+      const ref = await section.$eval('.kss-section__ref', el => el.textContent)
+
+      if (ignore.filter(rx => rx.exec(id)).length > 0) {
+        console.log('Ignoring', id)
+        continue
+      }
+
+      // Need to resize the viewport otherwise screenshots are blank
+      const body = await page.$('body')
+      const bodySize = await body.boundingBox()
+      await page.setViewport({
+        height: Math.ceil(bodySize.height),
+        width: WIDTH
+      })
+
+      console.log('Screenshotting section', idValue)
+      await page.screenshot({
+        clip: await section.boundingBox(),
+        path: path.join(args.screenshotDir, `kss-${ref}-${id}.png`)
+      })
+    }
+  }
+}
+
+module.exports = screenshotKSSStyleguide

package/scripts/screenshots/screenshotReactStyleguide.js

@@ -0,0 +1,74 @@
+const fs = require('fs')
+
+const { parseViewportArgument } = require('./helpers')
+const fetchAllComponents = require('./fetchAllComponents')
+const screenshotComponent = require('./screenshotComponent')
+
+const loadJSON = filename => {
+  try {
+    return JSON.parse(fs.readFileSync(filename).toString())
+  } catch {
+    return null
+  }
+}
+
+const cacheToDisk = (fnToCache, options) =>
+  async function() {
+    const { cacheFile } = options
+    let res
+    if (cacheFile) {
+      res = loadJSON(cacheFile)
+    }
+    if (res) {
+      options.onLoadCache && options.onLoadCache()
+    } else {
+      res = await fnToCache.apply(this, arguments)
+      if (cacheFile) {
+        fs.writeFileSync(cacheFile, JSON.stringify(res, null, 2))
+        options.onSaveCache && options.onSaveCache()
+      }
+    }
+    return res
+  }
+
+const screenshotReactStyleguide = async (page, args, config, theme) => {
+  const cachedFetchAllComponents = cacheToDisk(fetchAllComponents, {
+    cacheFile: args.cacheFile,
+    onLoadCache: () =>
+      console.log(`Using cached component list from ${args.cacheFile}`),
+    onSaveCache: () => console.log(`Saved component list to ${args.cacheFile}`)
+  })
+
+  let components = await cachedFetchAllComponents(page, args, config)
+  if (args.component) {
+    components = components.filter(component =>
+      component.name.includes(args.component)
+    )
+  }
+
+  console.log('⌛ Screenshotting components...')
+
+  for (const component of components) {
+    // Skip components in Deprecated folder
+    if (component.link.includes('Deprecated')) continue
+
+    const componentConfig = config[component.name] || {}
+    const componentViewportSpec =
+      (componentConfig.viewports && componentConfig.viewports[args.viewport]) ||
+      null
+    const componentViewport = componentViewportSpec
+      ? parseViewportArgument(componentViewportSpec)
+      : parseViewportArgument(args.viewport)
+    await page.setViewport(componentViewport)
+    await screenshotComponent(page, {
+      component,
+      componentConfig,
+      screenshotDir: args.screenshotDir,
+      viewport: componentViewport,
+      type: theme.type,
+      variant: theme.variant
+    })
+  }
+}
+
+module.exports = screenshotReactStyleguide