Feat: Add TypeScript files to default components and ignore patterns

Related to #749, #750

docs/Components.md

@@ -12,7 +12,7 @@
 
 ## Finding components
 
-By default Styleguidist will search components using this [glob pattern](https://github.com/isaacs/node-glob#glob-primer): `src/components/**/*.{js,jsx}`.
+By default Styleguidist will search components using this [glob pattern](https://github.com/isaacs/node-glob#glob-primer): `src/components/**/*.{js,jsx,ts,tsx}`.
 
 It will pick up files like:
 
@@ -23,7 +23,7 @@ It will pick up files like:
 But will ignore tests:
 
 * `__tests__` folder,
-* files containing `.test.js`, `.test.jsx`, `.spec.js` and `.spec.jsx`.
+* files containing `.test.js` or `.spec.js` (or same for `.jsx`, `.ts` and `.tsx`).
 
 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):
 
@@ -67,7 +67,7 @@ module.exports = {
         {
           name: 'Installation',
           content: 'docs/installation.md',
-          description: 'The description for the installation section',
+          description: 'The description for the installation section'
         },
         {
           name: 'Configuration',

docs/Configuration.md

@@ -57,7 +57,7 @@ Styleguidist uses [Bublé](https://buble.surge.sh/guide/) to run ES6 code on the
 
 #### `components`
 
-Type: `String` or `Function`, default: `src/components/**/*.{js,jsx}`
+Type: `String` or `Function`, default: `src/components/**/*.{js,jsx,ts,tsx}`
 
 * 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.
@@ -235,7 +235,7 @@ module.exports = {
 
 #### `ignore`
 
-Type: `String[]`, default: `['**/__tests__/**', '**/*.test.js', '**/*.test.jsx', '**/*.spec.js', '**/*.spec.jsx']`
+Type: `String[]`, default: `['**/__tests__/**', '**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}', '**/*.d.ts']`
 
 Array of [glob pattern](https://github.com/isaacs/node-glob#glob-primer) that should not be included in the style guide.
 

docs/Webpack.md

@@ -85,7 +85,7 @@ module.exports = {
 
 ## Create React App
 
-[Create React App](https://github.com/facebookincubator/create-react-app) is supported out of the box, you don’t even need to create a style guide config if your components could be found using a default glob pattern, `src/components/**/*.{js,jsx}`.
+[Create React App](https://github.com/facebookincubator/create-react-app) is supported out of the box, you don’t even need to create a style guide config if your components could be found using a default pattern: all files with `.js` or `.jsx` extensions inside `src/components` or `src/Components` folders.
 
 ## Create React App, TypeScript
 

scripts/schemas/config.js

@@ -3,7 +3,8 @@
 // If you want to access any of these options in React, don’t forget to update CLIENT_CONFIG_OPTIONS array
 // in loaders/styleguide-loader.js
 
-const DEFAULT_COMPONENTS_PATTERN = 'src/@(components|Components)/**/*.{js,jsx}';
+const EXTENSIONS = 'js,jsx,ts,tsx';
+const DEFAULT_COMPONENTS_PATTERN = `src/@(components|Components)/**/*.{${EXTENSIONS}}`;
 
 const path = require('path');
 const startCase = require('lodash/startCase');
@@ -88,7 +89,12 @@ module.exports = {
 	},
 	ignore: {
 		type: 'array',
-		default: ['**/__tests__/**', '**/*.test.js', '**/*.spec.js', '**/*.test.jsx', '**/*.spec.jsx'],
+		default: [
+			'**/__tests__/**',
+			`**/*.test.{${EXTENSIONS}}`,
+			`**/*.spec.{${EXTENSIONS}}`,
+			'**/*.d.ts',
+		],
 	},
 	highlightTheme: {
 		type: 'string',