feat: automatically import and define Calcite Components when importi…

…ng their React wrapper (#7185)

**Related Issue:** #6601

## Summary

Automatically imports and defines Calcite Components when importing the
React wrappers. For example, here is a snippet from our React sample:

```jsx
import '@esri/calcite-components/dist/components/calcite-button';
import '@esri/calcite-components/dist/components/calcite-icon';
import '@esri/calcite-components/dist/components/calcite-slider';
import { CalciteButton, CalciteIcon, CalciteSlider } from '@esri/calcite-components-react';
```

The above snippet can now be simplified to the following:

```jsx
import { CalciteButton, CalciteIcon, CalciteSlider } from '@esri/calcite-components-react';
```

### Note

I had to patch the build because Stencil was generating an incorrect
import path to the JSX type. I tested in our old output targets repo and
it reproduced there as well, so this isn't related to the monorepo
change.

packages/calcite-components-react/package.json

@@ -5,10 +5,11 @@
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
-    "build": "rimraf dist && npm run compile",
+    "build": "rimraf dist && npm run util:patch-jsx-import && npm run compile",
     "clean": "rimraf dist node_modules .turbo",
     "compile": "npm run tsc",
-    "tsc": "tsc"
+    "tsc": "tsc",
+    "util:patch-jsx-import": "ts-node --esm ./support/patchImportPathJSX.ts"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",

packages/calcite-components-react/support/patchImportPathJSX.ts

@@ -0,0 +1,22 @@
+// patch needed due to Stencil creating the wrong import path to the JSX type
+(async function () {
+  const {
+    promises: { readFile, writeFile }
+  } = await import("fs");
+  const { resolve } = await import("path");
+
+  try {
+    const filePath = resolve(__dirname, "..", "src", "components.ts");
+    const contents = await readFile(filePath, { encoding: "utf8" });
+    await writeFile(
+      filePath,
+      contents.replace(
+        "import type { JSX } from '@esri/calcite-components/dist/components'",
+        "import type { JSX } from '@esri/calcite-components'"
+      )
+    );
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+})();

packages/calcite-components-react/tsconfig.json

@@ -7,7 +7,7 @@
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "lib": ["dom", "es2015"],
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "noImplicitAny": true,
     "noImplicitReturns": true,

packages/calcite-components/package.json

@@ -78,7 +78,7 @@
     "@esri/eslint-plugin-calcite-components": "0.2.2",
     "@stencil-community/eslint-plugin": "0.5.0",
     "@stencil/postcss": "2.1.0",
-    "@stencil/react-output-target": "0.4.0",
+    "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.4",
     "@stencil/state-tunnel": "1.0.1"
   },

packages/calcite-components/stencil.config.ts

@@ -84,7 +84,9 @@ export const create: () => Config = () => ({
     reactOutputTarget({
       componentCorePackage: "@esri/calcite-components",
       proxiesFile: "../calcite-components-react/src/components.ts",
-      excludeComponents: ["context-consumer"]
+      excludeComponents: ["context-consumer"],
+      customElementsDir: "dist/components",
+      includeImportCustomElements: true
     }),
     { type: "dist-hydrate-script" },
     { type: "dist-custom-elements", autoDefineCustomElements: true },