cozy-ui 132.1.0 → 133.0.0

package/react/AppIcon/index.jsx

@@ -1,169 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-
-import { withClient } from 'cozy-client'
-
-import styles from './styles.styl'
-import { isShortcutFile } from '../AppSections/helpers'
-import Icon, { iconPropType } from '../Icon'
-import CubeIcon from '../Icons/Cube'
-import { ShortcutTile } from '../ShortcutTile'
-import palette from '../palette'
-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={palette['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/react/AppIcon/styles.styl

@@ -1,37 +0,0 @@
-@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/react/AppLinker/Readme.md

@@ -1,32 +0,0 @@
-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/react/AppLinker/__snapshots__/index.spec.jsx.snap

@@ -1,13 +0,0 @@
-// 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>
-`;

package/react/AppLinker/index.jsx

@@ -1,107 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { withClient } from 'cozy-client'
-import { isFlagshipApp } from 'cozy-device-helper'
-import { WebviewContext } from 'cozy-intent'
-import logger from 'cozy-logger'
-
-import {
-  generateUniversalLink,
-  generateWebLink,
-  getUniversalLinkDomain
-} from './native'
-
-export class AppLinker extends React.Component {
-  static contextType = WebviewContext
-
-  state = {
-    imgRef: null
-  }
-
-  constructor(props) {
-    super(props)
-  }
-
-  setImgRef = img => {
-    this.imgRef = img
-    this.setState({ imgRef: this.imgRef })
-  }
-
-  static getSlug(props) {
-    return props.app.slug
-  }
-
-  static getOnClickHref(props, context, imgRef) {
-    const { app, client, onAppSwitch } = props
-
-    let href = props.href
-    let onClick = null
-
-    if (isFlagshipApp()) {
-      const { app: currentApp } = client
-        ? client.getInstanceOptions()
-        : undefined
-
-      if (currentApp === undefined || app.slug !== currentApp.slug) {
-        const imgPayload =
-          imgRef &&
-          JSON.stringify({
-            ...imgRef.getBoundingClientRect().toJSON()
-          })
-
-        return {
-          onClick: event => {
-            event.preventDefault()
-
-            onAppSwitch?.()
-
-            context
-              ? context.call('openApp', href, app, imgPayload)
-              : logger.error(
-                  `Failed to "openApp(${app})". WebviewService has the following falsy value "${context}" in AppLinker's context.`
-                )
-          },
-          href: '#'
-        }
-      }
-    }
-
-    return {
-      href,
-      onClick
-    }
-  }
-
-  render() {
-    const { children } = this.props
-
-    const { href, onClick } = AppLinker.getOnClickHref(
-      this.props,
-      this.context,
-      this.state.imgRef
-    )
-
-    return children({
-      iconRef: this.setImgRef,
-      onClick: onClick,
-      href
-    })
-  }
-}
-
-AppLinker.propTypes = {
-  /*
-  Full web url : Used by default on desktop browser
-  Used as a fallback_uri on mobile web
-  */
-  href: PropTypes.string,
-  onAppSwitch: PropTypes.func,
-  app: PropTypes.shape({
-    // Slug of the app : drive / banks ...
-    slug: PropTypes.string.isRequired
-  }).isRequired
-}
-
-export default withClient(AppLinker)
-export { getUniversalLinkDomain, generateWebLink, generateUniversalLink }

package/react/AppLinker/index.spec.jsx

@@ -1,60 +0,0 @@
-import { render } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import React from 'react'
-
-import AppLinker from '.'
-
-jest.useFakeTimers()
-
-const setup = ({ app, onAppSwitch }) => {
-  return {
-    user: userEvent.setup({ delay: null }),
-    ...render(
-      <AppLinker onAppSwitch={onAppSwitch} href="https://fake.link" app={app}>
-        {({ onClick, href, name }) => (
-          <div>
-            <a href={href} onClick={onClick}>
-              Open {name}
-            </a>
-          </div>
-        )}
-      </AppLinker>
-    )
-  }
-}
-
-const app = {
-  slug: 'drive',
-  name: 'Drive'
-}
-
-describe('app icon', () => {
-  let spyConsoleError, appSwitchMock
-
-  beforeEach(() => {
-    spyConsoleError = jest.spyOn(console, 'error')
-    spyConsoleError.mockImplementation(message => {
-      if (message.lastIndexOf('Warning: Failed prop type:') === 0) {
-        throw new Error(message)
-      }
-    })
-    appSwitchMock = jest.fn()
-  })
-
-  afterEach(() => {
-    spyConsoleError.mockRestore()
-    jest.restoreAllMocks()
-  })
-
-  it('should render correctly', () => {
-    const { container } = setup({ app })
-    expect(container).toMatchSnapshot()
-  })
-
-  it('should work for web -> web', async () => {
-    const { container, user } = setup({ app, onAppSwitch: appSwitchMock })
-    const link = container.querySelector('a')
-    await user.click(link)
-    expect(appSwitchMock).not.toHaveBeenCalled()
-  })
-})

