TypeScript: Re-structure types for frameworks and presets

[ndelangen]

What I did

after discussion on #18432

• I ensured types flow from:
  core-common ➔ core-webpack ➔ preset-react-webpack ➔ react-webpack5
  And did this for all presets and frameworks.
  At each level customizations are made to make types more strict
• Added a framework.options.builder field, which is equal to core.builder.options
  This way users of a framework don't have to specify a builder if they want to configure something in the framework

DEMO:

Screen.Recording.2022-06-17.at.16.39.21.mov

I also changed all the main.JS files of all examples into a main.TS file and ensured it uses the type from the framework is for.

I removed the 6-0 and 7-0 types in renderers.

I changed all stories and example code to deal with the change in 7.0 where what used to be Story is now StoryFn

I reorganized the renderers and frameworks to be simpler, and more in sync with each other. (there's still some work to do here actually.
To be precise, it seems the types for react are way, WAY better.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 83759ea. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=8 --max-parallel=15 -- --reset --optimized

---

Sent with 💌 from NxCloud.

[ndelangen]

I'm thinking we should rename /types to something else.

Maybe /config?

[tmeasday]

Can you update examples to show how this is used?

[ndelangen]

@tmeasday I did update the examples' main.ts if needed, but most of them didn't change all that much:

storybook/examples/official-storybook/main.ts

Lines 2 to 4 in cc4a40b

	import type { StorybookConfig } from '@storybook/react-webpack5/types';
	const config: StorybookConfig = {

storybook/examples/react-ts/.storybook/main.ts

Lines 1 to 3 in cc4a40b

	import type { StorybookConfig } from '@storybook/react-webpack5/types';
	const config: StorybookConfig = {

storybook/examples/cra-ts-essentials/.storybook/main.ts

Lines 1 to 5 in cc4a40b

	import type { StorybookConfig } from '@storybook/react-webpack5/types';
	const path = require('path');
	const mainConfig: StorybookConfig = {

@tmeasday I'm working on a PR where I migrate all examples to use main.ts to ensure all these types from frameworks work.

[ndelangen]

@shilman please re-review?

[shilman]

Generally looks great. A couple of nitpicks. Sorry for the slow review!

[shilman]

How does this get associated with any of the config types? Or is that not necessary?

[ndelangen]

It gets composed here:

storybook/frameworks/svelte-webpack5/src/types.ts

Lines 15 to 17 in 63460cf

	export type FrameworkOptions = SvelteOptions & {
	builder?: BuilderOptions;
	};

[shilman]

Looking good! Merging this