From 842b1d952058940deaa2a9616c851be15834835f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 10 Jan 2023 14:06:02 +0100 Subject: [PATCH] Fix template stories to make them work with stricter Typescript settings --- code/addons/interactions/src/preview.ts | 5 +++- code/lib/client-logger/src/index.ts | 26 ++++++++++++++----- .../template/stories/argTypes.stories.ts | 4 +-- .../store/template/stories/args.stories.ts | 6 ++--- .../template/stories/autotitle.stories.ts | 2 +- .../template/stories/decorators.stories.ts | 6 ++--- code/lib/store/template/stories/global.d.ts | 11 ++++++++ .../store/template/stories/globals.stories.ts | 6 ++--- .../store/template/stories/hooks.stories.ts | 2 +- .../store/template/stories/loaders.stories.ts | 2 +- .../store/template/stories/names.stories.ts | 4 +-- .../template/stories/parameters.stories.ts | 2 +- code/lib/store/template/stories/preview.ts | 2 +- .../template/stories/rendering.stories.ts | 4 +-- .../template/stories/shortcuts.stories.ts | 2 +- .../store/template/stories/tags.stories.ts | 2 +- .../store/template/stories/title.stories.ts | 2 +- 17 files changed, 58 insertions(+), 30 deletions(-) create mode 100644 code/lib/store/template/stories/global.d.ts diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index 7e6905571298..3c653ff51710 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -58,7 +58,10 @@ const addActionsFromArgTypes: ArgsEnhancer = ({ id, initialArgs }) => export const argsEnhancers = [addActionsFromArgTypes]; export const { step: runStep } = instrument( - { step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => play(context) }, + { + step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => + play(context), + }, { intercept: true } ); diff --git a/code/lib/client-logger/src/index.ts b/code/lib/client-logger/src/index.ts index 51d61ba5da2b..b1fc43adacf3 100644 --- a/code/lib/client-logger/src/index.ts +++ b/code/lib/client-logger/src/index.ts @@ -1,5 +1,7 @@ import { global } from '@storybook/global'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore const { LOGLEVEL } = global; type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent'; @@ -20,22 +22,34 @@ type LoggingFn = (message: any, ...args: any[]) => void; export const logger = { trace: (message: any, ...rest: any[]): void => { - if (currentLogLevelNumber <= levels.trace) console.trace(message, ...rest); + if (currentLogLevelNumber <= levels.trace) { + console.trace(message, ...rest); + } }, debug: (message: any, ...rest: any[]): void => { - if (currentLogLevelNumber <= levels.debug) console.debug(message, ...rest); + if (currentLogLevelNumber <= levels.debug) { + console.debug(message, ...rest); + } }, info: (message: any, ...rest: any[]): void => { - if (currentLogLevelNumber <= levels.info) console.info(message, ...rest); + if (currentLogLevelNumber <= levels.info) { + console.info(message, ...rest); + } }, warn: (message: any, ...rest: any[]): void => { - if (currentLogLevelNumber <= levels.warn) console.warn(message, ...rest); + if (currentLogLevelNumber <= levels.warn) { + console.warn(message, ...rest); + } }, error: (message: any, ...rest: any[]): void => { - if (currentLogLevelNumber <= levels.error) console.error(message, ...rest); + if (currentLogLevelNumber <= levels.error) { + console.error(message, ...rest); + } }, log: (message: any, ...rest: any[]): void => { - if (currentLogLevelNumber < levels.silent) console.log(message, ...rest); + if (currentLogLevelNumber < levels.silent) { + console.log(message, ...rest); + } }, } as const; diff --git a/code/lib/store/template/stories/argTypes.stories.ts b/code/lib/store/template/stories/argTypes.stories.ts index 2c72888297c8..93b9540ebb40 100644 --- a/code/lib/store/template/stories/argTypes.stories.ts +++ b/code/lib/store/template/stories/argTypes.stories.ts @@ -22,7 +22,7 @@ export const Inheritance = { storyArg: { type: 'number' }, composedArg: { options: ['a', 'b'] }, }, - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { // NOTE: these stories don't test project-level argTypes inheritance as it is too problematic // to have an argType floating around that will apply too *all* other stories in our sandboxes. await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ @@ -42,7 +42,7 @@ export const ArgTypeInference = { d: { a: 'b' }, e: ['a', 'b'], }, - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ a: { type: { name: 'number' } }, b: { type: { name: 'string' } }, diff --git a/code/lib/store/template/stories/args.stories.ts b/code/lib/store/template/stories/args.stories.ts index 80a4e8f26320..16b4e7bc0d03 100644 --- a/code/lib/store/template/stories/args.stories.ts +++ b/code/lib/store/template/stories/args.stories.ts @@ -32,7 +32,7 @@ export const Inheritance = { a: 'story', }, }, - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { // NOTE: these stories don't test project-level args inheritance as it is too problematic // to have an arg floating around that will apply too *all* other stories in our sandboxes. await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toEqual({ @@ -54,7 +54,7 @@ export const Targets = { a: { target: 'elsewhere' }, }, parameters: { argNames: ['a', 'b'] }, - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { // Check that `a` doesn't end up set await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toEqual({ b: 'b', @@ -67,7 +67,7 @@ export const Events = { test: 'initial', }, parameters: { argNames: ['test'] }, - play: async ({ canvasElement, id }: PlayFunctionContext) => { + play: async ({ canvasElement, id }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; await within(canvasElement).findByText(/initial/); diff --git a/code/lib/store/template/stories/autotitle.stories.ts b/code/lib/store/template/stories/autotitle.stories.ts index 0859431330ae..b5286ba9ffa8 100644 --- a/code/lib/store/template/stories/autotitle.stories.ts +++ b/code/lib/store/template/stories/autotitle.stories.ts @@ -8,7 +8,7 @@ export default { }; export const Default = { - play: async ({ title }: PlayFunctionContext) => { + play: async ({ title }: PlayFunctionContext) => { await expect(title).toBe('lib/store/autotitle'); }, }; diff --git a/code/lib/store/template/stories/decorators.stories.ts b/code/lib/store/template/stories/decorators.stories.ts index 5dc104ded1a5..1e07554ad9e3 100644 --- a/code/lib/store/template/stories/decorators.stories.ts +++ b/code/lib/store/template/stories/decorators.stories.ts @@ -8,19 +8,19 @@ export default { parameters: { useProjectDecorator: true }, decorators: [ (storyFn: PartialStoryFn, context: StoryContext) => - storyFn({ args: { ...context.args, text: `component ${context.args.text}` } }), + storyFn({ args: { ...context.args, text: `component ${context.args['text']}` } }), ], }; export const Inheritance = { decorators: [ (storyFn: PartialStoryFn, context: StoryContext) => - storyFn({ args: { ...context.args, text: `story ${context.args.text}` } }), + storyFn({ args: { ...context.args, text: `story ${context.args['text']}` } }), ], args: { text: 'starting', }, - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { const canvas = within(canvasElement); await expect(canvas.getByTestId('pre').innerText).toEqual('story component project starting'); }, diff --git a/code/lib/store/template/stories/global.d.ts b/code/lib/store/template/stories/global.d.ts new file mode 100644 index 000000000000..290095cabb3a --- /dev/null +++ b/code/lib/store/template/stories/global.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export {}; + +declare global { + var Components: any; + var __STORYBOOK_ADDONS_CHANNEL__: { + emit: any; + on: any; + }; + var storybookRenderer: string; +} diff --git a/code/lib/store/template/stories/globals.stories.ts b/code/lib/store/template/stories/globals.stories.ts index a1cdd3224099..216551d9fb5b 100644 --- a/code/lib/store/template/stories/globals.stories.ts +++ b/code/lib/store/template/stories/globals.stories.ts @@ -13,7 +13,7 @@ export const Inheritance = { (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.globals } }), ], - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ foo: 'fooValue', bar: 'barDefaultValue', @@ -25,9 +25,9 @@ export const Events = { // Just pass the "foo" global to the pre decorators: [ (storyFn: PartialStoryFn, context: StoryContext) => - storyFn({ args: { text: context.globals.foo } }), + storyFn({ args: { text: context.globals['foo'] } }), ], - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; await within(canvasElement).findByText('fooValue'); diff --git a/code/lib/store/template/stories/hooks.stories.ts b/code/lib/store/template/stories/hooks.stories.ts index 55e134f4008a..5c2d5c6d1699 100644 --- a/code/lib/store/template/stories/hooks.stories.ts +++ b/code/lib/store/template/stories/hooks.stories.ts @@ -22,7 +22,7 @@ export const UseState = { }); }, ], - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { const button = await within(canvasElement).findByText('Clicked 0 times'); // FIXME: onClick does not properly register in vue2 // https://github.com/storybookjs/storybook/issues/19318 diff --git a/code/lib/store/template/stories/loaders.stories.ts b/code/lib/store/template/stories/loaders.stories.ts index 1cd71d65771c..2826e94e433e 100644 --- a/code/lib/store/template/stories/loaders.stories.ts +++ b/code/lib/store/template/stories/loaders.stories.ts @@ -14,7 +14,7 @@ export default { export const Inheritance = { loaders: [async () => new Promise((r) => setTimeout(() => r({ storyValue: 3 }), 1000))], - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { const canvas = within(canvasElement); await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({ projectValue: 2, diff --git a/code/lib/store/template/stories/names.stories.ts b/code/lib/store/template/stories/names.stories.ts index b840cbb1e8c8..3c984ee58919 100644 --- a/code/lib/store/template/stories/names.stories.ts +++ b/code/lib/store/template/stories/names.stories.ts @@ -11,13 +11,13 @@ export default { // Repro for https://github.com/storybookjs/storybook/issues/11571 export const PrefixAndName = { - play: async ({ name }: PlayFunctionContext) => { + play: async ({ name }: PlayFunctionContext) => { await expect(name).toBe('Prefix And Name'); }, }; export const Prefix = { - play: async ({ name }: PlayFunctionContext) => { + play: async ({ name }: PlayFunctionContext) => { await expect(name).toBe('Prefix'); }, }; diff --git a/code/lib/store/template/stories/parameters.stories.ts b/code/lib/store/template/stories/parameters.stories.ts index fc15f7bb3d61..a21cb899e65a 100644 --- a/code/lib/store/template/stories/parameters.stories.ts +++ b/code/lib/store/template/stories/parameters.stories.ts @@ -31,7 +31,7 @@ export const Inheritance = { a: 'story', }, }, - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { const canvas = within(canvasElement); await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({ projectParameter: 'projectParameter', diff --git a/code/lib/store/template/stories/preview.ts b/code/lib/store/template/stories/preview.ts index 3f479374e900..edd7ad4ba335 100644 --- a/code/lib/store/template/stories/preview.ts +++ b/code/lib/store/template/stories/preview.ts @@ -13,7 +13,7 @@ export const loaders = [async () => ({ projectValue: 2 })]; export const decorators = [ (storyFn: PartialStoryFn, context: StoryContext) => { - if (context.parameters.useProjectDecorator) + if (context.parameters['useProjectDecorator']) return storyFn({ args: { ...context.args, text: `project ${context.args.text}` } }); return storyFn(); }, diff --git a/code/lib/store/template/stories/rendering.stories.ts b/code/lib/store/template/stories/rendering.stories.ts index 58b7ca91d8f8..395d94ea4424 100644 --- a/code/lib/store/template/stories/rendering.stories.ts +++ b/code/lib/store/template/stories/rendering.stories.ts @@ -11,7 +11,7 @@ export default { }; export const ForceReRender = { - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; const button = await within(canvasElement).findByRole('button'); await button.focus(); @@ -24,7 +24,7 @@ export const ForceReRender = { }; export const ChangeArgs = { - play: async ({ canvasElement, id }: PlayFunctionContext) => { + play: async ({ canvasElement, id }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; const button = await within(canvasElement).findByRole('button'); await button.focus(); diff --git a/code/lib/store/template/stories/shortcuts.stories.ts b/code/lib/store/template/stories/shortcuts.stories.ts index b72fd88fa2ba..cd4de4adb820 100644 --- a/code/lib/store/template/stories/shortcuts.stories.ts +++ b/code/lib/store/template/stories/shortcuts.stories.ts @@ -10,7 +10,7 @@ export default { }; export const KeydownDuringPlay = { - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; const previewKeydown = jest.fn(); diff --git a/code/lib/store/template/stories/tags.stories.ts b/code/lib/store/template/stories/tags.stories.ts index 8f0a15a5648e..bae16f25e678 100644 --- a/code/lib/store/template/stories/tags.stories.ts +++ b/code/lib/store/template/stories/tags.stories.ts @@ -17,7 +17,7 @@ export default { export const Inheritance = { tags: ['story-one', 'story-two'], - play: async ({ canvasElement }: PlayFunctionContext) => { + play: async ({ canvasElement }: PlayFunctionContext) => { const canvas = within(canvasElement); await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({ tags: ['story-one', 'story-two', 'story'], diff --git a/code/lib/store/template/stories/title.stories.ts b/code/lib/store/template/stories/title.stories.ts index 8e87740d1bf7..0374288d3ed7 100644 --- a/code/lib/store/template/stories/title.stories.ts +++ b/code/lib/store/template/stories/title.stories.ts @@ -9,7 +9,7 @@ export default { }; export const Default = { - play: async ({ title }: PlayFunctionContext) => { + play: async ({ title }: PlayFunctionContext) => { await expect(title).toBe('lib/store/manual title'); }, };