From a7f29b71de39cf58234a7f01a758c2c1873d92ab Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 2 Nov 2022 12:48:26 +1100 Subject: [PATCH] Add `rootElement` to `Framework` and add `Framework` --- code/addons/actions/src/addArgsHelpers.ts | 6 +-- .../src/decorators/withBackground.ts | 6 +-- .../backgrounds/src/decorators/withGrid.ts | 7 +-- code/addons/docs/src/DocsRenderer.tsx | 4 +- .../addons/interactions/src/preset/preview.ts | 4 +- code/addons/measure/src/withMeasure.ts | 6 +-- code/addons/outline/src/withOutline.ts | 6 +-- .../storyshots-core/src/frameworks/Loader.ts | 6 +-- .../src/frameworks/configure.ts | 4 +- code/frameworks/angular/src/client/types.ts | 5 +- code/lib/addons/src/hooks.ts | 18 +++---- code/lib/cli/src/project_types.ts | 2 +- code/lib/cli/src/window.d.ts | 4 +- code/lib/client-api/src/ClientApi.ts | 16 +++---- code/lib/client-api/src/StoryStoreFacade.ts | 4 +- code/lib/core-client/src/start.ts | 14 ++---- .../src/argTypes/enhanceArgTypes.ts | 4 +- code/lib/preview-web/src/Preview.tsx | 4 +- code/lib/preview-web/src/PreviewWeb.test.ts | 4 +- code/lib/preview-web/src/PreviewWeb.tsx | 14 +++--- .../src/docs-context/DocsContext.ts | 4 +- .../src/docs-context/DocsContextProps.ts | 4 +- .../src/docs-context/DocsRenderFunction.ts | 4 +- code/lib/preview-web/src/render/Render.ts | 4 +- .../src/render/StandaloneDocsRender.test.ts | 4 +- .../src/render/StandaloneDocsRender.ts | 4 +- .../src/render/StoryRender.test.ts | 4 +- .../lib/preview-web/src/render/StoryRender.ts | 6 +-- .../src/render/TemplateDocsRender.test.ts | 4 +- .../src/render/TemplateDocsRender.ts | 4 +- code/lib/store/src/StoryStore.test.ts | 4 +- code/lib/store/src/StoryStore.ts | 4 +- code/lib/store/src/args.ts | 13 ++--- code/lib/store/src/csf/composeConfigs.ts | 4 +- .../src/csf/normalizeComponentAnnotations.ts | 4 +- .../src/csf/normalizeProjectAnnotations.ts | 4 +- code/lib/store/src/csf/normalizeStory.test.ts | 6 +-- code/lib/store/src/csf/normalizeStory.ts | 4 +- code/lib/store/src/csf/prepareStory.test.ts | 6 +-- code/lib/store/src/csf/prepareStory.ts | 4 +- code/lib/store/src/csf/processCSFFile.ts | 4 +- code/lib/store/src/csf/stepRunners.ts | 4 +- code/lib/store/src/csf/testing-utils/index.ts | 11 ++--- code/lib/store/src/decorators.test.ts | 6 +-- code/lib/store/src/decorators.ts | 6 +-- code/lib/store/src/inferArgTypes.ts | 4 +- code/lib/store/src/inferControls.ts | 4 +- code/lib/types/src/modules/addons.ts | 4 +- code/lib/types/src/modules/client-api.ts | 7 ++- code/lib/types/src/modules/csf.ts | 2 - code/lib/types/src/modules/store.ts | 48 +++++++++++-------- code/renderers/html/src/types.ts | 10 ++-- code/renderers/preact/src/types.ts | 5 +- .../react/src/docs/extractArgTypes.test.ts | 4 +- code/renderers/react/src/types.ts | 4 +- code/renderers/server/src/types.ts | 6 +-- .../svelte/src/docs/sourceDecorator.ts | 6 +-- code/renderers/svelte/src/types.ts | 4 +- code/renderers/vue/src/types.ts | 6 +-- code/renderers/vue3/src/types.ts | 4 +- code/renderers/web-components/src/types.ts | 6 +-- code/ui/blocks/src/blocks/Canvas.tsx | 4 +- code/ui/blocks/src/blocks/Docs.tsx | 4 +- code/ui/blocks/src/blocks/DocsContainer.tsx | 4 +- code/ui/blocks/src/blocks/DocsContext.ts | 4 +- code/ui/blocks/src/blocks/Story.tsx | 4 +- .../src/blocks/external/ExternalDocs.tsx | 6 +-- .../blocks/external/ExternalDocsContainer.tsx | 4 +- .../blocks/external/ExternalDocsContext.ts | 4 +- .../src/blocks/external/ExternalPreview.ts | 6 +-- code/ui/blocks/src/blocks/useStory.ts | 6 +-- 71 files changed, 211 insertions(+), 223 deletions(-) diff --git a/code/addons/actions/src/addArgsHelpers.ts b/code/addons/actions/src/addArgsHelpers.ts index dcc8d5504631..6a91c6e1ddef 100644 --- a/code/addons/actions/src/addArgsHelpers.ts +++ b/code/addons/actions/src/addArgsHelpers.ts @@ -1,4 +1,4 @@ -import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/types'; +import type { Args, Framework, ArgsEnhancer } from '@storybook/types'; import { action } from './runtime/action'; // interface ActionsParameter { @@ -14,7 +14,7 @@ const isInInitialArgs = (name: string, initialArgs: Args) => * matches a regex, such as `^on.*` for react-style `onClick` etc. */ -export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => { +export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => { const { initialArgs, argTypes, @@ -40,7 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (contex /** * Add action args for list of strings. */ -export const addActionsFromArgTypes: ArgsEnhancer = (context) => { +export const addActionsFromArgTypes: ArgsEnhancer = (context) => { const { initialArgs, argTypes, diff --git a/code/addons/backgrounds/src/decorators/withBackground.ts b/code/addons/backgrounds/src/decorators/withBackground.ts index 306f06398a3e..49500b8a7c12 100644 --- a/code/addons/backgrounds/src/decorators/withBackground.ts +++ b/code/addons/backgrounds/src/decorators/withBackground.ts @@ -1,5 +1,5 @@ import { useMemo, useEffect } from '@storybook/addons'; -import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; +import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; import { @@ -10,8 +10,8 @@ import { } from '../helpers'; export const withBackground = ( - StoryFn: StoryFunction, - context: StoryContext + StoryFn: StoryFunction, + context: StoryContext ) => { const { globals, parameters } = context; const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value; diff --git a/code/addons/backgrounds/src/decorators/withGrid.ts b/code/addons/backgrounds/src/decorators/withGrid.ts index 2aafc186c1ef..8e129dcf5af9 100644 --- a/code/addons/backgrounds/src/decorators/withGrid.ts +++ b/code/addons/backgrounds/src/decorators/withGrid.ts @@ -1,13 +1,10 @@ import { useMemo, useEffect } from '@storybook/addons'; -import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; +import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; import { clearStyles, addGridStyle } from '../helpers'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; -export const withGrid = ( - StoryFn: StoryFunction, - context: StoryContext -) => { +export const withGrid = (StoryFn: StoryFunction, context: StoryContext) => { const { globals, parameters } = context; const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid; const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true; diff --git a/code/addons/docs/src/DocsRenderer.tsx b/code/addons/docs/src/DocsRenderer.tsx index 83f9a2e49af1..fb55fcb33f06 100644 --- a/code/addons/docs/src/DocsRenderer.tsx +++ b/code/addons/docs/src/DocsRenderer.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import type { AnyFramework, Parameters } from '@storybook/types'; +import type { Framework, Parameters } from '@storybook/types'; import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web'; import { components as htmlComponents } from '@storybook/components'; import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks'; @@ -14,7 +14,7 @@ export const defaultComponents: Record = { ...HeadersMdx, }; -export class DocsRenderer { +export class DocsRenderer { public render: DocsRenderFunction; public unmount: (element: HTMLElement) => void; diff --git a/code/addons/interactions/src/preset/preview.ts b/code/addons/interactions/src/preset/preview.ts index 9faae0eefe73..d36c4bbf4f55 100644 --- a/code/addons/interactions/src/preset/preview.ts +++ b/code/addons/interactions/src/preset/preview.ts @@ -3,7 +3,7 @@ import { addons } from '@storybook/addons'; import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events'; import type { - AnyFramework, + Framework, ArgsEnhancer, PlayFunction, PlayFunctionContext, @@ -52,7 +52,7 @@ const addSpies = (id: string, val: any, key?: string): any => { return val; }; -const addActionsFromArgTypes: ArgsEnhancer = ({ id, initialArgs }) => +const addActionsFromArgTypes: ArgsEnhancer = ({ id, initialArgs }) => addSpies(id, initialArgs); export const argsEnhancers = [addActionsFromArgTypes]; diff --git a/code/addons/measure/src/withMeasure.ts b/code/addons/measure/src/withMeasure.ts index e68e8f4d79ee..e0a0fa1a101b 100644 --- a/code/addons/measure/src/withMeasure.ts +++ b/code/addons/measure/src/withMeasure.ts @@ -1,6 +1,6 @@ /* eslint-env browser */ import { useEffect } from '@storybook/addons'; -import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; +import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; import { drawSelectedElement } from './box-model/visualizer'; import { init, rescale, destroy } from './box-model/canvas'; import { deepElementFromPoint } from './util'; @@ -14,8 +14,8 @@ function findAndDrawElement(x: number, y: number) { } export const withMeasure = ( - StoryFn: StoryFunction, - context: StoryContext + StoryFn: StoryFunction, + context: StoryContext ) => { const { measureEnabled } = context.globals; diff --git a/code/addons/outline/src/withOutline.ts b/code/addons/outline/src/withOutline.ts index 037c8eb090e0..1fc20affb60d 100644 --- a/code/addons/outline/src/withOutline.ts +++ b/code/addons/outline/src/withOutline.ts @@ -1,13 +1,13 @@ import { useMemo, useEffect } from '@storybook/addons'; -import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; +import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types'; import { clearStyles, addOutlineStyles } from './helpers'; import { PARAM_KEY } from './constants'; import outlineCSS from './outlineCSS'; export const withOutline = ( - StoryFn: StoryFunction, - context: StoryContext + StoryFn: StoryFunction, + context: StoryContext ) => { const { globals } = context; const isActive = globals[PARAM_KEY] === true; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts index cf7656a05b52..c844fe11973d 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts @@ -1,11 +1,11 @@ -import type { AnyFramework, Addon_Loadable } from '@storybook/types'; +import type { Framework, Addon_Loadable } from '@storybook/types'; import type { ClientApi as ClientApiClass } from '@storybook/client-api'; import type { StoryshotsOptions } from '../api/StoryshotsOptions'; import type { SupportedFramework } from './SupportedFramework'; export type RenderTree = (story: any, context?: any, options?: any) => any; -export interface ClientApi extends ClientApiClass { +export interface ClientApi extends ClientApiClass { configure( loader: Addon_Loadable, module: NodeModule | false, @@ -19,7 +19,7 @@ export interface Loader { framework: SupportedFramework; renderTree: RenderTree; renderShallowTree: any; - storybook: ClientApi; + storybook: ClientApi; }; test: (options: StoryshotsOptions) => boolean; } diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts index a4f5340048d1..06049cf2915f 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import type { - AnyFramework, + Framework, ArgsEnhancer, ArgTypesEnhancer, CoreCommon_NormalizedStoriesSpecifier, @@ -87,7 +87,7 @@ function getConfigPathParts(input: string): Output { return { preview: configDir }; } -function configure( +function configure( options: { storybook: ClientApi; } & StoryshotsOptions diff --git a/code/frameworks/angular/src/client/types.ts b/code/frameworks/angular/src/client/types.ts index a12d98a5e0c9..36ebabc89edd 100644 --- a/code/frameworks/angular/src/client/types.ts +++ b/code/frameworks/angular/src/client/types.ts @@ -1,6 +1,7 @@ import { Parameters as DefaultParameters, StoryContext as DefaultStoryContext, + WebFramework, } from '@storybook/types'; export interface NgModuleMetadata { @@ -26,10 +27,10 @@ export interface StoryFnAngularReturnType { userDefinedTemplate?: boolean; } -export type AngularFramework = { +export interface AngularFramework extends WebFramework { component: any; storyResult: StoryFnAngularReturnType; -}; +} export type Parameters = DefaultParameters & { /** Uses legacy angular rendering engine that use dynamic component */ diff --git a/code/lib/addons/src/hooks.ts b/code/lib/addons/src/hooks.ts index 1598e1759c7a..c456c219451b 100644 --- a/code/lib/addons/src/hooks.ts +++ b/code/lib/addons/src/hooks.ts @@ -1,7 +1,7 @@ import global from 'global'; import { logger } from '@storybook/client-logger'; import type { - AnyFramework, + Framework, Args, DecoratorApplicator, DecoratorFunction, @@ -32,7 +32,7 @@ interface Effect { type AbstractFunction = (...args: any[]) => any; -export class HooksContext { +export class HooksContext { hookListsMap: WeakMap; mountedDecorators: Set; @@ -126,13 +126,13 @@ export class HooksContext { } } -function hookify( +function hookify( storyFn: LegacyStoryFn ): LegacyStoryFn; -function hookify( +function hookify( decorator: DecoratorFunction ): DecoratorFunction; -function hookify(fn: AbstractFunction) { +function hookify(fn: AbstractFunction) { return (...args: any[]) => { const { hooks }: { hooks: HooksContext } = typeof args[0] === 'function' ? args[1] : args[0]; @@ -177,7 +177,7 @@ function hookify(fn: AbstractFunction) { let numberOfRenders = 0; const RENDER_LIMIT = 25; export const applyHooks = - ( + ( applyDecorators: DecoratorApplicator ): DecoratorApplicator => (storyFn: LegacyStoryFn, decorators: DecoratorFunction[]) => { @@ -215,11 +215,11 @@ const areDepsEqual = (deps: any[], nextDeps: any[]) => const invalidHooksError = () => new Error('Storybook preview hooks can only be called inside decorators and story functions.'); -function getHooksContextOrNull(): HooksContext | null { +function getHooksContextOrNull(): HooksContext | null { return global.STORYBOOK_HOOKS_CONTEXT || null; } -function getHooksContextOrThrow(): HooksContext { +function getHooksContextOrThrow(): HooksContext { const hooks = getHooksContextOrNull(); if (hooks == null) { throw invalidHooksError(); @@ -404,7 +404,7 @@ export function useChannel(eventMap: EventMap, deps: any[] = []) { } /* Returns current story context */ -export function useStoryContext(): StoryContext { +export function useStoryContext(): StoryContext { const { currentContext } = getHooksContextOrThrow(); if (currentContext == null) { throw invalidHooksError(); diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index f24334a062e3..f68b92c1c5ff 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -277,7 +277,7 @@ export const supportedTemplates: TemplateConfiguration[] = [ ]; // A TemplateConfiguration that matches unsupported frameworks -// AnyFramework matchers can be added to this object to give +// Framework matchers can be added to this object to give // users an "Unsupported framework" message export const unsupportedTemplate: TemplateConfiguration = { preset: ProjectType.UNSUPPORTED, diff --git a/code/lib/cli/src/window.d.ts b/code/lib/cli/src/window.d.ts index 64dda386a29c..0adbb33da3b6 100644 --- a/code/lib/cli/src/window.d.ts +++ b/code/lib/cli/src/window.d.ts @@ -1,8 +1,8 @@ -import type { AnyFramework } from '@storybook/types'; +import type { Framework } from '@storybook/types'; import type { StoryStore } from '@storybook/client-api'; declare global { interface Window { - __STORYBOOK_STORY_STORE__: StoryStore; + __STORYBOOK_STORY_STORE__: StoryStore; } } diff --git a/code/lib/client-api/src/ClientApi.ts b/code/lib/client-api/src/ClientApi.ts index 7b84b30ca8ce..b36e5589a363 100644 --- a/code/lib/client-api/src/ClientApi.ts +++ b/code/lib/client-api/src/ClientApi.ts @@ -8,7 +8,7 @@ import type { Args, StepRunner, ArgTypes, - AnyFramework, + Framework, DecoratorFunction, Parameters, ArgTypesEnhancer, @@ -31,7 +31,7 @@ import { StoryStoreFacade } from './StoryStoreFacade'; // ClientApi (and StoreStore) are really singletons. However they are not created until the // relevant framework instanciates them via `start.js`. The good news is this happens right away. -let singleton: ClientApi; +let singleton: ClientApi; const warningAlternatives = { addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`, @@ -60,7 +60,7 @@ const checkMethod = (method: keyof typeof warningAlternatives) => { } }; -export const addDecorator = (decorator: DecoratorFunction) => { +export const addDecorator = (decorator: DecoratorFunction) => { checkMethod('addDecorator'); singleton.addDecorator(decorator); }; @@ -70,7 +70,7 @@ export const addParameters = (parameters: Parameters) => { singleton.addParameters(parameters); }; -export const addLoader = (loader: LoaderFunction) => { +export const addLoader = (loader: LoaderFunction) => { checkMethod('addLoader'); singleton.addLoader(loader); }; @@ -85,12 +85,12 @@ export const addArgTypes = (argTypes: ArgTypes) => { singleton.addArgTypes(argTypes); }; -export const addArgsEnhancer = (enhancer: ArgsEnhancer) => { +export const addArgsEnhancer = (enhancer: ArgsEnhancer) => { checkMethod('addArgsEnhancer'); singleton.addArgsEnhancer(enhancer); }; -export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => { +export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => { checkMethod('addArgTypesEnhancer'); singleton.addArgTypesEnhancer(enhancer); }; @@ -105,13 +105,13 @@ export const getGlobalRender = () => { return singleton.facade.projectAnnotations.render; }; -export const setGlobalRender = (render: StoryFn) => { +export const setGlobalRender = (render: StoryFn) => { checkMethod('setGlobalRender'); singleton.facade.projectAnnotations.render = render; }; const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']); -export class ClientApi { +export class ClientApi { facade: StoryStoreFacade; storyStore?: StoryStore; diff --git a/code/lib/client-api/src/StoryStoreFacade.ts b/code/lib/client-api/src/StoryStoreFacade.ts index 687e51f046a3..55c505890b0e 100644 --- a/code/lib/client-api/src/StoryStoreFacade.ts +++ b/code/lib/client-api/src/StoryStoreFacade.ts @@ -5,7 +5,7 @@ import { SynchronousPromise } from 'synchronous-promise'; import { toId, isExportStory, storyNameFromExport } from '@storybook/csf'; import type { Addon_IndexEntry, - AnyFramework, + Framework, ComponentId, DocsOptions, Parameters, @@ -21,7 +21,7 @@ import type { StoryStore } from '@storybook/store'; import { userOrAutoTitle, sortStoriesV6 } from '@storybook/store'; import { logger } from '@storybook/client-logger'; -export class StoryStoreFacade { +export class StoryStoreFacade { projectAnnotations: Store_NormalizedProjectAnnotations; entries: Record; diff --git a/code/lib/core-client/src/start.ts b/code/lib/core-client/src/start.ts index 06a0dc06f624..1e995e02a85d 100644 --- a/code/lib/core-client/src/start.ts +++ b/code/lib/core-client/src/start.ts @@ -2,13 +2,7 @@ import global from 'global'; import { ClientApi } from '@storybook/client-api'; import { PreviewWeb } from '@storybook/preview-web'; -import type { - AnyFramework, - ArgsStoryFn, - Loadable, - Path, - ProjectAnnotations, -} from '@storybook/types'; +import type { Framework, 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'; @@ -21,7 +15,7 @@ const removedApi = (name: string) => () => { throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`); }; -interface CoreClient_RendererImplementation { +interface CoreClient_RendererImplementation { decorateStory?: ProjectAnnotations['applyDecorators']; render?: ArgsStoryFn; } @@ -33,7 +27,7 @@ interface CoreClient_ClientAPIFacade { raw: (...args: any[]) => never; } -interface CoreClient_StartReturnValue { +interface CoreClient_StartReturnValue { /* deprecated */ forceReRender: () => void; /* deprecated */ @@ -42,7 +36,7 @@ interface CoreClient_StartReturnValue { clientApi: ClientApi | CoreClient_ClientAPIFacade; } -export function start( +export function start( renderToRoot: ProjectAnnotations['renderToRoot'], { decorateStory, render }: CoreClient_RendererImplementation = {} ): CoreClient_StartReturnValue { diff --git a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts index 62726be0f309..f339c4d68b67 100644 --- a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts +++ b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts @@ -1,7 +1,7 @@ -import type { AnyFramework, StoryContextForEnhancers } from '@storybook/types'; +import type { Framework, StoryContextForEnhancers } from '@storybook/types'; import { combineParameters } from '@storybook/store'; -export const enhanceArgTypes = ( +export const enhanceArgTypes = ( context: StoryContextForEnhancers ) => { const { diff --git a/code/lib/preview-web/src/Preview.tsx b/code/lib/preview-web/src/Preview.tsx index 2ea222ce8a74..81e1cfd14674 100644 --- a/code/lib/preview-web/src/Preview.tsx +++ b/code/lib/preview-web/src/Preview.tsx @@ -17,7 +17,7 @@ import { logger } from '@storybook/client-logger'; import type { Channel } from '@storybook/channels'; import { addons } from '@storybook/addons'; import type { - AnyFramework, + Framework, Args, Globals, Store_ModuleImportFn, @@ -44,7 +44,7 @@ export type MaybePromise = Promise | T; const renderToDOMDeprecated = deprecate(() => {}, `\`renderToDOM\` is deprecated, please rename to \`renderToRoot\``); -export class Preview { +export class Preview { serverChannel?: Channel; storyStore: StoryStore; diff --git a/code/lib/preview-web/src/PreviewWeb.test.ts b/code/lib/preview-web/src/PreviewWeb.test.ts index 25e90961218d..3fb256995dae 100644 --- a/code/lib/preview-web/src/PreviewWeb.test.ts +++ b/code/lib/preview-web/src/PreviewWeb.test.ts @@ -29,7 +29,7 @@ import { } from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; import { addons, mockChannel as createMockChannel } from '@storybook/addons'; -import type { AnyFramework } from '@storybook/types'; +import type { Framework } from '@storybook/types'; import type { ModuleImportFn, WebProjectAnnotations } from '@storybook/store'; import { mocked } from 'ts-jest/utils'; @@ -110,7 +110,7 @@ async function createAndRenderPreview({ getProjectAnnotations: inputGetProjectAnnotations = getProjectAnnotations, }: { importFn?: ModuleImportFn; - getProjectAnnotations?: () => WebProjectAnnotations; + getProjectAnnotations?: () => WebProjectAnnotations; } = {}) { const preview = new PreviewWeb(); await preview.initialize({ diff --git a/code/lib/preview-web/src/PreviewWeb.tsx b/code/lib/preview-web/src/PreviewWeb.tsx index 590b4bb35122..b525e8282c9b 100644 --- a/code/lib/preview-web/src/PreviewWeb.tsx +++ b/code/lib/preview-web/src/PreviewWeb.tsx @@ -19,7 +19,7 @@ import { } from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; import type { - AnyFramework, + Framework, Args, Globals, Store_ModuleImportFn, @@ -50,21 +50,21 @@ function focusInInput(event: Event) { return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null; } -type PossibleRender = +type PossibleRender = | StoryRender | TemplateDocsRender | StandaloneDocsRender; -function isStoryRender( +function isStoryRender( r: PossibleRender ): r is StoryRender { return r.type === 'story'; } -export class PreviewWeb< - TFramework extends AnyFramework, - TStorybookRoot = HTMLElement -> extends Preview { +export class PreviewWeb extends Preview< + TFramework, + TStorybookRoot +> { selectionStore: SelectionStore; view: View; diff --git a/code/lib/preview-web/src/docs-context/DocsContext.ts b/code/lib/preview-web/src/docs-context/DocsContext.ts index 325c3f35bfc9..cdfdd9214e9f 100644 --- a/code/lib/preview-web/src/docs-context/DocsContext.ts +++ b/code/lib/preview-web/src/docs-context/DocsContext.ts @@ -1,5 +1,5 @@ import type { - AnyFramework, + Framework, Store_CSFFile, Store_ModuleExport, Store_ModuleExports, @@ -13,7 +13,7 @@ import type { Channel } from '@storybook/channels'; import type { DocsContextProps } from './DocsContextProps'; -export class DocsContext +export class DocsContext implements DocsContextProps { private componentStoriesValue: Store_Story[]; diff --git a/code/lib/preview-web/src/docs-context/DocsContextProps.ts b/code/lib/preview-web/src/docs-context/DocsContextProps.ts index 49ffbe8a7557..481dc37ac8c5 100644 --- a/code/lib/preview-web/src/docs-context/DocsContextProps.ts +++ b/code/lib/preview-web/src/docs-context/DocsContextProps.ts @@ -1,5 +1,5 @@ import type { - AnyFramework, + Framework, Store_ModuleExport, Store_ModuleExports, Store_Story, @@ -9,7 +9,7 @@ import type { } from '@storybook/types'; import type { Channel } from '@storybook/channels'; -export interface DocsContextProps { +export interface DocsContextProps { /** * Register the CSF file that this docs entry represents. * Used by the `` block. diff --git a/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts b/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts index 5c2bd9792cf5..441b8d33d3e1 100644 --- a/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts +++ b/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts @@ -1,7 +1,7 @@ -import type { AnyFramework, Parameters } from '@storybook/types'; +import type { Framework, Parameters } from '@storybook/types'; import type { DocsContextProps } from './DocsContextProps'; -export type DocsRenderFunction = ( +export type DocsRenderFunction = ( docsContext: DocsContextProps, docsParameters: Parameters, element: HTMLElement, diff --git a/code/lib/preview-web/src/render/Render.ts b/code/lib/preview-web/src/render/Render.ts index d401c3bea7d7..ecfaf6a9fc74 100644 --- a/code/lib/preview-web/src/render/Render.ts +++ b/code/lib/preview-web/src/render/Render.ts @@ -1,4 +1,4 @@ -import type { StoryId, AnyFramework } from '@storybook/types'; +import type { StoryId, Framework } from '@storybook/types'; export type RenderType = 'story' | 'docs'; @@ -9,7 +9,7 @@ export type RenderType = 'story' | 'docs'; * - Tracking the state of the rendering as it moves between preparing, rendering and tearing down. * - Tracking what is rendered to know if a change requires re-rendering or teardown + recreation. */ -export interface Render { +export interface Render { type: RenderType; id: StoryId; isPreparing: () => boolean; diff --git a/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts b/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts index 07e98e462ade..df6733b7206b 100644 --- a/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts +++ b/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts @@ -1,6 +1,6 @@ import { jest, describe, it, expect } from '@jest/globals'; import { Channel } from '@storybook/channels'; -import type { AnyFramework, Addon_StandaloneDocsIndexEntry } from '@storybook/types'; +import type { Framework, Addon_StandaloneDocsIndexEntry } from '@storybook/types'; import type { StoryStore } from '@storybook/store'; import { PREPARE_ABORTED } from './Render'; @@ -36,7 +36,7 @@ describe('StandaloneDocsRender', () => { const render = new StandaloneDocsRender( new Channel(), - mockStore as unknown as StoryStore, + mockStore as unknown as StoryStore, entry ); diff --git a/code/lib/preview-web/src/render/StandaloneDocsRender.ts b/code/lib/preview-web/src/render/StandaloneDocsRender.ts index 72bd319a27ef..9f3fcd49d0ab 100644 --- a/code/lib/preview-web/src/render/StandaloneDocsRender.ts +++ b/code/lib/preview-web/src/render/StandaloneDocsRender.ts @@ -1,6 +1,6 @@ import type { Addon_IndexEntry, - AnyFramework, + Framework, Store_CSFFile, Store_ModuleExports, StoryId, @@ -24,7 +24,7 @@ import { DocsContext } from '../docs-context/DocsContext'; * - *.mdx file that may or may not reference a specific CSF file with `` */ -export class StandaloneDocsRender +export class StandaloneDocsRender implements Render { public readonly type: RenderType = 'docs'; diff --git a/code/lib/preview-web/src/render/StoryRender.test.ts b/code/lib/preview-web/src/render/StoryRender.test.ts index 4ca15195c07e..7401899ef006 100644 --- a/code/lib/preview-web/src/render/StoryRender.test.ts +++ b/code/lib/preview-web/src/render/StoryRender.test.ts @@ -1,6 +1,6 @@ import { jest, describe, it, expect } from '@jest/globals'; import { Channel } from '@storybook/channels'; -import type { AnyFramework, Addon_StoryIndexEntry } from '@storybook/types'; +import type { Framework, Addon_StoryIndexEntry } from '@storybook/types'; import type { StoryStore } from '@storybook/store'; import { PREPARE_ABORTED } from './Render'; @@ -35,7 +35,7 @@ describe('StoryRender', () => { const render = new StoryRender( new Channel(), - mockStore as unknown as StoryStore, + mockStore as unknown as StoryStore, jest.fn(), {} as any, entry.id, diff --git a/code/lib/preview-web/src/render/StoryRender.ts b/code/lib/preview-web/src/render/StoryRender.ts index cede5b07d53d..2480ab5690f8 100644 --- a/code/lib/preview-web/src/render/StoryRender.ts +++ b/code/lib/preview-web/src/render/StoryRender.ts @@ -1,6 +1,6 @@ import global from 'global'; import type { - AnyFramework, + Framework, Store_RenderContext, RenderToRoot, Store_Story, @@ -42,12 +42,12 @@ function serializeError(error: any) { } } -export type RenderContextCallbacks = Pick< +export type RenderContextCallbacks = Pick< Store_RenderContext, 'showMain' | 'showError' | 'showException' >; -export class StoryRender +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-web/src/render/TemplateDocsRender.test.ts index e1b4bf1e4741..bf765bb3d155 100644 --- a/code/lib/preview-web/src/render/TemplateDocsRender.test.ts +++ b/code/lib/preview-web/src/render/TemplateDocsRender.test.ts @@ -1,6 +1,6 @@ import { jest, describe, it, expect } from '@jest/globals'; import { Channel } from '@storybook/channels'; -import type { AnyFramework, Addon_TemplateDocsIndexEntry } from '@storybook/types'; +import type { Framework, Addon_TemplateDocsIndexEntry } from '@storybook/types'; import type { StoryStore } from '@storybook/store'; import { PREPARE_ABORTED } from './Render'; @@ -36,7 +36,7 @@ describe('TemplateDocsRender', () => { const render = new TemplateDocsRender( new Channel(), - mockStore as unknown as StoryStore, + mockStore as unknown as StoryStore, entry ); diff --git a/code/lib/preview-web/src/render/TemplateDocsRender.ts b/code/lib/preview-web/src/render/TemplateDocsRender.ts index 7697c516404e..56462e1ff333 100644 --- a/code/lib/preview-web/src/render/TemplateDocsRender.ts +++ b/code/lib/preview-web/src/render/TemplateDocsRender.ts @@ -1,6 +1,6 @@ import type { Addon_IndexEntry, - AnyFramework, + Framework, Store_CSFFile, Store_Story, StoryId, @@ -27,7 +27,7 @@ import { DocsContext } from '../docs-context/DocsContext'; * - *.stories.mdx files, where the MDX compiler produces a CSF file with a `.parameter.docs.page` * parameter containing the compiled content of the MDX file. */ -export class TemplateDocsRender +export class TemplateDocsRender implements Render { public readonly type: RenderType = 'docs'; diff --git a/code/lib/store/src/StoryStore.test.ts b/code/lib/store/src/StoryStore.test.ts index 2510e14374b4..02da944424b7 100644 --- a/code/lib/store/src/StoryStore.test.ts +++ b/code/lib/store/src/StoryStore.test.ts @@ -1,4 +1,4 @@ -import type { AnyFramework, ProjectAnnotations } from '@storybook/types'; +import type { Framework, ProjectAnnotations } from '@storybook/types'; import global from 'global'; import { expect } from '@jest/globals'; @@ -444,7 +444,7 @@ describe('StoryStore', () => { const story = await store.loadStory({ storyId: 'component-one--a' }); - const { hooks } = store.getStoryContext(story) as { hooks: HooksContext }; + const { hooks } = store.getStoryContext(story) as { hooks: HooksContext }; hooks.clean = jest.fn(); store.cleanupStory(story); expect(hooks.clean).toHaveBeenCalled(); diff --git a/code/lib/store/src/StoryStore.ts b/code/lib/store/src/StoryStore.ts index 245c07f4c73d..4dd65600c3c6 100644 --- a/code/lib/store/src/StoryStore.ts +++ b/code/lib/store/src/StoryStore.ts @@ -1,7 +1,7 @@ import memoize from 'memoizerific'; import type { Addon_IndexEntry, - AnyFramework, + Framework, API_PreparedStoryIndex, ComponentTitle, Parameters, @@ -37,7 +37,7 @@ import { processCSFFile, prepareStory, normalizeProjectAnnotations } from './csf const CSF_CACHE_SIZE = 1000; const STORY_CACHE_SIZE = 10000; -export class StoryStore { +export class StoryStore { storyIndex?: StoryIndexStore; importFn?: Store_ModuleImportFn; diff --git a/code/lib/store/src/args.ts b/code/lib/store/src/args.ts index 842c46c84f24..407776d0a3cb 100644 --- a/code/lib/store/src/args.ts +++ b/code/lib/store/src/args.ts @@ -1,12 +1,5 @@ import { dequal as deepEqual } from 'dequal'; -import type { - AnyFramework, - Args, - ArgTypes, - InputType, - SBType, - StoryContext, -} from '@storybook/types'; +import type { Framework, Args, ArgTypes, InputType, SBType, StoryContext } from '@storybook/types'; import { once } from '@storybook/client-logger'; import isPlainObject from 'lodash/isPlainObject'; import { dedent } from 'ts-dedent'; @@ -155,7 +148,7 @@ export const NO_TARGET_NAME = ''; export function groupArgsByTarget({ args, argTypes, -}: StoryContext) { +}: StoryContext) { const groupedArgs: Record> = {}; (Object.entries(args) as [keyof TArgs, any][]).forEach(([name, value]) => { const { target = NO_TARGET_NAME } = (argTypes[name] || {}) as { target?: string }; @@ -166,6 +159,6 @@ export function groupArgsByTarget({ return groupedArgs; } -export function noTargetArgs(context: StoryContext) { +export function noTargetArgs(context: StoryContext) { return groupArgsByTarget(context)[NO_TARGET_NAME]; } diff --git a/code/lib/store/src/csf/composeConfigs.ts b/code/lib/store/src/csf/composeConfigs.ts index 8ea2808226ba..21adac0e97a4 100644 --- a/code/lib/store/src/csf/composeConfigs.ts +++ b/code/lib/store/src/csf/composeConfigs.ts @@ -1,4 +1,4 @@ -import type { AnyFramework, Store_ModuleExports, ProjectAnnotations } from '@storybook/types'; +import type { Framework, Store_ModuleExports, ProjectAnnotations } from '@storybook/types'; import { combineParameters } from '../parameters'; import { composeStepRunners } from './stepRunners'; @@ -31,7 +31,7 @@ export function getSingletonField( return getField(moduleExportList, field).pop(); } -export function composeConfigs( +export function composeConfigs( moduleExportList: Store_ModuleExports[] ): ProjectAnnotations { const allArgTypeEnhancers = getArrayField(moduleExportList, 'argTypesEnhancers'); diff --git a/code/lib/store/src/csf/normalizeComponentAnnotations.ts b/code/lib/store/src/csf/normalizeComponentAnnotations.ts index 0c52c8eeec98..27addf2c6674 100644 --- a/code/lib/store/src/csf/normalizeComponentAnnotations.ts +++ b/code/lib/store/src/csf/normalizeComponentAnnotations.ts @@ -1,13 +1,13 @@ import { sanitize } from '@storybook/csf'; import type { - AnyFramework, + Framework, Store_ModuleExports, Store_NormalizedComponentAnnotations, } from '@storybook/types'; import { normalizeInputTypes } from './normalizeInputTypes'; -export function normalizeComponentAnnotations( +export function normalizeComponentAnnotations( defaultExport: Store_ModuleExports['default'], title: string = defaultExport.title, importPath?: string diff --git a/code/lib/store/src/csf/normalizeProjectAnnotations.ts b/code/lib/store/src/csf/normalizeProjectAnnotations.ts index 0bb6008e0e83..dee69948569c 100644 --- a/code/lib/store/src/csf/normalizeProjectAnnotations.ts +++ b/code/lib/store/src/csf/normalizeProjectAnnotations.ts @@ -1,5 +1,5 @@ import type { - AnyFramework, + Framework, ArgTypes, ProjectAnnotations, Store_NormalizedProjectAnnotations, @@ -9,7 +9,7 @@ import { inferArgTypes } from '../inferArgTypes'; import { inferControls } from '../inferControls'; import { normalizeInputTypes } from './normalizeInputTypes'; -export function normalizeProjectAnnotations({ +export function normalizeProjectAnnotations({ argTypes, globalTypes, argTypesEnhancers, diff --git a/code/lib/store/src/csf/normalizeStory.test.ts b/code/lib/store/src/csf/normalizeStory.test.ts index e9a0a3722d84..c1374f1957b6 100644 --- a/code/lib/store/src/csf/normalizeStory.test.ts +++ b/code/lib/store/src/csf/normalizeStory.test.ts @@ -1,5 +1,5 @@ import { expect, describe, it } from '@jest/globals'; -import type { AnyFramework, StoryAnnotationsOrFn } from '@storybook/types'; +import type { Framework, StoryAnnotationsOrFn } from '@storybook/types'; import { normalizeStory } from './normalizeStory'; @@ -133,7 +133,7 @@ describe('normalizeStory', () => { }); it('full annotations', () => { - const storyObj: StoryAnnotationsOrFn = { + const storyObj: StoryAnnotationsOrFn = { name: 'story name', parameters: { storyParam: 'val' }, decorators: [() => {}], @@ -174,7 +174,7 @@ describe('normalizeStory', () => { }); it('prefers new annotations to legacy, but combines', () => { - const storyObj: StoryAnnotationsOrFn = { + const storyObj: StoryAnnotationsOrFn = { name: 'story name', parameters: { storyParam: 'val' }, decorators: [() => {}], diff --git a/code/lib/store/src/csf/normalizeStory.ts b/code/lib/store/src/csf/normalizeStory.ts index 29d3c3a90c61..96a77f5fdc54 100644 --- a/code/lib/store/src/csf/normalizeStory.ts +++ b/code/lib/store/src/csf/normalizeStory.ts @@ -1,5 +1,5 @@ import type { - AnyFramework, + Framework, ArgTypes, LegacyStoryAnnotationsOrFn, Store_NormalizedComponentAnnotations, @@ -23,7 +23,7 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf- const deprecatedStoryAnnotationWarning = deprecate(() => {}, deprecatedStoryAnnotation); -export function normalizeStory( +export function normalizeStory( key: StoryId, storyAnnotations: LegacyStoryAnnotationsOrFn, meta: Store_NormalizedComponentAnnotations diff --git a/code/lib/store/src/csf/prepareStory.test.ts b/code/lib/store/src/csf/prepareStory.test.ts index 0d34551f85f4..b67e0d8265c0 100644 --- a/code/lib/store/src/csf/prepareStory.test.ts +++ b/code/lib/store/src/csf/prepareStory.test.ts @@ -4,7 +4,7 @@ import global from 'global'; import { expect } from '@jest/globals'; import { addons, HooksContext } from '@storybook/addons'; import type { - AnyFramework, + Framework, ArgsEnhancer, PlayFunctionContext, SBObjectType, @@ -234,11 +234,11 @@ describe('prepareStory', () => { describe('argsEnhancers', () => { it('are applied in the right order', () => { const run: number[] = []; - const enhancerOne: ArgsEnhancer = () => { + const enhancerOne: ArgsEnhancer = () => { run.push(1); return {}; }; - const enhancerTwo: ArgsEnhancer = () => { + const enhancerTwo: ArgsEnhancer = () => { run.push(2); return {}; }; diff --git a/code/lib/store/src/csf/prepareStory.ts b/code/lib/store/src/csf/prepareStory.ts index 83b50f2d5a6f..b05167ec011c 100644 --- a/code/lib/store/src/csf/prepareStory.ts +++ b/code/lib/store/src/csf/prepareStory.ts @@ -3,7 +3,7 @@ import deprecate from 'util-deprecate'; import global from 'global'; import type { - AnyFramework, + Framework, Args, ArgsStoryFn, LegacyStoryFn, @@ -41,7 +41,7 @@ const argTypeDefaultValueWarning = deprecate( // // Note that this story function is *stateless* in the sense that it does not track args or globals // Instead, it is expected these are tracked separately (if necessary) and are passed into each invocation. -export function prepareStory( +export function prepareStory( storyAnnotations: Store_NormalizedStoryAnnotations, componentAnnotations: Store_NormalizedComponentAnnotations, projectAnnotations: Store_NormalizedProjectAnnotations diff --git a/code/lib/store/src/csf/processCSFFile.ts b/code/lib/store/src/csf/processCSFFile.ts index ef293db031c1..176432dffe2d 100644 --- a/code/lib/store/src/csf/processCSFFile.ts +++ b/code/lib/store/src/csf/processCSFFile.ts @@ -1,5 +1,5 @@ import type { - AnyFramework, + Framework, ComponentTitle, Parameters, Path, @@ -39,7 +39,7 @@ const checkDisallowedParameters = (parameters?: Parameters) => { }; // Given the raw exports of a CSF file, check and normalize it. -export function processCSFFile( +export function processCSFFile( moduleExports: Store_ModuleExports, importPath: Path, title: ComponentTitle diff --git a/code/lib/store/src/csf/stepRunners.ts b/code/lib/store/src/csf/stepRunners.ts index c28f464637ea..a19d7180a210 100644 --- a/code/lib/store/src/csf/stepRunners.ts +++ b/code/lib/store/src/csf/stepRunners.ts @@ -1,4 +1,4 @@ -import type { AnyFramework, StepRunner } from '@storybook/types'; +import type { Framework, StepRunner } from '@storybook/types'; /** * Compose step runners to create a single step runner that applies each step runner in order. @@ -18,7 +18,7 @@ import type { AnyFramework, StepRunner } from '@storybook/types'; * @param stepRunners an array of StepRunner * @returns a StepRunner that is the composition of the arguments */ -export function composeStepRunners( +export function composeStepRunners( stepRunners: StepRunner[] ): StepRunner { return async (label, play, playContext) => { diff --git a/code/lib/store/src/csf/testing-utils/index.ts b/code/lib/store/src/csf/testing-utils/index.ts index 7e8b60b3ddce..b0e663dc5a04 100644 --- a/code/lib/store/src/csf/testing-utils/index.ts +++ b/code/lib/store/src/csf/testing-utils/index.ts @@ -1,6 +1,6 @@ import { isExportStory } from '@storybook/csf'; import type { - AnyFramework, + Framework, Args, ComponentAnnotations, LegacyStoryAnnotationsOrFn, @@ -21,17 +21,14 @@ import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations'; let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {}; -export function setProjectAnnotations( +export function setProjectAnnotations( projectAnnotations: ProjectAnnotations | ProjectAnnotations[] ) { const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations]; GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = composeConfigs(annotations); } -export function composeStory< - TFramework extends AnyFramework = AnyFramework, - TArgs extends Args = Args ->( +export function composeStory( storyAnnotations: LegacyStoryAnnotationsOrFn, componentAnnotations: ComponentAnnotations, projectAnnotations: ProjectAnnotations = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS, @@ -95,7 +92,7 @@ export function composeStory< export function composeStories( storiesImport: TModule, - globalConfig: ProjectAnnotations, + globalConfig: ProjectAnnotations, composeStoryFn: Store_ComposeStory ) { // eslint-disable-next-line @typescript-eslint/naming-convention diff --git a/code/lib/store/src/decorators.test.ts b/code/lib/store/src/decorators.test.ts index 5739dd5f28df..df4bab1e4e50 100644 --- a/code/lib/store/src/decorators.test.ts +++ b/code/lib/store/src/decorators.test.ts @@ -1,9 +1,9 @@ import { expect } from '@jest/globals'; -import type { AnyFramework, StoryContext } from '@storybook/types'; +import type { Framework, StoryContext } from '@storybook/types'; import { defaultDecorateStory } from './decorators'; -function makeContext(input: Record = {}): StoryContext { +function makeContext(input: Record = {}): StoryContext { return { id: 'id', kind: 'kind', @@ -11,7 +11,7 @@ function makeContext(input: Record = {}): StoryContext; + } as StoryContext; } describe('client-api.decorators', () => { diff --git a/code/lib/store/src/decorators.ts b/code/lib/store/src/decorators.ts index 664d489852dc..8868cd803af4 100644 --- a/code/lib/store/src/decorators.ts +++ b/code/lib/store/src/decorators.ts @@ -1,5 +1,5 @@ import type { - AnyFramework, + Framework, DecoratorFunction, LegacyStoryFn, PartialStoryFn, @@ -7,7 +7,7 @@ import type { StoryContextUpdate, } from '@storybook/types'; -export function decorateStory( +export function decorateStory( storyFn: LegacyStoryFn, decorator: DecoratorFunction, bindWithContext: (storyFn: LegacyStoryFn) => PartialStoryFn @@ -42,7 +42,7 @@ export function sanitizeStoryContextUpdate({ return update; } -export function defaultDecorateStory( +export function defaultDecorateStory( storyFn: LegacyStoryFn, decorators: DecoratorFunction[] ): LegacyStoryFn { diff --git a/code/lib/store/src/inferArgTypes.ts b/code/lib/store/src/inferArgTypes.ts index 66531c2691b5..76f009d31385 100644 --- a/code/lib/store/src/inferArgTypes.ts +++ b/code/lib/store/src/inferArgTypes.ts @@ -1,7 +1,7 @@ import mapValues from 'lodash/mapValues'; import { dedent } from 'ts-dedent'; import { logger } from '@storybook/client-logger'; -import type { AnyFramework, SBType, ArgTypesEnhancer } from '@storybook/types'; +import type { Framework, SBType, ArgTypesEnhancer } from '@storybook/types'; import { combineParameters } from './parameters'; const inferType = (value: any, name: string, visited: Set): SBType => { @@ -41,7 +41,7 @@ const inferType = (value: any, name: string, visited: Set): SBType => { return { name: 'object', value: {} }; }; -export const inferArgTypes: ArgTypesEnhancer = (context) => { +export const inferArgTypes: ArgTypesEnhancer = (context) => { const { id, argTypes: userArgTypes = {}, initialArgs = {} } = context; const argTypes = mapValues(initialArgs, (arg, key) => ({ name: key, diff --git a/code/lib/store/src/inferControls.ts b/code/lib/store/src/inferControls.ts index 94143ae9f91b..a603fa9b4fec 100644 --- a/code/lib/store/src/inferControls.ts +++ b/code/lib/store/src/inferControls.ts @@ -1,7 +1,7 @@ import mapValues from 'lodash/mapValues'; import { logger } from '@storybook/client-logger'; import type { - AnyFramework, + Framework, ArgTypesEnhancer, SBEnumType, Store_ControlsMatchers, @@ -61,7 +61,7 @@ const inferControl = ( } }; -export const inferControls: ArgTypesEnhancer = (context) => { +export const inferControls: ArgTypesEnhancer = (context) => { const { argTypes, // eslint-disable-next-line @typescript-eslint/naming-convention diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts index ab3434113634..8f89725741b4 100644 --- a/code/lib/types/src/modules/addons.ts +++ b/code/lib/types/src/modules/addons.ts @@ -3,7 +3,6 @@ import type { RenderData as RouterData } from '../../../router/src/router'; import type { ThemeVars } from '../../../theming/src/types'; import type { - AnyFramework, Args, ArgsStoryFn as ArgsStoryFnForFramework, ComponentTitle, @@ -21,6 +20,7 @@ import type { StoryName, Tag, } from './csf'; +import type { Framework } from './store'; export type Addon_Types = Addon_TypesEnum | string; @@ -89,7 +89,7 @@ export interface Addon_OptionsParameter extends Object { [key: string]: any; } -export type Addon_StoryContext = +export type Addon_StoryContext = StoryContextForFramework; export type Addon_StoryContextUpdate = Partial; diff --git a/code/lib/types/src/modules/client-api.ts b/code/lib/types/src/modules/client-api.ts index fb590b79c97d..a3d2bce9ea97 100644 --- a/code/lib/types/src/modules/client-api.ts +++ b/code/lib/types/src/modules/client-api.ts @@ -1,8 +1,7 @@ /* eslint-disable @typescript-eslint/naming-convention */ import type { Addon_StoryApi, Addon_Type } from './addons'; -import type { Store_RenderContext } from './store'; +import type { Framework, Store_RenderContext } from './store'; import type { - AnyFramework, Args, ArgTypes, DecoratorFunction, @@ -68,12 +67,12 @@ export interface ClientAPI_ClientApiAddons { export type ClientAPI_RenderContextWithoutStoryContext = Omit; -export interface ClientAPI_GetStorybookStory { +export interface ClientAPI_GetStorybookStory { name: string; render: LegacyStoryFn; } -export interface ClientAPI_GetStorybookKind { +export interface ClientAPI_GetStorybookKind { kind: string; fileName: string; stories: ClientAPI_GetStorybookStory[]; diff --git a/code/lib/types/src/modules/csf.ts b/code/lib/types/src/modules/csf.ts index 02f0c78c0802..d27148348761 100644 --- a/code/lib/types/src/modules/csf.ts +++ b/code/lib/types/src/modules/csf.ts @@ -2,7 +2,6 @@ import type { AnnotatedStoryFn, - AnyFramework, Args, ArgsEnhancer, ArgsFromMeta, @@ -61,7 +60,6 @@ import type { Addon_OptionsParameter } from './addons'; export type { AnnotatedStoryFn, - AnyFramework, Args, ArgsEnhancer, ArgsFromMeta, diff --git a/code/lib/types/src/modules/store.ts b/code/lib/types/src/modules/store.ts index 7503b2f4736c..7e837c4ac518 100644 --- a/code/lib/types/src/modules/store.ts +++ b/code/lib/types/src/modules/store.ts @@ -1,11 +1,10 @@ /* eslint-disable @typescript-eslint/naming-convention */ import type { SynchronousPromise } from 'synchronous-promise'; -import type { ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf'; +import type { AnyFramework, ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf'; import type { Addon_IndexEntry, Addon_StoryIndexEntry } from './addons'; import type { AnnotatedStoryFn, - AnyFramework, Args, ComponentAnnotations, ComponentId, @@ -28,6 +27,14 @@ import type { ViewMode, } from './csf'; +export interface Framework extends AnyFramework { + rootElement: unknown; +} + +export interface WebFramework extends Framework { + rootElement: HTMLElement; +} + export type Store_ModuleExport = any; export type Store_ModuleExports = Record; export type Store_PromiseLike = Promise | SynchronousPromise; @@ -36,13 +43,13 @@ export type Store_ModuleImportFn = (path: Path) => Store_PromiseLike = Promise | T; export type TeardownRenderToRoot = () => Store_MaybePromise; -export type RenderToRoot = ( +export type RenderToRoot = ( context: Store_RenderContext, element: TStorybookRoot ) => Store_MaybePromise; export type ProjectAnnotations< - TFramework extends AnyFramework, + TFramework extends Framework, TStorybookRoot = HTMLElement > = CsfProjectAnnotations & { renderToRoot?: RenderToRoot; @@ -52,14 +59,14 @@ export type ProjectAnnotations< }; export type Store_NormalizedProjectAnnotations< - TFramework extends AnyFramework = AnyFramework, + TFramework extends Framework = Framework, TStorybookRoot = HTMLElement > = ProjectAnnotations & { argTypes?: StrictArgTypes; globalTypes?: StrictGlobalTypes; }; -export type Store_NormalizedComponentAnnotations = +export type Store_NormalizedComponentAnnotations = ComponentAnnotations & { // Useful to guarantee that id & title exists id: ComponentId; @@ -67,7 +74,7 @@ export type Store_NormalizedComponentAnnotations = Omit< +export type Store_NormalizedStoryAnnotations = Omit< StoryAnnotations, 'storyName' | 'story' > & { @@ -79,12 +86,12 @@ export type Store_NormalizedStoryAnnotations; }; -export type Store_CSFFile = { +export type Store_CSFFile = { meta: Store_NormalizedComponentAnnotations; stories: Record>; }; -export type Store_Story = +export type Store_Story = StoryContextForEnhancers & { moduleExport: Store_ModuleExport; originalStoryFn: StoryFn; @@ -98,12 +105,11 @@ export type Store_Story = playFunction?: (context: StoryContext) => Promise | void; }; -export type Store_BoundStory = - Store_Story & { - storyFn: PartialStoryFn; - }; +export type Store_BoundStory = Store_Story & { + storyFn: PartialStoryFn; +}; -export declare type Store_RenderContext = +export declare type Store_RenderContext = StoryIdentifier & { showMain: () => void; showError: (error: { title: string; description: string }) => void; @@ -144,7 +150,7 @@ export interface Store_Selection { viewMode: ViewMode; } -export type Store_DecoratorApplicator = ( +export type Store_DecoratorApplicator = ( storyFn: LegacyStoryFn, decorators: DecoratorFunction[] ) => LegacyStoryFn; @@ -169,13 +175,13 @@ export interface Store_NormalizedStoriesSpecifierEntry { importPathMatcher: RegExp; } -export type Store_ContextStore = { +export type Store_ContextStore = { value?: StoryContext; }; export type Store_PropDescriptor = string[] | RegExp; -export type Store_CSFExports = { +export type Store_CSFExports = { default: ComponentAnnotations; __esModule?: boolean; __namedExportsOrder?: string[]; @@ -189,11 +195,11 @@ export type Store_ComposedStoryPlayFn = ( ) => Promise | void; export type Store_StoryFn< - TFramework extends AnyFramework = AnyFramework, + TFramework extends Framework = Framework, TArgs = Args > = AnnotatedStoryFn & { play: Store_ComposedStoryPlayFn }; -export type Store_ComposedStory = +export type Store_ComposedStory = | StoryFn | StoryAnnotations; @@ -203,7 +209,7 @@ export type Store_ComposedStory -> Story> */ -export type Store_StoriesWithPartialProps = { +export type Store_StoriesWithPartialProps = { // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports: // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends ComposedStory ? K : never] [K in keyof TModule]: TModule[K] extends Store_ComposedStory @@ -217,7 +223,7 @@ export type Store_ControlsMatchers = { }; export interface Store_ComposeStory< - TFramework extends AnyFramework = AnyFramework, + TFramework extends Framework = Framework, TArgs extends Args = Args > { ( diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts index e022dda9d0a7..0aac594ea9a6 100644 --- a/code/renderers/html/src/types.ts +++ b/code/renderers/html/src/types.ts @@ -1,4 +1,8 @@ -import type { ArgsStoryFn, StoryContext as DefaultStoryContext } from '@storybook/types'; +import type { + ArgsStoryFn, + StoryContext as DefaultStoryContext, + WebFramework, +} from '@storybook/types'; import type { parameters } from './config'; @@ -11,10 +15,10 @@ export interface ShowErrorArgs { description: string; } -export type HtmlFramework = { +export interface HtmlFramework extends WebFramework { component: string | HTMLElement | ArgsStoryFn; storyResult: StoryFnHtmlReturnType; -}; +} export type StoryContext = DefaultStoryContext & { parameters: DefaultStoryContext['parameters'] & typeof parameters; diff --git a/code/renderers/preact/src/types.ts b/code/renderers/preact/src/types.ts index 281f995d70a9..8864d47da626 100644 --- a/code/renderers/preact/src/types.ts +++ b/code/renderers/preact/src/types.ts @@ -1,3 +1,4 @@ +import type { WebFramework } from '@storybook/types'; import type { AnyComponent } from 'preact'; export type { RenderContext } from '@storybook/types'; @@ -9,7 +10,7 @@ export interface ShowErrorArgs { description: string; } -export type PreactFramework = { +export interface PreactFramework extends WebFramework { component: AnyComponent; storyResult: StoryFnPreactReturnType; -}; +} diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts index 96cb1346097b..7be5004b1650 100644 --- a/code/renderers/react/src/docs/extractArgTypes.test.ts +++ b/code/renderers/react/src/docs/extractArgTypes.test.ts @@ -5,7 +5,7 @@ import requireFromString from 'require-from-string'; import { transformFileSync, transformSync } from '@babel/core'; import { inferControls } from '@storybook/store'; -import type { AnyFramework } from '@storybook/types'; +import type { Framework } from '@storybook/types'; import { normalizeNewlines } from '@storybook/docs-tools'; import type { StoryContext } from '../types'; @@ -88,7 +88,7 @@ describe('react component properties', () => { const rows = inferControls({ argTypes, parameters, - } as unknown as StoryContext); + } as unknown as StoryContext); expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot')); }); } diff --git a/code/renderers/react/src/types.ts b/code/renderers/react/src/types.ts index f9ac2fe4503f..7f2751988f91 100644 --- a/code/renderers/react/src/types.ts +++ b/code/renderers/react/src/types.ts @@ -1,10 +1,10 @@ import type { ComponentType, ReactElement } from 'react'; -import type { AnyFramework } from '@storybook/types'; +import type { WebFramework } from '@storybook/types'; export type { Store_RenderContext as RenderContext } from '@storybook/types'; export type { StoryContext } from '@storybook/types'; -export interface ReactFramework extends AnyFramework { +export interface ReactFramework extends WebFramework { component: ComponentType; storyResult: StoryFnReactReturnType; } diff --git a/code/renderers/server/src/types.ts b/code/renderers/server/src/types.ts index decf1ddd21ca..dcabd8a41e55 100644 --- a/code/renderers/server/src/types.ts +++ b/code/renderers/server/src/types.ts @@ -1,14 +1,14 @@ -import type { StoryContext as StoryContextBase } from '@storybook/types'; +import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types'; export type { RenderContext } from '@storybook/types'; export type StoryFnServerReturnType = any; export type StoryContext = StoryContextBase; -export type ServerFramework = { +export interface ServerFramework extends WebFramework { component: string; storyResult: StoryFnServerReturnType; -}; +} export type FetchStoryHtmlType = ( url: string, diff --git a/code/renderers/svelte/src/docs/sourceDecorator.ts b/code/renderers/svelte/src/docs/sourceDecorator.ts index 229ceb87662b..061dc821d460 100644 --- a/code/renderers/svelte/src/docs/sourceDecorator.ts +++ b/code/renderers/svelte/src/docs/sourceDecorator.ts @@ -1,7 +1,7 @@ /* eslint-disable no-underscore-dangle */ import { addons, useEffect } from '@storybook/addons'; import { deprecate } from '@storybook/client-logger'; -import type { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/types'; +import type { ArgTypes, Args, StoryContext, Framework } from '@storybook/types'; import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools'; @@ -10,7 +10,7 @@ import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools'; * * @param context StoryContext */ -const skipSourceRender = (context: StoryContext) => { +const skipSourceRender = (context: StoryContext) => { const sourceParams = context?.parameters.docs?.source; const isArgsStory = context?.parameters.__isArgsStory; @@ -148,7 +148,7 @@ function getWrapperProperties(component: any) { * @param storyFn Fn * @param context StoryContext */ -export const sourceDecorator = (storyFn: any, context: StoryContext) => { +export const sourceDecorator = (storyFn: any, context: StoryContext) => { const channel = addons.getChannel(); const skip = skipSourceRender(context); const story = storyFn(); diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts index 32f25dbab053..4a420e636e54 100644 --- a/code/renderers/svelte/src/types.ts +++ b/code/renderers/svelte/src/types.ts @@ -1,4 +1,4 @@ -import type { AnyFramework, StoryContext as StoryContextBase } from '@storybook/types'; +import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types'; import type { ComponentConstructorOptions, ComponentEvents, SvelteComponentTyped } from 'svelte'; export type StoryContext = StoryContextBase; @@ -32,7 +32,7 @@ type ComponentType< }; export interface SvelteFramework - extends AnyFramework { + extends WebFramework { component: ComponentType ? this['T'] : any>; storyResult: this['T'] extends Record ? SvelteStoryResult> diff --git a/code/renderers/vue/src/types.ts b/code/renderers/vue/src/types.ts index 22621b946371..a261d6acdea0 100644 --- a/code/renderers/vue/src/types.ts +++ b/code/renderers/vue/src/types.ts @@ -1,4 +1,4 @@ -import type { StoryContext as StoryContextBase } from '@storybook/types'; +import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types'; import type { Component, AsyncComponent } from 'vue'; export type { RenderContext } from '@storybook/types'; @@ -14,7 +14,7 @@ export type StoryFnVueReturnType = export type StoryContext = StoryContextBase; -export type VueFramework = { +export interface VueFramework extends WebFramework { component: Component | AsyncComponent; storyResult: StoryFnVueReturnType; -}; +} diff --git a/code/renderers/vue3/src/types.ts b/code/renderers/vue3/src/types.ts index 04d9a10f01f7..dec8e6585eff 100644 --- a/code/renderers/vue3/src/types.ts +++ b/code/renderers/vue3/src/types.ts @@ -1,4 +1,4 @@ -import type { AnyFramework, StoryContext as StoryContextBase } from '@storybook/types'; +import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types'; import type { ConcreteComponent } from 'vue'; export type { RenderContext } from '@storybook/types'; @@ -12,7 +12,7 @@ export type StoryFnVueReturnType = ConcreteComponent; export type StoryContext = StoryContextBase; -export interface VueFramework extends AnyFramework { +export interface VueFramework extends WebFramework { // We are omitting props, as we don't use it internally, and more importantly, it completely changes the assignability of meta.component. // Try not omitting, and check the type errros in the test file, if you want to learn more. component: Omit, 'props'>; diff --git a/code/renderers/web-components/src/types.ts b/code/renderers/web-components/src/types.ts index 3c01fc6f0a23..e938d2017713 100644 --- a/code/renderers/web-components/src/types.ts +++ b/code/renderers/web-components/src/types.ts @@ -1,14 +1,14 @@ -import type { StoryContext as StoryContextBase } from '@storybook/types'; +import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types'; import type { TemplateResult, SVGTemplateResult } from 'lit-html'; export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult; export type StoryContext = StoryContextBase; -export type WebComponentsFramework = { +export interface WebComponentsFramework extends WebFramework { component: string; storyResult: StoryFnHtmlReturnType; -}; +} export interface ShowErrorArgs { title: string; diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx index 6690b6aef91d..239bca9c8a79 100644 --- a/code/ui/blocks/src/blocks/Canvas.tsx +++ b/code/ui/blocks/src/blocks/Canvas.tsx @@ -1,6 +1,6 @@ import type { FC, ReactElement, ReactNode, ReactNodeArray } from 'react'; import React, { useContext } from 'react'; -import type { AnyFramework } from '@storybook/types'; +import type { Framework } from '@storybook/types'; import type { PreviewProps as PurePreviewProps } from '../components'; import { Preview as PurePreview, PreviewSkeleton } from '../components'; import type { DocsContextProps } from './DocsContext'; @@ -19,7 +19,7 @@ type CanvasProps = PurePreviewProps & { const getPreviewProps = ( { withSource, mdxSource, children, ...props }: CanvasProps & { children?: ReactNode }, - docsContext: DocsContextProps, + docsContext: DocsContextProps, sourceContext: SourceContextProps ) => { let sourceState = withSource; diff --git a/code/ui/blocks/src/blocks/Docs.tsx b/code/ui/blocks/src/blocks/Docs.tsx index d630bdcf2c38..41c0ccb84426 100644 --- a/code/ui/blocks/src/blocks/Docs.tsx +++ b/code/ui/blocks/src/blocks/Docs.tsx @@ -1,13 +1,13 @@ import React from 'react'; import type { FunctionComponent, ComponentType } from 'react'; -import type { AnyFramework, Parameters } from '@storybook/types'; +import type { Framework, Parameters } from '@storybook/types'; import type { Theme } from '@storybook/theming'; import type { DocsContextProps } from './DocsContext'; import { DocsContainer } from './DocsContainer'; import { DocsPage } from './DocsPage'; -export type DocsProps = { +export type DocsProps = { docsParameter: Parameters; context: DocsContextProps; }; diff --git a/code/ui/blocks/src/blocks/DocsContainer.tsx b/code/ui/blocks/src/blocks/DocsContainer.tsx index de767f55f541..0ae07863fbd8 100644 --- a/code/ui/blocks/src/blocks/DocsContainer.tsx +++ b/code/ui/blocks/src/blocks/DocsContainer.tsx @@ -3,7 +3,7 @@ import React, { useEffect } from 'react'; import global from 'global'; import type { ThemeVars } from '@storybook/theming'; import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming'; -import type { AnyFramework } from '@storybook/types'; +import type { Framework } from '@storybook/types'; import { DocsWrapper, DocsContent } from '../components'; import type { DocsContextProps } from './DocsContext'; import { DocsContext } from './DocsContext'; @@ -12,7 +12,7 @@ import { scrollToElement } from './utils'; const { document, window: globalWindow } = global; -export interface DocsContainerProps { +export interface DocsContainerProps { context: DocsContextProps; theme?: ThemeVars; children?: ReactNode; diff --git a/code/ui/blocks/src/blocks/DocsContext.ts b/code/ui/blocks/src/blocks/DocsContext.ts index 79cab65693f0..958a57172050 100644 --- a/code/ui/blocks/src/blocks/DocsContext.ts +++ b/code/ui/blocks/src/blocks/DocsContext.ts @@ -4,7 +4,7 @@ import { createContext } from 'react'; import { window as globalWindow } from 'global'; import type { DocsContextProps } from '@storybook/preview-web'; -import type { AnyFramework } from '@storybook/types'; +import type { Framework } from '@storybook/types'; export type { DocsContextProps }; @@ -18,6 +18,6 @@ if (globalWindow && globalWindow.__DOCS_CONTEXT__ === undefined) { globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext'; } -export const DocsContext: Context> = globalWindow +export const DocsContext: Context> = globalWindow ? globalWindow.__DOCS_CONTEXT__ : createContext(null); diff --git a/code/ui/blocks/src/blocks/Story.tsx b/code/ui/blocks/src/blocks/Story.tsx index a9cf9e41c7d6..49a59a31a18a 100644 --- a/code/ui/blocks/src/blocks/Story.tsx +++ b/code/ui/blocks/src/blocks/Story.tsx @@ -1,7 +1,7 @@ import type { FC, ReactNode, ElementType, ComponentProps } from 'react'; import React, { useContext, useRef, useEffect, useState } from 'react'; import type { - AnyFramework, + Framework, Store_ModuleExport, Store_ModuleExports, Store_Story as StoryType, @@ -53,7 +53,7 @@ export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryI return inputId || context.storyIdByName(name); }; -export const getStoryProps = ( +export const getStoryProps = ( { height, inline }: StoryProps, story: StoryType ): PureStoryProps => { diff --git a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx index a4ac09145b42..d7488015851d 100644 --- a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx +++ b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx @@ -1,16 +1,16 @@ import type { FunctionComponent } from 'react'; import React, { useRef } from 'react'; -import type { AnyFramework, ProjectAnnotations } from '@storybook/types'; +import type { Framework, ProjectAnnotations } from '@storybook/types'; import { composeConfigs } from '@storybook/store'; import { Docs } from '../Docs'; import { ExternalPreview } from './ExternalPreview'; -export type ExternalDocsProps = { +export type ExternalDocsProps = { projectAnnotationsList: ProjectAnnotations[]; }; -function usePreview( +function usePreview( projectAnnotations: ProjectAnnotations ) { const previewRef = useRef(); diff --git a/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx b/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx index 06d593e086e4..697fc55b1d6a 100644 --- a/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx +++ b/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { ThemeProvider, themes, ensure } from '@storybook/theming'; -import type { AnyFramework } from '@storybook/types'; +import type { Framework } from '@storybook/types'; import { DocsContext } from '../DocsContext'; import { ExternalPreview } from './ExternalPreview'; -let preview: ExternalPreview; +let preview: ExternalPreview; export const ExternalDocsContainer: React.FC<{ projectAnnotations: any }> = ({ projectAnnotations, diff --git a/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts b/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts index 3c98ec71d3ec..e347812b6b6c 100644 --- a/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts +++ b/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts @@ -1,5 +1,5 @@ import type { - AnyFramework, + Framework, Store_CSFFile, Store_ModuleExport, Store_ModuleExports, @@ -9,7 +9,7 @@ import type { StoryStore } from '@storybook/store'; import type { DocsContextProps } from '@storybook/preview-web'; import type { Channel } from '@storybook/channels'; -export class ExternalDocsContext extends DocsContext { +export class ExternalDocsContext extends DocsContext { constructor( public channel: Channel, protected store: StoryStore, diff --git a/code/ui/blocks/src/blocks/external/ExternalPreview.ts b/code/ui/blocks/src/blocks/external/ExternalPreview.ts index ebcd9ade6086..3f11aa9bdf46 100644 --- a/code/ui/blocks/src/blocks/external/ExternalPreview.ts +++ b/code/ui/blocks/src/blocks/external/ExternalPreview.ts @@ -1,6 +1,6 @@ import { Preview } from '@storybook/preview-web'; import type { - AnyFramework, + Framework, ComponentTitle, Path, ProjectAnnotations, @@ -27,9 +27,7 @@ class ConstantMap { } } -export class ExternalPreview< - TFramework extends AnyFramework = AnyFramework -> extends Preview { +export class ExternalPreview extends Preview { private importPaths = new ConstantMap('./importPath/'); private titles = new ConstantMap('title-'); diff --git a/code/ui/blocks/src/blocks/useStory.ts b/code/ui/blocks/src/blocks/useStory.ts index 5e030b43a0b5..6904c196aab7 100644 --- a/code/ui/blocks/src/blocks/useStory.ts +++ b/code/ui/blocks/src/blocks/useStory.ts @@ -1,9 +1,9 @@ import { useState, useEffect } from 'react'; -import type { StoryId, AnyFramework, Store_Story } from '@storybook/types'; +import type { StoryId, Framework, Store_Story } from '@storybook/types'; import type { DocsContextProps } from './DocsContext'; -export function useStory( +export function useStory( storyId: StoryId, context: DocsContextProps ): Store_Story | void { @@ -11,7 +11,7 @@ export function useStory( return stories && stories[0]; } -export function useStories( +export function useStories( storyIds: StoryId[], context: DocsContextProps ): (Store_Story | void)[] {