diff --git a/CHANGELOG.md b/CHANGELOG.md index 649310bf1c11..6a1978abc0d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,20 @@ +## 8.0.0 + +#### Storybook 8.0 is here + +It brings major improvements to Storybook's feature set for testing and documentation, with strengthened framework support across React, Vue, Angular, web-components, Svelte, and more. + +- 🩻 Built-in visual testing +- βš›οΈ React Server Component support +- πŸŽ›οΈ Improved controls for React and Vue projects +- ⚑️ Improved Vite architecture, Vitest testing, and Vite 5 support +- πŸ§ͺ 2-4x faster Storybooks for testing +- ✨ Refreshed desktop UI +- πŸ“² Rebuilt mobile UX +- πŸ™…β€β™€οΈ No more React requirement in non-React projects + +Please checkout our [Migration Guide](https://storybook.js.org/docs/8.0/migration-guide) to upgrade from earlier versions of Storybook. To see a comprehensive list of changes that went into 8.0, you can refer to the [8.0 prerelease changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.prerelease.md). + ## 7.6.17 - Addon-docs: Fix Table of Contents heading leak - [#23677](https://github.com/storybookjs/storybook/pull/23677), thanks [@vmizg](https://github.com/vmizg)! @@ -105,91 +122,91 @@ Storybook 7.6 is here with increased performance and much more! List of all updates - - Actions: Attach spies on actions across stories when defined in meta - [#24451](https://github.com/storybookjs/storybook/pull/24451), thanks [@kasperpeulen](https://github.com/kasperpeulen)! - - Actions: Fix `@storybook/core-events/preview-errors` dependency missing for Yarn PnP - [#24973](https://github.com/storybookjs/storybook/pull/24973), thanks [@JReinhold](https://github.com/JReinhold)! - - Actions: Fix missing crypto module crashing React Native - [#24546](https://github.com/storybookjs/storybook/pull/24546), thanks [@dannyhw](https://github.com/dannyhw)! - - Actions: Warn on implicit actions - [#24856](https://github.com/storybookjs/storybook/pull/24856), thanks [@kasperpeulen](https://github.com/kasperpeulen)! - - Addon A11y: Avoid CSP issue - [#24477](https://github.com/storybookjs/storybook/pull/24477), thanks [@Marklb](https://github.com/Marklb)! - - Addon: Move Visual Test addon to the code directory - [#24771](https://github.com/storybookjs/storybook/pull/24771), thanks [@cdedreuille](https://github.com/cdedreuille)! - - Addons, core: Make `react` and Storybook packages `devDependencies` where possible - [#24676](https://github.com/storybookjs/storybook/pull/24676), thanks [@JReinhold](https://github.com/JReinhold)! - - Addons, core: Make `react` and Storybook packages `devDependencies` where possible - ATTEMPT 2 - [#24834](https://github.com/storybookjs/storybook/pull/24834), thanks [@JReinhold](https://github.com/JReinhold)! - - Angular: Add source-map option to builder - [#24466](https://github.com/storybookjs/storybook/pull/24466), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Angular: Handle nested module metadata - [#24798](https://github.com/storybookjs/storybook/pull/24798), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Angular: Include object configured styles - [#24768](https://github.com/storybookjs/storybook/pull/24768), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Babel: Update all @babel/* dependencies - [#24610](https://github.com/storybookjs/storybook/pull/24610), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - CLI: Add "doctor" command - [#22236](https://github.com/storybookjs/storybook/pull/22236), thanks [@yannbf](https://github.com/yannbf)! - - CLI: Add @storybook/addon-designs to non-core list - [#24507](https://github.com/storybookjs/storybook/pull/24507), thanks [@yannbf](https://github.com/yannbf)! - - CLI: Ensure errors with opening the browser are caught - [#24668](https://github.com/storybookjs/storybook/pull/24668), thanks [@xueyawei](https://github.com/xueyawei)! - - CLI: Ignore `addon-onboarding` when checking versions - [#24634](https://github.com/storybookjs/storybook/pull/24634), thanks [@JReinhold](https://github.com/JReinhold)! - - CLI: Use @storybook/test in template stories - [#24393](https://github.com/storybookjs/storybook/pull/24393), thanks [@yannbf](https://github.com/yannbf)! - - Controls: Improve accessibility of BooleanControl for screen readers - [#24418](https://github.com/storybookjs/storybook/pull/24418), thanks [@danielmarcano](https://github.com/danielmarcano)! - - Core-Server: Ignore all node_module folders for watchpack - [#24553](https://github.com/storybookjs/storybook/pull/24553), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Core: Add deprecation notice for Vite + CommonJS - [#23950](https://github.com/storybookjs/storybook/pull/23950), thanks [@JReinhold](https://github.com/JReinhold)! - - Core: Detect no matching export error in storybook start and build - [#24877](https://github.com/storybookjs/storybook/pull/24877), thanks [@yannbf](https://github.com/yannbf)! - - Core: Fix `useStoryPrepared` hook failing with `undefined` data - [#22631](https://github.com/storybookjs/storybook/pull/22631), thanks [@SpookyJelly](https://github.com/SpookyJelly)! - - Core: Fix pnp support when cache dir is outside working dir - [#24572](https://github.com/storybookjs/storybook/pull/24572), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Core: Fix post message channel location.search access for React Native - [#24545](https://github.com/storybookjs/storybook/pull/24545), thanks [@dannyhw](https://github.com/dannyhw)! - - Core: Gracefully handle error when parsing preview.js file - [#24858](https://github.com/storybookjs/storybook/pull/24858), thanks [@yannbf](https://github.com/yannbf)! - - Core: Make warnOnIncompatibleAddons fault-tolerant - [#24880](https://github.com/storybookjs/storybook/pull/24880), thanks [@taozhou-glean](https://github.com/taozhou-glean)! - - Dependencies: Fix Yarn 4 failing to install due to jscodeshift dependency issue - [#24914](https://github.com/storybookjs/storybook/pull/24914), thanks [@samvv](https://github.com/samvv)! - - Dependencies: Update @babel/traverse and @babel/core to fix vulnerability - [#24670](https://github.com/storybookjs/storybook/pull/24670), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Dependencies: Update browserify-sign transitive dependency - [#24674](https://github.com/storybookjs/storybook/pull/24674), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Dependencies: Update jscodeshift to v0.15.1 - [#24882](https://github.com/storybookjs/storybook/pull/24882), thanks [@epreston](https://github.com/epreston)! - - Dependencies: Update nx dependencies to v17 - [#24671](https://github.com/storybookjs/storybook/pull/24671), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Doc Blocks: Add support for `of` prop to `Primary` block - [#23849](https://github.com/storybookjs/storybook/pull/23849), thanks [@Wilson2k](https://github.com/Wilson2k)! - - Doc Blocks: Remove `defaultProps` in `Stories` block - [#24506](https://github.com/storybookjs/storybook/pull/24506), thanks [@WouterK12](https://github.com/WouterK12)! - - Docs: Changes corresponding to docs design updates - [#24925](https://github.com/storybookjs/storybook/pull/24925), thanks [@kylegach](https://github.com/kylegach)! - - Maintenance: Split renderers preview entrypoints - [#24623](https://github.com/storybookjs/storybook/pull/24623), thanks [@ndelangen](https://github.com/ndelangen)! - - Manager: Update `store.settings.lastTrackedStoryId` - [#24115](https://github.com/storybookjs/storybook/pull/24115), thanks [@rashidshamloo](https://github.com/rashidshamloo)! - - ManagerAPI: Fix setting status without index, crashes storybook - [#24866](https://github.com/storybookjs/storybook/pull/24866), thanks [@ndelangen](https://github.com/ndelangen)! - - ManagerBuilder: Fix `"type": "commonjs"` compatibility - [#24534](https://github.com/storybookjs/storybook/pull/24534), thanks [@ndelangen](https://github.com/ndelangen)! - - Next.js: Add avif support - [#24611](https://github.com/storybookjs/storybook/pull/24611), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Next.js: Add back image context CommonJS export - [#24885](https://github.com/storybookjs/storybook/pull/24885), thanks [@martinnabhan](https://github.com/martinnabhan)! - - Next.js: Add experimental SWC support - [#24852](https://github.com/storybookjs/storybook/pull/24852), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Next.js: Fix Fast Refresh config for SWC mode - [#24991](https://github.com/storybookjs/storybook/pull/24991), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Next.js: Fix forwarding ref for Image component - [#24648](https://github.com/storybookjs/storybook/pull/24648), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Next.js: Fix import path in swc loader - [#24922](https://github.com/storybookjs/storybook/pull/24922), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Next.js: Fix react-docgen usage with preset-env settings - [#24993](https://github.com/storybookjs/storybook/pull/24993), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Next.js: Remove duplicate Fast Refresh plugin init - [#24963](https://github.com/storybookjs/storybook/pull/24963), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - React: Upgrade `react-docgen` to v7 - [#24530](https://github.com/storybookjs/storybook/pull/24530), thanks [@shilman](https://github.com/shilman)! - - ReactNative: Fix missing assert dep in docs-tools - [#24732](https://github.com/storybookjs/storybook/pull/24732), thanks [@dannyhw](https://github.com/dannyhw)! - - Svelte: Fix decorators always running twice - [#24921](https://github.com/storybookjs/storybook/pull/24921), thanks [@paoloricciuti](https://github.com/paoloricciuti)! - - Svelte: Fix source with decorators always showing the `SlotDecorator` component - [#24800](https://github.com/storybookjs/storybook/pull/24800), thanks [@JReinhold](https://github.com/JReinhold)! - - SvelteKit: Add experimental page and navigation mocking - [#24795](https://github.com/storybookjs/storybook/pull/24795), thanks [@paoloricciuti](https://github.com/paoloricciuti)! - - SvelteKit: Default to log an action for `goto`, `invalidate` and `invalidateAll` - [#24955](https://github.com/storybookjs/storybook/pull/24955), thanks [@paoloricciuti](https://github.com/paoloricciuti)! - - SWC: Add settings for react and preact - [#24805](https://github.com/storybookjs/storybook/pull/24805), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Test Build: Add env-variable support to `--test` CLI-flag - [#24862](https://github.com/storybookjs/storybook/pull/24862), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: Add tests and rename to camelCase - [#24911](https://github.com/storybookjs/storybook/pull/24911), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: Disable composition when `--test` is `true` - [#24799](https://github.com/storybookjs/storybook/pull/24799), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: Disable docs related stuff for test builds - [#24691](https://github.com/storybookjs/storybook/pull/24691), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: Disable telemetry for test builds - [#24706](https://github.com/storybookjs/storybook/pull/24706), thanks [@kasperpeulen](https://github.com/kasperpeulen)! - - Test Build: Disable warnOnIncompatibleAddons - [#24797](https://github.com/storybookjs/storybook/pull/24797), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: Filter out addon-docs from essentials in the test build - [#24994](https://github.com/storybookjs/storybook/pull/24994), thanks [@kasperpeulen](https://github.com/kasperpeulen)! - - Test Build: Fix disabledAddons filter - [#24924](https://github.com/storybookjs/storybook/pull/24924), thanks [@IanVS](https://github.com/IanVS)! - - Test Build: Fix indexer bug - [#24890](https://github.com/storybookjs/storybook/pull/24890), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: Globalize `@storybook/blocks` if `build.test.emptyBlocks` is `true` - [#24650](https://github.com/storybookjs/storybook/pull/24650), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: Implement builder options for test build - [#24826](https://github.com/storybookjs/storybook/pull/24826), thanks [@kasperpeulen](https://github.com/kasperpeulen)! - - Test Build: Improve config loading & naming - [#24837](https://github.com/storybookjs/storybook/pull/24837), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: No sourcemaps for test builds - [#24804](https://github.com/storybookjs/storybook/pull/24804), thanks [@ndelangen](https://github.com/ndelangen)! - - Test Build: Revert defaulting to SWC in test build, but keep using esbuild for minification - [#24843](https://github.com/storybookjs/storybook/pull/24843), thanks [@kasperpeulen](https://github.com/kasperpeulen)! - - Test: Create @storybook/test package based on vitest - [#24392](https://github.com/storybookjs/storybook/pull/24392), thanks [@kasperpeulen](https://github.com/kasperpeulen)! - - Test: Don\'t attach action to function mock if action was added already - [#24966](https://github.com/storybookjs/storybook/pull/24966), thanks [@tmeasday](https://github.com/tmeasday)! - - Test: Model loaders as before each and restore mocks properly - [#24948](https://github.com/storybookjs/storybook/pull/24948), thanks [@kasperpeulen](https://github.com/kasperpeulen)! - - Theming: Add theme variable to set the preview background color - [#24575](https://github.com/storybookjs/storybook/pull/24575), thanks [@JReinhold](https://github.com/JReinhold)! - - Typescript: Add \'skipCompiler\' option to TypeScript presets - [#24847](https://github.com/storybookjs/storybook/pull/24847), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - UI: Fix horizontal scroll bar in Canvas hidden by styling - [#24408](https://github.com/storybookjs/storybook/pull/24408), thanks [@yoshi2no](https://github.com/yoshi2no)! - - UI: improve A11Y remove redundant styling rules, update icon color - [#24402](https://github.com/storybookjs/storybook/pull/24402), thanks [@tolkadot](https://github.com/tolkadot)! - - UI: Logo fixed value - [#24726](https://github.com/storybookjs/storybook/pull/24726), thanks [@black-arm](https://github.com/black-arm)! - - UI: Update zIndex on NotificationList to fix the notification not being clickable in certain cases - [#24602](https://github.com/storybookjs/storybook/pull/24602), thanks [@yoshi2no](https://github.com/yoshi2no)! - - Viewport: Add newer device viewports - [#24777](https://github.com/storybookjs/storybook/pull/24777), thanks [@Tomo5524](https://github.com/Tomo5524)! - - Vite: Prevent non-deterministic build output - [#24833](https://github.com/storybookjs/storybook/pull/24833), thanks [@henkerik](https://github.com/henkerik)! - - Webpack: Add export-order-loader and remove babel-plugin-named-exports-order - [#24749](https://github.com/storybookjs/storybook/pull/24749), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Webpack: Add react-docgen loader and remove babel-plugin-react-docgen - [#24762](https://github.com/storybookjs/storybook/pull/24762), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Webpack: Fix race condition for export-order loader - [#24817](https://github.com/storybookjs/storybook/pull/24817), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Webpack: Hide critical dependency warning - [#24784](https://github.com/storybookjs/storybook/pull/24784), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Webpack: Only load babel config when babel-loader is used - [#25002](https://github.com/storybookjs/storybook/pull/25002), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - - Webpack: Resolve circular dependency and fix HMR - [#24974](https://github.com/storybookjs/storybook/pull/24974), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! - +- Actions: Attach spies on actions across stories when defined in meta - [#24451](https://github.com/storybookjs/storybook/pull/24451), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Actions: Fix `@storybook/core-events/preview-errors` dependency missing for Yarn PnP - [#24973](https://github.com/storybookjs/storybook/pull/24973), thanks [@JReinhold](https://github.com/JReinhold)! +- Actions: Fix missing crypto module crashing React Native - [#24546](https://github.com/storybookjs/storybook/pull/24546), thanks [@dannyhw](https://github.com/dannyhw)! +- Actions: Warn on implicit actions - [#24856](https://github.com/storybookjs/storybook/pull/24856), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Addon A11y: Avoid CSP issue - [#24477](https://github.com/storybookjs/storybook/pull/24477), thanks [@Marklb](https://github.com/Marklb)! +- Addon: Move Visual Test addon to the code directory - [#24771](https://github.com/storybookjs/storybook/pull/24771), thanks [@cdedreuille](https://github.com/cdedreuille)! +- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - [#24676](https://github.com/storybookjs/storybook/pull/24676), thanks [@JReinhold](https://github.com/JReinhold)! +- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - ATTEMPT 2 - [#24834](https://github.com/storybookjs/storybook/pull/24834), thanks [@JReinhold](https://github.com/JReinhold)! +- Angular: Add source-map option to builder - [#24466](https://github.com/storybookjs/storybook/pull/24466), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Angular: Handle nested module metadata - [#24798](https://github.com/storybookjs/storybook/pull/24798), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Angular: Include object configured styles - [#24768](https://github.com/storybookjs/storybook/pull/24768), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Babel: Update all @babel/\* dependencies - [#24610](https://github.com/storybookjs/storybook/pull/24610), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- CLI: Add "doctor" command - [#22236](https://github.com/storybookjs/storybook/pull/22236), thanks [@yannbf](https://github.com/yannbf)! +- CLI: Add @storybook/addon-designs to non-core list - [#24507](https://github.com/storybookjs/storybook/pull/24507), thanks [@yannbf](https://github.com/yannbf)! +- CLI: Ensure errors with opening the browser are caught - [#24668](https://github.com/storybookjs/storybook/pull/24668), thanks [@xueyawei](https://github.com/xueyawei)! +- CLI: Ignore `addon-onboarding` when checking versions - [#24634](https://github.com/storybookjs/storybook/pull/24634), thanks [@JReinhold](https://github.com/JReinhold)! +- CLI: Use @storybook/test in template stories - [#24393](https://github.com/storybookjs/storybook/pull/24393), thanks [@yannbf](https://github.com/yannbf)! +- Controls: Improve accessibility of BooleanControl for screen readers - [#24418](https://github.com/storybookjs/storybook/pull/24418), thanks [@danielmarcano](https://github.com/danielmarcano)! +- Core-Server: Ignore all node_module folders for watchpack - [#24553](https://github.com/storybookjs/storybook/pull/24553), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Core: Add deprecation notice for Vite + CommonJS - [#23950](https://github.com/storybookjs/storybook/pull/23950), thanks [@JReinhold](https://github.com/JReinhold)! +- Core: Detect no matching export error in storybook start and build - [#24877](https://github.com/storybookjs/storybook/pull/24877), thanks [@yannbf](https://github.com/yannbf)! +- Core: Fix `useStoryPrepared` hook failing with `undefined` data - [#22631](https://github.com/storybookjs/storybook/pull/22631), thanks [@SpookyJelly](https://github.com/SpookyJelly)! +- Core: Fix pnp support when cache dir is outside working dir - [#24572](https://github.com/storybookjs/storybook/pull/24572), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Core: Fix post message channel location.search access for React Native - [#24545](https://github.com/storybookjs/storybook/pull/24545), thanks [@dannyhw](https://github.com/dannyhw)! +- Core: Gracefully handle error when parsing preview.js file - [#24858](https://github.com/storybookjs/storybook/pull/24858), thanks [@yannbf](https://github.com/yannbf)! +- Core: Make warnOnIncompatibleAddons fault-tolerant - [#24880](https://github.com/storybookjs/storybook/pull/24880), thanks [@taozhou-glean](https://github.com/taozhou-glean)! +- Dependencies: Fix Yarn 4 failing to install due to jscodeshift dependency issue - [#24914](https://github.com/storybookjs/storybook/pull/24914), thanks [@samvv](https://github.com/samvv)! +- Dependencies: Update @babel/traverse and @babel/core to fix vulnerability - [#24670](https://github.com/storybookjs/storybook/pull/24670), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Dependencies: Update browserify-sign transitive dependency - [#24674](https://github.com/storybookjs/storybook/pull/24674), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Dependencies: Update jscodeshift to v0.15.1 - [#24882](https://github.com/storybookjs/storybook/pull/24882), thanks [@epreston](https://github.com/epreston)! +- Dependencies: Update nx dependencies to v17 - [#24671](https://github.com/storybookjs/storybook/pull/24671), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Doc Blocks: Add support for `of` prop to `Primary` block - [#23849](https://github.com/storybookjs/storybook/pull/23849), thanks [@Wilson2k](https://github.com/Wilson2k)! +- Doc Blocks: Remove `defaultProps` in `Stories` block - [#24506](https://github.com/storybookjs/storybook/pull/24506), thanks [@WouterK12](https://github.com/WouterK12)! +- Docs: Changes corresponding to docs design updates - [#24925](https://github.com/storybookjs/storybook/pull/24925), thanks [@kylegach](https://github.com/kylegach)! +- Maintenance: Split renderers preview entrypoints - [#24623](https://github.com/storybookjs/storybook/pull/24623), thanks [@ndelangen](https://github.com/ndelangen)! +- Manager: Update `store.settings.lastTrackedStoryId` - [#24115](https://github.com/storybookjs/storybook/pull/24115), thanks [@rashidshamloo](https://github.com/rashidshamloo)! +- ManagerAPI: Fix setting status without index, crashes storybook - [#24866](https://github.com/storybookjs/storybook/pull/24866), thanks [@ndelangen](https://github.com/ndelangen)! +- ManagerBuilder: Fix `"type": "commonjs"` compatibility - [#24534](https://github.com/storybookjs/storybook/pull/24534), thanks [@ndelangen](https://github.com/ndelangen)! +- Next.js: Add avif support - [#24611](https://github.com/storybookjs/storybook/pull/24611), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Add back image context CommonJS export - [#24885](https://github.com/storybookjs/storybook/pull/24885), thanks [@martinnabhan](https://github.com/martinnabhan)! +- Next.js: Add experimental SWC support - [#24852](https://github.com/storybookjs/storybook/pull/24852), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Fix Fast Refresh config for SWC mode - [#24991](https://github.com/storybookjs/storybook/pull/24991), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Fix forwarding ref for Image component - [#24648](https://github.com/storybookjs/storybook/pull/24648), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Fix import path in swc loader - [#24922](https://github.com/storybookjs/storybook/pull/24922), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Fix react-docgen usage with preset-env settings - [#24993](https://github.com/storybookjs/storybook/pull/24993), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Remove duplicate Fast Refresh plugin init - [#24963](https://github.com/storybookjs/storybook/pull/24963), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- React: Upgrade `react-docgen` to v7 - [#24530](https://github.com/storybookjs/storybook/pull/24530), thanks [@shilman](https://github.com/shilman)! +- ReactNative: Fix missing assert dep in docs-tools - [#24732](https://github.com/storybookjs/storybook/pull/24732), thanks [@dannyhw](https://github.com/dannyhw)! +- Svelte: Fix decorators always running twice - [#24921](https://github.com/storybookjs/storybook/pull/24921), thanks [@paoloricciuti](https://github.com/paoloricciuti)! +- Svelte: Fix source with decorators always showing the `SlotDecorator` component - [#24800](https://github.com/storybookjs/storybook/pull/24800), thanks [@JReinhold](https://github.com/JReinhold)! +- SvelteKit: Add experimental page and navigation mocking - [#24795](https://github.com/storybookjs/storybook/pull/24795), thanks [@paoloricciuti](https://github.com/paoloricciuti)! +- SvelteKit: Default to log an action for `goto`, `invalidate` and `invalidateAll` - [#24955](https://github.com/storybookjs/storybook/pull/24955), thanks [@paoloricciuti](https://github.com/paoloricciuti)! +- SWC: Add settings for react and preact - [#24805](https://github.com/storybookjs/storybook/pull/24805), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Test Build: Add env-variable support to `--test` CLI-flag - [#24862](https://github.com/storybookjs/storybook/pull/24862), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: Add tests and rename to camelCase - [#24911](https://github.com/storybookjs/storybook/pull/24911), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: Disable composition when `--test` is `true` - [#24799](https://github.com/storybookjs/storybook/pull/24799), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: Disable docs related stuff for test builds - [#24691](https://github.com/storybookjs/storybook/pull/24691), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: Disable telemetry for test builds - [#24706](https://github.com/storybookjs/storybook/pull/24706), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Test Build: Disable warnOnIncompatibleAddons - [#24797](https://github.com/storybookjs/storybook/pull/24797), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: Filter out addon-docs from essentials in the test build - [#24994](https://github.com/storybookjs/storybook/pull/24994), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Test Build: Fix disabledAddons filter - [#24924](https://github.com/storybookjs/storybook/pull/24924), thanks [@IanVS](https://github.com/IanVS)! +- Test Build: Fix indexer bug - [#24890](https://github.com/storybookjs/storybook/pull/24890), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: Globalize `@storybook/blocks` if `build.test.emptyBlocks` is `true` - [#24650](https://github.com/storybookjs/storybook/pull/24650), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: Implement builder options for test build - [#24826](https://github.com/storybookjs/storybook/pull/24826), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Test Build: Improve config loading & naming - [#24837](https://github.com/storybookjs/storybook/pull/24837), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: No sourcemaps for test builds - [#24804](https://github.com/storybookjs/storybook/pull/24804), thanks [@ndelangen](https://github.com/ndelangen)! +- Test Build: Revert defaulting to SWC in test build, but keep using esbuild for minification - [#24843](https://github.com/storybookjs/storybook/pull/24843), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Test: Create @storybook/test package based on vitest - [#24392](https://github.com/storybookjs/storybook/pull/24392), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Test: Don\'t attach action to function mock if action was added already - [#24966](https://github.com/storybookjs/storybook/pull/24966), thanks [@tmeasday](https://github.com/tmeasday)! +- Test: Model loaders as before each and restore mocks properly - [#24948](https://github.com/storybookjs/storybook/pull/24948), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Theming: Add theme variable to set the preview background color - [#24575](https://github.com/storybookjs/storybook/pull/24575), thanks [@JReinhold](https://github.com/JReinhold)! +- Typescript: Add \'skipCompiler\' option to TypeScript presets - [#24847](https://github.com/storybookjs/storybook/pull/24847), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- UI: Fix horizontal scroll bar in Canvas hidden by styling - [#24408](https://github.com/storybookjs/storybook/pull/24408), thanks [@yoshi2no](https://github.com/yoshi2no)! +- UI: improve A11Y remove redundant styling rules, update icon color - [#24402](https://github.com/storybookjs/storybook/pull/24402), thanks [@tolkadot](https://github.com/tolkadot)! +- UI: Logo fixed value - [#24726](https://github.com/storybookjs/storybook/pull/24726), thanks [@black-arm](https://github.com/black-arm)! +- UI: Update zIndex on NotificationList to fix the notification not being clickable in certain cases - [#24602](https://github.com/storybookjs/storybook/pull/24602), thanks [@yoshi2no](https://github.com/yoshi2no)! +- Viewport: Add newer device viewports - [#24777](https://github.com/storybookjs/storybook/pull/24777), thanks [@Tomo5524](https://github.com/Tomo5524)! +- Vite: Prevent non-deterministic build output - [#24833](https://github.com/storybookjs/storybook/pull/24833), thanks [@henkerik](https://github.com/henkerik)! +- Webpack: Add export-order-loader and remove babel-plugin-named-exports-order - [#24749](https://github.com/storybookjs/storybook/pull/24749), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Webpack: Add react-docgen loader and remove babel-plugin-react-docgen - [#24762](https://github.com/storybookjs/storybook/pull/24762), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Webpack: Fix race condition for export-order loader - [#24817](https://github.com/storybookjs/storybook/pull/24817), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Webpack: Hide critical dependency warning - [#24784](https://github.com/storybookjs/storybook/pull/24784), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Webpack: Only load babel config when babel-loader is used - [#25002](https://github.com/storybookjs/storybook/pull/25002), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Webpack: Resolve circular dependency and fix HMR - [#24974](https://github.com/storybookjs/storybook/pull/24974), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! + ## 7.5.2 diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index aec117765b12..4de85d0173f8 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,6 @@ +## 8.1.0-alpha.0 + + ## 8.0.0-rc.5 - CLI: Automigration fix version detection of upgrading related packages - [#26410](https://github.com/storybookjs/storybook/pull/26410), thanks @ndelangen! diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 613dbdc000fb..c20046442614 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 4724520ee560..db65386dd902 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 40173cebe181..00d2a6d695da 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 682efb322c40..a2338b8641e1 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 86d2d040a1fa..8af4bbb12e47 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index ea286c7e6daf..356ee89f202f 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 8626bce63870..7b2b62811b84 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 9bcf61952789..3465be44842d 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index c0773463ab1a..a3f2fb45fa40 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 7f6f3de7b01d..0df0d4980d9c 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 3c218f06f3de..0e7cb990631d 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 8a6449f6a9e4..da3ee3d9dae1 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index df3cad03d039..1d38b115b238 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index b87b89b4eb3b..085a7073a49e 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index b9eefe5d2044..452e6fa417b3 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 2e530e1427f3..52167d687610 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index d5678032c004..48cc8dcd1a80 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index e12051424124..60620fc6abab 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 818cd8bc9c1f..b48290a00ad5 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index ecd31fb31953..99e9a8070838 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 09b3cc203aff..058aec7ab747 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 8b43006f3dc4..a2f479091d30 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 425c1eb5b888..2c014d985f54 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 6cb46be12bd2..527c4de7c0a0 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index d8181d85aa46..01a883691317 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 4f038bac401d..8ea8e72f8d7b 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 2bb980d16d83..d1bb2cffedd4 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 33338d991b79..fe359b400ca7 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/README.md b/code/frameworks/react-vite/README.md index e8a35450aec9..272f8f50d55f 100644 --- a/code/frameworks/react-vite/README.md +++ b/code/frameworks/react-vite/README.md @@ -1 +1,3 @@ -# Storybook for React +# Storybook for React & Vite + +See [documentation](https://storybook.js.org/docs/8.0/get-started/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more. \ No newline at end of file diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 37b42510626e..1c355d4fb1a9 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/README.md b/code/frameworks/react-webpack5/README.md index b3b1d877eaa2..53e3de782715 100644 --- a/code/frameworks/react-webpack5/README.md +++ b/code/frameworks/react-webpack5/README.md @@ -1,47 +1,3 @@ -# Storybook for React +# Storybook for React & Webpack -Storybook for React is a UI development environment for your React components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-react-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/react/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -Here are some featured storybooks that you can reference to see how Storybook works: - -- [Demo of Storybook Design System](https://storybook.js.org/design-system) - [source](https://github.com/storybookjs/design-system) - -## Create React App - -Support for [Create React App](https://create-react-app.dev/) is handled by [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app). - -This preset enables support for all Create React App features, including Sass/SCSS and TypeScript. - -If you're working on an app that was initialized manually (i.e., without the use of Create React App), ensure that your app has [react-dom](https://www.npmjs.com/package/react-dom) included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project. - -## Typescript - -`@storybook/react` is now exporting its own types to use with Typescript. -You don't need to have `@types/storybook__react` installed anymore if it was your case. -But you probably also need to use types from `@types/node @types/react`. - -## Docs - -- [Basics](https://storybook.js.org/docs/react/get-started) -- [Configurations](https://storybook.js.org/docs/react/configure) -- [Addons](https://storybook.js.org/docs/react/configure/storybook-addons) +See [documentation](https://storybook.js.org/docs/8.0/get-started/react-webpack5?renderer=react) for installation instructions, usage examples, APIs, and more. \ No newline at end of file diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index c43671bb14fb..1fe433e9aa9f 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 52cd8d871e45..265502f9b607 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/README.md b/code/frameworks/svelte-vite/README.md index 30a7c36ca01e..1f1dc740151d 100644 --- a/code/frameworks/svelte-vite/README.md +++ b/code/frameworks/svelte-vite/README.md @@ -1 +1,3 @@ -# Storybook for Svelte +# Storybook for Svelte & Vite + +See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-vite?renderer=svelte) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 1b10dcb99319..ddfd94f74cfe 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/README.md b/code/frameworks/svelte-webpack5/README.md index d490ff6af11c..fa37e5b2e74b 100644 --- a/code/frameworks/svelte-webpack5/README.md +++ b/code/frameworks/svelte-webpack5/README.md @@ -1,32 +1,3 @@ -# Storybook for Svelte +# Storybook for Svelte & Webpack -Storybook for Svelte is a UI development environment for your Svelte components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-svelte-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/svelte/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -## TODOs - -- Support `addon-info` -- Support Svelte markup directly in stories -- Add Svelte storybook generator -- Provide stories that show advanced Svelte use cases -- Hydratable -- Advanced mount options +See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index c63122e40028..a49afd3eb1bd 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 0243fde57b23..8bb8789a879d 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -1,190 +1,6 @@ -# Storybook for SvelteKit +# Storybook for SvelteKit -Our goal is to help you use the tools you love together with Storybook. That’s why Storybook has zero-config support for SvelteKit with the `@storybook/sveltekit` package. - -Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) announcement for what this all means for you and our continued efforts to make Storybook a seamless integration for any project. - -## Table of Contents - -- [Supported features](#supported-features) -- [Requirements](#requirements) -- [Getting Started](#getting-started) - - [In a project without Storybook](#in-a-project-without-storybook) - - [In a project with Storybook](#in-a-project-with-storybook) - - [Automatic migration](#automatic-migration) - - [Manual migration](#manual-migration) -- [How to mock](#how-to-mock) - - [Mocking links](#mocking-links) -- [Troubleshooting](#troubleshooting) - - [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook) -- [Acknowledgements](#acknowledgements) - -## Supported features - -All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath. -However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon: - -| **Module** | **Status** | **Note** | -| ---------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | βœ… Supported | `version` is always empty in Storybook. | -| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | βœ… Supported | See [How to mock](#how-to-mock) | -| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | βœ… Supported | See [How to mock](#how-to-mock) | -| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | βœ… Supported | Requires SvelteKit 1.4.0 or newer | -| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | βœ… Supported | See [How to mock](#how-to-mock) | -| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | β›” Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. | -| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. | -| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | β›” Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. | -| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | βœ… Supported | | -| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | βœ… Supported | | -| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | β›” Not supported | They are only meant to be used in service workers | -| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | βœ… Supported | | - -This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/svelte/writing-stories), [test](https://storybook.js.org/docs/svelte/writing-tests) and [document](https://storybook.js.org/docs/svelte/writing-docs) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love. - -## Requirements - -- [SvelteKit](https://kit.svelte.dev/) >= 1.0.0 (not including beta versions) -- [Storybook](https://storybook.js.org/) >= 7.x - -## Getting Started - -### In a project without Storybook - -Run the following command in your SvelteKit project's root directory, and follow the prompts: - -```bash -npx storybook@latest init -``` - -[More on getting started with Storybook](https://storybook.js.org/docs/svelte/get-started/install) - -### In a project with Storybook - -This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command: - -```bash -npx storybook@latest upgrade -``` - -#### Automatic migration - -When running the `upgrade` command above you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below. - -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.js` the automigration will have removed it, as it is no longer supported. - -#### Manual migration - -Install the framework: - -```bash -yarn add -D @storybook/sveltekit -``` - -Update your `main.js` to change the framework property: - -```js -// .storybook/main.js -export default { - ... - framework: '@storybook/sveltekit', -}; -``` - -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.js` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below. - -Remove any redundant dependencies, if you have them: - -```bash -yarn remove @storybook/svelte-vite -yarn remove @storybook/svelte-webpack5 -yarn remove storybook-builder-vite -yarn remove @storybook/builder-vite -``` - -## How to mock - -To mock a SvelteKit import you can set it on `parameters.sveltekit_experimental`: - -```ts -export const MyStory = { - parameters: { - sveltekit_experimental: { - stores: { - page: { - data: { - test: 'passed', - }, - }, - navigating: { - route: { - id: '/storybook', - }, - }, - updated: true, - }, - }, - }, -}; -``` - -You can add the name of the module you want to mock to `parameters.sveltekit_experimental` (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and then pass the following kind of objects: - -| Module | Path in parameters | Kind of objects | -| ------------------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `import { page } from "$app/stores"` | `parameters.sveltekit_experimental.stores.page` | A Partial of the page store | -| `import { navigating } from "$app/stores"` | `parameters.sveltekit_experimental.stores.navigating` | A Partial of the navigating store | -| `import { updated } from "$app/stores"` | `parameters.sveltekit_experimental.stores.updated` | A boolean representing the value of updated (you can also access `check()` which will be a noop) | -| `import { goto } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.goto` | A callback that will be called whenever goto is called, in no function is provided an action will be logged to the Actions panel | -| `import { pushState } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.pushState` | A callback that will be called whenever pushState is called, in no function is provided an action will be logged to the Actions panel | -| `import { replaceState } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.replaceState` | A callback that will be called whenever replaceState is called, in no function is provided an action will be logged to the Actions panel | -| `import { invalidate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidate` | A callback that will be called whenever invalidate is called, in no function is provided an action will be logged to the Actions panel | -| `import { invalidateAll } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called, in no function is provided an action will be logged to the Actions panel | -| `import { afterNavigate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called | -| `import { enhance } from "$app/forms"` | `parameters.sveltekit_experimental.forms.enhance` | A callback that will called when a form with `use:enhance` is submitted | - -All the other functions are still exported as `noop` from the mocked modules so that your application will still work. - -### Mocking links - -The default link-handling behavior (ie. clicking an `` tag with an `href` attribute) is to log an action to the Actions panel. - -You can override this by setting an object on `parameter.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values are objects typed as `{ callback: (href, event) => void, asRegex?: boolean }`. - -If you have an `` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based on the `asRegex` property) the corresponding `callback` will be called. - -Example: - -```ts -export const MyStory = { - parameters: { - sveltekit_experimental: { - hrefs: { - '/basic-href': (to, event) => { - console.log(to, event); - }, - '/root.*': { - callback: (to, event) => { - console.log(to, event); - }, - asRegex: true, - }, - }, - }, - }, -}; -``` - -## Troubleshooting - -### Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook - -> When starting Storybook after upgrading to v7.0, it breaks with the following error: -> -> ``` -> ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared -> ``` - -You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0. +See [documentation](https://storybook.js.org/docs/8.0/get-started/sveltekit?renderer=svelte) for installation instructions, usage examples, APIs, and more. ## Acknowledgements diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 6cfbe9bf5460..c8d68ff47d08 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index a36fc60ad2da..05d7d8bff07e 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md index 2e365a8a7f8e..a4e696468d58 100644 --- a/code/frameworks/vue3-webpack5/README.md +++ b/code/frameworks/vue3-webpack5/README.md @@ -1,44 +1,3 @@ # Storybook for Vue 3 and Webpack -Storybook for Vue 3 is a UI development environment for your Vue 3 components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-vue3-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -## Extending the Vue application - -Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. -When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. - -Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. - -```js -// .storybook/preview.js - -import { setup } from '@storybook/vue3'; - -setup((app) => { - app.use(MyPlugin); - app.component('my-component', MyComponent); - app.mixin({ - /* My mixin */ - }); -}); -``` +See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more. \ No newline at end of file diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 27cb857d3aac..6038e5de35f1 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/README.md b/code/frameworks/web-components-vite/README.md index 9c68eca98041..af1a9ffaa853 100644 --- a/code/frameworks/web-components-vite/README.md +++ b/code/frameworks/web-components-vite/README.md @@ -1 +1,3 @@ -# Storybook for Web components +# Storybook for Web components & Vite + +See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 521db343776a..7f30b0e62b32 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/README.md b/code/frameworks/web-components-webpack5/README.md index 4562b5dc35ee..d9ee9b9fd385 100644 --- a/code/frameworks/web-components-webpack5/README.md +++ b/code/frameworks/web-components-webpack5/README.md @@ -1,71 +1,3 @@ -# Storybook for web-components +# Storybook for Web components & Webpack ---- - -Storybook for web-components is a UI development environment for your plain web-component snippets. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-app -npx storybook@latest init -t web_components -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/web-components/sharing/publish-storybook) of your storybook and deploy it anywhere you want. - -# Hot Module Reloading (HMR) - -As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast. - -# Setup es6/7 dependencies - -By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation". - -For example if you have a library called `my-library` which is in ES2017 then you can add it like so - -```js -// .storybook/main.js - -export default { - webpackFinal: async (config) => { - // find web-components rule for extra transpilation - const webComponentsRule = config.module.rules.find( - (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false - ); - // add your own `my-library` - webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); - - return config; - }, -}; -``` - -By default the following folders are included - -- `src/*.js` -- `packages/*/src/*.js` -- `node_modules/lit-html/*.js` -- `node_modules/lit-element/*.js` -- `node_modules/@open-wc/*.js` -- `node_modules/@polymer/*.js` -- `node_modules/@vaadin/*.js` - -As you can see the `src` folder is also included. -The reason for that is as it has some extra configuration to allow for example `import.meta`. -If you use a different folder you will need to make sure webpack/babel can handle it. - -# FAQ - -- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry` - => please see Setup page reload via HMR +See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-webpack5?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index cef8919e5d61..d5f0d2a241f3 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 7215f9831110..bd50022489a9 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 64c8731c1701..34aedd948abe 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index eba2ad5c08ce..7772af298cee 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 6baa876bc0d1..d49df9ad39ab 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 915205d726f7..b73e0fb65091 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index a973e8585e7c..42f3a6125262 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index d2beadd15a27..6d920db16cde 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts index 1f3bf59707c4..995915f828e2 100644 --- a/code/lib/core-common/src/versions.ts +++ b/code/lib/core-common/src/versions.ts @@ -1,83 +1,83 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.0.0-rc.5', - '@storybook/addon-actions': '8.0.0-rc.5', - '@storybook/addon-backgrounds': '8.0.0-rc.5', - '@storybook/addon-controls': '8.0.0-rc.5', - '@storybook/addon-docs': '8.0.0-rc.5', - '@storybook/addon-essentials': '8.0.0-rc.5', - '@storybook/addon-highlight': '8.0.0-rc.5', - '@storybook/addon-interactions': '8.0.0-rc.5', - '@storybook/addon-jest': '8.0.0-rc.5', - '@storybook/addon-links': '8.0.0-rc.5', - '@storybook/addon-mdx-gfm': '8.0.0-rc.5', - '@storybook/addon-measure': '8.0.0-rc.5', - '@storybook/addon-onboarding': '8.0.0-rc.5', - '@storybook/addon-outline': '8.0.0-rc.5', - '@storybook/addon-storysource': '8.0.0-rc.5', - '@storybook/addon-themes': '8.0.0-rc.5', - '@storybook/addon-toolbars': '8.0.0-rc.5', - '@storybook/addon-viewport': '8.0.0-rc.5', - '@storybook/angular': '8.0.0-rc.5', - '@storybook/blocks': '8.0.0-rc.5', - '@storybook/builder-manager': '8.0.0-rc.5', - '@storybook/builder-vite': '8.0.0-rc.5', - '@storybook/builder-webpack5': '8.0.0-rc.5', - '@storybook/channels': '8.0.0-rc.5', - '@storybook/cli': '8.0.0-rc.5', - '@storybook/client-logger': '8.0.0-rc.5', - '@storybook/codemod': '8.0.0-rc.5', - '@storybook/components': '8.0.0-rc.5', - '@storybook/core-common': '8.0.0-rc.5', - '@storybook/core-events': '8.0.0-rc.5', - '@storybook/core-server': '8.0.0-rc.5', - '@storybook/core-webpack': '8.0.0-rc.5', - '@storybook/csf-plugin': '8.0.0-rc.5', - '@storybook/csf-tools': '8.0.0-rc.5', - '@storybook/docs-tools': '8.0.0-rc.5', - '@storybook/ember': '8.0.0-rc.5', - '@storybook/html': '8.0.0-rc.5', - '@storybook/html-vite': '8.0.0-rc.5', - '@storybook/html-webpack5': '8.0.0-rc.5', - '@storybook/instrumenter': '8.0.0-rc.5', - '@storybook/manager': '8.0.0-rc.5', - '@storybook/manager-api': '8.0.0-rc.5', - '@storybook/nextjs': '8.0.0-rc.5', - '@storybook/node-logger': '8.0.0-rc.5', - '@storybook/preact': '8.0.0-rc.5', - '@storybook/preact-vite': '8.0.0-rc.5', - '@storybook/preact-webpack5': '8.0.0-rc.5', - '@storybook/preset-create-react-app': '8.0.0-rc.5', - '@storybook/preset-html-webpack': '8.0.0-rc.5', - '@storybook/preset-preact-webpack': '8.0.0-rc.5', - '@storybook/preset-react-webpack': '8.0.0-rc.5', - '@storybook/preset-server-webpack': '8.0.0-rc.5', - '@storybook/preset-svelte-webpack': '8.0.0-rc.5', - '@storybook/preset-vue3-webpack': '8.0.0-rc.5', - '@storybook/preview': '8.0.0-rc.5', - '@storybook/preview-api': '8.0.0-rc.5', - '@storybook/react': '8.0.0-rc.5', - '@storybook/react-dom-shim': '8.0.0-rc.5', - '@storybook/react-vite': '8.0.0-rc.5', - '@storybook/react-webpack5': '8.0.0-rc.5', - '@storybook/router': '8.0.0-rc.5', - '@storybook/server': '8.0.0-rc.5', - '@storybook/server-webpack5': '8.0.0-rc.5', - '@storybook/source-loader': '8.0.0-rc.5', - '@storybook/svelte': '8.0.0-rc.5', - '@storybook/svelte-vite': '8.0.0-rc.5', - '@storybook/svelte-webpack5': '8.0.0-rc.5', - '@storybook/sveltekit': '8.0.0-rc.5', - '@storybook/telemetry': '8.0.0-rc.5', - '@storybook/test': '8.0.0-rc.5', - '@storybook/theming': '8.0.0-rc.5', - '@storybook/types': '8.0.0-rc.5', - '@storybook/vue3': '8.0.0-rc.5', - '@storybook/vue3-vite': '8.0.0-rc.5', - '@storybook/vue3-webpack5': '8.0.0-rc.5', - '@storybook/web-components': '8.0.0-rc.5', - '@storybook/web-components-vite': '8.0.0-rc.5', - '@storybook/web-components-webpack5': '8.0.0-rc.5', - sb: '8.0.0-rc.5', - storybook: '8.0.0-rc.5', + '@storybook/addon-a11y': '8.0.0', + '@storybook/addon-actions': '8.0.0', + '@storybook/addon-backgrounds': '8.0.0', + '@storybook/addon-controls': '8.0.0', + '@storybook/addon-docs': '8.0.0', + '@storybook/addon-essentials': '8.0.0', + '@storybook/addon-highlight': '8.0.0', + '@storybook/addon-interactions': '8.0.0', + '@storybook/addon-jest': '8.0.0', + '@storybook/addon-links': '8.0.0', + '@storybook/addon-mdx-gfm': '8.0.0', + '@storybook/addon-measure': '8.0.0', + '@storybook/addon-onboarding': '8.0.0', + '@storybook/addon-outline': '8.0.0', + '@storybook/addon-storysource': '8.0.0', + '@storybook/addon-themes': '8.0.0', + '@storybook/addon-toolbars': '8.0.0', + '@storybook/addon-viewport': '8.0.0', + '@storybook/angular': '8.0.0', + '@storybook/blocks': '8.0.0', + '@storybook/builder-manager': '8.0.0', + '@storybook/builder-vite': '8.0.0', + '@storybook/builder-webpack5': '8.0.0', + '@storybook/channels': '8.0.0', + '@storybook/cli': '8.0.0', + '@storybook/client-logger': '8.0.0', + '@storybook/codemod': '8.0.0', + '@storybook/components': '8.0.0', + '@storybook/core-common': '8.0.0', + '@storybook/core-events': '8.0.0', + '@storybook/core-server': '8.0.0', + '@storybook/core-webpack': '8.0.0', + '@storybook/csf-plugin': '8.0.0', + '@storybook/csf-tools': '8.0.0', + '@storybook/docs-tools': '8.0.0', + '@storybook/ember': '8.0.0', + '@storybook/html': '8.0.0', + '@storybook/html-vite': '8.0.0', + '@storybook/html-webpack5': '8.0.0', + '@storybook/instrumenter': '8.0.0', + '@storybook/manager': '8.0.0', + '@storybook/manager-api': '8.0.0', + '@storybook/nextjs': '8.0.0', + '@storybook/node-logger': '8.0.0', + '@storybook/preact': '8.0.0', + '@storybook/preact-vite': '8.0.0', + '@storybook/preact-webpack5': '8.0.0', + '@storybook/preset-create-react-app': '8.0.0', + '@storybook/preset-html-webpack': '8.0.0', + '@storybook/preset-preact-webpack': '8.0.0', + '@storybook/preset-react-webpack': '8.0.0', + '@storybook/preset-server-webpack': '8.0.0', + '@storybook/preset-svelte-webpack': '8.0.0', + '@storybook/preset-vue3-webpack': '8.0.0', + '@storybook/preview': '8.0.0', + '@storybook/preview-api': '8.0.0', + '@storybook/react': '8.0.0', + '@storybook/react-dom-shim': '8.0.0', + '@storybook/react-vite': '8.0.0', + '@storybook/react-webpack5': '8.0.0', + '@storybook/router': '8.0.0', + '@storybook/server': '8.0.0', + '@storybook/server-webpack5': '8.0.0', + '@storybook/source-loader': '8.0.0', + '@storybook/svelte': '8.0.0', + '@storybook/svelte-vite': '8.0.0', + '@storybook/svelte-webpack5': '8.0.0', + '@storybook/sveltekit': '8.0.0', + '@storybook/telemetry': '8.0.0', + '@storybook/test': '8.0.0', + '@storybook/theming': '8.0.0', + '@storybook/types': '8.0.0', + '@storybook/vue3': '8.0.0', + '@storybook/vue3-vite': '8.0.0', + '@storybook/vue3-webpack5': '8.0.0', + '@storybook/web-components': '8.0.0', + '@storybook/web-components-vite': '8.0.0', + '@storybook/web-components-webpack5': '8.0.0', + sb: '8.0.0', + storybook: '8.0.0', }; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 0a06fbab9d30..703abd1c4c43 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 11904f82e863..0b2b4cac082a 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index e2129ed58c9a..ab98e61903cd 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index f275a090e8d6..71ba943c4f06 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index bb9749cfff93..5055915d9e0b 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 2863f4b50d55..3b701447be5f 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index a15743e36be3..9e8578e5b392 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 3c5faf93d744..71a5a793d9a3 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 7a52ddfe9b62..d785b5b25ee7 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.0.0-rc.5'; +export const version = '8.0.0'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index d8a6f25ba21a..ff1c98ab8d65 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index c040ca46a430..61aa33464abc 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index ec8800525a3e..77152bf25bda 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 67db8a18ccc8..d28cd4ce0bf0 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 52934e8306b4..1e68a5f4cb9c 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 14e5d3e46527..9be474aca84d 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index 67713dca4118..d97e3a4b4130 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 237be906586f..5510b4b5f882 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 5d8f48150adf..4a37093ee71b 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index aab80d40328c..378aa60801fb 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 61f01e1274f8..e19b53846567 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-rc.5", + "version": "8.0.0", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -294,5 +294,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.1.0-alpha.0" } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 55fcc6d076e8..ecae0406e329 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 2eb6a823eed7..0e7ef0728613 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 71606e160146..9007c22fd75f 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 7db8e8ec09d4..ea5d2ed9877e 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index a95582e8c8b9..f38f1ca874db 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index c11c76aab89f..ad3388c924ea 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index b424bf3ed483..aa72427acb2d 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 18b504618783..adbb56391d3e 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index cd265a5f4285..dda98eb9375f 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 065ec55a4f44..eb0f00b27a06 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 2d2b6b584266..88eab2fcd790 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index cedaffe33caa..2d4b83f3b72f 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 09d205d83f9f..59ceb665eb71 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 6866f00dd368..e811f14dbbc5 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index dae557b18504..e95125017a8c 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/components/package.json b/code/ui/components/package.json index cef804640bf3..d16c2c1192f2 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index e0c45acb051c..2209fdbfae3f 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.0.0-rc.5", + "version": "8.0.0", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/docs/get-started/react-vite.md b/docs/get-started/react-vite.md new file mode 100644 index 000000000000..9fbe5eca53af --- /dev/null +++ b/docs/get-started/react-vite.md @@ -0,0 +1,140 @@ +--- +title: Storybook for React & Vite +--- + +export const SUPPORTED_RENDERER = 'react'; + +Storybook for React & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Vite](https://vitejs.dev/). It includes: + +- 🏎️ Pre-bundled for performance +- πŸͺ„ Zero config +- πŸ’« and more! + + + + + +Storybook for React & Vite is only supported in [React](?renderer=react) projects. + + + + + + + + + +## Requirements + +- React β‰₯ 16.8 +- Vite β‰₯ 4.0 +- Storybook β‰₯ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your React project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/react-vite`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Then, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Run the Setup Wizard + +If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../essentials/controls). + +![Storybook onboarding](./example-onboarding-wizard.png) + +If you skipped the wizard, you can always run it again by adding the `?path=/onboarding` query parameter to the URL of your Storybook instance, provided that the example stories are still available. + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```ts +// .storybook/main.ts +import type { StorybookConfig } from '@storybook/react-vite'; + +const config: StorybookConfig = { + framework: { + name: '@storybook/react-vite', + options: { + // ... + }, + }, +}; + +export default config; +``` + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md). + + + + diff --git a/docs/get-started/react-webpack5.md b/docs/get-started/react-webpack5.md new file mode 100644 index 000000000000..769aa82a0f2d --- /dev/null +++ b/docs/get-started/react-webpack5.md @@ -0,0 +1,180 @@ +--- +title: Storybook for React & Webpack +--- + +export const SUPPORTED_RENDERER = 'react'; + +Storybook for React & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for React & Webpack is only supported in [React](?renderer=react) projects. + + + + + + + + + +## Requirements + +- React β‰₯ 16.8 +- Webpack β‰₯ 5.0 +- Storybook β‰₯ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your React project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/react-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + +If your project is using [Create React App](#create-react-app-cra), you can skip this step. + + + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Run the Setup Wizard + +If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../essentials/controls). + +![Storybook onboarding](./example-onboarding-wizard.png) + +If you skipped the wizard, you can always run it again by adding the `?path=/onboarding` query parameter to the URL of your Storybook instance, provided that the example stories are still available. + +## Create React App (CRA) + +Support for [Create React App](https://create-react-app.dev/) is handled by [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app). + +This preset enables support for all CRA features, including Sass/SCSS and TypeScript. + +If you're working on an app that was initialized manually (i.e., without the use of CRA), ensure that your app has [react-dom](https://www.npmjs.com/package/react-dom) included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project. + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```ts +// .storybook/main.ts +import type { StorybookConfig } from '@storybook/react-webpack5'; + +const config: StorybookConfig = { + framework: { + name: '@storybook/react-webpack5', + options: { + // ... + }, + }, +}; + +export default config; +``` + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + + + + diff --git a/docs/get-started/svelte-vite.md b/docs/get-started/svelte-vite.md new file mode 100644 index 000000000000..2069a18d66ee --- /dev/null +++ b/docs/get-started/svelte-vite.md @@ -0,0 +1,153 @@ +--- +title: Storybook for Svelte & Vite +--- + +export const SUPPORTED_RENDERER = 'svelte'; + +Storybook for Svelte & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/). + + + + + +Storybook for Svelte & Vite is only supported in [Svelte](?renderer=svelte) projects. + + + + + + + + + +## Requirements + +- Svelte β‰₯ 4.0 +- Vite β‰₯ 4.0 +- Storybook β‰₯ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Sveltekit project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Then, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Writing native Svelte stories + +Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature. + +Run the following command to install the addon. + + + + + + + + + +The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [addon's documentation](https://github.com/storybookjs/addon-svelte-csf). + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/svelte-vite', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md). + + + + diff --git a/docs/get-started/svelte-webpack5.md b/docs/get-started/svelte-webpack5.md new file mode 100644 index 000000000000..a2676a3e1cec --- /dev/null +++ b/docs/get-started/svelte-webpack5.md @@ -0,0 +1,183 @@ +--- +title: Storybook for Svelte & Webpack +--- + +export const SUPPORTED_RENDERER = 'svelte'; + +Storybook for Svelte & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Svelte & Webpack is only supported in [Svelte](?renderer=svelte) projects. + + + + + + + + + +## Requirements + +- Svelte β‰₯ 4.0 +- Webpack β‰₯ 5.0 +- Storybook β‰₯ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Svelte project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/svelte-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Writing native Svelte stories + +Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature. + +Run the following command to install the addon. + + + + + + + + + +The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf). + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/svelte-webpack5', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + + + + diff --git a/docs/get-started/sveltekit.md b/docs/get-started/sveltekit.md new file mode 100644 index 000000000000..c75c68cf6549 --- /dev/null +++ b/docs/get-started/sveltekit.md @@ -0,0 +1,342 @@ +--- +title: Storybook for SvelteKit +--- + +export const SUPPORTED_RENDERER = 'svelte'; + +Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [SvelteKit](https://kit.svelte.dev/) applications. It includes: + +- πŸͺ„ Zero config +- 🧩 Easily mock many Kit modules +- πŸ”— Automatic link handling +- πŸ’« and more! + + + + + +Storybook for SvelteKit is only supported in [Svelte](?renderer=svelte) projects. + + + + + + + + + +## Requirements + +- SvelteKit β‰₯ 1.0 +- Storybook β‰₯ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Sveltekit project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Then, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +Finally, these packages are now either obsolete or part of `@storybook/sveltekit`, so you no longer need to depend on them directly. You can remove them (`npm uninstall`, `yarn remove`, `pnpm remove`) from your project: + +- `@storybook/svelte-vite` +- `@storybook/svelte-webpack5` +- `storybook-builder-vite` +- `@storybook/builder-vite` + +## Supported features + +All Svelte language features are supported out of the box, as the Storybook framework uses the Svelte compiler directly. +However, SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that aren't supported. Here's a breakdown of what will and will not work within Storybook: + +| Module | Status | Note | +| ---------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | βœ… Supported | `version` is always empty in Storybook. | +| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | +| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | +| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | βœ… Supported | Requires SvelteKit 1.4.0 or newer. | +| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | +| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API, so it cannot dynamically serve content. | +| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | βœ… Supported | | +| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | βœ… Supported | | +| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | βœ… Supported | | +| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | β›” Not supported | This is a server-side feature, and Storybook renders all components on the client. | +| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | β›” Not supported | This is a server-side feature, and Storybook renders all components on the client. | +| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | β›” Not supported | This is a service worker feature, which does not apply to Storybook. | + +## How to mock + +To mock a SvelteKit import you can define it within `parameters.sveltekit_experimental`: + +```ts +// MyComponent.stories.svelte +export const MyStory = { + parameters: { + sveltekit_experimental: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + navigating: { + route: { + id: '/storybook', + }, + }, + updated: true, + }, + }, + }, +}; +``` + +The [available parameters](#parameters) are documented in the API section, below. + +### Mocking links + +The default link-handling behavior (e.g. when clicking an `` element) is to log an action to the [Actions panel](../essentials/actions.md). + +You can override this by assigning an object to `parameters.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values define your mock. For example: + +```ts +// MyComponent.stories.svelte +export const MyStory = { + parameters: { + sveltekit_experimental: { + hrefs: { + '/basic-href': (to, event) => { + console.log(to, event); + }, + '/root.*': { + callback: (to, event) => { + console.log(to, event); + }, + asRegex: true, + }, + }, + }, + }, +}; +``` + +See the [API reference](#hrefs) for more information. + +## Writing native Svelte stories + +Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature. + +Run the following command to install the addon. + + + + + + + + + +The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf). + + + +## API + +### Parameters + +This framework contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `sveltekit_experimental` namespace: + +#### `forms` + +Type: `{ enhance: () => void }` + +Provides mocks for the [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) module. + +##### `forms.enhance` + +Type: `() => void` + +A callback that will be called when a form with [`use:enhance`](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance) is submitted. + +#### `hrefs` + +Type: `Record<[path: string], (to: string, event: MouseEvent) => void | { callback: (to: string, event: MouseEvent) => void, asRegex?: boolean }>` + +If you have an `` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based if the `asRegex` property is `true`) the corresponding `callback` will be called. If no matching `hrefs` are defined, an action will be logged to the [Actions panel](../essentials/actions.md). See [Mocking links](#mocking-links) for an example. + +#### `navigation` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation) + +Provides mocks for the [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) module. + +##### `navigation.goto` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-goto) + +A callback that will be called whenever [`goto`](https://kit.svelte.dev/docs/modules#$app-navigation-goto) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.pushState` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) + +A callback that will be called whenever [`pushState`](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.replaceState` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate) + +A callback that will be called whenever [`replaceState`](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.invalidate` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) + +A callback that will be called whenever [`invalidate`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.invalidateAll` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) + +A callback that will be called whenever [`invalidateAll`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.afterNavigate` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) + +An object that will be passed to the [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) function, which will be invoked when the `onMount` event fires. + +#### `stores` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores) + +Provides mocks for the [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) module. + +##### `stores.navigating` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores-navigating) + +A partial version of the [`navigating`](https://kit.svelte.dev/docs/modules#$app-stores-navigating) store. + +##### `stores.page` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores-page) + +A partial version of the [`page`](https://kit.svelte.dev/docs/modules#$app-stores-page) store. + +##### `stores.updated` + +Type: boolean + +A boolean representing the value of [`updated`](https://kit.svelte.dev/docs/modules#$app-stores-updated) (you can also access `updated.check()` which will be a no-op). + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/sveltekit', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For Sveltekit, available options can be found in the [Vite builder docs](../builders/vite.md). + +## Troubleshooting + +### Error when starting Storybook + +When starting Storybook after upgrading to v7.0, it may quit with the following error: + +```sh +ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared +``` + +This can occur when manually upgrading from 6.5 to 7.0. To resolve it, you'll need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported (and no longer necessary) in Storybook 7+ with SvelteKit. + + + + diff --git a/docs/get-started/vue3-vite.md b/docs/get-started/vue3-vite.md index e79cc1f3b6fc..776281caf29b 100644 --- a/docs/get-started/vue3-vite.md +++ b/docs/get-started/vue3-vite.md @@ -28,8 +28,8 @@ Storybook for Vue & Vite is only supported in [Vue](?renderer=vue) projects. ## Requirements - Vue β‰₯ 3 -- Vite β‰₯ 3.0 (4.X recommended) -- Storybook β‰₯ 7.0 +- Vite β‰₯ 4.0 +- Storybook β‰₯ 8.0 ## Getting started diff --git a/docs/get-started/vue3-webpack5.md b/docs/get-started/vue3-webpack5.md new file mode 100644 index 000000000000..283ba4fbe2d3 --- /dev/null +++ b/docs/get-started/vue3-webpack5.md @@ -0,0 +1,197 @@ +--- +title: Storybook for Vue & Webpack +--- + +export const SUPPORTED_RENDERER = 'vue'; + +Storybook for Vue & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Vue & Webpack is only supported in [Vue](?renderer=vue) projects. + + + + + + + + + +## Requirements + +- Vue β‰₯ 3.0 +- Webpack β‰₯ 5.0 +- Storybook β‰₯ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Vue project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/vue3-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Extending the Vue application + +Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. +When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. + +Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. + +```js +// .storybook/preview.js + +import { setup } from '@storybook/vue3'; + +setup((app) => { + app.use(MyPlugin); + app.component('my-component', MyComponent); + app.mixin({ + /* My mixin */ + }); +}); +``` + +## Troubleshooting + +### Storybook doesn't work with my Vue 2 project + +[Vue 2 entered End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31st, 2023, and is no longer maintained by the Vue team. As a result, Storybook no longer supports Vue 2. We recommend you upgrade your project to Vue 3, which Storybook fully supports. If that's not an option, you can still use Storybook with Vue 2 by installing the latest version of Storybook 7 with the following command: + + + + + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```ts +// .storybook/main.ts +import type { StorybookConfig } from '@storybook/vue-webpack5'; + +const config: StorybookConfig = { + framework: { + name: '@storybook/vue-webpack5', + options: { + // ... + }, + }, +}; + +export default config; +``` + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + + + + diff --git a/docs/get-started/web-components-vite.md b/docs/get-started/web-components-vite.md new file mode 100644 index 000000000000..e6099d32e99a --- /dev/null +++ b/docs/get-started/web-components-vite.md @@ -0,0 +1,128 @@ +--- +title: Storybook for Web components & Vite +--- + +export const SUPPORTED_RENDERER = 'web-components'; + +Storybook for Web components & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/). + + + + + +Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects. + + + + + + + + + +## Requirements + +- Vite β‰₯ 4.0 +- Storybook β‰₯ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Web components project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/web-components-vite`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Then, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/web-components-vite', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md). + + + + diff --git a/docs/get-started/web-components-webpack5.md b/docs/get-started/web-components-webpack5.md new file mode 100644 index 000000000000..03e2205ccb20 --- /dev/null +++ b/docs/get-started/web-components-webpack5.md @@ -0,0 +1,215 @@ +--- +title: Storybook for Web components & Webpack +--- + +export const SUPPORTED_RENDERER = 'web-components'; + +Storybook for Web components & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Web components & Webpack is only supported in [Web components](?renderer=web-components) projects. + + + + + + + + + +## Requirements + +- Webpack β‰₯ 5.0 +- Storybook β‰₯ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Web components project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/web-components-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Hot Module Reloading (HMR) + +Web components are registered on global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas on how to achieve HMR with a static registry, there is no proven solution yet. Therefore, the best approach for now is to do full page reloads while developing. You can ensure those page reloads happen quickly by defining your stories as specific states of components (which we would recommend regardless). + +## Set up es6/7 dependencies + +By default, Storybook only works with precompiled ES5 code. Because most web components themselves and their libs are distributed as ES2017, you will need to manually mark those packages as "needs transpilation". + +For example, if you have a library called `my-library` which is in ES2017, then you can configure your project like so: + +```js +// .storybook/main.js + +export default { + webpackFinal: async (config) => { + // Find web-components rule for extra transpilation + const webComponentsRule = config.module.rules.find( + (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false + ); + // Add your own `my-library` + webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); + + return config; + }, +}; +``` + +By default, the following folders are transpiled: + +- `src/*.js` +- `packages/*/src/*.js` +- `node_modules/lit-html/*.js` +- `node_modules/lit-element/*.js` +- `node_modules/@open-wc/*.js` +- `node_modules/@polymer/*.js` +- `node_modules/@vaadin/*.js` + + + +Note that the `src` folder is also included. This provides some extra configuration to allow for `import.meta` and some other features. + +If you use a folder for your components/stories other than `src`, you will need to use the configuration example above to have it properly transpiled. + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/web-components-webpack5', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + +## Troubleshooting + +### Error while developing with HMR + +While developing a component, you might encounter this error: + +```sh +Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry +``` + +This error occurs because the component is already registered in the global registry. See the [limitations of HMR with web components](#hot-module-reloading-hmr) for more information. + + + + diff --git a/docs/snippets/react/react-vite-add-framework.js.mdx b/docs/snippets/react/react-vite-add-framework.js.mdx new file mode 100644 index 000000000000..7a268b5768f0 --- /dev/null +++ b/docs/snippets/react/react-vite-add-framework.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/main.js +export default { + // ... + // framework: '@storybook/react-webpack5', πŸ‘ˆ Remove this + framework: '@storybook/react-vite', // πŸ‘ˆ Add this +}; +``` diff --git a/docs/snippets/react/react-vite-add-framework.ts.mdx b/docs/snippets/react/react-vite-add-framework.ts.mdx new file mode 100644 index 000000000000..c407f12cc0a7 --- /dev/null +++ b/docs/snippets/react/react-vite-add-framework.ts.mdx @@ -0,0 +1,12 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/react-vite'; + +const config: StorybookConfig = { + // ... + // framework: '@storybook/react-webpack5', πŸ‘ˆ Remove this + framework: '@storybook/react-vite', // πŸ‘ˆ Add this +}; + +export default config; +``` diff --git a/docs/snippets/react/react-vite-install.npm.js.mdx b/docs/snippets/react/react-vite-install.npm.js.mdx new file mode 100644 index 000000000000..6a9b052c19bb --- /dev/null +++ b/docs/snippets/react/react-vite-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/react-vite +``` diff --git a/docs/snippets/react/react-vite-install.pnpm.js.mdx b/docs/snippets/react/react-vite-install.pnpm.js.mdx new file mode 100644 index 000000000000..10b128bb0b31 --- /dev/null +++ b/docs/snippets/react/react-vite-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/react-vite +``` diff --git a/docs/snippets/react/react-vite-install.yarn.js.mdx b/docs/snippets/react/react-vite-install.yarn.js.mdx new file mode 100644 index 000000000000..a566adef61ba --- /dev/null +++ b/docs/snippets/react/react-vite-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/react-vite +``` diff --git a/docs/snippets/react/react-webpack5-add-framework.js.mdx b/docs/snippets/react/react-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..cbacf99bd80a --- /dev/null +++ b/docs/snippets/react/react-webpack5-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/react-webpack5', // πŸ‘ˆ Add this +}; +``` diff --git a/docs/snippets/react/react-webpack5-add-framework.ts.mdx b/docs/snippets/react/react-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..2417fd5ea98a --- /dev/null +++ b/docs/snippets/react/react-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/react-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/react-webpack5', // πŸ‘ˆ Add this +}; + +export default config; +``` diff --git a/docs/snippets/react/react-webpack5-install.npm.js.mdx b/docs/snippets/react/react-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..8b54052f3f28 --- /dev/null +++ b/docs/snippets/react/react-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/react-webpack5 +``` diff --git a/docs/snippets/react/react-webpack5-install.pnpm.js.mdx b/docs/snippets/react/react-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..840d64ae06c9 --- /dev/null +++ b/docs/snippets/react/react-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/react-webpack5 +``` diff --git a/docs/snippets/react/react-webpack5-install.yarn.js.mdx b/docs/snippets/react/react-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..b4f143c8a120 --- /dev/null +++ b/docs/snippets/react/react-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/react-webpack5 +``` diff --git a/docs/snippets/svelte/svelte-csf-addon-install.npm.js.mdx b/docs/snippets/svelte/svelte-csf-addon-install.npm.js.mdx index 574d63651863..3889ca8909c4 100644 --- a/docs/snippets/svelte/svelte-csf-addon-install.npm.js.mdx +++ b/docs/snippets/svelte/svelte-csf-addon-install.npm.js.mdx @@ -1,3 +1,3 @@ ```shell -npm install @storybook/addon-svelte-csf --save-dev +npx storybook@latest add @storybook/addon-svelte-csf ``` diff --git a/docs/snippets/svelte/svelte-csf-addon-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-csf-addon-install.pnpm.js.mdx index 4ff9be66f107..eb8c09e0708c 100644 --- a/docs/snippets/svelte/svelte-csf-addon-install.pnpm.js.mdx +++ b/docs/snippets/svelte/svelte-csf-addon-install.pnpm.js.mdx @@ -1,3 +1,3 @@ ```shell -pnpm add --save-dev @storybook/addon-svelte-csf +pnpm dlx storybook@latest add @storybook/addon-svelte-csf ``` diff --git a/docs/snippets/svelte/svelte-csf-addon-install.yarn.js.mdx b/docs/snippets/svelte/svelte-csf-addon-install.yarn.js.mdx index 5b3e6dff23f6..52ecff831d4c 100644 --- a/docs/snippets/svelte/svelte-csf-addon-install.yarn.js.mdx +++ b/docs/snippets/svelte/svelte-csf-addon-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell -yarn add --dev @storybook/addon-svelte-csf +yarn storybook@latest add @storybook/addon-svelte-csf ``` diff --git a/docs/snippets/svelte/svelte-vite-add-framework.js.mdx b/docs/snippets/svelte/svelte-vite-add-framework.js.mdx new file mode 100644 index 000000000000..a16370254866 --- /dev/null +++ b/docs/snippets/svelte/svelte-vite-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/svelte-vite', // πŸ‘ˆ Add this +}; +``` diff --git a/docs/snippets/svelte/svelte-vite-add-framework.ts.mdx b/docs/snippets/svelte/svelte-vite-add-framework.ts.mdx new file mode 100644 index 000000000000..920d91ae6d13 --- /dev/null +++ b/docs/snippets/svelte/svelte-vite-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/svelte-vite'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/svelte-vite', // πŸ‘ˆ Add this +}; + +export default config; +``` diff --git a/docs/snippets/svelte/svelte-vite-install.npm.js.mdx b/docs/snippets/svelte/svelte-vite-install.npm.js.mdx new file mode 100644 index 000000000000..8b6986b5ecfa --- /dev/null +++ b/docs/snippets/svelte/svelte-vite-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/svelte-vite +``` diff --git a/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx new file mode 100644 index 000000000000..585bc12393ca --- /dev/null +++ b/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/svelte-vite +``` diff --git a/docs/snippets/svelte/svelte-vite-install.yarn.js.mdx b/docs/snippets/svelte/svelte-vite-install.yarn.js.mdx new file mode 100644 index 000000000000..7a8b11a4d500 --- /dev/null +++ b/docs/snippets/svelte/svelte-vite-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/svelte-vite +``` diff --git a/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx b/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..de6a0bdc94f0 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/svelte-webpack5', // πŸ‘ˆ Add this +}; +``` diff --git a/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx b/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..e2c5a9e91c04 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/svelte-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/svelte-webpack5', // πŸ‘ˆ Add this +}; + +export default config; +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..395d6086a967 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..34cd1d6fc725 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..0350df4376bf --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/sveltekit-add-framework.js.mdx b/docs/snippets/svelte/sveltekit-add-framework.js.mdx new file mode 100644 index 000000000000..12ea1574f451 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-add-framework.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/sveltekit', // πŸ‘ˆ Add this + // svelteOptions: { ... }, πŸ‘ˆ Remove this +}; +``` diff --git a/docs/snippets/svelte/sveltekit-add-framework.ts.mdx b/docs/snippets/svelte/sveltekit-add-framework.ts.mdx new file mode 100644 index 000000000000..d9b21745ab48 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-add-framework.ts.mdx @@ -0,0 +1,12 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/nextjs'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/sveltekit', // πŸ‘ˆ Add this + // svelteOptions: { ... }, πŸ‘ˆ Remove this +}; + +export default config; +``` diff --git a/docs/snippets/svelte/sveltekit-install.npm.js.mdx b/docs/snippets/svelte/sveltekit-install.npm.js.mdx new file mode 100644 index 000000000000..b63e43de7c6b --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/sveltekit +``` diff --git a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx new file mode 100644 index 000000000000..fcbd37499ee9 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/sveltekit +``` diff --git a/docs/snippets/svelte/sveltekit-install.yarn.js.mdx b/docs/snippets/svelte/sveltekit-install.yarn.js.mdx new file mode 100644 index 000000000000..2cb71e06c9ed --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/sveltekit +``` diff --git a/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx b/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..c5b6324a748e --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/vue3-webpack5', // πŸ‘ˆ Add this +}; +``` diff --git a/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx b/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..d83650ea1e35 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/vue3-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/vue3-webpack5', // πŸ‘ˆ Add this +}; + +export default config; +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..55a7bc78bd80 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..24ce6105b49e --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx b/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..e811a7ae3025 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-vite-add-framework.js.mdx b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx new file mode 100644 index 000000000000..25c7d8e1b51b --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/web-components-vite', // πŸ‘ˆ Add this +}; +``` diff --git a/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx new file mode 100644 index 000000000000..c4eee76aeb56 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/web-components-vite'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/web-components-vite', // πŸ‘ˆ Add this +}; + +export default config; +``` diff --git a/docs/snippets/web-components/web-components-vite-install.npm.js.mdx b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx new file mode 100644 index 000000000000..4472f27ea2a2 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx new file mode 100644 index 000000000000..c2fa67cea100 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx new file mode 100644 index 000000000000..895cf072d24a --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx b/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..620630a1322a --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/main.js +export default { + // ... + // framework: '@storybook/react-webpack5', πŸ‘ˆ Remove this + framework: '@storybook/nextjs', // πŸ‘ˆ Add this +}; +``` diff --git a/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx b/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..8ec81b767573 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/web-components-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/web-components-webpack5', // πŸ‘ˆ Add this +}; + +export default config; +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..cb74724ce972 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/web-components-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..91bf902cac48 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/web-components-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..561008e42cd4 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/web-components-webpack5 +``` diff --git a/docs/toc.js b/docs/toc.js index aecde723f11f..2ca9caac889e 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -33,11 +33,51 @@ module.exports = { title: 'Next.js', type: 'link', }, + { + pathSegment: 'react-vite', + title: 'React & Vite', + type: 'link', + }, + { + pathSegment: 'react-webpack5', + title: 'React & Webpack', + type: 'link', + }, + { + pathSegment: 'sveltekit', + title: 'SvelteKit', + type: 'link', + }, + { + pathSegment: 'svelte-vite', + title: 'Svelte & Vite', + type: 'link', + }, + { + pathSegment: 'svelte-webpack5', + title: 'Svelte & Webpack', + type: 'link', + }, { pathSegment: 'vue3-vite', title: 'Vue & Vite', type: 'link', }, + { + pathSegment: 'vue3-webpack5', + title: 'Vue & Webpack', + type: 'link', + }, + { + pathSegment: 'web-components-vite', + title: 'Web components & Vite', + type: 'link', + }, + { + pathSegment: 'web-components-webpack5', + title: 'Web components & Webpack', + type: 'link', + }, ], }, { diff --git a/docs/versions/next.json b/docs/versions/next.json index e522ee4c40f2..886c30ce74ce 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-rc.5","info":{"plain":"- CLI: Automigration fix version detection of upgrading related packages - [#26410](https://github.com/storybookjs/storybook/pull/26410), thanks @ndelangen!"}} +{"version":"8.1.0-alpha.0","info":{"plain":""}}