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';
|
2020-02-07 19:07:22 +00:00
|
|
|
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';
|
2021-10-27 19:49:58 +00:00
|
|
|
import { ThemeType } from '../ts/types/Util';
|
2020-02-07 19:07:22 +00:00
|
|
|
import { ClassyProvider } from '../ts/components/PopperRootContext';
|
2021-10-27 19:49:58 +00:00
|
|
|
import { StorybookThemeContext } from './StorybookThemeContext';
|
2020-02-07 19:07:22 +00:00
|
|
|
|
|
|
|
const optionsConfig = {
|
|
|
|
display: 'inline-radio',
|
|
|
|
};
|
|
|
|
|
2020-08-27 16:59:04 +00:00
|
|
|
const persistKnob = id => knob => {
|
|
|
|
const value = knob(localStorage.getItem(id));
|
|
|
|
localStorage.setItem(id, value);
|
|
|
|
return value;
|
|
|
|
};
|
|
|
|
|
2020-02-07 19:07:22 +00:00
|
|
|
const makeThemeKnob = pane =>
|
2020-08-27 16:59:04 +00:00
|
|
|
persistKnob(`${pane}-pane-theme`)(localValue =>
|
|
|
|
optionsKnob(
|
|
|
|
`${pane} Pane Theme`,
|
|
|
|
{ Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
|
|
|
|
localValue || '',
|
|
|
|
optionsConfig,
|
|
|
|
`${pane} Pane`
|
|
|
|
)
|
2020-02-07 19:07:22 +00:00
|
|
|
);
|
|
|
|
|
2021-10-27 19:49:58 +00:00
|
|
|
const parseThemeString = str => (str === '' ? ThemeType.light : ThemeType.dark);
|
|
|
|
|
2020-02-07 19:07:22 +00:00
|
|
|
const makeModeKnob = pane =>
|
2020-08-27 16:59:04 +00:00
|
|
|
persistKnob(`${pane}-pane-mode`)(localValue =>
|
|
|
|
optionsKnob(
|
|
|
|
`${pane} Pane Mode`,
|
|
|
|
{ Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
|
|
|
|
localValue || 'mouse-mode',
|
|
|
|
optionsConfig,
|
|
|
|
`${pane} Pane`
|
|
|
|
)
|
2020-02-07 19:07:22 +00:00
|
|
|
);
|
2019-12-17 20:25:57 +00:00
|
|
|
|
2021-10-18 22:43:58 +00:00
|
|
|
addDecorator(withKnobs({ escapeHTML: false }));
|
2019-12-17 20:25:57 +00:00
|
|
|
|
|
|
|
addDecorator((storyFn /* , context */) => {
|
|
|
|
const contents = storyFn();
|
2021-10-27 19:49:58 +00:00
|
|
|
const firstPaneThemeString = makeThemeKnob('First');
|
|
|
|
const firstPaneTheme = parseThemeString(firstPaneThemeString);
|
2020-02-07 19:07:22 +00:00
|
|
|
const firstPaneMode = makeModeKnob('First');
|
|
|
|
|
2020-08-27 16:59:04 +00:00
|
|
|
const secondPane = persistKnob('second-pane-active')(localValue =>
|
|
|
|
boolean('Second Pane Active', localValue !== 'false', 'Second Pane')
|
|
|
|
);
|
2020-02-07 19:07:22 +00:00
|
|
|
|
2021-10-27 19:49:58 +00:00
|
|
|
const secondPaneThemeString = makeThemeKnob('Second');
|
|
|
|
const secondPaneTheme = parseThemeString(secondPaneThemeString);
|
2020-02-07 19:07:22 +00:00
|
|
|
const secondPaneMode = makeModeKnob('Second');
|
2019-12-17 20:25:57 +00:00
|
|
|
|
2020-06-26 00:08:58 +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
|
2021-10-27 19:49:58 +00:00
|
|
|
if (firstPaneThemeString === '') {
|
2020-06-26 00:08:58 +00:00
|
|
|
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');
|
|
|
|
}
|
|
|
|
|
2021-07-30 18:35:43 +00:00
|
|
|
document.body.classList.add('page-is-visible');
|
|
|
|
|
2019-12-17 20:25:57 +00:00
|
|
|
return (
|
|
|
|
<div className={styles.container}>
|
2021-10-27 19:49:58 +00:00
|
|
|
<StorybookThemeContext.Provider value={firstPaneTheme}>
|
|
|
|
<ClassyProvider themes={['dark']}>
|
|
|
|
<div
|
|
|
|
className={classnames(
|
|
|
|
styles.panel,
|
|
|
|
firstPaneThemeString,
|
|
|
|
firstPaneMode
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{contents}
|
|
|
|
</div>
|
|
|
|
</ClassyProvider>
|
|
|
|
</StorybookThemeContext.Provider>
|
2020-02-07 19:07:22 +00:00
|
|
|
{secondPane ? (
|
|
|
|
<div
|
2021-10-27 19:49:58 +00:00
|
|
|
className={classnames(
|
|
|
|
styles.panel,
|
|
|
|
secondPaneThemeString,
|
|
|
|
secondPaneMode
|
|
|
|
)}
|
2020-02-07 19:07:22 +00:00
|
|
|
>
|
2021-10-27 19:49:58 +00:00
|
|
|
<StorybookThemeContext.Provider value={secondPaneTheme}>
|
|
|
|
{contents}
|
|
|
|
</StorybookThemeContext.Provider>
|
2020-02-07 19:07:22 +00:00
|
|
|
</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(() => {
|
2020-02-07 19:07:22 +00:00
|
|
|
// Load main app stories
|
|
|
|
const tsComponentsContext = require.context(
|
|
|
|
'../ts/components',
|
|
|
|
true,
|
|
|
|
/\.stories.tsx?$/
|
|
|
|
);
|
|
|
|
tsComponentsContext.keys().forEach(f => tsComponentsContext(f));
|
2020-08-28 02:11:24 +00:00
|
|
|
// 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);
|