Skip to content

Commit

Permalink
Update simple-component configs to address comments
Browse files Browse the repository at this point in the history
  • Loading branch information
tmeasday committed Jan 20, 2020
1 parent 7d1a4e0 commit 530a2a4
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 20 deletions.
38 changes: 20 additions & 18 deletions content/intro-to-storybook/angular/en/simple-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -132,28 +132,22 @@ When creating a story we use a base task (`task`) to build out the shape of the

## Config

We also have to make one small change to the Storybook configuration so it uses our LESS file. We can do that by adding a file `.storybook/preview.js` which runs when Storybook starts in our browser:
We'll need to make a couple of changes to the Storybook configuration so it notices not only our recently created stories, but also allows us to use our LESS file.

```javascript
// .storybook/preview.js

import '../src/styles.less';
```

In order to support that LESS import we'll need to play around a bit with webpack. Just create a `webpack.config.js` file inside the `.storybook` folder and paste the following:
Start by changing your Storybook configuration file (`.storybook/main.js`) to the following:

```javascript
const path = require('path');

// .storybook/main.js
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loaders: ['style-loader', 'css-loader', 'less-loader'],
include: path.resolve(__dirname, '../'),
},
],
stories: ['../src/components/**/*.stories.js'],

This comment has been minimized.

Copy link
@dinusuresh

dinusuresh Jan 21, 2020

I suggest src/**/*.stories.[tj]s would cover the general audience since the creation of a components folder is not specified previously in the instructions.

This comment has been minimized.

Copy link
@jonniebigodes

jonniebigodes Jan 21, 2020

Collaborator

@dinusuresh the snippet was brought in from another version of the tutorial. And it's under review in #228. I updated it to make it more concise with the rest of the documentation. Hopefully soon all of the documentation will be aligned

addons: ['@storybook/addon-actions', '@storybook/addon-links'],
webpackFinal: config => {
config.rules.push({
test: /\.less$/,
loaders: ['style-loader', 'css-loader', 'less-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
```
Expand All @@ -164,6 +158,14 @@ You'll also need to install the corresponding loaders:
yarn add -D less-loader css-loader style-loader
```

After completing the changes above, inside the `.storybook` folder, add a new file called `preview.js` with the following:

```javascript
// .storybook/preview.js

import '../src/styles.less';
```

Once we’ve done this, restarting the Storybook server should yield test cases for the three TaskComponent states:

<video autoPlay muted playsInline controls >
Expand Down
14 changes: 13 additions & 1 deletion content/intro-to-storybook/react/en/simple-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,19 @@ When creating a story we use a base task (`taskData`) to build out the shape of

## Config

We also have to make one small change to the Storybook configuration so it uses our CSS file. We can do that by adding a file `.storybook/preview.js` which runs when Storybook starts in our browser:
We'll need to make a couple of changes to the Storybook configuration so it notices not only our recently created stories, but also allows us to use our CSS file.

Start by changing your Storybook configuration file (`.storybook/main.js`) to the following:

```javascript
// .storybook/main.js
module.exports = {
stories: ['../src/components/**/*.stories.js'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};
```

After completing the change above, inside the `.storybook` folder, add a new file called `preview.js` with the following:

```javascript
// .storybook/preview.js
Expand Down
14 changes: 13 additions & 1 deletion content/intro-to-storybook/vue/en/simple-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,19 @@ When creating a story we use a base task (`taskData`) to build out the shape of

## Config

We also have to make one small change to the Storybook configuration so it uses our CSS file. We can do that by adding a file `.storybook/preview.js` which runs when Storybook starts in our browser:
We'll need to make a couple of changes to the Storybook configuration so it notices not only our recently created stories, but also allows us to use our CSS file.

Start by changing your Storybook configuration file (`.storybook/main.js`) to the following:

```javascript
// .storybook/main.js
module.exports = {
stories: ['../src/components/**/*.stories.js'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};
```

After completing the change above, inside the `.storybook` folder, add a new file called `preview.js` with the following:

```javascript
// .storybook/preview.js
Expand Down

0 comments on commit 530a2a4

Please sign in to comment.