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

Refactor StoriesHash to be simpler to use and more intuitive

Browse Source
This commit is contained in:
Tom Coleman 2022-04-27 13:54:50 +10:00
parent c778bb55f2
commit a11c662cef
29 changed files with 2237 additions and 5958 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
addons/storysource/src/StoryPanel.tsx
View File

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

38
lib/api/src/index.tsx
View File

@ -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';
@ -333,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;
@ -448,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]
);
@ -470,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) || {};
}

2
lib/api/src/initial-state.ts
View File

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

4
lib/api/src/lib/merge.ts
View File

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

192
lib/api/src/lib/stories.ts
View File

@ -24,49 +24,44 @@ const { FEATURES } = global;
export type { StoryId };
export interface Root {
export interface BaseEntry {
id: StoryId;
depth: 0;
depth: number;
name: string;
refId?: string;
children: StoryId[];
isComponent: false;
isRoot: true;
isLeaf: false;
renderLabel?: (item: Root) => React.ReactNode;
renderLabel?: (item: BaseEntry) => React.ReactNode;
}
export interface RootEntry extends BaseEntry {
type: 'root';
startCollapsed?: boolean;
}
export interface Group {
id: StoryId;
depth: number;
name: string;
children: StoryId[];
refId?: string;
parent?: StoryId;
isComponent: boolean;
isRoot: false;
isLeaf: boolean;
renderLabel?: (item: Group) => React.ReactNode;
// MDX docs-only stories are "Group" type
parameters?: {
viewMode?: ViewMode;
};
}
export interface Story {
id: StoryId;
depth: number;
export interface GroupEntry extends BaseEntry {
type: 'group';
parent?: StoryId;
children: StoryId[];
}
export interface ComponentEntry extends BaseEntry {
type: 'component';
parent?: StoryId;
children: StoryId[];
}
export interface DocsEntry extends BaseEntry {
type: 'docs';
parent: StoryId;
title: ComponentTitle;
importPath: Path;
}
export interface StoryEntry extends BaseEntry {
type: 'story';
parent: StoryId;
name: string;
title: ComponentTitle;
importPath: Path;
refId?: string;
children?: StoryId[];
isComponent: false;
isRoot: false;
isLeaf: true;
renderLabel?: (item: Story) => React.ReactNode;
prepared: boolean;
parameters?: {
[parameterName: string]: any;
@ -76,9 +71,16 @@ export interface Story {
initialArgs?: Args;
}
// This is what we use for our sidebar
export type HashEntry = RootEntry | GroupEntry | ComponentEntry | DocsEntry | StoryEntry;
/**
* The `StoriesHash` is our manager-side representation of the `StoryIndex`.
* We create entries in the hash not only for each story or docs entry, but
* also for each "group" of the component (split on '/'), as that's how things
* are manipulated in the manager (i.e. in the sidebar)
*/
export interface StoriesHash {
[id: string]: Root | Group | Story;
[id: string]: HashEntry;
}
// The data received on the (legacy) `setStories` event
@ -267,12 +269,13 @@ export const transformStoryIndexToStoriesHash = (
}
const storiesHashOutOfOrder = Object.values(entryValues).reduce((acc, item) => {
// First, split the title into parts, and create an id for each part
const { type, title } = item;
// First, split the title into a set of names, separated by '/' and trimmed.
const { title } = item;
const groups = title.trim().split(TITLE_PATH_SEPARATOR);
const root = (!setShowRoots || showRoots) && groups.length > 1 ? [groups.shift()] : [];
const names = [...root, ...groups];
// Now create a "path" or sub id for each name
const paths = names.reduce((list, name, idx) => {
const parent = idx > 0 && list[idx - 1];
const id = sanitize(parent ? `${parent}-${name}` : name);
@ -290,29 +293,45 @@ export const transformStoryIndexToStoriesHash = (
return list;
}, [] as string[]);
// Now, let's add an entry to the hash for each path
// Now, let's add an entry to the hash for each path/name pair
paths.forEach((id, idx) => {
// The child is the next path, OR the story itself; unless this is a docs entry
const childId = paths[idx + 1] || (type !== 'docs' && item.id);
// The child is the next path, OR the story/docs entry itself
const childId = paths[idx + 1] || item.id;
if (root.length && idx === 0) {
acc[id] = merge(acc[id] || {}, {
acc[id] = merge<RootEntry>((acc[id] || {}) as RootEntry, {
type: 'root',
id,
name: names[idx],
depth: idx,
renderLabel,
startCollapsed: collapsedRoots.includes(id),
// Note that this will get appended tothe previous list of children if this entry
// already exists (i.e. we've seen this root before)
// Note that this will later get appended to the previous list of children (see below)
children: [childId],
isRoot: true,
isComponent: false,
isLeaf: false,
});
} else {
const isComponent = acc[id]?.isComponent !== false && idx === paths.length - 1;
const isLeaf = isComponent && type === 'docs';
acc[id] = merge(acc[id] || {}, {
// Usually the last path/name pair will be displayed as a component,
// *unless* there are other stories that are more deeply nested under it
//
// For example, if we had stories for both
// - Atoms / Button
// - Atoms / Button / LabelledButton
//
// In this example the entry for 'atoms-button' would *not* be a component.
} else if ((!acc[id] || acc[id].type === 'component') && idx === paths.length - 1) {
acc[id] = merge<ComponentEntry>((acc[id] || {}) as ComponentEntry, {
type: 'component',
id,
name: names[idx],
parent: paths[idx - 1],
depth: idx,
renderLabel,
...(childId && {
children: [childId],
}),
});
} else {
acc[id] = merge<GroupEntry>((acc[id] || {}) as GroupEntry, {
type: 'group',
id,
name: names[idx],
parent: paths[idx - 1],
@ -321,39 +340,32 @@ export const transformStoryIndexToStoriesHash = (
...(childId && {
children: [childId],
}),
isRoot: false,
isComponent,
isLeaf,
});
}
});
if (type !== 'docs') {
acc[item.id] = {
...item,
depth: paths.length,
parent: paths[paths.length - 1],
renderLabel,
prepared: !!item.parameters,
isRoot: false,
isComponent: false,
isLeaf: true,
};
}
// Finally add an entry for the docs/story itself
acc[item.id] = {
...item,
depth: paths.length,
parent: paths[paths.length - 1],
renderLabel,
...(item.type === 'story' && { prepared: !!item.parameters }),
} as DocsEntry | StoryEntry;
return acc;
}, {} as StoriesHash);
function addItem(acc: StoriesHash, item: Story | Group) {
if (!acc[item.id]) {
// If we were already inserted as part of a group, that's great.
acc[item.id] = item;
const { children } = item;
if (children) {
const childNodes = children.map((id) => storiesHashOutOfOrder[id]) as (Story | Group)[];
acc[item.id].isComponent = childNodes.every((childNode) => childNode.isLeaf);
childNodes.forEach((childNode) => addItem(acc, childNode));
}
function addItem(acc: StoriesHash, item: HashEntry) {
// If we were already inserted as part of a group, that's great.
if (acc[item.id]) {
return acc;
}
acc[item.id] = item;
// Ensure we add the children depth-first *before* inserting any other entries
if (item.type === 'root' || item.type === 'group' || item.type === 'component') {
item.children.forEach((childId) => addItem(acc, storiesHashOutOfOrder[childId]));
}
return acc;
}
@ -361,37 +373,17 @@ export const transformStoryIndexToStoriesHash = (
return Object.values(storiesHashOutOfOrder).reduce(addItem, {});
};
export type Item = StoriesHash[keyof StoriesHash];
export function isRoot(item: Item): item is Root {
if (item as Root) {
return item.isRoot;
}
return false;
}
export function isGroup(item: Item): item is Group {
if (item as Group) {
return !item.isRoot && !item.isLeaf;
}
return false;
}
export function isStory(item: Item): item is Story {
if (item as Story) {
return item.isLeaf;
}
return false;
}
export const getComponentLookupList = memoize(1)((hash: StoriesHash) => {
return Object.entries(hash).reduce((acc, i) => {
const value = i[1];
if (value.isComponent) {
acc.push([...i[1].children]);
if (value.type === 'component') {
acc.push([...value.children]);
}
return acc;
}, [] as StoryId[][]);
});
// FIXME:
export const getStoriesLookupList = memoize(1)((hash: StoriesHash) => {
return Object.keys(hash).filter((k) => !(hash[k].children || Array.isArray(hash[k])));
return Object.keys(hash).filter((k) => hash[k].type === 'story');
});

3
lib/api/src/modules/addons.ts
View File

@ -5,7 +5,6 @@ import dedent from 'ts-dedent';
import { ModuleFn } from '../index';
import { Options } from '../store';
import { isStory } from '../lib/stories';
const warnDisabledDeprecated = deprecate(
() => {},
@ -106,7 +105,7 @@ export const init: ModuleFn = ({ provider, store, fullAPI }) => {
const { storyId } = store.getState();
const story = fullAPI.getData(storyId);
if (!allPanels || !story || !isStory(story)) {
if (!allPanels || !story || story.type !== 'story') {
return allPanels;
}

4
lib/api/src/modules/provider.ts
View File

@ -2,14 +2,14 @@ import type { ReactNode } from 'react';
import { Channel } from '@storybook/channels';
import type { ThemeVars } from '@storybook/theming';
import type { API, State, ModuleFn, Root, Group, Story } from '../index';
import type { API, State, ModuleFn, HashEntry } from '../index';
import type { StoryMapper, Refs } from './refs';
import type { UIOptions } from './layout';
interface SidebarOptions {
showRoots?: boolean;
collapsedRoots?: string[];
renderLabel?: (item: Root | Group | Story) => ReactNode;
renderLabel?: (item: HashEntry) => ReactNode;
}
type IframeRenderer = (

80
lib/api/src/modules/stories.ts
View File

@ -19,20 +19,18 @@ import { logger } from '@storybook/client-logger';
import { getEventMetadata } from '../lib/events';
import {
denormalizeStoryParameters,
isStory,
isRoot,
transformSetStoriesStoryDataToStoriesHash,
transformStoryIndexToStoriesHash,
getComponentLookupList,
getStoriesLookupList,
HashEntry,
DocsEntry,
} from '../lib/stories';
import type {
StoriesHash,
Story,
Group,
StoryEntry,
StoryId,
Root,
SetStoriesStoryData,
SetStoriesPayload,
StoryIndex,
@ -48,7 +46,7 @@ type Direction = -1 | 1;
type ParameterName = string;
type ViewMode = 'story' | 'info' | 'settings' | string | undefined;
type StoryUpdate = Pick<Story, 'parameters' | 'initialArgs' | 'argTypes' | 'args'>;
type StoryUpdate = Pick<StoryEntry, 'parameters' | 'initialArgs' | 'argTypes' | 'args'>;
export interface SubState {
storiesHash: StoriesHash;
@ -60,26 +58,27 @@ export interface SubState {
export interface SubAPI {
storyId: typeof toId;
resolveStory: (storyId: StoryId, refsId?: string) => Story | Group | Root;
resolveStory: (storyId: StoryId, refsId?: string) => HashEntry;
selectFirstStory: () => void;
selectStory: (
kindOrId?: string,
story?: string,
obj?: { ref?: string; viewMode?: ViewMode }
) => void;
getCurrentStoryData: () => Story | Group;
getCurrentStoryData: () => DocsEntry | StoryEntry;
setStories: (stories: SetStoriesStoryData, failed?: Error) => Promise<void>;
jumpToComponent: (direction: Direction) => void;
jumpToStory: (direction: Direction) => void;
getData: (storyId: StoryId, refId?: string) => Story | Group;
getData: (storyId: StoryId, refId?: string) => DocsEntry | StoryEntry;
isPrepared: (storyId: StoryId, refId?: string) => boolean;
getParameters: (
storyId: StoryId | { storyId: StoryId; refId: string },
parameterName?: ParameterName
) => Story['parameters'] | any;
) => StoryEntry['parameters'] | any;
getCurrentParameter<S>(parameterName?: ParameterName): S;
updateStoryArgs(story: Story, newArgs: Args): void;
resetStoryArgs: (story: Story, argNames?: string[]) => void;
updateStoryArgs(story: StoryEntry, newArgs: Args): void;
resetStoryArgs: (story: StoryEntry, argNames?: string[]) => void;
findLeafEntry(StoriesHash: StoriesHash, storyId: StoryId): DocsEntry | StoryEntry;
findLeafStoryId(StoriesHash: StoriesHash, storyId: StoryId): StoryId;
findSiblingStoryId(
storyId: StoryId,
@ -138,17 +137,14 @@ export const init: ModuleFn<SubAPI, SubState> = ({
storyId: toId,
getData: (storyId, refId) => {
const result = api.resolveStory(storyId, refId);
return isRoot(result) ? undefined : result;
if (result?.type === 'story' || result?.type === 'docs') {
return result;
}
return undefined;
},
isPrepared: (storyId, refId) => {
const data = api.getData(storyId, refId);
// FIXME: isStory is NQR
if (data.isLeaf && isStory(data)) {
return data.prepared;
}
// Groups are always prepared :shrug:
return true;
return data.type === 'story' ? data.prepared : true;
},
resolveStory: (storyId, refId) => {
const { refs, storiesHash } = store.getState();
@ -169,7 +165,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({
: storyIdOrCombo;
const data = api.getData(storyId, refId);
if (isStory(data)) {
if (data?.type === 'story') {
const { parameters } = data;
if (parameters) {
@ -239,9 +235,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({
},
selectFirstStory: () => {
const { storiesHash } = store.getState();
const firstStory = Object.keys(storiesHash).find(
(k) => !(storiesHash[k].children || Array.isArray(storiesHash[k]))
);
const firstStory = Object.keys(storiesHash).find((id) => storiesHash[id].type === 'story');
if (firstStory) {
api.selectStory(firstStory);
@ -265,14 +259,12 @@ export const init: ModuleFn<SubAPI, SubState> = ({
if (!name) {
// Find the entry (group, component or story) that is referred to
let entry = titleOrId ? hash[titleOrId] || hash[sanitize(titleOrId)] : hash[kindSlug];
const entry = titleOrId ? hash[titleOrId] || hash[sanitize(titleOrId)] : hash[kindSlug];
if (!entry) {
throw new Error(`Unknown id or title: '${titleOrId}'`);
}
if (!entry) throw new Error(`Unknown id or title: '${titleOrId}'`);
// We want to navigate to the first ancestor entry that is a leaf
while (!entry.isLeaf) entry = hash[entry.children[0]];
const leafEntry = api.findLeafEntry(hash, entry.id);
// We would default to the viewMode passed in or maintain the current
const desiredViewMode = viewModeFromArgs || viewModeFromState;
@ -283,12 +275,12 @@ export const init: ModuleFn<SubAPI, SubState> = ({
if (desiredViewMode === 'docs') {
viewMode = 'docs';
}
// If the entry is actually a component, we are looking at docs also
if (entry.isComponent) {
// On the other hand, docs entries can *only* be rendered as docs
if (leafEntry.type === 'docs') {
viewMode = 'docs';
}
const fullId = entry.refId ? `${entry.refId}_${entry.id}` : entry.id;
const fullId = leafEntry.refId ? `${leafEntry.refId}_${leafEntry.id}` : leafEntry.id;
navigate(`/${viewMode}/${fullId}`);
} else if (!titleOrId) {
// This is a slugified version of the kind, but that's OK, our toId function is idempotent
@ -301,9 +293,9 @@ export const init: ModuleFn<SubAPI, SubState> = ({
api.selectStory(id, undefined, options);
} else {
// Support legacy API with component permalinks, where kind is `x/y` but permalink is 'z'
const k = hash[sanitize(titleOrId)];
if (k && k.children) {
const foundId = k.children.find((childId) => hash[childId].name === name);
const entry = hash[sanitize(titleOrId)];
if (entry?.type === 'component') {
const foundId = entry.children.find((childId) => hash[childId].name === name);
if (foundId) {
api.selectStory(foundId, undefined, options);
}
@ -311,13 +303,17 @@ export const init: ModuleFn<SubAPI, SubState> = ({
}
}
},
findLeafStoryId(storiesHash, storyId) {
if (storiesHash[storyId].isLeaf) {
return storyId;
findLeafEntry(storiesHash, storyId) {
const entry = storiesHash[storyId];
if (entry.type === 'docs' || entry.type === 'story') {
return entry;
}
const childStoryId = storiesHash[storyId].children[0];
return api.findLeafStoryId(storiesHash, childStoryId);
const childStoryId = entry.children[0];
return api.findLeafEntry(storiesHash, childStoryId);
},
findLeafStoryId(storiesHash, storyId) {
return api.findLeafEntry(storiesHash, storyId)?.id;
},
findSiblingStoryId(storyId, hash, direction, toSiblingGroup) {
if (toSiblingGroup) {
@ -414,14 +410,14 @@ export const init: ModuleFn<SubAPI, SubState> = ({
storiesHash[storyId] = {
...storiesHash[storyId],
...update,
} as Story;
} as StoryEntry;
await store.setState({ storiesHash });
} else {
const { id: refId, stories } = ref;
stories[storyId] = {
...stories[storyId],
...update,
} as Story;
} as StoryEntry;
await fullAPI.updateRef(refId, { stories });
}
},

3
lib/api/src/modules/url.ts
View File

@ -14,7 +14,6 @@ import dedent from 'ts-dedent';
import { ModuleArgs, ModuleFn } from '../index';
import { Layout, UI } from './layout';
import { isStory } from '../lib/stories';
const { window: globalWindow } = global;
@ -181,7 +180,7 @@ export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...r
if (viewMode !== 'story') return;
const currentStory = fullAPI.getCurrentStoryData();
if (!isStory(currentStory)) return;
if (currentStory?.type !== 'story') return;
const { args, initialArgs } = currentStory;
const argsString = buildArgsParam(initialArgs, args);

2
lib/api/src/tests/addons.test.js
View File

@ -75,7 +75,7 @@ describe('Addons API', () => {
const storyId = 'story 1';
const storiesHash = {
[storyId]: {
isLeaf: true,
type: 'story',
parameters: {
a11y: { disable: true },
},

118
lib/api/src/tests/stories.test.ts
View File

@ -15,7 +15,7 @@ import { mockChannel } from '@storybook/addons';
import { getEventMetadata } from '../lib/events';
import { init as initStories } from '../modules/stories';
import { Story, SetStoriesStoryData, SetStoriesStory, StoryIndex } from '../lib/stories';
import { StoryEntry, SetStoriesStoryData, SetStoriesStory, StoryIndex } from '../lib/stories';
import type Store from '../store';
import { ModuleArgs } from '..';
@ -36,18 +36,21 @@ beforeEach(() => {
getEventMetadataMock.mockReturnValue({ sourceType: 'local' } as any);
mockStories.mockReset().mockReturnValue({
'component-a--story-1': {
type: 'story',
id: 'component-a--story-1',
title: 'Component A',
name: 'Story 1',
importPath: './path/to/component-a.ts',
},
'component-a--story-2': {
type: 'story',
id: 'component-a--story-2',
title: 'Component A',
name: 'Story 2',
importPath: './path/to/component-a.ts',
},
'component-b--story-3': {
type: 'story',
id: 'component-b--story-3',
title: 'Component B',
name: 'Story 3',
@ -172,13 +175,13 @@ describe('stories API', () => {
'custom-id--1',
]);
expect(storedStoriesHash.a).toMatchObject({
type: 'component',
id: 'a',
children: ['a--1', 'a--2'],
isRoot: false,
isComponent: true,
});
expect(storedStoriesHash['a--1']).toMatchObject({
type: 'story',
id: 'a--1',
parent: 'a',
title: 'a',
@ -189,6 +192,7 @@ describe('stories API', () => {
});
expect(storedStoriesHash['a--2']).toMatchObject({
type: 'story',
id: 'a--2',
parent: 'a',
title: 'a',
@ -199,21 +203,20 @@ describe('stories API', () => {
});
expect(storedStoriesHash.b).toMatchObject({
type: 'group',
id: 'b',
children: ['b-c', 'b-d', 'b-e'],
isRoot: false,
isComponent: false,
});
expect(storedStoriesHash['b-c']).toMatchObject({
type: 'component',
id: 'b-c',
parent: 'b',
children: ['b-c--1'],
isRoot: false,
isComponent: true,
});
expect(storedStoriesHash['b-c--1']).toMatchObject({
type: 'story',
id: 'b-c--1',
parent: 'b-c',
title: 'b/c',
@ -224,14 +227,14 @@ describe('stories API', () => {
});
expect(storedStoriesHash['b-d']).toMatchObject({
type: 'component',
id: 'b-d',
parent: 'b',
children: ['b-d--1', 'b-d--2'],
isRoot: false,
isComponent: true,
});
expect(storedStoriesHash['b-d--1']).toMatchObject({
type: 'story',
id: 'b-d--1',
parent: 'b-d',
title: 'b/d',
@ -242,6 +245,7 @@ describe('stories API', () => {
});
expect(storedStoriesHash['b-d--2']).toMatchObject({
type: 'story',
id: 'b-d--2',
parent: 'b-d',
title: 'b/d',
@ -252,14 +256,14 @@ describe('stories API', () => {
});
expect(storedStoriesHash['b-e']).toMatchObject({
type: 'component',
id: 'b-e',
parent: 'b',
children: ['custom-id--1'],
isRoot: false,
isComponent: true,
});
expect(storedStoriesHash['custom-id--1']).toMatchObject({
type: 'story',
id: 'custom-id--1',
parent: 'b-e',
title: 'b/e',
@ -297,15 +301,15 @@ describe('stories API', () => {
'design-system-some-component--my-story',
]);
expect(storedStoriesHash['design-system']).toMatchObject({
isRoot: true,
type: 'root',
name: 'Design System', // root name originates from `kind`, so it gets trimmed
});
expect(storedStoriesHash['design-system-some-component']).toMatchObject({
isComponent: true,
type: 'component',
name: 'Some Component', // component name originates from `kind`, so it gets trimmed
});
expect(storedStoriesHash['design-system-some-component--my-story']).toMatchObject({
isLeaf: true,
type: 'story',
title: ' Design System / Some Component ', // title is kept as-is, because it may be used as identifier
name: ' My Story ', // story name is kept as-is, because it's set directly on the story
});
@ -335,19 +339,18 @@ describe('stories API', () => {
// We need exact key ordering, even if in theory JS doens't guarantee it
expect(Object.keys(storedStoriesHash)).toEqual(['a', 'a-b', 'a-b--1']);
expect(storedStoriesHash.a).toMatchObject({
type: 'root',
id: 'a',
children: ['a-b'],
isRoot: true,
isComponent: false,
});
expect(storedStoriesHash['a-b']).toMatchObject({
type: 'component',
id: 'a-b',
parent: 'a',
children: ['a-b--1'],
isRoot: false,
isComponent: true,
});
expect(storedStoriesHash['a-b--1']).toMatchObject({
type: 'story',
id: 'a-b--1',
parent: 'a-b',
name: '1',
@ -381,12 +384,12 @@ describe('stories API', () => {
// We need exact key ordering, even if in theory JS doens't guarantee it
expect(Object.keys(storedStoriesHash)).toEqual(['a', 'a--1']);
expect(storedStoriesHash.a).toMatchObject({
type: 'component',
id: 'a',
children: ['a--1'],
isRoot: false,
isComponent: true,
});
expect(storedStoriesHash['a--1']).toMatchObject({
type: 'story',
id: 'a--1',
parent: 'a',
title: 'a',
@ -417,17 +420,15 @@ describe('stories API', () => {
// We need exact key ordering, even if in theory JS doens't guarantee it
expect(Object.keys(storedStoriesHash)).toEqual(['a', 'a--1', 'a--2', 'b', 'b--1']);
expect(storedStoriesHash.a).toMatchObject({
type: 'component',
id: 'a',
children: ['a--1', 'a--2'],
isRoot: false,
isComponent: true,
});
expect(storedStoriesHash.b).toMatchObject({
type: 'component',
id: 'b',
children: ['b--1'],
isRoot: false,
isComponent: true,
});
});
});
@ -497,15 +498,15 @@ describe('stories API', () => {
});
const { storiesHash: initialStoriesHash } = store.getState();
expect((initialStoriesHash['a--1'] as Story).args).toEqual({ a: 'b' });
expect((initialStoriesHash['b--1'] as Story).args).toEqual({ x: 'y' });
expect((initialStoriesHash['a--1'] as StoryEntry).args).toEqual({ a: 'b' });
expect((initialStoriesHash['b--1'] as StoryEntry).args).toEqual({ x: 'y' });
init();
fullAPI.emit(STORY_ARGS_UPDATED, { storyId: 'a--1', args: { foo: 'bar' } });
const { storiesHash: changedStoriesHash } = store.getState();
expect((changedStoriesHash['a--1'] as Story).args).toEqual({ foo: 'bar' });
expect((changedStoriesHash['b--1'] as Story).args).toEqual({ x: 'y' });
expect((changedStoriesHash['a--1'] as StoryEntry).args).toEqual({ foo: 'bar' });
expect((changedStoriesHash['b--1'] as StoryEntry).args).toEqual({ x: 'y' });
});
it('changes reffed args properly, per story when receiving STORY_ARGS_UPDATED', () => {
@ -545,7 +546,7 @@ describe('stories API', () => {
Object.assign(fullAPI, api);
init();
api.updateStoryArgs({ id: 'a--1' } as Story, { foo: 'bar' });
api.updateStoryArgs({ id: 'a--1' } as StoryEntry, { foo: 'bar' });
expect(emit).toHaveBeenCalledWith(UPDATE_STORY_ARGS, {
storyId: 'a--1',
updatedArgs: { foo: 'bar' },
@ -555,8 +556,8 @@ describe('stories API', () => {
});
const { storiesHash: changedStoriesHash } = store.getState();
expect((changedStoriesHash['a--1'] as Story).args).toEqual({ a: 'b' });
expect((changedStoriesHash['b--1'] as Story).args).toEqual({ x: 'y' });
expect((changedStoriesHash['a--1'] as StoryEntry).args).toEqual({ a: 'b' });
expect((changedStoriesHash['b--1'] as StoryEntry).args).toEqual({ x: 'y' });
});
it('updateStoryArgs emits UPDATE_STORY_ARGS to the right frame', () => {
@ -576,7 +577,7 @@ describe('stories API', () => {
Object.assign(fullAPI, api);
init();
api.updateStoryArgs({ id: 'a--1', refId: 'refId' } as Story, { foo: 'bar' });
api.updateStoryArgs({ id: 'a--1', refId: 'refId' } as StoryEntry, { foo: 'bar' });
expect(emit).toHaveBeenCalledWith(UPDATE_STORY_ARGS, {
storyId: 'a--1',
updatedArgs: { foo: 'bar' },
@ -603,7 +604,7 @@ describe('stories API', () => {
Object.assign(fullAPI, api);
init();
api.resetStoryArgs({ id: 'a--1' } as Story, ['foo']);
api.resetStoryArgs({ id: 'a--1' } as StoryEntry, ['foo']);
expect(emit).toHaveBeenCalledWith(RESET_STORY_ARGS, {
storyId: 'a--1',
argNames: ['foo'],
@ -613,8 +614,8 @@ describe('stories API', () => {
});
const { storiesHash: changedStoriesHash } = store.getState();
expect((changedStoriesHash['a--1'] as Story).args).toEqual({ a: 'b' });
expect((changedStoriesHash['b--1'] as Story).args).toEqual({ x: 'y' });
expect((changedStoriesHash['a--1'] as StoryEntry).args).toEqual({ a: 'b' });
expect((changedStoriesHash['b--1'] as StoryEntry).args).toEqual({ x: 'y' });
});
it('resetStoryArgs emits RESET_STORY_ARGS to the right frame', () => {
@ -634,7 +635,7 @@ describe('stories API', () => {
Object.assign(fullAPI, api);
init();
api.resetStoryArgs({ id: 'a--1', refId: 'refId' } as Story, ['foo']);
api.resetStoryArgs({ id: 'a--1', refId: 'refId' } as StoryEntry, ['foo']);
expect(emit).toHaveBeenCalledWith(RESET_STORY_ARGS, {
storyId: 'a--1',
argNames: ['foo'],
@ -853,8 +854,8 @@ describe('stories API', () => {
} = initStories({ store, navigate, provider } as any);
setStories({
...setStoriesData,
'intro--page': {
id: 'intro--page',
'intro--docs': {
id: 'intro--docs',
kind: 'Intro',
name: 'Page',
parameters: { docsOnly: true } as any,
@ -863,7 +864,7 @@ describe('stories API', () => {
});
selectStory('intro');
expect(navigate).toHaveBeenCalledWith('/docs/intro');
expect(navigate).toHaveBeenCalledWith('/docs/intro--docs');
});
describe('legacy api', () => {
@ -1040,20 +1041,22 @@ describe('stories API', () => {
'component-b--story-3',
]);
expect(storedStoriesHash['component-a']).toMatchObject({
type: 'component',
id: 'component-a',
children: ['component-a--story-1', 'component-a--story-2'],
isRoot: false,
isComponent: true,
});
expect(storedStoriesHash['component-a--story-1']).toMatchObject({
type: 'story',
id: 'component-a--story-1',
parent: 'component-a',
title: 'Component A',
name: 'Story 1',
prepared: false,
});
expect((storedStoriesHash['component-a--story-1'] as Story as Story).args).toBeUndefined();
expect(
(storedStoriesHash['component-a--story-1'] as StoryEntry as StoryEntry).args
).toBeUndefined();
});
it('watches for the INVALIDATE event and refetches -- and resets the hash', async () => {
@ -1073,6 +1076,7 @@ describe('stories API', () => {
global.fetch.mockClear();
mockStories.mockReturnValueOnce({
'component-a--story-1': {
type: 'story',
id: 'component-a--story-1',
title: 'Component A',
name: 'Story 1',
@ -1089,31 +1093,38 @@ describe('stories API', () => {
expect(Object.keys(storedStoriesHash)).toEqual(['component-a', 'component-a--story-1']);
});
it('infers docs only if there is only one story and it has the name "Page"', async () => {
// TODO: we should re-implement this for v3 story index
it.skip('infers docs only if there is only one story and it has the name "Page"', async () => {});
it('handles docs entries', async () => {
mockStories.mockReset().mockReturnValue({
'component-a--page': {
type: 'story',
id: 'component-a--page',
title: 'Component A',
name: 'Page', // Called "Page" but not only story
name: 'Page',
importPath: './path/to/component-a.ts',
},
'component-a--story-2': {
type: 'story',
id: 'component-a--story-2',
title: 'Component A',
name: 'Story 2',
importPath: './path/to/component-a.ts',
},
'component-b': {
id: 'component-b--page',
title: 'Component B',
name: 'Page', // Page and only story
importPath: './path/to/component-b.ts',
type: 'docs',
id: 'component-b--docs',
title: 'Component B',
name: 'Docs',
importPath: './path/to/component-b.ts',
storiesImports: [],
},
'component-c--story-4': {
type: 'story',
id: 'component-c--story-4',
title: 'Component c',
name: 'Story 4', // Only story but not page
name: 'Story 4',
importPath: './path/to/component-c.ts',
},
});
@ -1137,13 +1148,14 @@ describe('stories API', () => {
'component-a--page',
'component-a--story-2',
'component-b',
'component-b--docs',
'component-c',
'component-c--story-4',
]);
expect(storedStoriesHash['component-a'].isLeaf).toBe(false);
expect(storedStoriesHash['component-a'].isLeaf).toBe(false);
expect(storedStoriesHash['component-b'].isLeaf).toBe(true);
expect(storedStoriesHash['component-c'].isLeaf).toBe(false);
expect(storedStoriesHash['component-a--page'].type).toBe('story');
expect(storedStoriesHash['component-a--story-2'].type).toBe('story');
expect(storedStoriesHash['component-b--docs'].type).toBe('docs');
expect(storedStoriesHash['component-c--story-4'].type).toBe('story');
});
});

3
lib/api/src/tests/url.test.js
View File

@ -203,6 +203,7 @@ describe('initModule', () => {
const { api, init } = initURL({ store, state: { location: {} }, navigate, fullAPI });
Object.assign(fullAPI, api, {
getCurrentStoryData: () => ({
type: 'story',
args: { a: 1, b: 2 },
initialArgs: { a: 1, b: 1 },
isLeaf: true,
@ -241,7 +242,7 @@ describe('initModule', () => {
const { api, init } = initURL({ store, state: { location: {} }, navigate, fullAPI });
Object.assign(fullAPI, api, {
getCurrentStoryData: () => ({ args: { a: 1 }, isLeaf: true }),
getCurrentStoryData: () => ({ type: 'story', args: { a: 1 }, isLeaf: true }),
});
init();

2
lib/ui/src/components/preview/preview.tsx
View File

@ -122,7 +122,7 @@ const useTabs = (
}, [getElements]);
return useMemo(() => {
if (story?.parameters) {
if (story?.type === 'story' && story.parameters) {
return filterTabs([canvas, ...tabsFromConfig], story.parameters);
}

10
lib/ui/src/components/preview/toolbar.tsx
View File

@ -3,7 +3,7 @@ import React, { Fragment, useMemo, FunctionComponent } from 'react';
import { styled } from '@storybook/theming';
import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
import { Consumer, Combo, API, Story, Group, State, merge } from '@storybook/api';
import { Consumer, Combo, API, State, merge, DocsEntry, StoryEntry } from '@storybook/api';
import { shortcutToHumanString } from '@storybook/api/shortcut';
import { addons, Addon, types } from '@storybook/addons';
@ -138,7 +138,7 @@ const useTools = (
: [];
return useMemo(() => {
return story && story.parameters
return story?.type === 'story' && story.parameters
? filterTools(tools, toolsExtra, tabs, {
viewMode,
story,
@ -154,7 +154,7 @@ export interface ToolData {
isShown: boolean;
tabs: Addon[];
api: API;
story: Story | Group;
story: DocsEntry | StoryEntry;
}
export const ToolRes: FunctionComponent<ToolData & RenderData> = React.memo<ToolData & RenderData>(
@ -194,8 +194,8 @@ export const Tools = React.memo<{ list: Addon[] }>(({ list }) => (
));
function toolbarItemHasBeenExcluded(item: Partial<Addon>, story: PreviewProps['story']) {
const toolbarItemsFromStoryParameters =
'toolbar' in story.parameters ? story.parameters.toolbar : undefined;
const parameters = story.type === 'story' ? story.parameters : {};
const toolbarItemsFromStoryParameters = 'toolbar' in parameters ? parameters.toolbar : undefined;
const { toolbar: toolbarItemsFromAddonsConfig } = addons.getConfig();
const toolbarItems = merge(toolbarItemsFromAddonsConfig, toolbarItemsFromStoryParameters);

8
lib/ui/src/components/preview/utils/types.tsx
View File

@ -1,5 +1,5 @@
import { State, API, Story, Group } from '@storybook/api';
import { FunctionComponent, ReactNode } from 'react';
import { State, API, DocsEntry, StoryEntry } from '@storybook/api';
export type ViewMode = State['viewMode'];
@ -7,8 +7,8 @@ export interface PreviewProps {
api: API;
viewMode: ViewMode;
refs: State['refs'];
storyId: Story['id'];
story: Group | Story;
storyId: StoryEntry['id'];
story: DocsEntry | StoryEntry;
docsOnly: boolean;
options: {
isFullscreen: boolean;
@ -54,7 +54,7 @@ export type CustomCanvasRenderer = (
) => ReactNode;
export interface FramesRendererProps {
story: Story | Group;
story: DocsEntry | StoryEntry;
storyId: string;
refId: string;
baseUrl: string;

10
lib/ui/src/components/sidebar/RefIndicator.tsx
View File

@ -167,8 +167,14 @@ export const RefIndicator = React.memo(
({ state, ...ref }, forwardedRef) => {
const api = useStorybookApi();
const list = useMemo(() => Object.values(ref.stories || {}), [ref.stories]);
const componentCount = useMemo(() => list.filter((v) => v.isComponent).length, [list]);
const leafCount = useMemo(() => list.filter((v) => v.isLeaf).length, [list]);
const componentCount = useMemo(
() => list.filter((v) => v.type === 'component').length,
[list]
);
const leafCount = useMemo(
() => list.filter((v) => v.type === 'docs' || v.type === 'story').length,
[list]
);
const changeVersion = useCallback(
((event, item) => {

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

@ -193,7 +193,11 @@ export const Search = React.memo<{
let results: DownshiftItem[] = [];
const resultIds: Set<string> = new Set();
const distinctResults = (fuse.search(input) as SearchResult[]).filter(({ item }) => {
if (!(item.isComponent || item.isLeaf) || resultIds.has(item.parent)) return false;
if (
!(item.type === 'component' || item.type === 'docs' || item.type === 'story') ||
resultIds.has(item.parent)
)
return false;
resultIds.add(item.id);
return true;
});
@ -312,10 +316,7 @@ export const Search = React.memo<{
const data = dataset.hash[refId];
if (data && data.stories && data.stories[storyId]) {
const story = data.stories[storyId];
const item =
story.isLeaf && !story.isComponent && !story.isRoot
? data.stories[story.parent]
: story;
const item = story.type === 'story' ? data.stories[story.parent] : story;
// prevent duplicates
if (!acc.some((res) => res.item.refId === refId && res.item.id === item.id)) {
acc.push({ item: searchItem(item, dataset.hash[refId]), matches: [], score: 0 });

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

@ -158,7 +158,7 @@ const Result: FunctionComponent<
);
}
const TreeNode = item.isComponent ? ComponentNode : StoryNode;
const TreeNode = item.type === 'component' ? ComponentNode : StoryNode;
return (
<ResultRow {...props}>
<TreeNode isExpanded={false} depth={0} onClick={onClick} title={title}>

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

@ -100,7 +100,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
enableShortcuts = true,
refs = {},
}) => {
const collapseFn = DOCS_MODE && collapseAllStories;
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]);
@ -109,7 +109,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
if (ref.stories) {
acc[id] = {
...ref,
stories: collapseFn ? collapseFn(ref.stories) : ref.stories,
stories: collapseFn(ref.stories),
};
} else {
acc[id] = ref;

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

@ -17,7 +17,7 @@ export default {
};
const refId = DEFAULT_REF_ID;
const storyId = Object.values(stories).find((story) => story.isLeaf && !story.isComponent).id;
const storyId = Object.values(stories).find((story) => story.type === 'story').id;
const log = (id: string) => console.log(id);
@ -39,17 +39,16 @@ export const Full = () => {
const singleStoryComponent: StoriesHash = {
single: {
type: 'component',
name: 'Single',
id: 'single',
parent: null,
depth: 0,
children: ['single--single'],
isComponent: true,
isLeaf: false,
isRoot: false,
renderLabel: () => <span>🔥 Single</span>,
},
'single--single': {
type: 'story',
id: 'single--single',
title: 'Single',
name: 'Single',
@ -59,9 +58,6 @@ const singleStoryComponent: StoriesHash = {
initialArgs: {},
depth: 1,
parent: 'single',
isLeaf: true,
isComponent: false,
isRoot: false,
renderLabel: () => <span>🔥 Single</span>,
importPath: './single.stories.js',
},

55
lib/ui/src/components/sidebar/Tree.tsx
View File

@ -1,5 +1,4 @@
import type { Group, Story, StoriesHash } from '@storybook/api';
import { isRoot, isStory } from '@storybook/api';
import type { StoriesHash, GroupEntry, ComponentEntry, StoryEntry } from '@storybook/api';
import { styled } from '@storybook/theming';
import { Button, Icons } from '@storybook/components';
import { transparentize } from 'polished';
@ -149,8 +148,8 @@ const Node = React.memo<NodeProps>(
if (!isDisplayed) return null;
const id = createId(item.id, refId);
if (item.isLeaf) {
const LeafNode = item.isComponent ? DocumentNode : StoryNode;
if (item.type === 'story' || item.type === 'docs') {
const LeafNode = item.type === 'docs' ? DocumentNode : StoryNode;
return (
<LeafNodeStyleWrapper>
<LeafNode
@ -160,7 +159,7 @@ const Node = React.memo<NodeProps>(
data-ref-id={refId}
data-item-id={item.id}
data-parent-id={item.parent}
data-nodetype={item.isComponent ? 'document' : 'story'}
data-nodetype={item.type === 'docs' ? 'document' : 'story'}
data-selected={isSelected}
data-highlightable={isDisplayed}
depth={isOrphan ? item.depth : item.depth - 1}
@ -181,7 +180,7 @@ const Node = React.memo<NodeProps>(
);
}
if (isRoot(item)) {
if (item.type === 'root') {
return (
<RootNode
key={id}
@ -222,7 +221,7 @@ const Node = React.memo<NodeProps>(
);
}
const BranchNode = item.isComponent ? ComponentNode : GroupNode;
const BranchNode = item.type === 'component' ? ComponentNode : GroupNode;
return (
<BranchNode
key={id}
@ -231,18 +230,18 @@ const Node = React.memo<NodeProps>(
data-ref-id={refId}
data-item-id={item.id}
data-parent-id={item.parent}
data-nodetype={item.isComponent ? 'component' : 'group'}
data-nodetype={item.type === 'component' ? 'component' : 'group'}
data-highlightable={isDisplayed}
aria-controls={item.children && item.children[0]}
aria-expanded={isExpanded}
depth={isOrphan ? item.depth : item.depth - 1}
isComponent={item.isComponent}
isComponent={item.type === 'component'}
isExpandable={item.children && item.children.length > 0}
isExpanded={isExpanded}
onClick={(event) => {
event.preventDefault();
setExpanded({ ids: [item.id], value: !isExpanded });
if (item.isComponent && !isExpanded) onSelectStoryId(item.id);
if (item.type === 'component' && !isExpanded) onSelectStoryId(item.id);
}}
>
{(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
@ -301,9 +300,9 @@ export const Tree = React.memo<{
Object.keys(data).reduce<[string[], string[], ExpandedState]>(
(acc, id) => {
const item = data[id];
if (isRoot(item)) acc[0].push(id);
if (item.type === 'root') acc[0].push(id);
else if (!item.parent) acc[1].push(id);
if (isRoot(item) && item.startCollapsed) acc[2][id] = false;
if (item.type === 'root' && item.startCollapsed) acc[2][id] = false;
return acc;
},
[[], [], {}]
@ -320,7 +319,9 @@ export const Tree = React.memo<{
(acc, nodeId) => {
const descendantIds = getDescendantIds(data, nodeId, false);
acc.orphansFirst.push(nodeId, ...descendantIds);
acc.expandableDescendants[nodeId] = descendantIds.filter((d) => !data[d].isLeaf);
acc.expandableDescendants[nodeId] = descendantIds.filter(
(d) => !['story', 'docs'].includes(data[d].type)
);
return acc;
},
{ orphansFirst: [] as string[], expandableDescendants: {} as Record<string, string[]> }
@ -329,15 +330,15 @@ export const Tree = React.memo<{
// Create a list of component IDs which have exactly one story, which name exactly matches the component name.
const singleStoryComponentIds = useMemo(() => {
return orphansFirst.filter((nodeId) => {
const { children = [], isComponent, isLeaf, name } = data[nodeId];
return (
!isLeaf &&
isComponent &&
children.length === 1 &&
isStory(data[children[0]]) &&
data[children[0]].name === name
);
return orphansFirst.filter((id) => {
const entry = data[id];
if (entry.type !== 'component') return false;
const { children = [], name } = entry;
if (children.length !== 1) return false;
const onlyChild = data[children[0]];
return onlyChild.type === 'story' && onlyChild.name === name;
});
}, [data, orphansFirst]);
@ -350,14 +351,14 @@ export const Tree = React.memo<{
const collapsedData = useMemo(() => {
return singleStoryComponentIds.reduce(
(acc, id) => {
const { children, parent } = data[id] as Group;
const { children, parent } = data[id] as ComponentEntry;
const [childId] = children;
if (parent) {
const siblings = [...data[parent].children];
const siblings = [...(data[parent] as GroupEntry).children];
siblings[siblings.indexOf(id)] = childId;
acc[parent] = { ...data[parent], children: siblings };
acc[parent] = { ...data[parent], children: siblings } as GroupEntry;
}
acc[childId] = { ...data[childId], parent, depth: data[childId].depth - 1 } as Story;
acc[childId] = { ...data[childId], parent, depth: data[childId].depth - 1 } as StoryEntry;
return acc;
},
{ ...data }
@ -391,7 +392,7 @@ export const Tree = React.memo<{
const item = collapsedData[itemId];
const id = createId(itemId, refId);
if (isRoot(item)) {
if (item.type === 'root') {
const descendants = expandableDescendants[item.id];
const isFullyExpanded = descendants.every((d: string) => expanded[d]);
return (

81
lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { ThemeProvider, ensure, themes } from '@storybook/theming';
import type { Story, StoriesHash, Refs } from '@storybook/api';
import type { HashEntry, StoriesHash, Refs } from '@storybook/api';
import type { Theme } from '@storybook/theming';
import type { RenderResult } from '@testing-library/react';
import { Sidebar } from '../Sidebar';
@ -10,7 +10,7 @@ import type { SidebarProps } from '../Sidebar';
global.DOCS_MODE = false;
const PAGE_NAME = 'Page';
const DOCS_NAME = 'Docs';
const factory = (props: Partial<SidebarProps>): RenderResult => {
const theme: Theme = ensure(themes.light);
@ -22,70 +22,56 @@ const factory = (props: Partial<SidebarProps>): RenderResult => {
);
};
const generateStories = ({ kind, refId }: { kind: string; refId?: string }): StoriesHash => {
const [root, storyName]: [string, string] = kind.split('/') as any;
const generateStories = ({ title, refId }: { title: string; refId?: string }): StoriesHash => {
const [root, componentName]: [string, string] = title.split('/') as any;
const rootId: string = root.toLowerCase().replace(/\s+/g, '-');
const hypenatedstoryName: string = storyName.toLowerCase().replace(/\s+/g, '-');
const storyId = `${rootId}-${hypenatedstoryName}`;
const pageId = `${rootId}-${hypenatedstoryName}--page`;
const hypenatedComponentName: string = componentName.toLowerCase().replace(/\s+/g, '-');
const componentId = `${rootId}-${hypenatedComponentName}`;
const docsId = `${rootId}-${hypenatedComponentName}--docs`;
const storyBase: Partial<Story>[] = [
const storyBase: HashEntry[] = [
{
type: 'root',
id: rootId,
depth: 0,
refId,
name: root,
children: [storyId],
children: [componentId],
startCollapsed: false,
},
{
id: storyId,
name: storyName,
children: [pageId],
isComponent: true,
type: 'component',
id: componentId,
depth: 1,
refId,
name: componentName,
children: [docsId],
parent: rootId,
},
{
id: pageId,
name: PAGE_NAME,
story: PAGE_NAME,
kind,
componentId: storyId,
parent: storyId,
title: kind,
type: 'docs',
id: docsId,
depth: 2,
refId,
name: DOCS_NAME,
title,
parent: componentId,
importPath: './docs.js',
},
];
return storyBase.reduce(
(accumulator: StoriesHash, current: Partial<Story>, index: number): StoriesHash => {
const { id, name } = current;
const isRoot: boolean = index === 0;
const story: Story = {
...current,
depth: index,
isRoot,
isLeaf: name === PAGE_NAME,
refId,
};
if (!isRoot) {
story.parameters = {};
story.parameters.docsOnly = true;
}
accumulator[id] = story;
return accumulator;
},
{}
);
return storyBase.reduce((accumulator: StoriesHash, current: HashEntry): StoriesHash => {
accumulator[current.id] = current;
return accumulator;
}, {});
};
describe('Sidebar', () => {
test("should not render an extra nested 'Page'", async () => {
const refId = 'next';
const kind = 'Getting Started/Install';
const refStories: StoriesHash = generateStories({ refId, kind });
const internalStories: StoriesHash = generateStories({ kind: 'Welcome/Example' });
const title = 'Getting Started/Install';
const refStories: StoriesHash = generateStories({ refId, title });
const internalStories: StoriesHash = generateStories({ title: 'Welcome/Example' });
const refs: Refs = {
[refId]: {
@ -93,6 +79,7 @@ describe('Sidebar', () => {
id: refId,
ready: true,
title: refId,
url: 'https://ref.url',
},
};

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

@ -9,28 +9,22 @@ const root: Item = {
name: 'root',
depth: 0,
children: ['a', 'b'],
isRoot: true,
isComponent: false,
isLeaf: false,
type: 'root',
};
const a: Item = {
id: 'a',
name: 'a',
depth: 1,
isComponent: true,
isRoot: false,
isLeaf: false,
type: 'component',
parent: 'root',
children: ['a1'],
};
const a1: Item = {
id: 'a1',
name: 'a1',
kind: 'a',
title: 'a',
depth: 2,
isLeaf: true,
isComponent: false,
isRoot: false,
type: 'story',
parent: 'a',
args: {},
};
@ -38,38 +32,33 @@ const b: Item = {
id: 'b',
name: 'b',
depth: 1,
isRoot: false,
isComponent: true,
isLeaf: false,
type: 'component',
parent: 'root',
children: ['b1', 'b2'],
};
const b1: Item = {
id: 'b1',
name: 'b1',
kind: 'b',
title: 'b',
depth: 2,
isLeaf: true,
isRoot: false,
isComponent: false,
type: 'story',
parent: 'b',
args: {},
};
const b2: Item = {
id: 'b2',
name: 'b2',
kind: 'b',
title: 'b',
depth: 2,
isLeaf: true,
isRoot: false,
isComponent: false,
type: 'story',
parent: 'b',
args: {},
};
const stories: StoriesHash = { root, a, a1, b, b1, b2 };
describe('collapse all stories', () => {
// FIXME: skipping as we won't need this long term
describe.skip('collapse all stories', () => {
it('collapses normal stories', () => {
const collapsed = collapseAllStories(stories);
@ -78,24 +67,18 @@ describe('collapse all stories', () => {
id: 'a1',
depth: 1,
name: 'a',
kind: 'a',
title: 'a',
parent: 'root',
children: [],
isRoot: false,
isComponent: true,
isLeaf: true,
type: 'story',
args: {},
},
b1: {
id: 'b1',
depth: 1,
name: 'b',
kind: 'b',
title: 'b',
parent: 'root',
children: [],
isRoot: false,
isComponent: true,
isLeaf: true,
type: 'story',
args: {},
},
root: {
@ -103,9 +86,7 @@ describe('collapse all stories', () => {
name: 'root',
depth: 0,
children: ['a1', 'b1'],
isRoot: true,
isComponent: false,
isLeaf: false,
type: 'root',
},
};
@ -115,7 +96,7 @@ describe('collapse all stories', () => {
it('collapses docs-only stories', () => {
const hasDocsOnly: StoriesHash = {
...stories,
a1: { ...a1, parameters: { ...a1.parameters, ...docsOnly.parameters } },
a1: { ...a1, type: 'docs' },
};
const collapsed = collapseAllStories(hasDocsOnly);
@ -123,7 +104,7 @@ describe('collapse all stories', () => {
expect(collapsed.a1).toEqual({
id: 'a1',
name: 'a',
kind: 'a',
title: 'a',
depth: 1,
isComponent: true,
isLeaf: true,
@ -139,9 +120,7 @@ describe('collapse all stories', () => {
id: 'root',
name: 'root',
depth: 0,
isRoot: true,
isComponent: false,
isLeaf: false,
type: 'root',
children: ['a', 'b1'],
};
@ -158,7 +137,7 @@ describe('collapse all stories', () => {
id: 'a1',
depth: 1,
name: 'a',
kind: 'a',
title: 'a',
isRoot: false,
isComponent: true,
isLeaf: true,
@ -169,7 +148,7 @@ describe('collapse all stories', () => {
b1: {
id: 'b1',
name: 'b1',
kind: 'b',
title: 'b',
depth: 1,
isLeaf: true,
isComponent: false,

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

@ -1,4 +1,11 @@
import type { Story, StoriesHash } from '@storybook/api';
import type {
ComponentEntry,
GroupEntry,
HashEntry,
RootEntry,
StoriesHash,
StoryEntry,
} from '@storybook/api';
import { Item } from './types';
export const DEFAULT_REF_ID = 'storybook_internal';
@ -9,22 +16,28 @@ export const collapseAllStories = (stories: StoriesHash) => {
// 1) remove all leaves
const leavesRemoved = Object.values(stories).filter(
(item: Story) => !(item.isLeaf && stories[item.parent].isComponent)
(item: HashEntry) =>
!(
(item.type === 'story' || item.type === 'docs') &&
stories[item.parent].type === 'component'
)
);
// 2) make all components leaves and rewrite their ID's to the first leaf child
const componentsFlattened = leavesRemoved.map((item: Story) => {
const { id, isComponent, children, ...rest } = item;
const componentsFlattened = leavesRemoved.map((item: HashEntry) => {
// this is a folder, so just leave it alone
if (!isComponent) {
if (item.type !== 'component') {
return item;
}
const { id, children, ...rest } = item;
const nonLeafChildren: string[] = [];
const leafChildren: string[] = [];
children.forEach((child: string) =>
(stories[child].isLeaf ? leafChildren : nonLeafChildren).push(child)
(['stories', 'docs'].includes(stories[child].type) ? leafChildren : nonLeafChildren).push(
child
)
);
if (leafChildren.length === 0) {
@ -33,22 +46,18 @@ export const collapseAllStories = (stories: StoriesHash) => {
const leafId = leafChildren[0];
const component = {
type: 'story',
args: {},
...rest,
id: leafId,
title: (stories[leafId] as Story).title,
isRoot: false,
isLeaf: true,
isComponent: true,
title: (stories[leafId] as StoryEntry).title,
children: [] as string[],
};
componentIdToLeafId[id] = leafId;
// 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({ isComponent, nonLeafChildren })}`
);
throw new Error(`Unexpected '${item.id}': ${JSON.stringify({ nonLeafChildren })}`);
}
return component;
@ -56,7 +65,7 @@ export const collapseAllStories = (stories: StoriesHash) => {
// 3) rewrite all the children as needed
const childrenRewritten = componentsFlattened.map((item) => {
if (item.isLeaf) {
if (item.type === 'story' || item.type === 'docs') {
return item;
}

7336
lib/ui/src/components/sidebar/mockdata.large.ts
View File

File diff suppressed because it is too large Load Diff

84
lib/ui/src/components/sidebar/mockdata.ts
View File

@ -5,19 +5,15 @@ export type MockDataSet = Record<string, StoriesHash>;
export const mockDataset: MockDataSet = {
withRoot: {
'2': {
isRoot: false,
isLeaf: false,
isComponent: false,
type: 'group',
children: ['2-21', '2-22'],
depth: 0,
id: '2',
name: 'Group 1',
},
'2-21': {
isRoot: false,
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
id: '2-21',
depth: 1,
name: 'Child B1',
@ -28,10 +24,8 @@ export const mockDataset: MockDataSet = {
importPath: './importPath.js',
},
'2-22': {
isRoot: false,
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
id: '2-22',
depth: 1,
name: 'Child B2',
@ -42,18 +36,14 @@ export const mockDataset: MockDataSet = {
importPath: './importPath.js',
},
'1': {
isRoot: true,
isLeaf: false,
isComponent: false,
type: 'root',
children: ['1-11', '1-12'],
depth: 0,
id: '1',
name: 'Root 1',
},
'1-11': {
isRoot: false,
isLeaf: false,
isComponent: true,
type: 'component',
id: '1-11',
parent: '1',
depth: 1,
@ -61,9 +51,7 @@ export const mockDataset: MockDataSet = {
children: [],
},
'1-12': {
isRoot: false,
isLeaf: false,
isComponent: true,
type: 'component',
id: '1-12',
parent: '1',
name: 'Child A2',
@ -71,10 +59,8 @@ export const mockDataset: MockDataSet = {
children: ['1-12-121', '1-12-122'],
},
'1-12-121': {
isRoot: false,
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
id: '1-12-121',
parent: '1-12',
depth: 2,
@ -85,10 +71,8 @@ export const mockDataset: MockDataSet = {
importPath: './importPath.js',
},
'1-12-122': {
isRoot: false,
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
id: '1-12-122',
parent: '1-12',
depth: 2,
@ -99,19 +83,15 @@ export const mockDataset: MockDataSet = {
importPath: './importPath.js',
},
'3': {
isRoot: true,
isLeaf: false,
isComponent: false,
type: 'root',
children: ['3-31', '3-32'],
depth: 0,
id: '3',
name: 'Root 3',
},
'3-31': {
isRoot: false,
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
id: '3-31',
depth: 1,
name: 'Child A1',
@ -122,9 +102,7 @@ export const mockDataset: MockDataSet = {
importPath: './importPath.js',
},
'3-32': {
isRoot: false,
isLeaf: false,
isComponent: true,
type: 'component',
id: '3-32',
name: 'Child A2',
depth: 1,
@ -132,10 +110,8 @@ export const mockDataset: MockDataSet = {
parent: '3',
},
'3-32-321': {
isRoot: false,
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
id: '3-32-321',
depth: 2,
name: 'GrandChild A1.1',
@ -146,10 +122,8 @@ export const mockDataset: MockDataSet = {
importPath: './importPath.js',
},
'3-32-322': {
isRoot: false,
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
id: '3-32-322',
depth: 2,
name: 'GrandChild A1.2',
@ -163,18 +137,14 @@ export const mockDataset: MockDataSet = {
noRoot: {
'1': {
children: ['1-11', '1-12'],
isRoot: false,
isComponent: false,
isLeaf: false,
type: 'group',
depth: 0,
id: '1',
name: 'Parent A',
},
'2': {
children: ['2-21', '2-22'],
isRoot: false,
isComponent: true,
isLeaf: false,
type: 'component',
depth: 0,
id: '2',
name: 'Parent B',
@ -183,10 +153,8 @@ export const mockDataset: MockDataSet = {
id: '1-11',
depth: 1,
name: 'Child A1',
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
isRoot: false,
parent: '1',
title: '',
args: {},
@ -197,10 +165,8 @@ export const mockDataset: MockDataSet = {
id: '1-12-121',
depth: 2,
name: 'GrandChild A1.1',
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
isRoot: false,
parent: '1-12',
title: '',
args: {},
@ -211,10 +177,8 @@ export const mockDataset: MockDataSet = {
id: '1-12-122',
depth: 2,
name: 'GrandChild A1.2',
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
isRoot: false,
parent: '1-12',
title: '',
args: {},
@ -226,19 +190,15 @@ export const mockDataset: MockDataSet = {
name: 'Child A2',
depth: 1,
children: ['1-12-121', '1-12-122'],
isRoot: false,
isComponent: true,
isLeaf: false,
type: 'component',
parent: '1',
},
'2-21': {
id: '2-21',
depth: 1,
name: 'Child B1',
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
isRoot: false,
parent: '2',
title: '',
args: {},
@ -249,10 +209,8 @@ export const mockDataset: MockDataSet = {
id: '2-22',
depth: 1,
name: 'Child B2',
isLeaf: true,
type: 'story',
prepared: true,
isComponent: false,
isRoot: false,
parent: '2',
title: '',
args: {},

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

@ -2,7 +2,6 @@ import memoize from 'memoizerific';
import global from 'global';
import { SyntheticEvent } from 'react';
import type { StoriesHash } from '@storybook/api';
import { isRoot } from '@storybook/api';
import { DEFAULT_REF_ID } from './data';
import { Item, RefType, Dataset, SearchItem } from './types';
@ -25,7 +24,7 @@ export const prevent = (e: SyntheticEvent) => {
export const get = memoize(1000)((id: string, dataset: Dataset) => dataset[id]);
export const getParent = memoize(1000)((id: string, dataset: Dataset) => {
const item = get(id, dataset);
return item && !isRoot(item) ? get(item.parent, dataset) : undefined;
return item && item.type !== 'root' ? get(item.parent, dataset) : undefined;
});
export const getParents = memoize(1000)((id: string, dataset: Dataset): Item[] => {
const parent = getParent(id, dataset);
@ -36,9 +35,11 @@ export const getAncestorIds = memoize(1000)((data: StoriesHash, id: string): str
);
export const getDescendantIds = memoize(1000)(
(data: StoriesHash, id: string, skipLeafs: boolean): string[] => {
const { children = [] } = data[id] || {};
const entry = data[id];
const children = entry.type === 'story' || entry.type === 'docs' ? [] : entry.children;
return children.reduce((acc, childId) => {
if (!data[childId] || (skipLeafs && data[childId].isLeaf)) return acc;
const child = data[childId];
if (!child || (skipLeafs && child.type === 'story') || child.type === 'docs') return acc;
acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
return acc;
}, []);
@ -46,7 +47,7 @@ export const getDescendantIds = memoize(1000)(
);
export function getPath(item: Item, ref: RefType): string[] {
const parent = !isRoot(item) && item.parent ? ref.stories[item.parent] : null;
const parent = item.type !== 'root' && item.parent ? ref.stories[item.parent] : null;
if (parent) return [...getPath(parent, ref), parent.name];
return ref.id === DEFAULT_REF_ID ? [] : [ref.title || ref.id];
}

14
lib/ui/src/containers/preview.tsx
View File

@ -2,7 +2,7 @@ import global from 'global';
import React from 'react';
import type { Combo, StoriesHash } from '@storybook/api';
import { Consumer, isRoot, isGroup, isStory } from '@storybook/api';
import { Consumer } from '@storybook/api';
import { Preview } from '../components/preview/preview';
@ -14,24 +14,18 @@ const splitTitleAddExtraSpace = (input: string) =>
input.split('/').join(' / ').replace(/\s\s/, ' ');
const getDescription = (item: Item) => {
if (isRoot(item)) {
return item.name ? `${item.name} ⋅ Storybook` : 'Storybook';
}
if (isGroup(item)) {
return item.name ? `${item.name} ⋅ Storybook` : 'Storybook';
}
if (isStory(item)) {
if (item.type === 'story' || item.type === 'docs') {
const { title, name } = item;
return title && name ? splitTitleAddExtraSpace(`${title} - ${name} ⋅ Storybook`) : 'Storybook';
}
return 'Storybook';
return item.name ? `${item.name} ⋅ Storybook` : 'Storybook';
};
const mapper = ({ api, state }: Combo) => {
const { layout, location, customQueryParams, storyId, refs, viewMode, path, refId } = state;
const story = api.getData(storyId, refId);
const docsOnly = story.isComponent && story.isLeaf;
const docsOnly = story.type === 'docs';
return {
api,

2
lib/ui/src/index.tsx
View File

@ -72,7 +72,7 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
viewMode={state.viewMode}
layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
panelCount={panelCount}
docsOnly={story?.isComponent && story?.isLeaf}
docsOnly={story.type === 'docs'}
/>
</ThemeProvider>
);