@scrabble-solver/scrabble-solver 2.10.6 → 2.10.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.6",
+  "version": "2.10.8",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,16 +31,17 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.10.6",
-    "@scrabble-solver/constants": "^2.10.6",
-    "@scrabble-solver/dictionaries": "^2.10.6",
-    "@scrabble-solver/logger": "^2.10.6",
-    "@scrabble-solver/solver": "^2.10.6",
-    "@scrabble-solver/types": "^2.10.6",
-    "@scrabble-solver/word-definitions": "^2.10.6",
+    "@scrabble-solver/configs": "^2.10.8",
+    "@scrabble-solver/constants": "^2.10.8",
+    "@scrabble-solver/dictionaries": "^2.10.8",
+    "@scrabble-solver/logger": "^2.10.8",
+    "@scrabble-solver/solver": "^2.10.8",
+    "@scrabble-solver/types": "^2.10.8",
+    "@scrabble-solver/word-definitions": "^2.10.8",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
+    "merge-refs": "^1.1.2",
     "next": "^13.1.6",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
@@ -76,5 +77,5 @@
     "sass": "^1.58.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "188bb77933a4e88af88b05063a4977c50c788071"
+  "gitHead": "faa8a69c239fd14a2b07fe18744580e8713e93ea"
 }

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

@@ -5,7 +5,7 @@
   padding: var(--spacing--xs) var(--spacing--m);
   border: var(--border);
   border-radius: var(--border--radius);
-  background-color: var(--color--background--overlay);
+  background-color: var(--color--background--element);
   line-height: var(--line-height);
   font-size: var(--font--size--m);
   font-weight: bold;

package/src/components/Board/components/Cell/Cell.module.scss

@@ -1,13 +1,11 @@
 @import 'styles/mixins';
 
