Merge branch 'next' into benmccann-patch-1

code/addons/backgrounds/src/typings.d.ts

@@ -0,0 +1 @@
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/addons/docs/src/typings.d.ts

@@ -8,3 +8,5 @@ declare module 'vue/dist/vue';
 declare module 'sveltedoc-parser' {
   export function parse(options: any): Promise<any>;
 }
+
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/addons/storyshots-core/src/typings.d.ts

@@ -9,6 +9,14 @@ declare module '@storybook/babel-plugin-require-context-hook/register';
 
 declare var STORYBOOK_ENV: any;
 declare var STORIES: any;
-declare var FEATURES: any;
+
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      breakingChangesV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;
+
 declare var __STORYBOOK_STORY_STORE__: any;
 declare var __requireContext: any;

code/addons/toolbars/src/typings.d.ts

@@ -0,0 +1 @@
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/frameworks/angular/src/typings.d.ts

@@ -11,9 +11,18 @@ declare var __STORYBOOK_PREVIEW__: any;
 declare var __STORYBOOK_STORY_STORE__: any;
 declare var CHANNEL_OPTIONS: any;
 declare var DOCS_OPTIONS: any;
-declare var FEATURES: any;
+
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      interactionsDebugger?: boolean;
+      breakingChangesV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;
+
 declare var IS_STORYBOOK: any;
-declare var LOGLEVEL: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
 declare var STORIES: any;
 declare var STORYBOOK_ENV: 'angular';
 declare var STORYBOOK_HOOKS_CONTEXT: any;

code/lib/cli/src/repro-generators/configs.ts

@@ -23,6 +23,8 @@ export interface Parameters {
   typescript?: boolean;
   /** Merge configurations to main.js before running the tests */
   mainOverrides?: Partial<StorybookConfig> & Record<string, any>;
+  /** Environment variables to inject while running generator */
+  envs?: Record<string, string>;
 }
 
 const fromDeps = (...args: string[]): string =>
