@scrabble-solver/scrabble-solver 2.11.0 → 2.11.1

package/src/components/Results/Results.module.scss

@@ -9,6 +9,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   height: 100%;
   background: var(--color--background--element);
   border: var(--border);
+  border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--title);
 }
@@ -29,6 +30,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .list {
+  @include scrollbars;
+
+  scrollbar-gutter: stable;
   transition: var(--transition);
 
   &.outdated {
@@ -44,6 +48,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   justify-content: space-between;
   font-weight: 700;
   border-bottom: var(--border);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
 .headerButton {
@@ -60,6 +66,26 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     background-color: var(--color--primary);
     color: var(--color--primary--opposite);
   }
+
+  &:first-child {
+    [dir='ltr'] & {
+      border-top-left-radius: inherit;
+    }
+
+    [dir='rtl'] & {
+      border-top-right-radius: inherit;
+    }
+  }
+
+  &:last-child {
+    [dir='ltr'] & {
+      border-top-right-radius: inherit;
+    }
+
+    [dir='rtl'] & {
+      border-top-left-radius: inherit;
+    }
+  }
 }
 
 .headerButtonLabel {
@@ -175,4 +201,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
 .input {
   border-top: var(--border);
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
 }

package/src/components/ResultsInput/ResultsInput.module.scss

@@ -8,4 +8,5 @@
   @include text-input;
 
   border: none;
+  border-radius: inherit;
 }

package/src/components/Solver/Solver.module.scss

@@ -70,16 +70,21 @@
   flex-direction: column;
   background-color: var(--color--background--element);
   border: var(--border);
+  border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
 }
 
 .dictionary {
   flex: 1;
   border-bottom: var(--border);
+  border-top-left-radius: var(--border--radius);
+  border-top-right-radius: var(--border--radius);
 }
 
 .dictionaryInput {
   flex: 0 0 auto;
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
 }
 
 .bottomContainer {
@@ -97,10 +102,6 @@
   min-width: 0;
 }
 
-.rack {
-  border: var(--border);
-}
-
 .controls {
   width: 100%;
 }

package/src/components/Solver/Solver.tsx

@@ -19,13 +19,14 @@ import {
   useTypedSelector,
 } from 'state';
 
+import Alert from '../Alert';
 import Board from '../Board';
 import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
 
-import { EmptyState, FloatingSolveButton, ResultCandidatePicker } from './components';
+import { FloatingSolveButton, ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -111,7 +112,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
     <div className={classNames(styles.solver, className)}>
       <div className={styles.container}>
         <div className={styles.content}>
-          <form id="a" className={styles.boardContainer} onSubmit={handleSubmit}>
+          <form className={styles.boardContainer} onSubmit={handleSubmit}>
             <Board cellSize={cellSizeSafe} className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
@@ -129,7 +130,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
       <div className={styles.bottomContainer} ref={bottomContainerRef}>
         <div className={styles.bottomContent}>
-          <form id="b" onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
@@ -139,15 +140,15 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
               <ResultCandidatePicker onResultClick={onShowResults} />
 
               {error && (
-                <EmptyState className={styles.emptyState} variant="error">
+                <Alert className={styles.emptyState} variant="error">
                   {error.message}
-                </EmptyState>
+                </Alert>
               )}
 
               {allResults && allResults.length === 0 && !isOutdated && (
-                <EmptyState className={styles.emptyState} variant="warning">
+                <Alert className={styles.emptyState} variant="warning">
                   {translate('results.empty-state.no-results')}
-                </EmptyState>
+                </Alert>
               )}
             </div>
           )}

package/src/components/Solver/components/index.ts

@@ -1,4 +1,3 @@
-export { default as EmptyState } from './EmptyState';
 export { default as FloatingSolveButton } from './FloatingSolveButton';
 export { default as InsertButton } from './InsertButton';
 export { default as ResultCandidatePicker } from './ResultCandidatePicker';

package/src/components/Tile/Tile.module.scss

@@ -5,6 +5,7 @@
 
   position: relative;
   transition: var(--transition);
+  border-radius: var(--border--radius);
 
   &.points1 {
     --background-color: var(--color--yellow);
@@ -85,6 +86,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--background-color);
+  border-radius: inherit;
   transition: var(--transition);
   pointer-events: none;
   user-select: none;
