Future - restructure storybook types

code/addons/a11y/package.json

@@ -69,8 +69,8 @@
     "@storybook/client-logger": "7.0.0-alpha.43",
     "@storybook/components": "7.0.0-alpha.43",
     "@storybook/core-events": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
     "@storybook/theming": "7.0.0-alpha.43",
+    "@storybook/types": "7.0.0-alpha.43",
     "axe-core": "^4.2.0",
     "global": "^4.4.0",
     "lodash": "^4.17.21",

code/addons/actions/package.json

@@ -63,8 +63,8 @@
     "@storybook/client-logger": "7.0.0-alpha.43",
     "@storybook/components": "7.0.0-alpha.43",
     "@storybook/core-events": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
     "@storybook/theming": "7.0.0-alpha.43",
+    "@storybook/types": "7.0.0-alpha.43",
     "dequal": "^2.0.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",

code/addons/actions/src/addArgsHelpers.test.ts

@@ -1,4 +1,4 @@
-import type { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/types';
 import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
 
 describe('actions parameter enhancers', () => {

code/addons/actions/src/addArgsHelpers.ts

@@ -1,4 +1,4 @@
-import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/csf';
+import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/types';
 import { action } from './runtime/action';
 
 // interface ActionsParameter {

code/addons/backgrounds/package.json

@@ -67,8 +67,8 @@
     "@storybook/client-logger": "7.0.0-alpha.43",
     "@storybook/components": "7.0.0-alpha.43",
     "@storybook/core-events": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
     "@storybook/theming": "7.0.0-alpha.43",
+    "@storybook/types": "7.0.0-alpha.43",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"

code/addons/backgrounds/src/decorators/withBackground.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {

code/addons/backgrounds/src/decorators/withGrid.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

code/addons/controls/package.json

@@ -63,10 +63,10 @@
     "@storybook/client-logger": "7.0.0-alpha.43",
     "@storybook/components": "7.0.0-alpha.43",
     "@storybook/core-common": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.43",
     "@storybook/store": "7.0.0-alpha.43",
     "@storybook/theming": "7.0.0-alpha.43",
+    "@storybook/types": "7.0.0-alpha.43",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },

code/addons/controls/src/ControlsPanel.tsx

@@ -1,19 +1,14 @@
+/* eslint-disable camelcase */
 import React, { FC } from 'react';
-import {
-  ArgTypes,
-  useArgs,
-  useGlobals,
-  useArgTypes,
-  useParameter,
-  useStorybookState,
-} from '@storybook/api';
+import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
 import {
   PureArgsTable as ArgsTable,
   NoControlsWarning,
-  PresetColor,
-  SortType,
+  type PresetColor,
+  type SortType,
 } from '@storybook/blocks';
 
+import type { API_ArgTypes } from '@storybook/types';
 import { PARAM_KEY } from './constants';
 
 interface ControlsParameters {
@@ -43,7 +38,7 @@ export const ControlsPanel: FC = () => {
     if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;
     else acc[key] = { ...arg, control: { ...arg.control, presetColors } };
     return acc;
-  }, {} as ArgTypes);
+  }, {} as API_ArgTypes);
 
   return (
     <>

code/addons/controls/src/manager.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { addons, types } from '@storybook/addons';
 import { AddonPanel } from '@storybook/components';
-import { API, useArgTypes } from '@storybook/api';
+import { type API, useArgTypes } from '@storybook/api';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
 

code/addons/docs/package.json

@@ -58,16 +58,16 @@
     "@storybook/components": "7.0.0-alpha.43",
     "@storybook/core-common": "7.0.0-alpha.43",
     "@storybook/core-events": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
     "@storybook/csf-tools": "7.0.0-alpha.43",
     "@storybook/docs-tools": "7.0.0-alpha.43",
-    "@storybook/mdx2-csf": "next",
+    "@storybook/mdx2-csf": "0.1.0-next.0",
     "@storybook/node-logger": "7.0.0-alpha.43",
     "@storybook/postinstall": "7.0.0-alpha.43",
     "@storybook/preview-web": "7.0.0-alpha.43",
     "@storybook/source-loader": "7.0.0-alpha.43",
     "@storybook/store": "7.0.0-alpha.43",
     "@storybook/theming": "7.0.0-alpha.43",
+    "@storybook/types": "7.0.0-alpha.43",
     "dequal": "^2.0.2",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",

code/addons/docs/src/DocsRenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AnyFramework, Parameters } from '@storybook/csf';
-import { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
+import type { AnyFramework, Parameters } from '@storybook/types';
+import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
 import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
 import { MDXProvider } from '@mdx-js/react';

code/addons/docs/src/preset.ts

@@ -1,8 +1,14 @@
+/* eslint-disable camelcase */
 import fs from 'fs-extra';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 
-import type { DocsOptions, IndexerOptions, Options, StoryIndexer } from '@storybook/core-common';
+import type {
+  DocsOptions,
+  CoreCommon_IndexerOptions,
+  Options,
+  CoreCommon_StoryIndexer,
+} from '@storybook/types';
 import { logger } from '@storybook/node-logger';
 import { loadCsf } from '@storybook/csf-tools';
 
@@ -147,8 +153,8 @@ export async function webpack(
   return result;
 }
 
-export const storyIndexers = async (indexers: StoryIndexer[] | null) => {
-  const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
+export const storyIndexers = async (indexers: CoreCommon_StoryIndexer[] | null) => {
+  const mdxIndexer = async (fileName: string, opts: CoreCommon_IndexerOptions) => {
     let code = (await fs.readFile(fileName, 'utf-8')).toString();
     // @ts-expect-error (Converted from ts-ignore)
     const { compile } = await import('@storybook/mdx2-csf');

code/addons/interactions/package.json

@@ -65,9 +65,9 @@
     "@storybook/components": "7.0.0-alpha.43",
     "@storybook/core-common": "7.0.0-alpha.43",
     "@storybook/core-events": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
     "@storybook/instrumenter": "7.0.0-alpha.43",
     "@storybook/theming": "7.0.0-alpha.43",
+    "@storybook/types": "7.0.0-alpha.43",
     "global": "^4.4.0",
     "jest-mock": "^27.0.6",
     "polished": "^4.2.2",

code/addons/interactions/src/Panel.test.ts

@@ -1,4 +1,4 @@
-import { Call, CallStates, LogItem } from '@storybook/instrumenter';
+import { type Call, CallStates, type LogItem } from '@storybook/instrumenter';
 import { getInteractions } from './Panel';
 
 describe('Panel', () => {

code/addons/interactions/src/Panel.tsx

@@ -1,15 +1,22 @@
 import global from 'global';
 import * as React from 'react';
-import { useChannel, useParameter, StoryId } from '@storybook/api';
+import { useChannel, useParameter } from '@storybook/api';
 import {
   FORCE_REMOUNT,
   IGNORED_EXCEPTION,
   STORY_RENDER_PHASE_CHANGED,
   STORY_THREW_EXCEPTION,
   PLAY_FUNCTION_THREW_EXCEPTION,
 } from '@storybook/core-events';
-import { EVENTS, Call, CallStates, ControlStates, LogItem } from '@storybook/instrumenter';
+import {
+  EVENTS,
+  type Call,
+  CallStates,
+  type ControlStates,
+  type LogItem,
+} from '@storybook/instrumenter';
 
+import type { StoryId } from '@storybook/types';
 import { InteractionsPanel } from './components/InteractionsPanel';
 import { TabIcon, TabStatus } from './components/TabStatus';
 

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';

code/addons/interactions/src/components/Interaction.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
-import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
+import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
 

code/addons/interactions/src/components/InteractionsPanel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AddonPanel, Link, Placeholder } from '@storybook/components';
-import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
+import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 

code/addons/interactions/src/components/List.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
-import { Icons, IconsProps } from '@storybook/components';
+import { Icons, type IconsProps } from '@storybook/components';
 
 const ListWrapper = styled.ul({
   listStyle: 'none',

code/addons/interactions/src/components/MethodCall.stories.tsx

@@ -1,4 +1,4 @@
-import { Call } from '@storybook/instrumenter';
+import type { Call } from '@storybook/instrumenter';
 import React from 'react';
 import { styled, typography } from '@storybook/theming';
 import { Node, MethodCall } from './MethodCall';

code/addons/interactions/src/components/MethodCall.tsx

@@ -1,5 +1,5 @@
 import { ObjectInspector } from '@devtools-ds/object-inspector';
-import { Call, CallRef, ElementRef } from '@storybook/instrumenter';
+import type { Call, CallRef, ElementRef } from '@storybook/instrumenter';
 import { useTheme } from '@storybook/theming';
 import React, { Fragment, ReactElement } from 'react';
 

code/addons/interactions/src/components/StatusBadge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Call, CallStates } from '@storybook/instrumenter';
+import { type Call, CallStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 
 export interface StatusBadgeProps {

code/addons/interactions/src/components/StatusIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Icons, IconsProps } from '@storybook/components';
-import { Call, CallStates } from '@storybook/instrumenter';
+import { Icons, type IconsProps } from '@storybook/components';
+import { type Call, CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
 import { transparentize } from 'polished';

code/addons/interactions/src/mocks/index.ts

@@ -1,4 +1,4 @@
-import { CallStates, Call } from '@storybook/instrumenter';
+import { CallStates, type Call } from '@storybook/instrumenter';
 
 export const getCalls = (finalStatus: CallStates) => {
   const calls: Call[] = [

code/addons/interactions/src/preset/preview.ts

@@ -8,7 +8,7 @@ import type {
   PlayFunction,
   PlayFunctionContext,
   StepLabel,
-} from '@storybook/csf';
+} from '@storybook/types';
 import { instrument } from '@storybook/instrumenter';
 import { ModuleMocker } from 'jest-mock';
 

code/addons/jest/src/hoc/provideJestResult.tsx

@@ -1,6 +1,6 @@
 import React, { Component as ReactComponent, ComponentType } from 'react';
 import { STORY_CHANGED } from '@storybook/core-events';
-import { API } from '@storybook/api';
+import type { API } from '@storybook/api';
 import { ADD_TESTS } from '../shared';
 
 // TODO: import type from @types/jest

code/addons/jest/src/shared.ts

@@ -1,4 +1,4 @@
-import type { Parameters } from '@storybook/addons';
+import type { Parameters } from '@storybook/types';
 
 // addons, panels and events get unique names using a prefix
 export const PARAM_KEY = 'test';

code/addons/links/package.json

@@ -68,6 +68,7 @@
     "@storybook/core-events": "7.0.0-alpha.43",
     "@storybook/csf": "next",
     "@storybook/router": "7.0.0-alpha.43",
+    "@storybook/types": "7.0.0-alpha.43",
     "global": "^4.4.0",
     "prop-types": "^15.7.2",
     "ts-dedent": "^2.0.0"

code/addons/links/src/utils.ts

@@ -1,7 +1,7 @@
 import global from 'global';
 import { addons, makeDecorator } from '@storybook/addons';
 import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
-import type { StoryId, StoryName, ComponentTitle } from '@storybook/csf';
+import type { StoryId, StoryName, ComponentTitle } from '@storybook/types';
 import { toId } from '@storybook/csf';
 import { PARAM_KEY } from './constants';
 

code/addons/measure/package.json

@@ -66,7 +66,7 @@
     "@storybook/client-logger": "7.0.0-alpha.43",
     "@storybook/components": "7.0.0-alpha.43",
     "@storybook/core-events": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
+    "@storybook/types": "7.0.0-alpha.43",
     "global": "^4.4.0"
   },
   "devDependencies": {

code/addons/measure/src/withMeasure.ts

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import { useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 import { drawSelectedElement } from './box-model/visualizer';
 import { init, rescale, destroy } from './box-model/canvas';
 import { deepElementFromPoint } from './util';

code/addons/outline/package.json

@@ -69,7 +69,7 @@
     "@storybook/client-logger": "7.0.0-alpha.43",
     "@storybook/components": "7.0.0-alpha.43",
     "@storybook/core-events": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
+    "@storybook/types": "7.0.0-alpha.43",
     "global": "^4.4.0",
     "ts-dedent": "^2.0.0"
   },

code/addons/outline/src/withOutline.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addOutlineStyles } from './helpers';
 import { PARAM_KEY } from './constants';

code/addons/storyshots/storyshots-core/package.json

@@ -44,7 +44,7 @@
     "@storybook/core-client": "7.0.0-alpha.43",
     "@storybook/core-common": "7.0.0-alpha.43",
     "@storybook/core-webpack": "7.0.0-alpha.43",
-    "@storybook/csf": "next",
+    "@storybook/types": "7.0.0-alpha.43",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",

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

@@ -1,13 +1,17 @@
-import type { AnyFramework } from '@storybook/csf';
-import type { Loadable } from '@storybook/addons';
+/* eslint-disable camelcase */
+import type { AnyFramework, Addon_Loadable } from '@storybook/types';
 import { ClientApi as ClientApiClass } from '@storybook/client-api';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 import type { SupportedFramework } from './SupportedFramework';
 
 export type RenderTree = (story: any, context?: any, options?: any) => any;
 
 export interface ClientApi<TFramework extends AnyFramework> extends ClientApiClass<AnyFramework> {
-  configure(loader: Loadable, module: NodeModule | false, showDeprecationWarning?: boolean): void;
+  configure(
+    loader: Addon_Loadable,
+    module: NodeModule | false,
+    showDeprecationWarning?: boolean
+  ): void;
   forceReRender(): void;
 }