New release: v3.4.0

[Gnito]

Dependency updates

• react-intl: React Intl was the most problematic to upgrade.

  • Proptype intlShape was removed so we needed to create it again. Because of this we added a new util/reactIntl.js file. This file is now used to wrap all the react-intl related imports.
  • addLocaleDate function was removed and react-intl library is now relying on native Intl APIs: Intl.PluralRules and Intl.RelativeTimeFormat. In order to support older browsers we needed to add intl-pluralrules and intl-relativetimeformat to util/polyfills.js
  • Also, Node must be now compiled with full-icu which caused changes to start and test
    scripts in package.json. We also needed to add a specific config for nodemon
  • Default textComponentin IntlProvider changed to React.Fragment so we need to explicitly
    set textComponent to span. Otherwise, all the snapshots would have changed and it might
    affect to UI if there are styles added to these spans generally in customization projects.

  Note: FormattedMessage component now supports
  tagName prop and improved rich-text formatting.

  Read more from Upgrade guide for [email protected]

• Updated react, react-test-renderer and react-dom to 16.9.0. After these updates old
  lifecycle methods componentWillMount, componentWillUpdate and componentWillUpdate will cause deprecation warnings. Check the updated components from the PR #1172

• Migrate from react-helmet to react-helmet-async, since react-helmet wasn't updated often
  enough and react-helmet-async was supporting React 16+ better. This caused changes to app.js (<HelmetProvider> added) and it changes the way how Helmet needs to be imported. #1179

  • import Helmet from 'react-helmet'; vs import { Helmet } from 'react-helmet-async';

• sanitize.css was moved to own file instead of importing it from npm package because updating it accidentally might break the UI.

• react-redux: v5.1.1 -> v7.1.1 Note: connect is now using Hooks.

  • In FTW, app.test.js had to be split to SSR aka node environment tests and client tests since JSDOM environment in Jest doesn't work well with the environment detection hack that react-redux uses internally.

• seedrandom: v2.4.4 -> v3.0.3. (FTW wasn't affected.)

• inquirer: v6.5.0 -> v7.0.0. (They dropped support for Node 6)

• final-form, final-form-arrays, react-final-form and react-final-form-arrays. This forced us to make some code changes:

  • Old recommendation of by-passing default field formatting or parsing isn't accepted anymore
    • format={null} => use identity function instead: format={v => v}
    • parse={null} => use identity function instead: parse={v => v}
  • Final Form passes input props (name, value, onChange, onBlur, etc. ) grouped inside input key
    • those props now include type attribute too.
  • Our old code sometimes used a prop called form as a way to pass id/name of the form to the form. So, that if there's a need to add id's to inputs they could be unique ${form}.inputId. This was a bad choice since when we ended up using Final Form (and this newer version of it): they introduced form prop of their own. That form prop is used to pass in formAPI - and if there's form prop passed outside of Final Form, it is used internally as an alternative formAPI. In v3.4.0, we have tried to rename all the remaining old form props as formId.
  • Note: most of the changes came from react-final-form: 4.0.2 > v5.0.0 -> v6.0.0 -> v6.3.1

• react-dates: v18.5.0 -> v20.3.0

• prettier: v1.17.0 -> v1.18.2

  • Check if you need to format your code: yarn run format

• path-to-regexp: v2.4.0 -> v3.0.0. It is used in create populated paths in our route generation.

• sharetribe-scripts: v3.0.0 -> v3.1.1

  • Remove jsx-a11y/href-no-hash for eslint reference since it didn't exist anymore: /* eslint-disable jsx-a11y/href-no-hash */

• Sentry: v4.5.1 -> v5.6.2

Other changes

• Update to German and French translations. #1184

• Bug fixes to ProfileSettingsForm, EditListingAvailabilityForm, and FieldBirthdayInput

• Lodash vulnerability: we enforced a newer version for react-google-maps and react-dates through package.json resolutions