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

Merge branch '16052-index-server-story-sort' into 16047-add-hmr-to-story-index

Browse Source
This commit is contained in:
Michael Shilman 2021-09-20 19:41:12 +08:00
commit a384035d78
4 changed files with 237 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/csf-tools/package.json
View File

@ -55,12 +55,12 @@
"js-string-escape": "^1.0.1",
"lodash": "^4.17.20",
"prettier": "^2.2.1",
"regenerator-runtime": "^0.13.7"
"regenerator-runtime": "^0.13.7",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@types/fs-extra": "^9.0.6",
"js-yaml": "^3.14.1",
"ts-dedent": "^2.0.0"
"js-yaml": "^3.14.1"
},
"publishConfig": {
"access": "public"

318
lib/csf-tools/src/getStorySortParameter.test.ts
View File

@ -2,155 +2,215 @@ import dedent from 'ts-dedent';
import { getStorySortParameter } from './getStorySortParameter';
describe('getStorySortParameter', () => {
it('no parameters', () => {
expect(
getStorySortParameter(dedent`
export const decorators = [];
`)
).toBeUndefined();
});
describe('supported', () => {
it('no parameters', () => {
expect(
getStorySortParameter(dedent`
export const decorators = [];
`)
).toBeUndefined();
});
it('invalid parameters', () => {
expect(
getStorySortParameter(dedent`
export const parameters = [];
`)
).toBeUndefined();
});
it('no storySort parameter', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
layout: 'fullscreen',
};
`)
).toBeUndefined();
});
it('no storySort parameter', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
layout: 'fullscreen',
};
`)
).toBeUndefined();
});
it('with wildcards', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: [
"Intro",
"Pages",
["Home", "Login", "Admin"],
"Components",
"*",
"WIP",
]
}
};
`)
).toMatchInlineSnapshot(`
Array [
"Intro",
"Pages",
it('with wildcards', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: [
"Intro",
"Pages",
["Home", "Login", "Admin"],
"Components",
"*",
"WIP",
]
}
};
`)
).toMatchInlineSnapshot(`
Array [
"Home",
"Login",
"Admin",
],
"Components",
"*",
"WIP",
]
`);
});
"Intro",
"Pages",
Array [
"Home",
"Login",
"Admin",
],
"Components",
"*",
"WIP",
]
`);
});
it('arrow function', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: (a, b) =>
a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
},
};
`)
).toMatchInlineSnapshot(`[Function]`);
});
it('function', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: function sortStories(a, b) {
return a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
it('arrow function', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: (a, b) =>
a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
},
},
};
`)
).toMatchInlineSnapshot(`[Function]`);
};
`)
).toMatchInlineSnapshot(`[Function]`);
});
it('function', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: function sortStories(a, b) {
return a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
},
},
};
`)
).toMatchInlineSnapshot(`[Function]`);
});
it('empty sort', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
},
},
};
`)
).toMatchInlineSnapshot(`
Object {
"locales": "",
"method": "",
"order": Array [],
}
`);
});
it('parameters typescript', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
},
},
} as Parameters;
`)
).toMatchInlineSnapshot(`
Object {
"locales": "",
"method": "",
"order": Array [],
}
`);
});
});
it('empty sort', () => {
expect(
getStorySortParameter(dedent`
describe('unsupported', () => {
it('invalid parameters', () => {
expect(() =>
getStorySortParameter(dedent`
export const parameters = [];
`)
).toThrowErrorMatchingInlineSnapshot(`
"Unexpected 'parameters'. Parameter 'options.storySort' should be defined inline e.g.:
export const parameters = {
options: {
storySort: <array | object | function>
}
}"
`);
});
it('parameters var', () => {
expect(
getStorySortParameter(dedent`
const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
},
},
};
export { parameters };
`)
).toBeUndefined();
});
it('options var', () => {
expect(() =>
getStorySortParameter(dedent`
const options = {
storySort: {
method: "",
order: [],
locales: "",
},
},
};
};
export const parameters = {
options,
};
`)
).toMatchInlineSnapshot(`
Object {
"locales": "",
"method": "",
"order": Array [],
}
`);
});
).toThrowErrorMatchingInlineSnapshot(`
"Unexpected 'options'. Parameter 'options.storySort' should be defined inline e.g.:
it('parameters typescript', () => {
expect(
getStorySortParameter(dedent`
export const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
},
},
} as Parameters;
`)
).toMatchInlineSnapshot(`
Object {
"locales": "",
"method": "",
"order": Array [],
}
`);
});
storySort: <array | object | function>
}
}"
`);
});
// unsupported
// eslint-disable-next-line jest/no-disabled-tests
it.skip('parameters var', () => {
expect(
getStorySortParameter(dedent`
const parameters = {
options: {
storySort: {
method: "",
order: [],
locales: "",
it('storySort var', () => {
expect(() =>
getStorySortParameter(dedent`
const storySort = {
method: "",
order: [],
locales: "",
};
export const parameters = {
options: {
storySort,
},
},
};
export { parameters };
};
`)
).toMatchInlineSnapshot(`undefined`);
).toThrowErrorMatchingInlineSnapshot(`
"Unexpected 'storySort'. Parameter 'options.storySort' should be defined inline e.g.:
export const parameters = {
options: {
storySort: <array | object | function>
}
}"
`);
});
});
});

