Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build: add React18 Support #2682

Merged

Conversation

andreasonny83
Copy link
Collaborator

@andreasonny83 andreasonny83 commented Sep 20, 2022

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
Copy link

changeset-bot bot commented Sep 20, 2022

⚠️ 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
Copy link

netlify bot commented Sep 20, 2022

👷 Deploy request for paste-docs pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 0962676

@netlify
Copy link

netlify bot commented Sep 20, 2022

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

QR Code

Use your smartphone camera to open QR code link.

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

@andreasonny83 andreasonny83 marked this pull request as draft September 20, 2022 12:58
@andreasonny83 andreasonny83 force-pushed the feat/react-18 branch 3 times, most recently from bb423f1 to 3d83a3a Compare September 20, 2022 14:04
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 20, 2022

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
Copy link
Contributor

TheSisb commented Sep 20, 2022

Hey @andreasonny83, thanks for taking this initiative!

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

image

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

@andreasonny83 andreasonny83 marked this pull request as ready for review September 20, 2022 19:14
@andreasonny83 andreasonny83 requested a review from a team as a code owner September 20, 2022 19:14
Copy link
Contributor

@espipj espipj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -21,7 +21,7 @@ export interface InputBoxProps {
variant?: Variants;
}

const InputBox = React.forwardRef<HTMLDivElement, InputBoxProps>(
const InputBox = React.forwardRef<HTMLDivElement, React.PropsWithChildren<InputBoxProps>>(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@espipj espipj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@andreasonny83 andreasonny83 force-pushed the feat/react-18 branch 3 times, most recently from 60ac295 to 0162753 Compare September 22, 2022 17:20
@TheSisb
Copy link
Contributor

TheSisb commented Oct 24, 2022

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

@andreasonny83 andreasonny83 marked this pull request as draft October 27, 2022 15:20
@TheSisb TheSisb closed this Oct 27, 2022
@TheSisb TheSisb reopened this Oct 27, 2022
@andreasonny83 andreasonny83 changed the base branch from main to feat/react-18 November 30, 2022 14:13
@andreasonny83 andreasonny83 changed the base branch from feat/react-18 to main November 30, 2022 14:14
@andreasonny83 andreasonny83 changed the base branch from main to feat/react-18-new November 30, 2022 14:19
Update packages dependencies to include React v18
Add React.PropsWithChildren for compatibility with React v18
@andreasonny83 andreasonny83 marked this pull request as ready for review November 30, 2022 17:45
@andreasonny83 andreasonny83 merged commit d390325 into twilio-labs:feat/react-18-new Nov 30, 2022
andreasonny83 added a commit that referenced this pull request Jan 3, 2023
* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>
espipj added a commit to espipj/paste that referenced this pull request Jan 4, 2023
* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (twilio-labs#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (twilio-labs#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>
Niznikr pushed a commit that referenced this pull request Jan 20, 2023
* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>
Niznikr pushed a commit that referenced this pull request Feb 9, 2023
* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>
Niznikr pushed a commit that referenced this pull request Feb 9, 2023
* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>
Niznikr pushed a commit that referenced this pull request Feb 10, 2023
* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>
SiTaggart pushed a commit that referenced this pull request Feb 22, 2023
* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>
SiTaggart pushed a commit that referenced this pull request Feb 22, 2023
* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>
SiTaggart added a commit that referenced this pull request Feb 22, 2023
* build: add React18 Support (#2682)

* build: add React18 Support

Update packages dependencies to include React v18

* refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18

* chore: update React version on missing packages

* fix: added newer proptypes types (react 18) (#3)

* refactor(yarn.lock): update yarn.lock file

* chore: update eslint and React versions

* chore: fixing eslint issues

* WIP: Fix react fc typings (#5)

* fix: un-needed React.FC typing with no children

* fix: removing unknown from interface PropsWithChildren as not needed

* fix: types on the rest of the files

* fix(components): radio and button-group React18 fix

* fix: update React app tests

Co-authored-by: Pablo Espinosa <[email protected]>

* chore: upgrade react-helmet types

* [AIONAPFMWK-174]: refactor react-uid & React 18 useId (#2903)

* chore: added useUIDSeed custom using React useId method

(cherry picked from commit d39cdc9)

* fix: update yarn.lock file

* fix: react type version and include prop-type types (#2913)

* chore: upgraded @react-spring (#2914)

* fix: fix functionality of useUIDSeed and update tests (#2917)

* [AIONAPFMWK-170] Types Fix (#2915)

* chore: WIP updates on react 18  (#2868)

* chore: upgrade emotion libs

* chore: upgrade react-spring for animation lib

This reverts commit 62d59e8.

* chore: remove obsolete react imports

* chore: remove more react imports

* chore: fix types in TableOfContentsList (Scrollspy)

* chore: disable eslint rule for react imports

* chore: fix lint error

* chore: auto-fix lint warnings

* chore: removing un-used imports

Co-authored-by: Eirini Pappa <[email protected]>
Co-authored-by: Eirini Pappa <[email protected]>

* fix: added back missing import (#2921)

* chore: update Storybook to v7 and use Vite (#2895) (#2922)

* chore: update to Storybook v7

* chore: remove old babel plugins

* chore: update to use vite

* fix: address build issue

* refactor: use TypeScript for SB files

* fix: gets builds to work

* fix: disable Chromatic on gatsby stories

* fix: mock gatsby exports

* refactor: output generic tokens as esm

* chore: add changeset

* ci: bump memory

* fix: remove barrel imports of prop-types

* fix: chat-log story structure

* chore: update changeset

* chore: update storybook

* docs: add comments

* fix: get env vars properly in vite

* fix: set profiling alias properly

* chore: update changeset

* chore: use separate changeset for tokens

* chore: include mainFields

* fix: only set mainFields for dev

* chore: remove flag

* fix: adjust test-storybook

* fix: wait for SB to load

* chore: delete empty package.json

* fix: don't use mainFields for test-runner

Co-authored-by: Robert Niznik <[email protected]>

* fix: react 18 - fix reakit ssr issues with portals (#2926)

* fix: reakit ssr issues with portals

* chore: more detailed comments at top of reakti Portal file

* chore: remove unecessary exports from reakit library

* feat/react 18 fix tests for 16 and 17 (#2929)

* fix: broken tests with jest

* fix: update all '@testing-library/react-hooks' imports

* build: create new test directory with util methods to help with jest tests

* chore: linting update on test files

* chore: empty commit to test pipelines

* chore: re-introduce button tests

* chore: minor update to test pipelines

* fix: remove cache from pipelines

* fix: async issues with tooltip tests

* fix: additional async tests added for updated userEvent methods

* chore: trigger pipelines with empty commit

* fix: resolve remaining tests for react 18

* fix: re-introduce react import on paste-website files

* fix: increase timeout on failing test

* chore: split composable cell test into smaller tests

* fix: address issues with user event and fix root.render errors

* fix: react-dom tests

* chore: fix test using reactUID

* chore: add react 17 tests to github workflow

* chore: update comments and create react-dom monkey patch

* fix: fix broken tests from react dom patch

* chore: update react-dom helper method for tests

* chore: remove async from synchronous test

* chore: linting updates on tests

* feat: add react 18 as dependency on new components (#2941)

* fix: add react 18 as dependency on new packages

* fix: add disclaimer at top of yarn lock

* chore: upgrade react and react-router-dom in cra template (#2944)

* chore: ignore tsx check on react imports marked as unused (#2945)

* fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933)

* fix: betaBadge to show modal on useEffect, fixes hydration problem

* fix: storybook quiet mode script introduced here #230

* fix: prevent select showing options server-side which leads to hydration issues

* fix: using styled on Nextjs Link component (hydration issue)

* revert: adam fix reakit Portal #2926

* fix: use @niznikr/reakit for portal fix

* chore: update prettier format

* fix: get gatsby to build

* fix: update lockfile

* fix: delete old changesets

* fix: address dep issue

* fix: update snapshot

* fix: update comment style

* fix: ignore lint issues for patches

* chore: updates from rebase

* chore: upgrade to next 13 to fix hydration errors

* chore: fix date rendering

* chore: add changeset

* chore: add sharp

* chore: fix dep pins

* chore: remove resolution

* chore: pin versions

* chore: undo mock changes

* chore: update lock

* chore: update changeset

* chore: update forked reakit

* ci: wait for docsearch render

* fix: correct copy button double render

* ci: bump wait for double render

* chore: update reakit to include popover render fix

* chore: add changeset

* chore: switch to twilio namespaced reakit fork

* chore: new website image fix to be updated to next 13

* chore: update upgrade-guide.mdx

* fix: missing props with children type conversion

---------

Co-authored-by: Andrea Z <[email protected]>
Co-authored-by: Pablo Espinosa <[email protected]>
Co-authored-by: Andrea Z <[email protected]>
Co-authored-by: adamb-92 <[email protected]>
Co-authored-by: Eirini Pappa <[email protected]>
Co-authored-by: Eirini Pappa <[email protected]>
Co-authored-by: Si Taggart <[email protected]>
Co-authored-by: TheSisb <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants