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

Merge pull request #17597 from storybookjs/17538-remove-feature-flag

Browse Source 
CSF3: Remove feature flag for auto-title file system capitalization
This commit is contained in:
Michael Shilman 2022-03-01 23:55:37 +08:00 committed by GitHub
commit 2a69f6e6f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 107 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
MIGRATION.md
View File

@ -219,7 +219,7 @@ SB 6.4 introduced experimental "auto-title", in which a story's location in the
We've made two improvements to Auto-title based on user feedback:
- Auto-title preserves filename case if you set a feature flag (opt-in)
- Auto-title preserves filename case
- Auto-title removes redundant filenames from the path
#### Auto-title filename case
@ -228,16 +228,10 @@ SB 6.4's implementation of auto-title ran `startCase` on each path component. Fo
We've changed this in SB 6.5 to preserve the filename case, so that instead it the same file would result in the title `atoms/MyButton`. The rationale is that this gives more control to users about what their auto-title will be.
Because this is a breaking change, it's currently behind a feature flag `autoTitleFilenameCase`. This behavior will become the default/only behavior in SB 7.0:
This might be considered a breaking change. However, we feel justified to release this in 6.5 because:
```js
// .storybook/main.js
module.exports = {
features: {
autoTitleFilenameCase: true,
},
};
```
1. We consider it a bug in the initial auto-title implementation
2. CSF3 and the auto-title feature are experimental, and we reserve the right to make breaking changes outside of semver (tho we try to avoid it)
#### Auto-title redundant filename

1
examples/react-ts/.storybook/main.ts
View File

@ -33,7 +33,6 @@ const config: StorybookConfig = {
babelModeV7: true,
warnOnLegacyHierarchySeparator: false,
previewMdx2: true,
autoTitleFilenameCase: true,
},
framework: '@storybook/react',
};

6
lib/core-common/src/types.ts
View File

