Skip to content

Commit 3669301

Browse files
committed
Feat: Add TypeScript files to default components and ignore patterns
Related to styleguidist#749, styleguidist#750
1 parent 2556b51 commit 3669301

File tree

4 files changed

+14
-8
lines changed

4 files changed

+14
-8
lines changed

docs/Components.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
## Finding components
1414

15-
By default Styleguidist will search components using this [glob pattern](https://github.com/isaacs/node-glob#glob-primer): `src/components/**/*.{js,jsx}`.
15+
By default Styleguidist will search components using this [glob pattern](https://github.com/isaacs/node-glob#glob-primer): `src/components/**/*.{js,jsx,ts,tsx}`.
1616

1717
It will pick up files like:
1818

@@ -23,7 +23,7 @@ It will pick up files like:
2323
But will ignore tests:
2424

2525
* `__tests__` folder,
26-
* files containing `.test.js`, `.test.jsx`, `.spec.js` and `.spec.jsx`.
26+
* files containing `.test.js` or `.spec.js` (or same for `.jsx`, `.ts` and `.tsx`).
2727

2828
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):
2929

@@ -67,7 +67,7 @@ module.exports = {
6767
{
6868
name: 'Installation',
6969
content: 'docs/installation.md',
70-
description: 'The description for the installation section',
70+
description: 'The description for the installation section'
7171
},
7272
{
7373
name: 'Configuration',

docs/Configuration.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ Styleguidist uses [Bublé](https://buble.surge.sh/guide/) to run ES6 code on the
5757

5858
#### `components`
5959

60-
Type: `String` or `Function`, default: `src/components/**/*.{js,jsx}`
60+
Type: `String` or `Function`, default: `src/components/**/*.{js,jsx,ts,tsx}`
6161

6262
* when `String`: a [glob pattern](https://github.com/isaacs/node-glob#glob-primer) that matches all your component modules.
6363
* when `Function`: a function that returns an array of module paths.
@@ -235,7 +235,7 @@ module.exports = {
235235

236236
#### `ignore`
237237

238-
Type: `String[]`, default: `['**/__tests__/**', '**/*.test.js', '**/*.test.jsx', '**/*.spec.js', '**/*.spec.jsx']`
238+
Type: `String[]`, default: `['**/__tests__/**', '**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}', '**/*.d.ts']`
239239

240240
Array of [glob pattern](https://github.com/isaacs/node-glob#glob-primer) that should not be included in the style guide.
241241

docs/Webpack.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ module.exports = {
8585
8686
## Create React App
8787

88-
[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}`.
88+
[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.
8989

9090
## Create React App, TypeScript
9191

scripts/schemas/config.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
// If you want to access any of these options in React, don’t forget to update CLIENT_CONFIG_OPTIONS array
44
// in loaders/styleguide-loader.js
55

6-
const DEFAULT_COMPONENTS_PATTERN = 'src/@(components|Components)/**/*.{js,jsx}';
6+
const EXTENSIONS = 'js,jsx,ts,tsx';
7+
const DEFAULT_COMPONENTS_PATTERN = `src/@(components|Components)/**/*.{${EXTENSIONS}}`;
78

89
const path = require('path');
910
const startCase = require('lodash/startCase');
@@ -88,7 +89,12 @@ module.exports = {
8889
},
8990
ignore: {
9091
type: 'array',
91-
default: ['**/__tests__/**', '**/*.test.js', '**/*.spec.js', '**/*.test.jsx', '**/*.spec.jsx'],
92+
default: [
93+
'**/__tests__/**',
94+
`**/*.test.{${EXTENSIONS}}`,
95+
`**/*.spec.{${EXTENSIONS}}`,
96+
'**/*.d.ts',
97+
],
9298
},
9399
highlightTheme: {
94100
type: 'string',

0 commit comments

Comments
 (0)