@@ -45,11 +47,12 @@ export const cra: Parameters = {
   version: 'latest',
   generator: [
     // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM
-    'npm_config_user_agent=npm npx -p create-react-app@{{version}} create-react-app {{appName}}',
+    'npx -p create-react-app@{{version}} create-react-app {{appName}}',
     'cd {{appName}}',
     'echo "FAST_REFRESH=true" > .env',
     'echo "SKIP_PREFLIGHT_CHECK=true" > .env',
   ].join(' && '),
+  envs: { npm_config_user_agent: 'npm' },
 };
 
 export const cra_typescript: Parameters = {
@@ -58,8 +61,9 @@ export const cra_typescript: Parameters = {
   version: 'latest',
   generator: [
     // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM
-    'npm_config_user_agent=npm npx -p create-react-app@{{version}} create-react-app {{appName}} --template typescript',
+    'npx -p create-react-app@{{version}} create-react-app {{appName}} --template typescript',
   ].join(' && '),
+  envs: { npm_config_user_agent: 'npm' },
 };
 
 export const react: Parameters = {

code/lib/cli/src/repro-generators/scripts.ts

@@ -31,6 +31,8 @@ export interface Parameters {
   }[];
   /** Add typescript dependency and creates a tsconfig.json file */
   typescript?: boolean;
+  /** Environment variables to inject while running generator */
+  envs?: Record<string, string>;
 }
 
 interface Configuration {
@@ -165,13 +167,13 @@ const configureYarn2ForE2E = async ({ cwd }: Options) => {
   );
 };
 
-const generate = async ({ cwd, name, appName, version, generator }: Options) => {
+const generate = async ({ cwd, name, appName, version, generator, envs }: Options) => {
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const command = generator.replace(/{{appName}}/g, appName).replace(/{{version}}/g, version);
 
   await exec(
     command,
-    { cwd },
+    { cwd, env: { ...process.env, ...envs } },
     {
       startMessage: `🏗 Bootstrapping ${name} project (this might take a few minutes)`,
       errorMessage: `🚨 Bootstrapping ${name} failed`,

code/lib/cli/src/typings.d.ts

@@ -1 +1,2 @@
 declare module 'envinfo';
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/client-api/src/typings.d.ts

@@ -0,0 +1 @@
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/core-client/src/typings.d.ts

@@ -0,0 +1 @@
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/core-server/src/typings.d.ts

@@ -9,4 +9,11 @@ declare module '@storybook/manager';
 declare module '@discoveryjs/json-ext';
 declare module 'watchpack';
 
-declare var FEATURES: any;
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      interactionsDebugger?: boolean;
+      breakingChangesV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;

code/lib/instrumenter/src/typings.d.ts

@@ -1,5 +1,15 @@
 /* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
-declare var FEATURES: any;
+
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      interactionsDebugger?: boolean;
+      breakingChangesV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;
+
 declare var __STORYBOOK_PREVIEW__: any;
 declare var __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__: any;
 declare var __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/manager-api-shim/src/typings.d.ts

@@ -0,0 +1 @@
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/manager-api/src/typings.d.ts

@@ -1,6 +1,16 @@
 /* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
 declare var RELEASE_NOTES_DATA: any;
 declare var __STORYBOOK_ADDONS_MANAGER: any;
-declare var FEATURES: { storyStoreV7?: boolean } | undefined;
+
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      interactionsDebugger?: boolean;
+      breakingChangesV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;
+
 declare var REFS: any;
 declare var VERSIONCHECK: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/preview-api/src/modules/addons/hooks.ts

@@ -31,7 +31,7 @@ interface Effect {
 
 type AbstractFunction = (...args: any[]) => any;
 
-export class HooksContext<TRenderer extends Renderer> {
+export class HooksContext<TRenderer extends Renderer, TArgs extends Args = Args> {
   hookListsMap: WeakMap<AbstractFunction, Hook[]> = undefined as any;
 
   mountedDecorators: Set<AbstractFunction> = undefined as any;
@@ -52,7 +52,7 @@ export class HooksContext<TRenderer extends Renderer> {
 
   hasUpdates: boolean = undefined as any;
 
-  currentContext: StoryContext<TRenderer> | null = undefined as any;
+  currentContext: StoryContext<TRenderer, TArgs> | null = undefined as any;
 
   renderListener = (storyId: StoryId) => {
     if (storyId !== this.currentContext?.id) {
@@ -216,12 +216,18 @@ const areDepsEqual = (deps: any[], nextDeps: any[]) =>
 const invalidHooksError = () =>
   new Error('Storybook preview hooks can only be called inside decorators and story functions.');
 
-function getHooksContextOrNull<TRenderer extends Renderer>(): HooksContext<TRenderer> | null {
+function getHooksContextOrNull<
+  TRenderer extends Renderer,
+  TArgs extends Args = Args
+>(): HooksContext<TRenderer, TArgs> | null {
   return global.STORYBOOK_HOOKS_CONTEXT || null;
 }
 
-function getHooksContextOrThrow<TRenderer extends Renderer>(): HooksContext<TRenderer> {
-  const hooks = getHooksContextOrNull<TRenderer>();
+function getHooksContextOrThrow<
+  TRenderer extends Renderer,
+  TArgs extends Args = Args
+>(): HooksContext<TRenderer, TArgs> {
+  const hooks = getHooksContextOrNull<TRenderer, TArgs>();
   if (hooks == null) {
     throw invalidHooksError();
   }
@@ -405,8 +411,11 @@ export function useChannel(eventMap: EventMap, deps: any[] = []) {
 }
 
 /* Returns current story context */
-export function useStoryContext<TRenderer extends Renderer>(): StoryContext<TRenderer> {
-  const { currentContext } = getHooksContextOrThrow();
+export function useStoryContext<
+  TRenderer extends Renderer,
+  TArgs extends Args = Args
+>(): StoryContext<TRenderer> {
+  const { currentContext } = getHooksContextOrThrow<TRenderer, TArgs>();
   if (currentContext == null) {
     throw invalidHooksError();
   }
@@ -424,26 +433,25 @@ export function useParameter<S>(parameterKey: string, defaultValue?: S): S | und
 }
 
 /* Returns current value of story args */
-export function useArgs<SpecificArgs = Args>(): [
-  SpecificArgs,
-  (newArgs: Partial<SpecificArgs>) => void,
-  (argNames?: (keyof SpecificArgs)[]) => void
+export function useArgs<TArgs extends Args = Args>(): [
+  TArgs,
+  (newArgs: Partial<TArgs>) => void,
+  (argNames?: (keyof TArgs)[]) => void
 ] {
   const channel = addons.getChannel();
-  const { id: storyId, args } = useStoryContext();
+  const { id: storyId, args } = useStoryContext<Renderer, TArgs>();
 
   const updateArgs = useCallback(
-    (updatedArgs: Partial<SpecificArgs>) =>
-      channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }),
+    (updatedArgs: Partial<TArgs>) => channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }),
     [channel, storyId]
   );
 
   const resetArgs = useCallback(
-    (argNames?: (keyof SpecificArgs)[]) => channel.emit(RESET_STORY_ARGS, { storyId, argNames }),
+    (argNames?: (keyof TArgs)[]) => channel.emit(RESET_STORY_ARGS, { storyId, argNames }),
     [channel, storyId]
   );
 
-  return [args as SpecificArgs, updateArgs, resetArgs];
+  return [args as TArgs, updateArgs, resetArgs];
 }
 
 /* Returns current value of global args */

code/lib/preview-api/src/typings.d.ts

@@ -7,27 +7,30 @@ declare module 'better-opn';
 declare module 'open';
 declare module '@aw-web-design/x-default-browser';
 
-type Features = {
-  storyStoreV7?: boolean;
-  breakingChangesV7?: boolean;
-  argTypeTargetsV7?: boolean;
-};
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      interactionsDebugger?: boolean;
+      breakingChangesV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;
 
-var FEATURES: Features | undefined;
-var STORIES: any;
-var DOCS_OPTIONS: any;
+declare var STORIES: any;
+declare var DOCS_OPTIONS: any;
 
 // To enable user code to detect if it is running in Storybook
-var IS_STORYBOOK: boolean;
+declare var IS_STORYBOOK: boolean;
 
 // ClientApi (and StoreStore) are really singletons. However they are not created until the
 // relevant framework instantiates them via `start.js`. The good news is this happens right away.
-var __STORYBOOK_ADDONS_CHANNEL__: any;
-var __STORYBOOK_ADDONS_PREVIEW: any;
-var __STORYBOOK_CLIENT_API__: import('./modules/client-api/ClientApi').ClientApi<any>;
-var __STORYBOOK_PREVIEW__: import('./modules/preview-web/PreviewWeb').PreviewWeb<any>;
-var __STORYBOOK_STORY_STORE__: any;
-var STORYBOOK_HOOKS_CONTEXT: any;
+declare var __STORYBOOK_ADDONS_CHANNEL__: any;
+declare var __STORYBOOK_ADDONS_PREVIEW: any;
+declare var __STORYBOOK_CLIENT_API__: import('./modules/client-api/ClientApi').ClientApi<any>;
+declare var __STORYBOOK_PREVIEW__: import('./modules/preview-web/PreviewWeb').PreviewWeb<any>;
+declare var __STORYBOOK_STORY_STORE__: any;
+declare var STORYBOOK_HOOKS_CONTEXT: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
 
 declare module 'ansi-to-html';
 declare class AnsiToHtml {

code/lib/preview-web/src/typings.d.ts

@@ -0,0 +1 @@
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/preview/src/typings.d.ts

@@ -0,0 +1 @@
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/store/src/typings.d.ts

@@ -0,0 +1 @@
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/renderers/react/src/typings.d.ts

@@ -45,3 +45,4 @@ declare module 'react-dom/client' {
 
 declare var STORYBOOK_ENV: 'react';
 declare var FRAMEWORK_OPTIONS: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/renderers/svelte/src/typings.d.ts

@@ -1 +1,2 @@
 declare var STORYBOOK_ENV: 'svelte';
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/renderers/vue/src/typings.d.ts

@@ -1 +1,2 @@
 declare var STORYBOOK_ENV: 'vue';
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/renderers/web-components/src/typings.d.ts

@@ -2,3 +2,4 @@
 declare var STORYBOOK_ENV: 'web-components';
 declare var __STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__: any;
 declare var __STORYBOOK_CUSTOM_ELEMENTS__: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/ui/blocks/src/typings.d.ts

@@ -5,3 +5,4 @@ declare module '*.md';
 
 declare var __DOCS_CONTEXT__: any;
 declare var PREVIEW_URL: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/ui/manager/src/settings/typings.d.ts

@@ -2,7 +2,15 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 declare module '@storybook/components/src/treeview/utils';
 
-declare var FEATURES: any;
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      interactionsDebugger?: boolean;
+      breakingChangesV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;
+
 declare var SERVER_CHANNEL_URL: any;
 
 declare var __REACT__: any;

code/ui/manager/src/typings.d.ts

@@ -1,5 +1,22 @@
+/* eslint-disable no-underscore-dangle,  @typescript-eslint/naming-convention */
 declare module 'chromatic/isChromatic';
 
 declare var DOCS_OPTIONS: any;
 declare var CONFIG_TYPE: any;
 declare var PREVIEW_URL: any;
+
+declare var __STORYBOOK_ADDONS_MANAGER: any;
+declare var RELEASE_NOTES_DATA: any;
+
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      interactionsDebugger?: boolean;
+      breakingChangesV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;
+
+declare var REFS: any;
+declare var VERSIONCHECK: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;