cozy-ui 131.0.1 → 131.1.0-beta.1

package/scripts/screenshots/fetchAllComponents.js

@@ -1,114 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

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

@@ -1,2 +0,0 @@
-export default Accordion;
-import Accordion from "@material-ui/core/Accordion";

package/transpiled/react/Accordion/index.js

@@ -1,2 +0,0 @@
-import Accordion from '@material-ui/core/Accordion';
-export default Accordion;

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

@@ -1,2 +0,0 @@
-export default MuiAccordionActions;
-import MuiAccordionActions from "@material-ui/core/AccordionActions";

package/transpiled/react/AccordionActions/index.js

@@ -1,2 +0,0 @@
-import MuiAccordionActions from '@material-ui/core/AccordionActions';
-export default MuiAccordionActions;

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

@@ -1,2 +0,0 @@
-export default AccordionDetails;
-import AccordionDetails from "@material-ui/core/AccordionDetails";

package/transpiled/react/AccordionDetails/index.js

@@ -1,2 +0,0 @@
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-export default AccordionDetails;

package/transpiled/react/AccordionSummary/AccordionExpandIcon.d.ts

@@ -1,2 +0,0 @@
-export default AccordionExpandIcon;
-declare function AccordionExpandIcon(): JSX.Element;

package/transpiled/react/AccordionSummary/AccordionExpandIcon.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon from "cozy-ui/transpiled/react/Icon";
-import BottomIcon from "cozy-ui/transpiled/react/Icons/Bottom";
-
-var AccordionExpandIcon = function AccordionExpandIcon() {
-  return /*#__PURE__*/React.createElement(Icon, {
-    icon: BottomIcon,
-    width: 12
-  });
-};
-
-export default AccordionExpandIcon;

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

@@ -1,2 +0,0 @@
-export default AccordionSummary;
-import AccordionSummary from "@material-ui/core/AccordionSummary";

package/transpiled/react/AccordionSummary/index.js

@@ -1,7 +0,0 @@
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import React from 'react';
-import AccordionExpandIcon from "cozy-ui/transpiled/react/AccordionSummary/AccordionExpandIcon";
-AccordionSummary.defaultProps = {
-  expandIcon: /*#__PURE__*/React.createElement(AccordionExpandIcon, null)
-};
-export default AccordionSummary;

package/transpiled/react/ActionsBar/ResponsiveAction.d.ts

@@ -1,3 +0,0 @@
-export default ResponsiveAction;
-declare const ResponsiveAction: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/transpiled/react/ActionsBar/ResponsiveAction.js

@@ -1,62 +0,0 @@
-import React, { forwardRef } from 'react';
-import Button from "cozy-ui/transpiled/react/Buttons";
-import Icon from "cozy-ui/transpiled/react/Icon";
-import Typography from "cozy-ui/transpiled/react/Typography";
-import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
-import { makeStyles } from "cozy-ui/transpiled/react/styles";
-var useDesktopStyles = makeStyles({
-  root: {
-    border: 'none !important',
-    // to force also on disabled status
-    '&:hover': {
-      border: 'none'
-    }
-  }
-});
-var useMobileStyles = makeStyles({
-  root: {
-    display: 'block',
-    height: '100%',
-    flex: '1 1 0',
-    padding: 0,
-    border: 'none !important',
-    // to force also when disabled
-    '&:hover': {
-      border: 'none'
-    }
-  },
-  label: {
-    textTransform: 'none'
-  },
-  startIcon: {
-    marginRight: 0,
-    marginBottom: 2
-  }
-});
-var ResponsiveAction = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var action = _ref.action,
-      disabled = _ref.disabled,
-      onClick = _ref.onClick;
-
-  var _useBreakpoints = useBreakpoints(),
-      isMobile = _useBreakpoints.isMobile;
-
-  var useStyles = isMobile ? useMobileStyles : useDesktopStyles;
-  var styles = useStyles();
-  return /*#__PURE__*/React.createElement(Button, {
-    ref: ref,
-    classes: styles,
-    variant: "secondary",
-    startIcon: /*#__PURE__*/React.createElement(Icon, {
-      icon: action.icon
-    }),
-    label: isMobile ? /*#__PURE__*/React.createElement(Typography, {
-      variant: "caption",
-      color: disabled ? 'inherit' : 'textPrimary'
-    }, action.label) : action.label,
-    disabled: disabled,
-    onClick: onClick
-  });
-});
-ResponsiveAction.displayName = 'ResponsiveAction';
-export default ResponsiveAction;

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

@@ -1,2 +0,0 @@
-declare var _default: any;
-export default _default;