cozy-ui 134.2.0 → 135.0.0

package/react/providers/I18n/format.spec.jsx

@@ -1,73 +0,0 @@
-import { initFormat, formatLocallyDistanceToNow } from './format'
-
-describe('initFormat', () => {
-  beforeEach(() => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-  })
-
-  afterEach(() => {
-    console.warn.mockRestore()
-  })
-
-  it('should not throw if a date-fns locale can not be found', () => {
-    expect(() => initFormat('unknown-lang', 'unknown-default')).not.toThrow()
-  })
-
-  it('should use the correct locale', () => {
-    const f = initFormat('fr', 'en')
-    const date = f(0, 'yyyy-LLLL-dd')
-    expect(date).toBe('1970-janvier-01')
-  })
-
-  it('should use the correct default locale if user locale can not be found', () => {
-    const f = initFormat('it', 'fr')
-    const date = f(0, 'yyyy-LLLL-dd')
-    expect(date).toBe('1970-janvier-01')
-  })
-
-  it('should fallback english if user locale and default locale can not be found', () => {
-    const f = initFormat('unknown-lang', 'unknown-default')
-    const date = f(0, 'yyyy-LLLL-dd')
-    expect(date).toBe('1970-January-01')
-  })
-})
-
-describe('formatLocallyDistanceToNow', () => {
-  beforeEach(() => {
-    // To avoid currentLocale set to 'fr' because of previous tests
-    const f = initFormat('en')
-    f(0, 'yyyy-LLLL-dd')
-  })
-
-  it('should formatDistanceToNow with small value', () => {
-    const date = Date.now() + 29 * 1000 // 29s
-
-    const result = formatLocallyDistanceToNow(date)
-
-    expect(result).toEqual('less than a minute')
-  })
-
-  it('should formatDistanceToNow with medium value', () => {
-    const date = Date.now() + (44 * 60 + 31) * 1000 // 44min 31s
-
-    const result = formatLocallyDistanceToNow(date)
-
-    expect(result).toEqual('about 1 hour')
-  })
-
-  it('should formatDistanceToNow with high value', () => {
-    const date = Date.now() + (89 * 60 + 31) * 1000 // 89min 31s
-
-    const result = formatLocallyDistanceToNow(date)
-
-    expect(result).toEqual('about 2 hours')
-  })
-
-  it('should formatDistanceToNow with very high value', () => {
-    const date = Date.now() + 42 * 24 * 60 * 60 * 1000 // 42d
-
-    const result = formatLocallyDistanceToNow(date)
-
-    expect(result).toEqual('about 1 month')
-  })
-})

package/react/providers/I18n/helpers.js

@@ -1,33 +0,0 @@
-import { DEFAULT_LANG } from './'
-import { initFormat } from './format'
-import { initTranslation } from './translation'
-
-const getAppOrUiLang = defaultLang => {
-  const appContainer = document.querySelector('[role=application]')
-  const cozyUiContainer = {
-    dataset: {
-      cozy: JSON.stringify({
-        locale: localStorage.getItem('lang') || defaultLang
-      })
-    }
-  }
-  const container = appContainer || cozyUiContainer
-  const { locale } = JSON.parse(container.dataset.cozy)
-
-  return /^\{\{\..*\}\}$/.test(locale) ? defaultLang : locale
-}
-
-export const getI18n = (
-  lang,
-  dictRequire,
-  context,
-  defaultLang = DEFAULT_LANG
-) => {
-  const _lang = lang || getAppOrUiLang(defaultLang)
-  const polyglot = initTranslation(_lang, dictRequire, context, defaultLang)
-
-  const f = initFormat(_lang)
-  const t = polyglot.t.bind(polyglot)
-
-  return { t, f, lang: _lang }
-}

package/react/providers/I18n/index.jsx

