signal-desktop/.storybook/config.js

124 lines
3.4 KiB
JavaScript
Raw Normal View History

2021-05-28 16:15:17 +00:00
// Copyright 2019-2021 Signal Messenger, LLC
2020-10-30 20:34:04 +00:00
// SPDX-License-Identifier: AGPL-3.0-only
2019-12-17 20:25:57 +00:00
import * as React from 'react';
2021-04-06 20:12:33 +00:00
import { addDecorator, addParameters, configure } from '@storybook/react';
import { withKnobs, boolean, optionsKnob } from '@storybook/addon-knobs';
2019-12-17 20:25:57 +00:00
import classnames from 'classnames';
import * as styles from './styles.scss';
import messages from '../_locales/en/messages.json';
import { I18n } from '../sticker-creator/util/i18n';
import { ClassyProvider } from '../ts/components/PopperRootContext';
const optionsConfig = {
display: 'inline-radio',
};
const persistKnob = id => knob => {
const value = knob(localStorage.getItem(id));
localStorage.setItem(id, value);
return value;
};
const makeThemeKnob = pane =>
persistKnob(`${pane}-pane-theme`)(localValue =>
optionsKnob(
`${pane} Pane Theme`,
{ Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
localValue || '',
optionsConfig,
`${pane} Pane`
)
);
const makeModeKnob = pane =>
persistKnob(`${pane}-pane-mode`)(localValue =>
optionsKnob(
`${pane} Pane Mode`,
{ Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
localValue || 'mouse-mode',
optionsConfig,
`${pane} Pane`
)
);
2019-12-17 20:25:57 +00:00
addDecorator(withKnobs({ escapeHTML: false }));
2019-12-17 20:25:57 +00:00
addDecorator((storyFn /* , context */) => {
const contents = storyFn();
const firstPaneTheme = makeThemeKnob('First');
const firstPaneMode = makeModeKnob('First');
const secondPane = persistKnob('second-pane-active')(localValue =>
boolean('Second Pane Active', localValue !== 'false', 'Second Pane')
);
const secondPaneTheme = makeThemeKnob('Second');
const secondPaneMode = makeModeKnob('Second');
2019-12-17 20:25:57 +00:00
// Adding it to the body as well so that we can cover modals and other
// components that are rendered outside of this decorator container
if (firstPaneTheme === '') {
document.body.classList.remove('dark-theme');
} else {
document.body.classList.add('dark-theme');
}
if (firstPaneMode === 'mouse-mode') {
document.body.classList.remove('keyboard-mode');
document.body.classList.add('mouse-mode');
} else {
document.body.classList.remove('mouse-mode');
document.body.classList.add('keyboard-mode');
}
document.body.classList.add('page-is-visible');
2019-12-17 20:25:57 +00:00
return (
<div className={styles.container}>
<ClassyProvider themes={['dark']}>
<div
2021-05-28 16:15:17 +00:00
className={classnames(styles.panel, firstPaneTheme, firstPaneMode)}
>
{contents}
</div>
</ClassyProvider>
{secondPane ? (
<div
2021-05-28 16:15:17 +00:00
className={classnames(styles.panel, secondPaneTheme, secondPaneMode)}
>
{contents}
</div>
) : null}
2019-12-17 20:25:57 +00:00
</div>
);
});
// Hack to enable hooks in stories: https://github.com/storybookjs/storybook/issues/5721#issuecomment-473869398
addDecorator(Story => <Story />);
addDecorator(story => <I18n messages={messages}>{story()}</I18n>);
2021-04-06 20:12:33 +00:00
addParameters({
axe: {
disabledRules: ['html-has-lang'],
},
});
2019-12-17 20:25:57 +00:00
configure(() => {
// Load main app stories
const tsComponentsContext = require.context(
'../ts/components',
true,
/\.stories.tsx?$/
);
tsComponentsContext.keys().forEach(f => tsComponentsContext(f));
// Load sticker creator stories
const stickerCreatorContext = require.context(
'../sticker-creator',
true,
/\.stories\.tsx?$/
);
stickerCreatorContext.keys().forEach(f => stickerCreatorContext(f));
2019-12-17 20:25:57 +00:00
}, module);