<|start_filename|>.storybook/webpack.config.js<|end_filename|>
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader')
      },
      {
        loader: require.resolve('react-docgen-typescript-loader')
      }
    ]
  });

  // There was a problem with the fonts not being loaded
  // I took the fix from here: https://github.com/storybookjs/storybook/issues/5936#issuecomment-532902187
  config.module.rules = config.module.rules.map(rule => {
    if (rule.test && rule.test.toString().includes('woff')) {
      return {
        ...rule,
        test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/
      }
    }
    return rule
  })

  config.module.rules.push({
    test: /\.(woff|woff2|eot|ttf)$/,
    use: [
      {
        loader: 'file-loader',
        query: {
          name: '[name].[ext]'
        }
      }
    ]
  });

  config.module.rules.push({
    test: /\.(svg|png|jpg)$/i,
    use: [
      {
        loader: 'url-loader',
        query: {
          name: '[name].[ext]'
        }
      }
    ]
  });

  config.resolve.extensions.push('.ts', '.tsx', 'woff2');

  config.node = {
    fs: 'empty',
    child_process: 'empty'
  };

  return config;
};


<|start_filename|>.storybook/preview.js<|end_filename|>
import React from 'react';
import { addDecorator } from '@storybook/react';
import { addParameters } from '@storybook/react';
import { ThemeProvider } from 'styled-components';

import theme from '../src/theme';
import GlobalStyles from '../src/global';

addDecorator((storyFn) => (
  <>
    <GlobalStyles />
    <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
  </>
));

addParameters({
  options: {
    showRoots: false,
  },
});


<|start_filename|>tests/jest-runtime.js<|end_filename|>
import 'jest-styled-components'; // makes classnames deterministic

jest.mock('@material-ui/core/Portal', () => {
  return ({ children }) => children;
});


<|start_filename|>.storybook/manager.js<|end_filename|>
import { addons } from '@storybook/addons';
import gnosisTheme from './gnosisTheme';


addons.setConfig({
  enableShortcuts: false,
  showNav: true,
  showPanel: false,
  theme: gnosisTheme,
});


<|start_filename|>.storybook/gnosisTheme.js<|end_filename|>
import { create } from '@storybook/theming/create';

export default create({
  base: '#f7f5f5',

  colorPrimary: '#008C73',
  colorSecondary: '#005546',

  // UI
  appBg: 'white',
  appContentBg: 'white',
  appBorderColor: 'grey',
  appBorderRadius: 4,  

  // Text colors
  textColor: '#333333',
  textInverseColor: 'rgba(255,255,255,0.9)',

  // Toolbar default and active colors
  barTextColor: 'silver',
  barSelectedColor: 'black',
  barBg: 'silver',

  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,

  brandTitle: 'Gnosis theme',
  brandUrl: 'https://gnosis.io',
  brandImage: 'https://miro.medium.com/max/1060/1*DZopze1Xtir7mZHraVNZ_w.png',
  //brandImage: 'https://gnosis-safe.readthedocs.io/en/latest/_images/safe-banner.svg',
});

<|start_filename|>webpack.config.js<|end_filename|>
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'index.min.js',
    sourceMapFilename: '[file].map',
    path: path.join(__dirname, '/dist'),
    libraryTarget: 'umd',
    library: JSON.stringify(require('./package.json').name),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.woff2$/,
        use: {
          loader: 'file-loader',
          options: {},
        },
      },
      {
        test: /\.(svg|png|jpg)$/i,
        use: {
          loader: 'url-loader',
          options: {},
        },
      },
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
        exclude: [/node_modules/],
      },
    ],
  },
  plugins: [new CopyPlugin({ patterns: [{ from: 'src/fonts', to: 'fonts' }] })],
  externals: [
    {
      react: {
        commonjs: 'react',
        commonjs2: 'react',
      },
      'react-dom': {
        commonjs: 'react-dom',
        commonjs2: 'react-dom',
      },
      'styled-components': {
        commonjs: 'styled-components',
        commonjs2: 'styled-components',
      },
    },
    /@material-ui\/core\/.*/,
  ],
  node: {
    fs: 'empty',
    child_process: 'empty',
  },
};
