chore(deps-dev): bump prettier from 2.1.2 to 2.8.8 (#5372)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/CommandBar.tsx

@@ -25,9 +25,9 @@ function CommandBar() {
 
   const { rootAction } = useKBar((state) => ({
     rootAction: state.currentRootActionId
-      ? ((state.actions[
+      ? (state.actions[
           state.currentRootActionId
-        ] as unknown) as CommandBarAction)
+        ] as unknown as CommandBarAction)
       : undefined,
   }));
 

app/components/ContentEditable.tsx

@@ -85,27 +85,33 @@ const ContentEditable = React.forwardRef(
       },
     }));
 
-    const wrappedEvent = (
-      callback:
-        | React.FocusEventHandler<HTMLSpanElement>
-        | React.FormEventHandler<HTMLSpanElement>
-        | React.KeyboardEventHandler<HTMLSpanElement>
-        | undefined
-    ) => (event: any) => {
-      const text = contentRef.current?.innerText || "";
+    const wrappedEvent =
+      (
+        callback:
+          | React.FocusEventHandler<HTMLSpanElement>
+          | React.FormEventHandler<HTMLSpanElement>
+          | React.KeyboardEventHandler<HTMLSpanElement>
+          | undefined
+      ) =>
+      (event: any) => {
+        const text = contentRef.current?.innerText || "";
 
-      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
-        event?.preventDefault();
-        return;
-      }
+        if (
+          maxLength &&
+          isPrintableKeyEvent(event) &&
+          text.length >= maxLength
+        ) {
+          event?.preventDefault();
+          return;
+        }
 
-      if (text !== lastValue.current) {
-        lastValue.current = text;
-        onChange && onChange(text);
-      }
+        if (text !== lastValue.current) {
+          lastValue.current = text;
+          onChange && onChange(text);
+        }
 
-      callback?.(event);
-    };
+        callback?.(event);
+      };
 
     // This is to account for being within a React.Suspense boundary, in this
     // case the component may be rendered with display: none. React 18 may solve

app/components/ContextMenu/MouseSafeArea.tsx

