GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 11:11:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update TS config docs

Browse Source 
Hi, I updated the example code setting up react-docgen-typescript-loader after having fought with it for quite some time. 

I'm also wondering if recommending react-docgen-typescript-webpack-plugin is really necessary since configuring directly with react-docgen-typescript-loader is the same amount of code... 

```const path = require("path");

module.exports = (baseConfig, env, config) => {
    // TypeScript
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: path.resolve(__dirname, "../"),
        use: [require.resolve("ts-loader"), require.resolve("react-docgen-typescript-loader")],
    });
    config.resolve.extensions.push(".ts", ".tsx");

    // SASS
    config.module.rules.push({
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
    });
    return config;
};
```
This commit is contained in:
Corentin Smith 2018-12-11 13:19:36 +01:00 committed by GitHub
parent 53c4d36730
commit 50d71e3236
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/src/pages/configurations/typescript-config/index.md
View File

@ -145,34 +145,39 @@ Please refer to the [react-docgen-typescript-loader](https://github.com/strothj/
Additional annotation can be achieved by setting a default set of info parameters:
```js
```ts
import {addDecorator} from "@storybook/react";
import {withInfo} from "@storybook/addon-info";
// Globally in your .storybook/config.js, or alternatively, per-chapter
addDecorator({
styles: {
header: {
h1: {
marginRight: '20px',
fontSize: '25px',
display: 'inline',
addDecorator(
withInfo({
styles: {
header: {
h1: {
marginRight: '20px',
fontSize: '25px',
display: 'inline',
},
body: {
paddingTop: 0,
paddingBottom: 0,
},
h2: {
display: 'inline',
color: '#999',
},
},
body: {
paddingTop: 0,
paddingBottom: 0,
},
h2: {
display: 'inline',
color: '#999',
infoBody: {
backgroundColor: '#eee',
padding: '0px 5px',
lineHeight: '2',
},
},
infoBody: {
backgroundColor: '#eee',
padding: '0px 5px',
lineHeight: '2',
},
},
inline: true,
source: false,
});
inline: true,
source: false,
})
);
```
This can be used like so: