scrabble-solver 2.18.10-alpha.2 → 2.19.0-alpha.0

package/packages/scrabble-solver/src/components/Results/Header.tsx

@@ -1,114 +0,0 @@
-import { type FunctionComponent, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-
-import { HeaderButton, Header as TableHeader } from '@/components/Table';
-import { useColumns } from '@/hooks/useColumns';
-import GeoAlt from '@/icons/GeoAlt.svg';
-import OneTwoThree from '@/icons/OneTwoThree.svg';
-import Square from '@/icons/Square.svg';
-import SquareA from '@/icons/SquareA.svg';
-import SquareB from '@/icons/SquareB.svg';
-import Squares from '@/icons/Squares.svg';
-import Words from '@/icons/Words.svg';
-import { resultsSlice, selectResultsSort, useTypedSelector } from '@/state';
-import { ResultColumnId } from '@/types';
-
-import styles from './Results.module.scss';
-
-export const Header: FunctionComponent = () => {
-  const dispatch = useDispatch();
-  const columns = useColumns();
-  const sort = useTypedSelector(selectResultsSort);
-
-  const handleSort = useCallback(
-    (columnId: ResultColumnId) => {
-      dispatch(resultsSlice.actions.sort(columnId));
-    },
-    [dispatch],
-  );
-
-  return (
-    <TableHeader>
-      {columns[ResultColumnId.Coordinates] && (
-        <HeaderButton
-          className={styles.coordinates}
-          Icon={GeoAlt}
-          id={ResultColumnId.Coordinates}
-          sort={sort}
-          translationKey="settings.showCoordinates"
-          onSort={handleSort}
-        />
-      )}
-
-      {columns[ResultColumnId.Word] && (
-        <HeaderButton id={ResultColumnId.Word} primary sort={sort} translationKey="common.word" onSort={handleSort} />
-      )}
-
-      {columns[ResultColumnId.TilesCount] && (
-        <HeaderButton
-          className={styles.stat}
-          Icon={Squares}
-          id={ResultColumnId.TilesCount}
-          sort={sort}
-          translationKey="common.tiles"
-          onSort={handleSort}
-        />
-      )}
-
-      {columns[ResultColumnId.VowelsCount] && (
-        <HeaderButton
-          className={styles.stat}
-          Icon={SquareA}
-          id={ResultColumnId.VowelsCount}
-          sort={sort}
-          translationKey="common.vowels"
-          onSort={handleSort}
-        />
-      )}
-
-      {columns[ResultColumnId.ConsonantsCount] && (
-        <HeaderButton
-          className={styles.stat}
-          Icon={SquareB}
-          id={ResultColumnId.ConsonantsCount}
-          sort={sort}
-          translationKey="common.consonants"
-          onSort={handleSort}
-        />
-      )}
-
-      {columns[ResultColumnId.BlanksCount] && (
-        <HeaderButton
-          className={styles.stat}
-          Icon={Square}
-          id={ResultColumnId.BlanksCount}
-          sort={sort}
-          translationKey="common.blanks"
-          onSort={handleSort}
-        />
-      )}
-
-      {columns[ResultColumnId.WordsCount] && (
-        <HeaderButton
-          className={styles.stat}
-          Icon={Words}
-          id={ResultColumnId.WordsCount}
-          sort={sort}
-          translationKey="common.words"
-          onSort={handleSort}
-        />
-      )}
-
-      {columns[ResultColumnId.Points] && (
-        <HeaderButton
-          className={styles.points}
-          Icon={OneTwoThree}
-          id={ResultColumnId.Points}
-          sort={sort}
-          translationKey="common.points"
-          onSort={handleSort}
-        />
-      )}
-    </TableHeader>
-  );
-};

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -1,101 +0,0 @@
-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 { createHighlightWords } from '@/lib/createHighlightWords';
-import {
-  selectIsResultMatching,
-  selectLocale,
-  selectResultCoordinates,
-  selectResultsQuery,
-  useTypedSelector,
-} from '@/state';
-import { ResultColumnId } from '@/types';
-
-import styles from './Results.module.scss';
-import { type ResultData } from './types';
-
-export const Result = ({
-  index,
-  highlightedIndex,
-  results = [],
-  onBlur,
-  onClick,
-  onFocus,
-  onMouseEnter,
-  style,
-}: RowComponentProps<ResultData>): ReactElement => {
-  const columns = useColumns();
-  const locale = useTypedSelector(selectLocale);
-  const query = useTypedSelector(selectResultsQuery);
-  const { direction, separator } = LOCALE_FEATURES[locale];
-  const result = results[index];
-  const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
-  const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
-  const coordinates = useTypedSelector((state) => selectResultCoordinates(state, index));
-
-  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 (
-    <Row
-      aria-label={result.word}
-      data-testid="result"
-      highlighted={index === highlightedIndex}
-      inactive={!isMatching}
-      style={style}
-      onBlur={handleBlur}
-      onClick={handleClick}
-      onFocus={handleFocus}
-      onMouseEnter={handleMouseEnter}
-    >
-      {columns[ResultColumnId.Coordinates] && (
-        <Cell className={styles.coordinates} translationKey="settings.showCoordinates" value={coordinates} />
-      )}
-
-      {columns[ResultColumnId.Word] && (
-        <Cell primary translationKey="common.word" value={result.word}>
-          <Highlighter
-            highlightClassName={styles.highlight}
-            searchWords={createHighlightWords(query)}
-            textToHighlight={result.word}
-          />
-        </Cell>
-      )}
-
-      {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.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.WordsCount] && (
-        <Cell
-          className={styles.stat}
-          tooltip={`${result.wordsCount.toLocaleString(locale)} (${words.join(separator)})`}
-          translationKey="common.words"
-          value={result.wordsCount}
-        />
-      )}
-
-      {columns[ResultColumnId.Points] && (
-        <Cell className={styles.points} data-testid="points" translationKey="common.points" value={result.points} />
-      )}
-    </Row>
-  );
-};

