Update eslint to 8.27.0

.eslintrc.js

@@ -94,6 +94,33 @@ const rules = {
   // Prefer functional components with default params
   'react/require-default-props': 'off',
 
+  // Empty fragments are used in adapters between backbone and react views.
+  'react/jsx-no-useless-fragment': ['error', {
+    allowExpressions: true,
+  }],
+
+  // Our code base has tons of arrow functions passed directly to components.
+  'react/jsx-no-bind': 'off',
+
+  // Does not support forwardRef
+  'react/no-unused-prop-types': 'off',
+
+  // Not useful for us as we have lots of complicated types.
+  'react/destructuring-assignment': 'off',
+
+  'react/function-component-definition': ['error', {
+    namedComponents: 'function-declaration',
+    unnamedComponents: 'arrow-function',
+  }],
+
+  'react/display-name': 'error',
+
+  // Allow returning values from promise executors for brevity.
+  'no-promise-executor-return': 'off',
+
+  // Redux ducks use this a lot
+  'default-param-last': 'off',
+
   'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
 
   'no-restricted-syntax': [

package.json

@@ -259,8 +259,8 @@
     "@types/webpack-dev-server": "3.11.3",
     "@types/websocket": "1.0.0",
     "@types/yargs": "17.0.7",
-    "@typescript-eslint/eslint-plugin": "5.6.0",
-    "@typescript-eslint/parser": "5.6.0",
+    "@typescript-eslint/eslint-plugin": "5.43.0",
+    "@typescript-eslint/parser": "5.43.0",
     "arraybuffer-loader": "1.0.3",
     "asar": "3.1.0",
     "babel-core": "7.0.0-bridge.0",
@@ -281,13 +281,13 @@
     "electron-notarize": "1.2.1",
     "endanger": "7.0.4",
     "esbuild": "0.15.8",
-    "eslint": "7.7.0",
-    "eslint-config-airbnb-typescript-prettier": "4.2.0",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-mocha": "9.0.0",
-    "eslint-plugin-more": "1.0.0",
-    "eslint-plugin-react": "7.20.6",
+    "eslint": "8.27.0",
+    "eslint-config-airbnb-typescript-prettier": "5.0.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-mocha": "10.1.0",
+    "eslint-plugin-more": "1.0.5",
+    "eslint-plugin-react": "7.31.10",
     "file-loader": "4.2.0",
     "html-webpack-plugin": "5.3.1",
     "json-to-ast": "2.1.0",
@@ -298,7 +298,7 @@
     "nyc": "11.4.1",
     "patch-package": "6.4.7",
     "playwright": "1.17.1",
-    "prettier": "2.6.0",
+    "prettier": "2.7.1",
     "sass": "1.49.7",
     "sass-loader": "10.2.0",
     "sinon": "11.1.1",

sticker-creator/app/index.tsx

@@ -20,10 +20,10 @@ export type AppPropsType = Readonly<{
   hasCustomTitleBar: boolean;
 }>;
 
-export const App = ({
+export function App({
   executeMenuRole,
   hasCustomTitleBar,
-}: AppPropsType): JSX.Element => {
+}: AppPropsType): JSX.Element {
   const i18n = useI18n();
   const theme = useTheme();
 
@@ -57,4 +57,4 @@ export const App = ({
       </div>
     </TitleBarContainer>
   );
-};
+}

sticker-creator/app/stages/AppStage.tsx

@@ -35,7 +35,7 @@ const getClassName = ({ noMessage, empty }: Props) => {
   return styles.main;
 };
 
-export const AppStage: React.ComponentType<Props> = props => {
+export function AppStage(props: Props): JSX.Element {
   const {
     children,
     next,
@@ -101,4 +101,4 @@ export const AppStage: React.ComponentType<Props> = props => {
       />
     </>
   );
-};
+}

sticker-creator/app/stages/DropStage.tsx

@@ -10,7 +10,7 @@ import { StickerGrid } from '../../components/StickerGrid';
 import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 
-export const DropStage: React.ComponentType = () => {
+export function DropStage(): JSX.Element {
   const i18n = useI18n();
   const stickerPaths = stickersDuck.useStickerOrder();
   const stickersReady = stickersDuck.useStickersReady();
@@ -40,4 +40,4 @@ export const DropStage: React.ComponentType = () => {
       </div>
     </AppStage>
   );
-};
+}

sticker-creator/app/stages/EmojiStage.tsx

@@ -9,7 +9,7 @@ import { StickerGrid } from '../../components/StickerGrid';
 import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 
-export const EmojiStage: React.ComponentType = () => {
+export function EmojiStage(): JSX.Element {
   const i18n = useI18n();
   const emojisReady = stickersDuck.useEmojisReady();
 
@@ -26,4 +26,4 @@ export const EmojiStage: React.ComponentType = () => {
       </div>
     </AppStage>
   );
-};
+}

sticker-creator/app/stages/MetaStage.tsx

@@ -14,7 +14,7 @@ import { ConfirmModal } from '../../components/ConfirmModal';
 import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 
-export const MetaStage: React.ComponentType = () => {
+export function MetaStage(): JSX.Element {
   const i18n = useI18n();
   const actions = stickersDuck.useStickerActions();
   const valid = stickersDuck.useAllDataValid();
@@ -99,4 +99,4 @@ export const MetaStage: React.ComponentType = () => {
       </div>
     </AppStage>
   );
-};
+}

sticker-creator/app/stages/ShareStage.tsx

@@ -15,7 +15,7 @@ import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 import { Intl } from '../../../ts/components/Intl';
 
-export const ShareStage: React.ComponentType = () => {
+export function ShareStage(): JSX.Element {
   const i18n = useI18n();
   const actions = stickersDuck.useStickerActions();
   const title = stickersDuck.useTitle();
@@ -94,4 +94,4 @@ export const ShareStage: React.ComponentType = () => {
       ) : null}
     </AppStage>
   );
-};
+}

sticker-creator/app/stages/UploadStage.tsx

@@ -18,7 +18,7 @@ const handleCancel = () => {
   history.push('/add-meta');
 };
 
-export const UploadStage: React.ComponentType = () => {
+export function UploadStage(): JSX.Element {
   const i18n = useI18n();
   const actions = stickersDuck.useStickerActions();
   const cover = stickersDuck.useCover();
@@ -81,4 +81,4 @@ export const UploadStage: React.ComponentType = () => {
       </div>
     </AppStage>
   );
-};
+}

sticker-creator/components/ConfirmModal.tsx

@@ -9,7 +9,9 @@ import { ConfirmDialog } from '../elements/ConfirmDialog';
 
 export type Mode = 'removable' | 'pick-emoji' | 'add';
 
-export const ConfirmModal = React.memo((props: Props) => {
+export const ConfirmModal = React.memo(function ConfirmModalInner(
+  props: Props
+) {
   const { onCancel } = props;
   const [popperRoot, setPopperRoot] = React.useState<HTMLDivElement>();
 

sticker-creator/components/ShareButtons.tsx

@@ -12,7 +12,7 @@ export type Props = {
 };
 
 export const ShareButtons: React.ComponentType<Props> = React.memo(
-  ({ value }) => {
+  function ShareButtonsInner({ value }) {
     const i18n = useI18n();
 
     const buttonPaths = React.useMemo<

sticker-creator/components/StickerFrame.stories.tsx

@@ -47,7 +47,7 @@ _StickerFrame.story = {
   name: 'StickerFrame, add sticker',
 };
 
-export const EmojiSelectMode = (): JSX.Element => {
+export function EmojiSelectMode(): JSX.Element {
   const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
   const setSkinTone = action('setSkinTone');
   const onRemove = action('onRemove');
@@ -71,7 +71,7 @@ export const EmojiSelectMode = (): JSX.Element => {
       />
     </StoryRow>
   );
-};
+}
 
 EmojiSelectMode.story = {
   name: 'StickerFrame, emoji select mode',

sticker-creator/components/StickerFrame.tsx

@@ -66,243 +66,239 @@ const ImageHandle = SortableHandle((props: { src: string }) => (
   <img className={styles.image} {...props} alt="Sticker" />
 ));
 
-export const StickerFrame = React.memo(
-  ({
-    id,
-    emojiData,
-    image,
-    showGuide,
-    mode,
-    onRemove,
-    onPickEmoji,
-    skinTone,
-    onSetSkinTone,
-    onDrop,
-  }: Props) => {
-    const i18n = useI18n();
-    const [emojiPickerOpen, setEmojiPickerOpen] = React.useState(false);
-    const [emojiPopperRoot, setEmojiPopperRoot] =
-      React.useState<HTMLElement | null>(null);
-    const [previewActive, setPreviewActive] = React.useState(false);
-    const [previewPopperRoot, setPreviewPopperRoot] =
-      React.useState<HTMLElement | null>(null);
-    const timerRef = React.useRef<number>();
+export const StickerFrame = React.memo(function StickerFrameInner({
+  id,
+  emojiData,
+  image,
+  showGuide,
+  mode,
+  onRemove,
+  onPickEmoji,
+  skinTone,
+  onSetSkinTone,
+  onDrop,
+}: Props) {
+  const i18n = useI18n();
+  const [emojiPickerOpen, setEmojiPickerOpen] = React.useState(false);
+  const [emojiPopperRoot, setEmojiPopperRoot] =
+    React.useState<HTMLElement | null>(null);
+  const [previewActive, setPreviewActive] = React.useState(false);
+  const [previewPopperRoot, setPreviewPopperRoot] =
+    React.useState<HTMLElement | null>(null);
+  const timerRef = React.useRef<number>();
 
-    const handleToggleEmojiPicker = React.useCallback(() => {
-      setEmojiPickerOpen(open => !open);
-    }, [setEmojiPickerOpen]);
+  const handleToggleEmojiPicker = React.useCallback(() => {
+    setEmojiPickerOpen(open => !open);
+  }, [setEmojiPickerOpen]);
 
-    const handlePickEmoji = React.useCallback(
-      (emoji: EmojiPickDataType) => {
-        if (!id) {
-          return;
-        }
-        if (!onPickEmoji) {
-          throw new Error(
-            'StickerFrame/handlePickEmoji: onPickEmoji was not provided!'
-          );
-        }
-        onPickEmoji({ id, emoji });
-        setEmojiPickerOpen(false);
-      },
-      [id, onPickEmoji, setEmojiPickerOpen]
-    );
-
-    const handleRemove = React.useCallback(() => {
+  const handlePickEmoji = React.useCallback(
+    (emoji: EmojiPickDataType) => {
       if (!id) {
         return;
       }
-      if (!onRemove) {
+      if (!onPickEmoji) {
         throw new Error(
-          'StickerFrame/handleRemove: onRemove was not provided!'
+          'StickerFrame/handlePickEmoji: onPickEmoji was not provided!'
         );
       }
-      onRemove(id);
-    }, [onRemove, id]);
+      onPickEmoji({ id, emoji });
+      setEmojiPickerOpen(false);
+    },
+    [id, onPickEmoji, setEmojiPickerOpen]
+  );
 
-    const handleMouseEnter = React.useCallback(() => {
-      window.clearTimeout(timerRef.current);
-      timerRef.current = window.setTimeout(() => {
-        setPreviewActive(true);
-      }, 500);
-    }, [timerRef, setPreviewActive]);
+  const handleRemove = React.useCallback(() => {
+    if (!id) {
+      return;
+    }
+    if (!onRemove) {
+      throw new Error('StickerFrame/handleRemove: onRemove was not provided!');
+    }
+    onRemove(id);
+  }, [onRemove, id]);
 
-    const handleMouseLeave = React.useCallback(() => {
+  const handleMouseEnter = React.useCallback(() => {
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      setPreviewActive(true);
+    }, 500);
+  }, [timerRef, setPreviewActive]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    clearTimeout(timerRef.current);
+    setPreviewActive(false);
+  }, [timerRef, setPreviewActive]);
+
+  React.useEffect(
+    () => () => {
       clearTimeout(timerRef.current);
-      setPreviewActive(false);
-    }, [timerRef, setPreviewActive]);
+    },
+    [timerRef]
+  );
 
-    React.useEffect(
-      () => () => {
-        clearTimeout(timerRef.current);
-      },
-      [timerRef]
-    );
+  const { createRoot, removeRoot } = React.useContext(PopperRootContext);
 
-    const { createRoot, removeRoot } = React.useContext(PopperRootContext);
+  // Create popper root and handle outside clicks
+  React.useEffect(() => {
+    if (emojiPickerOpen) {
+      const root = createRoot();
+      setEmojiPopperRoot(root);
+      const handleOutsideClick = ({ target }: MouseEvent) => {
+        if (!root.contains(target as Node)) {
+          setEmojiPickerOpen(false);
+        }
+      };
+      document.addEventListener('click', handleOutsideClick);
 
-    // Create popper root and handle outside clicks
-    React.useEffect(() => {
-      if (emojiPickerOpen) {
-        const root = createRoot();
-        setEmojiPopperRoot(root);
-        const handleOutsideClick = ({ target }: MouseEvent) => {
-          if (!root.contains(target as Node)) {
-            setEmojiPickerOpen(false);
-          }
-        };
-        document.addEventListener('click', handleOutsideClick);
+      return () => {
+        removeRoot(root);
+        setEmojiPopperRoot(null);
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
 
-        return () => {
-          removeRoot(root);
-          setEmojiPopperRoot(null);
-          document.removeEventListener('click', handleOutsideClick);
-        };
-      }
+    return noop;
+  }, [
+    createRoot,
+    emojiPickerOpen,
+    removeRoot,
+    setEmojiPickerOpen,
+    setEmojiPopperRoot,
+  ]);
 
-      return noop;
-    }, [
-      createRoot,
-      emojiPickerOpen,
-      removeRoot,
-      setEmojiPickerOpen,
-      setEmojiPopperRoot,
-    ]);
+  React.useEffect(() => {
+    if (mode !== 'pick-emoji' && image && previewActive) {
+      const root = createRoot();
+      setPreviewPopperRoot(root);
 
-    React.useEffect(() => {
-      if (mode !== 'pick-emoji' && image && previewActive) {
-        const root = createRoot();
-        setPreviewPopperRoot(root);
+      return () => {
+        removeRoot(root);
+      };
+    }
 
-        return () => {
-          removeRoot(root);
-        };
-      }
+    return noop;
+  }, [
+    createRoot,
+    image,
+    mode,
+    previewActive,
+    removeRoot,
+    setPreviewPopperRoot,
+  ]);
 
-      return noop;
-    }, [
-      createRoot,
-      image,
-      mode,
-      previewActive,
-      removeRoot,
-      setPreviewPopperRoot,
-    ]);
+  const [dragActive, setDragActive] = React.useState<boolean>(false);
+  const containerClass = dragActive ? styles.dragActive : styles.container;
 
-    const [dragActive, setDragActive] = React.useState<boolean>(false);
-    const containerClass = dragActive ? styles.dragActive : styles.container;
-
-    return (
-      <PopperManager>
-        <PopperReference>
-          {({ ref: rootRef }) => (
-            <div
-              className={containerClass}
-              onMouseEnter={handleMouseEnter}
-              onMouseLeave={handleMouseLeave}
-              ref={rootRef}
-            >
-              {
-                // eslint-disable-next-line no-nested-ternary
-                mode !== 'add' ? (
-                  image ? (
-                    <ImageHandle src={image} />
-                  ) : (
-                    <div className={styles.spinner}>{spinnerSvg}</div>
-                  )
-                ) : null
-              }
-              {showGuide && mode !== 'add' ? (
-                <div className={styles.guide} />
-              ) : null}
-              {mode === 'add' && onDrop ? (
-                <DropZone
-                  label={i18n('StickerCreator--DropStage--dragDrop')}
-                  onDrop={onDrop}
-                  inner
-                  onDragActive={setDragActive}
-                />
-              ) : null}
-              {mode === 'removable' ? (
-                <button
-                  type="button"
-                  aria-label={i18n('StickerCreator--DropStage--removeSticker')}
-                  className={styles.closeButton}
-                  onClick={handleRemove}
-                  // Reverse the mouseenter/leave logic for the remove button so
-                  // we don't accidentally cover the remove button
-                  onMouseEnter={handleMouseLeave}
-                  onMouseLeave={handleMouseEnter}
-                >
-                  {closeSvg}
-                </button>
-              ) : null}
-              {mode === 'pick-emoji' ? (
-                <PopperManager>
-                  <PopperReference>
-                    {({ ref }) => (
-                      <button
-                        type="button"
-                        ref={ref}
-                        className={styles.emojiButton}
-                        onClick={handleToggleEmojiPicker}
-                      >
-                        {emojiData ? (
-                          <Emoji {...emojiData} size={24} />
-                        ) : (
-                          <AddEmoji />
-                        )}
-                      </button>
-                    )}
-                  </PopperReference>
-                  {emojiPickerOpen && emojiPopperRoot
-                    ? createPortal(
-                        <Popper placement="bottom-start">
-                          {({ ref, style }) => (
-                            <EmojiPicker
-                              ref={ref}
-                              style={{ ...style, marginTop: '8px' }}
-                              i18n={i18n}
-                              onPickEmoji={handlePickEmoji}
-                              skinTone={skinTone}
-                              onSetSkinTone={onSetSkinTone}
-                              onClose={handleToggleEmojiPicker}
-                            />
-                          )}
-                        </Popper>,
-                        emojiPopperRoot
-                      )
-                    : null}
-                </PopperManager>
-              ) : null}
-              {mode !== 'pick-emoji' &&
-              image &&
-              previewActive &&
-              previewPopperRoot
-                ? createPortal(
-                    <Popper
-                      placement="bottom"
-                      modifiers={[
-                        { name: 'offset', options: { offset: [undefined, 8] } },
-                      ]}
+  return (
+    <PopperManager>
+      <PopperReference>
+        {({ ref: rootRef }) => (
+          <div
+            className={containerClass}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            ref={rootRef}
+          >
+            {
+              // eslint-disable-next-line no-nested-ternary
+              mode !== 'add' ? (
+                image ? (
+                  <ImageHandle src={image} />
+                ) : (
+                  <div className={styles.spinner}>{spinnerSvg}</div>
+                )
+              ) : null
+            }
+            {showGuide && mode !== 'add' ? (
+              <div className={styles.guide} />
+            ) : null}
+            {mode === 'add' && onDrop ? (
+              <DropZone
+                label={i18n('StickerCreator--DropStage--dragDrop')}
+                onDrop={onDrop}
+                inner
+                onDragActive={setDragActive}
+              />
+            ) : null}
+            {mode === 'removable' ? (
+              <button
+                type="button"
+                aria-label={i18n('StickerCreator--DropStage--removeSticker')}
+                className={styles.closeButton}
+                onClick={handleRemove}
+                // Reverse the mouseenter/leave logic for the remove button so
+                // we don't accidentally cover the remove button
+                onMouseEnter={handleMouseLeave}
+                onMouseLeave={handleMouseEnter}
+              >
+                {closeSvg}
+              </button>
+            ) : null}
+            {mode === 'pick-emoji' ? (
+              <PopperManager>
+                <PopperReference>
+                  {({ ref }) => (
+                    <button
+                      type="button"
+                      ref={ref}
+                      className={styles.emojiButton}
+                      onClick={handleToggleEmojiPicker}
                     >
-                      {({ ref, style, arrowProps, placement }) => (
-                        <StickerPreview
-                          ref={ref}
-                          style={style}
-                          image={image}
-                          arrowProps={arrowProps}
-                          placement={placement}
-                        />
+                      {emojiData ? (
+                        <Emoji {...emojiData} size={24} />
+                      ) : (
+                        <AddEmoji />
                       )}
-                    </Popper>,
-                    previewPopperRoot
-                  )
-                : null}
-            </div>
-          )}
-        </PopperReference>
-      </PopperManager>
-    );
-  }
-);
+                    </button>
+                  )}
+                </PopperReference>
+                {emojiPickerOpen && emojiPopperRoot
+                  ? createPortal(
+                      <Popper placement="bottom-start">
+                        {({ ref, style }) => (
+                          <EmojiPicker
+                            ref={ref}
+                            style={{ ...style, marginTop: '8px' }}
+                            i18n={i18n}
+                            onPickEmoji={handlePickEmoji}
+                            skinTone={skinTone}
+                            onSetSkinTone={onSetSkinTone}
+                            onClose={handleToggleEmojiPicker}
+                          />
+                        )}
+                      </Popper>,
+                      emojiPopperRoot
+                    )
+                  : null}
+              </PopperManager>
+            ) : null}
+            {mode !== 'pick-emoji' &&
+            image &&
+            previewActive &&
+            previewPopperRoot
+              ? createPortal(
+                  <Popper
+                    placement="bottom"
+                    modifiers={[
+                      { name: 'offset', options: { offset: [undefined, 8] } },
+                    ]}
+                  >
+                    {({ ref, style, arrowProps, placement }) => (
+                      <StickerPreview
+                        ref={ref}
+                        style={style}
+                        image={image}
+                        arrowProps={arrowProps}
+                        placement={placement}
+                      />
+                    )}
+                  </Popper>,
+                  previewPopperRoot
+                )
+              : null}
+          </div>
+        )}
+      </PopperReference>
+    </PopperManager>
+  );
+});

sticker-creator/components/StickerPackPreview.tsx

@@ -11,27 +11,29 @@ export type Props = {
   author: string;
 };
 
-export const StickerPackPreview = React.memo(
-  ({ images, title, author }: Props) => {
-    const i18n = useI18n();
+export const StickerPackPreview = React.memo(function StickerPackPreviewInner({
+  images,
+  title,
+  author,
+}: Props) {
+  const i18n = useI18n();
 
-    return (
-      <div className={styles.container}>
-        <div className={styles.titleBar}>
-          {i18n('StickerCreator--Preview--title')}
-        </div>
-        <div className={styles.scroller}>
-          <div className={styles.grid}>
-            {images.map(src => (
-              <img key={src} className={styles.sticker} src={src} alt={src} />
-            ))}
-          </div>
-        </div>
-        <div className={styles.meta}>
-          <div className={styles.metaTitle}>{title}</div>
-          <div className={styles.metaAuthor}>{author}</div>
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleBar}>
+        {i18n('StickerCreator--Preview--title')}
+      </div>
+      <div className={styles.scroller}>
+        <div className={styles.grid}>
+          {images.map(src => (
+            <img key={src} className={styles.sticker} src={src} alt={src} />
+          ))}
         </div>
       </div>
-    );
-  }
-);
+      <div className={styles.meta}>
+        <div className={styles.metaTitle}>{title}</div>
+        <div className={styles.metaAuthor}>{author}</div>
+      </div>
+    </div>
+  );
+});

sticker-creator/components/Toaster.tsx

@@ -12,7 +12,11 @@ export type Props = React.HTMLAttributes<HTMLDivElement> & {
 
 const DEFAULT_DISMISS = 1e4;
 
-export const Toaster = React.memo(({ loaf, onDismiss, className }: Props) => {
+export const Toaster = React.memo(function ToasterInner({
+  loaf,
+  onDismiss,
+  className,
+}: Props) {
   const slice = last(loaf);
 
   React.useEffect(() => {

sticker-creator/elements/Button.tsx

@@ -27,11 +27,11 @@ const getClassName = ({ primary, pill }: Props) => {
   return styles.base;
 };
 
-export const Button: React.ComponentType<Props> = ({
+export function Button({
   className,
   children,
   ...otherProps
-}) => {
+}: React.PropsWithChildren<Props>): JSX.Element {
   return (
     <button
       type="button"
@@ -41,4 +41,4 @@ export const Button: React.ComponentType<Props> = ({
       {children}
     </button>
   );
-};
+}

sticker-creator/elements/ConfirmDialog.tsx

@@ -14,14 +14,14 @@ export type Props = {
   readonly onCancel: () => unknown;
 };
 
-export const ConfirmDialog: React.ComponentType<Props> = ({
+export function ConfirmDialog({
   title,
   children,
   confirm,
   cancel,
   onConfirm,
   onCancel,
-}) => {
+}: Props): JSX.Element {
   const i18n = useI18n();
   const cancelText = cancel || i18n('StickerCreator--ConfirmDialog--cancel');
 
@@ -43,4 +43,4 @@ export const ConfirmDialog: React.ComponentType<Props> = ({
       </div>
     </div>
   );
-};
+}

sticker-creator/elements/CopyText.tsx

@@ -14,7 +14,7 @@ export type Props = {
 };
 
 export const CopyText: React.ComponentType<Props> = React.memo(
-  ({ label, onCopy, value }) => {
+  function CopyTextInner({ label, onCopy, value }) {
     const i18n = useI18n();
     const handleClick = React.useCallback(() => {
       copy(value);

sticker-creator/elements/DropZone.tsx

@@ -28,7 +28,7 @@ const getClassName = ({ inner }: Props, isDragActive: boolean) => {
   return styles.standalone;
 };
 
-export const DropZone: React.ComponentType<Props> = props => {
+export function DropZone(props: Props): JSX.Element {
   const { inner, label, onDrop, onDragActive } = props;
   const i18n = useI18n();
 
@@ -52,7 +52,7 @@ export const DropZone: React.ComponentType<Props> = props => {
     <div
       {...getRootProps({ className: getClassName(props, isDragActive) })}
       role="button"
-      area-label={label}
+      aria-label={label}
     >
       <input {...getInputProps()} />
       <svg viewBox="0 0 36 36" width="36px" height="36px">
@@ -67,4 +67,4 @@ export const DropZone: React.ComponentType<Props> = props => {
       ) : null}
     </div>
   );
-};
+}

sticker-creator/elements/LabeledCheckbox.tsx

@@ -17,28 +17,30 @@ const checkSvg = (
   </svg>
 );
 
-export const LabeledCheckbox = React.memo(
-  ({ children, value, onChange }: Props) => {
-    const handleChange = React.useCallback(() => {
-      if (onChange !== undefined) {
-        onChange(!value);
-      }
-    }, [onChange, value]);
+export const LabeledCheckbox = React.memo(function LabeledCheckboxInner({
+  children,
+  value,
+  onChange,
+}: Props) {
+  const handleChange = React.useCallback(() => {
+    if (onChange !== undefined) {
+      onChange(!value);
+    }
+  }, [onChange, value]);
 
-    const className = value ? styles.checkboxChecked : styles.checkbox;
+  const className = value ? styles.checkboxChecked : styles.checkbox;
 
-    return (
-      <label className={styles.base}>
-        <input
-          type="checkbox"
-          className={styles.input}
-          checked={value}
-          aria-checked={value}
-          onChange={handleChange}
-        />
-        <span className={className}>{value ? checkSvg : null}</span>
-        <Inline className={styles.label}>{children}</Inline>
-      </label>
-    );
-  }
-);
+  return (
+    <label className={styles.base}>
+      <input
+        type="checkbox"
+        className={styles.input}
+        checked={value}
+        aria-checked={value}
+        onChange={handleChange}
+      />
+      <span className={className}>{value ? checkSvg : null}</span>
+      <Inline className={styles.label}>{children}</Inline>
+    </label>
+  );
+});

sticker-creator/elements/LabeledInput.tsx

@@ -12,28 +12,31 @@ export type Props = {
   onChange?: (value: string) => unknown;
 };
 
-export const LabeledInput = React.memo(
-  ({ children, value, placeholder, onChange }: Props) => {
-    const handleChange = React.useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (onChange !== undefined) {
-          onChange(e.currentTarget.value);
-        }
-      },
-      [onChange]
-    );
+export const LabeledInput = React.memo(function LabeledInputInner({
+  children,
+  value,
+  placeholder,
+  onChange,
+}: Props) {
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange !== undefined) {
+        onChange(e.currentTarget.value);
+      }
+    },
+    [onChange]
+  );
 
-    return (
-      <label className={styles.container}>
-        <Inline className={styles.label}>{children}</Inline>
-        <input
-          type="text"
-          className={styles.input}
-          placeholder={placeholder}
-          value={value}
-          onChange={handleChange}
-        />
-      </label>
-    );
-  }
-);
+  return (
+    <label className={styles.container}>
+      <Inline className={styles.label}>{children}</Inline>
+      <input
+        type="text"
+        className={styles.input}
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+      />
+    </label>
+  );
+});

sticker-creator/elements/MessageBubble.tsx

@@ -10,14 +10,11 @@ export type Props = Pick<MessageMetaProps, 'minutesAgo'> & {
   children: React.ReactNode;
 };
 
-export const MessageBubble: React.ComponentType<Props> = ({
-  children,
-  minutesAgo,
-}) => {
+export function MessageBubble({ children, minutesAgo }: Props): JSX.Element {
   return (
     <div className={styles.base}>
       {children}
       <MessageMeta kind="bubble" minutesAgo={minutesAgo} />
     </div>
   );
-};
+}

sticker-creator/elements/MessageMeta.tsx

@@ -22,7 +22,7 @@ const getItemClass = ({ kind }: Props) => {
   return styles.bubble;
 };
 
-export const MessageMeta = React.memo((props: Props) => {
+export const MessageMeta = React.memo(function MessageMetaInner(props: Props) {
   const i18n = useI18n();
   const itemClass = getItemClass(props);
 

sticker-creator/elements/MessageSticker.tsx

@@ -10,15 +10,15 @@ export type Props = MessageMetaProps & {
   image: string;
 };
 
-export const MessageSticker: React.ComponentType<Props> = ({
+export function MessageSticker({
   image,
   kind,
   minutesAgo,
-}) => {
+}: Props): JSX.Element {
   return (
     <div className={styles.base}>
       <img src={image} alt="Sticker" className={styles.image} />
       <MessageMeta kind={kind} minutesAgo={minutesAgo} />
     </div>
   );
-};
+}

sticker-creator/elements/PageHeader.tsx

@@ -9,6 +9,8 @@ export type Props = {
   children: React.ReactNode;
 };
 
-export const PageHeader = React.memo(({ children }: Props) => (
-  <H1 className={styles.base}>{children}</H1>
-));
+export const PageHeader = React.memo(function PageHeaderInner({
+  children,
+}: Props) {
+  return <H1 className={styles.base}>{children}</H1>;
+});

sticker-creator/elements/ProgressBar.tsx

@@ -11,11 +11,17 @@ export type Props = Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   readonly total: number;
 };
 
-export const ProgressBar = React.memo(({ className, count, total }: Props) => (
-  <div className={classnames(styles.base, className)}>
-    <div
-      className={styles.bar}
-      style={{ width: `${Math.floor((count / total) * 100)}%` }}
-    />
-  </div>
-));
+export const ProgressBar = React.memo(function ProgressBarInner({
+  className,
+  count,
+  total,
+}: Props) {
+  return (
+    <div className={classnames(styles.base, className)}>
+      <div
+        className={styles.bar}
+        style={{ width: `${Math.floor((count / total) * 100)}%` }}
+      />
+    </div>
+  );
+});

sticker-creator/elements/StoryRow.tsx

@@ -31,7 +31,9 @@ const getClassName = ({ left, right, top, bottom }: Props) => {
   return styles.base;
 };
 
-export const StoryRow: React.ComponentType<Props> = ({
+export function StoryRow({
   children,
   ...props
-}) => <div className={getClassName(props)}>{children}</div>;
+}: React.PropsWithChildren<Props>): JSX.Element {
+  return <div className={getClassName(props)}>{children}</div>;
+}

sticker-creator/elements/Toast.tsx

@@ -9,12 +9,18 @@ export type Props = React.HTMLAttributes<HTMLButtonElement> & {
   children: React.ReactNode;
 };
 
-export const Toast = React.memo(({ children, className, ...rest }: Props) => (
-  <button
-    type="button"
-    className={classNames(styles.base, className)}
-    {...rest}
-  >
-    {children}
-  </button>
-));
+export const Toast = React.memo(function ToastInner({
+  children,
+  className,
+  ...rest
+}: Props) {
+  return (
+    <button
+      type="button"
+      className={classNames(styles.base, className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});

sticker-creator/elements/Typography.stories.tsx

@@ -1,7 +1,7 @@
 // Copyright 2019-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint-disable no-script-url, jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
@@ -13,7 +13,7 @@ export default {
   title: 'Sticker Creator/elements',
 };
 
-export const Typography = (): JSX.Element => {
+export function Typography(): JSX.Element {
   const child = text('text', 'foo bar');
 
   return (
@@ -32,11 +32,9 @@ export const Typography = (): JSX.Element => {
       <StoryRow left>
         <Text>
           {child} {child} {child} {child}{' '}
-          <a href="javascript: void 0;">
-            Something something something dark side.
-          </a>
+          <a href="#">Something something something dark side.</a>
         </Text>
       </StoryRow>
     </>
   );
-};
+}

sticker-creator/elements/Typography.tsx

@@ -18,30 +18,38 @@ export type ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
 };
 export type SpanProps = React.HTMLAttributes<HTMLSpanElement>;
 
-export const H1 = React.memo(
-  ({ children, className, ...rest }: Props & HeadingProps) => (
+export const H1 = React.memo(function H1Inner({
+  children,
+  className,
+  ...rest
+}: Props & HeadingProps) {
+  return (
     <h1 className={classnames(styles.h1, className)} {...rest}>
       {children}
     </h1>
-  )
-);
+  );
+});
 
-export const H2 = React.memo(
-  ({ children, className, ...rest }: Props & HeadingProps) => (
+export const H2 = React.memo(function H2Inner({
+  children,
+  className,
+  ...rest
+}: Props & HeadingProps) {
+  return (
     <h2 className={classnames(styles.h2, className)} {...rest}>
       {children}
     </h2>
-  )
-);
+  );
+});
 
-export const Text = React.memo(
-  ({
-    children,
-    className,
-    center,
-    secondary,
-    ...rest
-  }: Props & ParagraphProps) => (
+export const Text = React.memo(function TextInner({
+  children,
+  className,
+  center,
+  secondary,
+  ...rest
+}: Props & ParagraphProps) {
+  return (
     <p
       className={classnames(
         center ? styles.textCenter : styles.text,
@@ -52,13 +60,17 @@ export const Text = React.memo(
     >
       {children}
     </p>
-  )
-);
+  );
+});
 
-export const Inline = React.memo(
-  ({ children, className, ...rest }: Props & SpanProps) => (
+export const Inline = React.memo(function InlineInner({
+  children,
+  className,
+  ...rest
+}: Props & SpanProps) {
+  return (
     <span className={classnames(styles.text, className)} {...rest}>
       {children}
     </span>
-  )
-);
+  );
+});

sticker-creator/elements/icons/AddEmoji.tsx

@@ -3,8 +3,10 @@
 
 import * as React from 'react';
 
-export const AddEmoji = React.memo(() => (
-  <svg width="32px" height="20px" viewBox="0 0 32 20">
-    <path d="M21.993 15.5a5.679 5.679 0 0 1-4.6-2.29.75.75 0 1 1 1.212-.883 4.266 4.266 0 0 0 6.786-.015.749.749 0 0 1 1.216.876 5.671 5.671 0 0 1-4.614 2.312zM22 2.5a7.254 7.254 0 0 0-7.5 7.5 7.254 7.254 0 0 0 7.5 7.5 7.254 7.254 0 0 0 7.5-7.5A7.254 7.254 0 0 0 22 2.5M22 1a8.751 8.751 0 0 1 9 9 8.751 8.751 0 0 1-9 9 8.751 8.751 0 0 1-9-9 8.751 8.751 0 0 1 9-9zm-2.75 5.75A1.476 1.476 0 0 0 18 8.375 1.476 1.476 0 0 0 19.25 10a1.476 1.476 0 0 0 1.25-1.625 1.476 1.476 0 0 0-1.25-1.625zm5.5 0a1.476 1.476 0 0 0-1.25 1.625A1.476 1.476 0 0 0 24.75 10 1.476 1.476 0 0 0 26 8.375a1.476 1.476 0 0 0-1.25-1.625zM10 9.25H6.75V6h-1.5v3.25H2v1.5h3.25V14h1.5v-3.25H10z" />
-  </svg>
-));
+export const AddEmoji = React.memo(function AddEmojiInner() {
+  return (
+    <svg width="32px" height="20px" viewBox="0 0 32 20">
+      <path d="M21.993 15.5a5.679 5.679 0 0 1-4.6-2.29.75.75 0 1 1 1.212-.883 4.266 4.266 0 0 0 6.786-.015.749.749 0 0 1 1.216.876 5.671 5.671 0 0 1-4.614 2.312zM22 2.5a7.254 7.254 0 0 0-7.5 7.5 7.254 7.254 0 0 0 7.5 7.5 7.254 7.254 0 0 0 7.5-7.5A7.254 7.254 0 0 0 22 2.5M22 1a8.751 8.751 0 0 1 9 9 8.751 8.751 0 0 1-9 9 8.751 8.751 0 0 1-9-9 8.751 8.751 0 0 1 9-9zm-2.75 5.75A1.476 1.476 0 0 0 18 8.375 1.476 1.476 0 0 0 19.25 10a1.476 1.476 0 0 0 1.25-1.625 1.476 1.476 0 0 0-1.25-1.625zm5.5 0a1.476 1.476 0 0 0-1.25 1.625A1.476 1.476 0 0 0 24.75 10 1.476 1.476 0 0 0 26 8.375a1.476 1.476 0 0 0-1.25-1.625zM10 9.25H6.75V6h-1.5v3.25H2v1.5h3.25V14h1.5v-3.25H10z" />
+    </svg>
+  );
+});

sticker-creator/root.tsx

@@ -12,17 +12,19 @@ import { I18n } from './util/i18n';
 
 const { localeMessages, SignalContext } = window;
 
-const ColdRoot = () => (
-  <ReduxProvider store={store}>
-    <Router history={history}>
-      <I18n messages={localeMessages} locale={SignalContext.config.locale}>
-        <App
-          executeMenuRole={SignalContext.executeMenuRole}
-          hasCustomTitleBar={SignalContext.OS.hasCustomTitleBar()}
-        />
-      </I18n>
-    </Router>
-  </ReduxProvider>
-);
+function ColdRoot() {
+  return (
+    <ReduxProvider store={store}>
+      <Router history={history}>
+        <I18n messages={localeMessages} locale={SignalContext.config.locale}>
+          <App
+            executeMenuRole={SignalContext.executeMenuRole}
+            hasCustomTitleBar={SignalContext.OS.hasCustomTitleBar()}
+          />
+        </I18n>
+      </Router>
+    </ReduxProvider>
+  );
+}
 
 export const Root = hot(ColdRoot);

sticker-creator/store/ducks/stickers.ts

@@ -31,6 +31,8 @@ import type { EmojiPickDataType } from '../../../ts/components/emoji/EmojiPicker
 import { convertShortName } from '../../../ts/components/emoji/lib';
 import { isNotNil } from '../../../ts/util/isNotNil';
 
+type StickerEmojiData = { id: string; emoji: EmojiPickDataType };
+
 export const initializeStickers = createAction<Array<string>>(
   'stickers/initializeStickers'
 );
@@ -41,8 +43,7 @@ export const removeSticker = createAction<string>('stickers/removeSticker');
 export const moveSticker = createAction<SortEnd>('stickers/moveSticker');
 export const setCover = createAction<StickerImageData>('stickers/setCover');
 export const resetCover = createAction<StickerImageData>('stickers/resetCover');
-export const setEmoji =
-  createAction<{ id: string; emoji: EmojiPickDataType }>('stickers/setEmoji');
+export const setEmoji = createAction<StickerEmojiData>('stickers/setEmoji');
 export const setTitle = createAction<string>('stickers/setTitle');
 export const setAuthor = createAction<string>('stickers/setAuthor');
 export const setPackMeta = createAction<PackMetaData>('stickers/setPackMeta');

sticker-creator/util/i18n.tsx

@@ -27,11 +27,7 @@ export type I18nProps = {
   messages: LocaleMessagesType;
 };
 
-export const I18n = ({
-  messages,
-  locale,
-  children,
-}: I18nProps): JSX.Element => {
+export function I18n({ messages, locale, children }: I18nProps): JSX.Element {
   const { icuMessages, legacyMessages } = React.useMemo(() => {
     return classifyMessages(messages);
   }, [messages]);
@@ -115,6 +111,6 @@ export const I18n = ({
   return (
     <I18nContext.Provider value={getMessage}>{children}</I18nContext.Provider>
   );
-};
+}
 
 export const useI18n = (): LocalizerType => React.useContext(I18nContext);

ts/components/About.tsx

@@ -18,14 +18,14 @@ export type PropsType = {
   executeMenuRole: ExecuteMenuRoleType;
 };
 
-export const About = ({
+export function About({
   closeAbout,
   i18n,
   environment,
   version,
   hasCustomTitleBar,
   executeMenuRole,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   useEscapeHandling(closeAbout);
 
   const theme = useTheme();
@@ -63,4 +63,4 @@ export const About = ({
       </div>
     </TitleBarContainer>
   );
-};
+}

ts/components/AddCaptionModal.stories.tsx

@@ -37,6 +37,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => (
   <AddCaptionModal {...args} theme={React.useContext(StorybookThemeContext)} />
 );

ts/components/AddCaptionModal.tsx

@@ -19,14 +19,14 @@ export type Props = {
   ) => JSX.Element;
 };
 
-export const AddCaptionModal = ({
+export function AddCaptionModal({
   i18n,
   onClose,
   onSubmit,
   draftText,
   RenderCompositionTextArea,
   theme,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const [messageText, setMessageText] = React.useState('');
 
   const [isScrolledTop, setIsScrolledTop] = React.useState(true);
@@ -84,4 +84,4 @@ export const AddCaptionModal = ({
       />
     </Modal>
   );
-};
+}

ts/components/AddGroupMemberErrorDialog.stories.tsx

@@ -35,13 +35,15 @@ _MaximumGroupSize.story = {
   name: 'Maximum group size',
 };
 
-export const MaximumRecommendedGroupSize = (): JSX.Element => (
-  <AddGroupMemberErrorDialog
-    {...defaultProps}
-    mode={AddGroupMemberErrorDialogMode.RecommendedMaximumGroupSize}
-    recommendedMaximumNumberOfContacts={123}
-  />
-);
+export function MaximumRecommendedGroupSize(): JSX.Element {
+  return (
+    <AddGroupMemberErrorDialog
+      {...defaultProps}
+      mode={AddGroupMemberErrorDialogMode.RecommendedMaximumGroupSize}
+      recommendedMaximumNumberOfContacts={123}
+    />
+  );
+}
 
 MaximumRecommendedGroupSize.story = {
   name: 'Maximum recommended group size',

ts/components/AddGroupMemberErrorDialog.tsx

@@ -1,7 +1,7 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { LocalizerType } from '../types/Util';
@@ -28,9 +28,7 @@ type PropsType = {
   onClose: () => void;
 } & PropsDataType;
 
-export const AddGroupMemberErrorDialog: FunctionComponent<
-  PropsType
-> = props => {
+export function AddGroupMemberErrorDialog(props: PropsType): JSX.Element {
   const { i18n, onClose } = props;
 
   let title: string;
@@ -57,4 +55,4 @@ export const AddGroupMemberErrorDialog: FunctionComponent<
   }
 
   return <Alert body={body} i18n={i18n} onClose={onClose} title={title} />;
-};
+}

ts/components/AddUserToAnotherGroupModal.stories.tsx

@@ -39,6 +39,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => (
   <AddUserToAnotherGroupModal
     {...args}

ts/components/AddUserToAnotherGroupModal.tsx

@@ -42,7 +42,7 @@ type DispatchProps = {
 
 export type Props = OwnProps & DispatchProps;
 
-export const AddUserToAnotherGroupModal = ({
+export function AddUserToAnotherGroupModal({
   i18n,
   theme,
   contact,
@@ -51,7 +51,7 @@ export const AddUserToAnotherGroupModal = ({
   showToast,
   candidateConversations,
   regionCode,
-}: Props): JSX.Element | null => {
+}: Props): JSX.Element | null {
   const [searchTerm, setSearchTerm] = React.useState('');
   const [filteredConversations, setFilteredConversations] = React.useState(
     filterAndSortConversationsByRecent(candidateConversations, '', undefined)
@@ -177,7 +177,6 @@ export const AddUserToAnotherGroupModal = ({
                     onClickArchiveButton={noop}
                     onClickContactCheckbox={noop}
                     onSelectConversation={setSelectedGroupId}
-                    renderMessageSearchResult={_ => <></>}
                     showChooseGroupMembers={noop}
                     lookupConversationWithoutUuid={async _ => undefined}
                     showUserNotFoundModal={noop}
@@ -223,4 +222,4 @@ export const AddUserToAnotherGroupModal = ({
       )}
     </>
   );
-};
+}

ts/components/Alert.stories.tsx

@@ -23,67 +23,75 @@ const defaultProps = {
 const LOREM_IPSUM =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
 
-export const TitleAndBodyAreStrings = (): JSX.Element => (
-  <Alert
-    {...defaultProps}
-    title="Hello world"
-    body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus."
-  />
-);
+export function TitleAndBodyAreStrings(): JSX.Element {
+  return (
+    <Alert
+      {...defaultProps}
+      title="Hello world"
+      body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus."
+    />
+  );
+}
 
 TitleAndBodyAreStrings.story = {
   name: 'Title and body are strings',
 };
 
-export const BodyIsAReactNode = (): JSX.Element => (
-  <Alert
-    {...defaultProps}
-    title="Hello world"
-    body={
-      <>
-        <span style={{ color: 'red' }}>Hello</span>{' '}
-        <span style={{ color: 'green', fontWeight: 'bold' }}>world</span>!
-      </>
-    }
-  />
-);
+export function BodyIsAReactNode(): JSX.Element {
+  return (
+    <Alert
+      {...defaultProps}
+      title="Hello world"
+      body={
+        <>
+          <span style={{ color: 'red' }}>Hello</span>{' '}
+          <span style={{ color: 'green', fontWeight: 'bold' }}>world</span>!
+        </>
+      }
+    />
+  );
+}
 
 BodyIsAReactNode.story = {
   name: 'Body is a ReactNode',
 };
 
-export const LongBodyWithoutTitle = (): JSX.Element => (
-  <Alert
-    {...defaultProps}
-    body={
-      <>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-      </>
-    }
-  />
-);
+export function LongBodyWithoutTitle(): JSX.Element {
+  return (
+    <Alert
+      {...defaultProps}
+      body={
+        <>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+        </>
+      }
+    />
+  );
+}
 
 LongBodyWithoutTitle.story = {
   name: 'Long body (without title)',
 };
 
-export const LongBodyWithTitle = (): JSX.Element => (
-  <Alert
-    {...defaultProps}
-    title="Hello world"
-    body={
-      <>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-      </>
-    }
-  />
-);
+export function LongBodyWithTitle(): JSX.Element {
+  return (
+    <Alert
+      {...defaultProps}
+      title="Hello world"
+      body={
+        <>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+        </>
+      }
+    />
+  );
+}
 
 LongBodyWithTitle.story = {
   name: 'Long body (with title)',

ts/components/Alert.tsx

@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { LocalizerType } from '../types/Util';
@@ -17,23 +17,25 @@ type PropsType = {
   title?: string;
 };
 
-export const Alert: FunctionComponent<PropsType> = ({
+export function Alert({
   body,
   i18n,
   onClose,
   theme,
   title,
-}) => (
-  <Modal
-    i18n={i18n}
-    modalFooter={
-      <Button onClick={onClose}>{i18n('Confirmation--confirm')}</Button>
-    }
-    modalName="Alert"
-    onClose={onClose}
-    theme={theme}
-    title={title}
-  >
-    {body}
-  </Modal>
-);
+}: PropsType): JSX.Element {
+  return (
+    <Modal
+      i18n={i18n}
+      modalFooter={
+        <Button onClick={onClose}>{i18n('Confirmation--confirm')}</Button>
+      }
+      modalName="Alert"
+      onClose={onClose}
+      theme={theme}
+      title={title}
+    >
+      {body}
+    </Modal>
+  );
+}

ts/components/AnimatedEmojiGalore.stories.tsx

@@ -18,6 +18,6 @@ function getDefaultProps(): PropsType {
   };
 }
 
-export const Hearts = (): JSX.Element => (
-  <AnimatedEmojiGalore {...getDefaultProps()} />
-);
+export function Hearts(): JSX.Element {
+  return <AnimatedEmojiGalore {...getDefaultProps()} />;
+}

ts/components/AnimatedEmojiGalore.tsx

@@ -34,10 +34,10 @@ function transform(y: number, scale: number, rotate: number): string {
   return `translateY(${y}px) scale(${scale}) rotate(${rotate}deg)`;
 }
 
-export const AnimatedEmojiGalore = ({
+export function AnimatedEmojiGalore({
   emoji,
   onAnimationEnd,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [springs] = useSprings(NUM_EMOJIS, i => ({
     ...to(i, onAnimationEnd),
     from: from(i),
@@ -69,4 +69,4 @@ export const AnimatedEmojiGalore = ({
       ))}
     </>
   );
-};
+}

ts/components/AnnouncementsOnlyGroupBanner.tsx

@@ -15,12 +15,12 @@ type PropsType = {
   theme: ThemeType;
 };
 
-export const AnnouncementsOnlyGroupBanner = ({
+export function AnnouncementsOnlyGroupBanner({
   groupAdmins,
   i18n,
   openConversation,
   theme,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [isShowingAdmins, setIsShowingAdmins] = useState(false);
 
   return (
@@ -64,4 +64,4 @@ export const AnnouncementsOnlyGroupBanner = ({
       </div>
     </>
   );
-};
+}

ts/components/App.tsx

@@ -55,7 +55,7 @@ type PropsType = {
   viewStory: ViewStoryActionCreatorType;
 } & ComponentProps<typeof Inbox>;
 
-export const App = ({
+export function App({
   appView,
   executeMenuAction,
   executeMenuRole,
@@ -89,7 +89,7 @@ export const App = ({
   toast,
   toggleStoriesView,
   viewStory,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   let contents;
 
   if (appView === AppViewType.Installer) {
@@ -183,4 +183,4 @@ export const App = ({
       </div>
     </TitleBarContainer>
   );
-};
+}

ts/components/Avatar.stories.tsx

@@ -102,6 +102,7 @@ const sizes = Object.values(AvatarSize).filter(
   x => typeof x === 'number'
 ) as Array<AvatarSize>;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => (
   <>
     {sizes.map(size => (
@@ -110,6 +111,7 @@ const Template: Story<Props> = args => (
   </>
 );
 
+// eslint-disable-next-line react/function-component-definition
 const TemplateSingle: Story<Props> = args => (
   <Avatar {...args} size={AvatarSize.ONE_HUNDRED_TWELVE} />
 );
@@ -198,7 +200,7 @@ SearchIcon.args = createProps({
   searchResult: true,
 });
 
-export const Colors = (): JSX.Element => {
+export function Colors(): JSX.Element {
   const props = createProps();
 
   return (
@@ -208,7 +210,7 @@ export const Colors = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
 export const BrokenColor = Template.bind({});
 BrokenColor.args = createProps({

ts/components/Avatar.tsx

@@ -1,13 +1,7 @@
 // Copyright 2018-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type {
-  CSSProperties,
-  FunctionComponent,
-  MouseEvent,
-  ReactChild,
-  ReactNode,
-} from 'react';
+import type { CSSProperties, MouseEvent, ReactChild, ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { noop } from 'lodash';
@@ -98,7 +92,7 @@ const getDefaultBlur = (
 ): AvatarBlur =>
   shouldBlurAvatar(...args) ? AvatarBlur.BlurPicture : AvatarBlur.NoBlur;
 
-export const Avatar: FunctionComponent<Props> = ({
+export function Avatar({
   acceptedMessageRequest,
   avatarPath,
   badge,
@@ -126,7 +120,7 @@ export const Avatar: FunctionComponent<Props> = ({
     sharedGroupNames,
     unblurredAvatarPath,
   }),
-}) => {
+}: Props): JSX.Element {
   const [imageBroken, setImageBroken] = useState(false);
 
   useEffect(() => {
@@ -312,7 +306,7 @@ export const Avatar: FunctionComponent<Props> = ({
       {badgeNode}
     </div>
   );
-};
+}
 
 // This is only exported for testing.
 export function _getBadgeSize(avatarSize: number): undefined | number {

ts/components/AvatarColorPicker.stories.tsx

@@ -23,14 +23,16 @@ export default {
   title: 'Components/AvatarColorPicker',
 };
 
-export const Default = (): JSX.Element => (
-  <AvatarColorPicker {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <AvatarColorPicker {...createProps()} />;
+}
 
-export const Selected = (): JSX.Element => (
-  <AvatarColorPicker
-    {...createProps({
-      selectedColor: AvatarColors[7],
-    })}
-  />
-);
+export function Selected(): JSX.Element {
+  return (
+    <AvatarColorPicker
+      {...createProps({
+        selectedColor: AvatarColors[7],
+      })}
+    />
+  );
+}

ts/components/AvatarColorPicker.tsx

@@ -13,11 +13,11 @@ export type PropsType = {
   selectedColor?: AvatarColorType;
 };
 
-export const AvatarColorPicker = ({
+export function AvatarColorPicker({
   i18n,
   onColorSelected,
   selectedColor,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <>
       <div className="AvatarEditor__avatar-selector-title">
@@ -38,4 +38,4 @@ export const AvatarColorPicker = ({
       </div>
     </>
   );
-};
+}

ts/components/AvatarEditor.stories.tsx

@@ -82,28 +82,37 @@ export default {
   title: 'Components/AvatarEditor',
 };
 
-export const NoAvatarGroup = (): JSX.Element => (
-  <AvatarEditor
-    {...createProps({ isGroup: true, userAvatarData: getDefaultAvatars(true) })}
-  />
-);
+export function NoAvatarGroup(): JSX.Element {
+  return (
+    <AvatarEditor
+      {...createProps({
+        isGroup: true,
+        userAvatarData: getDefaultAvatars(true),
+      })}
+    />
+  );
+}
 
 NoAvatarGroup.story = {
   name: 'No Avatar (group)',
 };
 
-export const NoAvatarMe = (): JSX.Element => (
-  <AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
-);
+export function NoAvatarMe(): JSX.Element {
+  return (
+    <AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
+  );
+}
 
 NoAvatarMe.story = {
   name: 'No Avatar (me)',
 };
 
-export const HasAvatar = (): JSX.Element => (
-  <AvatarEditor
-    {...createProps({
-      avatarPath: '/fixtures/kitten-3-64-64.jpg',
-    })}
-  />
-);
+export function HasAvatar(): JSX.Element {
+  return (
+    <AvatarEditor
+      {...createProps({
+        avatarPath: '/fixtures/kitten-3-64-64.jpg',
+      })}
+    />
+  );
+}

ts/components/AvatarEditor.tsx

@@ -44,7 +44,7 @@ enum EditMode {
   Text = 'Text',
 }
 
-export const AvatarEditor = ({
+export function AvatarEditor({
   avatarColor,
   avatarPath,
   avatarValue,
@@ -58,7 +58,7 @@ export const AvatarEditor = ({
   userAvatarData,
   replaceAvatar,
   saveAvatarToDisk,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [provisionalSelectedAvatar, setProvisionalSelectedAvatar] = useState<
     AvatarDataType | undefined
   >();
@@ -298,4 +298,4 @@ export const AvatarEditor = ({
   }
 
   return <div className="AvatarEditor">{content}</div>;
-};
+}

ts/components/AvatarIconEditor.stories.tsx

@@ -25,24 +25,28 @@ export default {
   title: 'Components/AvatarIconEditor',
 };
 
-export const PersonalIcon = (): JSX.Element => (
-  <AvatarIconEditor
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[3],
-        icon: PersonalAvatarIcons[0],
-      }),
-    })}
-  />
-);
+export function PersonalIcon(): JSX.Element {
+  return (
+    <AvatarIconEditor
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[3],
+          icon: PersonalAvatarIcons[0],
+        }),
+      })}
+    />
+  );
+}
 
-export const GroupIcon = (): JSX.Element => (
-  <AvatarIconEditor
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[8],
-        icon: GroupAvatarIcons[0],
-      }),
-    })}
-  />
-);
+export function GroupIcon(): JSX.Element {
+  return (
+    <AvatarIconEditor
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[8],
+          icon: GroupAvatarIcons[0],
+        }),
+      })}
+    />
+  );
+}

ts/components/AvatarIconEditor.tsx

@@ -17,11 +17,11 @@ export type PropsType = {
   onClose: (avatarData?: AvatarDataType) => unknown;
 };
 
-export const AvatarIconEditor = ({
+export function AvatarIconEditor({
   avatarData: initialAvatarData,
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [avatarBuffer, setAvatarBuffer] = useState<Uint8Array | undefined>();
   const [avatarData, setAvatarData] =
     useState<AvatarDataType>(initialAvatarData);
@@ -81,4 +81,4 @@ export const AvatarIconEditor = ({
       />
     </>
   );
-};
+}

ts/components/AvatarLightbox.stories.tsx

@@ -32,15 +32,17 @@ export default {
   title: 'Components/AvatarLightbox',
 };
 
-export const Group = (): JSX.Element => (
-  <AvatarLightbox
-    {...createProps({
-      isGroup: true,
-    })}
-  />
-);
+export function Group(): JSX.Element {
+  return (
+    <AvatarLightbox
+      {...createProps({
+        isGroup: true,
+      })}
+    />
+  );
+}
 
-export const Person = (): JSX.Element => {
+export function Person(): JSX.Element {
   const conversation = getDefaultConversation();
   return (
     <AvatarLightbox
@@ -50,12 +52,14 @@ export const Person = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
-export const Photo = (): JSX.Element => (
-  <AvatarLightbox
-    {...createProps({
-      avatarPath: '/fixtures/kitten-1-64-64.jpg',
-    })}
-  />
-);
+export function Photo(): JSX.Element {
+  return (
+    <AvatarLightbox
+      {...createProps({
+        avatarPath: '/fixtures/kitten-1-64-64.jpg',
+      })}
+    />
+  );
+}

ts/components/AvatarLightbox.tsx

@@ -17,14 +17,14 @@ export type PropsType = {
   onClose: () => unknown;
 };
 
-export const AvatarLightbox = ({
+export function AvatarLightbox({
   avatarColor,
   avatarPath,
   conversationTitle,
   i18n,
   isGroup,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Lightbox close={onClose} i18n={i18n} media={[]}>
       <AvatarPreview
@@ -43,4 +43,4 @@ export const AvatarLightbox = ({
       />
     </Lightbox>
   );
-};
+}

ts/components/AvatarModalButtons.stories.tsx

@@ -23,21 +23,23 @@ export default {
   title: 'Components/AvatarModalButtons',
 };
 
-export const HasChanges = (): JSX.Element => (
-  <AvatarModalButtons
-    {...createProps({
-      hasChanges: true,
-    })}
-  />
-);
+export function HasChanges(): JSX.Element {
+  return (
+    <AvatarModalButtons
+      {...createProps({
+        hasChanges: true,
+      })}
+    />
+  );
+}
 
 HasChanges.story = {
   name: 'Has changes',
 };
 
-export const NoChanges = (): JSX.Element => (
-  <AvatarModalButtons {...createProps()} />
-);
+export function NoChanges(): JSX.Element {
+  return <AvatarModalButtons {...createProps()} />;
+}
 
 NoChanges.story = {
   name: 'No changes',

ts/components/AvatarModalButtons.tsx

@@ -15,12 +15,12 @@ export type PropsType = {
   onSave: () => unknown;
 };
 
-export const AvatarModalButtons = ({
+export function AvatarModalButtons({
   hasChanges,
   i18n,
   onCancel,
   onSave,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [confirmDiscardAction, setConfirmDiscardAction] = useState<
     (() => unknown) | undefined
   >(undefined);
@@ -51,4 +51,4 @@ export const AvatarModalButtons = ({
       )}
     </Modal.ButtonFooter>
   );
-};
+}

ts/components/AvatarPopup.stories.tsx

@@ -61,54 +61,54 @@ export default {
   title: 'Components/Avatar Popup',
 };
 
-export const AvatarOnly = (): JSX.Element => {
+export function AvatarOnly(): JSX.Element {
   const props = useProps();
 
   return <AvatarPopup {...props} />;
-};
+}
 
-export const HasBadge = (): JSX.Element => {
+export function HasBadge(): JSX.Element {
   const props = useProps({
     badge: getFakeBadge(),
     title: 'Janet Yellen',
   });
 
   return <AvatarPopup {...props} />;
-};
+}
 
 HasBadge.story = {
   name: 'Has badge',
 };
 
-export const Title = (): JSX.Element => {
+export function Title(): JSX.Element {
   const props = useProps({
     title: 'My Great Title',
   });
 
   return <AvatarPopup {...props} />;
-};
+}
 
-export const ProfileName = (): JSX.Element => {
+export function ProfileName(): JSX.Element {
   const props = useProps({
     profileName: 'Sam Neill',
   });
 
   return <AvatarPopup {...props} />;
-};
+}
 
-export const PhoneNumber = (): JSX.Element => {
+export function PhoneNumber(): JSX.Element {
   const props = useProps({
     profileName: 'Sam Neill',
     phoneNumber: '(555) 867-5309',
   });
 
   return <AvatarPopup {...props} />;
-};
+}
 
-export const UpdateAvailable = (): JSX.Element => {
+export function UpdateAvailable(): JSX.Element {
   const props = useProps({
     hasPendingUpdate: true,
   });
 
   return <AvatarPopup {...props} />;
-};
+}

ts/components/AvatarPopup.tsx

@@ -28,7 +28,7 @@ export type Props = {
   name?: string;
 } & Omit<AvatarProps, 'onClick'>;
 
-export const AvatarPopup = (props: Props): JSX.Element => {
+export function AvatarPopup(props: Props): JSX.Element {
   const {
     hasPendingUpdate,
     i18n,
@@ -121,4 +121,4 @@ export const AvatarPopup = (props: Props): JSX.Element => {
       )}
     </div>
   );
-};
+}

ts/components/AvatarPreview.stories.tsx

@@ -39,85 +39,97 @@ export default {
   title: 'Components/AvatarPreview',
 };
 
-export const NoStatePersonal = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarColor: AvatarColors[0],
-      conversationTitle: 'Just Testing',
-    })}
-  />
-);
+export function NoStatePersonal(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarColor: AvatarColors[0],
+        conversationTitle: 'Just Testing',
+      })}
+    />
+  );
+}
 
 NoStatePersonal.story = {
   name: 'No state (personal)',
 };
 
-export const NoStateGroup = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarColor: AvatarColors[1],
-      isGroup: true,
-    })}
-  />
-);
+export function NoStateGroup(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarColor: AvatarColors[1],
+        isGroup: true,
+      })}
+    />
+  );
+}
 
 NoStateGroup.story = {
   name: 'No state (group)',
 };
 
-export const NoStateGroupUploadMe = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarColor: AvatarColors[1],
-      isEditable: true,
-      isGroup: true,
-    })}
-  />
-);
+export function NoStateGroupUploadMe(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarColor: AvatarColors[1],
+        isEditable: true,
+        isGroup: true,
+      })}
+    />
+  );
+}
 
 NoStateGroupUploadMe.story = {
   name: 'No state (group) + upload me',
 };
 
-export const Value = (): JSX.Element => (
-  <AvatarPreview {...createProps({ avatarValue: TEST_IMAGE })} />
-);
+export function Value(): JSX.Element {
+  return <AvatarPreview {...createProps({ avatarValue: TEST_IMAGE })} />;
+}
 
 Value.story = {
   name: 'value',
 };
 
-export const Path = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({ avatarPath: '/fixtures/kitten-3-64-64.jpg' })}
-  />
-);
+export function Path(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({ avatarPath: '/fixtures/kitten-3-64-64.jpg' })}
+    />
+  );
+}
 
 Path.story = {
   name: 'path',
 };
 
-export const ValuePath = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarPath: '/fixtures/kitten-3-64-64.jpg',
-      avatarValue: TEST_IMAGE,
-    })}
-  />
-);
+export function ValuePath(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarPath: '/fixtures/kitten-3-64-64.jpg',
+        avatarValue: TEST_IMAGE,
+      })}
+    />
+  );
+}
 
 ValuePath.story = {
   name: 'value & path',
 };
 
-export const Style = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarValue: TEST_IMAGE,
-      style: { height: 100, width: 100 },
-    })}
-  />
-);
+export function Style(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarValue: TEST_IMAGE,
+        style: { height: 100, width: 100 },
+      })}
+    />
+  );
+}
 
 Style.story = {
   name: 'style',

ts/components/AvatarPreview.tsx

@@ -33,7 +33,7 @@ enum ImageStatus {
   HasImage = 'has-image',
 }
 
-export const AvatarPreview = ({
+export function AvatarPreview({
   avatarColor = AvatarColors[0],
   avatarPath,
   avatarValue,
@@ -45,7 +45,7 @@ export const AvatarPreview = ({
   onClear,
   onClick,
   style = {},
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [avatarPreview, setAvatarPreview] = useState<Uint8Array | undefined>();
 
   // Loads the initial avatarPath if one is provided, but only if we're in editable mode.
@@ -199,4 +199,4 @@ export const AvatarPreview = ({
       </div>
     </div>
   );
-};
+}

ts/components/AvatarSpacer.tsx

@@ -5,8 +5,8 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import type { AvatarSize } from './Avatar';
 
-export const AvatarSpacer = ({
+export function AvatarSpacer({
   size,
-}: Readonly<{ size: AvatarSize }>): ReactElement => (
-  <div style={{ minWidth: size, height: size, width: size }} />
-);
+}: Readonly<{ size: AvatarSize }>): ReactElement {
+  return <div style={{ minWidth: size, height: size, width: size }} />;
+}

ts/components/AvatarTextEditor.stories.tsx

@@ -24,35 +24,41 @@ export default {
   title: 'Components/AvatarTextEditor',
 };
 
-export const Empty = (): JSX.Element => <AvatarTextEditor {...createProps()} />;
+export function Empty(): JSX.Element {
+  return <AvatarTextEditor {...createProps()} />;
+}
 
-export const WithData = (): JSX.Element => (
-  <AvatarTextEditor
-    {...createProps({
-      avatarData: {
-        id: '123',
-        color: AvatarColors[6],
-        text: 'SUP',
-      },
-    })}
-  />
-);
+export function WithData(): JSX.Element {
+  return (
+    <AvatarTextEditor
+      {...createProps({
+        avatarData: {
+          id: '123',
+          color: AvatarColors[6],
+          text: 'SUP',
+        },
+      })}
+    />
+  );
+}
 
 WithData.story = {
   name: 'with Data',
 };
 
-export const WithWideCharacters = (): JSX.Element => (
-  <AvatarTextEditor
-    {...createProps({
-      avatarData: {
-        id: '123',
-        color: AvatarColors[6],
-        text: '‱௸𒈙',
-      },
-    })}
-  />
-);
+export function WithWideCharacters(): JSX.Element {
+  return (
+    <AvatarTextEditor
+      {...createProps({
+        avatarData: {
+          id: '123',
+          color: AvatarColors[6],
+          text: '‱௸𒈙',
+        },
+      })}
+    />
+  );
+}
 
 WithWideCharacters.story = {
   name: 'with wide characters',

ts/components/AvatarTextEditor.tsx

@@ -40,12 +40,12 @@ export type PropsType = {
 const BUBBLE_SIZE = 120;
 const MAX_LENGTH = 3;
 
-export const AvatarTextEditor = ({
+export function AvatarTextEditor({
   avatarData,
   i18n,
   onCancel,
   onDone,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const initialText = useMemo(() => avatarData?.text || '', [avatarData]);
   const initialColor = useMemo(
     () => avatarData?.color || AvatarColors[0],
@@ -194,4 +194,4 @@ export const AvatarTextEditor = ({
       </div>
     </>
   );
-};
+}

ts/components/AvatarUploadButton.stories.tsx

@@ -22,6 +22,6 @@ export default {
   title: 'Components/AvatarUploadButton',
 };
 
-export const Default = (): JSX.Element => (
-  <AvatarUploadButton {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <AvatarUploadButton {...createProps()} />;
+}

ts/components/AvatarUploadButton.tsx

@@ -14,11 +14,11 @@ export type PropsType = {
   onChange: (avatar: Uint8Array) => unknown;
 };
 
-export const AvatarUploadButton = ({
+export function AvatarUploadButton({
   className,
   i18n,
   onChange,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const fileInputRef = useRef<null | HTMLInputElement>(null);
 
   const [processingFile, setProcessingFile] = useState<File | undefined>();
@@ -84,4 +84,4 @@ export const AvatarUploadButton = ({
       />
     </>
   );
-};
+}

ts/components/BackboneHost.tsx

@@ -9,7 +9,7 @@ type PropsType = {
   className?: string;
 };
 
-export const BackboneHost = ({ View, className }: PropsType): JSX.Element => {
+export function BackboneHost({ View, className }: PropsType): JSX.Element {
   const hostRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<Backbone.View | undefined>(undefined);
 
@@ -35,4 +35,4 @@ export const BackboneHost = ({ View, className }: PropsType): JSX.Element => {
       <div className={className} ref={hostRef} />
     </div>
   );
-};
+}

ts/components/BadgeDescription.stories.tsx

@@ -9,24 +9,28 @@ export default {
   title: 'Components/BadgeDescription',
 };
 
-export const NormalName = (): JSX.Element => (
-  <BadgeDescription
-    template="{short_name} is here! Hello, {short_name}! {short_name}, I think you're great. This is not replaced: {not_replaced}"
-    firstName="Alice"
-    title="Should not be seen"
-  />
-);
+export function NormalName(): JSX.Element {
+  return (
+    <BadgeDescription
+      template="{short_name} is here! Hello, {short_name}! {short_name}, I think you're great. This is not replaced: {not_replaced}"
+      firstName="Alice"
+      title="Should not be seen"
+    />
+  );
+}
 
 NormalName.story = {
   name: 'Normal name',
 };
 
-export const NameWithRtlOverrides = (): JSX.Element => (
-  <BadgeDescription
-    template="Hello, {short_name}! {short_name}, I think you're great."
-    title={'Flip-\u202eflop'}
-  />
-);
+export function NameWithRtlOverrides(): JSX.Element {
+  return (
+    <BadgeDescription
+      template="Hello, {short_name}! {short_name}, I think you're great."
+      title={'Flip-\u202eflop'}
+    />
+  );
+}
 
 NameWithRtlOverrides.story = {
   name: 'Name with RTL overrides',

ts/components/BadgeDialog.stories.tsx

@@ -27,108 +27,120 @@ const defaultProps: ComponentProps<typeof BadgeDialog> = {
   title: 'Alice Levine',
 };
 
-export const NoBadgesClosedImmediately = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} badges={[]} />
-);
+export function NoBadgesClosedImmediately(): JSX.Element {
+  return <BadgeDialog {...defaultProps} badges={[]} />;
+}
 
 NoBadgesClosedImmediately.story = {
   name: 'No badges (closed immediately)',
 };
 
-export const OneBadge = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} badges={getFakeBadges(1)} />
-);
+export function OneBadge(): JSX.Element {
+  return <BadgeDialog {...defaultProps} badges={getFakeBadges(1)} />;
+}
 
 OneBadge.story = {
   name: 'One badge',
 };
 
-export const BadgeWithNoImageShouldBeImpossible = (): JSX.Element => (
-  <BadgeDialog
-    {...defaultProps}
-    badges={[
-      {
-        ...getFakeBadge(),
-        images: [],
-      },
-    ]}
-  />
-);
+export function BadgeWithNoImageShouldBeImpossible(): JSX.Element {
+  return (
+    <BadgeDialog
+      {...defaultProps}
+      badges={[
+        {
+          ...getFakeBadge(),
+          images: [],
+        },
+      ]}
+    />
+  );
+}
 
 BadgeWithNoImageShouldBeImpossible.story = {
   name: 'Badge with no image (should be impossible)',
 };
 
-export const BadgeWithPendingImage = (): JSX.Element => (
-  <BadgeDialog
-    {...defaultProps}
-    badges={[
-      {
-        ...getFakeBadge(),
-        images: Array(4).fill(
-          zipObject(
-            Object.values(BadgeImageTheme),
-            repeat({ url: 'https://example.com/ignored.svg' })
-          )
-        ),
-      },
-    ]}
-  />
-);
-
-BadgeWithPendingImage.story = {
-  name: 'Badge with pending image',
-};
-
-export const BadgeWithOnlyOneLowDetailImage = (): JSX.Element => (
-  <BadgeDialog
-    {...defaultProps}
-    badges={[
-      {
-        ...getFakeBadge(),
-        images: [
-          zipObject(
-            Object.values(BadgeImageTheme),
-            repeat({
-              localPath: '/fixtures/orange-heart.svg',
-              url: 'https://example.com/ignored.svg',
-            })
-          ),
-          ...Array(3).fill(
+export function BadgeWithPendingImage(): JSX.Element {
+  return (
+    <BadgeDialog
+      {...defaultProps}
+      badges={[
+        {
+          ...getFakeBadge(),
+          images: Array(4).fill(
             zipObject(
               Object.values(BadgeImageTheme),
               repeat({ url: 'https://example.com/ignored.svg' })
             )
           ),
-        ],
-      },
-    ]}
-  />
-);
+        },
+      ]}
+    />
+  );
+}
+
+BadgeWithPendingImage.story = {
+  name: 'Badge with pending image',
+};
+
+export function BadgeWithOnlyOneLowDetailImage(): JSX.Element {
+  return (
+    <BadgeDialog
+      {...defaultProps}
+      badges={[
+        {
+          ...getFakeBadge(),
+          images: [
+            zipObject(
+              Object.values(BadgeImageTheme),
+              repeat({
+                localPath: '/fixtures/orange-heart.svg',
+                url: 'https://example.com/ignored.svg',
+              })
+            ),
+            ...Array(3).fill(
+              zipObject(
+                Object.values(BadgeImageTheme),
+                repeat({ url: 'https://example.com/ignored.svg' })
+              )
+            ),
+          ],
+        },
+      ]}
+    />
+  );
+}
 
 BadgeWithOnlyOneLowDetailImage.story = {
   name: 'Badge with only one, low-detail image',
 };
 
-export const FiveBadges = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} badges={getFakeBadges(5)} />
-);
+export function FiveBadges(): JSX.Element {
+  return <BadgeDialog {...defaultProps} badges={getFakeBadges(5)} />;
+}
 
 FiveBadges.story = {
   name: 'Five badges',
 };
 
-export const ManyBadges = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} badges={getFakeBadges(50)} />
-);
+export function ManyBadges(): JSX.Element {
+  return <BadgeDialog {...defaultProps} badges={getFakeBadges(50)} />;
+}
 
 ManyBadges.story = {
   name: 'Many badges',
 };
 
-export const ManyBadgesUserIsASubscriber = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} areWeASubscriber badges={getFakeBadges(50)} />
-);
+export function ManyBadgesUserIsASubscriber(): JSX.Element {
+  return (
+    <BadgeDialog
+      {...defaultProps}
+      areWeASubscriber
+      badges={getFakeBadges(50)}
+    />
+  );
+}
 
 ManyBadgesUserIsASubscriber.story = {
   name: 'Many badges, user is a subscriber',

ts/components/BetterAvatar.stories.tsx

@@ -30,35 +30,41 @@ export default {
   title: 'Components/BetterAvatar',
 };
 
-export const Text = (): JSX.Element => (
-  <BetterAvatar
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[0],
-        text: 'AH',
-      }),
-    })}
-  />
-);
+export function Text(): JSX.Element {
+  return (
+    <BetterAvatar
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[0],
+          text: 'AH',
+        }),
+      })}
+    />
+  );
+}
 
-export const PersonalIcon = (): JSX.Element => (
-  <BetterAvatar
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[1],
-        icon: PersonalAvatarIcons[1],
-      }),
-    })}
-  />
-);
+export function PersonalIcon(): JSX.Element {
+  return (
+    <BetterAvatar
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[1],
+          icon: PersonalAvatarIcons[1],
+        }),
+      })}
+    />
+  );
+}
 
-export const GroupIcon = (): JSX.Element => (
-  <BetterAvatar
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[1],
-        icon: GroupAvatarIcons[1],
-      }),
-    })}
-  />
-);
+export function GroupIcon(): JSX.Element {
+  return (
+    <BetterAvatar
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[1],
+          icon: GroupAvatarIcons[1],
+        }),
+      })}
+    />
+  );
+}

ts/components/BetterAvatar.tsx

@@ -21,14 +21,14 @@ export type PropsType = {
   size?: AvatarSize;
 };
 
-export const BetterAvatar = ({
+export function BetterAvatar({
   avatarData,
   i18n,
   isSelected,
   onClick,
   onDelete,
   size = 48,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [avatarBuffer, setAvatarBuffer] = useState<Uint8Array | undefined>(
     avatarData.buffer
   );
@@ -115,4 +115,4 @@ export const BetterAvatar = ({
       )}
     </BetterAvatarBubble>
   );
-};
+}

ts/components/BetterAvatarBubble.stories.tsx

@@ -27,32 +27,38 @@ export default {
   title: 'Components/BetterAvatarBubble',
 };
 
-export const Children = (): JSX.Element => (
-  <BetterAvatarBubble
-    {...createProps({
-      children: <div>HI</div>,
-      color: AvatarColors[8],
-    })}
-  />
-);
+export function Children(): JSX.Element {
+  return (
+    <BetterAvatarBubble
+      {...createProps({
+        children: <div>HI</div>,
+        color: AvatarColors[8],
+      })}
+    />
+  );
+}
 
-export const Selected = (): JSX.Element => (
-  <BetterAvatarBubble
-    {...createProps({
-      color: AvatarColors[1],
-      isSelected: true,
-    })}
-  />
-);
+export function Selected(): JSX.Element {
+  return (
+    <BetterAvatarBubble
+      {...createProps({
+        color: AvatarColors[1],
+        isSelected: true,
+      })}
+    />
+  );
+}
 
-export const Style = (): JSX.Element => (
-  <BetterAvatarBubble
-    {...createProps({
-      style: {
-        height: 120,
-        width: 120,
-      },
-      color: AvatarColors[2],
-    })}
-  />
-);
+export function Style(): JSX.Element {
+  return (
+    <BetterAvatarBubble
+      {...createProps({
+        style: {
+          height: 120,
+          width: 120,
+        },
+        color: AvatarColors[2],
+      })}
+    />
+  );
+}

ts/components/BetterAvatarBubble.tsx

@@ -18,7 +18,7 @@ export type PropsType = {
   style?: CSSProperties;
 };
 
-export const BetterAvatarBubble = ({
+export function BetterAvatarBubble({
   children,
   color,
   i18n,
@@ -26,7 +26,7 @@ export const BetterAvatarBubble = ({
   onDelete,
   onSelect,
   style,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <div
       className={classNames(
@@ -58,4 +58,4 @@ export const BetterAvatarBubble = ({
       {children}
     </div>
   );
-};
+}

ts/components/Button.stories.tsx

@@ -10,55 +10,65 @@ export default {
   title: 'Components/Button',
 };
 
-export const KitchenSink = (): JSX.Element => (
-  <>
-    {Object.values(ButtonVariant).map(variant => (
-      <React.Fragment key={variant}>
-        {[ButtonSize.Large, ButtonSize.Medium, ButtonSize.Small].map(size => (
-          <React.Fragment key={size}>
-            <p>
-              <Button onClick={action('onClick')} size={size} variant={variant}>
-                {variant}
-              </Button>
-            </p>
-            <p>
-              <Button
-                disabled
-                onClick={action('onClick')}
-                size={size}
-                variant={variant}
-              >
-                {variant}
-              </Button>
-            </p>
-          </React.Fragment>
-        ))}
-      </React.Fragment>
-    ))}
-  </>
-);
+export function KitchenSink(): JSX.Element {
+  return (
+    <>
+      {Object.values(ButtonVariant).map(variant => (
+        <React.Fragment key={variant}>
+          {[ButtonSize.Large, ButtonSize.Medium, ButtonSize.Small].map(size => (
+            <React.Fragment key={size}>
+              <p>
+                <Button
+                  onClick={action('onClick')}
+                  size={size}
+                  variant={variant}
+                >
+                  {variant}
+                </Button>
+              </p>
+              <p>
+                <Button
+                  disabled
+                  onClick={action('onClick')}
+                  size={size}
+                  variant={variant}
+                >
+                  {variant}
+                </Button>
+              </p>
+            </React.Fragment>
+          ))}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
 
 KitchenSink.story = {
   name: 'Kitchen sink',
 };
 
-export const AriaLabel = (): JSX.Element => (
-  <Button
-    aria-label="hello"
-    className="module-ForwardMessageModal__header--back"
-    onClick={action('onClick')}
-  />
-);
+export function AriaLabel(): JSX.Element {
+  return (
+    <Button
+      aria-label="hello"
+      className="module-ForwardMessageModal__header--back"
+      onClick={action('onClick')}
+    />
+  );
+}
 
 AriaLabel.story = {
   name: 'aria-label',
 };
 
-export const CustomStyles = (): JSX.Element => (
-  <Button onClick={action('onClick')} style={{ transform: 'rotate(5deg)' }}>
-    Hello world
-  </Button>
-);
+export function CustomStyles(): JSX.Element {
+  return (
+    <Button onClick={action('onClick')} style={{ transform: 'rotate(5deg)' }}>
+      Hello world
+    </Button>
+  );
+}
 
 CustomStyles.story = {
   name: 'Custom styles',

ts/components/Button.tsx

@@ -100,7 +100,7 @@ const VARIANT_CLASS_NAMES = new Map<ButtonVariant, string>([
 ]);
 
 export const Button = React.forwardRef<HTMLButtonElement, PropsType>(
-  (props, ref) => {
+  function ButtonInner(props, ref) {
     const {
       children,
       className,

ts/components/CallBackgroundBlur.tsx

@@ -12,12 +12,12 @@ export type PropsType = {
   color?: AvatarColorType;
 };
 
-export const CallBackgroundBlur = ({
+export function CallBackgroundBlur({
   avatarPath,
   children,
   className,
   color,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <div
       className={classNames(
@@ -39,4 +39,4 @@ export const CallBackgroundBlur = ({
       {children}
     </div>
   );
-};
+}

ts/components/CallManager.stories.tsx

@@ -121,128 +121,142 @@ export default {
   title: 'Components/CallManager',
 };
 
-export const NoCall = (): JSX.Element => <CallManager {...createProps()} />;
+export function NoCall(): JSX.Element {
+  return <CallManager {...createProps()} />;
+}
 
-export const OngoingDirectCall = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      activeCall: {
-        ...getCommonActiveCallData(),
-        callMode: CallMode.Direct,
-        callState: CallState.Accepted,
-        peekedParticipants: [],
-        remoteParticipants: [
-          { hasRemoteVideo: true, presenting: false, title: 'Remy' },
-        ],
-      },
-    })}
-  />
-);
+export function OngoingDirectCall(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: {
+          ...getCommonActiveCallData(),
+          callMode: CallMode.Direct,
+          callState: CallState.Accepted,
+          peekedParticipants: [],
+          remoteParticipants: [
+            { hasRemoteVideo: true, presenting: false, title: 'Remy' },
+          ],
+        },
+      })}
+    />
+  );
+}
 
-export const OngoingGroupCall = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      activeCall: {
-        ...getCommonActiveCallData(),
-        callMode: CallMode.Group,
-        connectionState: GroupCallConnectionState.Connected,
-        conversationsWithSafetyNumberChanges: [],
-        deviceCount: 0,
-        joinState: GroupCallJoinState.Joined,
-        maxDevices: 5,
-        groupMembers: [],
-        isConversationTooBigToRing: false,
-        peekedParticipants: [],
-        remoteParticipants: [],
-        remoteAudioLevels: new Map<number, number>(),
-      },
-    })}
-  />
-);
+export function OngoingGroupCall(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: {
+          ...getCommonActiveCallData(),
+          callMode: CallMode.Group,
+          connectionState: GroupCallConnectionState.Connected,
+          conversationsWithSafetyNumberChanges: [],
+          deviceCount: 0,
+          joinState: GroupCallJoinState.Joined,
+          maxDevices: 5,
+          groupMembers: [],
+          isConversationTooBigToRing: false,
+          peekedParticipants: [],
+          remoteParticipants: [],
+          remoteAudioLevels: new Map<number, number>(),
+        },
+      })}
+    />
+  );
+}
 
-export const RingingDirectCall = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      incomingCall: {
-        callMode: CallMode.Direct as const,
-        conversation: getConversation(),
-        isVideoCall: true,
-      },
-    })}
-  />
-);
+export function RingingDirectCall(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        incomingCall: {
+          callMode: CallMode.Direct as const,
+          conversation: getConversation(),
+          isVideoCall: true,
+        },
+      })}
+    />
+  );
+}
 
 RingingDirectCall.story = {
   name: 'Ringing (direct call)',
 };
 
-export const RingingGroupCall = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      incomingCall: {
-        callMode: CallMode.Group as const,
-        conversation: {
-          ...getConversation(),
-          type: 'group',
-          title: 'Tahoe Trip',
+export function RingingGroupCall(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        incomingCall: {
+          callMode: CallMode.Group as const,
+          conversation: {
+            ...getConversation(),
+            type: 'group',
+            title: 'Tahoe Trip',
+          },
+          otherMembersRung: [
+            { firstName: 'Morty', title: 'Morty Smith' },
+            { firstName: 'Summer', title: 'Summer Smith' },
+          ],
+          ringer: { firstName: 'Rick', title: 'Rick Sanchez' },
         },
-        otherMembersRung: [
-          { firstName: 'Morty', title: 'Morty Smith' },
-          { firstName: 'Summer', title: 'Summer Smith' },
-        ],
-        ringer: { firstName: 'Rick', title: 'Rick Sanchez' },
-      },
-    })}
-  />
-);
+      })}
+    />
+  );
+}
 
 RingingGroupCall.story = {
   name: 'Ringing (group call)',
 };
 
