Merge pull request #18762 from storybookjs/tom/sb-505-info-remains-se…

…lected-when-changing

Pass full docs options to manager

jest.config.js

@@ -84,7 +84,6 @@ module.exports = {
     'typings.d.ts$',
   ],
   globals: {
-    DOCS_MODE: false,
     PREVIEW_URL: undefined,
     SNAPSHOT_OS: os.platform() === 'win32' ? 'windows' : 'posix',
   },

lib/api/src/index.tsx

@@ -21,6 +21,7 @@ import {
 } from '@storybook/core-events';
 import type { RouterData } from '@storybook/router';
 import type { Listener } from '@storybook/channels';
+import type { DocsOptions } from '@storybook/core-common';
 
 import { createContext } from './context';
 import Store, { Options } from './store';
@@ -57,7 +58,7 @@ export { default as merge } from './lib/merge';
 export type { Options as StoreOptions, Listener as ChannelListener };
 export { ActiveTabs };
 
-const ManagerContext = createContext({ api: undefined, state: getInitialState({}) });
+export const ManagerContext = createContext({ api: undefined, state: getInitialState({}) });
 
 export type ModuleArgs = RouterData &
   ProviderData & {
@@ -67,6 +68,10 @@ export type ModuleArgs = RouterData &
     store: Store;
   };
 
+type OptionsData = {
+  docsOptions: DocsOptions;
+};
+
 export type State = layout.SubState &
   stories.SubState &
   refs.SubState &
@@ -78,6 +83,7 @@ export type State = layout.SubState &
   settings.SubState &
   globals.SubState &
   RouterData &
+  OptionsData &
   Other;
 
 export type API = addons.SubAPI &
@@ -106,7 +112,7 @@ export interface Combo {
 
 interface ProviderData {
   provider: provider.Provider;
-  docsMode: boolean;
+  docsOptions: DocsOptions;
 }
 
 export type ManagerProviderProps = RouterData &
@@ -177,10 +183,10 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
       location,
       path,
       refId,
-      viewMode = props.docsMode ? 'docs' : 'story',
+      viewMode = props.docsOptions.docsMode ? 'docs' : 'story',
       singleStory,
       storyId,
-      docsMode,
+      docsOptions,
       navigate,
     } = props;
 
@@ -189,9 +195,10 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
       setState: (stateChange: Partial<State>, callback) => this.setState(stateChange, callback),
     });
 
-    const routeData = { location, path, viewMode, singleStory, storyId, refId, docsMode };
+    const routeData = { location, path, viewMode, singleStory, storyId, refId };
+    const optionsData: OptionsData = { docsOptions };
 
-    this.state = store.getInitialState(getInitialState(routeData));
+    this.state = store.getInitialState(getInitialState({ ...routeData, ...optionsData }));
 
     const apiData = {
       navigate,
@@ -213,7 +220,9 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
       globals,
       url,
       version,
-    ].map((m) => m.init({ ...routeData, ...apiData, state: this.state, fullAPI: this.api }));
+    ].map((m) =>
+      m.init({ ...routeData, ...optionsData, ...apiData, state: this.state, fullAPI: this.api })
+    );
 
     // Create our initial state by combining the initial state of all modules, then overlaying any saved state
     const state = getInitialState(this.state, ...this.modules.map((m) => m.state));

lib/api/src/modules/refs.ts

