configure storybook with emotion

.eslintrc.js

@@ -15,6 +15,8 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
-		'@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/camelcase': 'off',
+    'react/forbid-component-props': [1, { forbid: ['style'] }],
+    'react/forbid-dom-props': [1, { forbid: ['style'] }],
   },
-};
+}

web-app/.storybook/config.ts

@@ -1,5 +1,5 @@
 import { configure } from '@storybook/react'
-import '../src/styles/index.css'
+// import '../src/styles/index.css'
 
 // setup acquireVsCodeApi mock
 // @ts-ignore

web-app/.storybook/webpack.config.js

@@ -1,20 +1,33 @@
 const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 // see typescript setup
 // https://storybook.js.org/docs/configurations/typescript-config/
 module.exports = ({ config }) => {
   config.module.rules.push({
     test: /\.scss$/,
-    use: ['style-loader', 'css-loader', 'sass-loader'],
+    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
     include: path.resolve(__dirname, '../'),
   })
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     loader: require.resolve('babel-loader'),
     options: {
-      presets: [['react-app', { flow: false, typescript: true }]],
+      plugins: [
+        [
+          'babel-plugin-import',
+          {
+            libraryName: '@alifd/next',
+            style: true,
+          },
+        ],
+      ],
+      presets: [['react-app', { flow: false, typescript: true }], ['@emotion/babel-preset-css-prop']],
     },
   })
+
+  config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))
+
   config.resolve.extensions.push('.ts', '.tsx')
 
   config.resolve.modules = ['node_modules', path.resolve(__dirname, '../src')]