chore(fxa-react): update jest and storybook to support CRA-style importing SVGs as a component

packages/fxa-react/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
   },
   moduleNameMapper: {
     '\\.(css|scss)$': 'identity-obj-proxy',
+    '^.+\\.svg$': '<rootDir>/svg-transform.js',
   },
   testPathIgnorePatterns: ['/dist/', '/node_modules/'],
 };

packages/fxa-react/package.json

@@ -40,6 +40,7 @@
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.2",
     "@testing-library/user-event": "^10.0.2",
+    "@types/camelcase": "5.2.0",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.13.0",
     "@types/prettier": "2.0.1",
@@ -49,6 +50,7 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
+    "camelcase": "^6.0.0",
     "eslint": "^6.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.3.0",

packages/fxa-react/storybooks.js

@@ -29,6 +29,17 @@ const customizeWebpackConfig = ({ config, mode }) => {
   });
   config.resolve.extensions.push('.scss', '.css');
 
+  const assetRule = config.module.rules.find(({ test }) => test.test('.svg'));
+  const assetLoader = {
+    loader: assetRule.loader,
+    options: assetRule.options || assetRule.query,
+  };
+  config.module.rules.unshift({
+    test: /\.svg$/,
+    use: ['@svgr/webpack', assetLoader],
+  });
+  config.module.rules = [{ oneOf: config.module.rules }];
+
   config.resolve.alias = Object.assign(
     config.resolve.alias,
     additionalJSImports

packages/fxa-react/svg-transform.js

@@ -0,0 +1,32 @@
+// This transformer was lifted directly from create-react-app and is
+// needed so we can write components that import SVGs as ReactComponents
+// https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/jest/fileTransform.js
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+    const pascalCaseFilename = camelcase(path.parse(filename).name, {
+      pascalCase: true,
+    });
+    const componentName = `Svg${pascalCaseFilename}`;
+    return `const React = require('react');
+    module.exports = {
+      __esModule: true,
+      default: ${assetFilename},
+      ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+        return {
+          $$typeof: Symbol.for('react.element'),
+          type: 'svg',
+          ref: ref,
+          key: null,
+          props: Object.assign({}, props, {
+            children: ${assetFilename}
+          })
+        };
+      }),
+    };`;
+  },
+};

packages/fxa-settings/tailwind.config.js

@@ -1,6 +1,14 @@
 module.exports = {
   purge: {
-    content: ['./src/**/*.tsx', './public/index.html'],
+    content: [
+      './src/**/*.tsx',
+      './public/index.html',
+      // TODO: This will scan for classes used in all shared
+      // components and include them in the output. This should
+      // really only be scanning in the components being used
+      // in this settings project.
+      '../fxa-react/components/**/*.tsx',
+    ],
     whitelist: [],
   },
   theme: {

yarn.lock

@@ -4599,6 +4599,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/camelcase@npm:5.2.0":
+  version: 5.2.0
+  resolution: "@types/camelcase@npm:5.2.0"
+  dependencies:
+    camelcase: "*"
+  checksum: 3/a1b52363f2ba58144cd9c1f6ccdc490be1829b2809cc34ecc12fcfc7ac029aece9b0eaeb02531f9ee56c646c3d8d552de6fbcc98cae8b64b6fc6864d5c628520
+  languageName: node
+  linkType: hard
+
 "@types/caseless@npm:*":
   version: 0.12.2
   resolution: "@types/caseless@npm:0.12.2"
@@ -10343,6 +10352,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelcase@npm:*, camelcase@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "camelcase@npm:6.0.0"
+  checksum: 3/d92305180bc2041141cc0c889ee54d14f90b16365dc7c01eabe6d54e913eb8011313f98dde3025ae11f0003b601ba320f56ee56db476c64060cf2305bf7f6f2a
+  languageName: node
+  linkType: hard
+
 "camelcase@npm:5.0.0":
   version: 5.0.0
   resolution: "camelcase@npm:5.0.0"
@@ -10385,13 +10401,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "camelcase@npm:6.0.0"
-  checksum: 3/d92305180bc2041141cc0c889ee54d14f90b16365dc7c01eabe6d54e913eb8011313f98dde3025ae11f0003b601ba320f56ee56db476c64060cf2305bf7f6f2a
-  languageName: node
-  linkType: hard
-
 "camelize@npm:1.0.0":
   version: 1.0.0
   resolution: "camelize@npm:1.0.0"
@@ -17308,6 +17317,7 @@ fsevents@^1.2.7:
     "@testing-library/jest-dom": ^5.5.0
     "@testing-library/react": ^10.0.2
     "@testing-library/user-event": ^10.0.2
+    "@types/camelcase": 5.2.0
     "@types/jest": ^25.2.1
     "@types/node": ^13.13.0
     "@types/prettier": 2.0.1
@@ -17317,6 +17327,7 @@ fsevents@^1.2.7:
     babel-eslint: ^10.1.0
     babel-loader: ^8.1.0
     babel-preset-react-app: ^9.1.2
+    camelcase: ^6.0.0
     eslint: ^6.8.0
     fxa-content-server: "workspace:*"
     fxa-shared: "workspace:*"