@@ -94,10 +96,18 @@
   }
 
   .raised & {
-    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
+    --shadow--size: 2px;
+    --shadow--blur: 2px;
+    --shadow--spread: -1px;
+    --shadow--color: rgba(34, 34, 34, 0.8);
+
+    box-shadow: inset calc(-1 * var(--shadow--size)) calc(-1 * var(--shadow--size)) var(--shadow--blur)
+      var(--shadow--spread) var(--shadow--color);
 
     @include media('<xs') {
-      box-shadow: inset -2px -2px 1px -1px rgba(34, 34, 34, 0.8);
+      --shadow--size: 1px;
+      --shadow--spread: 0;
+      --shadow--blur: 1px;
     }
   }
 }
@@ -146,10 +156,12 @@
   [dir='ltr'] & {
     top: 0;
     right: 0;
+    border-top-right-radius: inherit;
   }
 
   [dir='rtl'] & {
     bottom: 0;
     right: 0;
+    border-bottom-right-radius: inherit;
   }
 }

package/src/components/Tooltip/Tooltip.module.scss

@@ -1,11 +1,3 @@
-$arrow-size: 4px;
-
-:export {
-  ARROW_SIZE: $arrow-size;
-  PREVENT_OVERFLOW: 10px;
-  OFFSET: 2px;
-}
-
 .tooltip {
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
@@ -13,71 +5,8 @@ $arrow-size: 4px;
   background-color: var(--color--tooltip--background);
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
-
-  &.top {
-    .arrow {
-      bottom: -$arrow-size;
-
-      &::after {
-        left: 0;
-        bottom: 0;
-        border-top-color: var(--color--tooltip--background);
-        border-bottom: none;
-      }
-    }
-  }
-
-  &.right {
-    .arrow {
-      left: -$arrow-size;
-
-      &::after {
-        left: 0;
-        top: 0;
-        border-right-color: var(--color--tooltip--background);
-        border-left: none;
-      }
-    }
-  }
-
-  &.bottom {
-    .arrow {
-      top: -$arrow-size;
-
-      &::after {
-        top: 0;
-        left: 0;
-        border-bottom-color: var(--color--tooltip--background);
-        border-top: none;
-      }
-    }
-  }
-
-  &.left {
-    .arrow {
-      right: -$arrow-size;
-
-      &::after {
-        right: 0;
-        top: 0;
-        border-left-color: var(--color--tooltip--background);
-        border-right: none;
-      }
-    }
-  }
 }
 
 .arrow {
-  position: absolute;
-  width: 2 * $arrow-size;
-  height: 2 * $arrow-size;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    height: 0;
-    width: 0;
-    pointer-events: none;
-    border: $arrow-size solid transparent;
-  }
+  fill: var(--color--tooltip--background);
 }

package/src/components/Tooltip/useTooltip.tsx