@@ -133,7 +133,7 @@ const map = (
 };
 
 export const init: ModuleFn<SubAPI, SubState, void> = (
-  { store, provider, singleStory, docsMode },
+  { store, provider, singleStory, docsOptions: { docsMode } = {} },
   { runCheck = true } = {}
 ) => {
   const api: SubAPI = {

lib/api/src/modules/stories.ts

@@ -122,7 +122,7 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
   provider,
   storyId: initialStoryId,
   viewMode: initialViewMode,
-  docsMode,
+  docsOptions: { docsMode } = {},
 }) => {
   const api: SubAPI = {
     storyId: toId,

lib/api/src/tests/stories.test.ts

@@ -1223,7 +1223,7 @@ describe('stories API', () => {
           navigate,
           provider,
           fullAPI,
-          docsMode: true,
+          docsOptions: { docsMode: true },
         } as any);
         Object.assign(fullAPI, api);
 
@@ -1431,7 +1431,7 @@ describe('stories API', () => {
           navigate,
           provider,
           fullAPI,
-          docsMode: true,
+          docsOptions: { docsMode: true },
         } as any);
         Object.assign(fullAPI, api);
 

lib/api/src/typings.d.ts

@@ -1,5 +1,2 @@
 declare module 'global';
 declare module 'preval.macro';
-
-// provided by the webpack define plugin
-declare var DOCS_MODE: string | undefined;

lib/builder-manager/src/index.ts

@@ -85,9 +85,8 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 }) {
   logger.info('=> Starting manager..');
 
-  const { config, customHead, features, instance, refs, template, title, logLevel } = await getData(
-    options
-  );
+  const { config, customHead, features, instance, refs, template, title, logLevel, docsOptions } =
+    await getData(options);
 
   yield;
 
@@ -117,6 +116,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     features,
     refs,
     logLevel,
+    docsOptions,
     options
   );
 
@@ -150,9 +150,8 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     throw new Error('outputDir is required');
   }
   logger.info('=> Building manager..');
-  const { config, customHead, features, instance, refs, template, title, logLevel } = await getData(
-    options
-  );
+  const { config, customHead, features, instance, refs, template, title, logLevel, docsOptions } =
+    await getData(options);
   yield;
 
   const addonsDir = config.outdir;
@@ -179,6 +178,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     features,
     refs,
     logLevel,
+    docsOptions,
     options
   );
 

lib/builder-manager/src/utils/data.ts

@@ -1,5 +1,5 @@
 import { join } from 'path';
-import type { Options } from '@storybook/core-common';
+import type { DocsOptions, Options } from '@storybook/core-common';
 import { getRefs } from '@storybook/core-common';
 
 import { readTemplate } from './template';
