Feat: Add ignore option

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/**/*.js`. It will pick up paths like `src/components/Button.js`, `src/components/Button/Button.js` or `src/components/Button/index.js`. If it doesn’t work for you, create a `styleguide.config.js` file in your project’s root folder and configure the pattern 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`. 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` or `.spec.js`). 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):
 
@@ -12,16 +12,10 @@ module.exports = {
 };
 ```
 
-Or you need to skip test specs (`components/Button/Button.test.js`):
-
-```javascript
-module.exports = {
-  components: 'src/components/**/!(*.test).js'
-};
-```
-
 > **Note:** All paths are relative to config folder.
 
+> **Note:** Use [ignore](Configuration.md#ignore) option to exclude some files from the style guide.
+
 ## Sections
 
 Group components into sections or add extra Markdown documents to your style guide.

docs/Configuration.md

@@ -179,6 +179,12 @@ Type: `String`, default: `base16-light`
 
 [CodeMirror theme](http://codemirror.net/demo/theme.html) name to use for syntax highlighting in the editor.
 
+#### `ignore`
+
+Type: `String[]`, default: `['**/__tests__/**', '**/*.test.js', '**/*.spec.js']`
+
+Array of [glob pattern](https://github.com/isaacs/node-glob#glob-primer) or files of components that should not be included in the style guide.
+
 #### `previewDelay`
 
 Type: `Number`, default: 500
@@ -201,7 +207,7 @@ module.exports = {
 
 #### `require`
 
-Type: `Array`, optional
+Type: `String[]`, optional
 
 Modules that are required for your style guide. Useful for third-party styles or polyfills.
 

docs/Cookbook.md

@@ -19,30 +19,22 @@ let textarea;
 
 ## How to exclude some components from style guide?
 
-For simple cases like ignoring test specs (like `Button.test.js`) glob negation may be enough:
+Styleguidist will ignore tests (`__tests__` folder and file names containing `.test.js` or `.spec.js`) by default.
 
-```javascript
-module.exports = {
-  components: 'components/**/!(*.test).js'
-};
-```
-
-Of filter them out by passing a function to `components` option:
+Use [ignore](Configuration.md#ignore) option to customize this behavior:
 
 ```javascript
-const path = require('path');
-const glob = require('glob');
 module.exports = {
-  components() {
-    // Ignore foo.js and bar.js
-    return glob.sync(path.resolve(__dirname, 'lib/components/**/*.js')).filter(module => !/\/(foo|bar).js$/.test(module));
-  }
+  ignore: [
+    '**/*.spec.js',
+    'src/components/Button.js'
+  ]
 };
 ```
 
 ## How to hide some components in style guide but make them available in examples?
 
-Enable [skipComponentsWithoutExample](Configuration.md) option and do not add example file (`Readme.md` by default) to components you want to ignore.
+Enable [skipComponentsWithoutExample](Configuration.md#skipcomponentswithoutexample) option and do not add example file (`Readme.md` by default) to components you want to ignore.
 
 Require these components in your examples:
 
@@ -175,7 +167,7 @@ See the [Preact example style guide](https://github.com/styleguidist/react-style
 
 ## How to change styles of a style guide?
 
-Use config option [theme](Configuration.md#theme) to change fonts, colors, etc. and option [styles](Configuration.md#configuration) to tweak style of particular Styleguidist’s components:
+Use config option [theme](Configuration.md#theme) to change fonts, colors, etc. and option [styles](Configuration.md#styles) to tweak style of particular Styleguidist’s components:
 
 ```javascript
 module.exports = {

docs/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

loaders/styleguide-loader.js

@@ -37,7 +37,7 @@ module.exports.pitch = function() {
 		sections = filterComponentsWithExample(sections);
 	}
 
-	const allComponentFiles = getComponentFilesFromSections(config.sections, config.configDir);
+	const allComponentFiles = getComponentFilesFromSections(config.sections, config.configDir, config.ignore);
 	const allContentPages = getAllContentPages(sections);
 	const allComponentsWithExamples = getAllComponentsWithExamples(sections);
 

loaders/utils/__tests__/getComponentFiles.spec.js

@@ -31,6 +31,13 @@ it('getComponentFiles() should accept components as a glob', () => {
 	]));
 });
 
+it('getComponentFiles() should ignore specified patterns', () => {
+	const result = getComponentFiles(glob, configDir, ['Button']);
+	expect(result).toEqual(absolutize([
+		'components/Placeholder/Placeholder.js',
+	]));
+});
+
 it('getComponentFiles() should throw if components is not a function or a string', () => {
 	const fn = () => getComponentFiles(42, configDir);
 	expect(fn).toThrowError('should be string or function');

loaders/utils/__tests__/getComponentFilesFromSections.spec.js

@@ -31,3 +31,10 @@ it('getComponentFilesFromSections() should return a list of files', () => {
 		'components/Placeholder/Placeholder.js',
 	]));
 });
+
+it('getComponentFilesFromSections() should ignore specified patterns', () => {
+	const result = getComponentFilesFromSections(sections, configDir, ['Button']);
+	expect(result).toEqual(absolutize([
+		'components/Button/Button.js',
+	]));
+});

loaders/utils/getComponentFiles.js

@@ -10,9 +10,10 @@ const isString = require('lodash/isString');
  *
  * @param {string|Function} components Function or glob pattern.
  * @param {string} rootDir
+ * @param {Array} [ignore] Glob patterns to ignore.
  * @returns {Array}
  */
-module.exports = function getComponentFiles(components, rootDir) {
+module.exports = function getComponentFiles(components, rootDir, ignore) {
 	if (!components) {
 		return [];
 	}
@@ -22,7 +23,7 @@ module.exports = function getComponentFiles(components, rootDir) {
 		componentFiles = components();
 	}
 	else if (isString(components)) {
-		componentFiles = glob.sync(path.resolve(rootDir, components));
+		componentFiles = glob.sync(path.resolve(rootDir, components), { ignore });
 	}
 	else {
 		throw new Error(`Styleguidist: components should be string or function, received ${typeof components}.`);

loaders/utils/getComponentFilesFromSections.js

@@ -7,16 +7,17 @@ const getComponentFiles = require('./getComponentFiles');
  *
  * @param {Array} sections
  * @param {string} rootDir
+ * @param {Array} [ignore] Glob patterns to ignore.
  * @returns {Array}
  */
-module.exports = function getComponentFilesFromSections(sections, rootDir) {
+module.exports = function getComponentFilesFromSections(sections, rootDir, ignore) {
 	return sections.reduce((components, section) => {
 		if (section.components) {
-			return components.concat(getComponentFiles(section.components, rootDir));
+			return components.concat(getComponentFiles(section.components, rootDir, ignore));
 		}
 
 		if (section.sections) {
-			return components.concat(getComponentFilesFromSections(section.sections, rootDir));
+			return components.concat(getComponentFilesFromSections(section.sections, rootDir, ignore));
 		}
 
 		return components;

loaders/utils/getSections.js

@@ -40,7 +40,7 @@ function processSection(section, config) {
 
 	return {
 		name: section.name,
-		components: getComponents(getComponentFiles(section.components, config.configDir), config),
+		components: getComponents(getComponentFiles(section.components, config.configDir, config.ignore), config),
 		sections: getSections(section.sections || [], config),
 		content,
 	};

scripts/schemas/config.js

@@ -5,7 +5,7 @@
 
 /* eslint-disable no-console */
 
-const DEFAULT_COMPONENTS_PATTERN = 'src/@(components|Components)/**/!(*.test|*.spec).js';
+const DEFAULT_COMPONENTS_PATTERN = 'src/@(components|Components)/**/*.js';
 
 const fs = require('fs');
 const path = require('path');
@@ -73,6 +73,14 @@ module.exports = {
 		type: 'function',
 		default: componentPath => reactDocgen.defaultHandlers.concat(createDisplayNameHandler(componentPath)),
 	},
+	ignore: {
+		type: 'array',
+		default: [
+			'**/__tests__/**',
+			'**/*.test.js',
+			'**/*.spec.js',
+		],
+	},
 	highlightTheme: {
 		type: 'string',
 		default: 'base16-light',