Prefer import type when importing types

.eslintrc.js

@@ -129,6 +129,8 @@ const typescriptRules = {
   // Upgrade from a warning
   '@typescript-eslint/explicit-module-boundary-types': 'error',
 
+  '@typescript-eslint/consistent-type-imports': 'error',
+
   // Already enforced by TypeScript
   'consistent-return': 'off',
 };

app/SystemTrayService.ts

@@ -2,14 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { join } from 'path';
-import {
+import type { BrowserWindow, NativeImage } from 'electron';
-  BrowserWindow,
+import { Menu, Tray, app, nativeImage } from 'electron';
-  Menu,
-  NativeImage,
-  Tray,
-  app,
-  nativeImage,
-} from 'electron';
 import * as log from '../ts/logging/log';
 import type { LocaleMessagesType } from '../ts/types/I18N';
 

app/global_errors.ts

@@ -5,7 +5,7 @@ import { app, dialog, clipboard } from 'electron';
 
 import * as Errors from '../ts/types/errors';
 import { redactAll } from '../ts/util/privacy';
-import { LocaleMessagesType } from '../ts/types/I18N';
+import type { LocaleMessagesType } from '../ts/types/I18N';
 import { reallyJsonStringify } from '../ts/util/reallyJsonStringify';
 
 // We use hard-coded strings until we're able to update these strings from the locale.

app/locale.ts

@@ -6,9 +6,9 @@ import { readFileSync } from 'fs';
 import { merge } from 'lodash';
 import { setupI18n } from '../ts/util/setupI18n';
 