@@ -1,107 +0,0 @@
-/**
- * Provides an I18n helper using a Higher Order Component.
- */
-
-'use strict'
-
-import PropTypes from 'prop-types'
-import React, { Component, useContext } from 'react'
-
-import { initFormat } from './format'
-import { initTranslation } from './translation'
-
-export const DEFAULT_LANG = 'en'
-
-export const I18nContext = React.createContext()
-
-/**
- * @typedef useI18nReturnTypes
- * @property {(key: string) => string} t
- * @property {(date: string, format: string) => string} f
- * @property {string} lang
- */
-
-/**
- * @returns {useI18nReturnTypes}
- */
-export const useI18n = () => {
-  const context = useContext(I18nContext)
-
-  if (!context) {
-    throw new Error(
-      '`I18nContext` is missing. `useI18n()` must be used within a `<I18n>`'
-    )
-  }
-
-  return context
-}
-
-// Provider root component
-export class I18n extends Component {
-  constructor(props) {
-    super(props)
-    this.init(this.props)
-  }
-
-  init(props) {
-    const { polyglot, lang, dictRequire, context, defaultLang } = props
-    this.translator =
-      polyglot || initTranslation(lang, dictRequire, context, defaultLang)
-    this.format = initFormat(lang, defaultLang)
-    this.t = this.translator.t.bind(this.translator)
-    this.contextValue = this.getContextValue(props)
-  }
-
-  getContextValue(props) {
-    return {
-      t: this.t,
-      f: this.format,
-      polyglot: (props || this.props).polyglot || this.translator,
-      lang: (props || this.props).lang
-    }
-  }
-
-  getChildContext() {
-    return this.contextValue
-  }
-
-  UNSAFE_componentWillReceiveProps = nextProps => {
-    if (nextProps.lang !== this.props.lang) {
-      this.init(nextProps)
-    }
-  }
-
-  render() {
-    return (
-      <I18nContext.Provider value={this.contextValue}>
-        {this.props.children}
-      </I18nContext.Provider>
-    )
-  }
-}
-
-I18n.propTypes = {
-  lang: PropTypes.string.isRequired, // current language.
-  polyglot: PropTypes.object, // A polyglot instance.
-  dictRequire: PropTypes.func, // A callback to load locales.
-  context: PropTypes.string, // current context.
-  defaultLang: PropTypes.string // default language. By default is 'en'
-}
-
-I18n.defaultProps = {
-  defaultLang: DEFAULT_LANG
-}
-
-I18n.childContextTypes = {
-  t: PropTypes.func,
-  f: PropTypes.func,
-  polyglot: PropTypes.object,
-  lang: PropTypes.string
-}
-
-export { initTranslation, extend } from './translation'
-export { default as translate } from './translate'
-export { default as createUseI18n } from './createUseI18n'
-export { default as useExtendI18n } from './useExtendI18n'
-
-export default I18n

package/react/providers/I18n/index.spec.jsx