-$icon-size: 16px;
-
 .cell {
   @include focus-effect;
 
   position: relative;
   display: table-cell;
-  background-color: white;
+  background-color: var(--color--white);
   border-bottom: var(--border--width) dotted var(--border--color--light);
   transition: var(--transition);
   background-clip: padding-box;
@@ -36,57 +34,57 @@ $icon-size: 16px;
 
   &.bonusStart {
     &::before {
-      background-color: var(--color--violet--light);
+      background-color: var(--color--bonus--start);
     }
   }
 
   &.bonusCharacter1 {
     &::before {
-      background-color: var(--color--yellow--light);
+      background-color: var(--color--bonus--character--1);
     }
   }
 
   &.bonusCharacter2 {
     &::before {
-      background-color: var(--color--green--light);
+      background-color: var(--color--bonus--character--2);
     }
   }
 
   &.bonusCharacter3 {
     &::before {
-      background-color: var(--color--blue--light);
+      background-color: var(--color--bonus--character--3);
     }
   }
 
   &.bonusCharacter5 {
     &::before {
-      background-color: var(--color--red--light);
+      background-color: var(--color--bonus--character--5);
     }
   }
 
   &.bonusCharacterMultiplier2 {
     &::before {
-      background-color: var(--color--light-blue--light);
+      background-color: var(--color--bonus--character-multiplier--2);
     }
   }
 
   &.bonusCharacterMultiplier3 {
     &::before {
-      background-color: var(--color--dark-blue--light);
+      background-color: var(--color--bonus--character-multiplier--3);
     }
   }
 
   &.bonusWord2 {
     &::before {
       content: 'x2';
-      background-color: var(--color--orange);
+      background-color: var(--color--bonus--word-multiplier--2);
     }
   }
 
   &.bonusWord3 {
     &::before {
       content: 'x3';
-      background-color: var(--color--pink);
+      background-color: var(--color--bonus--word-multiplier--3);
     }
   }
 
@@ -112,7 +110,7 @@ $icon-size: 16px;
     pointer-events: none;
     font-size: 60%;
     font-weight: bold;
-    color: white;
+    color: var(--color--white);
     content: ' ';
 
     [lang='fa-IR'] & {
@@ -121,7 +119,7 @@ $icon-size: 16px;
   }
 
   &:focus-within {
-    z-index: 1;
+    z-index: 2;
 
     .actions {
       display: flex;
@@ -135,9 +133,15 @@ $icon-size: 16px;
 }
 
 .actions {
+  --offset: var(--spacing--m);
+
+  @include media('<xs') {
+    --offset: var(--spacing--s);
+  }
+
   display: none;
   position: absolute;
-  top: -$icon-size;
+  bottom: calc(100% - var(--offset));
   z-index: 2;
   transition: var(--transition);
   pointer-events: none;
@@ -145,30 +149,17 @@ $icon-size: 16px;
   border-radius: var(--border--radius);
 
   [dir='ltr'] & {
-    left: calc(100% + var(--spacing--s) - #{$icon-size});
+    left: calc(100% - var(--offset));
   }
 
   [dir='rtl'] & {
-    right: calc(100% + var(--spacing--s) - #{$icon-size});
+    right: calc(100% - var(--offset));
   }
 }
 
 .action {
-  @include button-reset;
-
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing--s);
-  user-select: none;
-  pointer-events: none;
-  box-sizing: content-box;
-  background-color: white;
-  border: var(--border);
-  font-size: var(--font--size--m);
-  line-height: $icon-size;
-  color: var(--color--foreground--secondary);
-  transition: var(--transition);
-  cursor: pointer;
+  padding: var(--spacing--m);
+  box-shadow: none !important;
 
   & + & {
     [dir='ltr'] & {
@@ -182,35 +173,28 @@ $icon-size: 16px;
 
   [dir='ltr'] & {
     &:first-child {
-      border-top-left-radius: var(--border--radius);
-      border-bottom-left-radius: var(--border--radius);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
 
     &:last-child {
-      border-top-right-radius: var(--border--radius);
-      border-bottom-right-radius: var(--border--radius);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
   }
 
   [dir='rtl'] & {
     &:first-child {
-      border-top-right-radius: var(--border--radius);
-      border-bottom-right-radius: var(--border--radius);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
 
     &:last-child {
-      border-top-left-radius: var(--border--radius);
-      border-bottom-left-radius: var(--border--radius);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
   }
 
-  &,
-  .filterCell,
-  .toggleDirection {
-    width: $icon-size;
-    height: $icon-size;
-  }
-
   &:active,
   &:hover {
     color: var(--color--foreground);
@@ -229,22 +213,6 @@ $icon-size: 16px;
   }
 }
 
-.blank {
-  user-select: none;
-
-  &.active {
-    font-weight: bold;
-  }
-}
-
-.filterCell {
-  color: var(--color--inactive);
-
-  &.filtered {
-    color: var(--color--foreground--secondary);
-  }
-}
-
 .iconContainer {
   position: absolute;
   top: 0;
@@ -262,7 +230,7 @@ $icon-size: 16px;
 
 .flag,
 .star {
-  color: white;
+  color: var(--color--white);
 }
 
 .star {

package/src/components/Board/components/Cell/Cell.tsx

@@ -10,6 +10,7 @@ import {
   selectCellBonus,
   selectCellIsFiltered,
   selectCellIsValid,
+  selectLocale,
   selectTilePoints,
   useTranslate,
   useTypedSelector,
@@ -47,6 +48,7 @@ const Cell: FunctionComponent<Props> = ({
   const { tile, x, y } = cell;
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
   const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
@@ -83,6 +85,10 @@ const Cell: FunctionComponent<Props> = ({
 
   return (
     <CellPure
+      aria-label={translate('cell.tile.location', {
+        x: (x + 1).toLocaleString(locale),
+        y: (y + 1).toLocaleString(locale),
+      })}
       bonus={bonus}
       cell={cell}
       className={className}

package/src/components/Board/components/Cell/CellPure.tsx

@@ -10,16 +10,17 @@ import {
   RefObject,
 } from 'react';
 
-import { ArrowDown, Flag, Star } from 'icons';
+import { ArrowDown, Flag, FlagFill, Square, SquareFill, Star } from 'icons';
 import { Translate } from 'types';
 
+import Button from '../../../Button';
 import Tile from '../../../Tile';
 
-import Button from './Button';
 import styles from './Cell.module.scss';
 import { getBonusClassname } from './lib';
 
 interface Props {
+  'aria-label': string;
   bonus: Bonus | undefined;
   cell: Cell;
   className?: string;
@@ -44,6 +45,7 @@ interface Props {
 }
 
 const CellPure: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
   bonus,
   cell,
   className,
@@ -82,11 +84,12 @@ const CellPure: FunctionComponent<Props> = ({
 
     {isFiltered && (
       <div className={classNames(styles.iconContainer, styles.flagContainer)}>
-        <Flag className={styles.flag} />
+        <FlagFill className={styles.flag} />
       </div>
     )}
 
     <Tile
+      aria-label={ariaLabel}
       className={styles.tile}
       character={isEmpty ? undefined : tile.character}
       highlighted={cell.isCandidate()}
@@ -103,36 +106,35 @@ const CellPure: FunctionComponent<Props> = ({
 
     {!cell.isCandidate() && (
       <div className={styles.actions}>
-        <Button tooltip={translate('cell.toggle-direction')} onClick={onDirectionToggleClick}>
-          <ArrowDown
-            className={classNames(styles.toggleDirection, {
-              [styles.right]: direction === 'horizontal',
-            })}
-          />
-        </Button>
+        <Button
+          aria-label={translate('cell.toggle-direction')}
+          className={styles.action}
+          Icon={ArrowDown}
+          iconClassName={classNames(styles.toggleDirection, {
+            [styles.right]: direction === 'horizontal',
+          })}
+          tooltip={translate('cell.toggle-direction')}
+          onClick={onDirectionToggleClick}
+        />
 
         {isEmpty && (
           <Button
-            className={classNames(styles.filterCell, {
-              [styles.filtered]: isFiltered,
-            })}
+            aria-label={translate('cell.filter-cell')}
+            className={classNames(styles.action)}
+            Icon={isFiltered ? Flag : FlagFill}
             tooltip={translate('cell.filter-cell')}
             onClick={onToggleFilterCellClick}
-          >
-            <Flag />
-          </Button>
+          />
         )}
 
         {!isEmpty && (
           <Button
-            className={classNames(styles.blank, {
-              [styles.active]: tile.isBlank,
-            })}
+            aria-label={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
+            className={styles.action}
+            Icon={tile.isBlank ? SquareFill : Square}
             tooltip={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
             onClick={onToggleBlankClick}
-          >
-            B
-          </Button>
+          />
         )}
       </div>
     )}

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

@@ -21,11 +21,11 @@
 
     &.primary {
       background-color: var(--color--primary);
-      color: white;
+      color: var(--color--primary--opposite);
     }
 
     &.default {
-      background-color: var(--color--background--overlay);
+      background-color: var(--color--background--element);
       color: var(--color--foreground);
 
       .icon {

package/src/components/Button/Button.tsx

@@ -7,6 +7,7 @@ import styles from './Button.module.scss';
 import Link from './Link';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string;
   Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
   iconClassName?: string;
   tooltip?: ReactNode;

package/src/components/Button/Link.tsx

@@ -6,6 +6,7 @@ import { useTooltip } from '../Tooltip';
 import styles from './Button.module.scss';
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  'aria-label': string;
   href: string;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
   iconClassName?: string;

package/src/components/Checkbox/Checkbox.tsx

@@ -10,23 +10,20 @@ interface Props {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
-  id: string;
   name: string;
   onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
-const Checkbox: FunctionComponent<Props> = ({ checked, children, className, disabled, id, name, onChange }) => (
+const Checkbox: FunctionComponent<Props> = ({ checked, children, className, disabled, name, onChange }) => (
   <label
     className={classNames(styles.checkbox, className, {
       [styles.checked]: checked,
     })}
-    htmlFor={id}
   >
     <input
       checked={checked}
       className={styles.input}
       disabled={disabled}
-      id={id}
       name={name}
       type="checkbox"
       onChange={onChange}

package/src/components/Dictionary/Dictionary.tsx

@@ -27,6 +27,10 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
     >
       {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
 
+      {results.length === 0 && (
+        <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
+      )}
+
       {results.map(({ definitions, exists, isAllowed, word }) => (
         <div
           className={classNames(styles.result, {
@@ -35,40 +39,34 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
           })}
           key={word}
         >
-          {typeof word === 'undefined' && (
-            <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
-          )}
-
-          {typeof word !== 'undefined' && (
-            <div className={styles.content}>
-              {word && <h2 className={styles.word}>{word}</h2>}
+          <div className={styles.content}>
+            {word && <h2 className={styles.word}>{word}</h2>}
 
-              {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
+            {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
 
-              {isAllowed === true && (
-                <>
-                  {definitions.length === 0 && (
-                    <>
-                      {exists && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
-                      {!exists && <div>{translate('dictionary.empty-state.no-results')}</div>}
-                    </>
-                  )}
+            {isAllowed === true && (
+              <>
+                {definitions.length === 0 && (
+                  <>
+                    {exists && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
+                    {!exists && <div>{translate('dictionary.empty-state.no-results')}</div>}
+                  </>
+                )}
 
-                  {definitions.length > 0 && (
-                    <ul className={styles.definitions}>
-                      {definitions.map((result, index) => (
-                        <li key={index} className={styles.definition}>
-                          {result}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </>
-              )}
+                {definitions.length > 0 && (
+                  <ul className={styles.definitions}>
+                    {definitions.map((result, index) => (
+                      <li key={index} className={styles.definition}>
+                        {result}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </>
+            )}
 
-              {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
-            </div>
-          )}
+            {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+          </div>
         </div>
       ))}
 

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,3 +1,4 @@
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
@@ -28,8 +29,10 @@ const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     <form className={classNames(styles.dictionaryInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
+        pattern={`.*[^\\s${COMMA_ARABIC}${COMMA_LATIN}].*`}
         placeholder={translate('dictionary.input.placeholder')}
         required
+        title={translate('dictionary.input.title')}
         type="text"
         value={input}
         onChange={handleChange}

package/src/components/{SquareButton/SquareButton.module.scss → IconButton/IconButton.module.scss}

@@ -1,6 +1,6 @@
 @import 'styles/mixins';
 
-.squareButton {
+.iconButton {
   @include button-reset;
   @include focus-effect;
 

package/src/components/{SquareButton/SquareButton.tsx → IconButton/IconButton.tsx}

@@ -1,23 +1,24 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, ReactNode, SVGAttributes } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 
+import styles from './IconButton.module.scss';
 import Link from './Link';
-import styles from './SquareButton.module.scss';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string;
   children?: never;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  tooltip: ReactNode;
+  tooltip: string;
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
-const SquareButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
+const IconButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
   const triggerProps = useTooltip(tooltip, props);
 
   return (
-    <button className={classNames(styles.squareButton, className)} type="button" {...props} {...triggerProps}>
+    <button className={classNames(styles.iconButton, className)} type="button" {...props} {...triggerProps}>
       <span className={styles.content}>
         <Icon className={styles.icon} />
       </span>
@@ -25,6 +26,6 @@ const SquareButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...p
   );
 };
 
-export default Object.assign(SquareButton, {
+export default Object.assign(IconButton, {
   Link,
 });

package/src/components/{SquareButton → IconButton}/Link.tsx

@@ -3,9 +3,10 @@ import { AnchorHTMLAttributes, FunctionComponent, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 
-import styles from './SquareButton.module.scss';
+import styles from './IconButton.module.scss';
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  'aria-label': string;
   children?: never;
   href: string;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
@@ -16,7 +17,7 @@ const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props })
   const triggerProps = useTooltip(tooltip, props);
 
   return (
-    <a className={classNames(styles.squareButton, className)} {...props} {...triggerProps}>
+    <a className={classNames(styles.iconButton, className)} {...props} {...triggerProps}>
       <span className={styles.content}>
         <Icon className={styles.icon} />
       </span>

package/src/components/IconButton/index.ts

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

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

@@ -8,7 +8,7 @@ $icon-size: 15px;
   min-width: $key-size;
   height: $key-size;
   padding: var(--spacing--s) var(--spacing--m);
-  background-color: white;
+  background-color: var(--color--white);
   border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);