@scrabble-solver/scrabble-solver 2.18.1 → 2.18.3

package/src/components/Results/Result.tsx

@@ -1,11 +1,10 @@
-import classNames from 'classnames';
-import { type FocusEventHandler, type MouseEventHandler, type ReactElement, useRef } from 'react';
+import { type FocusEventHandler, type MouseEventHandler, type ReactElement } from 'react';
 import Highlighter from 'react-highlight-words';
 import { type RowComponentProps } from 'react-window';
 
+import { Cell, Row } from '@/components/Table';
 import { useColumns } from '@/hooks/useColumns';
 import { LOCALE_FEATURES } from '@/i18n/constants';
-import { noop } from '@/lib/noop';
 import {
   selectIsResultMatching,
   selectLocale,
@@ -15,7 +14,6 @@ import {
 } from '@/state';
 import { ResultColumnId } from '@/types';
 
-import { Cell } from './Cell';
 import styles from './Results.module.scss';
 import { type ResultData } from './types';
 
@@ -23,13 +21,12 @@ export const Result = ({
   index,
   highlightedIndex,
   results = [],
-  onBlur = noop,
-  onClick = noop,
-  onFocus = noop,
-  onMouseEnter = noop,
+  onBlur,
+  onClick,
+  onFocus,
+  onMouseEnter,
   style,
 }: RowComponentProps<ResultData>): ReactElement => {
-  const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
   const query = useTypedSelector(selectResultsQuery);
@@ -39,68 +36,61 @@ export const Result = ({
   const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
   const coordinates = useTypedSelector((state) => selectResultCoordinates(state, index));
 
-  const handleClick: MouseEventHandler = (event) => onClick(result, event);
-  const handleMouseEnter: MouseEventHandler = (event) => onMouseEnter(result, event);
-  const handleBlur: FocusEventHandler = (event) => onBlur(result, event);
-  const handleFocus: FocusEventHandler = (event) => onFocus(result, event);
+  const handleClick: MouseEventHandler | undefined = onClick && ((event) => onClick(result, event));
+  const handleMouseEnter: MouseEventHandler | undefined = onMouseEnter && ((event) => onMouseEnter(result, event));
+  const handleBlur: FocusEventHandler | undefined = onBlur && ((event) => onBlur(result, event));
+  const handleFocus: FocusEventHandler | undefined = onFocus && ((event) => onFocus(result, event));
 
   return (
-    <button
-      aria-current={index === highlightedIndex ? 'true' : undefined}
-      aria-hidden={isMatching ? undefined : 'true'}
+    <Row
       aria-label={result.word}
-      className={classNames(styles.result, {
-        [styles.highlighted]: index === highlightedIndex,
-      })}
       data-testid="result"
-      ref={ref}
+      highlighted={index === highlightedIndex}
+      inactive={!isMatching}
       style={style}
-      type="button"
       onBlur={handleBlur}
       onClick={handleClick}
       onFocus={handleFocus}
       onMouseEnter={handleMouseEnter}
     >
-      <span className={styles.resultContent}>
-        {columns[ResultColumnId.Coordinates] && (
-          <Cell className={styles.coordinates} translationKey="settings.showCoordinates" value={coordinates} />
-        )}
+      {columns[ResultColumnId.Coordinates] && (
+        <Cell className={styles.coordinates} translationKey="settings.showCoordinates" value={coordinates} />
+      )}
 
-        {columns[ResultColumnId.Word] && (
-          <Cell className={styles.word} translationKey="common.word" value={result.word}>
-            <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
-          </Cell>
-        )}
+      {columns[ResultColumnId.Word] && (
+        <Cell primary translationKey="common.word" value={result.word}>
+          <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
+        </Cell>
+      )}
 
-        {columns[ResultColumnId.TilesCount] && (
-          <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
-        )}
+      {columns[ResultColumnId.TilesCount] && (
+        <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
+      )}
 
-        {columns[ResultColumnId.VowelsCount] && (
-          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
-        )}
+      {columns[ResultColumnId.VowelsCount] && (
+        <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
+      )}
 
-        {columns[ResultColumnId.ConsonantsCount] && (
-          <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
-        )}
+      {columns[ResultColumnId.ConsonantsCount] && (
+        <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
+      )}
 
-        {columns[ResultColumnId.BlanksCount] && (
-          <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
-        )}
+      {columns[ResultColumnId.BlanksCount] && (
+        <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
+      )}
 
-        {columns[ResultColumnId.WordsCount] && (
-          <Cell
-            className={styles.stat}
-            translationKey="common.words"
-            tooltip={`${result.wordsCount.toLocaleString(locale)} (${words.join(separator)})`}
-            value={result.wordsCount}
-          />
-        )}
+      {columns[ResultColumnId.WordsCount] && (
+        <Cell
+          className={styles.stat}
+          translationKey="common.words"
+          tooltip={`${result.wordsCount.toLocaleString(locale)} (${words.join(separator)})`}
+          value={result.wordsCount}
+        />
+      )}
 
-        {columns[ResultColumnId.Points] && (
-          <Cell className={styles.points} dataTestId="points" translationKey="common.points" value={result.points} />
-        )}
-      </span>
-    </button>
+      {columns[ResultColumnId.Points] && (
+        <Cell className={styles.points} data-testid="points" translationKey="common.points" value={result.points} />
+      )}
+    </Row>
   );
 };

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

@@ -1,7 +1,5 @@
 @use 'styles/mixins' as *;
 
-$row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
-
 .results {
   position: relative;
   display: flex;
@@ -37,122 +35,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   }
 }
 
-.header {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: var(--border);
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.headerButton {
-  @include button-reset;
-  @include focus-effect;
-
-  cursor: pointer;
-
-  text-transform: uppercase;
-  transition:
-    background-color var(--transition--duration) var(--transition--easing),
-    color var(--transition--duration) var(--transition--easing);
-  background-color: var(--color--background);
-  height: 100%;
-
-  &:first-child {
-    border-start-start-radius: inherit;
-  }
-
-  &:last-child {
-    border-start-end-radius: inherit;
-  }
-
-  &:focus,
-  &:hover {
-    background-color: var(--color--primary);
-    color: var(--color--primary--opposite);
-  }
-}
-
-.headerButtonLabel {
-  @include ellipsis;
-
-  flex: 0 1 auto;
-  text-align: start;
-}
-
-.headerButtonIcon {
-  flex: 0 0 auto;
-  width: var(--results--icon--size);
-  height: var(--results--icon--size);
-}
-
-.result {
-  @include button-reset;
-
-  user-select: none;
-  cursor: pointer;
-  font-weight: 400;
-
-  &:focus,
-  &:hover,
-  &.highlighted {
-    &:not(:disabled) {
-      background-color: var(--color--primary);
-      color: var(--color--primary--opposite);
-    }
-  }
-
-  &[aria-hidden='true'] {
-    color: var(--color--inactive);
-
-    &:focus,
-    &:hover,
-    &.highlighted {
-      &:not(:disabled) {
-        background-color: var(--color--primary--light);
-        color: var(--color--primary--opposite);
-      }
-    }
-  }
-}
-
-.resultContent {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-
-  .word {
-    @include ellipsis;
-
-    display: flex;
-  }
-}
-
-.cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: var(--spacing--s);
-  line-height: var(--results--item--height);
-
-  .result &.word,
-  .headerButton.word & {
-    justify-content: flex-start;
-    padding-inline-start: $row-padding-horizontal;
-  }
-}
-
-.word {
-  flex: 1 1 0;
-  min-width: 0;
-  text-transform: uppercase;
-}
-
 .stat {
   $width: 55px;
 
@@ -181,14 +63,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   margin: var(--spacing--xl) auto 0;
 }
 
-.sortIcon {
-  $size: 19px;
-
-  flex: 0 0 auto;
-  width: $size;
-  height: $size;
-}
-
 .input {
   border-top: var(--border);
   border-bottom-left-radius: var(--border--radius);

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

@@ -1,27 +1,17 @@
 // Generated by scripts/generate-scss-types.ts - do not edit.
 declare const styles: {
-  readonly cell: string;
   readonly content: string;
   readonly coordinates: string;
   readonly emptyState: string;
-  readonly header: string;
-  readonly headerButton: string;
-  readonly headerButtonIcon: string;
-  readonly headerButtonLabel: string;
   readonly highlight: string;
-  readonly highlighted: string;
   readonly input: string;
   readonly list: string;
   readonly listContainer: string;
   readonly outdated: string;
   readonly points: string;
-  readonly result: string;
-  readonly resultContent: string;
   readonly results: string;
   readonly solveButton: string;
-  readonly sortIcon: string;
   readonly stat: string;
-  readonly word: string;
 };
 
 export default styles;

package/src/components/Results/Results.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { useEffect, useMemo, type FunctionComponent } from 'react';
+import { useCallback, useEffect, useMemo, type FunctionComponent } from 'react';
+import { useDispatch } from 'react-redux';
 import { List, useListRef } from 'react-window';
 import { useDebounce } from 'use-debounce';
 
@@ -7,9 +8,11 @@ import { useLatest } from '@/hooks/useLatest';
 import { LOCALE_FEATURES } from '@/i18n/constants';
 import { RESULTS_ITEM_HEIGHT, RESULTS_OVERSCAN_COUNT } from '@/parameters';
 import {
+  resultsSlice,
   selectAreResultsOutdated,
   selectLocale,
   selectProcessedResults,
+  selectResultsQuery,
   selectSolveError,
   selectSolveIsLoading,
   useTranslate,
@@ -18,7 +21,7 @@ import {
 
 import { EmptyState } from '../EmptyState';
 import { Loading } from '../Loading';
-import { ResultsInput } from '../ResultsInput';
+import { Search } from '../Table';
 
 import { Header } from './Header';
 import { Result } from './Result';
@@ -35,10 +38,12 @@ interface Props {
 const IS_LOADING_DEBOUNCE = 100;
 
 export const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIndex }) => {
+  const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
   const results = useTypedSelector(selectProcessedResults);
+  const query = useTypedSelector(selectResultsQuery);
   const isLoading = useTypedSelector(selectSolveIsLoading);
   const [isLoadingDebounced] = useDebounce(isLoading, IS_LOADING_DEBOUNCE);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
@@ -58,7 +63,14 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
   const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
   const scrollToIndexRef = useLatest(scrollToIndex);
   const hasResults = typeof error === 'undefined' && typeof results !== 'undefined';
-  const showInput = hasResults && results.length > 0 && !isOutdated;
+  const showSearch = hasResults && results.length > 0 && !isOutdated;
+
+  const handleQueryChange = useCallback(
+    (newQuery: string) => {
+      dispatch(resultsSlice.actions.changeQuery(newQuery));
+    },
+    [dispatch],
+  );
 
   useEffect(() => {
     // without setTimeout, the initial scrolling offset is calculated
@@ -119,7 +131,7 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
             )}
 
             {!isOutdated && results.length > 0 && (
-              <div className={styles.listContainer} onMouseLeave={callbacks.onMouseLeave}>
+              <div className={styles.listContainer}>
                 <List
                   className={classNames(styles.list, {
                     [styles.outdated]: isOutdated,
@@ -131,6 +143,7 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
                   rowCount={results.length}
                   rowHeight={RESULTS_ITEM_HEIGHT}
                   rowProps={itemData}
+                  onMouseLeave={callbacks.onMouseLeave}
                 />
               </div>
             )}
@@ -138,7 +151,14 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
         )}
       </div>
 
-      {showInput && <ResultsInput className={styles.input} />}
+      {showSearch && (
+        <Search
+          className={styles.input}
+          placeholder={translate('results.input.placeholder')}
+          value={query}
+          onChange={handleQueryChange}
+        />
+      )}
 
       {isLoadingDebounced && <Loading />}
     </div>

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

@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
 
-  @include media('<l', 'touch') {
+  @include media('compact', 'touch') {
     margin-bottom: calc(3 * var(--spacing--l) + var(--button--icon--size));
   }
 
@@ -31,7 +31,7 @@
   height: 100%;
   margin: 0 auto;
 
-  @include media('<l') {
+  @include media('compact') {
     grid-template-columns: 1fr;
   }
 }
@@ -54,7 +54,7 @@
   flex: 0 0 var(--solver-column--width);
   gap: var(--spacing);
 
-  @include media('<l') {
+  @include media('compact') {
     display: none;
   }
 }
@@ -106,7 +106,7 @@
   width: 100%;
   max-width: var(--controls-max-width);
 
-  @include media('>=l') {
+  @include media('desktop') {
     display: none;
   }
 }

package/src/components/Solver/Solver.tsx

@@ -3,13 +3,14 @@ import classNames from 'classnames';
 import { type FunctionComponent, memo, type SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { useIsCompactLayout } from '@/hooks/useIsCompactLayout';
 import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
 import {
   resultsSlice,
   selectAreResultsOutdated,
   selectProcessedResults,
   selectResultCandidate,
+  selectResultCandidateIndex,
   selectSolveError,
   solveSlice,
   useTranslate,
@@ -36,10 +37,11 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const showCompactControls = useMediaQuery('<l');
+  const showCompactControls = useIsCompactLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const results = useTypedSelector(selectProcessedResults);
+  const highlightedIndex = useTypedSelector(selectResultCandidateIndex);
   const store = useTypedStore();
   const [bestResult] = results || [];
   const touchCallbacks = useMemo(
@@ -100,7 +102,7 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
           </form>
 
           <div className={styles.column}>
-            <Results callbacks={callbacks} className={styles.results} />
+            <Results callbacks={callbacks} className={styles.results} highlightedIndex={highlightedIndex} />
 
             <div data-testid="dictionary" className={styles.dictionaryContainer}>
               <Dictionary className={styles.dictionary} />

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

@@ -96,7 +96,6 @@
   flex: 1;
   text-transform: uppercase;
   text-align: center;
-  white-space: pre-wrap;
 
   @include media('<xs') {
     padding: var(--spacing--m);
@@ -104,6 +103,11 @@
   }
 }
 
+.placeholder {
+  color: var(--color--foreground--secondary);
+  text-transform: none;
+}
+
 .iconContainer {
   flex: 0 0 auto;
   display: flex;

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss.d.ts

@@ -8,6 +8,7 @@ declare const styles: {
   readonly iconContainer: string;
   readonly insert: string;
   readonly loading: string;
+  readonly placeholder: string;
   readonly points: string;
   readonly resultCandidate: string;
   readonly resultCandidatePicker: string;

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -35,7 +35,7 @@ export const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onR
   const results = useTypedSelector(selectProcessedResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = resultCandidate && results ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
-  const disabled = isOutdated || !resultCandidate;
+  const disabled = isOutdated || !results || results.length === 0;
   const isPreviousDisabled = !results || index <= 0 || disabled;
   const isNextDisabled = !results || index >= results.length - 1 || disabled;
   const bothEnabled = !isPreviousDisabled && !isNextDisabled;
@@ -77,6 +77,7 @@ export const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onR
       <button
         aria-label={translate('results')}
         className={styles.resultCandidate}
+        data-testid="result-candidate-picker"
         disabled={disabled}
         type="button"
         onClick={onResultClick}
@@ -88,7 +89,9 @@ export const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onR
           </>
         )}
 
-        {!resultCandidate && <div className={styles.word}> </div>}
+        {!resultCandidate && (
+          <div className={classNames(styles.word, styles.placeholder)}>{translate('results.select')}</div>
+        )}
 
         <div className={styles.iconContainer}>
           {isLoading && <Spinner className={styles.loading} />}

package/src/components/Table/Cell.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { type FunctionComponent, type ReactNode } from 'react';
+
+import { selectLocale, useTranslate, useTypedSelector } from '@/state';
+import { type TranslationKey } from '@/types';
+
+import { Tooltip } from '../Tooltip';
+
+import styles from './Table.module.scss';
+
+interface Props {
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+  primary?: boolean;
+  translationKey?: TranslationKey;
+  tooltip?: string | number;
+  value: string | number;
+}
+
+export const Cell: FunctionComponent<Props> = ({
+  children,
+  className,
+  'data-testid': dataTestId,
+  primary,
+  translationKey,
+  tooltip,
+  value,
+}) => {
+  const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
+  const formattedValue = value.toLocaleString(locale);
+  const label = translationKey ? `${translate(translationKey)}: ` : '';
+
+  return (
+    <Tooltip tooltip={`${label}${tooltip || formattedValue}`}>
+      <div className={classNames(styles.cell, className, { [styles.primary]: primary })} data-testid={dataTestId}>
+        <span className={styles.cellValue}>{children || formattedValue}</span>
+      </div>
+    </Tooltip>
+  );
+};

package/src/components/Table/Header.tsx

@@ -0,0 +1,11 @@
+import { type FunctionComponent, type ReactNode } from 'react';
+
+import styles from './Table.module.scss';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const Header: FunctionComponent<Props> = ({ children }) => {
+  return <div className={styles.header}>{children}</div>;
+};

package/src/components/{Results → Table}/HeaderButton.tsx

@@ -1,41 +1,49 @@
 import classNames from 'classnames';
 import { type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
 
 import SortDown from '@/icons/SortDown.svg';
 import SortUp from '@/icons/SortUp.svg';
-import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from '@/state';
-import { type ResultColumnId, SortDirection, type TranslationKey } from '@/types';
+import { useTranslate } from '@/state';
+import { type Sort, SortDirection, type TranslationKey } from '@/types';
 
 import { Tooltip } from '../Tooltip';
 
-import styles from './Results.module.scss';
+import styles from './Table.module.scss';
 
-interface Props {
-  className: string;
+interface Props<Id extends string> {
+  className?: string;
   Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
-  id: ResultColumnId;
+  id: Id;
+  primary?: boolean;
+  sort: Sort<Id>;
   translationKey: TranslationKey;
+  onSort: (id: Id) => void;
 }
 
-export const HeaderButton = ({ className, Icon, id, translationKey }: Props): ReactElement => {
-  const dispatch = useDispatch();
+export const HeaderButton = <Id extends string>({
+  className,
+  Icon,
+  id,
+  primary,
+  sort,
+  translationKey,
+  onSort,
+}: Props<Id>): ReactElement => {
   const translate = useTranslate();
-  const sort = useTypedSelector(selectResultsSort);
 
   const handleClick = useCallback(() => {
-    dispatch(resultsSlice.actions.sort(id));
-  }, [dispatch, id]);
+    onSort(id);
+  }, [id, onSort]);
 
   return (
     <Tooltip tooltip={translate(translationKey)}>
       <button
         aria-label={translate(translationKey)}
-        className={classNames(styles.headerButton, className)}
+        className={classNames(styles.headerButton, className, { [styles.primary]: primary })}
         type="button"
         onClick={handleClick}
       >
-        <span className={styles.cell}>
+        <span className={classNames(styles.cell, { [styles.primary]: primary })}>
           {Icon && <Icon aria-hidden="true" className={styles.headerButtonIcon} role="img" />}
 
           {!Icon && <span className={styles.headerButtonLabel}>{translate(translationKey)}</span>}