-export const CallRequestNeeded = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      activeCall: {
-        ...getCommonActiveCallData(),
-        callEndedReason: CallEndedReason.RemoteHangupNeedPermission,
-        callMode: CallMode.Direct,
-        callState: CallState.Accepted,
-        peekedParticipants: [],
-        remoteParticipants: [
-          { hasRemoteVideo: true, presenting: false, title: 'Mike' },
-        ],
-      },
-    })}
-  />
-);
+export function CallRequestNeeded(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: {
+          ...getCommonActiveCallData(),
+          callEndedReason: CallEndedReason.RemoteHangupNeedPermission,
+          callMode: CallMode.Direct,
+          callState: CallState.Accepted,
+          peekedParticipants: [],
+          remoteParticipants: [
+            { hasRemoteVideo: true, presenting: false, title: 'Mike' },
+          ],
+        },
+      })}
+    />
+  );
+}
 
-export const GroupCallSafetyNumberChanged = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      activeCall: {
-        ...getCommonActiveCallData(),
-        callMode: CallMode.Group,
-        connectionState: GroupCallConnectionState.Connected,
-        conversationsWithSafetyNumberChanges: [
-          {
-            ...getDefaultConversation({
-              title: 'Aaron',
-            }),
-          },
-        ],
-        deviceCount: 0,
-        joinState: GroupCallJoinState.Joined,
-        maxDevices: 5,
-        groupMembers: [],
-        isConversationTooBigToRing: false,
-        peekedParticipants: [],
-        remoteParticipants: [],
-        remoteAudioLevels: new Map<number, number>(),
-      },
-    })}
-  />
-);
+export function GroupCallSafetyNumberChanged(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: {
+          ...getCommonActiveCallData(),
+          callMode: CallMode.Group,
+          connectionState: GroupCallConnectionState.Connected,
+          conversationsWithSafetyNumberChanges: [
+            {
+              ...getDefaultConversation({
+                title: 'Aaron',
+              }),
+            },
+          ],
+          deviceCount: 0,
+          joinState: GroupCallJoinState.Joined,
+          maxDevices: 5,
+          groupMembers: [],
+          isConversationTooBigToRing: false,
+          peekedParticipants: [],
+          remoteParticipants: [],
+          remoteAudioLevels: new Map<number, number>(),
+        },
+      })}
+    />
+  );
+}
 
 GroupCallSafetyNumberChanged.story = {
   name: 'Group call - Safety Number Changed',

ts/components/CallManager.tsx

@@ -105,7 +105,7 @@ type ActiveCallManagerPropsType = PropsType & {
   activeCall: ActiveCallType;
 };
 
-const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
+function ActiveCallManager({
   activeCall,
   availableCameras,
   cancelCall,
@@ -137,7 +137,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
   toggleScreenRecordingPermissionsDialog,
   toggleSettings,
   toggleSpeakerView,
-}) => {
+}: ActiveCallManagerPropsType): JSX.Element {
   const {
     conversation,
     hasLocalAudio,
@@ -374,9 +374,9 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
       ) : null}
     </>
   );
