GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 06:41:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

No need for collapse any more!

Browse Source
This commit is contained in:
Tom Coleman 2022-07-18 11:19:12 +10:00
parent 19adfd52bc
commit b9432bbc31
9 changed files with 10 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/ui/src/components/sidebar/Refs.tsx
View File

@ -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';

2
lib/ui/src/components/sidebar/Search.stories.tsx
View File

@ -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;

2
lib/ui/src/components/sidebar/Search.tsx
View File

@ -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,

3
lib/ui/src/components/sidebar/Sidebar.stories.tsx
View File

@ -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 {

25
lib/ui/src/components/sidebar/Sidebar.tsx
View File

@ -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<SidebarProps> = React.memo(
({
storyId = null,
refId = DEFAULT_REF_ID,
stories: storiesHash,
stories,
storiesConfigured,
storiesFailed,
menu,
@ -100,25 +99,9 @@ export const Sidebar: FunctionComponent<SidebarProps> = 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);

2
lib/ui/src/components/sidebar/Tree.stories.tsx
View File

@ -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,

130
lib/ui/src/components/sidebar/__tests__/data.test.ts
View File

@ -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',
});
});
});

69
lib/ui/src/components/sidebar/data.ts
View File

@ -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<string, string> = {};
// 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;
};

2
lib/ui/src/components/sidebar/utils.ts
View File

@ -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;