Skip to content

Commit 20cb512

Browse files
VanessaPCVanessaPC
authored
[DDW-1152] Fix general stories (#3064)
* [DDW-1152] Fix General > General story to have it's own storybook state. * [DDW-1152] Fixes the toggle status and story status update on General > Wallets. * [DDW-1152] Fixes the toggle statuses in General - Security * [DDW-1152] Code cleanup after all the solutions are added. * [DDW-1152] Updates Changelog entry. * [DDW-1152] Code cleanup to the final solution of general stories. * [DDW-1152] Cleaning up both Languages and General stories. * [DDW-1152] Small adjustment on Changelog input.
1 parent dd0db53 commit 20cb512

File tree

4 files changed

+113
-126
lines changed

4 files changed

+113
-126
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
### Chores
66

7-
- Increase minimum free space required from 2gb to 4gb ([PR 3071](https://github.com/input-output-hk/daedalus/pull/3071))
7+
- Fixed Storybook state for General stories ([PR 3064](https://github.com/input-output-hk/daedalus/pull/3064))
8+
- Increased minimum free space required from 2gb to 4gb ([PR 3071](https://github.com/input-output-hk/daedalus/pull/3071))
89
- Fixed Language components in Storybook to have it's own mocked store ([PR 3063](https://github.com/input-output-hk/daedalus/pull/3063))
910
- Updated `cardano-node` configs for Preprod respin ([PR 3070](https://github.com/input-output-hk/daedalus/pull/3070))
1011
- Fixed the properties and providers for the Send stories ([PR 3047](https://github.com/input-output-hk/daedalus/pull/3047))

‎storybook/stories/settings/general/General.stories.tsx‎

Lines changed: 57 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
11
import React from 'react';
2-
import { findKey } from 'lodash';
3-
import addons from '@storybook/addons';
4-
import { boolean, number, CHANGE } from '@storybook/addon-knobs';
2+
import { boolean, number } from '@storybook/addon-knobs';
53
import { storiesOf } from '@storybook/react';
64
import { action } from '@storybook/addon-actions';
75
import { withState } from '@dump247/storybook-state';
86
import SettingsWrapper from '../utils/SettingsWrapper';
9-
import {
10-
DATE_ENGLISH_OPTIONS,
11-
LANGUAGE_OPTIONS,
12-
NUMBER_OPTIONS,
13-
TIME_OPTIONS,
14-
} from '../../../../source/renderer/app/config/profileConfig';
157
import { updateParam } from '../../../addons/DaedalusMenu';
16-
import { locales, themesIds } from '../../_support/config';
8+
import { themesIds } from '../../_support/config';
179
// Screens
1810
import ProfileSettingsForm from '../../../../source/renderer/app/components/widgets/forms/ProfileSettingsForm';
1911
import StakePoolsSettings from '../../../../source/renderer/app/components/settings/categories/StakePoolsSettings';
@@ -23,14 +15,22 @@ import TermsOfUseSettings from '../../../../source/renderer/app/components/setti
2315
import WalletsSettings from '../../../../source/renderer/app/components/settings/categories/WalletsSettings';
2416
import SecuritySettings from '../../../../source/renderer/app/components/settings/categories/SecuritySettings';
2517
// Assets and helpers
18+
import { mockedLocaleState, onLocaleValueChange } from '../utils/helpers';
2619
import currenciesList from '../../../../source/renderer/app/config/currenciesList.json';
2720
import { getLocalizedCurrenciesList } from '../../../../source/renderer/app/config/currencyConfig';
2821

29-
const changeControl = (name: string, value: boolean) => {
30-
addons.getChannel().emit(CHANGE, {
31-
name,
32-
value,
33-
});
22+
const mockedWalletsState = {
23+
currencyIsActive: true,
24+
currencySelected: {
25+
id: 'uniswap-state-dollar',
26+
code: 'usd',
27+
name: 'unified Stable Dollar',
28+
},
29+
};
30+
31+
const mockedSecurityStore = {
32+
discreetMode: true,
33+
openDiscreetMode: false,
3434
};
3535

3636
const getParamName = (obj, itemName): any =>
@@ -39,52 +39,38 @@ const getParamName = (obj, itemName): any =>
3939
/* eslint-disable consistent-return */
4040
storiesOf('Settings / General', module)
4141
.addDecorator(SettingsWrapper) // ====== Stories ======
42-
.add('General', () => (
43-
<ProfileSettingsForm
44-
isSubmitting={boolean('isSubmitting', false)}
45-
onSubmit={action('submit')}
46-
onChangeItem={(param: string, value: string) => {
47-
if (param === 'locale') {
48-
updateParam({
49-
param: 'localeName',
50-
value: findKey(locales, (item) => item === value),
51-
});
52-
}
53-
}}
54-
currentDateFormat={DATE_ENGLISH_OPTIONS[0].value}
55-
currentLocale={LANGUAGE_OPTIONS[0].value}
56-
currentNumberFormat={NUMBER_OPTIONS[0].value}
57-
currentTimeFormat={TIME_OPTIONS[0].value}
58-
/>
59-
))
42+
.add(
43+
'General',
44+
withState(mockedLocaleState, (store) => (
45+
<ProfileSettingsForm
46+
isSubmitting={boolean('isSubmitting', false)}
47+
onSubmit={action('submit')}
48+
onChangeItem={(id, value) => onLocaleValueChange(store, id, value)}
49+
{...store.state}
50+
/>
51+
))
52+
)
6053
.add(
6154
'Wallets',
62-
withState(
63-
{
64-
currencySelected: {
65-
id: 'uniswap-state-dollar',
66-
code: 'usd',
67-
name: 'unified Stable Dollar',
68-
},
69-
},
70-
(store) => (
71-
<WalletsSettings
72-
currencySelected={store.state.currencySelected}
73-
// @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.
74-
currencyRate={0.321}
75-
// @ts-ignore ts-migrate(2345) FIXME: Argument of type '{ aed: { code: string; decimalDi... Remove this comment to see the full error message
76-
currencyList={getLocalizedCurrenciesList(currenciesList, 'en-US')}
77-
currencyIsActive
78-
onSelectCurrency={(code) =>
79-
store.set({
80-
currencySelected: currenciesList[code],
81-
})
82-
}
83-
onToggleCurrencyIsActive={action('onToggleCurrencyIsActive')}
84-
onOpenExternalLink={action('onOpenExternalLink')}
85-
/>
86-
)
87-
)
55+
withState(mockedWalletsState, (store) => (
56+
<WalletsSettings
57+
currencySelected={store.state.currencySelected}
58+
// @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.
59+
currencyRate={0.321}
60+
// @ts-ignore ts-migrate(2345) FIXME: Argument of type '{ aed: { code: string; decimalDi... Remove this comment to see the full error message
61+
currencyList={getLocalizedCurrenciesList(currenciesList, 'en-US')}
62+
onSelectCurrency={(code) =>
63+
store.set({
64+
currencySelected: currenciesList[code],
65+
})
66+
}
67+
onToggleCurrencyIsActive={(value) =>
68+
store.set({ currencyIsActive: value })
69+
}
70+
onOpenExternalLink={action('onOpenExternalLink')}
71+
{...store.state}
72+
/>
73+
))
8874
)
8975
.add('Stake Pools', () => (
9076
<StakePoolsSettings
@@ -132,17 +118,15 @@ storiesOf('Settings / General', module)
132118
analyticsAccepted={boolean('analyticsAccepted', false)}
133119
/>
134120
))
135-
.add('Security', () => (
136-
<SecuritySettings
137-
discreetMode={boolean('discreetMode', false)}
138-
openDiscreetMode={boolean('openDiscreetMode', false)}
139-
onDiscreetModeToggle={() =>
140-
// @ts-ignore ts-migrate(2554) FIXME: Expected 2-3 arguments, but got 1.
141-
changeControl('discreetMode', !boolean('discreetMode'))
142-
}
143-
onOpenDiscreetModeToggle={() =>
144-
// @ts-ignore ts-migrate(2554) FIXME: Expected 2-3 arguments, but got 1.
145-
changeControl('openDiscreetMode', !boolean('openDiscreetMode'))
146-
}
147-
/>
148-
));
121+
.add(
122+
'Security',
123+
withState(mockedSecurityStore, (store) => (
124+
<SecuritySettings
125+
onDiscreetModeToggle={(value) => store.set({ discreetMode: value })}
126+
onOpenDiscreetModeToggle={(value) =>
127+
store.set({ openDiscreetMode: value })
128+
}
129+
{...store.state}
130+
/>
131+
))
132+
);

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

Lines changed: 6 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,32 @@
11
import React from 'react';
22
import { storiesOf } from '@storybook/react';
33
import { action } from '@storybook/addon-actions';
4-
import { withState, Store } from '@dump247/storybook-state';
5-
import {
6-
DATE_ENGLISH_OPTIONS,
7-
LANGUAGE_OPTIONS,
8-
NUMBER_OPTIONS,
9-
TIME_OPTIONS,
10-
} from '../../../../source/renderer/app/config/profileConfig';
4+
import { withState } from '@dump247/storybook-state';
5+
import { mockedLocaleState, onLocaleValueChange } from '../utils/helpers';
116
import StoryDecorator from '../../_support/StoryDecorator';
127
import InitialSettings from '../../../../source/renderer/app/components/profile/initial-settings/InitialSettings';
138

14-
interface StoryStore {
15-
currentDateFormat: string;
16-
currentNumberFormat: string;
17-
currentTimeFormat: string;
18-
currentLocale: string;
19-
}
20-
21-
const mockedLanguageState = {
22-
currentDateFormat: DATE_ENGLISH_OPTIONS[0].value,
23-
currentNumberFormat: NUMBER_OPTIONS[0].value,
24-
currentTimeFormat: TIME_OPTIONS[0].value,
25-
currentLocale: LANGUAGE_OPTIONS[0].value,
26-
};
27-
28-
const onValueChange = (
29-
store: Store<StoryStore>,
30-
id: string,
31-
value: string
32-
): void => {
33-
const fieldIdToStoreKeyMap = {
34-
dateFormat: 'currentDateFormat',
35-
numberFormat: 'currentNumberFormat',
36-
timeFormat: 'currentTimeFormat',
37-
locale: 'currentLocale',
38-
};
39-
40-
store.set({
41-
[fieldIdToStoreKeyMap[id]]: value,
42-
});
43-
44-
if (id === 'locale') {
45-
const currentDateFormat =
46-
value === mockedLanguageState.currentLocale
47-
? mockedLanguageState.currentDateFormat
48-
: 'YYYY年MM月DD日';
49-
store.set({
50-
currentDateFormat,
51-
});
52-
}
53-
};
54-
559
storiesOf('Settings / Language', module)
5610
.addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>) // ====== Stories ======
5711
.add(
5812
'Select Language - initial',
59-
withState(mockedLanguageState, (store) => (
13+
withState(mockedLocaleState, (store) => (
6014
<div>
6115
<InitialSettings
6216
onSubmit={action('submit')}
63-
onChangeItem={(id, value) => onValueChange(store, id, value)}
17+
onChangeItem={(id, value) => onLocaleValueChange(store, id, value)}
6418
{...store.state}
6519
/>
6620
</div>
6721
))
6822
)
6923
.add(
7024
'Select Language - submitting',
71-
withState(mockedLanguageState, (store) => (
25+
withState(mockedLocaleState, (store) => (
7226
<div>
7327
<InitialSettings
7428
onSubmit={action('submit')}
75-
onChangeItem={(id, value) => onValueChange(store, id, value)}
29+
onChangeItem={(id, value) => onLocaleValueChange(store, id, value)}
7630
isSubmitting
7731
{...store.state}
7832
/>

‎storybook/stories/settings/utils/helpers.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Store } from '@dump247/storybook-state';
2+
import {
3+
DATE_ENGLISH_OPTIONS,
4+
LANGUAGE_OPTIONS,
5+
NUMBER_OPTIONS,
6+
TIME_OPTIONS,
7+
} from '../../../../source/renderer/app/config/profileConfig';
8+
9+
export interface LocaleStoryStore {
10+
currentDateFormat: string;
11+
currentNumberFormat: string;
12+
currentTimeFormat: string;
13+
currentLocale: string;
14+
}
15+
16+
export const mockedLocaleState = {
17+
currentDateFormat: DATE_ENGLISH_OPTIONS[0].value,
18+
currentNumberFormat: NUMBER_OPTIONS[0].value,
19+
currentTimeFormat: TIME_OPTIONS[0].value,
20+
currentLocale: LANGUAGE_OPTIONS[0].value,
21+
};
22+
23+
export const onLocaleValueChange = (
24+
store: Store<LocaleStoryStore>,
25+
id: string,
26+
value: string
27+
): void => {
28+
const fieldIdToStoreKeyMap = {
29+
dateFormat: 'currentDateFormat',
30+
numberFormat: 'currentNumberFormat',
31+
timeFormat: 'currentTimeFormat',
32+
locale: 'currentLocale',
33+
};
34+
35+
store.set({
36+
[fieldIdToStoreKeyMap[id]]: value,
37+
});
38+
39+
if (id === 'locale') {
40+
const currentDateFormat =
41+
value === mockedLocaleState.currentLocale
42+
? mockedLocaleState.currentDateFormat
43+
: 'YYYY年MM月DD日';
44+
store.set({
45+
currentDateFormat,
46+
});
47+
}
48+
};

0 commit comments

Comments
 (0)