cozy-ui-plus 1.1.0

package/dist/test/I18n.d.ts

@@ -0,0 +1,6 @@
+export function I18nContext(options: any): {
+    t: any;
+    f: (date: any, formatStr: any, opts?: {}) => string | undefined;
+    polyglot: any;
+    lang: any;
+};

package/dist/types.d.js

@@ -0,0 +1 @@
+"use strict";

package/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  testURL: 'http://localhost/',
+  moduleFileExtensions: ['js', 'jsx', 'json', 'styl', 'ts', 'tsx'],
+  setupFilesAfterEnv: ['./test/jestsetup.js', 'jest-canvas-mock'],
+  moduleDirectories: ['src', 'node_modules'],
+  moduleNameMapper: {
+    '\\.(png|gif|jpe?g|svg)$': '<rootDir>/test/fileMock.js',
+    '\\.styl$': 'identity-obj-proxy',
+    '^cozy-client$': '<rootDir>/node_modules/cozy-client/dist/index',
+    '^cozy-client/dist/types$':
+      '<rootDir>/node_modules/cozy-client/dist/types.js',
+    '^cozy-ui(.*)': '<rootDir>/node_modules/cozy-ui/$1'
+  },
+  transformIgnorePatterns: ['node_modules/(?!(cozy-ui))'],
+  testPathIgnorePatterns: ['node_modules', 'dist'],
+  testEnvironment: 'jest-environment-jsdom',
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)?$': 'babel-jest'
+  }
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "cozy-ui-plus",
+  "version": "1.1.0",
+  "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "homepage": "https://github.com/cozy/cozy-libs/blob/master/packages/cozy-ui-plus/Readme.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cozy/cozy-libs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cozy/cozy-libs/issues"
+  },
+  "scripts": {
+    "build": "yarn build:clean && yarn build:types && env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx,.md,.styl,.json,.snap ./src -d ./dist --copy-files --no-copy-ignored --verbose",
+    "build:clean": "rm -rf ./dist",
+    "build:types": "tsc -p tsconfig-build.json",
+    "start": "yarn build --watch",
+    "prepublishOnly": "yarn build",
+    "test": "env NODE_ENV=test jest",
+    "lint": "cd .. && yarn eslint --ext js,jsx packages/cozy-ui-plus"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.16.8",
+    "@babel/core": "7.16.12",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "11.2.7",
+    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/user-event": "^14.4.0",
+    "@typescript-eslint/eslint-plugin": "5.54.0",
+    "@typescript-eslint/parser": "5.54.0",
+    "babel-plugin-inline-json-import": "0.3.2",
+    "babel-preset-cozy-app": "^2.8.1",
+    "cozy-client": "^60.5.0",
+    "cozy-device-helper": "2.0.0",
+    "cozy-intent": "^2.30.0",
+    "cozy-logger": "^1.17.0",
+    "cozy-stack-client": "^60.1.0",
+    "cozy-ui": "^132.0.0",
+    "jest": "26.6.3",
+    "jest-canvas-mock": "2.3.1",
+    "jest-environment-jsdom": "26.6.2",
+    "node-polyglot": "^2.4.0",
+    "prop-types": "15.8.1",
+    "react": "16.12.0",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-dom": "16.12.0",
+    "react-test-renderer": "16.12.0",
+    "stylus": "0.64.0",
+    "typescript": "5.5.2"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "cozy-interapp": "^0.5.4",
+    "filesize": "8.0.7",
+    "final-form": "4.20.9",
+    "final-form-arrays": "3.1.0",
+    "lodash": "^4.17.21",
+    "mime-types": "2.1.35",
+    "react-final-form": "6.5.9",
+    "react-final-form-arrays": "3.1.4",
+    "rooks": "7.14.1"
+  },
+  "peerDependencies": {
+    "cozy-client": ">=60.5.0",
+    "cozy-device-helper": ">=2.0.0",
+    "cozy-intent": ">=2.30.0",
+    "cozy-logger": ">=1.17.0",
+    "cozy-ui": ">=132.0.0",
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18"
+  },
+  "gitHead": "f1f3c0b415dd50a3f4b4c7a3dc7dcb143727078b"
+}

package/preprocess.js

@@ -0,0 +1,16 @@
+const stylus = require('stylus')
+
+const cozyStylusPlugin = require('cozy-ui/stylus')
+
+const renderStylus = function (css, filename) {
+  try {
+    return stylus(css)
+      .use(cozyStylusPlugin())
+      .set('filename', filename)
+      .render()
+  } catch (e) {
+    console.log(e) // eslint-disable-line no-console
+  }
+}
+
+module.exports = renderStylus

