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

Merge pull request #16299 from storybookjs/fix-set-stories-et-al

Browse Source 
Core: Fix `extract`, `SET_STORIES` and `getStoriesJsonData`
This commit is contained in:
Michael Shilman 2021-10-12 08:44:36 +08:00 committed by GitHub
commit ec9ba7be9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 280 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
lib/core-client/src/preview/start.test.ts
View File

@ -73,8 +73,8 @@ describe('start', () => {
"Component A": Object {},
"Component B": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-a--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -92,7 +92,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
Object {
"component-a--story-two": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -110,7 +110,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
Object {
"component-b--story-three": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -128,7 +128,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component B",
},
],
},
"v": 2,
}
`);
@ -167,8 +167,8 @@ describe('start', () => {
"kindParameters": Object {
"Component A": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-a--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -188,7 +188,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
],
},
"v": 2,
}
`);
@ -357,8 +357,8 @@ describe('start', () => {
"kindParameters": Object {
"Component A": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-a--default": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -376,7 +376,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
Object {
"component-a--new": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -394,7 +394,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
],
},
"v": 2,
}
`);
@ -431,8 +431,8 @@ describe('start', () => {
"Component A": Object {},
"Component B": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-a--default": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -450,7 +450,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
Object {
"component-b--default": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -468,7 +468,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component B",
},
],
},
"v": 2,
}
`);
@ -485,8 +485,8 @@ describe('start', () => {
"kindParameters": Object {
"Component A": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-a--default": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -504,7 +504,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
],
},
"v": 2,
}
`);
@ -536,8 +536,8 @@ describe('start', () => {
"kindParameters": Object {
"Component C": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-c--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -555,7 +555,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
Object {
"component-c--story-two": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -573,7 +573,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
],
},
"v": 2,
}
`);
@ -668,8 +668,8 @@ describe('start', () => {
"kindParameters": Object {
"Component C": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-c--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -687,25 +687,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
"componentId": "component-c",
"id": "component-c--story-two",
"initialArgs": Object {},
"kind": "Component C",
"name": "Story Two",
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
},
"story": "Story Two",
"subcomponents": undefined,
"title": "Component C",
},
Object {
"component-c--story-three": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -723,7 +705,25 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
],
"component-c--story-two": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
"componentId": "component-c",
"id": "component-c--story-two",
"initialArgs": Object {},
"kind": "Component C",
"name": "Story Two",
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
},
"story": "Story Two",
"subcomponents": undefined,
"title": "Component C",
},
},
"v": 2,
}
`);
@ -761,8 +761,8 @@ describe('start', () => {
"Component C": Object {},
"Component D": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-c--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -780,7 +780,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
Object {
"component-c--story-two": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -798,7 +798,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
Object {
"component-d--story-four": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -816,7 +816,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component D",
},
],
},
"v": 2,
}
`);
@ -835,8 +835,8 @@ describe('start', () => {
"kindParameters": Object {
"Component C": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-c--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -854,7 +854,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
Object {
"component-c--story-two": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -872,7 +872,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
],
},
"v": 2,
}
`);
@ -909,8 +909,8 @@ describe('start', () => {
"Component B": Object {},
"Component C": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-a--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -928,7 +928,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
Object {
"component-a--story-two": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -946,7 +946,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component A",
},
Object {
"component-b--story-three": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -964,7 +964,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component B",
},
Object {
"component-c--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -982,7 +982,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
Object {
"component-c--story-two": Object {
"argTypes": Object {},
"args": Object {},
"component": undefined,
@ -1000,7 +1000,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "Component C",
},
],
},
"v": 2,
}
`);
@ -1148,8 +1148,8 @@ describe('start', () => {
"kindParameters": Object {
"auto-title": Object {},
},
"stories": Array [
Object {
"stories": Object {
"auto-title--story-one": Object {
"argTypes": Object {},
"args": Object {},
"component": "Component D",
@ -1167,7 +1167,7 @@ describe('start', () => {
"subcomponents": undefined,
"title": "auto-title",
},
],
},
"v": 2,
}
`);

209
lib/store/src/StoryStore.test.ts
View File

@ -1,4 +1,3 @@
import { StoryId } from '@storybook/api';
import { AnyFramework, ProjectAnnotations } from '@storybook/csf';
import { HooksContext } from '../../addons/dist/ts3.9/hooks';
@ -46,16 +45,19 @@ const storyIndex: StoryIndex = {
v: 3,
stories: {
'component-one--a': {
id: 'component-one--a',
title: 'Component One',
name: 'A',
importPath: './src/ComponentOne.stories.js',
},
'component-one--b': {
id: 'component-one--b',
title: 'Component One',
name: 'B',
importPath: './src/ComponentOne.stories.js',
},
'component-two--c': {
id: 'component-two--c',
title: 'Component Two',
name: 'C',
importPath: './src/ComponentTwo.stories.js',
@ -203,6 +205,7 @@ describe('StoryStore', () => {
stories: {
...storyIndex.stories,
'new-component--story': {
id: 'new-component--story',
title: 'New Component',
name: 'Story',
importPath: './new-component.stories.js',
@ -232,6 +235,7 @@ describe('StoryStore', () => {
v: 3,
stories: {
'component-one--a': {
id: 'component-one--a',
title: 'Component One',
name: 'A',
importPath: newImportPath,
@ -260,6 +264,7 @@ describe('StoryStore', () => {
v: 3,
stories: {
'component-one--a': {
id: 'component-one--a',
title: 'Component One',
name: 'A',
importPath: newImportPath,
@ -269,8 +274,8 @@ describe('StoryStore', () => {
});
expect(store.extract()).toMatchInlineSnapshot(`
Array [
Object {
Object {
"component-one--a": Object {
"argTypes": Object {
"a": Object {
"name": "a",
@ -303,7 +308,7 @@ describe('StoryStore', () => {
"subcomponents": undefined,
"title": "Component One",
},
]
}
`);
});
});
@ -407,8 +412,8 @@ describe('StoryStore', () => {
await store.cacheAllCSFFiles(false);
expect(store.extract()).toMatchInlineSnapshot(`
Array [
Object {
Object {
"component-one--a": Object {
"argTypes": Object {
"a": Object {
"name": "a",
@ -441,7 +446,7 @@ describe('StoryStore', () => {
"subcomponents": undefined,
"title": "Component One",
},
Object {
"component-one--b": Object {
"argTypes": Object {
"a": Object {
"name": "a",
@ -474,7 +479,7 @@ describe('StoryStore', () => {
"subcomponents": undefined,
"title": "Component One",
},
Object {
"component-two--c": Object {
"argTypes": Object {
"a": Object {
"name": "a",
@ -507,7 +512,7 @@ describe('StoryStore', () => {
"subcomponents": undefined,
"title": "Component Two",
},
]
}
`);
});
@ -529,14 +534,134 @@ describe('StoryStore', () => {
});
await store.cacheAllCSFFiles(false);
expect((store.extract() as { id: StoryId }[]).map((s) => s.id)).toEqual([
expect(Object.keys(store.extract())).toEqual(['component-one--b', 'component-two--c']);
expect(Object.keys(store.extract({ includeDocsOnly: true }))).toEqual([
'component-one--a',
'component-one--b',
'component-two--c',
]);
});
});
expect(
(store.extract({ includeDocsOnly: true }) as { id: StoryId }[]).map((s) => s.id)
).toEqual(['component-one--a', 'component-one--b', 'component-two--c']);
describe('raw', () => {
it('produces an array of stories', async () => {
const store = new StoryStore();
store.initialize({ getStoryIndex, importFn, projectAnnotations, cache: false });
await store.cacheAllCSFFiles(false);
expect(store.raw()).toMatchInlineSnapshot(`
Array [
Object {
"applyLoaders": [Function],
"argTypes": Object {
"a": Object {
"name": "a",
"type": Object {
"name": "string",
},
},
"foo": Object {
"name": "foo",
"type": Object {
"name": "string",
},
},
},
"component": undefined,
"componentId": "component-one",
"id": "component-one--a",
"initialArgs": Object {
"foo": "a",
},
"kind": "Component One",
"name": "A",
"originalStoryFn": [MockFunction],
"parameters": Object {
"__isArgsStory": false,
},
"runPlayFunction": [Function],
"story": "A",
"storyFn": [Function],
"subcomponents": undefined,
"title": "Component One",
"unboundStoryFn": [Function],
"undecoratedStoryFn": [Function],
},
Object {
"applyLoaders": [Function],
"argTypes": Object {
"a": Object {
"name": "a",
"type": Object {
"name": "string",
},
},
"foo": Object {
"name": "foo",
"type": Object {
"name": "string",
},
},
},
"component": undefined,
"componentId": "component-one",
"id": "component-one--b",
"initialArgs": Object {
"foo": "b",
},
"kind": "Component One",
"name": "B",
"originalStoryFn": [MockFunction],
"parameters": Object {
"__isArgsStory": false,
},
"runPlayFunction": [Function],
"story": "B",
"storyFn": [Function],
"subcomponents": undefined,
"title": "Component One",
"unboundStoryFn": [Function],
"undecoratedStoryFn": [Function],
},
Object {
"applyLoaders": [Function],
"argTypes": Object {
"a": Object {
"name": "a",
"type": Object {
"name": "string",
},
},
"foo": Object {
"name": "foo",
"type": Object {
"name": "string",
},
},
},
"component": undefined,
"componentId": "component-two",
"id": "component-two--c",
"initialArgs": Object {
"foo": "c",
},
"kind": "Component Two",
"name": "C",
"originalStoryFn": [MockFunction],
"parameters": Object {
"__isArgsStory": false,
},
"runPlayFunction": [Function],
"story": "C",
"storyFn": [Function],
"subcomponents": undefined,
"title": "Component Two",
"unboundStoryFn": [Function],
"undecoratedStoryFn": [Function],
},
]
`);
});
});
@ -556,8 +681,8 @@ describe('StoryStore', () => {
"Component One": Object {},
"Component Two": Object {},
},
"stories": Array [
Object {
"stories": Object {
"component-one--a": Object {
"argTypes": Object {
"a": Object {
"name": "a",
@ -590,7 +715,7 @@ describe('StoryStore', () => {
"subcomponents": undefined,
"title": "Component One",
},
Object {
"component-one--b": Object {
"argTypes": Object {
"a": Object {
"name": "a",
@ -623,7 +748,7 @@ describe('StoryStore', () => {
"subcomponents": undefined,
"title": "Component One",
},
Object {
"component-two--c": Object {
"argTypes": Object {
"a": Object {
"name": "a",
@ -656,7 +781,55 @@ describe('StoryStore', () => {
"subcomponents": undefined,
"title": "Component Two",
},
],
},
"v": 2,
}
`);
});
});
describe('getStoriesJsonData', () => {
it('maps stories list to payload correctly', async () => {
const store = new StoryStore();
store.initialize({ getStoryIndex, importFn, projectAnnotations, cache: false });
await store.cacheAllCSFFiles(false);
expect(store.getStoriesJsonData()).toMatchInlineSnapshot(`
Object {
"globalParameters": Object {},
"kindParameters": Object {
"Component One": Object {},
"Component Two": Object {},
},
"stories": Object {
"component-one--a": Object {
"id": "component-one--a",
"kind": "Component One",
"name": "A",
"parameters": Object {
"__isArgsStory": false,
},
"story": "A",
},
"component-one--b": Object {
"id": "component-one--b",
"kind": "Component One",
"name": "B",
"parameters": Object {
"__isArgsStory": false,
},
"story": "B",
},
"component-two--c": Object {
"id": "component-two--c",
"kind": "Component Two",
"name": "C",
"parameters": Object {
"__isArgsStory": false,
},
"story": "C",
},
},
"v": 2,
}
`);

51
lib/store/src/StoryStore.ts
View File

@ -284,38 +284,37 @@ export class StoryStore<TFramework extends AnyFramework> {
throw new Error('Cannot call extract() unless you call cacheAllCSFFiles() first.');
}
return Object.entries(this.storyIndex.stories)
.map(([storyId, { importPath }]) => {
const csfFile = this.cachedCSFFiles[importPath];
const story = this.storyFromCSFFile({ storyId, csfFile });
return Object.entries(this.storyIndex.stories).reduce((acc, [storyId, { importPath }]) => {
const csfFile = this.cachedCSFFiles[importPath];
const story = this.storyFromCSFFile({ storyId, csfFile });
if (!options.includeDocsOnly && story.parameters.docsOnly) {
return false;
}
if (!options.includeDocsOnly && story.parameters.docsOnly) {
return acc;
}
return Object.entries(story).reduce(
(acc, [key, value]) => {
if (typeof value === 'function') {
return acc;
}
if (['hooks'].includes(key)) {
return acc;
}
if (Array.isArray(value)) {
return Object.assign(acc, { [key]: value.slice().sort() });
}
return Object.assign(acc, { [key]: value });
},
{ args: story.initialArgs }
);
})
.filter(Boolean);
acc[storyId] = Object.entries(story).reduce(
(storyAcc, [key, value]) => {
if (typeof value === 'function') {
return storyAcc;
}
if (['hooks'].includes(key)) {
return storyAcc;
}
if (Array.isArray(value)) {
return Object.assign(storyAcc, { [key]: value.slice().sort() });
}
return Object.assign(storyAcc, { [key]: value });
},
{ args: story.initialArgs }
);
return acc;
}, {} as Record<string, any>);
}
getSetStoriesPayload() {
const stories = this.extract({ includeDocsOnly: true });
const kindParameters: Parameters = stories.reduce(
const kindParameters: Parameters = Object.values(stories).reduce(
(acc: Parameters, { title }: { title: ComponentTitle }) => {
acc[title] = {};
return acc;
@ -348,7 +347,7 @@ export class StoryStore<TFramework extends AnyFramework> {
};
raw(): BoundStory<TFramework>[] {
return this.extract().map(({ id }: { id: StoryId }) => this.fromId(id));
return Object.values(this.extract()).map(({ id }: { id: StoryId }) => this.fromId(id));
}
fromId(storyId: StoryId): BoundStory<TFramework> {