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',
};
const persistKnob = id => knob => {
const value = knob(localStorage.getItem(id));
localStorage.setItem(id, value);
return value;
};
const makeThemeKnob = pane =>
optionsKnob(
`${pane} Pane Theme`,
{ Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
'',
optionsConfig,
`${pane} Pane`
persistKnob(`${pane}-pane-theme`)(localValue =>
optionsKnob(
`${pane} Pane Theme`,
{ Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
localValue || '',
optionsConfig,
`${pane} Pane`
)
);
const makeDeviceThemeKnob = pane =>
optionsKnob(
`${pane} Pane Device Theme`,
{ Android: '', iOS: 'ios-theme' },
'',
optionsConfig,
`${pane} Pane`
persistKnob(`${pane}-pane-device-theme`)(localValue =>
optionsKnob(
`${pane} Pane Device Theme`,
{ Android: '', iOS: 'ios-theme' },
localValue || '',
optionsConfig,
`${pane} Pane`
)
);
const makeModeKnob = pane =>
optionsKnob(
`${pane} Pane Mode`,
{ Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
'mouse-mode',
optionsConfig,
`${pane} Pane`
persistKnob(`${pane}-pane-mode`)(localValue =>
optionsKnob(
`${pane} Pane Mode`,
{ Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
localValue || 'mouse-mode',
optionsConfig,
`${pane} Pane`
)
);
addDecorator(withKnobs);
@ -46,7 +58,9 @@ addDecorator((storyFn /* , context */) => {
const firstPaneDeviceTheme = makeDeviceThemeKnob('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 secondPaneDeviceTheme = makeDeviceThemeKnob('Second');