cozy-ui-plus 1.1.0

package/src/AppLinker/index.jsx

@@ -0,0 +1,107 @@
+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/src/AppLinker/index.spec.jsx

@@ -0,0 +1,60 @@
+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/src/AppLinker/native.config.js

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

package/src/AppLinker/native.js

@@ -0,0 +1,57 @@
+/* eslint-disable no-console */
+
+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/src/AppLinker/native.spec.js

@@ -0,0 +1,120 @@
+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/src/AppSections/Readme.md

@@ -0,0 +1,35 @@
+```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 DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+;
+
+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>
+  )
+}
+
+;
+
+<DemoProvider>
+  <WrapperSections />
+</DemoProvider>
+```

package/src/AppSections/Sections.jsx

@@ -0,0 +1,285 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import withOnlyLocales from 'cozy-ui/transpiled/react/providers/I18n/withOnlyLocales'
+
+import styles from './Sections.styl'
+import * as catUtils from './categories'
+import AppsSection from './components/AppsSection'
+import DropdownFilter from './components/DropdownFilter'
+import { APP_TYPE } from './constants'
+import { generateI18nConfig } from './generateI18nConfig'
+import { isShortcutFile } from './helpers'
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import ru from './locales/ru.json'
+import vi from './locales/vi.json'
+import * as searchUtils from './search'
+
+const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}
+
+const SectionTitle = ({ children }) => (
+  <Typography variant="h3" gutterBottom>
+    {children}
+  </Typography>
+)
+
+const SectionSubtitle = ({ children }) => (
+  <Typography variant="h4" className="u-mv-1-half u-mb-1">
+    {children}
+  </Typography>
+)
+
+const SectionSubSubtitle = ({ children }) => (
+  <Typography variant="subtitle1" color="textSecondary" gutterBottom>
+    {children}
+  </Typography>
+)
+
+const Section = ({ children }) => (
+  <div className={styles.Sections__section}>{children}</div>
+)
+
+/**
+ * Shows a list of apps grouped by categories.
+ *
+ * Can be
+ *
+ * - uncontrolled: it controls an internal search object to filter the list.
+ * - controlled: it is controlled by the `search` prop
+ */
+export class Sections extends Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      search: props.initialSearch || {}
+    }
+    this.handleCategoryChange = this.handleCategoryChange.bind(this)
+  }
+
+  // Sets state.search from the option received from the DropdownFilter
+  handleCategoryChange(categoryOption) {
+    const search = searchUtils.makeSearchFromOption(categoryOption)
+    if (!this.props.search) {
+      // the component is uncontrolled
+      this.setState({
+        search
+      })
+    }
+    if (typeof this.props.onSearchChange === 'function') {
+      this.props.onSearchChange(search)
+    }
+  }
+
+  render() {
+    const {
+      t,
+      apps,
+      error,
+      onAppClick,
+      breakpoints = {},
+      hasNav,
+      IconComponent,
+      showFilterDropdown,
+      showTitles,
+      showSubTitles,
+      showSubSubTitles,
+      displaySpecificMaintenanceStyle,
+      componentsProps
+    } = this.props
+    const { isMobile, isTablet } = breakpoints
+
+    if (error) return <p className="u-error">{error.message}</p>
+
+    // Depending on whether the component is controlled or uncontrolled,
+    // search is taken from props or state
+    const search = this.props.search || this.state.search
+    const searchMatcher = searchUtils.makeMatcherFromSearch(search)
+    const filteredApps = apps.filter(searchMatcher)
+
+    const konnectorGroups = catUtils.groupApps(
+      filteredApps.filter(a => a.type === APP_TYPE.KONNECTOR)
+    )
+    const webAppGroups = catUtils.groupApps(
+      filteredApps.filter(a => a.type === APP_TYPE.WEBAPP)
+    )
+    const shortcutsGroups = catUtils.groupApps(
+      filteredApps.filter(a => isShortcutFile(a))
+    )
+
+    const webAppsCategories = Object.keys(webAppGroups)
+      .map(cat => catUtils.addLabel({ value: cat }, t))
+      .sort(catUtils.sorter)
+    const konnectorsCategories = Object.keys(konnectorGroups)
+      .map(cat => catUtils.addLabel({ value: cat }, t))
+      .sort(catUtils.sorter)
+    const shortcutsCategories = Object.keys(shortcutsGroups)
+      .map(cat => catUtils.addLabel({ value: cat }, t))
+      .sort(catUtils.sorter)
+
+    const dropdownDisplayed =
+      hasNav && (isMobile || isTablet) && showFilterDropdown
+    const rawSelectOptions = catUtils.generateOptionsFromApps(apps, {
+      includeAll: true
+    })
+    const selectOptions = rawSelectOptions.map(option =>
+      catUtils.addLabel(option, t)
+    )
+    const optionMatcher = searchUtils.makeOptionMatcherFromSearch(search)
+    const defaultFilterValue = selectOptions.find(optionMatcher)
+
+    return (
+      <div className={cx(styles.Sections, dropdownDisplayed && 'u-mt-half')}>
+        {dropdownDisplayed && (
+          <DropdownFilter
+            defaultValue={defaultFilterValue}
+            options={selectOptions}
+            onChange={this.handleCategoryChange}
+          />
+        )}
+        {!isMobile && !!webAppsCategories.length && showTitles && (
+          <SectionTitle>{t('sections.applications')}</SectionTitle>
+        )}
+        <Section>
+          {!!webAppsCategories.length && (
+            <div>
+              {webAppsCategories.map(cat => {
+                return (
+                  <AppsSection
+                    key={cat.value}
+                    appsList={webAppGroups[cat.value]}
+                    subtitle={<SectionSubtitle>{cat.label}</SectionSubtitle>}
+                    onAppClick={onAppClick}
+                    IconComponent={IconComponent}
+                    displaySpecificMaintenanceStyle={
+                      displaySpecificMaintenanceStyle
+                    }
+                  />
+                )
+              })}
+            </div>
+          )}
+          {!!shortcutsCategories.length && (
+            <div>
+              {showSubTitles && (
+                <SectionSubtitle>{t('sections.shortcuts')}</SectionSubtitle>
+              )}
+
+              {shortcutsCategories.map(cat => {
+                return (
+                  <AppsSection
+                    key={cat.value}
+                    {...componentsProps?.appsSection}
+                    appsList={shortcutsGroups[cat.value]}
+                    subtitle={
+                      showSubSubTitles ? (
+                        <SectionSubSubtitle>{cat.label}</SectionSubSubtitle>
+                      ) : null
+                    }
+                    IconComponent={IconComponent}
+                    onAppClick={onAppClick}
+                    displaySpecificMaintenanceStyle={
+                      displaySpecificMaintenanceStyle
+                    }
+                  />
+                )
+              })}
+            </div>
+          )}
+          {!!konnectorsCategories.length && (
+            <div>
+              {showSubTitles && (
+                <SectionSubtitle>{t('sections.konnectors')}</SectionSubtitle>
+              )}
+              {konnectorsCategories.map(cat => {
+                return (
+                  <AppsSection
+                    key={cat.value}
+                    {...componentsProps?.appsSection}
+                    appsList={konnectorGroups[cat.value]}
+                    subtitle={
+                      showSubSubTitles ? (
+                        <SectionSubSubtitle>{cat.label}</SectionSubSubtitle>
+                      ) : null
+                    }
+                    IconComponent={IconComponent}
+                    onAppClick={onAppClick}
+                    displaySpecificMaintenanceStyle={
+                      displaySpecificMaintenanceStyle
+                    }
+                  />
+                )
+              })}
+            </div>
+          )}
+        </Section>
+      </div>
+    )
+  }
+}
+
+const SectionsWrapper = ({ config, ...props }) => {
+  const i18nConfig = generateI18nConfig(config?.categories)
+  useExtendI18n(i18nConfig)
+
+  const { t } = useI18n()
+  const breakpoints = useBreakpoints()
+
+  return <Sections {...props} breakpoints={breakpoints} t={t} />
+}
+
+Sections.propTypes = {
+  t: PropTypes.func.isRequired,
+
+  /** List of apps that will be displayed into categories */
+  apps: PropTypes.array.isRequired,
+  error: PropTypes.object,
+
+  config: PropTypes.object,
+  onAppClick: PropTypes.func.isRequired,
+
+  /** Whether to display the category selector */
+  hasNav: PropTypes.bool,
+
+  /** An initial search object. Changing it after mounting will do nothing. */
+  initialSearch: PropTypes.object,
+
+  displaySpecificMaintenanceStyle: PropTypes.bool
+}
+
+Sections.defaultProps = {
+  hasNav: true,
+
+  displaySpecificMaintenanceStyle: false,
+  /** Whether to show the top dropdown that is used to switch categories on mobile */
+  showFilterDropdown: true,
+
+  /** Whether to show titles (ex: Applications) */
+  showTitles: true,
+
+  /** Whether to show sub titles (ex: Application category) */
+  showSubTitles: true,
+
+  /** Whether to show sub sub titles (ex: Konnector category) */
+  showSubSubTitles: true,
+
+  /* Props passed to components with the same name */
+  componentsProps: PropTypes.shape({
+    /** Props spread to AppsSection component */
+    appsSection: PropTypes.shape({
+      /** Props spread to onClick method of AppTile component */
+      disableClick: PropTypes.func
+    })
+  })
+}
+
+export default withOnlyLocales(locales)(SectionsWrapper)

package/src/AppSections/Sections.styl

@@ -0,0 +1,4 @@
+.Sections__section
+    margin-bottom 4rem
+
+