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.

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

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: a9bb6defef2dba9cce0ce81b5dff2b8b8a9c36ae

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[bot]]

👷 Deploy request for paste-docs pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0962676be4ae53b000bf8cc2790b349ad9a1aec7

[netlify[bot]]

✅ Deploy Preview for paste-theme-designer ready!

Name	Link
🔨 Latest commit	0962676be4ae53b000bf8cc2790b349ad9a1aec7
🔍 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[bot]]

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 0962676be4ae53b000bf8cc2790b349ad9a1aec7:

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.]

[TheSisb]

We need to upgrade our underlying Modal library for React 18 support https://github.com/reach/reach-ui/issues/972