Change Framework => TFramework

addons/a11y/package.json

@@ -51,7 +51,7 @@
     "@storybook/client-logger": "6.4.0-alpha.19",
     "@storybook/components": "6.4.0-alpha.19",
     "@storybook/core-events": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "@storybook/theming": "6.4.0-alpha.19",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",

addons/a11y/src/index.ts

@@ -1,4 +1,4 @@
-import { Framework, DecoratorFunction } from '@storybook/csf';
+import { AnyFramework, DecoratorFunction } from '@storybook/csf';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 
@@ -9,7 +9,7 @@ if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }
 
-export const withA11y: DecoratorFunction<Framework> = deprecate(
+export const withA11y: DecoratorFunction<AnyFramework> = deprecate(
   (storyFn, storyContext) => {
     return storyFn(storyContext);
   },

addons/actions/package.json

@@ -45,7 +45,7 @@
     "@storybook/api": "6.4.0-alpha.19",
     "@storybook/components": "6.4.0-alpha.19",
     "@storybook/core-events": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "@storybook/theming": "6.4.0-alpha.19",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",

addons/actions/src/preset/addArgsHelpers.ts

@@ -1,5 +1,5 @@
 import { Args } from '@storybook/addons';
-import { Framework, ArgsEnhancer } from '@storybook/csf';
+import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
 import { action } from '../index';
 
 // interface ActionsParameter {
@@ -12,7 +12,7 @@ import { action } from '../index';
  * matches a regex, such as `^on.*` for react-style `onClick` etc.
  */
 
-export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (context) => {
   const {
     initialArgs,
     argTypes,
@@ -38,7 +38,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context)
 /**
  * Add action args for list of strings.
  */
-export const addActionsFromArgTypes: ArgsEnhancer<Framework> = (context) => {
+export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
   const {
     initialArgs,
     argTypes,

addons/backgrounds/package.json

@@ -50,7 +50,7 @@
     "@storybook/client-logger": "6.4.0-alpha.19",
     "@storybook/components": "6.4.0-alpha.19",
     "@storybook/core-events": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "@storybook/theming": "6.4.0-alpha.19",
     "core-js": "^3.8.2",
     "global": "^4.4.0",

addons/backgrounds/src/decorators/withBackground.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import { Framework, StoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import { AnyFramework, StoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
@@ -10,8 +10,8 @@ import {
 } from '../helpers';
 
 export const withBackground = (
-  StoryFn: StoryFunction<Framework>,
-  context: StoryContext<Framework>
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
 ) => {
   const { globals, parameters } = context;
   const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;

addons/backgrounds/src/decorators/withGrid.ts

@@ -1,7 +1,7 @@
 import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
 import { useMemo, useEffect } from '@storybook/addons';
-import { Framework, StoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import { AnyFramework, StoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
@@ -16,7 +16,10 @@ const deprecatedCellSizeWarning = deprecate(
   `
 );
 
-export const withGrid = (StoryFn: StoryFunction<Framework>, context: StoryContext<Framework>) => {
+export const withGrid = (
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
+) => {
   const { globals, parameters } = context;
   const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
   const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;

addons/controls/package.json

@@ -49,7 +49,7 @@
     "@storybook/api": "6.4.0-alpha.19",
     "@storybook/client-logger": "6.4.0-alpha.19",
     "@storybook/components": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "@storybook/node-logger": "6.4.0-alpha.19",
     "@storybook/store": "6.4.0-alpha.19",
     "@storybook/theming": "6.4.0-alpha.19",

addons/docs/package.json

@@ -71,7 +71,7 @@
     "@storybook/components": "6.4.0-alpha.19",
     "@storybook/core": "6.4.0-alpha.19",
     "@storybook/core-events": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "@storybook/csf-tools": "6.4.0-alpha.19",
     "@storybook/node-logger": "6.4.0-alpha.19",
     "@storybook/postinstall": "6.4.0-alpha.19",

addons/docs/src/blocks/Canvas.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactElement, ReactNode, ReactNodeArray, useContext } from 'react';
 import { MDXProvider } from '@mdx-js/react';
-import { toId, storyNameFromExport, Framework } from '@storybook/csf';
+import { toId, storyNameFromExport, AnyFramework } from '@storybook/csf';
 import {
   resetComponents,
   Preview as PurePreview,
@@ -19,7 +19,7 @@ type CanvasProps = PurePreviewProps & {
 
 const getPreviewProps = (
   { withSource, mdxSource, children, ...props }: CanvasProps & { children?: ReactNode },
-  docsContext: DocsContextProps<Framework>,
+  docsContext: DocsContextProps<AnyFramework>,
   sourceContext: SourceContextProps
 ): PurePreviewProps => {
   const { mdxComponentAnnotations, mdxStoryNameToKey } = docsContext;

addons/docs/src/blocks/DocsContainer.tsx

@@ -5,7 +5,7 @@ import dedent from 'ts-dedent';
 import { MDXProvider } from '@mdx-js/react';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
 import { DocsWrapper, DocsContent, components as htmlComponents } from '@storybook/components';
-import { Framework } from '@storybook/csf';
+import { AnyFramework } from '@storybook/csf';
 import { DocsContextProps, DocsContext } from './DocsContext';
 import { anchorBlockIdFromId } from './Anchor';
 import { storyBlockIdFromId } from './Story';
@@ -15,7 +15,7 @@ import { scrollToElement } from './utils';
 
 const { document, window: globalWindow } = global;
 
-export interface DocsContainerProps<TFramework extends Framework> {
+export interface DocsContainerProps<TFramework extends AnyFramework> {
   context: DocsContextProps<TFramework>;
 }
 

addons/docs/src/blocks/DocsContext.ts

@@ -2,7 +2,7 @@ import { Context, createContext } from 'react';
 import { window as globalWindow } from 'global';
 
 import { DocsContextProps } from '@storybook/web-preview';
-import { Framework } from '@storybook/csf';
+import { AnyFramework } from '@storybook/csf';
 
 export type { DocsContextProps };
 
@@ -17,4 +17,4 @@ if (globalWindow.__DOCS_CONTEXT__ === undefined) {
   globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }
 
-export const DocsContext: Context<DocsContextProps<Framework>> = globalWindow.__DOCS_CONTEXT__;
+export const DocsContext: Context<DocsContextProps<AnyFramework>> = globalWindow.__DOCS_CONTEXT__;

addons/docs/src/blocks/Story.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { resetComponents, Story as PureStory } from '@storybook/components';
-import { toId, storyNameFromExport, StoryAnnotations, Framework } from '@storybook/csf';
+import { toId, storyNameFromExport, StoryAnnotations, AnyFramework } from '@storybook/csf';
 import { Story as StoryType } from '@storybook/store';
 import global from 'global';
 import { CURRENT_SELECTION } from './types';
@@ -21,7 +21,7 @@ export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
 type PureStoryProps = ComponentProps<typeof PureStory>;
 
 type Annotations = Pick<
-  StoryAnnotations<Framework>,
+  StoryAnnotations<AnyFramework>,
   'decorators' | 'parameters' | 'args' | 'argTypes' | 'loaders'
 >;
 type CommonProps = Annotations & {

addons/docs/src/frameworks/common/enhanceArgTypes.ts

@@ -1,8 +1,8 @@
 import mapValues from 'lodash/mapValues';
-import { Framework, StoryContextForEnhancers } from '@storybook/csf';
+import { AnyFramework, StoryContextForEnhancers } from '@storybook/csf';
 import { combineParameters } from '@storybook/store';
 
-export const enhanceArgTypes = <TFramework extends Framework>(
+export const enhanceArgTypes = <TFramework extends AnyFramework>(
   context: StoryContextForEnhancers<TFramework>
 ) => {
   const {

addons/docs/src/frameworks/react/react-properties.test.ts

@@ -5,7 +5,7 @@ import fs from 'fs';
 import { transformFileSync, transformSync } from '@babel/core';
 import { inferControls } from '@storybook/store';
 import { StoryContext } from '@storybook/react';
-import { Framework } from '@storybook/csf';
+import { AnyFramework } from '@storybook/csf';
 import requireFromString from 'require-from-string';
 
 import { extractProps } from './extractProps';
@@ -74,7 +74,7 @@ describe('react component properties', () => {
           const rows = inferControls(({
             argTypes,
             parameters,
-          } as unknown) as StoryContext<Framework>);
+          } as unknown) as StoryContext<AnyFramework>);
           expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot'));
         });
       }

addons/docs/src/frameworks/svelte/prepareForInline.ts

@@ -1,11 +1,11 @@
-import { Framework, StoryFn } from '@storybook/csf';
+import { AnyFramework, StoryFn } from '@storybook/csf';
 
 import React from 'react';
 
 // @ts-ignore
 import HOC from './HOC.svelte';
 
-export const prepareForInline = (storyFn: StoryFn<Framework>) => {
+export const prepareForInline = (storyFn: StoryFn<AnyFramework>) => {
   const el = React.useRef(null);
   React.useEffect(() => {
     const root = new HOC({

addons/docs/src/frameworks/svelte/sourceDecorator.ts

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/addons';
-import { ArgTypes, Args, StoryContext, Framework } from '@storybook/csf';
+import { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/csf';
 
 import { SourceType, SNIPPET_RENDERED } from '../../shared';
 
@@ -8,7 +8,7 @@ import { SourceType, SNIPPET_RENDERED } from '../../shared';
  *
  * @param context StoryContext
  */
-const skipSourceRender = (context: StoryContext<Framework>) => {
+const skipSourceRender = (context: StoryContext<AnyFramework>) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -144,7 +144,7 @@ function getWrapperProperties(component: any) {
  * @param storyFn Fn
  * @param context  StoryContext
  */
-export const sourceDecorator = (storyFn: any, context: StoryContext<Framework>) => {
+export const sourceDecorator = (storyFn: any, context: StoryContext<AnyFramework>) => {
   const story = storyFn();
 
   if (skipSourceRender(context)) {

addons/links/package.json

@@ -44,7 +44,7 @@
     "@storybook/addons": "6.4.0-alpha.19",
     "@storybook/client-logger": "6.4.0-alpha.19",
     "@storybook/core-events": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "@storybook/router": "6.4.0-alpha.19",
     "@types/qs": "^6.9.5",
     "core-js": "^3.8.2",

addons/measure/package.json

@@ -49,7 +49,7 @@
     "@storybook/client-logger": "6.4.0-alpha.19",
     "@storybook/components": "6.4.0-alpha.19",
     "@storybook/core-events": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
   },

addons/measure/src/withMeasure.ts

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import { useEffect } from '@storybook/addons';
-import { Framework, StoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import { AnyFramework, StoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 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<Framework>,
-  context: StoryContext<Framework>
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
 ) => {
   const { measureEnabled } = context.globals;
 

addons/outline/package.json

@@ -52,7 +52,7 @@
     "@storybook/client-logger": "6.4.0-alpha.19",
     "@storybook/components": "6.4.0-alpha.19",
     "@storybook/core-events": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "regenerator-runtime": "^0.13.7",

addons/outline/src/withOutline.ts

@@ -1,13 +1,13 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import { Framework, StoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import { AnyFramework, StoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { clearStyles, addOutlineStyles } from './helpers';
 import { PARAM_KEY } from './constants';
 import outlineCSS from './outlineCSS';
 
 export const withOutline = (
-  StoryFn: StoryFunction<Framework>,
-  context: StoryContext<Framework>
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
 ) => {
   const { globals } = context;
   const isActive = globals[PARAM_KEY] === true;

addons/storyshots/storyshots-core/package.json

@@ -50,7 +50,7 @@
     "@storybook/core": "6.4.0-alpha.19",
     "@storybook/core-client": "6.4.0-alpha.19",
     "@storybook/core-common": "6.4.0-alpha.19",
-    "@storybook/csf": "0.0.2--canary.c10361d.0",
+    "@storybook/csf": "0.0.2--canary.a1972cb.0",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",

addons/storyshots/storyshots-core/src/frameworks/Loader.ts

@@ -1,12 +1,12 @@
-import { Framework } from '@storybook/csf';
+import { AnyFramework } from '@storybook/csf';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 import { ClientApi as ClientApiClass } from '@storybook/client-api';
 import { StoryshotsOptions } from '../api/StoryshotsOptions';
 import { SupportedFramework } from './SupportedFramework';
 
 export type RenderTree = (story: any, context?: any, options?: any) => any;
 
-export interface ClientApi<TFramework extends Framework>
+export interface ClientApi<TFramework extends AnyFramework>
   extends ClientStoryApi<TFramework['storyResult']> {
   configure(loader: Loadable, module: NodeModule | false, showDeprecationWarning?: boolean): void;
   forceReRender(): void;
@@ -18,15 +18,15 @@ export interface ClientApi<TFramework extends Framework>
   raw: ClientApiClass<TFramework>['raw'];
 }
 
-// TODO -- this is untyped for now, we could import each framework's Framework type
+// TODO -- this is untyped for now, we could import each framework's AnyFramework type
 export interface Loader {
   load: (
     options: StoryshotsOptions
   ) => {
     framework: SupportedFramework;
     renderTree: RenderTree;
     renderShallowTree: any;
-    storybook: ClientApi<Framework>;
+    storybook: ClientApi<AnyFramework>;
   };
   test: (options: StoryshotsOptions) => boolean;
 }

addons/storyshots/storyshots-core/src/frameworks/configure.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import { toRequireContext } from '@storybook/core-common';
 import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
 import global from 'global';
-import { Framework, ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/csf';
+import { AnyFramework, ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/csf';
 
 import { ClientApi } from './Loader';
 import { StoryshotsOptions } from '../api/StoryshotsOptions';
@@ -69,7 +69,7 @@ function getConfigPathParts(input: string): Output {
   return { preview: configDir };
 }
 
-function configure<TFramework extends Framework>(
+function configure<TFramework extends AnyFramework>(
   options: {
     storybook: ClientApi<TFramework>;
   } & StoryshotsOptions