@scrabble-solver/scrabble-solver 2.10.3 → 2.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.3",
+  "version": "2.10.4",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,14 +31,16 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.2",
-    "@scrabble-solver/configs": "^2.10.3",
-    "@scrabble-solver/constants": "^2.10.3",
-    "@scrabble-solver/dictionaries": "^2.10.3",
-    "@scrabble-solver/logger": "^2.10.3",
-    "@scrabble-solver/solver": "^2.10.3",
-    "@scrabble-solver/types": "^2.10.3",
-    "@scrabble-solver/word-definitions": "^2.10.3",
+    "@scrabble-solver/configs": "^2.10.4",
+    "@scrabble-solver/constants": "^2.10.4",
+    "@scrabble-solver/dictionaries": "^2.10.4",
+    "@scrabble-solver/logger": "^2.10.4",
+    "@scrabble-solver/solver": "^2.10.4",
+    "@scrabble-solver/types": "^2.10.4",
+    "@scrabble-solver/word-definitions": "^2.10.4",
     "classnames": "^2.3.2",
+    "include-media": "^2.0.0",
+    "include-media-query-builder": "^1.1.0",
     "next": "^13.1.6",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
@@ -74,5 +76,5 @@
     "sass": "^1.57.1",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "50a961d5f3fe68c6b646a3cd1a3fb28f9e9b5252"
+  "gitHead": "7cce9fa637f3c346b1772d0a2b401d3e271b8e67"
 }

package/src/components/Badge/Badge.module.scss

@@ -2,12 +2,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing--xs) var(--spacing--s);
+  padding: var(--spacing--xs) var(--spacing--m);
+  border: var(--border);
   border-radius: var(--border--radius);
-  background-color: var(--color--foreground--secondary);
-  box-shadow: va(--box-shadow);
+  background-color: var(--color--background--overlay);
   line-height: var(--line-height);
-  font-size: var(--font--size--s);
+  font-size: var(--font--size--m);
   font-weight: bold;
-  color: white;
 }

package/src/components/Board/BoardPure.tsx