package/packages/scrabble-solver/src/components/Results/Results.module.scss

@@ -1,76 +0,0 @@
-@use 'styles/mixins' as *;
-
-.results {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--color--background--element);
-  border: var(--border);
-  border-radius: var(--border--radius);
-}
-
-.emptyState {
-  flex: 1;
-}
-
-.content {
-  flex: 1;
-  position: relative;
-  height: 100%;
-}
-
-.listContainer {
-  position: absolute;
-  inset: 0;
-}
-
-.list {
-  @include scrollbars;
-
-  transition: var(--transition);
-
-  &.outdated {
-    filter: blur(2px);
-  }
-}
-
-.stat {
-  $width: 55px;
-
-  flex: 0 0 $width;
-  max-width: $width;
-  justify-content: center;
-}
-
-.points {
-  $width: 80px;
-
-  flex: 0 0 $width;
-  max-width: $width;
-  font-weight: bold;
-}
-
-.coordinates {
-  $width: 55px;
-
-  flex: 0 0 $width;
-  max-width: $width;
-}
-
-.solveButton {
-  display: block;
-  margin: var(--spacing--xl) auto 0;
-}
-
-.input {
-  border-top: var(--border);
-  border-bottom-left-radius: var(--border--radius);
-  border-bottom-right-radius: var(--border--radius);
-}
-
-.highlight {
-  background-color: var(--color--mark);
-  color: var(--color--foreground);
-  border-radius: var(--border--radius);
-}

package/packages/scrabble-solver/src/components/Results/Results.module.scss.d.ts

@@ -1,17 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly content: string;
-  readonly coordinates: string;
-  readonly emptyState: string;
-  readonly highlight: string;
-  readonly input: string;
-  readonly list: string;
-  readonly listContainer: string;
-  readonly outdated: string;
-  readonly points: string;
-  readonly results: string;
-  readonly solveButton: string;
-  readonly stat: string;
-};
-
-export default styles;

package/packages/scrabble-solver/src/components/Results/Results.tsx