@@ -1,135 +0,0 @@
-import { render, fireEvent, screen } from '@testing-library/react'
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-
-import I18n, { useI18n, createUseI18n } from '.'
-
-const locales = { helloworld: 'Hello World !' }
-
-const DumbI18nHelloWorld = ({ t, f, lang }) => (
-  <div>
-    {t('helloworld')}
-    <br />
-    {f('2020-01-06', 'D LLL', { useAdditionalDayOfYearTokens: true })}
-    <br />
-    {lang}
-  </div>
-)
-
-const I18nHelloWorldHook = () => {
-  const { t, f, lang } = useI18n()
-  return <DumbI18nHelloWorld t={t} f={f} lang={lang} />
-}
-
-const I18nHelloWorldOldAPI = (props, context) => {
-  const { t, f, lang } = context
-  return <DumbI18nHelloWorld t={t} f={f} lang={lang} />
-}
-
-I18nHelloWorldOldAPI.contextTypes = {
-  t: PropTypes.func,
-  f: PropTypes.func,
-  lang: PropTypes.string
-}
-
-describe('new context api', () => {
-  it('should provide t and f and lang through useI18n hook', () => {
-    render(
-      <I18n lang="en" dictRequire={() => locales}>
-        <I18nHelloWorldHook />
-      </I18n>
-    )
-    expect(
-      screen.getByText('Hello World !', { exact: false })
-    ).toBeInTheDocument()
-    expect(screen.getByText('6 Jan', { exact: false })).toBeInTheDocument()
-    expect(screen.getByText('en', { exact: false })).toBeInTheDocument()
-  })
-})
-
-describe('old context api', () => {
-  it('should provide t and f and lang through old context API', () => {
-    render(
-      <I18n lang="en" dictRequire={() => locales}>
-        <I18nHelloWorldOldAPI />
-      </I18n>
-    )
-    expect(
-      screen.getByText('Hello World !', { exact: false })
-    ).toBeInTheDocument()
-    expect(screen.getByText('6 Jan', { exact: false })).toBeInTheDocument()
-    expect(screen.getByText('en', { exact: false })).toBeInTheDocument()
-  })
-})
-
-describe('use i18n with custom locales', () => {
-  const locales = {
-    en: {
-      'hello-world': 'Hello world'
-    },
-    fr: {
-      'hello-world': 'Bonjour le monde'
-    }
-  }
-  const useI18n = createUseI18n(locales)
-  const Child = () => {
-    const { t } = useI18n()
-    return <div>{t('hello-world')}</div>
-  }
-  const Parent = () => {
-    const [lang, setLang] = useState('en')
-    return (
-      <>
-        <button onClick={() => setLang('fr')}>switch to French</button>
-        <I18n lang={lang} dictRequire={() => ({})}>
-          <Child />
-        </I18n>
-      </>
-    )
-  }
-
-  it('should work', () => {
-    const root = render(<Parent />)
-    const btn = root.getByText('switch to French')
-    expect(root.getByText('Hello world')).toBeTruthy()
-    fireEvent.click(btn)
-    expect(root.getByText('Bonjour le monde')).toBeTruthy()
-  })
-})
-
-describe('use i18n with custom locales and fallback to default', () => {
-  const locales = {
-    en: {
-      'hello-world': 'Hello world',
-      'how-are-you': 'How are you ?'
-    },
-    fr: {
-      'hello-world': 'Bonjour le monde'
-    }
-  }
-  const useI18n = createUseI18n(locales)
-  const Child = () => {
-    const { t } = useI18n()
-    return (
-      <div>
-        <div>{t('hello-world')}</div>
-        <div>{t('how-are-you')}</div>
-      </div>
-    )
-  }
-  const Parent = () => {
-    return (
-      <>
-        <I18n lang="fr" dictRequire={() => ({})}>
-          <Child />
-        </I18n>
-      </>
-    )
-  }
-
-  it('should display missing key in default langage', () => {
-    const root = render(<Parent />)
-    expect(root.getByText('Bonjour le monde')).toBeInTheDocument()
-    expect(root.getByText('How are you ?')).toBeInTheDocument()
-  })
-})

package/react/providers/I18n/translate.jsx

@@ -1,28 +0,0 @@
-import React, { useContext, forwardRef } from 'react'
-
-import { I18nContext } from '.'
-
-// higher order decorator for components that need `t` and/or `f`
-const translate = () => WrappedComponent => {
-  const Wrapper = forwardRef((props, ref) => {
-    const i18nContext = useContext(I18nContext)
-
-    return (
-      <WrappedComponent
-        {...props}
-        ref={ref}
-        t={i18nContext && i18nContext.t}
-        f={i18nContext && i18nContext.f}
-        lang={i18nContext && i18nContext.lang}
-      />
-    )
-  })
-
-  Wrapper.displayName = `withI18n(${
-    WrappedComponent.displayName || WrappedComponent.name
-  })`
-
-  return Wrapper
-}
-
-export default translate

package/react/providers/I18n/translation.jsx

@@ -1,42 +0,0 @@
-import Polyglot from 'node-polyglot'
-
-import { DEFAULT_LANG } from '.'
-
-export let _polyglot
-
-export const initTranslation = (
-  lang,
-  dictRequire,
-  context,
-  defaultLang = DEFAULT_LANG
-) => {
-  _polyglot = new Polyglot({
-    phrases: dictRequire(defaultLang),
-    locale: defaultLang
-  })
-
-  // Load global locales
-  if (lang && lang !== defaultLang) {
-    try {
-      const dict = dictRequire(lang)
-      _polyglot.extend(dict)
-      _polyglot.locale(lang)
-    } catch (e) {
-      console.warn(`The dict phrases for "${lang}" can't be loaded`)
-    }
-  }
-
-  // Load context locales
-  if (context) {
-    try {
-      const dict = dictRequire(lang, context)
-      _polyglot.extend(dict)
-    } catch (e) {
-      console.warn(`The context ${context} cannot be loaded for lang ${lang}`)
-    }
-  }
-
-  return _polyglot
-}
-
-export const extend = (dict, polyglot) => (polyglot || _polyglot)?.extend(dict)

package/react/providers/I18n/useExtendI18n.jsx

