From ff9d2cf9f6c93ecbc13b9515cc7eacabcaf681dc Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 14 Jul 2022 22:02:01 +1000 Subject: [PATCH 1/6] WIP --- .../external-docs/components/AccountForm.mdx | 4 +- lib/blocks/src/blocks/ArgsTable.tsx | 57 +++++++------------ 2 files changed, 23 insertions(+), 38 deletions(-) diff --git a/examples/external-docs/components/AccountForm.mdx b/examples/external-docs/components/AccountForm.mdx index 1048a938b871..a0f1c156f35a 100644 --- a/examples/external-docs/components/AccountForm.mdx +++ b/examples/external-docs/components/AccountForm.mdx @@ -1,4 +1,4 @@ -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 @@ -6,3 +6,5 @@ import * as AccountFormStories from './AccountForm.stories'; + + diff --git a/lib/blocks/src/blocks/ArgsTable.tsx b/lib/blocks/src/blocks/ArgsTable.tsx index 116ff04ac767..f260b9b67adb 100644 --- a/lib/blocks/src/blocks/ArgsTable.tsx +++ b/lib/blocks/src/blocks/ArgsTable.tsx @@ -2,9 +2,9 @@ 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 { filterArgTypes, PropDescriptor, Story } from '@storybook/store'; import Events from '@storybook/core-events'; -import { StrictArgTypes, Args, Globals } from '@storybook/csf'; +import { StrictArgTypes, Args, Globals, StoryId } from '@storybook/csf'; import { ArgsTable as PureArgsTable, ArgsTableProps as PureArgsTableProps, @@ -106,17 +106,20 @@ const isShortcut = (value?: string) => { return value && [CURRENT_SELECTION, PRIMARY_STORY].includes(value); }; -export const getComponent = (props: ArgsTableProps = {}, context: DocsContextProps): Component => { +export const getStory = (props: ArgsTableProps = {}, context: DocsContextProps): Story => { const { of } = props as OfProps; const { story } = props as StoryProps; - const { component } = context.storyById(); + if (isShortcut(of) || isShortcut(story)) { - return component || null; + return context.storyById(); } - if (!of) { - throw new Error(ArgsTableError.NO_COMPONENT); + + try { + // of=storyReference + return context.storyById(context.storyIdByModuleExport(of)); + } catch (err) { + return null; } - return of; }; const addComponentTabs = ( @@ -135,36 +138,14 @@ const addComponentTabs = ( }); export const StoryTable: FC< - StoryProps & { component: Component; subcomponents: Record } + StoryProps & { loadedStory: Story; subcomponents: Record } > = (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 ; @@ -224,11 +205,13 @@ export const ArgsTable: FC = (props) => { const sort = sortProp || controls?.sort; - const main = getComponent(props, context); - if (storyName) { - return ; + const story = getStory(props, context); + if (story) { + return ; } + const main = (props as OfProps).of; + if (!main) throw new Error(ArgsTableError.NO_COMPONENT); if (!components && !subcomponents) { let mainProps; try { From d2308ac644a766d1b0e488fd3c283d1e9cb18d1a Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 15 Jul 2022 13:02:37 +1000 Subject: [PATCH 2/6] Don't clean in watch mode. cc @ndelangen this fixes annoying errors like: ``` error - ../../lib/blocks/dist/index.js Module build failed: Error: ENOENT: no such file or directory, open '/Users/tom/GitHub/storybookjs/storybook/lib/blocks/dist/index.js' ``` --- scripts/prepare/bundle.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts index 24702e49ff18..35bebe107262 100644 --- a/scripts/prepare/bundle.ts +++ b/scripts/prepare/bundle.ts @@ -47,7 +47,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { // sourcemap: optimized, format: ['esm'], target: 'chrome100', - clean: true, + clean: !watch, platform: platform || 'browser', // shims: true, esbuildPlugins: [ @@ -85,7 +85,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { format: ['cjs'], target: 'node14', platform: 'node', - clean: true, + clean: !watch, external: [name, ...Object.keys(dependencies || {}), ...Object.keys(peerDependencies || {})], esbuildOptions: (c) => { From 9a4d43d0fb95b4cd0290f531cbe0cbf5fa1c3cd4 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 15 Jul 2022 14:25:44 +1000 Subject: [PATCH 3/6] Simplify channel use in blocks --- lib/blocks/package.json | 4 +- lib/blocks/src/blocks/ArgsTable.tsx | 29 +++++++------ lib/blocks/src/blocks/DocsContainer.tsx | 2 +- lib/blocks/src/blocks/SourceContainer.tsx | 5 +-- lib/blocks/src/blocks/enhanceSource.test.ts | 2 +- lib/blocks/src/blocks/enhanceSource.ts | 2 +- .../blocks/external/ExternalDocsContext.ts | 15 +++---- .../src/blocks/external/ExternalPreview.ts | 4 +- lib/blocks/src/blocks/mdx.tsx | 41 ++++++++++--------- lib/preview-web/package.json | 1 + .../src/docs-context/DocsContext.ts | 5 +-- .../src/docs-context/DocsContextProps.ts | 6 +++ .../src/render/StandaloneDocsRender.ts | 6 +-- .../src/render/TemplateDocsRender.ts | 6 +-- yarn.lock | 1 + 15 files changed, 66 insertions(+), 63 deletions(-) diff --git a/lib/blocks/package.json b/lib/blocks/package.json index ad3791b9793a..62d89225c03a 100644 --- a/lib/blocks/package.json +++ b/lib/blocks/package.json @@ -41,7 +41,6 @@ "prepare": "esrun ../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.13", "@storybook/api": "7.0.0-alpha.13", "@storybook/client-logger": "7.0.0-alpha.13", "@storybook/components": "7.0.0-alpha.13", @@ -64,7 +63,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" diff --git a/lib/blocks/src/blocks/ArgsTable.tsx b/lib/blocks/src/blocks/ArgsTable.tsx index f260b9b67adb..331331b73deb 100644 --- a/lib/blocks/src/blocks/ArgsTable.tsx +++ b/lib/blocks/src/blocks/ArgsTable.tsx @@ -1,10 +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, Story } from '@storybook/store'; -import Events from '@storybook/core-events'; -import { StrictArgTypes, Args, Globals, StoryId } from '@storybook/csf'; +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, ArgsTableProps as PureArgsTableProps, @@ -16,7 +20,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; @@ -45,7 +48,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,22 +57,21 @@ 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); @@ -78,8 +79,8 @@ const useGlobals = (context: DocsContextProps): [Globals] => { 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]; @@ -207,7 +208,9 @@ export const ArgsTable: FC = (props) => { const story = getStory(props, context); if (story) { - return ; + return ( + + ); } const main = (props as OfProps).of; diff --git a/lib/blocks/src/blocks/DocsContainer.tsx b/lib/blocks/src/blocks/DocsContainer.tsx index d9db94465df1..ffb841a30f44 100644 --- a/lib/blocks/src/blocks/DocsContainer.tsx +++ b/lib/blocks/src/blocks/DocsContainer.tsx @@ -40,7 +40,7 @@ export const DocsContainer: FunctionComponent = ({ return ( - + {children} diff --git a/lib/blocks/src/blocks/SourceContainer.tsx b/lib/blocks/src/blocks/SourceContainer.tsx index bb5a5bd06397..09634240b0af 100644 --- a/lib/blocks/src/blocks/SourceContainer.tsx +++ b/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 = createContext({ sources: {} }); -export const SourceContainer: FC<{}> = ({ children }) => { +export const SourceContainer: FC<{ channel: Channel }> = ({ children, channel }) => { const [sources, setSources] = useState({}); - const channel = addons.getChannel(); useEffect(() => { const handleSnippetRendered = ( diff --git a/lib/blocks/src/blocks/enhanceSource.test.ts b/lib/blocks/src/blocks/enhanceSource.test.ts index 13afaadc40c4..f0010c10bdab 100644 --- a/lib/blocks/src/blocks/enhanceSource.test.ts +++ b/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 = { diff --git a/lib/blocks/src/blocks/enhanceSource.ts b/lib/blocks/src/blocks/enhanceSource.ts index 3cfb4890dc06..f2c799648d23 100644 --- a/lib/blocks/src/blocks/enhanceSource.ts +++ b/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'; diff --git a/lib/blocks/src/blocks/external/ExternalDocsContext.ts b/lib/blocks/src/blocks/external/ExternalDocsContext.ts index 70c69a32375a..13a2cd3503aa 100644 --- a/lib/blocks/src/blocks/external/ExternalDocsContext.ts +++ b/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 extends DocsContext { constructor( - public readonly id: StoryId, - public readonly title: ComponentTitle, - public readonly name: StoryName, + public channel: Channel, protected store: StoryStore, public renderStoryToElement: DocsContextProps['renderStoryToElement'], private processMetaExports: (metaExports: ModuleExports) => CSFFile ) { - super(id, title, name, store, renderStoryToElement, [], true); + super(channel, store, renderStoryToElement, [], true); } setMeta = (metaExports: ModuleExports) => { diff --git a/lib/blocks/src/blocks/external/ExternalPreview.ts b/lib/blocks/src/blocks/external/ExternalPreview.ts index 123bf9f2213c..8f569faf12a6 100644 --- a/lib/blocks/src/blocks/external/ExternalPreview.ts +++ b/lib/blocks/src/blocks/external/ExternalPreview.ts @@ -75,9 +75,7 @@ export class ExternalPreview< docsContext = () => { return new ExternalDocsContext( - 'storybook--docs', - 'Storybook', - 'Docs', + this.channel, this.storyStore, this.renderStoryToElement.bind(this), this.processMetaExports.bind(this) diff --git a/lib/blocks/src/blocks/mdx.tsx b/lib/blocks/src/blocks/mdx.tsx index e3b468bb5089..19c864e3f74a 100644 --- a/lib/blocks/src/blocks/mdx.tsx +++ b/lib/blocks/src/blocks/mdx.tsx @@ -1,5 +1,4 @@ -import React, { FC, SyntheticEvent } from 'react'; -import { addons } from '@storybook/addons'; +import React, { useContext, FC, SyntheticEvent } from 'react'; import { NAVIGATE_URL } from '@storybook/core-events'; import { Code, components } from '@storybook/components'; import global from 'global'; @@ -50,8 +49,8 @@ export const CodeOrSourceMdx: FC = ({ className, children, ); }; -function navigate(url: string) { - addons.getChannel().emit(NAVIGATE_URL, url); +function navigate(context: DocsContextProps, url: string) { + context.channel.emit(NAVIGATE_URL, url); } // @ts-ignore @@ -61,21 +60,25 @@ interface AnchorInPageProps { hash: string; } -const AnchorInPage: FC = ({ hash, children }) => ( - { - const id = hash.substring(1); - const element = document.getElementById(id); - if (element) { - navigate(hash); - } - }} - > - {children} - -); +const AnchorInPage: FC = ({ hash, children }) => { + const context = useContext(DocsContext); + + return ( + { + const id = hash.substring(1); + const element = document.getElementById(id); + if (element) { + navigate(context, hash); + } + }} + > + {children} + + ); +}; interface AnchorMdxProps { href: string; diff --git a/lib/preview-web/package.json b/lib/preview-web/package.json index 77f93e40c5cd..5c41cdfcdfe4 100644 --- a/lib/preview-web/package.json +++ b/lib/preview-web/package.json @@ -43,6 +43,7 @@ "dependencies": { "@storybook/addons": "7.0.0-alpha.13", "@storybook/channel-postmessage": "7.0.0-alpha.13", + "@storybook/channels": "7.0.0-alpha.13", "@storybook/client-logger": "7.0.0-alpha.13", "@storybook/core-events": "7.0.0-alpha.13", "@storybook/csf": "0.0.2--canary.4566f4d.1", diff --git a/lib/preview-web/src/docs-context/DocsContext.ts b/lib/preview-web/src/docs-context/DocsContext.ts index b90320c328f0..f394f4291816 100644 --- a/lib/preview-web/src/docs-context/DocsContext.ts +++ b/lib/preview-web/src/docs-context/DocsContext.ts @@ -6,6 +6,7 @@ import { StoryName, } from '@storybook/csf'; import { CSFFile, ModuleExport, ModuleExports, Story, StoryStore } from '@storybook/store'; +import type { Channel } from '@storybook/channels'; import { DocsContextProps } from './DocsContextProps'; @@ -21,9 +22,7 @@ export class DocsContext implements DocsContext private primaryStory?: Story; constructor( - public readonly id: StoryId, - public readonly title: ComponentTitle, - public readonly name: StoryName, + public channel: Channel, protected store: StoryStore, public renderStoryToElement: DocsContextProps['renderStoryToElement'], /** The CSF files known (via the index) to be refererenced by this docs file */ diff --git a/lib/preview-web/src/docs-context/DocsContextProps.ts b/lib/preview-web/src/docs-context/DocsContextProps.ts index 5e548eaa7cc2..a82b2ee7f9aa 100644 --- a/lib/preview-web/src/docs-context/DocsContextProps.ts +++ b/lib/preview-web/src/docs-context/DocsContextProps.ts @@ -1,5 +1,6 @@ import type { StoryId, StoryName, AnyFramework, StoryContextForLoaders } from '@storybook/csf'; import type { ModuleExport, ModuleExports, Story } from '@storybook/store'; +import type { Channel } from '@storybook/channels'; export interface DocsContextProps { /** @@ -42,4 +43,9 @@ export interface DocsContextProps, element: HTMLElement) => () => Promise; + + /** + * Storybook channel -- use for low level event watching/emitting + */ + channel: Channel; } diff --git a/lib/preview-web/src/render/StandaloneDocsRender.ts b/lib/preview-web/src/render/StandaloneDocsRender.ts index 750291cc2a6c..8d1fae86ec92 100644 --- a/lib/preview-web/src/render/StandaloneDocsRender.ts +++ b/lib/preview-web/src/render/StandaloneDocsRender.ts @@ -71,13 +71,9 @@ export class StandaloneDocsRender implements Re throw new Error('Cannot render docs before preparing'); const docsContext = new DocsContext( - this.id, - this.entry.title, - this.entry.name, - + this.channel, this.store, renderStoryToElement, - this.csfFiles, false ); diff --git a/lib/preview-web/src/render/TemplateDocsRender.ts b/lib/preview-web/src/render/TemplateDocsRender.ts index fb2e2d31825c..eb359ae9cac3 100644 --- a/lib/preview-web/src/render/TemplateDocsRender.ts +++ b/lib/preview-web/src/render/TemplateDocsRender.ts @@ -88,13 +88,9 @@ export class TemplateDocsRender implements Rend if (!this.story || !this.csfFiles) throw new Error('Cannot render docs before preparing'); const docsContext = new DocsContext( - this.story.id, - this.entry.title, - this.entry.name, - + this.channel, this.store, renderStoryToElement, - this.csfFiles, true ); diff --git a/yarn.lock b/yarn.lock index 385ece5962cb..f98159860897 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9138,6 +9138,7 @@ __metadata: dependencies: "@storybook/addons": 7.0.0-alpha.13 "@storybook/channel-postmessage": 7.0.0-alpha.13 + "@storybook/channels": 7.0.0-alpha.13 "@storybook/client-logger": 7.0.0-alpha.13 "@storybook/core-events": 7.0.0-alpha.13 "@storybook/csf": 0.0.2--canary.4566f4d.1 From ed3be15843cac7d8bdfe3482fcb778e49ca9f527 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 15 Jul 2022 16:50:37 +1000 Subject: [PATCH 4/6] Ensure each preview has its own channel --- lib/blocks/package.json | 1 + lib/blocks/src/blocks/external/ExternalPreview.ts | 4 +++- lib/preview-web/src/Preview.tsx | 5 +---- yarn.lock | 1 + 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/blocks/package.json b/lib/blocks/package.json index 62d89225c03a..f2909a36e7fd 100644 --- a/lib/blocks/package.json +++ b/lib/blocks/package.json @@ -42,6 +42,7 @@ }, "dependencies": { "@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", diff --git a/lib/blocks/src/blocks/external/ExternalPreview.ts b/lib/blocks/src/blocks/external/ExternalPreview.ts index 8f569faf12a6..bf0fcc48f5de 100644 --- a/lib/blocks/src/blocks/external/ExternalPreview.ts +++ b/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 = {}; constructor(public projectAnnotations: ProjectAnnotations) { - super(); + super(new Channel()); this.initialize({ getStoryIndex: () => this.storyIndex, diff --git a/lib/preview-web/src/Preview.tsx b/lib/preview-web/src/Preview.tsx index fee48ac8d72e..496a6a8345f4 100644 --- a/lib/preview-web/src/Preview.tsx +++ b/lib/preview-web/src/Preview.tsx @@ -37,8 +37,6 @@ type MaybePromise = Promise | T; const STORY_INDEX_PATH = './index.json'; export class Preview { - channel: Channel; - serverChannel?: Channel; storyStore: StoryStore; @@ -53,8 +51,7 @@ export class Preview { previewEntryError?: Error; - constructor() { - this.channel = addons.getChannel(); + constructor(private channel: Channel = addons.getChannel()) { if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) { this.serverChannel = addons.getServerChannel(); } diff --git a/yarn.lock b/yarn.lock index f98159860897..069d5ab4a31c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7817,6 +7817,7 @@ __metadata: "@digitak/esrun": ^3.2.2 "@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 From 4bb392eaa4418d19412065483924468737e95842 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 15 Jul 2022 17:00:34 +1000 Subject: [PATCH 5/6] Rationalize a tiny bit --- lib/blocks/src/blocks/ArgsTable.tsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/lib/blocks/src/blocks/ArgsTable.tsx b/lib/blocks/src/blocks/ArgsTable.tsx index 331331b73deb..4d89833365c9 100644 --- a/lib/blocks/src/blocks/ArgsTable.tsx +++ b/lib/blocks/src/blocks/ArgsTable.tsx @@ -1,7 +1,8 @@ import React, { FC, useContext, useEffect, useState, useCallback } from 'react'; import mapValues from 'lodash/mapValues'; import { ArgTypesExtractor } from '@storybook/docs-tools'; -import { filterArgTypes, PropDescriptor, Story } from '@storybook/store'; +import type { ModuleExport, PropDescriptor, Story } from '@storybook/store'; +import { filterArgTypes } from '@storybook/store'; import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, @@ -38,7 +39,8 @@ type ComponentsProps = BaseProps & { }; type StoryProps = BaseProps & { - story: '.' | '^' | string; + story?: '.' | '^' | string; + of?: ModuleExport; showComponent?: boolean; }; @@ -108,19 +110,23 @@ const isShortcut = (value?: string) => { }; export const getStory = (props: ArgsTableProps = {}, context: DocsContextProps): Story => { - const { of } = props as OfProps; - const { story } = props as StoryProps; + const { story: storyName, of } = props as StoryProps; - if (isShortcut(of) || isShortcut(story)) { + if (isShortcut(of) || isShortcut(storyName)) { + if (of === CURRENT_SELECTION || storyName === CURRENT_SELECTION) currentSelectionWarning(); return context.storyById(); } + if (storyName) { + return context.storyById(context.storyIdByName(storyName)); + } + try { - // of=storyReference - return context.storyById(context.storyIdByModuleExport(of)); + if (of) return context.storyById(context.storyIdByModuleExport(of)); } catch (err) { - return null; + // of is a component reference } + return null; }; const addComponentTabs = ( @@ -202,7 +208,6 @@ export const ArgsTable: FC = (props) => { } = context.storyById(); const { include, exclude, components, sort: sortProp } = props as ComponentsProps; - const { story: storyName } = props as StoryProps; const sort = sortProp || controls?.sort; From 01217162121942b73c0f07a9a3682770d1551314 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 15 Jul 2022 18:08:16 +1000 Subject: [PATCH 6/6] Fixes --- lib/blocks/src/blocks/mdx.tsx | 7 +++++-- lib/preview-web/src/Preview.tsx | 2 +- lib/preview-web/src/docs-context/DocsContext.ts | 10 ++-------- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/lib/blocks/src/blocks/mdx.tsx b/lib/blocks/src/blocks/mdx.tsx index 19c864e3f74a..0ef6a3e89fd4 100644 --- a/lib/blocks/src/blocks/mdx.tsx +++ b/lib/blocks/src/blocks/mdx.tsx @@ -87,6 +87,7 @@ interface AnchorMdxProps { export const AnchorMdx: FC = (props) => { const { href, target, children, ...rest } = props; + const context = useContext(DocsContext); if (href) { // Enable scrolling for in-page anchors. @@ -103,7 +104,7 @@ export const AnchorMdx: FC = (props) => { event.preventDefault(); // use the A element's href, which has been modified for // local paths without a `?path=` query param prefix - navigate(event.currentTarget.getAttribute('href')); + navigate(context, event.currentTarget.getAttribute('href')); }} target={target} {...rest} @@ -156,6 +157,8 @@ const HeaderWithOcticonAnchor: FC = ({ children, ...rest }) => { + const context = useContext(DocsContext); + // @ts-ignore const OcticonHeader = OcticonHeaders[as]; const hash = `#${id}`; @@ -170,7 +173,7 @@ const HeaderWithOcticonAnchor: FC = ({ onClick={(event: SyntheticEvent) => { const element = document.getElementById(id); if (element) { - navigate(hash); + navigate(context, hash); } }} > diff --git a/lib/preview-web/src/Preview.tsx b/lib/preview-web/src/Preview.tsx index 496a6a8345f4..87aaaa65ec98 100644 --- a/lib/preview-web/src/Preview.tsx +++ b/lib/preview-web/src/Preview.tsx @@ -51,7 +51,7 @@ export class Preview { previewEntryError?: Error; - constructor(private channel: Channel = addons.getChannel()) { + constructor(protected channel: Channel = addons.getChannel()) { if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) { this.serverChannel = addons.getServerChannel(); } diff --git a/lib/preview-web/src/docs-context/DocsContext.ts b/lib/preview-web/src/docs-context/DocsContext.ts index f394f4291816..ae1aa3e8b260 100644 --- a/lib/preview-web/src/docs-context/DocsContext.ts +++ b/lib/preview-web/src/docs-context/DocsContext.ts @@ -1,11 +1,5 @@ -import { - AnyFramework, - ComponentTitle, - StoryContextForLoaders, - StoryId, - StoryName, -} from '@storybook/csf'; -import { CSFFile, ModuleExport, ModuleExports, Story, StoryStore } from '@storybook/store'; +import type { AnyFramework, StoryContextForLoaders, StoryId, StoryName } from '@storybook/csf'; +import type { CSFFile, ModuleExport, ModuleExports, Story, StoryStore } from '@storybook/store'; import type { Channel } from '@storybook/channels'; import { DocsContextProps } from './DocsContextProps';