scrabble-solver 2.18.9 → 2.18.10-alpha.1

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

@@ -1,143 +0,0 @@
-import { type Result } from '@scrabble-solver/types';
-import classNames from 'classnames';
-import { type FunctionComponent, memo, type SyntheticEvent, useEffect, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
-
-import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
-import {
-  resultsSlice,
-  selectAreResultsOutdated,
-  selectProcessedResults,
-  selectResultCandidate,
-  selectResultCandidateIndex,
-  selectSolveError,
-  solveSlice,
-  useTranslate,
-  useTypedSelector,
-  useTypedStore,
-} 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 { ResultCandidatePicker } from './components';
-import styles from './Solver.module.scss';
-
-interface Props {
-  className?: string;
-  onShowResults: () => void;
-}
-
-const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
-  const dispatch = useDispatch();
-  const translate = useTranslate();
-  const isTouchDevice = useIsTouchDevice();
-  const showCompactControls = useMediaQuery('<l');
-  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(
-    () => ({
-      onClick: (result: Result) => {
-        const isSelected = result === selectResultCandidate(store.getState());
-
-        if (isSelected) {
-          dispatch(resultsSlice.actions.applyResult(result));
-        } else {
-          dispatch(resultsSlice.actions.changeResultCandidate(result));
-        }
-      },
-    }),
-    [dispatch, store],
-  );
-  const mouseCallbacks = useMemo(
-    () => ({
-      onBlur: () => {
-        dispatch(resultsSlice.actions.changeResultCandidate(null));
-      },
-      onClick: (result: Result) => {
-        dispatch(resultsSlice.actions.applyResult(result));
-      },
-      onFocus: (result: Result) => {
-        dispatch(resultsSlice.actions.changeResultCandidate(result));
-      },
-      onMouseEnter: (result: Result) => {
-        dispatch(resultsSlice.actions.changeResultCandidate(result));
-      },
-      onMouseLeave: () => {
-        dispatch(resultsSlice.actions.changeResultCandidate(null));
-      },
-    }),
-    [dispatch],
-  );
-  const callbacks = isTouchDevice ? touchCallbacks : mouseCallbacks;
-
-  const handleSubmit = (event: SyntheticEvent) => {
-    event.preventDefault();
-
-    dispatch(solveSlice.actions.submit());
-  };
-
-  useEffect(() => {
-    if (showCompactControls && bestResult && !isOutdated) {
-      dispatch(resultsSlice.actions.changeResultCandidate(bestResult));
-    }
-  }, [bestResult, dispatch, showCompactControls, isOutdated]);
-
-  return (
-    <div className={classNames(styles.solver, className)}>
-      <div className={styles.container}>
-        <div className={styles.content}>
-          <form className={styles.boardContainer} onSubmit={handleSubmit}>
-            <Board className={styles.board} />
-            <input className={styles.submitInput} tabIndex={-1} type="submit" />
-          </form>
-
-          <div className={styles.column}>
-            <Results callbacks={callbacks} className={styles.results} highlightedIndex={highlightedIndex} />
-
-            <div data-testid="dictionary" className={styles.dictionaryContainer}>
-              <Dictionary className={styles.dictionary} />
-              <DictionaryInput className={styles.dictionaryInput} />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className={styles.bottomContainer}>
-        <div className={styles.bottomContent}>
-          <form onSubmit={handleSubmit}>
-            <Rack />
-            <input className={styles.submitInput} tabIndex={-1} type="submit" />
-          </form>
-
-          <div className={styles.controls}>
-            <ResultCandidatePicker onResultClick={onShowResults} />
-
-            {error && (
-              <Alert className={styles.emptyState} variant="error">
-                {error.message}
-              </Alert>
-            )}
-
-            {results && results.length === 0 && !isOutdated && (
-              <Alert className={styles.emptyState} variant="warning">
-                {translate('results.empty-state.no-results')}
-              </Alert>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const Solver = memo(SolverBase);

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

@@ -1,15 +0,0 @@
-@use 'styles/mixins' as *;
-
-.insertButton {
-  @include media('>=s') {
-    padding: var(--spacing--m) var(--spacing--xl);
-  }
-
-  @include media('<xs') {
-    padding: var(--spacing--m);
-  }
-}
-
-.icon {
-  transform: scale(1.5);
-}

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

@@ -1,7 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly icon: string;
-  readonly insertButton: string;
-};
-
-export default styles;

package/packages/scrabble-solver/src/components/Solver/components/InsertButton/InsertButton.tsx

@@ -1,40 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent } from 'react';
-import { useDispatch } from 'react-redux';
-
-import Check from '@/icons/Check.svg';
-import { resultsSlice, selectAreResultsOutdated, selectResultCandidate, useTranslate, useTypedSelector } from '@/state';
-
-import { Button } from '../../../Button';
-
-import styles from './InsertButton.module.scss';
-
-interface Props {
-  className?: string;
-}
-
-export const InsertButton: FunctionComponent<Props> = ({ className }) => {
-  const dispatch = useDispatch();
-  const translate = useTranslate();
-  const resultCandidate = useTypedSelector(selectResultCandidate);
-  const isOutdated = useTypedSelector(selectAreResultsOutdated);
-
-  const handleClick = () => {
-    if (resultCandidate) {
-      dispatch(resultsSlice.actions.applyResult(resultCandidate));
-    }
-  };
-
-  return (
-    <Button
-      aria-label={translate('results.insert')}
-      className={classNames(styles.insertButton, className)}
-      disabled={isOutdated || !resultCandidate}
-      Icon={Check}
-      iconClassName={styles.icon}
-      type="submit"
-      variant="primary"
-      onClick={handleClick}
-    />
-  );
-};

package/packages/scrabble-solver/src/components/Solver/components/InsertButton/index.ts

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

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

@@ -1,138 +0,0 @@
-@use 'styles/mixins' as *;
-
-.resultCandidatePicker {
-  position: relative;
-  display: flex;
-  gap: var(--spacing--l);
-
-  @include media('<xs') {
-    gap: var(--spacing--m);
-  }
-}
-
-.buttons {
-  flex: 0 0 auto;
-  display: flex;
-  border-radius: var(--border--radius);
-
-  &.bothEnabled {
-    box-shadow: var(--box-shadow);
-
-    .button {
-      box-shadow: none;
-    }
-  }
-}
-
-.button {
-  padding: var(--spacing--m);
-
-  &:focus-within {
-    z-index: 1;
-  }
-
-  &:first-child {
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    transform: rotate(180deg);
-  }
-}
-
-.resultCandidate {
-  @include button-reset;
-  @include focus-effect;
-
-  flex: 1;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  width: 100%;
-  border: var(--border);
-  border-radius: var(--border--radius);
-  background-color: var(--color--white);
-  box-shadow: var(--box-shadow);
-  cursor: pointer;
-
-  &[disabled] {
-    @include disabled;
-  }
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  overflow: hidden;
-}
-
-.points,
-.word {
-  padding: var(--spacing--m) var(--spacing--l);
-}
-
-.points {
-  flex: 0 0 auto;
-  font-weight: bold;
-  border-inline-end: var(--border);
-
-  @include media('<xs') {
-    border-inline-end: none;
-    padding-inline-end: var(--spacing--xs);
-  }
-}
-
-.word {
-  @include ellipsis;
-
-  flex: 1;
-  text-transform: uppercase;
-  text-align: center;
-
-  @include media('<xs') {
-    padding: var(--spacing--m);
-    text-align: start;
-  }
-}
-
-.placeholder {
-  color: var(--color--foreground--secondary);
-  text-transform: none;
-}
-
-.iconContainer {
-  flex: 0 0 auto;
-  display: flex;
-  padding-inline-end: var(--spacing--l);
-}
-
-.spinnerContainer {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.loading,
-.icon {
-  width: var(--button--icon--size);
-  height: var(--button--icon--size);
-  color: var(--color--inactive);
-}
-
-.loading {
-  border-color: var(--color--inactive);
-}
-
-.insert {
-  flex: 0 0 auto;
-}

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

@@ -1,19 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly bothEnabled: string;
-  readonly button: string;
-  readonly buttons: string;
-  readonly content: string;
-  readonly icon: string;
-  readonly iconContainer: string;
-  readonly insert: string;
-  readonly loading: string;
-  readonly placeholder: string;
-  readonly points: string;
-  readonly resultCandidate: string;
-  readonly resultCandidatePicker: string;
-  readonly spinnerContainer: string;
-  readonly word: string;
-};
-
-export default styles;

package/packages/scrabble-solver/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -1,105 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, type HTMLProps, type MouseEventHandler } from 'react';
-import { useDispatch } from 'react-redux';
-
-import ChevronDown from '@/icons/ChevronDown.svg';
-import ChevronLeft from '@/icons/ChevronLeft.svg';
-import ChevronRight from '@/icons/ChevronRight.svg';
-import {
-  resultsSlice,
-  selectAreResultsOutdated,
-  selectSolveIsLoading,
-  selectLocale,
-  selectProcessedResults,
-  selectResultCandidate,
-  useTranslate,
-  useTypedSelector,
-} from '@/state';
-
-import { Button } from '../../../Button';
-import { Spinner } from '../../../Spinner';
-import { InsertButton } from '../InsertButton';
-
-import styles from './ResultCandidatePicker.module.scss';
-
-interface Props extends HTMLProps<HTMLDivElement> {
-  onResultClick: MouseEventHandler<HTMLButtonElement>;
-}
-
-export const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultClick, ...props }) => {
-  const dispatch = useDispatch();
-  const translate = useTranslate();
-  const locale = useTypedSelector(selectLocale);
-  const isLoading = useTypedSelector(selectSolveIsLoading);
-  const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const results = useTypedSelector(selectProcessedResults);
-  const resultCandidate = useTypedSelector(selectResultCandidate);
-  const index = resultCandidate && results ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
-  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;
-
-  const handleNextClick = () => {
-    if (!isNextDisabled) {
-      const nextResult = results[index + 1];
-      dispatch(resultsSlice.actions.changeResultCandidate(nextResult));
-    }
-  };
-
-  const handlePreviousClick = () => {
-    if (!isPreviousDisabled) {
-      const previousResult = results[index - 1];
-      dispatch(resultsSlice.actions.changeResultCandidate(previousResult));
-    }
-  };
-
-  return (
-    <div className={classNames(styles.resultCandidatePicker, className)} {...props}>
-      <div className={classNames(styles.buttons, { [styles.bothEnabled]: bothEnabled })}>
-        <Button
-          aria-label={translate('common.previous')}
-          className={styles.button}
-          disabled={isPreviousDisabled}
-          Icon={ChevronLeft}
-          onClick={handlePreviousClick}
-        />
-
-        <Button
-          aria-label={translate('common.next')}
-          className={styles.button}
-          disabled={isNextDisabled}
-          Icon={ChevronRight}
-          onClick={handleNextClick}
-        />
-      </div>
-
-      <button
-        aria-label={translate('results')}
-        className={styles.resultCandidate}
-        data-testid="result-candidate-picker"
-        disabled={disabled}
-        type="button"
-        onClick={onResultClick}
-      >
-        {resultCandidate && (
-          <>
-            <div className={styles.points}>{resultCandidate.points.toLocaleString(locale)}</div>
-            <div className={styles.word}>{resultCandidate.word}</div>
-          </>
-        )}
-
-        {!resultCandidate && (
-          <div className={classNames(styles.word, styles.placeholder)}>{translate('results.select')}</div>
-        )}
-
-        <div className={styles.iconContainer}>
-          {isLoading && <Spinner className={styles.loading} />}
-          {!isLoading && <ChevronDown aria-hidden="true" className={styles.icon} role="img" />}
-        </div>
-      </button>
-
-      <InsertButton className={styles.insert} />
-    </div>
-  );
-};

