Storybook: Basic messages and messages with reactions

.storybook/config.js

@@ -1,27 +1,83 @@
 import * as React from 'react';
 import { addDecorator, configure } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
+import { withKnobs, boolean, optionsKnob } from '@storybook/addon-knobs';
 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 { ThemedProvider } from '../ts/components/PopperRootContext';
+import { ClassyProvider } from '../ts/components/PopperRootContext';
+
+const optionsConfig = {
+  display: 'inline-radio',
+};
+
+const makeThemeKnob = pane =>
+  optionsKnob(
+    `${pane} Pane Theme`,
+    { Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
+    '',
+    optionsConfig,
+    `${pane} Pane`
+  );
+
+const makeDeviceThemeKnob = pane =>
+  optionsKnob(
+    `${pane} Pane Device Theme`,
+    { Android: '', iOS: 'ios-theme' },
+    '',
+    optionsConfig,
+    `${pane} Pane`
+  );
+
+const makeModeKnob = pane =>
+  optionsKnob(
+    `${pane} Pane Mode`,
+    { Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
+    'mouse-mode',
+    optionsConfig,
+    `${pane} Pane`
+  );
 
 addDecorator(withKnobs);
 
 addDecorator((storyFn /* , context */) => {
   const contents = storyFn();
+  const firstPaneTheme = makeThemeKnob('First');
+  const firstPaneDeviceTheme = makeDeviceThemeKnob('First');
+  const firstPaneMode = makeModeKnob('First');
+
+  const secondPane = boolean('Second Pane Active', false, 'Second Pane');
+
+  const secondPaneTheme = makeThemeKnob('Second');
+  const secondPaneDeviceTheme = makeDeviceThemeKnob('Second');
+  const secondPaneMode = makeModeKnob('Second');
 
   return (
     <div className={styles.container}>
-      <div className={styles.panel}>{contents}</div>
-      <ThemedProvider themes={['dark']}>
+      <ClassyProvider themes={['dark']}>
         <div
-          className={classnames(styles.darkTheme, styles.panel, 'dark-theme')}
+          className={classnames(
+            styles.panel,
+            firstPaneTheme,
+            firstPaneDeviceTheme,
+            firstPaneMode
+          )}
         >
           {contents}
         </div>
-      </ThemedProvider>
+      </ClassyProvider>
+      {secondPane ? (
+        <div
+          className={classnames(
+            styles.panel,
+            secondPaneTheme,
+            secondPaneDeviceTheme,
+            secondPaneMode
+          )}
+        >
+          {contents}
+        </div>
+      ) : null}
     </div>
   );
 });
@@ -39,4 +95,11 @@ configure(() => {
     /\.stories\.tsx?$/
   );
   stickerCreatorContext.keys().forEach(f => stickerCreatorContext(f));
+  // Load main app stories
+  const tsComponentsContext = require.context(
+    '../ts/components',
+    true,
+    /\.stories.tsx?$/
+  );
+  tsComponentsContext.keys().forEach(f => tsComponentsContext(f));
 }, module);