Skip to content

Commit

Permalink
Merge pull request #25973 from storybookjs/jeppe/remove-more-stories-mdx
Browse files Browse the repository at this point in the history 
Core: Remove more `.stories.mdx` handling
  • Loading branch information
@shilman
shilman authored Jun 10, 2024
2 parents 8e3e06b + c388109 commit 1af1f3c
Show file tree
Hide file tree
Showing 13 changed files with 113 additions and 259 deletions.
124 changes: 62 additions & 62 deletions code/lib/core-common/src/utils/__tests__/normalize-stories.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,172 +42,172 @@ const options = {

describe('normalizeStoriesEntry', () => {
it('direct file path', () => {
const specifier = normalizeStoriesEntry('../path/to/file.stories.mdx', options);
const specifier = normalizeStoriesEntry('../path/to/file.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": "./path/to",
"files": "file.stories.mdx",
"files": "file.stories.jsx",
"importPathMatcher": {}
}
`);

expect(specifier.importPathMatcher).toMatchPaths(['./path/to/file.stories.mdx']);
expect(specifier.importPathMatcher).toMatchPaths(['./path/to/file.stories.jsx']);
expect(specifier.importPathMatcher).not.toMatchPaths([
'./path/to/file.stories.js',
'./file.stories.mdx',
'../file.stories.mdx',
'./file.stories.jsx',
'../file.stories.jsx',
]);
});

it('story in config dir', () => {
const specifier = normalizeStoriesEntry('./file.stories.mdx', options);
const specifier = normalizeStoriesEntry('./file.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": "./.storybook",
"files": "file.stories.mdx",
"files": "file.stories.jsx",
"importPathMatcher": {}
}
`);

expect(specifier.importPathMatcher).toMatchPaths(['./.storybook/file.stories.mdx']);
expect(specifier.importPathMatcher).toMatchPaths(['./.storybook/file.stories.jsx']);
expect(specifier.importPathMatcher).not.toMatchPaths([
'.storybook/file.stories.mdx',
'./file.stories.mdx',
'../file.stories.mdx',
'.storybook/file.stories.jsx',
'./file.stories.jsx',
'../file.stories.jsx',
]);
});

it('non-recursive files glob', () => {
const specifier = normalizeStoriesEntry('../*/*.stories.mdx', options);
const specifier = normalizeStoriesEntry('../*/*.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": ".",
"files": "*/*.stories.mdx",
"files": "*/*.stories.jsx",
"importPathMatcher": {}
}
`);

expect(specifier.importPathMatcher).toMatchPaths([
'./path/file.stories.mdx',
'./second-path/file.stories.mdx',
'./path/file.stories.jsx',
'./second-path/file.stories.jsx',
]);
expect(specifier.importPathMatcher).not.toMatchPaths([
'./path/file.stories.js',
'./path/to/file.stories.mdx',
'./file.stories.mdx',
'../file.stories.mdx',
'./path/to/file.stories.jsx',
'./file.stories.jsx',
'../file.stories.jsx',
]);
});

it('double non-recursive directory/files glob', () => {
const specifier = normalizeStoriesEntry('../*/*/*.stories.mdx', options);
const specifier = normalizeStoriesEntry('../*/*/*.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": ".",
"files": "*/*/*.stories.mdx",
"files": "*/*/*.stories.jsx",
"importPathMatcher": {}
}
`);

expect(specifier.importPathMatcher).toMatchPaths([
'./path/to/file.stories.mdx',
'./second-path/to/file.stories.mdx',
'./path/to/file.stories.jsx',
'./second-path/to/file.stories.jsx',
]);
expect(specifier.importPathMatcher).not.toMatchPaths([
'./file.stories.mdx',
'./path/file.stories.mdx',
'./path/to/third/file.stories.mdx',
'./file.stories.jsx',
'./path/file.stories.jsx',
'./path/to/third/file.stories.jsx',
'./path/to/file.stories.js',
'../file.stories.mdx',
'../file.stories.jsx',
]);
});

it('directory/files glob', () => {
const specifier = normalizeStoriesEntry('../**/*.stories.mdx', options);
const specifier = normalizeStoriesEntry('../**/*.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": ".",
"files": "**/*.stories.mdx",
"files": "**/*.stories.jsx",
"importPathMatcher": {}
}
`);
expect(specifier.importPathMatcher).toMatchPaths([
'./file.stories.mdx',
'./path/file.stories.mdx',
'./path/to/file.stories.mdx',
'./path/to/third/file.stories.mdx',
'./file.stories.jsx',
'./path/file.stories.jsx',
'./path/to/file.stories.jsx',
'./path/to/third/file.stories.jsx',
]);
expect(specifier.importPathMatcher).not.toMatchPaths([
'./file.stories.js',
'../file.stories.mdx',
'../file.stories.jsx',
]);
});

it('double stars glob', () => {
const specifier = normalizeStoriesEntry('../**/foo/**/*.stories.mdx', options);
const specifier = normalizeStoriesEntry('../**/foo/**/*.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": ".",
"files": "**/foo/**/*.stories.mdx",
"files": "**/foo/**/*.stories.jsx",
"importPathMatcher": {}
}
`);

expect(specifier.importPathMatcher).toMatchPaths([
'./foo/file.stories.mdx',
'./path/to/foo/file.stories.mdx',
'./path/to/foo/third/fourth/file.stories.mdx',
'./foo/file.stories.jsx',
'./path/to/foo/file.stories.jsx',
'./path/to/foo/third/fourth/file.stories.jsx',
]);
expect(specifier.importPathMatcher).not.toMatchPaths([
'./file.stories.mdx',
'./file.stories.jsx',
'./file.stories.js',
'../file.stories.mdx',
'../file.stories.jsx',
]);
});