package/src/AppIcon/Readme.md

@@ -0,0 +1,96 @@
+`<AppIcon />` renders an app icon.
+
+AppIcon takes all the space available, it needs to be in a container that specifies its width/height.
+
+It contains business logic related to apps documents.
+
+Apps documents provided by the stack are containing a `links.icon` property which is public and can be directly used as `src` value for an `<img />` tag.
+
+`<AppIcon />` is also able to retrieve an icon for a registry app. If no attribute `links.icon` is present on the app document, `<AppIcon />` tries to fetch the icon with a registry link, computed thanks to the app attributes `slug` and `latest_version.version`.
+
+The given app can be:
+
+- An object representing an app fetched from the registry
+- An app's slug string
+
+### Example
+
+if no application was found, we fallback on a default `CubeIcon`
+
+```jsx static
+  <div>
+    <AppIcon app={app} />
+  </div>
+```
+
+```jsx
+import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
+
+;
+<div>
+  <div style={{ width: '100px' }}>
+    <AppIcon app="test" />
+  </div>
+</div>
+```
+
+## Using fetchIcon
+
+Is it also possible to provide a custom asynchronous `fetchIcon` which takes an app document as argument and resolves with an icon URL (see [`URL.createObjectURL`](https://developer.mozilla.org/en/docs/Web/API/URL/createObjectURL)). `fetchIcon` may also throw errors.
+
+### Example with fetchIcon
+
+```jsx static
+  <div>
+    <AppIcon app={app} fetchIcon={icon => client.fetch(...)} />
+  </div>
+```
+
+```jsx
+import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
+import { placeholder100, placeholder100Red } from 'docs/placeholders/img'
+
+const fetchIcon1 = () => placeholder100
+const fetchIcon2 = () => placeholder100Red
+
+const handleSwitch = () => {
+  const newFetchIcon = state.fetchIcon.name === 'fetchIcon1' ? fetchIcon2 : fetchIcon1
+  setState({ fetchIcon: newFetchIcon  })
+}
+
+initialState = { fetchIcon: fetchIcon1 }
+
+;
+<div>
+  <button onClick={handleSwitch}>Switch</button>{' '}
+  fetchIcon: {state.fetchIcon.name}<br/>
+  <div style={{ width: '100px' }}>
+    <AppIcon app={'test'} fetchIcon={state.fetchIcon} />
+  </div>
+</div>
+```
+
+### Provide `fallbackIcon`
+
+You can provide an `<Icon />` `icon` props to fallback when the AppIcon fetched is broken or the `fetchIcon` function errored.
+
+```jsx
+import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
+import WarningIcon from 'cozy-ui/transpiled/react/Icons/Warning'
+import { placeholder100Red } from 'docs/placeholders/img'
+
+const fetchIcon = () => placeholder100Red
+const fetchIconBroken = () => 'blahblahblah'
+
+const brokeFetchIcon = () => setState({ fetchIcon: fetchIconBroken  })
+
+initialState = { fetchIcon }
+
+;
+<div>
+  <button onClick={brokeFetchIcon}>Break it</button>
+  <div style={{ width: '100px' }}>
+    <AppIcon fetchIcon={state.fetchIcon} fallbackIcon={WarningIcon} />
+  </div>
+</div>
+```

package/src/AppIcon/index.jsx

@@ -0,0 +1,168 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import { withClient } from 'cozy-client'
+import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
+import CubeIcon from 'cozy-ui/transpiled/react/Icons/Cube'
+
+import styles from './styles.styl'
+import { isShortcutFile } from '../AppSections/helpers'
+import { ShortcutTile } from '../ShortcutTile'
+import { AppDoctype } from '../proptypes'
+
+const DONE = 'done'
+const ERRORED = 'errored'
+const FETCHING = 'fetching'
+
+export class AppIcon extends Component {
+  constructor(props, context) {
+    super(props, context)
+    this.isUnmounting = false
+    this.handleError = this.handleError.bind(this)
+    this.fetchIcon = this.fetchIcon.bind(this)
+  }
+
+  state = {
+    error: null,
+    icon: null,
+    status: this.props.client ? FETCHING : ERRORED
+  }
+
+  componentWillUnmount() {
+    this.isUnmounting = true
+  }
+  componentDidMount() {
+    this.isUnmounting = false
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.fetchIcon !== prevProps.fetchIcon) {
+      this.load()
+    }
+  }
+
+  fetchIcon() {
+    const { app, type, priority, client } = this.props
+
+    // Shortcut files used in cozy-store have their own icon in their doctype metadata
+    if (isShortcutFile(app)) return
+
+    return client.getStackClient().getIconURL({
+      type,
+      slug: app.slug || app,
+      appData: app,
+      priority
+    })
+  }
+
+  handleError() {
+    this.setState({ status: ERRORED })
+  }
+
+  async load() {
+    const { app, fetchIcon, onReady, client } = this.props
+
+    const loadFn = fetchIcon || this.fetchIcon
+    let loadedUrl
+    let loadError
+    let domain
+    let secure
+
+    try {
+      if (client) {
+        const cozyURL = new URL(client.getStackClient().uri)
+        domain = cozyURL.host
+        secure = cozyURL.protocol === 'https:'
+      }
+      loadedUrl = await loadFn(app, domain, secure)
+    } catch (error) {
+      loadError = error
+    }
+
+    if (!this.isUnmounting) {
+      this.setState({
+        error: loadError,
+        icon: loadedUrl,
+        status: loadError ? ERRORED : DONE
+      })
+      if (typeof onReady === 'function') {
+        onReady()
+      }
+    }
+  }
+
+  render() {
+    const { alt, className, fallbackIcon } = this.props
+    const { icon, status } = this.state
+
+    if (isShortcutFile(this.props.app)) {
+      return <ShortcutTile file={this.props.app} />
+    }
+
+    switch (status) {
+      case FETCHING:
+        return (
+          <div
+            role="progressbar"
+            className={cx(
+              styles['c-loading-placeholder'],
+              styles['c-app-icon'],
+              className
+            )}
+          />
+        )
+      case DONE:
+        return (
+          <img
+            alt={alt}
+            className={cx(styles['c-app-icon'], className)}
+            onError={this.handleError}
+            ref={this.props.iconRef}
+            src={icon}
+          />
+        )
+      case ERRORED:
+      default:
+        return (
+          <Icon
+            className={cx(
+              styles['c-app-icon'],
+              styles['c-app-icon-default'],
+              className
+            )}
+            height="100%"
+            icon={fallbackIcon || CubeIcon}
+            width="100%"
+            color="var(--coolGrey)"
+            iconRef={this.props.iconRef}
+          />
+        )
+    }
+  }
+}
+
+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/src/AppIcon/index.spec.js

@@ -0,0 +1,145 @@
+/* eslint-disable no-console */
+
+'use strict'
+/* eslint-env jest */
+
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
+import { AppIcon } from '.'
+
+jest.mock('cozy-ui/transpiled/react/Icon', () => ({
+  ...jest.requireActual('cozy-ui/transpiled/react/Icon'),
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="icon-component"></div>)
+}))
+
+describe('AppIcon component', () => {
+  const app = {}
+  const domain = 'cozy.tools'
+  const secure = true
+
+  const mockClient = {
+    getStackClient: () => ({ uri: `https://${domain}` })
+  }
+
+  let successFetchIcon
+  let failureFetchIcon
+
+  beforeEach(() => {
+    jest.resetModules()
+    jest.clearAllMocks()
+
+    successFetchIcon = jest
+      .fn()
+      .mockResolvedValue('http://cozy.tools/apps/test/icon')
+
+    failureFetchIcon = jest
+      .fn()
+      .mockImplementation(() => Promise.reject(new Error('Mocked error')))
+
+    console.error = jest.fn()
+  })
+
+  it(`renders as loading`, () => {
+    render(
+      <AppIcon app={app} fetchIcon={successFetchIcon} client={mockClient} />
+    )
+
+    const loadingElement = screen.getByRole('progressbar')
+
+    expect(loadingElement).toBeInTheDocument()
+    expect(successFetchIcon).toHaveBeenCalledWith(app, domain, secure)
+    expect(console.error).not.toHaveBeenCalled()
+  })
+
+  it(`should provide appData to getIconUrl in order to get icon simply, when oauth not needed`, async () => {
+    const app = {
+      name: 'app name',
+      slug: 'slug',
+      links: {
+        icon: 'icon url'
+      },
+      latest_version: {
+        version: 'version'
+      }
+    }
+    const getIconURLMock = jest
+      .fn()
+      .mockImplementation(() => `https://${domain}`)
+    const mockClient = {
+      getStackClient: () => ({
+        uri: `https://${domain}`,
+        getIconURL: getIconURLMock
+      })
+    }
+
+    render(<AppIcon app={app} client={mockClient} />)
+
+    expect(getIconURLMock).toHaveBeenNthCalledWith(1, {
+      appData: app,
+      priority: 'stack',
+      slug: 'slug',
+      type: 'app'
+    })
+  })
+
+  it(`renders correctly`, async () => {
+    render(
+      <AppIcon app={app} fetchIcon={successFetchIcon} client={mockClient} />
+    )
+
+    const iconElement = await screen.findByRole('img')
+    expect(iconElement).toBeInTheDocument()
+
+    expect(successFetchIcon).toHaveBeenCalledWith(app, domain, secure)
+    expect(console.error).not.toHaveBeenCalled()
+  })
+
+  it(`renders default when fetch error occurs`, async () => {
+    render(
+      <AppIcon app={app} fetchIcon={failureFetchIcon} client={mockClient} />
+    )
+
+    const iconFallbackElement = await screen.findByTestId('icon-component')
+    expect(iconFallbackElement).toBeInTheDocument()
+
+    expect(failureFetchIcon).toHaveBeenCalledWith(app, domain, secure)
+    expect(console.error).not.toHaveBeenCalled()
+
+    // Check that the Icon component has been called with a function (CubeIcon function is the default icon)
+    expect(Icon).toHaveBeenCalledWith(
+      expect.objectContaining({
+        icon: expect.any(Function)
+      }),
+      {}
+    )
+  })
+
+  it(`renders provided fallbackIcon when fetch error occurs`, async () => {
+    render(
+      <AppIcon
+        app={app}
+        fetchIcon={failureFetchIcon}
+        client={mockClient}
+        fallbackIcon="warning"
+      />
+    )
+
+    const iconFallbackElement = await screen.findByTestId('icon-component')
+    expect(iconFallbackElement).toBeInTheDocument()
+
+    expect(failureFetchIcon).toHaveBeenCalledWith(app, domain, secure)
+    expect(console.error).not.toHaveBeenCalled()
+
+    // Check that the Icon component has been called with "warning"
+    expect(Icon).toHaveBeenCalledWith(
+      expect.objectContaining({
+        icon: 'warning'
+      }),
+      {}
+    )
+  })
+})

