Prefer import type when importing types

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 { AvatarColorType } from '../types/Colors';
+import type { LocalizerType } from '../types/Util';
+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 { LocalizerType } from '../types/Util';
+import type { AvatarColorType } from '../types/Colors';
+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 {
+import type { AvatarColorType } from '../types/Colors';
+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 { AvatarDataType } from '../types/Avatar';
+import type { AvatarColorType } from '../types/Colors';
+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 { AvatarColors, AvatarColorType } from '../types/Colors';
+import type { Props } from './AvatarPopup';
+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 { LocalizerType } from '../types/Util';
+import type { AvatarColorType } from '../types/Colors';
+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 { AvatarColors, AvatarColorType } from '../types/Colors';
+import type { ConversationTypeType } from '../state/ducks/conversations';
+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 {
-  SafetyNumberChangeDialog,
-  SafetyNumberProps,
-} from './SafetyNumberChangeDialog';
-import {
+import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
+import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
+import type {
   ActiveCallType,
+  GroupCallVideoRequest,
+  PresentedSource,
+} from '../types/Calling';
+import {
   CallEndedReason,
   CallMode,
   CallState,
   GroupCallConnectionState,
   GroupCallJoinState,
-  GroupCallVideoRequest,
-  PresentedSource,
 } from '../types/Calling';
-import { ConversationType } from '../state/ducks/conversations';
-import {
+import type { ConversationType } from '../state/ducks/conversations';
+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, {
-  ReactNode,
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-} from 'react';
+import type { ReactNode } from 'react';
+import 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 {
-  CallingDeviceType,
+import type { LocalizerType } from '../types/Util';
+import type {
   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 { CallingLobby, PropsType } from './CallingLobby';
+import type { ConversationType } from '../state/ducks/conversations';
+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 { LocalizerType } from '../types/Util';
+import type { AvatarColorType } from '../types/Colors';
+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 { CallingPip, PropsType } from './CallingPip';
+import type { ConversationType } from '../state/ducks/conversations';
+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 {
+import type { LocalizerType } from '../types/Util';
+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 {
-  CallingScreenSharingController,
-  PropsType,
-} from './CallingScreenSharingController';
+import type { PropsType } from './CallingScreenSharingController';
+import { CallingScreenSharingController } 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 {
-  CallingSelectPresentingSourcesModal,
-  PropsType,
-} from './CallingSelectPresentingSourcesModal';
+import type { PropsType } from './CallingSelectPresentingSourcesModal';
+import { CallingSelectPresentingSourcesModal } 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 {
-  ActiveCallType,
-  CallMode,
-  GroupCallConnectionState,
-} from '../types/Calling';
-import { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
+import type { ActiveCallType } from '../types/Calling';
+import { CallMode, GroupCallConnectionState } from '../types/Calling';
+import type { ConversationType } from '../state/ducks/conversations';
+import type { 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 {
-  ConversationColors,
-  ConversationColorType,
-  CustomColorType,
-} from '../types/Colors';
-import { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
+import type { ConversationColorType, CustomColorType } from '../types/Colors';
+import { ConversationColors } from '../types/Colors';
+import type { ConversationType } from '../state/ducks/conversations';
+import type { 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, {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import type { MutableRefObject } from 'react';
+import 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 {
-  Props as StickerButtonProps,
-  StickerButton,
-} from './stickers/StickerButton';
-import {
-  CompositionInput,
+import type { Props as EmojiButtonProps } from './emoji/EmojiButton';
+import { EmojiButton } from './emoji/EmojiButton';
+import type { Props as StickerButtonProps } from './stickers/StickerButton';
+import { StickerButton } from './stickers/StickerButton';
+import type {
   InputApi,
   Props as CompositionInputProps,
 } from './CompositionInput';
-import {
-  MessageRequestActions,
-  Props as MessageRequestActionsProps,
-} from './conversation/MessageRequestActions';
-import {
-  GroupV1DisabledActions,
-  PropsType as GroupV1DisabledActionsPropsType,
-} from './conversation/GroupV1DisabledActions';
-import {
-  GroupV2PendingApprovalActions,
-  PropsType as GroupV2PendingApprovalActionsPropsType,
-} from './conversation/GroupV2PendingApprovalActions';
+import { CompositionInput } from './CompositionInput';
+import type { Props as MessageRequestActionsProps } from './conversation/MessageRequestActions';
+import { MessageRequestActions } from './conversation/MessageRequestActions';
+import type { PropsType as GroupV1DisabledActionsPropsType } from './conversation/GroupV1DisabledActions';
+import { GroupV1DisabledActions } from './conversation/GroupV1DisabledActions';
+import type { PropsType as GroupV2PendingApprovalActionsPropsType } from './conversation/GroupV2PendingApprovalActions';
+import { GroupV2PendingApprovalActions } 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 { EmojiPickDataType } from './emoji/EmojiPicker';
-import { LinkPreviewWithDomain } from '../types/LinkPreview';
-import { LocalizerType } from '../types/Util';
+import type { ConversationType } from '../state/ducks/conversations';
+import type { EmojiPickDataType } from './emoji/EmojiPicker';
+import type { LinkPreviewWithDomain } from '../types/LinkPreview';
+
 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 { ConversationType } from '../state/ducks/conversations';
+import type { LocalizerType, BodyRangeType } from '../types/Util';
+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 { ConversationType } from '../state/ducks/conversations';
+import type { LocalizerType } from '../types/Util';
+import type { ConversationType } from '../state/ducks/conversations';
 import { isInSystemContacts } from '../util/isInSystemContacts';
 
 type Props = {

ts/components/ContactPill.tsx

@@ -1,10 +1,11 @@
 // 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 { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
+import type { ConversationType } from '../state/ducks/conversations';
+import type { LocalizerType } from '../types/Util';
 import { ContactName } from './conversation/ContactName';
 import { Avatar, AvatarSize } from './Avatar';
 

ts/components/ContactPills.stories.tsx

@@ -10,7 +10,8 @@ import { action } from '@storybook/addon-actions';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 import { ContactPills } from './ContactPills';
-import { ContactPill, PropsType as ContactPillPropsType } from './ContactPill';
+import type { PropsType as ContactPillPropsType } from './ContactPill';
+import { ContactPill } from './ContactPill';
 import { gifUrl } from '../storybook/Fixtures';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 

ts/components/ContactPills.tsx

@@ -1,13 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, {
-  useRef,
-  useEffect,
-  Children,
-  FunctionComponent,
-  ReactNode,
-} from 'react';
+import type { FunctionComponent, ReactNode } from 'react';
+import React, { useRef, useEffect, Children } from 'react';
 
 import { usePrevious } from '../hooks/usePrevious';
 import { scrollToBottom } from '../util/scrollToBottom';

ts/components/ConversationList.stories.tsx

@@ -8,12 +8,11 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, date, select, text } from '@storybook/addon-knobs';
 
-import { ConversationList, PropsType, RowType, Row } from './ConversationList';
+import type { PropsType, Row } from './ConversationList';
+import { ConversationList, RowType } from './ConversationList';
 import { MessageSearchResult } from './conversationList/MessageSearchResult';
-import {
-  PropsData as ConversationListItemPropsType,
-  MessageStatuses,
-} from './conversationList/ConversationListItem';
+import type { PropsData as ConversationListItemPropsType } from './conversationList/ConversationListItem';
+import { MessageStatuses } from './conversationList/ConversationListItem';
 import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { setupI18n } from '../util/setupI18n';

ts/components/ConversationList.tsx

@@ -1,28 +1,25 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useRef, useEffect, useCallback, ReactNode } from 'react';
-import { List, ListRowRenderer } from 'react-virtualized';
+import type { ReactNode } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
+import type { ListRowRenderer } from 'react-virtualized';
+import { List } from 'react-virtualized';
 import classNames from 'classnames';
 import { get, pick } from 'lodash';
 
 import { missingCaseError } from '../util/missingCaseError';
 import { assert } from '../util/assert';
-import { LocalizerType, ScrollBehavior } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
+import { ScrollBehavior } from '../types/Util';
 import { getConversationListWidthBreakpoint } from './_util';
 
-import {
-  ConversationListItem,
-  PropsData as ConversationListItemPropsType,
-} from './conversationList/ConversationListItem';
-import {
-  ContactListItem,
-  PropsDataType as ContactListItemPropsType,
-} from './conversationList/ContactListItem';
-import {
-  ContactCheckbox as ContactCheckboxComponent,
-  ContactCheckboxDisabledReason,
-} from './conversationList/ContactCheckbox';
+import type { PropsData as ConversationListItemPropsType } from './conversationList/ConversationListItem';
+import { ConversationListItem } from './conversationList/ConversationListItem';
+import type { PropsDataType as ContactListItemPropsType } from './conversationList/ContactListItem';
+import { ContactListItem } from './conversationList/ContactListItem';
+import type { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
+import { ContactCheckbox as ContactCheckboxComponent } from './conversationList/ContactCheckbox';
 import { CreateNewGroupButton } from './conversationList/CreateNewGroupButton';
 import { StartNewConversation as StartNewConversationComponent } from './conversationList/StartNewConversation';
 import { SearchResultsLoadingFakeHeader as SearchResultsLoadingFakeHeaderComponent } from './conversationList/SearchResultsLoadingFakeHeader';

ts/components/Countdown.stories.tsx

@@ -7,7 +7,8 @@ import { action } from '@storybook/addon-actions';
 import { date, number } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
-import { Countdown, Props } from './Countdown';
+import type { Props } from './Countdown';
+import { Countdown } from './Countdown';
 
 const defaultDuration = 10 * 1000;
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({

ts/components/CustomColorEditor.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 { CustomColorEditor, PropsType } from './CustomColorEditor';
+import type { PropsType } from './CustomColorEditor';
+import { CustomColorEditor } from './CustomColorEditor';
 import { setupI18n } from '../util/setupI18n';
 
 const story = storiesOf('Components/CustomColorEditor', module);

ts/components/CustomColorEditor.tsx

@@ -7,8 +7,8 @@ import { GradientDial, KnobType } from './GradientDial';
 import { SampleMessageBubbles } from './SampleMessageBubbles';
 import { Slider } from './Slider';
 import { Tabs } from './Tabs';
-import { CustomColorType } from '../types/Colors';
-import { LocalizerType } from '../types/Util';
+import type { CustomColorType } from '../types/Colors';
+import type { LocalizerType } from '../types/Util';
 import { getHSL } from '../util/getHSL';
 import { getCustomColorStyle } from '../util/getCustomColorStyle';
 

ts/components/CustomizingPreferredReactionsModal.stories.tsx

@@ -1,7 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+import React from 'react';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';

ts/components/DebugLogWindow.stories.tsx

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

ts/components/DebugLogWindow.tsx

@@ -1,11 +1,12 @@
 // Copyright 2015-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 copyText from 'copy-text-to-clipboard';
 import * as log from '../logging/log';
 import { Button, ButtonVariant } from './Button';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Spinner } from './Spinner';
 import { ToastDebugLogError } from './ToastDebugLogError';
 import { ToastLinkCopied } from './ToastLinkCopied';

ts/components/DialogExpiredBuild.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import type { WidthBreakpoint } from './_util';
 
 import { LeftPaneDialog } from './LeftPaneDialog';

ts/components/DialogNetworkStatus.tsx

@@ -5,9 +5,9 @@ import React, { useEffect } from 'react';
 
 import { LeftPaneDialog } from './LeftPaneDialog';
 import { Spinner } from './Spinner';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { SocketStatus } from '../types/SocketStatus';
-import { NetworkStateType } from '../state/ducks/network';
+import type { NetworkStateType } from '../state/ducks/network';
 import type { WidthBreakpoint } from './_util';
 
 const FIVE_SECONDS = 5 * 1000;

ts/components/DialogRelink.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import type { WidthBreakpoint } from './_util';
 
 import { LeftPaneDialog } from './LeftPaneDialog';

ts/components/DialogUpdate.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import formatFileSize from 'filesize';
 
 import { DialogType } from '../types/Dialogs';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import { Intl } from './Intl';
 import { LeftPaneDialog } from './LeftPaneDialog';
 import type { WidthBreakpoint } from './_util';

ts/components/DirectCallRemoteParticipant.tsx

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useRef, useEffect } from 'react';
-import { SetRendererCanvasType } from '../state/ducks/calling';
-import { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
+import type { SetRendererCanvasType } from '../state/ducks/calling';
+import type { ConversationType } from '../state/ducks/conversations';
+import type { LocalizerType } from '../types/Util';
 import { AvatarColors } from '../types/Colors';
 import { Avatar } from './Avatar';
 

ts/components/DisappearingTimeDialog.tsx

@@ -5,8 +5,8 @@ import React, { useState } from 'react';
 
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { Select } from './Select';
-import { LocalizerType } from '../types/Util';
-import { Theme } from '../util/theme';
+import type { LocalizerType } from '../types/Util';
+import type { Theme } from '../util/theme';
 
 const CSS_MODULE = 'module-disappearing-time-dialog';
 

ts/components/DisappearingTimerSelect.tsx

@@ -1,10 +1,11 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useState, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import * as expirationTimer from '../util/expirationTimer';
 import { DisappearingTimeDialog } from './DisappearingTimeDialog';
 

ts/components/ErrorModal.stories.tsx

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

ts/components/ErrorModal.tsx

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

ts/components/ForwardMessageModal.stories.tsx

@@ -8,8 +8,9 @@ import { action } from '@storybook/addon-actions';
 import { text } from '@storybook/addon-knobs';
 
 import enMessages from '../../_locales/en/messages.json';
-import { AttachmentType } from '../types/Attachment';
-import { ForwardMessageModal, PropsType } from './ForwardMessageModal';
+import type { AttachmentType } from '../types/Attachment';
+import type { PropsType } from './ForwardMessageModal';
+import { ForwardMessageModal } from './ForwardMessageModal';
 import { IMAGE_JPEG, VIDEO_MP4, stringToMIMEType } from '../types/MIME';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { setupI18n } from '../util/setupI18n';

ts/components/ForwardMessageModal.tsx

@@ -1,31 +1,35 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import type { FunctionComponent } from 'react';
 import React, {
-  FunctionComponent,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
-import Measure, { MeasuredComponentProps } from 'react-measure';
+import type { MeasuredComponentProps } from 'react-measure';
+import Measure from 'react-measure';
 import { noop } from 'lodash';
 import { animated } from '@react-spring/web';
 
 import classNames from 'classnames';
 import { AttachmentList } from './conversation/AttachmentList';
-import { AttachmentType } from '../types/Attachment';
+import type { AttachmentType } from '../types/Attachment';
 import { Button } from './Button';
-import { CompositionInput, InputApi } from './CompositionInput';
+import type { InputApi } from './CompositionInput';
+import { CompositionInput } from './CompositionInput';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
-import { ConversationList, Row, RowType } from './ConversationList';
-import { ConversationType } from '../state/ducks/conversations';
-import { EmojiButton, Props as EmojiButtonProps } from './emoji/EmojiButton';
-import { EmojiPickDataType } from './emoji/EmojiPicker';
-import { LinkPreviewType } from '../types/message/LinkPreviews';
-import { BodyRangeType, LocalizerType } from '../types/Util';
+import type { Row } from './ConversationList';
+import { ConversationList, RowType } from './ConversationList';
+import type { ConversationType } from '../state/ducks/conversations';
+import type { Props as EmojiButtonProps } from './emoji/EmojiButton';
+import { EmojiButton } from './emoji/EmojiButton';
+import type { EmojiPickDataType } from './emoji/EmojiPicker';
+import type { LinkPreviewType } from '../types/message/LinkPreviews';
+import type { BodyRangeType, LocalizerType } from '../types/Util';
 import { ModalHost } from './ModalHost';
 import { SearchInput } from './SearchInput';
 import { StagedLinkPreview } from './conversation/StagedLinkPreview';

ts/components/GlobalAudioContext.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PQueue from 'p-queue';
 import LRU from 'lru-cache';
 
-import { WaveformCache } from '../types/Audio';
+import type { WaveformCache } from '../types/Audio';
 import * as log from '../logging/log';
 
 const MAX_WAVEFORM_COUNT = 1000;

ts/components/GlobalModalContainer.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import { ContactModalStateType } from '../state/ducks/globalModals';
-import { LocalizerType } from '../types/Util';
+import type { ContactModalStateType } from '../state/ducks/globalModals';
+import type { LocalizerType } from '../types/Util';
 
 import { WhatsNewModal } from './WhatsNewModal';
 

ts/components/GradientDial.tsx

@@ -1,13 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, {
-  CSSProperties,
-  KeyboardEvent,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import type { CSSProperties, KeyboardEvent } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 
 export enum KnobType {

ts/components/GroupCallOverflowArea.stories.tsx

@@ -1,7 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 import { memoize, times } from 'lodash';
 import { v4 as generateUuid } from 'uuid';
 import { storiesOf } from '@storybook/react';

ts/components/GroupCallOverflowArea.tsx

@@ -1,10 +1,11 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useRef, useState, useEffect, FC, ReactElement } from 'react';
+import type { FC, ReactElement } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import type { VideoFrameSource } from 'ringrtc';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import type { GroupCallRemoteParticipantType } from '../types/Calling';
 import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';