cozy-ui 131.2.0 → 133.0.0-beta.1

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/AppIcon/index.d.ts

@@ -1,50 +0,0 @@
-export class AppIcon extends React.Component<any, any, any> {
-    constructor(props: any, context: any);
-    isUnmounting: boolean;
-    handleError(): void;
-    fetchIcon(): any;
-    state: {
-        error: null;
-        icon: null;
-        status: string;
-    };
-    componentWillUnmount(): void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
-    load(): Promise<void>;
-    render(): JSX.Element;
-}
-export namespace AppIcon {
-    namespace propTypes {
-        export const alt: PropTypes.Requireable<string>;
-        export const app: PropTypes.Requireable<string | PropTypes.InferProps<{
-            name: PropTypes.Requireable<string>;
-            slug: PropTypes.Requireable<string>;
-            developer: PropTypes.Requireable<object>;
-            links: PropTypes.Requireable<PropTypes.InferProps<{
-                icon: PropTypes.Requireable<string>;
-            }>>;
-            latest_version: PropTypes.Requireable<PropTypes.InferProps<{
-                version: PropTypes.Requireable<string>;
-            }>>;
-        }>>;
-        export { iconPropType as fallbackIcon };
-        export const fetchIcon: PropTypes.Requireable<(...args: any[]) => any>;
-        export const client: PropTypes.Validator<object>;
-        export const className: PropTypes.Requireable<string>;
-        export const onReady: PropTypes.Requireable<(...args: any[]) => any>;
-        export const type: PropTypes.Requireable<string>;
-        export const priority: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const type_1: string;
-        export { type_1 as type };
-        const priority_1: string;
-        export { priority_1 as priority };
-    }
-}
-declare var _default: Function;
-export default _default;
-import React from "react";
-import PropTypes from "prop-types";
-import { iconPropType } from "../Icon";

package/transpiled/react/AppIcon/index.js

