diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index ba472744a8f1..954092e8d2e2 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -4,11 +4,10 @@ Closes # - ## What I did diff --git a/CHANGELOG.md b/CHANGELOG.md index e424acc666c1..28d18cedd4ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,108 @@ +## 7.6.0 + +Storybook 7.6 is here with increased performance and much more! + +- 🔥 Improved SWC support +- 🧪 New test utilities and fast build mode +- 🔼 NextJS SWC + avif support & fixes +- 🤡 SvelteKit page and navigation mocking +- ⚛️ React-docgen upgrade +- 🎨 Controls a11y, background theming, and viewports +- 🩺 CLI: The doctor is in! +- 🚫 Addons: Remove React as a peer dependency +- 🪦 Storyshots and Vue2 deprecated + +
+ + 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)! +
+ ## 7.5.2 - Addon-themes: Fix globals not being set when using absolute path - [#24596](https://github.com/storybookjs/storybook/pull/24596), thanks [@JReinhold](https://github.com/JReinhold)! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index d389bce1cfb6..5ef41fa93384 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,33 @@ +## 8.0.0-alpha.0 + +- Addon Viewport: Expose types for user parameter validation - [#24896](https://github.com/storybookjs/storybook/pull/24896), thanks [@piratetaco](https://github.com/piratetaco)! +- Packages: Remove unused/deprecated packages - [#24528](https://github.com/storybookjs/storybook/pull/24528), thanks [@ndelangen](https://github.com/ndelangen)! +- Vite: use user's `build.target` - [#23123](https://github.com/storybookjs/storybook/pull/23123), thanks [@Hoishin](https://github.com/Hoishin)! +- CLI: Remove `sb extract` command - [#24653](https://github.com/storybookjs/storybook/pull/24653), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Improve project root detection logic - [#20791](https://github.com/storybookjs/storybook/pull/20791), thanks [@dobesv](https://github.com/dobesv)! +- Core: Prebundling globalize the core-event sub paths - [#24976](https://github.com/storybookjs/storybook/pull/24976), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Remove `storiesOf`-API - [#24655](https://github.com/storybookjs/storybook/pull/24655), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: `StorybookConfig` `stories`-field support type async function - [#21555](https://github.com/storybookjs/storybook/pull/21555), thanks [@imccausl](https://github.com/imccausl)! +- Dependencies: Update Typescript - [#24970](https://github.com/storybookjs/storybook/pull/24970), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Dependencies: Upgrade monorepo to TS5 - [#24440](https://github.com/storybookjs/storybook/pull/24440), thanks [@ndelangen](https://github.com/ndelangen)! +- TypeScript: Migrate `@storybook/preset-create-react-app` to strict TS - [#22395](https://github.com/storybookjs/storybook/pull/22395), thanks [@kuriacka](https://github.com/kuriacka)! +- Manager: Enable refs filtered via `experimental_setFilter` - [#24211](https://github.com/storybookjs/storybook/pull/24211), thanks [@ndelangen](https://github.com/ndelangen)! +- MDX: Theme `fontCode` not applied consistently when writing MDX - [#23110](https://github.com/storybookjs/storybook/pull/23110), thanks [@gitstart-storybook](https://github.com/gitstart-storybook)! +- UI: Bring back role main - [#24411](https://github.com/storybookjs/storybook/pull/24411), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Fix `IconButton` not being aligned correctly in blocks - [#24529](https://github.com/storybookjs/storybook/pull/24529), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Fix button size on controls - [#24737](https://github.com/storybookjs/storybook/pull/24737), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Fix layout height - [#24370](https://github.com/storybookjs/storybook/pull/24370), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Fix notifications not appearing in new layout - [#24281](https://github.com/storybookjs/storybook/pull/24281), thanks [@jreinhold](https://github.com/jreinhold)! +- UI: Fix theming not updating - [#24399](https://github.com/storybookjs/storybook/pull/24399), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Improved `Button` and `IconButton` - [#24266](https://github.com/storybookjs/storybook/pull/24266), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Keep mobile drawer open on component selection - [#24258](https://github.com/storybookjs/storybook/pull/24258), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Mobile truncate story name - [#24372](https://github.com/storybookjs/storybook/pull/24372), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: New icon library - [#24433](https://github.com/storybookjs/storybook/pull/24433), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Replace `Form.Button` with the new `Button` component - [#24360](https://github.com/storybookjs/storybook/pull/24360), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Screen reader announcing changes for expand/collapse button - [#24984](https://github.com/storybookjs/storybook/pull/24984), thanks [@wjdtjdgns](https://github.com/wjdtjdgns)! +- UI: Upgrade manager to React v18 - [#24514](https://github.com/storybookjs/storybook/pull/24514), thanks [@ndelangen](https://github.com/ndelangen)! +- UI: sidebar UI updates - [#24707](https://github.com/storybookjs/storybook/pull/24707), thanks [@cdedreuille](https://github.com/cdedreuille)! + ## 7.6.0-beta.2 - 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)! diff --git a/CHANGELOG.v6.md b/CHANGELOG.v6.md index 391f14fed6ed..8501b232d289 100644 --- a/CHANGELOG.v6.md +++ b/CHANGELOG.v6.md @@ -4942,7 +4942,7 @@ Storybook 6.0 is here! - 🧬 [Args: Next-generation, dynamic story format](https://medium.com/storybookjs/introducing-storybook-args-2dadcdb777cc) - 🎛 [Controls: Live edit component examples](https://medium.com/storybookjs/storybook-controls-ce82af93e430) - 🌐 [Composition: Combine multiple Storybooks](https://medium.com/storybookjs/storybook-composition-af0da9084fba) -- 📚 [Documentation: Complete project overhaul](https://storybook.js.org/docs/react/get-started/introduction) +- 📚 [Documentation: Complete project overhaul](https://storybook.js.org/docs/react/get-started) 6.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `6.0.0-alpha.*`, `6.0.0-beta.*`, and `6.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.3` or earlier. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 78993afd8386..d90fef7e5ee5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -55,4 +55,4 @@ yarn task --task dev --template --start-from=publish # Contributing to Storybook -For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/react/contribute/how-to-contribute). +For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute). diff --git a/MAINTAINERS.md b/MAINTAINERS.md index 191dc42d5b90..e7640a31d10e 100644 --- a/MAINTAINERS.md +++ b/MAINTAINERS.md @@ -25,7 +25,7 @@ This document outlines some of the processes that the maintainers should adhere | compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) | | components | Issue, bug, or pull request related to Storybook's internal components | | composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) | -| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) | +| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/index.md) | | core | Issue, bug, or pull request related to Storybook's Core | | cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/)) | | CSF | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.md) | diff --git a/MIGRATION.md b/MIGRATION.md index 30407b38ab71..fd74c25472d8 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -3,8 +3,9 @@ - [From version 7.x to 8.0.0](#from-version-7x-to-800) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) + - [Autotitle breaking fixes](#autotitle-breaking-fixes) - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons) - - [Storyshots has been removed](#storyshots-has-been-removed) + - [Storyshots has been removed](#storyshots-has-been-removed) - [UI layout state has changed shape](#ui-layout-state-has-changed-shape) - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components) - [Icons is deprecated](#icons-is-deprecated) @@ -49,6 +50,7 @@ - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) - [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks) + - [Dark mode detection](#dark-mode-detection) - [7.0 core addons changes](#70-core-addons-changes) - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator) - [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter) @@ -372,6 +374,18 @@ To summarize: ### Core changes +#### Autotitle breaking fixes + +In Storybook 7, the file name `path/to/foo.bar.stories.js` would result in the [autotitle](https://storybook.js.org/docs/react/configure/overview#configure-story-loading) `path/to/foo`. In 8.0, this has been changed to generate `path/to/foo.bar`. We consider this a bugfix but it is also a breaking change if you depended on the old behavior. To get the old titles, you can manually specify the desired title in the default export of your story file. For example: + +```js +export default { + title: 'path/to/foo', +} +``` + +Alternatively, if you need to achieve a different behavior for a large number of files, you can provide a [custom indexer](https://storybook.js.org/docs/7.0/vue/configure/sidebar-and-urls#processing-custom-titles) to generate the titles dynamically. + #### React v18 in the manager UI (including addons) Storybook 7 used React 16 in the manager. In Storybook 8 this is upgraded to react v18. @@ -379,7 +393,7 @@ Addons that inject UI into panels, tools, etc. are possibly affected by this. Addon authors are advised to upgrade to react v18. -##### Storyshots has been removed +#### Storyshots has been removed Storyshots was an addon for storybook which allowed users to turn their stories into automated snapshot-tests. @@ -1105,7 +1119,7 @@ import ReadMe from './README.md?raw'; #### Stories field in .storybook/main.js is mandatory In 6.x, the `stories` key field in `.storybook/main.js` was optional. In 7.0, it is mandatory. -Please follow up the [Configure your Storybook project](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project) section to configure your Storybook project. +Please follow up the [Configure your Storybook project](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project) section to configure your Storybook project. #### Stricter global types @@ -1206,6 +1220,14 @@ export default { }; ``` +#### Dark mode detection + +Storybook 7 uses `prefers-color-scheme` to detects your system's dark mode preference if a theme is not set. + +Earlier versions used the light theme by default, so if you don't set a theme and your system's settings are in dark mode, this could surprise you. + +To learn more about theming, read our [documentation](https://storybook.js.org/docs/react/configure/theming). + ### 7.0 core addons changes #### Removed auto injection of @storybook/addon-actions decorator diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 8410e7675f90..8c3d602ae05d 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/README.md b/code/addons/actions/README.md index 71bf4a2f53d6..80d2bd5d746c 100644 --- a/code/addons/actions/README.md +++ b/code/addons/actions/README.md @@ -8,13 +8,13 @@ Storybook Addon Actions can be used to display data received by event handlers i ## Installation -Actions is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Actions is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-actions ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 840c7481df18..8485ef374cd2 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/README.md b/code/addons/backgrounds/README.md index 62c88e19a7e7..481ba54bcd2f 100644 --- a/code/addons/backgrounds/README.md +++ b/code/addons/backgrounds/README.md @@ -8,7 +8,7 @@ Storybook Addon Backgrounds can be used to change background colors inside the p ## Installation -Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-backgrounds @@ -16,7 +16,7 @@ npm i -D @storybook/addon-backgrounds ## Configuration -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 88479d56d2bd..de569b1b5284 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md index cb37957a0766..0622e23a302c 100644 --- a/code/addons/controls/README.md +++ b/code/addons/controls/README.md @@ -8,13 +8,13 @@ ## Installation -Controls is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Controls is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-controls ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 90ea2642a762..8d0a57d586f2 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.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 87122e127f54..514cbe8f7c90 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.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 3a47f5855578..d45b5d4961c9 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts index 358cf796a579..b2d879c2d794 100644 --- a/code/addons/essentials/src/index.ts +++ b/code/addons/essentials/src/index.ts @@ -3,15 +3,55 @@ import { logger } from '@storybook/node-logger'; import { serverRequire } from '@storybook/core-common'; interface PresetOptions { + /** + * Allow to use @storybook/addon-actions + * @see https://storybook.js.org/addons/@storybook/addon-actions + * @default true + */ actions?: boolean; + /** + * Allow to use @storybook/addon-backgrounds + * @see https://storybook.js.org/addons/@storybook/addon-backgrounds + * @default true + */ backgrounds?: boolean; configDir: string; + /** + * Allow to use @storybook/addon-controls + * @see https://storybook.js.org/addons/@storybook/addon-controls + * @default true + */ controls?: boolean; + /** + * Allow to use @storybook/addon-docs + * @see https://storybook.js.org/addons/@storybook/addon-docs + * @default true + */ docs?: boolean; + /** + * Allow to use @storybook/addon-measure + * @see https://storybook.js.org/addons/@storybook/addon-measure + * @default true + */ measure?: boolean; + /** + * Allow to use @storybook/addon-outline + * @see https://storybook.js.org/addons/@storybook/addon-outline + * @default true + */ outline?: boolean; themes?: boolean; + /** + * Allow to use @storybook/addon-toolbars + * @see https://storybook.js.org/addons/@storybook/addon-toolbars + * @default true + */ toolbars?: boolean; + /** + * Allow to use @storybook/addon-viewport + * @see https://storybook.js.org/addons/@storybook/addon-viewport + * @default true + */ viewport?: boolean; } diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index f3eeb90b0501..0fa499b4aa73 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md index e4b245acc5fd..5f7ffbe0c3a9 100644 --- a/code/addons/highlight/README.md +++ b/code/addons/highlight/README.md @@ -8,7 +8,7 @@ Use it to call attention to particular parts of the story. Or use it to enhance ## Usage -This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command: +This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command: yarn: diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 120613f19673..a7a9bf35411a 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.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 b5e9140bbdc4..bc5cf130bb32 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/README.md b/code/addons/jest/README.md index 50678d636094..ec2cc8a34c6c 100644 --- a/code/addons/jest/README.md +++ b/code/addons/jest/README.md @@ -20,7 +20,7 @@ Or if you're using yarn as a package manager: ## Configuration -Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): ```js export default { @@ -133,7 +133,7 @@ Default.parameters = { ### Global level To avoid importing the results of the tests in each story, you can update -your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: +your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: ```js // .storybook/preview.js diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 9a32eabe1c98..b76131fe4618 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.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 565ef44f6f80..7ba44c50ac77 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/README.md b/code/addons/measure/README.md index ca1387d474c8..8e280f150124 100644 --- a/code/addons/measure/README.md +++ b/code/addons/measure/README.md @@ -12,7 +12,7 @@ Storybook addon for inspecting layouts and visualizing the box model. ## Usage -This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-measure diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index e1e256d5863a..b0dbca6a0553 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/README.md b/code/addons/outline/README.md index 301c140c3cff..e73da501a3f6 100644 --- a/code/addons/outline/README.md +++ b/code/addons/outline/README.md @@ -6,13 +6,13 @@ Storybook Addon Outline can be used for visually debugging CSS layout and alignm ## Usage -Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-outline ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index c3027f76585b..3b3ba8ec915a 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.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 1f564a9602de..8f657c2e4d86 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.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/README.md b/code/addons/themes/README.md index 5ed36f2c4050..55bc748fd48f 100644 --- a/code/addons/themes/README.md +++ b/code/addons/themes/README.md @@ -12,7 +12,7 @@ Requires Storybook 7.0 or later. If you need to add it to your Storybook, you ca npm i -D @storybook/addon-themes ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 2edb9b7c2488..a094429d12b4 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md index b6cf730ab141..560966c094ce 100644 --- a/code/addons/toolbars/README.md +++ b/code/addons/toolbars/README.md @@ -12,13 +12,13 @@ The Toolbars addon controls global story rendering options from [Storybook's](ht ## Installation -Toolbars is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Toolbars is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-toolbars ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 80ba3891dedb..515a241ed04d 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md index 196c5e0b0aa5..3766d555f8b3 100644 --- a/code/addons/viewport/README.md +++ b/code/addons/viewport/README.md @@ -8,13 +8,13 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes ## Installation -Viewport is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Viewport is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-viewport ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index b47cf9aa903f..80d650b26432 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.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 db8469fcc11e..894660ab1f76 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 261857257f6b..4866c584d6f4 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.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 3c9f218fdd85..fe8dbfb60959 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts index 53c4fba32df5..b4725b4a1f4c 100644 --- a/code/builders/builder-webpack5/src/index.ts +++ b/code/builders/builder-webpack5/src/index.ts @@ -61,7 +61,6 @@ export const executor = { export const getConfig: WebpackBuilder['getConfig'] = async (options) => { const { presets } = options; const typescriptOptions = await presets.apply('typescript', {}, options); - const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions }); const frameworkOptions = await presets.apply('frameworkOptions'); return presets.apply( @@ -69,7 +68,6 @@ export const getConfig: WebpackBuilder['getConfig'] = async (options) => { {}, { ...options, - babelOptions, typescriptOptions, frameworkOptions, } diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 89f34d2b6e99..ac573827715a 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -55,7 +55,7 @@ const storybookPaths: Record = { }; export default async ( - options: Options & Record & { typescriptOptions: TypescriptOptions } + options: Options & { typescriptOptions: TypescriptOptions } ): Promise => { const { outputDir = join('.', 'public'), @@ -64,7 +64,6 @@ export default async ( configType, presets, previewUrl, - babelOptions, typescriptOptions, features, } = options; @@ -238,7 +237,7 @@ export default async ( }, builderOptions.useSWC ? await createSWCLoader(Object.keys(virtualModuleMapping), options) - : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)), + : await createBabelLoader(options, typescriptOptions, Object.keys(virtualModuleMapping)), { test: /\.md$/, type: 'asset/source', diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts index f10bd93a5ebc..868d35ba394c 100644 --- a/code/builders/builder-webpack5/src/preview/loaders.ts +++ b/code/builders/builder-webpack5/src/preview/loaders.ts @@ -5,18 +5,19 @@ import { logger } from '@storybook/node-logger'; import type { Options } from '@storybook/types'; import type { TypescriptOptions } from '../types'; -export const createBabelLoader = ( - options: any, +export const createBabelLoader = async ( + options: Options & { typescriptOptions: TypescriptOptions }, typescriptOptions: TypescriptOptions, excludes: string[] = [] ) => { logger.info(dedent`Using Babel compiler`); + const babelOptions = await options.presets.apply('babel', {}, options); return { test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/, use: [ { loader: require.resolve('babel-loader'), - options, + options: babelOptions, }, ], include: [getProjectRoot()], diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 05e03971ed78..bdc500c756e2 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "7.6.0-beta.2", + "version": "8.0.0-alpha.0", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts index 8f280fb0c763..3809c0e3dd19 100644 --- a/code/frameworks/angular/template/cli/Button.stories.ts +++ b/code/frameworks/angular/template/cli/Button.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; import Button from './button.component'; -// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories const meta: Meta