[DDW-844] Fix Storybook knobs

Author: Marcin Mazurek

package.json

@@ -42,7 +42,7 @@
     "stylelint:fix": "yarn stylelint --fix",
     "manage:translations": "gulp purge:translations && gulp clear:cache && gulp build && ts-node ./translations/translation-runner.ts",
     "storybook": "start-storybook -p 6006 -c storybook --ci /",
-    "storybook:build": "build-storybook -c storybook -o dist/storybook",
+    "storybook:build": "STORYBOOK_FREEZE_DATE=true build-storybook -c storybook -o dist/storybook",
     "themes:check:createTheme": "gulp build:themes && ts-node -r esm ./dist/scripts/check.js",
     "themes:update": "gulp build:themes && ts-node -r esm ./dist/scripts/update.js && yarn prettier --loglevel warn --write source/renderer/app/themes/daedalus/*.ts",
     "themes:copy": "ts-node -r @babel/register -r @babel/polyfill source/renderer/app/themes/utils/copyTheme.ts && yarn prettier --loglevel warn --write source/renderer/app/themes/daedalus/*.ts",

storybook/addons.ts

@@ -1,3 +1,4 @@
+// date override must be imported and set up before any modules that rely on the Date object
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register'; // import './addons/DaedalusMenu/register';

storybook/config.tsx

@@ -1,6 +1,6 @@
+import './monkeyPatchDateTime';
 import React from 'react';
 import { configure, addDecorator } from '@storybook/react';
-import timemachine from 'timemachine';
 import StoryWrapper from './stories/_support/StoryWrapper';
 import '!style-loader!css-loader!sass-loader!../source/renderer/app/themes/index.global.scss'; // eslint-disable-line
 
@@ -13,6 +13,3 @@ function loadStories() {
 }
 
 configure(loadStories, module);
-timemachine.config({
-  dateString: 'Sat, 01 Jan 2022 10:00:00 GMT',
-});

storybook/monkeyPatchDateTime.ts

@@ -0,0 +1,9 @@
+// freezing the date is required for producing consistent snapshots
+// for visual regression testing with Chromatic
+if (process.env.STORYBOOK_FREEZE_DATE === 'true') {
+  const timemachine = require('timemachine');
+
+  timemachine.config({
+    dateString: 'Sat, 01 Jan 2022 10:00:00 GMT',
+  });
+}

storybook/webpack.config.js

@@ -72,7 +72,7 @@ module.exports = async ({ config }) => {
       rules: [
         jsxRule,
         {
-          test: /.tsx?$/,
+          test: /\.tsx?$/,
           loader: 'babel-loader',
           options: {
             presets: [