@@ -1,3 +1,4 @@
+import { arrow, autoUpdate, flip, FloatingArrow, offset, shift, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
 import {
   FocusEvent,
@@ -6,16 +7,15 @@ import {
   MouseEventHandler,
   ReactNode,
   useCallback,
+  useId,
   useMemo,
+  useRef,
   useState,
 } from 'react';
-import { usePopper } from 'react-popper';
-import { useMountedState, useRafLoop } from 'react-use';
 
-import { useIsTouchDevice, usePortal, useUniqueId } from 'hooks';
+import { useIsTouchDevice, usePortal } from 'hooks';
 import { noop } from 'lib';
 
-import { MODIFIERS } from './constants';
 import styles from './Tooltip.module.scss';
 
 interface Props {
@@ -36,29 +36,27 @@ interface TriggerProps {
   onMouseOver?: MouseEventHandler;
 }
 
+const ARROW_SIZE = 7;
+const ARROW_GAP = 3;
+const PADDING = 10;
+
 // eslint-disable-next-line max-statements
 const useTooltip = (
   tooltip: ReactNode,
   { className, placement = 'top', onBlur = noop, onFocus = noop, onMouseOut = noop, onMouseOver = noop }: Props = {},
 ): TriggerProps => {
-  const id = useUniqueId();
+  const id = useId();
   const isTouchDevice = useIsTouchDevice();
   const isEnabled = Boolean(tooltip) || tooltip === 0;
-  const isMounted = useMountedState();
   const [isShown, setIsShown] = useState<boolean>(false);
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
-  const {
-    attributes,
-    styles: popperStyles,
-    update,
-  } = usePopper(referenceElement, popperElement, {
-    modifiers: [{ name: 'arrow', options: { element: arrowElement } }, ...MODIFIERS],
+  const arrowRef = useRef(null);
+  const ariaAttributes = useMemo(() => (isShown ? { 'aria-describedby': id } : {}), [id, isShown]);
+
+  const { x, y, context, refs, strategy } = useFloating({
+    middleware: [flip(), shift({ padding: PADDING }), offset(ARROW_SIZE + ARROW_GAP), arrow({ element: arrowRef })],
     placement,
+    whileElementsMounted: autoUpdate,
   });
-  const computedPlacement = attributes.popper ? attributes.popper['data-popper-placement'] : placement;
-  const ariaAttributes = useMemo(() => (isShown ? { 'aria-describedby': id } : {}), [id, isShown]);
 
   const handleBlur = useCallback(
     (event: FocusEvent) => {
@@ -95,7 +93,7 @@ const useTooltip = (
   const mouseTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
-      ref: setReferenceElement,
+      ref: refs.setReference,
       onBlur: handleBlur,
       onFocus: handleFocus,
       onMouseOut: handleMouseOut,
@@ -107,33 +105,25 @@ const useTooltip = (
   const touchTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
-      ref: setReferenceElement,
+      ref: refs.setReference,
     }),
     [ariaAttributes],
   );
 
   const triggerProps = isTouchDevice ? touchTriggerProps : mouseTriggerProps;
 
-  useRafLoop(() => {
-    if (isMounted() && update) {
-      update();
-    }
-  });
-
   usePortal(
     <div
-      className={classNames(styles.tooltip, className, {
-        [styles.top]: computedPlacement === 'top',
-        [styles.right]: computedPlacement === 'right',
-        [styles.bottom]: computedPlacement === 'bottom',
-        [styles.left]: computedPlacement === 'left',
-      })}
-      ref={setPopperElement}
-      style={popperStyles.popper}
-      {...attributes.popper}
+      className={classNames(styles.tooltip, className)}
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+      }}
     >
       <div>{tooltip}</div>
-      <div className={styles.arrow} ref={setArrowElement} style={popperStyles.arrow} />
+      <FloatingArrow className={styles.arrow} context={context} ref={arrowRef} />
     </div>,
     { disabled: !isEnabled || !isShown },
   );

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Alert } from './Alert';
 export { default as Badge } from './Badge';
 export { default as Board } from './Board';
 export { default as Button } from './Button';

package/src/hooks/index.ts

@@ -5,4 +5,3 @@ export { default as useLanguage } from './useLanguage';
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as usePortal } from './usePortal';
-export { default as useUniqueId } from './useUniqueId';

package/src/lib/index.ts

@@ -17,7 +17,6 @@ export { default as getRemainingTilesGroups } from './getRemainingTilesGroups';
 export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
 export { default as getTileSizes } from './getTileSizes';
 export { default as inverseDirection } from './inverseDirection';
-export { default as isCtrl } from './isCtrl';
 export { default as isMac } from './isMac';
 export { default as isRegExp } from './isRegExp';
 export { default as isStringArray } from './isStringArray';

package/src/modals/DictionaryModal/DictionaryModal.module.scss

@@ -4,15 +4,20 @@
   flex-direction: column;
   background-color: var(--color--background--element);
   border: var(--border);
+  border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
 }
 
 .dictionary {
   flex: 1;
-  border-bottom: var(--border);
   max-height: initial;
+  border-bottom: var(--border);
+  border-top-left-radius: var(--border--radius);
+  border-top-right-radius: var(--border--radius);
 }
 
 .dictionaryInput {
   flex: 0 0 auto;
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
 }

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,10 +1,10 @@
 import { FunctionComponent } from 'react';
 
-import { Key, Modal } from 'components';
-import { selectConfig, useTranslate, useTypedSelector } from 'state';
+import { Modal } from 'components';
+import { useTranslate } from 'state';
 
 import { Mapping } from './components';
-import { ARROWS, BACKSPACE, CTRL, DEL, ENTER, SPACE } from './keys';
+import { ARROWS, BACKSPACE, DEL, ENTER, SPACE } from './keys';
 
 interface Props {
   className?: string;
@@ -14,7 +14,6 @@ interface Props {
 
 const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
-  const config = useTypedSelector(selectConfig);
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
@@ -22,26 +21,11 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
         <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[ARROWS]} />
         <Mapping description={translate('keyMap.board-and-rack.remove-tile')} mapping={[DEL, BACKSPACE]} />
         <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[ENTER]} />
-        {config.twoCharacterTiles.length > 0 && (
-          <Mapping
-            description={translate('keyMap.board-and-rack.insert-two-letter-tile')}
-            mapping={[
-              [
-                CTRL,
-                <>
-                  {config.twoCharacterTiles.map(([firstLetter]) => (
-                    <Key key={firstLetter}>{firstLetter.toUpperCase()}</Key>
-                  ))}
-                </>,
-              ],
-            ]}
-          />
-        )}
       </Modal.Section>
 
       <Modal.Section title={translate('keyMap.board')}>
-        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE, [CTRL, <Key key="b">B</Key>]]} />
-        <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[[CTRL, ARROWS]]} />
+        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE]} />
+        <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[ARROWS]} />
       </Modal.Section>
 
       <Modal.Section title={translate('keyMap.rack')}>

