storybook: Global addDecorator is ignored
Describe the bug
In my React/TypeScript app if I add a global addDecorator in my preview.tsx this is ignored.
The exact same decorator works if I add it to a single story.
What could it be?
Expected behavior I expect the decorator to work in preview.tsx
Code snippets
main.js:
const webpack = require("webpack");
// react-scripts-ts's webpack.config.js
const custom = require("react-scripts-ts/config/webpack.config.dev.js");
module.exports = {
stories: ["../src/**/*.stories.(ts|tsx)"],
addons: [
"@storybook/addon-viewport",
"@storybook/addon-storysource",
"@storybook/addon-actions",
"@storybook/addon-links",
],
webpackFinal: (config) => {
// "Finally, if your custom webpack config uses a loader that does not
// explicitly include specific file extensions via the test property,
// it is necessary to exclude the .ejs file extension from that loader."
// https://storybook.js.org/docs/configurations/custom-webpack-config/#examples
const oneOf = custom.module.rules[1].oneOf;
oneOf[oneOf.length - 1].exclude.push(/\.ejs$/);
const outConfig = {
...config,
module: {
...config.module,
rules: custom.module.rules,
},
plugins: [
...config.plugins,
// See https://stackoverflow.com/a/51194917/416714 and
// https://webpack.js.org/migrate/3/#loaderoptionsplugin-context
new webpack.LoaderOptionsPlugin({
options: {
context: process.cwd(), // or the same value as `context`
},
}),
],
};
// Make sure we can import .ts/.tsx files in our stories
outConfig.resolve.extensions.push('.ts', '.tsx');
// Make sure storysource picks up .tsx source files
outConfig.module.rules.push({
test: /\.stories\.tsx?$/,
loaders: [
{
loader: require.resolve('@storybook/source-loader'),
options: { parser: 'typescript' },
},
],
enforce: 'pre',
})
return outConfig;
},
};
preview.tsx:
import React from 'react';
import { addDecorator } from '@storybook/react';
// Doesn't do anything here
addDecorator((story) => <div style={{ background: 'pink' }}>{story()}</div>);
button.stories.tsx:
import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './button';
export default {
title: 'UI Library/Controls/Buttons/Button',
// The background actually turns pink here
decorators: [(story) => <div style={{ background: 'pink' }}>{story()}</div>],
};
export const normal = () => (
<Button onClick={action('clicked')}>Log In</Button>
);
System:
Environment Info:
System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
Browsers:
Chrome: 81.0.4044.129
Edge: 81.0.416.68
Firefox: 76.0
Safari: 13.1
npmPackages:
@storybook/addon-actions: ^5.3.18 => 5.3.18
@storybook/addon-links: ^5.3.18 => 5.3.18
@storybook/addon-storysource: ^5.3.18 => 5.3.18
@storybook/addon-viewport: ^5.3.18 => 5.3.18
@storybook/addons: ^5.3.18 => 5.3.18
@storybook/react: ^5.3.18 => 5.3.18
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 22 (10 by maintainers)
I had an issue with a context provider, which others might have as well. I see lots of this in Storybook examples:
So that the Provider can provide its context, I had to replace it with:
And itโs obvious why I had to do it, but I feel dumb because of how much it took for me to realize it.
@shilman I actually found a work-around (maybe not even a work-around, but a proper solution). In the previous version, we had the following code in preview.jsx:
And this code caused the above effect of ignoring decorators in 95% of case. Once I removed it and instead added
stories: ["../../client/dist/**/*.stories.js"]to main.ts, it started working as expected. (Hereclientis the second yarn workspaces monorepo project in packages/.)@y-nk Thanks Iโll take a look and let you know ๐
@mrmckeb thank you for looking into this.
The problem is not so much with
react-scripts-ts(which Iโd be happy to move away from if it was under my control ๐ ), but with the fact that it appears that a file namedpreview.tsxis ignored, while if it is namedpreview.jsxit is not.Would it be possible to add the
tsxextension?