package/src/AppIcon/styles.styl

@@ -0,0 +1,37 @@
+@keyframes placeHolderShimmer {
+  0% { background-position: -20rem 0; }
+  80% { background-position: 20rem 0; }
+  80.1% { background-position: -20rem 0; }
+  100% { background-position: -20rem 0; }
+}
+
+.c-loading-placeholder {
+    animation-delay: 0.1s;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-name: placeHolderShimmer;
+    animation-timing-function: linear;
+    background-position: -20rem 0;
+    background-image: linear-gradient(to right, silver 0%, #fcfcfc 50%, silver 100%);
+    background-size: 20rem 10rem;
+    background-repeat: no-repeat;
+    background-color: silver;
+    border-radius: 0.15rem;
+    max-width: 100%;
+    position: relative;
+    margin: .1rem 0;
+}
+
+.c-app-icon,
+.c-app-icon svg {
+    height 100%
+    width 100%
+    // Prevent flex-grow and flex-shrink
+    flex-grow 0
+    flex-shrink 0
+    object-fit contain
+}
+
+.c-app-icon-default {
+    color var(--silver)
+}

package/src/AppLinker/Readme.md

@@ -0,0 +1,32 @@
+Render-props component that provides onClick/href handler to
+apply to an anchor that needs to open an app.
+
+The app's manifest can be set in the `app` prop. Then, in a
+ReactNative environment, the AppLinker will be able to send
+`openApp` message to the native environment with this `app`
+data.
+
+Handles several cases:
+
+- On mobile app and other mobile app available
+- On web (not mobile)
+- On web mobile
+
+As it uses the render props pattern, it is flexible and can be used to build components that are more complex than a simple
+anchor.
+
+```jsx
+import AppLinker from 'cozy-ui/transpiled/react/AppLinker';
+
+const app = {
+  slug: 'banks'
+};
+
+<AppLinker app={app} href='http://dalailama-banks.mycozy.cloud'>{
+  ({ onClick, href }) => (
+    <a href={href} onClick={onClick}>
+      Open
+    </a>
+  )
+}</AppLinker>
+```

package/src/AppLinker/__snapshots__/index.spec.jsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app icon should render correctly 1`] = `
+<div>
+  <div>
+    <a
+      href="https://fake.link"
+    >
+      Open 
+    </a>
+  </div>
+</div>
+`;