Fix: Fix incorrect default glob pattern (was introduced in #404, fixes #461)

Author: sapegin

docs/Components.md

@@ -2,7 +2,7 @@
 
 ## Components
 
-By default Styleguidist will search components using this [glob pattern](https://github.com/isaacs/node-glob#glob-primer): `src/components/**/*.jsx?`. It will pick up paths like `src/components/Button.js`, `src/components/Button/Button.js` or `src/components/Button/index.js`. It will also ignore test files (`__tests__` folder and file names containing `.test.js`, `.test.jsx`, `.spec.js` and `.spec.jsx`). If it doesn’t work for you, create a `styleguide.config.js` file in your project’s root folder and configure the patterns to fit your project structure.
+By default Styleguidist will search components using this [glob pattern](https://github.com/isaacs/node-glob#glob-primer): `src/components/**/*.{js,jsx}`. It will pick up paths like `src/components/Button.js`, `src/components/Button/Button.js` or `src/components/Button/index.js`. It will also ignore test files (`__tests__` folder and file names containing `.test.js`, `.test.jsx`, `.spec.js` and `.spec.jsx`). If it doesn’t work for you, create a `styleguide.config.js` file in your project’s root folder and configure the patterns to fit your project structure.
 
 For example, if your components look like `components/Button/Button.js` + `components/Button/index.js` (meaning you need to skip `index.js`, otherwise the component will be loaded twice):
 

docs/Configuration.md

@@ -16,7 +16,7 @@ Styleguidist uses [Bublé](https://buble.surge.sh/guide/) to run ES6 code on the
 
 #### `components`
 
-Type: `String` or `Function`, default: `src/components/**/*.jsx?`
+Type: `String` or `Function`, default: `src/components/**/*.{js,jsx}`
 
 - when `String`: a [glob pattern](https://github.com/isaacs/node-glob#glob-primer) that matches all your component modules.
 - when `Function`: a function that returns an array of module paths.

examples/cra/package.json

@@ -16,14 +16,14 @@
     "node": ">=4"
   },
   "devDependencies": {
-    "react-scripts": "^0.8.4",
-    "react-styleguidist": "^5.0.0",
-    "webpack": "^1.14.0"
+    "react-scripts": "^1.0.0",
+    "react-styleguidist": "^5.3.0",
+    "webpack": "^2.6.0"
   },
   "dependencies": {
-    "dog-names": "~1.0.2",
-    "react": "~15.4.1",
-    "react-dom": "~15.4.1"
+    "dog-names": "^1.0.2",
+    "react": "^15.5.0",
+    "react-dom": "^15.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

loaders/__tests__/styleguide-loader.spec.js

@@ -1,8 +1,8 @@
 import vm from 'vm';
 import path from 'path';
 import { readFileSync } from 'fs';
-import noop from 'lodash/noop';
 import styleguideLoader from '../styleguide-loader';
+import getConfig from '../../scripts/config';
 
 const file = './test/components/Button/Button.js';
 
@@ -18,14 +18,33 @@ it('should return valid, parsable JS', () => {
 				getExampleFilename: () => 'Readme.md',
 				getComponentPathLine: filepath => filepath,
 			},
-			addContextDependency: noop,
+			addContextDependency: () => {},
 		},
 		readFileSync(file, 'utf8')
 	);
 	expect(result).toBeTruthy();
 	expect(() => new vm.Script(result)).not.toThrow();
 });
 
+it('should return correct component paths: default glob pattern', () => {
+	const result = styleguideLoader.pitch.call(
+		{
+			request: file,
+			_styleguidist: {
+				...getConfig(),
+				configDir: path.resolve(__dirname, '../../examples/cra'),
+			},
+			addContextDependency: () => {},
+		},
+		readFileSync(file, 'utf8')
+	);
+	expect(result).toBeTruthy();
+	expect(() => new vm.Script(result)).not.toThrow();
+	expect(result).toMatch(`'filepath': 'src/components/Button.js'`);
+	expect(result).toMatch(`'filepath': 'src/components/Placeholder.js'`);
+	expect(result).toMatch(`'filepath': 'src/components/RandomButton.js'`);
+});
+
 it('should return correct component paths: glob', () => {
 	const result = styleguideLoader.pitch.call(
 		{
@@ -36,7 +55,7 @@ it('should return correct component paths: glob', () => {
 				getExampleFilename: () => 'Readme.md',
 				getComponentPathLine: filepath => filepath,
 			},
-			addContextDependency: noop,
+			addContextDependency: () => {},
 		},
 		readFileSync(file, 'utf8')
 	);
@@ -63,7 +82,7 @@ it('should return correct component paths: function returning absolute paths', (
 				getExampleFilename: () => 'Readme.md',
 				getComponentPathLine: filepath => filepath,
 			},
-			addContextDependency: noop,
+			addContextDependency: () => {},
 		},
 		readFileSync(file, 'utf8')
 	);
@@ -90,7 +109,7 @@ it('should return correct component paths: function returning relative paths', (
 				getExampleFilename: () => 'Readme.md',
 				getComponentPathLine: filepath => filepath,
 			},
-			addContextDependency: noop,
+			addContextDependency: () => {},
 		},
 		readFileSync(file, 'utf8')
 	);
@@ -118,7 +137,7 @@ it('should filter out components without examples if skipComponentsWithoutExampl
 				getExampleFilename: componentPath => path.join(path.dirname(componentPath), 'Readme.md'),
 				getComponentPathLine: filepath => filepath,
 			},
-			addContextDependency: noop,
+			addContextDependency: () => {},
 		},
 		readFileSync(file, 'utf8')
 	);

scripts/__tests__/config.spec.js

@@ -134,7 +134,7 @@ it('should use components option as the first sections if there’s no sections
 it('should use default components option both components and sections options weren’t specified', () => {
 	const result = getConfig();
 	expect(result.sections).toHaveLength(1);
-	expect(result.sections[0].components).toMatch('.js');
+	expect(result.sections[0].components).toMatch('**');
 });
 
 it('should ignore components option there’s sections options', () => {

scripts/schemas/config.js

@@ -5,7 +5,7 @@
 
 /* eslint-disable no-console */
 
-const DEFAULT_COMPONENTS_PATTERN = 'src/@(components|Components)/**/*.jsx?';
+const DEFAULT_COMPONENTS_PATTERN = 'src/@(components|Components)/**/*.{js,jsx}';
 
 const fs = require('fs');
 const path = require('path');
@@ -31,7 +31,7 @@ module.exports = {
 	// `components` is a shortcut for { sections: [{ components }] }, see `sections` below
 	components: {
 		type: ['string', 'function'],
-		example: 'components/**/[A-Z]*.jsx?',
+		example: 'components/**/[A-Z]*.js',
 	},
 	context: {
 		type: 'object',