From 4d637a5b85772b17662f4ea32a5a2cd658682cae Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 14 Nov 2022 12:49:40 +0100 Subject: [PATCH 1/4] Expose more types in the renderer --- code/addons/links/package.json | 2 +- .../storyshots-puppeteer/package.json | 2 +- .../angular/src/client/public-types.ts | 19 ++++++++-- code/lib/api/package.json | 2 +- code/lib/client-api/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-client/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/store/package.json | 2 +- code/lib/types/package.json | 2 +- code/lib/types/src/modules/csf.ts | 15 +++++--- code/package.json | 2 +- code/renderers/html/src/public-types.ts | 12 +++++-- code/renderers/preact/src/public-types.ts | 11 +++++- code/renderers/react/src/public-api.tsx | 11 ++---- .../renderers/react/src/public-types.test.tsx | 9 +++-- code/renderers/react/src/public-types.ts | 17 +++++++-- code/renderers/server/src/public-types.ts | 11 +++++- .../renderers/svelte/src/public-types.test.ts | 10 +++--- code/renderers/svelte/src/public-types.ts | 10 +++++- code/renderers/vue/src/public-types.test.ts | 6 ++-- code/renderers/vue/src/public-types.ts | 10 ++++-- code/renderers/vue3/src/public-types.test.ts | 6 ++-- code/renderers/vue3/src/public-types.ts | 11 ++++-- .../web-components/src/public-types.ts | 11 ++++++ code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 36 +++++++++---------- 30 files changed, 157 insertions(+), 76 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index d9addd073bac..bfbb7e8e5844 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -79,7 +79,7 @@ "@storybook/addons": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/router": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", "global": "^4.4.0", diff --git a/code/addons/storyshots/storyshots-puppeteer/package.json b/code/addons/storyshots/storyshots-puppeteer/package.json index 424c69a28e85..ce59e4662639 100644 --- a/code/addons/storyshots/storyshots-puppeteer/package.json +++ b/code/addons/storyshots/storyshots-puppeteer/package.json @@ -34,7 +34,7 @@ }, "dependencies": { "@axe-core/puppeteer": "^4.2.0", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/node-logger": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", "@types/jest-image-snapshot": "^4.1.3", diff --git a/code/frameworks/angular/src/client/public-types.ts b/code/frameworks/angular/src/client/public-types.ts index 6f14ba796071..c4a54cf25898 100644 --- a/code/frameworks/angular/src/client/public-types.ts +++ b/code/frameworks/angular/src/client/public-types.ts @@ -1,7 +1,18 @@ -import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/types'; +import { + AnnotatedStoryFn, + Args, + ComponentAnnotations, + DecoratorFunction, + LoaderFunction, + StoryAnnotations, + StoryContext as GenericStoryContext, + StrictArgs, +} from '@storybook/types'; import { AngularRenderer } from './types'; -export type { Args, ArgTypes } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { Parameters as AngularParameters } from './types'; +export type { AngularRenderer }; /** * Metadata to configure the stories for a component. @@ -34,3 +45,7 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/lib/api/package.json b/code/lib/api/package.json index 4fb733125ff1..8577934f4f5b 100644 --- a/code/lib/api/package.json +++ b/code/lib/api/package.json @@ -48,7 +48,7 @@ "@storybook/channels": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/router": "7.0.0-alpha.49", "@storybook/theming": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json index 8d85202539f5..248b27b423eb 100644 --- a/code/lib/client-api/package.json +++ b/code/lib/client-api/package.json @@ -44,7 +44,7 @@ "dependencies": { "@storybook/addons": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/store": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", "@types/qs": "^6.9.5", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 277954cf4fb2..ecaf92328807 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -38,7 +38,7 @@ }, "dependencies": { "@babel/types": "^7.12.11", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/csf-tools": "7.0.0-alpha.49", "@storybook/node-logger": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json index 98df76cace1a..c09e47c8ef33 100644 --- a/code/lib/core-client/package.json +++ b/code/lib/core-client/package.json @@ -42,7 +42,7 @@ "@storybook/client-api": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/preview-web": "7.0.0-alpha.49", "@storybook/store": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 8584853295bb..cb554cd24825 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -39,7 +39,7 @@ "@storybook/core-client": "7.0.0-alpha.49", "@storybook/core-common": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/csf-tools": "7.0.0-alpha.49", "@storybook/docs-mdx": "0.0.1-canary.12433cf.0", "@storybook/node-logger": "7.0.0-alpha.49", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 862ab1eb903c..07be37dbf14f 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@babel/types": "^7.12.11", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/types": "7.0.0-alpha.49", "fs-extra": "^9.0.1", "ts-dedent": "^2.0.0" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 4e980fc6acf9..2eb498b94bf6 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -43,7 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/types": "7.0.0-alpha.49", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/store/package.json b/code/lib/store/package.json index 56840e6c62a5..3178a9bb55fd 100644 --- a/code/lib/store/package.json +++ b/code/lib/store/package.json @@ -45,7 +45,7 @@ "@storybook/addons": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/types": "7.0.0-alpha.49", "dequal": "^2.0.2", "global": "^4.4.0", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 02719893f890..a36e1d32bd61 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -47,7 +47,7 @@ "file-system-cache": "^2.0.0" }, "devDependencies": { - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@types/node": "^16.0.0", "synchronous-promise": "^2.0.15", "typescript": "~4.6.3" diff --git a/code/lib/types/src/modules/csf.ts b/code/lib/types/src/modules/csf.ts index 28b1753ef69e..00c46c323a69 100644 --- a/code/lib/types/src/modules/csf.ts +++ b/code/lib/types/src/modules/csf.ts @@ -23,7 +23,7 @@ import type { LegacyStoryAnnotationsOrFn, LegacyStoryFn, LoaderFunction, - Parameters as ParametersBase, + Parameters, PartialStoryFn, PlayFunction, PlayFunctionContext, @@ -51,6 +51,7 @@ import type { StoryIdentifier, StoryKind, StoryName, + StrictArgs, StrictArgTypes, StrictGlobalTypes, StrictInputType, @@ -83,6 +84,7 @@ export type { LegacyStoryAnnotationsOrFn, LegacyStoryFn, LoaderFunction, + Parameters, PartialStoryFn, PlayFunction, PlayFunctionContext, @@ -109,6 +111,7 @@ export type { StoryIdentifier, StoryKind, StoryName, + StrictArgs, StrictArgTypes, StrictGlobalTypes, StrictInputType, @@ -135,13 +138,15 @@ export type ViewMode = ViewModeBase | 'story' | 'info' | 'settings' | string | u type Layout = 'centered' | 'fullscreen' | 'padded' | 'none'; -export interface Parameters extends ParametersBase { - fileName?: string; +export interface StorybookParameters { options?: Addon_OptionsParameter; /** The layout property defines basic styles added to the preview body where the story is rendered. If you pass 'none', no styles are applied. */ layout?: Layout; - docsOnly?: boolean; - [key: string]: any; +} + +export interface StorybookInternalParameters extends StorybookParameters { + fileName?: string; + docsOnly?: true; } export type Path = string; diff --git a/code/package.json b/code/package.json index e69db64de779..0aba4dca7f39 100644 --- a/code/package.json +++ b/code/package.json @@ -184,7 +184,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/html/src/public-types.ts b/code/renderers/html/src/public-types.ts index 9cf7cddfd54f..f2de4d1fac05 100644 --- a/code/renderers/html/src/public-types.ts +++ b/code/renderers/html/src/public-types.ts @@ -2,12 +2,16 @@ import type { AnnotatedStoryFn, Args, ComponentAnnotations, + DecoratorFunction, + LoaderFunction, StoryAnnotations, + StoryContext as GenericStoryContext, + StrictArgs, } from '@storybook/types'; - import type { HtmlRenderer } from './types'; -export type { Args, ArgTypes, Parameters } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { HtmlRenderer }; /** * Metadata to configure the stories for a component. @@ -40,3 +44,7 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/renderers/preact/src/public-types.ts b/code/renderers/preact/src/public-types.ts index 11a55e5dabd0..33035dd43f44 100644 --- a/code/renderers/preact/src/public-types.ts +++ b/code/renderers/preact/src/public-types.ts @@ -3,10 +3,15 @@ import type { Args, ComponentAnnotations, StoryAnnotations, + DecoratorFunction, + LoaderFunction, + StoryContext as GenericStoryContext, + StrictArgs, } from '@storybook/types'; import type { PreactRenderer } from './types'; -export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { PreactRenderer }; /** * Metadata to configure the stories for a component. @@ -39,3 +44,7 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/renderers/react/src/public-api.tsx b/code/renderers/react/src/public-api.tsx index 3c066ba0bfb5..781bb21af4e3 100644 --- a/code/renderers/react/src/public-api.tsx +++ b/code/renderers/react/src/public-api.tsx @@ -1,13 +1,8 @@ /* eslint-disable prefer-destructuring */ -import type { - Addon_ClientStoryApi, - Addon_Loadable, - Args, - DecoratorFunction, -} from '@storybook/types'; import { start } from '@storybook/core-client'; +import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { renderToCanvas, render } from './render'; +import { render, renderToCanvas } from './render'; import type { ReactRenderer } from './types'; interface ClientApi extends Addon_ClientStoryApi { @@ -28,5 +23,3 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args); export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; export const raw: ClientApi['raw'] = api.clientApi.raw; - -export type DecoratorFn = DecoratorFunction; diff --git a/code/renderers/react/src/public-types.test.tsx b/code/renderers/react/src/public-types.test.tsx index 538e4cb9db3f..204ea0df26ab 100644 --- a/code/renderers/react/src/public-types.test.tsx +++ b/code/renderers/react/src/public-types.test.tsx @@ -1,15 +1,14 @@ import { describe, test } from '@jest/globals'; -import type { StoryAnnotations } from '@storybook/types'; import { satisfies } from '@storybook/core-common'; +import type { StoryAnnotations } from '@storybook/types'; import { expectTypeOf } from 'expect-type'; import type { KeyboardEventHandler, ReactNode } from 'react'; import React from 'react'; import type { SetOptional } from 'type-fest'; -import type { DecoratorFn } from './public-api'; -import type { Meta, StoryObj } from './public-types'; +import type { Decorator, Meta, StoryObj } from './public-types'; import type { ReactRenderer } from './types'; type ReactStory = StoryAnnotations; @@ -141,7 +140,7 @@ describe('Story args can be inferred', () => { expectTypeOf(Basic).toEqualTypeOf(); }); - const withDecorator: DecoratorFn<{ decoratorArg: number }> = (Story, { args }) => ( + const withDecorator: Decorator<{ decoratorArg: number }> = (Story, { args }) => ( <> Decorator: {args.decoratorArg} @@ -166,7 +165,7 @@ describe('Story args can be inferred', () => { test('Correct args are inferred when type is widened for multiple decorators', () => { type Props = ButtonProps & { decoratorArg: number; decoratorArg2: string }; - const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (Story, { args }) => ( + const secondDecorator: Decorator<{ decoratorArg2: string }> = (Story, { args }) => ( <> Decorator: {args.decoratorArg2} diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts index 6f89b2f76472..aad193cfd18a 100644 --- a/code/renderers/react/src/public-types.ts +++ b/code/renderers/react/src/public-types.ts @@ -4,15 +4,18 @@ import type { ArgsFromMeta, ArgsStoryFn, ComponentAnnotations, + DecoratorFunction, + LoaderFunction, StoryAnnotations, + StoryContext as GenericStoryContext, + StrictArgs, } from '@storybook/types'; - import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react'; import type { SetOptional, Simplify } from 'type-fest'; - import type { ReactRenderer } from './types'; -export { ReactRenderer }; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { ReactRenderer }; type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor; @@ -124,3 +127,11 @@ export type Story = StoryFn; * ``` */ export type ComponentStory = ComponentStoryFn; + +/** + * @deprecated Use Decorator instead. + */ +export type DecoratorFn = DecoratorFunction; +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/renderers/server/src/public-types.ts b/code/renderers/server/src/public-types.ts index 4d61201fd9de..dcb8d249a099 100644 --- a/code/renderers/server/src/public-types.ts +++ b/code/renderers/server/src/public-types.ts @@ -3,10 +3,14 @@ import type { Args, ComponentAnnotations, StoryAnnotations, + StoryContext as GenericStoryContext, + DecoratorFunction, + LoaderFunction, + StrictArgs, } from '@storybook/types'; import type { ServerRenderer } from './types'; -export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; /** * Metadata to configure the stories for a component. @@ -39,3 +43,8 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type { ServerRenderer }; +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts index e7af27cb7f09..72855a7bd519 100644 --- a/code/renderers/svelte/src/public-types.test.ts +++ b/code/renderers/svelte/src/public-types.test.ts @@ -4,10 +4,10 @@ import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types'; import { expectTypeOf } from 'expect-type'; import type { ComponentProps, SvelteComponentTyped } from 'svelte'; import Button from './__test__/Button.svelte'; -import Decorator from './__test__/Decorator.svelte'; +import Decorator1 from './__test__/Decorator.svelte'; import Decorator2 from './__test__/Decorator2.svelte'; -import type { DecoratorFn, Meta, StoryObj } from './public-types'; +import type { Decorator, Meta, StoryObj } from './public-types'; import type { SvelteRenderer } from './types'; type SvelteStory = StoryAnnotations< @@ -172,11 +172,11 @@ describe('Story args can be inferred', () => { expectTypeOf(Basic).toEqualTypeOf(); }); - const withDecorator: DecoratorFn<{ decoratorArg: string }> = ( + const withDecorator: Decorator<{ decoratorArg: string }> = ( storyFn, { args: { decoratorArg } } ) => ({ - Component: Decorator, + Component: Decorator1, props: { decoratorArg }, }); @@ -202,7 +202,7 @@ describe('Story args can be inferred', () => { test('Correct args are inferred when type is widened for multiple decorators', () => { type Props = ComponentProps