@scrabble-solver/scrabble-solver 2.15.21 → 2.15.23

package/src/components/Logo/Logo.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { forwardRef } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { LOGO_SRC } from 'parameters';
 
 interface Props {

package/src/components/NavButtons/NavButtons.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent, memo } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { CardChecklist, Cog, Eraser, Github, KeyboardFill, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectConfig, useTranslate, useTypedSelector } from 'state';

package/src/components/Rack/Rack.tsx

@@ -16,7 +16,7 @@ import {
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { LOCALE_FEATURES } from 'i18n';
 import { createKeyboardNavigation, extractCharacters, extractInputValue, getTileSizes, isCtrl } from 'lib';
 import { rackSlice, selectConfig, selectInputMode, selectLocale, selectRack, useTypedSelector } from 'state';

package/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import {
   type CSSProperties,
   type ChangeEventHandler,
-  type FormEventHandler,
+  type SubmitEventHandler,
   forwardRef,
   useCallback,
   useEffect,
@@ -10,7 +10,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { rackSlice, selectConfig, useTranslate, useTypedSelector } from 'state';
 
 import styles from './InputPrompt.module.scss';
@@ -22,7 +22,7 @@ interface Props {
   value: string;
   onBlur: () => void;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  onSubmit: FormEventHandler<HTMLFormElement>;
+  onSubmit: SubmitEventHandler<HTMLFormElement>;
 }
 
 const InputPromptBase = forwardRef<HTMLFormElement, Props>(
@@ -33,7 +33,7 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
     const config = useTypedSelector(selectConfig);
     const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
 
-    const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
+    const handleSubmit: SubmitEventHandler<HTMLFormElement> = useCallback(
       (event) => {
         event.preventDefault();
         const characters = extractRack(config, value);

package/src/components/Results/Header.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout, useColumns } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useColumns } from 'hooks';
 import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from 'icons';
 import { RESULTS_COLUMN_WIDTH } from 'parameters';
 import { ResultColumnId } from 'types';

package/src/components/Results/Result.tsx

@@ -3,7 +3,8 @@ import { type FocusEventHandler, type MouseEventHandler, type ReactElement, useR
 import Highlighter from 'react-highlight-words';
 import { type RowComponentProps } from 'react-window';
 
-import { useAppLayout, useColumns } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useColumns } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { noop } from 'lib';
 import {

package/src/components/ResultsInput/ResultsInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type ChangeEvent, type FormEventHandler, type FunctionComponent, useState } from 'react';
+import { type ChangeEvent, type FunctionComponent, type SubmitEventHandler, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { isRegExp } from 'lib';
@@ -27,7 +27,7 @@ export const ResultsInput: FunctionComponent<Props> = ({ className }) => {
     }
   };
 
-  const handleSubmit: FormEventHandler = (event) => {
+  const handleSubmit: SubmitEventHandler = (event) => {
     event.preventDefault();
   };
 

package/src/components/Solver/Solver.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import { type FunctionComponent, memo, type SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout, useIsTouchDevice } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useIsTouchDevice } from 'hooks';
 import {
   resultsSlice,
   selectAreResultsOutdated,

package/src/components/Tile/Tile.tsx

@@ -13,7 +13,7 @@ import {
   useRef,
 } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { getTileSizes, noop } from 'lib';
 import { selectLocale, useTypedSelector } from 'state';
 

package/src/hooks/index.ts

@@ -1,4 +1,3 @@
-export { useAppLayout } from './useAppLayout';
 export { useColumns } from './useColumns';
 export { useDirection } from './useDirection';
 export { useEffectOnce } from './useEffectOnce';

package/src/lib/isMac.ts

@@ -3,6 +3,5 @@ export const isMac = (): boolean => {
     return false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
   return globalThis.navigator.platform.startsWith('Mac') || globalThis.navigator.platform === 'iPhone';
 };

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,8 +2,8 @@ import { type Result } from '@scrabble-solver/types';
 import { type FunctionComponent, memo, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { useAppLayout } from 'app-layout';
 import { Button, Dictionary, Modal, Results } from 'components';
-import { useAppLayout } from 'hooks';
 import { Check, EyeFill } from 'icons';
 import { resultsSlice, selectProcessedResults, selectResultCandidate, useTranslate, useTypedSelector } from 'state';
 

package/src/pages/_app.tsx

@@ -4,6 +4,7 @@ import Head from 'next/head';
 import { type FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
+import { AppLayoutProvider } from 'app-layout';
 import { SeoMessage } from 'components';
 import { store } from 'state';
 
@@ -77,11 +78,13 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
     </Head>
 
     <Provider store={store}>
-      <SeoMessage />
+      <AppLayoutProvider>
+        <SeoMessage />
 
-      <FloatingDelayGroup delay={0}>
-        <Component {...pageProps} />
-      </FloatingDelayGroup>
+        <FloatingDelayGroup delay={0}>
+          <Component {...pageProps} />
+        </FloatingDelayGroup>
+      </AppLayoutProvider>
     </Provider>
   </>
 );

package/src/pages/index.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable max-statements */
+
 import { isObject } from '@scrabble-solver/types';
 import fs from 'fs';
 import path from 'path';
-import { type FunctionComponent, useState } from 'react';
+import { type FunctionComponent, useCallback, useState } from 'react';
 import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
 
@@ -45,9 +47,26 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     words: false,
   });
 
-  const patchModals = (patch: Partial<Record<Modal, boolean>>) => {
+  const patchModals = useCallback((patch: Partial<Record<Modal, boolean>>) => {
     setModals((current) => ({ ...current, ...patch }));
-  };
+  }, []);
+
+  const handleClear = useCallback(() => dispatch(reset()), [dispatch]);
+
+  const handleShowDictionary = useCallback(() => patchModals({ dictionary: true }), [patchModals]);
+  const handleShowKeyMap = useCallback(() => patchModals({ keyMap: true }), [patchModals]);
+  const handleShowMenu = useCallback(() => patchModals({ menu: true }), [patchModals]);
+  const handleShowRemainingTiles = useCallback(() => patchModals({ remainingTiles: true }), [patchModals]);
+  const handleShowResults = useCallback(() => patchModals({ results: true }), [patchModals]);
+  const handleShowSettings = useCallback(() => patchModals({ settings: true }), [patchModals]);
+  const handleShowWords = useCallback(() => patchModals({ words: true }), [patchModals]);
+  const handleCloseDictionary = useCallback(() => patchModals({ dictionary: false }), [patchModals]);
+  const handleCloseKeyMap = useCallback(() => patchModals({ keyMap: false }), [patchModals]);
+  const handleCloseMenu = useCallback(() => patchModals({ menu: false }), [patchModals]);
+  const handleCloseRemainingTiles = useCallback(() => patchModals({ remainingTiles: false }), [patchModals]);
+  const handleCloseResults = useCallback(() => patchModals({ results: false }), [patchModals]);
+  const handleCloseSettings = useCallback(() => patchModals({ settings: false }), [patchModals]);
+  const handleCloseWords = useCallback(() => patchModals({ words: false }), [patchModals]);
 
   useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
@@ -78,40 +97,42 @@ const Index: FunctionComponent<Props> = ({ version }) => {
           </div>
 
           <NavButtons
-            onClear={() => dispatch(reset())}
-            onShowKeyMap={() => patchModals({ keyMap: true })}
-            onShowMenu={() => patchModals({ menu: true })}
-            onShowRemainingTiles={() => patchModals({ remainingTiles: true })}
-            onShowSettings={() => patchModals({ settings: true })}
-            onShowWords={() => patchModals({ words: true })}
+            onClear={handleClear}
+            onShowKeyMap={handleShowKeyMap}
+            onShowMenu={handleShowMenu}
+            onShowRemainingTiles={handleShowRemainingTiles}
+            onShowSettings={handleShowSettings}
+            onShowWords={handleShowWords}
           />
         </div>
       </nav>
 
-      <Solver className={styles.solver} onShowResults={() => patchModals({ results: true })} />
+      <main>
+        <Solver className={styles.solver} onShowResults={handleShowResults} />
+      </main>
 
       <MenuModal
         isOpen={modals.menu}
-        onClose={() => patchModals({ menu: false })}
-        onShowDictionary={() => patchModals({ dictionary: true })}
-        onShowRemainingTiles={() => patchModals({ remainingTiles: true })}
-        onShowSettings={() => patchModals({ settings: true })}
-        onShowWords={() => patchModals({ words: true })}
+        onClose={handleCloseMenu}
+        onShowDictionary={handleShowDictionary}
+        onShowRemainingTiles={handleShowRemainingTiles}
+        onShowSettings={handleShowSettings}
+        onShowWords={handleShowWords}
       />
 
-      <SettingsModal isOpen={modals.settings} onClose={() => patchModals({ settings: false })} />
+      <SettingsModal isOpen={modals.settings} onClose={handleCloseSettings} />
 
-      <KeyMapModal isOpen={modals.keyMap} onClose={() => patchModals({ keyMap: false })} />
+      <KeyMapModal isOpen={modals.keyMap} onClose={handleCloseKeyMap} />
 
-      <WordsModal isOpen={modals.words} onClose={() => patchModals({ words: false })} />
+      <WordsModal isOpen={modals.words} onClose={handleCloseWords} />
 
       {config.supportsRemainingTiles && (
-        <RemainingTilesModal isOpen={modals.remainingTiles} onClose={() => patchModals({ remainingTiles: false })} />
+        <RemainingTilesModal isOpen={modals.remainingTiles} onClose={handleCloseRemainingTiles} />
       )}
 
-      <ResultsModal isOpen={modals.results} onClose={() => patchModals({ results: false })} />
+      <ResultsModal isOpen={modals.results} onClose={handleCloseResults} />
 
-      <DictionaryModal isOpen={modals.dictionary} onClose={() => patchModals({ dictionary: false })} />
+      <DictionaryModal isOpen={modals.dictionary} onClose={handleCloseDictionary} />
     </>
   );
 };

package/tsconfig.json

@@ -11,6 +11,7 @@
     "noEmit": true,
     "paths": {
       "api": ["./src/api"],
+      "app-layout": ["./src/app-layout"],
       "components": ["./src/components"],
       "hooks": ["./src/hooks"],
       "icons": ["./src/icons"],
@@ -28,10 +29,10 @@
     "resolveJsonModule": true,
     "rootDir": "./src",
     "skipLibCheck": true,
-    "typeRoots": ["./node_modules/@types", "./src/@types"],
+    "typeRoots": ["./node_modules/@types", "../../node_modules/@types", "./src/@types"],
     "incremental": true
   },
-  "exclude": [ "node_modules", "**/*.test.ts"],
+  "exclude": ["node_modules", "**/*.test.ts"],
   "files": ["./src/@types/scss.d.ts", "./src/@types/svg.d.ts"],
   "include": ["next-env.d.ts", "./src"]
 }