diff --git a/lib/ui/src/components/sidebar/Refs.tsx b/lib/ui/src/components/sidebar/Refs.tsx index 763a7944c40..1771def7434 100644 --- a/lib/ui/src/components/sidebar/Refs.tsx +++ b/lib/ui/src/components/sidebar/Refs.tsx @@ -14,7 +14,7 @@ import { AuthBlock, ErrorBlock, LoaderBlock, EmptyBlock } from './RefBlocks'; import { RefIndicator } from './RefIndicator'; import { Tree } from './Tree'; import { CollapseIcon } from './TreeNode'; -import { DEFAULT_REF_ID } from './data'; +import { DEFAULT_REF_ID } from './Sidebar'; import { Highlight, RefType } from './types'; import { getStateType } from './utils'; diff --git a/lib/ui/src/components/sidebar/Search.stories.tsx b/lib/ui/src/components/sidebar/Search.stories.tsx index abf551b84ab..909c9fde395 100644 --- a/lib/ui/src/components/sidebar/Search.stories.tsx +++ b/lib/ui/src/components/sidebar/Search.stories.tsx @@ -5,7 +5,7 @@ import { stories } from './mockdata.large'; import { Search } from './Search'; import { SearchResults } from './SearchResults'; import { noResults } from './SearchResults.stories'; -import { DEFAULT_REF_ID } from './data'; +import { DEFAULT_REF_ID } from './Sidebar'; import { Selection } from './types'; const refId = DEFAULT_REF_ID; diff --git a/lib/ui/src/components/sidebar/Search.tsx b/lib/ui/src/components/sidebar/Search.tsx index 76bc3bdd7e3..02ed05e9376 100644 --- a/lib/ui/src/components/sidebar/Search.tsx +++ b/lib/ui/src/components/sidebar/Search.tsx @@ -7,7 +7,7 @@ import global from 'global'; import { transparentize } from 'polished'; import React, { useMemo, useRef, useState, useCallback } from 'react'; -import { DEFAULT_REF_ID } from './data'; +import { DEFAULT_REF_ID } from './Sidebar'; import { CombinedDataset, SearchItem, diff --git a/lib/ui/src/components/sidebar/Sidebar.stories.tsx b/lib/ui/src/components/sidebar/Sidebar.stories.tsx index 36590a09d8a..029a7352ed4 100644 --- a/lib/ui/src/components/sidebar/Sidebar.stories.tsx +++ b/lib/ui/src/components/sidebar/Sidebar.stories.tsx @@ -1,9 +1,8 @@ import React from 'react'; -import { Sidebar } from './Sidebar'; +import { Sidebar, DEFAULT_REF_ID } from './Sidebar'; import { standardData as standardHeaderData } from './Heading.stories'; import { mockDataset } from './mockdata'; -import { DEFAULT_REF_ID } from './data'; import { RefType } from './types'; export default { diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx index 9171d90cb13..d3714c33f37 100644 --- a/lib/ui/src/components/sidebar/Sidebar.tsx +++ b/lib/ui/src/components/sidebar/Sidebar.tsx @@ -3,18 +3,17 @@ import React, { FunctionComponent, useMemo } from 'react'; import { styled } from '@storybook/theming'; import { ScrollArea, Spaced } from '@storybook/components'; -import type { StoriesHash, State, ComposedRef } from '@storybook/api'; +import type { StoriesHash, State } from '@storybook/api'; import { Heading } from './Heading'; -import { DEFAULT_REF_ID, collapseAllStories } from './data'; import { Explorer } from './Explorer'; import { Search } from './Search'; import { SearchResults } from './SearchResults'; import { Refs, CombinedDataset, Selection } from './types'; import { useLastViewed } from './useLastViewed'; -const { DOCS_MODE } = global; +export const DEFAULT_REF_ID = 'storybook_internal'; const Container = styled.nav({ position: 'absolute', @@ -92,7 +91,7 @@ export const Sidebar: FunctionComponent = React.memo( ({ storyId = null, refId = DEFAULT_REF_ID, - stories: storiesHash, + stories, storiesConfigured, storiesFailed, menu, @@ -100,25 +99,9 @@ export const Sidebar: FunctionComponent = React.memo( enableShortcuts = true, refs = {}, }) => { - const collapseFn = DOCS_MODE ? collapseAllStories : (x: StoriesHash) => x; const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); - const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]); - const adaptedRefs = useMemo(() => { - return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => { - if (ref.stories) { - acc[id] = { - ...ref, - stories: collapseFn(ref.stories), - }; - } else { - acc[id] = ref; - } - return acc; - }, {}); - }, [DOCS_MODE, refs]); - - const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs); + const dataset = useCombination(stories, storiesConfigured, storiesFailed, refs); const isLoading = !dataset.hash[DEFAULT_REF_ID].ready; const lastViewedProps = useLastViewed(selected); diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx index 43dc7910736..d6fe104489e 100644 --- a/lib/ui/src/components/sidebar/Tree.stories.tsx +++ b/lib/ui/src/components/sidebar/Tree.stories.tsx @@ -6,7 +6,7 @@ import { screen } from '@testing-library/dom'; import { Tree } from './Tree'; import { stories } from './mockdata.large'; -import { DEFAULT_REF_ID } from './data'; +import { DEFAULT_REF_ID } from './Sidebar'; export default { component: Tree, diff --git a/lib/ui/src/components/sidebar/__tests__/data.test.ts b/lib/ui/src/components/sidebar/__tests__/data.test.ts deleted file mode 100644 index a8fa0b8ff47..00000000000 --- a/lib/ui/src/components/sidebar/__tests__/data.test.ts +++ /dev/null @@ -1,130 +0,0 @@ -import type { StoriesHash } from '@storybook/api'; -import { collapseAllStories } from '../data'; - -type Item = StoriesHash[keyof StoriesHash]; - -const root: Item = { - type: 'root', - id: 'root', - name: 'root', - depth: 0, - children: ['a', 'b'], -}; -const a: Item = { - type: 'component', - id: 'a', - name: 'a', - depth: 1, - parent: 'root', - children: ['a1'], -}; -const a1: Item = { - type: 'story', - id: 'a1', - name: 'a1', - title: 'a', - depth: 2, - parent: 'a', - args: {}, - prepared: true, - importPath: './a.js', -}; -const b: Item = { - type: 'component', - id: 'b', - name: 'b', - depth: 1, - parent: 'root', - children: ['b1', 'b2'], -}; -const b1: Item = { - type: 'story', - id: 'b1', - name: 'b1', - title: 'b', - depth: 2, - parent: 'b', - args: {}, - prepared: true, - importPath: './b1.js', -}; -const b2: Item = { - type: 'story', - id: 'b2', - name: 'b2', - title: 'b', - depth: 2, - parent: 'b', - args: {}, - prepared: true, - importPath: './b2.js', -}; - -const stories: StoriesHash = { root, a, a1, b, b1, b2 }; - -describe('collapse all stories', () => { - it('collapses normal stories', () => { - const collapsed = collapseAllStories(stories); - - const expected: StoriesHash = { - a1: { - type: 'story', - id: 'a1', - depth: 1, - name: 'a', - title: 'a', - parent: 'root', - args: {}, - prepared: true, - importPath: './a.js', - }, - b1: { - type: 'story', - id: 'b1', - depth: 1, - name: 'b', - title: 'b', - parent: 'root', - args: {}, - prepared: true, - importPath: './b1.js', - }, - root: { - type: 'root', - id: 'root', - name: 'root', - depth: 0, - children: ['a1', 'b1'], - }, - }; - - expect(collapsed).toEqual(expected); - }); - - it('collapses docs-only stories', () => { - const hasDocsOnly: StoriesHash = { - ...stories, - a1: { - type: 'docs', - id: 'a1', - name: 'a1', - title: 'a', - depth: 2, - parent: 'a', - importPath: './a.js', - }, - }; - - const collapsed = collapseAllStories(hasDocsOnly); - - expect(collapsed.a1).toEqual({ - type: 'docs', - id: 'a1', - name: 'a', - title: 'a', - depth: 1, - parent: 'root', - importPath: './a.js', - }); - }); -}); diff --git a/lib/ui/src/components/sidebar/data.ts b/lib/ui/src/components/sidebar/data.ts deleted file mode 100644 index 397bef64ad4..00000000000 --- a/lib/ui/src/components/sidebar/data.ts +++ /dev/null @@ -1,69 +0,0 @@ -import type { HashEntry, StoriesHash, StoryEntry } from '@storybook/api'; -import { Item } from './types'; - -export const DEFAULT_REF_ID = 'storybook_internal'; - -function isLeaf(entry: HashEntry) { - return entry.type === 'story' || entry.type === 'docs'; -} - -export const collapseAllStories = (stories: StoriesHash) => { - // keep track of component IDs that have been rewritten to the ID of their first leaf child - const componentIdToLeafId: Record = {}; - - // 1) remove all leaves - const leavesRemoved = Object.values(stories).filter((item) => !isLeaf(item)); - - // 2) make all components leaves and rewrite their ID's to the first leaf child - const componentsFlattened = leavesRemoved.map((item: HashEntry) => { - // this is a folder, so just leave it alone - if (item.type !== 'component') { - return item; - } - - const { id, children, name, parent, depth } = item; - - const nonLeafChildren: string[] = []; - const leafChildren: string[] = []; - children.forEach((child: string) => - (isLeaf(stories[child]) ? leafChildren : nonLeafChildren).push(child) - ); - - if (leafChildren.length === 0) { - return item; // pass through, we'll handle you later - } - - const leaf = stories[leafChildren[0]] as StoryEntry; - const component = { - ...leaf, - name, - parent, - depth, - }; - componentIdToLeafId[id] = leaf.id; - - // this is a component, so it should not have any non-leaf children - if (nonLeafChildren.length !== 0) { - throw new Error(`Unexpected '${item.id}': ${JSON.stringify({ nonLeafChildren })}`); - } - - return component; - }); - - // 3) rewrite all the children as needed - const childrenRewritten = componentsFlattened.map((item) => { - if (item.type === 'root' || item.type === 'group' || item.type === 'component') { - const { children, ...rest } = item; - const rewritten = children.map((child: string) => componentIdToLeafId[child] || child); - - return { children: rewritten, ...rest }; - } - return item; - }); - - const result = {} as StoriesHash; - childrenRewritten.forEach((item) => { - result[item.id] = item as Item; - }); - return result; -}; diff --git a/lib/ui/src/components/sidebar/utils.ts b/lib/ui/src/components/sidebar/utils.ts index bb503107236..f6f8f38cfe9 100644 --- a/lib/ui/src/components/sidebar/utils.ts +++ b/lib/ui/src/components/sidebar/utils.ts @@ -3,7 +3,7 @@ import global from 'global'; import { SyntheticEvent } from 'react'; import type { StoriesHash } from '@storybook/api'; -import { DEFAULT_REF_ID } from './data'; +import { DEFAULT_REF_ID } from './Sidebar'; import { Item, RefType, Dataset, SearchItem } from './types'; const { document, window: globalWindow, DOCS_MODE } = global;