it('intermediate directory glob', () => {
const specifier = normalizeStoriesEntry('../**/foo/*.stories.mdx', options);
const specifier = normalizeStoriesEntry('../**/foo/*.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": ".",
"files": "**/foo/*.stories.mdx",
"files": "**/foo/*.stories.jsx",
"importPathMatcher": {}
}
`);

expect(specifier.importPathMatcher).toMatchPaths([
'./path/to/foo/file.stories.mdx',
'./foo/file.stories.mdx',
'./path/to/foo/file.stories.jsx',
'./foo/file.stories.jsx',
]);
expect(specifier.importPathMatcher).not.toMatchPaths([
'./file.stories.mdx',
'./file.stories.jsx',
'./file.stories.js',
'./path/to/foo/third/fourth/file.stories.mdx',
'../file.stories.mdx',
'./path/to/foo/third/fourth/file.stories.jsx',
'../file.stories.jsx',
]);
});

it('directory outside of working dir', () => {
const specifier = normalizeStoriesEntry('../../src/*.stories.mdx', options);
const specifier = normalizeStoriesEntry('../../src/*.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": "../src",
"files": "*.stories.mdx",
"files": "*.stories.jsx",
"importPathMatcher": {}
}
`);

expect(specifier.importPathMatcher).toMatchPaths(['../src/file.stories.mdx']);
expect(specifier.importPathMatcher).toMatchPaths(['../src/file.stories.jsx']);
expect(specifier.importPathMatcher).not.toMatchPaths([
'./src/file.stories.mdx',
'./src/file.stories.jsx',
'../src/file.stories.js',
]);
});
Expand Down Expand Up @@ -237,11 +237,11 @@ describe('normalizeStoriesEntry', () => {
});

it('directory/files specifier', () => {
const specifier = normalizeStoriesEntry({ directory: '..', files: '*.stories.mdx' }, options);
const specifier = normalizeStoriesEntry({ directory: '..', files: '*.stories.jsx' }, options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"files": "*.stories.mdx",
"files": "*.stories.jsx",
"directory": ".",
"importPathMatcher": {}
}
Expand All @@ -262,39 +262,39 @@ describe('normalizeStoriesEntry', () => {

it('directory/titlePrefix/files specifier', () => {
const specifier = normalizeStoriesEntry(
{ directory: '..', titlePrefix: 'atoms', files: '*.stories.mdx' },
{ directory: '..', titlePrefix: 'atoms', files: '*.stories.jsx' },
options
);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "atoms",
"files": "*.stories.mdx",
"files": "*.stories.jsx",
"directory": ".",
"importPathMatcher": {}
}
`);
});

it('globs with negation', () => {
const specifier = normalizeStoriesEntry('../!(negation)/*.stories.mdx', options);
const specifier = normalizeStoriesEntry('../!(negation)/*.stories.jsx', options);
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"directory": ".",
"files": "!(negation)/*.stories.mdx",
"files": "!(negation)/*.stories.jsx",
"importPathMatcher": {}
}
`);

expect(specifier.importPathMatcher).toMatchPaths([
'./path/file.stories.mdx',
'./second-path/file.stories.mdx',
'./path/file.stories.jsx',
'./second-path/file.stories.jsx',
]);
expect(specifier.importPathMatcher).not.toMatchPaths([
'./path/file.stories.js',
'./path/to/file.stories.mdx',
'./file.stories.mdx',
'../file.stories.mdx',
'./path/to/file.stories.jsx',
'./file.stories.jsx',
'../file.stories.jsx',
]);
});
});
Expand Down
21 changes: 7 additions & 14 deletions code/lib/core-server/src/utils/StoryIndexGenerator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,8 @@ export type StoryIndexGeneratorOptions = {
};

