Storybook: Basic messages and messages with reactions

.babelrc.js

@@ -1,8 +1,15 @@
 module.exports = {
   presets: ['@babel/preset-react', '@babel/preset-typescript'],
+  // Detects the type of file being babel'd (either esmodule or commonjs)
+  sourceType: 'unambiguous',
   plugins: [
     'react-hot-loader/babel',
     'lodash',
     '@babel/plugin-proposal-class-properties',
-  ],
+    // This plugin converts commonjs to esmodules which is required for
+    // importing commonjs modules from esmodules in storybook. As a part of
+    // converting to TypeScript we should use esmodules and can eventually
+    // remove this plugin
+    process.env.SIGNAL_ENV === 'storybook' && '@babel/transform-runtime',
+  ].filter(Boolean),
 };

.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>
+      <ClassyProvider themes={['dark']}>
-      <ThemedProvider 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);

.storybook/preview-head.html

@@ -1,2 +1,2 @@
 <!-- prettier-ignore -->
-<link rel="stylesheet" href="../stylesheets/manifest_bridge.css" />
+<link rel="stylesheet" href="../stylesheets/manifest.css" />

.storybook/styles.scss

@@ -1,3 +1,5 @@
+@import '../stylesheets/variables';
+
 .container {
   display: flex;
   flex-direction: row;
@@ -9,13 +11,12 @@
 
 .panel {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
   padding: 16px;
+  height: 100%;
+  overflow: auto;
 }
 
 .dark-theme {
-  background-color: #17191d;
+  background-color: $color-gray-95;
+  color: $color-gray-05;
 }

.storybook/webpack.config.js

@@ -6,8 +6,9 @@ module.exports = ({ config }) => {
 
   config.module.rules.unshift(
     {
-      test: /\.tsx?$/,
+      test: /\.[jt]sx?$/,
       loader: 'babel-loader',
+      exclude: /node_modules/,
     },
     {
       test: /\.scss$/,

package.json

@@ -46,7 +46,7 @@
     "dev:grunt": "yarn grunt dev",
     "dev:webpack": "NODE_ENV=development webpack-dev-server --hot",
     "dev:typed-scss": "yarn build:typed-scss -w",
-    "dev:storybook": "start-storybook -p 6006 -s ./",
+    "dev:storybook": "SIGNAL_ENV=storybook start-storybook -p 6006 -s ./",
     "build": "run-s --print-label build:grunt build:typed-scss build:webpack build:release",
     "build:dev": "run-s --print-label build:grunt build:typed-scss build:webpack",
     "build:grunt": "yarn grunt",
@@ -148,6 +148,7 @@
   "devDependencies": {
     "@babel/core": "7.7.7",
     "@babel/plugin-proposal-class-properties": "7.7.4",
+    "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-react": "7.7.4",
     "@babel/preset-typescript": "7.7.7",
     "@storybook/addon-actions": "5.1.11",

styleguide.config.js

@@ -10,36 +10,43 @@ module.exports = {
       name: 'Components',
       description: '',
       components: 'ts/components/[^_]*.tsx',
+      ignore: ['**/*.stories.*'],
     },
     {
       name: 'Conversation',
       description: 'Everything necessary to render a conversation',
       components: 'ts/components/conversation/[^_]*.tsx',
+      ignore: ['**/*.stories.*'],
     },
     {
       name: 'Emoji',
       description: 'All components related to emojis',
       components: 'ts/components/emoji/[^_]*.tsx',
+      ignore: ['**/*.stories.*'],
     },
     {
       name: 'Media Gallery',
       description: 'Display media and documents in a conversation',
       components: 'ts/components/conversation/media-gallery/[^_]*.tsx',
+      ignore: ['**/*.stories.*'],
     },
     {
       name: 'Stickers',
       description: 'All components related to stickers',
       components: 'ts/components/stickers/[^_]*.tsx',
+      ignore: ['**/*.stories.*'],
     },
     {
       name: 'Utility',
       description: 'Utility components used across the application',
       components: 'ts/components/utility/[^_]*.tsx',
+      ignore: ['**/*.stories.*'],
     },
     {
       name: 'Test',
       description: 'Components only used for testing',
       components: 'ts/styleguide/**/*.tsx',
+      ignore: ['**/*.stories.*'],
     },
   ],
   context: {

stylesheets/_modules.scss

@@ -6724,7 +6724,9 @@ button.module-image__border-overlay:focus {
 }
 
 .module-emoji {
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   color: transparent;
   font-family: auto;
 

ts/components/PopperRootContext.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-const makeApi = (themes?: Array<string>) => ({
+const makeApi = (classes?: Array<string>) => ({
   createRoot: () => {
     const div = document.createElement('div');
 
-    if (themes) {
+    if (classes) {
-      themes.forEach(theme => {
+      classes.forEach(theme => {
-        div.classList.add(`${theme}-theme`);
+        div.classList.add(theme);
       });
     }
 
@@ -21,16 +21,16 @@ const makeApi = (themes?: Array<string>) => ({
 
 export const PopperRootContext = React.createContext(makeApi());
 
-export type ThemedProviderProps = {
+export type ClassyProviderProps = {
-  themes?: Array<string>;
+  classes?: Array<string>;
   children?: React.ReactChildren;
 };
 
-export const ThemedProvider: React.FunctionComponent<ThemedProviderProps> = ({
+export const ClassyProvider: React.FunctionComponent<ClassyProviderProps> = ({
-  themes,
+  classes,
   children,
 }) => {
-  const api = React.useMemo(() => makeApi(themes), [themes]);
+  const api = React.useMemo(() => makeApi(classes), [classes]);
 
   return (
     <PopperRootContext.Provider value={api}>

ts/components/conversation/Message.tsx

@@ -65,9 +65,9 @@ export type PropsData = {
   conversationId: string;
   text?: string;
   textPending?: boolean;
-  isSticker: boolean;
+  isSticker?: boolean;
-  isSelected: boolean;
+  isSelected?: boolean;
-  isSelectedCounter: number;
+  isSelectedCounter?: number;
   interactionMode: 'mouse' | 'keyboard';
   direction: 'incoming' | 'outgoing';
   timestamp: number;
@@ -94,7 +94,7 @@ export type PropsData = {
   };
   previews: Array<LinkPreviewType>;
   authorAvatarPath?: string;
-  isExpired: boolean;
+  isExpired?: boolean;
 
   isTapToView?: boolean;
   isTapToViewExpired?: boolean;
@@ -107,7 +107,7 @@ export type PropsData = {
   selectedReaction?: string;
 };
 
-type PropsHousekeeping = {
+export type PropsHousekeeping = {
   i18n: LocalizerType;
   disableMenu?: boolean;
   disableScroll?: boolean;
@@ -158,8 +158,8 @@ interface State {
   expired: boolean;
   imageBroken: boolean;
 
-  isSelected: boolean;
+  isSelected?: boolean;
-  prevSelectedCounter: number;
+  prevSelectedCounter?: number;
 
   pickedReaction?: string;
   reactionViewerRoot: HTMLDivElement | null;

ts/components/conversation/ReactionViewer.tsx

@@ -101,7 +101,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
     return (
       <div {...rest} ref={ref} className="module-reaction-viewer">
         <header className="module-reaction-viewer__header">
-          {...renderedEmojis
+          {renderedEmojis
             .filter(e => e === 'all' || Boolean(grouped[e]))
             .map((cat, index) => {
               const re = grouped[cat] || reactions;

tsconfig.json

@@ -33,6 +33,7 @@
 
     // Module Resolution Options
     "moduleResolution": "node", // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
+    "resolveJsonModule": true,
     // "baseUrl": "./",                       // Base directory to resolve non-absolute module names.
     // "paths": {},                           // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
     // "rootDirs": [],                        // List of root folders whose combined content represents the structure of the project at runtime.

yarn.lock

@@ -226,6 +226,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-module-imports@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
+  integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a"
@@ -257,6 +264,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
+  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
+
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
@@ -811,6 +823,16 @@
     resolve "^1.8.1"
     semver "^5.5.1"
 
+"@babel/plugin-transform-runtime@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.8.3.tgz#c0153bc0a5375ebc1f1591cb7eea223adea9f169"
+  integrity sha512-/vqUt5Yh+cgPZXXjmaG9NT8aVfThKk7G4OqkVhrXqwsC5soMn/qTCxs36rZ2QFhpfTJcjw4SNDIZ4RUb8OL4jQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
 "@babel/plugin-transform-shorthand-properties@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
@@ -1071,6 +1093,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
+  integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@develar/schema-utils@~2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@develar/schema-utils/-/schema-utils-2.1.0.tgz#eceb1695bfbed6f6bb84666d5d3abe5e1fd54e17"