@@ -1,164 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, useCallback, useEffect, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
-import { List, useListRef } from 'react-window';
-import { useDebounce } from 'use-debounce';
-
-import { useLatest } from '@/hooks/useLatest';
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import { LOADING_DELAY, RESULTS_ITEM_HEIGHT, RESULTS_OVERSCAN_COUNT } from '@/parameters';
-import {
-  resultsSlice,
-  selectAreResultsOutdated,
-  selectLocale,
-  selectProcessedResults,
-  selectResultsQuery,
-  selectSolveError,
-  selectSolveIsLoading,
-  useTranslate,
-  useTypedSelector,
-} from '@/state';
-
-import { EmptyState } from '../EmptyState';
-import { Loading } from '../Loading';
-import { Search } from '../Table';
-
-import { Header } from './Header';
-import { Result } from './Result';
-import styles from './Results.module.scss';
-import { SolveButton } from './SolveButton';
-import { type ResultCallbacks, type ResultData } from './types';
-
-interface Props {
-  callbacks: ResultCallbacks;
-  className?: string;
-  highlightedIndex?: number;
-}
-
-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, LOADING_DELAY);
-  const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const error = useTypedSelector(selectSolveError);
-  const itemData = useMemo<ResultData>(
-    () => ({
-      highlightedIndex,
-      results,
-      onBlur: callbacks.onBlur,
-      onClick: callbacks.onClick,
-      onFocus: callbacks.onFocus,
-      onMouseEnter: callbacks.onMouseEnter,
-    }),
-    [callbacks, highlightedIndex, results],
-  );
-  const listRef = useListRef(null);
-  const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
-  const scrollToIndexRef = useLatest(scrollToIndex);
-  const hasResults = typeof error === 'undefined' && typeof results !== 'undefined';
-  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
-    // incorrectly, as the list is not fully rendered by the browser yet
-    const timeout = globalThis.setTimeout(() => {
-      listRef.current?.scrollToRow({
-        align: 'center',
-        behavior: 'instant',
-        index: scrollToIndexRef.current,
-      });
-    }, 0);
-
-    return () => {
-      globalThis.clearTimeout(timeout);
-    };
-  }, [results, listRef, scrollToIndexRef]);
-
-  return (
-    <div
-      aria-busy={isLoadingDebounced}
-      aria-label={translate('results')}
-      className={classNames(styles.results, className)}
-      data-outdated={isOutdated}
-      data-testid="results"
-      role="region"
-    >
-      <Header />
-
-      <div aria-live="polite" className={styles.content}>
-        {typeof error !== 'undefined' && (
-          <EmptyState className={styles.emptyState} variant="error">
-            {error.message}
-          </EmptyState>
-        )}
-
-        {typeof error === 'undefined' && typeof results === 'undefined' && !isLoading && (
-          <EmptyState className={styles.emptyState} variant="info">
-            {translate('results.empty-state.uninitialized')}
-
-            <SolveButton className={styles.solveButton} />
-          </EmptyState>
-        )}
-
-        {hasResults && (
-          <>
-            {isOutdated && (
-              <EmptyState className={styles.emptyState} variant="info">
-                {translate('results.empty-state.outdated')}
-
-                <SolveButton className={styles.solveButton} />
-              </EmptyState>
-            )}
-
-            {!isOutdated && results.length === 0 && (
-              <EmptyState className={styles.emptyState} variant="warning">
-                {translate('results.empty-state.no-results')}
-              </EmptyState>
-            )}
-
-            {!isOutdated && results.length > 0 && (
-              <div className={styles.listContainer}>
-                <List
-                  className={classNames(styles.list, {
-                    [styles.outdated]: isOutdated,
-                  })}
-                  dir={direction}
-                  listRef={listRef}
-                  overscanCount={RESULTS_OVERSCAN_COUNT}
-                  rowComponent={Result}
-                  rowCount={results.length}
-                  rowHeight={RESULTS_ITEM_HEIGHT}
-                  rowProps={itemData}
-                  onMouseLeave={callbacks.onMouseLeave}
-                />
-              </div>
-            )}
-          </>
-        )}
-      </div>
-
-      {showSearch && (
-        <Search
-          className={styles.input}
-          placeholder={translate('results.input.placeholder')}
-          value={query}
-          onChange={handleQueryChange}
-        />
-      )}
-
-      {isLoadingDebounced && <Loading />}
-    </div>
-  );
-};

package/packages/scrabble-solver/src/components/Results/SolveButton.tsx