-};
+}
 
-export const CallManager: React.FC<PropsType> = props => {
+export function CallManager(props: PropsType): JSX.Element | null {
   const {
     acceptCall,
     activeCall,
@@ -449,7 +449,7 @@ export const CallManager: React.FC<PropsType> = props => {
   }
 
   return null;
-};
+}
 
 function getShouldRing({
   activeCall,

ts/components/CallNeedPermissionScreen.tsx

@@ -29,11 +29,11 @@ type Props = {
 
 const AUTO_CLOSE_MS = 10000;
 
-export const CallNeedPermissionScreen: React.FC<Props> = ({
+export function CallNeedPermissionScreen({
   conversation,
   i18n,
   close,
-}) => {
+}: Props): JSX.Element {
   const title = conversation.title || i18n('unknownContact');
 
   const autoCloseAtRef = useRef<number>(Date.now() + AUTO_CLOSE_MS);
@@ -79,4 +79,4 @@ export const CallNeedPermissionScreen: React.FC<Props> = ({
       </button>
     </div>
   );
-};
+}

ts/components/CallScreen.stories.tsx

@@ -189,11 +189,11 @@ export default {
   title: 'Components/CallScreen',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <CallScreen {...createProps()} />;
-};
+}
 
-export const PreRing = (): JSX.Element => {
+export function PreRing(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -202,7 +202,7 @@ export const PreRing = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 PreRing.story = {
   name: 'Pre-Ring',
@@ -241,7 +241,7 @@ export const _Ended = (): JSX.Element => {
   );
 };
 
-export const HasLocalAudio = (): JSX.Element => {
+export function HasLocalAudio(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -250,13 +250,13 @@ export const HasLocalAudio = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 HasLocalAudio.story = {
   name: 'hasLocalAudio',
 };
 
-export const HasLocalVideo = (): JSX.Element => {
+export function HasLocalVideo(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -265,13 +265,13 @@ export const HasLocalVideo = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 HasLocalVideo.story = {
   name: 'hasLocalVideo',
 };
 
-export const HasRemoteVideo = (): JSX.Element => {
+export function HasRemoteVideo(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -280,34 +280,36 @@ export const HasRemoteVideo = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 HasRemoteVideo.story = {
   name: 'hasRemoteVideo',
 };
 
-export const GroupCall1 = (): JSX.Element => (
-  <CallScreen
-    {...createProps({
-      callMode: CallMode.Group,
-      remoteParticipants: [
-        {
-          demuxId: 0,
-          hasRemoteAudio: true,
-          hasRemoteVideo: true,
-          presenting: false,
-          sharingScreen: false,
-          videoAspectRatio: 1.3,
-          ...getDefaultConversation({
-            isBlocked: false,
-            uuid: '72fa60e5-25fb-472d-8a56-e56867c57dda',
-            title: 'Tyler',
-          }),
-        },
-      ],
-    })}
-  />
-);
+export function GroupCall1(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Group,
+        remoteParticipants: [
+          {
+            demuxId: 0,
+            hasRemoteAudio: true,
+            hasRemoteVideo: true,
+            presenting: false,
+            sharingScreen: false,
+            videoAspectRatio: 1.3,
+            ...getDefaultConversation({
+              isBlocked: false,
+              uuid: '72fa60e5-25fb-472d-8a56-e56867c57dda',
+              title: 'Tyler',
+            }),
+          },
+        ],
+      })}
+    />
+  );
+}
 
 GroupCall1.story = {
   name: 'Group call - 1',
@@ -327,7 +329,7 @@ const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
   }),
 }));
 
-export const GroupCallMany = (): JSX.Element => {
+export function GroupCallMany(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -344,74 +346,80 @@ export const GroupCallMany = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 GroupCallMany.story = {
   name: 'Group call - Many',
 };
 
-export const GroupCallReconnecting = (): JSX.Element => (
-  <CallScreen
-    {...createProps({
-      callMode: CallMode.Group,
-      connectionState: GroupCallConnectionState.Reconnecting,
-      remoteParticipants: [
-        {
-          demuxId: 0,
-          hasRemoteAudio: true,
-          hasRemoteVideo: true,
-          presenting: false,
-          sharingScreen: false,
-          videoAspectRatio: 1.3,
-          ...getDefaultConversation({
-            isBlocked: false,
-            title: 'Tyler',
-            uuid: '33871c64-0c22-45ce-8aa4-0ec237ac4a31',
-          }),
-        },
-      ],
-    })}
-  />
-);
+export function GroupCallReconnecting(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Group,
+        connectionState: GroupCallConnectionState.Reconnecting,
+        remoteParticipants: [
+          {
+            demuxId: 0,
+            hasRemoteAudio: true,
+            hasRemoteVideo: true,
+            presenting: false,
+            sharingScreen: false,
+            videoAspectRatio: 1.3,
+            ...getDefaultConversation({
+              isBlocked: false,
+              title: 'Tyler',
+              uuid: '33871c64-0c22-45ce-8aa4-0ec237ac4a31',
+            }),
+          },
+        ],
+      })}
+    />
+  );
+}
 
 GroupCallReconnecting.story = {
   name: 'Group call - reconnecting',
 };
 
-export const GroupCall0 = (): JSX.Element => (
-  <CallScreen
-    {...createProps({
-      callMode: CallMode.Group,
-      remoteParticipants: [],
-    })}
-  />
-);
+export function GroupCall0(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Group,
+        remoteParticipants: [],
+      })}
+    />
+  );
+}
 
 GroupCall0.story = {
   name: 'Group call - 0',
 };
 
