build: add React18 Support

[andreasonny83]

Update packages dependencies to include React v18

Contributing to Twilio

All third-party contributors acknowledge that any contributions they provide will be made under the same open-source license that the open-source project is provided under.

• I acknowledge that all my contributions will be made under the project's license.

[changeset-bot]

⚠️ No Changeset found

Latest commit: a9bb6de

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

👷 Deploy request for paste-docs pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0962676

[netlify]

✅ Deploy Preview for paste-theme-designer ready!

Name	Link
🔨 Latest commit	0962676
🔍 Latest deploy log	https://app.netlify.com/sites/paste-theme-designer/deploys/635b980dda32460008a78930
😎 Deploy Preview	https://deploy-preview-2682--paste-theme-designer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0962676:

Sandbox	Source
@twilio-paste/nextjs-template	Configuration
@twilio-paste/token-contrast-checker	Configuration

[TheSisb]

Hey @andreasonny83, thanks for taking this initiative!

Heads up, our @twilio-paste/uid-library may fail in React 18:

The good news is that we wrap react-uid in our own uid-library package, so we can fix this is a non-breaking patch change by changing what we export to something like this:

const useUID = React.useId; // Use react 18's useId() hook
const useUIDSeed = (item: any) => React.useId(); // Function that calls React useId();
const UIDFork = ({children}) => <>{children}</>; // Do nothing
const uid = (item: any, index?: number) => React.useId(); // Just use React.useId() again

I think this would just work, but we'd need to verify in tests and our website/storybook builds.

[Note: I didn't check our other libraries for React 18 support. This is the only one I'm aware of at this time not supporting React 18 well.]

[espipj]

Prefix and Suffix files also need changing in L17 to be:
const Prefix = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PrefixProps>>(
path: packages/paste-core/components/input-box/src/Prefix.tsx

Still a problem in props like insertAfter in InputBox....

[espipj]

As we're using React.PropsWithChildren InputBox will have already the children prop. No need to define children on the InputBoxProps L11

[espipj]

Btw running yarn install with a clean project has updated my yarn.lock file... which I guess is because it needs to be updated in the repo too... 😃

[TheSisb]

We need to upgrade our underlying Modal library for React 18 support reach/reach-ui#972