+
Router pathname: {Router.pathname}
pathname: {router.pathname}
searchparams:{' '}
@@ -63,9 +67,42 @@ export default {
query: {
foo: 'bar',
},
+ prefetch: () => {
+ console.log('custom prefetch');
+ },
},
},
},
-};
+} as Meta
;
+
+export const Default: StoryObj = {
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement);
+ const routerMock = getRouter();
+
+ await step('Router property overrides should be available in useRouter fn', async () => {
+ await expect(Router.pathname).toBe('/hello');
+ await expect(Router.query).toEqual({ foo: 'bar' });
+ });
-export const Default = {};
+ await step(
+ 'Router property overrides should be available in default export from next/router',
+ async () => {
+ await expect(Router.pathname).toBe('/hello');
+ await expect(Router.query).toEqual({ foo: 'bar' });
+ }
+ );
+
+ await step('Asserts whether forward hook is called', async () => {
+ const forwardBtn = await canvas.findByText('Go forward');
+ await userEvent.click(forwardBtn);
+ await expect(routerMock.forward).toHaveBeenCalled();
+ });
+
+ await step('Asserts whether custom prefetch hook is called', async () => {
+ const prefetchBtn = await canvas.findByText('Prefetch');
+ await userEvent.click(prefetchBtn);
+ await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html');
+ });
+ },
+};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
new file mode 100644
index 000000000000..17d364429726
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, within, userEvent } from '@storybook/test';
+import { cookies } from '@storybook/nextjs/headers.mock';
+import { revalidatePath } from '@storybook/nextjs/cache.mock';
+import { redirect } from '@storybook/nextjs/navigation.mock';
+
+import { accessRoute, login, logout } from './server-actions';
+
+function Component() {
+ return (
+
+
+
+
+
+ );
+}
+
+export default {
+ component: Component,
+} as Meta;
+
+export const Default: StoryObj = {
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement);
+
+ const loginBtn = canvas.getByText('Login');
+ const logoutBtn = canvas.getByText('Logout');
+ const accessRouteBtn = canvas.getByText('Access protected route');
+
+ await step('accessRoute flow - logged out', async () => {
+ await userEvent.click(accessRouteBtn);
+ await expect(cookies().get).toHaveBeenCalledWith('user');
+ await expect(redirect).toHaveBeenCalledWith('/');
+ });
+
+ await step('accessRoute flow - logged', async () => {
+ cookies.mockRestore();
+ cookies().set('user', 'storybookjs');
+ await userEvent.click(accessRouteBtn);
+ await expect(cookies().get).toHaveBeenCalledWith('user');
+ await expect(revalidatePath).toHaveBeenCalledWith('/');
+ await expect(redirect).toHaveBeenCalledWith('/protected');
+ });
+
+ await step('logout flow', async () => {
+ cookies.mockRestore();
+ await userEvent.click(logoutBtn);
+ await expect(cookies().delete).toHaveBeenCalled();
+ await expect(revalidatePath).toHaveBeenCalledWith('/');
+ await expect(redirect).toHaveBeenCalledWith('/');
+ });
+
+ await step('login flow', async () => {
+ cookies.mockRestore();
+ await userEvent.click(loginBtn);
+ await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
+ await expect(revalidatePath).toHaveBeenCalledWith('/');
+ await expect(redirect).toHaveBeenCalledWith('/');
+ });
+ },
+};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx
new file mode 100644
index 000000000000..ffeba72ab848
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx
@@ -0,0 +1,28 @@
+'use server';
+
+import { cookies } from 'next/headers';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+export async function accessRoute() {
+ const user = cookies().get('user');
+
+ if (!user) {
+ redirect('/');
+ }
+
+ revalidatePath('/');
+ redirect(`/protected`);
+}
+
+export async function logout() {
+ cookies().delete('user');
+ revalidatePath('/');
+ redirect('/');
+}
+
+export async function login() {
+ cookies().set('user', 'storybookjs');
+ revalidatePath('/');
+ redirect('/');
+}
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 8f9dae800337..46f6d2235c04 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.7",
+ "version": "8.1.0-alpha.8",
"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 dccfa9aa93d3..86c261406627 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.7",
+ "version": "8.1.0-alpha.8",
"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 02a50462eace..37ec751658a0 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.7",
+ "version": "8.1.0-alpha.8",
"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 4ef8b479e4f6..939b90176592 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.7",
+ "version": "8.1.0-alpha.8",
"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 c8966b299cbf..a832fec56137 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.7",
+ "version": "8.1.0-alpha.8",
"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 173162058c00..54d6b7a7fbeb 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.7",
+ "version": "8.1.0-alpha.8",
"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 362fd576e7d3..6563a508dfdc 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.7",
+ "version": "8.1.0-alpha.8",
"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 3a9f86ae03de..9a385c79da63 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook for SvelteKit",
"keywords": [
"storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index a6d9e80ce048..ac5b32bed1f6 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.7",
+ "version": "8.1.0-alpha.8",
"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 6df4545ccb84..7e5675b765aa 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.7",
+ "version": "8.1.0-alpha.8",
"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 bca9dda246e9..ce2437fb62c1 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.7",
+ "version": "8.1.0-alpha.8",
"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 2d0642ecbdd4..6878d89869e4 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.7",
+ "version": "8.1.0-alpha.8",
"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 57a8c53ab2e1..76ad38b92666 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.7",
+ "version": "8.1.0-alpha.8",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 9b6527789309..13c5e679ffdb 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 363550761022..9a866dfa05da 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 200eae0d10e8..d155d9a6dd15 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook's CLI - install, dev, build, upgrade, and more",
"keywords": [
"cli",
@@ -56,8 +56,8 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@babel/core": "^7.23.0",
- "@babel/types": "^7.23.0",
+ "@babel/core": "^7.24.4",
+ "@babel/types": "^7.24.0",
"@ndelangen/get-tarball": "^3.0.7",
"@storybook/codemod": "workspace:*",
"@storybook/core-common": "workspace:*",
diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json
index 80545b22643b..4161d1b5aecc 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.7",
+ "version": "8.1.0-alpha.8",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 04c1e7d4ad9f..3d30ffe9ab47 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.7",
+ "version": "8.1.0-alpha.8",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
@@ -57,7 +57,7 @@
"@babel/core": "^7.23.2",
"@babel/preset-env": "^7.23.2",
"@babel/types": "^7.23.0",
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/csf-tools": "workspace:*",
"@storybook/node-logger": "workspace:*",
"@storybook/types": "workspace:*",
diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index 2cef151d5e0e..63b9cce37c2b 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts
index 8ed0de57e826..db4bb886c461 100644
--- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts
+++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts
@@ -36,7 +36,8 @@ const CRITICAL_YARN2_ERROR_CODES = {
YN0083: 'AUTOMERGE_GIT_ERROR',
};
-// @ts-expect-error The error codes might be helpful in the future
+// @ts-expect-error If we want a code to be parsed, we move from the list below to the list above
+// Keep the codes here, they might be helpful in the future
const YARN2_ERROR_CODES = {
...CRITICAL_YARN2_ERROR_CODES,
YN0000: 'UNNAMED',
@@ -80,7 +81,7 @@ const YARN2_ERROR_CODES = {
YN0090: 'OFFLINE_MODE_ENABLED',
};
-// This encompasses both yarn 2 and yarn 3
+// This encompasses Yarn Berry (v2+)
export class Yarn2Proxy extends JsPackageManager {
readonly type = 'yarn2';
diff --git a/code/lib/core-common/src/utils/paths.ts b/code/lib/core-common/src/utils/paths.ts
index 3895a69dd2b1..bb5896cc4f67 100644
--- a/code/lib/core-common/src/utils/paths.ts
+++ b/code/lib/core-common/src/utils/paths.ts
@@ -32,16 +32,19 @@ export const getProjectRoot = () => {
} catch (e) {
//
}
+
try {
- const found = findUp.sync('.yarn', { type: 'directory' });
- if (found) {
- result = result || path.join(found, '..');
- }
+ const splitDirname = __dirname.split('node_modules');
+ result = result || (splitDirname.length >= 2 ? splitDirname[0] : undefined);
} catch (e) {
//
}
+
try {
- result = result || __dirname.split('node_modules')[0];
+ const found = findUp.sync('.yarn', { type: 'directory' });
+ if (found) {
+ result = result || path.join(found, '..');
+ }
} catch (e) {
//
}
diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts
index 3748c421b117..b85ad97b2eab 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.7',
- '@storybook/addon-actions': '8.1.0-alpha.7',
- '@storybook/addon-backgrounds': '8.1.0-alpha.7',
- '@storybook/addon-controls': '8.1.0-alpha.7',
- '@storybook/addon-docs': '8.1.0-alpha.7',
- '@storybook/addon-essentials': '8.1.0-alpha.7',
- '@storybook/addon-highlight': '8.1.0-alpha.7',
- '@storybook/addon-interactions': '8.1.0-alpha.7',
- '@storybook/addon-jest': '8.1.0-alpha.7',
- '@storybook/addon-links': '8.1.0-alpha.7',
- '@storybook/addon-mdx-gfm': '8.1.0-alpha.7',
- '@storybook/addon-measure': '8.1.0-alpha.7',
- '@storybook/addon-onboarding': '8.1.0-alpha.7',
- '@storybook/addon-outline': '8.1.0-alpha.7',
- '@storybook/addon-storysource': '8.1.0-alpha.7',
- '@storybook/addon-themes': '8.1.0-alpha.7',
- '@storybook/addon-toolbars': '8.1.0-alpha.7',
- '@storybook/addon-viewport': '8.1.0-alpha.7',
- '@storybook/angular': '8.1.0-alpha.7',
- '@storybook/blocks': '8.1.0-alpha.7',
- '@storybook/builder-manager': '8.1.0-alpha.7',
- '@storybook/builder-vite': '8.1.0-alpha.7',
- '@storybook/builder-webpack5': '8.1.0-alpha.7',
- '@storybook/channels': '8.1.0-alpha.7',
- '@storybook/cli': '8.1.0-alpha.7',
- '@storybook/client-logger': '8.1.0-alpha.7',
- '@storybook/codemod': '8.1.0-alpha.7',
- '@storybook/components': '8.1.0-alpha.7',
- '@storybook/core-common': '8.1.0-alpha.7',
- '@storybook/core-events': '8.1.0-alpha.7',
- '@storybook/core-server': '8.1.0-alpha.7',
- '@storybook/core-webpack': '8.1.0-alpha.7',
- '@storybook/csf-plugin': '8.1.0-alpha.7',
- '@storybook/csf-tools': '8.1.0-alpha.7',
- '@storybook/docs-tools': '8.1.0-alpha.7',
- '@storybook/ember': '8.1.0-alpha.7',
- '@storybook/html': '8.1.0-alpha.7',
- '@storybook/html-vite': '8.1.0-alpha.7',
- '@storybook/html-webpack5': '8.1.0-alpha.7',
- '@storybook/instrumenter': '8.1.0-alpha.7',
- '@storybook/manager': '8.1.0-alpha.7',
- '@storybook/manager-api': '8.1.0-alpha.7',
- '@storybook/nextjs': '8.1.0-alpha.7',
- '@storybook/node-logger': '8.1.0-alpha.7',
- '@storybook/preact': '8.1.0-alpha.7',
- '@storybook/preact-vite': '8.1.0-alpha.7',
- '@storybook/preact-webpack5': '8.1.0-alpha.7',
- '@storybook/preset-create-react-app': '8.1.0-alpha.7',
- '@storybook/preset-html-webpack': '8.1.0-alpha.7',
- '@storybook/preset-preact-webpack': '8.1.0-alpha.7',
- '@storybook/preset-react-webpack': '8.1.0-alpha.7',
- '@storybook/preset-server-webpack': '8.1.0-alpha.7',
- '@storybook/preset-svelte-webpack': '8.1.0-alpha.7',
- '@storybook/preset-vue3-webpack': '8.1.0-alpha.7',
- '@storybook/preview': '8.1.0-alpha.7',
- '@storybook/preview-api': '8.1.0-alpha.7',
- '@storybook/react': '8.1.0-alpha.7',
- '@storybook/react-dom-shim': '8.1.0-alpha.7',
- '@storybook/react-vite': '8.1.0-alpha.7',
- '@storybook/react-webpack5': '8.1.0-alpha.7',
- '@storybook/router': '8.1.0-alpha.7',
- '@storybook/server': '8.1.0-alpha.7',
- '@storybook/server-webpack5': '8.1.0-alpha.7',
- '@storybook/source-loader': '8.1.0-alpha.7',
- '@storybook/svelte': '8.1.0-alpha.7',
- '@storybook/svelte-vite': '8.1.0-alpha.7',
- '@storybook/svelte-webpack5': '8.1.0-alpha.7',
- '@storybook/sveltekit': '8.1.0-alpha.7',
- '@storybook/telemetry': '8.1.0-alpha.7',
- '@storybook/test': '8.1.0-alpha.7',
- '@storybook/theming': '8.1.0-alpha.7',
- '@storybook/types': '8.1.0-alpha.7',
- '@storybook/vue3': '8.1.0-alpha.7',
- '@storybook/vue3-vite': '8.1.0-alpha.7',
- '@storybook/vue3-webpack5': '8.1.0-alpha.7',
- '@storybook/web-components': '8.1.0-alpha.7',
- '@storybook/web-components-vite': '8.1.0-alpha.7',
- '@storybook/web-components-webpack5': '8.1.0-alpha.7',
- sb: '8.1.0-alpha.7',
- storybook: '8.1.0-alpha.7',
+ '@storybook/addon-a11y': '8.1.0-alpha.8',
+ '@storybook/addon-actions': '8.1.0-alpha.8',
+ '@storybook/addon-backgrounds': '8.1.0-alpha.8',
+ '@storybook/addon-controls': '8.1.0-alpha.8',
+ '@storybook/addon-docs': '8.1.0-alpha.8',
+ '@storybook/addon-essentials': '8.1.0-alpha.8',
+ '@storybook/addon-highlight': '8.1.0-alpha.8',
+ '@storybook/addon-interactions': '8.1.0-alpha.8',
+ '@storybook/addon-jest': '8.1.0-alpha.8',
+ '@storybook/addon-links': '8.1.0-alpha.8',
+ '@storybook/addon-mdx-gfm': '8.1.0-alpha.8',
+ '@storybook/addon-measure': '8.1.0-alpha.8',
+ '@storybook/addon-onboarding': '8.1.0-alpha.8',
+ '@storybook/addon-outline': '8.1.0-alpha.8',
+ '@storybook/addon-storysource': '8.1.0-alpha.8',
+ '@storybook/addon-themes': '8.1.0-alpha.8',
+ '@storybook/addon-toolbars': '8.1.0-alpha.8',
+ '@storybook/addon-viewport': '8.1.0-alpha.8',
+ '@storybook/angular': '8.1.0-alpha.8',
+ '@storybook/blocks': '8.1.0-alpha.8',
+ '@storybook/builder-manager': '8.1.0-alpha.8',
+ '@storybook/builder-vite': '8.1.0-alpha.8',
+ '@storybook/builder-webpack5': '8.1.0-alpha.8',
+ '@storybook/channels': '8.1.0-alpha.8',
+ '@storybook/cli': '8.1.0-alpha.8',
+ '@storybook/client-logger': '8.1.0-alpha.8',
+ '@storybook/codemod': '8.1.0-alpha.8',
+ '@storybook/components': '8.1.0-alpha.8',
+ '@storybook/core-common': '8.1.0-alpha.8',
+ '@storybook/core-events': '8.1.0-alpha.8',
+ '@storybook/core-server': '8.1.0-alpha.8',
+ '@storybook/core-webpack': '8.1.0-alpha.8',
+ '@storybook/csf-plugin': '8.1.0-alpha.8',
+ '@storybook/csf-tools': '8.1.0-alpha.8',
+ '@storybook/docs-tools': '8.1.0-alpha.8',
+ '@storybook/ember': '8.1.0-alpha.8',
+ '@storybook/html': '8.1.0-alpha.8',
+ '@storybook/html-vite': '8.1.0-alpha.8',
+ '@storybook/html-webpack5': '8.1.0-alpha.8',
+ '@storybook/instrumenter': '8.1.0-alpha.8',
+ '@storybook/manager': '8.1.0-alpha.8',
+ '@storybook/manager-api': '8.1.0-alpha.8',
+ '@storybook/nextjs': '8.1.0-alpha.8',
+ '@storybook/node-logger': '8.1.0-alpha.8',
+ '@storybook/preact': '8.1.0-alpha.8',
+ '@storybook/preact-vite': '8.1.0-alpha.8',
+ '@storybook/preact-webpack5': '8.1.0-alpha.8',
+ '@storybook/preset-create-react-app': '8.1.0-alpha.8',
+ '@storybook/preset-html-webpack': '8.1.0-alpha.8',
+ '@storybook/preset-preact-webpack': '8.1.0-alpha.8',
+ '@storybook/preset-react-webpack': '8.1.0-alpha.8',
+ '@storybook/preset-server-webpack': '8.1.0-alpha.8',
+ '@storybook/preset-svelte-webpack': '8.1.0-alpha.8',
+ '@storybook/preset-vue3-webpack': '8.1.0-alpha.8',
+ '@storybook/preview': '8.1.0-alpha.8',
+ '@storybook/preview-api': '8.1.0-alpha.8',
+ '@storybook/react': '8.1.0-alpha.8',
+ '@storybook/react-dom-shim': '8.1.0-alpha.8',
+ '@storybook/react-vite': '8.1.0-alpha.8',
+ '@storybook/react-webpack5': '8.1.0-alpha.8',
+ '@storybook/router': '8.1.0-alpha.8',
+ '@storybook/server': '8.1.0-alpha.8',
+ '@storybook/server-webpack5': '8.1.0-alpha.8',
+ '@storybook/source-loader': '8.1.0-alpha.8',
+ '@storybook/svelte': '8.1.0-alpha.8',
+ '@storybook/svelte-vite': '8.1.0-alpha.8',
+ '@storybook/svelte-webpack5': '8.1.0-alpha.8',
+ '@storybook/sveltekit': '8.1.0-alpha.8',
+ '@storybook/telemetry': '8.1.0-alpha.8',
+ '@storybook/test': '8.1.0-alpha.8',
+ '@storybook/theming': '8.1.0-alpha.8',
+ '@storybook/types': '8.1.0-alpha.8',
+ '@storybook/vue3': '8.1.0-alpha.8',
+ '@storybook/vue3-vite': '8.1.0-alpha.8',
+ '@storybook/vue3-webpack5': '8.1.0-alpha.8',
+ '@storybook/web-components': '8.1.0-alpha.8',
+ '@storybook/web-components-vite': '8.1.0-alpha.8',
+ '@storybook/web-components-webpack5': '8.1.0-alpha.8',
+ sb: '8.1.0-alpha.8',
+ storybook: '8.1.0-alpha.8',
};
diff --git a/code/lib/core-common/templates/base-preview-body.html b/code/lib/core-common/templates/base-preview-body.html
index 094286c31b41..b6314fd75900 100644
--- a/code/lib/core-common/templates/base-preview-body.html
+++ b/code/lib/core-common/templates/base-preview-body.html
@@ -82,6 +82,38 @@ No Preview
-
-
+
+
+
+ The component failed to render properly, likely due to a configuration issue in Storybook.
+ Here are some common causes and how you can address them:
+
+
+
+ Missing Context/Providers : You can use decorators to supply specific
+ contexts or providers, which are sometimes necessary for components to render correctly. For
+ detailed instructions on using decorators, please visit the
+ Decorators documentation .
+
+
+ Misconfigured Webpack or Vite : Verify that Storybook picks up all necessary
+ settings for loaders, plugins, and other relevant parameters. You can find step-by-step
+ guides for configuring
+ Webpack or
+ Vite
+ with Storybook.
+
+
+ Missing Environment Variables : Your Storybook may require specific
+ environment variables to function as intended. You can set up custom environment variables
+ as outlined in the
+ Environment Variables documentation .
+
+
+
+
diff --git a/code/lib/core-common/templates/base-preview-head.html b/code/lib/core-common/templates/base-preview-head.html
index c4732d25281c..d76e3a5004d4 100644
--- a/code/lib/core-common/templates/base-preview-head.html
+++ b/code/lib/core-common/templates/base-preview-head.html
@@ -30,7 +30,8 @@
box-sizing: border-box;
margin: auto;
padding: 1rem;
- max-height: 100%; /* Hack for centering correctly in IE11 */
+ max-height: 100%;
+ /* Hack for centering correctly in IE11 */
}
/* Vertical centering fix for IE11 */
@@ -61,7 +62,9 @@
bottom: 0;
left: 0;
right: 0;
- padding: 20px;
+ box-sizing: border-box;
+
+ padding: 40px;
font-family:
'Nunito Sans',
-apple-system,
@@ -77,6 +80,18 @@
overflow: auto;
}
+ @media (max-width: 700px) {
+ .sb-wrapper {
+ padding: 20px;
+ }
+ }
+
+ @media (max-width: 500px) {
+ .sb-wrapper {
+ padding: 10px;
+ }
+ }
+
.sb-heading {
font-size: 14px;
font-weight: 600;
@@ -89,6 +104,7 @@
display: flex;
align-content: center;
justify-content: center;
+ box-sizing: border-box;
}
.sb-nopreview_main {
@@ -103,54 +119,133 @@
}
.sb-errordisplay {
- border: 20px solid rgb(187, 49, 49);
- background: #222;
- color: #fff;
+ background: #f6f9fc;
+ color: black;
z-index: 999999;
+ width: 100vw;
+ min-height: 100vh;
+ box-sizing: border-box;
+
+ & ol {
+ padding-left: 18px;
+ margin: 0;
+ }
+
+ & h1 {
+ font-family: Nunito Sans;
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 30px;
+ font-weight: normal;
+ margin: 0;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ background: #ff4400;
+ border-radius: 50%;
+ margin-right: 8px;
+ }
+ }
+
+ & p,
+ & ol {
+ font-family: Nunito Sans;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 19px;
+ margin: 0;
+ }
+
+ & li + li {
+ margin: 0;
+ padding: 0;
+ padding-top: 12px;
+ }
+
+ & a {
+ color: currentColor;
+ }
+ }
+
+ .sb-errordisplay_main {
+ margin: auto;
+ padding: 24px;
+ display: flex;
+ box-sizing: border-box;
+
+ flex-direction: column;
+ min-height: 100%;
+ width: 100%;
+ border-radius: 6px;
+ background: white;
+ border: 1px solid #ff0000;
+ box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
+ gap: 24px;
}
.sb-errordisplay_code {
padding: 10px;
- background: #000;
- color: #eee;
+ flex: 1;
+ background: #242424;
+ color: #c6c6c6;
+ box-sizing: border-box;
+
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 19px;
+ border-radius: 4px;
+
font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
'Lucida Console', Consolas, Monaco, monospace;
+ margin: 0;
+ overflow: auto;
}
.sb-errordisplay pre {
white-space: pre-wrap;
+ white-space: revert;
}
@-webkit-keyframes sb-rotate360 {
from {
transform: rotate(0deg);
}
+
to {
transform: rotate(360deg);
}
}
+
@keyframes sb-rotate360 {
from {
transform: rotate(0deg);
}
+
to {
transform: rotate(360deg);
}
}
+
@-webkit-keyframes sb-glow {
0%,
100% {
opacity: 1;
}
+
50% {
opacity: 0.4;
}
}
+
@keyframes sb-glow {
0%,
100% {
opacity: 1;
}
+
50% {
opacity: 0.4;
}
@@ -213,6 +308,7 @@
height: 14px;
width: 14px;
}
+
.sb-previewBlock_icon:last-child {
margin-left: auto;
}
@@ -234,23 +330,28 @@
text-align: left;
width: 100%;
}
+
.sb-argstableBlock th:first-of-type,
.sb-argstableBlock td:first-of-type {
padding-left: 20px;
}
+
.sb-argstableBlock th:nth-of-type(2),
.sb-argstableBlock td:nth-of-type(2) {
width: 35%;
}
+
.sb-argstableBlock th:nth-of-type(3),
.sb-argstableBlock td:nth-of-type(3) {
width: 15%;
}
+
.sb-argstableBlock th:last-of-type,
.sb-argstableBlock td:last-of-type {
width: 25%;
padding-right: 20px;
}
+
.sb-argstableBlock th span,
.sb-argstableBlock td span {
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
@@ -260,6 +361,7 @@
box-shadow: none;
color: transparent;
}
+
.sb-argstableBlock th {
padding: 10px 15px;
}
@@ -270,35 +372,44 @@
rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
rgba(0, 0, 0, 0.065) 0 0 0 1px;
}
+
.sb-argstableBlock-body tr {
background: transparent;
overflow: hidden;
}
+
.sb-argstableBlock-body tr:not(:first-child) {
border-top: 1px solid #e6e6e6;
}
+
.sb-argstableBlock-body tr:first-child td:first-child {
border-top-left-radius: 4px;
}
+
.sb-argstableBlock-body tr:first-child td:last-child {
border-top-right-radius: 4px;
}
+
.sb-argstableBlock-body tr:last-child td:first-child {
border-bottom-left-radius: 4px;
}
+
.sb-argstableBlock-body tr:last-child td:last-child {
border-bottom-right-radius: 4px;
}
+
.sb-argstableBlock-body td {
background: #fff;
padding-bottom: 10px;
padding-top: 10px;
vertical-align: top;
}
+
.sb-argstableBlock-body td:not(:first-of-type) {
padding-left: 15px;
padding-right: 15px;
}
+
.sb-argstableBlock-body button {
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
animation: sb-glow 1.5s ease-in-out infinite;
diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json
index 699640debd0d..7079b244b78e 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
@@ -78,6 +78,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
+ "@storybook/csf": "^0.1.7",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
diff --git a/code/lib/core-events/src/data/argtypes-info.ts b/code/lib/core-events/src/data/argtypes-info.ts
new file mode 100644
index 000000000000..c993c684768c
--- /dev/null
+++ b/code/lib/core-events/src/data/argtypes-info.ts
@@ -0,0 +1,9 @@
+import type { ArgTypes } from '@storybook/csf';
+
+export interface ArgTypesRequestPayload {
+ storyId: string;
+}
+
+export interface ArgTypesResponsePayload {
+ argTypes: ArgTypes;
+}
diff --git a/code/lib/core-events/src/data/create-new-story.ts b/code/lib/core-events/src/data/create-new-story.ts
new file mode 100644
index 000000000000..8727d99f0c12
--- /dev/null
+++ b/code/lib/core-events/src/data/create-new-story.ts
@@ -0,0 +1,24 @@
+export interface CreateNewStoryRequestPayload {
+ // The filepath of the component for which the Story should be generated for (relative to the project root)
+ componentFilePath: string;
+ // The name of the exported component
+ componentExportName: string;
+ // is default export
+ componentIsDefaultExport: boolean;
+ // The amount of exports in the file
+ componentExportCount: number;
+}
+
+export interface CreateNewStoryResponsePayload {
+ // The story id
+ storyId: string;
+ // The story file path relative to the cwd
+ storyFilePath: string;
+ // The name of the story export in the file
+ exportedStoryName: string;
+}
+
+export type CreateNewStoryErrorPayload = {
+ type: 'STORY_FILE_EXISTS';
+ kind: string;
+};
diff --git a/code/lib/core-events/src/data/file-component-search.ts b/code/lib/core-events/src/data/file-component-search.ts
new file mode 100644
index 000000000000..000ae3e3d4c9
--- /dev/null
+++ b/code/lib/core-events/src/data/file-component-search.ts
@@ -0,0 +1,17 @@
+export interface FileComponentSearchRequestPayload {}
+
+export interface FileComponentSearchResponsePayload {
+ files: Array<{
+ // The filepath relative to the project root
+ filepath: string;
+ // Whether a corresponding story file exists
+ storyFileExists: boolean;
+ // A list of exported components
+ exportedComponents: Array<{
+ // the name of the exported component
+ name: string;
+ // True, if the exported component is a default export
+ default: boolean;
+ }> | null;
+ }> | null;
+}
diff --git a/code/lib/core-events/src/data/request-response.ts b/code/lib/core-events/src/data/request-response.ts
new file mode 100644
index 000000000000..d2bd4b5510b8
--- /dev/null
+++ b/code/lib/core-events/src/data/request-response.ts
@@ -0,0 +1,8 @@
+export type RequestData
= {
+ id: string;
+ payload: Payload;
+};
+
+export type ResponseData | void = void> =
+ | { id: string; success: true; error: null; payload: Payload }
+ | { id: string; success: false; error: string; payload?: ErrorPayload };
diff --git a/code/lib/core-events/src/data/save-story.ts b/code/lib/core-events/src/data/save-story.ts
new file mode 100644
index 000000000000..8dd4c009f044
--- /dev/null
+++ b/code/lib/core-events/src/data/save-story.ts
@@ -0,0 +1,14 @@
+export interface SaveStoryRequestPayload {
+ args: string | undefined;
+ csfId: string;
+ importPath: string;
+ name?: string;
+}
+
+export interface SaveStoryResponsePayload {
+ csfId: string;
+ newStoryId?: string;
+ newStoryName?: string;
+ sourceFileName?: string;
+ sourceStoryName?: string;
+}
diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts
index 1f30378a3bca..ca3cdc656901 100644
--- a/code/lib/core-events/src/errors/preview-errors.ts
+++ b/code/lib/core-events/src/errors/preview-errors.ts
@@ -254,6 +254,22 @@ export class NextJsSharpError extends StorybookError {
}
}
+export class NextjsRouterMocksNotAvailable extends StorybookError {
+ readonly category = Category.FRAMEWORK_NEXTJS;
+
+ readonly code = 2;
+
+ constructor(public data: { importType: string }) {
+ super();
+ }
+
+ template() {
+ return dedent`
+ Tried to access router mocks from "${this.data.importType}" but they were not created yet. You might be running code in an unsupported environment.
+ `;
+ }
+}
+
export class UnknownArgTypesError extends StorybookError {
readonly category = Category.DOCS_TOOLS;
diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts
index ec6bd134be33..8ce72f12a8dd 100644
--- a/code/lib/core-events/src/index.ts
+++ b/code/lib/core-events/src/index.ts
@@ -73,10 +73,15 @@ enum events {
SET_WHATS_NEW_CACHE = 'setWhatsNewCache',
TOGGLE_WHATS_NEW_NOTIFICATIONS = 'toggleWhatsNewNotifications',
TELEMETRY_ERROR = 'telemetryError',
- FILE_COMPONENT_SEARCH = 'fileComponentSearch',
- FILE_COMPONENT_SEARCH_RESULT = 'fileComponentSearchResult',
- CREATE_NEW_STORYFILE = 'createNewStoryfile',
- CREATE_NEW_STORYFILE_RESULT = 'createNewStoryfileResult',
+
+ FILE_COMPONENT_SEARCH_REQUEST = 'fileComponentSearchRequest',
+ FILE_COMPONENT_SEARCH_RESPONSE = 'fileComponentSearchResponse',
+ SAVE_STORY_REQUEST = 'saveStoryRequest',
+ SAVE_STORY_RESPONSE = 'saveStoryResponse',
+ ARGTYPES_INFO_REQUEST = 'argtypesInfoRequest',
+ ARGTYPES_INFO_RESPONSE = 'argtypesInfoResponse',
+ CREATE_NEW_STORYFILE_REQUEST = 'createNewStoryfileRequest',
+ CREATE_NEW_STORYFILE_RESPONSE = 'createNewStoryfileResponse',
}
// Enables: `import Events from ...`
@@ -88,13 +93,13 @@ export const {
CHANNEL_WS_DISCONNECT,
CHANNEL_CREATED,
CONFIG_ERROR,
- CREATE_NEW_STORYFILE,
- CREATE_NEW_STORYFILE_RESULT,
+ CREATE_NEW_STORYFILE_REQUEST,
+ CREATE_NEW_STORYFILE_RESPONSE,
CURRENT_STORY_WAS_SET,
DOCS_PREPARED,
DOCS_RENDERED,
- FILE_COMPONENT_SEARCH,
- FILE_COMPONENT_SEARCH_RESULT,
+ FILE_COMPONENT_SEARCH_REQUEST,
+ FILE_COMPONENT_SEARCH_RESPONSE,
FORCE_RE_RENDER,
FORCE_REMOUNT,
GLOBALS_UPDATED,
@@ -135,8 +140,18 @@ export const {
SET_WHATS_NEW_CACHE,
TOGGLE_WHATS_NEW_NOTIFICATIONS,
TELEMETRY_ERROR,
+ SAVE_STORY_REQUEST,
+ SAVE_STORY_RESPONSE,
+ ARGTYPES_INFO_REQUEST,
+ ARGTYPES_INFO_RESPONSE,
} = events;
+export * from './data/create-new-story';
+export * from './data/file-component-search';
+export * from './data/argtypes-info';
+export * from './data/request-response';
+export * from './data/save-story';
+
export interface WhatsNewCache {
lastDismissedPost?: string;
lastReadPost?: string;
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 099929b46808..67f33e9fa492 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -56,13 +56,14 @@
},
"dependencies": {
"@aw-web-design/x-default-browser": "1.4.126",
- "@babel/core": "^7.23.9",
+ "@babel/core": "^7.24.4",
+ "@babel/parser": "^7.24.4",
"@discoveryjs/json-ext": "^0.5.3",
"@storybook/builder-manager": "workspace:*",
"@storybook/channels": "workspace:*",
"@storybook/core-common": "workspace:*",
"@storybook/core-events": "workspace:*",
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/csf-tools": "workspace:*",
"@storybook/docs-mdx": "3.1.0-next.0",
"@storybook/global": "^5.0.0",
@@ -73,16 +74,16 @@
"@storybook/telemetry": "workspace:*",
"@storybook/types": "workspace:*",
"@types/detect-port": "^1.3.0",
+ "@types/diff": "^5.0.9",
"@types/node": "^18.0.0",
"@types/pretty-hrtime": "^1.0.0",
"@types/semver": "^7.3.4",
"better-opn": "^3.0.2",
"chalk": "^4.1.0",
- "cjs-module-lexer": "^1.2.3",
"cli-table3": "^0.6.1",
"compression": "^1.7.4",
"detect-port": "^1.3.0",
- "es-module-lexer": "^1.5.0",
+ "diff": "^5.2.0",
"express": "^4.17.3",
"fs-extra": "^11.1.0",
"globby": "^14.0.1",
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index f06e050f958d..0089a4a74fa7 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -1,8 +1,7 @@
-import fs, { pathExists, readFile } from 'fs-extra';
+import { pathExists, readFile } from 'fs-extra';
import { logger } from '@storybook/node-logger';
import { telemetry } from '@storybook/telemetry';
import {
- findConfigFile,
getDirectoryFromWorkingDir,
getPreviewBodyTemplate,
getPreviewHeadTemplate,
@@ -17,23 +16,14 @@ import type {
PresetPropertyFn,
PresetProperty,
} from '@storybook/types';
-import { printConfig, readConfig, readCsf } from '@storybook/csf-tools';
+import { readCsf } from '@storybook/csf-tools';
import { join, dirname, isAbsolute } from 'path';
import { dedent } from 'ts-dedent';
-import fetch from 'node-fetch';
import type { Channel } from '@storybook/channels';
-import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events';
-import {
- REQUEST_WHATS_NEW_DATA,
- RESULT_WHATS_NEW_DATA,
- TELEMETRY_ERROR,
- SET_WHATS_NEW_CACHE,
- TOGGLE_WHATS_NEW_NOTIFICATIONS,
-} from '@storybook/core-events';
-import invariant from 'tiny-invariant';
import { parseStaticDir } from '../utils/server-statics';
import { defaultStaticDirs } from '../utils/constants';
-import { sendTelemetryError } from '../withTelemetry';
+import { initializeWhatsNew, type OptionsWithRequiredCache } from '../utils/whats-new';
+import { initializeSaveStory } from '../utils/save-story/save-story';
import { initFileSearchChannel } from '../server-channel/file-search-channel';
import { initCreateNewStoryChannel } from '../server-channel/create-new-story-channel';
@@ -98,7 +88,7 @@ export const favicon = async (
if (flatlist.length > 1) {
logger.warn(dedent`
Looks like multiple favicons were detected. Using the first one.
-
+
${flatlist.join(', ')}
`);
}
@@ -241,20 +231,6 @@ export const managerHead = async (_: any, options: Options) => {
return '';
};
-const WHATS_NEW_CACHE = 'whats-new-cache';
-const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1';
-
-// Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts
-type WhatsNewResponse = {
- title: string;
- url: string;
- blogUrl?: string;
- publishedAt: string;
- excerpt: string;
-};
-
-type OptionsWithRequiredCache = Exclude & Required>;
-
// eslint-disable-next-line @typescript-eslint/naming-convention
export const experimental_serverChannel = async (
channel: Channel,
@@ -262,88 +238,11 @@ export const experimental_serverChannel = async (
) => {
const coreOptions = await options.presets.apply('core');
- channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => {
- const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => {
- logger.verbose(e);
- return {};
- });
- await options.cache.set(WHATS_NEW_CACHE, { ...cache, ...data });
- });
-
- channel.on(REQUEST_WHATS_NEW_DATA, async () => {
- try {
- const post = (await fetch(WHATS_NEW_URL).then(async (response) => {
- if (response.ok) return response.json();
- // eslint-disable-next-line @typescript-eslint/no-throw-literal
- throw response;
- })) as WhatsNewResponse;
-
- const configFileName = findConfigFile('main', options.configDir);
- if (!configFileName)
- throw new Error(`unable to find storybook main file in ${options.configDir}`);
- const main = await readConfig(configFileName);
- const disableWhatsNewNotifications = main.getFieldValue([
- 'core',
- 'disableWhatsNewNotifications',
- ]);
-
- const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
- const data = {
- ...post,
- status: 'SUCCESS',
- postIsRead: post.url === cache.lastReadPost,
- showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost,
- disableWhatsNewNotifications,
- } satisfies WhatsNewData;
- channel.emit(RESULT_WHATS_NEW_DATA, { data });
- } catch (e) {
- logger.verbose(e instanceof Error ? e.message : String(e));
- channel.emit(RESULT_WHATS_NEW_DATA, {
- data: { status: 'ERROR' } satisfies WhatsNewData,
- });
- }
- });
-
- channel.on(
- TOGGLE_WHATS_NEW_NOTIFICATIONS,
- async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
- const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
- try {
- const mainPath = findConfigFile('main', options.configDir);
- invariant(mainPath, `unable to find storybook main file in ${options.configDir}`);
- const main = await readConfig(mainPath);
- main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
- await fs.writeFile(mainPath, printConfig(main).code);
- if (isTelemetryEnabled) {
- await telemetry('core-config', { disableWhatsNewNotifications });
- }
- } catch (error) {
- invariant(error instanceof Error);
- if (isTelemetryEnabled) {
- await sendTelemetryError(error, 'core-config', {
- cliOptions: options,
- presetOptions: { ...options, corePresets: [], overridePresets: [] },
- skipPrompt: true,
- });
- }
- }
- }
- );
-
- channel.on(TELEMETRY_ERROR, async (error) => {
- const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
-
- if (isTelemetryEnabled) {
- await sendTelemetryError(error, 'browser', {
- cliOptions: options,
- presetOptions: { ...options, corePresets: [], overridePresets: [] },
- skipPrompt: true,
- });
- }
- });
+ initializeWhatsNew(channel, options, coreOptions);
+ initializeSaveStory(channel, options, coreOptions);
- initFileSearchChannel(channel, options);
- initCreateNewStoryChannel(channel, options);
+ initFileSearchChannel(channel, options, coreOptions);
+ initCreateNewStoryChannel(channel, options, coreOptions);
return channel;
};
diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
index 289756ea540b..dc3763cb2d6b 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
@@ -3,7 +3,11 @@ import { initCreateNewStoryChannel } from './create-new-story-channel';
import path from 'path';
import type { ChannelTransport } from '@storybook/channels';
import { Channel } from '@storybook/channels';
-import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events';
+import type { CreateNewStoryRequestPayload, RequestData } from '@storybook/core-events';
+import {
+ CREATE_NEW_STORYFILE_REQUEST,
+ CREATE_NEW_STORYFILE_RESPONSE,
+} from '@storybook/core-events';
vi.mock('@storybook/core-common', async (importOriginal) => {
const actual = await importOriginal();
@@ -42,27 +46,34 @@ describe('createNewStoryChannel', () => {
describe('initCreateNewStoryChannel', () => {
it('should emit an event with a story id', async () => {
- mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener);
+ mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener);
const cwd = process.cwd();
- initCreateNewStoryChannel(mockChannel, {
- configDir: path.join(cwd, '.storybook'),
- presets: {
- apply: (val: string) => {
- if (val === 'framework') {
- return Promise.resolve('@storybook/nextjs');
- }
- if (val === 'stories') {
- return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
- }
+ initCreateNewStoryChannel(
+ mockChannel,
+ {
+ configDir: path.join(cwd, '.storybook'),
+ presets: {
+ apply: (val: string) => {
+ if (val === 'framework') {
+ return Promise.resolve('@storybook/nextjs');
+ }
+ if (val === 'stories') {
+ return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
+ }
+ },
},
+ } as any,
+ { disableTelemetry: true }
+ );
+
+ mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, {
+ id: 'components-page--default',
+ payload: {
+ componentFilePath: 'src/components/Page.jsx',
+ componentExportName: 'Page',
+ componentIsDefaultExport: true,
},
- } as any);
-
- mockChannel.emit(CREATE_NEW_STORYFILE, {
- componentFilePath: 'src/components/Page.jsx',
- componentExportName: 'Page',
- componentIsDefaultExport: true,
});
await vi.waitFor(() => {
@@ -71,48 +82,59 @@ describe('createNewStoryChannel', () => {
expect(createNewStoryFileEventListener).toHaveBeenCalledWith({
error: null,
- result: {
+ id: 'components-page--default',
+ payload: {
storyId: 'components-page--default',
+ storyFilePath: path.join('src', 'components', 'Page.stories.jsx'),
+ exportedStoryName: 'Default',
},
success: true,
});
});
it('should emit an error event if an error occurs', async () => {
- mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener);
+ mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener);
const cwd = process.cwd();
mockFs.writeFile.mockImplementation(() => {
throw new Error('Failed to write file');
});
- initCreateNewStoryChannel(mockChannel, {
- configDir: path.join(cwd, '.storybook'),
- presets: {
- apply: (val: string) => {
- if (val === 'framework') {
- return Promise.resolve('@storybook/nextjs');
- }
- if (val === 'stories') {
- return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
- }
+ initCreateNewStoryChannel(
+ mockChannel,
+ {
+ configDir: path.join(cwd, '.storybook'),
+ presets: {
+ apply: (val: string) => {
+ if (val === 'framework') {
+ return Promise.resolve('@storybook/nextjs');
+ }
+ if (val === 'stories') {
+ return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
+ }
+ },
},
+ } as any,
+ { disableTelemetry: true }
+ );
+
+ mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, {
+ id: 'components-page--default',
+ payload: {
+ componentFilePath: 'src/components/Page.jsx',
+ componentExportName: 'Page',
+ componentIsDefaultExport: true,
+ componentExportCount: 1,
},
- } as any);
-
- mockChannel.emit(CREATE_NEW_STORYFILE, {
- componentFilePath: 'src/components/Page.jsx',
- componentExportName: 'Page',
- componentIsDefaultExport: true,
- });
+ } satisfies RequestData);
await vi.waitFor(() => {
expect(createNewStoryFileEventListener).toHaveBeenCalled();
});
expect(createNewStoryFileEventListener).toHaveBeenCalledWith({
- error: 'An error occurred while creating a new story:\nFailed to write file',
- result: null,
+ error: 'Failed to write file',
+ id: 'components-page--default',
success: false,
});
});
diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
index 7546c5910a70..18d755afbd44 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
@@ -1,51 +1,99 @@
-import type { Options } from '@storybook/types';
+import type { CoreConfig, Options } from '@storybook/types';
import type { Channel } from '@storybook/channels';
-import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events';
+import { telemetry } from '@storybook/telemetry';
+import type {
+ CreateNewStoryErrorPayload,
+ CreateNewStoryRequestPayload,
+ CreateNewStoryResponsePayload,
+ RequestData,
+ ResponseData,
+} from '@storybook/core-events';
+import {
+ CREATE_NEW_STORYFILE_REQUEST,
+ CREATE_NEW_STORYFILE_RESPONSE,
+} from '@storybook/core-events';
import fs from 'node:fs/promises';
-import type { NewStoryData } from '../utils/get-new-story-file';
+import { existsSync } from 'node:fs';
import { getNewStoryFile } from '../utils/get-new-story-file';
import { getStoryId } from '../utils/get-story-id';
+import path from 'node:path';
-interface CreateNewStoryPayload extends NewStoryData {}
-
-interface Result {
- success: true | false;
- result: null | {
- storyId: string;
- };
- error: null | string;
-}
-
-export function initCreateNewStoryChannel(channel: Channel, options: Options) {
+export function initCreateNewStoryChannel(
+ channel: Channel,
+ options: Options,
+ coreOptions: CoreConfig
+) {
/**
* Listens for events to create a new storyfile
*/
- channel.on(CREATE_NEW_STORYFILE, async (data: CreateNewStoryPayload) => {
- try {
- const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile(
- data,
- options
- );
-
- await fs.writeFile(storyFilePath, storyFileContent, 'utf-8');
-
- const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options);
-
- channel.emit(CREATE_NEW_STORYFILE_RESULT, {
- success: true,
- result: {
- storyId,
- },
- error: null,
- } satisfies Result);
- } catch (e: any) {
- channel.emit(CREATE_NEW_STORYFILE_RESULT, {
- success: false,
- result: null,
- error: `An error occurred while creating a new story:\n${e?.message}`,
- } satisfies Result);
+ channel.on(
+ CREATE_NEW_STORYFILE_REQUEST,
+ async (data: RequestData) => {
+ try {
+ const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile(
+ data.payload,
+ options
+ );
+
+ const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath);
+
+ const { storyId, kind } = await getStoryId({ storyFilePath, exportedStoryName }, options);
+
+ if (existsSync(storyFilePath)) {
+ channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
+ success: false,
+ id: data.id,
+ payload: {
+ type: 'STORY_FILE_EXISTS',
+ kind,
+ },
+ error: `A story file already exists at ${relativeStoryFilePath}`,
+ } satisfies ResponseData);
+
+ if (!coreOptions.disableTelemetry) {
+ telemetry('create-new-story-file', {
+ success: false,
+ error: 'STORY_FILE_EXISTS',
+ });
+ }
+
+ return;
+ }
+
+ await fs.writeFile(storyFilePath, storyFileContent, 'utf-8');
+
+ channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
+ success: true,
+ id: data.id,
+ payload: {
+ storyId,
+ storyFilePath: path.relative(process.cwd(), storyFilePath),
+ exportedStoryName,
+ },
+ error: null,
+ } satisfies ResponseData);
+
+ if (!coreOptions.disableTelemetry) {
+ telemetry('create-new-story-file', {
+ success: true,
+ });
+ }
+ } catch (e: any) {
+ channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
+ success: false,
+ id: data.id,
+ error: e?.message,
+ } satisfies ResponseData);
+
+ if (!coreOptions.disableTelemetry) {
+ await telemetry('create-new-story-file', {
+ success: false,
+ error: e,
+ });
+ }
+ }
}
- });
+ );
return channel;
}
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
index e967910dd6c7..d12af10ca261 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
@@ -1,6 +1,10 @@
import type { ChannelTransport } from '@storybook/channels';
import { Channel } from '@storybook/channels';
-import { FILE_COMPONENT_SEARCH, FILE_COMPONENT_SEARCH_RESULT } from '@storybook/core-events';
+import type { RequestData, FileComponentSearchRequestPayload } from '@storybook/core-events';
+import {
+ FILE_COMPONENT_SEARCH_RESPONSE,
+ FILE_COMPONENT_SEARCH_REQUEST,
+} from '@storybook/core-events';
import { beforeEach, describe, expect, vi, it } from 'vitest';
import { initFileSearchChannel } from './file-search-channel';
@@ -43,12 +47,15 @@ describe('file-search-channel', () => {
describe('initFileSearchChannel', async () => {
it('should emit search result event with the search result', async () => {
const mockOptions = {};
- const data = { searchQuery: 'commonjs' };
+ const data = { searchQuery: 'es-module' };
- initFileSearchChannel(mockChannel, mockOptions as any);
+ initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
- mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener);
- mockChannel.emit(FILE_COMPONENT_SEARCH, data);
+ mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
+ mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
+ id: data.searchQuery,
+ payload: {},
+ } satisfies RequestData);
mocks.searchFiles.mockImplementation(async (...args) => {
// @ts-expect-error Ignore type issue
@@ -63,45 +70,41 @@ describe('file-search-channel', () => {
);
expect(searchResultChannelListener).toHaveBeenCalledWith({
+ id: data.searchQuery,
error: null,
- result: {
+ payload: {
files: [
{
exportedComponents: [
{
default: false,
- name: './commonjs',
+ name: 'p',
},
- ],
- filepath: 'src/commonjs-module-default.js',
- },
- {
- exportedComponents: [
{
default: false,
- name: 'a',
+ name: 'q',
},
{
default: false,
- name: 'b',
+ name: 'C',
},
{
default: false,
- name: 'c',
+ name: 'externalName',
},
{
default: false,
- name: 'd',
+ name: 'ns',
},
{
- default: false,
- name: 'e',
+ default: true,
+ name: 'default',
},
],
- filepath: 'src/commonjs-module.js',
+ filepath: 'src/es-module.js',
+ storyFileExists: true,
},
],
- searchQuery: 'commonjs',
},
success: true,
});
@@ -111,10 +114,13 @@ describe('file-search-channel', () => {
const mockOptions = {};
const data = { searchQuery: 'no-file-for-search-query' };
- initFileSearchChannel(mockChannel, mockOptions as any);
+ initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
- mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener);
- mockChannel.emit(FILE_COMPONENT_SEARCH, data);
+ mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
+ mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
+ id: data.searchQuery,
+ payload: {},
+ } satisfies RequestData);
mocks.searchFiles.mockImplementation(async (...args) => {
// @ts-expect-error Ignore type issue
@@ -129,10 +135,10 @@ describe('file-search-channel', () => {
);
expect(searchResultChannelListener).toHaveBeenCalledWith({
+ id: data.searchQuery,
error: null,
- result: {
+ payload: {
files: [],
- searchQuery: 'no-file-for-search-query',
},
success: true,
});
@@ -142,11 +148,14 @@ describe('file-search-channel', () => {
const mockOptions = {};
const data = { searchQuery: 'commonjs' };
- initFileSearchChannel(mockChannel, mockOptions as any);
+ initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
- mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener);
+ mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
- mockChannel.emit(FILE_COMPONENT_SEARCH, data);
+ mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
+ id: data.searchQuery,
+ payload: {},
+ } satisfies RequestData);
mocks.searchFiles.mockRejectedValue(new Error('ENOENT: no such file or directory'));
@@ -155,9 +164,9 @@ describe('file-search-channel', () => {
});
expect(searchResultChannelListener).toHaveBeenCalledWith({
+ id: data.searchQuery,
error:
'An error occurred while searching for components in the project.\nENOENT: no such file or directory',
- result: null,
success: false,
});
});
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts
index 3f2884867447..58e94fdfcc77 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.ts
@@ -1,4 +1,4 @@
-import type { Options, SupportedRenderers } from '@storybook/types';
+import type { CoreConfig, Options, SupportedRenderers } from '@storybook/types';
import type { Channel } from '@storybook/channels';
import {
extractProperRendererNameFromFramework,
@@ -10,97 +10,121 @@ import fs from 'fs/promises';
import { getParser } from '../utils/parser';
import { searchFiles } from '../utils/search-files';
-import { FILE_COMPONENT_SEARCH, FILE_COMPONENT_SEARCH_RESULT } from '@storybook/core-events';
-
-interface Data {
- // A regular string or a glob pattern
- searchQuery?: string;
-}
-
-interface SearchResult {
- success: true | false;
- result: null | {
- searchQuery: string;
- files: Array<{
- // The filepath relative to the project root
- filepath: string;
- // The search query - Helps to identify the event on the frontend
- searchQuery: string;
- // A list of exported components
- exportedComponents: Array<{
- // the name of the exported component
- name: string;
- // True, if the exported component is a default export
- default: boolean;
- }>;
- }> | null;
- };
- error: null | string;
-}
+import type {
+ FileComponentSearchRequestPayload,
+ FileComponentSearchResponsePayload,
+ RequestData,
+ ResponseData,
+} from '@storybook/core-events';
+import {
+ FILE_COMPONENT_SEARCH_REQUEST,
+ FILE_COMPONENT_SEARCH_RESPONSE,
+} from '@storybook/core-events';
+import { doesStoryFileExist, getStoryMetadata } from '../utils/get-new-story-file';
+import { telemetry } from '@storybook/telemetry';
-export function initFileSearchChannel(channel: Channel, options: Options) {
+export async function initFileSearchChannel(
+ channel: Channel,
+ options: Options,
+ coreOptions: CoreConfig
+) {
/**
* Listens for a search query event and searches for files in the project
*/
- channel.on(FILE_COMPONENT_SEARCH, async (data: Data) => {
- try {
- const searchQuery = data?.searchQuery;
+ channel.on(
+ FILE_COMPONENT_SEARCH_REQUEST,
+ async (data: RequestData) => {
+ const searchQuery = data.id;
+ try {
+ if (!searchQuery) {
+ return;
+ }
- if (!searchQuery) {
- return;
- }
+ const frameworkName = await getFrameworkName(options);
- const frameworkName = await getFrameworkName(options);
+ const rendererName = (await extractProperRendererNameFromFramework(
+ frameworkName
+ )) as SupportedRenderers;
- const rendererName = (await extractProperRendererNameFromFramework(
- frameworkName
- )) as SupportedRenderers;
+ const projectRoot = getProjectRoot();
- const projectRoot = getProjectRoot();
+ const files = await searchFiles({
+ searchQuery,
+ cwd: projectRoot,
+ });
- const files = await searchFiles({
- searchQuery,
- cwd: projectRoot,
- });
+ const entries = files.map(async (file) => {
+ const parser = getParser(rendererName);
- const entries = files.map(async (file) => {
- const parser = getParser(rendererName);
+ try {
+ const content = await fs.readFile(path.join(projectRoot, file), 'utf-8');
+ const { storyFileName } = getStoryMetadata(path.join(projectRoot, file));
+ const dirname = path.dirname(file);
- try {
- const content = await fs.readFile(path.join(projectRoot, file), 'utf-8');
- const info = await parser.parse(content);
+ const storyFileExists = doesStoryFileExist(
+ path.join(projectRoot, dirname),
+ storyFileName
+ );
- return {
- filepath: file,
- exportedComponents: info.exports,
- };
- } catch (e) {
- return {
- filepath: file,
- exportedComponents: null,
- };
+ const info = await parser.parse(content);
+
+ return {
+ filepath: file,
+ exportedComponents: info.exports,
+ storyFileExists,
+ };
+ } catch (e) {
+ if (!coreOptions.disableTelemetry) {
+ telemetry('create-new-story-file-search', {
+ success: false,
+ error: `Could not parse file: ${e}`,
+ });
+ }
+
+ return {
+ filepath: file,
+ storyFileExists: false,
+ exportedComponents: null,
+ };
+ }
+ });
+
+ if (!coreOptions.disableTelemetry) {
+ telemetry('create-new-story-file-search', {
+ success: true,
+ payload: {
+ fileCount: entries.length,
+ },
+ });
}
- });
- channel.emit(FILE_COMPONENT_SEARCH_RESULT, {
- success: true,
- result: {
- searchQuery,
- files: await Promise.all(entries),
- },
- error: null,
- } as SearchResult);
- } catch (e: any) {
- /**
- * Emits the search result event with an error message
- */
- channel.emit(FILE_COMPONENT_SEARCH_RESULT, {
- success: false,
- result: null,
- error: `An error occurred while searching for components in the project.\n${e?.message}`,
- } as SearchResult);
+ channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, {
+ success: true,
+ id: searchQuery,
+ payload: {
+ files: await Promise.all(entries),
+ },
+ error: null,
+ } satisfies ResponseData);
+ } catch (e: any) {
+ /**
+ * Emits the search result event with an error message
+ */
+ channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, {
+ success: false,
+ id: searchQuery ?? '',
+ error: `An error occurred while searching for components in the project.\n${e?.message}`,
+ } satisfies ResponseData);
+
+ if (!coreOptions.disableTelemetry) {
+ telemetry('create-new-story-file-search', {
+ success: false,
+ error: `An error occured while searching for components: ${e}`,
+ });
+ }
+ }
}
- });
+ );
return channel;
}
diff --git a/code/lib/core-server/src/utils/__search-files-tests__/src/es-module.stories.js b/code/lib/core-server/src/utils/__search-files-tests__/src/es-module.stories.js
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/code/lib/core-server/src/utils/get-new-story-file.test.ts b/code/lib/core-server/src/utils/get-new-story-file.test.ts
index 429801ad0186..91b06d9027b0 100644
--- a/code/lib/core-server/src/utils/get-new-story-file.test.ts
+++ b/code/lib/core-server/src/utils/get-new-story-file.test.ts
@@ -17,6 +17,7 @@ describe('get-new-story-file', () => {
componentFilePath: 'src/components/Page.tsx',
componentExportName: 'Page',
componentIsDefaultExport: false,
+ componentExportCount: 1,
},
{
presets: {
@@ -31,7 +32,7 @@ describe('get-new-story-file', () => {
expect(exportedStoryName).toBe('Default');
expect(storyFileContent).toMatchInlineSnapshot(`
- "import type { Meta, StoryObj } from '@storybook/nextjs';
+ "import type { Meta, StoryObj } from '@storybook/react';
import { Page } from './Page';
@@ -54,6 +55,7 @@ describe('get-new-story-file', () => {
componentFilePath: 'src/components/Page.jsx',
componentExportName: 'Page',
componentIsDefaultExport: true,
+ componentExportCount: 1,
},
{
presets: {
diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts
index cfec1dd52152..32c50c2e5009 100644
--- a/code/lib/core-server/src/utils/get-new-story-file.ts
+++ b/code/lib/core-server/src/utils/get-new-story-file.ts
@@ -1,59 +1,86 @@
import type { Options } from '@storybook/types';
-import { getFrameworkName, getProjectRoot } from '@storybook/core-common';
+import {
+ extractProperRendererNameFromFramework,
+ getFrameworkName,
+ getProjectRoot,
+ rendererPackages,
+} from '@storybook/core-common';
import path from 'node:path';
import fs from 'node:fs';
import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript';
import { getJavaScriptTemplateForNewStoryFile } from './new-story-templates/javascript';
-
-export interface NewStoryData {
- // The filepath of the component for which the Story should be generated for (relative to the project root)
- componentFilePath: string;
- // The name of the exported component
- componentExportName: string;
- // is default export
- componentIsDefaultExport: boolean;
-}
+import type { CreateNewStoryRequestPayload } from '@storybook/core-events';
export async function getNewStoryFile(
- { componentFilePath, componentExportName, componentIsDefaultExport }: NewStoryData,
+ {
+ componentFilePath,
+ componentExportName,
+ componentIsDefaultExport,
+ componentExportCount,
+ }: CreateNewStoryRequestPayload,
options: Options
) {
- const isTypescript = /\.(ts|tsx|mts|cts)$/.test(componentFilePath);
const cwd = getProjectRoot();
const frameworkPackageName = await getFrameworkName(options);
+ const rendererName = await extractProperRendererNameFromFramework(frameworkPackageName);
+ const rendererPackage = Object.entries(rendererPackages).find(
+ ([, value]) => value === rendererName
+ )?.[0];
const basename = path.basename(componentFilePath);
const extension = path.extname(componentFilePath);
const basenameWithoutExtension = basename.replace(extension, '');
const dirname = path.dirname(componentFilePath);
- const storyFileExtension = isTypescript ? 'tsx' : 'jsx';
- const storyFileName = `${basenameWithoutExtension}.stories.${storyFileExtension}`;
- const alternativeStoryFileName = `${basenameWithoutExtension}.${componentExportName}.stories.${storyFileExtension}`;
+ const { storyFileName, isTypescript, storyFileExtension } = getStoryMetadata(componentFilePath);
+ const storyFileNameWithExtension = `${storyFileName}.${storyFileExtension}`;
+ const alternativeStoryFileNameWithExtension = `${basenameWithoutExtension}.${componentExportName}.stories.${storyFileExtension}`;
const exportedStoryName = 'Default';
- const storyFileContent = isTypescript
- ? await getTypeScriptTemplateForNewStoryFile({
- basenameWithoutExtension,
- componentExportName,
- componentIsDefaultExport,
- frameworkPackageName,
- exportedStoryName,
- })
- : await getJavaScriptTemplateForNewStoryFile({
- basenameWithoutExtension,
- componentExportName,
- componentIsDefaultExport,
- exportedStoryName,
- });
-
- const doesStoryFileExist = fs.existsSync(path.join(cwd, componentFilePath));
-
- const storyFilePath = doesStoryFileExist
- ? path.join(cwd, dirname, alternativeStoryFileName)
- : path.join(cwd, dirname, storyFileName);
-
- return { storyFilePath, exportedStoryName, storyFileContent };
+ const storyFileContent =
+ isTypescript && rendererPackage
+ ? await getTypeScriptTemplateForNewStoryFile({
+ basenameWithoutExtension,
+ componentExportName,
+ componentIsDefaultExport,
+ rendererPackage,
+ exportedStoryName,
+ })
+ : await getJavaScriptTemplateForNewStoryFile({
+ basenameWithoutExtension,
+ componentExportName,
+ componentIsDefaultExport,
+ exportedStoryName,
+ });
+
+ const storyFilePath =
+ doesStoryFileExist(path.join(cwd, dirname), storyFileName) && componentExportCount > 1
+ ? path.join(cwd, dirname, alternativeStoryFileNameWithExtension)
+ : path.join(cwd, dirname, storyFileNameWithExtension);
+
+ return { storyFilePath, exportedStoryName, storyFileContent, dirname };
}
+
+export const getStoryMetadata = (componentFilePath: string) => {
+ const isTypescript = /\.(ts|tsx|mts|cts)$/.test(componentFilePath);
+ const basename = path.basename(componentFilePath);
+ const extension = path.extname(componentFilePath);
+ const basenameWithoutExtension = basename.replace(extension, '');
+ const storyFileExtension = isTypescript ? 'tsx' : 'jsx';
+ return {
+ storyFileName: `${basenameWithoutExtension}.stories`,
+ storyFileExtension,
+ isTypescript,
+ };
+};
+
+export const doesStoryFileExist = (parentFolder: string, storyFileName: string) => {
+ return (
+ fs.existsSync(path.join(parentFolder, `${storyFileName}.ts`)) ||
+ fs.existsSync(path.join(parentFolder, `${storyFileName}.tsx`)) ||
+ fs.existsSync(path.join(parentFolder, `${storyFileName}.js`)) ||
+ fs.existsSync(path.join(parentFolder, `${storyFileName}.jsx`))
+ );
+};
diff --git a/code/lib/core-server/src/utils/get-story-id.test.ts b/code/lib/core-server/src/utils/get-story-id.test.ts
index 4fb0230bc21e..243fbed6160f 100644
--- a/code/lib/core-server/src/utils/get-story-id.test.ts
+++ b/code/lib/core-server/src/utils/get-story-id.test.ts
@@ -18,9 +18,10 @@ describe('getStoryId', () => {
const storyFilePath = path.join(cwd, 'src', 'components', 'stories', 'Page1.stories.ts');
const exportedStoryName = 'Default';
- const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options);
+ const { storyId, kind } = await getStoryId({ storyFilePath, exportedStoryName }, options);
expect(storyId).toBe('components-stories-page1--default');
+ expect(kind).toBe('components-stories-page1');
});
it('should throw an error if the storyId cannot be calculated', async () => {
diff --git a/code/lib/core-server/src/utils/get-story-id.ts b/code/lib/core-server/src/utils/get-story-id.ts
index acfbce990853..eb73a52ae58a 100644
--- a/code/lib/core-server/src/utils/get-story-id.ts
+++ b/code/lib/core-server/src/utils/get-story-id.ts
@@ -2,7 +2,7 @@ import type { Options } from '@storybook/types';
import dedent from 'ts-dedent';
import { normalizeStories, normalizeStoryPath } from '@storybook/core-common';
import path from 'path';
-import { storyNameFromExport, toId } from '@storybook/csf';
+import { sanitize, storyNameFromExport, toId } from '@storybook/csf';
import { userOrAutoTitleFromSpecifier } from '@storybook/preview-api';
import { posix } from './posix';
@@ -31,14 +31,14 @@ export async function getStoryId(data: StoryIdData, options: Options) {
if (autoTitle === undefined) {
// eslint-disable-next-line local-rules/no-uncategorized-errors
throw new Error(dedent`
- The generation of your new Story file was successful but it seems that we are unable to index it.
- Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration.
- The location of the new Story file is: ${relativePath}
+ The new story file was successfully generated, but we are unable to index it. Please ensure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration.
`);
}
const storyName = storyNameFromExport(data.exportedStoryName);
+
const storyId = toId(autoTitle as string, storyName);
+ const kind = sanitize(autoTitle);
- return storyId;
+ return { storyId, kind };
}
diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts
index f576a3d4ad2d..338b3209ce95 100644
--- a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts
+++ b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts
@@ -7,12 +7,12 @@ describe('typescript', () => {
basenameWithoutExtension: 'foo',
componentExportName: 'default',
componentIsDefaultExport: true,
- frameworkPackageName: '@storybook/nextjs',
+ rendererPackage: '@storybook/react',
exportedStoryName: 'Default',
});
expect(result).toMatchInlineSnapshot(`
- "import type { Meta, StoryObj } from '@storybook/nextjs';
+ "import type { Meta, StoryObj } from '@storybook/react';
import Foo from './foo';
@@ -33,12 +33,12 @@ describe('typescript', () => {
basenameWithoutExtension: 'foo',
componentExportName: 'Example',
componentIsDefaultExport: false,
- frameworkPackageName: '@storybook/nextjs',
+ rendererPackage: '@storybook/react',
exportedStoryName: 'Default',
});
expect(result).toMatchInlineSnapshot(`
- "import type { Meta, StoryObj } from '@storybook/nextjs';
+ "import type { Meta, StoryObj } from '@storybook/react';
import { Example } from './foo';
diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.ts
index cb44dfdfc9c4..d2513673ebb5 100644
--- a/code/lib/core-server/src/utils/new-story-templates/typescript.ts
+++ b/code/lib/core-server/src/utils/new-story-templates/typescript.ts
@@ -6,8 +6,8 @@ interface TypeScriptTemplateData {
basenameWithoutExtension: string;
componentExportName: string;
componentIsDefaultExport: boolean;
- /** The framework package name, e.g. @storybook/nextjs */
- frameworkPackageName: string;
+ /** The renderer package name, e.g. @storybook/nextjs */
+ rendererPackage: string;
/** The exported name of the default story */
exportedStoryName: string;
}
@@ -21,7 +21,7 @@ export async function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTempl
: `import { ${importName} } from './${data.basenameWithoutExtension}'`;
return dedent`
- import type { Meta, StoryObj } from '${data.frameworkPackageName}';
+ import type { Meta, StoryObj } from '${data.rendererPackage}';
${importStatement};
diff --git a/code/lib/core-server/src/utils/parser/generic-parser.test.ts b/code/lib/core-server/src/utils/parser/generic-parser.test.ts
index 6d3ff96e15b0..61bba2739f72 100644
--- a/code/lib/core-server/src/utils/parser/generic-parser.test.ts
+++ b/code/lib/core-server/src/utils/parser/generic-parser.test.ts
@@ -8,34 +8,6 @@ const genericParser = new GenericParser();
const TEST_DIR = path.join(__dirname, '..', '__search-files-tests__');
describe('generic-parser', () => {
- it('should correctly return exports from CommonJS files', async () => {
- const content = fs.readFileSync(path.join(TEST_DIR, 'src', 'commonjs-module.js'), 'utf-8');
- const { exports } = await genericParser.parse(content);
-
- expect(exports).toEqual([
- {
- default: false,
- name: 'a',
- },
- {
- default: false,
- name: 'b',
- },
- {
- default: false,
- name: 'c',
- },
- {
- default: false,
- name: 'd',
- },
- {
- default: false,
- name: 'e',
- },
- ]);
- });
-
it('should correctly return exports from ES modules', async () => {
const content = fs.readFileSync(path.join(TEST_DIR, 'src', 'es-module.js'), 'utf-8');
const { exports } = await genericParser.parse(content);
diff --git a/code/lib/core-server/src/utils/parser/generic-parser.ts b/code/lib/core-server/src/utils/parser/generic-parser.ts
index e297c1e92eed..e3c4754fab44 100644
--- a/code/lib/core-server/src/utils/parser/generic-parser.ts
+++ b/code/lib/core-server/src/utils/parser/generic-parser.ts
@@ -1,8 +1,7 @@
-import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer';
-import { parse as parseEs } from 'es-module-lexer';
-import assert from 'node:assert';
+import * as babelParser from '@babel/parser';
+import { types } from '@babel/core';
-import type { Parser } from './types';
+import type { Parser, ParserResult } from './types';
/**
* A generic parser that can parse both ES and CJS modules.
@@ -13,41 +12,109 @@ export class GenericParser implements Parser {
* @param content The content of the file
* @returns The exports of the file
*/
- async parse(content: string) {
- try {
- // Do NOT remove await here. The types are wrong! It has to be awaited,
- // otherwise it will return a Promise> when wasm isn't loaded.
- const [, exports] = await parseEs(content);
+ async parse(content: string): Promise {
+ const ast = babelParser.parse(content, {
+ allowImportExportEverywhere: true,
+ allowAwaitOutsideFunction: true,
+ allowNewTargetOutsideFunction: true,
+ allowReturnOutsideFunction: true,
+ allowUndeclaredExports: true,
+ plugins: [
+ // Language features
+ 'typescript',
+ 'jsx',
+ // Latest ECMAScript features
+ 'asyncGenerators',
+ 'bigInt',
+ 'classProperties',
+ 'classPrivateProperties',
+ 'classPrivateMethods',
+ 'classStaticBlock',
+ 'dynamicImport',
+ 'exportNamespaceFrom',
+ 'logicalAssignment',
+ 'moduleStringNames',
+ 'nullishCoalescingOperator',
+ 'numericSeparator',
+ 'objectRestSpread',
+ 'optionalCatchBinding',
+ 'optionalChaining',
+ 'privateIn',
+ 'regexpUnicodeSets',
+ 'topLevelAwait',
+ // ECMAScript proposals
+ 'asyncDoExpressions',
+ 'decimal',
+ 'decorators',
+ 'decoratorAutoAccessors',
+ 'deferredImportEvaluation',
+ 'destructuringPrivate',
+ 'doExpressions',
+ 'explicitResourceManagement',
+ 'exportDefaultFrom',
+ 'functionBind',
+ 'functionSent',
+ 'importAttributes',
+ 'importReflection',
+ 'moduleBlocks',
+ 'partialApplication',
+ 'recordAndTuple',
+ 'sourcePhaseImports',
+ 'throwExpressions',
+ ],
+ });
- assert(
- exports.length > 0,
- 'No named exports found. Very likely that this is not a ES module.'
- );
+ const exports: ParserResult['exports'] = [];
- return {
- exports: (exports ?? []).map((e) => {
- const name = content.substring(e.s, e.e);
- return {
- name,
- default: name === 'default',
- };
- }),
- };
- // Try to parse as CJS module
- } catch {
- await initCjsParser();
+ ast.program.body.forEach(function traverse(node) {
+ if (types.isExportNamedDeclaration(node)) {
+ // Handles function declarations: `export function a() {}`
+ if (
+ types.isFunctionDeclaration(node.declaration) &&
+ types.isIdentifier(node.declaration.id)
+ ) {
+ exports.push({
+ name: node.declaration.id.name,
+ default: false,
+ });
+ }
+ // Handles class declarations: `export class A {}`
+ if (types.isClassDeclaration(node.declaration) && types.isIdentifier(node.declaration.id)) {
+ exports.push({
+ name: node.declaration.id.name,
+ default: false,
+ });
+ }
+ // Handles export specifiers: `export { a }`
+ if (node.declaration === null && node.specifiers.length > 0) {
+ node.specifiers.forEach((specifier) => {
+ if (types.isExportSpecifier(specifier) && types.isIdentifier(specifier.exported)) {
+ exports.push({
+ name: specifier.exported.name,
+ default: false,
+ });
+ }
+ });
+ }
+ if (types.isVariableDeclaration(node.declaration)) {
+ node.declaration.declarations.forEach((declaration) => {
+ // Handle variable declarators: `export const a = 1;`
+ if (types.isVariableDeclarator(declaration) && types.isIdentifier(declaration.id)) {
+ exports.push({
+ name: declaration.id.name,
+ default: false,
+ });
+ }
+ });
+ }
+ } else if (types.isExportDefaultDeclaration(node)) {
+ exports.push({
+ name: 'default',
+ default: true,
+ });
+ }
+ });
- const { exports, reexports } = parseCjs(content);
- const filteredExports = [...exports, ...reexports].filter((e: string) => e !== '__esModule');
-
- assert(filteredExports.length > 0, 'No named exports found');
-
- return {
- exports: (filteredExports ?? []).map((name) => ({
- name,
- default: name === 'default',
- })),
- };
- }
+ return { exports };
}
}
diff --git a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts
new file mode 100644
index 000000000000..59250060f5d2
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts
@@ -0,0 +1,121 @@
+/* eslint-disable no-underscore-dangle */
+import { describe, test, expect } from 'vitest';
+import { readCsf, printCsf } from '@storybook/csf-tools';
+
+import { duplicateStoryWithNewName } from './duplicate-story-with-new-name';
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { format } from 'prettier';
+import { getDiff } from './getDiff';
+
+const makeTitle = (userTitle: string) => userTitle;
+
+const FILES = {
+ csfVariances: join(__dirname, 'mocks/csf-variances.stories.tsx'),
+ unsupportedCsfVariances: join(__dirname, 'mocks/unsupported-csf-variances.stories.tsx'),
+ typescriptConstructs: join(__dirname, 'mocks/typescript-constructs.stories.tsx'),
+};
+
+describe('success', () => {
+ test('CSF Variances', async () => {
+ const before = await format(await readFile(FILES.csfVariances, 'utf-8'), {
+ parser: 'typescript',
+ });
+ const CSF = await readCsf(FILES.csfVariances, { makeTitle });
+
+ const parsed = CSF.parse();
+ const names = Object.keys(parsed._stories);
+
+ names.forEach((name) => {
+ duplicateStoryWithNewName(parsed, name, name + 'Duplicated');
+ });
+
+ const after = await format(printCsf(parsed).code, {
+ parser: 'typescript',
+ });
+
+ // check if the code was updated at all
+ expect(after).not.toBe(before);
+
+ // check if the code was updated correctly
+ expect(getDiff(before, after)).toMatchInlineSnapshot(`
+ " ...
+ canvasElement.style.backgroundColor = "red";
+ },
+ } satisfies Story;
+
+ + export const EmptyDuplicated = {} satisfies Story;
+ + export const EmptyWithCommentDuplicated = {} satisfies Story;
+ + export const OnlyArgsDuplicated = {} satisfies Story;
+ +
+ + export const RenderNoArgsDuplicated = {
+ + render: (args) => ;
+
+export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newStoryName: string) => {
+ const node = csfFile._storyExports[storyName];
+ const cloned = t.cloneNode(node) as t.VariableDeclarator;
+
+ if (!cloned) {
+ throw new SaveStoryError(`cannot clone Node`);
+ }
+
+ let found = false;
+ traverse.default(cloned, {
+ Identifier(path) {
+ if (found) {
+ return;
+ }
+
+ if (path.node.name === storyName) {
+ found = true;
+ path.node.name = newStoryName;
+ }
+ },
+ ObjectProperty(path) {
+ const key = path.get('key');
+ if (key.isIdentifier() && key.node.name === 'args') {
+ path.remove();
+ }
+ },
+
+ noScope: true,
+ });
+
+ // detect CSF2 and throw
+ if (t.isArrowFunctionExpression(cloned.init) || t.isCallExpression(cloned.init)) {
+ throw new SaveStoryError(`Creating a new story based on a CSF2 story is not supported`);
+ }
+
+ traverse.default(csfFile._ast, {
+ Program(path) {
+ path.pushContainer(
+ 'body',
+ t.exportNamedDeclaration(t.variableDeclaration('const', [cloned]))
+ );
+ },
+ });
+
+ return cloned;
+};
diff --git a/code/lib/core-server/src/utils/save-story/getDiff.ts b/code/lib/core-server/src/utils/save-story/getDiff.ts
new file mode 100644
index 000000000000..df3462c9ea08
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/getDiff.ts
@@ -0,0 +1,67 @@
+import { diffLines } from 'diff';
+
+/**
+ * Get a diff between two strings
+ * @param before The original string
+ * @param after The new string
+ * @returns The diff as a string
+ * @example
+ * ```ts
+ * const before = 'foo\nbar\nbaz';
+ * const after = 'foo\nbaz';
+ * const diff = getDiff(before, after);
+ * console.log(diff);
+ * // foo
+ * // - bar
+ * // baz
+ * ```
+ */
+export function getDiff(before: string, after: string): string {
+ const context = 4;
+ return diffLines(before, after, {})
+ .map((r, index, l) => {
+ const lines = r.value.split('\n');
+
+ if (r.removed) {
+ return r.value
+ .split('\n')
+ .map((v) => `- ${v}`)
+ .join('\n');
+ }
+ if (r.added) {
+ return r.value
+ .split('\n')
+ .map((v) => `+ ${v}`)
+ .join('\n');
+ }
+
+ if (index === 0) {
+ const sliced = lines.slice(0 - context);
+
+ if (sliced.length !== lines.length) {
+ sliced.unshift('...');
+ }
+ return sliced.map((v) => ` ${v}`).join('\n');
+ }
+
+ if (index === l.length - 1) {
+ const sliced = lines.slice(0, context);
+
+ if (sliced.length !== lines.length) {
+ sliced.push('...');
+ }
+ return sliced.map((v) => ` ${v}`).join('\n');
+ }
+
+ if (lines.length <= context * 2 + 1) {
+ return lines.map((v) => ` ${v}`).join('\n');
+ }
+ return [
+ //
+ ...lines.slice(0, context).map((v) => ` ${v}`),
+ '...',
+ ...lines.slice(0 - context).map((v) => ` ${v}`),
+ ].join('\n');
+ })
+ .join('\n');
+}
diff --git a/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx
new file mode 100644
index 000000000000..9fcbc4bd4df3
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+ title: 'MyComponent',
+ args: {
+ initial: 'foo',
+ },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+// dummy component
+const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => (
+ {JSON.stringify(props)}
+);
+
+export const Empty = {} satisfies Story;
+
+export const EmptyWithComment = {
+ // this is a useless comment, to test that it is preserved
+} satisfies Story;
+
+export const OnlyArgs = {
+ args: {
+ absolute: true,
+ },
+} satisfies Story;
+
+export const RenderNoArgs = {
+ render: (args) => ;
+
+type Story = StoryObj;
+
+// dummy component
+const MyComponent: FC<{
+ myUndefined: undefined;
+ myNull: null;
+ myBoolean: boolean;
+ myString: string;
+ myNumber: number;
+ myArray: string[];
+ myArrayDeep: string[][];
+ myObject: object;
+ myFunction: () => void;
+}> = (props) => {JSON.stringify(props)} ;
+
+export const All = {
+ args: {
+ myArray: ['foo', 'bar'],
+ myArrayDeep: [['foo'], ['bar']],
+ myBoolean: true,
+ myFunction: () => {},
+ myNull: null,
+ myNumber: 42,
+ myObject: {
+ foo: 'bar',
+ },
+ myString: 'foo',
+ myUndefined: undefined,
+ },
+} satisfies Story;
+
+export const None = {
+ args: {},
+} satisfies Story;
diff --git a/code/lib/core-server/src/utils/save-story/mocks/export-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/export-variances.stories.tsx
new file mode 100644
index 000000000000..7c853f484468
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/export-variances.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+ title: 'MyComponent',
+ args: {
+ initial: 'foo',
+ },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+// dummy component
+const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => (
+ {JSON.stringify(props)}
+);
+
+export const DirectExport: Story = {
+ args: {
+ initial: 'bar',
+ },
+};
+
+const BlockExport: Story = {
+ args: {
+ initial: 'bar',
+ },
+};
+
+const NotYetRenamedExport: Story = {
+ args: {
+ initial: 'bar',
+ },
+};
+
+export { BlockExport, NotYetRenamedExport as RenamedExport };
diff --git a/code/lib/core-server/src/utils/save-story/mocks/typescript-constructs.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/typescript-constructs.stories.tsx
new file mode 100644
index 000000000000..d44c95c446be
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/typescript-constructs.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+ title: 'MyComponent',
+ args: {
+ initial: 'foo',
+ },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+// dummy component
+const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => (
+ {JSON.stringify(props)}
+);
+
+export const Cast: Story = {
+ args: {
+ initial: 'bar',
+ },
+};
+
+export const As = {
+ args: {
+ initial: 'bar',
+ },
+} as Story;
+
+export const Satisfies = {
+ args: {
+ initial: 'bar',
+ },
+} satisfies Story;
+
+export const None = {
+ args: {
+ initial: 'bar',
+ },
+};
diff --git a/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx
new file mode 100644
index 000000000000..b86095381faa
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta } from '@storybook/react';
+
+export default {
+ title: 'MyComponent',
+ args: {
+ initial: 'foo',
+ },
+} satisfies Meta;
+
+// dummy component
+const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => (
+ {JSON.stringify(props)}
+);
+
+export const CSF2 = () => =>
+ JSON.parse(args, (_, value) => {
+ if (value === '__sb_empty_function_arg__') {
+ return () => {};
+ }
+ return value;
+ });
+
+// Removes extra newlines between story properties. See https://github.com/benjamn/recast/issues/242
+// Only updates the part of the code for the story with the given name.
+const removeExtraNewlines = (code: string, name: string) => {
+ const anything = '(.|\r\n|\r|\n)'; // Multiline match for any character.
+ const newline = '(\r\n|\r|\n)'; // Either newlines or carriage returns may be used in the file.
+ const closing = newline + '};' + newline; // Marks the end of the story definition.
+ const regex = new RegExp(
+ // Looks for an export by the given name, considers the first closing brace on its own line
+ // to be the end of the story definition.
+ `^(?${anything}*)(?export const ${name} =${anything}+?${closing})(?${anything}*)$`
+ );
+ const { before, story, after } = code.match(regex)?.groups || {};
+ return story
+ ? before + story.replaceAll(/(\r\n|\r|\n)(\r\n|\r|\n)([ \t]*[a-z0-9_]+): /gi, '$2$3:') + after
+ : code;
+};
+
+export function initializeSaveStory(channel: Channel, options: Options, coreConfig: CoreConfig) {
+ channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: RequestData) => {
+ const { csfId, importPath, args, name } = payload;
+
+ let newStoryId: string | undefined;
+ let newStoryName: string | undefined;
+ let sourceFileName: string | undefined;
+ let sourceFilePath: string | undefined;
+ let sourceStoryName: string | undefined;
+
+ try {
+ sourceFileName = basename(importPath);
+ sourceFilePath = join(process.cwd(), importPath);
+
+ const csf = await readCsf(sourceFilePath, {
+ makeTitle: (userTitle: string) => userTitle || 'myTitle',
+ });
+
+ const parsed = csf.parse();
+ const stories = Object.entries(parsed._stories);
+
+ const [componentId, storyId] = csfId.split('--');
+ newStoryName = name && storyNameFromExport(name);
+ newStoryId = newStoryName && toId(componentId, newStoryName);
+
+ const [storyName] = stories.find(([key, value]) => value.id.endsWith(`--${storyId}`)) || [];
+ if (!storyName) {
+ throw new SaveStoryError(`Source story not found.`);
+ }
+ if (name && csf.getStoryExport(name)) {
+ throw new SaveStoryError(`Story already exists.`);
+ }
+
+ sourceStoryName = storyNameFromExport(storyName);
+
+ await updateArgsInCsfFile(
+ name ? duplicateStoryWithNewName(parsed, storyName, name) : csf.getStoryExport(storyName),
+ args ? parseArgs(args) : {}
+ );
+
+ const code = await formatFileContent(
+ sourceFilePath,
+ removeExtraNewlines(printCsf(csf).code, name || storyName)
+ );
+
+ // Writing the CSF file should trigger HMR, which causes the story to rerender. Delay the
+ // response until that happens, but don't wait too long.
+ await Promise.all([
+ new Promise((resolve) => {
+ channel.on(STORY_RENDERED, resolve);
+ setTimeout(() => resolve(channel.off(STORY_RENDERED, resolve)), 3000);
+ }),
+ fs.writeFile(sourceFilePath, code),
+ ]);
+
+ channel.emit(SAVE_STORY_RESPONSE, {
+ id,
+ success: true,
+ payload: {
+ csfId,
+ newStoryId,
+ newStoryName,
+ sourceFileName,
+ sourceStoryName,
+ },
+ error: null,
+ } satisfies ResponseData);
+
+ if (!coreConfig.disableTelemetry) {
+ await telemetry('save-story', {
+ action: name ? 'createStory' : 'updateStory',
+ success: true,
+ });
+ }
+ } catch (error: any) {
+ channel.emit(SAVE_STORY_RESPONSE, {
+ id,
+ success: false,
+ error: error instanceof SaveStoryError ? error.message : 'Unknown error',
+ } satisfies ResponseData);
+
+ logger.error(
+ `Error writing to ${sourceFilePath}:\n${error.stack || error.message || error.toString()}`
+ );
+
+ if (!coreConfig.disableTelemetry && !(error instanceof SaveStoryError)) {
+ await telemetry('save-story', {
+ action: name ? 'createStory' : 'updateStory',
+ success: false,
+ error,
+ });
+ }
+ }
+ });
+}
diff --git a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts
new file mode 100644
index 000000000000..8f0f2fb6b737
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts
@@ -0,0 +1,378 @@
+/* eslint-disable no-underscore-dangle */
+import { describe, test, expect } from 'vitest';
+import { readCsf, printCsf } from '@storybook/csf-tools';
+
+import { updateArgsInCsfFile } from './update-args-in-csf-file';
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { format } from 'prettier';
+import { getDiff } from './getDiff';
+
+const makeTitle = (userTitle: string) => userTitle;
+
+const FILES = {
+ typescriptConstructs: join(__dirname, 'mocks/typescript-constructs.stories.tsx'),
+ csfVariances: join(__dirname, 'mocks/csf-variances.stories.tsx'),
+ unsupportedCsfVariances: join(__dirname, 'mocks/unsupported-csf-variances.stories.tsx'),
+ exportVariances: join(__dirname, 'mocks/export-variances.stories.tsx'),
+ dataVariances: join(__dirname, 'mocks/data-variances.stories.tsx'),
+};
+
+describe('success', () => {
+ test('Typescript Constructs', async () => {
+ const newArgs = { bordered: true, initial: 'test1' };
+
+ const before = await format(await readFile(FILES.typescriptConstructs, 'utf-8'), {
+ parser: 'typescript',
+ });
+ const CSF = await readCsf(FILES.typescriptConstructs, { makeTitle });
+
+ const parsed = CSF.parse();
+ const names = Object.keys(parsed._stories);
+ const nodes = names.map((name) => CSF.getStoryExport(name));
+
+ nodes.forEach((node) => {
+ updateArgsInCsfFile(node, newArgs);
+ });
+
+ const after = await format(printCsf(parsed).code, {
+ parser: 'typescript',
+ });
+
+ // check if the code was updated at all
+ expect(after).not.toBe(before);
+
+ // check if the code was updated correctly
+ expect(getDiff(before, after)).toMatchInlineSnapshot(`
+ " ...
+
+ export const Cast: Story = {
+ args: {
+
+ - initial: "bar",
+ -
+ + initial: "test1",
+ + bordered: true,
+ +
+ },
+ };
+
+ export const As = {
+ args: {
+
+ - initial: "bar",
+ -
+ + initial: "test1",
+ + bordered: true,
+ +
+ },
+ } as Story;
+
+ export const Satisfies = {
+ args: {
+
+ - initial: "bar",
+ -
+ + initial: "test1",
+ + bordered: true,
+ +
+ },
+ } satisfies Story;
+
+ export const None = {
+ args: {
+
+ - initial: "bar",
+ -
+ + initial: "test1",
+ + bordered: true,
+ +
+ },
+ };
+ "
+ `);
+ });
+ test('Unsupported CSF Variances', async () => {
+ const newArgs = { bordered: true, initial: 'test1' };
+
+ const CSF = await readCsf(FILES.unsupportedCsfVariances, { makeTitle });
+ const parsed = CSF.parse();
+ const names = Object.keys(parsed._stories);
+ const nodes = names.map((name) => CSF.getStoryExport(name));
+
+ nodes.forEach((node) => {
+ expect(() => updateArgsInCsfFile(node, newArgs)).rejects.toThrowError();
+ });
+ });
+ test('CSF Variances', async () => {
+ const newArgs = { bordered: true, initial: 'test1' };
+
+ const before = await format(await readFile(FILES.csfVariances, 'utf-8'), {
+ parser: 'typescript',
+ });
+ const CSF = await readCsf(FILES.csfVariances, { makeTitle });
+
+ const parsed = CSF.parse();
+ const names = Object.keys(parsed._stories);
+ const nodes = names.map((name) => CSF.getStoryExport(name));
+
+ nodes.forEach((node) => {
+ updateArgsInCsfFile(node, newArgs);
+ });
+
+ const after = await format(printCsf(parsed).code, {
+ parser: 'typescript',
+ });
+
+ // check if the code was updated at all
+ expect(after).not.toBe(before);
+
+ // check if the code was updated correctly
+ // TODO, the comment is not preserved!!!
+ expect(getDiff(before, after)).toMatchInlineSnapshot(`
+ " ...
+ initial: string;
+ }> = (props) => {JSON.stringify(props)} ;
+
+
+ - export const Empty = {} satisfies Story;
+ -
+ + export const Empty = {
+ + args: {
+ + bordered: true,
+ + initial: "test1",
+ + },
+ + } satisfies Story;
+ +
+
+ export const EmptyWithComment = {
+
+ - // this is a useless comment, to test that it is preserved
+ -
+ + args: {
+ + bordered: true,
+ + initial: "test1",
+ + },
+ +
+ } satisfies Story;
+
+ export const OnlyArgs = {
+ args: {
+ absolute: true,
+
+ + bordered: true,
+ + initial: "test1",
+ +
+ },
+ } satisfies Story;
+
+ export const RenderNoArgs = {
+
+ + args: {
+ + bordered: true,
+ + initial: "test1",
+ + },
+ +
+ +
+ render: (args) => ) => {
+ let found = false;
+ const args = Object.fromEntries(
+ Object.entries(input).map(([k, v]) => {
+ return [k, valueToAST(v)];
+ })
+ );
+
+ // detect CSF2 and throw
+ if (t.isArrowFunctionExpression(node) || t.isCallExpression(node)) {
+ throw new SaveStoryError(`Updating a CSF2 story is not supported`);
+ }
+
+ if (t.isObjectExpression(node)) {
+ const properties = node.properties;
+ const argsProperty = properties.find((property) => {
+ if (t.isObjectProperty(property)) {
+ const key = property.key;
+ return t.isIdentifier(key) && key.name === 'args';
+ }
+ return false;
+ });
+
+ if (argsProperty) {
+ if (t.isObjectProperty(argsProperty)) {
+ const a = argsProperty.value;
+ if (t.isObjectExpression(a)) {
+ a.properties.forEach((p) => {
+ if (t.isObjectProperty(p)) {
+ const key = p.key;
+ if (t.isIdentifier(key) && key.name in args) {
+ p.value = args[key.name];
+ delete args[key.name];
+ }
+ }
+ });
+
+ const remainder = Object.entries(args);
+ if (Object.keys(args).length) {
+ remainder.forEach(([key, value]) => {
+ a.properties.push(t.objectProperty(t.identifier(key), value));
+ });
+ }
+ }
+ }
+ } else {
+ properties.unshift(
+ t.objectProperty(
+ t.identifier('args'),
+ t.objectExpression(
+ Object.entries(args).map(([key, value]) => t.objectProperty(t.identifier(key), value))
+ )
+ )
+ );
+ }
+ return;
+ }
+
+ traverse.default(node, {
+ ObjectExpression(path) {
+ if (found) {
+ return;
+ }
+
+ found = true;
+ const properties = path.get('properties');
+ const argsProperty = properties.find((property) => {
+ if (property.isObjectProperty()) {
+ const key = property.get('key');
+ return key.isIdentifier() && key.node.name === 'args';
+ }
+ return false;
+ });
+
+ if (argsProperty) {
+ if (argsProperty.isObjectProperty()) {
+ const a = argsProperty.get('value');
+ if (a.isObjectExpression()) {
+ a.traverse({
+ ObjectProperty(p) {
+ const key = p.get('key');
+ if (key.isIdentifier() && key.node.name in args) {
+ p.get('value').replaceWith(args[key.node.name]);
+ delete args[key.node.name];
+ }
+ },
+ // @ts-expect-error noScope works but is not typed properly
+ noScope: true,
+ });
+
+ const remainder = Object.entries(args);
+ if (Object.keys(args).length) {
+ remainder.forEach(([key, value]) => {
+ a.pushContainer('properties', t.objectProperty(t.identifier(key), value));
+ });
+ }
+ }
+ }
+ } else {
+ path.unshiftContainer(
+ 'properties',
+ t.objectProperty(
+ t.identifier('args'),
+ t.objectExpression(
+ Object.entries(args).map(([key, value]) => t.objectProperty(t.identifier(key), value))
+ )
+ )
+ );
+ }
+ },
+
+ noScope: true,
+ });
+};
diff --git a/code/lib/core-server/src/utils/save-story/utils.ts b/code/lib/core-server/src/utils/save-story/utils.ts
new file mode 100644
index 000000000000..490cd212d884
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/utils.ts
@@ -0,0 +1 @@
+export class SaveStoryError extends Error {}
diff --git a/code/lib/core-server/src/utils/save-story/valueToAST.ts b/code/lib/core-server/src/utils/save-story/valueToAST.ts
new file mode 100644
index 000000000000..f09dd7b65a64
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/valueToAST.ts
@@ -0,0 +1,44 @@
+import * as t from '@babel/types';
+import * as babylon from '@babel/parser';
+
+export function valueToAST(literal: T): any {
+ if (literal === null) {
+ return t.nullLiteral();
+ }
+ switch (typeof literal) {
+ case 'function':
+ const ast = babylon.parse(literal.toString(), {
+ allowReturnOutsideFunction: true,
+ allowSuperOutsideMethod: true,
+ });
+
+ // @ts-expect-error (it's the contents of the function, it's an expression, trust me)
+ return ast.program.body[0]?.expression;
+
+ case 'number':
+ return t.numericLiteral(literal);
+ case 'string':
+ return t.stringLiteral(literal);
+ case 'boolean':
+ return t.booleanLiteral(literal);
+ case 'undefined':
+ return t.identifier('undefined');
+ default:
+ if (Array.isArray(literal)) {
+ return t.arrayExpression(literal.map(valueToAST));
+ }
+ return t.objectExpression(
+ Object.keys(literal)
+ .filter((k) => {
+ // @ts-expect-error (it's a completely unknown object)
+ const value = literal[k];
+ return typeof value !== 'undefined';
+ })
+ .map((k) => {
+ // @ts-expect-error (it's a completely unknown object)
+ const value = literal[k];
+ return t.objectProperty(t.stringLiteral(k), valueToAST(value));
+ })
+ );
+ }
+}
diff --git a/code/lib/core-server/src/utils/search-files.test.ts b/code/lib/core-server/src/utils/search-files.test.ts
index 6aaec136df74..c7f7ab51d388 100644
--- a/code/lib/core-server/src/utils/search-files.test.ts
+++ b/code/lib/core-server/src/utils/search-files.test.ts
@@ -66,6 +66,28 @@ describe('search-files', () => {
expect(files).toEqual(['src/commonjs-module.js']);
});
+ it('should respect glob but also the allowed file extensions', async (t) => {
+ const files = await searchFiles({
+ searchQuery: '**/*',
+ cwd: path.join(__dirname, '__search-files-tests__'),
+ });
+
+ expect(files).toEqual([
+ 'src/commonjs-module-default.js',
+ 'src/commonjs-module.js',
+ 'src/es-module.js',
+ 'src/no-export.js',
+ 'src/file-extensions/extension.cjs',
+ 'src/file-extensions/extension.cts',
+ 'src/file-extensions/extension.js',
+ 'src/file-extensions/extension.jsx',
+ 'src/file-extensions/extension.mjs',
+ 'src/file-extensions/extension.mts',
+ 'src/file-extensions/extension.ts',
+ 'src/file-extensions/extension.tsx',
+ ]);
+ });
+
it('should ignore node_modules', async (t) => {
const files = await searchFiles({
searchQuery: 'file-in-common.js',
@@ -75,6 +97,15 @@ describe('search-files', () => {
expect(files).toEqual([]);
});
+ it('should ignore story files', async (t) => {
+ const files = await searchFiles({
+ searchQuery: 'es-module.stories.js',
+ cwd: path.join(__dirname, '__search-files-tests__'),
+ });
+
+ expect(files).toEqual([]);
+ });
+
it('should not return files outside of project root', async (t) => {
await expect(() =>
searchFiles({
diff --git a/code/lib/core-server/src/utils/search-files.ts b/code/lib/core-server/src/utils/search-files.ts
index b6f1bd89ab25..98557584c4fa 100644
--- a/code/lib/core-server/src/utils/search-files.ts
+++ b/code/lib/core-server/src/utils/search-files.ts
@@ -3,7 +3,15 @@ export type SearchResult = Array;
/**
* File extensions that should be searched for
*/
-const fileExtensions = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts'];
+const FILE_EXTENSIONS = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts'];
+
+const IGNORED_FILES = [
+ '**/node_modules/**',
+ '**/*.spec.*',
+ '**/*.test.*',
+ '**/*.stories.*',
+ '**/storybook-static/**',
+];
/**
* Search for files in a directory that match the search query
@@ -15,9 +23,13 @@ const fileExtensions = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts'];
export async function searchFiles({
searchQuery,
cwd,
+ ignoredFiles = IGNORED_FILES,
+ fileExtensions = FILE_EXTENSIONS,
}: {
searchQuery: string;
cwd: string;
+ ignoredFiles?: string[];
+ fileExtensions?: string[];
}): Promise {
// Dynamically import globby because it is a pure ESM module
const { globby, isDynamicPattern } = await import('globby');
@@ -38,11 +50,14 @@ export async function searchFiles({
];
const entries = await globby(globbedSearchQuery, {
- ignore: ['**/node_modules/**', '**/*.spec.*', '**/*.test.*'],
+ ignore: ignoredFiles,
gitignore: true,
+ caseSensitiveMatch: false,
cwd,
objectMode: true,
});
- return entries.map((entry) => entry.path);
+ return entries
+ .map((entry) => entry.path)
+ .filter((entry) => fileExtensions.some((ext) => entry.endsWith(`.${ext}`)));
}
diff --git a/code/lib/core-server/src/utils/whats-new.ts b/code/lib/core-server/src/utils/whats-new.ts
new file mode 100644
index 000000000000..3392c93d201f
--- /dev/null
+++ b/code/lib/core-server/src/utils/whats-new.ts
@@ -0,0 +1,119 @@
+import fs from 'fs-extra';
+import { logger } from '@storybook/node-logger';
+import { telemetry } from '@storybook/telemetry';
+import { findConfigFile } from '@storybook/core-common';
+import type { CoreConfig, Options } from '@storybook/types';
+import { printConfig, readConfig } from '@storybook/csf-tools';
+import fetch from 'node-fetch';
+import type { Channel } from '@storybook/channels';
+import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events';
+import {
+ REQUEST_WHATS_NEW_DATA,
+ RESULT_WHATS_NEW_DATA,
+ TELEMETRY_ERROR,
+ SET_WHATS_NEW_CACHE,
+ TOGGLE_WHATS_NEW_NOTIFICATIONS,
+} from '@storybook/core-events';
+import invariant from 'tiny-invariant';
+import { sendTelemetryError } from '../withTelemetry';
+
+export type OptionsWithRequiredCache = Exclude & Required>;
+
+// Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts
+export type WhatsNewResponse = {
+ title: string;
+ url: string;
+ blogUrl?: string;
+ publishedAt: string;
+ excerpt: string;
+};
+
+const WHATS_NEW_CACHE = 'whats-new-cache';
+const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1';
+
+export function initializeWhatsNew(
+ channel: Channel,
+ options: OptionsWithRequiredCache,
+ coreOptions: CoreConfig
+) {
+ channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => {
+ const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => {
+ logger.verbose(e);
+ return {};
+ });
+ await options.cache.set(WHATS_NEW_CACHE, { ...cache, ...data });
+ });
+
+ channel.on(REQUEST_WHATS_NEW_DATA, async () => {
+ try {
+ const post = (await fetch(WHATS_NEW_URL).then(async (response) => {
+ if (response.ok) return response.json();
+ // eslint-disable-next-line @typescript-eslint/no-throw-literal
+ throw response;
+ })) as WhatsNewResponse;
+
+ const configFileName = findConfigFile('main', options.configDir);
+ if (!configFileName) {
+ throw new Error(`unable to find storybook main file in ${options.configDir}`);
+ }
+ const main = await readConfig(configFileName);
+ const disableWhatsNewNotifications = main.getFieldValue([
+ 'core',
+ 'disableWhatsNewNotifications',
+ ]);
+
+ const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
+ const data = {
+ ...post,
+ status: 'SUCCESS',
+ postIsRead: post.url === cache.lastReadPost,
+ showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost,
+ disableWhatsNewNotifications,
+ } satisfies WhatsNewData;
+ channel.emit(RESULT_WHATS_NEW_DATA, { data });
+ } catch (e) {
+ logger.verbose(e instanceof Error ? e.message : String(e));
+ channel.emit(RESULT_WHATS_NEW_DATA, {
+ data: { status: 'ERROR' } satisfies WhatsNewData,
+ });
+ }
+ });
+
+ channel.on(
+ TOGGLE_WHATS_NEW_NOTIFICATIONS,
+ async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
+ const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
+ try {
+ const mainPath = findConfigFile('main', options.configDir);
+ invariant(mainPath, `unable to find storybook main file in ${options.configDir}`);
+ const main = await readConfig(mainPath);
+ main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
+ await fs.writeFile(mainPath, printConfig(main).code);
+ if (isTelemetryEnabled) {
+ await telemetry('core-config', { disableWhatsNewNotifications });
+ }
+ } catch (error) {
+ invariant(error instanceof Error);
+ if (isTelemetryEnabled) {
+ await sendTelemetryError(error, 'core-config', {
+ cliOptions: options,
+ presetOptions: { ...options, corePresets: [], overridePresets: [] },
+ skipPrompt: true,
+ });
+ }
+ }
+ }
+ );
+
+ channel.on(TELEMETRY_ERROR, async (error) => {
+ const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
+
+ if (isTelemetryEnabled) {
+ await sendTelemetryError(error, 'browser', {
+ cliOptions: options,
+ presetOptions: { ...options, corePresets: [], overridePresets: [] },
+ skipPrompt: true,
+ });
+ }
+ });
+}
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 48b4c79c4d48..648808b99550 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 2635decf0e3a..1e1975a4bc3d 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.7",
+ "version": "8.1.0-alpha.8",
"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 66b0faf4f0b1..e640c8f69f72 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Parse and manipulate CSF and Storybook config files",
"keywords": [
"storybook"
@@ -46,7 +46,7 @@
"@babel/parser": "^7.23.0",
"@babel/traverse": "^7.23.2",
"@babel/types": "^7.23.0",
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/types": "workspace:*",
"fs-extra": "^11.1.0",
"recast": "^0.23.5",
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index 087113cd0229..297cdc943c22 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Shared utility functions for frameworks to implement docs",
"keywords": [
"storybook"
@@ -54,7 +54,7 @@
"lodash": "^4.17.21"
},
"devDependencies": {
- "@babel/preset-react": "^7.23.3",
+ "@babel/preset-react": "^7.24.1",
"babel-plugin-react-docgen": "4.2.1",
"require-from-string": "^2.0.2",
"typescript": "^5.3.2"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index 48fc836d9fdf..f05a9f52deae 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.7",
+ "version": "8.1.0-alpha.8",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index 5da45bfebc04..582007302b26 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Core Storybook Manager API & Context",
"keywords": [
"storybook"
@@ -47,7 +47,7 @@
"@storybook/channels": "workspace:*",
"@storybook/client-logger": "workspace:*",
"@storybook/core-events": "workspace:*",
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.5",
"@storybook/router": "workspace:*",
diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx
index fbb8b74a6420..4e946fa5d618 100644
--- a/code/lib/manager-api/src/index.tsx
+++ b/code/lib/manager-api/src/index.tsx
@@ -69,6 +69,7 @@ import type { ModuleFn } from './lib/types';
import { types } from './lib/addons';
+export * from './lib/request-response';
export * from './lib/shortcut';
const { ActiveTabs } = layout;
@@ -478,11 +479,13 @@ export function useAddonState(addonId: string, defaultState?: S) {
return useSharedState(addonId, defaultState);
}
-export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) => void] {
+export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) => void, Args] {
const { getCurrentStoryData, updateStoryArgs, resetStoryArgs } = useStorybookApi();
const data = getCurrentStoryData();
const args = data?.type === 'story' ? data.args : {};
+ const initialArgs = data?.type === 'story' ? data.initialArgs : {};
+
const updateArgs = useCallback(
(newArgs: Args) => updateStoryArgs(data as API_StoryEntry, newArgs),
[data, updateStoryArgs]
@@ -492,7 +495,7 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[])
[data, resetStoryArgs]
);
- return [args!, updateArgs, resetArgs];
+ return [args!, updateArgs, resetArgs, initialArgs!];
}
export function useGlobals(): [Args, (newGlobals: Args) => void] {
diff --git a/code/lib/manager-api/src/lib/request-response.ts b/code/lib/manager-api/src/lib/request-response.ts
new file mode 100644
index 000000000000..bed05f576461
--- /dev/null
+++ b/code/lib/manager-api/src/lib/request-response.ts
@@ -0,0 +1,51 @@
+import type { Channel } from '@storybook/channels';
+import type { RequestData, ResponseData } from '@storybook/core-events';
+
+export class RequestResponseError | void> extends Error {
+ payload: Payload | undefined = undefined;
+
+ constructor(message: string, payload?: Payload) {
+ super(message);
+ this.payload = payload;
+ }
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const experimental_requestResponse = <
+ RequestPayload,
+ ResponsePayload = void,
+ CreateNewStoryErrorPayload extends Record | void = void,
+>(
+ channel: Channel,
+ requestEvent: string,
+ responseEvent: string,
+ payload: RequestPayload,
+ timeout = 5000
+): Promise => {
+ let timeoutId: NodeJS.Timeout;
+
+ return new Promise((resolve, reject) => {
+ const request: RequestData = {
+ id: Math.random().toString(16).slice(2),
+ payload,
+ };
+
+ const responseHandler = (
+ response: ResponseData
+ ) => {
+ if (response.id !== request.id) return;
+ clearTimeout(timeoutId);
+ channel.off(responseEvent, responseHandler);
+ if (response.success) resolve(response.payload);
+ else reject(new RequestResponseError(response.error, response.payload));
+ };
+
+ channel.emit(requestEvent, request);
+ channel.on(responseEvent, responseHandler);
+
+ timeoutId = setTimeout(() => {
+ channel.off(responseEvent, responseHandler);
+ reject(new RequestResponseError('Timed out waiting for response'));
+ }, timeout);
+ });
+};
diff --git a/code/lib/manager-api/src/modules/versions.ts b/code/lib/manager-api/src/modules/versions.ts
index a414c07fe073..8305523f2f0d 100644
--- a/code/lib/manager-api/src/modules/versions.ts
+++ b/code/lib/manager-api/src/modules/versions.ts
@@ -109,7 +109,7 @@ export const init: ModuleFn = ({ store }) => {
}
if (renderer && typeof global.STORYBOOK_RENDERER !== 'undefined') {
- const rendererName = (global.STORYBOOK_RENDERER as string).split('/').pop()?.toLowerCase();
+ const rendererName = global.STORYBOOK_RENDERER as string;
if (rendererName) {
url += `?renderer=${normalizeRendererName(rendererName)}`;
diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts
index d7314740b1ba..f20381536ecd 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.7';
+export const version = '8.1.0-alpha.8';
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index edded56bf9c1..f992089c931b 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.7",
+ "version": "8.1.0-alpha.8",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index 033c8f088b5f..1ca60c2d5adb 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.7",
+ "version": "8.1.0-alpha.8",
"description": "",
"keywords": [
"storybook"
@@ -47,7 +47,7 @@
"@storybook/channels": "workspace:*",
"@storybook/client-logger": "workspace:*",
"@storybook/core-events": "workspace:*",
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/global": "^5.0.0",
"@storybook/types": "workspace:*",
"@types/qs": "^6.9.5",
diff --git a/code/lib/preview-api/src/Errors.stories.tsx b/code/lib/preview-api/src/Errors.stories.tsx
new file mode 100644
index 000000000000..41363ff5c566
--- /dev/null
+++ b/code/lib/preview-api/src/Errors.stories.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import AnsiToHtml from 'ansi-to-html';
+import dedent from 'ts-dedent';
+
+const ansiConverter = new AnsiToHtml({
+ escapeXML: true,
+});
+
+const Component = ({ id, header, detail }: any) => {
+ const element = document.querySelector('.' + id);
+ if (!element) {
+ throw new Error('Element not found');
+ }
+
+ if (header) {
+ document.getElementById('error-message')!.innerHTML = ansiConverter.toHtml(header);
+ }
+
+ if (detail) {
+ document.getElementById('error-stack')!.innerHTML = ansiConverter.toHtml(detail);
+ }
+
+ // remove the ids, otherwise chromatic will assume the story failed to render
+ const content = element.outerHTML.replace('error-message', '').replace('error-stack', '');
+
+ // remove the content, otherwise chromatic will assume the story failed to render
+ document.getElementById('error-message')!.innerHTML = '';
+ document.getElementById('error-stack')!.innerHTML = '';
+
+ return (
+
+ );
+};
+
+export default {
+ component: Component,
+ parameters: {
+ layout: 'fullscreen',
+ theme: 'light',
+ },
+ title: 'Errors',
+ args: {
+ id: 'sb-errordisplay',
+ },
+};
+
+export const MyError = {
+ args: {
+ header: `FAIL is not defined`,
+ detail: dedent`
+ ReferenceError: FAIL is not defined
+ at Constraint.execute (the-best-file.js:525:2)
+ at Constraint.recalculate (the-best-file.js:424:21)
+ at Planner.addPropagate (the-best-file.js:701:6)
+ at Constraint.satisfy (the-best-file.js:184:15)
+ at Planner.incrementalAdd (the-best-file.js:591:21)
+ at Constraint.addConstraint (the-best-file.js:162:10)
+ at Constraint.BinaryConstraint (the-best-file.js:346:7)
+ at Constraint.EqualityConstraint (the-best-file.js:515:38)
+ at chainTest (the-best-file.js:807:6)
+ at deltaBlue (the-best-file.js:879:2)`,
+ },
+};
+
+export const Missing = {
+ args: {
+ id: 'sb-nopreview',
+ },
+};
diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx
index 29ea71045949..ee4524c32ecf 100644
--- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx
+++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx
@@ -1,6 +1,14 @@
import { global } from '@storybook/global';
import { deprecate, logger } from '@storybook/client-logger';
+import type {
+ ArgTypesRequestPayload,
+ ArgTypesResponsePayload,
+ RequestData,
+ ResponseData,
+} from '@storybook/core-events';
import {
+ ARGTYPES_INFO_REQUEST,
+ ARGTYPES_INFO_RESPONSE,
CONFIG_ERROR,
FORCE_REMOUNT,
FORCE_RE_RENDER,
@@ -129,6 +137,7 @@ export class Preview {
this.channel.on(STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
this.channel.on(UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
this.channel.on(UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
+ this.channel.on(ARGTYPES_INFO_REQUEST, this.onRequestArgTypesInfo.bind(this));
this.channel.on(RESET_STORY_ARGS, this.onResetArgs.bind(this));
this.channel.on(FORCE_RE_RENDER, this.onForceReRender.bind(this));
this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this));
@@ -295,6 +304,25 @@ export class Preview {
});
}
+ async onRequestArgTypesInfo({ id, payload }: RequestData) {
+ try {
+ await this.storeInitializationPromise;
+ const story = await this.storyStoreValue?.loadStory(payload);
+ this.channel.emit(ARGTYPES_INFO_RESPONSE, {
+ id,
+ success: true,
+ payload: { argTypes: story?.argTypes || {} },
+ error: null,
+ } satisfies ResponseData);
+ } catch (e: any) {
+ this.channel.emit(ARGTYPES_INFO_RESPONSE, {
+ id,
+ success: false,
+ error: e?.message,
+ } satisfies ResponseData);
+ }
+ }
+
async onResetArgs({ storyId, argNames }: { storyId: string; argNames?: string[] }) {
if (!this.storyStoreValue)
throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'onResetArgs' });
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
index 1654772bbe3a..0ba45568789d 100644
--- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
+++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
@@ -911,64 +911,74 @@ describe('PreviewWeb', () => {
});
describe('while story is still rendering', () => {
- it('runs loaders again', async () => {
+ it('runs loaders again after renderToCanvas is done', async () => {
+ // Arrange - set up a gate to control when the loaders run
const [loadersRanGate, openLoadersRanGate] = createGate();
const [blockLoadersGate, openBlockLoadersGate] = createGate();
document.location.search = '?id=component-one--a';
- componentOneExports.default.loaders[0].mockImplementationOnce(async () => {
+ componentOneExports.default.loaders[0].mockImplementationOnce(async (input) => {
openLoadersRanGate();
return blockLoadersGate;
});
+ // Act - render the first time
await new PreviewWeb(importFn, getProjectAnnotations).ready();
await loadersRanGate;
+ // Assert - loader to be called the first time
+ expect(componentOneExports.default.loaders[0]).toHaveBeenCalledOnce();
expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
expect.objectContaining({
args: { foo: 'a', one: 'mapped-1' },
})
);
- componentOneExports.default.loaders[0].mockClear();
+ // Act - update the args (while loader is still running)
emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
- await waitForRender();
- expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
- expect.objectContaining({
- args: { foo: 'a', new: 'arg', one: 'mapped-1' },
- })
- );
+ // Arrange - open the gate to let the loader finish and wait for render
+ openBlockLoadersGate({ l: 8 });
+ await waitForRender();
- // Story gets rendered with updated args
- expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
+ // Assert - renderToCanvas to be called the first time with initial args
+ expect(projectAnnotations.renderToCanvas).toHaveBeenCalledOnce();
expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
expect.objectContaining({
- forceRemount: true, // Wasn't yet rendered so we need to force remount
+ forceRemount: true,
storyContext: expect.objectContaining({
- loaded: { l: 7 }, // This is the value returned by the *second* loader call
+ loaded: { l: 8 }, // This is the value returned by the *first* loader call
args: { foo: 'a', new: 'arg', one: 'mapped-1' },
}),
}),
'story-element'
);
+ // Assert - loaders are not run again yet
+ expect(componentOneExports.default.loaders[0]).toHaveBeenCalledOnce();
- // Now let the first loader call resolve
+ // Arrange - wait for loading and rendering to finish a second time
mockChannel.emit.mockClear();
- projectAnnotations.renderToCanvas.mockClear();
- openBlockLoadersGate({ l: 8 });
await waitForRender();
+ // Assert - loader is called a second time with updated args
+ await vi.waitFor(() => {
+ expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
+ expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
+ expect.objectContaining({
+ args: { foo: 'a', new: 'arg', one: 'mapped-1' },
+ })
+ );
+ });
- // Now the first call comes through, but picks up the new args
- // Note this isn't a particularly realistic case (the second loader being quicker than the first)
- expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
+ // Assert - renderToCanvas is called a second time with updated args
+ expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
expect.objectContaining({
+ forceRemount: false,
storyContext: expect.objectContaining({
- loaded: { l: 8 },
+ loaded: { l: 7 }, // This is the value returned by the *second* loader call
args: { foo: 'a', new: 'arg', one: 'mapped-1' },
}),
}),
@@ -976,7 +986,7 @@ describe('PreviewWeb', () => {
);
});
- it('renders a second time if renderToCanvas is running', async () => {
+ it('renders a second time after the already running renderToCanvas is done', async () => {
const [gate, openGate] = createGate();
document.location.search = '?id=component-one--a';
@@ -990,11 +1000,9 @@ describe('PreviewWeb', () => {
updatedArgs: { new: 'arg' },
});
- // Now let the renderToCanvas call resolve
+ // Now let the first renderToCanvas call resolve
openGate();
- await waitForRender();
-
- expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
+ expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
expect.objectContaining({
forceRemount: true,
@@ -1005,39 +1013,14 @@ describe('PreviewWeb', () => {
}),
'story-element'
);
- expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
- expect.objectContaining({
- forceRemount: false,
- storyContext: expect.objectContaining({
- loaded: { l: 7 },
- args: { foo: 'a', new: 'arg', one: 'mapped-1' },
- }),
- }),
- 'story-element'
- );
- });
- it('works if it is called directly from inside non async renderToCanvas', async () => {
- document.location.search = '?id=component-one--a';
- projectAnnotations.renderToCanvas.mockImplementation(() => {
- emitter.emit(UPDATE_STORY_ARGS, {
- storyId: 'component-one--a',
- updatedArgs: { new: 'arg' },
- });
- });
- await createAndRenderPreview();
+ // Wait for the second render to finish
+ mockChannel.emit.mockClear();
+ await waitForRender();
+ await waitForRenderPhase('rendering');
+ // Expect the second render to have the updated args
expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
- expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
- expect.objectContaining({
- forceRemount: true,
- storyContext: expect.objectContaining({
- loaded: { l: 7 },
- args: { foo: 'a', one: 'mapped-1' },
- }),
- }),
- 'story-element'
- );
expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
expect.objectContaining({
forceRemount: false,
@@ -1506,6 +1489,9 @@ describe('PreviewWeb', () => {
openGate();
await waitForRenderPhase('aborted');
+ // allow teardown to complete its retries
+ vi.runOnlyPendingTimers();
+
await waitForRenderPhase('rendering');
expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
@@ -2145,39 +2131,6 @@ describe('PreviewWeb', () => {
window.location = { ...originalLocation, reload: originalLocation.reload };
});
- it('stops initial story after loaders if running', async () => {
- const [gate, openGate] = createGate();
- componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate);
-
- document.location.search = '?id=component-one--a';
- await new PreviewWeb(importFn, getProjectAnnotations).ready();
- await waitForRenderPhase('loading');
-
- emitter.emit(SET_CURRENT_STORY, {
- storyId: 'component-one--b',
- viewMode: 'story',
- });
- await waitForSetCurrentStory();
- await waitForRender();
-
- // Now let the loader resolve
- openGate({ l: 8 });
- await waitForRender();
-
- // Story gets rendered with updated args
- expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
- expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
- expect.objectContaining({
- forceRemount: true,
- storyContext: expect.objectContaining({
- id: 'component-one--b',
- loaded: { l: 7 },
- }),
- }),
- 'story-element'
- );
- });
-
it('aborts render for initial story', async () => {
const [gate, openGate] = createGate();
@@ -2735,6 +2688,60 @@ describe('PreviewWeb', () => {
});
});
+ describe('if called twice simultaneously', () => {
+ it('does not get renders confused', async () => {
+ const [blockImportFnGate, openBlockImportFnGate] = createGate();
+ const [importFnCalledGate, openImportFnCalledGate] = createGate();
+ const newImportFn = vi.fn(async (path) => {
+ openImportFnCalledGate();
+ await blockImportFnGate;
+ return importFn(path);
+ });
+
+ document.location.search = '?id=component-one--a';
+ const preview = await createAndRenderPreview();
+ mockChannel.emit.mockClear();
+
+ preview.onStoriesChanged({ importFn: newImportFn });
+ await importFnCalledGate;
+ preview.onStoriesChanged({ importFn });
+
+ openBlockImportFnGate();
+ await waitForRender();
+
+ expect(preview.storyRenders.length).toEqual(1);
+ });
+
+ it('renders the second importFn', async () => {
+ const [importGate, openImportGate] = createGate();
+ const [importedGate, openImportedGate] = createGate();
+ const secondImportFn = vi.fn(async (path) => {
+ openImportedGate();
+ await importGate;
+ return importFn(path);
+ });
+
+ const thirdImportFn = vi.fn(async (path) => {
+ openImportedGate();
+ await importGate;
+ return importFn(path);
+ });
+
+ document.location.search = '?id=component-one--a';
+ const preview = await createAndRenderPreview();
+ mockChannel.emit.mockClear();
+
+ preview.onStoriesChanged({ importFn: secondImportFn });
+ await importedGate;
+ preview.onStoriesChanged({ importFn: thirdImportFn });
+
+ openImportGate();
+ await waitForRender();
+
+ expect(thirdImportFn).toHaveBeenCalled();
+ });
+ });
+
describe('when the current story changes', () => {
const newComponentOneExports = merge({}, componentOneExports, {
a: { args: { foo: 'edited' } },
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx
index 6480d4d4b9f8..193a5f52358a 100644
--- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx
+++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx
@@ -353,12 +353,8 @@ export class PreviewWithSelection extends Preview, (_?: any) => void] => {
- let openGate = (_?: any) => {};
- const gate = new Promise((resolve) => {
+const createGate = (): [Promise, () => void] => {
+ let openGate = () => {};
+ const gate = new Promise((resolve) => {
openGate = resolve;
});
return [gate, openGate];
};
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0));
-describe('StoryRender', () => {
- it('throws PREPARE_ABORTED if torndown during prepare', async () => {
- const [importGate, openImportGate] = createGate();
- const mockStore = {
- loadStory: vi.fn(async () => {
- await importGate;
- return {};
- }),
- cleanupStory: vi.fn(),
- };
-
- const render = new StoryRender(
- new Channel({}),
- mockStore as unknown as StoryStore,
- vi.fn(),
- {} as any,
- entry.id,
- 'story'
- );
-
- const preparePromise = render.prepare();
-
- render.teardown();
-
- openImportGate();
-
- await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED);
- });
+window.location = { reload: vi.fn() } as any;
+describe('StoryRender', () => {
it('does run play function if passed autoplay=true', async () => {
const story = {
id: 'id',
@@ -59,6 +34,7 @@ describe('StoryRender', () => {
name: 'name',
tags: [],
applyLoaders: vi.fn(),
+ applyBeforeEach: vi.fn(),
unboundStoryFn: vi.fn(),
playFunction: vi.fn(),
prepareContext: vi.fn(),
@@ -66,7 +42,7 @@ describe('StoryRender', () => {
const render = new StoryRender(
new Channel({}),
- { getStoryContext: () => ({}) } as any,
+ { getStoryContext: () => ({}), addCleanupCallbacks: vi.fn() } as any,
vi.fn() as any,
{} as any,
entry.id,
@@ -86,6 +62,7 @@ describe('StoryRender', () => {
name: 'name',
tags: [],
applyLoaders: vi.fn(),
+ applyBeforeEach: vi.fn(),
unboundStoryFn: vi.fn(),
playFunction: vi.fn(),
prepareContext: vi.fn(),
@@ -93,7 +70,7 @@ describe('StoryRender', () => {
const render = new StoryRender(
new Channel({}),
- { getStoryContext: () => ({}) } as any,
+ { getStoryContext: () => ({}), addCleanupCallbacks: vi.fn() } as any,
vi.fn() as any,
{} as any,
entry.id,
@@ -105,4 +82,270 @@ describe('StoryRender', () => {
await render.renderToElement({} as any);
expect(story.playFunction).not.toHaveBeenCalled();
});
+
+ it('only rerenders once when triggered multiple times while pending', async () => {
+ // Arrange - setup StoryRender and async gate blocking applyLoaders
+ const [loaderGate, openLoaderGate] = createGate();
+ const story = {
+ id: 'id',
+ title: 'title',
+ name: 'name',
+ tags: [],
+ applyLoaders: vi.fn(() => loaderGate),
+ applyBeforeEach: vi.fn(),
+ unboundStoryFn: vi.fn(),
+ playFunction: vi.fn(),
+ prepareContext: vi.fn(),
+ };
+ const store = {
+ getStoryContext: () => ({}),
+ cleanupStory: vi.fn(),
+ addCleanupCallbacks: vi.fn(),
+ };
+ const renderToScreen = vi.fn();
+ const render = new StoryRender(
+ new Channel({}),
+ store as any,
+ renderToScreen,
+ {} as any,
+ entry.id,
+ 'story',
+ { autoplay: true },
+ story as any
+ );
+ // Arrange - render (blocked by loaders)
+ render.renderToElement({} as any);
+ expect(story.applyLoaders).toHaveBeenCalledOnce();
+ expect(render.phase).toBe('loading');
+
+ // Act - rerender 3x
+ render.rerender();
+ render.rerender();
+ render.rerender();
+
+ // Assert - still loading, not yet rendered
+ expect(story.applyLoaders).toHaveBeenCalledOnce();
+ expect(render.phase).toBe('loading');
+ expect(renderToScreen).not.toHaveBeenCalled();
+
+ // Act - finish loading
+ openLoaderGate();
+
+ // Assert - loaded and rendered twice, played once
+ await vi.waitFor(async () => {
+ console.log(render.phase);
+ expect(story.applyLoaders).toHaveBeenCalledTimes(2);
+ expect(renderToScreen).toHaveBeenCalledTimes(2);
+ expect(story.playFunction).toHaveBeenCalledOnce();
+ });
+ });
+
+ describe('teardown', () => {
+ it('throws PREPARE_ABORTED if torndown during prepare', async () => {
+ const [importGate, openImportGate] = createGate();
+ const mockStore = {
+ loadStory: vi.fn(async () => {
+ await importGate;
+ return {};
+ }),
+ cleanupStory: vi.fn(),
+ };
+
+ const render = new StoryRender(
+ new Channel({}),
+ mockStore as unknown as StoryStore,
+ vi.fn(),
+ {} as any,
+ entry.id,
+ 'story'
+ );
+
+ const preparePromise = render.prepare();
+
+ render.teardown();
+
+ openImportGate();
+
+ await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED);
+ });
+
+ it('reloads the page when tearing down during loading', async () => {
+ // Arrange - setup StoryRender and async gate blocking applyLoaders
+ const [loaderGate] = createGate();
+ const story = {
+ id: 'id',
+ title: 'title',
+ name: 'name',
+ tags: [],
+ applyLoaders: vi.fn(() => loaderGate),
+ applyBeforeEach: vi.fn(),
+ unboundStoryFn: vi.fn(),
+ playFunction: vi.fn(),
+ prepareContext: vi.fn(),
+ };
+ const store = {
+ getStoryContext: () => ({}),
+ cleanupStory: vi.fn(),
+ addCleanupCallbacks: vi.fn(),
+ };
+ const render = new StoryRender(
+ new Channel({}),
+ store as any,
+ vi.fn() as any,
+ {} as any,
+ entry.id,
+ 'story',
+ { autoplay: true },
+ story as any
+ );
+
+ // Act - render (blocked by loaders), teardown
+ render.renderToElement({} as any);
+ expect(story.applyLoaders).toHaveBeenCalledOnce();
+ expect(render.phase).toBe('loading');
+ render.teardown();
+
+ // Assert - window is reloaded
+ await vi.waitFor(() => {
+ expect(window.location.reload).toHaveBeenCalledOnce();
+ expect(store.cleanupStory).toHaveBeenCalledOnce();
+ });
+ });
+
+ it('reloads the page when tearing down during rendering', async () => {
+ // Arrange - setup StoryRender and async gate blocking renderToScreen
+ const [renderGate] = createGate();
+ const story = {
+ id: 'id',
+ title: 'title',
+ name: 'name',
+ tags: [],
+ applyLoaders: vi.fn(),
+ applyBeforeEach: vi.fn(),
+ unboundStoryFn: vi.fn(),
+ playFunction: vi.fn(),
+ prepareContext: vi.fn(),
+ };
+ const store = {
+ getStoryContext: () => ({}),
+ cleanupStory: vi.fn(),
+ addCleanupCallbacks: vi.fn(),
+ };
+ const renderToScreen = vi.fn(() => renderGate);
+
+ const render = new StoryRender(
+ new Channel({}),
+ store as any,
+ renderToScreen as any,
+ {} as any,
+ entry.id,
+ 'story',
+ { autoplay: true },
+ story as any
+ );
+
+ // Act - render (blocked by renderToScreen), teardown
+ render.renderToElement({} as any);
+ await tick(); // go from 'loading' to 'rendering' phase
+ expect(renderToScreen).toHaveBeenCalledOnce();
+ expect(render.phase).toBe('rendering');
+ render.teardown();
+
+ // Assert - window is reloaded
+ await vi.waitFor(() => {
+ expect(window.location.reload).toHaveBeenCalledOnce();
+ expect(store.cleanupStory).toHaveBeenCalledOnce();
+ });
+ });
+
+ it('reloads the page when tearing down during playing', async () => {
+ // Arrange - setup StoryRender and async gate blocking playing
+ const [playGate] = createGate();
+ const story = {
+ id: 'id',
+ title: 'title',
+ name: 'name',
+ tags: [],
+ applyLoaders: vi.fn(),
+ applyBeforeEach: vi.fn(),
+ unboundStoryFn: vi.fn(),
+ playFunction: vi.fn(() => playGate),
+ prepareContext: vi.fn(),
+ };
+ const store = {
+ getStoryContext: () => ({}),
+ cleanupStory: vi.fn(),
+ addCleanupCallbacks: vi.fn(),
+ };
+
+ const render = new StoryRender(
+ new Channel({}),
+ store as any,
+ vi.fn() as any,
+ {} as any,
+ entry.id,
+ 'story',
+ { autoplay: true },
+ story as any
+ );
+
+ // Act - render (blocked by playFn), teardown
+ render.renderToElement({} as any);
+ await tick(); // go from 'loading' to 'beforeEach' phase
+ await tick(); // go from 'beforeEach' to 'playing' phase
+ expect(story.playFunction).toHaveBeenCalledOnce();
+ expect(render.phase).toBe('playing');
+ render.teardown();
+
+ // Assert - window is reloaded
+ await vi.waitFor(() => {
+ expect(window.location.reload).toHaveBeenCalledOnce();
+ expect(store.cleanupStory).toHaveBeenCalledOnce();
+ });
+ });
+
+ it('reloads the page when remounting during loading', async () => {
+ // Arrange - setup StoryRender and async gate blocking applyLoaders
+ const [loaderGate] = createGate();
+ const story = {
+ id: 'id',
+ title: 'title',
+ name: 'name',
+ tags: [],
+ applyLoaders: vi.fn(() => loaderGate),
+ applyBeforeEach: vi.fn(),
+ unboundStoryFn: vi.fn(),
+ playFunction: vi.fn(),
+ prepareContext: vi.fn(),
+ };
+ const store = {
+ getStoryContext: () => ({}),
+ cleanupStory: vi.fn(),
+ addCleanupCallbacks: vi.fn(),
+ };
+ const render = new StoryRender(
+ new Channel({}),
+ store as any,
+ vi.fn() as any,
+ {} as any,
+ entry.id,
+ 'story',
+ { autoplay: true },
+ story as any
+ );
+
+ // Act - render, blocked by loaders
+ render.renderToElement({} as any);
+ expect(story.applyLoaders).toHaveBeenCalledOnce();
+ expect(render.phase).toBe('loading');
+ // Act - remount
+ render.remount();
+
+ // Assert - window is reloaded
+ await vi.waitFor(() => {
+ expect(window.location.reload).toHaveBeenCalledOnce();
+ expect(store.cleanupStory).toHaveBeenCalledOnce();
+ });
+ });
+ });
});
diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts
index ff3449b7a437..8ade66fc8942 100644
--- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts
+++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts
@@ -27,6 +27,7 @@ const { AbortController } = globalThis;
export type RenderPhase =
| 'preparing'
| 'loading'
+ | 'beforeEach'
| 'rendering'
| 'playing'
| 'played'
@@ -56,6 +57,8 @@ export class StoryRender implements Render {};
@@ -101,7 +104,7 @@ export class StoryRender implements Render);
+ await this.store.cleanupStory(this.story as PreparedStory);
throw PREPARE_ABORTED;
}
}
@@ -120,7 +123,7 @@ export class StoryRender implements Render implements Render implements Render);
+ // TODO add this to CSF
+ canvasElement,
+ } as unknown as StoryContextForLoaders);
});
- if (abortSignal.aborted) {
- return;
- }
+ if (abortSignal.aborted) return;
const renderStoryContext: StoryContext = {
...loadedContext!,
@@ -187,6 +200,14 @@ export class StoryRender implements Render {
+ const cleanupCallbacks = await applyBeforeEach(renderStoryContext);
+ this.store.addCleanupCallbacks(story, cleanupCallbacks);
+ });
+
+ if (abortSignal.aborted) return;
+
const renderContext: RenderContext = {
componentId,
title,
@@ -265,13 +286,31 @@ export class StoryRender implements Render implements Render {
const { hooks } = store.getStoryContext(story) as { hooks: HooksContext };
hooks.clean = vi.fn();
- store.cleanupStory(story);
+ await store.cleanupStory(story);
expect(hooks.clean).toHaveBeenCalled();
});
});
@@ -625,6 +625,7 @@ describe('StoryStore', () => {
expect(store.raw()).toMatchInlineSnapshot(`
[
{
+ "applyBeforeEach": [Function],
"applyLoaders": [Function],
"argTypes": {
"a": {
@@ -671,6 +672,7 @@ describe('StoryStore', () => {
"undecoratedStoryFn": [Function],
},
{
+ "applyBeforeEach": [Function],
"applyLoaders": [Function],
"argTypes": {
"a": {
@@ -717,6 +719,7 @@ describe('StoryStore', () => {
"undecoratedStoryFn": [Function],
},
{
+ "applyBeforeEach": [Function],
"applyLoaders": [Function],
"argTypes": {
"a": {
diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts
index 123ea5b984c8..ebfe582cdfe2 100644
--- a/code/lib/preview-api/src/modules/store/StoryStore.ts
+++ b/code/lib/preview-api/src/modules/store/StoryStore.ts
@@ -40,6 +40,7 @@ import {
normalizeProjectAnnotations,
prepareContext,
} from './csf';
+import type { CleanupCallback } from '@storybook/csf';
// TODO -- what are reasonable values for these?
const CSF_CACHE_SIZE = 1000;
@@ -56,6 +57,8 @@ export class StoryStore {
hooks: Record>;
+ cleanupCallbacks: Record;
+
cachedCSFFiles?: Record>;
processCSFFileWithCache: typeof processCSFFile;
@@ -79,6 +82,7 @@ export class StoryStore {
this.args = new ArgsStore();
this.globals = new GlobalsStore({ globals, globalTypes });
this.hooks = {};
+ this.cleanupCallbacks = {};
// We use a cache for these two functions for two reasons:
// 1. For performance
@@ -234,8 +238,17 @@ export class StoryStore {
});
}
- cleanupStory(story: PreparedStory): void {
+ addCleanupCallbacks(story: PreparedStory, callbacks: CleanupCallback[]) {
+ this.cleanupCallbacks[story.id] = callbacks;
+ }
+
+ async cleanupStory(story: PreparedStory): Promise {
this.hooks[story.id].clean();
+
+ const callbacks = this.cleanupCallbacks[story.id];
+ if (callbacks) for (const callback of [...callbacks].reverse()) await callback();
+
+ delete this.cleanupCallbacks[story.id];
}
extract(
diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts
index 147038a5a8d2..bfad2ebe5f21 100644
--- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts
@@ -21,6 +21,7 @@ describe('composeConfigs', () => {
globals: {},
globalTypes: {},
loaders: [],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -45,6 +46,7 @@ describe('composeConfigs', () => {
globals: {},
globalTypes: {},
loaders: [],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -73,6 +75,7 @@ describe('composeConfigs', () => {
globals: {},
globalTypes: {},
loaders: [],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -107,6 +110,7 @@ describe('composeConfigs', () => {
globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
loaders: [],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -144,6 +148,7 @@ describe('composeConfigs', () => {
globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
loaders: [],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -172,6 +177,7 @@ describe('composeConfigs', () => {
globals: {},
globalTypes: {},
loaders: ['1', '2', '3', '4'],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -200,6 +206,7 @@ describe('composeConfigs', () => {
globals: {},
globalTypes: {},
loaders: ['1', '2', '3'],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -224,6 +231,7 @@ describe('composeConfigs', () => {
globals: {},
globalTypes: {},
loaders: [],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -249,6 +257,7 @@ describe('composeConfigs', () => {
globals: {},
globalTypes: {},
loaders: [],
+ beforeEach: [],
runStep: expect.any(Function),
});
});
@@ -277,6 +286,7 @@ describe('composeConfigs', () => {
globals: {},
globalTypes: {},
loaders: [],
+ beforeEach: [],
render: 'render-2',
renderToCanvas: 'renderToCanvas-2',
applyDecorators: 'applyDecorators-2',
diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts
index 29823816beaf..9c943e14f1c1 100644
--- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts
+++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts
@@ -58,6 +58,7 @@ export function composeConfigs(
globals: getObjectField(moduleExportList, 'globals'),
globalTypes: getObjectField(moduleExportList, 'globalTypes'),
loaders: getArrayField(moduleExportList, 'loaders'),
+ beforeEach: getArrayField(moduleExportList, 'beforeEach'),
render: getSingletonField(moduleExportList, 'render'),
renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts
index e2e6a88db31e..60cca0023352 100644
--- a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts
+++ b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts
@@ -16,6 +16,7 @@ export function normalizeProjectAnnotations({
argTypesEnhancers,
decorators,
loaders,
+ beforeEach,
...annotations
}: ProjectAnnotations): NormalizedProjectAnnotations {
return {
@@ -23,6 +24,7 @@ export function normalizeProjectAnnotations({
...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),
decorators: normalizeArrays(decorators),
loaders: normalizeArrays(loaders),
+ beforeEach: normalizeArrays(beforeEach),
argTypesEnhancers: [
...(argTypesEnhancers || []),
inferArgTypes,
diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts
index a4bf5a04fdeb..f9e4b9cdca92 100644
--- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts
@@ -51,6 +51,7 @@ describe('normalizeStory', () => {
{
"argTypes": {},
"args": {},
+ "beforeEach": [],
"decorators": [],
"id": "title--story-export",
"loaders": [],
@@ -120,6 +121,7 @@ describe('normalizeStory', () => {
{
"argTypes": {},
"args": {},
+ "beforeEach": [],
"decorators": [],
"id": "title--story-export",
"loaders": [],
@@ -156,6 +158,7 @@ describe('normalizeStory', () => {
"args": {
"storyArg": "val",
},
+ "beforeEach": [],
"decorators": [
[Function],
],
@@ -211,6 +214,7 @@ describe('normalizeStory', () => {
"storyArg": "val",
"storyArg2": "legacy",
},
+ "beforeEach": [],
"decorators": [
[Function],
[Function],
diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts
index 9a96bc4a332e..fc228251d82e 100644
--- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts
+++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts
@@ -54,6 +54,10 @@ export function normalizeStory(
const args = { ...story?.args, ...storyObject.args };
const argTypes = { ...(story?.argTypes as ArgTypes), ...(storyObject.argTypes as ArgTypes) };
const loaders = [...normalizeArrays(storyObject.loaders), ...normalizeArrays(story?.loaders)];
+ const beforeEach = [
+ ...normalizeArrays(storyObject.beforeEach),
+ ...normalizeArrays(story?.beforeEach),
+ ];
const { render, play, tags = [] } = storyObject;
// eslint-disable-next-line no-underscore-dangle
@@ -68,6 +72,7 @@ export function normalizeStory(
args,
argTypes: normalizeInputTypes(argTypes),
loaders,
+ beforeEach,
...(render && { render }),
...(userStoryFn && { userStoryFn }),
...(play && { play }),
diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
index a3aa544c4827..9322d3c9d2a3 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
@@ -167,6 +167,137 @@ describe('composeStory', () => {
expect(spyFn).toHaveBeenCalled();
});
+ it('should work with spies set up in beforeEach', async () => {
+ const spyFn = vi.fn();
+
+ const Story: Story = {
+ args: {
+ spyFn,
+ },
+ beforeEach: async () => {
+ spyFn.mockReturnValue('mockedData');
+ },
+ render: (args) => {
+ const data = args.spyFn();
+ expect(data).toBe('mockedData');
+ },
+ };
+
+ const composedStory = composeStory(Story, {});
+ await composedStory.load();
+ composedStory();
+ expect(spyFn).toHaveBeenCalled();
+ });
+
+ it('should call beforeEach from Project, Meta and Story level', async () => {
+ const beforeEachSpy = vi.fn();
+ const cleanupSpy = vi.fn();
+
+ const metaObj: Meta = {
+ beforeEach: async () => {
+ beforeEachSpy('define from meta');
+
+ return () => {
+ cleanupSpy('cleanup from meta');
+ };
+ },
+ };
+
+ const Story: Story = {
+ render: () => 'foo',
+ beforeEach: async () => {
+ beforeEachSpy('define from story');
+
+ return () => {
+ cleanupSpy('cleanup from story');
+ };
+ },
+ };
+
+ const composedStory = composeStory(Story, metaObj, {
+ beforeEach: async () => {
+ beforeEachSpy('define from project');
+
+ return () => {
+ cleanupSpy('cleanup from project');
+ };
+ },
+ });
+ await composedStory.load();
+ composedStory();
+ expect(beforeEachSpy).toHaveBeenNthCalledWith(1, 'define from project');
+ expect(beforeEachSpy).toHaveBeenNthCalledWith(2, 'define from meta');
+ expect(beforeEachSpy).toHaveBeenNthCalledWith(3, 'define from story');
+
+ // simulate the next story's load to trigger cleanup
+ await composedStory.load();
+ expect(cleanupSpy).toHaveBeenNthCalledWith(1, 'cleanup from story');
+ expect(cleanupSpy).toHaveBeenNthCalledWith(2, 'cleanup from meta');
+ expect(cleanupSpy).toHaveBeenNthCalledWith(3, 'cleanup from project');
+ });
+
+ it('should call beforeEach after loaders', async () => {
+ const spyFn = vi.fn();
+
+ const Story: Story = {
+ render: () => 'foo',
+ loaders: async () => {
+ spyFn('from loaders');
+ },
+ beforeEach: async () => {
+ spyFn('from beforeEach');
+ },
+ };
+
+ const composedStory = composeStory(Story, {});
+ await composedStory.load();
+ expect(spyFn).toHaveBeenNthCalledWith(1, 'from loaders');
+ expect(spyFn).toHaveBeenNthCalledWith(2, 'from beforeEach');
+ });
+
+ it('should warn when previous cleanups are still around when rendering a story', async () => {
+ const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+ const cleanupSpy = vi.fn();
+ const beforeEachSpy = vi.fn(() => {
+ return () => {
+ cleanupSpy();
+ };
+ });
+
+ const PreviousStory: Story = {
+ render: () => 'first',
+ beforeEach: beforeEachSpy,
+ };
+ const CurrentStory: Story = {
+ render: () => 'second',
+ args: {
+ firstArg: false,
+ secondArg: true,
+ },
+ };
+ const firstComposedStory = composeStory(PreviousStory, {});
+ await firstComposedStory.load();
+ firstComposedStory();
+
+ expect(beforeEachSpy).toHaveBeenCalled();
+ expect(cleanupSpy).not.toHaveBeenCalled();
+ expect(consoleWarnSpy).not.toHaveBeenCalled();
+
+ const secondComposedStory = composeStory(CurrentStory, {});
+ secondComposedStory();
+
+ expect(cleanupSpy).not.toHaveBeenCalled();
+ expect(consoleWarnSpy).toHaveBeenCalledOnce();
+ expect(consoleWarnSpy.mock.calls[0][0]).toMatchInlineSnapshot(
+ `
+ "Some stories were not cleaned up before rendering 'Unnamed Story (firstArg, secondArg)'.
+
+ You should load the story with \`await Story.load()\` before rendering it.
+ See https://storybook.js.org/docs/api/portable-stories-vitest#3-load for more information."
+ `
+ );
+ });
+
it('should throw an error if Story is undefined', () => {
expect(() => {
// @ts-expect-error (invalid input)
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 57e8fcda9a2b..a4385605685e 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,6 +1,6 @@
/* eslint-disable no-underscore-dangle */
/* eslint-disable @typescript-eslint/naming-convention */
-import { isExportStory } from '@storybook/csf';
+import { type CleanupCallback, isExportStory } from '@storybook/csf';
import dedent from 'ts-dedent';
import type {
Renderer,
@@ -29,6 +29,9 @@ import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
let globalProjectAnnotations: ProjectAnnotations = {};
+const DEFAULT_STORY_TITLE = 'ComposedStory';
+const DEFAULT_STORY_NAME = 'Unnamed Story';
+
function extractAnnotation(
annotation: NamedOrDefaultProjectAnnotations
) {
@@ -47,6 +50,8 @@ export function setProjectAnnotations(
globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation));
}
+const cleanups: { storyName: string; callback: CleanupCallback }[] = [];
+
export function composeStory(
storyAnnotations: LegacyStoryAnnotationsOrFn,
componentAnnotations: ComponentAnnotations,
@@ -61,7 +66,7 @@ export function composeStory(componentAnnotations);
@@ -70,7 +75,7 @@ export function composeStory(
storyName,
@@ -113,6 +118,8 @@ export function composeStory> = Object.assign(
function storyFn(extraArgs?: Partial) {
context.args = {
@@ -120,14 +127,47 @@ export function composeStory 0 && !previousCleanupsDone) {
+ let humanReadableIdentifier = storyName;
+ if (story.title !== DEFAULT_STORY_TITLE) {
+ // prefix with title unless it's the generic ComposedStory title
+ humanReadableIdentifier = `${story.title} - ${humanReadableIdentifier}`;
+ }
+ if (storyName === DEFAULT_STORY_NAME && Object.keys(context.args).length > 0) {
+ // suffix with args if it's an unnamed story and there are args
+ humanReadableIdentifier = `${humanReadableIdentifier} (${Object.keys(context.args).join(
+ ', '
+ )})`;
+ }
+ console.warn(
+ dedent`Some stories were not cleaned up before rendering '${humanReadableIdentifier}'.
+
+ You should load the story with \`await Story.load()\` before rendering it.
+ See https://storybook.js.org/docs/api/portable-stories-${
+ process.env.JEST_WORKER_ID !== undefined ? 'jest' : 'vitest'
+ }#3-load for more information.`
+ );
+ }
return story.unboundStoryFn(prepareContext(context));
},
{
id: story.id,
storyName,
load: async () => {
+ // First run any registered cleanup function
+ for (const { callback } of [...cleanups].reverse()) await callback();
+ cleanups.length = 0;
+
+ previousCleanupsDone = true;
+
const loadedContext = await story.applyLoaders(context);
context.loaded = loadedContext.loaded;
+
+ cleanups.push(
+ ...(await story.applyBeforeEach(context))
+ .filter(Boolean)
+ .map((callback) => ({ storyName, callback }))
+ );
},
args: story.initialArgs as Partial,
parameters: story.parameters as Parameters,
diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
index b5ab8b9fb407..a574080558c5 100644
--- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
@@ -718,6 +718,7 @@ describe('prepareMeta', () => {
name: storyName,
story,
applyLoaders,
+ applyBeforeEach,
originalStoryFn,
unboundStoryFn,
undecoratedStoryFn,
diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
index ae976d19ac5e..6183274669fe 100644
--- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
+++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
@@ -21,7 +21,7 @@ import type {
StoryContextForLoaders,
StrictArgTypes,
} from '@storybook/types';
-import { includeConditionalArg, combineTags } from '@storybook/csf';
+import { type CleanupCallback, includeConditionalArg, combineTags } from '@storybook/csf';
import { global as globalThis } from '@storybook/global';
import { once } from '@storybook/client-logger';
@@ -68,9 +68,23 @@ export function prepareStory(
const loaded: Record = Object.assign({}, ...loadResults);
updatedContext = { ...updatedContext, loaded: { ...updatedContext.loaded, ...loaded } };
}
+
return updatedContext;
};
+ const applyBeforeEach = async (context: StoryContext): Promise => {
+ const cleanupCallbacks = new Array<() => unknown>();
+ for (const beforeEach of [
+ ...normalizeArrays(projectAnnotations.beforeEach),
+ ...normalizeArrays(componentAnnotations.beforeEach),
+ ...normalizeArrays(storyAnnotations.beforeEach),
+ ]) {
+ const cleanup = await beforeEach(context);
+ if (cleanup) cleanupCallbacks.push(cleanup);
+ }
+ return cleanupCallbacks;
+ };
+
const undecoratedStoryFn = (context: StoryContext) =>
(render as ArgsStoryFn)(context.args, context);
@@ -120,6 +134,7 @@ export function prepareStory(
undecoratedStoryFn,
unboundStoryFn,
applyLoaders,
+ applyBeforeEach,
playFunction,
};
}
diff --git a/code/lib/preview-api/src/modules/store/csf/stepRunners.ts b/code/lib/preview-api/src/modules/store/csf/stepRunners.ts
index 2a5b5be88e17..efc2d583bf31 100644
--- a/code/lib/preview-api/src/modules/store/csf/stepRunners.ts
+++ b/code/lib/preview-api/src/modules/store/csf/stepRunners.ts
@@ -3,7 +3,7 @@ import type { Renderer, StepRunner } from '@storybook/types';
/**
* Compose step runners to create a single step runner that applies each step runner in order.
*
- * A step runner is a a function that takes a defined step: `step('label', () => { ... })`
+ * A step runner is a function that takes a defined step: `step('label', () => { ... })`
* and runs it. The prototypical example is from `@storybook/addon-interactions` where the
* step runner will decorate all instrumented code inside the step with information about the
* label.
diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts
index 477e07137987..aa521c6fed91 100644
--- a/code/lib/preview-api/template/stories/rendering.stories.ts
+++ b/code/lib/preview-api/template/stories/rendering.stories.ts
@@ -66,3 +66,34 @@ export const ChangeArgs = {
await expect(button).toHaveFocus();
},
};
+
+let loadedLabel = 'Initial';
+
+/**
+ * This story demonstrates what happens when rendering (loaders) have side effects, and can possibly interleave with each other
+ * Triggering multiple force remounts quickly should only result in a single remount in the end
+ * and the label should be 'Loaded. Click Me' at the end. If loaders are interleaving it would result in a label of 'Error: Interleaved loaders. Click Me'
+ * Similarly, changing args rapidly should only cause one rerender at a time, producing the same result.
+ */
+export const SlowLoader = {
+ parameters: {
+ chromatic: { disable: true },
+ },
+ loaders: [
+ async () => {
+ loadedLabel = 'Loading...';
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ loadedLabel = loadedLabel === 'Loading...' ? 'Loaded.' : 'Error: Interleaved loaders.';
+ return { label: loadedLabel };
+ },
+ ],
+ decorators: [
+ (storyFn: any, context: any) =>
+ storyFn({
+ args: {
+ ...context.args,
+ label: `${context.loaded.label} ${context.args.label}`,
+ },
+ }),
+ ],
+};
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
index aaaff8693593..93c7fa25ab1f 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.7",
+ "version": "8.1.0-alpha.8",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 35b3bd868d21..d9ba1aee82d5 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.7",
+ "version": "8.1.0-alpha.8",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index 58d83e529778..a02e6bc64f23 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Core Storybook Router",
"keywords": [
"storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 121f17de9800..bc1b9457df79 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Source loader",
"keywords": [
"lib",
@@ -45,7 +45,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/types": "workspace:*",
"estraverse": "^5.2.0",
"lodash": "^4.17.21",
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index bad5ecca34c1..ae34dcc201cb 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Telemetry logging for crash reports and usage statistics",
"keywords": [
"storybook"
diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts
index 846e7adb9556..c6372084c2c8 100644
--- a/code/lib/telemetry/src/types.ts
+++ b/code/lib/telemetry/src/types.ts
@@ -16,7 +16,10 @@ export type EventType =
| 'error-metadata'
| 'version-update'
| 'core-config'
- | 'remove';
+ | 'remove'
+ | 'save-story'
+ | 'create-new-story-file'
+ | 'create-new-story-file-search';
export interface Dependency {
version: string | undefined;
diff --git a/code/lib/test/package.json b/code/lib/test/package.json
index 502f18c5140e..fb8c7fd34c01 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.7",
+ "version": "8.1.0-alpha.8",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts
new file mode 100644
index 000000000000..9af203a7baaf
--- /dev/null
+++ b/code/lib/test/template/stories/before-each.stories.ts
@@ -0,0 +1,31 @@
+import { expect, mocked, getByRole, spyOn, userEvent } from '@storybook/test';
+
+const meta = {
+ component: globalThis.Components.Button,
+ beforeEach() {
+ spyOn(console, 'log').mockName('console.log');
+ console.log('first');
+ },
+};
+
+export default meta;
+
+export const BeforeEachOrder = {
+ parameters: {
+ chromatic: { disable: true },
+ },
+ beforeEach() {
+ console.log('second');
+ },
+ args: {
+ label: 'Button',
+ onClick: () => {
+ console.log('third');
+ },
+ },
+ async play({ canvasElement }) {
+ await userEvent.click(getByRole(canvasElement, 'button'));
+
+ await expect(mocked(console.log).mock.calls).toEqual([['first'], ['second'], ['third']]);
+ },
+};
diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/lib/test/template/stories/module-mocking.stories.ts
new file mode 100644
index 000000000000..8332183005a2
--- /dev/null
+++ b/code/lib/test/template/stories/module-mocking.stories.ts
@@ -0,0 +1,28 @@
+import { global as globalThis } from '@storybook/global';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore This alias is set in the sandbox. Using ts-ignore instead of ts-expect-error to avoid build errors in the sandbox.
+// eslint-disable-next-line import/no-unresolved
+import { foo } from '#utils';
+import { expect, fn, isMockFunction, mocked } from '@storybook/test';
+
+export default {
+ component: globalThis.Components.Button,
+ args: {
+ onClick: fn(),
+ label: 'Mock story',
+ },
+ parameters: {
+ chromatic: {
+ disable: true,
+ },
+ },
+ beforeEach: () => {
+ mocked(foo).mockReturnValue('mocked');
+ },
+ async play() {
+ await expect(isMockFunction(foo)).toBe(true);
+ await expect(foo()).toBe('mocked');
+ },
+};
+
+export const Basic = {};
diff --git a/code/lib/test/template/stories/utils.mock.ts b/code/lib/test/template/stories/utils.mock.ts
new file mode 100644
index 000000000000..15c648e88c00
--- /dev/null
+++ b/code/lib/test/template/stories/utils.mock.ts
@@ -0,0 +1,4 @@
+import { fn } from '@storybook/test';
+import * as utils from './utils';
+
+export const foo = fn(utils.foo);
diff --git a/code/lib/test/template/stories/utils.ts b/code/lib/test/template/stories/utils.ts
new file mode 100644
index 000000000000..5a80b1903c1f
--- /dev/null
+++ b/code/lib/test/template/stories/utils.ts
@@ -0,0 +1 @@
+export const foo = () => 'not mocked';
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index d0b87b51c0c8..3c528bd4f469 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Core Storybook Components",
"keywords": [
"storybook"
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index 03e1f8b2cc22..d7b66b977f9a 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Core Storybook TS Types",
"keywords": [
"storybook"
@@ -49,7 +49,7 @@
"file-system-cache": "2.3.0"
},
"devDependencies": {
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@types/fs-extra": "^11.0.1",
"@types/node": "^18.0.0",
"typescript": "^5.3.2"
diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts
index ee34ad43ce79..041aaed2e709 100644
--- a/code/lib/types/src/modules/story.ts
+++ b/code/lib/types/src/modules/story.ts
@@ -3,6 +3,7 @@ import type {
ProjectAnnotations as CsfProjectAnnotations,
DecoratorFunction,
LoaderFunction,
+ CleanupCallback,
} from '@storybook/csf';
import type {
@@ -103,6 +104,7 @@ export type PreparedStory =
applyLoaders: (
context: StoryContextForLoaders
) => Promise & { loaded: StoryContext['loaded'] }>;
+ applyBeforeEach: (context: StoryContext) => Promise;
playFunction?: (context: StoryContext) => Promise | void;
};
diff --git a/code/package.json b/code/package.json
index bd57cdf00dfa..0444fc8fd4df 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "8.1.0-alpha.7",
+ "version": "8.1.0-alpha.8",
"private": true,
"description": "Storybook root",
"homepage": "https://storybook.js.org/",
@@ -90,7 +90,7 @@
"type-fest": "~2.19"
},
"dependencies": {
- "@chromatic-com/storybook": "^1.2.18",
+ "@chromatic-com/storybook": "^1.3.2",
"@nx/eslint": "18.0.6",
"@nx/vite": "18.0.6",
"@nx/workspace": "18.0.6",
@@ -127,7 +127,7 @@
"@storybook/core-events": "workspace:*",
"@storybook/core-server": "workspace:*",
"@storybook/core-webpack": "workspace:*",
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/csf-plugin": "workspace:*",
"@storybook/csf-tools": "workspace:*",
"@storybook/docs-tools": "workspace:*",
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 3f7e99928679..3c400f6c540a 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.7",
+ "version": "8.1.0-alpha.8",
"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 5209a5cabfb1..248e9b43fdc4 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.7",
+ "version": "8.1.0-alpha.8",
"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 71d1cad823e2..5527f781c57c 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.7",
+ "version": "8.1.0-alpha.8",
"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 33e1c1abc278..13a613129369 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.7",
+ "version": "8.1.0-alpha.8",
"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 79d58fccb7c3..28b9995464da 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.7",
+ "version": "8.1.0-alpha.8",
"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 7631ae956d49..246adf3d9ca8 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.7",
+ "version": "8.1.0-alpha.8",
"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 500f80f54b1c..fd7762c0794d 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.7",
+ "version": "8.1.0-alpha.8",
"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 def5200f6755..8ccc4d2df80d 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook HTML renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 09fc253432d9..5d82366e374a 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook Preact renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index c71f8628de5e..9e077ff76419 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.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook React renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot
index 51b837feb2b6..2fb12d5579e7 100644
--- a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot
@@ -1,5 +1,5 @@
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index b218e58028e3..489123a4e44a 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server",
- "version": "8.1.0-alpha.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook Server renderer",
"keywords": [
"storybook"
@@ -46,7 +46,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/csf-tools": "workspace:*",
"@storybook/global": "^5.0.0",
"@storybook/preview-api": "workspace:*",
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 8240c18f4359..1343fcd2c879 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "8.1.0-alpha.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook Svelte renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index b50d57c870ca..67090c8250db 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
- "version": "8.1.0-alpha.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook Vue 3 renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 0b14130edbac..3f17d976d8ee 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
- "version": "8.1.0-alpha.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook web-components renderer",
"keywords": [
"lit",
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 4025715324d0..03dea1aea08d 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -8,9 +8,12 @@ const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true';
const allStories = [
{
directory: '../manager/src',
- files: '**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
titlePrefix: '@manager',
},
+ {
+ directory: '../../lib/preview-api/src',
+ titlePrefix: '@preview',
+ },
{
directory: '../components/src/components',
titlePrefix: '@components',
@@ -19,6 +22,14 @@ const allStories = [
directory: '../blocks/src',
titlePrefix: '@blocks',
},
+ {
+ directory: '../../addons/controls/src', // TODO other addons?
+ titlePrefix: '@addons/controls',
+ },
+ {
+ directory: '../../addons/onboarding/src',
+ titlePrefix: '@addons/onboarding',
+ },
];
/**
diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx
index 7cdbda8d32e9..1ac61cf4d375 100644
--- a/code/ui/.storybook/manager.tsx
+++ b/code/ui/.storybook/manager.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { addons, types } from '@storybook/manager-api';
+import { addons } from '@storybook/manager-api';
import startCase from 'lodash/startCase.js';
addons.setConfig({
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index fbdb55c7f87f..523a3e1aed3c 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/blocks",
- "version": "8.1.0-alpha.7",
+ "version": "8.1.0-alpha.8",
"description": "Storybook Doc Blocks",
"keywords": [
"storybook"
@@ -48,7 +48,7 @@
"@storybook/client-logger": "workspace:*",
"@storybook/components": "workspace:*",
"@storybook/core-events": "workspace:*",
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/docs-tools": "workspace:*",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.5",
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
index 39ed63dc6299..159b65b5df03 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
@@ -52,27 +52,6 @@ export const Compact = {
args: { ...Normal.args, compact: true },
};
-const AddonPanelLayout = styled.div(({ theme }) => ({
- fontSize: theme.typography.size.s2 - 1,
- background: theme.background.content,
-}));
-
-export const InAddonPanel = {
- args: { ...Normal.args, inAddonPanel: true },
- decorators: [(storyFn: any) => {storyFn()} ],
-};
-
-export const InAddonPanelNoControls = {
- render: (args: any) => {storyFn()} ],
+ parameters: {
+ layout: 'fullscreen',
+ },
+};
+
+export const InAddonPanelNoControls = {
+ ...InAddonPanel,
+ args: {
+ ...InAddonPanel.args,
+ rows: Object.fromEntries(
+ Object.entries(InAddonPanel.args.rows).map(([k, v]) => [k, { ...v, control: null }])
+ ),
+ },
+};
+
export const Error = {
args: {
error: ArgsTableError.NO_COMPONENT,
diff --git a/code/ui/blocks/src/controls/options/Checkbox.tsx b/code/ui/blocks/src/controls/options/Checkbox.tsx
index 6be088b111ba..7c883c21300c 100644
--- a/code/ui/blocks/src/controls/options/Checkbox.tsx
+++ b/code/ui/blocks/src/controls/options/Checkbox.tsx
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ isInline: boolean }>(
},
},
(props) => {
- if ([props['aria-readonly']]) {
+ if (props['aria-readonly'] === 'true') {
return {
input: {
cursor: 'not-allowed',
diff --git a/code/ui/blocks/src/controls/options/Radio.tsx b/code/ui/blocks/src/controls/options/Radio.tsx
index d3bc514f3361..76c3239e747a 100644
--- a/code/ui/blocks/src/controls/options/Radio.tsx
+++ b/code/ui/blocks/src/controls/options/Radio.tsx
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ isInline: boolean }>(
},
},
(props) => {
- if ([props['aria-readonly']]) {
+ if (props['aria-readonly'] === 'true') {
return {
input: {
cursor: 'not-allowed',
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 418262682687..bbbb9009a741 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "8.1.0-alpha.7",
+ "version": "8.1.0-alpha.8",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -59,9 +59,10 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
+ "@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-slot": "^1.0.2",
"@storybook/client-logger": "workspace:*",
- "@storybook/csf": "0.1.4--canary.80.ba37fd5.0",
+ "@storybook/csf": "^0.1.7",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.5",
"@storybook/theming": "workspace:*",
diff --git a/code/ui/components/src/components/Badge/Badge.stories.tsx b/code/ui/components/src/components/Badge/Badge.stories.tsx
index 530b4f368ac2..974dc64f8be1 100644
--- a/code/ui/components/src/components/Badge/Badge.stories.tsx
+++ b/code/ui/components/src/components/Badge/Badge.stories.tsx
@@ -1,12 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
import { Badge } from './Badge';
-export default {
+const meta = {
component: Badge,
-};
+} satisfies Meta;
-export const Default = { args: { children: 'Default' } };
-export const Positive = { args: { status: 'positive', children: 'Positive' } };
-export const Negative = { args: { status: 'negative', children: 'Negative' } };
-export const Neutral = { args: { status: 'neutral', children: 'Neutral' } };
-export const Warning = { args: { status: 'warning', children: 'Warning' } };
-export const Critical = { args: { status: 'critical', children: 'Critical' } };
+export default meta;
+type Story = StoryObj;
+
+export const Default = { args: { children: 'Default' } } satisfies Story;
+export const Positive = { args: { status: 'positive', children: 'Positive' } } satisfies Story;
+export const Negative = { args: { status: 'negative', children: 'Negative' } } satisfies Story;
+export const Neutral = { args: { status: 'neutral', children: 'Neutral' } } satisfies Story;
+export const Warning = { args: { status: 'warning', children: 'Warning' } } satisfies Story;
+export const Critical = { args: { status: 'critical', children: 'Critical' } } satisfies Story;
diff --git a/code/ui/components/src/components/Badge/Badge.tsx b/code/ui/components/src/components/Badge/Badge.tsx
index f9d1c9b91ebb..51bcee12e2ef 100644
--- a/code/ui/components/src/components/Badge/Badge.tsx
+++ b/code/ui/components/src/components/Badge/Badge.tsx
@@ -80,7 +80,7 @@ const BadgeWrapper = styled.div(
);
export interface BadgeProps {
- status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
+ status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
children?: React.ReactNode;
}
diff --git a/code/addons/onboarding/src/components/Modal/Modal.stories.tsx b/code/ui/components/src/components/Modal/Modal.stories.tsx
similarity index 55%
rename from code/addons/onboarding/src/components/Modal/Modal.stories.tsx
rename to code/ui/components/src/components/Modal/Modal.stories.tsx
index 527aa87d4323..658683e6368b 100644
--- a/code/addons/onboarding/src/components/Modal/Modal.stories.tsx
+++ b/code/ui/components/src/components/Modal/Modal.stories.tsx
@@ -3,18 +3,20 @@ import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within, expect } from '@storybook/test';
import { Modal } from './Modal';
+import { Button } from '../Button/Button';
-const meta: Meta = {
+type Story = StoryObj;
+
+const meta = {
component: Modal,
decorators: [(storyFn) => {storyFn()}
],
-};
+} satisfies Meta;
export default meta;
-type Story = StoryObj;
-
export const Default: Story = {
args: {
+ children: undefined,
width: undefined,
height: undefined,
},
@@ -24,12 +26,10 @@ export const Default: Story = {
return (
<>
- {({ Close }) => (
-
-
Hello world!
-
setOpen(false)}>Close
-
+
Hello world!
+
setOpen(false)}>Close
+
setOpen(true)}>Open modal
@@ -54,12 +54,10 @@ export const FixedWidth: Story = {
return (
<>
- {({ Close }) => (
-
-
Hello world!
-
setOpen(false)}>Close
-
+
Hello world!
+
setOpen(false)}>Close
+
setOpen(true)}>Open modal
@@ -84,12 +82,10 @@ export const FixedHeight: Story = {
return (
<>
- {({ Close }) => (
-
-
Hello world!
-
setOpen(false)}>Close
-
+
Hello world!
+
setOpen(false)}>Close
+
setOpen(true)}>Open modal
@@ -115,12 +111,10 @@ export const FixedWidthAndHeight: Story = {
return (
<>
- {({ Close }) => (
-
-
Hello world!
-
setOpen(false)}>Close
-
+
Hello world!
+
setOpen(false)}>Close
+
setOpen(true)}>Open modal
@@ -133,3 +127,48 @@ export const FixedWidthAndHeight: Story = {
await expect(canvas.findByText('Hello world!')).resolves.toBeInTheDocument();
},
};
+
+export const StyledComponents: Story = {
+ args: {
+ ...Default.args,
+ width: 500,
+ },
+ render: (props) => {
+ const [isOpen, setOpen] = useState(false);
+
+ return (
+ <>
+
+
+
+ Hello
+ Lorem ipsum dolor sit amet.
+
+
+
+ One
+ Two
+
+ Right
+
+ Another section
+
+ Save
+
+ Cancel
+
+
+
+ Oops. Something went wrong.
+
+ setOpen(true)}>Open modal
+
+ );
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement.parentElement!);
+ const button = canvas.getAllByText('Open modal')[0];
+ await userEvent.click(button);
+ await expect(canvas.findByText('Hello')).resolves.toBeInTheDocument();
+ },
+};
diff --git a/code/ui/components/src/components/Modal/Modal.styled.tsx b/code/ui/components/src/components/Modal/Modal.styled.tsx
new file mode 100644
index 000000000000..b60e512b74ab
--- /dev/null
+++ b/code/ui/components/src/components/Modal/Modal.styled.tsx
@@ -0,0 +1,135 @@
+import { keyframes, styled } from '@storybook/theming';
+import * as Dialog from '@radix-ui/react-dialog';
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import { IconButton } from '../IconButton/IconButton';
+import { CrossIcon } from '@storybook/icons';
+
+const fadeIn = keyframes({
+ from: { opacity: 0 },
+ to: { opacity: 1 },
+});
+
+const expand = keyframes({
+ from: { maxHeight: 0 },
+ to: {},
+});
+
+const zoomIn = keyframes({
+ from: {
+ opacity: 0,
+ transform: 'translate(-50%, -50%) scale(0.9)',
+ },
+ to: {
+ opacity: 1,
+ transform: 'translate(-50%, -50%) scale(1)',
+ },
+});
+
+export const Overlay = styled.div({
+ backgroundColor: 'rgba(27, 28, 29, 0.2)',
+ position: 'fixed',
+ inset: 0,
+ width: '100%',
+ height: '100%',
+ zIndex: 10,
+ animation: `${fadeIn} 200ms`,
+});
+
+export const Container = styled.div<{ width?: number; height?: number }>(
+ ({ theme, width, height }) => ({
+ backgroundColor: theme.background.bar,
+ borderRadius: 6,
+ boxShadow: `rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 38px -10px`,
+ position: 'fixed',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: width ?? 740,
+ height: height ?? 'auto',
+ maxWidth: 'calc(100% - 40px)',
+ maxHeight: '85vh',
+ overflow: 'hidden',
+ zIndex: 11,
+ animation: `${zoomIn} 200ms`,
+
+ '&:focus-visible': {
+ outline: 'none',
+ },
+ })
+);
+
+export const CloseButton = (props: React.ComponentProps) => (
+
+
+
+
+);
+
+export const Content = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ margin: 16,
+ gap: 16,
+});
+
+export const Row = styled.div({
+ display: 'flex',
+ justifyContent: 'space-between',
+ gap: 16,
+});
+
+export const Col = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 4,
+});
+
+export const Header = (props: React.ComponentProps) => (
+
+
+);
+
+export const Title = styled(Dialog.Title)(({ theme }) => ({
+ margin: 0,
+ fontSize: theme.typography.size.s3,
+ fontWeight: theme.typography.weight.bold,
+}));
+
+export const Description = styled(Dialog.Description)(({ theme }) => ({
+ margin: 0,
+ fontSize: theme.typography.size.s2,
+}));
+
+export const Actions = styled.div({
+ display: 'flex',
+ flexDirection: 'row-reverse',
+ gap: 8,
+});
+
+export const ErrorWrapper = styled.div(({ theme }) => ({
+ maxHeight: 100,
+ overflow: 'auto',
+ animation: `${expand} 300ms, ${fadeIn} 300ms`,
+ backgroundColor: theme.background.critical,
+ color: theme.color.lightest,
+ fontSize: theme.typography.size.s2,
+
+ '& > div': {
+ position: 'relative',
+ padding: '8px 16px',
+ },
+}));
+
+export const Error = ({
+ children,
+ ...props
+}: { children: React.ReactNode } & ComponentProps) => (
+
+ {children}
+
+);
diff --git a/code/addons/onboarding/src/components/Modal/Modal.tsx b/code/ui/components/src/components/Modal/Modal.tsx
similarity index 59%
rename from code/addons/onboarding/src/components/Modal/Modal.tsx
rename to code/ui/components/src/components/Modal/Modal.tsx
index 4c8bd9bec66d..ad5ddaa85b4e 100644
--- a/code/addons/onboarding/src/components/Modal/Modal.tsx
+++ b/code/ui/components/src/components/Modal/Modal.tsx
@@ -1,52 +1,51 @@
import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
-import { ContentWrapper, StyledOverlay } from './Modal.styled';
+import * as Components from './Modal.styled';
-type ContentProps = React.ComponentProps;
+type ContentProps = React.ComponentProps;
interface ModalProps extends Omit, 'children'> {
width?: number;
height?: number;
- children: (props: {
- Title: typeof Dialog.Title;
- Description: typeof Dialog.Description;
- Close: typeof Dialog.Close;
- }) => React.ReactNode;
+ children: React.ReactNode;
onEscapeKeyDown?: ContentProps['onEscapeKeyDown'];
onInteractOutside?: ContentProps['onInteractOutside'];
+ className?: string;
+ container?: HTMLElement;
}
export const initial = { opacity: 0 };
export const animate = { opacity: 1, transition: { duration: 0.3 } };
export const exit = { opacity: 0, transition: { duration: 0.3 } };
-export function Modal({
+function BaseModal({
children,
width,
height,
onEscapeKeyDown,
onInteractOutside = (ev) => ev.preventDefault(),
+ className,
+ container,
...rootProps
}: ModalProps) {
return (
-
+
-
-
- {children({
- Title: Dialog.Title,
- Description: Dialog.Description,
- Close: Dialog.Close,
- })}
-
+
+ {children}
+
+
);
}
+
+export const Modal = Object.assign(BaseModal, Components, { Dialog });
diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
index f3f965af8783..cd697523d44d 100644
--- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
+++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
import { styled } from '@storybook/theming';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -75,36 +75,35 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({
},
}));
-export const ScrollArea = ({
- children,
- horizontal = false,
- vertical = false,
- offset = 2,
- scrollbarSize = 6,
- className,
-}: ScrollAreaProps) => (
-
- {children}
- {horizontal && (
-
-
- )}
- {vertical && (
-
-
- )}
- {horizontal && vertical &&
+export const ScrollArea = forwardRef(
+ (
+ { children, horizontal = false, vertical = false, offset = 2, scrollbarSize = 6, className },
+ ref
+ ) => (
+
+ {children}
+ {horizontal && (
+
+
+ )}
+ {vertical && (
+
+
+ )}
+ {horizontal && vertical &&
+ )
);
+ScrollArea.displayName = 'ScrollArea';
diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
index ffe4a08d699f..372a684c315d 100644
--- a/code/ui/components/src/index.ts
+++ b/code/ui/components/src/index.ts
@@ -42,6 +42,7 @@ export { createCopyToClipboardFunction } from './components/syntaxhighlighter/sy
// UI
export { ActionBar } from './components/ActionBar/ActionBar';
+export { Modal } from './components/Modal/Modal';
export { Spaced } from './components/spaced/Spaced';
export { Placeholder } from './components/placeholder/placeholder';
export { ScrollArea } from './components/ScrollArea/ScrollArea';
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index 9dd2b2528cd8..1f3e37a58ba2 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager",
- "version": "8.1.0-alpha.7",
+ "version": "8.1.0-alpha.8",
"description": "Core Storybook UI",
"keywords": [
"storybook"
@@ -85,6 +85,7 @@
"@storybook/test": "workspace:*",
"@storybook/theming": "workspace:*",
"@storybook/types": "workspace:*",
+ "@tanstack/react-virtual": "^3.3.0",
"@testing-library/react": "^11.2.2",
"@types/react-transition-group": "^4",
"@types/semver": "^7.3.4",
@@ -107,6 +108,7 @@
"resolve-from": "^5.0.0",
"semver": "^7.3.7",
"store2": "^2.14.2",
+ "telejson": "^7.2.0",
"ts-dedent": "^2.0.0",
"typescript": "^5.3.2"
},
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
index af4c7fcc8e57..a3b87acdcf52 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
@@ -218,7 +218,7 @@ export const BookIconLongSubHeadline: Story = {
content: {
headline: 'Storybook has a book icon!',
subHeadline:
- 'Find out more! by clicking on on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications',
+ 'Find out more! by clicking on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications',
},
icon: ) =>
+ JSON.stringify(args, (_, value) => {
+ if (typeof value === 'function') return '__sb_empty_function_arg__';
+ return value;
+ });
+
+export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFileModalProps) => {
+ const [isLoading, setLoading] = useState(false);
+ const [fileSearchQuery, setFileSearchQuery] = useState('');
+ const fileSearchQueryDebounced = useDebounce(fileSearchQuery, 600);
+ const fileSearchQueryDeferred = useDeferredValue(fileSearchQueryDebounced);
+ const emittedValue = useRef(null);
+ const [error, setError] = useState<{ selectedItemId?: number | string; error: string } | null>(
+ null
+ );
+ const api = useStorybookApi();
+
+ const [searchResults, setSearchResults] = useState(null);
+
+ const handleSuccessfullyCreatedStory = useCallback(
+ (componentExportName: string) => {
+ api.addNotification({
+ id: 'create-new-story-file-success',
+ content: {
+ headline: 'Story file created',
+ subHeadline: `${componentExportName} was created`,
+ },
+ duration: 8_000,
+ icon: ) => {
+ const isLatestRequest = data.id === fileSearchQueryDeferred;
+
+ if (isLatestRequest) {
+ if (data.success) {
+ setSearchResults(data.payload.files);
+ } else {
+ setError({ error: data.error });
+ }
+
+ channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set);
+ setLoading(false);
+ emittedValue.current = null;
+ }
+ };
+
+ channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set);
+
+ if (fileSearchQueryDeferred !== '' && emittedValue.current !== fileSearchQueryDeferred) {
+ emittedValue.current = fileSearchQueryDeferred;
+ channel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
+ id: fileSearchQueryDeferred,
+ payload: {},
+ } satisfies RequestData);
+ } else {
+ setSearchResults(null);
+ setLoading(false);
+ }
+
+ return () => {
+ channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set);
+ };
+ }, [fileSearchQueryDeferred]);
+
+ const handleCreateNewStory = useCallback(
+ async ({
+ componentExportName,
+ componentFilePath,
+ componentIsDefaultExport,
+ componentExportCount,
+ selectedItemId,
+ }: NewStoryPayload) => {
+ try {
+ const channel = addons.getChannel();
+
+ const createNewStoryResult = await experimental_requestResponse<
+ CreateNewStoryRequestPayload,
+ CreateNewStoryResponsePayload,
+ CreateNewStoryErrorPayload
+ >(channel, CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, {
+ componentExportName,
+ componentFilePath,
+ componentIsDefaultExport,
+ componentExportCount,
+ });
+
+ setError(null);
+
+ const storyId = createNewStoryResult.storyId;
+
+ await trySelectNewStory(api.selectStory, storyId);
+
+ try {
+ const argTypesInfoResult = await experimental_requestResponse<
+ ArgTypesRequestPayload,
+ ArgTypesResponsePayload
+ >(channel, ARGTYPES_INFO_REQUEST, ARGTYPES_INFO_RESPONSE, {
+ storyId,
+ });
+
+ const argTypes = argTypesInfoResult.argTypes;
+
+ const requiredArgs = extractSeededRequiredArgs(argTypes);
+
+ await experimental_requestResponse(
+ channel,
+ SAVE_STORY_REQUEST,
+ SAVE_STORY_RESPONSE,
+ {
+ args: stringifyArgs(requiredArgs),
+ importPath: createNewStoryResult.storyFilePath,
+ csfId: storyId,
+ }
+ );
+ } catch (e) {}
+
+ handleSuccessfullyCreatedStory(componentExportName);
+ handleFileSearch();
+ } catch (e: any) {
+ switch (e?.payload?.type as CreateNewStoryErrorPayload['type']) {
+ case 'STORY_FILE_EXISTS':
+ const err = e as RequestResponseError;
+ await trySelectNewStory(api.selectStory, err.payload.kind);
+ handleStoryAlreadyExists();
+ break;
+ default:
+ setError({ selectedItemId: selectedItemId, error: (e as any)?.message });
+ break;
+ }
+ }
+ },
+ [api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch, handleStoryAlreadyExists]
+ );
+
+ useEffect(() => {
+ setError(null);
+ }, [fileSearchQueryDeferred]);
+
+ useEffect(() => {
+ return handleFileSearch();
+ }, [handleFileSearch]);
+
+ return (
+ ;
+ parentRef: React.MutableRefObject;
+ selectedItem: number | null;
+}
+
+/**
+ * Hook to navigate through the list of items and subitems using the arrow keys
+ */
+export const useArrowKeyNavigation = ({
+ parentRef,
+ rowVirtualizer,
+ selectedItem,
+}: UseArrowKeyNavigationProps) => {
+ useEffect(() => {
+ const handleArrowKeys = (event: KeyboardEvent) => {
+ if (!parentRef.current) {
+ return;
+ }
+
+ const maxIndex = rowVirtualizer.options.count;
+ const activeElement = document.activeElement;
+ const rowIndex = parseInt(activeElement.getAttribute('data-index') || '-1', 10);
+ const isActiveElementInput = activeElement.tagName === 'INPUT';
+
+ const getFirstElement = () =>
+ document.querySelector('[data-index="0"]') as HTMLElement | null;
+ const getLastElement = () =>
+ document.querySelector(`[data-index="${maxIndex - 1}"]`) as HTMLElement | null;
+
+ if (event.code === 'ArrowDown' && activeElement) {
+ event.stopPropagation();
+
+ // If the search input is focused, focus the first element
+ if (isActiveElementInput) {
+ getFirstElement()?.focus();
+ return;
+ }
+
+ // if the last element is focused, focus the first element
+ if (rowIndex === maxIndex - 1) {
+ flushSync(() => {
+ rowVirtualizer.scrollToIndex(0, { align: 'start' });
+ });
+ setTimeout(() => {
+ getFirstElement()?.focus();
+ }, 100);
+ return;
+ }
+
+ // if the focus is on an selected element, focus the first element in the sublist
+ if (selectedItem === rowIndex) {
+ const firstSubListItem = document.querySelector(
+ `[data-index-position="${selectedItem}_first"]`
+ ) as HTMLElement;
+ firstSubListItem?.focus();
+ return;
+ }
+
+ // if the focus is on the last element on a sublist, focus the next parent list element
+ if (selectedItem !== null) {
+ const isLastElementSelected = activeElement
+ .getAttribute('data-index-position')
+ ?.includes('last');
+ if (isLastElementSelected) {
+ const nextElement = document.querySelector(
+ `[data-index="${selectedItem + 1}"]`
+ ) as HTMLElement;
+ nextElement?.focus();
+ return;
+ }
+ }
+
+ const nextElement = activeElement.nextElementSibling as HTMLElement;
+ nextElement?.focus();
+ }
+
+ if (event.code === 'ArrowUp' && activeElement) {
+ if (isActiveElementInput) {
+ flushSync(() => {
+ rowVirtualizer.scrollToIndex(maxIndex - 1, { align: 'start' });
+ });
+ setTimeout(() => {
+ getLastElement()?.focus();
+ }, 100);
+ return;
+ }
+
+ // if the focus is on the first element on a sublist, focus the previous parent list element
+ if (selectedItem !== null) {
+ const isLastElementSelected = activeElement
+ .getAttribute('data-index-position')
+ ?.includes('first');
+ if (isLastElementSelected) {
+ const prevElement = document.querySelector(
+ `[data-index="${selectedItem}"]`
+ ) as HTMLElement;
+ prevElement?.focus();
+ return;
+ }
+ }
+
+ const previousElement = activeElement.previousElementSibling as HTMLElement;
+ previousElement?.focus();
+ }
+ };
+ // listener for arrow keys to select the next/previous element by using the current active element as base
+ document.addEventListener('keydown', handleArrowKeys, { capture: true });
+
+ return () => {
+ document.removeEventListener('keydown', handleArrowKeys, { capture: true });
+ };
+ }, [rowVirtualizer, selectedItem, parentRef]);
+};
diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx
new file mode 100644
index 000000000000..420d4ce5dc6e
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileList.tsx
@@ -0,0 +1,215 @@
+import { styled } from '@storybook/theming';
+import { rgba } from 'polished';
+
+export const FileListWrapper = styled('div')(({ theme }) => ({
+ marginTop: '-16px',
+ // after element which fades out the list
+ '&::after': {
+ content: '""',
+ position: 'fixed',
+ pointerEvents: 'none',
+ bottom: 0,
+ left: 0,
+ right: 0,
+ height: '80px',
+ background: `linear-gradient(${rgba(theme.barBg, 0)} 10%, ${theme.barBg} 80%)`,
+ },
+}));
+
+export const FileList = styled('div')(({ theme }) => ({
+ height: '280px',
+ overflow: 'auto',
+ msOverflowStyle: 'none',
+ scrollbarWidth: 'none',
+ position: 'relative',
+ '::-webkit-scrollbar': {
+ display: 'none',
+ },
+}));
+
+export const FileListLi = styled('li')(({ theme }) => ({
+ ':focus-visible': {
+ outline: 'none',
+
+ '.file-list-item': {
+ borderRadius: '4px',
+ background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight,
+
+ '> svg': {
+ display: 'flex',
+ },
+ },
+ },
+}));
+
+export const FileListItem = styled('div')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ position: 'relative',
+}));
+
+export const FileListItemContentWrapper = styled.div<{
+ selected: boolean;
+ disabled: boolean;
+ error: boolean;
+}>(({ theme, selected, disabled, error }) => ({
+ display: 'flex',
+ alignItems: 'flex-start',
+ gap: '8px',
+ alignSelf: 'stretch',
+ padding: '8px 16px',
+ cursor: 'pointer',
+ borderRadius: '4px',
+
+ ...(selected && {
+ borderRadius: '4px',
+ background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight,
+
+ '> svg': {
+ display: 'flex',
+ },
+ }),
+
+ ...(disabled && {
+ cursor: 'not-allowed',
+
+ div: {
+ color: `${theme.color.mediumdark} !important`,
+ },
+ }),
+
+ ...(error && {
+ background: theme.base === 'light' ? '#00000011' : '#00000033',
+ }),
+
+ '&:hover': {
+ background: error
+ ? '#00000022'
+ : theme.base === 'dark'
+ ? 'rgba(255,255,255,.1)'
+ : theme.color.mediumlight,
+
+ '> svg': {
+ display: 'flex',
+ },
+ },
+}));
+
+export const FileListUl = styled('ul')({
+ margin: 0,
+ padding: '0 0 0 0',
+ width: '100%',
+ position: 'relative',
+});
+
+export const FileListItemContent = styled('div')({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ width: 'calc(100% - 50px)',
+});
+
+export const FileListIconWrapper = styled('div')<{ error: boolean }>(({ theme, error }) => ({
+ color: error ? theme.color.negativeText : theme.color.secondary,
+}));
+
+export const FileListItemLabel = styled('div')<{ error: boolean }>(({ theme, error }) => ({
+ color: error
+ ? theme.color.negativeText
+ : theme.base === 'dark'
+ ? theme.color.lighter
+ : theme.color.darkest,
+ fontSize: '14px',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ maxWidth: '100%',
+}));
+
+export const FileListItemPath = styled('div')(({ theme }) => ({
+ color: theme.color.mediumdark,
+ fontSize: '14px',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ maxWidth: '100%',
+}));
+
+export const FileListExport = styled('ul')(({ theme }) => ({
+ margin: 0,
+ padding: 0,
+}));
+
+export const FileListItemExport = styled('li')<{ error: boolean }>(({ theme, error }) => ({
+ padding: '8px 16px 8px 16px',
+ marginLeft: '30px',
+ display: 'flex',
+ gap: '8px',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ fontSize: '14px',
+ cursor: 'pointer',
+ borderRadius: '4px',
+
+ ':focus-visible': {
+ outline: 'none',
+ },
+
+ ...(error && {
+ background: '#F9ECEC',
+ color: theme.color.negativeText,
+ }),
+
+ '&:hover,:focus-visible': {
+ background: error
+ ? '#F9ECEC'
+ : theme.base === 'dark'
+ ? 'rgba(255, 255, 255, 0.1)'
+ : theme.color.mediumlight,
+
+ '> svg': {
+ display: 'flex',
+ },
+ },
+
+ '> div > svg': {
+ color: error ? theme.color.negativeText : theme.color.secondary,
+ },
+}));
+
+export const FileListItemExportName = styled('div')(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ gap: '8px',
+ width: 'calc(100% - 20px)',
+}));
+
+export const FileListItemExportNameContent = styled('span')(({ theme }) => ({
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ maxWidth: 'calc(100% - 160px)',
+ display: 'inline-block',
+}));
+
+export const DefaultExport = styled('span')(({ theme }) => ({
+ display: 'inline-block',
+ padding: `1px ${theme.appBorderRadius}px`,
+ borderRadius: '2px',
+ fontSize: '10px',
+ color: theme.base === 'dark' ? theme.color.lightest : '#727272',
+ backgroundColor: theme.base === 'dark' ? 'rgba(255, 255, 255, 0.1)' : '#F2F4F5',
+}));
+
+export const NoResults = styled('div')(({ theme }) => ({
+ textAlign: 'center',
+ maxWidth: '334px',
+ margin: '16px auto 50px auto',
+ fontSize: '14px',
+ color: theme.base === 'dark' ? theme.color.lightest : '#000',
+}));
+
+export const NoResultsDescription = styled('p')(({ theme }) => ({
+ margin: 0,
+ color: theme.base === 'dark' ? theme.color.defaultText : theme.color.mediumdark,
+}));
diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx
new file mode 100644
index 000000000000..f2fb798d5992
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx
@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn, fireEvent, findByText, expect } from '@storybook/test';
+
+import { FileSearchList } from './FileSearchList';
+
+const meta = {
+ component: FileSearchList,
+ args: {
+ onNewStory: fn(),
+ },
+ parameters: {
+ layout: 'fullscreen',
+ },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ isLoading: true,
+ searchResults: null,
+ errorItemId: null,
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ isLoading: false,
+ searchResults: [],
+ errorItemId: null,
+ },
+};
+
+export const WithResults: Story = {
+ play: async ({ canvasElement, args }) => {
+ // use react testing library
+ // select first item in the list and click on it
+ const firstItem = await findByText(canvasElement, 'module-multiple-exports.js');
+ fireEvent.click(firstItem);
+
+ const exportedElement1 = await findByText(canvasElement, 'module-multiple-exports');
+ fireEvent.click(exportedElement1);
+
+ expect(args.onNewStory).toHaveBeenCalledWith({
+ selectedItemId: 'src/module-multiple-exports.js_0',
+ componentExportName: 'default',
+ componentFilePath: 'src/module-multiple-exports.js',
+ componentIsDefaultExport: true,
+ });
+
+ const exportedElement2 = await findByText(canvasElement, 'namedExport');
+ fireEvent.click(exportedElement2);
+
+ expect(args.onNewStory).toHaveBeenCalledWith({
+ selectedItemId: 'src/module-multiple-exports.js_1',
+ componentExportName: 'namedExport',
+ componentFilePath: 'src/module-multiple-exports.js',
+ componentIsDefaultExport: false,
+ });
+
+ const singleExport = await findByText(canvasElement, 'module-single-export.js');
+ fireEvent.click(singleExport);
+
+ expect(args.onNewStory).toHaveBeenCalledWith({
+ selectedItemId: 'src/module-single-export.js',
+ componentExportName: 'default',
+ componentFilePath: 'src/module-single-export.js',
+ componentIsDefaultExport: true,
+ });
+
+ expect(args.onNewStory).toHaveBeenCalledTimes(3);
+
+ const noExportsModule1 = await findByText(canvasElement, 'no-exports-module.js');
+ fireEvent.click(noExportsModule1);
+
+ expect(args.onNewStory).toHaveBeenCalledTimes(3);
+
+ const noExportsModule2 = await findByText(canvasElement, 'no-exports-module-1.js');
+ fireEvent.click(noExportsModule2);
+
+ expect(args.onNewStory).toHaveBeenCalledTimes(3);
+ },
+ args: {
+ isLoading: false,
+ errorItemId: null,
+ searchResults: [
+ {
+ exportedComponents: [],
+ storyFileExists: false,
+ filepath: 'src/no-exports-module.js',
+ },
+ {
+ storyFileExists: false,
+ exportedComponents: [
+ {
+ default: true,
+ name: 'default',
+ },
+ {
+ default: false,
+ name: 'namedExport',
+ },
+ ],
+ filepath: 'src/module-multiple-exports.js',
+ },
+ {
+ storyFileExists: false,
+ exportedComponents: null,
+ filepath: 'src/no-exports-module-1.js',
+ },
+ {
+ storyFileExists: false,
+ exportedComponents: [
+ {
+ default: true,
+ name: 'default',
+ },
+ ],
+ filepath: 'src/module-single-export.js',
+ },
+ {
+ storyFileExists: true,
+ exportedComponents: [
+ {
+ default: true,
+ name: 'default',
+ },
+ {
+ default: false,
+ name: 'namedExportWithStory',
+ },
+ ],
+ filepath: 'src/has-story-file-with-multiple-exports.js',
+ },
+ {
+ storyFileExists: true,
+ exportedComponents: [
+ {
+ default: true,
+ name: 'default',
+ },
+ ],
+ filepath: 'src/has-story-file.js',
+ },
+ ],
+ },
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx
new file mode 100644
index 000000000000..316704abfba6
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx
@@ -0,0 +1,368 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons';
+import { styled } from '@storybook/theming';
+import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton';
+import {
+ DefaultExport,
+ FileList,
+ FileListExport,
+ FileListIconWrapper,
+ FileListItem,
+ FileListItemContent,
+ FileListItemContentWrapper,
+ FileListItemExport,
+ FileListItemExportName,
+ FileListItemExportNameContent,
+ FileListItemLabel,
+ FileListItemPath,
+ FileListLi,
+ FileListUl,
+ FileListWrapper,
+ NoResults,
+ NoResultsDescription,
+} from './FileList';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type {
+ CreateNewStoryRequestPayload,
+ FileComponentSearchResponsePayload,
+} from '@storybook/core-events';
+import { WithTooltip, TooltipNote } from '@storybook/components';
+import { useArrowKeyNavigation } from './FIleSearchList.utils';
+
+export type SearchResult = FileComponentSearchResponsePayload['files'][0];
+
+export interface NewStoryPayload extends CreateNewStoryRequestPayload {
+ selectedItemId: string | number;
+}
+
+const ChevronRightIconStyled = styled(ChevronRightIcon)(({ theme }) => ({
+ display: 'none',
+ alignSelf: 'center',
+ color: theme.color.mediumdark,
+}));
+
+const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({
+ display: 'none',
+ alignSelf: 'center',
+ color: theme.color.mediumdark,
+}));
+
+interface FileSearchListProps {
+ isLoading: boolean;
+ searchResults: Array | null;
+ onNewStory: (props: NewStoryPayload) => void;
+ errorItemId?: number | string;
+}
+
+interface FileItemContentProps {
+ virtualItem: VirtualItem;
+ selected: number | null;
+ searchResult: SearchResult;
+}
+
+interface FileItemSelectionPayload {
+ virtualItem: VirtualItem;
+ searchResult: SearchResult;
+ itemId: string;
+}
+
+interface FileItemComponentSelectionPayload {
+ searchResult: SearchResult;
+ component: SearchResult['exportedComponents'][0];
+ id: string;
+}
+
+export const FileSearchList = memo(function FileSearchList({
+ isLoading,
+ searchResults,
+ onNewStory,
+ errorItemId,
+}: FileSearchListProps) {
+ const [selectedItem, setSelectedItem] = useState(null);
+ const parentRef = React.useRef();
+
+ const sortedSearchResults = useMemo(() => {
+ // search results with no exports should be at the end of the list
+ return [...(searchResults ?? [])]?.sort((a, b) => {
+ const isALowPriority = a.exportedComponents === null || a.exportedComponents?.length === 0;
+ const hasAStory = a.storyFileExists;
+
+ const isBLowPriority = b.exportedComponents === null || b.exportedComponents?.length === 0;
+ const hasBStory = b.storyFileExists;
+
+ if (hasAStory && !hasBStory) {
+ return -1;
+ }
+
+ if (hasBStory && !hasAStory) {
+ return 1;
+ }
+
+ if (isALowPriority && !isBLowPriority) {
+ return 1;
+ }
+
+ if (!isALowPriority && isBLowPriority) {
+ return -1;
+ }
+
+ return 0;
+ });
+ }, [searchResults]);
+
+ const count = searchResults?.length || 0;
+
+ const rowVirtualizer = useVirtualizer({
+ count,
+ getScrollElement: () => parentRef.current,
+ paddingStart: 16,
+ paddingEnd: 40,
+ estimateSize: () => 54,
+ overscan: 2,
+ });
+
+ useArrowKeyNavigation({ rowVirtualizer, parentRef, selectedItem });
+
+ const handleFileItemSelection = useCallback(
+ ({ virtualItem, searchResult, itemId }: FileItemSelectionPayload) => {
+ if (searchResult?.exportedComponents?.length > 1) {
+ setSelectedItem((sItem) => {
+ if (sItem === virtualItem.index) {
+ return null;
+ }
+
+ return virtualItem.index;
+ });
+ } else if (searchResult?.exportedComponents?.length === 1) {
+ onNewStory({
+ componentExportName: searchResult.exportedComponents[0].name,
+ componentFilePath: searchResult.filepath,
+ componentIsDefaultExport: searchResult.exportedComponents[0].default,
+ selectedItemId: itemId,
+ componentExportCount: 1,
+ });
+ }
+ },
+ [onNewStory]
+ );
+
+ const handleFileItemComponentSelection = useCallback(
+ ({ searchResult, component, id }: FileItemComponentSelectionPayload) => {
+ onNewStory({
+ componentExportName: component.name,
+ componentFilePath: searchResult.filepath,
+ componentIsDefaultExport: component.default,
+ selectedItemId: id,
+ componentExportCount: searchResult.exportedComponents.length,
+ });
+ },
+ [onNewStory]
+ );
+
+ const ListItem = useCallback(
+ ({ virtualItem, selected, searchResult }: FileItemContentProps) => {
+ const itemError = errorItemId === searchResult.filepath;
+ const itemSelected = selected === virtualItem.index;
+
+ return (
+
+
+
+
+
+
+ {searchResult.filepath.split('/').at(-1)}
+
+ {searchResult.filepath}
+
+ {itemSelected ?
+ {searchResult?.exportedComponents?.length > 1 && itemSelected && (
+ {
+ e.stopPropagation();
+ }}
+ onKeyUp={(e) => {
+ if (e.key === 'Enter') {
+ e.stopPropagation();
+ }
+ }}
+ >
+ {searchResult.exportedComponents?.map((component, itemExportId) => {
+ const itemExportError = errorItemId === `${searchResult.filepath}_${itemExportId}`;
+ const position =
+ itemExportId === 0
+ ? 'first'
+ : itemExportId === searchResult.exportedComponents.length - 1
+ ? 'last'
+ : 'middle';
+
+ return (
+ {
+ handleFileItemComponentSelection({
+ searchResult,
+ component,
+ id: `${searchResult.filepath}_${itemExportId}`,
+ });
+ }}
+ onKeyUp={(event) => {
+ if (event.key === 'Enter') {
+ handleFileItemComponentSelection({
+ searchResult,
+ component,
+ id: `${searchResult.filepath}_${itemExportId}`,
+ });
+ }
+ }}
+ >
+
+
+ {searchResult.filepath.split('/').at(-1)?.split('.')?.at(0)}
+
+ Default export
+
+ ) : (
+ component.name
+ )}
+
+
+ );
+ })}
+
+ )}
+
+ );
+ },
+ [handleFileItemComponentSelection, errorItemId]
+ );
+
+ if (isLoading && (searchResults === null || searchResults?.length === 0)) {
+ return
+ We could not find any file with that name
+
+ You may want to try using different keywords, check for typos, and adjust your filters
+
+
+ );
+ }
+
+ if (sortedSearchResults?.length > 0) {
+ return (
+
+
+
+ {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+ const searchResult = sortedSearchResults[virtualItem.index];
+ const noExports =
+ searchResult.exportedComponents === null ||
+ searchResult.exportedComponents?.length === 0;
+
+ const itemProps = {};
+
+ return (
+ {
+ handleFileItemSelection({
+ virtualItem,
+ itemId: searchResult.filepath,
+ searchResult,
+ });
+ }}
+ onKeyUp={(event) => {
+ if (event.key === 'Enter') {
+ handleFileItemSelection({
+ virtualItem,
+ itemId: searchResult.filepath,
+ searchResult,
+ });
+ }
+ }}
+ style={{
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ transform: `translateY(${virtualItem.start}px)`,
+ }}
+ tabIndex={0}
+ >
+ {noExports ? (
+
+ );
+ })}
+
+
+
+ );
+ }
+
+ return null;
+});
diff --git a/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.stories.tsx
new file mode 100644
index 000000000000..eaeaca9c0f75
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton';
+
+const meta = {
+ component: FileSearchListLoadingSkeleton,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx
new file mode 100644
index 000000000000..f8050f4942f6
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { FileList, FileListItem } from './FileList';
+
+const FileListItemContentWrapperSkeleton = styled('div')(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'flex-start',
+ gap: '8px',
+ alignSelf: 'stretch',
+ padding: '8px 16px',
+}));
+
+const FileListItemContentSkeleton = styled('div')({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ width: '100%',
+ borderRadius: '3px',
+});
+
+const FileListIconWrapperSkeleton = styled.div(({ theme }) => ({
+ width: '14px',
+ height: '14px',
+ borderRadius: '3px',
+ marginTop: '1px',
+ background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)',
+ animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+}));
+
+const FileListItemSkeleton = styled.div(({ theme }) => ({
+ height: '16px',
+ borderRadius: '3px',
+ background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)',
+ animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+ width: '100%',
+ maxWidth: '100%',
+
+ '+ div': {
+ marginTop: '6px',
+ },
+}));
+
+export const FileSearchListLoadingSkeleton = () => {
+ return (
+
+ {[1, 2, 3].map((result) => (
+
+
+
+
+
+
+ ))}
+
+ );
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx
new file mode 100644
index 000000000000..aaa604953aea
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx
@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { findByText, fireEvent, fn, expect } from '@storybook/test';
+import { WithResults } from './FileSearchList.stories';
+import React, { useState } from 'react';
+
+import { FileSearchModal } from './FileSearchModal';
+
+const meta = {
+ component: FileSearchModal,
+ args: {
+ open: true,
+ setError: fn(),
+ onCreateNewStory: fn(),
+ onOpenChange: fn(),
+ setFileSearchQuery: fn(),
+ },
+ // This decorator is used to show the modal in the side by side view
+ decorators: [
+ (Story, context) => {
+ const [container, setContainer] = useState(null);
+
+ if (context.globals.theme === 'side-by-side') {
+ return (
+ {
+ setContainer(element);
+ }}
+ style={{
+ width: '100%',
+ height: '100%',
+ minHeight: '600px',
+ transform: 'translateZ(0)',
+ }}
+ >
+ {Story({ args: { ...context.args, container } })}
+
+ );
+ }
+
+ return Story();
+ },
+ ],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const InitialState: Story = {
+ args: {
+ fileSearchQuery: '',
+ fileSearchQueryDeferred: '',
+ isLoading: false,
+ error: null,
+ searchResults: null,
+ },
+};
+
+export const Loading: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: true,
+ error: null,
+ searchResults: null,
+ },
+};
+
+export const LoadingWithPreviousResults: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: true,
+ error: null,
+ searchResults: WithResults.args.searchResults,
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: false,
+ error: null,
+ searchResults: [],
+ },
+};
+
+export const WithSearchResults: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: false,
+ error: null,
+ searchResults: WithResults.args.searchResults,
+ },
+ play: async ({ canvasElement, args }) => {
+ const parent = canvasElement.parentNode as HTMLElement;
+
+ const moduleSingleExport = await findByText(parent, 'module-single-export.js');
+ await fireEvent.click(moduleSingleExport);
+
+ expect(args.onCreateNewStory).toHaveBeenCalledWith({
+ componentExportCount: 1,
+ componentExportName: 'default',
+ componentFilePath: 'src/module-single-export.js',
+ componentIsDefaultExport: true,
+ selectedItemId: 'src/module-single-export.js',
+ });
+ },
+};
+
+export const WithSearchResultsAndError: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: false,
+ error: { error: 'Some error occured', selectedItemId: 'src/module-multiple-exports.js' },
+ searchResults: WithResults.args.searchResults,
+ },
+};
+
+export const WithSearchResultsAndMultiLineError: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: false,
+ error: {
+ error: 'A very long error occured. A very long error occured. A very long error occured.',
+ selectedItemId: 'src/module-multiple-exports.js',
+ },
+ searchResults: WithResults.args.searchResults,
+ },
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
new file mode 100644
index 000000000000..40f7b4e76ba9
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
@@ -0,0 +1,219 @@
+import React, { useEffect, useState, useTransition } from 'react';
+import { Modal, Form } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { CloseAltIcon, SearchIcon, SyncIcon } from '@storybook/icons';
+
+import type { NewStoryPayload, SearchResult } from './FileSearchList';
+import { FileSearchList } from './FileSearchList';
+import { useMeasure } from '../../hooks/useMeasure';
+
+const MODAL_HEIGHT = 418;
+
+const ModalStyled = styled(Modal)(() => ({
+ boxShadow: 'none',
+ background: 'transparent',
+}));
+
+const ModalChild = styled.div<{ height?: number }>(({ theme, height }) => ({
+ backgroundColor: theme.background.bar,
+ borderRadius: 6,
+ boxShadow: `rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 18px -10px`,
+ padding: '16px',
+ transition: 'height 0.3s',
+ height: height ? `${height + 32}px` : 'auto',
+ overflow: 'hidden',
+}));
+
+const ModalContent = styled(Modal.Content)(({ theme }) => ({
+ margin: 0,
+ color: theme.base === 'dark' ? theme.color.lighter : theme.color.mediumdark,
+}));
+
+const ModalInput = styled(Form.Input)(({ theme }) => ({
+ paddingLeft: 40,
+ paddingRight: 28,
+ fontSize: 14,
+ height: 40,
+
+ ...(theme.base === 'light' && {
+ color: theme.color.darkest,
+ }),
+
+ '::placeholder': {
+ color: theme.color.mediumdark,
+ },
+ '&:invalid:not(:placeholder-shown)': {
+ boxShadow: `${theme.color.negative} 0 0 0 1px inset`,
+ },
+ '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
+ {
+ display: 'none',
+ },
+}));
+
+const SearchField = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ flexGrow: 1,
+ position: 'relative',
+});
+
+const SearchIconWrapper = styled.div(({ theme }) => ({
+ position: 'absolute',
+ top: 0,
+ left: 16,
+ zIndex: 1,
+ pointerEvents: 'none',
+ color: theme.darkest,
+ display: 'flex',
+ alignItems: 'center',
+ height: '100%',
+}));
+
+const LoadingIcon = styled.div(({ theme }) => ({
+ position: 'absolute',
+ top: 0,
+ right: 16,
+ zIndex: 1,
+ color: theme.darkest,
+ display: 'flex',
+ alignItems: 'center',
+ height: '100%',
+ '@keyframes spin': {
+ from: { transform: 'rotate(0deg)' },
+ to: { transform: 'rotate(360deg)' },
+ },
+ animation: 'spin 1s linear infinite',
+}));
+
+const ModalError = styled(Modal.Error)({
+ position: 'absolute',
+ padding: '8px 40px 8px 16px',
+ bottom: 0,
+ maxHeight: 'initial',
+ width: '100%',
+
+ div: {
+ wordBreak: 'break-word',
+ },
+
+ '> div': {
+ padding: 0,
+ },
+});
+
+const ModalErrorCloseIcon = styled(CloseAltIcon)({
+ position: 'absolute',
+ top: 4,
+ right: -24,
+ cursor: 'pointer',
+});
+
+type Error = { selectedItemId?: number | string; error: string } | null;
+
+interface FileSearchModalProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ fileSearchQuery: string;
+ fileSearchQueryDeferred: string;
+ setFileSearchQuery: (query: string) => void;
+ isLoading: boolean;
+ error: Error;
+ searchResults: SearchResult[] | null;
+ onCreateNewStory: (payload: NewStoryPayload) => void;
+ setError: (error: Error) => void;
+ container?: HTMLElement;
+}
+
+export const FileSearchModal = ({
+ open,
+ onOpenChange,
+ fileSearchQuery,
+ setFileSearchQuery,
+ isLoading,
+ error,
+ searchResults,
+ onCreateNewStory,
+ setError,
+ container,
+}: FileSearchModalProps) => {
+ const [modalContentRef, modalContentDimensions] = useMeasure();
+ const [modalMaxHeight, setModalMaxHeight] = useState(modalContentDimensions.height);
+ const [, startTransition] = useTransition();
+ // This internal state is used to maintain cursor position when the user types in the search input
+ // See: https://github.com/facebook/react/issues/5386#issuecomment-334001976
+ const [searchInputValue, setSearchInputValue] = useState(fileSearchQuery);
+
+ useEffect(() => {
+ if (modalMaxHeight < modalContentDimensions.height) {
+ setModalMaxHeight(modalContentDimensions.height);
+ }
+ }, [modalContentDimensions.height, modalMaxHeight]);
+
+ return (
+ {
+ onOpenChange(false);
+ }}
+ onInteractOutside={() => {
+ onOpenChange(false);
+ }}
+ container={container}
+ >
+
+
+
+ Add a new story
+ We will create a new story for your component
+
+
+
+
+ {
+ const newValue = (e.target as HTMLInputElement).value;
+ setSearchInputValue(newValue);
+ startTransition(() => {
+ setFileSearchQuery(newValue);
+ });
+ }}
+ />
+ {isLoading && (
+
+
+ )}
+
+ {
+
+
+ {error && fileSearchQuery !== '' && (
+
+ {error.error}
+ {
+ setError(null);
+ }}
+ />
+
+ )}
+
+ );
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
new file mode 100644
index 000000000000..d86a9c208d68
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest';
+import { extractSeededRequiredArgs } from './FileSearchModal.utils';
+import type { ArgTypes } from '@storybook/csf';
+
+describe('FileSearchModal.utils', () => {
+ describe('extractSeededRequiredArgs', () => {
+ it('should extract seeded required args', () => {
+ const argTypes = {
+ string: {
+ type: { name: 'string', required: true },
+ },
+ stringOptional: {
+ type: { name: 'string', required: false },
+ },
+ number: {
+ type: { name: 'number', required: true },
+ },
+ boolean: {
+ type: { name: 'boolean', required: true },
+ },
+ function: {
+ type: { name: 'function', required: true },
+ },
+ object: {
+ type: {
+ name: 'object',
+ required: true,
+ value: {
+ a: { name: 'string', required: true },
+ b: { name: 'number' },
+ },
+ },
+ },
+ union: {
+ type: {
+ name: 'union',
+ required: true,
+ value: [{ name: 'string', required: true }, { name: 'number' }],
+ },
+ },
+ enum: {
+ type: {
+ name: 'enum',
+ required: true,
+ value: ['a', 'b', 'c'],
+ },
+ options: ['a', 'b', 'c'],
+ },
+ otherObject: {
+ type: { name: 'other', required: true, value: '' },
+ control: { type: 'object' },
+ },
+ otherInlineRadio: {
+ type: { name: 'other', required: true, value: '' },
+ control: { type: 'inline-radio', options: ['a', 'b', 'c'] },
+ },
+ otherRadio: {
+ type: { name: 'other', required: true, value: '' },
+ control: { type: 'radio', options: ['d', 'e', 'f'] },
+ },
+ otherInlineCheck: {
+ type: { name: 'other', required: true, value: '' },
+ control: { type: 'inline-check', options: ['g', 'h', 'i'] },
+ },
+ otherCheck: {
+ type: { name: 'other', required: true, value: '' },
+ control: { type: 'check', options: ['j', 'k', 'l'] },
+ },
+ otherSelect: {
+ type: { name: 'other', required: true, value: '' },
+ control: { type: 'select', options: ['m', 'n', 'o'] },
+ },
+ otherMultiSelect: {
+ type: { name: 'other', required: true, value: '' },
+ control: { type: 'multi-select', options: ['p', 'q', 'r'] },
+ },
+ otherColor: {
+ type: { name: 'other', required: true, value: '' },
+ control: { type: 'color' },
+ },
+ intersection: {
+ type: {
+ name: 'intersection',
+ required: true,
+ value: [
+ {
+ name: 'object',
+ value: {
+ a: { name: 'string', required: true },
+ b: { name: 'number' },
+ },
+ },
+ ],
+ },
+ },
+ tuple: {
+ type: {
+ name: 'other',
+ required: true,
+ value: 'tuple',
+ },
+ },
+ } as ArgTypes;
+
+ expect(extractSeededRequiredArgs(argTypes)).toEqual({
+ boolean: true,
+ function: expect.any(Function),
+ number: 0,
+ enum: 'a',
+ otherCheck: 'j',
+ otherColor: '#000000',
+ otherInlineCheck: 'g',
+ otherInlineRadio: 'a',
+ otherMultiSelect: 'p',
+ otherObject: {},
+ otherRadio: 'd',
+ otherSelect: 'm',
+ string: 'string',
+ object: { a: 'a' },
+ union: 'union',
+ intersection: { a: 'a' },
+ tuple: [],
+ });
+ });
+ });
+});
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
new file mode 100644
index 000000000000..f334aadc461c
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
@@ -0,0 +1,117 @@
+import type { ArgTypes, SBType } from '@storybook/csf';
+
+export function extractSeededRequiredArgs(argTypes: ArgTypes) {
+ const extractedArgTypes = Object.keys(argTypes).reduce(
+ (acc, key: keyof typeof argTypes) => {
+ const argType = argTypes[key];
+
+ if (typeof argType.control === 'object' && 'type' in argType.control) {
+ switch (argType.control.type) {
+ case 'object':
+ acc[key] = {};
+ break;
+ case 'inline-radio':
+ case 'radio':
+ case 'inline-check':
+ case 'check':
+ case 'select':
+ case 'multi-select':
+ acc[key] = argType.control.options?.[0];
+ break;
+ case 'color':
+ acc[key] = '#000000';
+ break;
+ default:
+ break;
+ }
+ }
+
+ setArgType(argType.type, acc, key);
+ return acc;
+ },
+ {} as Record
+ );
+ return extractedArgTypes;
+}
+
+function setArgType(
+ type: 'string' | 'number' | 'boolean' | 'symbol' | 'function' | SBType,
+ obj: Record,
+ objKey: string | number
+) {
+ if (typeof type === 'string' || !type.required) {
+ return;
+ }
+
+ switch (type.name) {
+ case 'boolean':
+ obj[objKey] = true;
+ break;
+ case 'number':
+ obj[objKey] = 0;
+ break;
+ case 'string':
+ obj[objKey] = objKey;
+ break;
+ case 'array':
+ obj[objKey] = [];
+ break;
+ case 'object':
+ obj[objKey] = {};
+ Object.entries(type.value ?? {}).forEach(([typeKey, typeVal]) => {
+ setArgType(typeVal, obj[objKey], typeKey);
+ });
+ break;
+ case 'function':
+ obj[objKey] = () => {};
+ break;
+ case 'intersection':
+ if (type.value?.every((v) => v.name === 'object')) {
+ obj[objKey] = {};
+ type.value?.forEach((typeVal) => {
+ if (typeVal.name === 'object') {
+ Object.entries(typeVal.value ?? {}).forEach(([typeValKey, typeValVal]) => {
+ setArgType(typeValVal, obj[objKey], typeValKey);
+ });
+ }
+ });
+ }
+ break;
+ case 'union':
+ if (type.value?.[0] !== undefined) {
+ setArgType(type.value[0], obj, objKey);
+ }
+ break;
+
+ case 'enum':
+ if (type.value?.[0] !== undefined) {
+ obj[objKey] = type.value?.[0];
+ }
+ break;
+
+ case 'other':
+ if (typeof type.value === 'string' && type.value === 'tuple') {
+ obj[objKey] = [];
+ }
+ break;
+ default:
+ break;
+ }
+}
+
+export async function trySelectNewStory(
+ selectStory: (id: string) => Promise | void,
+ storyId: string,
+ attempt = 1
+): Promise {
+ if (attempt > 10) {
+ throw new Error('We could not select the new story. Please try again.');
+ }
+
+ try {
+ await selectStory(storyId);
+ } catch (e) {
+ await new Promise((resolve) => setTimeout(resolve, 500));
+ return trySelectNewStory(selectStory, storyId, attempt + 1);
+ }
+}
diff --git a/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx b/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx
new file mode 100644
index 000000000000..76136230d3d8
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconSymbols } from './IconSymbols';
+
+const meta = {
+ component: IconSymbols,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/code/ui/manager/src/components/sidebar/Search.stories.tsx b/code/ui/manager/src/components/sidebar/Search.stories.tsx
index 8eb50c9832c9..8b796158db8d 100644
--- a/code/ui/manager/src/components/sidebar/Search.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Search.stories.tsx
@@ -43,6 +43,12 @@ const baseProps = {
export const Simple: StoryFn = () => {() => null} ;
+export const SimpleWithCreateButton: StoryFn = () => (
+
+ {() => null}
+
+);
+
export const FilledIn: StoryFn = () => (
{() => ;
+const SearchBar = styled.div({
+ display: 'flex',
+ flexDirection: 'row',
+ columnGap: 6,
+});
+
+const TooltipNoteWrapper = styled(TooltipNote)({
+ margin: 0,
+});
+
const ScreenReaderLabel = styled.label({
position: 'absolute',
left: -10000,
@@ -52,6 +64,10 @@ const ScreenReaderLabel = styled.label({
overflow: 'hidden',
});
+const CreateNewStoryButton = styled(IconButton)(({ theme }) => ({
+ color: theme.color.mediumdark,
+}));
+
const SearchIconWrapper = styled.div(({ theme }) => ({
position: 'absolute',
top: 0,
@@ -67,15 +83,17 @@ const SearchIconWrapper = styled.div(({ theme }) => ({
const SearchField = styled.div({
display: 'flex',
flexDirection: 'column',
+ flexGrow: 1,
position: 'relative',
});
const Input = styled.input(({ theme }) => ({
appearance: 'none',
- height: 32,
+ height: 28,
paddingLeft: 28,
paddingRight: 28,
- border: `1px solid ${theme.appBorderColor}`,
+ border: 0,
+ boxShadow: `${theme.button.border} 0 0 0 1px inset`,
background: 'transparent',
borderRadius: 4,
fontSize: `${theme.typography.size.s1 + 1}px`,
@@ -113,7 +131,7 @@ const Input = styled.input(({ theme }) => ({
const FocusKey = styled.code(({ theme }) => ({
position: 'absolute',
- top: 8,
+ top: 6,
right: 9,
height: 16,
zIndex: 1,
@@ -146,24 +164,30 @@ const ClearIcon = styled.div(({ theme }) => ({
const FocusContainer = styled.div({ outline: 0 });
+const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
+const isRendererReact = global.STORYBOOK_RENDERER === 'react';
+
export const Search = React.memo<{
children: SearchChildrenFn;
dataset: CombinedDataset;
enableShortcuts?: boolean;
getLastViewed: () => Selection[];
initialQuery?: string;
+ showCreateStoryButton?: boolean;
}>(function Search({
children,
dataset,
enableShortcuts = true,
getLastViewed,
initialQuery = '',
+ showCreateStoryButton = isDevelopment && isRendererReact,
}) {
const api = useStorybookApi();
const inputRef = useRef(null);
const [inputPlaceholder, setPlaceholder] = useState('Find components');
const [allComponents, showAllComponents] = useState(false);
const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/';
+ const [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(false);
const makeFuse = useCallback(() => {
const list = dataset.entries.reduce((acc, [refId, { index, status }]) => {
@@ -360,31 +384,55 @@ export const Search = React.memo<{
return (
<>
Search for components
-
-
-
-
- {searchShortcut === '⌘ K' ? (
- <>
- ⌘ K
-
- ) : (
- searchShortcut
- )}
-
- )}
- {isOpen && (
- clearSelection()}>
-
+
+
+
+
+
+ {searchShortcut === '⌘ K' ? (
+ <>
+ ⌘ K
+
+ ) : (
+ searchShortcut
+ )}
+
+ )}
+ {isOpen && (
+ clearSelection()}>
+
+ )}
+
+ {showCreateStoryButton && (
+ <>
+ {
+ setIsFileSearchModalOpen(true);
+ }}
+ variant="outline"
+ >
+
+
+
+