Skip to content

Commit

Permalink
Add type annotation to StoriesHash
Browse files Browse the repository at this point in the history 
For forwards compatibility with changes coming in 7.0, see: #18023
  • Loading branch information
@tmeasday
tmeasday committed May 2, 2022
1 parent 18cde0f commit e9e4886
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 1 deletion.
11 changes: 10 additions & 1 deletion lib/api/src/lib/stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const { FEATURES } = global;
export type { StoryId };

export interface Root {
type: 'root';
id: StoryId;
depth: 0;
name: string;
Expand All @@ -39,6 +40,7 @@ export interface Root {
}

export interface Group {
type: 'group' | 'component';
id: StoryId;
depth: number;
name: string;
Expand All @@ -57,6 +59,7 @@ export interface Group {
}

export interface Story {
type: 'story' | 'docs';
id: StoryId;
depth: number;
parent: StoryId;
Expand Down Expand Up @@ -234,6 +237,7 @@ export const transformStoriesRawToStoriesHash = (

if (root.length && index === 0) {
list.push({
type: 'root',
id,
name,
depth: index,
Expand All @@ -246,6 +250,7 @@ export const transformStoriesRawToStoriesHash = (
});
} else {
list.push({
type: 'group',
id,
name,
parent,
Expand Down Expand Up @@ -278,6 +283,7 @@ export const transformStoriesRawToStoriesHash = (
});

acc[item.id] = {
type: item.parameters?.docsOnly ? 'docs' : 'story',
...item,
depth: rootAndGroups.length,
parent: rootAndGroups[rootAndGroups.length - 1].id,
Expand All @@ -298,7 +304,10 @@ export const transformStoriesRawToStoriesHash = (
const { children } = item;
if (children) {
const childNodes = children.map((id) => storiesHashOutOfOrder[id]) as (Story | Group)[];
acc[item.id].isComponent = childNodes.every((childNode) => childNode.isLeaf);
if (childNodes.every((childNode) => childNode.isLeaf)) {
acc[item.id].isComponent = true;
acc[item.id].type = 'component';
}
childNodes.forEach((childNode) => addItem(acc, childNode));
}
}
Expand Down
28 changes: 28 additions & 0 deletions lib/api/src/tests/stories.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,13 +167,15 @@ 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',
kind: 'a',
Expand All @@ -184,6 +186,7 @@ describe('stories API', () => {
});

expect(storedStoriesHash['a--2']).toMatchObject({
type: 'story',
id: 'a--2',
parent: 'a',
kind: 'a',
Expand All @@ -194,13 +197,15 @@ 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'],
Expand All @@ -209,6 +214,7 @@ describe('stories API', () => {
});

expect(storedStoriesHash['b-c--1']).toMatchObject({
type: 'story',
id: 'b-c--1',
parent: 'b-c',
kind: 'b/c',
Expand All @@ -219,6 +225,7 @@ describe('stories API', () => {
});

expect(storedStoriesHash['b-d']).toMatchObject({
type: 'component',
id: 'b-d',
parent: 'b',
children: ['b-d--1', 'b-d--2'],
Expand All @@ -227,6 +234,7 @@ describe('stories API', () => {
});

expect(storedStoriesHash['b-d--1']).toMatchObject({
type: 'story',
id: 'b-d--1',
parent: 'b-d',
kind: 'b/d',
Expand All @@ -237,6 +245,7 @@ describe('stories API', () => {
});

expect(storedStoriesHash['b-d--2']).toMatchObject({
type: 'story',
id: 'b-d--2',
parent: 'b-d',
kind: 'b/d',
Expand All @@ -247,6 +256,7 @@ describe('stories API', () => {
});

expect(storedStoriesHash['b-e']).toMatchObject({
type: 'component',
id: 'b-e',
parent: 'b',
children: ['custom-id--1'],
Expand All @@ -255,6 +265,7 @@ describe('stories API', () => {
});

expect(storedStoriesHash['custom-id--1']).toMatchObject({
type: 'story',
id: 'custom-id--1',
parent: 'b-e',
kind: 'b/e',
Expand Down Expand Up @@ -293,14 +304,17 @@ describe('stories API', () => {
'design-system-some-component--my-story',
]);
expect(storedStoriesHash['design-system']).toMatchObject({
type: 'root',
isRoot: true,
name: 'Design System', // root name originates from `kind`, so it gets trimmed
});
expect(storedStoriesHash['design-system-some-component']).toMatchObject({
type: 'component',
isComponent: true,
name: 'Some Component', // component name originates from `kind`, so it gets trimmed
});
expect(storedStoriesHash['design-system-some-component--my-story']).toMatchObject({
type: 'story',
isLeaf: true,
kind: ' Design System / Some Component ', // kind 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
Expand Down Expand Up @@ -332,19 +346,22 @@ 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',
kind: 'a/b',
Expand Down Expand Up @@ -379,12 +396,14 @@ 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',
kind: 'a',
Expand Down Expand Up @@ -415,13 +434,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,
Expand Down Expand Up @@ -989,13 +1010,15 @@ 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',
kind: 'Component A',
Expand Down Expand Up @@ -1040,21 +1063,25 @@ describe('stories API', () => {
it('infers docs only if there is only one story and it has the name "Page"', async () => {
mockStories.mockReset().mockReturnValue({
'component-a--page': {
type: 'story',
title: 'Component A',
name: 'Page', // Called "Page" but not only story
importPath: './path/to/component-a.ts',
},
'component-a--story-2': {
type: 'story',
title: 'Component A',
name: 'Story 2',
importPath: './path/to/component-a.ts',
},
'component-b--page': {
type: 'docs',
title: 'Component B',
name: 'Page', // Page and only story
importPath: './path/to/component-b.ts',
},
'component-c--story-4': {
type: 'story',
title: 'Component c',
name: 'Story 4', // Only story but not page
importPath: './path/to/component-c.ts',
Expand Down Expand Up @@ -1112,6 +1139,7 @@ describe('stories API', () => {

const { storiesHash: storedStoriesHash } = store.getState();
expect(storedStoriesHash['component-a--story-1']).toMatchObject({
type: 'story',
id: 'component-a--story-1',
parent: 'component-a',
kind: 'Component A',
Expand Down
14 changes: 14 additions & 0 deletions lib/ui/src/components/sidebar/__tests__/data.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ type Item = StoriesHash[keyof StoriesHash];

const docsOnly = { parameters: { docsOnly: true } };
const root: Item = {
type: 'root',
id: 'root',
name: 'root',
depth: 0,
Expand All @@ -14,6 +15,7 @@ const root: Item = {
isLeaf: false,
};
const a: Item = {
type: 'component',
id: 'a',
name: 'a',
depth: 1,
Expand All @@ -24,6 +26,7 @@ const a: Item = {
children: ['a1'],
};
const a1: Item = {
type: 'story',
id: 'a1',
name: 'a1',
kind: 'a',
Expand All @@ -35,6 +38,7 @@ const a1: Item = {
args: {},
};
const b: Item = {
type: 'component',
id: 'b',
name: 'b',
depth: 1,
Expand All @@ -45,6 +49,7 @@ const b: Item = {
children: ['b1', 'b2'],
};
const b1: Item = {
type: 'story',
id: 'b1',
name: 'b1',
kind: 'b',
Expand All @@ -56,6 +61,7 @@ const b1: Item = {
args: {},
};
const b2: Item = {
type: 'story',
id: 'b2',
name: 'b2',
kind: 'b',
Expand Down Expand Up @@ -97,6 +103,7 @@ describe('collapse all stories', () => {

const expected: StoriesHash = {
a1: {
type: 'component',
id: 'a1',
depth: 1,
name: 'a',
Expand All @@ -109,6 +116,7 @@ describe('collapse all stories', () => {
args: {},
},
b1: {
type: 'component',
id: 'b1',
depth: 1,
name: 'b',
Expand All @@ -121,6 +129,7 @@ describe('collapse all stories', () => {
args: {},
},
root: {
type: 'root',
id: 'root',
name: 'root',
depth: 0,
Expand All @@ -143,6 +152,7 @@ describe('collapse all stories', () => {
const collapsed = collapseAllStories(hasDocsOnly);

expect(collapsed.a1).toEqual({
type: 'component',
id: 'a1',
name: 'a',
kind: 'a',
Expand All @@ -158,6 +168,7 @@ describe('collapse all stories', () => {

it('collapses mixtures of leaf and non-leaf children', () => {
const mixedRoot: Item = {
type: 'root',
id: 'root',
name: 'root',
depth: 0,
Expand All @@ -177,6 +188,7 @@ describe('collapse all stories', () => {

expect(collapsed).toEqual({
a1: {
type: 'component',
id: 'a1',
depth: 1,
name: 'a',
Expand All @@ -189,6 +201,7 @@ describe('collapse all stories', () => {
args: {},
},
b1: {
type: 'story',
id: 'b1',
name: 'b1',
kind: 'b',
Expand All @@ -200,6 +213,7 @@ describe('collapse all stories', () => {
args: {},
},
root: {
type: 'root',
id: 'root',
name: 'root',
depth: 0,
Expand Down

0 comments on commit e9e4886

Please sign in to comment.