Skip to content

Commit dc5d662

Browse files
mendrewsapegin
authored andcommitted
Fix: Fix incorrect component name capitalization (styleguidist#1388)
Fixes styleguidist#1381 It is happening in a case when react-docgen (any propsParser) is failed and we are trying to guess displayName based on file path. We capitalized every case in the string instead of just words separated by `-` started with small letter. So, by mistake `ButtonTS` in file name becomes `ButtonTs` display name for component when we expect `ButtonTS` Use [startCase]:(https://lodash.com/docs/4.17.11#startCase) and then remove spaces which covers most our cases likemy-buttonTS => MyButtonTS
1 parent 44b640b commit dc5d662

File tree

2 files changed

+27
-5
lines changed

2 files changed

+27
-5
lines changed

src/loaders/utils/__tests__/getNameFromFilePath.spec.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,20 @@ it('should capitalize the display name', () => {
2121
expect(
2222
getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'your-component', 'index.js'))
2323
).toEqual('YourComponent');
24+
25+
expect(
26+
getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'yourButtonTS.tsx'))
27+
).toEqual('YourButtonTS');
28+
29+
expect(
30+
getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'your-buttonTS', 'index.tsx'))
31+
).toEqual('YourButtonTS');
32+
33+
expect(
34+
getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'your_button--TS', 'index.tsx'))
35+
).toEqual('YourButtonTS');
36+
37+
expect(
38+
getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'ButtonTS', 'index.tsx'))
39+
).toEqual('ButtonTS');
2440
});
Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
const path = require('path');
2-
const _ = require('lodash');
2+
const { startCase } = require('lodash');
3+
4+
function transformFileNameToDisplayName(displayName) {
5+
// ex: your-buttonTS -> Your Button TS -> YourButtonTS
6+
// ex: your_button--TS -> Your Button TS -> YourButtonTS
7+
return startCase(displayName).replace(/\s/g, '');
8+
}
39

410
module.exports = function getNameFromFilePath(filePath) {
5-
let displayName = path.basename(filePath, path.extname(filePath));
6-
if (displayName === 'index') {
7-
displayName = path.basename(path.dirname(filePath));
11+
let fileName = path.basename(filePath, path.extname(filePath));
12+
if (fileName === 'index') {
13+
fileName = path.basename(path.dirname(filePath));
814
}
915

10-
return _.upperFirst(_.camelCase(displayName));
16+
return transformFileNameToDisplayName(fileName);
1117
};

0 commit comments

Comments
 (0)