@@ -1,37 +0,0 @@
-import Polyglot from 'node-polyglot'
-import { useState } from 'react'
-
-import { useI18n } from '.'
-import { extend } from './translation'
-
-/**
- * Hook to merge app locales with cozy-ui locales
- * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
- * @returns {void}
- */
-const useExtendI18n = locales => {
-  const { lang, polyglot } = useI18n()
-  // Use to determine if we need to merge locales again, and to avoid useless calls
-  const [useExtendI18nLang, setUseExtendI18nLang] = useState('')
-
-  if (!locales || !lang || !polyglot) return
-
-  // To simplify code we use Polyglot.extend to merge
-  // locales from object and from polyglot.phrases
-  // rather than native JS or lodash. this is why we have two extend.
-  if (useExtendI18nLang !== lang) {
-    const _polyglot = new Polyglot({
-      phrases: locales[lang],
-      locale: lang
-    })
-
-    // merge locales from app and cozy-ui, without replacing existing one in app
-    extend(polyglot.phrases, _polyglot)
-    // use merged locales in app
-    extend(_polyglot.phrases, polyglot)
-    // set the switch to avoid useless merge
-    setUseExtendI18nLang(lang)
-  }
-}
-
-export default useExtendI18n

package/react/providers/I18n/withLocales.jsx

@@ -1,47 +0,0 @@
-import omit from 'lodash/omit'
-import React from 'react'
-
-import { I18n, translate } from '.'
-
-/**
- *
- * @param  {Function|Object} localesOrRequire - Either a function returning the locale for a lang,
- *                                              or an object containing all the locales
- * @return {Component}
- */
-const withLocales = localesOrRequire => Component => {
-  // The inner components needs to receive t
-  const Translated = translate()(Component)
-
-  const requireLocale =
-    typeof localesOrRequire === 'function'
-      ? localesOrRequire
-      : localeCode => localesOrRequire[localeCode]
-
-  class Wrapped extends React.Component {
-    render() {
-      const { lang } = this.props
-      // Do not pass translate props downwards
-      // since the component is already augmented with translate()
-      const wrappedProps = omit(this.props, Object.keys(I18n.childContextTypes))
-      return (
-        <I18n dictRequire={requireLocale} lang={lang}>
-          <Translated {...wrappedProps} />
-        </I18n>
-      )
-    }
-  }
-  Wrapped.propTypes = {
-    ...(Component.propTypes || {}),
-    ...I18n.childContextTypes
-  }
-
-  Wrapped.displayName = `withLocales(${
-    Component.displayName || Component.name
-  })`
-
-  // The outer component needs to receive lang
-  return translate()(Wrapped)
-}
-
-export default withLocales

package/react/providers/I18n/withLocales.spec.jsx

@@ -1,58 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-
-import { I18n } from '.'
-import withLocales from './withLocales'
-
-const globalLocales = {
-  en: {
-    'hello-world': 'Hello global world !'
-  },
-  fr: {
-    'hello-world': 'Bonjour le monde global !'
-  }
-}
-
-const componentLocales = {
-  en: {
-    'hello-world': 'Hello local world !'
-  },
-  fr: {
-    'hello-world': 'Bonjour le monde local !'
-  }
-}
-
-class MockComponent extends React.Component {
-  render() {
-    const { t } = this.props
-    return <div>{t('hello-world')}</div>
-  }
-}
-
-describe('with locales', () => {
-  const setup = ({ lang, Component }) => {
-    render(
-      <I18n lang={lang} dictRequire={localeCode => globalLocales[localeCode]}>
-        <Component />
-      </I18n>
-    )
-  }
-
-  const testComponent = (Component, description) => {
-    describe(description, () => {
-      it('should provide t with correct locale strings', () => {
-        setup({ lang: 'en', Component })
-        expect(screen.getByText('Hello local world !')).toBeInTheDocument()
-        setup({ lang: 'fr', Component })
-        expect(screen.getByText('Bonjour le monde local !')).toBeInTheDocument()
-      })
-    })
-  }
-
-  const TComponentObj = withLocales(componentLocales)(MockComponent)
-  const requireLang = lang => componentLocales[lang]
-  const TComponentFunc = withLocales(requireLang)(MockComponent)
-
-  testComponent(TComponentObj, 'locales from object')
-  testComponent(TComponentFunc, 'locales from require function')
-})

package/react/providers/I18n/withOnlyLocales.jsx

