Change ArgsTable API to work with of={storyRef} and isolate channel

examples/external-docs/components/AccountForm.mdx

@@ -1,8 +1,10 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import * as AccountFormStories from './AccountForm.stories';
 
 ## Docs for Account form
 
 <Meta of={AccountFormStories} />
 
 <Story of={AccountFormStories.Standard} />
+
+<ArgsTable of={AccountFormStories.Standard} />

lib/blocks/package.json

@@ -41,8 +41,8 @@
     "prepare": "esrun ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.13",
     "@storybook/api": "7.0.0-alpha.13",
+    "@storybook/channels": "7.0.0-alpha.13",
     "@storybook/client-logger": "7.0.0-alpha.13",
     "@storybook/components": "7.0.0-alpha.13",
     "@storybook/core-events": "7.0.0-alpha.13",
@@ -64,7 +64,8 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@digitak/esrun": "^3.2.2"
+    "@digitak/esrun": "^3.2.2",
+    "@storybook/addons": "7.0.0-alpha.13"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

lib/blocks/src/blocks/ArgsTable.tsx

@@ -1,9 +1,14 @@
 import React, { FC, useContext, useEffect, useState, useCallback } from 'react';
 import mapValues from 'lodash/mapValues';
 import { ArgTypesExtractor } from '@storybook/docs-tools';
