Skip to content

Instantly share code, notes, and snippets.

@romansorin
Created November 10, 2019 00:52
Show Gist options
  • Save romansorin/916cf914b90456f0ea584847d0db2db7 to your computer and use it in GitHub Desktop.
Save romansorin/916cf914b90456f0ea584847d0db2db7 to your computer and use it in GitHub Desktop.
Gatsby, TailwindCSS, Storybook configuration
- addons.js
- config.js
- webpack.config.js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import { configure } from '@storybook/react'
import { action } from '@storybook/addon-actions'
// this is required, otherwise storybook won't properly load tailwind
import '../src/components/layout.css'
// automatically import all files ending in *.stories.js
configure(require.context('../src', true, /\.stories\.js$/), module)
// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
enqueue: () => {},
hovering: () => {}
}
// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = ''
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
action('NavigateTo:')(pathname)
}
// found in src/components
@tailwind base;
@tailwind components;
@tailwind utilities;
const path = require('path')
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.css$/,
use: [
// Loader for webpack to process CSS with PostCSS
{
loader: 'postcss-loader',
options: {
/*
Enable Source Maps
*/
sourceMap: true,
/*
Set postcss.config.js config path && ctx
*/
config: {
path: './.storybook/'
}
}
}
],
include: path.resolve(__dirname, '../')
})
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
// use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
config.module.rules[0].use[0].loader = require.resolve('babel-loader')
// use @babel/preset-react for JSX and env (instead of staged presets)
config.module.rules[0].use[0].options.presets = [
require.resolve('@babel/preset-react'),
require.resolve('@babel/preset-env')
]
config.module.rules[0].use[0].options.plugins = [
// use @babel/plugin-proposal-class-properties for class arrow functions
require.resolve('@babel/plugin-proposal-class-properties'),
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
require.resolve('babel-plugin-remove-graphql-queries')
]
// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
config.resolve.mainFields = ['browser', 'module', 'main']
return config
}
@romansorin
Copy link
Author

Stories should be stored within a src/components/stories folder (or any other nested state, since config files will recursively scan and resolve) or simply outside of the stories folder that is auto-generated by sb init.

More info at the Gatsby docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment