Skip to content

Commit 2fb668a

Browse files
micahgodboltbenhalverson
micahgodbolt
authored and
benhalverson
committed
storybook init setup
1 parent 1271092 commit 2fb668a

17 files changed

+4419
-121
lines changed

‎.storybook/addons.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '@storybook/addon-actions/register';
2+
import '@storybook/addon-links/register';

‎.storybook/main.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// some config came from https://dev.to/romansorin/integrating-gatsby-tailwind-and-storybook-2cbi
2+
3+
module.exports = {
4+
stories: ['../stories/**/*.stories.js', '../stories/**/*.stories.tsx'],
5+
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
6+
webpackFinal: async config => {
7+
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
8+
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
9+
// use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
10+
config.module.rules[0].use[0].loader = require.resolve('babel-loader');
11+
// use @babel/preset-react for JSX and env (instead of staged presets)
12+
config.module.rules[0].use[0].options.presets = [
13+
require.resolve('@babel/preset-react'),
14+
require.resolve('@babel/preset-env'),
15+
require.resolve('@emotion/babel-preset-css-prop'),
16+
];
17+
config.module.rules[0].use[0].options.plugins = [
18+
// use @babel/plugin-proposal-class-properties for class arrow functions
19+
require.resolve('@babel/plugin-proposal-class-properties'),
20+
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
21+
require.resolve('babel-plugin-remove-graphql-queries'),
22+
];
23+
// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
24+
config.resolve.mainFields = ['browser', 'module', 'main'];
25+
config.module.rules.push(
26+
{
27+
test: /\.(ts|tsx)$/,
28+
loader: require.resolve('babel-loader'),
29+
options: {
30+
presets: [
31+
['react-app', { flow: false, typescript: true }],
32+
require.resolve('@emotion/babel-preset-css-prop'),
33+
],
34+
35+
plugins: [
36+
require.resolve('@babel/plugin-proposal-class-properties'),
37+
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
38+
require.resolve('babel-plugin-remove-graphql-queries'),
39+
],
40+
},
41+
},
42+
{
43+
test: /\.s[ac]ss$/i,
44+
use: [
45+
// Creates `style` nodes from JS strings
46+
'style-loader',
47+
// Translates CSS into CommonJS
48+
'css-loader',
49+
// Compiles Sass to CSS
50+
'sass-loader',
51+
],
52+
}
53+
);
54+
config.resolve.extensions.push('.ts', '.tsx');
55+
return config;
56+
},
57+
};

‎.storybook/preview.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { action } from '@storybook/addon-actions';
2+
3+
// Gatsby's Link overrides:
4+
// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
5+
// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
6+
// so Gatsby Link doesn't throw any errors.
7+
global.___loader = {
8+
enqueue: () => {},
9+
hovering: () => {},
10+
};
11+
12+
// __PATH_PREFIX__ is used inside gatsby-link an other various places. For storybook not to crash, you need to set it as well.
13+
global.__PATH_PREFIX__ = '';
14+
15+
// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
16+
// In Storybook it makes more sense to log an action than doing an actual navigate. Checkout the actions addon docs for more info: https://github.com/storybookjs/storybook/tree/master/addons/actions.
17+
18+
window.___navigate = pathname => {
19+
action('NavigateTo:')(pathname);
20+
};

0 commit comments

Comments
 (0)