const { DefinePlugin } = require('webpack');

module.exports = ({ config }) => ({
  ...config,
  plugins: [
    ...config.plugins,
    new DefinePlugin({
      PROJECT_ROOT: `'${process.cwd()}'`,
      DEFAULT_THEME_NAME: `'${
        process.env.DEFAULT_THEME_NAME || 'wealthsimple'
      }'`,
      STORYBOOK_TITLE: '@wealthsimple/patchwork',
    }),
  ],
  module: {
    ...config.module,
    rules: [
      ...config.module.rules,
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/env', '@babel/react', '@babel/flow'],
            plugins: [
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-proposal-nullish-coalescing-operator',
              '@babel/plugin-proposal-optional-chaining',
              '@babel/plugin-transform-async-to-generator',
              ['styled-components', { fileName: false }],
              'dynamic-import-webpack',
            ],
          },
        },
      },
      // Allows you to import assets into your JS code; the import statement
      // resolves to the path where webpack puts the image in its compile output.
      {
        test: /\.(png|jpg|gif|svg|mp4)$/,
      },
      // Required for use with Patchwork > 10.9.1, which distributes its own fonts.
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
      },
    ],
  },
});
