justincy/README.md

## README.md

      
    Raw
  

              README.md
            
          
    In addition to the Storybook for React setup, you'll also need to install these packages:
npm i -D @babel/core babel-loader css-loader style-loader


## main.js
const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js', '../stories/**/*.stories.tsx'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  presets: [path.resolve(__dirname, './next-preset.js')]
};

## next-preset.js
const path = require('path');

module.exports = {
  webpackFinal: async (baseConfig, options) => {
    // Modify or replace config. Mutating the original reference object can cause unexpected bugs.
    const { module = {} } = baseConfig;

    const newConfig = {
      ...baseConfig,
      module: {
        ...module,
        rules: [...(module.rules || [])]
      }
    };

    // TypeScript with Next.js
    newConfig.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: [
        path.resolve(__dirname, '../components'),
        path.resolve(__dirname, '../stories')
      ],
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['next/babel'],
            plugins: ['react-docgen']
          }
        }
      ]
    });
    newConfig.resolve.extensions.push('.ts', '.tsx');

    //
    // CSS Modules
    // Many thanks to https://github.com/storybookjs/storybook/issues/6055#issuecomment-521046352
    //

    // First we prevent webpack from using Storybook CSS rules to process CSS modules
    newConfig.module.rules.find(
      rule => rule.test.toString() === '/\\.css$/'
    ).exclude = /\.module\.css$/;

    // Then we tell webpack what to do with CSS modules
    newConfig.module.rules.push({
      test: /\.module\.css$/,
      include: path.resolve(__dirname, '../components'),
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true
          }
        }
      ]
    });

    return newConfig;
  }
};

## preview.js
// If you need global CSS, you can import it here and Storybook will automatically include it in all stories.
// You don't need this if you don't have any global CSS.
import '../src/styles.css';
	const path = require('path');

	module.exports = {
	stories: ['../stories/*/.stories.js', '../stories/*/.stories.tsx'],
	addons: ['@storybook/addon-actions', '@storybook/addon-links'],
	presets: [path.resolve(__dirname, './next-preset.js')]
	};
	const path = require('path');

	module.exports = {
	webpackFinal: async (baseConfig, options) => {
	// Modify or replace config. Mutating the original reference object can cause unexpected bugs.
	const { module = {} } = baseConfig;

	const newConfig = {
	...baseConfig,
	module: {
	...module,
	rules: [...(module.rules \|\| [])]
	}
	};

	// TypeScript with Next.js
	newConfig.module.rules.push({
	test: /\.(ts\|tsx)$/,
	include: [
	path.resolve(__dirname, '../components'),
	path.resolve(__dirname, '../stories')
	],
	use: [
	{
	loader: 'babel-loader',
	options: {
	presets: ['next/babel'],
	plugins: ['react-docgen']
	}
	}
	]
	});
	newConfig.resolve.extensions.push('.ts', '.tsx');

	//
	// CSS Modules
	// Many thanks to https://github.com/storybookjs/storybook/issues/6055#issuecomment-521046352
	//

	// First we prevent webpack from using Storybook CSS rules to process CSS modules
	newConfig.module.rules.find(
	rule => rule.test.toString() === '/\\.css$/'
	).exclude = /\.module\.css$/;

	// Then we tell webpack what to do with CSS modules
	newConfig.module.rules.push({
	test: /\.module\.css$/,
	include: path.resolve(__dirname, '../components'),
	use: [
	'style-loader',
	{
	loader: 'css-loader',
	options: {
	importLoaders: 1,
	modules: true
	}
	}
	]
	});

	return newConfig;
	}
	};
	// If you need global CSS, you can import it here and Storybook will automatically include it in all stories.
	// You don't need this if you don't have any global CSS.
	import '../src/styles.css';