const path = require('path');
module.exports = {
  stories: [
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../../**/**/src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            modules: true,
          },
        },
        require.resolve('sass-loader'),
        {
          loader: require.resolve('sass-resources-loader'),
          options: {
            resources: [path.resolve(__dirname, '../src/styles/globals.scss')],
          },
        },
      ],
    });
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
    // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    config.module.rules[0].use[0].options.plugins.push(
      require.resolve('babel-plugin-remove-graphql-queries')
    );
    config.resolve.alias = {
      '~atoms': path.resolve(__dirname, '../src/components/atoms/'),
      '~molecules': path.resolve(__dirname, '../src/components/molecules'),
      '~organisms': path.resolve(__dirname, '../src/components/organisms'),
      '~pages': path.resolve(__dirname, '../src/components/pages'),
      '~helpers': path.resolve(__dirname, '../src/helpers'),
      '~hooks': path.resolve(__dirname, '../src/hooks'),
      '~tests': path.resolve(__dirname, '../tests'),
      '~context': path.resolve(__dirname, '../src/context'),
      '~constants': path.resolve(__dirname, '../src/constants'),
      'gatsby-page-utils': path.resolve(__dirname, '../../node_modules/gatsby-page-utils/dist'),
    };

    config.resolve.alias['$virtual/lazy-client-sync-requires'] = path.resolve(
      `./__mocks__/virtual-lazy-client-sync-requires.js`
    );

    config.resolve.mainFields = ['browser', 'module', 'main'];
    return config;
  },
};
