mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Storybook: persist pane knob values in localstorage

Browse source
This commit is contained in:
Sidney Keese 2020-08-27 09:59:04 -07:00 committed by Josh Perez
parent b9c5e7bf1d
commit c08914cddc
1 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
.storybook/config.js
View file

@ -11,31 +11,43 @@ const optionsConfig = {
display: 'inline-radio', display: 'inline-radio',
}; };
const persistKnob = id => knob => {
const value = knob(localStorage.getItem(id));
localStorage.setItem(id, value);
return value;
};
const makeThemeKnob = pane => const makeThemeKnob = pane =>
persistKnob(`${pane}-pane-theme`)(localValue =>
optionsKnob( optionsKnob(
`${pane} Pane Theme`, `${pane} Pane Theme`,
{ Light: '', Dark: classnames('dark-theme', styles.darkTheme) }, { Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
'', localValue || '',
optionsConfig, optionsConfig,
`${pane} Pane` `${pane} Pane`
)
); );
const makeDeviceThemeKnob = pane => const makeDeviceThemeKnob = pane =>
persistKnob(`${pane}-pane-device-theme`)(localValue =>
optionsKnob( optionsKnob(
`${pane} Pane Device Theme`, `${pane} Pane Device Theme`,
{ Android: '', iOS: 'ios-theme' }, { Android: '', iOS: 'ios-theme' },
'', localValue || '',
optionsConfig, optionsConfig,
`${pane} Pane` `${pane} Pane`
)
); );
const makeModeKnob = pane => const makeModeKnob = pane =>
persistKnob(`${pane}-pane-mode`)(localValue =>
optionsKnob( optionsKnob(
`${pane} Pane Mode`, `${pane} Pane Mode`,
{ Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' }, { Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
'mouse-mode', localValue || 'mouse-mode',
optionsConfig, optionsConfig,
`${pane} Pane` `${pane} Pane`
)
); );
addDecorator(withKnobs); addDecorator(withKnobs);
@ -46,7 +58,9 @@ addDecorator((storyFn /* , context */) => {
const firstPaneDeviceTheme = makeDeviceThemeKnob('First'); const firstPaneDeviceTheme = makeDeviceThemeKnob('First');
const firstPaneMode = makeModeKnob('First'); const firstPaneMode = makeModeKnob('First');
const secondPane = boolean('Second Pane Active', false, 'Second Pane'); const secondPane = persistKnob('second-pane-active')(localValue =>
boolean('Second Pane Active', localValue !== 'false', 'Second Pane')
);
const secondPaneTheme = makeThemeKnob('Second'); const secondPaneTheme = makeThemeKnob('Second');
const secondPaneDeviceTheme = makeDeviceThemeKnob('Second'); const secondPaneDeviceTheme = makeDeviceThemeKnob('Second');