Storybook: Basic messages and messages with reactions

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) {
-      themes.forEach(theme => {
-        div.classList.add(`${theme}-theme`);
+    if (classes) {
+      classes.forEach(theme => {
+        div.classList.add(theme);
       });
     }
 
@@ -21,16 +21,16 @@ const makeApi = (themes?: Array<string>) => ({
 
 export const PopperRootContext = React.createContext(makeApi());
 
-export type ThemedProviderProps = {
-  themes?: Array<string>;
+export type ClassyProviderProps = {
+  classes?: Array<string>;
   children?: React.ReactChildren;
 };
 
-export const ThemedProvider: React.FunctionComponent<ThemedProviderProps> = ({
-  themes,
+export const ClassyProvider: React.FunctionComponent<ClassyProviderProps> = ({
+  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;
-  isSelected: boolean;
-  isSelectedCounter: number;
+  isSticker?: boolean;
+  isSelected?: boolean;
+  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;
-  prevSelectedCounter: number;
+  isSelected?: boolean;
+  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;