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

52
.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 =>
optionsKnob( persistKnob(`${pane}-pane-theme`)(localValue =>
`${pane} Pane Theme`, optionsKnob(
{ Light: '', Dark: classnames('dark-theme', styles.darkTheme) }, `${pane} Pane Theme`,
'', { Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
optionsConfig, localValue || '',
`${pane} Pane` optionsConfig,
`${pane} Pane`
)
); );
const makeDeviceThemeKnob = pane => const makeDeviceThemeKnob = pane =>
optionsKnob( persistKnob(`${pane}-pane-device-theme`)(localValue =>
`${pane} Pane Device Theme`, optionsKnob(
{ Android: '', iOS: 'ios-theme' }, `${pane} Pane Device Theme`,
'', { Android: '', iOS: 'ios-theme' },
optionsConfig, localValue || '',
`${pane} Pane` optionsConfig,
`${pane} Pane`
)
); );
const makeModeKnob = pane => const makeModeKnob = pane =>
optionsKnob( persistKnob(`${pane}-pane-mode`)(localValue =>
`${pane} Pane Mode`, optionsKnob(
{ Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' }, `${pane} Pane Mode`,
'mouse-mode', { Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
optionsConfig, localValue || 'mouse-mode',
`${pane} Pane` optionsConfig,
`${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');