package/packages/scrabble-solver/src/components/Solver/components/ResultCandidatePicker/index.ts

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

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

@@ -1,2 +0,0 @@
-export { InsertButton } from './InsertButton';
-export { ResultCandidatePicker } from './ResultCandidatePicker';

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

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

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

@@ -1,11 +0,0 @@
-@use 'styles/animations';
-
-.spinner {
-  width: var(--button--icon--size);
-  height: var(--button--icon--size);
-  border: var(--border);
-  border-width: 2px;
-  border-radius: 50%;
-  border-right-color: transparent !important;
-  animation: 750ms linear infinite rotate;
-}

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

@@ -1,10 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly hide: string;
-  readonly rotate: string;
-  readonly show: string;
-  readonly spinner: string;
-  readonly wave: string;
-};
-
-export default styles;

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

@@ -1,17 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent } from 'react';
-
-import { useTranslate } from '@/state';
-
-import styles from './Spinner.module.scss';
-
-interface Props {
-  className?: string;
-}
-
-export const Spinner: FunctionComponent<Props> = ({ className }) => {
-  const translate = useTranslate();
-  const translation = translate('common.loading');
-
-  return <div aria-label={translation} className={classNames(styles.spinner, className)} role="status" />;
-};

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

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

package/packages/scrabble-solver/src/components/Table/Cell.tsx

