diff --git a/.circleci/config.yml b/.circleci/config.yml
index b34288f775cb..1cd268cbbe1b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -47,6 +47,19 @@ executors:
environment:
NODE_OPTIONS: --max_old_space_size=6144
resource_class: <>
+ sb_playwright_component_testing:
+ parameters:
+ class:
+ description: The Resource class
+ type: enum
+ enum: ["small", "medium", "medium+", "large", "xlarge"]
+ default: "small"
+ working_directory: /tmp/storybook
+ docker:
+ - image: mcr.microsoft.com/playwright:v1.42.1-jammy
+ environment:
+ NODE_OPTIONS: --max_old_space_size=6144
+ resource_class: <>
orbs:
git-shallow-clone: guitarrapc/git-shallow-clone@2.5.0
@@ -565,7 +578,39 @@ jobs:
STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
STORYBOOK_DISABLE_TELEMETRY: true
- report-workflow-on-failure
-
+ test-portable-stories:
+ parameters:
+ directory:
+ type: string
+ executor:
+ name: sb_playwright_component_testing
+ class: medium
+ steps:
+ - git-shallow-clone/checkout_advanced:
+ clone_options: "--depth 1 --verbose"
+ - attach_workspace:
+ at: .
+ - run:
+ name: Install dependencies
+ command: yarn install
+ working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+ - run:
+ name: Run Jest tests
+ command: yarn jest
+ working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+ - run:
+ name: Run Vitest tests
+ command: yarn vitest
+ working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+ - run:
+ name: Run Playwright CT tests
+ command: yarn playwright
+ working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+ - run:
+ name: Run Cypress CT tests
+ command: yarn cypress
+ working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+ - report-workflow-on-failure
workflows:
docs:
when:
@@ -624,6 +669,12 @@ workflows:
parallelism: 5
requires:
- build-sandboxes
+ - test-portable-stories:
+ requires:
+ - build
+ matrix:
+ parameters:
+ directory: ["react", "vue3", "nextjs", "svelte"]
# TODO: reenable once we find out the source of flakyness
# - test-runner-dev:
# requires:
@@ -676,6 +727,12 @@ workflows:
parallelism: 14
requires:
- build-sandboxes
+ - test-portable-stories:
+ requires:
+ - build
+ matrix:
+ parameters:
+ directory: ["react", "vue3", "nextjs", "svelte"]
- bench:
parallelism: 5
requires:
@@ -733,7 +790,12 @@ workflows:
parallelism: 30
requires:
- build-sandboxes
-
+ - test-portable-stories:
+ requires:
+ - build
+ matrix:
+ parameters:
+ directory: ["react", "vue3", "nextjs", "svelte"]
- test-empty-init:
requires:
- build
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a1978abc0d9..e731ddb2702c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,20 @@
+## 8.0.2
+
+- Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
+- CLI: Add yarn1 package manager fallback for init in empty directory - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
+- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
+- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
+- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
+- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
+- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
+
+## 8.0.1
+
+- Controls: Fix type summary when table.type unset - [#26283](https://github.com/storybookjs/storybook/pull/26283), thanks @shilman!
+- Core: Fix addon bundling script - [#26145](https://github.com/storybookjs/storybook/pull/26145), thanks @ndelangen!
+- Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks @ndelangen!
+- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
+
## 8.0.0
#### Storybook 8.0 is here
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 3474586b1d3f..21d52c2627ff 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,13 @@
+## 8.1.0-alpha.3
+
+- Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
+- CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
+- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
+- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
+- Portable stories: Introduce experimental Playwright CT API and Support for more renderers - [#26063](https://github.com/storybookjs/storybook/pull/26063), thanks @yannbf!
+- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
+- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
+
## 8.1.0-alpha.2
- CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!
diff --git a/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch b/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch
new file mode 100644
index 000000000000..212dfcc7d0ea
--- /dev/null
+++ b/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch
@@ -0,0 +1,97 @@
+diff --git a/package.json b/package.json
+index 195dac9ee7d42fdb76bb22dc37580fa0bffd4680..980ad42f41a06023f9f7e370fd382c9217c24be5 100644
+--- a/package.json
++++ b/package.json
+@@ -55,7 +55,7 @@
+ "contributors:generate": "all-contributors generate"
+ },
+ "peerDependencies": {
+- "svelte": "^3 || ^4"
++ "svelte": "^3 || ^4 || ^5"
+ },
+ "dependencies": {
+ "@testing-library/dom": "^9.3.1"
+diff --git a/src/pure.js b/src/pure.js
+index 6d4943412448c9f310f007ca7dab9d04cef90d0d..d62f4aebeb1b23ccc3c3d82aadd67075c6507c0e 100644
+--- a/src/pure.js
++++ b/src/pure.js
+@@ -3,7 +3,7 @@ import {
+ getQueriesForElement,
+ prettyDOM
+ } from '@testing-library/dom'
+-import { tick } from 'svelte'
++import { tick, mount, unmount } from 'svelte'
+
+ const containerCache = new Set()
+ const componentCache = new Set()
+@@ -54,40 +54,34 @@ const render = (
+ return { props: options }
+ }
+
+- let component = new ComponentConstructor({
++ let component = mount(ComponentConstructor, {
+ target,
+- ...checkProps(options)
++ ...checkProps(options),
++ ondestroy: () => componentCache.delete(component)
+ })
+
+ containerCache.add({ container, target, component })
+ componentCache.add(component)
+
+- component.$$.on_destroy.push(() => {
+- componentCache.delete(component)
+- })
+-
+ return {
+ container,
+ component,
+ debug: (el = container) => console.log(prettyDOM(el)),
+ rerender: (options) => {
+- if (componentCache.has(component)) component.$destroy()
++ if (componentCache.has(component)) unmount(component)
+
+ // eslint-disable-next-line no-new
+ component = new ComponentConstructor({
+ target,
+- ...checkProps(options)
++ ...checkProps(options),
++ ondestroy: () => componentCache.delete(component)
+ })
+
+ containerCache.add({ container, target, component })
+ componentCache.add(component)
+-
+- component.$$.on_destroy.push(() => {
+- componentCache.delete(component)
+- })
+ },
+ unmount: () => {
+- if (componentCache.has(component)) component.$destroy()
++ if (componentCache.has(component)) unmount(component)
+ },
+ ...getQueriesForElement(container, queries)
+ }
+@@ -96,7 +90,7 @@ const render = (
+ const cleanupAtContainer = (cached) => {
+ const { target, component } = cached
+
+- if (componentCache.has(component)) component.$destroy()
++ if (componentCache.has(component)) unmount(component)
+
+ if (target.parentNode === document.body) {
+ document.body.removeChild(target)
+@@ -109,9 +103,10 @@ const cleanup = () => {
+ Array.from(containerCache.keys()).forEach(cleanupAtContainer)
+ }
+
+-const act = async (fn) => {
+- if (fn) {
+- await fn()
++const act = (fn) => {
++ const value = fn && fn()
++ if (value !== undefined && typeof value.then === 'function') {
++ return value.then(() => tick())
+ }
+ return tick()
+ }
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 2dc509c9a535..898da685d063 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@@ -32,8 +32,12 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
- "./preview": "./dist/preview.js",
"./register": "./dist/manager.js",
"./package.json": "./package.json"
},
diff --git a/code/addons/a11y/src/components/Report/index.tsx b/code/addons/a11y/src/components/Report/index.tsx
index d231cc4cf0e2..83bcb1705d32 100644
--- a/code/addons/a11y/src/components/Report/index.tsx
+++ b/code/addons/a11y/src/components/Report/index.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react';
import React, { Fragment } from 'react';
-import { Placeholder } from '@storybook/components';
+import { EmptyTabContent } from '@storybook/components';
import type { Result } from 'axe-core';
import { Item } from './Item';
@@ -18,7 +18,7 @@ export const Report: FC = ({ items, empty, type }) => (
{items && items.length ? (
items.map((item) => )
) : (
- {empty}
+
)}
);
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index 3daab0e6523b..b950ef7541f2 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
@@ -33,8 +33,12 @@
"require": "./dist/decorator.js",
"import": "./dist/decorator.mjs"
},
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
- "./preview": "./dist/preview.js",
"./register.js": "./dist/manager.js",
"./package.json": "./package.json"
},
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index e1628ec59e9c..360313cda8da 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
@@ -32,8 +32,12 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
- "./preview": "./dist/preview.js",
"./register": "./dist/manager.js",
"./package.json": "./package.json"
},
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index 1ef789220bb4..c2c1fb7bb5c1 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 74e561e9f36b..f533ea16b4e8 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 bd5e7c1d3042..6f4e84134370 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
@@ -28,22 +28,50 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
- "./actions/preview": "./dist/actions/preview.js",
+ "./actions/preview": {
+ "types": "./dist/actions/preview.d.ts",
+ "import": "./dist/actions/preview.mjs",
+ "require": "./dist/actions/preview.js"
+ },
"./actions/manager": "./dist/actions/manager.js",
- "./backgrounds/preview": "./dist/backgrounds/preview.js",
+ "./backgrounds/preview": {
+ "types": "./dist/backgrounds/preview.d.ts",
+ "import": "./dist/backgrounds/preview.mjs",
+ "require": "./dist/backgrounds/preview.js"
+ },
"./backgrounds/manager": "./dist/backgrounds/manager.js",
"./controls/manager": "./dist/controls/manager.js",
- "./docs/preview": "./dist/docs/preview.js",
+ "./docs/preview": {
+ "types": "./dist/docs/preview.d.ts",
+ "import": "./dist/docs/preview.mjs",
+ "require": "./dist/docs/preview.js"
+ },
"./docs/preset": "./dist/docs/preset.js",
"./docs/mdx-react-shim": "./dist/docs/mdx-react-shim.js",
- "./highlight/preview": "./dist/highlight/preview.js",
- "./measure/preview": "./dist/measure/preview.js",
+ "./highlight/preview": {
+ "types": "./dist/highlight/preview.d.ts",
+ "import": "./dist/highlight/preview.mjs",
+ "require": "./dist/highlight/preview.js"
+ },
+ "./measure/preview": {
+ "types": "./dist/measure/preview.d.ts",
+ "import": "./dist/measure/preview.mjs",
+ "require": "./dist/measure/preview.js"
+ },
"./measure/manager": "./dist/measure/manager.js",
- "./outline/preview": "./dist/outline/preview.js",
+ "./outline/preview": {
+ "types": "./dist/outline/preview.d.ts",
+ "import": "./dist/outline/preview.mjs",
+ "require": "./dist/outline/preview.js"
+ },
"./outline/manager": "./dist/outline/manager.js",
"./toolbars/manager": "./dist/toolbars/manager.js",
"./viewport/manager": "./dist/viewport/manager.js",
- "./viewport/preview": "./dist/viewport/preview.js",
+ "./viewport/preview": {
+ "types": "./dist/viewport/preview.d.ts",
+ "import": "./dist/viewport/preview.mjs",
+ "require": "./dist/viewport/preview.js"
+ },
"./package.json": "./package.json"
},
"main": "dist/index.js",
diff --git a/code/addons/essentials/src/measure/preview.ts b/code/addons/essentials/src/measure/preview.ts
index 647ef4345a6d..c34063ac4ca4 100644
--- a/code/addons/essentials/src/measure/preview.ts
+++ b/code/addons/essentials/src/measure/preview.ts
@@ -1,2 +1 @@
-// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-measure/preview';
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
index c667a4e101a0..64e7e88642b6 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-mdx-gfm",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "GitHub Flavored Markdown in Storybook",
"keywords": [
"addon",
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index 4a5d8848e411..88fe06084831 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",
@@ -30,7 +30,11 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
- "./preview": "./dist/preview.js",
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./package.json": "./package.json"
},
"main": "dist/index.js",
diff --git a/code/addons/highlight/src/preview.ts b/code/addons/highlight/src/preview.ts
index 1948f7b39d97..794417ef0d9d 100644
--- a/code/addons/highlight/src/preview.ts
+++ b/code/addons/highlight/src/preview.ts
@@ -8,18 +8,12 @@ const { document } = global;
type OutlineStyle = 'dotted' | 'dashed' | 'solid' | 'double';
-export const highlightStyle = (color = '#FF4785', style: OutlineStyle = 'dashed') => `
+const highlightStyle = (color = '#FF4785', style: OutlineStyle = 'dashed') => `
outline: 2px ${style} ${color};
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
`;
-export const highlightObject = (color: string) => ({
- outline: `2px dashed ${color}`,
- outlineOffset: 2,
- boxShadow: '0 0 0 6px rgba(255,255,255,0.6)',
-});
-
interface HighlightInfo {
/** html selector of the element */
elements: string[];
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index f39a3065e103..97ee6a62d549 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
@@ -28,8 +28,12 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
- "./preview": "./dist/preview.js",
"./preset": "./dist/preset.js",
"./register.js": "./dist/manager.js",
"./package.json": "./package.json"
diff --git a/code/addons/interactions/src/components/EmptyState.tsx b/code/addons/interactions/src/components/EmptyState.tsx
index d4fa62c144a4..0cb5ecba69e2 100644
--- a/code/addons/interactions/src/components/EmptyState.tsx
+++ b/code/addons/interactions/src/components/EmptyState.tsx
@@ -1,43 +1,11 @@
import React, { useEffect, useState } from 'react';
-import { Link } from '@storybook/components';
+import { Link, EmptyTabContent } from '@storybook/components';
import { DocumentIcon, VideoIcon } from '@storybook/icons';
-import { Consumer, useStorybookApi } from '@storybook/manager-api';
+import { useStorybookApi } from '@storybook/manager-api';
import { styled } from '@storybook/theming';
import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
-const Wrapper = styled.div(({ theme }) => ({
- height: '100%',
- display: 'flex',
- padding: 0,
- alignItems: 'center',
- justifyContent: 'center',
- flexDirection: 'column',
- gap: 15,
- background: theme.background.content,
-}));
-
-const Content = styled.div({
- display: 'flex',
- flexDirection: 'column',
- gap: 4,
- maxWidth: 415,
-});
-
-const Title = styled.div(({ theme }) => ({
- fontWeight: theme.typography.weight.bold,
- fontSize: theme.typography.size.s2 - 1,
- textAlign: 'center',
- color: theme.textColor,
-}));
-
-const Description = styled.div(({ theme }) => ({
- fontWeight: theme.typography.weight.regular,
- fontSize: theme.typography.size.s2 - 1,
- textAlign: 'center',
- color: theme.textMutedColor,
-}));
-
const Links = styled.div(({ theme }) => ({
display: 'flex',
fontSize: theme.typography.size.s2 - 1,
@@ -73,27 +41,25 @@ export const Empty = () => {
if (isLoading) return null;
return (
-
-
- Interaction testing
-
+
Interaction tests allow you to verify the functional aspects of UIs. Write a play function
for your story and you'll see it run here.
-
-
-
-
- Watch 8m video
-
-
-
- {({ state }) => (
-
- Read docs
-
- )}
-
-
-
+ >
+ }
+ footer={
+
+
+ Watch 8m video
+
+
+
+ Read docs
+
+
+ }
+ />
);
};
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 7177f576cf1b..2556af6a499a 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 4effdb357a7c..781ed6d1af40 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"addon",
@@ -33,8 +33,12 @@
"require": "./dist/react/index.js",
"import": "./dist/react/index.mjs"
},
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
- "./preview": "./dist/preview.js",
"./register": "./dist/manager.js",
"./package.json": "./package.json"
},
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index 71616e30727c..ede9123dc5ec 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
@@ -31,8 +31,12 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
- "./preview": "./dist/preview.js",
"./register": "./dist/manager.js",
"./package.json": "./package.json"
},
diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index 807075ae94ae..622e609d8c0d 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-onboarding",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 96f83f0b4b15..ae51d10b6154 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
@@ -34,8 +34,12 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
- "./preview": "./dist/preview.js",
"./register": "./dist/manager.js",
"./package.json": "./package.json"
},
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index 660ee804e658..f8b9176b2b83 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 2724c1b9450b..6e7c0c579cbd 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-themes",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Switch between multiple themes for you components in Storybook",
"keywords": [
"css",
@@ -33,8 +33,12 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
- "./preview": "./dist/preview.js",
"./package.json": "./package.json",
"./postinstall": "./postinstall.js"
},
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index b0b429dd7d82..4b389c1325d5 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 eecdb09fb296..144b48d4ace3 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",
@@ -29,7 +29,11 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
- "./preview": "./dist/preview.js",
+ "./preview": {
+ "types": "./dist/preview.d.ts",
+ "require": "./dist/preview.js",
+ "import": "./dist/preview.mjs"
+ },
"./manager": "./dist/manager.js",
"./package.json": "./package.json"
},
diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json
index aa5a0b24edb4..33a03c89dc10 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook manager builder",
"keywords": [
"storybook"
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index a890bdc9f8d8..af7f64e7cba9 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 92e784322294..78a2202c05fa 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts
index 37fb76fb814c..8302a9a6a338 100644
--- a/code/e2e-tests/tags.spec.ts
+++ b/code/e2e-tests/tags.spec.ts
@@ -9,7 +9,9 @@ test.describe('tags', () => {
await new SbPage(page).waitUntilLoaded();
});
- test('should correctly filter dev-only, docs-only, test-only stories', async ({ page }) => {
+ test('@flaky: should correctly filter dev-only, docs-only, test-only stories', async ({
+ page,
+ }) => {
const sbPage = new SbPage(page);
await sbPage.navigateToStory('lib/preview-api/tags', 'docs');
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 4b092e00a771..ead540f12732 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
"keywords": [
"storybook",
@@ -34,7 +34,7 @@
],
"scripts": {
"check": "node ../../../scripts/node_modules/.bin/tsc",
- "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts"
+ "prep": "rimraf dist && node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "workspace:*",
@@ -65,18 +65,18 @@
},
"devDependencies": {
"@analogjs/vite-plugin-angular": "^0.2.24",
- "@angular-devkit/architect": "^0.1700.5",
- "@angular-devkit/build-angular": "^17.0.5",
- "@angular-devkit/core": "^17.0.5",
- "@angular/animations": "^17.0.5",
- "@angular/cli": "^17.0.5",
- "@angular/common": "^17.0.5",
- "@angular/compiler": "^17.0.5",
- "@angular/compiler-cli": "^17.0.5",
- "@angular/core": "^17.0.5",
- "@angular/forms": "^17.0.5",
- "@angular/platform-browser": "^17.0.5",
- "@angular/platform-browser-dynamic": "^17.0.5",
+ "@angular-devkit/architect": "^0.1703.0",
+ "@angular-devkit/build-angular": "^17.3.0",
+ "@angular-devkit/core": "^17.3.0",
+ "@angular/animations": "^17.3.0",
+ "@angular/cli": "^17.3.0",
+ "@angular/common": "^17.3.0",
+ "@angular/compiler": "^17.3.0",
+ "@angular/compiler-cli": "^17.3.0",
+ "@angular/core": "^17.3.0",
+ "@angular/forms": "^17.3.0",
+ "@angular/platform-browser": "^17.3.0",
+ "@angular/platform-browser-dynamic": "^17.3.0",
"@types/cross-spawn": "^6.0.2",
"@types/tmp": "^0.2.3",
"cross-spawn": "^7.0.3",
@@ -115,6 +115,7 @@
},
"builders": "dist/builders/builders.json",
"bundler": {
+ "post": "./scripts/postbuild.js",
"tsConfig": "tsconfig.build.json"
},
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
diff --git a/code/frameworks/angular/scripts/postbuild.js b/code/frameworks/angular/scripts/postbuild.js
new file mode 100644
index 000000000000..68af6389ac37
--- /dev/null
+++ b/code/frameworks/angular/scripts/postbuild.js
@@ -0,0 +1,16 @@
+/**
+ * This postbuild fix is needed to add a ts-ignore to the generated public-types.d.ts file.
+ * The AngularCore.InputSignal and AngularCore.InputSignalWithTransform types do not exist in Angular
+ * versions < 17.2. In these versions, the unresolved types will error and prevent Storybook from starting/building.
+ * This postbuild script adds a ts-ignore statement above the unresolved types to prevent the errors.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const filePath = path.join(__dirname, '../dist/client/public-types.d.ts');
+const fileContent = fs.readFileSync(filePath, 'utf8');
+const newContent = fileContent
+ .replaceAll(/(type AngularInputSignal)/g, '// @ts-ignore\n$1')
+ .replaceAll(/(type AngularOutputEmitterRef)/g, '// @ts-ignore\n$1');
+fs.writeFileSync(filePath, newContent, 'utf8');
diff --git a/code/frameworks/angular/src/client/public-types.ts b/code/frameworks/angular/src/client/public-types.ts
index 02571ddf1411..9469cfda489e 100644
--- a/code/frameworks/angular/src/client/public-types.ts
+++ b/code/frameworks/angular/src/client/public-types.ts
@@ -1,3 +1,5 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
import {
AnnotatedStoryFn,
Args,
@@ -9,7 +11,7 @@ import {
StrictArgs,
ProjectAnnotations,
} from '@storybook/types';
-import { EventEmitter } from '@angular/core';
+import * as AngularCore from '@angular/core';
import { AngularRenderer } from './types';
export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
@@ -21,27 +23,63 @@ export type { AngularRenderer };
*
* @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
*/
-export type Meta = ComponentAnnotations>;
+export type Meta = ComponentAnnotations<
+ AngularRenderer,
+ TransformComponentType
+>;
/**
* Story function that represents a CSFv2 component example.
*
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
*/
-export type StoryFn = AnnotatedStoryFn>;
+export type StoryFn = AnnotatedStoryFn<
+ AngularRenderer,
+ TransformComponentType
+>;
/**
* Story object that represents a CSFv3 component example.
*
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
*/
-export type StoryObj = StoryAnnotations>;
+export type StoryObj = StoryAnnotations<
+ AngularRenderer,
+ TransformComponentType
+>;
export type Decorator = DecoratorFunction;
export type Loader = LoaderFunction;
export type StoryContext = GenericStoryContext;
export type Preview = ProjectAnnotations;
+/**
+ * Utility type that transforms InputSignal and EventEmitter types
+ */
+type TransformComponentType = TransformInputSignalType>>
+
+// @ts-ignore Angular < 17.2 doesn't export InputSignal
+type AngularInputSignal = AngularCore.InputSignal
+// @ts-ignore Angular < 17.2 doesn't export InputSignalWithTransform
+type AngularInputSignalWithTransform = AngularCore.InputSignalWithTransform
+// @ts-ignore Angular < 17.3 doesn't export AngularOutputEmitterRef
+type AngularOutputEmitterRef = AngularCore.OutputEmitterRef
+
+type AngularHasInputSignal = typeof AngularCore extends { input: infer U } ? true : false;
+type AngularHasOutputSignal = typeof AngularCore extends { output: infer U } ? true : false;
+
+type InputSignal = AngularHasInputSignal extends true ? AngularInputSignal : never;
+type InputSignalWithTransform = AngularHasInputSignal extends true ? AngularInputSignalWithTransform : never;
+type OutputEmitterRef = AngularHasOutputSignal extends true ? AngularOutputEmitterRef : never;
+
+type TransformInputSignalType = {
+ [K in keyof T]: T[K] extends InputSignal ? E : T[K] extends InputSignalWithTransform ? U : T[K];
+};
+
+type TransformOutputSignalType = {
+ [K in keyof T]: T[K] extends OutputEmitterRef ? (e: E) => void : T[K];
+};
+
type TransformEventType = {
- [K in keyof T]: T[K] extends EventEmitter ? (e: E) => void : T[K];
+ [K in keyof T]: T[K] extends AngularCore.EventEmitter ? (e: E) => void : T[K];
};
diff --git a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts
new file mode 100644
index 000000000000..4077bc044c9b
--- /dev/null
+++ b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts
@@ -0,0 +1,50 @@
+import { Component, Input, input, output } from '@angular/core';
+
+@Component({
+ // Needs to be a different name to the CLI template button
+ selector: 'storybook-signal-button',
+ template: ` `,
+ styleUrls: ['./button.css'],
+})
+export default class SignalButtonComponent {
+ /**
+ * Is this the principal call to action on the page?
+ */
+ primary = input(false);
+
+ /**
+ * What background color to use
+ */
+ @Input()
+ backgroundColor?: string;
+
+ /**
+ * How large should the button be?
+ */
+ size = input('medium', {
+ transform: (val: 'small' | 'medium') => val,
+ });
+
+ /**
+ * Button contents
+ */
+ label = input.required({ transform: (val: string) => val.trim() });
+
+ /**
+ * Optional click handler
+ */
+ onClick = output();
+
+ public get classes(): string[] {
+ const mode = this.primary() ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+ return ['storybook-button', `storybook-button--${this.size()}`, mode];
+ }
+}
diff --git a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.css b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.css
new file mode 100644
index 000000000000..dc91dc76370b
--- /dev/null
+++ b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.css
@@ -0,0 +1,30 @@
+.storybook-button {
+ font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: 700;
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ line-height: 1;
+}
+.storybook-button--primary {
+ color: white;
+ background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+ color: #333;
+ background-color: transparent;
+ box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+ font-size: 12px;
+ padding: 10px 16px;
+}
+.storybook-button--medium {
+ font-size: 14px;
+ padding: 11px 20px;
+}
+.storybook-button--large {
+ font-size: 16px;
+ padding: 12px 24px;
+}
diff --git a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts
new file mode 100644
index 000000000000..df634f190962
--- /dev/null
+++ b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts
@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { fn } from '@storybook/test';
+import SignalButtonComponent from './button.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta: Meta = {
+ component: SignalButtonComponent,
+ tags: ['autodocs'],
+ argTypes: {
+ backgroundColor: {
+ control: 'color',
+ },
+ // The following argTypes are necessary,
+ // because Compodoc does not support Angular's new input and output signals yet
+ primary: {
+ type: 'boolean',
+ },
+ size: {
+ control: {
+ type: 'radio',
+ },
+ options: ['small', 'medium'],
+ },
+ label: {
+ type: 'string',
+ },
+ },
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {
+ onClick: fn(),
+ primary: false,
+ size: 'medium',
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+ args: {
+ primary: true,
+ label: 'Button',
+ },
+};
+
+export const Secondary: Story = {
+ args: {
+ label: 'Button',
+ },
+};
+
+export const Medium: Story = {
+ args: {
+ size: 'medium',
+ label: 'Button',
+ },
+};
+
+export const Small: Story = {
+ args: {
+ size: 'small',
+ label: 'Button',
+ },
+};
diff --git a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts
new file mode 100644
index 000000000000..4077bc044c9b
--- /dev/null
+++ b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts
@@ -0,0 +1,50 @@
+import { Component, Input, input, output } from '@angular/core';
+
+@Component({
+ // Needs to be a different name to the CLI template button
+ selector: 'storybook-signal-button',
+ template: ` `,
+ styleUrls: ['./button.css'],
+})
+export default class SignalButtonComponent {
+ /**
+ * Is this the principal call to action on the page?
+ */
+ primary = input(false);
+
+ /**
+ * What background color to use
+ */
+ @Input()
+ backgroundColor?: string;
+
+ /**
+ * How large should the button be?
+ */
+ size = input('medium', {
+ transform: (val: 'small' | 'medium') => val,
+ });
+
+ /**
+ * Button contents
+ */
+ label = input.required({ transform: (val: string) => val.trim() });
+
+ /**
+ * Optional click handler
+ */
+ onClick = output();
+
+ public get classes(): string[] {
+ const mode = this.primary() ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+ return ['storybook-button', `storybook-button--${this.size()}`, mode];
+ }
+}
diff --git a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css
new file mode 100644
index 000000000000..dc91dc76370b
--- /dev/null
+++ b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css
@@ -0,0 +1,30 @@
+.storybook-button {
+ font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: 700;
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ line-height: 1;
+}
+.storybook-button--primary {
+ color: white;
+ background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+ color: #333;
+ background-color: transparent;
+ box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+ font-size: 12px;
+ padding: 10px 16px;
+}
+.storybook-button--medium {
+ font-size: 14px;
+ padding: 11px 20px;
+}
+.storybook-button--large {
+ font-size: 16px;
+ padding: 12px 24px;
+}
diff --git a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.stories.ts b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.stories.ts
new file mode 100644
index 000000000000..df634f190962
--- /dev/null
+++ b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.stories.ts
@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { fn } from '@storybook/test';
+import SignalButtonComponent from './button.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta: Meta = {
+ component: SignalButtonComponent,
+ tags: ['autodocs'],
+ argTypes: {
+ backgroundColor: {
+ control: 'color',
+ },
+ // The following argTypes are necessary,
+ // because Compodoc does not support Angular's new input and output signals yet
+ primary: {
+ type: 'boolean',
+ },
+ size: {
+ control: {
+ type: 'radio',
+ },
+ options: ['small', 'medium'],
+ },
+ label: {
+ type: 'string',
+ },
+ },
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ args: {
+ onClick: fn(),
+ primary: false,
+ size: 'medium',
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+ args: {
+ primary: true,
+ label: 'Button',
+ },
+};
+
+export const Secondary: Story = {
+ args: {
+ label: 'Button',
+ },
+};
+
+export const Medium: Story = {
+ args: {
+ size: 'medium',
+ label: 'Button',
+ },
+};
+
+export const Small: Story = {
+ args: {
+ size: 'small',
+ label: 'Button',
+ },
+};
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index d1497db30bb5..1a6d5da0bd4a 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 373f427ec596..707cc08a1af1 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 3a85be3262a6..f18571c8a56a 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 e20925a884dc..89ba93015e31 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/nextjs",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for Next.js",
"keywords": [
"storybook",
diff --git a/code/frameworks/nextjs/src/index.ts b/code/frameworks/nextjs/src/index.ts
index fcb073fefcd6..a904f93ec89d 100644
--- a/code/frameworks/nextjs/src/index.ts
+++ b/code/frameworks/nextjs/src/index.ts
@@ -1 +1,2 @@
export * from './types';
+export * from './portable-stories';
diff --git a/code/frameworks/nextjs/src/portable-stories.ts b/code/frameworks/nextjs/src/portable-stories.ts
new file mode 100644
index 000000000000..01948d524c2c
--- /dev/null
+++ b/code/frameworks/nextjs/src/portable-stories.ts
@@ -0,0 +1,126 @@
+import {
+ composeStory as originalComposeStory,
+ composeStories as originalComposeStories,
+ setProjectAnnotations as originalSetProjectAnnotations,
+ composeConfigs,
+} from '@storybook/preview-api';
+import type {
+ Args,
+ ProjectAnnotations,
+ StoryAnnotationsOrFn,
+ Store_CSFExports,
+ StoriesWithPartialProps,
+} from '@storybook/types';
+
+// ! ATTENTION: This needs to be a relative import so it gets prebundled. This is to avoid ESM issues in Nextjs + Jest setups
+import { INTERNAL_DEFAULT_PROJECT_ANNOTATIONS as reactAnnotations } from '../../../renderers/react/src/portable-stories';
+import * as nextJsAnnotations from './preview';
+
+import type { ReactRenderer, Meta } from '@storybook/react';
+
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/nextjs';
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(
+ projectAnnotations: ProjectAnnotations | ProjectAnnotations[]
+) {
+ originalSetProjectAnnotations(projectAnnotations);
+}
+
+// This will not be necessary once we have auto preset loading
+const defaultProjectAnnotations: ProjectAnnotations = composeConfigs([
+ reactAnnotations,
+ nextJsAnnotations,
+]);
+
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/nextjs';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ * const { getByText } = render(Hello world);
+ * expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+export function composeStory(
+ story: StoryAnnotationsOrFn,
+ componentAnnotations: Meta,
+ projectAnnotations?: ProjectAnnotations,
+ exportsName?: string
+) {
+ return originalComposeStory(
+ story as StoryAnnotationsOrFn,
+ componentAnnotations,
+ projectAnnotations,
+ defaultProjectAnnotations,
+ exportsName
+ );
+}
+
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/nextjs';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ * const { getByText } = render(Hello world);
+ * expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+export function composeStories>(
+ csfExports: TModule,
+ projectAnnotations?: ProjectAnnotations
+) {
+ // @ts-expect-error (Converted from ts-ignore)
+ const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
+
+ return composedStories as unknown as Omit<
+ StoriesWithPartialProps,
+ keyof Store_CSFExports
+ >;
+}
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index b165b0164ba2..bcc6f95be1f6 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 e7fda5da9f47..73d43b969e51 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index ac8d8647ae42..2847033aa952 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index 11aafe32b6c0..c31a9f1a2860 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 a7ef06bbb39e..fb1229ae4b18 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index f95ec88b2fd0..c93ad69ea83f 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 6ebda301a4ff..1a16442c90fa 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index d9b9add4d64c..3d3d328927fb 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/sveltekit",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for SvelteKit",
"keywords": [
"storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 6e16a27e77f9..b772057a8f94 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 18d24a887cf3..89e5566e1c28 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index fd88e3065c0e..ba23356d9552 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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/package.json b/code/frameworks/web-components-webpack5/package.json
index bc6f2203394d..93eb833d8e5d 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 71dd7ba71571..01d77227729c 100644
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channels",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index c892bf210a83..22b785f2058e 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
{
"name": "sb",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 6c2b0b5139ed..c74d465c8309 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "storybook",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 0e589f1c3844..eacc3faa3753 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 e815a0f37e4d..b1c043af7722 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index f710303aff95..eb23890dc0f2 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 3443c8b4763f..a5aeeb71197b 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 f7862e1a90fc..044c150b3425 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.1.0-alpha.2',
- '@storybook/addon-actions': '8.1.0-alpha.2',
- '@storybook/addon-backgrounds': '8.1.0-alpha.2',
- '@storybook/addon-controls': '8.1.0-alpha.2',
- '@storybook/addon-docs': '8.1.0-alpha.2',
- '@storybook/addon-essentials': '8.1.0-alpha.2',
- '@storybook/addon-highlight': '8.1.0-alpha.2',
- '@storybook/addon-interactions': '8.1.0-alpha.2',
- '@storybook/addon-jest': '8.1.0-alpha.2',
- '@storybook/addon-links': '8.1.0-alpha.2',
- '@storybook/addon-mdx-gfm': '8.1.0-alpha.2',
- '@storybook/addon-measure': '8.1.0-alpha.2',
- '@storybook/addon-onboarding': '8.1.0-alpha.2',
- '@storybook/addon-outline': '8.1.0-alpha.2',
- '@storybook/addon-storysource': '8.1.0-alpha.2',
- '@storybook/addon-themes': '8.1.0-alpha.2',
- '@storybook/addon-toolbars': '8.1.0-alpha.2',
- '@storybook/addon-viewport': '8.1.0-alpha.2',
- '@storybook/angular': '8.1.0-alpha.2',
- '@storybook/blocks': '8.1.0-alpha.2',
- '@storybook/builder-manager': '8.1.0-alpha.2',
- '@storybook/builder-vite': '8.1.0-alpha.2',
- '@storybook/builder-webpack5': '8.1.0-alpha.2',
- '@storybook/channels': '8.1.0-alpha.2',
- '@storybook/cli': '8.1.0-alpha.2',
- '@storybook/client-logger': '8.1.0-alpha.2',
- '@storybook/codemod': '8.1.0-alpha.2',
- '@storybook/components': '8.1.0-alpha.2',
- '@storybook/core-common': '8.1.0-alpha.2',
- '@storybook/core-events': '8.1.0-alpha.2',
- '@storybook/core-server': '8.1.0-alpha.2',
- '@storybook/core-webpack': '8.1.0-alpha.2',
- '@storybook/csf-plugin': '8.1.0-alpha.2',
- '@storybook/csf-tools': '8.1.0-alpha.2',
- '@storybook/docs-tools': '8.1.0-alpha.2',
- '@storybook/ember': '8.1.0-alpha.2',
- '@storybook/html': '8.1.0-alpha.2',
- '@storybook/html-vite': '8.1.0-alpha.2',
- '@storybook/html-webpack5': '8.1.0-alpha.2',
- '@storybook/instrumenter': '8.1.0-alpha.2',
- '@storybook/manager': '8.1.0-alpha.2',
- '@storybook/manager-api': '8.1.0-alpha.2',
- '@storybook/nextjs': '8.1.0-alpha.2',
- '@storybook/node-logger': '8.1.0-alpha.2',
- '@storybook/preact': '8.1.0-alpha.2',
- '@storybook/preact-vite': '8.1.0-alpha.2',
- '@storybook/preact-webpack5': '8.1.0-alpha.2',
- '@storybook/preset-create-react-app': '8.1.0-alpha.2',
- '@storybook/preset-html-webpack': '8.1.0-alpha.2',
- '@storybook/preset-preact-webpack': '8.1.0-alpha.2',
- '@storybook/preset-react-webpack': '8.1.0-alpha.2',
- '@storybook/preset-server-webpack': '8.1.0-alpha.2',
- '@storybook/preset-svelte-webpack': '8.1.0-alpha.2',
- '@storybook/preset-vue3-webpack': '8.1.0-alpha.2',
- '@storybook/preview': '8.1.0-alpha.2',
- '@storybook/preview-api': '8.1.0-alpha.2',
- '@storybook/react': '8.1.0-alpha.2',
- '@storybook/react-dom-shim': '8.1.0-alpha.2',
- '@storybook/react-vite': '8.1.0-alpha.2',
- '@storybook/react-webpack5': '8.1.0-alpha.2',
- '@storybook/router': '8.1.0-alpha.2',
- '@storybook/server': '8.1.0-alpha.2',
- '@storybook/server-webpack5': '8.1.0-alpha.2',
- '@storybook/source-loader': '8.1.0-alpha.2',
- '@storybook/svelte': '8.1.0-alpha.2',
- '@storybook/svelte-vite': '8.1.0-alpha.2',
- '@storybook/svelte-webpack5': '8.1.0-alpha.2',
- '@storybook/sveltekit': '8.1.0-alpha.2',
- '@storybook/telemetry': '8.1.0-alpha.2',
- '@storybook/test': '8.1.0-alpha.2',
- '@storybook/theming': '8.1.0-alpha.2',
- '@storybook/types': '8.1.0-alpha.2',
- '@storybook/vue3': '8.1.0-alpha.2',
- '@storybook/vue3-vite': '8.1.0-alpha.2',
- '@storybook/vue3-webpack5': '8.1.0-alpha.2',
- '@storybook/web-components': '8.1.0-alpha.2',
- '@storybook/web-components-vite': '8.1.0-alpha.2',
- '@storybook/web-components-webpack5': '8.1.0-alpha.2',
- sb: '8.1.0-alpha.2',
- storybook: '8.1.0-alpha.2',
+ '@storybook/addon-a11y': '8.1.0-alpha.3',
+ '@storybook/addon-actions': '8.1.0-alpha.3',
+ '@storybook/addon-backgrounds': '8.1.0-alpha.3',
+ '@storybook/addon-controls': '8.1.0-alpha.3',
+ '@storybook/addon-docs': '8.1.0-alpha.3',
+ '@storybook/addon-essentials': '8.1.0-alpha.3',
+ '@storybook/addon-highlight': '8.1.0-alpha.3',
+ '@storybook/addon-interactions': '8.1.0-alpha.3',
+ '@storybook/addon-jest': '8.1.0-alpha.3',
+ '@storybook/addon-links': '8.1.0-alpha.3',
+ '@storybook/addon-mdx-gfm': '8.1.0-alpha.3',
+ '@storybook/addon-measure': '8.1.0-alpha.3',
+ '@storybook/addon-onboarding': '8.1.0-alpha.3',
+ '@storybook/addon-outline': '8.1.0-alpha.3',
+ '@storybook/addon-storysource': '8.1.0-alpha.3',
+ '@storybook/addon-themes': '8.1.0-alpha.3',
+ '@storybook/addon-toolbars': '8.1.0-alpha.3',
+ '@storybook/addon-viewport': '8.1.0-alpha.3',
+ '@storybook/angular': '8.1.0-alpha.3',
+ '@storybook/blocks': '8.1.0-alpha.3',
+ '@storybook/builder-manager': '8.1.0-alpha.3',
+ '@storybook/builder-vite': '8.1.0-alpha.3',
+ '@storybook/builder-webpack5': '8.1.0-alpha.3',
+ '@storybook/channels': '8.1.0-alpha.3',
+ '@storybook/cli': '8.1.0-alpha.3',
+ '@storybook/client-logger': '8.1.0-alpha.3',
+ '@storybook/codemod': '8.1.0-alpha.3',
+ '@storybook/components': '8.1.0-alpha.3',
+ '@storybook/core-common': '8.1.0-alpha.3',
+ '@storybook/core-events': '8.1.0-alpha.3',
+ '@storybook/core-server': '8.1.0-alpha.3',
+ '@storybook/core-webpack': '8.1.0-alpha.3',
+ '@storybook/csf-plugin': '8.1.0-alpha.3',
+ '@storybook/csf-tools': '8.1.0-alpha.3',
+ '@storybook/docs-tools': '8.1.0-alpha.3',
+ '@storybook/ember': '8.1.0-alpha.3',
+ '@storybook/html': '8.1.0-alpha.3',
+ '@storybook/html-vite': '8.1.0-alpha.3',
+ '@storybook/html-webpack5': '8.1.0-alpha.3',
+ '@storybook/instrumenter': '8.1.0-alpha.3',
+ '@storybook/manager': '8.1.0-alpha.3',
+ '@storybook/manager-api': '8.1.0-alpha.3',
+ '@storybook/nextjs': '8.1.0-alpha.3',
+ '@storybook/node-logger': '8.1.0-alpha.3',
+ '@storybook/preact': '8.1.0-alpha.3',
+ '@storybook/preact-vite': '8.1.0-alpha.3',
+ '@storybook/preact-webpack5': '8.1.0-alpha.3',
+ '@storybook/preset-create-react-app': '8.1.0-alpha.3',
+ '@storybook/preset-html-webpack': '8.1.0-alpha.3',
+ '@storybook/preset-preact-webpack': '8.1.0-alpha.3',
+ '@storybook/preset-react-webpack': '8.1.0-alpha.3',
+ '@storybook/preset-server-webpack': '8.1.0-alpha.3',
+ '@storybook/preset-svelte-webpack': '8.1.0-alpha.3',
+ '@storybook/preset-vue3-webpack': '8.1.0-alpha.3',
+ '@storybook/preview': '8.1.0-alpha.3',
+ '@storybook/preview-api': '8.1.0-alpha.3',
+ '@storybook/react': '8.1.0-alpha.3',
+ '@storybook/react-dom-shim': '8.1.0-alpha.3',
+ '@storybook/react-vite': '8.1.0-alpha.3',
+ '@storybook/react-webpack5': '8.1.0-alpha.3',
+ '@storybook/router': '8.1.0-alpha.3',
+ '@storybook/server': '8.1.0-alpha.3',
+ '@storybook/server-webpack5': '8.1.0-alpha.3',
+ '@storybook/source-loader': '8.1.0-alpha.3',
+ '@storybook/svelte': '8.1.0-alpha.3',
+ '@storybook/svelte-vite': '8.1.0-alpha.3',
+ '@storybook/svelte-webpack5': '8.1.0-alpha.3',
+ '@storybook/sveltekit': '8.1.0-alpha.3',
+ '@storybook/telemetry': '8.1.0-alpha.3',
+ '@storybook/test': '8.1.0-alpha.3',
+ '@storybook/theming': '8.1.0-alpha.3',
+ '@storybook/types': '8.1.0-alpha.3',
+ '@storybook/vue3': '8.1.0-alpha.3',
+ '@storybook/vue3-vite': '8.1.0-alpha.3',
+ '@storybook/vue3-webpack5': '8.1.0-alpha.3',
+ '@storybook/web-components': '8.1.0-alpha.3',
+ '@storybook/web-components-vite': '8.1.0-alpha.3',
+ '@storybook/web-components-webpack5': '8.1.0-alpha.3',
+ sb: '8.1.0-alpha.3',
+ storybook: '8.1.0-alpha.3',
};
diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json
index 34bdb12ff1df..173a01d7d7d5 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 116f04f82503..291f7c6ab323 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index e09ad6f237b0..04f107d789dc 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index d1a1ca1e4b39..da1737a6aedf 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 286030fbeab5..ea20c33f696a 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 c9d20ed1589d..bafce9663d50 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 5f85747fdd44..9e71a3b5430f 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/instrumenter",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts
index 3eeb6ea86ed8..57c812109e89 100644
--- a/code/lib/instrumenter/src/instrumenter.ts
+++ b/code/lib/instrumenter/src/instrumenter.ts
@@ -102,7 +102,7 @@ export class Instrumenter {
// Restore state from the parent window in case the iframe was reloaded.
// @ts-expect-error (TS doesn't know about this global variable)
- this.state = global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {};
+ this.state = global.window?.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {};
// When called from `start`, isDebugging will be true.
const resetState = ({
@@ -242,8 +242,10 @@ export class Instrumenter {
const patch = typeof update === 'function' ? update(state) : update;
this.state = { ...this.state, [storyId]: { ...state, ...patch } };
// Track state on the parent window so we can reload the iframe without losing state.
- // @ts-expect-error (TS doesn't know about this global variable)
- global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state;
+ if (global.window?.parent) {
+ // @ts-expect-error fix this later in d.ts file
+ global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state;
+ }
}
cleanup() {
@@ -259,8 +261,10 @@ export class Instrumenter {
);
const payload: SyncPayload = { controlStates: controlsDisabled, logItems: [] };
this.channel.emit(EVENTS.SYNC, payload);
- // @ts-expect-error (TS doesn't know about this global variable)
- global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state;
+ if (global.window?.parent) {
+ // @ts-expect-error fix this later in d.ts file
+ global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state;
+ }
}
getLog(storyId: string): LogItem[] {
@@ -426,7 +430,7 @@ export class Instrumenter {
const { flags, source } = value;
return { __regexp__: { flags, source } };
}
- if (value instanceof global.window.HTMLElement) {
+ if (value instanceof global.window?.HTMLElement) {
const { prefix, localName, id, classList, innerText } = value;
const classNames = Array.from(classList);
return { __element__: { prefix, localName, id, classNames, innerText } };
@@ -640,23 +644,23 @@ export function instrument>(
let forceInstrument = false;
let skipInstrument = false;
- if (global.window.location?.search?.includes('instrument=true')) {
+ if (global.window?.location?.search?.includes('instrument=true')) {
forceInstrument = true;
- } else if (global.window.location?.search?.includes('instrument=false')) {
+ } else if (global.window?.location?.search?.includes('instrument=false')) {
skipInstrument = true;
}
// Don't do any instrumentation if not loaded in an iframe unless it's forced - instrumentation can also be skipped.
- if ((global.window.parent === global.window && !forceInstrument) || skipInstrument) {
+ if ((global.window?.parent === global.window && !forceInstrument) || skipInstrument) {
return obj;
}
// Only create an instance if we don't have one (singleton) yet.
- if (!global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__) {
+ if (global.window && !global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__) {
global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__ = new Instrumenter();
}
- const instrumenter: Instrumenter = global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__;
+ const instrumenter: Instrumenter = global.window?.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__;
return instrumenter.instrument(obj, options);
} catch (e) {
// Access to the parent window might fail due to CORS restrictions.
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index 1e7c935d38c8..11ac1473f60a 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Core Storybook Manager API & Context",
"keywords": [
"storybook"
@@ -49,6 +49,7 @@
"@storybook/core-events": "workspace:*",
"@storybook/csf": "^0.1.2",
"@storybook/global": "^5.0.0",
+ "@storybook/icons": "^1.2.5",
"@storybook/router": "workspace:*",
"@storybook/theming": "workspace:*",
"@storybook/types": "workspace:*",
diff --git a/code/lib/manager-api/src/modules/whatsnew.ts b/code/lib/manager-api/src/modules/whatsnew.tsx
similarity index 96%
rename from code/lib/manager-api/src/modules/whatsnew.ts
rename to code/lib/manager-api/src/modules/whatsnew.tsx
index 8f465325d503..abdda88d6b10 100644
--- a/code/lib/manager-api/src/modules/whatsnew.ts
+++ b/code/lib/manager-api/src/modules/whatsnew.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import { global } from '@storybook/global';
import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events';
import {
@@ -7,6 +8,7 @@ import {
TOGGLE_WHATS_NEW_NOTIFICATIONS,
} from '@storybook/core-events';
import type { ModuleFn } from '../lib/types';
+import { StorybookIcon } from '@storybook/icons';
export type SubState = {
whatsNewData?: WhatsNewData;
@@ -95,7 +97,7 @@ export const init: ModuleFn = ({ fullAPI, store, provider }) => {
headline: whatsNewData.title,
subHeadline: "Learn what's new in Storybook",
},
- icon: { name: 'storybook' },
+ icon: ,
onClear({ dismissed }: any) {
if (dismissed) {
setWhatsNewCache({ lastDismissedPost: whatsNewData.url });
diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts
index 3da3e62dd300..5a7155b190a6 100644
--- a/code/lib/manager-api/src/version.ts
+++ b/code/lib/manager-api/src/version.ts
@@ -1 +1 @@
-export const version = '8.1.0-alpha.2';
+export const version = '8.1.0-alpha.3';
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index 48bb3b3c9e88..a65b0ea17db9 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index 435067df6dc2..95e0fc8c5514 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/preview-api/src/index.ts b/code/lib/preview-api/src/index.ts
index e47cdaa0a0dd..779cfeba1557 100644
--- a/code/lib/preview-api/src/index.ts
+++ b/code/lib/preview-api/src/index.ts
@@ -62,6 +62,8 @@ export {
sortStoriesV7,
} from './store';
+export { createPlaywrightTest } from './modules/store/csf/portable-stories';
+
export type { PropDescriptor } from './store';
/**
diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
index 47465eacc8e5..57e8fcda9a2b 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
@@ -1,5 +1,7 @@
+/* eslint-disable no-underscore-dangle */
/* eslint-disable @typescript-eslint/naming-convention */
import { isExportStory } from '@storybook/csf';
+import dedent from 'ts-dedent';
import type {
Renderer,
Args,
@@ -161,3 +163,68 @@ export function composeStories(
return composedStories;
}
+
+type WrappedStoryRef = { __pw_type: 'jsx' | 'importRef' };
+type UnwrappedJSXStoryRef = {
+ __pw_type: 'jsx';
+ type: ComposedStoryFn;
+};
+type UnwrappedImportStoryRef = ComposedStoryFn;
+
+declare global {
+ function __pwUnwrapObject(
+ storyRef: WrappedStoryRef
+ ): Promise;
+}
+
+export function createPlaywrightTest(
+ baseTest: TFixture
+): TFixture {
+ return baseTest.extend({
+ mount: async ({ mount, page }: any, use: any) => {
+ await use(async (storyRef: WrappedStoryRef, ...restArgs: any) => {
+ // Playwright CT deals with JSX import references differently than normal imports
+ // and we can currently only handle JSX import references
+ if (
+ !('__pw_type' in storyRef) ||
+ ('__pw_type' in storyRef && storyRef.__pw_type !== 'jsx')
+ ) {
+ // eslint-disable-next-line local-rules/no-uncategorized-errors
+ throw new Error(dedent`
+ Portable stories in Playwright CT only work when referencing JSX elements.
+ Please use JSX format for your components such as:
+
+ instead of:
+ await mount(MyComponent, { props: { foo: 'bar' } })
+
+ do:
+ await mount()
+
+ More info: https://storybook.js.org/docs/api/portable-stories-playwright
+ `);
+ }
+
+ await page.evaluate(async (wrappedStoryRef: WrappedStoryRef) => {
+ const unwrappedStoryRef = await globalThis.__pwUnwrapObject?.(wrappedStoryRef);
+ const story =
+ '__pw_type' in unwrappedStoryRef ? unwrappedStoryRef.type : unwrappedStoryRef;
+ return story?.load?.();
+ }, storyRef);
+
+ // mount the story
+ const mountResult = await mount(storyRef, ...restArgs);
+
+ // play the story in the browser
+ await page.evaluate(async (wrappedStoryRef: WrappedStoryRef) => {
+ const unwrappedStoryRef = await globalThis.__pwUnwrapObject?.(wrappedStoryRef);
+ const story =
+ '__pw_type' in unwrappedStoryRef ? unwrappedStoryRef.type : unwrappedStoryRef;
+ const canvasElement = document.querySelector('#root');
+ return story?.play?.({ canvasElement });
+ }, storyRef);
+
+ return mountResult;
+ });
+ },
+ });
+}
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
index ea6424b413ec..fb46f24df7fc 100644
--- a/code/lib/preview/package.json
+++ b/code/lib/preview/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index c309b132643f..0b595f92df83 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index e7f9f20364ff..5dcf468fbd98 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Core Storybook Router",
"keywords": [
"storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 5fd602c8606a..4752e290e697 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Source loader",
"keywords": [
"lib",
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index 5fd68d7b45e9..61a1dbb343b6 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/telemetry",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 b7c4c51ce1fe..845c1468b941 100644
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/test",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 07fdd55f1117..ea92d73de728 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Core Storybook Components",
"keywords": [
"storybook"
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index 628b3b01ed0d..fe8ab39911eb 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/types",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Core Storybook TS Types",
"keywords": [
"storybook"
diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts
index cee23ca903ee..1ccc98cc9e24 100644
--- a/code/lib/types/src/modules/api.ts
+++ b/code/lib/types/src/modules/api.ts
@@ -120,6 +120,14 @@ interface OnClearOptions {
dismissed: boolean;
}
+/**
+ * @deprecated Use ReactNode for the icon instead.
+ * @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated
+ */
+interface DeprecatedIconType {
+ name: string;
+ color?: string;
+}
export interface API_Notification {
id: string;
link: string;
@@ -127,10 +135,8 @@ export interface API_Notification {
headline: string;
subHeadline?: string | any;
};
- icon?: {
- name: string;
- color?: string;
- };
+ // TODO: Remove DeprecatedIconType in 9.0
+ icon?: React.ReactNode | DeprecatedIconType;
onClear?: (options: OnClearOptions) => void;
}
diff --git a/code/package.json b/code/package.json
index e47e25c64686..3d0f18dc7067 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"private": true,
"description": "Storybook root",
"homepage": "https://storybook.js.org/",
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 4d33a0ae1f84..50730f5188bc 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 f9ecf7e6dc68..a56d88e1d373 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 c4f8dab8d0bf..1c58ec8cd98f 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 758a5ecd94d5..5505bf7a0ab8 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 60344d4ef408..00fb9b825266 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 da22cc8797ba..c839a3f66aa5 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 9f07fe5d5054..13245bfa9563 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.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"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 f0a5bd45caef..63c1eecdc6fc 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook HTML renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 26765ae38554..5d63e345fbed 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook Preact renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index a73eb90118ce..76da8b0c4b35 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "8.1.0-alpha.2",
+ "version": "8.1.0-alpha.3",
"description": "Storybook React renderer",
"keywords": [
"storybook"
@@ -26,6 +26,12 @@
"require": "./dist/index.js",
"import": "./dist/index.mjs"
},
+ "./experimental-playwright": {
+ "types": "./dist/playwright.d.ts",
+ "node": "./dist/playwright.js",
+ "require": "./dist/playwright.js",
+ "import": "./dist/playwright.mjs"
+ },
"./preset": "./preset.js",
"./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
"./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
@@ -101,7 +107,8 @@
"./src/preset.ts",
"./src/entry-preview.ts",
"./src/entry-preview-docs.ts",
- "./src/entry-preview-rsc.tsx"
+ "./src/entry-preview-rsc.tsx",
+ "./src/playwright.ts"
],
"platform": "browser"
},
diff --git a/code/renderers/react/src/__test__/Button.stories.tsx b/code/renderers/react/src/__test__/Button.stories.tsx
index 277f92ddde1f..fc78c1f27d63 100644
--- a/code/renderers/react/src/__test__/Button.stories.tsx
+++ b/code/renderers/react/src/__test__/Button.stories.tsx
@@ -4,6 +4,8 @@ import type { StoryFn as CSF2Story, StoryObj as CSF3Story, Meta } from '..';
import type { ButtonProps } from './Button';
import { Button } from './Button';
+import type { HandlerFunction } from '@storybook/addon-actions';
+import { action } from '@storybook/addon-actions';
const meta = {
title: 'Example/Button',
@@ -124,3 +126,35 @@ export const LoaderStory: CSF3Story<{ mockFn: (val: string) => string }> = {
expect(mockFn).toHaveBeenCalledWith('render');
},
};
+
+export const WithActionArg: CSF3Story<{ someActionArg: HandlerFunction }> = {
+ args: {
+ someActionArg: action('some-action-arg'),
+ },
+ render: (args) => {
+ args.someActionArg('in render');
+ return (
+
+
+
+
+
+
+