Calcite Components React should auto import web component

[am-maneaters]

Summary

Having to import components twice in the React wrapper adds extra complexity to using the package.
i.e.

import '@esri/calcite-components/dist/components/calcite-notice';
import { CalciteNotice } from "calcite-components-react";

Intellisense in VSCode knows to auto import the CalciteNotice when I use it in JSX, but then I have to manually include web-component import as well. I've resorted to having a single file where I import every calcite component import that I just include in my index file.

Desired Outcome

Since the react wrappers are already generated using a set of scripts, we could extend those scripts or write a secondary script that auto attaches calcite-component imports to the respective calcite-components-react component.

import { CalciteNotice } from "calcite-components-react";

I have a local version of this working using dynamic imports in the createComponent.js file that is included in the stencil-react-output-target.

Resources

the way i implemented this was at this line, i added

import(`../../../calcite-components/dist/components/${tagName}`)

oh, or probably could just use this? https://stenciljs.com/docs/react#includeimportcustomelements

[jcfranco]

oh, or probably could just use this? https://stenciljs.com/docs/react#includeimportcustomelements

Great suggestion. Enabling this will make the wrappers behave closer to the custom-elements output target. cc @benelan

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in the example repo's App.js with 1.5.0-next.11 with the following imports:

import React, { useState } from 'react';
import { CalciteButton, CalciteIcon, CalciteSlider } from '@esri/calcite-components-react';
import '@esri/calcite-components/dist/calcite/calcite.css';