Build: fix template stories to make them work with stricter Typescript settings

code/addons/interactions/src/preview.ts

@@ -58,7 +58,10 @@ const addActionsFromArgTypes: ArgsEnhancer<Renderer> = ({ 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<any>) =>
+      play(context),
+  },
   { intercept: true }
 );
 

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;
 

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<any>) => {
     // 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<any>) => {
     await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
       a: { type: { name: 'number' } },
       b: { type: { name: 'string' } },

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<any>) => {
     // 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<any>) => {
     // 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<any>) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     await within(canvasElement).findByText(/initial/);
 

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<any>) => {
     await expect(title).toBe('lib/store/autotitle');
   },
 };

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<any>) => {
     const canvas = within(canvasElement);
     await expect(canvas.getByTestId('pre').innerText).toEqual('story component project starting');
   },

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;
+}

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<any>) => {
     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<any>) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     await within(canvasElement).findByText('fooValue');
 

code/lib/store/template/stories/hooks.stories.ts

@@ -22,7 +22,7 @@ export const UseState = {
       });
     },
   ],
-  play: async ({ canvasElement }: PlayFunctionContext) => {
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
     const button = await within(canvasElement).findByText('Clicked 0 times');
     // FIXME: onClick does not properly register in vue2
     // https://github.com/storybookjs/storybook/issues/19318

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<any>) => {
     const canvas = within(canvasElement);
     await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
       projectValue: 2,

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<any>) => {
     await expect(name).toBe('Prefix And Name');
   },
 };
 
 export const Prefix = {
-  play: async ({ name }: PlayFunctionContext) => {
+  play: async ({ name }: PlayFunctionContext<any>) => {
     await expect(name).toBe('Prefix');
   },
 };

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<any>) => {
     const canvas = within(canvasElement);
     await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
       projectParameter: 'projectParameter',

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();
   },

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<any>) => {
     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<any>) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     const button = await within(canvasElement).findByRole('button');
     await button.focus();

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<any>) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
 
     const previewKeydown = jest.fn();

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<any>) => {
     const canvas = within(canvasElement);
     await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
       tags: ['story-one', 'story-two', 'story'],

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<any>) => {
     await expect(title).toBe('lib/store/manual title');
   },
 };