Fix storybook config

babel.config.js

@@ -1,42 +1,48 @@
 module.exports = api => {
   const isTest = api.env("test");
+  const isStorybook = api.env("storybook");
 
-  const ignore = isTest
-    ? []
-    : ["**/*.test.ts", "**/*.test.tsx", "src/storybook"];
+  const ignore =
+    isTest || isStorybook
+      ? []
+      : ["**/*.test.ts", "**/*.test.tsx", "src/storybook"];
+
+  const presets = [
+    [
+      "@babel/preset-env",
+      {
+        corejs: "3.2.1",
+        modules: isTest ? "auto" : false,
+        useBuiltIns: "usage"
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ];
+
+  const plugins = [
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        decoratorsBeforeExport: true
+      }
+    ],
+    "@babel/plugin-proposal-object-rest-spread",
+    "react-intl-auto",
+    [
+      "react-intl",
+      {
+        extractFromFormatMessageCall: true,
+        messagesDir: "build/locale/"
+      }
+    ]
+  ];
 
   return {
-    presets: [
-      [
-        "@babel/preset-env",
-        {
-          corejs: "3.2.1",
-          modules: isTest ? "auto" : false,
-          useBuiltIns: "usage"
-        }
-      ],
-      "@babel/preset-react",
-      "@babel/preset-typescript"
-    ],
-    plugins: [
-      "@babel/plugin-proposal-numeric-separator",
-      "@babel/plugin-proposal-class-properties",
-      [
-        "@babel/plugin-proposal-decorators",
-        {
-          decoratorsBeforeExport: true
-        }
-      ],
-      "@babel/plugin-proposal-object-rest-spread",
-      "react-intl-auto",
-      [
-        "react-intl",
-        {
-          extractFromFormatMessageCall: true,
-          messagesDir: "build/locale/"
-        }
-      ]
-    ],
+    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,
-      transpileOnly: true
+      configFile: resolve("../../babel.config.js"),
+      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.]+)?$/,