Bump modular to v2.3.0 (jpmorganchase#29)

.yarn/patches/modular-scripts-npm-2.3.0-465a9ac751.patch

@@ -0,0 +1,120 @@
+diff --git a/dist-cjs/build/buildPackage/makeBundle.js b/dist-cjs/build/buildPackage/makeBundle.js
+index ec658b3e7d3e05e99e8f4f547da1597cf6b7c709..7034d70b567b5bae13a8c986187232ed1c1bd213 100644
+--- a/dist-cjs/build/buildPackage/makeBundle.js
++++ b/dist-cjs/build/buildPackage/makeBundle.js
+@@ -25,6 +25,8 @@ var _rollupPluginPostcss = _interopRequireDefault(require("rollup-plugin-postcss
+
+ var _pluginNodeResolve = _interopRequireDefault(require("@rollup/plugin-node-resolve"));
+
++var _swcPlugin = require("swc-plugin");
++
+ var _getPackageEntryPoints = require("./getPackageEntryPoints");
+
+ var _getPrefixedLogger = _interopRequireDefault(require("../../utils/getPrefixedLogger"));
+@@ -90,7 +92,7 @@ async function makeBundle(packageName, preserveModules, includePrivate) {
+       mainFields: ['module', 'main', 'browser']
+     }), (0, _pluginCommonjs.default)({
+       include: /\/node_modules\//
+-    }), (0, _rollupPluginEsbuild.default)({
++    }), (0, _swcPlugin.swc)(), (0, _rollupPluginEsbuild.default)({
+       target,
+       minify: false,
+       include: [`packages/**/*`],
+diff --git a/dist-cjs/check/verifyWorkspaceDependencies.js b/dist-cjs/check/verifyWorkspaceDependencies.js
+index 89555c78426ac0c1a8a00089980ef6f121a50be8..615a4c7ce750a7f4d8783441eeb09932c9bb3508 100644
+--- a/dist-cjs/check/verifyWorkspaceDependencies.js
++++ b/dist-cjs/check/verifyWorkspaceDependencies.js
+@@ -40,11 +40,6 @@ async function check() {
+       valid = false;
+     }
+
+-    if (!packageInfo.location.startsWith('packages')) {
+-      logger.error(`${packageName} is not located within the "/packages" directory in the repository, instead found "${packageInfo.location}"`);
+-      valid = false;
+-    }
+-
+     if (!(0, _isModularType.isValidModularType)(path.join(modularRoot, packageInfo.location))) {
+       logger.error(`${packageName} at ${packageInfo.location} is not a valid modular type - Found ${(0, _isModularType.getModularType)(packageInfo.location)}`);
+       valid = false;
+diff --git a/dist-cjs/test/config.js b/dist-cjs/test/config.js
+index e749e90effe0a80a259a099ac4e3448a42a565ac..ad2ccb7811fff085bfe8b8da4569dbe176cdd2e6 100644
+--- a/dist-cjs/test/config.js
++++ b/dist-cjs/test/config.js
+@@ -46,7 +46,9 @@ function createJestConfig(cliOptions) {
+     resetMocks: false,
+     transform: {
+       '^.+\\.(js|jsx|mjs|cjs)$': [require.resolve('babel-jest'), {
+-        presets: [require.resolve('babel-preset-react-app')]
++        presets: [[require.resolve('babel-preset-react-app'), {
++          runtime: 'automatic'
++        }]]
+       }],
+       '^.+\\.(ts|tsx)$': require.resolve('ts-jest'),
+       '^.+\\.(css|scss)$': require.resolve('jest-transform-stub'),
+diff --git a/dist-cjs/typecheck.js b/dist-cjs/typecheck.js
+index ef28f3b376629051fcd846b6a2f90738885036b9..12847cf2dc4828e2264d615f6dbf55467ecf0c8c 100644
+--- a/dist-cjs/typecheck.js
++++ b/dist-cjs/typecheck.js
+@@ -34,7 +34,7 @@ async function typecheck() {
+     ...rest
+   } = typescriptConfig;
+   const tsConfig = { ...rest,
+-    exclude: ['node_modules', 'bower_components', 'jspm_packages', 'tmp', '**/dist-types', '**/dist-cjs', '**/dist-es', 'dist'],
++    exclude: ['node_modules', 'bower_components', 'jspm_packages', 'tmp', '**/dist-types', '**/dist-cjs', '**/dist-es', 'dist', ...(Array.isArray(rest.exclude) ? rest.exclude : [])],
+     compilerOptions: {
+       noEmit: true
+     }
+diff --git a/dist-cjs/utils/getPackageMetadata.js b/dist-cjs/utils/getPackageMetadata.js
+index 4f6555e3988e6a229a64e2c429107e0f62526d39..20f0095a556a1ce68ff586823d372887b79e3446 100644
+--- a/dist-cjs/utils/getPackageMetadata.js
++++ b/dist-cjs/utils/getPackageMetadata.js
+@@ -73,7 +73,7 @@ async function getPackageMetadata() {
+   Object.assign(typescriptConfig, configObject, {
+     // TODO: should probably include the original exclude in this
+     exclude: distinct([// all TS test files, regardless whether co-located or in test/ etc
+-    '**/*.stories.ts', '**/*.stories.tsx', '**/*.spec.ts', '**/*.test.ts', '**/*.e2e.ts', '**/*.spec.tsx', '**/*.test.tsx', '**/__tests__', '**/dist-cjs', '**/dist-es', '**/dist-types', // TS defaults below
++    '**/*.spec.ts', '**/*.test.ts', '**/*.e2e.ts', '**/*.spec.tsx', '**/*.test.tsx', '**/__tests__', '**/dist-cjs', '**/dist-es', '**/dist-types', // TS defaults below
+     'node_modules', 'bower_components', 'jspm_packages', 'tmp', // Casting so that configObject.exclude is set to the correct typing
+     // Since configObject is a index type all values are "any" implicitly.
+     ...(configObject.exclude || [])])
+diff --git a/react-scripts/config/paths.js b/react-scripts/config/paths.js
+index 5587b7cda8a2841b4fd7c2950127cc3a102f3f19..905456cb8e02b32b4f105da274a3d4d72ddca440 100644
+--- a/react-scripts/config/paths.js
++++ b/react-scripts/config/paths.js
+@@ -88,6 +88,9 @@ module.exports = {
+   appSrc: resolveApp('src'),
+   modularSrc: [
+     resolveModular('packages'),
++	resolveModular('playground'),
++	resolveModular('tooling'),
++	resolveModular('docs'),
+     resolveModular('node_modules/.modular'),
+   ],
+   appTsConfig: resolveApp('tsconfig.json'),
+diff --git a/react-scripts/config/webpack.config.js b/react-scripts/config/webpack.config.js
+index ff26a93f3b6a935e51c35817c01c00e88dd80b71..d0ceebc21e2a5b62e8bbc1c7a3eb841cd99a9916 100644
+--- a/react-scripts/config/webpack.config.js
++++ b/react-scripts/config/webpack.config.js
+@@ -534,6 +534,9 @@ module.exports = function (webpackEnv) {
+             : undefined,
+         ),
+       ),
++      new webpack.ProvidePlugin({
++        React: 'react',
++      }),
+       // Inlines the webpack runtime script. This script is too small to warrant
+       // a network request.
+       // https://github.com/facebook/create-react-app/issues/5358
+diff --git a/tsconfig.json b/tsconfig.json
+index 43e147d2a1993eaa3f405000fa984b9373eb3498..389493ab49f16f533aa75c289c275902a5d4c5ad 100644
+--- a/tsconfig.json
++++ b/tsconfig.json
+@@ -15,7 +15,7 @@
+     "resolveJsonModule": true,
+     "isolatedModules": true,
+     "noEmit": true,
+-    "jsx": "react",
++    "jsx": "react-jsx",
+     "sourceMap": true
+   }
+ }

docs/components/TextAlignBlock.tsx

@@ -7,7 +7,7 @@ export const TextAlignBlock = ({ textAlign }: { textAlign: string }) => {
     <>
       <div
         className="TextAlignBlock-cell"
-        style={{ textAlign: `var(${textAlign})` } as CSSProperties}
+        style={{ textAlign: `var(${textAlign})` as CSSProperties["textAlign"] }}
       >
         T
       </div>

package.json

@@ -100,7 +100,6 @@
     "classnames": "^2.2.6",
     "clipboard-copy": "^4.0.1",
     "compute-scroll-into-view": "^1.0.16",
-    "cross-env": "^7.0.3",
     "css-validator": "^0.10.0",
     "csstree-validator": "^3.0.0",
     "cypress": "^9.4.1",
@@ -111,18 +110,17 @@
     "deepmerge": "^4.2.2",
     "del": "^6.0.0",
     "dom-accessibility-api": "^0.5.10",
-    "eslint-config-modular-app": "2.0.2",
+    "eslint-config-modular-app": "2.0.3",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-storybook": "^0.5.5",
     "glob": "^7.1.6",
     "is-ci": "^3.0.0",
-    "modular-scripts": "patch:modular-scripts@npm:2.2.0#.yarn/patches/modular-scripts-npm-2.2.0-fb4e9ac3bd.patch",
+    "modular-scripts": "patch:modular-scripts@npm:2.3.0#.yarn/patches/modular-scripts-npm-2.3.0-465a9ac751.patch",
     "no-scroll": "^2.1.1",
     "package-build-stats": "patch:package-build-stats@npm:7.3.6#.yarn/patches/package-build-stats-npm-7.3.6-f434c8c1a5.patch",
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
-    "react-codemod": "^5.4.3",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-fast-compare": "^3.2.0",
@@ -133,7 +131,7 @@
     "svgo": "^2.3.0",
     "tinycolor2": "^1.4.2",
     "ts-node": "^10.4.0",
-    "typescript": "4.4.3",
+    "typescript": "4.6.2",
     "vite": "^2.7.13",
     "vite-plugin-istanbul": "^2.4.0",
     "vite-plugin-optimize-persist": "^0.1.2",
@@ -142,7 +140,7 @@
     "warning": "^4.0.3"
   },
   "resolutions": {
-    "esbuild": "0.14.2",
+    "esbuild": "0.14.22",
     "colors": "1.4.0"
   },
   "browserslist": {

packages/lab/src/tokenized-input/internal/useResizeObserver.ts

@@ -36,6 +36,7 @@ export function useResizeObserver<Element extends HTMLElement>(
           contentRect: ref.current.getBoundingClientRect(),
           borderBoxSize: [],
           contentBoxSize: [],
+          devicePixelContentBoxSize: [],
         },
       ]);
     }

tooling/swc-plugin/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "swc-plugin",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@swc/core": "^1.2.160",
+    "rollup": "2.67.2"
+  }
+}

tooling/swc-plugin/src/index.js

@@ -0,0 +1,32 @@
+const { transform } = require("@swc/core");
+const path = require("path");
+
+const swc = () => ({
+  name: "swc",
+  async transform(code, filename) {
+    const ext = path.extname(filename);
+    const options = {
+      filename,
+      sourceMaps: true,
+      jsc: {
+        target: "es2022",
+        parser: {
+          syntax: "typescript",
+          tsx: true,
+        },
+        transform: {
+          react: {
+            runtime: "automatic",
+          },
+        },
+      },
+    };
+
+    if ([".jsx", ".tsx", ".js", ".ts"].includes(ext)) {
+      return transform(code, options);
+    }
+    return { code, map: null };
+  },
+});
+
+module.exports = { swc };

tooling/theme-editor/src/header/ThemeHeader.tsx

@@ -1,14 +1,14 @@
 import { ReactElement, useMemo, useState } from "react";
+import { Button } from "@brandname/core";
 import {
-  Button,
   CloneIcon,
   DownloadIcon,
   MicroMenuIcon,
   RedoIcon,
   RefreshIcon,
   UndoIcon,
   UploadIcon,
-} from "@brandname/core";
+} from "@brandname/icons";
 import {
   CascadingMenu,
   Dropdown,

tooling/theme-editor/src/tokens/toggles/JumpToTokenButton.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
-import { Button, AddDocumentIcon } from "@brandname/core";
+import { Button } from "@brandname/core";
+import { AddDocumentIcon } from "@brandname/icons";
 
 import {
   UITK_CHARACTERISTICS,

tsconfig.json

@@ -3,6 +3,13 @@
   "compilerOptions": {
     "noImplicitAny": true
   },
-  "include": ["modular", "packages/*/src", "integration/toolkit", "stories"],
+  "include": [
+    "modular",
+    "packages",
+    "integration/toolkit",
+    "docs",
+    "tooling",
+    "playground"
+  ],
   "exclude": ["**/*.cy.*", "**/*.spec.*", "**/*.test.*"]
 }