-import { LoggerType } from '../ts/types/Logging';
+import type { LoggerType } from '../ts/types/Logging';
-import { LocaleMessagesType } from '../ts/types/I18N';
+import type { LocaleMessagesType } from '../ts/types/I18N';
-import { LocalizerType } from '../ts/types/Util';
+import type { LocalizerType } from '../ts/types/Util';
 
 function normalizeLocaleName(locale: string): string {
   if (/^en-/.test(locale)) {

app/main.ts

@@ -34,7 +34,8 @@ import { consoleLogger } from '../ts/util/consoleLogger';
 
 import './startup_config';
 
-import config, { ConfigType } from './config';
+import type { ConfigType } from './config';
+import config from './config';
 import {
   Environment,
   getEnvironment,
@@ -63,7 +64,8 @@ import * as logging from '../ts/logging/main_process_logging';
 import { MainSQL } from '../ts/sql/main';
 import * as sqlChannels from './sql_channel';
 import * as windowState from './window_state';
-import { createTemplate, MenuOptionsType } from './menu';
+import type { MenuOptionsType } from './menu';
+import { createTemplate } from './menu';
 import { installFileHandler, installWebHandler } from './protocol_filter';
 import * as OS from '../ts/OS';
 import { isProduction } from '../ts/util/version';
@@ -87,7 +89,8 @@ import { SettingsChannel } from '../ts/main/settingsChannel';
 import { maybeParseUrl, setUrlSearchParams } from '../ts/util/url';
 import { getHeicConverter } from '../ts/workers/heicConverterMain';
 
-import { load as loadLocale, LocaleType } from './locale';
+import type { LocaleType } from './locale';
+import { load as loadLocale } from './locale';
 
 import type { LoggerType } from '../ts/types/Logging';
 

app/menu.ts

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { isString } from 'lodash';
-import { MenuItemConstructorOptions } from 'electron';
+import type { MenuItemConstructorOptions } from 'electron';
 
-import { LocaleMessagesType } from '../ts/types/I18N';
+import type { LocaleMessagesType } from '../ts/types/I18N';
 
 export type MenuListType = Array<MenuItemConstructorOptions>;
 

app/permissions.ts

@@ -4,7 +4,7 @@
 // The list of permissions is here:
 //   https://electronjs.org/docs/api/session#sessetpermissionrequesthandlerhandler
 
-import { session as ElectronSession } from 'electron';
+import type { session as ElectronSession } from 'electron';
 
 import type { ConfigType } from './base_config';
 

app/protocol_filter.ts

@@ -1,7 +1,7 @@
 // Copyright 2018-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import {
+import type {
   protocol as ElectronProtocol,
   ProtocolRequest,
   ProtocolResponse,

app/spell_check.ts

@@ -3,15 +3,16 @@
 
 /* eslint-disable strict */
 
-import { BrowserWindow, Menu, clipboard, nativeImage } from 'electron';
+import type { BrowserWindow } from 'electron';
+import { Menu, clipboard, nativeImage } from 'electron';
 import { sync as osLocaleSync } from 'os-locale';
 import { uniq } from 'lodash';
 import { fileURLToPath } from 'url';
 
 import { maybeParseUrl } from '../ts/util/url';
-import { LocaleMessagesType } from '../ts/types/I18N';
+import type { LocaleMessagesType } from '../ts/types/I18N';
 
-import { MenuListType } from './menu';
+import type { MenuListType } from './menu';
 
 export function getLanguages(
   userLocale: string,

sticker-creator/app/stages/MetaStage.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import { FileWithPath } from 'react-dropzone';
+import type { FileWithPath } from 'react-dropzone';
 import { AppStage } from './AppStage';
 import * as styles from './MetaStage.scss';
 import { processStickerImage } from '../../util/preload';

sticker-creator/components/ConfirmModal.tsx

@@ -4,7 +4,8 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import * as styles from './ConfirmModal.scss';
-import { ConfirmDialog, Props } from '../elements/ConfirmDialog';
+import type { Props } from '../elements/ConfirmDialog';
+import { ConfirmDialog } from '../elements/ConfirmDialog';
 
 export type Mode = 'removable' | 'pick-emoji' | 'add';
 

sticker-creator/components/StickerFrame.tsx

@@ -11,14 +11,15 @@ import {
   Reference as PopperReference,
 } from 'react-popper';
 import { AddEmoji } from '../elements/icons';
-import { DropZone, Props as DropZoneProps } from '../elements/DropZone';
+import type { Props as DropZoneProps } from '../elements/DropZone';
+import { DropZone } from '../elements/DropZone';
 import { StickerPreview } from '../elements/StickerPreview';
 import * as styles from './StickerFrame.scss';
-import {
+import type {
   EmojiPickDataType,
-  EmojiPicker,
   Props as EmojiPickerProps,
 } from '../../ts/components/emoji/EmojiPicker';
+import { EmojiPicker } from '../../ts/components/emoji/EmojiPicker';
 import { Emoji } from '../../ts/components/emoji/Emoji';
 import { PopperRootContext } from '../../ts/components/PopperRootContext';
 import { useI18n } from '../util/i18n';

sticker-creator/components/StickerGrid.tsx

@@ -3,15 +3,14 @@
 
 import * as React from 'react';
 import PQueue from 'p-queue';
-import {
+import type { SortEndHandler } from 'react-sortable-hoc';
-  SortableContainer,
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
-  SortableElement,
-  SortEndHandler,
-} from 'react-sortable-hoc';
 import * as styles from './StickerGrid.scss';
-import { Props as StickerFrameProps, StickerFrame } from './StickerFrame';
+import type { Props as StickerFrameProps } from './StickerFrame';
+import { StickerFrame } from './StickerFrame';
 import { stickersDuck } from '../store';
-import { DropZone, Props as DropZoneProps } from '../elements/DropZone';
+import type { Props as DropZoneProps } from '../elements/DropZone';
+import { DropZone } from '../elements/DropZone';
 import { processStickerImage } from '../util/preload';
 import { useI18n } from '../util/i18n';
 

sticker-creator/elements/DropZone.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import { FileWithPath } from 'react-dropzone';
+import type { FileWithPath } from 'react-dropzone';
 import * as styles from './DropZone.scss';
 import { useI18n } from '../util/i18n';
 import { useStickerDropzone } from '../util/useStickerDropzone';

sticker-creator/elements/MessageBubble.tsx

@@ -3,7 +3,8 @@
 
 import * as React from 'react';
 import * as styles from './MessageBubble.scss';
-import { MessageMeta, Props as MessageMetaProps } from './MessageMeta';
+import type { Props as MessageMetaProps } from './MessageMeta';
+import { MessageMeta } from './MessageMeta';
 
 export type Props = Pick<MessageMetaProps, 'minutesAgo'> & {
   children: React.ReactNode;

sticker-creator/elements/MessageSticker.tsx

@@ -3,7 +3,8 @@
 
 import * as React from 'react';
 import * as styles from './MessageSticker.scss';
-import { MessageMeta, Props as MessageMetaProps } from './MessageMeta';
+import type { Props as MessageMetaProps } from './MessageMeta';
+import { MessageMeta } from './MessageMeta';
 
 export type Props = MessageMetaProps & {
   image: string;

sticker-creator/elements/StickerPreview.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import { PopperArrowProps } from 'react-popper';
+import type { PopperArrowProps } from 'react-popper';
-import { Placement } from '@popperjs/core';
+import type { Placement } from '@popperjs/core';
 import * as styles from './StickerPreview.scss';
 import { MessageBubble } from './MessageBubble';
-import { MessageSticker, Props as MessageStickerProps } from './MessageSticker';
+import type { Props as MessageStickerProps } from './MessageSticker';
+import { MessageSticker } from './MessageSticker';
 import { useI18n } from '../util/i18n';
 
 export type Props = Pick<React.HTMLProps<HTMLDivElement>, 'style'> & {

sticker-creator/store/ducks/stickers.ts

@@ -4,26 +4,22 @@
 /* eslint-disable no-param-reassign */
 
 import { useMemo } from 'react';
-import {
+import type { Draft } from 'redux-ts-utils';
-  createAction,
+import { createAction, handleAction, reduceReducers } from 'redux-ts-utils';
-  Draft,
-  handleAction,
-  reduceReducers,
-} from 'redux-ts-utils';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { clamp, find, isNumber, pull, remove, take, uniq } from 'lodash';
-import { SortEnd } from 'react-sortable-hoc';
+import type { SortEnd } from 'react-sortable-hoc';
 import { bindActionCreators } from 'redux';
 import arrayMove from 'array-move';
 // eslint-disable-next-line import/no-cycle
-import { AppState } from '../reducer';
+import type { AppState } from '../reducer';
-import {
+import type {
   PackMetaData,
   StickerImageData,
   StickerData,
 } from '../../util/preload';
-import { EmojiPickDataType } from '../../../ts/components/emoji/EmojiPicker';
+import type { EmojiPickDataType } from '../../../ts/components/emoji/EmojiPicker';
 import { convertShortName } from '../../../ts/components/emoji/lib';
 
 export const initializeStickers = createAction<Array<string>>(

sticker-creator/store/reducer.ts

@@ -1,7 +1,8 @@
 // Copyright 2019-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { combineReducers, Reducer } from 'redux';
+import type { Reducer } from 'redux';
+import { combineReducers } from 'redux';
 // eslint-disable-next-line import/no-cycle
 import { reducer as stickers } from './ducks/stickers';
 

sticker-creator/util/preload.ts

@@ -1,7 +1,7 @@
 // Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { Metadata } from 'sharp';
+import type { Metadata } from 'sharp';
 
 declare global {
   // We want to extend `window`'s properties, so we need an interface.

sticker-creator/util/useStickerDropzone.ts

@@ -1,7 +1,8 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { useDropzone, DropzoneOptions } from 'react-dropzone';
+import type { DropzoneOptions } from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
 
 export const useStickerDropzone = (
   onDrop: DropzoneOptions['onDrop']

ts/ConversationController.ts

@@ -5,12 +5,12 @@ import { debounce, uniq, without } from 'lodash';
 import PQueue from 'p-queue';
 
 import dataInterface from './sql/Client';
-import {
+import type {
   ConversationModelCollectionType,
   ConversationAttributesType,
   ConversationAttributesTypeType,
 } from './model-types.d';
-import { ConversationModel } from './models/conversations';
+import type { ConversationModel } from './models/conversations';
 import { maybeDeriveGroupV2Id } from './groups';
 import { assert } from './util/assert';
 import { isValidGuid } from './util/isValidGuid';

ts/Curve.ts

@@ -5,7 +5,7 @@ import * as client from '@signalapp/signal-client';
 
 import * as Bytes from './Bytes';
 import { constantTimeEqual } from './Crypto';
-import {
+import type {
   KeyPairType,
   CompatPreKeyType,
   CompatSignedPreKeyType,

ts/LibSignalStores.ts

@@ -6,28 +6,30 @@
 
 import { isNumber } from 'lodash';
 
-import {
+import type {
   Direction,
-  IdentityKeyStore,
   PreKeyRecord,
+  ProtocolAddress,
+  SenderKeyRecord,
+  SessionRecord,
+  SignedPreKeyRecord,
+  Uuid,
+} from '@signalapp/signal-client';
+import {
+  IdentityKeyStore,
   PreKeyStore,
   PrivateKey,
-  ProtocolAddress,
   PublicKey,
-  SenderKeyRecord,
   SenderKeyStore,
-  SessionRecord,
   SessionStore,
-  SignedPreKeyRecord,
   SignedPreKeyStore,
-  Uuid,
 } from '@signalapp/signal-client';
 import { freezePreKey, freezeSignedPreKey } from './SignalProtocolStore';
 import { Address } from './types/Address';
 import { QualifiedAddress } from './types/QualifiedAddress';
 import type { UUID } from './types/UUID';
 
-import { Zone } from './util/Zone';
+import type { Zone } from './util/Zone';
 
 function encodeAddress(address: ProtocolAddress): Address {
   const name = address.name();

ts/SignalProtocolStore.ts

@@ -28,7 +28,7 @@ import {
   sessionRecordToProtobuf,
   sessionStructureToBytes,
 } from './util/sessionTranslation';
-import {
+import type {
   DeviceType,
   IdentityKeyType,
   IdentityKeyIdType,
@@ -48,12 +48,11 @@ import {
 } from './textsecure/Types.d';
 import { getSendOptions } from './util/getSendOptions';
 import type { RemoveAllConfiguration } from './types/RemoveAllConfiguration';
-import { UUID, UUIDStringType } from './types/UUID';
+import type { UUIDStringType } from './types/UUID';
-import { Address } from './types/Address';
+import { UUID } from './types/UUID';
-import {
+import type { Address } from './types/Address';
-  QualifiedAddress,
+import type { QualifiedAddressStringType } from './types/QualifiedAddress';
-  QualifiedAddressStringType,
+import { QualifiedAddress } from './types/QualifiedAddress';
-} from './types/QualifiedAddress';
 import * as log from './logging/log';
 
 const TIMESTAMP_THRESHOLD = 5 * 1000; // 5 seconds

ts/background.ts

@@ -7,19 +7,22 @@ import { bindActionCreators } from 'redux';
 import { render, unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 
 import MessageReceiver from './textsecure/MessageReceiver';
-import { SessionResetsType, ProcessedDataMessage } from './textsecure/Types.d';
+import type {
+  SessionResetsType,
+  ProcessedDataMessage,
+} from './textsecure/Types.d';
 import { HTTPError } from './textsecure/Errors';
 import {
   suspendTasksWithTimeout,
   resumeTasksWithTimeout,
 } from './textsecure/TaskWithTimeout';
-import {
+import type {
   MessageAttributesType,
   ConversationAttributesType,
 } from './model-types.d';
 import * as Bytes from './Bytes';
 import * as Timers from './Timers';
-import { WhatIsThis, DeliveryReceiptBatcherItemType } from './window.d';
+import type { WhatIsThis, DeliveryReceiptBatcherItemType } from './window.d';
 import { getTitleBarVisibility, TitleBarVisibility } from './types/Settings';
 import { SocketStatus } from './types/SocketStatus';
 import { DEFAULT_CONVERSATION_COLOR } from './types/Colors';
@@ -38,7 +41,7 @@ import * as KeyboardLayout from './services/keyboardLayout';
 import { routineProfileRefresh } from './routineProfileRefresh';
 import { isMoreRecentThan, isOlderThan, toDayMillis } from './util/timestamp';
 import { isValidReactionEmoji } from './reactions/isValidReactionEmoji';
-import { ConversationModel } from './models/conversations';
+import type { ConversationModel } from './models/conversations';
 import { getMessageById } from './messages/getMessageById';
 import { createBatcher } from './util/batcher';
 import { updateConversationsWithUuidLookup } from './updateConversationsWithUuidLookup';
@@ -50,7 +53,7 @@ import { shouldRespondWithProfileKey } from './util/shouldRespondWithProfileKey'
 import { LatestQueue } from './util/LatestQueue';
 import { parseIntOrThrow } from './util/parseIntOrThrow';
 import { getProfile } from './util/getProfile';
-import {
+import type {
   ConfigurationEvent,
   ContactEvent,
   DecryptionErrorEvent,
@@ -71,11 +74,11 @@ import {
   SentEventData,
   StickerPackEvent,
   TypingEvent,
-  VerifiedEvent,
   ViewEvent,
   ViewOnceOpenSyncEvent,
   ViewSyncEvent,
 } from './textsecure/messageReceiverEvents';
+import { VerifiedEvent } from './textsecure/messageReceiverEvents';
 import type { WebAPIType } from './textsecure/WebAPI';
 import * as KeyChangeListener from './textsecure/KeyChangeListener';
 import { isDirectConversation, isGroupV2 } from './util/whatTypeOfConversation';
@@ -96,10 +99,8 @@ import { ReadSyncs } from './messageModifiers/ReadSyncs';
 import { ViewSyncs } from './messageModifiers/ViewSyncs';
 import { ViewOnceOpenSyncs } from './messageModifiers/ViewOnceOpenSyncs';
 import { ReadStatus } from './messages/MessageReadStatus';
-import {
+import type { SendStateByConversationId } from './messages/MessageSendState';
-  SendStateByConversationId,
+import { SendStatus } from './messages/MessageSendState';
-  SendStatus,
-} from './messages/MessageSendState';
 import * as AttachmentDownloads from './messageModifiers/AttachmentDownloads';
 import * as preferredReactions from './state/ducks/preferredReactions';
 import * as Conversation from './types/Conversation';

ts/challenge.ts

@@ -12,13 +12,13 @@
 // are not immediately retried, however, until `.onOnline()` is called from
 // when we are actually online.
 
-import { MessageModel } from './models/messages';
+import type { MessageModel } from './models/messages';
 import { assert } from './util/assert';
 import { isNotNil } from './util/isNotNil';
 import { isOlderThan } from './util/timestamp';
 import { parseRetryAfter } from './util/parseRetryAfter';
 import { getEnvironment, Environment } from './environment';
-import { StorageInterface } from './types/Storage.d';
+import type { StorageInterface } from './types/Storage.d';
 import { HTTPError } from './textsecure/Errors';
 import * as log from './logging/log';
 

ts/components/About.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { useEscapeHandling } from '../hooks/useEscapeHandling';
 
 export type PropsType = {

ts/components/AddGroupMemberErrorDialog.tsx

@@ -1,9 +1,10 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { FunctionComponent, ReactNode } from 'react';
+import type { FunctionComponent, ReactNode } from 'react';
+import React from 'react';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Alert } from './Alert';
 import { Intl } from './Intl';
 import { ContactName } from './conversation/ContactName';

ts/components/Alert.tsx

@@ -1,9 +1,10 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { FunctionComponent, ReactNode } from 'react';
+import type { FunctionComponent, ReactNode } from 'react';
+import React from 'react';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Button } from './Button';
 import { Modal } from './Modal';
 

ts/components/AnnouncementsOnlyGroupBanner.tsx

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useState } from 'react';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
 import { Intl } from './Intl';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Modal } from './Modal';
 import { ConversationListItem } from './conversationList/ConversationListItem';
 

ts/components/App.tsx

@@ -1,7 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { ComponentProps, useEffect } from 'react';
+import type { ComponentProps } from 'react';
+import React, { useEffect } from 'react';
 import { Globals } from '@react-spring/web';
 import classNames from 'classnames';
 

ts/components/Avatar.stories.tsx

@@ -8,10 +8,12 @@ import { storiesOf } from '@storybook/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-import { Avatar, AvatarBlur, Props } from './Avatar';
+import type { Props } from './Avatar';
+import { Avatar, AvatarBlur } from './Avatar';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
-import { AvatarColors, AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
+import { AvatarColors } from '../types/Colors';
 
 const i18n = setupI18n('en', enMessages);
 

ts/components/Avatar.tsx

@@ -1,22 +1,21 @@
 // Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, {
+import type {
   FunctionComponent,
   MouseEvent,
   ReactChild,
   ReactNode,
-  useEffect,
-  useState,
 } from 'react';
+import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { noop } from 'lodash';
 
 import { Spinner } from './Spinner';
 
 import { getInitials } from '../util/getInitials';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
-import { AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
 import * as log from '../logging/log';
 import { assert } from '../util/assert';
 import { shouldBlurAvatar } from '../util/shouldBlurAvatar';

ts/components/AvatarColorPicker.stories.tsx

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 
-import { AvatarColorPicker, PropsType } from './AvatarColorPicker';
+import type { PropsType } from './AvatarColorPicker';
+import { AvatarColorPicker } from './AvatarColorPicker';
 import { AvatarColors } from '../types/Colors';
 
 const i18n = setupI18n('en', enMessages);

ts/components/AvatarColorPicker.tsx

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import { AvatarColors, AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
-import { LocalizerType } from '../types/Util';
+import { AvatarColors } from '../types/Colors';
+import type { LocalizerType } from '../types/Util';
 import { BetterAvatarBubble } from './BetterAvatarBubble';
 
 export type PropsType = {

ts/components/AvatarEditor.stories.tsx

@@ -9,7 +9,8 @@ import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 
 import { AvatarColors } from '../types/Colors';
-import { AvatarEditor, PropsType } from './AvatarEditor';
+import type { PropsType } from './AvatarEditor';
+import { AvatarEditor } from './AvatarEditor';
 import { getDefaultAvatars } from '../types/Avatar';
 import { createAvatarData } from '../util/createAvatarData';
 

ts/components/AvatarEditor.tsx

@@ -3,8 +3,8 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
-import {
+import type {
   AvatarDataType,
   DeleteAvatarFromDiskActionType,
   ReplaceAvatarActionType,
@@ -16,7 +16,7 @@ import { AvatarPreview } from './AvatarPreview';
 import { AvatarTextEditor } from './AvatarTextEditor';
 import { AvatarUploadButton } from './AvatarUploadButton';
 import { BetterAvatar } from './BetterAvatar';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { avatarDataToBytes } from '../util/avatarDataToBytes';
 import { createAvatarData } from '../util/createAvatarData';
 import { isSameAvatarData } from '../util/isSameAvatarData';

ts/components/AvatarIconEditor.stories.tsx

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 
-import { AvatarIconEditor, PropsType } from './AvatarIconEditor';
+import type { PropsType } from './AvatarIconEditor';
+import { AvatarIconEditor } from './AvatarIconEditor';
 import { GroupAvatarIcons, PersonalAvatarIcons } from '../types/Avatar';
 import { AvatarColors } from '../types/Colors';
 import { createAvatarData } from '../util/createAvatarData';

ts/components/AvatarIconEditor.tsx

@@ -4,11 +4,11 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { AvatarColorPicker } from './AvatarColorPicker';
-import { AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
-import { AvatarDataType } from '../types/Avatar';
+import type { AvatarDataType } from '../types/Avatar';
 import { AvatarModalButtons } from './AvatarModalButtons';
 import { AvatarPreview } from './AvatarPreview';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { avatarDataToBytes } from '../util/avatarDataToBytes';
 
 export type PropsType = {

ts/components/AvatarLightbox.stories.tsx

@@ -9,7 +9,8 @@ import { select } from '@storybook/addon-knobs';
 
 import enMessages from '../../_locales/en/messages.json';
 import { AvatarColors } from '../types/Colors';
-import { AvatarLightbox, PropsType } from './AvatarLightbox';
+import type { PropsType } from './AvatarLightbox';
+import { AvatarLightbox } from './AvatarLightbox';
 import { setupI18n } from '../util/setupI18n';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 

ts/components/AvatarLightbox.tsx

@@ -3,10 +3,10 @@
 
 import React from 'react';
 
-import { AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
 import { AvatarPreview } from './AvatarPreview';
 import { Lightbox } from './Lightbox';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   avatarColor?: AvatarColorType;

ts/components/AvatarModalButtons.stories.tsx

@@ -7,7 +7,8 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import enMessages from '../../_locales/en/messages.json';
-import { AvatarModalButtons, PropsType } from './AvatarModalButtons';
+import type { PropsType } from './AvatarModalButtons';
+import { AvatarModalButtons } from './AvatarModalButtons';
 import { setupI18n } from '../util/setupI18n';
 
 const i18n = setupI18n('en', enMessages);

ts/components/AvatarModalButtons.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 
 import { Button, ButtonVariant } from './Button';
 import { ConfirmDiscardDialog } from './ConfirmDiscardDialog';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Modal } from './Modal';
 
 export type PropsType = {

ts/components/AvatarPopup.stories.tsx

@@ -7,8 +7,10 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, select, text } from '@storybook/addon-knobs';
 
-import { AvatarPopup, Props } from './AvatarPopup';
+import type { Props } from './AvatarPopup';
-import { AvatarColors, AvatarColorType } from '../types/Colors';
+import { AvatarPopup } from './AvatarPopup';
+import type { AvatarColorType } from '../types/Colors';
+import { AvatarColors } from '../types/Colors';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 

ts/components/AvatarPopup.tsx

@@ -4,10 +4,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { Avatar, Props as AvatarProps } from './Avatar';
+import type { Props as AvatarProps } from './Avatar';
+import { Avatar } from './Avatar';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 export type Props = {
   readonly i18n: LocalizerType;

ts/components/AvatarPreview.stories.tsx

@@ -7,7 +7,8 @@ import { chunk } from 'lodash';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 
-import { AvatarPreview, PropsType } from './AvatarPreview';
+import type { PropsType } from './AvatarPreview';
+import { AvatarPreview } from './AvatarPreview';
 import { AvatarColors } from '../types/Colors';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';

ts/components/AvatarPreview.tsx

@@ -1,13 +1,15 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import type { CSSProperties } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { noop } from 'lodash';
 
 import * as log from '../logging/log';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Spinner } from './Spinner';
-import { AvatarColors, AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
+import { AvatarColors } from '../types/Colors';
 import { getInitials } from '../util/getInitials';
 import { imagePathToBytes } from '../util/imagePathToBytes';
 

ts/components/AvatarTextEditor.stories.tsx

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 
-import { AvatarTextEditor, PropsType } from './AvatarTextEditor';
+import type { PropsType } from './AvatarTextEditor';
+import { AvatarTextEditor } from './AvatarTextEditor';
 import { AvatarColors } from '../types/Colors';
 
 const i18n = setupI18n('en', enMessages);

ts/components/AvatarTextEditor.tsx

@@ -1,9 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import type { ChangeEvent, ClipboardEvent } from 'react';
 import React, {
-  ChangeEvent,
-  ClipboardEvent,
   useCallback,
   useEffect,
   useMemo,
@@ -15,10 +14,10 @@ import { noop } from 'lodash';
 import * as grapheme from '../util/grapheme';
 import { AvatarColorPicker } from './AvatarColorPicker';
 import { AvatarColors } from '../types/Colors';
-import { AvatarDataType } from '../types/Avatar';
+import type { AvatarDataType } from '../types/Avatar';
 import { AvatarModalButtons } from './AvatarModalButtons';
 import { BetterAvatarBubble } from './BetterAvatarBubble';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { avatarDataToBytes } from '../util/avatarDataToBytes';
 import { createAvatarData } from '../util/createAvatarData';
 import {

ts/components/AvatarUploadButton.stories.tsx

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 
-import { AvatarUploadButton, PropsType } from './AvatarUploadButton';
+import type { PropsType } from './AvatarUploadButton';
+import { AvatarUploadButton } from './AvatarUploadButton';
 
 const i18n = setupI18n('en', enMessages);
 

ts/components/AvatarUploadButton.tsx

@@ -1,10 +1,11 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { ChangeEventHandler, useEffect, useRef, useState } from 'react';
+import type { ChangeEventHandler } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { noop } from 'lodash';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { processImageFile } from '../util/processImageFile';
 
 export type PropsType = {

ts/components/BackboneHost.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useEffect, useRef } from 'react';
-import * as Backbone from 'backbone';
+import type * as Backbone from 'backbone';
 
 type PropsType = {
   View: typeof Backbone.View;

ts/components/BetterAvatar.stories.tsx

@@ -9,7 +9,8 @@ import { action } from '@storybook/addon-actions';
 import enMessages from '../../_locales/en/messages.json';
 import { AvatarColors } from '../types/Colors';
 import { GroupAvatarIcons, PersonalAvatarIcons } from '../types/Avatar';
-import { BetterAvatar, PropsType } from './BetterAvatar';
+import type { PropsType } from './BetterAvatar';
+import { BetterAvatar } from './BetterAvatar';
 import { createAvatarData } from '../util/createAvatarData';
 import { setupI18n } from '../util/setupI18n';
 

ts/components/BetterAvatar.tsx

@@ -1,11 +1,12 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { MouseEvent, useEffect, useState } from 'react';
+import type { MouseEvent } from 'react';
+import React, { useEffect, useState } from 'react';
 import { noop } from 'lodash';
-import { AvatarDataType } from '../types/Avatar';
+import type { AvatarDataType } from '../types/Avatar';
 import { BetterAvatarBubble } from './BetterAvatarBubble';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Spinner } from './Spinner';
 import { avatarDataToBytes } from '../util/avatarDataToBytes';
 

ts/components/BetterAvatarBubble.stories.tsx

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 
 import enMessages from '../../_locales/en/messages.json';
 import { AvatarColors } from '../types/Colors';
-import { BetterAvatarBubble, PropsType } from './BetterAvatarBubble';
+import type { PropsType } from './BetterAvatarBubble';
+import { BetterAvatarBubble } from './BetterAvatarBubble';
 import { setupI18n } from '../util/setupI18n';
 
 const i18n = setupI18n('en', enMessages);

ts/components/BetterAvatarBubble.tsx

@@ -1,11 +1,12 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { CSSProperties, MouseEvent, ReactNode } from 'react';
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 
-import { AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   children?: ReactNode;

ts/components/Button.tsx

@@ -1,7 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 
 import { assert } from '../util/assert';

ts/components/CallBackgroundBlur.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import { AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
 
 export type PropsType = {
   avatarPath?: string;

ts/components/CallManager.stories.tsx

@@ -6,7 +6,8 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, select, text } from '@storybook/addon-knobs';
 
-import { CallManager, PropsType } from './CallManager';
+import type { PropsType } from './CallManager';
+import { CallManager } from './CallManager';
 import {
   CallEndedReason,
   CallMode,
@@ -14,12 +15,13 @@ import {
   GroupCallConnectionState,
   GroupCallJoinState,
 } from '../types/Calling';
-import { ConversationTypeType } from '../state/ducks/conversations';
+import type { ConversationTypeType } from '../state/ducks/conversations';
-import { AvatarColors, AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
+import { AvatarColors } from '../types/Colors';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource';
 import { setupI18n } from '../util/setupI18n';
-import { Props as SafetyNumberViewerProps } from '../state/smart/SafetyNumberViewer';
+import type { Props as SafetyNumberViewerProps } from '../state/smart/SafetyNumberViewer';
 import enMessages from '../../_locales/en/messages.json';
 
 const i18n = setupI18n('en', enMessages);

ts/components/CallManager.tsx

@@ -11,22 +11,22 @@ import { CallingParticipantsList } from './CallingParticipantsList';
 import { CallingSelectPresentingSourcesModal } from './CallingSelectPresentingSourcesModal';
 import { CallingPip } from './CallingPip';
 import { IncomingCallBar } from './IncomingCallBar';
-import {
+import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
-  SafetyNumberChangeDialog,
+import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
-  SafetyNumberProps,
+import type {
-} from './SafetyNumberChangeDialog';
-import {
   ActiveCallType,
+  GroupCallVideoRequest,
+  PresentedSource,
+} from '../types/Calling';
+import {
   CallEndedReason,
   CallMode,
   CallState,
   GroupCallConnectionState,
   GroupCallJoinState,
-  GroupCallVideoRequest,
-  PresentedSource,
 } from '../types/Calling';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
-import {
+import type {
   AcceptCallType,
   CancelCallType,
   DeclineCallType,
@@ -39,7 +39,7 @@ import {
   SetRendererCanvasType,
   StartCallType,
 } from '../state/ducks/calling';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { missingCaseError } from '../util/missingCaseError';
 
 const GROUP_CALL_RING_DURATION = 60 * 1000;

ts/components/CallNeedPermissionScreen.tsx

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useRef, useEffect } from 'react';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { AvatarColors } from '../types/Colors';
 import { Avatar } from './Avatar';
 import { Intl } from './Intl';
 import { ContactName } from './conversation/ContactName';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
 
 type Props = {
   conversation: Pick<

ts/components/CallScreen.stories.tsx

@@ -8,16 +8,17 @@ import { storiesOf } from '@storybook/react';
 import { boolean, select, number } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
+import type { GroupCallRemoteParticipantType } from '../types/Calling';
 import {
   CallMode,
   CallState,
   GroupCallConnectionState,
   GroupCallJoinState,
-  GroupCallRemoteParticipantType,
 } from '../types/Calling';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
 import { AvatarColors } from '../types/Colors';
-import { CallScreen, PropsType } from './CallScreen';
+import type { PropsType } from './CallScreen';
+import { CallScreen } from './CallScreen';
 import { setupI18n } from '../util/setupI18n';
 import { missingCaseError } from '../util/missingCaseError';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';

ts/components/CallScreen.tsx

@@ -1,17 +1,12 @@
 // Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, {
+import type { ReactNode } from 'react';
-  ReactNode,
+import React, { useState, useRef, useEffect, useCallback } from 'react';
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-} from 'react';
 import { noop } from 'lodash';
 import classNames from 'classnames';
 import type { VideoFrameSource } from 'ringrtc';
-import {
+import type {
   HangUpType,
   SetLocalAudioType,
   SetLocalPreviewType,
@@ -23,21 +18,24 @@ import { CallingHeader } from './CallingHeader';
 import { CallingPreCallInfo, RingMode } from './CallingPreCallInfo';
 import { CallingButton, CallingButtonType } from './CallingButton';
 import { CallBackgroundBlur } from './CallBackgroundBlur';
-import {
+import type {
   ActiveCallType,
+  GroupCallVideoRequest,
+  PresentedSource,
+} from '../types/Calling';
+import {
   CallMode,
   CallState,
   GroupCallConnectionState,
   GroupCallJoinState,
-  GroupCallVideoRequest,
-  PresentedSource,
 } from '../types/Calling';
-import { AvatarColors, AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
+import { AvatarColors } from '../types/Colors';
 import type { ConversationType } from '../state/ducks/conversations';
 import { CallingToastManager } from './CallingToastManager';
 import { DirectCallRemoteParticipant } from './DirectCallRemoteParticipant';
 import { GroupCallRemoteParticipants } from './GroupCallRemoteParticipants';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { NeedsScreenRecordingPermissionsModal } from './NeedsScreenRecordingPermissionsModal';
 import { missingCaseError } from '../util/missingCaseError';
 import * as KeyboardLayout from '../services/keyboardLayout';

ts/components/CallingButton.stories.tsx

@@ -6,7 +6,8 @@ import { storiesOf } from '@storybook/react';
 import { select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-import { CallingButton, CallingButtonType, PropsType } from './CallingButton';
+import type { PropsType } from './CallingButton';
+import { CallingButton, CallingButtonType } from './CallingButton';
 import { TooltipPlacement } from './Tooltip';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';

ts/components/CallingButton.tsx

@@ -4,9 +4,10 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
-import { Tooltip, TooltipPlacement } from './Tooltip';
+import type { TooltipPlacement } from './Tooltip';
+import { Tooltip } from './Tooltip';
 import { Theme } from '../util/theme';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 export enum CallingButtonType {
   AUDIO_DISABLED = 'AUDIO_DISABLED',

ts/components/CallingDeviceSelection.stories.tsx

@@ -5,7 +5,8 @@ import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 
-import { CallingDeviceSelection, Props } from './CallingDeviceSelection';
+import type { Props } from './CallingDeviceSelection';
+import { CallingDeviceSelection } from './CallingDeviceSelection';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 

ts/components/CallingDeviceSelection.tsx

@@ -5,12 +5,12 @@ import * as React from 'react';
 import type { AudioDevice } from 'ringrtc';
 
 import { Modal } from './Modal';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
-import {
+import type {
-  CallingDeviceType,
   ChangeIODevicePayloadType,
   MediaDeviceSettings,
 } from '../types/Calling';
+import { CallingDeviceType } from '../types/Calling';
 import { Theme } from '../util/theme';
 
 export type Props = MediaDeviceSettings & {

ts/components/CallingHeader.stories.tsx

@@ -6,7 +6,8 @@ import { storiesOf } from '@storybook/react';
 import { boolean, number } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-import { CallingHeader, PropsType } from './CallingHeader';
+import type { PropsType } from './CallingHeader';
+import { CallingHeader } from './CallingHeader';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 

ts/components/CallingHeader.tsx

@@ -1,9 +1,10 @@
 // Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Tooltip } from './Tooltip';
 import { Theme } from '../util/theme';
 

ts/components/CallingLobby.stories.tsx

@@ -9,8 +9,9 @@ import { action } from '@storybook/addon-actions';
 import { v4 as generateUuid } from 'uuid';
 
 import { AvatarColors } from '../types/Colors';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
-import { CallingLobby, PropsType } from './CallingLobby';
+import type { PropsType } from './CallingLobby';
+import { CallingLobby } from './CallingLobby';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';

ts/components/CallingLobby.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import {
+import type {
   SetLocalAudioType,
   SetLocalPreviewType,
   SetLocalVideoType,
@@ -17,11 +17,11 @@ import {
   CallingLobbyJoinButton,
   CallingLobbyJoinButtonVariant,
 } from './CallingLobbyJoinButton';
-import { AvatarColorType } from '../types/Colors';
+import type { AvatarColorType } from '../types/Colors';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { useIsOnline } from '../hooks/useIsOnline';
 import * as KeyboardLayout from '../services/keyboardLayout';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
 import { isConversationTooBigToRing } from '../conversations/isConversationTooBigToRing';
 
 export type PropsType = {

ts/components/CallingLobbyJoinButton.tsx

@@ -1,7 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { FunctionComponent, ReactChild, useState } from 'react';
+import type { FunctionComponent, ReactChild } from 'react';
+import React, { useState } from 'react';
 import { noop } from 'lodash';
 
 import type { LocalizerType } from '../types/Util';

ts/components/CallingParticipantsList.stories.tsx

@@ -7,9 +7,10 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { v4 as generateUuid } from 'uuid';
 
-import { CallingParticipantsList, PropsType } from './CallingParticipantsList';
+import type { PropsType } from './CallingParticipantsList';
+import { CallingParticipantsList } from './CallingParticipantsList';
 import { AvatarColors } from '../types/Colors';
-import { GroupCallRemoteParticipantType } from '../types/Calling';
+import type { GroupCallRemoteParticipantType } from '../types/Calling';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';

ts/components/CallingParticipantsList.tsx

@@ -8,9 +8,9 @@ import { createPortal } from 'react-dom';
 import { Avatar } from './Avatar';
 import { ContactName } from './conversation/ContactName';
 import { InContactsIcon } from './InContactsIcon';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { sortByTitle } from '../util/sortByTitle';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
 import { isInSystemContacts } from '../util/isInSystemContacts';
 
 type ParticipantType = ConversationType & {

ts/components/CallingPip.stories.tsx

@@ -8,10 +8,11 @@ import { boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 import { AvatarColors } from '../types/Colors';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
-import { CallingPip, PropsType } from './CallingPip';
+import type { PropsType } from './CallingPip';
+import { CallingPip } from './CallingPip';
+import type { ActiveCallType } from '../types/Calling';
 import {
-  ActiveCallType,
   CallMode,
   CallState,
   GroupCallConnectionState,

ts/components/CallingPip.tsx

@@ -5,9 +5,9 @@ import React from 'react';
 import { minBy, debounce, noop } from 'lodash';
 import type { VideoFrameSource } from 'ringrtc';
 import { CallingPipRemoteVideo } from './CallingPipRemoteVideo';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import type { ActiveCallType, GroupCallVideoRequest } from '../types/Calling';
-import {
+import type {
   HangUpType,
   SetLocalPreviewType,
   SetRendererCanvasType,

ts/components/CallingPipRemoteVideo.tsx

@@ -8,15 +8,15 @@ import { Avatar } from './Avatar';
 import { CallBackgroundBlur } from './CallBackgroundBlur';
 import { DirectCallRemoteParticipant } from './DirectCallRemoteParticipant';
 import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
-import {
+import type {
   ActiveCallType,
-  CallMode,
   GroupCallRemoteParticipantType,
   GroupCallVideoRequest,
 } from '../types/Calling';
+import { CallMode } from '../types/Calling';
 import { AvatarColors } from '../types/Colors';
-import { SetRendererCanvasType } from '../state/ducks/calling';
+import type { SetRendererCanvasType } from '../state/ducks/calling';
 import { useGetCallingFrameBuffer } from '../calling/useGetCallingFrameBuffer';
 import { usePageVisibility } from '../hooks/usePageVisibility';
 import { missingCaseError } from '../util/missingCaseError';

ts/components/CallingPreCallInfo.tsx

@@ -1,7 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
+import React from 'react';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import { Avatar, AvatarSize } from './Avatar';

ts/components/CallingScreenSharingController.stories.tsx

@@ -5,10 +5,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import {
+import type { PropsType } from './CallingScreenSharingController';
-  CallingScreenSharingController,
+import { CallingScreenSharingController } from './CallingScreenSharingController';
-  PropsType,
-} from './CallingScreenSharingController';
 
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';

ts/components/CallingScreenSharingController.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { Button, ButtonVariant } from './Button';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   i18n: LocalizerType;

ts/components/CallingSelectPresentingSourcesModal.stories.tsx

@@ -5,10 +5,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import {
+import type { PropsType } from './CallingSelectPresentingSourcesModal';
-  CallingSelectPresentingSourcesModal,
+import { CallingSelectPresentingSourcesModal } from './CallingSelectPresentingSourcesModal';
-  PropsType,
-} from './CallingSelectPresentingSourcesModal';
 
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';

ts/components/CallingSelectPresentingSourcesModal.tsx

@@ -5,9 +5,9 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { groupBy } from 'lodash';
 import { Button, ButtonVariant } from './Button';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Modal } from './Modal';
-import { PresentedSource, PresentableSource } from '../types/Calling';
+import type { PresentedSource, PresentableSource } from '../types/Calling';
 import { Theme } from '../util/theme';
 
 export type PropsType = {

ts/components/CallingToastManager.tsx

@@ -3,13 +3,10 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import {
+import type { ActiveCallType } from '../types/Calling';
-  ActiveCallType,
+import { CallMode, GroupCallConnectionState } from '../types/Calling';
-  CallMode,
+import type { ConversationType } from '../state/ducks/conversations';
-  GroupCallConnectionState,
+import type { LocalizerType } from '../types/Util';
-} from '../types/Calling';
-import { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
 
 type PropsType = {
   activeCall: ActiveCallType;

ts/components/CaptchaDialog.tsx

@@ -3,7 +3,7 @@
 
 import React, { useRef, useState } from 'react';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Button, ButtonVariant } from './Button';
 import { Modal } from './Modal';
 import { Spinner } from './Spinner';

ts/components/CaptionEditor.stories.tsx

@@ -7,7 +7,8 @@ import { storiesOf } from '@storybook/react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-import { CaptionEditor, Props } from './CaptionEditor';
+import type { Props } from './CaptionEditor';
+import { CaptionEditor } from './CaptionEditor';
 import { AUDIO_MP3, IMAGE_JPEG, VIDEO_MP4 } from '../types/MIME';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';

ts/components/CaptionEditor.tsx

@@ -4,9 +4,9 @@
 import React from 'react';
 import * as GoogleChrome from '../util/GoogleChrome';
 
-import { AttachmentType } from '../types/Attachment';
+import type { AttachmentType } from '../types/Attachment';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 export type Props = {
   attachment: AttachmentType;

ts/components/ChatColorPicker.stories.tsx

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 import { select } from '@storybook/addon-knobs';
 
 import enMessages from '../../_locales/en/messages.json';
-import { ChatColorPicker, PropsType } from './ChatColorPicker';
+import type { PropsType } from './ChatColorPicker';
+import { ChatColorPicker } from './ChatColorPicker';
 import { ConversationColors } from '../types/Colors';
 import { setupI18n } from '../util/setupI18n';
 

ts/components/ChatColorPicker.tsx

@@ -1,19 +1,17 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { KeyboardEvent, MouseEvent, useRef, useState } from 'react';
+import type { KeyboardEvent, MouseEvent } from 'react';
+import React, { useRef, useState } from 'react';
 import classNames from 'classnames';
 import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { CustomColorEditor } from './CustomColorEditor';
 import { Modal } from './Modal';
-import {
+import type { ConversationColorType, CustomColorType } from '../types/Colors';
-  ConversationColors,
+import { ConversationColors } from '../types/Colors';
-  ConversationColorType,
+import type { ConversationType } from '../state/ducks/conversations';
-  CustomColorType,
+import type { LocalizerType } from '../types/Util';
-} from '../types/Colors';
-import { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
 import { SampleMessageBubbles } from './SampleMessageBubbles';
 import { PanelRow } from './conversation/conversation-details/PanelRow';
 import { getCustomColorStyle } from '../util/getCustomColorStyle';

ts/components/Checkbox.stories.tsx

@@ -5,7 +5,8 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 
-import { Checkbox, PropsType } from './Checkbox';
+import type { PropsType } from './Checkbox';
+import { Checkbox } from './Checkbox';
 
 const createProps = (): PropsType => ({
   checked: false,

ts/components/ClearingData.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useEffect } from 'react';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   deleteAllData: () => void;

ts/components/CompositionArea.stories.tsx

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 
 import { IMAGE_JPEG } from '../types/MIME';
-import { CompositionArea, Props } from './CompositionArea';
+import type { Props } from './CompositionArea';
+import { CompositionArea } from './CompositionArea';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 

ts/components/CompositionArea.tsx

@@ -1,53 +1,47 @@
 // Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, {
+import type { MutableRefObject } from 'react';
-  MutableRefObject,
+import React, { useCallback, useEffect, useRef, useState } from 'react';
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
 import { get } from 'lodash';
 import classNames from 'classnames';
-import type { BodyRangeType, BodyRangesType } from '../types/Util';
+import type {
+  BodyRangeType,
+  BodyRangesType,
+  LocalizerType,
+} from '../types/Util';
 import type { ErrorDialogAudioRecorderType } from '../state/ducks/audioRecorder';
 import type { HandleAttachmentsProcessingArgsType } from '../util/handleAttachmentsProcessing';
 import { Spinner } from './Spinner';
-import { EmojiButton, Props as EmojiButtonProps } from './emoji/EmojiButton';
+import type { Props as EmojiButtonProps } from './emoji/EmojiButton';
-import {
+import { EmojiButton } from './emoji/EmojiButton';
-  Props as StickerButtonProps,
+import type { Props as StickerButtonProps } from './stickers/StickerButton';
-  StickerButton,
+import { StickerButton } from './stickers/StickerButton';
-} from './stickers/StickerButton';
+import type {
-import {
-  CompositionInput,
   InputApi,
   Props as CompositionInputProps,
 } from './CompositionInput';
-import {
+import { CompositionInput } from './CompositionInput';
-  MessageRequestActions,
+import type { Props as MessageRequestActionsProps } from './conversation/MessageRequestActions';
-  Props as MessageRequestActionsProps,
+import { MessageRequestActions } from './conversation/MessageRequestActions';
-} from './conversation/MessageRequestActions';
+import type { PropsType as GroupV1DisabledActionsPropsType } from './conversation/GroupV1DisabledActions';
-import {
+import { GroupV1DisabledActions } from './conversation/GroupV1DisabledActions';
-  GroupV1DisabledActions,
+import type { PropsType as GroupV2PendingApprovalActionsPropsType } from './conversation/GroupV2PendingApprovalActions';
-  PropsType as GroupV1DisabledActionsPropsType,
+import { GroupV2PendingApprovalActions } from './conversation/GroupV2PendingApprovalActions';
-} from './conversation/GroupV1DisabledActions';
-import {
-  GroupV2PendingApprovalActions,
-  PropsType as GroupV2PendingApprovalActionsPropsType,
-} from './conversation/GroupV2PendingApprovalActions';
 import { AnnouncementsOnlyGroupBanner } from './AnnouncementsOnlyGroupBanner';
 import { AttachmentList } from './conversation/AttachmentList';
-import { AttachmentType, isImageAttachment } from '../types/Attachment';
+import type { AttachmentType } from '../types/Attachment';
+import { isImageAttachment } from '../types/Attachment';
 import { AudioCapture } from './conversation/AudioCapture';
 import { CompositionUpload } from './CompositionUpload';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
-import { EmojiPickDataType } from './emoji/EmojiPicker';
+import type { EmojiPickDataType } from './emoji/EmojiPicker';
-import { LinkPreviewWithDomain } from '../types/LinkPreview';
+import type { LinkPreviewWithDomain } from '../types/LinkPreview';
-import { LocalizerType } from '../types/Util';
+
 import { MandatoryProfileSharingActions } from './conversation/MandatoryProfileSharingActions';
 import { MediaQualitySelector } from './MediaQualitySelector';
-import { Quote, Props as QuoteProps } from './conversation/Quote';
+import type { Props as QuoteProps } from './conversation/Quote';
+import { Quote } from './conversation/Quote';
 import { StagedLinkPreview } from './conversation/StagedLinkPreview';
 import { countStickers } from './stickers/lib';
 import {

ts/components/CompositionInput.stories.tsx

@@ -9,7 +9,8 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
-import { CompositionInput, Props } from './CompositionInput';
+import type { Props } from './CompositionInput';
+import { CompositionInput } from './CompositionInput';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 

ts/components/CompositionInput.tsx

@@ -7,14 +7,15 @@ import Delta from 'quill-delta';
 import ReactQuill from 'react-quill';
 import classNames from 'classnames';
 import { Manager, Reference } from 'react-popper';
-import Quill, { KeyboardStatic, RangeStatic } from 'quill';
+import type { KeyboardStatic, RangeStatic } from 'quill';
+import Quill from 'quill';
 
 import { MentionCompletion } from '../quill/mentions/completion';
 import { EmojiBlot, EmojiCompletion } from '../quill/emoji';
-import { EmojiPickDataType } from './emoji/EmojiPicker';
+import type { EmojiPickDataType } from './emoji/EmojiPicker';
 import { convertShortName } from './emoji/lib';
-import { LocalizerType, BodyRangeType } from '../types/Util';
+import type { LocalizerType, BodyRangeType } from '../types/Util';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
 import { MentionBlot } from '../quill/mentions/blot';
 import {
   matchEmojiImage,

ts/components/CompositionUpload.tsx

@@ -1,11 +1,12 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { ChangeEventHandler, forwardRef, useState } from 'react';
+import type { ChangeEventHandler } from 'react';
+import React, { forwardRef, useState } from 'react';
 
-import { AttachmentType } from '../types/Attachment';
+import type { AttachmentType } from '../types/Attachment';
 import { AttachmentToastType } from '../types/AttachmentToastType';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 import { ToastCannotMixImageAndNonImageAttachments } from './ToastCannotMixImageAndNonImageAttachments';
 import { ToastDangerousFileType } from './ToastDangerousFileType';

ts/components/ConfirmDiscardDialog.stories.tsx

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 
-import { ConfirmDiscardDialog, PropsType } from './ConfirmDiscardDialog';
+import type { PropsType } from './ConfirmDiscardDialog';
+import { ConfirmDiscardDialog } from './ConfirmDiscardDialog';
 
 const i18n = setupI18n('en', enMessages);
 

ts/components/ConfirmDiscardDialog.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { ConfirmationDialog } from './ConfirmationDialog';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   i18n: LocalizerType;

ts/components/ConfirmationDialog.tsx

@@ -1,13 +1,14 @@
 // Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { MouseEvent, useCallback } from 'react';
+import type { MouseEvent } from 'react';
+import React, { useCallback } from 'react';
 import { animated } from '@react-spring/web';
 import { Button, ButtonVariant } from './Button';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { ModalHost } from './ModalHost';
 import { Modal, ModalWindow } from './Modal';
-import { Theme } from '../util/theme';
+import type { Theme } from '../util/theme';
 import { useAnimated } from '../hooks/useAnimated';
 
 export type ActionSpec = {

ts/components/ContactListItem.tsx

@@ -9,8 +9,8 @@ import { Avatar } from './Avatar';
 import { Emojify } from './conversation/Emojify';
 import { InContactsIcon } from './InContactsIcon';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
-import { ConversationType } from '../state/ducks/conversations';
+import type { ConversationType } from '../state/ducks/conversations';
 import { isInSystemContacts } from '../util/isInSystemContacts';
 
 type Props = {