Merge pull request #2824 from input-output-hk/fix/ddw-844-fix-storybook

[DDW-844] Fix Storybook knobs

Author: DominikGuzei

.github/pull_request_template.md

@@ -41,7 +41,7 @@ Open a thread on #daedalus-qa on Slack, mention `@daedalusqa` and `@daedalusteam
 - [ ] PR assigned to the PR author(s)
 - [ ] `input-output-hk/daedalus-dev` and `input-output-hk/daedalus-qa` assigned as PR reviewers
 - [ ] If there are UI changes, Alexander Rukin assigned as an additional reviewer
-- [ ] All visual regression testing has been reviewed (Go to Github Actions tab -> Select Chromatic workflow -> Run on your working branch)
+- [ ] All visual regression testing has been reviewed (assign `run Chromatic` label to PR to trigger the run)
 - [ ] PR has appropriate labels (`release-vNext`, `feature`/`bug`/`chore`, `WIP`)
 - [ ] PR link is added to a Jira ticket, ticket moved to In Review
 - [ ] PR is updated to the most recent version of the target branch (and there are no conflicts)

.github/workflows/chromatic.yml

@@ -1,13 +1,18 @@
 name: 'Chromatic'
 on:
-  workflow_dispatch:
+  pull_request:
+    types:
+      - labeled
   push:
     branches:
       - develop
 
 jobs:
   chromatic-deployment:
+    if: contains(github.event.pull_request.labels.*.name, 'run Chromatic')
     runs-on: ubuntu-latest
+    env:
+      STORYBOOK_FREEZE_DATE: "true"
     steps:
       - uses: actions/checkout@v1
       - name: Setup Node.js

source/renderer/app/i18n/locales/ja-JP.json

@@ -694,7 +694,7 @@
   "voting.votingRegistration.enterPinCode.step.continueButtonLabel": "続ける",
   "voting.votingRegistration.enterPinCode.step.description": "Fund{nextVotingFundNumber}有権者登録のPINコードを入力してください。ここで設定したPINコードと、次のステップで表示されるQRコードは、スマートフォンでCatalyst Votingアプリを使用して投票するときに必要となります。",
   "voting.votingRegistration.enterPinCode.step.enterPinCodeLabel": "PINコードを入力してください",
-  "voting.votingRegistration.enterPinCode.step.errors.invalidPinCode": "!!!Invalid PIN",
+  "voting.votingRegistration.enterPinCode.step.errors.invalidPinCode": "無効なPINコード",
   "voting.votingRegistration.enterPinCode.step.errors.invalidRepeatPinCode": "PINコードが一致しません",
   "voting.votingRegistration.enterPinCode.step.reminder": "<span>PINコードを忘れないでください。</span>PINを忘れると本登録で投票することができなくなり、登録手続きをやり直すことになります。",
   "voting.votingRegistration.enterPinCode.step.repeatPinCodeLabel": "PINコードを再入力してください",

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: [