Fix: Fix incorrect component name capitalization (#1388)

Fixes #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

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

@@ -21,4 +21,20 @@ it('should capitalize the display name', () => {
 	expect(
 		getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'your-component', 'index.js'))
 	).toEqual('YourComponent');
+
+	expect(
+		getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'yourButtonTS.tsx'))
+	).toEqual('YourButtonTS');
+
+	expect(
+		getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'your-buttonTS', 'index.tsx'))
+	).toEqual('YourButtonTS');
+
+	expect(
+		getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'your_button--TS', 'index.tsx'))
+	).toEqual('YourButtonTS');
+
+	expect(
+		getNameFromFilePath(path.join('an', 'absolute', 'path', 'to', 'ButtonTS', 'index.tsx'))
+	).toEqual('ButtonTS');
 });

src/loaders/utils/getNameFromFilePath.js

@@ -1,11 +1,17 @@
 const path = require('path');
-const _ = require('lodash');
+const { startCase } = require('lodash');
+
+function transformFileNameToDisplayName(displayName) {
+	// ex: your-buttonTS -> Your Button TS -> YourButtonTS
+	// ex: your_button--TS -> Your Button TS -> YourButtonTS
+	return startCase(displayName).replace(/\s/g, '');
+}
 
 module.exports = function getNameFromFilePath(filePath) {
-	let displayName = path.basename(filePath, path.extname(filePath));
-	if (displayName === 'index') {
-		displayName = path.basename(path.dirname(filePath));
+	let fileName = path.basename(filePath, path.extname(filePath));
+	if (fileName === 'index') {
+		fileName = path.basename(path.dirname(filePath));
 	}
 
-	return _.upperFirst(_.camelCase(displayName));
+	return transformFileNameToDisplayName(fileName);
 };