applications/storybook/.storybook/main.js

   1 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   2 const { getJsLoader } = require('@proton/pack/webpack/js.loader');
   3 const getCssLoaders = require('@proton/pack/webpack/css.loader');
   4 const getAssetsLoaders = require('@proton/pack/webpack/assets.loader');
   5 const getOptimization = require('@proton/pack/webpack/optimization');
   6
   7 module.exports = {
   8     core: {
   9         builder: 'webpack5',
  10     },
  11     stories: [
  12         '../src/stories/**/*.stories.@(mdx|js|jsx|ts|tsx)',
  13         '../../../packages/atoms/**/*.stories.@(js|jsx|ts|tsx)',
  14     ],
  15     addons: ['@storybook/addon-links', '@storybook/addon-storysource', '@storybook/addon-essentials'],
  16     staticDirs: ['../src/assets', '../src/assets/favicons'],
  17     typescript: {
  18         check: false,
  19         checkOptions: {},
  20         reactDocgen: 'react-docgen-typescript',
  21         reactDocgenTypescriptOptions: {
  22             shouldRemoveUndefinedFromOptional: true,
  23             propFilter: (property) => {
  24                 if (property.parent) {
  25                     /**
  26                      * Only generate docs for properties which are not a part of the @types
  27                      * package. That way we don't get all the inherited dom attributes for
  28                      * example from "React.FC<React.HTMLAttributes<HTMLDivElement>>".
  29                      *
  30                      * Usually examples covered in Storybook docs as well as react-docgen-typescript
  31                      * itself show a different code-snippet to deal with this, one which ignores
  32                      * solely based on "node_modules".
  33                      *
  34                      * Since we're defining the components used in our storybook outside this codebase
  35                      * and importing it through node_modules, that won't do for us, we need to be
  36                      * more specific.
  37                      */
  38                     return !property.parent.fileName.includes('/node_modules/@types/');
  39                 }
  40
  41                 return true;
  42             },
  43         },
  44     },
  45     webpackFinal: async (config, { configType }) => {
  46         const isProduction = configType === 'PRODUCTION';
  47
  48         const options = {
  49             isProduction,
  50             hasReactRefresh: false,
  51             inlineIcons: true,
  52         };
  53
  54         const optimization = getOptimization(options);
  55
  56         return {
  57             ...config,
  58             resolve: {
  59                 ...config.resolve,
  60                 fallback: {
  61                     ...config.resolve.fallback,
  62                     // For some reason storybook brings in openpgp as a dependency and we need to
  63                     // explicitly disable these in the webpack config
  64                     stream: false,
  65                     crypto: false,
  66                 },
  67             },
  68             module: {
  69                 ...config.module,
  70                 rules: [
  71                     ...config.module.rules.filter((rule) => {
  72                         return rule.test.toString().includes('mdx');
  73                     }),
  74                     {
  75                         test: /\.stories\.(tsx|mdx)?$/,
  76                         use: [
  77                             {
  78                                 loader: require.resolve('@storybook/source-loader'),
  79                                 options: { parser: 'typescript' },
  80                             },
  81                         ],
  82                         enforce: 'pre',
  83                     },
  84                     ...[getJsLoader(options), ...getCssLoaders(options), ...getAssetsLoaders(options)],
  85                 ],
  86             },
  87             optimization: {
  88                 ...config.optimization,
  89                 minimizer: optimization.minimizer,
  90             },
  91             experiments: { ...config.experiments, asyncWebAssembly: true },
  92             plugins: [
  93                 ...config.plugins,
  94                 new MiniCssExtractPlugin({
  95                     filename: isProduction ? '[name].[contenthash:8].css' : '[name].css',
  96                     chunkFilename: isProduction ? '[id].[contenthash:8].css' : '[id].css',
  97                 }),
  98             ],
  99             node: {
 100                 ...config.node,
 101                 __dirname: true,
 102                 __filename: true,
 103             },
 104         };
 105     },
 106 };