feat: add storybook framework

[JSerFeng]

Summary

Add support for storybookV7 framework

storybook

• framework: used for storybook framework
• builder: used for storybook builder

🤖 Generated by Copilot at a3d670a

This pull request adds a new storybook-builder package that integrates modern.js with storybook, using either webpack or rspack as the bundler. It also updates some existing packages to support this integration, such as exporting types and functions, adding node exports, and using types from the same package. Additionally, it adds a changeset file, an eslint configuration file, and a custom docgen handler and loader for storybook.

Details

🤖 Generated by Copilot at a3d670a

• Add a changeset file to describe the pull request (link)
• Export loadEnv and loadConfig functions from the core package to load the modern.js configuration and environment variables (link, link)
• Add node exports for various entry points of the plugin-runtime package to support node.js environments (link, link, link, link, link, link, link, link, link)
• Define the storybook-builder package with a package.json file and an eslint configuration file (link, link)
• Implement the build and start functions for the storybook builder using webpack or rspack as the bundler (link)
• Implement the getCompiler function that creates and returns a webpack or rspack compiler for storybook using the modern.js builder and plugins (link)
• Implement the applyDocgenWebpack and applyDocgenRspack functions that apply the react-docgen or react-docgen-typescript plugins to the bundler configuration for storybook (link)
• Implement a custom loader that runs the react-docgen plugin on the source code using a tinypool process and appends the generated docs to the source code (link)
• Implement a custom handler for react-docgen that sets the actualName property on the generated docs based on the component's actual name (link)
• Implement a decorator function that wraps the storybook components with modern.js runtime providers using the WrapProviders component (link)
• Implement a modern.tsx file that wraps the storybook components with modern.js runtime providers (link)
• Define the decorators for the modern.js runtime addon in a preview.ts file (link)
• Define the addon ID for the modern.js runtime addon in a constants.ts file (link)
• Export an empty object from the addons index.ts file to avoid isolatedModules error (link)
• Define the interface for the modern.js configuration options for storybook in a type.ts file (link)
• Import and export various types from the builder-rspack-provider and builder-webpack-provider packages to use and create the rspack and webpack compilers for storybook (link, link, link, link)
• Remove an empty line from the app-tools package (link)

Related Issue

Checklist

• I have added changeset via pnpm run change.
• I have updated the documentation.
• I have added tests to cover my changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: 71f1c1b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 260 packages

