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

CHANGE docs to use babel-plugin-macros over webpack __dirname injection

Browse Source
This commit is contained in:
Norbert de Langen 2018-01-22 23:27:53 +01:00
parent 0dae980050
commit 73a1cb548b
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/src/pages/basics/writing-stories/index.md
View File

@ -147,21 +147,23 @@ storiesOf('My App/Buttons/Emoji', module)
The name is just a javascript string, by using a template literal, you can easily interpolate data.
One example would be to use `__dirname`:
One example would be to use `__dirname` combined with `babel-plugin-preval`:
```js
import React from 'react';
import preval from 'babel-plugin-preval/macro';
import { storiesOf } from '@storybook/react';
import BaseButton from './BaseButton';
import BaseButton from '../components/BaseButton';
const base = __dirname.replace(process.cwd(), '');
const base = preval`module.exports = __dirname.replace(process.cwd() + '/', '')`;
storiesOf(`Category|${base}/BaseButton`, module)
storiesOf(`Other|${base}/Dirname Example`, module)
.add('story 1', () => <BaseButton label="Story 1" />)
.add('story 2', () => <BaseButton label="Story 2" />);
```
*The usage of `__dirname` is dependent on webpack transforming it correctly. Either don't change the default config, add the nessesary config yourself, or import the storybook default, see [custom webpack config](/configurations/custom-webpack-config/#full-control-mode--default)*
*This uses [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) & [babel-plugin-preval](https://github.com/kentcdodds/babel-plugin-preval)*.
## Run multiple storybooks