-import { addons } from '@storybook/addons';
-import { filterArgTypes, PropDescriptor } from '@storybook/store';
-import Events from '@storybook/core-events';
+import type { ModuleExport, PropDescriptor, Story } from '@storybook/store';
+import { filterArgTypes } from '@storybook/store';
+import {
+  UPDATE_STORY_ARGS,
+  STORY_ARGS_UPDATED,
+  GLOBALS_UPDATED,
+  RESET_STORY_ARGS,
+} from '@storybook/core-events';
 import { StrictArgTypes, Args, Globals } from '@storybook/csf';
 import {
   ArgsTable as PureArgsTable,
@@ -16,7 +21,6 @@ import {
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION, currentSelectionWarning, PRIMARY_STORY } from './types';
 import { getComponentName } from './utils';
-import { useStory } from './useStory';
 
 interface BaseProps {
   include?: PropDescriptor;
@@ -35,7 +39,8 @@ type ComponentsProps = BaseProps & {
 };
 
 type StoryProps = BaseProps & {
-  story: '.' | '^' | string;
+  story?: '.' | '^' | string;
+  of?: ModuleExport;
   showComponent?: boolean;
 };
 
@@ -45,7 +50,6 @@ const useArgs = (
   storyId: string,
   context: DocsContextProps
 ): [Args, (args: Args) => void, (argNames?: string[]) => void] => {
-  const channel = addons.getChannel();
   const storyContext = context.getStoryContext(context.storyById());
 
   const [args, setArgs] = useState(storyContext.args);
@@ -55,31 +59,30 @@ const useArgs = (
         setArgs(changed.args);
       }
     };
-    channel.on(Events.STORY_ARGS_UPDATED, cb);
-    return () => channel.off(Events.STORY_ARGS_UPDATED, cb);
+    context.channel.on(STORY_ARGS_UPDATED, cb);
+    return () => context.channel.off(STORY_ARGS_UPDATED, cb);
   }, [storyId]);
   const updateArgs = useCallback(
-    (updatedArgs) => channel.emit(Events.UPDATE_STORY_ARGS, { storyId, updatedArgs }),
+    (updatedArgs) => context.channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }),
     [storyId]
   );
   const resetArgs = useCallback(
-    (argNames?: string[]) => channel.emit(Events.RESET_STORY_ARGS, { storyId, argNames }),
+    (argNames?: string[]) => context.channel.emit(RESET_STORY_ARGS, { storyId, argNames }),
     [storyId]
   );
   return [args, updateArgs, resetArgs];
 };
 
 const useGlobals = (context: DocsContextProps): [Globals] => {
-  const channel = addons.getChannel();
   const storyContext = context.getStoryContext(context.storyById());
   const [globals, setGlobals] = useState(storyContext.globals);
 
   useEffect(() => {
     const cb = (changed: { globals: Globals }) => {
       setGlobals(changed.globals);
     };
-    channel.on(Events.GLOBALS_UPDATED, cb);
-    return () => channel.off(Events.GLOBALS_UPDATED, cb);
+    context.channel.on(GLOBALS_UPDATED, cb);
+    return () => context.channel.off(GLOBALS_UPDATED, cb);
   }, []);
 
   return [globals];
@@ -106,17 +109,24 @@ const isShortcut = (value?: string) => {
   return value && [CURRENT_SELECTION, PRIMARY_STORY].includes(value);
 };
 
-export const getComponent = (props: ArgsTableProps = {}, context: DocsContextProps): Component => {
-  const { of } = props as OfProps;
-  const { story } = props as StoryProps;
-  const { component } = context.storyById();
-  if (isShortcut(of) || isShortcut(story)) {
-    return component || null;
+export const getStory = (props: ArgsTableProps = {}, context: DocsContextProps): Story => {
+  const { story: storyName, of } = props as StoryProps;
+
+  if (isShortcut(of) || isShortcut(storyName)) {
+    if (of === CURRENT_SELECTION || storyName === CURRENT_SELECTION) currentSelectionWarning();
+    return context.storyById();
+  }
+
+  if (storyName) {
+    return context.storyById(context.storyIdByName(storyName));
   }
-  if (!of) {
-    throw new Error(ArgsTableError.NO_COMPONENT);
+
+  try {
+    if (of) return context.storyById(context.storyIdByModuleExport(of));
+  } catch (err) {
+    // of is a component reference
   }
-  return of;
+  return null;
 };
 
 const addComponentTabs = (
@@ -135,36 +145,14 @@ const addComponentTabs = (
 });
 
 export const StoryTable: FC<
-  StoryProps & { component: Component; subcomponents: Record<string, Component> }
+  StoryProps & { loadedStory: Story; subcomponents: Record<string, Component> }
 > = (props) => {
   const context = useContext(DocsContext);
-  const {
-    story: storyName,
-    component,
-    subcomponents,
-    showComponent,
-    include,
-    exclude,
-    sort,
-  } = props;
+  const { loadedStory: story, subcomponents, showComponent, include, exclude, sort } = props;
+  const { component } = story;
   try {
-    let storyId;
-    switch (storyName) {
-      case CURRENT_SELECTION:
-      case PRIMARY_STORY: {
-        if (storyName === CURRENT_SELECTION) currentSelectionWarning();
-        const primaryStory = context.storyById();
-        storyId = primaryStory.id;
-        break;
-      }
-      default: {
-        storyId = context.storyIdByName(storyName);
-      }
-    }
-
-    const story = useStory(storyId, context);
     // eslint-disable-next-line prefer-const
-    let [args, updateArgs, resetArgs] = useArgs(storyId, context);
+    let [args, updateArgs, resetArgs] = useArgs(story.id, context);
     const [globals] = useGlobals(context);
     if (!story) return <PureArgsTable isLoading updateArgs={updateArgs} resetArgs={resetArgs} />;
 
@@ -220,15 +208,18 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   } = context.storyById();
 
   const { include, exclude, components, sort: sortProp } = props as ComponentsProps;
-  const { story: storyName } = props as StoryProps;
 
   const sort = sortProp || controls?.sort;
 
-  const main = getComponent(props, context);
-  if (storyName) {
-    return <StoryTable {...(props as StoryProps)} component={main} {...{ subcomponents, sort }} />;
+  const story = getStory(props, context);
+  if (story) {
+    return (
+      <StoryTable {...(props as StoryProps)} loadedStory={story} {...{ subcomponents, sort }} />
+    );
   }
 
+  const main = (props as OfProps).of;
+  if (!main) throw new Error(ArgsTableError.NO_COMPONENT);
   if (!components && !subcomponents) {
     let mainProps;
     try {

lib/blocks/src/blocks/DocsContainer.tsx

@@ -40,7 +40,7 @@ export const DocsContainer: FunctionComponent<DocsContainerProps> = ({
 
   return (
     <DocsContext.Provider value={context}>
-      <SourceContainer>
+      <SourceContainer channel={context.channel}>
         <ThemeProvider theme={ensureTheme(theme)}>
           <DocsWrapper className="sbdocs sbdocs-wrapper">
             <DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>

lib/blocks/src/blocks/SourceContainer.tsx

@@ -1,7 +1,7 @@
 import React, { FC, Context, createContext, useEffect, useState } from 'react';
 
 import { dequal as deepEqual } from 'dequal';
-import { addons } from '@storybook/addons';
+import type { Channel } from '@storybook/addons';
 
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
 import type { SyntaxHighlighterFormatTypes } from '@storybook/components';
@@ -20,9 +20,8 @@ export interface SourceContextProps {
 
 export const SourceContext: Context<SourceContextProps> = createContext({ sources: {} });
 
-export const SourceContainer: FC<{}> = ({ children }) => {
+export const SourceContainer: FC<{ channel: Channel }> = ({ children, channel }) => {
   const [sources, setSources] = useState<StorySources>({});
-  const channel = addons.getChannel();
 
   useEffect(() => {
     const handleSnippetRendered = (

lib/blocks/src/blocks/enhanceSource.test.ts

@@ -1,4 +1,4 @@
-import type { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/csf';
 import { enhanceSource } from './enhanceSource';
 
 const emptyContext: StoryContext = {

lib/blocks/src/blocks/enhanceSource.ts

@@ -1,4 +1,4 @@
-import type { Parameters } from '@storybook/addons';
+import type { Parameters } from '@storybook/csf';
 import type { Story } from '@storybook/store';
 import { combineParameters } from '@storybook/store';
 

lib/blocks/src/blocks/external/ExternalDocsContext.ts

@@ -1,17 +1,18 @@
-import { StoryId, AnyFramework, ComponentTitle, StoryName } from '@storybook/csf';
-import { DocsContext, DocsContextProps } from '@storybook/preview-web';
-import { CSFFile, ModuleExport, ModuleExports, StoryStore } from '@storybook/store';
+import { AnyFramework } from '@storybook/csf';
+import { DocsContext } from '@storybook/preview-web';
+import { StoryStore } from '@storybook/store';
+import type { DocsContextProps } from '@storybook/preview-web';
+import type { CSFFile, ModuleExport, ModuleExports } from '@storybook/store';
+import type { Channel } from '@storybook/channels';
 
 export class ExternalDocsContext<TFramework extends AnyFramework> extends DocsContext<TFramework> {
   constructor(
-    public readonly id: StoryId,
-    public readonly title: ComponentTitle,
-    public readonly name: StoryName,
+    public channel: Channel,
     protected store: StoryStore<TFramework>,
     public renderStoryToElement: DocsContextProps['renderStoryToElement'],
     private processMetaExports: (metaExports: ModuleExports) => CSFFile<TFramework>
   ) {
-    super(id, title, name, store, renderStoryToElement, [], true);
+    super(channel, store, renderStoryToElement, [], true);
   }
 
   setMeta = (metaExports: ModuleExports) => {

lib/blocks/src/blocks/external/ExternalPreview.ts

@@ -1,6 +1,8 @@
 import { Preview } from '@storybook/preview-web';
 import { Path, ModuleExports, StoryIndex, composeConfigs } from '@storybook/store';
 import { AnyFramework, ComponentTitle, ProjectAnnotations } from '@storybook/csf';
+import { Channel } from '@storybook/channels';
+
 import { ExternalDocsContext } from './ExternalDocsContext';
 
 type MetaExports = ModuleExports;
@@ -31,7 +33,7 @@ export class ExternalPreview<
   private moduleExportsByImportPath: Record<Path, ModuleExports> = {};
 
   constructor(public projectAnnotations: ProjectAnnotations) {
-    super();
+    super(new Channel());
 
     this.initialize({
       getStoryIndex: () => this.storyIndex,
@@ -75,9 +77,7 @@ export class ExternalPreview<
 
   docsContext = () => {
     return new ExternalDocsContext(
-      'storybook--docs',
-      'Storybook',
-      'Docs',
+      this.channel,
       this.storyStore,
       this.renderStoryToElement.bind(this),
       this.processMetaExports.bind(this)