export const AUTODOCS_TAG = 'autodocs';
export const STORIES_MDX_TAG = 'stories-mdx';
export const UNATTACHED_MDX_TAG = 'unattached-mdx';
export const ATTACHED_MDX_TAG = 'attached-mdx';
export const UNATTACHED_MDX_TAG = 'unattached-mdx';
export const PLAY_FN_TAG = 'play-fn';

/** Was this docs entry generated by a .mdx file? (see discussion below) */
Expand Down Expand Up @@ -84,12 +83,11 @@ const makeAbsolute = (otherImport: Path, normalizedPath: Path, workingDir: Path)
*
* A stories file is indexed by an indexer (passed in), which produces a list of stories.
* - If the stories have the `parameters.docsOnly` setting, they are disregarded.
* - If the stories have the 'stories-mdx' tag (i.e. were generated by a .stories.mdx file),
* OR autodocs is enabled, a docs entry is added pointing to the story file.
* - If the stories have autodocs enabled, a docs entry is added pointing to the story file.
*
* A (modern) docs (.mdx) file is indexed, a docs entry is added.
*
* In the preview, a docs entry with either the `autodocs` or `stories-mdx` tags will be rendered
* In the preview, a docs entry with the `autodocs` tag will be rendered
* as a CSF file that exports an MDX template on the `docs.page` parameter, whereas
* other docs entries are rendered as MDX files directly.
*
Expand Down Expand Up @@ -366,11 +364,10 @@ export class StoryIndexGenerator {
});

// We need a docs entry attached to the CSF file if either:
// a) we have autodocs enabled for this file
// b) it is a stories.mdx transpiled to CSF
// a) autodocs is globally enabled
// b) we have autodocs enabled for this file
const hasAutodocsTag = entries.some((entry) => entry.tags.includes(AUTODOCS_TAG));
const isStoriesMdx = entries.some((entry) => entry.tags.includes(STORIES_MDX_TAG));
const createDocEntry = (hasAutodocsTag && this.options.docs.autodocs !== false) || isStoriesMdx;
const createDocEntry = hasAutodocsTag && this.options.docs.autodocs !== false;

if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) {
const name = this.options.docs.defaultName ?? 'Docs';
Expand All @@ -390,12 +387,8 @@ export class StoryIndexGenerator {
});
}

const entriesWithoutDocsOnlyStories = entries.filter(
(entry) => !(entry.type === 'story' && entry.tags.includes('stories-mdx-docsOnly'))
);

return {
entries: entriesWithoutDocsOnlyStories,
entries,
dependents: [],
type: 'stories',
};
Expand Down
4 changes: 2 additions & 2 deletions code/lib/core-server/src/utils/__tests__/autoName.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { it, expect } from 'vitest';
import { autoName } from '../autoName';

it('pulls name from named MDX files', () => {
expect(autoName('Conventions.mdx', 'Button.stories.mdx', 'Docs')).toEqual('Conventions');
expect(autoName('Conventions.mdx', 'Button.mdx', 'Docs')).toEqual('Conventions');
});

it('falls back for default named MDX files', () => {
expect(autoName('Button.mdx', 'Button.stories.mdx', 'Docs')).toEqual('Docs');
expect(autoName('Button.mdx', 'Button.stories.jsx', 'Docs')).toEqual('Docs');
});
Loading

0 comments on commit 1af1f3c

Please sign in to comment.