@@ -24,8 +24,12 @@ type Positions = {
 export default function MouseSafeArea(props: {
   parentRef: React.RefObject<HTMLElement | null>;
 }) {
-  const { x = 0, y = 0, height: h = 0, width: w = 0 } =
-    props.parentRef.current?.getBoundingClientRect() || {};
+  const {
+    x = 0,
+    y = 0,
+    height: h = 0,
+    width: w = 0,
+  } = props.parentRef.current?.getBoundingClientRect() || {};
   const [mouseX, mouseY] = useMousePosition();
   const positions = { x, y, h, w, mouseX, mouseY };
 

app/components/DocumentExplorer.tsx

@@ -45,9 +45,8 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
   const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
     null
   );
-  const [initialScrollOffset, setInitialScrollOffset] = React.useState<number>(
-    0
-  );
+  const [initialScrollOffset, setInitialScrollOffset] =
+    React.useState<number>(0);
   const [activeNode, setActiveNode] = React.useState<number>(0);
   const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
   const [itemRefs, setItemRefs] = React.useState<

app/components/DocumentListItem.tsx

@@ -181,7 +181,7 @@ const Actions = styled(EventBoundary)`
   color: ${s("textSecondary")};
 
   ${NudeButton} {
-    &: ${hover}, &[aria-expanded= "true" ] {
+    &: ${hover}, &[aria-expanded= "true"] {
       background: ${s("sidebarControlHoverBackground")};
     }
   }

app/components/DocumentViews.tsx

@@ -33,9 +33,10 @@ function DocumentViews({ document, isOpen }: Props) {
     documentViews,
     (view) => !presentIds.includes(view.user.id)
   );
-  const users = React.useMemo(() => sortedViews.map((v) => v.user), [
-    sortedViews,
-  ]);
+  const users = React.useMemo(
+    () => sortedViews.map((v) => v.user),
+    [sortedViews]
+  );
 
   return (
     <>

app/components/Editor.tsx

@@ -67,10 +67,8 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const localRef = React.useRef<SharedEditor>();
   const preferences = auth.user?.preferences;
   const previousHeadings = React.useRef<Heading[] | null>(null);
-  const [
-    activeLinkElement,
-    setActiveLink,
-  ] = React.useState<HTMLAnchorElement | null>(null);
+  const [activeLinkElement, setActiveLink] =
+    React.useState<HTMLAnchorElement | null>(null);
   const previousCommentIds = React.useRef<string[]>();
 
   const handleLinkActive = React.useCallback((element: HTMLAnchorElement) => {

app/components/GroupListItem.tsx

@@ -28,11 +28,8 @@ type Props = {
 function GroupListItem({ group, showFacepile, renderActions }: Props) {
   const { groupMemberships } = useStores();
   const { t } = useTranslation();
-  const [
-    membersModalOpen,
-    setMembersModalOpen,
-    setMembersModalClosed,
-  ] = useBoolean();
+  const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
+    useBoolean();
   const memberCount = group.memberCount;
   const membershipsInGroup = groupMemberships.inGroup(group.id);
   const users = membershipsInGroup

app/components/SearchPopover.tsx

@@ -76,9 +76,8 @@ function SearchPopover({ shareId }: Props) {
     [popover, cachedQuery]
   );
 
-  const searchInputRef = popover.unstable_referenceRef as React.RefObject<
-    HTMLInputElement
-  >;
+  const searchInputRef =
+    popover.unstable_referenceRef as React.RefObject<HTMLInputElement>;
 
   const firstSearchItem = React.useRef<HTMLAnchorElement>(null);
 

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -42,9 +42,10 @@ function DocumentLink(
     !!node.children.length || activeDocument?.parentDocumentId === node.id;
   const document = documents.get(node.id);
 
-  const showChildren = React.useMemo(() => !!hasChildDocuments, [
-    hasChildDocuments,
-  ]);
+  const showChildren = React.useMemo(
+    () => !!hasChildDocuments,
+    [hasChildDocuments]
+  );
 
   const [expanded, setExpanded] = React.useState(showChildren);
 

app/components/WebsocketProvider.tsx

@@ -30,9 +30,8 @@ type SocketWithAuthentication = Socket & {
   authenticated?: boolean;
 };
 
-export const WebsocketContext = React.createContext<SocketWithAuthentication | null>(
-  null
-);
+export const WebsocketContext =
+  React.createContext<SocketWithAuthentication | null>(null);
 
 type Props = RootStore;
 

app/editor/components/LinkEditor.tsx

@@ -272,16 +272,15 @@ class LinkEditor extends React.Component<Props, State> {
     view.focus();
   };
 
-  handleSelectLink = (url: string, title: string) => (
-    event: React.MouseEvent
-  ) => {
-    event.preventDefault();
-    this.save(url, title);
+  handleSelectLink =
+    (url: string, title: string) => (event: React.MouseEvent) => {
+      event.preventDefault();
+      this.save(url, title);
 
-    if (this.initialSelectionLength) {
-      this.moveSelectionToEnd();
-    }
-  };
+      if (this.initialSelectionLength) {
+        this.moveSelectionToEnd();
+      }
+    };
 
   moveSelectionToEnd = () => {
     const { to, view } = this.props;

app/editor/components/SelectionToolbar.tsx

@@ -197,10 +197,8 @@ export default function SelectionToolbar(props: Props) {
     return null;
   }
 
-  const colIndex = getColumnIndex(
-    (state.selection as unknown) as CellSelection
-  );
-  const rowIndex = getRowIndex((state.selection as unknown) as CellSelection);
+  const colIndex = getColumnIndex(state.selection as unknown as CellSelection);
+  const rowIndex = getRowIndex(state.selection as unknown as CellSelection);
   const isTableSelection = colIndex !== undefined && rowIndex !== undefined;
   const link = isMarkActive(state.schema.marks.link)(state);
   const range = getMarkRange(selection.$from, state.schema.marks.link);

app/editor/index.tsx

@@ -464,9 +464,8 @@ export class Editor extends React.PureComponent<
       nodeViews: this.nodeViews,
       dispatchTransaction(transaction) {
         // callback is bound to have the view instance as its this binding
-        const { state, transactions } = this.state.applyTransaction(
-          transaction
-        );
+        const { state, transactions } =
+          this.state.applyTransaction(transaction);
 
         this.updateState(state);
 
@@ -520,9 +519,8 @@ export class Editor extends React.PureComponent<
       return trim ? content.trim() : content;
     }
 
-    return (trim
-      ? ProsemirrorHelper.trim(this.view.state.doc)
-      : this.view.state.doc
+    return (
+      trim ? ProsemirrorHelper.trim(this.view.state.doc) : this.view.state.doc
     ).toJSON();
   };
 

app/hooks/useComponentSize.ts

@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
 
-export default function useComponentSize(
-  ref: React.RefObject<HTMLElement>
-): { width: number; height: number } {
+export default function useComponentSize(ref: React.RefObject<HTMLElement>): {
+  width: number;
+  height: number;
+} {
   const [size, setSize] = useState({
     width: ref.current?.clientWidth || 0,
     height: ref.current?.clientHeight || 0,

app/hooks/useMousePosition.ts

@@ -16,8 +16,7 @@ type MousePosition = [number, number];
 export const useMousePosition = () => {
   const isMounted = useIsMounted();
   const [mousePosition, setMousePosition] = React.useState<MousePosition>([
-    0,
-    0,
+    0, 0,
   ]);
 
   const updateMousePosition = React.useMemo(

app/scenes/CollectionPermissions/AddGroupsToCollection.tsx

@@ -25,20 +25,12 @@ type Props = {
 function AddGroupsToCollection(props: Props) {
   const { collection } = props;
 
-  const [
-    newGroupModalOpen,
-    handleNewGroupModalOpen,
-    handleNewGroupModalClose,
-  ] = useBoolean(false);
+  const [newGroupModalOpen, handleNewGroupModalOpen, handleNewGroupModalClose] =
+    useBoolean(false);
   const [query, setQuery] = React.useState("");
 
-  const {
-    auth,
-    collectionGroupMemberships,
-    groups,
-    policies,
-    toasts,
-  } = useStores();
+  const { auth, collectionGroupMemberships, groups, policies, toasts } =
+    useStores();
   const { fetchPage: fetchGroups } = groups;
 
   const { t } = useTranslation();

app/scenes/CollectionPermissions/AddPeopleToCollection.tsx

@@ -27,11 +27,8 @@ function AddPeopleToCollection({ collection }: Props) {
   const { showToast } = useToasts();
   const team = useCurrentTeam();
   const { t } = useTranslation();
-  const [
-    inviteModalOpen,
-    setInviteModalOpen,
-    setInviteModalClosed,
-  ] = useBoolean();
+  const [inviteModalOpen, setInviteModalOpen, setInviteModalClosed] =
+    useBoolean();
   const [query, setQuery] = React.useState("");
 
   const handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {

app/scenes/CollectionPermissions/index.tsx

@@ -44,11 +44,8 @@ function CollectionPermissions({ collectionId }: Props) {
   const collection = collections.get(collectionId);
   invariant(collection, "Collection not found");
 
-  const [
-    addGroupModalOpen,
-    handleAddGroupModalOpen,
-    handleAddGroupModalClose,
-  ] = useBoolean();
+  const [addGroupModalOpen, handleAddGroupModalOpen, handleAddGroupModalClose] =
+    useBoolean();
 
   const [
     addMemberModalOpen,

app/scenes/Document/components/CommentThreadItem.tsx

@@ -245,7 +245,7 @@ const Menu = styled(CommentMenu)<{ dir?: "rtl" | "ltr" }>`
   transition: opacity 100ms ease-in-out;
   color: ${s("textSecondary")};
 
-  &: ${hover}, &[aria-expanded= "true" ] {
+  &: ${hover}, &[aria-expanded= "true"] {
     opacity: 1;
     background: ${s("sidebarActiveBackground")};
   }

app/scenes/Document/components/Document.tsx

@@ -376,16 +376,8 @@ class DocumentScene extends React.Component<Props> {
   };
 
   render() {
-    const {
-      document,
-      revision,
-      readOnly,
-      abilities,
-      auth,
-      ui,
-      shareId,
-      t,
-    } = this.props;
+    const { document, revision, readOnly, abilities, auth, ui, shareId, t } =
+      this.props;
     const team = auth.team;
     const isShare = !!shareId;
     const embedsDisabled =

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -48,10 +48,8 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
   const { presence, ui } = useStores();
   const token = useCurrentToken();
   const [showCursorNames, setShowCursorNames] = React.useState(false);
-  const [
-    remoteProvider,
-    setRemoteProvider,
-  ] = React.useState<HocuspocusProvider | null>(null);
+  const [remoteProvider, setRemoteProvider] =
+    React.useState<HocuspocusProvider | null>(null);
   const [isLocalSynced, setLocalSynced] = React.useState(false);
   const [isRemoteSynced, setRemoteSynced] = React.useState(false);
   const [ydoc] = React.useState(() => new Y.Doc());

app/scenes/GroupMembers/AddPeopleToGroup.tsx

@@ -28,11 +28,8 @@ function AddPeopleToGroup(props: Props) {
   const { t } = useTranslation();
 
   const [query, setQuery] = React.useState("");
-  const [
-    inviteModalOpen,
-    handleInviteModalOpen,
-    handleInviteModalClose,
-  ] = useBoolean(false);
+  const [inviteModalOpen, handleInviteModalOpen, handleInviteModalClose] =
+    useBoolean(false);
 
   const { fetchPage: fetchUsers } = users;
   const debouncedFetch = React.useMemo(

app/scenes/Settings/Groups.tsx

@@ -24,11 +24,8 @@ function Groups() {
   const { groups } = useStores();
   const team = useCurrentTeam();
   const can = usePolicy(team);
-  const [
-    newGroupModalOpen,
-    handleNewGroupModalOpen,
-    handleNewGroupModalClose,
-  ] = useBoolean();
+  const [newGroupModalOpen, handleNewGroupModalOpen, handleNewGroupModalClose] =
+    useBoolean();
 
   return (
     <Scene

app/scenes/Settings/Members.tsx

@@ -28,11 +28,8 @@ import UserStatusFilter from "./components/UserStatusFilter";
 function Members() {
   const location = useLocation();
   const history = useHistory();
-  const [
-    inviteModalOpen,
-    handleInviteModalOpen,
-    handleInviteModalClose,
-  ] = useBoolean();
+  const [inviteModalOpen, handleInviteModalOpen, handleInviteModalClose] =
+    useBoolean();
   const team = useCurrentTeam();
   const { users } = useStores();
   const { t } = useTranslation();

app/scenes/Settings/Security.tsx

@@ -38,9 +38,11 @@ function Security() {
     inviteRequired: team.inviteRequired,
   });
 
-  const { data: providers, loading, request } = useRequest(() =>
-    authenticationProviders.fetchPage({})
-  );
+  const {
+    data: providers,
+    loading,
+    request,
+  } = useRequest(() => authenticationProviders.fetchPage({}));
 
   React.useEffect(() => {
     if (!providers && !loading) {

app/scenes/Settings/components/DomainManagement.tsx

@@ -31,9 +31,8 @@ function DomainManagement({ onSuccess }: Props) {
     allowedDomains.length
   );
 
-  const [existingDomainsTouched, setExistingDomainsTouched] = React.useState(
-    false
-  );
+  const [existingDomainsTouched, setExistingDomainsTouched] =
+    React.useState(false);
 
   const handleSaveDomains = React.useCallback(async () => {
     try {
@@ -67,19 +66,18 @@ function DomainManagement({ onSuccess }: Props) {
     setAllowedDomains(newDomains);
   };
 
-  const createOnDomainChangedHandler = (index: number) => (
-    ev: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const newDomains = allowedDomains.slice();
+  const createOnDomainChangedHandler =
+    (index: number) => (ev: React.ChangeEvent<HTMLInputElement>) => {
+      const newDomains = allowedDomains.slice();
 
-    newDomains[index] = ev.currentTarget.value;
-    setAllowedDomains(newDomains);
+      newDomains[index] = ev.currentTarget.value;
+      setAllowedDomains(newDomains);
 
-    const touchedExistingDomain = index < lastKnownDomainCount;
-    if (touchedExistingDomain) {
-      setExistingDomainsTouched(true);
-    }
-  };
+      const touchedExistingDomain = index < lastKnownDomainCount;
+      if (touchedExistingDomain) {
+        setExistingDomainsTouched(true);
+      }
+    };
 
   const showSaveChanges =
     existingDomainsTouched ||

app/scenes/UserDelete.tsx

@@ -19,9 +19,11 @@ function UserDelete() {
   const { auth } = useStores();
   const { showToast } = useToasts();
   const { t } = useTranslation();
-  const { register, handleSubmit: formHandleSubmit, formState } = useForm<
-    FormData
-  >();
+  const {
+    register,
+    handleSubmit: formHandleSubmit,
+    formState,
+  } = useForm<FormData>();
 
   const handleRequestDelete = React.useCallback(
     async (ev: React.SyntheticEvent) => {

app/stores/AuthenticationProvidersStore.ts

@@ -2,9 +2,7 @@ import AuthenticationProvider from "~/models/AuthenticationProvider";
 import BaseStore, { RPCAction } from "./BaseStore";
 import RootStore from "./RootStore";
 
-export default class AuthenticationProvidersStore extends BaseStore<
-  AuthenticationProvider
-> {
+export default class AuthenticationProvidersStore extends BaseStore<AuthenticationProvider> {
   actions = [RPCAction.List, RPCAction.Update];
 
   constructor(rootStore: RootStore) {

app/stores/CollectionGroupMembershipsStore.ts

@@ -7,9 +7,7 @@ import { client } from "~/utils/ApiClient";
 import BaseStore, { PAGINATION_SYMBOL, RPCAction } from "./BaseStore";
 import RootStore from "./RootStore";
 
-export default class CollectionGroupMembershipsStore extends BaseStore<
-  CollectionGroupMembership
-> {
+export default class CollectionGroupMembershipsStore extends BaseStore<CollectionGroupMembership> {
   actions = [RPCAction.Create, RPCAction.Delete];
 
   constructor(rootStore: RootStore) {

app/stores/WebhookSubscriptionStore.ts

@@ -3,9 +3,7 @@ import WebhookSubscription from "~/models/WebhookSubscription";
 import BaseStore, { RPCAction } from "./BaseStore";
 import RootStore from "./RootStore";
 
-export default class WebhookSubscriptionsStore extends BaseStore<
-  WebhookSubscription
-> {
+export default class WebhookSubscriptionsStore extends BaseStore<WebhookSubscription> {
   actions = [
     RPCAction.List,
     RPCAction.Create,