42
lib/csf-tools/src/getStorySortParameter.ts
View File

@ -1,8 +1,11 @@
import * as t from '@babel/types';
import traverse from '@babel/traverse';
import generate from '@babel/generator';
import dedent from 'ts-dedent';
import { babelParse } from './babelParse';
const logger = console;
const getValue = (obj: t.ObjectExpression, key: string) => {
let value: t.Expression;
obj.properties.forEach((p: t.ObjectProperty) => {
@ -34,6 +37,23 @@ const parseValue = (expr: t.Expression): any => {
throw new Error(`Unknown node type ${expr}`);
};
const unsupported = (unexpectedVar: string, isError: boolean) => {
const message = dedent`
Unexpected '${unexpectedVar}'. Parameter 'options.storySort' should be defined inline e.g.:
export const parameters = {
options: {
storySort: <array | object | function>
}
}
`;
if (isError) {
throw new Error(message);
} else {
logger.info(message);
}
};
export const getStorySortParameter = (previewCode: string) => {
let storySort: t.Expression;
const ast = babelParse(previewCode);
@ -50,13 +70,25 @@ export const getStorySortParameter = (previewCode: string) => {
: decl.init;
if (t.isObjectExpression(paramsObject)) {
const options = getValue(paramsObject, 'options');
if (options && t.isObjectExpression(options)) {
storySort = getValue(options, 'storySort');
if (options) {
if (t.isObjectExpression(options)) {
storySort = getValue(options, 'storySort');
} else {
unsupported('options', true);
}
}
} else {
unsupported('parameters', true);
}
}
}
});
} else {
node.specifiers.forEach((spec) => {
if (t.isIdentifier(spec.exported) && spec.exported.name === 'parameters') {
unsupported('parameters', false);
}
});
}
},
},
@ -82,5 +114,9 @@ export const getStorySortParameter = (previewCode: string) => {
return eval(wrapper);
}
return parseValue(storySort);
if (t.isLiteral(storySort) || t.isArrayExpression(storySort) || t.isObjectExpression(storySort)) {
return parseValue(storySort);
}
return unsupported('storySort', true);
};

12
lib/store/src/storySort.ts
View File

@ -9,7 +9,7 @@ export const storySort = (options: StorySortObjectParameter = {}): StorySortComp
// If the two stories have the same story kind, then use the default
// ordering, which is the order they are defined in the story file.
// only when includeNames is falsy
if (a[1].kind === b[1].kind && !options.includeNames) {
if (a[1].title === b[1].title && !options.includeNames) {
return 0;
}
@ -17,9 +17,9 @@ export const storySort = (options: StorySortObjectParameter = {}): StorySortComp
const method = options.method || 'configure';
let order = options.order || [];
// Examine each part of the story kind in turn.
const storyKindA = a[1].kind.trim().split(STORY_KIND_PATH_SEPARATOR);
const storyKindB = b[1].kind.trim().split(STORY_KIND_PATH_SEPARATOR);
// Examine each part of the story title in turn.
const storyKindA = a[1].title.trim().split(STORY_KIND_PATH_SEPARATOR);
const storyKindB = b[1].title.trim().split(STORY_KIND_PATH_SEPARATOR);
if (options.includeNames) {
storyKindA.push(a[1].name);
storyKindB.push(b[1].name);
@ -35,7 +35,7 @@ export const storySort = (options: StorySortObjectParameter = {}): StorySortComp
return 1;
}
// Compare the next part of the story kind.
// Compare the next part of the story title.
const nameA = storyKindA[depth];
const nameB = storyKindB[depth];
if (nameA !== nameB) {
@ -86,7 +86,7 @@ export const storySort = (options: StorySortObjectParameter = {}): StorySortComp
depth += 1;
}
// Identical story kinds. The shortcut at the start of this function prevents
// Identical story titles. The shortcut at the start of this function prevents
// this from ever being used.
/* istanbul ignore next */
return 0;