Name	Type
@modern-js/storybook	Patch
@modern-js/storybook-builder	Patch
integration-tests-storybook	Patch
@modern-js/core	Patch
@modern-js/doc-plugin-auto-sidebar	Patch
@modern-js/plugin-bff	Patch
@modern-js/plugin-changeset	Patch
@modern-js/plugin-data-loader	Patch
@modern-js/plugin-i18n	Patch
@modern-js/plugin-lint	Patch
@modern-js/plugin-proxy	Patch
@modern-js/plugin-ssg	Patch
@modern-js/plugin-swc	Patch
@modern-js/plugin-tailwindcss	Patch
@modern-js/builder-doc	Patch
@modern-js/main-doc	Patch
@modern-js/module-tools-docs	Patch
@modern-js/devtools-client	Patch
@modern-js/devtools-kit	Patch
@modern-js/devtools-mount	Patch
@modern-js/plugin-devtools	Patch
@modern-js/plugin-garfish	Patch
@modern-js/plugin-router-v5	Patch
@modern-js/runtime	Patch
@modern-js/plugin-testing	Patch
@modern-js/new-action	Patch
@modern-js/sandpack-react	Patch
@modern-js/storybook-generator-next	Patch
@modern-js-app/eslint-config	Patch
@modern-js/eslint-config	Patch
@modern-js/tsconfig	Patch
@modern-js/babel-plugin-module-resolver	Patch
@modern-js/bff-core	Patch
@modern-js/bff-runtime	Patch
@modern-js/server-core	Patch
@modern-js/create-request	Patch
@modern-js/plugin-express	Patch
@modern-js/plugin-koa	Patch
@modern-js/plugin-polyfill	Patch
@modern-js/plugin-server	Patch
@modern-js/plugin-worker	Patch
@modern-js/prod-server	Patch
@modern-js/server	Patch
@modern-js/server-utils	Patch
@modern-js/builder-cli	Patch
@modern-js/builder-rspack-provider	Patch
@modern-js/builder-shared	Patch
@modern-js/builder-webpack-provider	Patch
@modern-js/builder	Patch
@modern-js/builder-plugin-esbuild	Patch
@modern-js/builder-plugin-image-compress	Patch
@modern-js/builder-plugin-node-polyfill	Patch
@modern-js/builder-plugin-stylus	Patch
@modern-js/builder-plugin-swc	Patch
@modern-js/builder-plugin-vue	Patch
@modern-js/builder-plugin-vue2	Patch
@modern-js/plugin-module-babel	Patch
@modern-js/plugin-module-banner	Patch
@modern-js/plugin-module-import	Patch
@modern-js/plugin-module-node-polyfill	Patch
@modern-js/plugin-module-polyfill	Patch
@modern-js/app-tools	Patch
@modern-js/module-tools	Patch
@modern-js/monorepo-tools	Patch
@modern-js/create	Patch
@modern-js/e2e	Patch
@modern-js/node-bundle-require	Patch
@modern-js/plugin	Patch
@modern-js/runtime-utils	Patch
@modern-js/types	Patch
@modern-js/upgrade	Patch
@modern-js/utils	Patch
@modern-js/babel-compiler	Patch
@scripts/build	Patch
@scripts/check-changeset	Patch
@scripts/jest-config	Patch
@scripts/lint-package-json	Patch
@scripts/prebundle	Patch
@scripts/update-codesmith	Patch
@scripts/update-rsbuild	Patch
@scripts/update-rspress	Patch
@scripts/vitest-config	Patch
tests	Patch
@integration-test/alias-set	Patch
api-service-koa	Patch
app-docmuent	Patch
integration-asset-prefix	Patch
async-entry-test	Patch
tmp	Patch
bff-express	Patch
bff-koa	Patch
integration-builder-plugins	Patch
integration-clean-dist-path	Patch
integration-compatibility	Patch
integration-copy-assets	Patch
integration-custom-dist-path	Patch
integration-custom-render	Patch
integration-custom-template	Patch
dev-server	Patch
@integration-test/devtools	Patch
integration-disable-html	Patch
esbuild-transform-and-minify	Patch
esbuild-integration	Patch
integration-config-async-config-test	Patch
integration-basic-local-config	Patch
integration-config-function-params	Patch
integration-local-config-function	Patch
integration-load-config	Patch
main-entry-name	Patch
alias-js-test	Patch
alias-ts-test	Patch
asset-limit-test	Patch
asset-path-test	Patch
asset-publicPath-test	Patch
svgr-test	Patch
auto-external-test	Patch
banner-footer-test	Patch
build-type-test	Patch
copy-test	Patch
decorator-test	Patch
global-vars-js-test	Patch
global-vars-ts-test	Patch
dts-test	Patch
esbuild-options-test	Patch
external-test	Patch
format-cjs-test	Patch
format-esm-test	Patch
format-iife-test	Patch
format-umd-test	Patch
entry-test	Patch
jsx-test	Patch
metafile-test	Patch
minify-test	Patch
platform-test	Patch
redirect-test	Patch
data-url-test	Patch
resolve-false	Patch
ndoe-protocol-test	Patch
lib1	Patch
lib2	Patch
lib3	Patch
condition-exports-test	Patch
js-extensions-test	Patch
main-fields-test	Patch
module-tools-side-effects-test	Patch
source-dir-test	Patch
sourcemap-test	Patch
splitting-test	Patch
css-test	Patch
less-test	Patch
style-test	Patch
postcss-test	Patch
sass-test	Patch
tailwindcss-test	Patch
target-test	Patch
transform-import	Patch
transform-lodash	Patch
tsconfig-test	Patch
umdGlobals-test	Patch
get-module-id-test	Patch
dev-test	Patch
build-platform-test	Patch
build-preset-error-test	Patch
build-preset-function-test	Patch
build-preset-test	Patch
build-preset-string-test	Patch
integration-module-tools	Patch
plugin-babel	Patch
plugin-node-polyfill	Patch
plugin-polyfill	Patch
nonce	Patch
routes	Patch
file-based-router	Patch
use-loader	Patch
runtime	Patch
select-mul-entry-test	Patch
select-one-entry-test	Patch
entry	Patch
server-config	Patch
server-middleware	Patch
server-hook-reqeust	Patch
server-hook-response	Patch
server-hook-router	Patch
@integration-test/server-hook-reqeust	Patch
server-prod	Patch
@source-code-build/app-ts-loader	Patch
@source-code-build/app	Patch
@source-code-build/common	Patch
@source-code-build/components	Patch
@source-code-build/utils	Patch
ssg-fixtures-nested-routes	Patch
ssg-fixtures-simple	Patch
ssg-fixtures-web-server	Patch
ssg	Patch
ssr-base-json-test	Patch
ssr-base-test	Patch
ssr-base-fallback-test	Patch
init	Patch
ssr-preload	Patch
ssr-streaming-test	Patch
ssr	Patch
swc-test-decorator-legacy	Patch
swc-test-decorator	Patch
swc-minify-css	Patch
swc-minify-js	Patch
transform-fail	Patch
swc-integration	Patch
integration-tailwindcss-v2	Patch
integration-tailwindcss-v3-js-config	Patch
integration-tailwindcss-v3-merge-config	Patch
integration-tailwindcss-v3-ts-config	Patch
integration-tailwindcss-v3	Patch
twin-macro-v2	Patch
twin-macro-v3	Patch
tailwindcss-integration-test	Patch
tmp-dir	Patch
write-to-dist	Patch
@e2e/builder-cli-rspack	Patch
@e2e/builder-cli-vue	Patch
@e2e/builder-cli-webpack	Patch
@e2e/webpack-builder-import-antd-v4	Patch
@e2e/webpack-builder-import-antd-v5	Patch
@e2e/webpack-builder-import-arco	Patch
@e2e/webpack-builder-test-moment	Patch
@e2e/builder-remove-prop-types	Patch
@e2e/webpack-builder-source-map	Patch
@e2e/builder-vue3	Patch
@e2e/builder-vue2	Patch
@e2e/builder	Patch
@e2e/garfish-dashboard-router-v6	Patch
@e2e/garfish-dashboard	Patch
@e2e/garfish-main-router-v6	Patch
@e2e/garfish-main	Patch
@e2e/garfish-table	Patch
@e2e/garfish	Patch
@modern-js/generator-common	Patch
@modern-js/generator-plugin	Patch
@modern-js/generator-utils	Patch
@modern-js/bff-generator	Patch
@modern-js/dependence-generator	Patch
@modern-js/entry-generator	Patch
@modern-js/generator-generator	Patch
@modern-js/module-generator	Patch
@modern-js/module-test-generator	Patch
@modern-js/monorepo-generator	Patch
@modern-js/mwa-generator	Patch
@modern-js/router-v5-generator	Patch
@modern-js/rspack-generator	Patch
@modern-js/ssg-generator	Patch
@modern-js/storybook-generator	Patch
@modern-js/test-generator	Patch
@modern-js/upgrade-generator	Patch
@modern-js/generator-plugin-plugin	Patch
@modern-js/base-generator	Patch
@modern-js/changeset-generator	Patch
@modern-js/packages-generator	Patch
@modern-js/repo-generator	Patch
@modern-js/server-generator	Patch
@modern-js/tailwindcss-generator	Patch
@modern-js/generator-cases	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (99693f0) 57.59% compared to head (5cdaf7f) 52.33%.
Report is 1296 commits behind head on main.

❗ Current head 5cdaf7f differs from pull request most recent head 71f1c1b. Consider uploading reports for the commit 71f1c1b to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4585      +/-   ##
==========================================
- Coverage   57.59%   52.33%   -5.27%     
==========================================
  Files         672      681       +9     
  Lines       17794    18509     +715     
  Branches     3876     4254     +378     
==========================================
- Hits        10249     9687     -562     
- Misses       6934     8141    +1207     
- Partials      611      681      +70     

see 485 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[chenjiahan]

There is a warning when use bundler: 'rspack':

[chenjiahan]

Can we remove the assets log of storybook? It is quite annoying.

[JSerFeng]

The legacy storybook plugin is moved to another repo https://github.com/web-infra-dev/legacy-storybook