Docs2: Refactor manager to use new index data

addons/storysource/src/StoryPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { API, Story, useParameter } from '@storybook/api';
+import { API, useParameter } from '@storybook/api';
 import { styled } from '@storybook/theming';
 import { Link } from '@storybook/router';
 import {
@@ -48,7 +48,7 @@ interface SourceParams {
   locationsMap?: LocationsMap;
 }
 export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
-  const story: Story | undefined = api.getCurrentStoryData() as Story;
+  const story = api.getCurrentStoryData();
   const selectedStoryRef = React.useRef<HTMLDivElement>(null);
   const { source, locationsMap }: SourceParams = useParameter('storySource', {
     source: 'loading source...',
@@ -114,10 +114,10 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
       const location = locationsMap[key];
       const first = location.startLoc.line - 1;
       const last = location.endLoc.line;
-      const { kind, refId } = story;
+      const { title, refId } = story;
       // source loader ids are different from story id
       const sourceIdParts = key.split('--');
-      const id = api.storyId(kind, sourceIdParts[sourceIdParts.length - 1]);
+      const id = api.storyId(title, sourceIdParts[sourceIdParts.length - 1]);
       const start = createPart({ rows: rows.slice(lastRow, first), stylesheet, useInlineStyles });
       const storyPart = createStoryPart({ rows, stylesheet, useInlineStyles, location, id, refId });
 

lib/api/src/index.tsx

@@ -25,9 +25,16 @@ import { Listener } from '@storybook/channels';
 import { createContext } from './context';
 import Store, { Options } from './store';
 import getInitialState from './initial-state';
-import type { StoriesHash, Story, Root, Group } from './lib/stories';
+import type {
+  StoriesHash,
+  RootEntry,
+  GroupEntry,
+  ComponentEntry,
+  DocsEntry,
+  StoryEntry,
+  HashEntry,
+} from './lib/stories';
 import type { ComposedRef, Refs } from './modules/refs';
-import { isGroup, isRoot, isStory } from './lib/stories';
 
 import * as provider from './modules/provider';
 import * as addons from './modules/addons';
@@ -139,12 +146,14 @@ export const combineParameters = (...parameterSets: Parameters[]) =>
     return undefined;
   });
 
-export type ModuleFn = (m: ModuleArgs) => Module;
+export type ModuleFn<APIType = unknown, StateType = unknown> = (
+  m: ModuleArgs
+) => Module<APIType, StateType>;
 
-interface Module {
+interface Module<APIType = unknown, StateType = unknown> {
   init?: () => void;
-  api?: unknown;
-  state?: unknown;
+  api?: APIType;
+  state?: StateType;
 }
 
 class ManagerProvider extends Component<ManagerProviderProps, State> {
@@ -331,8 +340,18 @@ export function useStorybookApi(): API {
   return api;
 }
 
-export type { StoriesHash, Story, Root, Group, ComposedRef, Refs };
-export { ManagerConsumer as Consumer, ManagerProvider as Provider, isGroup, isRoot, isStory };
+export type {
+  StoriesHash,
+  RootEntry,
+  GroupEntry,
+  ComponentEntry,
+  DocsEntry,
+  StoryEntry,
+  HashEntry,
+  ComposedRef,
+  Refs,
+};
+export { ManagerConsumer as Consumer, ManagerProvider as Provider };
 
 export interface EventMap {
   [eventId: string]: Listener;
@@ -446,13 +465,13 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[])
   const { getCurrentStoryData, updateStoryArgs, resetStoryArgs } = useStorybookApi();
 
   const data = getCurrentStoryData();
-  const args = isStory(data) ? data.args : {};
+  const args = data.type === 'story' ? data.args : {};
   const updateArgs = useCallback(
-    (newArgs: Args) => updateStoryArgs(data as Story, newArgs),
+    (newArgs: Args) => updateStoryArgs(data as StoryEntry, newArgs),
     [data, updateStoryArgs]
   );
   const resetArgs = useCallback(
-    (argNames?: string[]) => resetStoryArgs(data as Story, argNames),
+    (argNames?: string[]) => resetStoryArgs(data as StoryEntry, argNames),
     [data, resetStoryArgs]
   );
 
@@ -468,12 +487,13 @@ export function useGlobalTypes(): ArgTypes {
   return useStorybookApi().getGlobalTypes();
 }
 
-function useCurrentStory(): Story {
+function useCurrentStory(): StoryEntry | DocsEntry {
   const { getCurrentStoryData } = useStorybookApi();
 
-  return getCurrentStoryData() as Story;
+  return getCurrentStoryData();
 }
 
 export function useArgTypes(): ArgTypes {
-  return useCurrentStory()?.argTypes || {};
+  const current = useCurrentStory();
+  return (current?.type === 'story' && current.argTypes) || {};
 }

lib/api/src/initial-state.ts

@@ -9,6 +9,6 @@ type Additions = Addition[];
 
 // Returns the initialState of the app
 const main = (...additions: Additions): State =>
-  additions.reduce((acc: State, item) => merge(acc, item), {});
+  additions.reduce((acc: State, item) => merge<State>(acc, item), {} as any);
 
 export default main;

lib/api/src/lib/merge.ts

@@ -3,8 +3,8 @@ import isEqual from 'lodash/isEqual';
 
 import { logger } from '@storybook/client-logger';
 
-export default (a: any, b: any) =>
-  mergeWith({}, a, b, (objValue: any, srcValue: any) => {
+export default <TObj = any>(a: TObj, b: Partial<TObj>) =>
+  mergeWith({}, a, b, (objValue: TObj, srcValue: Partial<TObj>) => {
     if (Array.isArray(srcValue) && Array.isArray(objValue)) {
       srcValue.forEach((s) => {
         const existing = objValue.find((o) => o === s || isEqual(o, s));