Fix storybook config

babel.config.js

@@ -1,12 +1,13 @@
 module.exports = api => {
   const isTest = api.env("test");
+  const isStorybook = api.env("storybook");
 
-  const ignore = isTest
+  const ignore =
+    isTest || isStorybook
       ? []
       : ["**/*.test.ts", "**/*.test.tsx", "src/storybook"];
 
-  return {
+  const presets = [
-    presets: [
     [
       "@babel/preset-env",
       {
@@ -17,8 +18,9 @@ module.exports = api => {
     ],
     "@babel/preset-react",
     "@babel/preset-typescript"
-    ],
+  ];
-    plugins: [
+
+  const plugins = [
     "@babel/plugin-proposal-numeric-separator",
     "@babel/plugin-proposal-class-properties",
     [
@@ -36,7 +38,11 @@ module.exports = api => {
         messagesDir: "build/locale/"
       }
     ]
-    ],
+  ];
+
+  return {
+    presets,
+    plugins,
     ignore
   };
 };

src/home/components/HomeNotificationTable/HomeNotificationTable.tsx

@@ -70,7 +70,7 @@ const HomeNotificationTable = withStyles(styles, {
                 } are ready to fulfill"
                     id="homeNotificationTableOrders"
                     values={{
-                      amount: ordersToFulfill
+                      amount: <strong>{ordersToFulfill}</strong>
                     }}
                   />
                 </Typography>
@@ -100,7 +100,7 @@ const HomeNotificationTable = withStyles(styles, {
                 } to capture"
                     id="homeNotificationTablePayments"
                     values={{
-                      amount: ordersToCapture
+                      amount: <strong>{ordersToCapture}</strong>
                     }}
                   />
                 </Typography>
@@ -130,7 +130,7 @@ const HomeNotificationTable = withStyles(styles, {
                 } out of stock"
                     id="homeNotificationTableProducts"
                     values={{
-                      amount: productsOutOfStock
+                      amount: <strong>{productsOutOfStock}</strong>
                     }}
                   />
                 </Typography>

src/storybook/webpack.config.js

@@ -1,15 +1,18 @@
 /* eslint-disable */
+const path = require("path");
 const CheckerPlugin = require("fork-ts-checker-webpack-plugin");
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 
+const resolve = resolvePath => path.resolve(__dirname, resolvePath);
+
 module.exports = ({ config }) => {
   config.module.rules.push({
-    test: /\.tsx?$/,
+    test: /\.(jsx?|tsx?)$/,
     exclude: /node_modules/,
-    loader: "ts-loader",
+    loader: "babel-loader",
     options: {
-      experimentalWatchApi: true,
+      configFile: resolve("../../babel.config.js"),
-      transpileOnly: true
+      envName: "storybook"
     }
   });
   config.optimization.removeAvailableModules = false;

webpack.config.js

@@ -69,7 +69,10 @@ module.exports = (env, argv) => {
         {
           test: /\.(jsx?|tsx?)$/,
           exclude: /node_modules/,
-          loader: "babel-loader"
+          loader: "babel-loader",
+          options: {
+            configFile: resolve("./babel.config.js")
+          }
         },
         {
           test: /\.(eot|otf|png|svg|jpg|ttf|woff|woff2)(\?v=[0-9.]+)?$/,