@@ -1,38 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import { I18n, useI18n } from '.'
-
-/**
- *
- * @param  {Function|Object} localesOrRequire - Either a function returning the locale,
- *                                              or an object containing all the locales
- * @return {Component}
- */
-const withOnlyLocales = localesOrRequire => Component => {
-  const requireLocale =
-    typeof localesOrRequire === 'function'
-      ? localesOrRequire
-      : localeCode => localesOrRequire[localeCode]
-
-  const Wrapped = forwardRef((props, ref) => {
-    const { lang } = useI18n()
-
-    return (
-      <I18n dictRequire={requireLocale} lang={lang}>
-        <Component {...props} ref={ref} />
-      </I18n>
-    )
-  })
-
-  Wrapped.propTypes = {
-    ...(Component.propTypes || {})
-  }
-
-  Wrapped.displayName = `withOnlyLocales(${
-    Component.displayName || Component.name
-  })`
-
-  return Wrapped
-}
-
-export default withOnlyLocales

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

@@ -1,3 +0,0 @@
-export function useI18n(props: any): import("../providers/I18n").useI18nReturnTypes;
-export default I18n;
-declare function I18n(props: any): JSX.Element;

package/transpiled/react/I18n/index.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import createDepreciationLogger from "cozy-ui/transpiled/react/helpers/createDepreciationLogger";
-import DeprecatedI18n, { useI18n as deprecatedUseI18n } from "cozy-ui/transpiled/react/providers/I18n";
-var logDeprecatedFunc = createDepreciationLogger();
-var logDeprecatedComp = createDepreciationLogger();
-export var useI18n = function useI18n(props) {
-  logDeprecatedFunc("\"useI18n\" is now exported elsewhere. Please change the import path to \"cozy-ui/transpiled/react/providers/I18n\"");
-  return deprecatedUseI18n(props);
-};
-
-var I18n = function I18n(props) {
-  logDeprecatedComp("\"I18n\" is now exported elsewhere. Please change the import path to \"cozy-ui/transpiled/react/providers/I18n\"");
-  return /*#__PURE__*/React.createElement(DeprecatedI18n, props);
-};
-
-export default I18n;

package/transpiled/react/I18n/withLocales.d.ts

@@ -1,2 +0,0 @@
-export default deprecatedWithLocales;
-declare function deprecatedWithLocales(props: any): Component;

package/transpiled/react/I18n/withLocales.js

@@ -1,10 +0,0 @@
-import createDepreciationLogger from "cozy-ui/transpiled/react/helpers/createDepreciationLogger";
-import withLocales from "cozy-ui/transpiled/react/providers/I18n/withLocales";
-var logDeprecatedWithLocale = createDepreciationLogger();
-
-var deprecatedWithLocales = function deprecatedWithLocales(props) {
-  logDeprecatedWithLocale("\"withLocales\" is now exported elsewhere. Please change the import path to \"cozy-ui/transpiled/react/providers/I18n\"");
-  return withLocales(props);
-};
-
-export default deprecatedWithLocales;

package/transpiled/react/providers/I18n/createUseI18n.d.ts

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

package/transpiled/react/providers/I18n/createUseI18n.js

@@ -1,39 +0,0 @@
-import Polyglot from 'node-polyglot';
-import { useMemo } from 'react';
-import { useI18n, DEFAULT_LANG } from "cozy-ui/transpiled/react/providers/I18n";
-import { initFormat } from "cozy-ui/transpiled/react/providers/I18n/format";
-
-var createUseI18n = function createUseI18n(locales) {
-  return function () {
-    var _ref = useI18n() || {
-      lang: DEFAULT_LANG
-    },
-        lang = _ref.lang;
-
-    return useMemo(function () {
-      var polyglot = new Polyglot({
-        locale: DEFAULT_LANG,
-        phrases: locales[DEFAULT_LANG]
-      });
-
-      if (lang && lang !== DEFAULT_LANG) {
-        try {
-          polyglot.locale(lang);
-          polyglot.extend(locales[lang]);
-        } catch (e) {
-          console.warn("The dict phrases for \"".concat(lang, "\" can't be loaded"));
-        }
-      }
-
-      var f = initFormat(lang);
-      var t = polyglot.t.bind(polyglot);
-      return {
-        t: t,
-        f: f,
-        lang: lang
-      };
-    }, [lang]);
-  };
-};
-
-export default createUseI18n;