@@ -1,4 +1,4 @@
-import { Cell } from '@scrabble-solver/types';
+import { Cell as CellModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
   ChangeEventHandler,
@@ -13,16 +13,16 @@ import {
 import { Direction } from 'types';
 
 import styles from './Board.module.scss';
-import { Cell as CellComponent } from './components';
+import { Cell } from './components';
 
 interface Props {
   className?: string;
   cellSize: number;
-  center: Cell;
+  center: CellModel;
   direction: Direction;
   innerRef?: Ref<HTMLDivElement>;
   refs: RefObject<HTMLInputElement>[][];
-  rows: Cell[][];
+  rows: CellModel[][];
   onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
@@ -48,7 +48,7 @@ const BoardPure: FunctionComponent<Props> = ({
     {rows.map((cells, y) => (
       <div className={styles.row} key={y}>
         {cells.map((cell, x) => (
-          <CellComponent
+          <Cell
             className={styles.cell}
             cell={cell}
             direction={direction}

package/src/components/Button/Button.module.scss

@@ -1,23 +1,23 @@
 @import 'styles/mixins';
 
-$size: 32px;
-
 .button {
   @include button-reset;
   @include focus-effect;
 
   display: inline-block;
-  transition: var(--transition);
+  padding: var(--spacing--m) var(--spacing--l);
+  border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: none;
   color: var(--color--inactive);
+  transition: var(--transition);
   cursor: pointer;
-  opacity: 0.9;
 
   &,
   &:active,
   &:focus,
   &:hover {
+    text-decoration: none;
     background-color: var(--color--primary);
     box-shadow: var(--box-shadow);
     color: white;
@@ -32,53 +32,25 @@ $size: 32px;
     }
   }
 
-  &:disabled {
-    background-color: var(--color--background);
-    color: var(--color--inactive);
+  &[disabled] {
+    opacity: var(--opacity--disabled);
     box-shadow: none;
     cursor: not-allowed;
-
-    .icon {
-      transform: scale(1);
-    }
-  }
-
-  &:hover {
-    opacity: 1;
-
-    &:not(:disabled) {
-      .icon {
-        transform: scale(1.1);
-      }
-    }
   }
 }
 
 .content {
   display: flex;
   align-items: center;
-  padding: var(--spacing--xs) var(--spacing--m);
-}
-
-.icon,
-.label {
-  transition: var(--transition);
+  gap: var(--spacing--m);
 }
 
 .icon {
-  width: $size;
-  height: $size;
-  pointer-events: none;
-  transition: var(--transition);
-  transform: scale(1);
-  color: inherit;
+  width: var(--button--icon--size);
+  height: var(--button--icon--size);
 }
 
 .label {
-  padding: 0 var(--spacing--m);
-  transition: var(--transition);
-  font-size: var(--font--size--m);
+  font-size: var(--font--size--h3);
   text-transform: uppercase;
-  pointer-events: none;
-  user-select: none;
 }

package/src/components/Button/Button.tsx

@@ -6,19 +6,20 @@ import { useTooltip } from '../Tooltip';
 import styles from './Button.module.scss';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  onClick: MouseEventHandler<HTMLButtonElement>;
+  Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
+  iconClassName?: string;
   tooltip?: ReactNode;
+  onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
-const Button: FunctionComponent<Props> = ({ children, className, Icon, tooltip, ...props }) => {
+const Button: FunctionComponent<Props> = ({ children, className, Icon, iconClassName, tooltip, ...props }) => {
   const triggerProps = useTooltip(tooltip, props);
 
   return (
     <button className={classNames(styles.button, className)} type="button" {...props} {...triggerProps}>
       <span className={styles.content}>
-        <span className={styles.label}>{children}</span>
-        <Icon className={styles.icon} />
+        {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
+        {children && <span className={styles.label}>{children}</span>}
       </span>
     </button>
   );

package/src/components/Dictionary/Dictionary.module.scss

@@ -1,10 +1,9 @@
 .dictionary {
   position: relative;
-  min-height: calc(var(--dictionary--height) - var(--text-input--height));
+  height: var(--dictionary--height);
   overflow-y: auto;
   word-break: break-word;
   transition: var(--transition);
-  font-size: var(--font--size--s);
 }
 
 .result {

package/src/components/Dictionary/Dictionary.tsx

@@ -25,11 +25,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
         [styles.isNotAllowed]: isFirstAllowed === false,
       })}
     >
-      {typeof error !== 'undefined' && (
-        <EmptyState className={styles.emptyState} type="error">
-          {error.message}
-        </EmptyState>
-      )}
+      {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
 
       {results.map(({ definitions, exists, isAllowed, word }) => (
         <div
@@ -40,7 +36,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
           key={word}
         >
           {typeof word === 'undefined' && (
-            <EmptyState type="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
+            <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
           )}
 
           {typeof word !== 'undefined' && (

package/src/components/DictionaryInput/DictionaryInput.module.scss

@@ -1,9 +1,7 @@
 @import 'styles/mixins';
 
 .dictionaryInput {
-  &:focus-within {
-    @include focus-effect;
-  }
+  @include focus-effect;
 }
 
 .input {

package/src/components/EmptyState/EmptyState.module.scss

@@ -1,15 +1,14 @@
 .emptyState {
-  margin: 0 auto;
-  max-width: calc(2 * var(--sidebar--width) / 3);
   padding: var(--spacing--xl);
   font-family: var(--font--family);
   color: var(--color--foreground--secondary);
   text-align: center;
   text-transform: none;
+}
 
-  .tiles {
-    margin-bottom: var(--spacing--m);
-    height: 32px;
-    overflow: visible;
-  }
+.tiles {
+  display: inline-block;
+  margin-bottom: var(--spacing--m);
+  height: 40px;
+  overflow: visible;
 }

package/src/components/EmptyState/EmptyState.tsx

@@ -13,34 +13,34 @@ import styles from './EmptyState.module.scss';
 interface Props {
   children: ReactNode;
   className?: string;
-  type: 'error' | 'info' | 'success' | 'warning';
+  variant: 'error' | 'info' | 'success' | 'warning';
 }
 
-const TITLE_KEY_PER_TYPE: Record<Props['type'], keyof Translations> = {
+const TITLE_KEY_PER_TYPE: Record<Props['variant'], keyof Translations> = {
   error: 'empty-state.error',
   info: 'empty-state.info',
   success: 'empty-state.success',
   warning: 'empty-state.warning',
 };
 
-const COLORS_PER_TYPE: Record<Props['type'], string> = {
+const COLORS_PER_TYPE: Record<Props['variant'], string> = {
   error: COLOR_RED,
   info: COLOR_BLUE,
   success: COLOR_GREEN,
   warning: COLOR_YELLOW,
 };
 
-const EmptyState: FunctionComponent<Props> = ({ className, children, type }) => {
+const EmptyState: FunctionComponent<Props> = ({ children, className, variant }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
-  const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[type]), [translate]);
+  const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[variant]), [translate]);
   const message = direction === 'ltr' ? title : title.split('').reverse().join('');
   const content = useMemo(() => [[message.toUpperCase()]], [title]);
 
   return (
     <div className={classNames(styles.emptyState, className)}>
-      <PlainTiles className={styles.tiles} color={COLORS_PER_TYPE[type]} content={content} />
+      <PlainTiles className={styles.tiles} color={COLORS_PER_TYPE[variant]} content={content} />
 
       <div className={styles.content}>{children}</div>
     </div>

package/src/components/Key/Key.module.scss

@@ -13,7 +13,6 @@ $icon-size: 15px;
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--monospace);
-  font-size: var(--font--size--s);
   line-height: calc(#{$key-size} - 2 * (var(--spacing--s) + var(--border--width)));
   vertical-align: middle;
   text-align: center;

package/src/components/{Splash/Splash.module.scss → LogoSplashScreen/LogoSplashScreen.module.scss}

@@ -4,7 +4,7 @@ $loading-duration: 250ms;
 $loaded-duration: 100ms;
 $hiding-duration: 200ms;
 
-.splash {
+.logoSplashScreen {
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/{Splash/Splash.tsx → LogoSplashScreen/LogoSplashScreen.tsx}

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import { AnimationEventHandler, FunctionComponent } from 'react';
 
 import Logo from '../Logo';
-import Screen from '../Screen';
+import SplashScreen from '../SplashScreen';
 
-import styles from './Splash.module.scss';
+import styles from './LogoSplashScreen.module.scss';
 
 interface Props {
   className?: string;
@@ -12,9 +12,9 @@ interface Props {
   onAnimationEnd?: AnimationEventHandler<HTMLDivElement>;
 }
 
-const Splash: FunctionComponent<Props> = ({ className, forceShow, onAnimationEnd }) => (
-  <Screen
-    className={classNames(styles.splash, className, {
+const LogoSplashScreen: FunctionComponent<Props> = ({ className, forceShow, onAnimationEnd }) => (
+  <SplashScreen
+    className={classNames(styles.logoSplashScreen, className, {
       [styles.animated]: !forceShow,
     })}
     onAnimationEnd={onAnimationEnd}
@@ -25,7 +25,7 @@ const Splash: FunctionComponent<Props> = ({ className, forceShow, onAnimationEnd
     </div>
 
     <h1 className={styles.author}>by Kamil Mielnik</h1>
-  </Screen>
+  </SplashScreen>
 );
 
-export default Splash;
+export default LogoSplashScreen;

package/src/components/LogoSplashScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './LogoSplashScreen';

package/src/components/{Sidebar/Sidebar.module.scss → Modal/Modal.module.scss}

@@ -1,8 +1,5 @@
 @import 'styles/mixins';
 
-$z-index: 100;
-$width: 370px;
-
 .modal,
 .closeButton {
   top: 0;
@@ -18,9 +15,9 @@ $width: 370px;
 
 .modal {
   position: fixed;
-  z-index: $z-index;
+  z-index: var(--z-index--modal);
   height: 100vh;
-  width: $width;
+  width: var(--modal--width);
   padding: 0;
   border-radius: 0;
   border: none;
@@ -28,10 +25,14 @@ $width: 370px;
   &:focus {
     outline: none;
   }
+
+  @include media('<s') {
+    --modal--width: 100%;
+  }
 }
 
 .afterOpen {
-  .sidebar {
+  .container {
     [dir='ltr'] &,
     [dir='rtl'] & {
       transform: translateX(0);
@@ -41,15 +42,15 @@ $width: 370px;
 }
 
 .beforeClose {
-  .sidebar {
+  .container {
     opacity: 0;
 
     [dir='ltr'] & {
-      transform: translateX($width);
+      transform: translateX(var(--modal--width));
     }
 
     [dir='rtl'] & {
-      transform: translateX(-$width);
+      transform: translateX(calc(-1 * var(--modal--width)));
     }
   }
 }
@@ -58,30 +59,34 @@ $width: 370px;
   background-color: transparent;
 }
 
-.sidebar {
+.container {
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: var(--color--background);
-  box-shadow: var(--box-shadow--left);
   transition: var(--transition);
   transition-duration: var(--transition--duration--long);
-  transform: translateX($width);
+  transform: translateX(var(--modal--width));
   opacity: 0;
 
   [dir='ltr'] & {
-    transform: translateX($width);
+    transform: translateX(var(--modal--width));
+    box-shadow: var(--box-shadow--offset--negative) 0 var(--box-shadow--blur) var(--box-shadow--spread)
+      var(--box-shadow--color);
   }
 
   [dir='rtl'] & {
-    transform: translateX(-$width);
+    transform: translateX(calc(-1 * var(--modal--width)));
+    box-shadow: var(--box-shadow--offset) 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--box-shadow--color);
   }
 }
 
 .header {
-  flex: 0 0 auto;
   position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
   padding: var(--spacing--l);
+  background-color: var(--color--background);
 }
 
 .title {
@@ -89,24 +94,24 @@ $width: 370px;
   font-weight: 300;
 
   [dir='ltr'] & {
-    padding-right: calc(var(--square-button-size) + var(--spacing--s));
+    padding-right: calc(var(--square-button--size) + var(--spacing--s));
   }
 
   [dir='rtl'] & {
-    padding-left: calc(var(--square-button-size) + var(--spacing--s));
+    padding-left: calc(var(--square-button--size) + var(--spacing--s));
   }
 }
 
 .closeButton {
   position: absolute !important;
-  z-index: $z-index + 1;
+  z-index: var(--z-index--close-button);
   margin: var(--spacing--l);
 }
 
 .content {
-  flex: 1;
   position: relative;
+  flex: 1;
+  margin-top: calc(-1 * var(--spacing--l));
   padding: var(--spacing--l);
-  padding-top: 0;
   overflow: auto;
 }

package/src/components/{Sidebar/Sidebar.tsx → Modal/Modal.tsx}

@@ -1,16 +1,16 @@
 import classNames from 'classnames';
 import { FunctionComponent, ReactNode, useEffect, useState } from 'react';
-import Modal from 'react-modal';
+import ReactModal from 'react-modal';
 import { useKey } from 'react-use';
 
-import { CrossFill } from 'icons';
+import { CrossSquareFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
 import { useTranslate } from 'state';
 
 import SquareButton from '../SquareButton';
 
 import { Section } from './components';
-import styles from './Sidebar.module.scss';
+import styles from './Modal.module.scss';
 
 export interface Props {
   children: ReactNode;
@@ -20,7 +20,7 @@ export interface Props {
   onClose: () => void;
 }
 
-const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title, onClose }) => {
+const Modal: FunctionComponent<Props> = ({ children, className, isOpen, title, onClose }) => {
   const translate = useTranslate();
   const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
 
@@ -41,7 +41,7 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
   }, [isOpen]);
 
   return (
-    <Modal
+    <ReactModal
       className={{
         afterOpen: styles.afterOpen,
         base: styles.modal,
@@ -54,13 +54,13 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
       shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}
       onRequestClose={onClose}
     >
-      <div className={classNames(styles.sidebar, className)}>
+      <div className={classNames(styles.container, className)}>
         <div className={styles.header}>
           <h1 className={styles.title}>{title}</h1>
 
           <SquareButton
             className={styles.closeButton}
-            Icon={CrossFill}
+            Icon={CrossSquareFill}
             tooltip={translate('common.close')}
             onClick={onClose}
           />
@@ -68,10 +68,10 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
 
         <div className={styles.content}>{children}</div>
       </div>
-    </Modal>
+    </ReactModal>
   );
 };
 
-export default Object.assign(Sidebar, {
+export default Object.assign(Modal, {
   Section,
 });

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from './Modal';

package/src/components/NavButtons/NavButtons.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { useIsTouchDevice } from 'hooks';
-import { BookHalf, Cog, Eraser, Github, Keyboard, Sack } from 'icons';
+import { useIsTouchDevice, useMediaQuery } from 'hooks';
+import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
@@ -13,6 +13,7 @@ import styles from './NavButtons.module.scss';
 interface Props {
   onClear: () => void;
   onShowKeyMap: () => void;
+  onShowMenu: () => void;
   onShowRemainingTiles: () => void;
   onShowSettings: () => void;
   onShowWords: () => void;
@@ -21,6 +22,7 @@ interface Props {
 const NavButtons: FunctionComponent<Props> = ({
   onClear,
   onShowKeyMap,
+  onShowMenu,
   onShowRemainingTiles,
   onShowSettings,
   onShowWords,
@@ -29,6 +31,23 @@ const NavButtons: FunctionComponent<Props> = ({
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
   const isTouchDevice = useIsTouchDevice();
+  const isLessThanS = useMediaQuery('<s');
+
+  if (isLessThanS) {
+    return (
+      <div className={styles.navButtons}>
+        <div className={styles.group}>
+          <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+        </div>
+
+        <div className={styles.separator} />
+
+        <div className={styles.group}>
+          <SquareButton className={styles.button} Icon={List} tooltip={translate('menu')} onClick={onShowMenu} />
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className={styles.navButtons}>
@@ -52,7 +71,7 @@ const NavButtons: FunctionComponent<Props> = ({
           className={classNames(styles.button, {
             [styles.error]: hasInvalidWords,
           })}
-          Icon={BookHalf}
+          Icon={CardChecklist}
           tooltip={translate('words')}
           onClick={onShowWords}
         />

package/src/components/Progress/Progress.module.scss

@@ -0,0 +1,9 @@
+.progress {
+  width: 100%;
+  min-height: 1px;
+  border-radius: var(--border--radius);
+
+  [dir='rtl'] & {
+    transform: scaleX(-1);
+  }
+}