[Tracking] Typesafe CSF factories

[kasperpeulen]

Tracking issue to implement the following RFC::
#30112

Create a react POC

Preview Give feedback

1. API: Implement defineConfig that takes a ProjectAnnotations and produces a PreviewConfig
2. API: Implement the meta method on PreviewConfig that takes a ComponentAnnotations and produces a "Meta" (?)
3. API: Implement the story method on "Meta" that takes a StoryAnnotations and produces a Story
4. Runtime: Make sure that defineConfig composes config internally based on the content of the addons field
5. Adapt getProjectAnnotations in code/builders/builder-vite/src/codegen-modern-iframe-script.ts
6. Adapt getProjectAnnotations in code/builders/builder-webpack5/templates/virtualModuleModernEntry.js
7. Adapt processCSFFile in code/core/src/preview-api/modules/store/csf/processCSFFile.ts to handle CSF4 files
8. Adapt code/core/src/csf-tools/CsfFile.ts to handle CSF factories #30169
   +0
   
9. Adapt code/core/src/csf-tools/ConfigFile.ts to handle CSF factories #30173
   +0
   
10. Telemetry: We should report (1) number of stories written using factories, and (2) number of projects that use the new factories. #30175
    +0
    
11. Adapt the Vitest plugin to handle CSF factories
12. Adjust AST writing in save from controls

Implement typesafe defineConfig in @storybook/react

Preview Give feedback

1. Make it all typesafe
2. Propose and figure out all the names needed (such as data vs annotation getter)
3. Nice to have: Be compatible (or at least as feature rich) as portable stories (run method, args, parameters etc.)
4. Expose defineConfig also in Next, but with extra parameters, extending the react config
5. Should we provide the factories from @storybook/react or @storybook/react-vite|webpack

Adapt AST-parsing

Preview Give feedback

1. Add a new field _csf4 or something to the indexer #30174
   +0
2. Adapt the ESLint plugin to handle CSF factories #30170
   +0
3. Adapt the test runner to handle CSF factories

Runtime changes

Preview Give feedback

1. Make sure that the story method prepares the story using code/core/src/preview-api/modules/store/csf/prepareStory.ts
2. Adapt getProjectAnnotations in code/lib/blocks/src/blocks/external/ExternalPreview.ts so that it can handle CSF4 style configs where everything is composed already
3. Let vitest use CSF4 factories
4. Adapt testStory in code/addons/test/src/vitest-plugin/test-utils.ts to conditionaly use the CSF4 factory

Addons

Preview Give feedback

1. Change our internal addons to be a export default and located in the /preview sub path
2. BREAKING: Change our internal addons to be a function that accepts the options as input and is typed
3. Provide parameter types for all addons and renderers so that they are autocomplted/typesafe etc. Maybe also globals types when neccesary
4. BREAKING: Adapt the addon-kit (Make sure to have a recipe for adding typesafe parameters)

CLI

Preview Give feedback

1. Change the add command to add the addon to the addons field in preview #30203
   +0

Miscellaneous tasks

Preview Give feedback

1. On the CSF API reference, add a page-level tab for CSF 4. Also explain how to deal with legacy addons
2. Mention new CSF factories API in portable story docs
3. Introduce a new tab for all snippets