rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: update all dependencies (#699)

Browse Source
This commit is contained in:
Mo
2021-10-22 14:47:41 -05:00
committed by GitHub
parent fcc22ffb78
commit 413fe47828
38 changed files with 2767 additions and 4029 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

@@ -11,6 +11,7 @@
"parserOptions": {
"project": "./app/assets/javascripts/tsconfig.json"
},
"ignorePatterns": [".eslintrc.js", "webpack.*.js"],
"rules": {
"standard/no-callback-literal": 0, // Disable this as we have too many callbacks relying on literals
"no-throw-literal": 0,

14
app/assets/javascripts/components/AccountMenu/Authentication.tsx
View File

@@ -45,7 +45,7 @@ const Authentication = observer(({ application, appState }: Props) => {
useEffect(() => {
if (isEmailFocused) {
emailInputRef.current.focus();
emailInputRef.current!.focus();
setIsEmailFocused(false);
}
}, [isEmailFocused]);
@@ -64,9 +64,9 @@ const Authentication = observer(({ application, appState }: Props) => {
application.setCustomHost(value);
};
const emailInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>();
const passwordConfirmationInputRef = useRef<HTMLInputElement>();
const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(null);
const passwordConfirmationInputRef = useRef<HTMLInputElement>(null);
const handleSignInClick = () => {
setShowSignIn(true);
@@ -79,8 +79,8 @@ const Authentication = observer(({ application, appState }: Props) => {
};
const blurAuthFields = () => {
emailInputRef.current.blur();
passwordInputRef.current.blur();
emailInputRef.current!.blur();
passwordInputRef.current!.blur();
passwordConfirmationInputRef.current?.blur();
};
@@ -277,7 +277,7 @@ const Authentication = observer(({ application, appState }: Props) => {
onKeyDown={handleKeyPressKeyDown}
value={passwordConfirmation}
onChange={handlePasswordConfirmationChange}
ref={passwordConfirmationInputRef}
ref={passwordConfirmationInputRef!}
/>
)}
<div className="sk-panel-row" />

6
app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
View File

@@ -29,7 +29,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
const [isEphemeral, setIsEphemeral] = useState(false);
const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
const passwordInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
passwordInputRef?.current?.focus();
@@ -59,7 +59,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
e.preventDefault();
if (!password) {
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
return;
}
@@ -89,7 +89,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
.alert(STRING_NON_MATCHING_PASSWORDS)
.finally(() => {
setConfirmPassword('');
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
});
}
};

10
app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
View File

@@ -31,12 +31,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
}) => {
const [showPassword, setShowPassword] = useState(false);
const emailInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>();
const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (emailInputRef.current) {
emailInputRef.current.focus();
emailInputRef.current!.focus();
}
}, []);
@@ -62,12 +62,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
e.preventDefault();
if (!email || email.length === 0) {
emailInputRef?.current.focus();
emailInputRef?.current!.focus();
return;
}
if (!password || password.length === 0) {
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
return;
}

2
app/assets/javascripts/components/AccountMenu/DataBackup.tsx
View File

@@ -24,7 +24,7 @@ const DataBackup = observer(({
appState
}: Props) => {
const fileInputRef = useRef<HTMLInputElement | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const [isImportDataLoading, setIsImportDataLoading] = useState(false);
const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu;

4
app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx
View File

@@ -30,7 +30,7 @@ const PasscodeLock = observer(({
const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
const passcodeInputRef = useRef<HTMLInputElement>();
const passcodeInputRef = useRef<HTMLInputElement>(null);
const [passcode, setPasscode] = useState<string | undefined>(undefined);
const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
@@ -155,7 +155,7 @@ const PasscodeLock = observer(({
useEffect(() => {
if (isPasscodeFocused) {
passcodeInputRef.current.focus();
passcodeInputRef.current!.focus();
setIsPasscodeFocused(false);
}
}, [isPasscodeFocused]);

16
app/assets/javascripts/components/AccountMenu/SignIn.tsx
View File

@@ -29,12 +29,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
const [showPassword, setShowPassword] = useState(false);
const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
const emailInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>();
const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (emailInputRef?.current) {
emailInputRef.current.focus();
emailInputRef.current!.focus();
}
}, []);
@@ -73,8 +73,8 @@ export const SignInPane: FunctionComponent<Props> = observer(
const signIn = () => {
setIsSigningIn(true);
emailInputRef?.current.blur();
passwordInputRef?.current.blur();
emailInputRef?.current!.blur();
passwordInputRef?.current!.blur();
application
.signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
@@ -92,7 +92,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
application.alertService.alert(err);
}
setPassword('');
passwordInputRef?.current.blur();
passwordInputRef?.current!.blur();
})
.finally(() => {
setIsSigningIn(false);
@@ -109,12 +109,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
e.preventDefault();
if (!email || email.length === 0) {
emailInputRef?.current.focus();
emailInputRef?.current!.focus();
return;
}
if (!password || password.length === 0) {
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
return;
}

4
app/assets/javascripts/components/AutocompleteTagHint.tsx
View File

@@ -12,7 +12,7 @@ export const AutocompleteTagHint = observer(
({ appState, closeOnBlur }: Props) => {
const { autocompleteTagHintFocused } = appState.noteTags;
const hintRef = useRef<HTMLButtonElement>();
const hintRef = useRef<HTMLButtonElement>(null);
const { autocompleteSearchQuery, autocompleteTagResults } =
appState.noteTags;
@@ -45,7 +45,7 @@ export const AutocompleteTagHint = observer(
useEffect(() => {
if (autocompleteTagHintFocused) {
hintRef.current.focus();
hintRef.current!.focus();
}
}, [appState.noteTags, autocompleteTagHintFocused]);

10
app/assets/javascripts/components/AutocompleteTagInput.tsx
View File

@@ -25,17 +25,17 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
const [dropdownMaxHeight, setDropdownMaxHeight] =
useState<number | 'auto'>('auto');
const containerRef = useRef<HTMLDivElement>();
const inputRef = useRef<HTMLInputElement>();
const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
const [closeOnBlur] = useCloseOnBlur(containerRef as any, (visible: boolean) => {
setDropdownVisible(visible);
appState.noteTags.clearAutocompleteSearch();
});
const showDropdown = () => {
const { clientHeight } = document.documentElement;
const inputRect = inputRef.current.getBoundingClientRect();
const inputRect = inputRef.current!.getBoundingClientRect();
setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
setDropdownVisible(true);
};
@@ -93,7 +93,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
useEffect(() => {
if (autocompleteInputFocused) {
inputRef.current.focus();
inputRef.current!.focus();
}
}, [appState.noteTags, autocompleteInputFocused]);

4
app/assets/javascripts/components/AutocompleteTagResult.tsx
View File

@@ -19,7 +19,7 @@ export const AutocompleteTagResult = observer(
focusedTagResultUuid,
} = appState.noteTags;
const tagResultRef = useRef<HTMLButtonElement>();
const tagResultRef = useRef<HTMLButtonElement>(null);
const onTagOptionClick = async (tag: SNTag) => {
await appState.noteTags.addTagToActiveNote(tag);
@@ -68,7 +68,7 @@ export const AutocompleteTagResult = observer(
useEffect(() => {
if (focusedTagResultUuid === tagResult.uuid) {
tagResultRef.current.focus();
tagResultRef.current!.focus();
appState.noteTags.setFocusedTagResultUuid(undefined);
}
}, [appState.noteTags, focusedTagResultUuid, tagResult]);

2
app/assets/javascripts/components/ConfirmSignoutModal.tsx
View File

@@ -25,7 +25,7 @@ export const ConfirmSignoutContainer = observer((props: Props) => {
const ConfirmSignoutModal = observer(({ application, appState }: Props) => {
const [deleteLocalBackups, setDeleteLocalBackups] = useState(false);
const cancelRef = useRef<HTMLButtonElement>();
const cancelRef = useRef<HTMLButtonElement>(null);
function closeDialog() {
appState.accountMenu.setSigningOut(false);
}

2
app/assets/javascripts/components/ConfirmationDialog.tsx
View File

@@ -9,7 +9,7 @@ import { useRef } from 'preact/hooks';
export const ConfirmationDialog: FunctionComponent<{
title: string | ComponentChildren;
}> = ({ title, children }) => {
const ldRef = useRef<HTMLButtonElement>();
const ldRef = useRef<HTMLButtonElement>(null);
return (
<AlertDialog leastDestructiveRef={ldRef}>

2
app/assets/javascripts/components/FloatingLabelInput.tsx
View File

@@ -29,7 +29,7 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
className = '',
labelClassName = '',
inputClassName = '',
},
}: Props,
ref: Ref<HTMLInputElement>
) => {
const [focused, setFocused] = useState(false);

2
app/assets/javascripts/components/InputWithIcon.tsx
View File

@@ -42,7 +42,7 @@ export const InputWithIcon: FunctionComponent<Props> = forwardRef(
disabled,
toggle,
placeholder,
},
}: Props,
ref: Ref<HTMLInputElement>
) => {
const handleToggle = () => {

6
app/assets/javascripts/components/NoteTag.tsx
View File

@@ -14,9 +14,9 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
const [showDeleteButton, setShowDeleteButton] = useState(false);
const [tagClicked, setTagClicked] = useState(false);
const deleteTagRef = useRef<HTMLButtonElement>();
const deleteTagRef = useRef<HTMLButtonElement>(null);
const tagRef = useRef<HTMLButtonElement>();
const tagRef = useRef<HTMLButtonElement>(null);
const deleteTag = () => {
appState.noteTags.focusPreviousTag(tag);
@@ -84,7 +84,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
useEffect(() => {
if (focusedTagUuid === tag.uuid) {
tagRef.current.focus();
tagRef.current!.focus();
}
}, [appState.noteTags, focusedTagUuid, tag]);

6
app/assets/javascripts/components/NotesContextMenu.tsx
View File

@@ -17,14 +17,14 @@ const NotesContextMenu = observer(({ application, appState }: Props) => {
contextMenuMaxHeight,
} = appState.notes;
const contextMenuRef = useRef<HTMLDivElement>();
const contextMenuRef = useRef<HTMLDivElement>(null);
const [closeOnBlur] = useCloseOnBlur(
contextMenuRef,
contextMenuRef as any,
(open: boolean) => appState.notes.setContextMenuOpen(open)
);
useCloseOnClickOutside(
contextMenuRef,
contextMenuRef as any,
(open: boolean) => appState.notes.setContextMenuOpen(open)
);

6
app/assets/javascripts/components/NotesOptions.tsx
View File

@@ -151,7 +151,7 @@ export const NotesOptions = observer(
const pinned = notes.some((note) => note.pinned);
const unpinned = notes.some((note) => !note.pinned);
const tagsButtonRef = useRef<HTMLButtonElement>();
const tagsButtonRef = useRef<HTMLButtonElement>(null);
const iconClass = 'color-neutral mr-2';
@@ -183,7 +183,7 @@ export const NotesOptions = observer(
).fontSize;
const maxTagsMenuSize = parseFloat(defaultFontSize) * 30;
const { clientWidth, clientHeight } = document.documentElement;
const buttonRect = tagsButtonRef.current.getBoundingClientRect();
const buttonRect = tagsButtonRef.current!.getBoundingClientRect();
const footerHeight = 32;
if (buttonRect.top + maxTagsMenuSize > clientHeight - footerHeight) {
@@ -289,7 +289,7 @@ export const NotesOptions = observer(
onKeyDown={(event) => {
if (event.key === 'Escape') {
setTagsMenuOpen(false);
tagsButtonRef.current.focus();
tagsButtonRef.current!.focus();
}
}}
style={{

10
app/assets/javascripts/components/NotesOptionsPanel.tsx
View File

@@ -24,9 +24,9 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
right: 0,
});
const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto');
const buttonRef = useRef<HTMLButtonElement>();
const panelRef = useRef<HTMLDivElement>();
const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen);
const buttonRef = useRef<HTMLButtonElement>(null);
const panelRef = useRef<HTMLDivElement>(null);
const [closeOnBlur] = useCloseOnBlur(panelRef as any, setOpen);
const [submenuOpen, setSubmenuOpen] = useState(false);
const onSubmenuChange = (open: boolean) => {
@@ -37,7 +37,7 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
<Disclosure
open={open}
onChange={() => {
const rect = buttonRef.current.getBoundingClientRect();
const rect = buttonRef.current!.getBoundingClientRect();
const { clientHeight } = document.documentElement;
const footerHeight = 32;
setMaxHeight(clientHeight - rect.bottom - footerHeight - 2);
@@ -65,7 +65,7 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
onKeyDown={(event) => {
if (event.key === 'Escape' && !submenuOpen) {
setOpen(false);
buttonRef.current.focus();
buttonRef.current!.focus();
}
}}
ref={panelRef}

2
app/assets/javascripts/components/OtherSessionsSignOut.tsx
View File

@@ -23,7 +23,7 @@ export const OtherSessionsSignOutContainer = observer((props: Props) => {
const ConfirmOtherSessionsSignOut = observer(
({ application, appState }: Props) => {
const cancelRef = useRef<HTMLButtonElement>();
const cancelRef = useRef<HTMLButtonElement>(null);
function closeDialog() {
appState.accountMenu.setOtherSessionsSignOut(false);
}

26
app/assets/javascripts/components/QuickSettingsMenu.tsx
View File

@@ -79,11 +79,11 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const [themesMenuPosition, setThemesMenuPosition] = useState({});
const [defaultThemeOn, setDefaultThemeOn] = useState(false);
const themesMenuRef = useRef<HTMLDivElement>();
const themesButtonRef = useRef<HTMLButtonElement>();
const prefsButtonRef = useRef<HTMLButtonElement>();
const quickSettingsMenuRef = useRef<HTMLDivElement>();
const defaultThemeButtonRef = useRef<HTMLButtonElement>();
const themesMenuRef = useRef<HTMLDivElement>(null);
const themesButtonRef = useRef<HTMLButtonElement>(null);
const prefsButtonRef = useRef<HTMLButtonElement>(null);
const quickSettingsMenuRef = useRef<HTMLDivElement>(null);
const defaultThemeButtonRef = useRef<HTMLButtonElement>(null);
const reloadThemes = useCallback(() => {
application.streamItems(ContentType.Theme, () => {
@@ -119,20 +119,20 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
useEffect(() => {
if (themesMenuOpen) {
defaultThemeButtonRef.current.focus();
defaultThemeButtonRef.current!.focus();
}
}, [themesMenuOpen]);
useEffect(() => {
prefsButtonRef.current.focus();
prefsButtonRef.current!.focus();
}, []);
const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);
const [closeOnBlur] = useCloseOnBlur(themesMenuRef as any, setThemesMenuOpen);
const toggleThemesMenu = () => {
if (!themesMenuOpen) {
const themesButtonRect =
themesButtonRef.current.getBoundingClientRect();
themesButtonRef.current!.getBoundingClientRect();
setThemesMenuPosition({
left: themesButtonRect.right,
bottom:
@@ -155,7 +155,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
switch (event.key) {
case 'Escape':
setThemesMenuOpen(false);
themesButtonRef.current.focus();
themesButtonRef.current!.focus();
break;
case 'ArrowRight':
if (!themesMenuOpen) {
@@ -167,7 +167,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> =
(event) => {
const items: NodeListOf<HTMLButtonElement> =
quickSettingsMenuRef.current.querySelectorAll(':scope > button');
quickSettingsMenuRef.current!.querySelectorAll(':scope > button');
const currentFocusedIndex = Array.from(items).findIndex(
(btn) => btn === document.activeElement
);
@@ -198,7 +198,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
event
) => {
const themes = themesMenuRef.current.querySelectorAll('button');
const themes = themesMenuRef.current!.querySelectorAll('button');
const currentFocusedIndex = Array.from(themes).findIndex(
(themeBtn) => themeBtn === document.activeElement
);
@@ -208,7 +208,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
case 'ArrowLeft':
event.stopPropagation();
setThemesMenuOpen(false);
themesButtonRef.current.focus();
themesButtonRef.current!.focus();
break;
case 'ArrowDown':
if (themes[currentFocusedIndex + 1]) {

8
app/assets/javascripts/components/SearchOptions.tsx
View File

@@ -33,9 +33,9 @@ const SearchOptions = observer(({ appState }: Props) => {
right: 0,
});
const [maxWidth, setMaxWidth] = useState<number | 'auto'>('auto');
const buttonRef = useRef<HTMLButtonElement>();
const panelRef = useRef<HTMLDivElement>();
const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen);
const buttonRef = useRef<HTMLButtonElement>(null);
const panelRef = useRef<HTMLDivElement>(null);
const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef as any, setOpen);
async function toggleIncludeProtectedContents() {
setLockCloseOnBlur(true);
@@ -47,7 +47,7 @@ const SearchOptions = observer(({ appState }: Props) => {
}
const updateWidthAndPosition = () => {
const rect = buttonRef.current.getBoundingClientRect();
const rect = buttonRef.current!.getBoundingClientRect();
setMaxWidth(rect.right - 16);
setPosition({
top: rect.bottom,

2
app/assets/javascripts/components/SessionsModal.tsx
View File

@@ -109,7 +109,7 @@ const SessionsModal: FunctionComponent<{
const [confirmRevokingSessionUuid, setRevokingSessionUuid] = useState('');
const closeRevokeSessionAlert = () => setRevokingSessionUuid('');
const cancelRevokeRef = useRef<HTMLButtonElement>();
const cancelRevokeRef = useRef<HTMLButtonElement>(null);
const formatter = useMemo(
() =>

12
app/assets/javascripts/components/menu/Menu.tsx
View File

@@ -22,7 +22,7 @@ type MenuProps = {
export const Menu: FunctionComponent<MenuProps> = forwardRef(
(
{ children, className = '', style, a11yLabel, closeMenu },
{ children, className = '', style, a11yLabel, closeMenu }: MenuProps,
ref: Ref<HTMLMenuElement>
) => {
const [currentIndex, setCurrentIndex] = useState(0);
@@ -37,12 +37,12 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
break;
case 'End':
setCurrentIndex(
menuItemRefs.current.length ? menuItemRefs.current.length - 1 : 0
menuItemRefs.current!.length ? menuItemRefs.current!.length - 1 : 0
);
break;
case 'ArrowDown':
setCurrentIndex((index) => {
if (index + 1 < menuItemRefs.current.length) {
if (index + 1 < menuItemRefs.current!.length) {
return index + 1;
} else {
return 0;
@@ -54,7 +54,7 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
if (index - 1 > -1) {
return index - 1;
} else {
return menuItemRefs.current.length - 1;
return menuItemRefs.current!.length - 1;
}
});
break;
@@ -75,9 +75,9 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
Array.from(instance.children).forEach((child) => {
if (
child.getAttribute('role')?.includes('menuitem') &&
!menuItemRefs.current.includes(child as HTMLButtonElement)
!menuItemRefs.current!.includes(child as HTMLButtonElement)
) {
menuItemRefs.current.push(child as HTMLButtonElement);
menuItemRefs.current!.push(child as HTMLButtonElement);
}
});
}

4
app/assets/javascripts/components/menu/MenuItem.tsx
View File

@@ -39,7 +39,7 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
icon,
iconClassName,
tabIndex,
},
}: MenuItemProps,
ref: Ref<HTMLButtonElement>
) => {
return type === MenuItemType.SwitchButton &&
@@ -90,7 +90,7 @@ type ListElementProps = {
};
export const MenuItemListElement: FunctionComponent<ListElementProps> =
forwardRef(({ children, isFirstMenuItem }, ref: Ref<HTMLLIElement>) => {
forwardRef(({ children, isFirstMenuItem }: ListElementProps, ref: Ref<HTMLLIElement>) => {
const child = children as VNode<unknown>;
return (

2
app/assets/javascripts/components/shared/ModalDialog.tsx
View File

@@ -8,7 +8,7 @@ import { useRef } from '@node_modules/preact/hooks';
import { IconButton } from '@/components/IconButton';
export const ModalDialog: FunctionComponent = ({ children }) => {
const ldRef = useRef<HTMLButtonElement>();
const ldRef = useRef<HTMLButtonElement>(null);
return (
<AlertDialog leastDestructiveRef={ldRef}>

2
app/assets/javascripts/components/utils.ts
View File

@@ -8,7 +8,7 @@ import { useEffect } from 'react';
* monitored.
*/
export function useCloseOnBlur(
container: { current: HTMLDivElement },
container: { current?: HTMLDivElement },
setOpen: (open: boolean) => void
): [
(event: { relatedTarget: EventTarget | null }) => void,

2
app/assets/javascripts/preferences/panes/Extensions.tsx
View File

@@ -48,7 +48,7 @@ export const Extensions: FunctionComponent<{
useEffect(() => {
if (confirmableExtension) {
confirmableEnd.current.scrollIntoView({ behavior: 'smooth' });
confirmableEnd.current!.scrollIntoView({ behavior: 'smooth' });
}
}, [confirmableExtension, confirmableEnd]);

2
app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
View File

@@ -47,7 +47,7 @@ const RenameExtension: FunctionComponent<{
useEffect(() => {
if (isRenaming) {
inputRef.current.focus();
inputRef.current!.focus();
}
}, [inputRef, isRenaming]);

2
app/assets/javascripts/preferences/panes/security-segments/DataBackups.tsx
View File

@@ -26,7 +26,7 @@ export const DataBackups = observer(({
appState
}: Props) => {
const fileInputRef = useRef<HTMLInputElement | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const [isImportDataLoading, setIsImportDataLoading] = useState(false);
const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu;

4
app/assets/javascripts/preferences/panes/security-segments/PasscodeLock.tsx
View File

@@ -32,7 +32,7 @@ export const PasscodeLock = observer(({
const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
const passcodeInputRef = useRef<HTMLInputElement>();
const passcodeInputRef = useRef<HTMLInputElement>(null);
const [passcode, setPasscode] = useState<string | undefined>(undefined);
const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
@@ -157,7 +157,7 @@ export const PasscodeLock = observer(({
useEffect(() => {
if (isPasscodeFocused) {
passcodeInputRef.current.focus();
passcodeInputRef.current!.focus();
setIsPasscodeFocused(false);
}
}, [isPasscodeFocused]);

18
app/assets/javascripts/purchaseFlow/panes/CreateAccount.tsx
View File

@@ -28,12 +28,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
const [isEmailInvalid, setIsEmailInvalid] = useState(false);
const [isPasswordNotMatching, setIsPasswordNotMatching] = useState(false);
const emailInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>();
const confirmPasswordInputRef = useRef<HTMLInputElement>();
const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(null);
const confirmPasswordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (emailInputRef.current) emailInputRef.current.focus();
if (emailInputRef.current) emailInputRef.current!.focus();
}, []);
const handleEmailChange = (e: Event) => {
@@ -62,30 +62,30 @@ export const CreateAccount: FunctionComponent<Props> = observer(
const handleCreateAccount = async () => {
if (!email) {
emailInputRef?.current.focus();
emailInputRef?.current!.focus();
return;
}
if (!isEmailValid(email)) {
setIsEmailInvalid(true);
emailInputRef?.current.focus();
emailInputRef?.current!.focus();
return;
}
if (!password) {
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
return;
}
if (!confirmPassword) {
confirmPasswordInputRef?.current.focus();
confirmPasswordInputRef?.current!.focus();
return;
}
if (password !== confirmPassword) {
setConfirmPassword('');
setIsPasswordNotMatching(true);
confirmPasswordInputRef?.current.focus();
confirmPasswordInputRef?.current!.focus();
return;
}

12
app/assets/javascripts/purchaseFlow/panes/SignIn.tsx
View File

@@ -27,11 +27,11 @@ export const SignIn: FunctionComponent<Props> = observer(
const [isPasswordInvalid, setIsPasswordInvalid] = useState(false);
const [otherErrorMessage, setOtherErrorMessage] = useState('');
const emailInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>();
const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (emailInputRef.current) emailInputRef.current.focus();
if (emailInputRef.current) emailInputRef.current!.focus();
}, []);
const handleEmailChange = (e: Event) => {
@@ -56,18 +56,18 @@ export const SignIn: FunctionComponent<Props> = observer(
const handleSignIn = async () => {
if (!email) {
emailInputRef?.current.focus();
emailInputRef?.current!.focus();
return;
}
if (!isEmailValid(email)) {
setIsEmailInvalid(true);
emailInputRef?.current.focus();
emailInputRef?.current!.focus();
return;
}
if (!password) {
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
return;
}

2
app/assets/javascripts/views/challenge_modal/challenge_modal.tsx
View File

@@ -244,7 +244,7 @@ export class ChallengeModal extends WebDirective {
}
function ChallengeModalView({ ctrl }: { ctrl: ChallengeModalCtrl }) {
const initialFocusRef = useRef<HTMLInputElement>();
const initialFocusRef = useRef<HTMLInputElement>(null);
return (
<Dialog
initialFocusRef={initialFocusRef}

82
package.json
View File

@@ -19,63 +19,63 @@
"tsc": "tsc --project app/assets/javascripts/tsconfig.json"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/plugin-transform-react-jsx": "^7.12.16",
"@babel/preset-env": "^7.12.16",
"@babel/preset-typescript": "^7.12.16",
"@reach/disclosure": "^0.14.0",
"@reach/visually-hidden": "^0.14.0",
"@babel/core": "^7.15.8",
"@babel/plugin-transform-react-jsx": "^7.14.9",
"@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.15.0",
"@reach/disclosure": "^0.16.2",
"@reach/visually-hidden": "^0.16.0",
"@svgr/webpack": "^5.5.0",
"@types/angular": "^1.8.0",
"@types/lodash": "^4.14.168",
"@types/pug": "^2.0.4",
"@types/react": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^4.14.0",
"@typescript-eslint/parser": "^4.14.0",
"@types/angular": "^1.8.3",
"@types/lodash": "^4.14.176",
"@types/pug": "^2.0.5",
"@types/react": "^17.0.31",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"angular": "^1.8.2",
"apply-loader": "^2.0.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-loader": "^8.2.3",
"babel-plugin-angularjs-annotate": "^0.10.0",
"connect": "^3.7.0",
"css-loader": "^3.4.2",
"dotenv": "^8.2.0",
"eslint": "^7.18.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-react": "^7.22.0",
"css-loader": "^6.4.0",
"dotenv": "^10.0.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^4.3.0",
"lodash": "^4.17.20",
"mini-css-extract-plugin": "^0.9.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.4.0",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^2.4.3",
"ng-cache-loader": "0.0.26",
"node-sass": "^4.14.1",
"pug": "^3.0.1",
"node-sass": "^6.0.1",
"pug": "^3.0.2",
"pug-loader": "^2.4.0",
"sass-loader": "^8.0.2",
"sass-loader": "^12.2.0",
"serve-static": "^1.14.1",
"sn-stylekit": "5.2.8",
"ts-loader": "^8.0.17",
"typescript": "4.2.3",
"ts-loader": "^9.2.6",
"typescript": "4.4.4",
"typescript-eslint": "0.0.1-alpha.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.3.1",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"@bugsnag/js": "^7.6.0",
"@reach/alert": "^0.13.0",
"@reach/alert-dialog": "^0.13.0",
"@reach/checkbox": "^0.13.2",
"@reach/dialog": "^0.13.0",
"@reach/listbox": "^0.16.1",
"@bugsnag/js": "^7.13.2",
"@reach/alert": "^0.16.0",
"@reach/alert-dialog": "^0.16.2",
"@reach/checkbox": "^0.16.0",
"@reach/dialog": "^0.16.2",
"@reach/listbox": "^0.16.2",
"@standardnotes/features": "1.7.2",
"@standardnotes/sncrypto-web": "1.5.2",
"@standardnotes/sncrypto-web": "^1.5.3",
"@standardnotes/snjs": "2.16.0",
"mobx": "^6.3.2",
"mobx-react-lite": "^3.2.0",
"preact": "^10.5.12",
"mobx": "^6.3.5",
"mobx-react-lite": "^3.2.1",
"preact": "^10.5.15",
"qrcode.react": "^1.0.1"
}
}

208
webpack.config.js
View File

@@ -3,112 +3,106 @@ const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
require('dotenv').config();
module.exports = (
env = {
platform: 'web',
}
) => ({
entry: './app/assets/javascripts/index.ts',
output: {
filename: './javascripts/app.js',
},
plugins: [
new webpack.DefinePlugin({
__VERSION__: JSON.stringify(require('./package.json').version),
__WEB__: JSON.stringify(env.platform === 'web'),
__DESKTOP__: JSON.stringify(env.platform === 'desktop'),
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
filename: './stylesheets/app.css',
ignoreOrder: true, // Enable to remove warnings about conflicting order
}),
],
resolve: {
extensions: ['.ts', '.tsx', '.js'],
alias: {
'%': path.resolve(__dirname, 'app/assets/templates'),
'@': path.resolve(__dirname, 'app/assets/javascripts'),
'@Controllers': path.resolve(
__dirname,
'app/assets/javascripts/controllers'
),
'@Views': path.resolve(__dirname, 'app/assets/javascripts/views'),
'@Services': path.resolve(__dirname, 'app/assets/javascripts/services'),
'@node_modules': path.resolve(__dirname, 'node_modules'),
react: 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat',
const WebEnv = {
platform: 'web',
};
module.exports = (env) => {
env = Object.assign(env, WebEnv);
return {
entry: './app/assets/javascripts/index.ts',
output: {
filename: './javascripts/app.js',
},
},
module: {
rules: [
{
test: /\.(js|tsx?)$/,
exclude: /(node_modules)/,
use: [
'babel-loader',
{
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
],
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../', // The base assets directory in relation to the stylesheets
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
{
test: /\.html$/,
exclude: [path.resolve(__dirname, 'index.html')],
use: [
{
loader: 'ng-cache-loader',
options: {
prefix: 'templates:**',
},
},
],
},
{
test: /\.pug$/,
use: [
{
loader: 'apply-loader',
},
{
loader: 'pug-loader',
},
],
},
plugins: [
new webpack.DefinePlugin({
__VERSION__: JSON.stringify(require('./package.json').version),
__WEB__: JSON.stringify(env.platform === 'web'),
__DESKTOP__: JSON.stringify(env.platform === 'desktop'),
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
filename: './stylesheets/app.css',
ignoreOrder: true, // Enable to remove warnings about conflicting order
}),
],
},
});
resolve: {
extensions: ['.ts', '.tsx', '.js'],
fallback: {
crypto: false,
path: false,
},
alias: {
'%': path.resolve(__dirname, 'app/assets/templates'),
'@': path.resolve(__dirname, 'app/assets/javascripts'),
'@Controllers': path.resolve(
__dirname,
'app/assets/javascripts/controllers'
),
'@Views': path.resolve(__dirname, 'app/assets/javascripts/views'),
'@Services': path.resolve(__dirname, 'app/assets/javascripts/services'),
'@node_modules': path.resolve(__dirname, 'node_modules'),
react: 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat',
},
},
module: {
rules: [
{
test: /\.(js|tsx?)$/,
exclude: /(node_modules)/,
use: [
'babel-loader',
{
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
],
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../', // The base assets directory in relation to the stylesheets
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
{
test: /\.html$/,
exclude: [path.resolve(__dirname, 'index.html')],
use: [
{
loader: 'ng-cache-loader',
options: {
prefix: 'templates:**',
},
},
],
},
{
test: /\.pug$/,
use: [
{
loader: 'apply-loader',
},
{
loader: 'pug-loader',
},
],
},
],
},
};
};

35
webpack.dev.js
View File

@@ -2,32 +2,33 @@ const { merge } = require('webpack-merge');
const config = require('./webpack.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebEnv = {
platform: 'web',
};
module.exports = (env, argv) => {
const port = argv.port || 3001;
return merge(config(env, argv), {
return merge(config(Object.assign(env, WebEnv), argv), {
mode: 'development',
/** Only create an html file for the dev-server */
plugins: argv.liveReload ? [
optimization: {
minimize: false,
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: true,
templateParameters: {
env: process.env
env: process.env,
},
}),
] : [],
],
devServer: {
proxy: {
'/extensions': {
target: `http://localhost:${port}`,
pathRewrite: { '^/extensions': '/public/extensions' }
},
'/assets': {
target: `http://localhost:${port}`,
pathRewrite: { '^/assets': '/public/assets' }
},
},
hot: 'only',
static: './',
port,
writeToDisk: argv.writeToDisk,
}
devMiddleware: {
writeToDisk: argv.writeToDisk,
},
},
});
};

6
webpack.prod.js
View File

@@ -1,8 +1,12 @@
const { merge } = require('webpack-merge');
const config = require('./webpack.config.js');
const WebEnv = {
platform: 'web',
};
module.exports = (env, argv) => {
return merge(config(env, argv), {
return merge(config(Object.assign(env, WebEnv), argv), {
mode: 'production',
devtool: 'source-map',
});

6258
yarn.lock
View File

File diff suppressed because it is too large Load Diff