Upgrade React version of manager

[shogohida]

Issue: #20378

Signed-off-by: Shogo Hida shogo.hida@gmail.com

What I did

Upgraded React version of manager

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[thebuilder]

This will require a couple of other changes:
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

• render should be changed to use root from createRoot.
• A bunch of TypeScript types are breaking throughout, because children is no longer implicit in React.FC components. https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions
  • This might require upgrading Emotion?

[ndelangen]

@shogohida I'd expect changes here:

storybook/code/ui/manager/src/index.tsx

Lines 80 to 86 in d18331f

	export function renderStorybookUI(domNode: HTMLElement, provider: Provider) {
	if (!(provider instanceof Provider)) {
	throw new Error('provider is not extended from the base Provider');
	}
	ReactDOM.render(<Root key="root" provider={provider} />, domNode);
	}

Or is my assumption incorrect?

[ndelangen]

@shogohida will you be making the required changes @thebuilder mentioned on this PR?

I'm very excited to get storybook's manager UI upgraded to react18! But this will need more work to get merged, and we definitely do not want this be much closer to the release-date; in fact I suspect @shilman might already find it too risky (even though it's the manager, addons could potentially break..?)

Can you tell me your plans for this PR? If you're stuck on anything please reach out to me on Discord. 🙏

[shogohida]

@ndelangen
Thanks for your comment and sorry for keeping you guys waiting for a long time. I will try to work today and tomorrow and if I get stuck, I will reach you on Discord. I'm new to Storybook so it's probable. How should I contact you on Discord?

I was busy with my job and left this issue undone 🙇 Sorry about that.

[ndelangen]

Please don't feel sorry, your efforts are appreciated!

My name is the same on discord, I'm usually online. just ping me.. You can also schedule a meeting with me here:
https://calendly.com/chromaui

[shogohida]

@ndelangen
I made changes. Is my understanding correct?

9dcf29a

[ndelangen]

Related #20402 #17215 #20466

npm lockfiles were removed

[shogohida]

@ndelangen
Should I recover npm lockfiles? I ask this because you dismissed your review.

In addition, I checked failing tests but I don't know how to solve them....

[ndelangen]

Nope the npm lock files were removed, so I deleted the negative review. Perhaps we can ask for help from other contributors?

[shogohida]

Sure! I asked for support on Discord

https://discord.com/channels/486522875931656193/1035683992684478534/threads/1063835517969498192

[shogohida]

I read error messages of failing tests and looked for solutions on Google. I write down notes here from my investigations so that other contributors can easily see what happened.

Notes:

• Failing tests of e2e-sandboxes
  • The error message is locator.waitFor: Target closed
  • It seems they are related to a bug or something of Playwright so I'm not sure if the failing tests of e2e-sandboxes were caused by the changes of this PR.
• Failing tests of cra-bench and react-vite-bench
  • The error message is Too long with no output (exceeded 10m0s): context deadline exceeded
  • This is related to CircleCI settings according to this article
  • I'm not sure if this PR caused test failures.
• Failing tests of storybook-ui
  • The error message is Error: Evaluation failed: Object at ExecutionContext._evaluateInternal (/var/task/capture-v4/build/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:218:19
  • They are related to Puppeteer
  • I don't know how to solve these too

[ndelangen]

If you start storybook on this branch, it simply doesn't render anything at all:
https://635781f3500dd2c49e189caf-ltllzjqyji.chromatic.com/

[virtuoushub]

fwiw, I think this can be moved into devDependencies

[virtuoushub]

Not 💯% on this as I have not tested it out myself, but after reading this comment, I think this PR might benefit from a similar approach to #21197

[valentinpalkovic]

Closing in favour of #21673