react-components: lodash and font-awesome imports

- add webpack bundle analyser
- import only the bell and envelope icons from Font Awesome.
- import only the lodash utilities that are used in the code.
- mark `i18next` and `react-18next` as external dependencies in libraries.
- update tests to query elements by their translation keys.
- replace `mime-types` with `mime/lite`.

Should reduce the build size by ~300k.

packages/app-project/src/components/AdminContainer/AdminContainer.spec.js

@@ -34,7 +34,7 @@ describe('Components > AdminContainer', function () {
     it('should render nothing', function () {
       const wrapper = withStore({ project })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.null()
     })
   })
@@ -47,7 +47,7 @@ describe('Components > AdminContainer', function () {
       }
       const wrapper = withStore({ project, user })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.null()
     })
   })
@@ -61,7 +61,7 @@ describe('Components > AdminContainer', function () {
       }
       const wrapper = withStore({ project, user })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.ok()
     })
   })

packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js

@@ -57,7 +57,7 @@ describe('Component > ProjectHomePage', function () {
     render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
     homePage = screen.getByTestId('project-home-page')
     const zooFooter = within(homePage).getByRole('contentinfo')
-    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'Admin Mode' })
+    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'AdminCheckbox.label' })
   })
 
   it('should not render a border for the wrapping Box container', function () {
@@ -123,7 +123,7 @@ describe('Component > ProjectHomePage', function () {
       render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
       homePage = screen.getByTestId('project-home-page')
       const zooFooter = within(homePage).getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     it('should not have a border', function () {
@@ -163,7 +163,7 @@ describe('Component > ProjectHomePage', function () {
       render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
       homePage = screen.getByTestId('project-home-page')
       const zooFooter = within(homePage).getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     after(function () {

packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js

@@ -56,7 +56,7 @@ describe('Component > StandardLayout', function () {
     render(<StandardLayout />, { wrapper: withStore(snapshot)})
     zooHeader = screen.getByRole('banner')
     zooFooter = screen.getByRole('contentinfo')
-    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'Admin Mode' })
+    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'AdminCheckbox.label' })
   })
 
   after(function () {
@@ -157,7 +157,7 @@ describe('Component > StandardLayout', function () {
       render(<StandardLayout />, { wrapper: withStore(snapshot)})
       zooHeader = screen.getByRole('banner')
       zooFooter = screen.getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     it('should show the admin toggle', function () {
@@ -192,7 +192,7 @@ describe('Component > StandardLayout', function () {
       projectPage = screen.getByTestId('project-page')
       zooHeader = screen.getByRole('banner')
       zooFooter = screen.getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     after(function () {

packages/lib-classifier/package.json

@@ -32,10 +32,8 @@
     "graphql": "~16.6.0",
     "graphql-request": "~5.0.0",
     "hash.js": "~1.1.7",
-    "i18next": "~21.10.0",
     "lodash": "~4.17.11",
     "mobx-utils": "~6.0.4",
-    "react-i18next": "~11.18.0",
     "react-player": "~2.11.0",
     "swr": "~1.3.0",
     "valid-url": "~1.0.9"
@@ -46,8 +44,10 @@
     "@zooniverse/react-components": "~1.x.x",
     "grommet": "~2.17.x",
     "grommet-icons": "~4.x.x",
+    "i18next": "21.x.x",
     "react": ">= 16.14",
     "react-dom": ">= 16.14",
+    "react-i18next": "11.x.x",
     "styled-components": "~5.x.x"
   },
   "devDependencies": {
@@ -87,6 +87,7 @@
     "grommet": "~2.27.0",
     "grommet-icons": "~4.8.0",
     "html-webpack-plugin": "~5.5.0",
+    "i18next": "~21.10.0",
     "ignore-styles": "~5.0.1",
     "jsdom": "~20.0.0",
     "mobx": "~6.6.1",
@@ -102,6 +103,7 @@
     "query-string": "~7.1.0",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
+    "react-i18next": "~11.18.0",
     "rosie": "~2.1.0",
     "sinon": "~14.0.0",
     "sinon-chai": "~3.7.0",

packages/lib-classifier/src/components/Classifier/components/MetaTools/MetaTools.spec.js

@@ -43,7 +43,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -92,7 +92,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.getByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -142,7 +142,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -193,7 +193,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Added to favorites'
+        name: 'FavouritesButton.remove'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'

packages/lib-classifier/src/components/Classifier/components/ModalTutorial/ModalTutorial.spec.js

@@ -116,7 +116,7 @@ describe('ModalTutorial', function () {
           wrapper: withStore(store)
         }
       )
-      const closeButton = screen.getByRole('button', { name: 'Close' })
+      const closeButton = screen.getByRole('button', { name: 'CloseButton.close' })
       await user.click(closeButton)
       const upp = store.userProjectPreferences.active
       expect(upp?.preferences.tutorials_completed_at[tutorial.id]).to.equal(seen)
@@ -136,7 +136,7 @@ describe('ModalTutorial', function () {
       )
       let tutorialTitle = screen.getByRole('heading', { level: 2, name: 'ModalTutorial.title' })
       expect(tutorialTitle).to.be.ok()
-      const closeButton = screen.getByRole('button', { name: 'Close' })
+      const closeButton = screen.getByRole('button', { name: 'CloseButton.close' })
       await user.click(closeButton)
       tutorialTitle = screen.queryByRole('heading', { level: 2, name: 'ModalTutorial.title' })
       expect(tutorialTitle).to.be.null()

packages/lib-classifier/webpack.dist.js

@@ -28,8 +28,10 @@ module.exports = {
     '@zooniverse/react-components',
     'grommet',
     'grommet-icons',
+    'i18next',
     'react',
     'react-dom',
+    'react-i18next',
     'styled-components'
   ],
   mode: 'production',

packages/lib-react-components/package.json

@@ -22,10 +22,8 @@
     "@fortawesome/react-fontawesome": "~0.2.0",
     "@tippyjs/react": "~4.2.6",
     "formik": "~2.2.9",
-    "i18next": "~21.10.0",
-    "mime-types": "~2.1.21",
+    "mime": "~3.0.0",
     "prop-types": "~15.8.1",
-    "react-i18next": "~11.18.0",
     "react-progressive-image": "~0.6.0",
     "react-resize-detector": "~7.1.1",
     "react-rnd": "10.3.7",
@@ -42,8 +40,10 @@
     "@zooniverse/grommet-theme": "3.x.x",
     "grommet": "2.17.x",
     "grommet-icons": "4.x.x",
+    "i18next": "21.x.x",
     "react": ">= 16.14",
     "react-dom": ">= 16.14",
+    "react-i18next": "11.x.x",
     "styled-components": "5.x.x"
   },
   "devDependencies": {
@@ -76,6 +76,7 @@
     "enzyme": "~3.11.0",
     "grommet": "~2.27.0",
     "grommet-icons": "~4.8.0",
+    "i18next": "~21.10.0",
     "jsdom": "~20.0.0",
     "lodash": "~4.17.11",
     "mocha": "~10.0.0",
@@ -84,6 +85,7 @@
     "polished": "~4.2.2",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
+    "react-i18next": "~11.18.0",
     "rehype-stringify": "~8.0.0",
     "remark-rehype": "~8.1.0",
     "sinon": "~14.0.0",
@@ -93,6 +95,7 @@
     "style-loader": "~3.3.1",
     "styled-components": "~5.3.3",
     "webpack": "~5.74.0",
+    "webpack-bundle-analyzer": "~4.6.1",
     "webpack-cli": "~4.10.0"
   },
   "engines": {

packages/lib-react-components/src/Media/Media.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import mime from 'mime-types'
+import mime from 'mime/lite'
 import Audio from './components/Audio'
 import ThumbnailImage from './components/ThumbnailImage'
 import Video from './components/Video'
 import { propTypes, defaultProps } from './helpers/mediaPropTypes'
 
+
 export default function Media (props) {
-  const mimeType = mime.lookup(props.src)
+  const mimeType = mime.getType(props.src)
 
   if (mimeType && mimeType.includes('image')) {
     return (

packages/lib-react-components/src/ZooFooter/ZooFooter.stories.js

@@ -1,7 +1,7 @@
 import { linkTo } from '@storybook/addon-links';
 import zooTheme from '@zooniverse/grommet-theme';
 import { Box, Grommet } from 'grommet';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import React from 'react';
 
 import ZooFooter from './ZooFooter';

packages/lib-react-components/src/ZooFooter/helpers/zipLabelsAndUrls/zipLabelsAndUrls.js

@@ -1,4 +1,4 @@
-import { zipWith } from 'lodash'
+import zipWith from 'lodash/zipWith'
 
 export default function zipLabelsAndUrls (labels, urls) {
   return zipWith(labels, urls, zipFunction)

packages/lib-react-components/src/ZooHeader/components/SignedInUserNavigation/SignedInUserNavigation.js

@@ -5,8 +5,10 @@ import { useTranslation } from 'react-i18next'
 import '../../../translations/i18n'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBell as fasBell, faEnvelope as fasEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faBell as farBell, faEnvelope as farEnvelope } from '@fortawesome/free-regular-svg-icons'
+import { faBell as fasBell } from '@fortawesome/free-solid-svg-icons/faBell'
+import { faBell as farBell } from '@fortawesome/free-regular-svg-icons/faBell'
+import { faEnvelope as fasEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope'
+import { faEnvelope as farEnvelope } from '@fortawesome/free-regular-svg-icons/faEnvelope'
 
 import NarrowMainNavMenu from '../NarrowMainNavMenu'
 import NavListItem from '../NavListItem'

packages/lib-react-components/src/helpers/pxToRem.js

@@ -1,13 +1,14 @@
-import _ from 'lodash'
+import isNumber from 'lodash/isNumber'
+import round from 'lodash/round'
 
 const BASE_FONT_SIZE = 15
 
 function pxToRem (px) {
-  if (!_.isNumber(px)) {
+  if (!isNumber(px)) {
     throw new TypeError('Argument for pxToRem must be an integer or float.')
   }
 
-  const converted = _.round((px / BASE_FONT_SIZE), 9)
+  const converted = round((px / BASE_FONT_SIZE), 9)
   return `${converted}rem`
 }
 

packages/lib-react-components/webpack.dist.js

@@ -1,3 +1,4 @@
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const path = require('path')
 
@@ -25,8 +26,10 @@ module.exports = {
     '@zooniverse/grommet-theme': '@zooniverse/grommet-theme',
     grommet: 'grommet',
     'grommet-icons': 'grommet-icons',
+    i18next: 'i18next',
     react: 'react',
     'react-dom': 'react-dom',
+    'react-18next': 'react-i18next',
     'styled-components': 'styled-components'
   },
   output: {
@@ -39,6 +42,8 @@ module.exports = {
     globalObject: `typeof self !== 'undefined' ? self : this`
   },
   plugins: [
+    // uncomment this to build with the bundle analyser.
+    // new BundleAnalyzerPlugin(),
     new CleanWebpackPlugin()
   ],
   resolve: {