[DDW-1143] Fix languages stories (#3063)

* [DDW-1143] Fix for storybook locale args passing to the components

It fixes the locale in storybook to no longer be undefined.

* [DDW-1143] Fixes TSLint errors on component properties

Fixes TsLint errors on passing props to the storybook components.

* [DDW-1143] Adds changelog

* [DDW-1143]Fixes null values as last resort

* [DDW-1143] Fixes store state working with storybook for Languages stories.

* [DDW-1143] Adds a preselected store property on top of the property of the component and the storybook store.

* [DDW-1137] Add updates to the branch for cleaner code.

* [DDW-1137] Uses now default configs.

Co-authored-by: Tomislav Horaček <[email protected]>

Author: VanessaPC

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Chores
 
+- Fixed Language components in Storybook to have it's own mocked store ([PR 3063](https://github.com/input-output-hk/daedalus/pull/3063))
 - Updated `cardano-node` configs for Preprod respin ([PR 3070](https://github.com/input-output-hk/daedalus/pull/3070))
 - Fixed the properties and providers for the Send stories ([PR 3047](https://github.com/input-output-hk/daedalus/pull/3047))
 - Fixed locale in Storybook ([PR 3062](https://github.com/input-output-hk/daedalus/pull/3062))

storybook/stories/settings/language/Language.stories.tsx

@@ -1,40 +1,81 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import StoryDecorator from '../../_support/StoryDecorator';
-import InitialSettings from '../../../../source/renderer/app/components/profile/initial-settings/InitialSettings';
+import { withState, Store } from '@dump247/storybook-state';
 import {
   DATE_ENGLISH_OPTIONS,
+  LANGUAGE_OPTIONS,
   NUMBER_OPTIONS,
   TIME_OPTIONS,
 } from '../../../../source/renderer/app/config/profileConfig';
+import StoryDecorator from '../../_support/StoryDecorator';
+import InitialSettings from '../../../../source/renderer/app/components/profile/initial-settings/InitialSettings';
+
+interface StoryStore {
+  currentDateFormat: string;
+  currentNumberFormat: string;
+  currentTimeFormat: string;
+  currentLocale: string;
+}
+
+const mockedLanguageState = {
+  currentDateFormat: DATE_ENGLISH_OPTIONS[0].value,
+  currentNumberFormat: NUMBER_OPTIONS[0].value,
+  currentTimeFormat: TIME_OPTIONS[0].value,
+  currentLocale: LANGUAGE_OPTIONS[0].value,
+};
+
+const onValueChange = (
+  store: Store<StoryStore>,
+  id: string,
+  value: string
+): void => {
+  const fieldIdToStoreKeyMap = {
+    dateFormat: 'currentDateFormat',
+    numberFormat: 'currentNumberFormat',
+    timeFormat: 'currentTimeFormat',
+    locale: 'currentLocale',
+  };
+
+  store.set({
+    [fieldIdToStoreKeyMap[id]]: value,
+  });
+
+  if (id === 'locale') {
+    const currentDateFormat =
+      value === mockedLanguageState.currentLocale
+        ? mockedLanguageState.currentDateFormat
+        : 'YYYY年MM月DD日';
+    store.set({
+      currentDateFormat,
+    });
+  }
+};
 
 storiesOf('Settings / Language', module)
   .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>) // ====== Stories ======
-  // @ts-ignore ts-migrate(2345) FIXME: Argument of type '({ locale }: { locale: string; }... Remove this comment to see the full error message
-  .add('Select Language - initial', (_, { locale }: { locale: string }) => (
-    <div>
-      <InitialSettings
-        onSubmit={action('submit')}
-        onChangeItem={action('onChangeItem')}
-        currentDateFormat={DATE_ENGLISH_OPTIONS[0].value}
-        currentLocale={locale}
-        currentNumberFormat={NUMBER_OPTIONS[0].value}
-        currentTimeFormat={TIME_OPTIONS[0].value}
-      />
-    </div>
-  ))
-  // @ts-ignore ts-migrate(2345) FIXME: Argument of type '({ locale }: { locale: string; }... Remove this comment to see the full error message
-  .add('Select Language - submitting', (_, { locale }: { locale: string }) => (
-    <div>
-      <InitialSettings
-        onSubmit={action('submit')}
-        onChangeItem={action('onChangeItem')}
-        currentDateFormat={DATE_ENGLISH_OPTIONS[0].value}
-        currentLocale={locale}
-        currentNumberFormat={NUMBER_OPTIONS[0].value}
-        currentTimeFormat={TIME_OPTIONS[0].value}
-        isSubmitting
-      />
-    </div>
-  ));
+  .add(
+    'Select Language - initial',
+    withState(mockedLanguageState, (store) => (
+      <div>
+        <InitialSettings
+          onSubmit={action('submit')}
+          onChangeItem={(id, value) => onValueChange(store, id, value)}
+          {...store.state}
+        />
+      </div>
+    ))
+  )
+  .add(
+    'Select Language - submitting',
+    withState(mockedLanguageState, (store) => (
+      <div>
+        <InitialSettings
+          onSubmit={action('submit')}
+          onChangeItem={(id, value) => onValueChange(store, id, value)}
+          isSubmitting
+          {...store.state}
+        />
+      </div>
+    ))
+  );