-export const GroupCallSomeoneIsSharingScreen = (): JSX.Element => (
-  <CallScreen
-    {...createProps({
-      callMode: CallMode.Group,
-      remoteParticipants: allRemoteParticipants
-        .slice(0, 5)
-        .map((participant, index) => ({
-          ...participant,
-          presenting: index === 1,
-          sharingScreen: index === 1,
-        })),
-    })}
-  />
-);
+export function GroupCallSomeoneIsSharingScreen(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Group,
+        remoteParticipants: allRemoteParticipants
+          .slice(0, 5)
+          .map((participant, index) => ({
+            ...participant,
+            presenting: index === 1,
+            sharingScreen: index === 1,
+          })),
+      })}
+    />
+  );
+}
 
 GroupCallSomeoneIsSharingScreen.story = {
   name: 'Group call - someone is sharing screen',
 };
 
-export const GroupCallSomeoneIsSharingScreenAndYoureReconnecting =
-  (): JSX.Element => (
+export function GroupCallSomeoneIsSharingScreenAndYoureReconnecting(): JSX.Element {
+  return (
     <CallScreen
       {...createProps({
         callMode: CallMode.Group,
@@ -426,6 +434,7 @@ export const GroupCallSomeoneIsSharingScreenAndYoureReconnecting =
       })}
     />
   );
+}
 
 GroupCallSomeoneIsSharingScreenAndYoureReconnecting.story = {
   name: "Group call - someone is sharing screen and you're reconnecting",

ts/components/CallScreen.tsx

@@ -119,7 +119,7 @@ function DirectCallHeaderMessage({
   return null;
 }
 
-export const CallScreen: React.FC<PropsType> = ({
+export function CallScreen({
   activeCall,
   getGroupCallVideoFrameSource,
   getPresentingSources,
@@ -143,7 +143,7 @@ export const CallScreen: React.FC<PropsType> = ({
   toggleScreenRecordingPermissionsDialog,
   toggleSettings,
   toggleSpeakerView,
-}) => {
+}: PropsType): JSX.Element {
   const {
     conversation,
     hasLocalAudio,
@@ -539,7 +539,7 @@ export const CallScreen: React.FC<PropsType> = ({
       </div>
     </div>
   );
-};
+}
 
 function getCallModeClassSuffix(
   callMode: CallMode.Direct | CallMode.Group

ts/components/CallingAudioIndicator.stories.tsx

@@ -11,7 +11,7 @@ export default {
   title: 'Components/CallingAudioIndicator',
 };
 
-export const Extreme = (): JSX.Element => {
+export function Extreme(): JSX.Element {
   const [audioLevel, setAudioLevel] = useState(1);
 
   useEffect(() => {
@@ -30,9 +30,9 @@ export const Extreme = (): JSX.Element => {
       audioLevel={audioLevel}
     />
   );
-};
+}
 
-export const Random = (): JSX.Element => {
+export function Random(): JSX.Element {
   const [audioLevel, setAudioLevel] = useState(1);
 
   useEffect(() => {
@@ -51,4 +51,4 @@ export const Random = (): JSX.Element => {
       audioLevel={audioLevel}
     />
   );
-};
+}

ts/components/CallingButton.stories.tsx

@@ -32,7 +32,7 @@ export default {
   title: 'Components/CallingButton',
 };
 
-export const KitchenSink = (): JSX.Element => {
+export function KitchenSink(): JSX.Element {
   return (
     <>
       {Object.keys(CallingButtonType).map(buttonType => (
@@ -43,71 +43,71 @@ export const KitchenSink = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
-export const AudioOn = (): JSX.Element => {
+export function AudioOn(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.AUDIO_ON,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const AudioOff = (): JSX.Element => {
+export function AudioOff(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.AUDIO_OFF,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const AudioDisabled = (): JSX.Element => {
+export function AudioDisabled(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.AUDIO_DISABLED,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const VideoOn = (): JSX.Element => {
+export function VideoOn(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.VIDEO_ON,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const VideoOff = (): JSX.Element => {
+export function VideoOff(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.VIDEO_OFF,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const VideoDisabled = (): JSX.Element => {
+export function VideoDisabled(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.VIDEO_DISABLED,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const TooltipRight = (): JSX.Element => {
+export function TooltipRight(): JSX.Element {
   const props = createProps({
     tooltipDirection: TooltipPlacement.Right,
   });
   return <CallingButton {...props} />;
-};
+}
 
 TooltipRight.story = {
   name: 'Tooltip right',
 };
 
-export const PresentingOn = (): JSX.Element => {
+export function PresentingOn(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.PRESENTING_ON,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const PresentingOff = (): JSX.Element => {
+export function PresentingOff(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.PRESENTING_OFF,
   });
   return <CallingButton {...props} />;
-};
+}

ts/components/CallingButton.tsx

@@ -35,7 +35,7 @@ export type PropsType = {
   tooltipDirection?: TooltipPlacement;
 };
 
-export const CallingButton = ({
+export function CallingButton({
   buttonType,
   i18n,
   isVisible = true,
@@ -43,7 +43,7 @@ export const CallingButton = ({
   onMouseEnter,
   onMouseLeave,
   tooltipDirection,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const uniqueButtonId = useMemo(() => uuid(), []);
 
   let classNameSuffix = '';
@@ -145,4 +145,4 @@ export const CallingButton = ({
       </div>
     </Tooltip>
   );
-};
+}

ts/components/CallingDeviceSelection.stories.tsx

@@ -41,11 +41,11 @@ export default {
   title: 'Components/CallingDeviceSelection',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <CallingDeviceSelection {...createProps()} />;
-};
+}
 
-export const SomeDevices = (): JSX.Element => {
+export function SomeDevices(): JSX.Element {
   const availableSpeakers = [
     {
       name: 'Default',
@@ -72,9 +72,9 @@ export const SomeDevices = (): JSX.Element => {
   });
 
   return <CallingDeviceSelection {...props} />;
-};
+}
 
-export const DefaultDevices = (): JSX.Element => {
+export function DefaultDevices(): JSX.Element {
   const availableSpeakers = [
     {
       name: 'default (Headphones)',
@@ -103,9 +103,9 @@ export const DefaultDevices = (): JSX.Element => {
   });
 
   return <CallingDeviceSelection {...props} />;
-};
+}
 
-export const AllDevices = (): JSX.Element => {
+export function AllDevices(): JSX.Element {
   const availableSpeakers = [
     {
       name: 'Default',
@@ -179,4 +179,4 @@ export const AllDevices = (): JSX.Element => {
   });
 
   return <CallingDeviceSelection {...props} />;
-};
+}

ts/components/CallingDeviceSelection.tsx

@@ -116,7 +116,7 @@ function createCameraChangeHandler(
   };
 }
 
-export const CallingDeviceSelection = ({
+export function CallingDeviceSelection({
   availableCameras,
   availableMicrophones,
   availableSpeakers,
@@ -126,7 +126,7 @@ export const CallingDeviceSelection = ({
   selectedMicrophone,
   selectedSpeaker,
   toggleSettings,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const selectedMicrophoneIndex = selectedMicrophone
     ? selectedMicrophone.index
     : undefined;
@@ -212,4 +212,4 @@ export const CallingDeviceSelection = ({
       </div>
     </Modal>
   );
-};
+}

ts/components/CallingHeader.stories.tsx

@@ -34,61 +34,73 @@ export default {
   title: 'Components/CallingHeader',
 };
 
-export const Default = (): JSX.Element => <CallingHeader {...createProps()} />;
+export function Default(): JSX.Element {
+  return <CallingHeader {...createProps()} />;
+}
 
-export const LobbyStyle = (): JSX.Element => (
-  <CallingHeader
-    {...createProps()}
-    title={undefined}
-    togglePip={undefined}
-    onCancel={action('onClose')}
-  />
-);
+export function LobbyStyle(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps()}
+      title={undefined}
+      togglePip={undefined}
+      onCancel={action('onClose')}
+    />
+  );
+}
 
 LobbyStyle.story = {
   name: 'Lobby style',
 };
 
-export const WithParticipants = (): JSX.Element => (
-  <CallingHeader
-    {...createProps({
-      isGroupCall: true,
-      participantCount: 10,
-    })}
-  />
-);
+export function WithParticipants(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps({
+        isGroupCall: true,
+        participantCount: 10,
+      })}
+    />
+  );
+}
 
-export const WithParticipantsShown = (): JSX.Element => (
-  <CallingHeader
-    {...createProps({
-      isGroupCall: true,
-      participantCount: 10,
-      showParticipantsList: true,
-    })}
-  />
-);
+export function WithParticipantsShown(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps({
+        isGroupCall: true,
+        participantCount: 10,
+        showParticipantsList: true,
+      })}
+    />
+  );
+}
 
 WithParticipantsShown.story = {
   name: 'With Participants (shown)',
 };
 
-export const LongTitle = (): JSX.Element => (
-  <CallingHeader
-    {...createProps({
-      title:
-        'What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?',
-    })}
-  />
-);
+export function LongTitle(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps({
+        title:
+          'What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?',
+      })}
+    />
+  );
+}
 
-export const TitleWithMessage = (): JSX.Element => (
-  <CallingHeader
-    {...createProps({
-      title: 'Hello world',
-      message: 'Goodbye earth',
-    })}
-  />
-);
+export function TitleWithMessage(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps({
+        title: 'Hello world',
+        message: 'Goodbye earth',
+      })}
+    />
+  );
+}
 
 TitleWithMessage.story = {
   name: 'Title with message',

ts/components/CallingHeader.tsx

@@ -23,7 +23,7 @@ export type PropsType = {
   toggleSpeakerView?: () => void;
 };
 
-export const CallingHeader = ({
+export function CallingHeader({
   i18n,
   isInSpeakerView,
   isGroupCall = false,
@@ -36,103 +36,110 @@ export const CallingHeader = ({
   togglePip,
   toggleSettings,
   toggleSpeakerView,
-}: PropsType): JSX.Element => (
-  <div className="module-calling__header">
-    {title ? (
-      <div className="module-calling__header--header-name">{title}</div>
-    ) : null}
-    {message ? (
-      <div className="module-ongoing-call__header-message">{message}</div>
-    ) : null}
-    <div className="module-calling-tools">
-      {isGroupCall && participantCount ? (
-        <div className="module-calling-tools__button">
-          <Tooltip
-            content={i18n('calling__participants', [String(participantCount)])}
-            theme={Theme.Dark}
-          >
-            <button
-              aria-label={i18n('calling__participants', [
+}: PropsType): JSX.Element {
+  return (
+    <div className="module-calling__header">
+      {title ? (
+        <div className="module-calling__header--header-name">{title}</div>
+      ) : null}
+      {message ? (
+        <div className="module-ongoing-call__header-message">{message}</div>
+      ) : null}
+      <div className="module-calling-tools">
+        {isGroupCall && participantCount ? (
+          <div className="module-calling-tools__button">
+            <Tooltip
+              content={i18n('calling__participants', [
                 String(participantCount),
               ])}
-              className={classNames('CallingButton__participants--container', {
-                'CallingButton__participants--shown': showParticipantsList,
-              })}
-              onClick={toggleParticipants}
-              type="button"
+              theme={Theme.Dark}
             >
-              <i className="CallingButton__participants" />
-              <span className="CallingButton__participants--count">
-                {participantCount}
-              </span>
-            </button>
-          </Tooltip>
-        </div>
-      ) : null}
-      <div className="module-calling-tools__button">
-        <Tooltip
-          content={i18n('callingDeviceSelection__settings')}
-          theme={Theme.Dark}
-        >
-          <button
-            aria-label={i18n('callingDeviceSelection__settings')}
-            className="CallingButton__settings"
-            onClick={toggleSettings}
-            type="button"
-          />
-        </Tooltip>
-      </div>
-      {isGroupCall && participantCount > 2 && toggleSpeakerView && (
+              <button
+                aria-label={i18n('calling__participants', [
+                  String(participantCount),
+                ])}
+                className={classNames(
+                  'CallingButton__participants--container',
+                  {
+                    'CallingButton__participants--shown': showParticipantsList,
+                  }
+                )}
+                onClick={toggleParticipants}
+                type="button"
+              >
+                <i className="CallingButton__participants" />
+                <span className="CallingButton__participants--count">
+                  {participantCount}
+                </span>
+              </button>
+            </Tooltip>
+          </div>
+        ) : null}
         <div className="module-calling-tools__button">
           <Tooltip
-            content={i18n(
-              isInSpeakerView
-                ? 'calling__switch-view--to-grid'
-                : 'calling__switch-view--to-speaker'
-            )}
+            content={i18n('callingDeviceSelection__settings')}
             theme={Theme.Dark}
           >
             <button
-              aria-label={i18n(
+              aria-label={i18n('callingDeviceSelection__settings')}
+              className="CallingButton__settings"
+              onClick={toggleSettings}
+              type="button"
+            />
+          </Tooltip>
+        </div>
+        {isGroupCall && participantCount > 2 && toggleSpeakerView && (
+          <div className="module-calling-tools__button">
+            <Tooltip
+              content={i18n(
                 isInSpeakerView
                   ? 'calling__switch-view--to-grid'
                   : 'calling__switch-view--to-speaker'
               )}
-              className={
-                isInSpeakerView
-                  ? 'CallingButton__grid-view'
-                  : 'CallingButton__speaker-view'
-              }
-              onClick={toggleSpeakerView}
-              type="button"
-            />
-          </Tooltip>
-        </div>
-      )}
-      {togglePip && (
-        <div className="module-calling-tools__button">
-          <Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
-            <button
-              aria-label={i18n('calling__pip--on')}
-              className="CallingButton__pip"
-              onClick={togglePip}
-              type="button"
-            />
-          </Tooltip>
-        </div>
-      )}
-      {onCancel && (
-        <div className="module-calling-tools__button">
-          <Tooltip content={i18n('cancel')} theme={Theme.Dark}>
-            <button
-              aria-label={i18n('cancel')}
-              className="CallingButton__cancel"
-              onClick={onCancel}
-              type="button"
-            />
-          </Tooltip>
-        </div>
-      )}
+              theme={Theme.Dark}
+            >
+              <button
+                aria-label={i18n(
+                  isInSpeakerView
+                    ? 'calling__switch-view--to-grid'
+                    : 'calling__switch-view--to-speaker'
+                )}
+                className={
+                  isInSpeakerView
+                    ? 'CallingButton__grid-view'
+                    : 'CallingButton__speaker-view'
+                }
+                onClick={toggleSpeakerView}
+                type="button"
+              />
+            </Tooltip>
+          </div>
+        )}
+        {togglePip && (
+          <div className="module-calling-tools__button">
+            <Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
+              <button
+                aria-label={i18n('calling__pip--on')}
+                className="CallingButton__pip"
+                onClick={togglePip}
+                type="button"
+              />
+            </Tooltip>
+          </div>
+        )}
+        {onCancel && (
+          <div className="module-calling-tools__button">
+            <Tooltip content={i18n('cancel')} theme={Theme.Dark}>
+              <button
+                aria-label={i18n('cancel')}
+                className="CallingButton__cancel"
+                onClick={onCancel}
+                type="button"
+              />
+            </Tooltip>
+          </div>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+}

ts/components/CallingLobby.stories.tsx

@@ -94,23 +94,23 @@ export default {
   title: 'Components/CallingLobby',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = createProps();
   return <CallingLobby {...props} />;
-};
+}
 
-export const NoCameraNoAvatar = (): JSX.Element => {
+export function NoCameraNoAvatar(): JSX.Element {
   const props = createProps({
     availableCameras: [],
   });
   return <CallingLobby {...props} />;
-};
+}
 
 NoCameraNoAvatar.story = {
   name: 'No Camera, no avatar',
 };
 
-export const NoCameraLocalAvatar = (): JSX.Element => {
+export function NoCameraLocalAvatar(): JSX.Element {
   const props = createProps({
     availableCameras: [],
     me: getDefaultConversation({
@@ -121,52 +121,52 @@ export const NoCameraLocalAvatar = (): JSX.Element => {
     }),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 NoCameraLocalAvatar.story = {
   name: 'No Camera, local avatar',
 };
 
-export const LocalVideo = (): JSX.Element => {
+export function LocalVideo(): JSX.Element {
   const props = createProps({
     hasLocalVideo: true,
   });
   return <CallingLobby {...props} />;
-};
+}
 
-export const InitiallyMuted = (): JSX.Element => {
+export function InitiallyMuted(): JSX.Element {
   const props = createProps({
     hasLocalAudio: false,
   });
   return <CallingLobby {...props} />;
-};
+}
 
 InitiallyMuted.story = {
   name: 'Initially muted',
 };
 
-export const GroupCall0PeekedParticipants = (): JSX.Element => {
+export function GroupCall0PeekedParticipants(): JSX.Element {
   const props = createProps({ isGroupCall: true, peekedParticipants: [] });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall0PeekedParticipants.story = {
   name: 'Group Call - 0 peeked participants',
 };
 
-export const GroupCall1PeekedParticipant = (): JSX.Element => {
+export function GroupCall1PeekedParticipant(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     peekedParticipants: [{ title: 'Sam' }].map(fakePeekedParticipant),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall1PeekedParticipant.story = {
   name: 'Group Call - 1 peeked participant',
 };
 
-export const GroupCall1PeekedParticipantSelf = (): JSX.Element => {
+export function GroupCall1PeekedParticipantSelf(): JSX.Element {
   const uuid = UUID.generate().toString();
   const props = createProps({
     isGroupCall: true,
@@ -177,13 +177,13 @@ export const GroupCall1PeekedParticipantSelf = (): JSX.Element => {
     peekedParticipants: [fakePeekedParticipant({ title: 'Ash', uuid })],
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall1PeekedParticipantSelf.story = {
   name: 'Group Call - 1 peeked participant (self)',
 };
 
-export const GroupCall4PeekedParticipants = (): JSX.Element => {
+export function GroupCall4PeekedParticipants(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
@@ -191,13 +191,13 @@ export const GroupCall4PeekedParticipants = (): JSX.Element => {
     ),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall4PeekedParticipants.story = {
   name: 'Group Call - 4 peeked participants',
 };
 
-export const GroupCall4PeekedParticipantsParticipantsList = (): JSX.Element => {
+export function GroupCall4PeekedParticipantsParticipantsList(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
@@ -206,13 +206,13 @@ export const GroupCall4PeekedParticipantsParticipantsList = (): JSX.Element => {
     showParticipantsList: true,
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall4PeekedParticipantsParticipantsList.story = {
   name: 'Group Call - 4 peeked participants (participants list)',
 };
 
-export const GroupCallCallFull = (): JSX.Element => {
+export function GroupCallCallFull(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     isCallFull: true,
@@ -221,19 +221,19 @@ export const GroupCallCallFull = (): JSX.Element => {
     ),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCallCallFull.story = {
   name: 'Group Call - call full',
 };
 
-export const GroupCall0PeekedParticipantsBigGroup = (): JSX.Element => {
+export function GroupCall0PeekedParticipantsBigGroup(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     groupMembers: times(100, () => getDefaultConversation()),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall0PeekedParticipantsBigGroup.story = {
   name: 'Group Call - 0 peeked participants, big group',

ts/components/CallingLobby.tsx

@@ -63,7 +63,7 @@ export type PropsType = {
   toggleSettings: () => void;
 };
 
-export const CallingLobby = ({
+export function CallingLobby({
   availableCameras,
   conversation,
   groupMembers,
@@ -86,7 +86,7 @@ export const CallingLobby = ({
   toggleParticipants,
   toggleSettings,
   outgoingRing,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [isMutedToastVisible, setIsMutedToastVisible] = React.useState(
     !hasLocalAudio
   );
@@ -303,4 +303,4 @@ export const CallingLobby = ({
       </div>
     </FocusTrap>
   );
-};
+}

ts/components/CallingLobbyJoinButton.tsx

@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactChild } from 'react';
+import type { ReactChild } from 'react';
 import React, { useState } from 'react';
 import { noop } from 'lodash';
 
@@ -19,6 +19,13 @@ export enum CallingLobbyJoinButtonVariant {
   Start = 'Start',
 }
 
+type PropsType = {
+  disabled?: boolean;
+  i18n: LocalizerType;
+  onClick: () => void;
+  variant: CallingLobbyJoinButtonVariant;
+};
+
 /**
  * This component is a little weird. Why not just render a button with some children?
  *
@@ -29,12 +36,12 @@ export enum CallingLobbyJoinButtonVariant {
  * For example, we might initially render "Join call" and then render a spinner when you
  * click the button. The button shouldn't resize in that situation.
  */
-export const CallingLobbyJoinButton: FunctionComponent<{
-  disabled?: boolean;
-  i18n: LocalizerType;
-  onClick: () => void;
-  variant: CallingLobbyJoinButtonVariant;
-}> = ({ disabled, i18n, onClick, variant }) => {
+export function CallingLobbyJoinButton({
+  disabled,
+  i18n,
+  onClick,
+  variant,
+}: PropsType): JSX.Element {
   const [width, setWidth] = useState<undefined | number>();
   const [height, setHeight] = useState<undefined | number>();
 
@@ -103,4 +110,4 @@ export const CallingLobbyJoinButton: FunctionComponent<{
       </div>
     </>
   );
-};
+}

ts/components/CallingParticipantsList.stories.tsx

@@ -47,16 +47,16 @@ export default {
   title: 'Components/CallingParticipantsList',
 };
 
-export const NoOne = (): JSX.Element => {
+export function NoOne(): JSX.Element {
   const props = createProps();
   return <CallingParticipantsList {...props} />;
-};
+}
 
 NoOne.story = {
   name: 'No one',
 };
 
-export const SoloCall = (): JSX.Element => {
+export function SoloCall(): JSX.Element {
   const props = createProps({
     participants: [
       createParticipant({
@@ -65,9 +65,9 @@ export const SoloCall = (): JSX.Element => {
     ],
   });
   return <CallingParticipantsList {...props} />;
-};
+}
 
-export const ManyParticipants = (): JSX.Element => {
+export function ManyParticipants(): JSX.Element {
   const props = createProps({
     participants: [
       createParticipant({
@@ -95,13 +95,13 @@ export const ManyParticipants = (): JSX.Element => {
     ],
   });
   return <CallingParticipantsList {...props} />;
-};
+}
 
-export const Overflow = (): JSX.Element => {
+export function Overflow(): JSX.Element {
   const props = createProps({
     participants: Array(50)
       .fill(null)
       .map(() => createParticipant({ title: 'Kirby' })),
   });
   return <CallingParticipantsList {...props} />;
-};
+}

ts/components/CallingParticipantsList.tsx

@@ -30,7 +30,12 @@ export type PropsType = {
 };
 
 export const CallingParticipantsList = React.memo(
-  ({ i18n, onClose, ourUuid, participants }: PropsType) => {
+  function CallingParticipantsListInner({
+    i18n,
+    onClose,
+    ourUuid,
+    participants,
+  }: PropsType) {
     const [root, setRoot] = React.useState<HTMLElement | null>(null);
 
     const modalContainer = useContext(ModalContainerContext) ?? document.body;

ts/components/CallingPip.stories.tsx

@@ -10,7 +10,7 @@ import { AvatarColors } from '../types/Colors';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { PropsType } from './CallingPip';
 import { CallingPip } from './CallingPip';
-import type { ActiveCallType } from '../types/Calling';
+import type { ActiveDirectCallType } from '../types/Calling';
 import {
   CallMode,
   CallViewMode,
@@ -52,7 +52,7 @@ const getCommonActiveCallData = () => ({
   showParticipantsList: false,
 });
 
-const defaultCall: ActiveCallType = {
+const defaultCall: ActiveDirectCallType = {
   ...getCommonActiveCallData(),
   callMode: CallMode.Direct as CallMode.Direct,
   callState: CallState.Accepted,
@@ -80,12 +80,12 @@ export default {
   title: 'Components/CallingPip',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = createProps({});
   return <CallingPip {...props} />;
-};
+}
 
-export const ContactWithAvatarAndNoVideo = (): JSX.Element => {
+export function ContactWithAvatarAndNoVideo(): JSX.Element {
   const props = createProps({
     activeCall: {
       ...defaultCall,
@@ -99,13 +99,13 @@ export const ContactWithAvatarAndNoVideo = (): JSX.Element => {
     },
   });
   return <CallingPip {...props} />;
-};
+}
 
 ContactWithAvatarAndNoVideo.story = {
   name: 'Contact (with avatar and no video)',
 };
 
-export const ContactNoColor = (): JSX.Element => {
+export function ContactNoColor(): JSX.Element {
   const props = createProps({
     activeCall: {
       ...defaultCall,
@@ -116,13 +116,13 @@ export const ContactNoColor = (): JSX.Element => {
     },
   });
   return <CallingPip {...props} />;
-};
+}
 
 ContactNoColor.story = {
   name: 'Contact (no color)',
 };
 
-export const GroupCall = (): JSX.Element => {
+export function GroupCall(): JSX.Element {
   const props = createProps({
     activeCall: {
       ...getCommonActiveCallData(),
@@ -140,4 +140,4 @@ export const GroupCall = (): JSX.Element => {
     },
   });
   return <CallingPip {...props} />;
-};
+}

ts/components/CallingPip.tsx

@@ -70,7 +70,7 @@ const PIP_WIDTH = 120;
 const PIP_TOP_MARGIN = 56;
 const PIP_PADDING = 8;
 
-export const CallingPip = ({
+export function CallingPip({
   activeCall,
   getGroupCallVideoFrameSource,
   hangUpActiveCall,
@@ -82,7 +82,7 @@ export const CallingPip = ({
   switchToPresentationView,
   switchFromPresentationView,
   togglePip,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const videoContainerRef = React.useRef<null | HTMLDivElement>(null);
   const localVideoRef = React.useRef(null);
 
@@ -315,4 +315,4 @@ export const CallingPip = ({
       </div>
     </div>
   );
-};
+}

ts/components/CallingPipRemoteVideo.tsx

@@ -27,13 +27,13 @@ import { nonRenderedRemoteParticipant } from '../util/ringrtc/nonRenderedRemoteP
 //   less than `MAX_FRAME_HEIGHT`.
 const PIP_VIDEO_HEIGHT_PX = 120;
 
-const NoVideo = ({
+function NoVideo({
   activeCall,
   i18n,
 }: {
   activeCall: ActiveCallType;
   i18n: LocalizerType;
-}): JSX.Element => {
+}): JSX.Element {
   const {
     acceptedMessageRequest,
     avatarPath,
@@ -68,7 +68,7 @@ const NoVideo = ({
       </CallBackgroundBlur>
     </div>
   );
-};
+}
 
 export type PropsType = {
   activeCall: ActiveCallType;
@@ -81,13 +81,13 @@ export type PropsType = {
   setRendererCanvas: (_: SetRendererCanvasType) => void;
 };
 
-export const CallingPipRemoteVideo = ({
+export function CallingPipRemoteVideo({
   activeCall,
   getGroupCallVideoFrameSource,
   i18n,
   setGroupCallVideoRequest,
   setRendererCanvas,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const { conversation } = activeCall;
 
   const getGroupCallFrameBuffer = useGetCallingFrameBuffer();
@@ -177,4 +177,4 @@ export const CallingPipRemoteVideo = ({
     default:
       throw missingCaseError(activeCall);
   }
-};
+}

ts/components/CallingPreCallInfo.stories.tsx

@@ -24,230 +24,260 @@ export default {
   title: 'Components/CallingPreCallInfo',
 };
 
-export const DirectConversation = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultConversation()}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function DirectConversation(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultConversation()}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 DirectConversation.story = {
   name: 'Direct conversation',
 };
 
-export const Ring0 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 0)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring0(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 0)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring0.story = {
   name: 'Group call: Will ring 0 people',
 };
 
-export const Ring1 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 1)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring1(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 1)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring1.story = {
   name: 'Group call: Will ring 1 person',
 };
 
-export const Ring2 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 2)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring2(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 2)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring2.story = {
   name: 'Group call: Will ring 2 people',
 };
 
-export const Ring3 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 3)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring3(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 3)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring3.story = {
   name: 'Group call: Will ring 3 people',
 };
 
-export const Ring4 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 4)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring4(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 4)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring3.story = {
   name: 'Group call: Will ring 4 people',
 };
 
-export const Notify0 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 0)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify0(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 0)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify0.story = {
   name: 'Group call: Will notify 0 people',
 };
 
-export const Notify1 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 1)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify1(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 1)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify1.story = {
   name: 'Group call: Will notify 1 person',
 };
 
-export const Notify2 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 2)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify2(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 2)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify2.story = {
   name: 'Group call: Will notify 2 people',
 };
 
-export const Notify3 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 3)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify3(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 3)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify3.story = {
   name: 'Group call: Will notify 3 people',
 };
 
-export const Notify4 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 4)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify4(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 4)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify4.story = {
   name: 'Group call: Will notify 4 people',
 };
 
-export const Peek1 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers.slice(0, 1)}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Peek1(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers.slice(0, 1)}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Peek1.story = {
   name: 'Group call: 1 participant peeked',
 };
 
-export const Peek2 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers.slice(0, 2)}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Peek2(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers.slice(0, 2)}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Peek2.story = {
   name: 'Group call: 2 participants peeked',
 };
 
-export const Peek3 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers.slice(0, 3)}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Peek3(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers.slice(0, 3)}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Peek3.story = {
   name: 'Group call: 3 participants peeked',
 };
 
-export const Peek4 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers.slice(0, 4)}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Peek4(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers.slice(0, 4)}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Peek4.story = {
   name: 'Group call: 4 participants peeked',
 };
 
-export const GroupConversationYouOnAnOtherDevice = (): JSX.Element => {
+export function GroupConversationYouOnAnOtherDevice(): JSX.Element {
   const me = getDefaultConversation();
   return (
     <CallingPreCallInfo
@@ -259,23 +289,25 @@ export const GroupConversationYouOnAnOtherDevice = (): JSX.Element => {
       ringMode={RingMode.WillRing}
     />
   );
-};
+}
 
 GroupConversationYouOnAnOtherDevice.story = {
   name: 'Group conversation, you on an other device',
 };
 
-export const GroupConversationCallIsFull = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    isCallFull
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function GroupConversationCallIsFull(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      isCallFull
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 GroupConversationCallIsFull.story = {
   name: 'Group conversation, call is full',

ts/components/CallingPreCallInfo.tsx

@@ -1,7 +1,6 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
@@ -42,7 +41,7 @@ type PropsType = {
   >;
 };
 
-export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
+export function CallingPreCallInfo({
   conversation,
   groupMembers = [],
   i18n,
@@ -50,7 +49,7 @@ export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
   me,
   peekedParticipants = [],
   ringMode,
-}) => {
+}: PropsType): JSX.Element {
   let subtitle: string;
   if (ringMode === RingMode.IsRinging) {
     subtitle = i18n('outgoingCallRinging');
@@ -183,4 +182,4 @@ export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
       <div className="module-CallingPreCallInfo__subtitle">{subtitle}</div>
     </div>
   );
-};
+}