diff --git a/app/components/CenteredContent.tsx b/app/components/CenteredContent.tsx index 59e0973b5..a3a2645b1 100644 --- a/app/components/CenteredContent.tsx +++ b/app/components/CenteredContent.tsx @@ -6,13 +6,13 @@ type Props = { withStickyHeader?: boolean; }; -const Container = styled.div<{ withStickyHeader?: boolean }>` +const Container = styled.div` width: 100%; max-width: 100vw; padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")}; ${breakpoint("tablet")` - padding: ${(props: any) => + padding: ${(props: Props) => props.withStickyHeader ? "4px 60px 60px" : "60px"}; `}; `; diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx index cf033e3f1..1b6ef6ba7 100644 --- a/app/components/ContextMenu/MenuItem.tsx +++ b/app/components/ContextMenu/MenuItem.tsx @@ -7,7 +7,7 @@ import { hover } from "~/styles"; import MenuIconWrapper from "../MenuIconWrapper"; type Props = { - onClick?: (arg0: React.SyntheticEvent) => void | Promise; + onClick?: (event: React.SyntheticEvent) => void | Promise; selected?: boolean; disabled?: boolean; dangerous?: boolean; diff --git a/app/components/ContextMenu/index.tsx b/app/components/ContextMenu/index.tsx index 512cc7677..c916f74da 100644 --- a/app/components/ContextMenu/index.tsx +++ b/app/components/ContextMenu/index.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { useTranslation } from "react-i18next"; import { Portal } from "react-portal"; import { Menu } from "reakit/Menu"; -import styled from "styled-components"; +import styled, { DefaultTheme } from "styled-components"; import breakpoint from "styled-components-breakpoint"; import { depths } from "@shared/styles"; import useMenuContext from "~/hooks/useMenuContext"; @@ -160,8 +160,10 @@ export const Position = styled.div` position: absolute; z-index: ${depths.menu}; - // overrides make mobile-first coding style challenging - // so we explicitly define mobile breakpoint here + /* + * overrides make mobile-first coding style challenging + * so we explicitly define mobile breakpoint here + */ ${breakpoint("mobile", "tablet")` position: fixed !important; transform: none !important; @@ -172,10 +174,13 @@ export const Position = styled.div` `}; `; -export const Background = styled.div<{ +type BackgroundProps = { topAnchor?: boolean; rightAnchor?: boolean; -}>` + theme: DefaultTheme; +}; + +export const Background = styled.div` animation: ${mobileContextMenu} 200ms ease; transform-origin: 50% 100%; max-width: 100%; @@ -195,11 +200,12 @@ export const Background = styled.div<{ } ${breakpoint("tablet")` - animation: ${(props: any) => + animation: ${(props: BackgroundProps) => props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease; - transform-origin: ${(props: any) => (props.rightAnchor ? "75%" : "25%")} 0; + transform-origin: ${(props: BackgroundProps) => + props.rightAnchor ? "75%" : "25%"} 0; max-width: 276px; - background: ${(props: any) => props.theme.menuBackground}; - box-shadow: ${(props: any) => props.theme.menuShadow}; + background: ${(props: BackgroundProps) => props.theme.menuBackground}; + box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow}; `}; `; diff --git a/app/components/LanguagePrompt.tsx b/app/components/LanguagePrompt.tsx index e28ad91d0..3dcde2b38 100644 --- a/app/components/LanguagePrompt.tsx +++ b/app/components/LanguagePrompt.tsx @@ -10,7 +10,7 @@ import useCurrentUser from "~/hooks/useCurrentUser"; import useStores from "~/hooks/useStores"; import { detectLanguage } from "~/utils/language"; -function Icon(props: any) { +function Icon({ className }: { className?: string }) { return ( ` + theme: DefaultTheme; +}; + +const Content = styled(Flex)` margin: 0; transition: ${(props) => props.$isResizing ? "none" : `margin-left 100ms ease-out`}; @@ -92,7 +95,7 @@ const Content = styled(Flex)<{ `} ${breakpoint("tablet")` - ${(props: any) => + ${(props: ContentProps) => props.$hasSidebar && props.$sidebarCollapsed && `margin-left: ${props.theme.sidebarCollapsedWidth}px;`} diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx index ae5889ec8..df4351b28 100644 --- a/app/components/Modal.tsx +++ b/app/components/Modal.tsx @@ -4,7 +4,7 @@ import { transparentize } from "polished"; import * as React from "react"; import { useTranslation } from "react-i18next"; import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog"; -import styled from "styled-components"; +import styled, { DefaultTheme } from "styled-components"; import breakpoint from "styled-components-breakpoint"; import { depths } from "@shared/styles"; import Flex from "~/components/Flex"; @@ -143,7 +143,12 @@ const Backdrop = styled(Flex)<{ $isCentered?: boolean }>` } `; -const Fullscreen = styled.div<{ $nested: boolean }>` +type FullscreenProps = { + $nested: boolean; + theme: DefaultTheme; +}; + +const Fullscreen = styled.div` animation: ${fadeAndScaleIn} 250ms ease; position: absolute; @@ -160,7 +165,7 @@ const Fullscreen = styled.div<{ $nested: boolean }>` outline: none; ${breakpoint("tablet")` - ${(props: any) => + ${(props: FullscreenProps) => props.$nested && ` box-shadow: 0 -2px 10px ${props.theme.shadow}; diff --git a/app/components/Sidebar/Sidebar.tsx b/app/components/Sidebar/Sidebar.tsx index ef84560de..bb97e32d4 100644 --- a/app/components/Sidebar/Sidebar.tsx +++ b/app/components/Sidebar/Sidebar.tsx @@ -229,12 +229,14 @@ const Backdrop = styled.a` background: ${(props) => props.theme.backdrop}; `; -const Container = styled(Flex)<{ +type ContainerProps = { $mobileSidebarVisible: boolean; $isAnimating: boolean; $isSmallerThanMinimum: boolean; $collapsed: boolean; -}>` +}; + +const Container = styled(Flex)` position: fixed; top: 0; bottom: 0; @@ -242,7 +244,7 @@ const Container = styled(Flex)<{ background: ${(props) => props.theme.sidebarBackground}; transition: box-shadow 100ms ease-in-out, transform 100ms ease-out, ${(props) => props.theme.backgroundTransition} - ${(props: any) => + ${(props: ContainerProps) => props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""}; transform: translateX( ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")} @@ -263,13 +265,13 @@ const Container = styled(Flex)<{ ${breakpoint("tablet")` margin: 0; min-width: 0; - transform: translateX(${(props: any) => + transform: translateX(${(props: ContainerProps) => props.$collapsed ? "calc(-100% + 16px)" : 0}); &:hover, &:focus-within { transform: none; - box-shadow: ${(props: any) => + box-shadow: ${(props: ContainerProps) => props.$collapsed ? "rgba(0, 0, 0, 0.2) 1px 0 4px" : props.$isSmallerThanMinimum @@ -286,7 +288,7 @@ const Container = styled(Flex)<{ } &:not(:hover):not(:focus-within) > div { - opacity: ${(props: any) => (props.$collapsed ? "0" : "1")}; + opacity: ${(props: ContainerProps) => (props.$collapsed ? "0" : "1")}; transition: opacity 100ms ease-in-out; } `}; diff --git a/app/components/Sidebar/components/SidebarLink.tsx b/app/components/Sidebar/components/SidebarLink.tsx index 854f2fa8b..0f0c04e30 100644 --- a/app/components/Sidebar/components/SidebarLink.tsx +++ b/app/components/Sidebar/components/SidebarLink.tsx @@ -16,7 +16,7 @@ export type DragObject = NavigationNode & { type Props = Omit & { to?: string | Record; href?: string | Record; - innerRef?: (arg0: HTMLElement | null | undefined) => void; + innerRef?: (ref: HTMLElement | null | undefined) => void; onClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; onDisclosureClick?: React.MouseEventHandler; diff --git a/app/menus/CollectionMenu.tsx b/app/menus/CollectionMenu.tsx index d9682d2fa..e5ecb1239 100644 --- a/app/menus/CollectionMenu.tsx +++ b/app/menus/CollectionMenu.tsx @@ -14,7 +14,7 @@ import { import * as React from "react"; import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; -import { useMenuState, MenuButton } from "reakit/Menu"; +import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu"; import { VisuallyHidden } from "reakit/VisuallyHidden"; import getDataTransferFiles from "@shared/utils/getDataTransferFiles"; import Collection from "~/models/Collection"; @@ -37,7 +37,7 @@ type Props = { collection: Collection; placement?: Placement; modal?: boolean; - label?: (arg0: any) => React.ReactNode; + label?: (props: MenuButtonHTMLProps) => React.ReactNode; onOpen?: () => void; onClose?: () => void; }; diff --git a/app/menus/DocumentMenu.tsx b/app/menus/DocumentMenu.tsx index d45de9788..20b5964dc 100644 --- a/app/menus/DocumentMenu.tsx +++ b/app/menus/DocumentMenu.tsx @@ -21,7 +21,7 @@ import { import * as React from "react"; import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; -import { useMenuState, MenuButton } from "reakit/Menu"; +import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu"; import { VisuallyHidden } from "reakit/VisuallyHidden"; import styled from "styled-components"; import breakpoint from "styled-components-breakpoint"; @@ -64,7 +64,7 @@ type Props = { modal?: boolean; showToggleEmbeds?: boolean; showPin?: boolean; - label?: (arg0: any) => React.ReactNode; + label?: (props: MenuButtonHTMLProps) => React.ReactNode; onOpen?: () => void; onClose?: () => void; }; diff --git a/app/menus/NewChildDocumentMenu.tsx b/app/menus/NewChildDocumentMenu.tsx index 130895efa..7f7378794 100644 --- a/app/menus/NewChildDocumentMenu.tsx +++ b/app/menus/NewChildDocumentMenu.tsx @@ -1,7 +1,7 @@ import { observer } from "mobx-react"; import * as React from "react"; import { useTranslation, Trans } from "react-i18next"; -import { useMenuState, MenuButton } from "reakit/Menu"; +import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu"; import Document from "~/models/Document"; import ContextMenu from "~/components/ContextMenu"; import Template from "~/components/ContextMenu/Template"; @@ -9,7 +9,7 @@ import useStores from "~/hooks/useStores"; import { newDocumentPath } from "~/utils/routeHelpers"; type Props = { - label?: (arg0: any) => React.ReactNode; + label?: (props: MenuButtonHTMLProps) => React.ReactNode; document: Document; }; diff --git a/app/scenes/Settings/components/FileOperationListItem.tsx b/app/scenes/Settings/components/FileOperationListItem.tsx index 3998b03fd..012143b19 100644 --- a/app/scenes/Settings/components/FileOperationListItem.tsx +++ b/app/scenes/Settings/components/FileOperationListItem.tsx @@ -13,7 +13,7 @@ import FileOperationMenu from "~/menus/FileOperationMenu"; type Props = { fileOperation: FileOperation; - handleDelete?: (arg0: FileOperation) => Promise; + handleDelete?: (fileOperation: FileOperation) => Promise; }; const FileOperationListItem = ({ fileOperation, handleDelete }: Props) => { diff --git a/app/stores/BaseStore.ts b/app/stores/BaseStore.ts index 6d4cfbc79..dd39c8424 100644 --- a/app/stores/BaseStore.ts +++ b/app/stores/BaseStore.ts @@ -29,7 +29,7 @@ export const DEFAULT_PAGINATION_LIMIT = 25; export const PAGINATION_SYMBOL = Symbol.for("pagination"); -export default class BaseStore { +export default abstract class BaseStore { @observable data: Map = new Map(); diff --git a/app/utils/language.ts b/app/utils/language.ts index 44e2e6fcf..de9bcc942 100644 --- a/app/utils/language.ts +++ b/app/utils/language.ts @@ -1,3 +1,5 @@ +import { i18n } from "i18next"; + export function detectLanguage() { const [ln, r] = navigator.language.split("-"); const region = (r || ln).toUpperCase(); @@ -6,7 +8,7 @@ export function detectLanguage() { export function changeLanguage( toLanguageString: string | null | undefined, - i18n: any + i18n: i18n ) { if (toLanguageString && i18n.language !== toLanguageString) { // Languages are stored in en_US format in the database, however the diff --git a/server/logging/logger.ts b/server/logging/logger.ts index 630c3c200..00133aec3 100644 --- a/server/logging/logger.ts +++ b/server/logging/logger.ts @@ -19,7 +19,7 @@ type LogCategory = type Extra = Record; class Logger { - output: any; + output: winston.Logger; constructor() { this.output = winston.createLogger();