package/react/AppLinker/native.config.js

@@ -1 +0,0 @@
-export const UNIVERSAL_LINK_URL = 'https://links.mycozy.cloud'

package/react/AppLinker/native.js

@@ -1,55 +0,0 @@
-import {
-  generateWebLink as generateWebLinkClient,
-  ensureFirstSlash
-} from 'cozy-client'
-
-import { UNIVERSAL_LINK_URL } from './native.config'
-
-export const getUniversalLinkDomain = () => {
-  return UNIVERSAL_LINK_URL
-}
-
-export const generateWebLink = ({ nativePath, ...props }) => {
-  console.warn(
-    'Deprecated: you should use generateWebLink from cozy-client instead'
-  )
-  return generateWebLinkClient({ pathname: '/', hash: nativePath, ...props })
-}
-
-/**
- * Returns a universal link for an app + native path
- *
- * @param  {string} options.slug          - eg: drive
- * @param  {string} options.nativePath    - /path/to/view
- * @param  {string} options.fallbackUrl   - https://...mycozy.cloud, optional if cozyUrl is passed
- * @param  {string} options.cozyUrl       - https://name.mycozy.cloud, optional if fallbackUrl is passed
- * @param  {string} options.subDomainType - flat/nested, optionally the type of subdomains that is used.
- * @return {string}                       - https://links.cozy.cloud/drive/?fallback...
- */
-export const generateUniversalLink = options => {
-  const { slug, cozyUrl, subDomainType } = options
-  let { fallbackUrl, nativePath } = options
-  nativePath = ensureFirstSlash(nativePath)
-
-  if (!cozyUrl && !fallbackUrl) {
-    throw new Error(
-      'Must have either cozyUrl or fallbackUrl to generate universal link.'
-    )
-  }
-
-  if (cozyUrl && !fallbackUrl) {
-    fallbackUrl = generateWebLinkClient({
-      cozyUrl,
-      pathname: '/',
-      hash: nativePath,
-      slug,
-      subDomainType
-    })
-  }
-
-  const url = getUniversalLinkDomain(cozyUrl) + '/' + slug + nativePath
-  const urlObj = new URL(url)
-  urlObj.searchParams.append('fallback', fallbackUrl)
-
-  return urlObj.toString()
-}

package/react/AppLinker/native.spec.js