package/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss

@@ -29,6 +29,10 @@
 }
 
 .group {
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
   &:first-child {
     margin-left: 0;
   }

package/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -19,6 +19,7 @@
         width: 100%;
         height: 100%;
         content: ' ';
+        border-radius: inherit;
         box-shadow: var(--box-shadow--error);
       }
     }

package/src/modals/ResultsModal/ResultsModal.module.scss

@@ -16,6 +16,7 @@
   flex: 0 0 calc(var(--dictionary--height) - var(--text-input--height));
   background-color: var(--color--background--element);
   border: var(--border);
+  border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
 
   @media (max-height: 600px) {

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -21,6 +21,8 @@
   $height: 32px;
 
   height: $height;
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
   transition: var(--transition);
 
   &.de {

package/src/modals/WordsModal/WordsModal.module.scss

@@ -37,5 +37,12 @@
 
   width: $size;
   height: $size;
-  margin-right: var(--spacing--s);
+
+  [dir='ltr'] & {
+    margin-right: var(--spacing--s);
+  }
+
+  [dir='rtl'] & {
+    margin-left: var(--spacing--s);
+  }
 }

package/src/state/createAppStore.ts

@@ -1,21 +1,37 @@
-import { applyMiddleware, compose, createStore } from 'redux';
+import { configureStore } from '@reduxjs/toolkit';
 import reduxSaga from 'redux-saga';
 
-import rootReducer from './rootReducer';
 import { rootSaga } from './sagas';
-import { RootState } from './types';
+import {
+  boardSlice,
+  cellFilterSlice,
+  dictionarySlice,
+  rackSlice,
+  resultsSlice,
+  settingsSlice,
+  solveSlice,
+  verifySlice,
+} from './slices';
 
 const sagaMiddleware = reduxSaga();
-const initialState: Partial<RootState> | undefined = undefined;
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line no-underscore-dangle
-const composeEnhancers = globalThis.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const createAppStore = () => {
+  const store = configureStore({
+    reducer: {
+      board: boardSlice.reducer,
+      cellFilter: cellFilterSlice.reducer,
+      dictionary: dictionarySlice.reducer,
+      rack: rackSlice.reducer,
+      results: resultsSlice.reducer,
+      settings: settingsSlice.reducer,
+      solve: solveSlice.reducer,
+      verify: verifySlice.reducer,
+    },
+    middleware: [sagaMiddleware],
+  });
 
-const createAppStore = (): ReturnType<typeof createStore> => {
-  const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(sagaMiddleware)));
   sagaMiddleware.run(rootSaga);
+
   return store;
 };
 

package/src/state/types.ts

@@ -1,3 +1,21 @@
-import rootReducer from './rootReducer';
+import {
+  boardSlice,
+  cellFilterSlice,
+  dictionarySlice,
+  rackSlice,
+  resultsSlice,
+  settingsSlice,
+  solveSlice,
+  verifySlice,
+} from './slices';
 
-export type RootState = ReturnType<typeof rootReducer>;
+export type RootState = {
+  board: ReturnType<typeof boardSlice.reducer>;
+  cellFilter: ReturnType<typeof cellFilterSlice.reducer>;
+  dictionary: ReturnType<typeof dictionarySlice.reducer>;
+  rack: ReturnType<typeof rackSlice.reducer>;
+  results: ReturnType<typeof resultsSlice.reducer>;
+  settings: ReturnType<typeof settingsSlice.reducer>;
+  solve: ReturnType<typeof solveSlice.reducer>;
+  verify: ReturnType<typeof verifySlice.reducer>;
+};

package/src/styles/mixins.scss

@@ -12,6 +12,28 @@ $media-expressions: (
   touch: '(hover: none)',
 );
 
+@mixin scrollbars {
+  scrollbar-color: var(--scrollbar--thumb--color) var(--scrollbar--thumb--track);
+  scrollbar-width: auto;
+
+  &::-webkit-scrollbar {
+    width: var(--scrollbar--size);
+    background-color: var(--scrollbar--track--color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar--thumb--color);
+  }
+
+  &:hover {
+    scrollbar-color: var(--scrollbar--thumb--color--highlight) var(--scrollbar--track--color);
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar--thumb--color--highlight);
+    }
+  }
+}
+
 /**
  * It does not work when applied on input elements.
  */