diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index ea8c29368d6..8a2343bb165 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -69,6 +69,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "axe-core": "^4.2.0", diff --git a/code/addons/a11y/src/a11yRunner.test.ts b/code/addons/a11y/src/a11yRunner.test.ts index 47d9dac7d20..c1662d39369 100644 --- a/code/addons/a11y/src/a11yRunner.test.ts +++ b/code/addons/a11y/src/a11yRunner.test.ts @@ -1,7 +1,7 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { EVENTS } from './constants'; -jest.mock('@storybook/addons'); +jest.mock('@storybook/preview-api'); const mockedAddons = addons as jest.Mocked; describe('a11yRunner', () => { diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts index 1f1c24b6ebe..88dd78a6466 100644 --- a/code/addons/a11y/src/a11yRunner.ts +++ b/code/addons/a11y/src/a11yRunner.ts @@ -1,5 +1,5 @@ import global from 'global'; -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { EVENTS } from './constants'; import type { A11yParameters } from './params'; diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index db363f47d85..088c89577ec 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -81,6 +81,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "dequal": "^2.0.2", diff --git a/code/addons/actions/src/decorator.ts b/code/addons/actions/src/decorator.ts index 4b5d2f8e944..5a1ba2b3deb 100644 --- a/code/addons/actions/src/decorator.ts +++ b/code/addons/actions/src/decorator.ts @@ -1,5 +1,5 @@ import global from 'global'; -import { useEffect, makeDecorator } from '@storybook/addons'; +import { useEffect, makeDecorator } from '@storybook/preview-api'; import { actions } from './runtime/actions'; import { PARAM_KEY } from './constants'; diff --git a/code/addons/actions/src/runtime/__tests__/action.test.js b/code/addons/actions/src/runtime/__tests__/action.test.js index d89b120476b..4f8f8676106 100644 --- a/code/addons/actions/src/runtime/__tests__/action.test.js +++ b/code/addons/actions/src/runtime/__tests__/action.test.js @@ -1,7 +1,7 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { action, configureActions } from '../..'; -jest.mock('@storybook/addons'); +jest.mock('@storybook/preview-api'); const createChannel = () => { const channel = { emit: jest.fn() }; diff --git a/code/addons/actions/src/runtime/__tests__/actions.test.js b/code/addons/actions/src/runtime/__tests__/actions.test.js index a9cd65c80ed..b3e1ae2779a 100644 --- a/code/addons/actions/src/runtime/__tests__/actions.test.js +++ b/code/addons/actions/src/runtime/__tests__/actions.test.js @@ -1,7 +1,7 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { actions } from '../..'; -jest.mock('@storybook/addons'); +jest.mock('@storybook/preview-api'); const createChannel = () => { const channel = { emit: jest.fn() }; diff --git a/code/addons/actions/src/runtime/action.ts b/code/addons/actions/src/runtime/action.ts index d56a290192f..3a0fc25e9cd 100644 --- a/code/addons/actions/src/runtime/action.ts +++ b/code/addons/actions/src/runtime/action.ts @@ -1,5 +1,5 @@ import uuidv4 from 'uuid-browser/v4'; -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { EVENT_ID } from '../constants'; import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models'; import { config } from './configureActions'; diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index ca6ddb788d5..c0ba105a206 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -80,6 +80,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", diff --git a/code/addons/backgrounds/src/decorators/withBackground.ts b/code/addons/backgrounds/src/decorators/withBackground.ts index 309c6a8f759..10d2df3a8a2 100644 --- a/code/addons/backgrounds/src/decorators/withBackground.ts +++ b/code/addons/backgrounds/src/decorators/withBackground.ts @@ -1,4 +1,4 @@ -import { useMemo, useEffect } from '@storybook/addons'; +import { useMemo, useEffect } from '@storybook/preview-api'; import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; diff --git a/code/addons/backgrounds/src/decorators/withGrid.ts b/code/addons/backgrounds/src/decorators/withGrid.ts index 3647dd2f4ca..e262c847727 100644 --- a/code/addons/backgrounds/src/decorators/withGrid.ts +++ b/code/addons/backgrounds/src/decorators/withGrid.ts @@ -1,4 +1,4 @@ -import { useMemo, useEffect } from '@storybook/addons'; +import { useMemo, useEffect } from '@storybook/preview-api'; import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; import { clearStyles, addGridStyle } from '../helpers'; diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 20fd5268305..c36e2de6aba 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -74,7 +74,7 @@ "@storybook/components": "7.0.0-alpha.53", "@storybook/core-common": "7.0.0-alpha.53", "@storybook/node-logger": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "lodash": "^4.17.21", diff --git a/code/addons/docs/docs/recipes.md b/code/addons/docs/docs/recipes.md index 18809715838..df2892df89e 100644 --- a/code/addons/docs/docs/recipes.md +++ b/code/addons/docs/docs/recipes.md @@ -159,7 +159,7 @@ If you're currently using the notes/info addons, you can upgrade to DocsPage by Suppose you've added a `notes` parameter to each component in your library, containing markdown text, and you want that to show up at the top of the page in the `Description` slot. You could do that by adding the following snippet to `.storybook/preview.js`: ```js -import { addParameters } from '@storybook/client-api'; +import { addParameters } from '@storybook/preview-api'; addParameters({ docs: { diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index dcfd4adb09f..2167ae40371 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -94,7 +94,8 @@ "@storybook/mdx2-csf": "next", "@storybook/node-logger": "7.0.0-alpha.53", "@storybook/postinstall": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", + "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "fs-extra": "^9.0.1", "global": "^4.4.0", diff --git a/code/addons/docs/src/DocsRenderer.tsx b/code/addons/docs/src/DocsRenderer.tsx index b1c6a6391a1..3dfcb3fe69d 100644 --- a/code/addons/docs/src/DocsRenderer.tsx +++ b/code/addons/docs/src/DocsRenderer.tsx @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import type { Renderer, Parameters } from '@storybook/types'; -import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web'; +import type { Renderer, Parameters, DocsContextProps, DocsRenderFunction } from '@storybook/types'; import { components as htmlComponents } from '@storybook/components'; import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks'; import { MDXProvider } from '@mdx-js/react'; diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 5b2c03d6453..21b2261118b 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -124,6 +124,7 @@ "@storybook/api": "7.0.0-alpha.53", "@storybook/core-common": "7.0.0-alpha.53", "@storybook/node-logger": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 1ee6972a6f0..720f184e2ae 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -62,6 +62,7 @@ "dependencies": { "@storybook/addons": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "global": "^4.4.0" }, "devDependencies": { diff --git a/code/addons/highlight/src/preview.ts b/code/addons/highlight/src/preview.ts index b3bf0acfaa7..36e486b90f7 100644 --- a/code/addons/highlight/src/preview.ts +++ b/code/addons/highlight/src/preview.ts @@ -1,6 +1,6 @@ /* eslint-env browser */ import global from 'global'; -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { STORY_CHANGED } from '@storybook/core-events'; import { HIGHLIGHT, RESET_HIGHLIGHT, HIGHLIGHT_STYLE_ID } from './constants'; diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index d19d7836227..0856a858f99 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -79,6 +79,7 @@ "@storybook/core-common": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", "@storybook/instrumenter": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index b4f094b7b98..7e690557129 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -1,6 +1,6 @@ /// -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events'; import type { Renderer, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 1d4217995ce..002d94fa00a 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -74,6 +74,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "global": "^4.4.0", "react-sizeme": "^3.0.1", diff --git a/code/addons/jest/src/index.ts b/code/addons/jest/src/index.ts index 2e8b0715121..5b68c9d9a9a 100644 --- a/code/addons/jest/src/index.ts +++ b/code/addons/jest/src/index.ts @@ -1,6 +1,6 @@ /// -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { normalize, sep } from 'upath'; import { ADD_TESTS, defineJestParameter } from './shared'; diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 2754141004a..d89190df798 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -80,6 +80,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", "@storybook/csf": "next", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/router": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", diff --git a/code/addons/links/src/manager.ts b/code/addons/links/src/manager.ts index 98b7feca38f..bf7b59d9940 100644 --- a/code/addons/links/src/manager.ts +++ b/code/addons/links/src/manager.ts @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import EVENTS, { ADDON_ID } from './constants'; diff --git a/code/addons/links/src/react/components/link.test.tsx b/code/addons/links/src/react/components/link.test.tsx index 9b1d5e09552..87796da7aca 100644 --- a/code/addons/links/src/react/components/link.test.tsx +++ b/code/addons/links/src/react/components/link.test.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { SELECT_STORY } from '@storybook/core-events'; import LinkTo from './link'; -jest.mock('@storybook/addons'); +jest.mock('@storybook/preview-api'); jest.mock('global', () => ({ document: { location: { diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts index 291b613c7ed..0a77f40bd41 100644 --- a/code/addons/links/src/utils.test.ts +++ b/code/addons/links/src/utils.test.ts @@ -1,9 +1,9 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { SELECT_STORY } from '@storybook/core-events'; import { linkTo, hrefTo } from './utils'; -jest.mock('@storybook/addons'); +jest.mock('@storybook/preview-api'); jest.mock('global', () => ({ document: global.document, window: global, diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts index 73ba6e0d332..14d1fcde1ca 100644 --- a/code/addons/links/src/utils.ts +++ b/code/addons/links/src/utils.ts @@ -1,5 +1,5 @@ import global from 'global'; -import { addons, makeDecorator } from '@storybook/addons'; +import { addons, makeDecorator } from '@storybook/preview-api'; import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events'; import type { StoryId, StoryName, ComponentTitle } from '@storybook/types'; import { toId } from '@storybook/csf'; diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 3b8c09e9f80..018535a1bb8 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -79,6 +79,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0" }, diff --git a/code/addons/measure/src/withMeasure.ts b/code/addons/measure/src/withMeasure.ts index 4dea5601dc7..e821e6f8c90 100644 --- a/code/addons/measure/src/withMeasure.ts +++ b/code/addons/measure/src/withMeasure.ts @@ -1,5 +1,5 @@ /* eslint-env browser */ -import { useEffect } from '@storybook/addons'; +import { useEffect } from '@storybook/preview-api'; import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; import { drawSelectedElement } from './box-model/visualizer'; import { init, rescale, destroy } from './box-model/canvas'; diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index dd879668084..8406eadd819 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -82,6 +82,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "ts-dedent": "^2.0.0" diff --git a/code/addons/outline/src/withOutline.ts b/code/addons/outline/src/withOutline.ts index 455d84ae945..5642fdf91c8 100644 --- a/code/addons/outline/src/withOutline.ts +++ b/code/addons/outline/src/withOutline.ts @@ -1,4 +1,4 @@ -import { useMemo, useEffect } from '@storybook/addons'; +import { useMemo, useEffect } from '@storybook/preview-api'; import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; import { clearStyles, addOutlineStyles } from './helpers'; diff --git a/code/addons/storyshots/storyshots-core/package.json b/code/addons/storyshots/storyshots-core/package.json index 695b5d5b094..8f4caad2191 100644 --- a/code/addons/storyshots/storyshots-core/package.json +++ b/code/addons/storyshots/storyshots-core/package.json @@ -41,9 +41,9 @@ "@storybook/addons": "7.0.0-alpha.53", "@storybook/babel-plugin-require-context-hook": "1.0.1", "@storybook/client-api": "7.0.0-alpha.53", - "@storybook/core-client": "7.0.0-alpha.53", "@storybook/core-common": "7.0.0-alpha.53", "@storybook/core-webpack": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "@types/glob": "^7.1.3", "@types/jest-specific-snapshot": "^0.5.6", diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts index 80b863c5110..b7d93898aa1 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts @@ -1,5 +1,5 @@ import type { Renderer, Addon_Loadable } from '@storybook/types'; -import type { ClientApi as ClientApiClass } from '@storybook/client-api'; +import type { ClientApi as ClientApiClass } from '@storybook/preview-api'; import type { StoryshotsOptions } from '../api/StoryshotsOptions'; import type { SupportedFramework } from './SupportedFramework'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts index 40a7def7ffa..7b2406c3c92 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts @@ -35,13 +35,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts index 55a8dfdd6b1..d75c563eef2 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts @@ -12,13 +12,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts index 986dcf5f911..b02ccaf3041 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts @@ -18,13 +18,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts index 2d14593fd09..ffe67f77154 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts @@ -13,13 +13,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts index bc6f9153f10..35d62098d18 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts @@ -10,13 +10,13 @@ function test(options: StoryshotsOptions): boolean { function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts index bd131ba1f80..8a174ee11af 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts @@ -18,13 +18,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts index d7a45bc5846..0135af40b64 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts @@ -15,13 +15,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts index bb97cd1560b..02ef63c066d 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts @@ -18,13 +18,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts index 01de29fa01c..91d40dd35d7 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts @@ -13,13 +13,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts index b17cd8f4474..41ac97a7511 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts @@ -12,13 +12,13 @@ function load(options: StoryshotsOptions) { let mockStartedAPI: any; - jest.mock('@storybook/core-client', () => { - const coreClientAPI = jest.requireActual('@storybook/core-client'); + jest.mock('@storybook/preview-api', () => { + const previewAPI = jest.requireActual('@storybook/preview-api'); return { - ...coreClientAPI, + ...previewAPI, start: (...args: any[]) => { - mockStartedAPI = coreClientAPI.start(...args); + mockStartedAPI = previewAPI.start(...args); return mockStartedAPI; }, }; diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 8cb48ae34e9..20e46f3c9d4 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -57,6 +57,7 @@ "@storybook/api": "7.0.0-alpha.53", "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/router": "7.0.0-alpha.53", "@storybook/source-loader": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 365185d4d31..15298c416a1 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -71,6 +71,7 @@ "@storybook/api": "7.0.0-alpha.53", "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53" }, "devDependencies": { diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 86dd6aa2758..67144fd2aca 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -77,6 +77,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "global": "^4.4.0", "memoizerific": "^1.11.3", diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 3d0470df469..bb0633730f1 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -45,7 +45,7 @@ "@storybook/core-webpack": "7.0.0-alpha.53", "@storybook/docs-tools": "7.0.0-alpha.53", "@storybook/node-logger": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "@types/node": "^16.0.0", "@types/react": "^16.14.34", diff --git a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts index 3f9d94ac8b3..0e1de248988 100644 --- a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { DOCS_RENDERED, STORY_CHANGED } from '@storybook/core-events'; import { AbstractRenderer } from './AbstractRenderer'; import { StoryFnAngularReturnType, Parameters } from '../types'; diff --git a/code/frameworks/angular/src/client/decorateStory.ts b/code/frameworks/angular/src/client/decorateStory.ts index 2b3daf65137..532b4353f7f 100644 --- a/code/frameworks/angular/src/client/decorateStory.ts +++ b/code/frameworks/angular/src/client/decorateStory.ts @@ -1,5 +1,5 @@ import { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/types'; -import { sanitizeStoryContextUpdate } from '@storybook/store'; +import { sanitizeStoryContextUpdate } from '@storybook/preview-api'; import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent'; import { AngularRenderer } from './types'; diff --git a/code/frameworks/angular/src/client/docs/sourceDecorator.ts b/code/frameworks/angular/src/client/docs/sourceDecorator.ts index 7769aa6968a..b60ad0fa9a4 100644 --- a/code/frameworks/angular/src/client/docs/sourceDecorator.ts +++ b/code/frameworks/angular/src/client/docs/sourceDecorator.ts @@ -1,4 +1,4 @@ -import { addons, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/preview-api'; import { PartialStoryFn } from '@storybook/types'; import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools'; import { StoryContext, AngularRenderer } from '../types'; diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts index f61bb6ef600..c7b933627f6 100644 --- a/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts +++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts @@ -815,7 +815,7 @@ const newWebpackConfiguration = ( modules: ['node_modules'], mainFields: ['browser', 'main'], alias: { - '@storybook/addons': '/Users/joe/storybook/lib/addons', + '@storybook/preview-api': '/Users/joe/storybook/lib/addons', '@storybook/api': '/Users/joe/storybook/lib/api', '@storybook/channels': '/Users/joe/storybook/lib/channels', '@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage', diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 977a137ad2b..04b8db6825b 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -32,10 +32,9 @@ }, "dependencies": { "@storybook/builder-webpack5": "7.0.0-alpha.53", - "@storybook/core-client": "7.0.0-alpha.53", "@storybook/core-common": "7.0.0-alpha.53", "@storybook/docs-tools": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "react": "16.14.0", diff --git a/code/frameworks/ember/src/client/preview/index.ts b/code/frameworks/ember/src/client/preview/index.ts index 96a58ede904..091e84e7c3f 100644 --- a/code/frameworks/ember/src/client/preview/index.ts +++ b/code/frameworks/ember/src/client/preview/index.ts @@ -1,4 +1,4 @@ -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import './globals'; import type { EmberRenderer } from './types'; diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 1aa9bb37e6a..7537397a8ea 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -64,6 +64,7 @@ "@storybook/core-common": "7.0.0-alpha.53", "@storybook/node-logger": "7.0.0-alpha.53", "@storybook/preset-react-webpack": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/react": "7.0.0-alpha.53", "@types/node": "^16.0.0", "find-up": "^5.0.0", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 375d4dc12de..329891be4c5 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -57,8 +57,7 @@ "@storybook/builder-vite": "7.0.0-alpha.53", "@storybook/channel-postmessage": "7.0.0-alpha.53", "@storybook/channel-websocket": "7.0.0-alpha.53", - "@storybook/client-api": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/react": "7.0.0-alpha.53", "@vitejs/plugin-react": "^2.0.0", "ast-types": "^0.14.2", diff --git a/code/frameworks/react-vite/src/index.ts b/code/frameworks/react-vite/src/index.ts index 067a9d564f7..8b0346b167d 100644 --- a/code/frameworks/react-vite/src/index.ts +++ b/code/frameworks/react-vite/src/index.ts @@ -1,13 +1,11 @@ -// exports for builder-vite -import * as clientApi from '@storybook/client-api'; +// TODO: figure out if any of this is required +// possibly make it not required, framework should never be imported directly, except for types in config files -// client-api exposes both a class, and individual named exports. -// The class is used in StoryStoreV7 and the individual exports in SSv6 -const { ClientApi } = clientApi; export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; -export { addons } from '@storybook/addons'; -export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; -export { clientApi, ClientApi }; + +export { addons } from '@storybook/preview-api'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-api'; +export { ClientApi } from '@storybook/preview-api'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index b26803c5e55..2371462058e 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -56,9 +56,8 @@ "@storybook/builder-vite": "7.0.0-alpha.53", "@storybook/channel-postmessage": "7.0.0-alpha.53", "@storybook/channel-websocket": "7.0.0-alpha.53", - "@storybook/client-api": "7.0.0-alpha.53", "@storybook/node-logger": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/svelte": "7.0.0-alpha.53", "@sveltejs/vite-plugin-svelte": "^1.0.0", "magic-string": "^0.26.1", diff --git a/code/frameworks/svelte-vite/src/index.ts b/code/frameworks/svelte-vite/src/index.ts index 067a9d564f7..1aa9b0bb063 100644 --- a/code/frameworks/svelte-vite/src/index.ts +++ b/code/frameworks/svelte-vite/src/index.ts @@ -1,13 +1,8 @@ -// exports for builder-vite -import * as clientApi from '@storybook/client-api'; - -// client-api exposes both a class, and individual named exports. -// The class is used in StoryStoreV7 and the individual exports in SSv6 -const { ClientApi } = clientApi; export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; -export { addons } from '@storybook/addons'; -export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; -export { clientApi, ClientApi }; + +export { addons } from '@storybook/preview-api'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-api'; +export { ClientApi } from '@storybook/preview-api'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 07a5bfc3b8e..443f74db2ae 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -54,10 +54,9 @@ "@storybook/builder-vite": "7.0.0-alpha.53", "@storybook/channel-postmessage": "7.0.0-alpha.53", "@storybook/channel-websocket": "7.0.0-alpha.53", - "@storybook/client-api": "7.0.0-alpha.53", "@storybook/core-common": "7.0.0-alpha.53", "@storybook/core-server": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/vue": "7.0.0-alpha.53", "magic-string": "^0.26.1", "vite": "^3.1.3", diff --git a/code/frameworks/vue-vite/src/index.ts b/code/frameworks/vue-vite/src/index.ts index 067a9d564f7..1aa9b0bb063 100644 --- a/code/frameworks/vue-vite/src/index.ts +++ b/code/frameworks/vue-vite/src/index.ts @@ -1,13 +1,8 @@ -// exports for builder-vite -import * as clientApi from '@storybook/client-api'; - -// client-api exposes both a class, and individual named exports. -// The class is used in StoryStoreV7 and the individual exports in SSv6 -const { ClientApi } = clientApi; export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; -export { addons } from '@storybook/addons'; -export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; -export { clientApi, ClientApi }; + +export { addons } from '@storybook/preview-api'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-api'; +export { ClientApi } from '@storybook/preview-api'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 9bb41c6b479..a1a684c8a63 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -55,9 +55,8 @@ "@storybook/builder-vite": "7.0.0-alpha.53", "@storybook/channel-postmessage": "7.0.0-alpha.53", "@storybook/channel-websocket": "7.0.0-alpha.53", - "@storybook/client-api": "7.0.0-alpha.53", "@storybook/core-server": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/vue3": "7.0.0-alpha.53", "@vitejs/plugin-vue": "^3.0.0", "magic-string": "^0.26.1", diff --git a/code/frameworks/vue3-vite/src/index.ts b/code/frameworks/vue3-vite/src/index.ts index 067a9d564f7..1aa9b0bb063 100644 --- a/code/frameworks/vue3-vite/src/index.ts +++ b/code/frameworks/vue3-vite/src/index.ts @@ -1,13 +1,8 @@ -// exports for builder-vite -import * as clientApi from '@storybook/client-api'; - -// client-api exposes both a class, and individual named exports. -// The class is used in StoryStoreV7 and the individual exports in SSv6 -const { ClientApi } = clientApi; export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; -export { addons } from '@storybook/addons'; -export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; -export { clientApi, ClientApi }; + +export { addons } from '@storybook/preview-api'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-api'; +export { ClientApi } from '@storybook/preview-api'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index c38a0940b11..6eaf134b1c3 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -55,10 +55,9 @@ "@storybook/builder-vite": "7.0.0-alpha.53", "@storybook/channel-postmessage": "7.0.0-alpha.53", "@storybook/channel-websocket": "7.0.0-alpha.53", - "@storybook/client-api": "7.0.0-alpha.53", "@storybook/core-server": "7.0.0-alpha.53", "@storybook/node-logger": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/web-components": "7.0.0-alpha.53", "magic-string": "^0.26.1", "vite": "3" diff --git a/code/frameworks/web-components-vite/src/index.ts b/code/frameworks/web-components-vite/src/index.ts index 067a9d564f7..1aa9b0bb063 100644 --- a/code/frameworks/web-components-vite/src/index.ts +++ b/code/frameworks/web-components-vite/src/index.ts @@ -1,13 +1,8 @@ -// exports for builder-vite -import * as clientApi from '@storybook/client-api'; - -// client-api exposes both a class, and individual named exports. -// The class is used in StoryStoreV7 and the individual exports in SSv6 -const { ClientApi } = clientApi; export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; -export { addons } from '@storybook/addons'; -export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; -export { clientApi, ClientApi }; + +export { addons } from '@storybook/preview-api'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-api'; +export { ClientApi } from '@storybook/preview-api'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/lib/addons/src/make-decorator.ts b/code/lib/addons/src/make-decorator.ts index e96505e4be1..8735eeda006 100644 --- a/code/lib/addons/src/make-decorator.ts +++ b/code/lib/addons/src/make-decorator.ts @@ -1,8 +1,8 @@ import type { Addon_StoryWrapper, Addon_LegacyStoryFn, Addon_StoryContext } from '@storybook/types'; -type MakeDecoratorResult = (...args: any) => any; +export type MakeDecoratorResult = (...args: any) => any; -interface MakeDecoratorOptions { +export interface MakeDecoratorOptions { name: string; parameterName: string; skipIfNoParametersOrOptions?: boolean; diff --git a/code/lib/api/src/index.tsx b/code/lib/api/src/index.tsx index 380bd908597..7038d9b8254 100644 --- a/code/lib/api/src/index.tsx +++ b/code/lib/api/src/index.tsx @@ -125,7 +125,7 @@ export type ManagerProviderProps = RouterData & children: ReactNode | ((props: Combo) => ReactNode); }; -// This is duplicated from @storybook/client-api for the reasons mentioned in lib-addons/types.js +// This is duplicated from @storybook/preview-api for the reasons mentioned in lib-addons/types.js export const combineParameters = (...parameterSets: Parameters[]) => mergeWith({}, ...parameterSets, (objValue: any, srcValue: any) => { // Treat arrays as scalars: diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index 67413254c7a..b1215c37768 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -49,7 +49,7 @@ "@storybook/mdx2-csf": "next", "@storybook/node-logger": "7.0.0-alpha.53", "@storybook/preview": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/source-loader": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "@vitejs/plugin-react": "^2.0.0", diff --git a/code/lib/builder-vite/src/codegen-iframe-script.ts b/code/lib/builder-vite/src/codegen-iframe-script.ts index fdfe0249bce..8f986e9ca26 100644 --- a/code/lib/builder-vite/src/codegen-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-iframe-script.ts @@ -1,4 +1,4 @@ -import { getRendererName, getFrameworkName } from '@storybook/core-common'; +import { getRendererName } from '@storybook/core-common'; import type { PreviewAnnotation } from '@storybook/types'; import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names'; import type { ExtendedOptions } from './types'; @@ -7,7 +7,6 @@ import { processPreviewAnnotation } from './utils/process-preview-annotation'; export async function generateIframeScriptCode(options: ExtendedOptions) { const { presets } = options; const rendererName = await getRendererName(options); - const frameworkName = await getFrameworkName(options); const previewAnnotations = await presets.apply( 'previewAnnotations', @@ -29,8 +28,11 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { // Ensure that the client API is initialized by the framework before any other iframe code // is loaded. That way our client-apis can assume the existence of the API+store import { configure } from '${rendererName}'; - import { clientApi } from '${frameworkName}'; + + import { logger } from '@storybook/client-logger'; + import * as clientApi from "@storybook/preview-api"; ${filesToImport(configEntries, 'config')} + import * as preview from '${virtualPreviewFile}'; import { configStories } from '${virtualStoriesFile}'; @@ -44,7 +46,7 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { addArgTypesEnhancer, addArgsEnhancer, setGlobalRender, - } = clientApi; + } = previewApi; const configs = [${importArray('config', configEntries.length) .concat('preview.default') diff --git a/code/lib/builder-vite/src/optimizeDeps.ts b/code/lib/builder-vite/src/optimizeDeps.ts index 1aaf071638a..ac5daf80fc7 100644 --- a/code/lib/builder-vite/src/optimizeDeps.ts +++ b/code/lib/builder-vite/src/optimizeDeps.ts @@ -15,13 +15,16 @@ const INCLUDE_CANDIDATES = [ '@mdx-js/react', '@storybook/addon-docs > acorn-jsx', '@storybook/addon-docs', - '@storybook/addons', + '@storybook/preview-api', '@storybook/channel-postmessage', '@storybook/channel-websocket', '@storybook/client-api', + '@storybook/preview-api', '@storybook/client-logger', '@storybook/core/client', '@storybook/types', + '@storybook/preview-api', + '@storybook/preview-api', '@storybook/preview-web', '@storybook/react > acorn-jsx', '@storybook/react', diff --git a/code/lib/builder-webpack5/package.json b/code/lib/builder-webpack5/package.json index 87a966f6639..de8e40df78a 100644 --- a/code/lib/builder-webpack5/package.json +++ b/code/lib/builder-webpack5/package.json @@ -53,7 +53,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.12.10", "@storybook/addons": "7.0.0-alpha.53", "@storybook/api": "7.0.0-alpha.53", "@storybook/channel-postmessage": "7.0.0-alpha.53", @@ -67,7 +67,7 @@ "@storybook/core-webpack": "7.0.0-alpha.53", "@storybook/node-logger": "7.0.0-alpha.53", "@storybook/preview": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/router": "7.0.0-alpha.53", "@storybook/store": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 19d84baa03a..39edcd35750 100644 --- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -143,7 +143,7 @@ export default async ( previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => { if (!previewAnnotationFilename) return; - const clientApi = storybookPaths['@storybook/client-api']; + const previewApi = storybookPaths['@storybook/preview-api']; const clientLogger = storybookPaths['@storybook/client-logger']; // Ensure that relative paths end up mapped to a filename in the cwd, so a later import @@ -155,7 +155,7 @@ export default async ( // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173 virtualModuleMapping[entryFilename] = interpolate(entryTemplate, { previewAnnotationFilename, - clientApi, + previewApi, clientLogger, }); entries.push(entryFilename); @@ -209,16 +209,14 @@ export default async ( externals: { ...[ // these packages are pre-bundled, so they are mapped to global shims - 'channels', + // at some point this should only be a single package: preview-api + 'addons', 'channel-postmessage', 'channel-websocket', - 'core-events', + 'channels', 'client-logger', - 'addons', - 'store', - 'preview-web', - 'client-api', - 'core-client', + 'core-events', + 'preview-api', ].reduce( (acc, sbPackage) => ({ ...acc, diff --git a/code/lib/builder-webpack5/templates/virtualModuleEntry.template.js b/code/lib/builder-webpack5/templates/virtualModuleEntry.template.js index ba3bdad1321..d25b289bb40 100644 --- a/code/lib/builder-webpack5/templates/virtualModuleEntry.template.js +++ b/code/lib/builder-webpack5/templates/virtualModuleEntry.template.js @@ -9,7 +9,7 @@ import { addArgsEnhancer, addArgTypesEnhancer, setGlobalRender, -} from '{{clientApi}}'; +} from '{{previewApi}}'; import * as previewAnnotations from '{{previewAnnotationFilename}}'; Object.keys(previewAnnotations).forEach((key) => { diff --git a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index 9f13e58b6e8..62b3fe1d603 100644 --- a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -1,9 +1,6 @@ import global from 'global'; -import { PreviewWeb } from '@storybook/preview-web'; -import { composeConfigs } from '@storybook/store'; -import { ClientApi } from '@storybook/client-api'; -import { addons } from '@storybook/addons'; +import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api'; import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts index 4e4922036a0..72734508d98 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -132,7 +132,7 @@ export abstract class JsPackageManager { * `@storybook/react@${storybookVersion}`, * `@storybook/addon-actions@${actionsVersion}`, * `@storybook/addon-links@${linksVersion}`, - * `@storybook/addons@${addonsVersion}`, + * `@storybook/preview-api@${addonsVersion}`, * ]); */ public addDependencies( diff --git a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts index b622e2caaa8..64ccc474802 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts @@ -63,27 +63,27 @@ describe('NPM Proxy', () => { describe('addDependencies', () => { describe('npm6', () => { - it('with devDep it should run `npm install -D @storybook/addons`', () => { + it('with devDep it should run `npm install -D @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('6.0.0'); - npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']); + npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'npm', - ['install', '-D', '@storybook/addons'], + ['install', '-D', '@storybook/preview-api'], expect.any(String) ); }); }); describe('npm7', () => { - it('with devDep it should run `npm install -D @storybook/addons`', () => { + it('with devDep it should run `npm install -D @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('7.0.0'); - npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']); + npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'npm', - ['install', '--legacy-peer-deps', '-D', '@storybook/addons'], + ['install', '--legacy-peer-deps', '-D', '@storybook/preview-api'], expect.any(String) ); }); @@ -92,27 +92,27 @@ describe('NPM Proxy', () => { describe('removeDependencies', () => { describe('npm6', () => { - it('with devDep it should run `npm uninstall @storybook/addons`', () => { + it('with devDep it should run `npm uninstall @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('6.0.0'); - npmProxy.removeDependencies({}, ['@storybook/addons']); + npmProxy.removeDependencies({}, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'npm', - ['uninstall', '@storybook/addons'], + ['uninstall', '@storybook/preview-api'], expect.any(String) ); }); }); describe('npm7', () => { - it('with devDep it should run `npm uninstall @storybook/addons`', () => { + it('with devDep it should run `npm uninstall @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('7.0.0'); - npmProxy.removeDependencies({}, ['@storybook/addons']); + npmProxy.removeDependencies({}, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'npm', - ['uninstall', '--legacy-peer-deps', '@storybook/addons'], + ['uninstall', '--legacy-peer-deps', '@storybook/preview-api'], expect.any(String) ); }); @@ -151,11 +151,11 @@ describe('NPM Proxy', () => { it('without constraint it returns the latest version', async () => { const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('"5.3.19"'); - const version = await npmProxy.latestVersion('@storybook/addons'); + const version = await npmProxy.latestVersion('@storybook/preview-api'); expect(executeCommandSpy).toHaveBeenCalledWith('npm', [ 'info', - '@storybook/addons', + '@storybook/preview-api', 'version', '--json', ]); @@ -167,11 +167,11 @@ describe('NPM Proxy', () => { .spyOn(npmProxy, 'executeCommand') .mockReturnValue('["4.25.3","5.3.19","6.0.0-beta.23"]'); - const version = await npmProxy.latestVersion('@storybook/addons', '5.X'); + const version = await npmProxy.latestVersion('@storybook/preview-api', '5.X'); expect(executeCommandSpy).toHaveBeenCalledWith('npm', [ 'info', - '@storybook/addons', + '@storybook/preview-api', 'versions', '--json', ]); @@ -181,7 +181,7 @@ describe('NPM Proxy', () => { it('throws an error if command output is not a valid JSON', async () => { jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('NOT A JSON'); - await expect(npmProxy.latestVersion('@storybook/addons')).rejects.toThrow(); + await expect(npmProxy.latestVersion('@storybook/preview-api')).rejects.toThrow(); }); }); diff --git a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts index 66e50ab6d9f..7d4a03a7b8b 100644 --- a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts +++ b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts @@ -47,28 +47,28 @@ describe('NPM Proxy', () => { }); describe('addDependencies', () => { - it('with devDep it should run `pnpm add -D @storybook/addons`', () => { + it('with devDep it should run `pnpm add -D @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('6.0.0'); - pnpmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']); + pnpmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'pnpm', - ['add', '-D', '@storybook/addons'], + ['add', '-D', '@storybook/preview-api'], expect.any(String) ); }); }); describe('removeDependencies', () => { - it('with devDep it should run `npm uninstall @storybook/addons`', () => { + it('with devDep it should run `npm uninstall @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('6.0.0'); - pnpmProxy.removeDependencies({}, ['@storybook/addons']); + pnpmProxy.removeDependencies({}, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'pnpm', - ['remove', '@storybook/addons'], + ['remove', '@storybook/preview-api'], expect.any(String) ); }); @@ -107,11 +107,11 @@ describe('NPM Proxy', () => { it('without constraint it returns the latest version', async () => { const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('"5.3.19"'); - const version = await pnpmProxy.latestVersion('@storybook/addons'); + const version = await pnpmProxy.latestVersion('@storybook/preview-api'); expect(executeCommandSpy).toHaveBeenCalledWith('pnpm', [ 'info', - '@storybook/addons', + '@storybook/preview-api', 'version', '--json', ]); @@ -123,11 +123,11 @@ describe('NPM Proxy', () => { .spyOn(pnpmProxy, 'executeCommand') .mockReturnValue('["4.25.3","5.3.19","6.0.0-beta.23"]'); - const version = await pnpmProxy.latestVersion('@storybook/addons', '5.X'); + const version = await pnpmProxy.latestVersion('@storybook/preview-api', '5.X'); expect(executeCommandSpy).toHaveBeenCalledWith('pnpm', [ 'info', - '@storybook/addons', + '@storybook/preview-api', 'versions', '--json', ]); @@ -137,7 +137,7 @@ describe('NPM Proxy', () => { it('throws an error if command output is not a valid JSON', async () => { jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('NOT A JSON'); - await expect(pnpmProxy.latestVersion('@storybook/addons')).rejects.toThrow(); + await expect(pnpmProxy.latestVersion('@storybook/preview-api')).rejects.toThrow(); }); }); diff --git a/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts b/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts index 9128506f842..7d8fd5ad11e 100644 --- a/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts +++ b/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts @@ -47,28 +47,28 @@ describe('Yarn 1 Proxy', () => { }); describe('addDependencies', () => { - it('with devDep it should run `yarn install -D --ignore-workspace-root-check @storybook/addons`', () => { + it('with devDep it should run `yarn install -D --ignore-workspace-root-check @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue(''); - yarn1Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']); + yarn1Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenCalledWith( 'yarn', - ['add', '-D', '--ignore-workspace-root-check', '@storybook/addons'], + ['add', '-D', '--ignore-workspace-root-check', '@storybook/preview-api'], expect.any(String) ); }); }); describe('removeDependencies', () => { - it('should run `yarn remove --ignore-workspace-root-check @storybook/addons`', () => { + it('should run `yarn remove --ignore-workspace-root-check @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue(''); - yarn1Proxy.removeDependencies({}, ['@storybook/addons']); + yarn1Proxy.removeDependencies({}, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenCalledWith( 'yarn', - ['remove', '--ignore-workspace-root-check', '@storybook/addons'], + ['remove', '--ignore-workspace-root-check', '@storybook/preview-api'], expect.any(String) ); }); @@ -107,11 +107,11 @@ describe('Yarn 1 Proxy', () => { .spyOn(yarn1Proxy, 'executeCommand') .mockReturnValue('{"type":"inspect","data":"5.3.19"}'); - const version = await yarn1Proxy.latestVersion('@storybook/addons'); + const version = await yarn1Proxy.latestVersion('@storybook/preview-api'); expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [ 'info', - '@storybook/addons', + '@storybook/preview-api', 'version', '--json', ]); @@ -123,11 +123,11 @@ describe('Yarn 1 Proxy', () => { .spyOn(yarn1Proxy, 'executeCommand') .mockReturnValue('{"type":"inspect","data":["4.25.3","5.3.19","6.0.0-beta.23"]}'); - const version = await yarn1Proxy.latestVersion('@storybook/addons', '5.X'); + const version = await yarn1Proxy.latestVersion('@storybook/preview-api', '5.X'); expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [ 'info', - '@storybook/addons', + '@storybook/preview-api', 'versions', '--json', ]); @@ -137,7 +137,7 @@ describe('Yarn 1 Proxy', () => { it('throws an error if command output is not a valid JSON', async () => { jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('NOT A JSON'); - await expect(yarn1Proxy.latestVersion('@storybook/addons')).rejects.toThrow(); + await expect(yarn1Proxy.latestVersion('@storybook/preview-api')).rejects.toThrow(); }); }); diff --git a/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts index 581c48d9d52..8c7cb184f43 100644 --- a/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts +++ b/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts @@ -47,28 +47,28 @@ describe('Yarn 2 Proxy', () => { }); describe('addDependencies', () => { - it('with devDep it should run `yarn install -D @storybook/addons`', () => { + it('with devDep it should run `yarn install -D @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue(''); - yarn2Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']); + yarn2Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenCalledWith( 'yarn', - ['add', '-D', '@storybook/addons'], + ['add', '-D', '@storybook/preview-api'], expect.any(String) ); }); }); describe('removeDependencies', () => { - it('should run `yarn remove @storybook/addons`', () => { + it('should run `yarn remove @storybook/preview-api`', () => { const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue(''); - yarn2Proxy.removeDependencies({}, ['@storybook/addons']); + yarn2Proxy.removeDependencies({}, ['@storybook/preview-api']); expect(executeCommandSpy).toHaveBeenCalledWith( 'yarn', - ['remove', '@storybook/addons'], + ['remove', '@storybook/preview-api'], expect.any(String) ); }); @@ -105,14 +105,14 @@ describe('Yarn 2 Proxy', () => { it('without constraint it returns the latest version', async () => { const executeCommandSpy = jest .spyOn(yarn2Proxy, 'executeCommand') - .mockReturnValue('{"name":"@storybook/addons","version":"5.3.19"}'); + .mockReturnValue('{"name":"@storybook/preview-api","version":"5.3.19"}'); - const version = await yarn2Proxy.latestVersion('@storybook/addons'); + const version = await yarn2Proxy.latestVersion('@storybook/preview-api'); expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [ 'npm', 'info', - '@storybook/addons', + '@storybook/preview-api', '--fields', 'version', '--json', @@ -124,15 +124,15 @@ describe('Yarn 2 Proxy', () => { const executeCommandSpy = jest .spyOn(yarn2Proxy, 'executeCommand') .mockReturnValue( - '{"name":"@storybook/addons","versions":["4.25.3","5.3.19","6.0.0-beta.23"]}' + '{"name":"@storybook/preview-api","versions":["4.25.3","5.3.19","6.0.0-beta.23"]}' ); - const version = await yarn2Proxy.latestVersion('@storybook/addons', '5.X'); + const version = await yarn2Proxy.latestVersion('@storybook/preview-api', '5.X'); expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [ 'npm', 'info', - '@storybook/addons', + '@storybook/preview-api', '--fields', 'versions', '--json', @@ -143,7 +143,7 @@ describe('Yarn 2 Proxy', () => { it('throws an error if command output is not a valid JSON', async () => { jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('NOT A JSON'); - await expect(yarn2Proxy.latestVersion('@storybook/addons')).rejects.toThrow(); + await expect(yarn2Proxy.latestVersion('@storybook/preview-api')).rejects.toThrow(); }); }); diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 2a3ee32ad04..214f48fb2fa 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -56,6 +56,8 @@ export default { '@storybook/preset-vue-webpack': '7.0.0-alpha.53', '@storybook/preset-vue3-webpack': '7.0.0-alpha.53', '@storybook/preset-web-components-webpack': '7.0.0-alpha.53', + '@storybook/preview': '7.0.0-alpha.53', + '@storybook/preview-api': '7.0.0-alpha.53', '@storybook/preview-web': '7.0.0-alpha.53', '@storybook/react': '7.0.0-alpha.53', '@storybook/react-vite': '7.0.0-alpha.53', diff --git a/code/lib/cli/src/window.d.ts b/code/lib/cli/src/window.d.ts index 7a5da303ea6..19d7aba81c0 100644 --- a/code/lib/cli/src/window.d.ts +++ b/code/lib/cli/src/window.d.ts @@ -1,5 +1,5 @@ import type { Renderer } from '@storybook/types'; -import type { StoryStore } from '@storybook/client-api'; +import type { StoryStore } from '@storybook/preview-api'; declare global { interface Window { diff --git a/code/lib/client-api/README.md b/code/lib/client-api/README.md index fddccb2823d..2220a03cb98 100644 --- a/code/lib/client-api/README.md +++ b/code/lib/client-api/README.md @@ -1,16 +1,3 @@ -# `@storybook/client-api` -- Deprecated Story APIs (`storiesOf`) +The contents of this package have moved to `@storybook/preview-api`. Please update your import. -**NOTE** This API is deprecated, and the CSF format is preferred for all stories. - -## `storiesOf` API - -The `@storybook/client` API provides the [`storiesOf()` API](../core/docs/storiesOf.md), which is proxied through to the CSF API. - -### Internals - -In order to appear to the store like the CSF API, a call to `storiesOf().add()` does the following: - -- Tracks the story added in a synthetic `StoryIndex` data structure -- Constructs a `moduleExports` object that is equivalent to the exports from a CSF file that produced the same stories. - -In order to achieve the old `storySort` functionality, the client API also needs access to the project annotations. +This package will no longer be released as part of the 8.0 release of storybook. diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json index 620cca513af..c8c959c6ba5 100644 --- a/code/lib/client-api/package.json +++ b/code/lib/client-api/package.json @@ -22,15 +22,15 @@ "sideEffects": false, "exports": { ".": { - "require": "./dist/index.js", - "import": "./dist/index.mjs", - "types": "./dist/index.d.ts" + "require": "./dist/entry.js", + "import": "./dist/entry.mjs", + "types": "./dist/entry.d.ts" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "main": "dist/entry.js", + "module": "dist/entry.mjs", + "types": "dist/entry.d.ts", "files": [ "dist/**/*", "README.md", @@ -39,37 +39,20 @@ ], "scripts": { "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.53", "@storybook/client-logger": "7.0.0-alpha.53", - "@storybook/csf": "next", - "@storybook/store": "7.0.0-alpha.53", - "@storybook/types": "7.0.0-alpha.53", - "@types/qs": "^6.9.5", - "@types/webpack-env": "^1.16.4", - "global": "^4.4.0", - "qs": "^6.10.0", - "synchronous-promise": "^2.0.15", - "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2" - }, - "devDependencies": { - "@storybook/core-common": "7.0.0-alpha.53", - "typescript": "^4.9.3" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@storybook/preview-api": "7.0.0-alpha.53" }, "publishConfig": { "access": "public" }, "bundler": { "entries": [ - "./src/index.ts" - ] + "./src/entry.ts" + ], + "shim": "@storybook/preview-api/dist/client-api" }, "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23" } diff --git a/code/lib/client-api/src/entry.ts b/code/lib/client-api/src/entry.ts new file mode 100644 index 00000000000..c5528bee29d --- /dev/null +++ b/code/lib/client-api/src/entry.ts @@ -0,0 +1,7 @@ +import { deprecate } from '@storybook/client-logger'; + +deprecate( + 'importing from @storybook/client-api is deprecated and will be removed in 8.0, please import canvas related modules from @storybook/preview-api' +); + +export * from '@storybook/preview-api/dist/client-api'; diff --git a/code/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.snapshot b/code/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.snapshot index df9ded66f42..5d16d1cc572 100644 --- a/code/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.snapshot +++ b/code/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.snapshot @@ -2,7 +2,7 @@ exports[`update-organisation-name transforms correctly using "update-organisation-name.input.js" data 1`] = ` "/* eslint-disable */ -import '@storybook/addons'; +import '@storybook/preview-api'; import '@storybook/addon-comments'; import '@storybook/addon-centered'; import '@storybook/addon-graphql'; diff --git a/code/lib/codemod/src/transforms/update-organisation-name.js b/code/lib/codemod/src/transforms/update-organisation-name.js index 6e4ca34a523..4774df6538f 100644 --- a/code/lib/codemod/src/transforms/update-organisation-name.js +++ b/code/lib/codemod/src/transforms/update-organisation-name.js @@ -1,6 +1,6 @@ export const packageNames = { '@kadira/react-storybook-decorator-centered': '@storybook/addon-centered', - '@kadira/storybook-addons': '@storybook/addons', + '@kadira/storybook-addons': '@storybook/preview-api', '@kadira/storybook-addon-actions': '@storybook/addon-actions', '@kadira/storybook-addon-comments': '@storybook/addon-comments', '@kadira/storybook-addon-graphql': '@storybook/addon-graphql', diff --git a/code/lib/core-client/README.md b/code/lib/core-client/README.md index e7a5c89882c..2220a03cb98 100644 --- a/code/lib/core-client/README.md +++ b/code/lib/core-client/README.md @@ -1,14 +1,3 @@ -# Storybook Core-Client +The contents of this package have moved to `@storybook/preview-api`. Please update your import. -This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue, Ember, Angular, etc) in the old "v6" story store back-compatibility layer. - -A framework calls the `start(renderToCanvas, { render, decorateStory })` function and provides: - -- The `renderToCanvas` function, which tells Storybook how to render the result of a story function to the DOM -- The `render` function, which is a default mapping of `args` to a story result in CSFv3 -- The `decorateStory` function, which tells Storybook how to combine decorators in the framework. - -The `start` function will return a `configure()` function, which can be re-exported to be used in `preview.js` (deprecated), or automatically by the `main.js:stories` field to: - -- return a list of CSF files -- [deprecated] make calls to the `storiesOf` API. +This package will no longer be released as part of the 8.0 release of storybook. diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json index 002ddc601c4..7fb7da17aca 100644 --- a/code/lib/core-client/package.json +++ b/code/lib/core-client/package.json @@ -21,49 +21,31 @@ "license": "MIT", "exports": { ".": { - "require": "./dist/index.js", - "import": "./dist/index.mjs", - "types": "./dist/index.d.ts" + "require": "./dist/entry.js", + "import": "./dist/entry.mjs", + "types": "./dist/entry.d.ts" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "main": "dist/entry.js", + "module": "dist/entry.mjs", + "types": "dist/entry.d.ts", "scripts": { "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.53", - "@storybook/channel-postmessage": "7.0.0-alpha.53", - "@storybook/channel-websocket": "7.0.0-alpha.53", - "@storybook/channels": "7.0.0-alpha.53", - "@storybook/client-api": "7.0.0-alpha.53", "@storybook/client-logger": "7.0.0-alpha.53", - "@storybook/core-events": "7.0.0-alpha.53", - "@storybook/csf": "next", - "@storybook/preview-web": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", - "@storybook/types": "7.0.0-alpha.53", - "global": "^4.4.0", - "util-deprecate": "^1.0.2" - }, - "devDependencies": { - "typescript": "^4.9.3" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } + "@storybook/preview-api": "7.0.0-alpha.53" }, "publishConfig": { "access": "public" }, "bundler": { "entries": [ - "./src/index.ts" - ] + "./src/entry.ts" + ], + "shim": "@storybook/preview-api/dist/core-client" }, "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23" } diff --git a/code/lib/core-client/src/entry.ts b/code/lib/core-client/src/entry.ts new file mode 100644 index 00000000000..e838a6bd793 --- /dev/null +++ b/code/lib/core-client/src/entry.ts @@ -0,0 +1,7 @@ +import { deprecate } from '@storybook/client-logger'; + +deprecate( + 'importing from @storybook/core-client is deprecated and will be removed in 8.0, please import canvas related modules from @storybook/preview-api' +); + +export * from '@storybook/preview-api/dist/core-client'; diff --git a/code/lib/core-client/src/index.ts b/code/lib/core-client/src/index.ts deleted file mode 100644 index 23c8d04e27e..00000000000 --- a/code/lib/core-client/src/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ClientApi } from '@storybook/client-api'; -import { StoryStore } from '@storybook/store'; -import { start } from './start'; - -export { start, ClientApi, StoryStore }; diff --git a/code/lib/core-client/typings.d.ts b/code/lib/core-client/typings.d.ts index 3da80ea2d99..2a4bb7deb46 100644 --- a/code/lib/core-client/typings.d.ts +++ b/code/lib/core-client/typings.d.ts @@ -1,5 +1,3 @@ -declare module '@storybook/preview-web/dist/cjs/PreviewWeb.mockdata'; - declare class AnsiToHtml { constructor(options: { escapeHtml: boolean }); diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index aee32be9454..d2379494d8b 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -36,14 +36,13 @@ "@aw-web-design/x-default-browser": "1.4.88", "@discoveryjs/json-ext": "^0.5.3", "@storybook/builder-manager": "7.0.0-alpha.53", - "@storybook/core-client": "7.0.0-alpha.53", "@storybook/core-common": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", "@storybook/csf": "next", "@storybook/csf-tools": "7.0.0-alpha.53", "@storybook/docs-mdx": "next", "@storybook/node-logger": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/telemetry": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "@types/node": "^16.0.0", diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index aa8552c781c..15035c1b425 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -19,7 +19,7 @@ import type { StoryId, StoryName, } from '@storybook/types'; -import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/store'; +import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api'; import { normalizeStoryPath } from '@storybook/core-common'; import { logger } from '@storybook/node-logger'; import { getStorySortParameter, NoMetaError } from '@storybook/csf-tools'; diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 3f2d8cf907c..d9bc5aa192b 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -42,9 +42,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.12.10", "@storybook/core-common": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "doctrine": "^3.0.0", "lodash": "^4.17.21" diff --git a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts index aa2d8c13e5c..09d82058a38 100644 --- a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts +++ b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts @@ -1,5 +1,5 @@ import type { Renderer, StoryContextForEnhancers } from '@storybook/types'; -import { combineParameters } from '@storybook/store'; +import { combineParameters } from '@storybook/preview-api'; export const enhanceArgTypes = ( context: StoryContextForEnhancers diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index a2c8df9afcf..c6a7833ba45 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -46,6 +46,7 @@ "@storybook/channels": "7.0.0-alpha.53", "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "core-js": "^3.8.2", "global": "^4.4.0" }, diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts index 05aed24fb5e..8085f16b1f2 100644 --- a/code/lib/instrumenter/src/instrumenter.ts +++ b/code/lib/instrumenter/src/instrumenter.ts @@ -1,6 +1,6 @@ /* eslint-disable no-underscore-dangle */ import type { Channel } from '@storybook/channels'; -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import type { StoryId } from '@storybook/types'; import { once, logger } from '@storybook/client-logger'; import { diff --git a/code/lib/postinstall/src/frameworks.test.ts b/code/lib/postinstall/src/frameworks.test.ts index 32192dacfca..6b498477e19 100644 --- a/code/lib/postinstall/src/frameworks.test.ts +++ b/code/lib/postinstall/src/frameworks.test.ts @@ -9,7 +9,7 @@ const VUE = { }; const NONE = { - '@storybook/addons': '5.2.5', + '@storybook/preview-api': '5.2.5', lodash: '^4.17.15', }; diff --git a/code/lib/preview-api/README-client-api.md b/code/lib/preview-api/README-client-api.md new file mode 100644 index 00000000000..fddccb2823d --- /dev/null +++ b/code/lib/preview-api/README-client-api.md @@ -0,0 +1,16 @@ +# `@storybook/client-api` -- Deprecated Story APIs (`storiesOf`) + +**NOTE** This API is deprecated, and the CSF format is preferred for all stories. + +## `storiesOf` API + +The `@storybook/client` API provides the [`storiesOf()` API](../core/docs/storiesOf.md), which is proxied through to the CSF API. + +### Internals + +In order to appear to the store like the CSF API, a call to `storiesOf().add()` does the following: + +- Tracks the story added in a synthetic `StoryIndex` data structure +- Constructs a `moduleExports` object that is equivalent to the exports from a CSF file that produced the same stories. + +In order to achieve the old `storySort` functionality, the client API also needs access to the project annotations. diff --git a/code/lib/preview-api/README-core-client.md b/code/lib/preview-api/README-core-client.md new file mode 100644 index 00000000000..e7a5c89882c --- /dev/null +++ b/code/lib/preview-api/README-core-client.md @@ -0,0 +1,14 @@ +# Storybook Core-Client + +This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue, Ember, Angular, etc) in the old "v6" story store back-compatibility layer. + +A framework calls the `start(renderToCanvas, { render, decorateStory })` function and provides: + +- The `renderToCanvas` function, which tells Storybook how to render the result of a story function to the DOM +- The `render` function, which is a default mapping of `args` to a story result in CSFv3 +- The `decorateStory` function, which tells Storybook how to combine decorators in the framework. + +The `start` function will return a `configure()` function, which can be re-exported to be used in `preview.js` (deprecated), or automatically by the `main.js:stories` field to: + +- return a list of CSF files +- [deprecated] make calls to the `storiesOf` API. diff --git a/code/lib/preview-api/README-preview-web.md b/code/lib/preview-api/README-preview-web.md new file mode 100644 index 00000000000..cb44e3b4b07 --- /dev/null +++ b/code/lib/preview-api/README-preview-web.md @@ -0,0 +1,94 @@ +# Preview (Web) + +This is the main API for the (web) version of the Storybook Preview. + +The preview's job is: + +1. Read and update the URL (via the URL Store) + +2. Listen to instructions on the channel and emit events as things occur. + +3. Render the current selection to the web view in either story or docs mode. + +## V7 Store vs Legacy (V6) + +The story store is designed to load stories 'on demand', and will operate in this fashion if the `storyStoreV7` feature is enabled. + +However, for back-compat reasons, in v6 mode, we need to load all stories, synchronously on bootup, emitting the `SET_STORIES` event. + +In V7 mode we do not emit that event, instead preferring the `STORY_PREPARED` event, with the data for the single story being rendered. + +## Initialization + +The preview is `initialized` in two ways. + +### V7 Mode: + +- `importFn` - is an async `import()` function + +- `getProjectAnnotations` - is a simple function that evaluations `preview.js` and addon config files and combines them. If it errors, the Preview will show the error. + +- No `getStoryIndex` function is passed, instead the preview creates a `StoryIndexClient` that pulls `stories.json` from node and watches the event stream for invalidation events. + +### V6 Mode + +- `importFn` - is a simulated `import()` function, that is synchronous, see `client-api` for details. +- `getProjectAnnotations` - also evaluates `preview.js` et al, but watches for calls to `setStories`, and passes them to the `ClientApi` +- `getStoryIndex` is a local function (that must be called _after_ `getProjectAnnotations`) that gets the list of stories added. + +See `client-api` for more details on this process. + +## Story Rendering and interruptions + +The Preview is split into three parts responsible for state management: + +- `PreviewWeb` - which story is rendered, receives events and (maybe) changes/re-renders stories +- `StoryRender` - (imports +) prepares the story, renders it through the various phases +- `DocsRender` - if a story renders in docs mode, it is "transformed" into a `DocsRender` once we know. + +A rendering story goes through these phases: + +- `preparing` - (maybe async) import the story file and prepare the story function. +- `loading` - async loaders are running +- `rendering` - the `renderToDOM` function for the framework is running +- `playing` - the `play` function is running +- `completed` - the story is done. + +It also has two error states: + +- `aborted` - the story was stopped midway (see below) +- `errored` - there was an error thrown somewhere along the way. + +### Re-rendering and aborting + +A story may re-render due to various events, which can have implications if the story is not in the `completed` phase: + +- `UPDATE_STORY_ARGS` / `UPDATE_GLOBALS` -- change of inputs +- `FORCE_RE_RENDER` - re-render unchanged + +If these events happen during a render: + +- if the story is `preparing` or `loading`, leave thing unchanged and let the new `args`/`globals` be picked up by the render phase +- otherwise, use the result of the previous `loaders` run, and simply re-render over the top + +- `FORCE_REMOUNT` - remount (or equivalent) the component and re-render. + +If this happens during a render, treat `loading` similarly, but: + +- if the story is `rendering`, start a new render and abort the previous render immediately afterwards +- if the story is `playing`, attempt to abort the previous play function, and start a new render. + +### Changing story + +Also the `SET_CURRENT_STORY` event may change the current story. We need to check: + +- If the `storyId` changed +- If the `viewMode` changed +- If the story implementation changed (i.e if HMR occurred). + +If the _previous_ story is still `preparing`, we cannot know if the implementation changed, so we +abort the preparing immediately, and let the new story take over. + +Otherwise, if all of the above are the same, we do nothing. + +If they are different, and the old story is not `completed`, we try to abort it immediately. If that fails (e.g. the `play` function doesn't respond to the `abort` event), then we reload the window. diff --git a/code/lib/preview-api/README-store.md b/code/lib/preview-api/README-store.md new file mode 100644 index 00000000000..83e9b9b4b51 --- /dev/null +++ b/code/lib/preview-api/README-store.md @@ -0,0 +1,136 @@ +# Storybook Store + +The store is reponsible for loading a story from a CSF file and preparing into a `Story` type, which is our internal format. + +## Story vs StoryContext + +Story functions and decorators recieve a `StoryContext` object (parameterized by their framework). + +The `Story` type that we pass around in our code includes all of those fields apart from the `args`, `globals`, `hooks` and `viewMode`, which are mutable and stored separately in the store. + +## Identification + +The first set of fields on a `Story` are the identifying fields for a story: + +- `componentId` - the URL "id" of the component +- `title` - the title of the component, which generates the sidebar entry +- `id` - the story "id" (in the URL) +- `name` - the name of the story + +## Annotations + +The main fields on a `Story` are the various annotations. Annotations can be set: + +- At the project level in `preview.js` (or via addons) +- At the component level via `export default { ... }` in a CSF file +- At the story level via `export const Story = {...}` in a CSF file. + +Not all annotations can be set at every level but most can. + +## Parameters + +The story parameters is a static, serializable object of data that provides details about the story. Those details can be used by addons or Storybook itself to render UI or provide defaults about the story rendering. + +Parameters _cannot change_ and are synchronized to the manager once when the story is loaded (note over the lifetime of a development Storybook a story can be loaded several times due to hot module reload, so the parameters technically can change for that reason). + +Usually addons will read from a single key of `parameters` namespaced by the name of that addon. For instance the configuration of the `backgrounds` addon is driven by the `parameters.backgrounds` namespace. + +Parameters are inheritable -- you can set project parameters via `export parameters = {}`, at the component level by the `parameters` key of the component (default) export in CSF, and on a single story via the `parameters` key on the story data. + +Some notable parameters: + +- `parameters.fileName` - the file that the story was defined in, when available + +## Args + +Args are "inputs" to stories. + +You can think of them equivalently to React props, Angular inputs and outputs, etc. + +Changing the args cause the story to be re-rendered with the new set of args. + +### Using args in a story + +By default (starting in 6.0) the args will be passed to the story as first argument and the context as second: + +```js +const YourStory = ({ x, y } /*, context*/) => /* render your story using `x` and `y` */ +``` + +If you set the `parameters.options.passArgsFirst` option on a story to false, args are passed to a story in the context, preserving the pre-6.0 story API; like parameters, they are available as `context.args`. + +```js +const YourStory = ({ args: { x, y }}) => /* render your story using `x` and `y` */ +``` + +### Arg types and values + +Arg types are used by the docs addon to populate the props table and are documented there. They are controlled by `argTypes` and can (sometimes) be automatically inferred from type information about the story or the component rendered by the story. + +A story can set initial values of its args with the `args` annotation. If you set an initial value for an arg that doesn't have a type a simple type will be inferred from the value. + +If an arg doesn't have an initial value, it will start unset, although it can still be set later via user interaction. + +Args can be set at the project, component and story level. + +### Using args in an addon + +Args values are automatically synchronized (via the `changeStoryArgs` and `storyArgsChanged` events) between the preview and manager; APIs exist in `lib/api` to read and set args in the manager. + +Args need to be serializable -- so currently cannot include callbacks (this may change in a future version). + +Note that arg values are passed directly to a story -- you should only store the actual value that the story needs to render in the arg. If you need more complex information supporting that, use parameters or addon state. + +Both `@storybook/client-api` (preview) and `@storybook/api` (manager) export a `useArgs()` hook that you can use to access args in decorators or addon panels. The API is as follows: + +```js +import { useArgs } from '@storybook/client-api'; // or '@storybook/api' + +// `args` is the args of the currently rendered story +// `updateArgs` will update its args. You can pass a subset of the args; other args will not be changed. +const [args, updateArgs] = useArgs(); +``` + +## ArgTypes + +Arg types add type information and metadata about args that are used to control the docs and controls addons. + +### ArgTypes enhancement + +To add a argTypes enhancer, `export const argTypesEnhancers = []` from `preview.js` or and addon + +There is a default enhancer that ensures that each `arg` in a story has a baseline `argType`. This value can be improved by subsequent enhancers, e.g. those provided by `@storybook/addon-docs`. + +## Globals + +Globals are rendering information that is global across stories. They are used for things like themes and internationalization (i18n) in stories, where you want Storybook to "remember" your setting as you browse between stories. + +They can be accessed in stories and decorators in the `context.globals` key. + +### Initial values of globals + +To set initial values of globals, `export const globals = {...}` from `preview.js` + +### Using globals in an addon + +Similar to args, globals are synchronized to the manager and can be accessed via the `useGlobals` hook. + +```js +import { useGlobals } from '@storybook/addons'; // or '@storybook/api' + +const [globals, updateGlobals] = useGlobals(); +``` + +## Technical details + +### Initialization + +- The store is created "uninitialized". +- It is assumed at some later time it will be initialized with the Story Index, the set of stories (this may be loaded async). +- You _can_ call `loadStory` prior to that time, in which case it will wait for initialization. + +### Caching + +- "All story" APIs like `extract()` require all stories to be loaded. +- For backwards-compatibility, these APIs are _not_ async, so it is required that `store.cacheAllCSFFiles()` is called first +- In v6 mode, this will be called on initialization but `start.ts`. diff --git a/code/lib/preview-api/README.md b/code/lib/preview-api/README.md new file mode 100644 index 00000000000..d2dbbf7ab4c --- /dev/null +++ b/code/lib/preview-api/README.md @@ -0,0 +1,12 @@ +# Preview API + +TODO write proper documentation of this package + +# "Sub packages" README documents + +This package used to be multiple packages (they have been combined into this one): + +- `@storybook/client-api` [read (old) docs](./README-client-api.md) +- `@storybook/core-client` [read (old) docs](./README-core-client.md) +- `@storybook/preview-web` [read (old) docs](./README-preview-web.md) +- `@storybook/store` [read (old) docs](./README-store.md) diff --git a/code/lib/preview-api/jest.config.js b/code/lib/preview-api/jest.config.js new file mode 100644 index 00000000000..343e4c7a7f3 --- /dev/null +++ b/code/lib/preview-api/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.node'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json new file mode 100644 index 00000000000..9f1ea631556 --- /dev/null +++ b/code/lib/preview-api/package.json @@ -0,0 +1,101 @@ +{ + "name": "@storybook/preview-api", + "version": "7.0.0-alpha.53", + "description": "", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/preview-api", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "code/lib/preview-api" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "sideEffects": false, + "exports": { + ".": { + "import": "./dist/index.mjs", + "require": "./dist/index.js", + "types": "./dist/index.d.ts" + }, + "./dist/store": { + "import": "./dist/store.mjs", + "require": "./dist/store.js", + "types": "./dist/store.d.ts" + }, + "./dist/client-api": { + "import": "./dist/client-api.mjs", + "require": "./dist/client-api.js", + "types": "./dist/client-api.d.ts" + }, + "./dist/core-client": { + "import": "./dist/core-client.mjs", + "require": "./dist/core-client.js", + "types": "./dist/core-client.d.ts" + }, + "./dist/preview-web": { + "import": "./dist/preview-web.mjs", + "require": "./dist/preview-web.js", + "types": "./dist/preview-web.d.ts" + }, + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "check": "../../../scripts/node_modules/.bin/tsc --noEmit", + "prep": "../../../scripts/prepare/bundle.ts" + }, + "dependencies": { + "@storybook/addons": "7.0.0-alpha.53", + "@storybook/channel-postmessage": "7.0.0-alpha.53", + "@storybook/channels": "7.0.0-alpha.53", + "@storybook/client-logger": "7.0.0-alpha.53", + "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/csf": "next", + "@storybook/types": "7.0.0-alpha.53", + "@types/qs": "^6.9.5", + "@types/webpack-env": "^1.16.4", + "dequal": "^2.0.2", + "global": "^4.4.0", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "slash": "^3.0.0", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "devDependencies": { + "@jest/globals": "^26.6.2", + "ansi-to-html": "^0.6.11" + }, + "publishConfig": { + "access": "public" + }, + "bundler": { + "entries": [ + "./src/index.ts", + "./src/store.ts", + "./src/client-api.ts", + "./src/core-client.ts", + "./src/preview-web.ts" + ] + }, + "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" +} diff --git a/code/lib/preview-api/src/client-api.ts b/code/lib/preview-api/src/client-api.ts new file mode 100644 index 00000000000..0ba8fe19999 --- /dev/null +++ b/code/lib/preview-api/src/client-api.ts @@ -0,0 +1 @@ +export * from './modules/client-api'; diff --git a/code/lib/preview-api/src/core-client.ts b/code/lib/preview-api/src/core-client.ts new file mode 100644 index 00000000000..86513ed4b7f --- /dev/null +++ b/code/lib/preview-api/src/core-client.ts @@ -0,0 +1 @@ +export * from './modules/core-client'; diff --git a/code/lib/preview-api/src/index.ts b/code/lib/preview-api/src/index.ts new file mode 100644 index 00000000000..7b16a286dd9 --- /dev/null +++ b/code/lib/preview-api/src/index.ts @@ -0,0 +1,82 @@ +/** + * HOOKS API + */ +export { + useArgs, + useCallback, + useChannel, + useEffect, + useGlobals, + useMemo, + useParameter, + useReducer, + useRef, + useState, + useStoryContext, + applyHooks, + HooksContext, +} from '@storybook/addons'; + +/** + * DECORATORS API + */ +export { makeDecorator } from '@storybook/addons'; + +/** + * ADDON API + * @deprecated + */ +export { addons } from '@storybook/addons'; + +/** + * DOCS API + */ +export { DocsContext } from './preview-web'; + +/** + * SIMULATION API + */ +export { simulatePageLoad, simulateDOMContentLoaded } from './preview-web'; + +/** + * STORIES API + */ +export { + addArgTypes, + addArgTypesEnhancer, + addArgs, + addArgsEnhancer, + addDecorator, + addLoader, + addParameters, + addStepRunner, +} from './client-api'; +export { getQueryParam, getQueryParams } from './client-api'; +export { setGlobalRender } from './client-api'; + +export { + combineArgs, + combineParameters, + composeConfigs, + composeStepRunners, + composeStories, + composeStory, + decorateStory, + defaultDecorateStory, + prepareStory, + normalizeStory, + filterArgTypes, + sanitizeStoryContextUpdate, + setProjectAnnotations, + inferControls, + userOrAutoTitleFromSpecifier, + sortStoriesV7, +} from './store'; + +/** + * STORIES API + */ +export { ClientApi } from './client-api'; +export { StoryStore } from './store'; +export { Preview, PreviewWeb } from './preview-web'; +export { start } from './core-client'; diff --git a/code/lib/client-api/src/ClientApi.test.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.test.ts similarity index 97% rename from code/lib/client-api/src/ClientApi.test.ts rename to code/lib/preview-api/src/modules/client-api/ClientApi.test.ts index d4b44e04a1d..18e96557ad3 100644 --- a/code/lib/client-api/src/ClientApi.test.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.test.ts @@ -18,7 +18,7 @@ describe('ClientApi', () => { }; clientApi.storyStore = store as any; - let disposeCallback: () => void; + let disposeCallback: () => void = () => {}; const module1 = { id: 'file1', hot: { diff --git a/code/lib/client-api/src/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts similarity index 95% rename from code/lib/client-api/src/ClientApi.ts rename to code/lib/preview-api/src/modules/client-api/ClientApi.ts index d0d61f76e17..7490d00960e 100644 --- a/code/lib/client-api/src/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -24,8 +24,8 @@ import type { Store_ModuleImportFn, Store_ModuleExports, } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; -import { combineParameters, composeStepRunners, normalizeInputTypes } from '@storybook/store'; +import type { StoryStore } from '../../store'; +import { combineParameters, composeStepRunners, normalizeInputTypes } from '../../store'; import { StoryStoreFacade } from './StoryStoreFacade'; @@ -105,7 +105,9 @@ export const getGlobalRender = () => { return singleton.facade.projectAnnotations.render; }; -export const setGlobalRender = (render: StoryFn) => { +export const setGlobalRender = ( + render: typeof singleton['facade']['projectAnnotations']['render'] +) => { checkMethod('setGlobalRender'); singleton.facade.projectAnnotations.render = render; }; @@ -131,8 +133,7 @@ export class ClientApi { this.storyStore = storyStore; - // eslint-disable-next-line @typescript-eslint/no-this-alias - singleton = this; + singleton = this as any; } importFn(path: Path) { @@ -147,7 +148,7 @@ export class ClientApi { } addDecorator = (decorator: DecoratorFunction) => { - this.facade.projectAnnotations.decorators.push(decorator); + this.facade.projectAnnotations.decorators?.push(decorator); }; addParameters = ({ @@ -175,12 +176,12 @@ export class ClientApi { addStepRunner = (stepRunner: StepRunner) => { this.facade.projectAnnotations.runStep = composeStepRunners( - [this.facade.projectAnnotations.runStep, stepRunner].filter(Boolean) + [this.facade.projectAnnotations.runStep, stepRunner].filter(Boolean) as StepRunner[] ); }; addLoader = (loader: LoaderFunction) => { - this.facade.projectAnnotations.loaders.push(loader); + this.facade.projectAnnotations.loaders?.push(loader); }; addArgs = (args: Args) => { @@ -198,11 +199,11 @@ export class ClientApi { }; addArgsEnhancer = (enhancer: ArgsEnhancer) => { - this.facade.projectAnnotations.argsEnhancers.push(enhancer); + this.facade.projectAnnotations.argsEnhancers?.push(enhancer); }; addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => { - this.facade.projectAnnotations.argTypesEnhancers.push(enhancer); + this.facade.projectAnnotations.argTypesEnhancers?.push(enhancer); }; // Because of the API of `storiesOf().add()` we don't have a good "end" call for a @@ -345,14 +346,14 @@ export class ClientApi { throw new Error(`You cannot add a decorator after the first story for a kind. Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`); - meta.decorators.push(decorator); + meta.decorators?.push(decorator); return api; }; api.addLoader = (loader: LoaderFunction) => { if (hasAdded) throw new Error(`You cannot add a loader after the first story for a kind.`); - meta.loaders.push(loader); + meta.loaders?.push(loader); return api; }; @@ -374,7 +375,7 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m // @deprecated raw = () => { - return this.storyStore.raw(); + return this.storyStore?.raw(); }; // @deprecated diff --git a/code/lib/client-api/src/StoryStoreFacade.ts b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts similarity index 87% rename from code/lib/client-api/src/StoryStoreFacade.ts rename to code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts index c62c8e2e6c6..4d777275864 100644 --- a/code/lib/client-api/src/StoryStoreFacade.ts +++ b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts @@ -17,9 +17,9 @@ import type { Store_StoryIndex, StoryId, } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; -import { userOrAutoTitle, sortStoriesV6 } from '@storybook/store'; import { logger } from '@storybook/client-logger'; +import type { StoryStore } from '../../store'; +import { userOrAutoTitle, sortStoriesV6 } from '../../store'; export class StoryStoreFacade { projectAnnotations: Store_NormalizedProjectAnnotations; @@ -60,36 +60,35 @@ export class StoryStoreFacade { const storyEntries = Object.entries(this.entries); // Add the kind parameters and global parameters to each entry - const sortableV6: [StoryId, Store_Story, Parameters, Parameters][] = - storyEntries.map(([storyId, { type, importPath, ...entry }]) => { - const exports = this.csfExports[importPath]; - const csfFile = store.processCSFFileWithCache( - exports, - importPath, - exports.default.title - ); + const sortableV6 = storyEntries.map(([storyId, { type, importPath, ...entry }]) => { + const exports = this.csfExports[importPath]; + const csfFile = store.processCSFFileWithCache( + exports, + importPath, + exports.default.title + ); - let storyLike: Store_Story; - if (type === 'story') { - storyLike = store.storyFromCSFFile({ storyId, csfFile }); - } else { - storyLike = { - ...entry, - story: entry.name, - kind: entry.title, - componentId: toId(entry.componentId || entry.title), - parameters: { fileName: importPath }, - } as any; - } - return [storyId, storyLike, csfFile.meta.parameters, this.projectAnnotations.parameters]; - }); + let storyLike: Store_Story; + if (type === 'story') { + storyLike = store.storyFromCSFFile({ storyId, csfFile }); + } else { + storyLike = { + ...entry, + story: entry.name, + kind: entry.title, + componentId: toId(entry.componentId || entry.title), + parameters: { fileName: importPath }, + } as any; + } + return [storyId, storyLike, csfFile.meta.parameters, this.projectAnnotations.parameters]; + }) as [StoryId, Store_Story, Parameters, Parameters][]; // NOTE: the sortStoriesV6 version returns the v7 data format. confusing but more convenient! let sortedV7: Addon_IndexEntry[]; try { sortedV7 = sortStoriesV6(sortableV6, storySortParameter, fileNameOrder); - } catch (err) { + } catch (err: any) { if (typeof storySortParameter === 'function') { throw new Error(dedent` Error sorting stories with sort parameter ${storySortParameter}: diff --git a/code/lib/client-api/src/index.ts b/code/lib/preview-api/src/modules/client-api/index.ts similarity index 86% rename from code/lib/client-api/src/index.ts rename to code/lib/preview-api/src/modules/client-api/index.ts index 47018f594e7..075075214e9 100644 --- a/code/lib/client-api/src/index.ts +++ b/code/lib/preview-api/src/modules/client-api/index.ts @@ -11,6 +11,6 @@ export { setGlobalRender, } from './ClientApi'; -export * from '@storybook/store'; +export * from '../../store'; export * from './queryparams'; diff --git a/code/lib/client-api/src/queryparams.ts b/code/lib/preview-api/src/modules/client-api/queryparams.ts similarity index 100% rename from code/lib/client-api/src/queryparams.ts rename to code/lib/preview-api/src/modules/client-api/queryparams.ts diff --git a/code/lib/client-api/src/typings.d.ts b/code/lib/preview-api/src/modules/client-api/typings.d.ts similarity index 100% rename from code/lib/client-api/src/typings.d.ts rename to code/lib/preview-api/src/modules/client-api/typings.d.ts diff --git a/code/lib/core-client/src/PreviewWeb.mockdata.ts b/code/lib/preview-api/src/modules/core-client/PreviewWeb.mockdata.ts similarity index 100% rename from code/lib/core-client/src/PreviewWeb.mockdata.ts rename to code/lib/preview-api/src/modules/core-client/PreviewWeb.mockdata.ts diff --git a/code/lib/core-client/src/executeLoadable.ts b/code/lib/preview-api/src/modules/core-client/executeLoadable.ts similarity index 94% rename from code/lib/core-client/src/executeLoadable.ts rename to code/lib/preview-api/src/modules/core-client/executeLoadable.ts index cf6a1e9c394..a586d243428 100644 --- a/code/lib/core-client/src/executeLoadable.ts +++ b/code/lib/preview-api/src/modules/core-client/executeLoadable.ts @@ -36,7 +36,7 @@ export function executeLoadable(loadable: Loadable) { typeof req.resolve === 'function' ? req.resolve(filename) : filename, fileExports ); - } catch (error) { + } catch (error: any) { const errorString = error.message && error.stack ? `${error.message}\n ${error.stack}` : error.toString(); logger.error(`Unexpected error while loading ${filename}: ${errorString}`); @@ -92,7 +92,12 @@ export function executeLoadableForChanges(loadable: Loadable, m?: NodeModule) { const removed = new Map(); Array.from(lastExportsMap.keys()) .filter((fileName) => !exportsMap.has(fileName)) - .forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName))); + .forEach((fileName) => { + const value = lastExportsMap.get(fileName); + if (value) { + removed.set(fileName, value); + } + }); // Save the value for the dispose() call above lastExportsMap = exportsMap; diff --git a/code/lib/preview-api/src/modules/core-client/index.ts b/code/lib/preview-api/src/modules/core-client/index.ts new file mode 100644 index 00000000000..72d57e5f9d7 --- /dev/null +++ b/code/lib/preview-api/src/modules/core-client/index.ts @@ -0,0 +1,5 @@ +import { ClientApi } from '../../client-api'; +import { StoryStore } from '../../store'; +import { start } from './start'; + +export { start, ClientApi, StoryStore }; diff --git a/code/lib/core-client/src/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts similarity index 96% rename from code/lib/core-client/src/start.test.ts rename to code/lib/preview-api/src/modules/core-client/start.test.ts index c09ce001b59..2f34b348a7f 100644 --- a/code/lib/core-client/src/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -1,9 +1,13 @@ +/** + * @jest-environment jsdom + */ + /* global window */ import { STORY_RENDERED, STORY_UNCHANGED, SET_INDEX } from '@storybook/core-events'; import type { Store_ModuleExports, Path, Loadable } from '@storybook/types'; -import { setGlobalRender } from '@storybook/client-api'; import global from 'global'; +import { setGlobalRender } from '../../client-api'; import { waitForRender, waitForEvents, @@ -35,8 +39,8 @@ jest.mock('@storybook/channel-postmessage', () => ({ createChannel: () => mockCh jest.mock('react-dom'); // for the auto-title test -jest.mock('@storybook/store', () => { - const actualStore = jest.requireActual('@storybook/store'); +jest.mock('../../store', () => { + const actualStore = jest.requireActual('../../store'); return { ...actualStore, userOrAutoTitle: (importPath: Path, specifier: any, userTitle?: string) => @@ -44,8 +48,8 @@ jest.mock('@storybook/store', () => { }; }); -jest.mock('@storybook/preview-web', () => { - const actualPreviewWeb = jest.requireActual('@storybook/preview-web'); +jest.mock('../../preview-web', () => { + const actualPreviewWeb = jest.requireActual('../../preview-web'); class OverloadPreviewWeb extends actualPreviewWeb.PreviewWeb { constructor() { @@ -121,7 +125,7 @@ describe('start', () => { await waitForRender(); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -276,9 +280,7 @@ describe('start', () => { await waitForRender(); expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default'); - const storiesOfData = mockChannel.emit.mock.calls.find( - (call: any[]) => call[0] === SET_INDEX - )[1]; + const storiesOfData = mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]; expect(Object.values(storiesOfData.entries).map((s: any) => s.parameters.fileName)).toEqual([ 'file1', 'file1-2', @@ -409,7 +411,7 @@ describe('start', () => { .add('new', jest.fn()); await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -480,7 +482,7 @@ describe('start', () => { }); await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -532,7 +534,7 @@ describe('start', () => { disposeCallback(); await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -583,7 +585,7 @@ describe('start', () => { configure('test', () => [componentCExports]); await waitForRender(); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -704,7 +706,7 @@ describe('start', () => { configure('test', () => [{ ...componentCExports, StoryThree: jest.fn() }], module as any); await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -795,7 +797,7 @@ describe('start', () => { ); await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -867,7 +869,7 @@ describe('start', () => { configure('test', () => [componentCExports], module as any); await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -967,7 +969,7 @@ describe('start', () => { ); await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -1014,7 +1016,7 @@ describe('start', () => { }); await waitForRender(); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -1157,7 +1159,7 @@ describe('start', () => { }); await waitForRender(); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { @@ -1322,9 +1324,7 @@ describe('start', () => { }); await waitForRender(); - const setIndexData = mockChannel.emit.mock.calls.find( - (call: [string, any]) => call[0] === SET_INDEX - )[1]; + const setIndexData = mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]; expect(Object.keys(setIndexData.entries)).toMatchInlineSnapshot(` Array [ "component-a--docs", @@ -1355,7 +1355,7 @@ describe('start', () => { configure('test', () => [componentDExports]); await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) + expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) .toMatchInlineSnapshot(` Object { "entries": Object { diff --git a/code/lib/core-client/src/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts similarity index 97% rename from code/lib/core-client/src/start.ts rename to code/lib/preview-api/src/modules/core-client/start.ts index 9c7d69bb5cb..5a6c12814b7 100644 --- a/code/lib/core-client/src/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -1,11 +1,11 @@ /* eslint-disable @typescript-eslint/naming-convention */ import global from 'global'; -import { ClientApi } from '@storybook/client-api'; -import { PreviewWeb } from '@storybook/preview-web'; import type { Renderer, ArgsStoryFn, Loadable, Path, ProjectAnnotations } from '@storybook/types'; import { createChannel } from '@storybook/channel-postmessage'; import { addons } from '@storybook/addons'; import { FORCE_RE_RENDER } from '@storybook/core-events'; +import { PreviewWeb } from '../../preview-web'; +import { ClientApi } from '../../client-api'; import { executeLoadableForChanges } from './executeLoadable'; diff --git a/code/lib/core-client/src/typings.d.ts b/code/lib/preview-api/src/modules/core-client/typings.d.ts similarity index 100% rename from code/lib/core-client/src/typings.d.ts rename to code/lib/preview-api/src/modules/core-client/typings.d.ts diff --git a/code/lib/preview-web/src/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx similarity index 99% rename from code/lib/preview-web/src/Preview.tsx rename to code/lib/preview-api/src/modules/preview-web/Preview.tsx index 75e0b564a64..a233afdafce 100644 --- a/code/lib/preview-web/src/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -27,10 +27,10 @@ import type { Store_StoryIndex, ProjectAnnotations, StoryId, + StoryRenderOptions, } from '@storybook/types'; -import { StoryStore } from '@storybook/store'; +import { StoryStore } from '../../store'; -import type { StoryRenderOptions } from './render/StoryRender'; import { StoryRender } from './render/StoryRender'; import type { TemplateDocsRender } from './render/TemplateDocsRender'; import type { StandaloneDocsRender } from './render/StandaloneDocsRender'; diff --git a/code/lib/preview-web/src/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts similarity index 97% rename from code/lib/preview-web/src/PreviewWeb.integration.test.ts rename to code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index 43eb31038ff..ae4dc52f54a 100644 --- a/code/lib/preview-web/src/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -1,3 +1,7 @@ +/** + * @jest-environment jsdom + */ + import React from 'react'; import global from 'global'; import type { Store_RenderContext } from '@storybook/types'; @@ -75,7 +79,6 @@ describe('PreviewWeb', () => { ({ storyFn }: Store_RenderContext) => storyFn() ); document.location.search = '?id=component-one--a'; - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRender(); @@ -99,7 +102,6 @@ describe('PreviewWeb', () => { React.createElement('div', {}, 'INSIDE') ); - // @ts-expect-error (not strict) await preview.initialize({ importFn, getProjectAnnotations }); await waitForRender(); @@ -130,7 +132,6 @@ describe('PreviewWeb', () => { document.location.search = '?id=component-one--a'; const preview = new PreviewWeb(); - // @ts-expect-error (not strict) await preview.initialize({ importFn, getProjectAnnotations }); await waitForRender(); diff --git a/code/lib/preview-web/src/PreviewWeb.mockdata.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts similarity index 96% rename from code/lib/preview-web/src/PreviewWeb.mockdata.ts rename to code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts index 1532c227871..2367e6d99de 100644 --- a/code/lib/preview-web/src/PreviewWeb.mockdata.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts @@ -10,7 +10,11 @@ import { STORY_THREW_EXCEPTION, } from '@storybook/core-events'; -import type { Store_StoryIndex, TeardownRenderToCanvas } from '@storybook/types'; +import type { + Store_ModuleImportFn, + Store_StoryIndex, + TeardownRenderToCanvas, +} from '@storybook/types'; import type { RenderPhase } from './render/StoryRender'; export const componentOneExports = { @@ -44,7 +48,7 @@ export const extraComponentOneExports = { }, e: {}, }; -export const importFn = jest.fn( +export const importFn: Store_ModuleImportFn = jest.fn( async (path: string) => ({ './src/ComponentOne.stories.js': componentOneExports, @@ -52,7 +56,7 @@ export const importFn = jest.fn( './src/Introduction.mdx': standaloneDocsExports, './src/ExtraComponentOne.stories.js': extraComponentOneExports, }[path]) -); +) as any as Store_ModuleImportFn; export const docsRenderer = { render: jest.fn().mockImplementation((context, parameters, element, cb) => cb()), diff --git a/code/lib/preview-web/src/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts similarity index 98% rename from code/lib/preview-web/src/PreviewWeb.test.ts rename to code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index cf65a9db5e1..46b651379fa 100644 --- a/code/lib/preview-web/src/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -1,4 +1,7 @@ -/// ; +/** + * @jest-environment jsdom + */ + import { jest, jest as mockJest, it, describe, beforeEach, afterEach, expect } from '@jest/globals'; import global from 'global'; import merge from 'lodash/merge'; @@ -29,12 +32,7 @@ import { } from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; import { addons, mockChannel as createMockChannel } from '@storybook/addons'; -import type { - DecoratorFunction, - Renderer, - Store_ModuleImportFn, - ProjectAnnotations, -} from '@storybook/types'; +import type { Renderer, Store_ModuleImportFn, ProjectAnnotations } from '@storybook/types'; import { PreviewWeb } from './PreviewWeb'; import { @@ -97,15 +95,15 @@ const createGate = (): [Promise, (_?: any) => void] => { // SET_CURRENT_STORY does some stuff in promises, then waits for // a timer, so we need to first setImmediate (to get past the resolution), then run the timers -// Probably jest modern timers do this but they aren't working for some bizzarre reason. +// Probably jest modern timers do this but they aren't working for some bizarre reason. async function waitForSetCurrentStory() { + // @ts-expect-error (Argument of type '{ doNotFake: string[]; }' is not assignable to parameter of type '"modern" | "legacy" | undefined'. ts(2345))) jest.useFakeTimers({ doNotFake: ['setTimeout'] }); await new Promise((r) => setTimeout(r, 0)); jest.runAllTimers(); } async function createAndRenderPreview({ - // @ts-expect-error (not strict) importFn: inputImportFn = importFn, getProjectAnnotations: inputGetProjectAnnotations = getProjectAnnotations, }: { @@ -140,7 +138,9 @@ beforeEach(() => { addons.setServerChannel(createMockChannel()); mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' }; + // @ts-expect-error (Property 'mocked' does not exist on type 'Jest'. Did you mean 'mock'? ts(2551)) jest.mocked(WebView.prototype).prepareForDocs.mockReturnValue('docs-element' as any); + // @ts-expect-error (Property 'mocked' does not exist on type 'Jest'. Did you mean 'mock'? ts(2551)) jest.mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any); }); @@ -151,7 +151,6 @@ describe('PreviewWeb', () => { const preview = new PreviewWeb(); await expect( preview.initialize({ - // @ts-expect-error (not strict) importFn, getProjectAnnotations: () => { throw err; @@ -168,7 +167,6 @@ describe('PreviewWeb', () => { mockFetchResult = { status: 500, text: async () => err.toString() }; const preview = new PreviewWeb(); - // @ts-expect-error (not strict) await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow( 'sort error' ); @@ -196,7 +194,6 @@ describe('PreviewWeb', () => { it('SET_GLOBALS sets globals and types even when undefined', async () => { await createAndRenderPreview({ - // @ts-expect-error (not strict) getProjectAnnotations: () => ({ renderToCanvas: jest.fn() }), }); @@ -240,7 +237,6 @@ describe('PreviewWeb', () => { it('allows async getProjectAnnotations', async () => { const preview = new PreviewWeb(); await preview.initialize({ - // @ts-expect-error (not strict) importFn, getProjectAnnotations: async () => { return getProjectAnnotations(); @@ -523,7 +519,6 @@ describe('PreviewWeb', () => { renderToCanvas: undefined, }); const preview = new PreviewWeb(); - // @ts-expect-error (not strict) await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow(); expect(preview.view.showErrorDisplay).toHaveBeenCalled(); @@ -637,7 +632,6 @@ describe('PreviewWeb', () => { }); const preview = new PreviewWeb(); - // @ts-expect-error (not strict) await preview.initialize({ importFn, getProjectAnnotations }); await waitForRender(); @@ -903,7 +897,6 @@ describe('PreviewWeb', () => { document.location.search = '?id=component-one--a'; componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate); - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('loading'); @@ -965,7 +958,6 @@ describe('PreviewWeb', () => { document.location.search = '?id=component-one--a'; projectAnnotations.renderToCanvas.mockImplementation(async () => gate); - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('rendering'); @@ -1045,7 +1037,6 @@ describe('PreviewWeb', () => { }); document.location.search = '?id=component-one--a'; - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('playing'); @@ -1113,8 +1104,7 @@ describe('PreviewWeb', () => { mockChannel.emit.mockClear(); const story = await preview.storyStore.loadStory({ storyId: 'component-one--a' }); - // @ts-expect-error (not strict) - preview.renderStoryToElement(story, 'story-element' as any); + preview.renderStoryToElement(story, 'story-element' as any, {}); await waitForRender(); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( @@ -1153,6 +1143,7 @@ describe('PreviewWeb', () => { const preview = await createAndRenderPreview(); await waitForRender(); + // @ts-expect-error (jest mock) importFn.mockClear(); await preview.onPreloadStories({ ids: ['component-two--c'] }); expect(importFn).toHaveBeenCalledWith('./src/ComponentTwo.stories.js'); @@ -1163,6 +1154,7 @@ describe('PreviewWeb', () => { const preview = await createAndRenderPreview(); await waitForRender(); + // @ts-expect-error (jest mock) importFn.mockClear(); await preview.onPreloadStories({ ids: ['component-one--docs'] }); expect(importFn).toHaveBeenCalledWith('./src/ComponentOne.stories.js'); @@ -1173,6 +1165,7 @@ describe('PreviewWeb', () => { const preview = await createAndRenderPreview(); await waitForRender(); + // @ts-expect-error (jest mock) importFn.mockClear(); await preview.onPreloadStories({ ids: ['introduction--docs'] }); expect(importFn).toHaveBeenCalledWith('./src/Introduction.mdx'); @@ -1182,6 +1175,7 @@ describe('PreviewWeb', () => { const preview = await createAndRenderPreview(); await waitForRender(); + // @ts-expect-error (jest mock) importFn.mockClear(); await preview.onPreloadStories({ ids: ['introduction--docs'] }); expect(importFn).toHaveBeenCalledWith('./src/ComponentTwo.stories.js'); @@ -1431,7 +1425,6 @@ describe('PreviewWeb', () => { document.location.search = '?id=component-one--a'; projectAnnotations.renderToCanvas.mockImplementation(async () => gate); - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('rendering'); @@ -1528,7 +1521,6 @@ describe('PreviewWeb', () => { it('still renders the selected story, once ready', async () => { document.location.search = ''; // We intentionally are *not* awaiting here - // @ts-expect-error (not strict) new PreviewWeb().initialize({ importFn, getProjectAnnotations }); emitter.emit(SET_CURRENT_STORY, { @@ -1621,21 +1613,24 @@ describe('PreviewWeb', () => { const [gate, openGate] = createGate(); const [importedGate, openImportedGate] = createGate(); importFn + // @ts-expect-error (jest mock) .mockImplementationOnce(async (...args) => { await gate; + // @ts-expect-error (jest mock) return importFn(...args); }) + // @ts-expect-error (jest mock) .mockImplementationOnce(async (...args) => { // The second time we `import()` we open the "imported" gate openImportedGate(); await gate; + // @ts-expect-error (jest mock) return importFn(...args); }); const preview = new PreviewWeb(); // We can't wait for the initialize function, as it waits for `renderSelection()` // which prepares, but it does emit `CURRENT_STORY_WAS_SET` right before that - // @ts-expect-error (not strict) preview.initialize({ importFn, getProjectAnnotations }); await waitForEvents([CURRENT_STORY_WAS_SET]); @@ -1667,21 +1662,24 @@ describe('PreviewWeb', () => { const [gate, openGate] = createGate(); const [importedGate, openImportedGate] = createGate(); importFn + // @ts-expect-error (jest mock) .mockImplementationOnce(async (...args) => { await gate; + // @ts-expect-error (jest mock) return importFn(...args); }) + // @ts-expect-error (jest mock) .mockImplementationOnce(async (...args) => { // The second time we `import()` we open the "imported" gate openImportedGate(); await gate; + // @ts-expect-error (jest mock) return importFn(...args); }); const preview = new PreviewWeb(); // We can't wait for the initialize function, as it waits for `renderSelection()` // which prepares, but it does emit `CURRENT_STORY_WAS_SET` right before that - // @ts-expect-error (not strict) preview.initialize({ importFn, getProjectAnnotations }); await waitForEvents([CURRENT_STORY_WAS_SET]); @@ -1712,21 +1710,24 @@ describe('PreviewWeb', () => { const [gate, openGate] = createGate(); const [importedGate, openImportedGate] = createGate(); importFn + // @ts-expect-error (jest mock) .mockImplementationOnce(async (...args) => { await gate; + // @ts-expect-error (jest mock) return importFn(...args); }) + // @ts-expect-error (jest mock) .mockImplementationOnce(async (...args) => { // The second time we `import()` we open the "imported" gate openImportedGate(); await gate; + // @ts-expect-error (jest mock) return importFn(...args); }); const preview = new PreviewWeb(); // We can't wait for the initialize function, as it waits for `renderSelection()` // which prepares, but it does emit `CURRENT_STORY_WAS_SET` right before that - // @ts-expect-error (not strict) preview.initialize({ importFn, getProjectAnnotations }); await waitForEvents([CURRENT_STORY_WAS_SET]); @@ -2047,7 +2048,6 @@ describe('PreviewWeb', () => { componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate); document.location.search = '?id=component-one--a'; - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('loading'); @@ -2081,7 +2081,6 @@ describe('PreviewWeb', () => { document.location.search = '?id=component-one--a'; projectAnnotations.renderToCanvas.mockImplementation(async () => gate); - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('rendering'); @@ -2116,7 +2115,6 @@ describe('PreviewWeb', () => { componentOneExports.a.play.mockImplementationOnce(async () => gate); document.location.search = '?id=component-one--a'; - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('playing'); @@ -2170,7 +2168,6 @@ describe('PreviewWeb', () => { componentOneExports.a.play.mockImplementationOnce(async () => gate); document.location.search = '?id=component-one--a'; - // @ts-expect-error (not strict) await new PreviewWeb().initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('playing'); @@ -2574,7 +2571,6 @@ describe('PreviewWeb', () => { mockFetchResult = { status: 500, text: async () => err.toString() }; const preview = new PreviewWeb(); - // @ts-expect-error (not strict) await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow( 'sort error' ); @@ -2595,7 +2591,6 @@ describe('PreviewWeb', () => { mockFetchResult = { status: 500, text: async () => err.toString() }; const preview = new PreviewWeb(); - // @ts-expect-error (not strict) await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow( 'sort error' ); @@ -3099,7 +3094,6 @@ describe('PreviewWeb', () => { await waitForEvents([STORY_MISSING]); mockChannel.emit.mockClear(); - // @ts-expect-error (not strict) preview.onStoriesChanged({ importFn, storyIndex }); await waitForRender(); expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a'); @@ -3119,7 +3113,6 @@ describe('PreviewWeb', () => { mockChannel.emit.mockClear(); docsRenderer.render.mockClear(); - // @ts-expect-error (not strict) preview.onStoriesChanged({ importFn: newImportFn }); await waitForRender(); @@ -3139,7 +3132,6 @@ describe('PreviewWeb', () => { const preview = await createAndRenderPreview(); mockChannel.emit.mockClear(); - // @ts-expect-error (not strict) preview.onStoriesChanged({ importFn: newImportFn }); await waitForRender(); @@ -3157,7 +3149,6 @@ describe('PreviewWeb', () => { const preview = new PreviewWeb(); await expect( preview.initialize({ - // @ts-expect-error (not strict) importFn, getProjectAnnotations: () => { throw err; @@ -3178,7 +3169,6 @@ describe('PreviewWeb', () => { const preview = new PreviewWeb(); await expect( preview.initialize({ - // @ts-expect-error (not strict) importFn, getProjectAnnotations: () => { throw err; @@ -3221,7 +3211,7 @@ describe('PreviewWeb', () => { expect(mockChannel.emit).toHaveBeenCalledWith(CONFIG_ERROR, err); }); - const newGlobalDecorator = jest.fn((s) => s()); + const newGlobalDecorator = jest.fn((s: any) => s()); const newGetProjectAnnotations = () => { return { ...projectAnnotations, @@ -3350,7 +3340,6 @@ describe('PreviewWeb', () => { const [gate, openGate] = createGate(); componentOneExports.a.play.mockImplementationOnce(async () => gate); const preview = new PreviewWeb(); - // @ts-expect-error (not strict) await preview.initialize({ importFn, getProjectAnnotations }); await waitForRenderPhase('playing'); @@ -3406,7 +3395,6 @@ describe('PreviewWeb', () => { const preview = new PreviewWeb(); await expect( preview.initialize({ - // @ts-expect-error (not strict) importFn, getProjectAnnotations: () => { throw err; @@ -3422,7 +3410,6 @@ describe('PreviewWeb', () => { mockFetchResult = { status: 500, text: async () => err.toString() }; const preview = new PreviewWeb(); - // @ts-expect-error (not strict) await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow( 'sort error' ); @@ -3433,13 +3420,11 @@ describe('PreviewWeb', () => { it('waits for stories to be cached', async () => { const [gate, openGate] = createGate(); - // @ts-expect-error (not strict) - const gatedImportFn = async (path) => { + const gatedImportFn = async (path: string) => { await gate; return importFn(path); }; - // @ts-expect-error (not strict) const preview = await createAndRenderPreview({ importFn: gatedImportFn }); let extracted = false; diff --git a/code/lib/preview-web/src/PreviewWeb.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx similarity index 100% rename from code/lib/preview-web/src/PreviewWeb.tsx rename to code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx diff --git a/code/lib/preview-web/src/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx similarity index 100% rename from code/lib/preview-web/src/PreviewWithSelection.tsx rename to code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx diff --git a/code/lib/preview-web/src/SelectionStore.ts b/code/lib/preview-api/src/modules/preview-web/SelectionStore.ts similarity index 100% rename from code/lib/preview-web/src/SelectionStore.ts rename to code/lib/preview-api/src/modules/preview-web/SelectionStore.ts diff --git a/code/lib/preview-web/src/UrlStore.test.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts similarity index 96% rename from code/lib/preview-web/src/UrlStore.test.ts rename to code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts index c3a3af6f78d..9abba8f7c0e 100644 --- a/code/lib/preview-web/src/UrlStore.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts @@ -20,8 +20,7 @@ describe('UrlStore', () => { expect(pathToId('/story/story--id')).toEqual('story--id'); }); it('should error on invalid ids', () => { - [null, '', '/whatever/story/story--id'].forEach((path) => { - // @ts-expect-error (invalid data) + [null, '', '/whatever/story/story--id'].forEach((path: any) => { expect(() => pathToId(path)).toThrow(/Invalid/); }); }); diff --git a/code/lib/preview-web/src/UrlStore.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts similarity index 100% rename from code/lib/preview-web/src/UrlStore.ts rename to code/lib/preview-api/src/modules/preview-web/UrlStore.ts diff --git a/code/lib/preview-web/src/View.ts b/code/lib/preview-api/src/modules/preview-web/View.ts similarity index 100% rename from code/lib/preview-web/src/View.ts rename to code/lib/preview-api/src/modules/preview-web/View.ts diff --git a/code/lib/preview-web/src/WebView.ts b/code/lib/preview-api/src/modules/preview-web/WebView.ts similarity index 98% rename from code/lib/preview-web/src/WebView.ts rename to code/lib/preview-api/src/modules/preview-web/WebView.ts index 56a43ee41e1..dcf35d7ac14 100644 --- a/code/lib/preview-web/src/WebView.ts +++ b/code/lib/preview-api/src/modules/preview-web/WebView.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import global from 'global'; import { logger } from '@storybook/client-logger'; import AnsiToHtml from 'ansi-to-html'; diff --git a/code/lib/preview-web/src/docs-context/DocsContext.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts similarity index 98% rename from code/lib/preview-web/src/docs-context/DocsContext.ts rename to code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts index 063d7e890a1..c96c49a731b 100644 --- a/code/lib/preview-web/src/docs-context/DocsContext.ts +++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts @@ -8,8 +8,8 @@ import type { StoryId, StoryName, } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; import type { Channel } from '@storybook/channels'; +import type { StoryStore } from '../../store'; import type { DocsContextProps } from './DocsContextProps'; diff --git a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContextProps.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContextProps.ts new file mode 100644 index 00000000000..c73df45e223 --- /dev/null +++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContextProps.ts @@ -0,0 +1 @@ +export type { DocsContextProps } from '@storybook/types'; diff --git a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsRenderFunction.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsRenderFunction.ts new file mode 100644 index 00000000000..d7533154a2c --- /dev/null +++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsRenderFunction.ts @@ -0,0 +1 @@ +export type { DocsRenderFunction } from '@storybook/types'; diff --git a/code/lib/preview-web/src/index.ts b/code/lib/preview-api/src/modules/preview-web/index.ts similarity index 91% rename from code/lib/preview-web/src/index.ts rename to code/lib/preview-api/src/modules/preview-web/index.ts index 4503ffb14ca..0fb2f4da2a6 100644 --- a/code/lib/preview-web/src/index.ts +++ b/code/lib/preview-api/src/modules/preview-web/index.ts @@ -1,10 +1,10 @@ // FIXME: breaks builder-vite, remove this in 7.0 -export { composeConfigs } from '@storybook/store'; +export { composeConfigs } from '../../store'; export type { ProjectAnnotations as WebProjectAnnotations } from '@storybook/types'; export { Preview } from './Preview'; -export { PreviewWithSelection } from './PreviewWithSelection'; export { PreviewWeb } from './PreviewWeb'; +export { PreviewWithSelection } from './PreviewWithSelection'; export { simulatePageLoad, simulateDOMContentLoaded } from './simulate-pageload'; diff --git a/code/lib/preview-web/src/parseArgsParam.test.ts b/code/lib/preview-api/src/modules/preview-web/parseArgsParam.test.ts similarity index 100% rename from code/lib/preview-web/src/parseArgsParam.test.ts rename to code/lib/preview-api/src/modules/preview-web/parseArgsParam.test.ts diff --git a/code/lib/preview-web/src/parseArgsParam.ts b/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts similarity index 100% rename from code/lib/preview-web/src/parseArgsParam.ts rename to code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts diff --git a/code/lib/preview-web/src/render/Render.ts b/code/lib/preview-api/src/modules/preview-web/render/Render.ts similarity index 88% rename from code/lib/preview-web/src/render/Render.ts rename to code/lib/preview-api/src/modules/preview-web/render/Render.ts index 737a058497c..9ed82484900 100644 --- a/code/lib/preview-web/src/render/Render.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/Render.ts @@ -1,5 +1,4 @@ -import type { StoryId, Renderer } from '@storybook/types'; -import type { StoryRenderOptions } from './StoryRender'; +import type { StoryId, Renderer, StoryRenderOptions } from '@storybook/types'; export type RenderType = 'story' | 'docs'; diff --git a/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StandaloneDocsRender.test.ts similarity index 96% rename from code/lib/preview-web/src/render/StandaloneDocsRender.test.ts rename to code/lib/preview-api/src/modules/preview-web/render/StandaloneDocsRender.test.ts index 85ca36938f7..56dc0f1eb6e 100644 --- a/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StandaloneDocsRender.test.ts @@ -1,7 +1,7 @@ import { jest, describe, it, expect } from '@jest/globals'; import { Channel } from '@storybook/channels'; import type { Renderer, Addon_StandaloneDocsIndexEntry } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; +import type { StoryStore } from '../../store'; import { PREPARE_ABORTED } from './Render'; import { StandaloneDocsRender } from './StandaloneDocsRender'; diff --git a/code/lib/preview-web/src/render/StandaloneDocsRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StandaloneDocsRender.ts similarity index 98% rename from code/lib/preview-web/src/render/StandaloneDocsRender.ts rename to code/lib/preview-api/src/modules/preview-web/render/StandaloneDocsRender.ts index c88b36f7997..c279f022c3a 100644 --- a/code/lib/preview-web/src/render/StandaloneDocsRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StandaloneDocsRender.ts @@ -5,9 +5,9 @@ import type { Store_ModuleExports, StoryId, } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; import type { Channel } from '@storybook/channels'; import { DOCS_RENDERED } from '@storybook/core-events'; +import type { StoryStore } from '../../store'; import type { Render, RenderType } from './Render'; import { PREPARE_ABORTED } from './Render'; diff --git a/code/lib/preview-web/src/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts similarity index 96% rename from code/lib/preview-web/src/render/StoryRender.test.ts rename to code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 20cbb680059..589c6d805e3 100644 --- a/code/lib/preview-web/src/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -1,7 +1,7 @@ import { jest, describe, it, expect } from '@jest/globals'; import { Channel } from '@storybook/channels'; import type { Renderer, Addon_StoryIndexEntry } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; +import type { StoryStore } from '../../store'; import { PREPARE_ABORTED } from './Render'; import { StoryRender } from './StoryRender'; @@ -36,7 +36,6 @@ describe('StoryRender', () => { const render = new StoryRender( new Channel(), mockStore as unknown as StoryStore, - // @ts-expect-error jest mock jest.fn(), {} as any, entry.id, diff --git a/code/lib/preview-web/src/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts similarity index 98% rename from code/lib/preview-web/src/render/StoryRender.ts rename to code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index 845a1ccb8fc..980f01f38a1 100644 --- a/code/lib/preview-web/src/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -7,9 +7,9 @@ import type { StoryContext, StoryContextForLoaders, StoryId, + StoryRenderOptions, ViewMode, } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; import type { Channel } from '@storybook/channels'; import { logger } from '@storybook/client-logger'; import { @@ -17,6 +17,7 @@ import { STORY_RENDERED, PLAY_FUNCTION_THREW_EXCEPTION, } from '@storybook/core-events'; +import type { StoryStore } from '../../store'; import type { Render, RenderType } from './Render'; import { PREPARE_ABORTED } from './Render'; @@ -46,10 +47,6 @@ export type RenderContextCallbacks = Pick< 'showMain' | 'showError' | 'showException' >; -export type StoryRenderOptions = { - autoplay?: boolean; -}; - export class StoryRender implements Render { public type: RenderType = 'story'; diff --git a/code/lib/preview-web/src/render/TemplateDocsRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/TemplateDocsRender.test.ts similarity index 96% rename from code/lib/preview-web/src/render/TemplateDocsRender.test.ts rename to code/lib/preview-api/src/modules/preview-web/render/TemplateDocsRender.test.ts index 22e6199e43b..6e458d73f92 100644 --- a/code/lib/preview-web/src/render/TemplateDocsRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/TemplateDocsRender.test.ts @@ -1,7 +1,7 @@ import { jest, describe, it, expect } from '@jest/globals'; import { Channel } from '@storybook/channels'; import type { Renderer, Addon_TemplateDocsIndexEntry } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; +import type { StoryStore } from '../../store'; import { PREPARE_ABORTED } from './Render'; import { TemplateDocsRender } from './TemplateDocsRender'; diff --git a/code/lib/preview-web/src/render/TemplateDocsRender.ts b/code/lib/preview-api/src/modules/preview-web/render/TemplateDocsRender.ts similarity index 98% rename from code/lib/preview-web/src/render/TemplateDocsRender.ts rename to code/lib/preview-api/src/modules/preview-web/render/TemplateDocsRender.ts index 58c996df887..1d86a9e2246 100644 --- a/code/lib/preview-web/src/render/TemplateDocsRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/TemplateDocsRender.ts @@ -5,9 +5,9 @@ import type { Store_Story, StoryId, } from '@storybook/types'; -import type { StoryStore } from '@storybook/store'; import type { Channel } from '@storybook/channels'; import { DOCS_RENDERED } from '@storybook/core-events'; +import type { StoryStore } from '../../../store'; import type { Render, RenderType } from './Render'; import { PREPARE_ABORTED } from './Render'; diff --git a/code/lib/preview-web/src/simulate-pageload.test.ts b/code/lib/preview-api/src/modules/preview-web/simulate-pageload.test.ts similarity index 97% rename from code/lib/preview-web/src/simulate-pageload.test.ts rename to code/lib/preview-api/src/modules/preview-web/simulate-pageload.test.ts index 9548dbbf262..12076059cee 100644 --- a/code/lib/preview-web/src/simulate-pageload.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/simulate-pageload.test.ts @@ -1,3 +1,7 @@ +/** + * @jest-environment jsdom + */ + import global from 'global'; import { simulatePageLoad } from './simulate-pageload'; diff --git a/code/lib/preview-web/src/simulate-pageload.ts b/code/lib/preview-api/src/modules/preview-web/simulate-pageload.ts similarity index 100% rename from code/lib/preview-web/src/simulate-pageload.ts rename to code/lib/preview-api/src/modules/preview-web/simulate-pageload.ts diff --git a/code/lib/preview-web/src/typings.d.ts b/code/lib/preview-api/src/modules/preview-web/typings.d.ts similarity index 100% rename from code/lib/preview-web/src/typings.d.ts rename to code/lib/preview-api/src/modules/preview-web/typings.d.ts diff --git a/code/lib/store/src/ArgsStore.test.ts b/code/lib/preview-api/src/modules/store/ArgsStore.test.ts similarity index 100% rename from code/lib/store/src/ArgsStore.test.ts rename to code/lib/preview-api/src/modules/store/ArgsStore.test.ts diff --git a/code/lib/store/src/ArgsStore.ts b/code/lib/preview-api/src/modules/store/ArgsStore.ts similarity index 100% rename from code/lib/store/src/ArgsStore.ts rename to code/lib/preview-api/src/modules/store/ArgsStore.ts diff --git a/code/lib/store/src/GlobalsStore.test.ts b/code/lib/preview-api/src/modules/store/GlobalsStore.test.ts similarity index 100% rename from code/lib/store/src/GlobalsStore.test.ts rename to code/lib/preview-api/src/modules/store/GlobalsStore.test.ts diff --git a/code/lib/store/src/GlobalsStore.ts b/code/lib/preview-api/src/modules/store/GlobalsStore.ts similarity index 100% rename from code/lib/store/src/GlobalsStore.ts rename to code/lib/preview-api/src/modules/store/GlobalsStore.ts diff --git a/code/lib/store/src/StoryIndexStore.test.ts b/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts similarity index 100% rename from code/lib/store/src/StoryIndexStore.test.ts rename to code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts diff --git a/code/lib/store/src/StoryIndexStore.ts b/code/lib/preview-api/src/modules/store/StoryIndexStore.ts similarity index 100% rename from code/lib/store/src/StoryIndexStore.ts rename to code/lib/preview-api/src/modules/store/StoryIndexStore.ts diff --git a/code/lib/store/src/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts similarity index 100% rename from code/lib/store/src/StoryStore.test.ts rename to code/lib/preview-api/src/modules/store/StoryStore.test.ts diff --git a/code/lib/store/src/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts similarity index 100% rename from code/lib/store/src/StoryStore.ts rename to code/lib/preview-api/src/modules/store/StoryStore.ts diff --git a/code/lib/store/src/args.test.ts b/code/lib/preview-api/src/modules/store/args.test.ts similarity index 100% rename from code/lib/store/src/args.test.ts rename to code/lib/preview-api/src/modules/store/args.test.ts diff --git a/code/lib/store/src/args.ts b/code/lib/preview-api/src/modules/store/args.ts similarity index 100% rename from code/lib/store/src/args.ts rename to code/lib/preview-api/src/modules/store/args.ts diff --git a/code/lib/store/src/autoTitle.test.ts b/code/lib/preview-api/src/modules/store/autoTitle.test.ts similarity index 100% rename from code/lib/store/src/autoTitle.test.ts rename to code/lib/preview-api/src/modules/store/autoTitle.test.ts diff --git a/code/lib/store/src/autoTitle.ts b/code/lib/preview-api/src/modules/store/autoTitle.ts similarity index 100% rename from code/lib/store/src/autoTitle.ts rename to code/lib/preview-api/src/modules/store/autoTitle.ts diff --git a/code/lib/store/src/csf/composeConfigs.test.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts similarity index 100% rename from code/lib/store/src/csf/composeConfigs.test.ts rename to code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts diff --git a/code/lib/store/src/csf/composeConfigs.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts similarity index 100% rename from code/lib/store/src/csf/composeConfigs.ts rename to code/lib/preview-api/src/modules/store/csf/composeConfigs.ts diff --git a/code/lib/store/src/csf/getValuesFromArgTypes.ts b/code/lib/preview-api/src/modules/store/csf/getValuesFromArgTypes.ts similarity index 100% rename from code/lib/store/src/csf/getValuesFromArgTypes.ts rename to code/lib/preview-api/src/modules/store/csf/getValuesFromArgTypes.ts diff --git a/code/lib/store/src/csf/index.ts b/code/lib/preview-api/src/modules/store/csf/index.ts similarity index 100% rename from code/lib/store/src/csf/index.ts rename to code/lib/preview-api/src/modules/store/csf/index.ts diff --git a/code/lib/store/src/csf/normalizeComponentAnnotations.ts b/code/lib/preview-api/src/modules/store/csf/normalizeComponentAnnotations.ts similarity index 100% rename from code/lib/store/src/csf/normalizeComponentAnnotations.ts rename to code/lib/preview-api/src/modules/store/csf/normalizeComponentAnnotations.ts diff --git a/code/lib/store/src/csf/normalizeInputTypes.test.ts b/code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.test.ts similarity index 100% rename from code/lib/store/src/csf/normalizeInputTypes.test.ts rename to code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.test.ts diff --git a/code/lib/store/src/csf/normalizeInputTypes.ts b/code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.ts similarity index 100% rename from code/lib/store/src/csf/normalizeInputTypes.ts rename to code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.ts diff --git a/code/lib/store/src/csf/normalizeProjectAnnotations.ts b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts similarity index 100% rename from code/lib/store/src/csf/normalizeProjectAnnotations.ts rename to code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts diff --git a/code/lib/store/src/csf/normalizeStory.test.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts similarity index 100% rename from code/lib/store/src/csf/normalizeStory.test.ts rename to code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts diff --git a/code/lib/store/src/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts similarity index 100% rename from code/lib/store/src/csf/normalizeStory.ts rename to code/lib/preview-api/src/modules/store/csf/normalizeStory.ts diff --git a/code/lib/store/src/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts similarity index 100% rename from code/lib/store/src/csf/prepareStory.test.ts rename to code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts diff --git a/code/lib/store/src/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts similarity index 100% rename from code/lib/store/src/csf/prepareStory.ts rename to code/lib/preview-api/src/modules/store/csf/prepareStory.ts diff --git a/code/lib/store/src/csf/processCSFFile.test.ts b/code/lib/preview-api/src/modules/store/csf/processCSFFile.test.ts similarity index 100% rename from code/lib/store/src/csf/processCSFFile.test.ts rename to code/lib/preview-api/src/modules/store/csf/processCSFFile.test.ts diff --git a/code/lib/store/src/csf/processCSFFile.ts b/code/lib/preview-api/src/modules/store/csf/processCSFFile.ts similarity index 100% rename from code/lib/store/src/csf/processCSFFile.ts rename to code/lib/preview-api/src/modules/store/csf/processCSFFile.ts diff --git a/code/lib/store/src/csf/stepRunners.test.ts b/code/lib/preview-api/src/modules/store/csf/stepRunners.test.ts similarity index 100% rename from code/lib/store/src/csf/stepRunners.test.ts rename to code/lib/preview-api/src/modules/store/csf/stepRunners.test.ts diff --git a/code/lib/store/src/csf/stepRunners.ts b/code/lib/preview-api/src/modules/store/csf/stepRunners.ts similarity index 100% rename from code/lib/store/src/csf/stepRunners.ts rename to code/lib/preview-api/src/modules/store/csf/stepRunners.ts diff --git a/code/lib/store/src/csf/testing-utils/index.test.ts b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.test.ts similarity index 100% rename from code/lib/store/src/csf/testing-utils/index.test.ts rename to code/lib/preview-api/src/modules/store/csf/testing-utils/index.test.ts diff --git a/code/lib/store/src/csf/testing-utils/index.ts b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts similarity index 98% rename from code/lib/store/src/csf/testing-utils/index.ts rename to code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts index 4db39dba0c6..9097679f008 100644 --- a/code/lib/store/src/csf/testing-utils/index.ts +++ b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts @@ -1,4 +1,3 @@ -import type { AnnotatedStoryFn } from '@storybook/csf'; import { isExportStory } from '@storybook/csf'; import type { Renderer, diff --git a/code/lib/store/src/decorators.test.ts b/code/lib/preview-api/src/modules/store/decorators.test.ts similarity index 98% rename from code/lib/store/src/decorators.test.ts rename to code/lib/preview-api/src/modules/store/decorators.test.ts index 0fe27396fda..889b16fff8a 100644 --- a/code/lib/store/src/decorators.test.ts +++ b/code/lib/preview-api/src/modules/store/decorators.test.ts @@ -92,7 +92,7 @@ describe('client-api.decorators', () => { // the same story twice at the same time. it('does not interleave contexts if two decorated stories are call simultaneously', async () => { const contexts: StoryContext[] = []; - let resolve; + let resolve: (value?: unknown) => void = () => {}; const fence = new Promise((r) => { resolve = r; }); @@ -110,7 +110,6 @@ describe('client-api.decorators', () => { decoratedOne(makeContext({ value: 1 })); decoratedTwo(makeContext({ value: 2 })); - // @ts-expect-error (not defined) resolve(); await fence; diff --git a/code/lib/store/src/decorators.ts b/code/lib/preview-api/src/modules/store/decorators.ts similarity index 100% rename from code/lib/store/src/decorators.ts rename to code/lib/preview-api/src/modules/store/decorators.ts diff --git a/code/lib/store/src/filterArgTypes.ts b/code/lib/preview-api/src/modules/store/filterArgTypes.ts similarity index 100% rename from code/lib/store/src/filterArgTypes.ts rename to code/lib/preview-api/src/modules/store/filterArgTypes.ts diff --git a/code/lib/store/src/hooks.test.ts b/code/lib/preview-api/src/modules/store/hooks.test.ts similarity index 99% rename from code/lib/store/src/hooks.test.ts rename to code/lib/preview-api/src/modules/store/hooks.test.ts index b42e1f20555..069c4d3b381 100644 --- a/code/lib/store/src/hooks.test.ts +++ b/code/lib/preview-api/src/modules/store/hooks.test.ts @@ -31,7 +31,6 @@ jest.mock('@storybook/client-logger', () => ({ })); const SOME_EVENT = 'someEvent'; - let mockChannel: any; let hooks: any; let onSomeEvent: any; diff --git a/code/lib/store/src/hooks.ts b/code/lib/preview-api/src/modules/store/hooks.ts similarity index 100% rename from code/lib/store/src/hooks.ts rename to code/lib/preview-api/src/modules/store/hooks.ts diff --git a/code/lib/store/src/index.ts b/code/lib/preview-api/src/modules/store/index.ts similarity index 100% rename from code/lib/store/src/index.ts rename to code/lib/preview-api/src/modules/store/index.ts diff --git a/code/lib/store/src/inferArgTypes.test.ts b/code/lib/preview-api/src/modules/store/inferArgTypes.test.ts similarity index 100% rename from code/lib/store/src/inferArgTypes.test.ts rename to code/lib/preview-api/src/modules/store/inferArgTypes.test.ts diff --git a/code/lib/store/src/inferArgTypes.ts b/code/lib/preview-api/src/modules/store/inferArgTypes.ts similarity index 100% rename from code/lib/store/src/inferArgTypes.ts rename to code/lib/preview-api/src/modules/store/inferArgTypes.ts diff --git a/code/lib/store/src/inferControls.test.ts b/code/lib/preview-api/src/modules/store/inferControls.test.ts similarity index 100% rename from code/lib/store/src/inferControls.test.ts rename to code/lib/preview-api/src/modules/store/inferControls.test.ts diff --git a/code/lib/store/src/inferControls.ts b/code/lib/preview-api/src/modules/store/inferControls.ts similarity index 100% rename from code/lib/store/src/inferControls.ts rename to code/lib/preview-api/src/modules/store/inferControls.ts diff --git a/code/lib/store/src/parameters.test.ts b/code/lib/preview-api/src/modules/store/parameters.test.ts similarity index 100% rename from code/lib/store/src/parameters.test.ts rename to code/lib/preview-api/src/modules/store/parameters.test.ts diff --git a/code/lib/store/src/parameters.ts b/code/lib/preview-api/src/modules/store/parameters.ts similarity index 100% rename from code/lib/store/src/parameters.ts rename to code/lib/preview-api/src/modules/store/parameters.ts diff --git a/code/lib/store/src/sortStories.ts b/code/lib/preview-api/src/modules/store/sortStories.ts similarity index 100% rename from code/lib/store/src/sortStories.ts rename to code/lib/preview-api/src/modules/store/sortStories.ts diff --git a/code/lib/store/src/storySort.test.ts b/code/lib/preview-api/src/modules/store/storySort.test.ts similarity index 100% rename from code/lib/store/src/storySort.test.ts rename to code/lib/preview-api/src/modules/store/storySort.test.ts diff --git a/code/lib/store/src/storySort.ts b/code/lib/preview-api/src/modules/store/storySort.ts similarity index 100% rename from code/lib/store/src/storySort.ts rename to code/lib/preview-api/src/modules/store/storySort.ts diff --git a/code/lib/store/src/typings.d.ts b/code/lib/preview-api/src/modules/store/typings.d.ts similarity index 100% rename from code/lib/store/src/typings.d.ts rename to code/lib/preview-api/src/modules/store/typings.d.ts diff --git a/code/lib/preview-api/src/preview-web.ts b/code/lib/preview-api/src/preview-web.ts new file mode 100644 index 00000000000..1f0814fb7af --- /dev/null +++ b/code/lib/preview-api/src/preview-web.ts @@ -0,0 +1 @@ +export * from './modules/preview-web'; diff --git a/code/lib/preview-api/src/store.ts b/code/lib/preview-api/src/store.ts new file mode 100644 index 00000000000..33f273a9603 --- /dev/null +++ b/code/lib/preview-api/src/store.ts @@ -0,0 +1 @@ +export * from './modules/store'; diff --git a/code/lib/preview-api/tsconfig.json b/code/lib/preview-api/tsconfig.json new file mode 100644 index 00000000000..756dc08f473 --- /dev/null +++ b/code/lib/preview-api/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "strict": true, + "skipLibCheck": true + }, + "include": ["src/**/*"], + "exclude": [] +} diff --git a/code/lib/preview-web/README.md b/code/lib/preview-web/README.md index 5de7c8b4315..2220a03cb98 100644 --- a/code/lib/preview-web/README.md +++ b/code/lib/preview-web/README.md @@ -1,94 +1,3 @@ -# Preview (Web) +The contents of this package have moved to `@storybook/preview-api`. Please update your import. -This is the main API for the (web) version of the Storybook Preview. - -The preview's job is: - -1. Read and update the URL (via the URL Store) - -2. Listen to instructions on the channel and emit events as things occur. - -3. Render the current selection to the web view in either story or docs mode. - -## V7 Store vs Legacy (V6) - -The story store is designed to load stories 'on demand', and will operate in this fashion if the `storyStoreV7` feature is enabled. - -However, for back-compat reasons, in v6 mode, we need to load all stories, synchronously on bootup, emitting the `SET_STORIES` event. - -In V7 mode we do not emit that event, instead preferring the `STORY_PREPARED` event, with the data for the single story being rendered. - -## Initialization - -The preview is `initialized` in two ways. - -### V7 Mode: - -- `importFn` - is an async `import()` function - -- `getProjectAnnotations` - is a simple function that evaluations `preview.js` and addon config files and combines them. If it errors, the Preview will show the error. - -- No `getStoryIndex` function is passed, instead the preview creates a `StoryIndexClient` that pulls `stories.json` from node and watches the event stream for invalidation events. - -### V6 Mode - -- `importFn` - is a simulated `import()` function, that is synchronous, see `client-api` for details. -- `getProjectAnnotations` - also evaluates `preview.js` et al, but watches for calls to `setStories`, and passes them to the `ClientApi` -- `getStoryIndex` is a local function (that must be called _after_ `getProjectAnnotations`) that gets the list of stories added. - -See `client-api` for more details on this process. - -## Story Rendering and interruptions - -The Preview is split into three parts responsible for state management: - -- `PreviewWeb` - which story is rendered, receives events and (maybe) changes/re-renders stories -- `StoryRender` - (imports +) prepares the story, renders it through the various phases -- `DocsRender` - if a story renders in docs mode, it is "transformed" into a `DocsRender` once we know. - -A rendering story goes through these phases: - -- `preparing` - (maybe async) import the story file and prepare the story function. -- `loading` - async loaders are running -- `rendering` - the `renderToCanvas` function for the framework is running -- `playing` - the `play` function is running -- `completed` - the story is done. - -It also has two error states: - -- `aborted` - the story was stopped midway (see below) -- `errored` - there was an error thrown somewhere along the way. - -### Re-rendering and aborting - -A story may re-render due to various events, which can have implications if the story is not in the `completed` phase: - -- `UPDATE_STORY_ARGS` / `UPDATE_GLOBALS` -- change of inputs -- `FORCE_RE_RENDER` - re-render unchanged - -If these events happen during a render: - -- if the story is `preparing` or `loading`, leave thing unchanged and let the new `args`/`globals` be picked up by the render phase -- otherwise, use the result of the previous `loaders` run, and simply re-render over the top - -- `FORCE_REMOUNT` - remount (or equivalent) the component and re-render. - -If this happens during a render, treat `loading` similarly, but: - -- if the story is `rendering`, start a new render and abort the previous render immediately afterwards -- if the story is `playing`, attempt to abort the previous play function, and start a new render. - -### Changing story - -Also the `SET_CURRENT_STORY` event may change the current story. We need to check: - -- If the `storyId` changed -- If the `viewMode` changed -- If the story implementation changed (i.e if HMR occurred). - -If the _previous_ story is still `preparing`, we cannot know if the implementation changed, so we -abort the preparing immediately, and let the new story take over. - -Otherwise, if all of the above are the same, we do nothing. - -If they are different, and the old story is not `completed`, we try to abort it immediately. If that fails (e.g. the `play` function doesn't respond to the `abort` event), then we reload the window. +This package will no longer be released as part of the 8.0 release of storybook. diff --git a/code/lib/preview-web/package.json b/code/lib/preview-web/package.json index 28ce03d4ab9..63537bf26da 100644 --- a/code/lib/preview-web/package.json +++ b/code/lib/preview-web/package.json @@ -22,15 +22,15 @@ "sideEffects": false, "exports": { ".": { - "require": "./dist/index.js", - "import": "./dist/index.mjs", - "types": "./dist/index.d.ts" + "require": "./dist/entry.js", + "import": "./dist/entry.mjs", + "types": "./dist/entry.d.ts" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "main": "dist/entry.js", + "module": "dist/entry.mjs", + "types": "dist/entry.d.ts", "files": [ "dist/**/*", "README.md", @@ -39,35 +39,20 @@ ], "scripts": { "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.53", - "@storybook/channels": "7.0.0-alpha.53", "@storybook/client-logger": "7.0.0-alpha.53", - "@storybook/core-events": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", - "@storybook/types": "7.0.0-alpha.53", - "ansi-to-html": "^0.6.11", - "global": "^4.4.0", - "lodash": "^4.17.21", - "qs": "^6.10.0", - "synchronous-promise": "^2.0.15", - "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2" - }, - "devDependencies": { - "@storybook/channel-postmessage": "7.0.0-alpha.53", - "react": "16.14.0", - "typescript": "^4.9.3" + "@storybook/preview-api": "7.0.0-alpha.53" }, "publishConfig": { "access": "public" }, "bundler": { "entries": [ - "./src/index.ts" - ] + "./src/entry.ts" + ], + "shim": "@storybook/preview-api/dist/preview-web" }, "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23" } diff --git a/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts b/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts deleted file mode 100644 index bef733c3e96..00000000000 --- a/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { Renderer, Parameters } from '@storybook/types'; -import type { DocsContextProps } from './DocsContextProps'; - -export type DocsRenderFunction = ( - docsContext: DocsContextProps, - docsParameters: Parameters, - element: HTMLElement, - callback: () => void -) => void; diff --git a/code/lib/preview-web/src/entry.ts b/code/lib/preview-web/src/entry.ts new file mode 100644 index 00000000000..0e2b07b5379 --- /dev/null +++ b/code/lib/preview-web/src/entry.ts @@ -0,0 +1,7 @@ +import { deprecate } from '@storybook/client-logger'; + +deprecate( + 'importing from @storybook/preview is deprecated and will be removed in 8.0, please import canvas related modules from @storybook/preview-api' +); + +export * from '@storybook/preview-api/dist/preview-web'; diff --git a/code/lib/preview/jest.config.js b/code/lib/preview/jest.config.js new file mode 100644 index 00000000000..343e4c7a7f3 --- /dev/null +++ b/code/lib/preview/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.node'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 2ebeb5eb49f..7f33ccd3d8d 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -67,11 +67,10 @@ "@storybook/channel-websocket": "7.0.0-alpha.53", "@storybook/channels": "7.0.0-alpha.53", "@storybook/client-logger": "7.0.0-alpha.53", - "@storybook/core-client": "7.0.0-alpha.53", "@storybook/core-common": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", "@storybook/csf": "next", - "@storybook/preview-web": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/router": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", diff --git a/code/lib/preview/src/globals/exports.ts b/code/lib/preview/src/globals/exports.ts index 0d621b77e43..8e728bee236 100644 --- a/code/lib/preview/src/globals/exports.ts +++ b/code/lib/preview/src/globals/exports.ts @@ -29,6 +29,10 @@ export default { '@storybook/channels': ['Channel'], '@storybook/client-api': [ 'ClientApi', + 'DEEPLY_EQUAL', + 'HooksContext', + 'NO_TARGET_NAME', + 'StoryStore', 'addArgTypes', 'addArgTypesEnhancer', 'addArgs', @@ -37,13 +41,6 @@ export default { 'addLoader', 'addParameters', 'addStepRunner', - 'getQueryParam', - 'getQueryParams', - 'setGlobalRender', - 'DEEPLY_EQUAL', - 'HooksContext', - 'NO_TARGET_NAME', - 'StoryStore', 'applyHooks', 'combineArgs', 'combineParameters', @@ -58,6 +55,8 @@ export default { 'getArrayField', 'getField', 'getObjectField', + 'getQueryParam', + 'getQueryParams', 'getSingletonField', 'getValuesFromArgTypes', 'groupArgsByTarget', @@ -72,6 +71,7 @@ export default { 'prepareStory', 'processCSFFile', 'sanitizeStoryContextUpdate', + 'setGlobalRender', 'setProjectAnnotations', 'sortStoriesV6', 'sortStoriesV7', @@ -135,6 +135,58 @@ export default { 'UPDATE_QUERY_PARAMS', 'UPDATE_STORY_ARGS', ], + '@storybook/preview-api': [ + 'ClientApi', + 'DocsContext', + 'HooksContext', + 'Preview', + 'PreviewWeb', + 'StoryStore', + 'addArgTypes', + 'addArgTypesEnhancer', + 'addArgs', + 'addArgsEnhancer', + 'addDecorator', + 'addLoader', + 'addParameters', + 'addStepRunner', + 'addons', + 'applyHooks', + 'combineArgs', + 'combineParameters', + 'composeConfigs', + 'composeStepRunners', + 'composeStories', + 'composeStory', + 'decorateStory', + 'defaultDecorateStory', + 'filterArgTypes', + 'getQueryParam', + 'getQueryParams', + 'inferControls', + 'makeDecorator', + 'normalizeStory', + 'prepareStory', + 'sanitizeStoryContextUpdate', + 'setGlobalRender', + 'setProjectAnnotations', + 'simulateDOMContentLoaded', + 'simulatePageLoad', + 'sortStoriesV7', + 'start', + 'useArgs', + 'useCallback', + 'useChannel', + 'useEffect', + 'useGlobals', + 'useMemo', + 'useParameter', + 'useReducer', + 'useRef', + 'useState', + 'useStoryContext', + 'userOrAutoTitleFromSpecifier', + ], '@storybook/preview-web': [ 'DocsContext', 'Preview', diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts index 360a7e63dd6..c9c9f630f6e 100644 --- a/code/lib/preview/src/globals/runtime.ts +++ b/code/lib/preview/src/globals/runtime.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/namespace */ import * as ADDONS from '../modules/addons'; import * as CHANNEL_POSTMESSAGE from '../modules/channel-postmessage'; import * as CHANNEL_WEBSOCKET from '../modules/channel-websocket'; @@ -6,6 +7,7 @@ import * as CLIENT_API from '../modules/client-api'; import * as CLIENT_LOGGER from '../modules/client-logger'; import * as CORE_CLIENT from '../modules/core-client'; import * as CORE_EVENTS from '../modules/core-events'; +import * as PREVIEW_API from '../modules/preview-api'; import * as PREVIEW_WEB from '../modules/preview-web'; import * as STORE from '../modules/store'; @@ -21,6 +23,7 @@ export const values: Required> = { '@storybook/client-logger': CLIENT_LOGGER, '@storybook/core-client': CORE_CLIENT, '@storybook/core-events': CORE_EVENTS, + '@storybook/preview-api': PREVIEW_API, '@storybook/preview-web': PREVIEW_WEB, '@storybook/store': STORE, }; diff --git a/code/lib/preview/src/globals/types.ts b/code/lib/preview/src/globals/types.ts index aa49fddc2cc..c38e9defff2 100644 --- a/code/lib/preview/src/globals/types.ts +++ b/code/lib/preview/src/globals/types.ts @@ -11,6 +11,7 @@ export enum Keys { '@storybook/core-client' = '__STORYBOOK_MODULE_CORE_CLIENT__', '@storybook/core-events' = '__STORYBOOK_MODULE_CORE_EVENTS__', '@storybook/preview-web' = '__STORYBOOK_MODULE_PREVIEW_WEB__', + '@storybook/preview-api' = '__STORYBOOK_MODULE_PREVIEW_API__', '@storybook/store' = '__STORYBOOK_MODULE_STORE__', } diff --git a/code/lib/preview/src/modules/client-api.ts b/code/lib/preview/src/modules/client-api.ts index f7fa2dedcc6..ddddd074614 100644 --- a/code/lib/preview/src/modules/client-api.ts +++ b/code/lib/preview/src/modules/client-api.ts @@ -1,2 +1,2 @@ /* eslint-disable import/no-extraneous-dependencies */ -export * from '@storybook/client-api'; +export * from '@storybook/preview-api/dist/client-api'; diff --git a/code/lib/preview/src/modules/core-client.ts b/code/lib/preview/src/modules/core-client.ts index 97d155a2969..cf281cb16cf 100644 --- a/code/lib/preview/src/modules/core-client.ts +++ b/code/lib/preview/src/modules/core-client.ts @@ -1,2 +1,2 @@ /* eslint-disable import/no-extraneous-dependencies */ -export * from '@storybook/core-client'; +export * from '@storybook/preview-api/dist/core-client'; diff --git a/code/lib/preview/src/modules/preview-api.ts b/code/lib/preview/src/modules/preview-api.ts new file mode 100644 index 00000000000..633e7e9d933 --- /dev/null +++ b/code/lib/preview/src/modules/preview-api.ts @@ -0,0 +1,2 @@ +/* eslint-disable import/no-extraneous-dependencies */ +export * from '@storybook/preview-api'; diff --git a/code/lib/preview/src/modules/preview-web.ts b/code/lib/preview/src/modules/preview-web.ts index d044c8dea7c..6acd7785361 100644 --- a/code/lib/preview/src/modules/preview-web.ts +++ b/code/lib/preview/src/modules/preview-web.ts @@ -1,2 +1,2 @@ /* eslint-disable import/no-extraneous-dependencies */ -export * from '@storybook/preview-web'; +export * from '@storybook/preview-api/dist/preview-web'; diff --git a/code/lib/preview/src/modules/store.ts b/code/lib/preview/src/modules/store.ts index ae79f8208a7..455b6e9fe8e 100644 --- a/code/lib/preview/src/modules/store.ts +++ b/code/lib/preview/src/modules/store.ts @@ -1,2 +1,2 @@ /* eslint-disable import/no-extraneous-dependencies */ -export * from '@storybook/store'; +export * from '@storybook/preview-api/dist/store'; diff --git a/code/lib/store/README.md b/code/lib/store/README.md index 83e9b9b4b51..2220a03cb98 100644 --- a/code/lib/store/README.md +++ b/code/lib/store/README.md @@ -1,136 +1,3 @@ -# Storybook Store +The contents of this package have moved to `@storybook/preview-api`. Please update your import. -The store is reponsible for loading a story from a CSF file and preparing into a `Story` type, which is our internal format. - -## Story vs StoryContext - -Story functions and decorators recieve a `StoryContext` object (parameterized by their framework). - -The `Story` type that we pass around in our code includes all of those fields apart from the `args`, `globals`, `hooks` and `viewMode`, which are mutable and stored separately in the store. - -## Identification - -The first set of fields on a `Story` are the identifying fields for a story: - -- `componentId` - the URL "id" of the component -- `title` - the title of the component, which generates the sidebar entry -- `id` - the story "id" (in the URL) -- `name` - the name of the story - -## Annotations - -The main fields on a `Story` are the various annotations. Annotations can be set: - -- At the project level in `preview.js` (or via addons) -- At the component level via `export default { ... }` in a CSF file -- At the story level via `export const Story = {...}` in a CSF file. - -Not all annotations can be set at every level but most can. - -## Parameters - -The story parameters is a static, serializable object of data that provides details about the story. Those details can be used by addons or Storybook itself to render UI or provide defaults about the story rendering. - -Parameters _cannot change_ and are synchronized to the manager once when the story is loaded (note over the lifetime of a development Storybook a story can be loaded several times due to hot module reload, so the parameters technically can change for that reason). - -Usually addons will read from a single key of `parameters` namespaced by the name of that addon. For instance the configuration of the `backgrounds` addon is driven by the `parameters.backgrounds` namespace. - -Parameters are inheritable -- you can set project parameters via `export parameters = {}`, at the component level by the `parameters` key of the component (default) export in CSF, and on a single story via the `parameters` key on the story data. - -Some notable parameters: - -- `parameters.fileName` - the file that the story was defined in, when available - -## Args - -Args are "inputs" to stories. - -You can think of them equivalently to React props, Angular inputs and outputs, etc. - -Changing the args cause the story to be re-rendered with the new set of args. - -### Using args in a story - -By default (starting in 6.0) the args will be passed to the story as first argument and the context as second: - -```js -const YourStory = ({ x, y } /*, context*/) => /* render your story using `x` and `y` */ -``` - -If you set the `parameters.options.passArgsFirst` option on a story to false, args are passed to a story in the context, preserving the pre-6.0 story API; like parameters, they are available as `context.args`. - -```js -const YourStory = ({ args: { x, y }}) => /* render your story using `x` and `y` */ -``` - -### Arg types and values - -Arg types are used by the docs addon to populate the props table and are documented there. They are controlled by `argTypes` and can (sometimes) be automatically inferred from type information about the story or the component rendered by the story. - -A story can set initial values of its args with the `args` annotation. If you set an initial value for an arg that doesn't have a type a simple type will be inferred from the value. - -If an arg doesn't have an initial value, it will start unset, although it can still be set later via user interaction. - -Args can be set at the project, component and story level. - -### Using args in an addon - -Args values are automatically synchronized (via the `changeStoryArgs` and `storyArgsChanged` events) between the preview and manager; APIs exist in `lib/api` to read and set args in the manager. - -Args need to be serializable -- so currently cannot include callbacks (this may change in a future version). - -Note that arg values are passed directly to a story -- you should only store the actual value that the story needs to render in the arg. If you need more complex information supporting that, use parameters or addon state. - -Both `@storybook/client-api` (preview) and `@storybook/api` (manager) export a `useArgs()` hook that you can use to access args in decorators or addon panels. The API is as follows: - -```js -import { useArgs } from '@storybook/client-api'; // or '@storybook/api' - -// `args` is the args of the currently rendered story -// `updateArgs` will update its args. You can pass a subset of the args; other args will not be changed. -const [args, updateArgs] = useArgs(); -``` - -## ArgTypes - -Arg types add type information and metadata about args that are used to control the docs and controls addons. - -### ArgTypes enhancement - -To add a argTypes enhancer, `export const argTypesEnhancers = []` from `preview.js` or and addon - -There is a default enhancer that ensures that each `arg` in a story has a baseline `argType`. This value can be improved by subsequent enhancers, e.g. those provided by `@storybook/addon-docs`. - -## Globals - -Globals are rendering information that is global across stories. They are used for things like themes and internationalization (i18n) in stories, where you want Storybook to "remember" your setting as you browse between stories. - -They can be accessed in stories and decorators in the `context.globals` key. - -### Initial values of globals - -To set initial values of globals, `export const globals = {...}` from `preview.js` - -### Using globals in an addon - -Similar to args, globals are synchronized to the manager and can be accessed via the `useGlobals` hook. - -```js -import { useGlobals } from '@storybook/addons'; // or '@storybook/api' - -const [globals, updateGlobals] = useGlobals(); -``` - -## Technical details - -### Initialization - -- The store is created "uninitialized". -- It is assumed at some later time it will be initialized with the Story Index, the set of stories (this may be loaded async). -- You _can_ call `loadStory` prior to that time, in which case it will wait for initialization. - -### Caching - -- "All story" APIs like `extract()` require all stories to be loaded. -- For backwards-compatibility, these APIs are _not_ async, so it is required that `store.cacheAllCSFFiles()` is called first -- In v6 mode, this will be called on initialization but `start.ts`. +This package will no longer be released as part of the 8.0 release of storybook. diff --git a/code/lib/store/package.json b/code/lib/store/package.json index c9a19c3b45a..271b0e372d0 100644 --- a/code/lib/store/package.json +++ b/code/lib/store/package.json @@ -22,15 +22,15 @@ "sideEffects": false, "exports": { ".": { - "require": "./dist/index.js", - "import": "./dist/index.mjs", - "types": "./dist/index.d.ts" + "require": "./dist/entry.js", + "import": "./dist/entry.mjs", + "types": "./dist/entry.d.ts" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "main": "dist/entry.js", + "module": "dist/entry.mjs", + "types": "dist/entry.d.ts", "files": [ "dist/**/*", "README.md", @@ -39,38 +39,21 @@ ], "scripts": { "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.53", "@storybook/client-logger": "7.0.0-alpha.53", - "@storybook/core-events": "7.0.0-alpha.53", - "@storybook/csf": "next", - "@storybook/types": "7.0.0-alpha.53", - "dequal": "^2.0.2", - "global": "^4.4.0", - "lodash": "^4.17.21", - "memoizerific": "^1.11.3", - "slash": "^3.0.0", - "synchronous-promise": "^2.0.15", - "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2" - }, - "devDependencies": { - "typescript": "^4.9.3" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@storybook/preview-api": "7.0.0-alpha.53" }, "publishConfig": { "access": "public" }, "bundler": { "entries": [ - "./src/index.ts" + "./src/entry.ts" ], - "platform": "node" + "platform": "node", + "shim": "@storybook/preview-api/dist/store" }, "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23" } diff --git a/code/lib/store/src/entry.ts b/code/lib/store/src/entry.ts new file mode 100644 index 00000000000..5183f945637 --- /dev/null +++ b/code/lib/store/src/entry.ts @@ -0,0 +1,7 @@ +import { deprecate } from '@storybook/client-logger'; + +deprecate( + 'importing from @storybook/store is deprecated and will be removed in 8.0, please import canvas related modules from @storybook/preview-api' +); + +export * from '@storybook/preview-api/dist/store'; diff --git a/code/lib/types/package.json b/code/lib/types/package.json index eccae062a6f..4fc157f5ba2 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -40,8 +40,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.20.2", - "@types/babel__core": "^7.1.20", + "@babel/core": "^7.12.10", + "@storybook/channels": "7.0.0-alpha.53", + "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "express": "^4.17.1", "file-system-cache": "^2.0.0" diff --git a/code/lib/types/src/index.ts b/code/lib/types/src/index.ts index c2a5bacb891..628a6ca94a5 100644 --- a/code/lib/types/src/index.ts +++ b/code/lib/types/src/index.ts @@ -9,4 +9,5 @@ export * from './modules/core-client'; export * from './modules/core-common'; export * from './modules/builder'; export * from './modules/api'; +export * from './modules/docs'; export * from './modules/api-stories'; diff --git a/code/lib/preview-web/src/docs-context/DocsContextProps.ts b/code/lib/types/src/modules/docs.ts similarity index 80% rename from code/lib/preview-web/src/docs-context/DocsContextProps.ts rename to code/lib/types/src/modules/docs.ts index 268992e5e66..f27e148d3c3 100644 --- a/code/lib/preview-web/src/docs-context/DocsContextProps.ts +++ b/code/lib/types/src/modules/docs.ts @@ -1,14 +1,10 @@ -import type { - Renderer, - Store_ModuleExport, - Store_ModuleExports, - Store_Story, - StoryContextForLoaders, - StoryId, - StoryName, -} from '@storybook/types'; import type { Channel } from '@storybook/channels'; -import type { StoryRenderOptions } from '../render/StoryRender'; +import type { Renderer, StoryContextForLoaders, StoryId, StoryName, Parameters } from './csf'; +import type { Store_ModuleExport, Store_ModuleExports, Store_Story } from './store'; + +export type StoryRenderOptions = { + autoplay?: boolean; +}; export interface DocsContextProps { /** @@ -64,3 +60,10 @@ export interface DocsContextProps { */ channel: Channel; } + +export type DocsRenderFunction = ( + docsContext: DocsContextProps, + docsParameters: Parameters, + element: HTMLElement, + callback: () => void +) => void; diff --git a/code/package.json b/code/package.json index 34b5fc7ee3c..01b730eb3f3 100644 --- a/code/package.json +++ b/code/package.json @@ -209,6 +209,8 @@ "@storybook/preset-vue-webpack": "workspace:*", "@storybook/preset-vue3-webpack": "workspace:*", "@storybook/preset-web-components-webpack": "workspace:*", + "@storybook/preview": "workspace:*", + "@storybook/preview-api": "workspace:*", "@storybook/preview-web": "workspace:*", "@storybook/react": "workspace:*", "@storybook/react-vite": "workspace:*", diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 43f95103105..6a111484562 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -54,8 +54,7 @@ "@storybook/addons": "7.0.0-alpha.53", "@storybook/core-client": "7.0.0-alpha.53", "@storybook/docs-tools": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "react": "16.14.0", diff --git a/code/renderers/html/src/docs/sourceDecorator.test.ts b/code/renderers/html/src/docs/sourceDecorator.test.ts index b5e85126e72..06534288bf7 100644 --- a/code/renderers/html/src/docs/sourceDecorator.test.ts +++ b/code/renderers/html/src/docs/sourceDecorator.test.ts @@ -1,9 +1,9 @@ import { SNIPPET_RENDERED } from '@storybook/docs-tools'; -import { addons, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/preview-api'; import { sourceDecorator } from './sourceDecorator'; import type { StoryContext } from '../types'; -jest.mock('@storybook/addons'); +jest.mock('@storybook/preview-api'); const mockedAddons = addons as jest.Mocked; const mockedUseEffect = useEffect as jest.Mocked; diff --git a/code/renderers/html/src/docs/sourceDecorator.ts b/code/renderers/html/src/docs/sourceDecorator.ts index 1920c6d9d76..46d5e0642e3 100644 --- a/code/renderers/html/src/docs/sourceDecorator.ts +++ b/code/renderers/html/src/docs/sourceDecorator.ts @@ -1,7 +1,7 @@ /* eslint-disable no-underscore-dangle */ /* global window */ import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools'; -import { addons, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/preview-api'; import type { PartialStoryFn } from '@storybook/types'; import { dedent } from 'ts-dedent'; diff --git a/code/renderers/html/src/public-api.ts b/code/renderers/html/src/public-api.ts index bc813beb093..6e96adcaa93 100644 --- a/code/renderers/html/src/public-api.ts +++ b/code/renderers/html/src/public-api.ts @@ -1,6 +1,6 @@ /* eslint-disable prefer-destructuring */ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import type { HtmlRenderer } from './types'; import { renderToCanvas, render } from './render'; diff --git a/code/renderers/html/src/render.ts b/code/renderers/html/src/render.ts index 3b40e1e5063..47fee2a537b 100644 --- a/code/renderers/html/src/render.ts +++ b/code/renderers/html/src/render.ts @@ -3,7 +3,7 @@ import global from 'global'; import { dedent } from 'ts-dedent'; -import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web'; +import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api'; import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types'; import type { HtmlRenderer } from './types'; diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 92bb3ab86d2..ce1a1bceddb 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -53,7 +53,7 @@ "dependencies": { "@storybook/addons": "7.0.0-alpha.53", "@storybook/core-client": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "react": "16.14.0", diff --git a/code/renderers/preact/src/public-api.ts b/code/renderers/preact/src/public-api.ts index 81298c96277..3b6f7801f39 100644 --- a/code/renderers/preact/src/public-api.ts +++ b/code/renderers/preact/src/public-api.ts @@ -1,6 +1,6 @@ /* eslint-disable prefer-destructuring */ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import { renderToCanvas } from './render'; import type { PreactRenderer } from './types'; diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index ecff64271f9..4a4505a0590 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -56,7 +56,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/core-client": "7.0.0-alpha.53", "@storybook/docs-tools": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "@types/estree": "^0.0.51", "@types/node": "^16.0.0", diff --git a/code/renderers/react/src/__test__/internals.test.tsx b/code/renderers/react/src/__test__/internals.test.tsx index dd4eb1b86ed..40cdb069f49 100644 --- a/code/renderers/react/src/__test__/internals.test.tsx +++ b/code/renderers/react/src/__test__/internals.test.tsx @@ -1,7 +1,7 @@ /// ; /* eslint-disable @typescript-eslint/no-non-null-assertion */ import React from 'react'; -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { render, screen } from '@testing-library/react'; import { composeStories, composeStory } from '..'; diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts index 3a27bda6463..31ea19fd754 100644 --- a/code/renderers/react/src/docs/extractArgTypes.test.ts +++ b/code/renderers/react/src/docs/extractArgTypes.test.ts @@ -5,7 +5,7 @@ import fs from 'fs'; import requireFromString from 'require-from-string'; import { transformFileSync, transformSync } from '@babel/core'; -import { inferControls } from '@storybook/store'; +import { inferControls } from '@storybook/preview-api'; import type { Renderer } from '@storybook/types'; import { normalizeNewlines } from '@storybook/docs-tools'; diff --git a/code/renderers/react/src/docs/jsxDecorator.test.tsx b/code/renderers/react/src/docs/jsxDecorator.test.tsx index cbc163f1384..9adeea67d5e 100644 --- a/code/renderers/react/src/docs/jsxDecorator.test.tsx +++ b/code/renderers/react/src/docs/jsxDecorator.test.tsx @@ -2,11 +2,11 @@ import type { FC, PropsWithChildren } from 'react'; import React, { createElement, Profiler } from 'react'; import PropTypes from 'prop-types'; -import { addons, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/preview-api'; import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import { renderJsx, jsxDecorator } from './jsxDecorator'; -jest.mock('@storybook/addons'); +jest.mock('@storybook/preview-api'); const mockedAddons = addons as jest.Mocked; const mockedUseEffect = useEffect as jest.Mocked; diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx index cbef7513943..535326a738e 100644 --- a/code/renderers/react/src/docs/jsxDecorator.tsx +++ b/code/renderers/react/src/docs/jsxDecorator.tsx @@ -4,7 +4,7 @@ import React, { createElement } from 'react'; import type { Options } from 'react-element-to-jsx-string'; import reactElementToJSXString from 'react-element-to-jsx-string'; -import { addons, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/preview-api'; import type { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/types'; import { SourceType, SNIPPET_RENDERED, getDocgenSection } from '@storybook/docs-tools'; import { logger } from '@storybook/client-logger'; diff --git a/code/renderers/react/src/public-api.tsx b/code/renderers/react/src/public-api.tsx index ca761e807b0..05540a0fb82 100644 --- a/code/renderers/react/src/public-api.tsx +++ b/code/renderers/react/src/public-api.tsx @@ -1,5 +1,5 @@ /* eslint-disable prefer-destructuring */ -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; import { render, renderToCanvas } from './render'; diff --git a/code/renderers/react/src/testing-api.ts b/code/renderers/react/src/testing-api.ts index 08bfe820793..e3c8d542cc3 100644 --- a/code/renderers/react/src/testing-api.ts +++ b/code/renderers/react/src/testing-api.ts @@ -2,7 +2,7 @@ import { composeStory as originalComposeStory, composeStories as originalComposeStories, setProjectAnnotations as originalSetProjectAnnotations, -} from '@storybook/store'; +} from '@storybook/preview-api'; import type { Args, ProjectAnnotations, diff --git a/code/renderers/react/template/stories/js-argtypes.stories.jsx b/code/renderers/react/template/stories/js-argtypes.stories.jsx index a3299558886..1fc65b1ecfc 100644 --- a/code/renderers/react/template/stories/js-argtypes.stories.jsx +++ b/code/renderers/react/template/stories/js-argtypes.stories.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import mapValues from 'lodash/mapValues'; import { PureArgsTable as ArgsTable } from '@storybook/blocks'; -import { inferControls } from '@storybook/store'; +import { inferControls } from '@storybook/preview-api'; import { ThemeProvider, themes, convert } from '@storybook/theming'; import { component as JsClassComponentComponent } from './docgen-components/js-class-component/input.jsx'; diff --git a/code/renderers/react/template/stories/ts-argtypes.stories.tsx b/code/renderers/react/template/stories/ts-argtypes.stories.tsx index fb245443162..7800e3aa735 100644 --- a/code/renderers/react/template/stories/ts-argtypes.stories.tsx +++ b/code/renderers/react/template/stories/ts-argtypes.stories.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import mapValues from 'lodash/mapValues'; import { PureArgsTable as ArgsTable } from '@storybook/blocks'; import type { Args, Parameters, StoryContext } from '@storybook/types'; -import { inferControls } from '@storybook/store'; +import { inferControls } from '@storybook/preview-api'; import { ThemeProvider, themes, convert } from '@storybook/theming'; import { component as TsFunctionComponentComponent } from './docgen-components/ts-function-component/input'; diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index c389389c5ec..b7eb8a4683d 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -53,8 +53,7 @@ "dependencies": { "@storybook/addons": "7.0.0-alpha.53", "@storybook/core-client": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "react": "16.14.0", diff --git a/code/renderers/server/src/public-api.ts b/code/renderers/server/src/public-api.ts index c55854ffc5a..a3d9a6cec76 100644 --- a/code/renderers/server/src/public-api.ts +++ b/code/renderers/server/src/public-api.ts @@ -1,5 +1,5 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import { renderToCanvas, render } from './render'; import type { ServerRenderer } from './types'; diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts index a6f31ee2817..7f729c6e271 100644 --- a/code/renderers/server/src/render.ts +++ b/code/renderers/server/src/render.ts @@ -4,7 +4,7 @@ import global from 'global'; import { dedent } from 'ts-dedent'; import type { Store_RenderContext } from '@storybook/types'; -import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web'; +import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api'; import type { StoryFn, Args, ArgTypes } from './public-types'; import type { FetchStoryHtmlType, ServerRenderer } from './types'; diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 2a2c59474c0..b0023eefe17 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -59,7 +59,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/core-client": "7.0.0-alpha.53", "@storybook/docs-tools": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "react": "16.14.0", diff --git a/code/renderers/svelte/src/decorators.ts b/code/renderers/svelte/src/decorators.ts index b4f516a944c..abf9d80b7a3 100644 --- a/code/renderers/svelte/src/decorators.ts +++ b/code/renderers/svelte/src/decorators.ts @@ -1,5 +1,5 @@ import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types'; -import { sanitizeStoryContextUpdate } from '@storybook/store'; +import { sanitizeStoryContextUpdate } from '@storybook/preview-api'; import SlotDecorator from '../templates/SlotDecorator.svelte'; import type { SvelteRenderer } from './types'; diff --git a/code/renderers/svelte/src/docs/sourceDecorator.ts b/code/renderers/svelte/src/docs/sourceDecorator.ts index e00243aaa56..6f9dbdb282c 100644 --- a/code/renderers/svelte/src/docs/sourceDecorator.ts +++ b/code/renderers/svelte/src/docs/sourceDecorator.ts @@ -1,5 +1,5 @@ /* eslint-disable no-underscore-dangle */ -import { addons, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/preview-api'; import { deprecate } from '@storybook/client-logger'; import type { ArgTypes, Args, StoryContext, Renderer } from '@storybook/types'; diff --git a/code/renderers/svelte/src/public-api.ts b/code/renderers/svelte/src/public-api.ts index 2a6a63a8245..44eb6e69db4 100644 --- a/code/renderers/svelte/src/public-api.ts +++ b/code/renderers/svelte/src/public-api.ts @@ -1,4 +1,4 @@ -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import { decorateStory } from './decorators'; import type { SvelteRenderer } from './types'; diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json index ada02a178ab..62df0934c82 100644 --- a/code/renderers/vue/package.json +++ b/code/renderers/vue/package.json @@ -55,7 +55,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/core-client": "7.0.0-alpha.53", "@storybook/docs-tools": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "react": "16.14.0", diff --git a/code/renderers/vue/src/decorateStory.ts b/code/renderers/vue/src/decorateStory.ts index fcbae92f50b..eb69dfd63d7 100644 --- a/code/renderers/vue/src/decorateStory.ts +++ b/code/renderers/vue/src/decorateStory.ts @@ -1,7 +1,7 @@ import type { VueConstructor, ComponentOptions } from 'vue'; import Vue from 'vue'; import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types'; -import { sanitizeStoryContextUpdate } from '@storybook/store'; +import { sanitizeStoryContextUpdate } from '@storybook/preview-api'; import type { StoryFnVueReturnType, VueRenderer } from './types'; import { extractProps } from './util'; diff --git a/code/renderers/vue/src/docs/sourceDecorator.ts b/code/renderers/vue/src/docs/sourceDecorator.ts index 3e3b79cda26..8c9839acb13 100644 --- a/code/renderers/vue/src/docs/sourceDecorator.ts +++ b/code/renderers/vue/src/docs/sourceDecorator.ts @@ -1,7 +1,7 @@ /* eslint-disable no-underscore-dangle */ /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import { logger } from '@storybook/client-logger'; import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools'; import type { ComponentOptions } from 'vue'; diff --git a/code/renderers/vue/src/public-api.ts b/code/renderers/vue/src/public-api.ts index 553e42b76c3..aa758443b76 100644 --- a/code/renderers/vue/src/public-api.ts +++ b/code/renderers/vue/src/public-api.ts @@ -1,6 +1,6 @@ /* eslint-disable prefer-destructuring */ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import type { VueRenderer } from './types'; import { renderToCanvas, render } from './render'; diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 8a238e0f551..44286f8c026 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -54,7 +54,7 @@ "@storybook/addons": "7.0.0-alpha.53", "@storybook/core-client": "7.0.0-alpha.53", "@storybook/docs-tools": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "react": "16.14.0", diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts index 44275f89a63..f865f849ab1 100644 --- a/code/renderers/vue3/src/decorateStory.ts +++ b/code/renderers/vue3/src/decorateStory.ts @@ -1,7 +1,7 @@ import type { ConcreteComponent, Component, ComponentOptions } from 'vue'; import { h } from 'vue'; import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types'; -import { sanitizeStoryContextUpdate } from '@storybook/store'; +import { sanitizeStoryContextUpdate } from '@storybook/preview-api'; import type { VueRenderer } from './types'; diff --git a/code/renderers/vue3/src/public-api.ts b/code/renderers/vue3/src/public-api.ts index f7a0220a0d0..e34b848f3bc 100644 --- a/code/renderers/vue3/src/public-api.ts +++ b/code/renderers/vue3/src/public-api.ts @@ -1,6 +1,6 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; import type { App } from 'vue'; -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import type { VueRenderer } from './types'; import { decorateStory } from './decorateStory'; diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 87edb861bc4..de3c40f4961 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -58,8 +58,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/core-client": "7.0.0-alpha.53", "@storybook/docs-tools": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "global": "^4.4.0", "react": "16.14.0", diff --git a/code/renderers/web-components/src/docs/sourceDecorator.test.ts b/code/renderers/web-components/src/docs/sourceDecorator.test.ts index bbf7975ef5d..e659f4f5e22 100644 --- a/code/renderers/web-components/src/docs/sourceDecorator.test.ts +++ b/code/renderers/web-components/src/docs/sourceDecorator.test.ts @@ -1,12 +1,12 @@ /* eslint-disable import/extensions */ import { html } from 'lit-html'; import { styleMap } from 'lit-html/directives/style-map.js'; -import { addons, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/preview-api'; import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import type { StoryContext } from '../types'; import { sourceDecorator } from './sourceDecorator'; -jest.mock('@storybook/addons'); +jest.mock('@storybook/preview-api'); const mockedAddons = addons as jest.Mocked; const mockedUseEffect = useEffect as jest.Mock; diff --git a/code/renderers/web-components/src/docs/sourceDecorator.ts b/code/renderers/web-components/src/docs/sourceDecorator.ts index bef93cade87..adc1981f623 100644 --- a/code/renderers/web-components/src/docs/sourceDecorator.ts +++ b/code/renderers/web-components/src/docs/sourceDecorator.ts @@ -2,7 +2,7 @@ /* global window */ import { render } from 'lit-html'; import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/types'; -import { addons, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/preview-api'; import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools'; import type { WebComponentsRenderer } from '../types'; diff --git a/code/renderers/web-components/src/public-api.ts b/code/renderers/web-components/src/public-api.ts index 3d5590fbf73..719defb4006 100644 --- a/code/renderers/web-components/src/public-api.ts +++ b/code/renderers/web-components/src/public-api.ts @@ -1,6 +1,6 @@ /* eslint-disable prefer-destructuring */ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/core-client'; +import { start } from '@storybook/preview-api'; import { renderToCanvas } from './render'; import type { WebComponentsRenderer } from './types'; diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts index d95129b98c3..866e93acba0 100644 --- a/code/renderers/web-components/src/render.ts +++ b/code/renderers/web-components/src/render.ts @@ -8,7 +8,7 @@ import { render as litRender } from 'lit-html'; // Keep `.js` extension to avoid issue with Webpack (related to export map?) // eslint-disable-next-line import/extensions import { isTemplateResult } from 'lit-html/directive-helpers.js'; -import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web'; +import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api'; import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types'; import type { WebComponentsRenderer } from './types'; diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx index 3cd958bd6d1..fde9a77b7a4 100644 --- a/code/ui/.storybook/preview.tsx +++ b/code/ui/.storybook/preview.tsx @@ -12,8 +12,8 @@ import { } from '@storybook/theming'; import { useArgs } from '@storybook/addons'; import { Symbols } from '@storybook/components'; -import type { PreviewWeb } from '@storybook/preview-web'; -import { DocsContext } from '@storybook/preview-web'; +import type { PreviewWeb } from '@storybook/preview-api'; +import { DocsContext } from '@storybook/preview-api'; import type { ReactRenderer } from '@storybook/react'; import type { Channel } from '@storybook/channels'; diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index b05c28ea915..7ae43d4da7c 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -49,8 +49,7 @@ "@storybook/core-events": "7.0.0-alpha.53", "@storybook/csf": "next", "@storybook/docs-tools": "7.0.0-alpha.53", - "@storybook/preview-web": "7.0.0-alpha.53", - "@storybook/store": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", "@types/lodash": "^4.14.167", diff --git a/code/ui/blocks/src/blocks/ArgsTable.tsx b/code/ui/blocks/src/blocks/ArgsTable.tsx index 3227c104d97..f7d0ee2ec0b 100644 --- a/code/ui/blocks/src/blocks/ArgsTable.tsx +++ b/code/ui/blocks/src/blocks/ArgsTable.tsx @@ -2,7 +2,7 @@ import type { FC } from 'react'; import React, { useContext, useEffect, useState, useCallback } from 'react'; import mapValues from 'lodash/mapValues'; import type { ArgTypesExtractor } from '@storybook/docs-tools'; -import { filterArgTypes } from '@storybook/store'; +import { filterArgTypes } from '@storybook/preview-api'; import type { Store_PropDescriptor, StrictArgTypes, Args, Globals } from '@storybook/types'; import { STORY_ARGS_UPDATED, diff --git a/code/ui/blocks/src/blocks/DocsContext.ts b/code/ui/blocks/src/blocks/DocsContext.ts index 0c3e301a5a7..17069f1727d 100644 --- a/code/ui/blocks/src/blocks/DocsContext.ts +++ b/code/ui/blocks/src/blocks/DocsContext.ts @@ -3,8 +3,7 @@ import type { Context } from 'react'; import { createContext } from 'react'; import { window as globalWindow } from 'global'; -import type { DocsContextProps } from '@storybook/preview-web'; -import type { Renderer } from '@storybook/types'; +import type { DocsContextProps, Renderer } from '@storybook/types'; export type { DocsContextProps }; diff --git a/code/ui/blocks/src/blocks/enhanceSource.ts b/code/ui/blocks/src/blocks/enhanceSource.ts index 05d912f8e81..cd96be2d29e 100644 --- a/code/ui/blocks/src/blocks/enhanceSource.ts +++ b/code/ui/blocks/src/blocks/enhanceSource.ts @@ -1,5 +1,5 @@ import type { Parameters, Store_Story } from '@storybook/types'; -import { combineParameters } from '@storybook/store'; +import { combineParameters } from '@storybook/preview-api'; // ============================================================ // START @storybook/source-loader/extract-source diff --git a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx index 9329473a759..1a05a0d8fd1 100644 --- a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx +++ b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx @@ -1,7 +1,7 @@ import type { FunctionComponent } from 'react'; import React, { useRef } from 'react'; import type { Renderer, ProjectAnnotations } from '@storybook/types'; -import { composeConfigs } from '@storybook/store'; +import { composeConfigs } from '@storybook/preview-api'; import { Docs } from '../Docs'; import { ExternalPreview } from './ExternalPreview'; diff --git a/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts b/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts index 64bb3e609cc..b147b67c966 100644 --- a/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts +++ b/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts @@ -3,10 +3,10 @@ import type { Store_CSFFile, Store_ModuleExport, Store_ModuleExports, + DocsContextProps, } from '@storybook/types'; -import { DocsContext } from '@storybook/preview-web'; -import type { StoryStore } from '@storybook/store'; -import type { DocsContextProps } from '@storybook/preview-web'; +import { DocsContext } from '@storybook/preview-api'; +import type { StoryStore } from '@storybook/preview-api'; import type { Channel } from '@storybook/channels'; export class ExternalDocsContext extends DocsContext { diff --git a/code/ui/blocks/src/blocks/external/ExternalPreview.ts b/code/ui/blocks/src/blocks/external/ExternalPreview.ts index b7d09d7a69a..42b08d9d838 100644 --- a/code/ui/blocks/src/blocks/external/ExternalPreview.ts +++ b/code/ui/blocks/src/blocks/external/ExternalPreview.ts @@ -1,4 +1,4 @@ -import { Preview } from '@storybook/preview-web'; +import { Preview, composeConfigs } from '@storybook/preview-api'; import type { Renderer, ComponentTitle, @@ -7,7 +7,6 @@ import type { Store_ModuleExports, Store_StoryIndex, } from '@storybook/types'; -import { composeConfigs } from '@storybook/store'; import { Channel } from '@storybook/channels'; import { ExternalDocsContext } from './ExternalDocsContext'; diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index ed0b21fc324..4380e636da8 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -61,6 +61,7 @@ "@storybook/client-logger": "7.0.0-alpha.53", "@storybook/components": "7.0.0-alpha.53", "@storybook/core-events": "7.0.0-alpha.53", + "@storybook/preview-api": "7.0.0-alpha.53", "@storybook/router": "7.0.0-alpha.53", "@storybook/theming": "7.0.0-alpha.53", "@storybook/types": "7.0.0-alpha.53", diff --git a/code/ui/manager/paths.js b/code/ui/manager/paths.js index 47098e2f940..2e5037b0301 100644 --- a/code/ui/manager/paths.js +++ b/code/ui/manager/paths.js @@ -6,7 +6,7 @@ const resolve = resolveFrom.bind(null, __dirname); // These paths need to be aliased in the manager webpack config to ensure that all // code running inside the manager uses the *same* version of react[-dom] that we use. module.exports = { - '@storybook/addons': dirname(resolve('@storybook/addons/package.json')), + '@storybook/preview-api': dirname(resolve('@storybook/preview-api/package.json')), '@storybook/api': dirname(resolve('@storybook/api/package.json')), '@storybook/channels': dirname(resolve('@storybook/channels/package.json')), '@storybook/components': dirname(resolve('@storybook/components/package.json')), diff --git a/code/ui/manager/src/FakeProvider.tsx b/code/ui/manager/src/FakeProvider.tsx index a1abbbaca0d..5f009340e96 100644 --- a/code/ui/manager/src/FakeProvider.tsx +++ b/code/ui/manager/src/FakeProvider.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { styled } from '@storybook/theming'; -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; import Provider from './provider'; export class FakeProvider extends Provider { diff --git a/code/ui/manager/src/components/preview/preview.mockdata.tsx b/code/ui/manager/src/components/preview/preview.mockdata.tsx index 5e2d69dcdf9..e0699aa5f8f 100644 --- a/code/ui/manager/src/components/preview/preview.mockdata.tsx +++ b/code/ui/manager/src/components/preview/preview.mockdata.tsx @@ -24,8 +24,8 @@ export const previewProps: PreviewProps = { : []) as API['getElements'], } as any as API, entry: { - type: 'story', tags: [], + type: 'story', id: 'story--id', parent: 'root', depth: 1, diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 673657f82a7..ed0e7d14c3c 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -217,15 +217,45 @@ export default { 'useStorybookApi', 'useStorybookState', ], - '@storybook/addons': [ - 'AddonStore', + '@storybook/preview-api': [ + 'ClientApi', + 'DocsContext', 'HooksContext', + 'Preview', + 'PreviewWeb', + 'StoryStore', + 'addArgTypes', + 'addArgTypesEnhancer', + 'addArgs', + 'addArgsEnhancer', + 'addDecorator', + 'addLoader', + 'addParameters', + 'addStepRunner', 'addons', 'applyHooks', - 'isSupportedType', + 'combineArgs', + 'combineParameters', + 'composeConfigs', + 'composeStepRunners', + 'composeStories', + 'composeStory', + 'decorateStory', + 'defaultDecorateStory', + 'filterArgTypes', + 'getQueryParam', + 'getQueryParams', + 'inferControls', 'makeDecorator', - 'mockChannel', - 'types', + 'normalizeStory', + 'prepareStory', + 'sanitizeStoryContextUpdate', + 'setGlobalRender', + 'setProjectAnnotations', + 'simulateDOMContentLoaded', + 'simulatePageLoad', + 'sortStoriesV7', + 'start', 'useArgs', 'useCallback', 'useChannel', @@ -237,6 +267,7 @@ export default { 'useRef', 'useState', 'useStoryContext', + 'userOrAutoTitleFromSpecifier', ], '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'], } as const; diff --git a/code/ui/manager/src/globals/runtime.ts b/code/ui/manager/src/globals/runtime.ts index e8890929e0a..e41240a3ce8 100644 --- a/code/ui/manager/src/globals/runtime.ts +++ b/code/ui/manager/src/globals/runtime.ts @@ -7,7 +7,7 @@ import * as STORYBOOKEVENTS from '@storybook/core-events'; import * as STORYBOOKROUTER from '@storybook/router'; import * as STORYBOOKTHEMING from '@storybook/theming'; import * as STORYBOOKAPI from '@storybook/api'; -import * as STORYBOOKADDONS from '@storybook/addons'; +import * as STORYBOOKADDONS from '@storybook/preview-api'; import * as STORYBOOKCLIENTLOGGER from '@storybook/client-logger'; import type { Keys } from './types'; @@ -22,6 +22,6 @@ export const values: Required> = { '@storybook/router': STORYBOOKROUTER, '@storybook/theming': STORYBOOKTHEMING, '@storybook/api': STORYBOOKAPI, - '@storybook/addons': STORYBOOKADDONS, + '@storybook/preview-api': STORYBOOKADDONS, '@storybook/client-logger': STORYBOOKCLIENTLOGGER, }; diff --git a/code/ui/manager/src/globals/types.ts b/code/ui/manager/src/globals/types.ts index cee0c83b1af..0c3a8bb56a7 100644 --- a/code/ui/manager/src/globals/types.ts +++ b/code/ui/manager/src/globals/types.ts @@ -10,7 +10,7 @@ export enum Keys { '@storybook/router' = '__STORYBOOKROUTER__', '@storybook/theming' = '__STORYBOOKTHEMING__', '@storybook/api' = '__STORYBOOKAPI__', - '@storybook/addons' = '__STORYBOOKADDONS__', + '@storybook/preview-api' = '__STORYBOOKADDONS__', '@storybook/client-logger' = '__STORYBOOKCLIENTLOGGER__', } diff --git a/code/workspace.json b/code/workspace.json index 8b7bb4af3ee..61d9e2ee892 100644 --- a/code/workspace.json +++ b/code/workspace.json @@ -206,16 +206,6 @@ "root": "frameworks/ember", "type": "library" }, - "@storybook/example-doc-blocks": { - "implicitDependencies": [], - "root": "examples/doc-blocks", - "type": "library" - }, - "@storybook/external-docs": { - "implicitDependencies": [], - "root": "examples/external-docs", - "type": "library" - }, "@storybook/html": { "implicitDependencies": [], "root": "renderers/html", @@ -306,6 +296,11 @@ "root": "lib/preview", "type": "library" }, + "@storybook/preview-api": { + "implicitDependencies": [], + "root": "lib/preview-api", + "type": "library" + }, "@storybook/preview-web": { "implicitDependencies": [], "root": "lib/preview-web", @@ -426,35 +421,15 @@ "root": "frameworks/web-components-webpack5", "type": "library" }, - "ember-example": { - "implicitDependencies": [], - "root": "examples/ember-cli", - "type": "library" - }, "sb": { "implicitDependencies": [], "root": "lib/cli-sb", "type": "library" }, - "server-kitchen-sink": { - "implicitDependencies": [], - "root": "examples/server-kitchen-sink", - "type": "library" - }, - "standalone-preview": { - "implicitDependencies": [], - "root": "examples/standalone-preview", - "type": "library" - }, "storybook": { "implicitDependencies": [], "root": "lib/cli-storybook", "type": "library" - }, - "vue-3-cli-example": { - "implicitDependencies": [], - "root": "examples/vue-3-cli", - "type": "library" } } } diff --git a/code/yarn.lock b/code/yarn.lock index fc3b092bbb1..29ce6779093 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -431,7 +431,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.17.2, @babel/core@npm:^7.17.5, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.2, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.17.2, @babel/core@npm:^7.17.5, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.2, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": version: 7.20.2 resolution: "@babel/core@npm:7.20.2" dependencies: @@ -2918,6 +2918,18 @@ __metadata: languageName: node linkType: hard +"@jest/environment@npm:^26.6.2": + version: 26.6.2 + resolution: "@jest/environment@npm:26.6.2" + dependencies: + "@jest/fake-timers": ^26.6.2 + "@jest/types": ^26.6.2 + "@types/node": "*" + jest-mock: ^26.6.2 + checksum: b489afb2fa9bbde360f222bc905abd9abd77ae5802b16ca7a34d018405ad7df57a506c01efae8ff8b566c211314ec74b3f37a1cb850623e15eb1e6d020582197 + languageName: node + linkType: hard + "@jest/environment@npm:^28.1.3": version: 28.1.3 resolution: "@jest/environment@npm:28.1.3" @@ -2980,6 +2992,20 @@ __metadata: languageName: node linkType: hard +"@jest/fake-timers@npm:^26.6.2": + version: 26.6.2 + resolution: "@jest/fake-timers@npm:26.6.2" + dependencies: + "@jest/types": ^26.6.2 + "@sinonjs/fake-timers": ^6.0.1 + "@types/node": "*" + jest-message-util: ^26.6.2 + jest-mock: ^26.6.2 + jest-util: ^26.6.2 + checksum: 861b033ead8c749f0fecffb84cbe88603291d9db66129494d0059dee101616a2aa646fc32c8cab468826eeb32647d2b0b4f72869f048163cb3406ddd2902ece0 + languageName: node + linkType: hard + "@jest/fake-timers@npm:^28.1.3": version: 28.1.3 resolution: "@jest/fake-timers@npm:28.1.3" @@ -3008,6 +3034,17 @@ __metadata: languageName: node linkType: hard +"@jest/globals@npm:^26.6.2": + version: 26.6.2 + resolution: "@jest/globals@npm:26.6.2" + dependencies: + "@jest/environment": ^26.6.2 + "@jest/types": ^26.6.2 + expect: ^26.6.2 + checksum: 6516baa19339a62c8f5eeb2ef3871bfa5bd5645016f1eb87dbe52a37658e7b33b836a1325ba40db250df5d06c08dd1cb1532fbfac5712f4041561525b59bb03f + languageName: node + linkType: hard + "@jest/globals@npm:^28.1.3": version: 28.1.3 resolution: "@jest/globals@npm:28.1.3" @@ -5064,6 +5101,15 @@ __metadata: languageName: node linkType: hard +"@sinonjs/fake-timers@npm:^6.0.1": + version: 6.0.1 + resolution: "@sinonjs/fake-timers@npm:6.0.1" + dependencies: + "@sinonjs/commons": ^1.7.0 + checksum: a77bead4d71b40d6f7f9a3ad66a00269aa2c078260f43f594b8aed4676c6c4e7c2b642d4b8e34df314e1c971589455f7b4267ab831bf44ffdccc0bda599850ad + languageName: node + linkType: hard + "@sinonjs/fake-timers@npm:^9.1.2": version: 9.1.2 resolution: "@sinonjs/fake-timers@npm:9.1.2" @@ -5084,6 +5130,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@testing-library/react": ^11.2.2 @@ -5112,6 +5159,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@types/lodash": ^4.14.167 @@ -5145,6 +5193,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 @@ -5173,7 +5222,7 @@ __metadata: "@storybook/components": 7.0.0-alpha.53 "@storybook/core-common": 7.0.0-alpha.53 "@storybook/node-logger": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 lodash: ^4.17.21 @@ -5204,7 +5253,8 @@ __metadata: "@storybook/mdx2-csf": next "@storybook/node-logger": 7.0.0-alpha.53 "@storybook/postinstall": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 + "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 fs-extra: ^9.0.1 global: ^4.4.0 @@ -5241,6 +5291,7 @@ __metadata: "@storybook/api": 7.0.0-alpha.53 "@storybook/core-common": 7.0.0-alpha.53 "@storybook/node-logger": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/vue": 7.0.0-alpha.53 ts-dedent: ^2.0.0 typescript: ^4.9.3 @@ -5255,6 +5306,7 @@ __metadata: dependencies: "@storybook/addons": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@types/webpack-env": ^1.16.0 global: ^4.4.0 typescript: ^4.9.3 @@ -5274,6 +5326,7 @@ __metadata: "@storybook/core-events": 7.0.0-alpha.53 "@storybook/instrumenter": 7.0.0-alpha.53 "@storybook/jest": ^0.0.10 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/testing-library": 0.0.14-next.0 "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 @@ -5304,6 +5357,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 global: ^4.4.0 react-sizeme: ^3.0.1 @@ -5328,6 +5382,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 "@storybook/csf": next + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/router": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 @@ -5354,6 +5409,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 typescript: ^4.9.3 @@ -5377,6 +5433,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 ts-dedent: ^2.0.0 @@ -5426,9 +5483,9 @@ __metadata: "@storybook/angular": 7.0.0-alpha.53 "@storybook/babel-plugin-require-context-hook": 1.0.1 "@storybook/client-api": 7.0.0-alpha.53 - "@storybook/core-client": 7.0.0-alpha.53 "@storybook/core-common": 7.0.0-alpha.53 "@storybook/core-webpack": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/react": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@storybook/vue": 7.0.0-alpha.53 @@ -5510,6 +5567,7 @@ __metadata: "@storybook/api": 7.0.0-alpha.53 "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/router": 7.0.0-alpha.53 "@storybook/source-loader": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 @@ -5554,6 +5612,7 @@ __metadata: "@storybook/api": 7.0.0-alpha.53 "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 typescript: ^4.9.3 peerDependencies: @@ -5576,6 +5635,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 global: ^4.4.0 memoizerific: ^1.11.3 @@ -5659,7 +5719,7 @@ __metadata: "@storybook/core-webpack": 7.0.0-alpha.53 "@storybook/docs-tools": 7.0.0-alpha.53 "@storybook/node-logger": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@types/node": ^16.0.0 "@types/react": ^16.14.34 @@ -5793,8 +5853,7 @@ __metadata: "@storybook/core-events": 7.0.0-alpha.53 "@storybook/csf": next "@storybook/docs-tools": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@types/color-convert": ^2.0.0 @@ -5850,7 +5909,7 @@ __metadata: "@storybook/mdx2-csf": next "@storybook/node-logger": 7.0.0-alpha.53 "@storybook/preview": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/source-loader": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@types/express": ^4.17.13 @@ -5881,7 +5940,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/builder-webpack5@workspace:lib/builder-webpack5" dependencies: - "@babel/core": ^7.20.2 + "@babel/core": ^7.12.10 "@storybook/addons": 7.0.0-alpha.53 "@storybook/api": 7.0.0-alpha.53 "@storybook/channel-postmessage": 7.0.0-alpha.53 @@ -5895,7 +5954,7 @@ __metadata: "@storybook/core-webpack": 7.0.0-alpha.53 "@storybook/node-logger": 7.0.0-alpha.53 "@storybook/preview": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/router": 7.0.0-alpha.53 "@storybook/store": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 @@ -6040,23 +6099,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/client-api@workspace:lib/client-api" dependencies: - "@storybook/addons": 7.0.0-alpha.53 "@storybook/client-logger": 7.0.0-alpha.53 - "@storybook/core-common": 7.0.0-alpha.53 - "@storybook/csf": next - "@storybook/store": 7.0.0-alpha.53 - "@storybook/types": 7.0.0-alpha.53 - "@types/qs": ^6.9.5 - "@types/webpack-env": ^1.16.4 - global: ^4.4.0 - qs: ^6.10.0 - synchronous-promise: ^2.0.15 - ts-dedent: ^2.0.0 - typescript: ^4.9.3 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + "@storybook/preview-api": 7.0.0-alpha.53 languageName: unknown linkType: soft @@ -6135,23 +6179,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-client@workspace:lib/core-client" dependencies: - "@storybook/addons": 7.0.0-alpha.53 - "@storybook/channel-postmessage": 7.0.0-alpha.53 - "@storybook/channel-websocket": 7.0.0-alpha.53 - "@storybook/channels": 7.0.0-alpha.53 - "@storybook/client-api": 7.0.0-alpha.53 "@storybook/client-logger": 7.0.0-alpha.53 - "@storybook/core-events": 7.0.0-alpha.53 - "@storybook/csf": next - "@storybook/preview-web": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 - "@storybook/types": 7.0.0-alpha.53 - global: ^4.4.0 - typescript: ^4.9.3 - util-deprecate: ^1.0.2 - peerDependenciesMeta: - typescript: - optional: true + "@storybook/preview-api": 7.0.0-alpha.53 languageName: unknown linkType: soft @@ -6223,14 +6252,13 @@ __metadata: "@discoveryjs/json-ext": ^0.5.3 "@storybook/builder-manager": 7.0.0-alpha.53 "@storybook/builder-webpack5": 7.0.0-alpha.53 - "@storybook/core-client": 7.0.0-alpha.53 "@storybook/core-common": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 "@storybook/csf": next "@storybook/csf-tools": 7.0.0-alpha.53 "@storybook/docs-mdx": next "@storybook/node-logger": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/telemetry": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@types/compression": ^1.7.0 @@ -6363,9 +6391,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/docs-tools@workspace:lib/docs-tools" dependencies: - "@babel/core": ^7.20.2 + "@babel/core": ^7.12.10 "@storybook/core-common": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 doctrine: ^3.0.0 jest-specific-snapshot: ^6.0.0 @@ -6380,10 +6408,9 @@ __metadata: resolution: "@storybook/ember@workspace:frameworks/ember" dependencies: "@storybook/builder-webpack5": 7.0.0-alpha.53 - "@storybook/core-client": 7.0.0-alpha.53 "@storybook/core-common": 7.0.0-alpha.53 "@storybook/docs-tools": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 ember-source: ~3.28.1 global: ^4.4.0 @@ -6444,8 +6471,7 @@ __metadata: "@storybook/addons": 7.0.0-alpha.53 "@storybook/core-client": 7.0.0-alpha.53 "@storybook/docs-tools": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 react: 16.14.0 @@ -6465,6 +6491,7 @@ __metadata: "@storybook/channels": 7.0.0-alpha.53 "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 core-js: ^3.8.2 global: ^4.4.0 typescript: ^4.9.3 @@ -6564,6 +6591,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/components": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/router": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 @@ -6613,6 +6641,7 @@ __metadata: "@storybook/core-common": 7.0.0-alpha.53 "@storybook/node-logger": 7.0.0-alpha.53 "@storybook/preset-react-webpack": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/react": 7.0.0-alpha.53 "@types/node": ^16.0.0 find-up: ^5.0.0 @@ -6696,7 +6725,7 @@ __metadata: dependencies: "@storybook/addons": 7.0.0-alpha.53 "@storybook/core-client": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 preact: ^10.5.13 @@ -6891,30 +6920,43 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-web@7.0.0-alpha.53, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web": +"@storybook/preview-api@7.0.0-alpha.53, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": version: 0.0.0-use.local - resolution: "@storybook/preview-web@workspace:lib/preview-web" + resolution: "@storybook/preview-api@workspace:lib/preview-api" dependencies: + "@jest/globals": ^26.6.2 "@storybook/addons": 7.0.0-alpha.53 "@storybook/channel-postmessage": 7.0.0-alpha.53 "@storybook/channels": 7.0.0-alpha.53 "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/csf": next "@storybook/types": 7.0.0-alpha.53 + "@types/qs": ^6.9.5 + "@types/webpack-env": ^1.16.4 ansi-to-html: ^0.6.11 + dequal: ^2.0.2 global: ^4.4.0 lodash: ^4.17.21 + memoizerific: ^1.11.3 qs: ^6.10.0 - react: 16.14.0 + slash: ^3.0.0 synchronous-promise: ^2.0.15 ts-dedent: ^2.0.0 - typescript: ^4.9.3 util-deprecate: ^1.0.2 languageName: unknown linkType: soft -"@storybook/preview@7.0.0-alpha.53, @storybook/preview@workspace:lib/preview": +"@storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web": + version: 0.0.0-use.local + resolution: "@storybook/preview-web@workspace:lib/preview-web" + dependencies: + "@storybook/client-logger": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 + languageName: unknown + linkType: soft + +"@storybook/preview@7.0.0-alpha.53, @storybook/preview@workspace:*, @storybook/preview@workspace:lib/preview": version: 0.0.0-use.local resolution: "@storybook/preview@workspace:lib/preview" dependencies: @@ -6923,11 +6965,10 @@ __metadata: "@storybook/channel-websocket": 7.0.0-alpha.53 "@storybook/channels": 7.0.0-alpha.53 "@storybook/client-logger": 7.0.0-alpha.53 - "@storybook/core-client": 7.0.0-alpha.53 "@storybook/core-common": 7.0.0-alpha.53 "@storybook/core-events": 7.0.0-alpha.53 "@storybook/csf": next - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/router": 7.0.0-alpha.53 "@storybook/theming": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 @@ -6980,8 +7021,7 @@ __metadata: "@storybook/builder-vite": 7.0.0-alpha.53 "@storybook/channel-postmessage": 7.0.0-alpha.53 "@storybook/channel-websocket": 7.0.0-alpha.53 - "@storybook/client-api": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/react": 7.0.0-alpha.53 "@types/node": ^16.0.0 "@vitejs/plugin-react": ^2.0.0 @@ -7027,7 +7067,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/core-client": 7.0.0-alpha.53 "@storybook/docs-tools": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@types/estree": ^0.0.51 "@types/node": ^16.0.0 @@ -7150,6 +7190,8 @@ __metadata: "@storybook/preset-vue-webpack": "workspace:*" "@storybook/preset-vue3-webpack": "workspace:*" "@storybook/preset-web-components-webpack": "workspace:*" + "@storybook/preview": "workspace:*" + "@storybook/preview-api": "workspace:*" "@storybook/preview-web": "workspace:*" "@storybook/react": "workspace:*" "@storybook/react-vite": "workspace:*" @@ -7387,8 +7429,7 @@ __metadata: dependencies: "@storybook/addons": 7.0.0-alpha.53 "@storybook/core-client": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 react: 16.14.0 @@ -7419,23 +7460,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/store@workspace:lib/store" dependencies: - "@storybook/addons": 7.0.0-alpha.53 "@storybook/client-logger": 7.0.0-alpha.53 - "@storybook/core-events": 7.0.0-alpha.53 - "@storybook/csf": next - "@storybook/types": 7.0.0-alpha.53 - dequal: ^2.0.2 - global: ^4.4.0 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - slash: ^3.0.0 - synchronous-promise: ^2.0.15 - ts-dedent: ^2.0.0 - typescript: ^4.9.3 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + "@storybook/preview-api": 7.0.0-alpha.53 languageName: unknown linkType: soft @@ -7448,9 +7474,8 @@ __metadata: "@storybook/builder-vite": 7.0.0-alpha.53 "@storybook/channel-postmessage": 7.0.0-alpha.53 "@storybook/channel-websocket": 7.0.0-alpha.53 - "@storybook/client-api": 7.0.0-alpha.53 "@storybook/node-logger": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/svelte": 7.0.0-alpha.53 "@sveltejs/vite-plugin-svelte": ^1.0.0 "@types/node": ^16.0.0 @@ -7495,7 +7520,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/core-client": 7.0.0-alpha.53 "@storybook/docs-tools": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 expect-type: ^0.14.2 global: ^4.4.0 @@ -7586,9 +7611,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/types@workspace:lib/types" dependencies: - "@babel/core": ^7.20.2 + "@babel/core": ^7.12.10 + "@storybook/channels": 7.0.0-alpha.53 "@storybook/csf": next - "@types/babel__core": ^7.1.20 + "@types/babel__core": ^7.0.0 "@types/express": ^4.7.0 "@types/node": ^16.0.0 express: ^4.17.1 @@ -7606,10 +7632,9 @@ __metadata: "@storybook/builder-vite": 7.0.0-alpha.53 "@storybook/channel-postmessage": 7.0.0-alpha.53 "@storybook/channel-websocket": 7.0.0-alpha.53 - "@storybook/client-api": 7.0.0-alpha.53 "@storybook/core-common": 7.0.0-alpha.53 "@storybook/core-server": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/vue": 7.0.0-alpha.53 magic-string: ^0.26.1 typescript: ^4.9.3 @@ -7654,9 +7679,8 @@ __metadata: "@storybook/builder-vite": 7.0.0-alpha.53 "@storybook/channel-postmessage": 7.0.0-alpha.53 "@storybook/channel-websocket": 7.0.0-alpha.53 - "@storybook/client-api": 7.0.0-alpha.53 "@storybook/core-server": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/vue3": 7.0.0-alpha.53 "@types/node": ^16.0.0 "@vitejs/plugin-vue": ^3.0.0 @@ -7697,7 +7721,7 @@ __metadata: "@storybook/addons": 7.0.0-alpha.53 "@storybook/core-client": 7.0.0-alpha.53 "@storybook/docs-tools": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 "@vue/vue3-jest": 29 global: ^4.4.0 @@ -7726,7 +7750,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/core-client": 7.0.0-alpha.53 "@storybook/docs-tools": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 react: 16.14.0 @@ -7755,10 +7779,9 @@ __metadata: "@storybook/builder-vite": 7.0.0-alpha.53 "@storybook/channel-postmessage": 7.0.0-alpha.53 "@storybook/channel-websocket": 7.0.0-alpha.53 - "@storybook/client-api": 7.0.0-alpha.53 "@storybook/core-server": 7.0.0-alpha.53 "@storybook/node-logger": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/web-components": 7.0.0-alpha.53 "@types/node": ^16.0.0 magic-string: ^0.26.1 @@ -7795,8 +7818,7 @@ __metadata: "@storybook/client-logger": 7.0.0-alpha.53 "@storybook/core-client": 7.0.0-alpha.53 "@storybook/docs-tools": 7.0.0-alpha.53 - "@storybook/preview-web": 7.0.0-alpha.53 - "@storybook/store": 7.0.0-alpha.53 + "@storybook/preview-api": 7.0.0-alpha.53 "@storybook/types": 7.0.0-alpha.53 global: ^4.4.0 lit: 2.3.1 @@ -7818,15 +7840,15 @@ __metadata: linkType: hard "@sveltejs/vite-plugin-svelte@npm:^1.0.0": - version: 1.2.0 - resolution: "@sveltejs/vite-plugin-svelte@npm:1.2.0" + version: 1.3.1 + resolution: "@sveltejs/vite-plugin-svelte@npm:1.3.1" dependencies: debug: ^4.3.4 deepmerge: ^4.2.2 kleur: ^4.1.5 magic-string: ^0.26.7 svelte-hmr: ^0.15.1 - vitefu: ^0.2.1 + vitefu: ^0.2.2 peerDependencies: diff-match-patch: ^1.0.5 svelte: ^3.44.0 @@ -7834,7 +7856,7 @@ __metadata: peerDependenciesMeta: diff-match-patch: optional: true - checksum: 48611772657a77c9f762bc6712d343f090e407178a114d144b76b90cad6073dcd7c4f247eac4586306e15caa7ff6a0bcf0a7423e3ec7f211634f43a7282ed453 + checksum: c10695e84a057d96d056082cd77f2c0ae0e88b309cce38fcab76f807674bf0b8b982d805f0c0c5b9dd29996336750c2d414d89cc173de46f6e023384423aaee0 languageName: node linkType: hard @@ -7990,7 +8012,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.20": +"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.20": version: 7.1.20 resolution: "@types/babel__core@npm:7.1.20" dependencies: @@ -8408,9 +8430,9 @@ __metadata: linkType: hard "@types/lodash@npm:^4.14.167": - version: 4.14.189 - resolution: "@types/lodash@npm:4.14.189" - checksum: af4a0178e52e55682c7fc5b7376eed1e64ce3879800940b1e608e14e97566fcdc9c830bf0db3c19052bfdf17129062fa02044ed4b8a30381fe16384de6ca307e + version: 4.14.190 + resolution: "@types/lodash@npm:4.14.190" + checksum: 512ce560e96bf1090c80bacfcb1b472311a549283efd6009b96c7b9284d8cfaed3950489d0e6ea136930d590dcef65869fe4e9ea94437b2753502fa77fcfd2e6 languageName: node linkType: hard @@ -8993,11 +9015,11 @@ __metadata: linkType: hard "@types/yargs@npm:^17.0.8": - version: 17.0.13 - resolution: "@types/yargs@npm:17.0.13" + version: 17.0.14 + resolution: "@types/yargs@npm:17.0.14" dependencies: "@types/yargs-parser": "*" - checksum: 5005e1e7408b9fea96c356becf19256f1a9bca02120852d3c0089ba7123528b0b6891185e9c92bac25cb5c04090a7a714b201523a6bf4a8a226852205c631208 + checksum: e7a5980bfcee2087a81af7e1dd0b561fe7837051c579aa644e09abc798c6a7456a56062d52cf3217d30e715156ce696b6eaf66539ea56d276e15ee7522a4bf40 languageName: node linkType: hard @@ -12053,17 +12075,17 @@ __metadata: linkType: hard "cacheable-request@npm:^10.2.1": - version: 10.2.2 - resolution: "cacheable-request@npm:10.2.2" + version: 10.2.3 + resolution: "cacheable-request@npm:10.2.3" dependencies: "@types/http-cache-semantics": ^4.0.1 get-stream: ^6.0.1 http-cache-semantics: ^4.1.0 - keyv: ^4.5.0 + keyv: ^4.5.2 mimic-response: ^4.0.0 - normalize-url: ^7.2.0 + normalize-url: ^8.0.0 responselike: ^3.0.0 - checksum: 52ee7cb316b05a03a5e959d26bff724c1b669351a7386bf31603467d3e57b60be9716347b327c8ae1860fcdf40d88377d0af99ef536dfb732a0b1bafebd83ee9 + checksum: 437570efb4fdc511497a6379d801c003ab6aa7e10605fec425177c95fb597c43ceb5fb3614d1f2f56bbe5d7d0467ada7ebbe0f39b4c174f27f1ac296f0db1e46 languageName: node linkType: hard @@ -12445,9 +12467,9 @@ __metadata: linkType: hard "ci-info@npm:^3.2.0": - version: 3.6.1 - resolution: "ci-info@npm:3.6.1" - checksum: 7d5147d627590157b340a795e97b23e20b9633ea34ccc943ef4dfae4ab5cc50b9a83b7e6c513b99f864dc5cca60b4d5fdbfc063381a02730b2bf6cd514af3949 + version: 3.6.2 + resolution: "ci-info@npm:3.6.2" + checksum: 1ed4294b0a02f69622d32247c833db73e5562776d50fda20f9a9c76fe023bf8f428f1dbddb8fe29a17cefd8eccb5a66d4c6fa762b6b0a9414af0f676d051c1ef languageName: node linkType: hard @@ -14251,6 +14273,13 @@ __metadata: languageName: node linkType: hard +"diff-sequences@npm:^26.6.2": + version: 26.6.2 + resolution: "diff-sequences@npm:26.6.2" + checksum: a576b78f542377ce2bb032aa91aaf12376c6f562f79b2570f5fe16b4c18acff78de144ae44f0d86bedfe9c29ef38aa027db963850213e07bbc1c1a3b2834e861 + languageName: node + linkType: hard + "diff-sequences@npm:^28.1.1": version: 28.1.1 resolution: "diff-sequences@npm:28.1.1" @@ -15003,12 +15032,12 @@ __metadata: linkType: hard "enhanced-resolve@npm:^5.0.0, enhanced-resolve@npm:^5.10.0, enhanced-resolve@npm:^5.7.0": - version: 5.10.0 - resolution: "enhanced-resolve@npm:5.10.0" + version: 5.12.0 + resolution: "enhanced-resolve@npm:5.12.0" dependencies: graceful-fs: ^4.2.4 tapable: ^2.2.0 - checksum: 697c066552dadde9ea8ec7068677711dd5d6c49434b5ff96b2de2068a65060ffca32629abb899a86cca5fcb6b067d88119d1a69c7c2082e3a09c1165f760ad87 + checksum: 5738924cfe3641d04b89c2856fee3d109d7bd71bbe234fb7f54843dda65f293e5f3eee6d5970ced70dbb09016085b961e60d1eb26cac72a21044479954b6cdfd languageName: node linkType: hard @@ -16474,6 +16503,20 @@ __metadata: languageName: node linkType: hard +"expect@npm:^26.6.2": + version: 26.6.2 + resolution: "expect@npm:26.6.2" + dependencies: + "@jest/types": ^26.6.2 + ansi-styles: ^4.0.0 + jest-get-type: ^26.3.0 + jest-matcher-utils: ^26.6.2 + jest-message-util: ^26.6.2 + jest-regex-util: ^26.0.0 + checksum: e84ab6c96e99eaf92586e5c554317413352082b66be952ba338bf690e15106c0b6350ac99d0d66237d675cc75963811255120d47172a8e764b1d6a9ae2b6b1b4 + languageName: node + linkType: hard + "expect@npm:^28.1.3": version: 28.1.3 resolution: "expect@npm:28.1.3" @@ -20558,6 +20601,18 @@ __metadata: languageName: node linkType: hard +"jest-diff@npm:^26.6.2": + version: 26.6.2 + resolution: "jest-diff@npm:26.6.2" + dependencies: + chalk: ^4.0.0 + diff-sequences: ^26.6.2 + jest-get-type: ^26.3.0 + pretty-format: ^26.6.2 + checksum: 3a9c88c8f308487059788ab1199e12f9b4657168964a2307573760b4d41ab5b851e5bef70125ef5ceddc1e201d6753d6ceae88994c197990dd9307cb7d94b9a1 + languageName: node + linkType: hard + "jest-diff@npm:^28.1.3": version: 28.1.3 resolution: "jest-diff@npm:28.1.3" @@ -20691,6 +20746,13 @@ __metadata: languageName: node linkType: hard +"jest-get-type@npm:^26.3.0": + version: 26.3.0 + resolution: "jest-get-type@npm:26.3.0" + checksum: 112fc7f962d1c4625a51b6ccfe6e9c8e54ab80816bf8dbf2b1bf25d12c0f75c74ebad0c2f37622aea81019a2087451bfb12a46619ed6717e64ee875ea2de5520 + languageName: node + linkType: hard + "jest-get-type@npm:^28.0.2": version: 28.0.2 resolution: "jest-get-type@npm:28.0.2" @@ -20802,6 +20864,18 @@ __metadata: languageName: node linkType: hard +"jest-matcher-utils@npm:^26.6.2": + version: 26.6.2 + resolution: "jest-matcher-utils@npm:26.6.2" + dependencies: + chalk: ^4.0.0 + jest-diff: ^26.6.2 + jest-get-type: ^26.3.0 + pretty-format: ^26.6.2 + checksum: 1303fc4dfd80848483b64bafc99beb31678653ad3f34b4c23e982a16016aec1f8a7de4a583044d9c43e59ee7e68e07c57f3a8b51e40fbefe42eafad45cc725ed + languageName: node + linkType: hard + "jest-matcher-utils@npm:^28.1.3": version: 28.1.3 resolution: "jest-matcher-utils@npm:28.1.3" @@ -20826,6 +20900,23 @@ __metadata: languageName: node linkType: hard +"jest-message-util@npm:^26.6.2": + version: 26.6.2 + resolution: "jest-message-util@npm:26.6.2" + dependencies: + "@babel/code-frame": ^7.0.0 + "@jest/types": ^26.6.2 + "@types/stack-utils": ^2.0.0 + chalk: ^4.0.0 + graceful-fs: ^4.2.4 + micromatch: ^4.0.2 + pretty-format: ^26.6.2 + slash: ^3.0.0 + stack-utils: ^2.0.2 + checksum: f6138d67154137cf3e985b2b469d0c78846cce787fed16b107c177fc9c6eb2606b7bce8e88d2a6bc830262d77469ecf26c70925cefc98dee83b5e8ed08981ff5 + languageName: node + linkType: hard + "jest-message-util@npm:^28.1.1, jest-message-util@npm:^28.1.3": version: 28.1.3 resolution: "jest-message-util@npm:28.1.3" @@ -20860,6 +20951,16 @@ __metadata: languageName: node linkType: hard +"jest-mock@npm:^26.6.2": + version: 26.6.2 + resolution: "jest-mock@npm:26.6.2" + dependencies: + "@jest/types": ^26.6.2 + "@types/node": "*" + checksum: cf77b49efe76cdedc63363ccdbae8bc68e0301fbded669e7b45647b7b7c1dce90985cf6a3a13da161f644523d7d0aad03184c6f39302ee4b52f954a1de37960f + languageName: node + linkType: hard + "jest-mock@npm:^27.0.6, jest-mock@npm:^27.3.0": version: 27.5.1 resolution: "jest-mock@npm:27.5.1" @@ -20948,6 +21049,13 @@ __metadata: languageName: node linkType: hard +"jest-regex-util@npm:^26.0.0": + version: 26.0.0 + resolution: "jest-regex-util@npm:26.0.0" + checksum: 988675764a08945b90f48e6f5a8640b0d9885a977f100a168061d10037d53808a6cdb7dc8cb6fe9b1332f0523b42bf3edbb6d2cc6c7f7ba582d05d432efb3e60 + languageName: node + linkType: hard + "jest-regex-util@npm:^28.0.2": version: 28.0.2 resolution: "jest-regex-util@npm:28.0.2" @@ -21238,7 +21346,7 @@ __metadata: languageName: node linkType: hard -"jest-util@npm:^26.1.0": +"jest-util@npm:^26.1.0, jest-util@npm:^26.6.2": version: 26.6.2 resolution: "jest-util@npm:26.6.2" dependencies: @@ -21929,7 +22037,7 @@ __metadata: languageName: node linkType: hard -"keyv@npm:^4.5.0": +"keyv@npm:^4.5.2": version: 4.5.2 resolution: "keyv@npm:4.5.2" dependencies: @@ -24517,10 +24625,10 @@ __metadata: languageName: node linkType: hard -"normalize-url@npm:^7.2.0": - version: 7.2.0 - resolution: "normalize-url@npm:7.2.0" - checksum: d7f76bdd2b9a2ad06036a591cee2ca68794a0cfdc466b0be36f1b26c16963a6fa1627f97c852ef1d933c4ec3361473ea2a37cb8695a930e43f8b443953a2e415 +"normalize-url@npm:^8.0.0": + version: 8.0.0 + resolution: "normalize-url@npm:8.0.0" + checksum: 09582d56acd562d89849d9239852c2aff225c72be726556d6883ff36de50006803d32a023c10e917bcc1c55f73f3bb16434f67992fe9b61906a3db882192753c languageName: node linkType: hard @@ -26587,7 +26695,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:2.7.1, prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.7.1": +"prettier@npm:2.7.1": version: 2.7.1 resolution: "prettier@npm:2.7.1" bin: @@ -26596,6 +26704,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.7.1": + version: 2.8.0 + resolution: "prettier@npm:2.8.0" + bin: + prettier: bin-prettier.js + checksum: bfb843c82d74e4f79945b7f29c9d5de483bc0f1de8c9f41bbafd7e08dbe71f81e446cbe293681edea60ebec6609d8d0c7e7b7dff52972b54e77784eb687dad1a + languageName: node + linkType: hard + "pretty-bytes@npm:^5.3.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0" @@ -30351,7 +30468,7 @@ __metadata: languageName: node linkType: hard -"stack-utils@npm:^2.0.3": +"stack-utils@npm:^2.0.2, stack-utils@npm:^2.0.3": version: 2.0.6 resolution: "stack-utils@npm:2.0.6" dependencies: @@ -33131,15 +33248,15 @@ __metadata: languageName: node linkType: hard -"vitefu@npm:^0.2.1": - version: 0.2.1 - resolution: "vitefu@npm:0.2.1" +"vitefu@npm:^0.2.2": + version: 0.2.2 + resolution: "vitefu@npm:0.2.2" peerDependencies: vite: ^3.0.0 peerDependenciesMeta: vite: optional: true - checksum: 0258962eecf8261129ad8b6323b96a87f1d9c088715a9c8ecc1fbacdc5539d7b0f1d37548c1bb120c01dd8d49d450524bbfdd97b2fe4b115e04f1c4aecd20a66 + checksum: 0016b133eb78eea71004c4848260848d5c95ec57deba0264f7a49df97753d1850f6ce6846586acb1b1ac3e8dfbd52f5cb6ed42b38fe98293dc0dda7f71242d05 languageName: node linkType: hard diff --git a/docs/snippets/angular/component-story-highlight-addon.ts.mdx b/docs/snippets/angular/component-story-highlight-addon.ts.mdx index be3afaf3379..1786f86192e 100644 --- a/docs/snippets/angular/component-story-highlight-addon.ts.mdx +++ b/docs/snippets/angular/component-story-highlight-addon.ts.mdx @@ -3,7 +3,7 @@ import { componentWrapperDecorator } from '@storybook/angular'; import type { Meta, StoryObj } from '@storybook/angular'; -import { useChannel } from '@storybook/addons'; +import { useChannel } from '@storybook/preview-api'; import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; import { Card } from './card.component'; diff --git a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx index 8a2f9b84482..c3df6931a91 100644 --- a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx +++ b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx @@ -8,7 +8,7 @@ import { useGlobals } from '@storybook/api'; import { IconButton, Icons } from '@storybook/components'; -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; const ExampleToolbar = () => { const [globals, updateGlobals] = useGlobals(); diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx index 338c010e9e1..01383d4c64d 100644 --- a/docs/snippets/common/my-addon-initial-panel-state.js.mdx +++ b/docs/snippets/common/my-addon-initial-panel-state.js.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { addons, types } from '@storybook/addons'; +import { addons, types } from '@storybook/preview-api'; import { AddonPanel } from '@storybook/components'; diff --git a/docs/snippets/common/storybook-addon-panel-example.js.mdx b/docs/snippets/common/storybook-addon-panel-example.js.mdx index 535e9ded807..9a23eed0466 100644 --- a/docs/snippets/common/storybook-addon-panel-example.js.mdx +++ b/docs/snippets/common/storybook-addon-panel-example.js.mdx @@ -5,7 +5,7 @@ import React from 'react'; import { AddonPanel } from '@storybook/components'; -import { addons, types } from '@storybook/addons'; +import { addons, types } from '@storybook/preview-api'; import { useGlobals } from '@storybook/api'; diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx index e4d97e32d68..f3239959597 100644 --- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx +++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { addons, types } from '@storybook/addons'; +import { addons, types } from '@storybook/preview-api'; import { AddonPanel } from '@storybook/components'; diff --git a/docs/snippets/common/storybook-addon-tab-example.js.mdx b/docs/snippets/common/storybook-addon-tab-example.js.mdx index 44394491740..3fffcb8e0ff 100644 --- a/docs/snippets/common/storybook-addon-tab-example.js.mdx +++ b/docs/snippets/common/storybook-addon-tab-example.js.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { addons, type types } from '@storybook/addons'; +import { addons, type types } from '@storybook/preview-api'; addons.register('my/tab', () => { addons.add('my-panel-addon/tab', { diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx index 7bd7c605b20..8e6085373b6 100644 --- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx +++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { addons, types } from '@storybook/addons'; +import { addons, types } from '@storybook/preview-api'; import { Icons, IconButton } from '@storybook/components'; diff --git a/docs/snippets/common/storybook-addons-api-imports.js.mdx b/docs/snippets/common/storybook-addons-api-imports.js.mdx index 29d715e750a..149ef7ce462 100644 --- a/docs/snippets/common/storybook-addons-api-imports.js.mdx +++ b/docs/snippets/common/storybook-addons-api-imports.js.mdx @@ -1,5 +1,5 @@ ```js // .storybook/my-addon/manager.js -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; ``` diff --git a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx index 924a0b4338f..a64d2ad8e5a 100644 --- a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx +++ b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/my-addon/manager.js -import { makeDecorator } from '@storybook/addons'; +import { makeDecorator } from '@storybook/preview-api'; export makeDecorator({ name: 'withSomething', diff --git a/docs/snippets/common/storybook-addons-api-register.js.mdx b/docs/snippets/common/storybook-addons-api-register.js.mdx index 96bfa34f083..e1c84a00428 100644 --- a/docs/snippets/common/storybook-addons-api-register.js.mdx +++ b/docs/snippets/common/storybook-addons-api-register.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/my-addon/manager.js -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/preview-api'; // Register the addon with a unique name. addons.register('my-organisation/my-addon', (api) => {}); diff --git a/docs/snippets/react/component-story-highlight-addon.js.mdx b/docs/snippets/react/component-story-highlight-addon.js.mdx index 0c68f53d98a..db3e9abfe4c 100644 --- a/docs/snippets/react/component-story-highlight-addon.js.mdx +++ b/docs/snippets/react/component-story-highlight-addon.js.mdx @@ -2,7 +2,7 @@ // Card.stories.js|jsx import React, { useEffect } from 'react'; -import { useChannel } from '@storybook/addons'; +import { useChannel } from '@storybook/preview-api'; import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; import { Card } form './Card'; diff --git a/docs/snippets/vue/component-story-highlight-addon.js.mdx b/docs/snippets/vue/component-story-highlight-addon.js.mdx index 3bb3d0f30b6..9acba2faa66 100644 --- a/docs/snippets/vue/component-story-highlight-addon.js.mdx +++ b/docs/snippets/vue/component-story-highlight-addon.js.mdx @@ -1,7 +1,7 @@ ```js // Card.stories.js -import { useChannel } from '@storybook/addons'; +import { useChannel } from '@storybook/preview-api'; import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; import { Card } form './Card.vue'; diff --git a/docs/snippets/web-components/component-story-highlight-addon.js.mdx b/docs/snippets/web-components/component-story-highlight-addon.js.mdx index 4a8f436b4e4..2509855d6ca 100644 --- a/docs/snippets/web-components/component-story-highlight-addon.js.mdx +++ b/docs/snippets/web-components/component-story-highlight-addon.js.mdx @@ -2,7 +2,7 @@ // card-component.stories.js import { html } from 'lit-html'; -import { useChannel } from '@storybook/addons'; +import { useChannel } from '@storybook/preview-api'; import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; import './card-component'; diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts index 9da70c78d03..17aaf16ac29 100755 --- a/scripts/prepare/bundle.ts +++ b/scripts/prepare/bundle.ts @@ -92,7 +92,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { c.platform = platform || 'browser'; c.legalComments = 'none'; c.minifyWhitespace = optimized; - c.minifyIdentifiers = optimized; + c.minifyIdentifiers = false; c.minifySyntax = optimized; /* eslint-enable no-param-reassign */ }, diff --git a/scripts/prepare/facade.ts b/scripts/prepare/facade.ts new file mode 100755 index 00000000000..d43d47ef89a --- /dev/null +++ b/scripts/prepare/facade.ts @@ -0,0 +1,91 @@ +#!/usr/bin/env ../../node_modules/.bin/ts-node + +import { join, parse } from 'path'; +import fs from 'fs-extra'; +import dedent from 'ts-dedent'; +import { build } from 'tsup'; +import slash from 'slash'; +import { exec } from '../utils/exec'; + +const hasFlag = (flags: string[], name: string) => !!flags.find((s) => s.startsWith(`--${name}`)); + +const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { + const { + name, + dependencies, + peerDependencies, + bundler: { entries, pre, post, shim }, + } = await fs.readJson(join(cwd, 'package.json')); + + const optimized = hasFlag(flags, 'optimized'); + const tsnodePath = join(__dirname, '..', 'node_modules', '.bin', 'ts-node'); + + if (pre) { + await exec(`${tsnodePath} ${pre}`, { cwd }); + } + + await Promise.all([ + ...entries.map(async (file: string) => { + const { name: entryName } = parse(file); + + const dtsPathName = join(process.cwd(), 'dist', `${entryName}.d.ts`); + const mjsPathName = join(process.cwd(), 'dist', `${entryName}.mjs`); + + await Promise.all([ + fs.ensureFile(dtsPathName).then(() => + fs.writeFile( + dtsPathName, + dedent` + // shim-mmode + export * from '${shim}'; + ` + ) + ), + fs.ensureFile(mjsPathName).then(() => + fs.writeFile( + mjsPathName, + dedent` + // shim-mmode + export * from '${shim}'; + ` + ) + ), + ]); + }), + build({ + entry: entries.map((e: string) => slash(join(cwd, e))), + outDir: join(process.cwd(), 'dist'), + format: ['cjs'], + target: 'node16', + platform: 'node', + external: [name, ...Object.keys(dependencies || {}), ...Object.keys(peerDependencies || {})], + + esbuildOptions: (c) => { + /* eslint-disable no-param-reassign */ + c.platform = 'node'; + c.legalComments = 'none'; + c.minifyWhitespace = optimized; + c.minifyIdentifiers = optimized; + c.minifySyntax = optimized; + /* eslint-enable no-param-reassign */ + }, + }), + ]); + + if (pre) { + await exec(`${tsnodePath} ${post}`, { cwd }); + } +}; + +const flags = process.argv.slice(2); +const cwd = process.cwd(); + +run({ cwd, flags }).catch((err: unknown) => { + // We can't let the stack try to print, it crashes in a way that sets the exit code to 0. + // Seems to have something to do with running JSON.parse() on binary / base64 encoded sourcemaps + // in @cspotcode/source-map-support + if (err instanceof Error) { + console.error(err.message); + } + process.exit(1); +}); diff --git a/scripts/tasks/compile.ts b/scripts/tasks/compile.ts index 0387e77a0d7..f09f8d1ab32 100644 --- a/scripts/tasks/compile.ts +++ b/scripts/tasks/compile.ts @@ -17,7 +17,7 @@ export const compile: Task = { async ready({ codeDir }, { link }) { try { // To check if the code has been compiled as we need, we check the compiled output of - // `@storybook/store`. To check if it has been built for publishing (i.e. `--no-link`), + // `@storybook/preview`. To check if it has been built for publishing (i.e. `--no-link`), // we check if it built types or references source files directly. const contents = await readFile(resolve(codeDir, './lib/preview/dist/runtime.d.ts'), 'utf8'); const isLinkedContents = contents.indexOf(linkedContents) !== -1;