@@ -1,234 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { withClient } from 'cozy-client';
-var styles = {
-  "c-loading-placeholder": "styles__c-loading-placeholder___3L6Gz",
-  "placeHolderShimmer": "styles__placeHolderShimmer___3Rei_",
-  "c-app-icon": "styles__c-app-icon___2_O40",
-  "c-app-icon-default": "styles__c-app-icon-default___3CEmt"
-};
-import { isShortcutFile } from "cozy-ui/transpiled/react/AppSections/helpers";
-import Icon, { iconPropType } from "cozy-ui/transpiled/react/Icon";
-import CubeIcon from "cozy-ui/transpiled/react/Icons/Cube";
-import { ShortcutTile } from "cozy-ui/transpiled/react/ShortcutTile";
-import palette from "cozy-ui/transpiled/react/palette";
-import { AppDoctype } from "cozy-ui/transpiled/react/proptypes";
-var DONE = 'done';
-var ERRORED = 'errored';
-var FETCHING = 'fetching';
-export var AppIcon = /*#__PURE__*/function (_Component) {
-  _inherits(AppIcon, _Component);
-
-  var _super = _createSuper(AppIcon);
-
-  function AppIcon(props, context) {
-    var _this;
-
-    _classCallCheck(this, AppIcon);
-
-    _this = _super.call(this, props, context);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      error: null,
-      icon: null,
-      status: _this.props.client ? FETCHING : ERRORED
-    });
-
-    _this.isUnmounting = false;
-    _this.handleError = _this.handleError.bind(_assertThisInitialized(_this));
-    _this.fetchIcon = _this.fetchIcon.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(AppIcon, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.isUnmounting = true;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.isUnmounting = false;
-      this.load();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.props.fetchIcon !== prevProps.fetchIcon) {
-        this.load();
-      }
-    }
-  }, {
-    key: "fetchIcon",
-    value: function fetchIcon() {
-      var _this$props = this.props,
-          app = _this$props.app,
-          type = _this$props.type,
-          priority = _this$props.priority,
-          client = _this$props.client; // Shortcut files used in cozy-store have their own icon in their doctype metadata
-
-      if (isShortcutFile(app)) return;
-      return client.getStackClient().getIconURL({
-        type: type,
-        slug: app.slug || app,
-        appData: app,
-        priority: priority
-      });
-    }
-  }, {
-    key: "handleError",
-    value: function handleError() {
-      this.setState({
-        status: ERRORED
-      });
-    }
-  }, {
-    key: "load",
-    value: function () {
-      var _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this$props2, app, fetchIcon, onReady, client, loadFn, loadedUrl, loadError, domain, secure, cozyURL;
-
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props2 = this.props, app = _this$props2.app, fetchIcon = _this$props2.fetchIcon, onReady = _this$props2.onReady, client = _this$props2.client;
-                loadFn = fetchIcon || this.fetchIcon;
-                _context.prev = 2;
-
-                if (client) {
-                  cozyURL = new URL(client.getStackClient().uri);
-                  domain = cozyURL.host;
-                  secure = cozyURL.protocol === 'https:';
-                }
-
-                _context.next = 6;
-                return loadFn(app, domain, secure);
-
-              case 6:
-                loadedUrl = _context.sent;
-                _context.next = 12;
-                break;
-
-              case 9:
-                _context.prev = 9;
-                _context.t0 = _context["catch"](2);
-                loadError = _context.t0;
-
-              case 12:
-                if (!this.isUnmounting) {
-                  this.setState({
-                    error: loadError,
-                    icon: loadedUrl,
-                    status: loadError ? ERRORED : DONE
-                  });
-
-                  if (typeof onReady === 'function') {
-                    onReady();
-                  }
-                }
-
-              case 13:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this, [[2, 9]]);
-      }));
-
-      function load() {
-        return _load.apply(this, arguments);
-      }
-
-      return load;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          alt = _this$props3.alt,
-          className = _this$props3.className,
-          fallbackIcon = _this$props3.fallbackIcon;
-      var _this$state = this.state,
-          icon = _this$state.icon,
-          status = _this$state.status;
-
-      if (isShortcutFile(this.props.app)) {
-        return /*#__PURE__*/React.createElement(ShortcutTile, {
-          file: this.props.app
-        });
-      }
-
-      switch (status) {
-        case FETCHING:
-          return /*#__PURE__*/React.createElement("div", {
-            role: "progressbar",
-            className: cx(styles['c-loading-placeholder'], styles['c-app-icon'], className)
-          });
-
-        case DONE:
-          return /*#__PURE__*/React.createElement("img", {
-            alt: alt,
-            className: cx(styles['c-app-icon'], className),
-            onError: this.handleError,
-            ref: this.props.iconRef,
-            src: icon
-          });
-
-        case ERRORED:
-        default:
-          return /*#__PURE__*/React.createElement(Icon, {
-            className: cx(styles['c-app-icon'], styles['c-app-icon-default'], className),
-            height: "100%",
-            icon: fallbackIcon || CubeIcon,
-            width: "100%",
-            color: palette['coolGrey'],
-            iconRef: this.props.iconRef
-          });
-      }
-    }
-  }]);
-
-  return AppIcon;
-}(Component);
-AppIcon.propTypes = {
-  alt: PropTypes.string,
-
-  /** Required if fetchIcon is not provided */
-  app: PropTypes.oneOfType([AppDoctype, PropTypes.string]),
-
-  /** Icon to fallback on error (optional), default cube icon */
-  fallbackIcon: iconPropType,
-
-  /** Custom implementation of how to fetch icon */
-  fetchIcon: PropTypes.func,
-  client: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  onReady: PropTypes.func,
-
-  /** Type of application */
-  type: PropTypes.oneOf(['app', 'konnector']),
-
-  /** First source to fetch the icon. If nothing is found, there is a second try with the other source */
-  priority: PropTypes.oneOf(['stack', 'registry'])
-};
-AppIcon.defaultProps = {
-  type: 'app',
-  priority: 'stack'
-};
-export default withClient(AppIcon);

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

@@ -1,35 +0,0 @@
-export class AppLinker extends React.Component<any, any, any> {
-    static contextType: React.Context<import("cozy-intent").WebviewService | undefined>;
-    static getSlug(props: any): any;
-    static getOnClickHref(props: any, context: any, imgRef: any): {
-        onClick: (event: any) => void;
-        href: string;
-    } | {
-        href: any;
-        onClick: null;
-    };
-    constructor(props: any);
-    state: {
-        imgRef: null;
-    };
-    setImgRef: (img: any) => void;
-    imgRef: any;
-    render(): any;
-}
-export namespace AppLinker {
-    namespace propTypes {
-        const href: PropTypes.Requireable<string>;
-        const onAppSwitch: PropTypes.Requireable<(...args: any[]) => any>;
-        const app: PropTypes.Validator<PropTypes.InferProps<{
-            slug: PropTypes.Validator<string>;
-        }>>;
-    }
-}
-declare var _default: Function;
-export default _default;
-import React from "react";
-import PropTypes from "prop-types";
-import { getUniversalLinkDomain } from "./native";
-import { generateWebLink } from "./native";
-import { generateUniversalLink } from "./native";
-export { getUniversalLinkDomain, generateWebLink, generateUniversalLink };