Various updates

code/lib/manager-api/src/index.tsx

@@ -18,13 +18,13 @@ import type {
   API_DocsEntry,
   API_GroupEntry,
   API_HashEntry,
+  API_IndexHash,
   API_LeafEntry,
   API_OptionsData,
   API_ProviderData,
   API_Refs,
   API_RootEntry,
   API_StateMerger,
-  API_StoriesHash,
   API_StoryEntry,
   Parameters,
   StoryId,
@@ -326,7 +326,7 @@ export function useStorybookApi(): API {
 }
 
 export type {
-  API_StoriesHash as StoriesHash,
+  API_IndexHash as StoriesHash,
   API_RootEntry as RootEntry,
   API_GroupEntry as GroupEntry,
   API_ComponentEntry as ComponentEntry,

code/ui/manager/src/components/sidebar/Refs.stories.tsx

@@ -22,10 +22,10 @@ export default {
 };
 
 const { menu } = standardHeaderData;
-const stories = mockDataset.withRoot;
+const index = mockDataset.withRoot;
 const storyId = '1-12-121';
 
-export const simpleData = { menu, stories, storyId };
+export const simpleData = { menu, index, storyId };
 export const loadingData = { menu, stories: {} };
 
 const indexError: Error = (() => {
@@ -51,7 +51,7 @@ const refs: Record<string, RefType> = {
     title: 'It is empty because no stories were loaded',
     url: 'https://example.com',
     type: 'lazy',
-    stories: {},
+    index: {},
     previewInitialized: false,
   },
   startInjected_unknown: {
@@ -61,7 +61,7 @@ const refs: Record<string, RefType> = {
     type: 'unknown',
     previewInitialized: false,
     // @ts-expect-error (invalid input)
-    stories,
+    index,
   },
   startInjected_loading: {
     id: 'startInjected_loading',
@@ -70,7 +70,7 @@ const refs: Record<string, RefType> = {
     type: 'auto-inject',
     previewInitialized: false,
     // @ts-expect-error (invalid input)
-    stories,
+    index,
   },
   startInjected_ready: {
     id: 'startInjected_ready',
@@ -79,7 +79,7 @@ const refs: Record<string, RefType> = {
     type: 'auto-inject',
     previewInitialized: true,
     // @ts-expect-error (invalid input)
-    stories,
+    index,
   },
   versions: {
     id: 'versions',
@@ -87,7 +87,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     type: 'lazy',
     // @ts-expect-error (invalid input)
-    stories,
+    index,
     versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com' },
     previewInitialized: true,
   },
@@ -97,7 +97,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     type: 'lazy',
     // @ts-expect-error (invalid input)
-    stories,
+    index,
     versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com/v2' },
     previewInitialized: true,
   },
@@ -122,7 +122,7 @@ const refs: Record<string, RefType> = {
     title: 'This storybook has a very very long name for some reason',
     url: 'https://example.com',
     // @ts-expect-error (invalid input)
-    stories,
+    index,
     type: 'lazy',
     versions: {
       '111.111.888-new': 'https://example.com/new',

code/ui/manager/src/components/sidebar/Search.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { stories } from './mockdata.large';
+import { index } from './mockdata.large';
 import { Search } from './Search';
 import { SearchResults } from './SearchResults';
 import { noResults } from './SearchResults.stories';
@@ -9,11 +9,11 @@ import { DEFAULT_REF_ID } from './Sidebar';
 import type { Selection } from './types';
 
 const refId = DEFAULT_REF_ID;
-const data = { [refId]: { id: refId, url: '/', stories, previewInitialized: true } };
+const data = { [refId]: { id: refId, url: '/', index, previewInitialized: true } };
 const dataset = { hash: data, entries: Object.entries(data) };
 const getLastViewed = () =>
-  Object.values(stories)
-    .filter((item, index) => item.type === 'component' && item.parent && index % 20 === 0)
+  Object.values(index)
+    .filter((item, i) => item.type === 'component' && item.parent && i % 20 === 0)
     .map((component) => ({ storyId: component.id, refId }));
 
 export default {

code/ui/manager/src/components/sidebar/Sidebar.stories.tsx

@@ -19,11 +19,11 @@ export default {
 };
 
 const { menu } = standardHeaderData;
-const stories = mockDataset.withRoot;
+const index = mockDataset.withRoot;
 const refId = DEFAULT_REF_ID;
 const storyId = 'root-1-child-a2--grandchild-a1-1';
 
-export const simpleData = { menu, stories, storyId };
+export const simpleData = { menu, index, storyId };
 export const loadingData = { menu };
 
 const refs: Record<string, RefType> = {
@@ -32,8 +32,7 @@ const refs: Record<string, RefType> = {
     title: 'This is a ref',
     url: 'https://example.com',
     type: 'lazy',
-    // @ts-expect-error (needs to be converted to CSF3)
-    stories,
+    index,
     previewInitialized: true,
   },
 };
@@ -52,7 +51,7 @@ export const Simple = () => (
   <Sidebar
     previewInitialized
     menu={menu}
-    stories={stories as any}
+    index={index as any}
     storyId={storyId}
     refId={refId}
     refs={{}}
@@ -64,7 +63,7 @@ export const Loading = () => (
 );
 
 export const Empty = () => (
-  <Sidebar previewInitialized menu={menu} stories={{}} storyId={storyId} refId={refId} refs={{}} />
+  <Sidebar previewInitialized menu={menu} index={{}} storyId={storyId} refId={refId} refs={{}} />
 );
 
 export const IndexError = () => (
@@ -82,7 +81,7 @@ export const WithRefs = () => (
   <Sidebar
     previewInitialized
     menu={menu}
-    stories={stories as any}
+    index={index as any}
     storyId={storyId}
     refId={refId}
     refs={refs}

code/ui/manager/src/components/sidebar/Sidebar.tsx

@@ -87,7 +87,7 @@ export interface SidebarProps extends API_LoadedRefData {
 export const Sidebar = React.memo(function Sidebar({
   storyId = null,
   refId = DEFAULT_REF_ID,
-  stories,
+  index,
   indexError,
   previewInitialized,
   menu,
@@ -97,8 +97,8 @@ export const Sidebar = React.memo(function Sidebar({
 }: SidebarProps) {
   const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
 
-  const dataset = useCombination({ stories, indexError, previewInitialized }, refs);
-  const isLoading = !stories && !indexError;
+  const dataset = useCombination({ index, indexError, previewInitialized }, refs);
+  const isLoading = !index && !indexError;
   const lastViewedProps = useLastViewed(selected);
 
   return (

code/ui/manager/src/components/sidebar/__tests__/Sidebar.test.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ThemeProvider, ensure, themes } from '@storybook/theming';
 
-import type { HashEntry, StoriesHash, Refs } from '@storybook/manager-api';
+import type { HashEntry, Refs } from '@storybook/manager-api';
 import type { Theme } from '@storybook/theming';
 import type { RenderResult } from '@testing-library/react';
+import type { API_IndexHash } from '@storybook/types';
 import { Sidebar } from '../Sidebar';
 import type { SidebarProps } from '../Sidebar';
 
@@ -15,12 +16,12 @@ const factory = (props: Partial<SidebarProps>): RenderResult => {
 
   return render(
     <ThemeProvider theme={theme}>
-      <Sidebar menu={[]} stories={{}} previewInitialized refs={{}} {...props} />
+      <Sidebar menu={[]} index={{}} previewInitialized refs={{}} {...props} />
     </ThemeProvider>
   );
 };
 
-const generateStories = ({ title, refId }: { title: string; refId?: string }): StoriesHash => {
+const generateStories = ({ title, refId }: { title: string; refId?: string }): API_IndexHash => {
   const [root, componentName]: [string, string] = title.split('/') as any;
   const rootId: string = root.toLowerCase().replace(/\s+/g, '-');
   const hypenatedComponentName: string = componentName.toLowerCase().replace(/\s+/g, '-');
@@ -61,7 +62,7 @@ const generateStories = ({ title, refId }: { title: string; refId?: string }): S
     },
   ];
 
-  return storyBase.reduce((accumulator: StoriesHash, current: HashEntry): StoriesHash => {
+  return storyBase.reduce((accumulator: API_IndexHash, current: HashEntry): API_IndexHash => {
     accumulator[current.id] = current;
     return accumulator;
   }, {});
@@ -71,12 +72,12 @@ describe('Sidebar', () => {
   test.skip("should not render an extra nested 'Page'", async () => {
     const refId = 'next';
     const title = 'Getting Started/Install';
-    const refStories: StoriesHash = generateStories({ refId, title });
-    const internalStories: StoriesHash = generateStories({ title: 'Welcome/Example' });
+    const refIndex: API_IndexHash = generateStories({ refId, title });
+    const internalIndex: API_IndexHash = generateStories({ title: 'Welcome/Example' });
 
     const refs: Refs = {
       [refId]: {
-        stories: refStories,
+        index: refIndex,
         id: refId,
         previewInitialized: true,
         title: refId,
@@ -87,7 +88,7 @@ describe('Sidebar', () => {
     factory({
       refs,
       refId,
-      stories: internalStories,
+      index: internalIndex,
     });
 
     fireEvent.click(screen.getByText('Install'));

code/ui/manager/src/components/sidebar/mockdata.large.ts

@@ -14,7 +14,7 @@
 import type { Dataset } from './types';
 
 // @ts-expect-error (TODO)
-export const stories = {
+export const index = {
   images: {
     name: 'Images',
     id: 'images',

code/ui/manager/src/containers/sidebar.tsx

@@ -16,7 +16,7 @@ const Sidebar = React.memo(function Sideber() {
       storyId,
       refId,
       layout: { showToolbar, isFullscreen, showPanel, showNav },
-      stories,
+      index,
       indexError,
       previewInitialized,
       refs,
@@ -27,7 +27,7 @@ const Sidebar = React.memo(function Sideber() {
     return {
       title: name,
       url,
-      stories,
+      index,
       indexError,
       previewInitialized,
       refs,