@ -378,12 +378,6 @@ export interface StorybookConfig {
* Preview MDX2 support, will become default in 7.0
*/
previewMdx2?: boolean;
/**
* Use the natural file system casing for autoTitle, i.e. do not automatically convert to StartCase.
* Will become default in 7.0.
*/
autoTitleFilenameCase?: boolean;
};
/**

4
lib/core-server/src/utils/StoryIndexGenerator.test.ts
View File

@ -1,5 +1,4 @@
import path from 'path';
import global from 'global';
import { normalizeStoriesEntry, NormalizedStoriesSpecifier } from '@storybook/core-common';
import { readCsfOrMdx, getStorySortParameter } from '@storybook/csf-tools';
@ -19,9 +18,6 @@ const options = {
storyStoreV7: true,
};
global.FEATURES = global.FEATURES || {};
global.FEATURES.autoTitleFilenameCase = true;
describe('StoryIndexGenerator', () => {
beforeEach(() => {
const actual = jest.requireActual('@storybook/csf-tools');

12
lib/core-server/src/utils/stories-json.test.ts
View File

@ -101,7 +101,7 @@ describe('useStoriesJson', () => {
"first-nested-deeply-f--story-one": Object {
"id": "first-nested-deeply-f--story-one",
"importPath": "./src/first-nested/deeply/F.stories.js",
"kind": "First Nested/Deeply/F",
"kind": "first-nested/deeply/F",
"name": "Story One",
"parameters": Object {
"__id": "first-nested-deeply-f--story-one",
@ -109,12 +109,12 @@ describe('useStoriesJson', () => {
"fileName": "./src/first-nested/deeply/F.stories.js",
},
"story": "Story One",
"title": "First Nested/Deeply/F",
"title": "first-nested/deeply/F",
},
"nested-button--story-one": Object {
"id": "nested-button--story-one",
"importPath": "./src/nested/Button.stories.ts",
"kind": "Nested/Button",
"kind": "nested/Button",
"name": "Story One",
"parameters": Object {
"__id": "nested-button--story-one",
@ -122,12 +122,12 @@ describe('useStoriesJson', () => {
"fileName": "./src/nested/Button.stories.ts",
},
"story": "Story One",
"title": "Nested/Button",
"title": "nested/Button",
},
"second-nested-g--story-one": Object {
"id": "second-nested-g--story-one",
"importPath": "./src/second-nested/G.stories.ts",
"kind": "Second Nested/G",
"kind": "second-nested/G",
"name": "Story One",
"parameters": Object {
"__id": "second-nested-g--story-one",
@ -135,7 +135,7 @@ describe('useStoriesJson', () => {
"fileName": "./src/second-nested/G.stories.ts",
},
"story": "Story One",
"title": "Second Nested/G",
"title": "second-nested/G",
},
},
"v": 3,

224
lib/store/src/autoTitle.test.ts
View File

@ -1,4 +1,3 @@
import global from 'global';
import { normalizeStoriesEntry } from '@storybook/core-common';
import { autoTitleFromSpecifier as auto } from './autoTitle';
@ -18,145 +17,116 @@ const winOptions = {
workingDir: '\\path',
};
global.FEATURES = global.FEATURES || {};
describe('autoTitle', () => {
describe('filename case', () => {
beforeEach(() => {
global.FEATURES.autoTitleFilenameCase = true;
});
afterEach(() => {
global.FEATURES.autoTitleFilenameCase = false;
});
it('no match', () => {
expect(
auto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './other' }, options))
).toBeFalsy();
});
it('no match', () => {
describe('no trailing slash', () => {
it('match with no titlePrefix', () => {
expect(
auto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './other' }, options))
).toBeFalsy();
auto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path' }, options))
).toMatchInlineSnapshot(`to/file`);
});
describe('no trailing slash', () => {
it('match with no titlePrefix', () => {
expect(
auto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path' }, options))
).toMatchInlineSnapshot(`to/file`);
});
it('match with titlePrefix', () => {
expect(
auto(
'./path/to/file.stories.js',
normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options)
)
).toMatchInlineSnapshot(`atoms/to/file`);
});
it('match with trailing duplicate', () => {
expect(
auto(
'./path/to/button/button.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to/button`);
});
it('match with trailing index', () => {
expect(
auto(
'./path/to/button/index.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to/button`);
});
it('match with hyphen path', () => {
expect(
auto(
'./path/to-my/file.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to-my/file`);
});
it('match with underscore path', () => {
expect(
auto(
'./path/to_my/file.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to_my/file`);
});
it('match with windows path', () => {
expect(
auto(
'./path/to_my/file.stories.js',
normalizeStoriesEntry({ directory: '.\\path' }, winOptions)
)
).toMatchInlineSnapshot(`to_my/file`);
});
it('match with titlePrefix', () => {
expect(
auto(
'./path/to/file.stories.js',
normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options)
)
).toMatchInlineSnapshot(`atoms/to/file`);
});
describe('trailing slash', () => {
it('match with no titlePrefix', () => {
expect(
auto(
'./path/to/file.stories.js',
normalizeStoriesEntry({ directory: './path/' }, options)
)
).toMatchInlineSnapshot(`to/file`);
});
it('match with trailing duplicate', () => {
expect(
auto(
'./path/to/button/button.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to/button`);
});
it('match with titlePrefix', () => {
expect(
auto(
'./path/to/file.stories.js',
normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options)
)
).toMatchInlineSnapshot(`atoms/to/file`);
});
it('match with trailing index', () => {
expect(
auto(
'./path/to/button/index.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to/button`);
});
it('match with hyphen path', () => {
expect(
auto(
'./path/to-my/file.stories.js',
normalizeStoriesEntry({ directory: './path/' }, options)
)
).toMatchInlineSnapshot(`to-my/file`);
});
it('match with hyphen path', () => {
expect(
auto(
'./path/to-my/file.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to-my/file`);
});
it('match with underscore path', () => {
expect(
auto(
'./path/to_my/file.stories.js',
normalizeStoriesEntry({ directory: './path/' }, options)
)
).toMatchInlineSnapshot(`to_my/file`);
});
it('match with underscore path', () => {
expect(
auto(
'./path/to_my/file.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to_my/file`);
});
it('match with windows path', () => {
expect(
auto(
'./path/to_my/file.stories.js',
normalizeStoriesEntry({ directory: '.\\path\\' }, winOptions)
)
).toMatchInlineSnapshot(`to_my/file`);
});
it('camel-case file', () => {
expect(
auto(
'./path/to_my/MyButton.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`to_my/MyButton`);
});
it('match with windows path', () => {
expect(
auto(
'./path/to_my/file.stories.js',
normalizeStoriesEntry({ directory: '.\\path' }, winOptions)
)
).toMatchInlineSnapshot(`to_my/file`);
});
});
describe('start case', () => {
beforeEach(() => {
global.FEATURES.autoTitleFilenameCase = false;
describe('trailing slash', () => {
it('match with no titlePrefix', () => {
expect(
auto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path/' }, options))
).toMatchInlineSnapshot(`to/file`);
});
it('match with titlePrefix', () => {
expect(
auto(
'./path/to/file.stories.js',
normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options)
)
).toMatchInlineSnapshot(`atoms/to/file`);
});
it('match with hyphen path', () => {
expect(
auto(
'./path/to-my/file.stories.js',
normalizeStoriesEntry({ directory: './path/' }, options)
)
).toMatchInlineSnapshot(`to-my/file`);
});
it('match with underscore path', () => {
expect(
auto(
'./path/to_my/file.stories.js',
normalizeStoriesEntry({ directory: './path/' }, options)
)
).toMatchInlineSnapshot(`to_my/file`);
});
it('match with windows path', () => {
expect(
auto(
'./path/to_my/file.stories.js',
normalizeStoriesEntry({ directory: '.\\path\\' }, winOptions)
)
).toMatchInlineSnapshot(`to_my/file`);
});
it('camel-case file', () => {
@ -165,7 +135,7 @@ describe('autoTitle', () => {
'./path/to_my/MyButton.stories.js',
normalizeStoriesEntry({ directory: './path' }, options)
)
).toMatchInlineSnapshot(`To My/My Button`);
).toMatchInlineSnapshot(`to_my/MyButton`);
});
});
});

6
lib/store/src/autoTitle.ts
View File

@ -1,6 +1,4 @@
import startCase from 'lodash/startCase';
import slash from 'slash';
import global from 'global';
// FIXME: types duplicated type from `core-common', to be
// removed when we remove v6 back-compat.
@ -61,10 +59,6 @@ export const autoTitleFromSpecifier = (fileName: string, entry: NormalizedStorie
const titleAndSuffix = slash(pathJoin([titlePrefix, suffix]));
let path = titleAndSuffix.split('/');
path = stripExtension(path);
const { autoTitleFilenameCase, breakingChangesV7 } = global.FEATURES || {};
if (!autoTitleFilenameCase && !breakingChangesV7) {
path = path.map(startCase);
}
path = removeRedundantFilename(path);
return path.join('/');
}