@@ -1,42 +0,0 @@
-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/packages/scrabble-solver/src/components/Table/Header.tsx

@@ -1,11 +0,0 @@
-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/packages/scrabble-solver/src/components/Table/HeaderButton.tsx

@@ -1,61 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
-
-import SortDown from '@/icons/SortDown.svg';
-import SortUp from '@/icons/SortUp.svg';
-import { useTranslate } from '@/state';
-import { type Sort, SortDirection, type TranslationKey } from '@/types';
-
-import { Tooltip } from '../Tooltip';
-
-import styles from './Table.module.scss';
-
-interface Props<Id extends string> {
-  className?: string;
-  Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
-  id: Id;
-  primary?: boolean;
-  sort: Sort<Id>;
-  translationKey: TranslationKey;
-  onSort: (id: Id) => void;
-}
-
-export const HeaderButton = <Id extends string>({
-  className,
-  Icon,
-  id,
-  primary,
-  sort,
-  translationKey,
-  onSort,
-}: Props<Id>): ReactElement => {
-  const translate = useTranslate();
-
-  const handleClick = useCallback(() => {
-    onSort(id);
-  }, [id, onSort]);
-
-  return (
-    <Tooltip tooltip={translate(translationKey)}>
-      <button
-        aria-label={translate(translationKey)}
-        className={classNames(styles.headerButton, className, { [styles.primary]: primary })}
-        type="button"
-        onClick={handleClick}
-      >
-        <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>}
-
-          {sort.column === id && (
-            <>
-              {sort.direction === SortDirection.Ascending && <SortUp className={styles.sortIcon} />}
-              {sort.direction === SortDirection.Descending && <SortDown className={styles.sortIcon} />}
-            </>
-          )}
-        </span>
-      </button>
-    </Tooltip>
-  );
-};