@@ -11,6 +11,7 @@ export const getData = async (options: Options) => {
   const features = options.presets.apply<Record<string, string | boolean>>('features');
   const logLevel = options.presets.apply<string>('logLevel');
   const title = options.presets.apply<string>('title');
+  const docsOptions = options.presets.apply<DocsOptions>('docs', {});
   const template = readTemplate('template.ejs');
   const customHead = safeResolve(join(options.configDir, 'manager-head.html'));
 
@@ -25,6 +26,7 @@ export const getData = async (options: Options) => {
     refs,
     features,
     title,
+    docsOptions,
     template,
     customHead,
     instance,

lib/builder-manager/src/utils/template.ts

@@ -3,7 +3,7 @@ import { readFile, pathExists } from 'fs-extra';
 
 import { render } from 'ejs';
 
-import type { Options, Ref } from '@storybook/core-common';
+import type { DocsOptions, Options, Ref } from '@storybook/core-common';
 
 import { readDeep } from './directory';
 
@@ -56,6 +56,7 @@ export const renderHTML = async (
   features: Promise<Record<string, any>>,
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
+  docsOptions: Promise<DocsOptions>,
   { versionCheck, releaseNotesData, docsMode, previewUrl, serverChannelUrl }: Options
 ) => {
   const customHeadRef = await customHead;
@@ -73,10 +74,10 @@ export const renderHTML = async (
       FEATURES: JSON.stringify(await features, null, 2),
       REFS: JSON.stringify(await refs, null, 2),
       LOGLEVEL: JSON.stringify(await logLevel, null, 2),
+      DOCS_OPTIONS: JSON.stringify(await docsOptions, null, 2),
       // These two need to be double stringified because the UI expects a string
       VERSIONCHECK: JSON.stringify(JSON.stringify(versionCheck), null, 2),
       RELEASE_NOTES_DATA: JSON.stringify(JSON.stringify(releaseNotesData), null, 2),
-      DOCS_MODE: JSON.stringify(docsMode, null, 2), // global docs mode
       PREVIEW_URL: JSON.stringify(previewUrl, null, 2), // global preview URL
       SERVER_CHANNEL_URL: JSON.stringify(serverChannelUrl, null, 2),
     },

lib/core-common/src/types.ts

@@ -300,6 +300,10 @@ export type DocsOptions = {
    * Should we generate a docs entry per CSF file?
    */
   docsPage?: boolean;
+  /**
+   * Only show doc entries in the side bar (usually set with the `--docs` CLI flag)
+   */
+  docsMode?: boolean;
 };
 
 /**

lib/core-server/src/presets/common-preset.ts

@@ -1,5 +1,6 @@
 import fs from 'fs-extra';
 import {
+  CLIOptions,
   getPreviewBodyTemplate,
   getPreviewHeadTemplate,
   getPreviewMainTemplate,
@@ -120,3 +121,11 @@ export const storyIndexers = async (indexers?: StoryIndexer[]) => {
     ...(indexers || []),
   ];
 };
+
+export const docs = (
+  docsOptions: StorybookConfig['docs'],
+  { docs: docsMode }: CLIOptions
+): StorybookConfig['docs'] => ({
+  ...docsOptions,
+  docsMode,
+});

lib/ui/src/app.stories.tsx

@@ -31,7 +31,7 @@ export const Default = () => (
     storyId="ui-app--loading-state"
     location={{ search: '' }}
     navigate={() => {}}
-    docsMode={false}
+    docsOptions={{ docsMode: false }}
   >
     <App
       key="app"
@@ -58,7 +58,7 @@ export const LoadingState = () => (
     storyId="ui-app--loading-state"
     location={{ search: '' }}
     navigate={() => {}}
-    docsMode={false}
+    docsOptions={{ docsMode: false }}
   >
     <App
       key="app"

lib/ui/src/components/preview/preview.stories.tsx

@@ -59,7 +59,7 @@ export default {
                 key="manager"
                 provider={provider}
                 {...locationData}
-                docsMode={false}
+                docsOptions={{ docsMode: false }}
                 path="/story/story--id"
                 storyId="story--id"
                 navigate={() => {}}

lib/ui/src/components/sidebar/Explorer.stories.tsx

@@ -3,12 +3,14 @@ import React from 'react';
 import { Explorer } from './Explorer';
 import { mockDataset } from './mockdata';
 import { RefType } from './types';
+import * as RefStories from './Refs.stories';
 
 export default {
   component: Explorer,
   title: 'UI/Sidebar/Explorer',
   parameters: { layout: 'fullscreen' },
   decorators: [
+    RefStories.default.decorators[0],
     (storyFn: any) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
 };

lib/ui/src/components/sidebar/Refs.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ManagerContext } from '@storybook/api';
 
 import { Ref } from './Refs';
 import { standardData as standardHeaderData } from './Heading.stories';
@@ -11,6 +12,11 @@ export default {
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
   decorators: [
+    (storyFn: any) => (
+      <ManagerContext.Provider value={{ state: { docsOptions: {} } } as any}>
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
     (storyFn: any) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
 };

lib/ui/src/components/sidebar/Refs.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useMemo, useState, useRef, useCallback, MutableRefObject } from 'react';
-import { useStorybookApi } from '@storybook/api';
+import { useStorybookApi, useStorybookState } from '@storybook/api';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 
@@ -91,6 +91,7 @@ const CollapseButton = styled.button(({ theme }) => ({
 }));
 
 export const Ref: FC<RefType & RefProps> = React.memo((props) => {
+  const { docsOptions } = useStorybookState();
   const api = useStorybookApi();
   const {
     stories,
@@ -156,6 +157,7 @@ export const Ref: FC<RefType & RefProps> = React.memo((props) => {
               isMain={isMain}
               refId={refId}
               data={stories}
+              docsMode={docsOptions.docsMode}
               selectedStoryId={selectedStoryId}
               onSelectStoryId={onSelectStoryId}
               highlightedRef={highlightedRef}

lib/ui/src/components/sidebar/Sidebar.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Sidebar, DEFAULT_REF_ID } from './Sidebar';
 import { standardData as standardHeaderData } from './Heading.stories';
+import * as ExplorerStories from './Explorer.stories';
 import { mockDataset } from './mockdata';
 import { RefType } from './types';
 
@@ -11,6 +12,7 @@ export default {
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
   decorators: [
+    ExplorerStories.default.decorators[0],
     (storyFn: any) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
 };