Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
ui-component-library / .storybook / webpack.config.js
Size: Mime:
// set process.env
require('../.env')
// load the default config generator.
const { resolve } = require('path')
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js')
const paths = require('../config/paths')
const alias = require('../config/alias')

/**
 * @todo https://github.com/storybooks/storybook/issues/686#issuecomment-375746848
 * @todo the babel config is not respecting ours
 * @todo need to babelize babel-plugin-styled-components !!!!!!!!!
 */
module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env)

  /**
   * super weak, h8 storybook https://github.com/storybooks/storybook/issues/3044#issuecomment-367282345
   * https://github.com/storybooks/storybook/releases/tag/v4.0.0-alpha.0 this one causes ts issues
   */
  // config.mode = 'development'

  /**
    * @see https://github.com/strothj/react-docgen-typescript-loader
    */
  const docgenConfig = process.env.SHOULD_GENERATE_TYPESCRIPT_REACT_PROPS && {
    loader: require.resolve('react-docgen-typescript-loader'),
  }
  const awesomeConfig = {
    loader: require.resolve('awesome-typescript-loader'),
    options: {
      // includes: [
      //   resolve(__dirname, '../src'),
      //   resolve(__dirname, '../stories'),
      // ],
      // exclude: /node_modules/,
      transpileOnly: true,
    }
  }

  // Extend it as you need.
  // For example, add typescript loader:
  config.module.rules.push({
    // @todo for some reason this makes it super slow
    // test: /\.(ts|tsx|js|jsx)$/,
    test: /\.(ts|tsx)$/,
    // use: [awesomeConfig, docgenConfig].filter(Object),
    ...awesomeConfig,
  })

  // config.module.rules.push({
  //   test: /\.stories\.jsx?$/,
  //   loaders: [
  //     {
  //       loader: require.resolve('@storybook/addon-storysource/loader'),
  //       options: {
  //         parser: 'typescript',
  //         prettierConfig: {
  //           printWidth: 100,
  //           semi: false,
  //           tabWidth: 2,
  //           singleQuote: true,
  //           useTabs: false,
  //           parser: 'typescript',
  //           trailingComma: 'es5',
  //           arrowParens: 'avoid',
  //         },
  //         uglyCommentsRegex: [
  //           /^eslint-.*/,
  //           /^global.*/,
  //         ],
  //       },
  //     },
  //   ],
  //   enforce: 'pre',
  // })

  // !!!!! DISABLED ONLY FOR DEBUG !!!!
  // Perform type checking and linting in a separate process to speed up compilation
  if (process.env.SHOULD_ENFORCE_STRICT_TYPESCRIPT) {
    // const { CheckerPlugin }
    // const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
    // config.plugins.push(
    //   new ForkTsCheckerWebpackPlugin({
    //     async: false,
    //     watch: paths.appSrc,
    //     tsconfig: paths.appTsConfig,
    //     tslint: paths.appTsLint,
    //   })
    // )
  }

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  config.node = {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty',
  }

  config.resolve.alias = alias
  config.resolve.extensions.push('.ts', '.tsx')

  /**
   * @see https://storybook.js.org/configurations/typescript-config/
   * @todo has some issue with some of our code or with ts version
   */
  if (process.env.SHOULD_BUILD_DOCS_FOR_TYPESCRIPT_REACT_IN_STORYBOOK) {
    // const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin')
    // config.plugins.push(new TSDocgenPlugin())
  }

  return config
}