@@ -1,45 +0,0 @@
-import { type FunctionComponent } from 'react';
-import { useDispatch } from 'react-redux';
-
-import Search from '@/icons/Search.svg';
-import {
-  selectAreResultsOutdated,
-  selectRack,
-  selectSolveIsLoading,
-  solveSlice,
-  useTranslate,
-  useTypedSelector,
-} from '@/state';
-
-import { Button } from '../Button';
-
-interface Props {
-  className?: string;
-}
-
-export const SolveButton: FunctionComponent<Props> = ({ className }) => {
-  const dispatch = useDispatch();
-  const translate = useTranslate();
-  const isLoading = useTypedSelector(selectSolveIsLoading);
-  const rack = useTypedSelector(selectRack);
-  const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const hasTiles = rack.some((tile) => tile !== null);
-
-  const handleClick = () => {
-    dispatch(solveSlice.actions.submit());
-  };
-
-  return (
-    <Button
-      aria-label={translate('results.solve')}
-      className={className}
-      disabled={isLoading || !isOutdated || !hasTiles}
-      Icon={Search}
-      type="submit"
-      variant="primary"
-      onClick={handleClick}
-    >
-      {translate('results.solve')}
-    </Button>
-  );
-};

package/packages/scrabble-solver/src/components/Results/index.ts

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

package/packages/scrabble-solver/src/components/Results/types.ts

@@ -1,15 +0,0 @@
-import { type Result } from '@scrabble-solver/types';
-import { type FocusEvent, type MouseEvent, type MouseEventHandler } from 'react';
-
-export interface ResultCallbacks {
-  onBlur?: (result: Result, event: FocusEvent) => void;
-  onClick?: (result: Result, event: MouseEvent) => void;
-  onFocus?: (result: Result, event: FocusEvent) => void;
-  onMouseEnter?: (result: Result, event: MouseEvent) => void;
-  onMouseLeave?: MouseEventHandler;
-}
-
-export interface ResultData extends Omit<ResultCallbacks, 'onMouseLeave'> {
-  highlightedIndex?: number;
-  results: Result[] | undefined;
-}

package/packages/scrabble-solver/src/components/Solver/Solver.module.scss

@@ -1,116 +0,0 @@
-@use 'styles/mixins' as *;
-
-.solver {
-  --spacing: var(--components-spacing);
-
-  position: relative;
-  margin: 0 var(--spacing);
-  display: flex;
-  flex-direction: column;
-
-  @include media('<l', 'touch') {
-    margin-bottom: calc(3 * var(--spacing--l) + var(--button--icon--size));
-  }
-
-  @include media('<xs', 'touch') {
-    margin-bottom: calc(1 * var(--spacing--m) + 2 * var(--spacing--l) + var(--button--icon--size));
-  }
-}
-
-.container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.content {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) var(--solver-column--width);
-  gap: var(--spacing);
-  height: 100%;
-  margin: 0 auto;
-
-  @include media('<l') {
-    grid-template-columns: 1fr;
-  }
-}
-
-.boardContainer {
-  position: relative;
-}
-
-.board {
-  margin: 0 auto;
-}
-
-.submitInput {
-  display: none;
-}
-
-.column {
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 var(--solver-column--width);
-  gap: var(--spacing);
-
-  @include media('<l') {
-    display: none;
-  }
-}
-
-.results {
-  box-shadow: var(--box-shadow);
-}
-
-.dictionaryContainer {
-  flex: 0 0 auto;
-  height: var(--dictionary--height);
-  display: flex;
-  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 {
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-}
-
-.bottomContent {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing);
-  margin: var(--spacing) auto;
-  min-width: 0;
-}
-
-.controls {
-  width: 100%;
-  max-width: var(--controls-max-width);
-
-  @include media('>=l') {
-    display: none;
-  }
-}
-
-.emptyState {
-  margin-top: var(--spacing);
-}

package/packages/scrabble-solver/src/components/Solver/Solver.module.scss.d.ts

@@ -1,20 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly board: string;
-  readonly boardContainer: string;
-  readonly bottomContainer: string;
-  readonly bottomContent: string;
-  readonly column: string;
-  readonly container: string;
-  readonly content: string;
-  readonly controls: string;
-  readonly dictionary: string;
-  readonly dictionaryContainer: string;
-  readonly dictionaryInput: string;
-  readonly emptyState: string;
-  readonly results: string;
-  readonly solver: string;
-  readonly submitInput: string;
-};
-
-export default styles;