@@ -1,120 +0,0 @@
-import { generateWebLink } from 'cozy-client'
-
-import { generateUniversalLink } from './native'
-
-describe('native functions', () => {
-  describe('generating a web link', () => {
-    it('should generate a web link', () => {
-      const webLink = generateWebLink({
-        cozyUrl: 'https://test.cozy.tools:8080',
-        pathname: '/',
-        hash: '/files/1',
-        slug: 'drive'
-      })
-
-      expect(webLink).toEqual('https://test-drive.cozy.tools:8080/#/files/1')
-    })
-
-    it('should handle both types of subdomains', () => {
-      const flatLink = generateWebLink({
-        cozyUrl: 'https://test.cozy.tools:8080',
-        pathname: '/',
-        hash: '/files/1',
-        slug: 'drive',
-        subDomainType: 'flat'
-      })
-      expect(flatLink).toEqual('https://test-drive.cozy.tools:8080/#/files/1')
-
-      const nestedLink = generateWebLink({
-        cozyUrl: 'https://cozy.tools:8080',
-        pathname: '/',
-        hash: '/files/1',
-        slug: 'drive',
-        subDomainType: 'nested'
-      })
-      expect(nestedLink).toEqual('https://drive.cozy.tools:8080/#/files/1')
-    })
-  })
-
-  describe('universal link', () => {
-    it('should generate the universalink', () => {
-      const universalLink = generateUniversalLink({
-        slug: 'drive',
-        nativePath: '/files/1',
-        fallbackUrl: 'https://drive.cozy.tools/files/1'
-      })
-      const endLink =
-        'https://links.mycozy.cloud/drive/files/1?fallback=https%3A%2F%2Fdrive.cozy.tools%2Ffiles%2F1'
-
-      expect(universalLink).toEqual(endLink)
-    })
-
-    it('should generate the universalink with several search params', () => {
-      const universalLink = generateUniversalLink({
-        slug: 'drive',
-        nativePath: '/files/1?viewer=test',
-        fallbackUrl: 'https://drive.cozy.tools/files/1?viewer=test'
-      })
-      const endLink =
-        'https://links.mycozy.cloud/drive/files/1?viewer=test&fallback=https%3A%2F%2Fdrive.cozy.tools%2Ffiles%2F1%3Fviewer%3Dtest'
-      expect(universalLink).toEqual(endLink)
-    })
-
-    it('should generate the universalink for the home of an app', () => {
-      const universalLink = generateUniversalLink({
-        slug: 'drive',
-        nativePath: '/',
-        fallbackUrl: 'https://drive.cozy.tools/'
-      })
-      const endLink =
-        'https://links.mycozy.cloud/drive/?fallback=https%3A%2F%2Fdrive.cozy.tools%2F'
-      expect(universalLink).toEqual(endLink)
-    })
-
-    it('should generate the universalink for the home of an app even if no path', () => {
-      const universalLink = generateUniversalLink({
-        slug: 'drive',
-        nativePath: '',
-        fallbackUrl: 'https://drive.cozy.tools/'
-      })
-      const endLink =
-        'https://links.mycozy.cloud/drive/?fallback=https%3A%2F%2Fdrive.cozy.tools%2F'
-
-      expect(universalLink).toEqual(endLink)
-    })
-
-    it('should automatically generate fallbackUrl if provided with cozyUrl', () => {
-      const universalLink = generateUniversalLink({
-        slug: 'drive',
-        nativePath: '/files',
-        cozyUrl: 'https://name.cozy.tools/'
-      })
-      const endLink =
-        'https://links.mycozy.cloud/drive/files?fallback=https%3A%2F%2Fname-drive.cozy.tools%2F%23%2Ffiles'
-      expect(universalLink).toEqual(endLink)
-    })
-
-    it('should handle both types of subdomains', () => {
-      const flatUniversalLink = generateUniversalLink({
-        slug: 'drive',
-        nativePath: '/files',
-        cozyUrl: 'https://name.cozy.tools/',
-        subDomainType: 'flat'
-      })
-      expect(flatUniversalLink).toEqual(
-        'https://links.mycozy.cloud/drive/files?fallback=https%3A%2F%2Fname-drive.cozy.tools%2F%23%2Ffiles'
-      )
-
-      const nestedUniversalLink = generateUniversalLink({
-        slug: 'drive',
-        nativePath: '/files',
-        cozyUrl: 'https://name.cozy.tools/',
-        subDomainType: 'nested'
-      })
-
-      expect(nestedUniversalLink).toEqual(
-        'https://links.mycozy.cloud/drive/files?fallback=https%3A%2F%2Fdrive.name.cozy.tools%2F%23%2Ffiles'
-      )
-    })
-  })
-})

package/react/AppSections/Readme.md

@@ -1,41 +0,0 @@
-```jsx
-import { useState } from 'react'
-import mockApps from './_mockApps'
-import { I18n } from 'cozy-ui/transpiled/react/providers/I18n'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import Sections from 'cozy-ui/transpiled/react/AppSections'
-import Variants from 'cozy-ui/docs/components/Variants'
-import CozyClient, { CozyProvider } from "cozy-client";
-
-const locale = {}
-const client = new CozyClient()
-const WrapperSections = () => {
-  const handleAppClick = app => {
-    alert(JSON.stringify(app, null, 2))
-  }
-
-  const initialVariants = [{ displaySpecificMaintenanceStyle: false}]
-
-  return (
-    <Variants initialVariants={initialVariants} screenshotAllVariants>
-      {
-      variant =>
-        <Sections
-            apps={mockApps}
-            onAppClick={handleAppClick} displaySpecificMaintenanceStyle={variant.displaySpecificMaintenanceStyle}
-        />
-      }
-    </Variants>
-  )
-}
-
-;
-
-<BreakpointsProvider>
-  <CozyProvider client={client}>
-    <I18n dictRequire={lang => locale} lang="en">
-      <WrapperSections />
-    </I18n>
-  </CozyProvider>
-</BreakpointsProvider>
-```