scrabble-solver 2.18.10-alpha.1 → 2.18.10-alpha.2

package/packages/scrabble-solver/src/components/Tooltip/TooltipContent.tsx

@@ -0,0 +1,53 @@
+import { FloatingArrow, FloatingPortal, useDelayGroup, useMergeRefs, useTransitionStyles } from '@floating-ui/react';
+import { type HTMLProps, forwardRef } from 'react';
+
+import { TOOLTIP_DURATION } from '@/parameters';
+
+import { useTooltipContext } from './context';
+import styles from './Tooltip.module.scss';
+
+type Props = HTMLProps<HTMLDivElement>;
+
+const INSTANT_DURATION = 0;
+
+export const TooltipContent = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const state = useTooltipContext();
+  const { context } = state;
+  const { isInstantPhase, currentId } = useDelayGroup(context, { id: context.floatingId });
+  const finalRef = useMergeRefs([state.refs.setFloating, ref]);
+
+  const instantPhaseDuration = {
+    open: INSTANT_DURATION,
+    close: currentId === context.floatingId ? TOOLTIP_DURATION : INSTANT_DURATION,
+  };
+
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: isInstantPhase ? instantPhaseDuration : TOOLTIP_DURATION,
+    initial: {
+      opacity: 0,
+    },
+  });
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <FloatingPortal>
+      <div
+        className={styles.tooltip}
+        ref={finalRef}
+        style={{
+          ...state.floatingStyles,
+          ...props.style,
+          ...transitionStyles,
+        }}
+        {...state.getFloatingProps(props)}
+      >
+        <div>{props.children}</div>
+
+        <FloatingArrow className={styles.arrow} context={context} ref={state.arrowRef} />
+      </div>
+    </FloatingPortal>
+  );
+});

package/packages/scrabble-solver/src/components/Tooltip/TooltipTrigger.tsx

@@ -0,0 +1,30 @@
+import { useMergeRefs } from '@floating-ui/react';
+import { isObject } from '@scrabble-solver/types';
+import { type HTMLProps, type ReactElement, type RefObject, cloneElement, forwardRef, isValidElement } from 'react';
+
+import { useTooltipContext } from './context';
+
+type Props = HTMLProps<HTMLElement>;
+
+export const TooltipTrigger = forwardRef<HTMLElement, Props>(({ children, ...props }, ref) => {
+  const state = useTooltipContext();
+  const childrenElement = children as ReactElement<{
+    ref: RefObject<HTMLElement>;
+  }>;
+  const finalRef = useMergeRefs([state.refs.setReference, ref, childrenElement.props.ref]);
+
+  if (!isValidElement(children)) {
+    throw new Error("TooltipTrigger's children are not a valid element");
+  }
+
+  return cloneElement(
+    children,
+    state.getReferenceProps({
+      ref: finalRef,
+      ...props,
+      ...(isObject(children.props) ? children.props : {}),
+      // @ts-expect-error incorrect @floating-ui typings
+      'data-state': state.open ? 'open' : 'closed',
+    }),
+  );
+});

package/packages/scrabble-solver/src/components/Tooltip/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+import { type useTooltip } from './useTooltip';
+
+type TooltipContextType = ReturnType<typeof useTooltip> | null;
+
+export const TooltipContext = createContext<TooltipContextType>(null);
+
+export const useTooltipContext = () => {
+  const context = useContext(TooltipContext);
+
+  if (context === null) {
+    throw new Error('Tooltip components must be wrapped in <Tooltip />');
+  }
+
+  return context;
+};

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

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

package/packages/scrabble-solver/src/components/Tooltip/useTooltip.ts

@@ -0,0 +1,55 @@
+import {
+  type Placement,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useDelayGroup,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { useMemo, useRef, useState } from 'react';
+
+const ARROW_SIZE = 7;
+const ARROW_GAP = 3;
+const PADDING = 10;
+
+interface TooltipOptions {
+  placement?: Placement;
+}
+
+export const useTooltip = ({ placement = 'top' }: TooltipOptions = {}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const data = useFloating({
+    placement,
+    strategy: 'fixed',
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [flip(), shift({ padding: PADDING }), offset(ARROW_SIZE + ARROW_GAP), arrow({ element: arrowRef })],
+  });
+  const { context } = data;
+  const { delay } = useDelayGroup(context);
+  const hover = useHover(context, { move: false, delay });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context, { ancestorScroll: true });
+  const role = useRole(context, { role: 'tooltip' });
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+
+  return useMemo(
+    () => ({
+      arrowRef,
+      open: isOpen,
+      setOpen: setIsOpen,
+      ...interactions,
+      ...data,
+    }),
+    [arrowRef, isOpen, setIsOpen, interactions, data],
+  );
+};

package/packages/scrabble-solver/src/hooks/useColumns.ts

@@ -0,0 +1,69 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useMemo } from 'react';
+
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { selectLocale, useTypedSelector } from '@/state';
+import { ResultColumnId } from '@/types';
+
+import { useMediaQueries } from './useMediaQueries';
+
+const COLUMNS_XS = [ResultColumnId.Coordinates, ResultColumnId.Word, ResultColumnId.Points];
+
+const COLUMNS_S = [...COLUMNS_XS, ResultColumnId.BlanksCount, ResultColumnId.WordsCount];
+
+const COLUMNS_M = [...COLUMNS_XS];
+
+const COLUMNS_L = [...COLUMNS_XS];
+
+const selectColumns = createSelector([selectLocale], (locale) => {
+  const { consonants, vowels } = LOCALE_FEATURES[locale];
+  const columns: ResultColumnId[] = [
+    ResultColumnId.Word,
+    ResultColumnId.TilesCount,
+    ResultColumnId.BlanksCount,
+    ResultColumnId.WordsCount,
+    ResultColumnId.Points,
+    ResultColumnId.Coordinates,
+  ];
+
+  if (vowels) {
+    columns.push(ResultColumnId.VowelsCount);
+  }
+
+  if (consonants) {
+    columns.push(ResultColumnId.ConsonantsCount);
+  }
+
+  return columns;
+});
+
+export const useColumns = (): Partial<Record<ResultColumnId, boolean>> => {
+  const columns = useTypedSelector(selectColumns);
+  const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL } = useMediaQueries();
+
+  const filteredColumns = useMemo(() => {
+    if (isLessThanXs) {
+      return columns.filter((columnId) => COLUMNS_XS.includes(columnId));
+    }
+
+    if (isLessThanS) {
+      return columns.filter((columnId) => COLUMNS_S.includes(columnId));
+    }
+
+    if (isLessThanM) {
+      return columns.filter((columnId) => COLUMNS_M.includes(columnId));
+    }
+
+    if (isLessThanL) {
+      return columns.filter((columnId) => COLUMNS_L.includes(columnId));
+    }
+
+    return columns;
+  }, [columns, isLessThanXs, isLessThanS, isLessThanM, isLessThanL]);
+
+  const columnsMap = useMemo(() => {
+    return Object.fromEntries(filteredColumns.map((column) => [column, true]));
+  }, [filteredColumns]);
+
+  return columnsMap;
+};

package/packages/scrabble-solver/src/hooks/useDeferredRender.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * False during SSR and hydration.
+ */
+export const useDeferredRender = (): boolean => {
+  const [canRender, setCanRender] = useState(false);
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      return setCanRender(true);
+    }, 0);
+
+    return () => {
+      return window.clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return canRender;
+};

package/packages/scrabble-solver/src/hooks/useDirection.ts

@@ -0,0 +1,21 @@
+import { type TextDirection } from '@scrabble-solver/types';
+import { useEffect } from 'react';
+
+import { noop } from '@/lib/noop';
+
+export const useDirection = (direction: TextDirection) => {
+  useEffect(() => {
+    const html = document.body.parentElement;
+
+    if (!html || html.dir === direction) {
+      return noop;
+    }
+
+    const old = html.dir;
+    html.dir = direction;
+
+    return () => {
+      html.dir = old;
+    };
+  }, [direction]);
+};

package/packages/scrabble-solver/src/hooks/useEffectOnce.ts

@@ -0,0 +1,11 @@
+import { type EffectCallback, useEffect } from 'react';
+
+import { useLatest } from './useLatest';
+
+export const useEffectOnce = (effect: EffectCallback) => {
+  const effectRef = useLatest(effect);
+
+  return useEffect(() => {
+    effectRef.current();
+  }, [effectRef]);
+};

package/packages/scrabble-solver/src/hooks/useIsTouchDevice.ts

@@ -0,0 +1,5 @@
+import { useMedia } from './useMedia';
+
+export const useIsTouchDevice = () => {
+  return useMedia('(hover: none)', false);
+};

package/packages/scrabble-solver/src/hooks/useLanguage.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+import { noop } from '@/lib/noop';
+
+export const useLanguage = (language: string) => {
+  useEffect(() => {
+    const html = document.body.parentElement;
+
+    if (!html || html.lang === language) {
+      return noop;
+    }
+
+    const old = html.lang;
+    html.lang = language;
+
+    return () => {
+      html.lang = old;
+    };
+  }, [language]);
+};

package/packages/scrabble-solver/src/hooks/useLatest.ts

@@ -0,0 +1,11 @@
+import { useRef } from 'react';
+
+interface Latest<T> {
+  readonly current: T;
+}
+
+export const useLatest = <T>(value: T): Latest<T> => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};

package/packages/scrabble-solver/src/hooks/useLocalStorage.ts

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react';
+
+import { localStorage, selectBoard, selectIsHydrated, selectRack, selectSettings, useTypedSelector } from '@/state';
+
+type WriteFlags = {
+  board: boolean;
+  rack: boolean;
+  settings: boolean;
+};
+
+export const useLocalStorage = () => {
+  const isHydrated = useTypedSelector(selectIsHydrated);
+  const board = useTypedSelector(selectBoard);
+  const rack = useTypedSelector(selectRack);
+  const settings = useTypedSelector(selectSettings);
+  const hasSkippedFirstWrite = useRef<WriteFlags>({
+    board: false,
+    rack: false,
+    settings: false,
+  });
+
+  useEffect(() => {
+    if (isHydrated && board && !isFirstWriteAfterHydration(hasSkippedFirstWrite.current, 'board')) {
+      localStorage.setBoard(board);
+    }
+  }, [isHydrated, board]);
+
+  useEffect(() => {
+    if (isHydrated && rack && !isFirstWriteAfterHydration(hasSkippedFirstWrite.current, 'rack')) {
+      localStorage.setRack(rack);
+    }
+  }, [isHydrated, rack]);
+
+  useEffect(() => {
+    if (isHydrated && !isFirstWriteAfterHydration(hasSkippedFirstWrite.current, 'settings')) {
+      localStorage.setSettings(settings);
+    }
+  }, [isHydrated, settings]);
+};
+
+// Each effect's first post-hydration run would only write back what hydration just read, so it is skipped
+function isFirstWriteAfterHydration(flags: WriteFlags, key: keyof WriteFlags): boolean {
+  if (flags[key]) {
+    return false;
+  }
+
+  flags[key] = true;
+  return true;
+}

package/packages/scrabble-solver/src/hooks/useMedia.ts

@@ -0,0 +1,34 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+export const useMedia = (query: string, defaultState = false) => {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const mediaQueryList = getMediaQueryList(query);
+      mediaQueryList.addEventListener('change', onChange);
+
+      return () => {
+        mediaQueryList.removeEventListener('change', onChange);
+      };
+    },
+    [query],
+  );
+
+  const getSnapshot = useCallback(() => getMediaQueryList(query).matches, [query]);
+  const getServerSnapshot = useCallback(() => defaultState, [defaultState]);
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};
+
+// cache because matchMedia returns a new MediaQueryList on every call
+const mediaQueryLists = new Map<string, MediaQueryList>();
+
+function getMediaQueryList(query: string): MediaQueryList {
+  let mediaQueryList = mediaQueryLists.get(query);
+
+  if (!mediaQueryList) {
+    mediaQueryList = window.matchMedia(query);
+    mediaQueryLists.set(query, mediaQueryList);
+  }
+
+  return mediaQueryList;
+}

package/packages/scrabble-solver/src/hooks/useMediaQueries.ts

@@ -0,0 +1,11 @@
+import { useMediaQuery } from './useMediaQuery';
+
+export const useMediaQueries = () => {
+  const isLessThanXs = useMediaQuery('<xs');
+  const isLessThanS = useMediaQuery('<s');
+  const isLessThanM = useMediaQuery('<m');
+  const isLessThanL = useMediaQuery('<l');
+  const isLessThanXl = useMediaQuery('<xl');
+
+  return { isLessThanXs, isLessThanS, isLessThanM, isLessThanL, isLessThanXl };
+};

package/packages/scrabble-solver/src/hooks/useMediaQuery.ts

@@ -0,0 +1,10 @@
+import { buildMediaQuery } from 'include-media-query-builder';
+
+import { BREAKPOINTS } from '@/parameters';
+
+import { useMedia } from './useMedia';
+
+export const useMediaQuery = (query: string[] | string, defaultState?: boolean): boolean => {
+  const mediaQuery = buildMediaQuery(BREAKPOINTS, query);
+  return useMedia(mediaQuery, defaultState);
+};

package/packages/scrabble-solver/src/i18n/constants.ts

@@ -0,0 +1,106 @@
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
+import { type TextDirection, Locale } from '@scrabble-solver/types';
+
+interface LocaleFeatures {
+  comma: string;
+  consonants: boolean;
+  direction: TextDirection;
+  label: string;
+  locale: Locale;
+  name: string;
+  separator: string;
+  vowels: boolean;
+}
+
+export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
+  [Locale.DE_DE]: {
+    comma: COMMA_LATIN,
+    consonants: true,
+    direction: 'ltr',
+    label: 'Deutsch',
+    locale: Locale.DE_DE,
+    name: 'German',
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
+  },
+  [Locale.EN_GB]: {
+    comma: COMMA_LATIN,
+    consonants: true,
+    direction: 'ltr',
+    label: 'English (GB)',
+    locale: Locale.EN_GB,
+    name: 'English (GB)',
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
+  },
+  [Locale.EN_US]: {
+    comma: COMMA_LATIN,
+    consonants: true,
+    direction: 'ltr',
+    label: 'English (US)',
+    locale: Locale.EN_US,
+    name: 'English (US)',
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
+  },
+  [Locale.ES_ES]: {
+    comma: COMMA_LATIN,
+    consonants: true,
+    direction: 'ltr',
+    label: 'Español',
+    locale: Locale.ES_ES,
+    name: 'Spanish',
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
+  },
+  [Locale.FA_IR]: {
+    comma: COMMA_ARABIC,
+    consonants: false,
+    direction: 'rtl',
+    label: 'فارسی',
+    locale: Locale.FA_IR,
+    name: 'Persian',
+    separator: `${COMMA_ARABIC} `,
+    vowels: false,
+  },
+  [Locale.FR_FR]: {
+    comma: COMMA_LATIN,
+    consonants: true,
+    direction: 'ltr',
+    label: 'Français',
+    locale: Locale.FR_FR,
+    name: 'French',
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
+  },
+  [Locale.PL_PL]: {
+    comma: COMMA_LATIN,
+    consonants: true,
+    direction: 'ltr',
+    label: 'Polski',
+    locale: Locale.PL_PL,
+    name: 'Polish',
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
+  },
+  [Locale.RO_RO]: {
+    comma: COMMA_LATIN,
+    consonants: true,
+    direction: 'ltr',
+    label: 'Română',
+    locale: Locale.RO_RO,
+    name: 'Romanian',
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
+  },
+  [Locale.TR_TR]: {
+    comma: COMMA_LATIN,
+    consonants: true,
+    direction: 'ltr',
+    label: 'Türkçe',
+    locale: Locale.TR_TR,
+    name: 'Turkish',
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
+  },
+};

package/packages/scrabble-solver/src/i18n/i18n.ts

@@ -0,0 +1,25 @@
+import { Locale } from '@scrabble-solver/types';
+
+import { type Translations } from '@/types';
+
+import english from './languages/english.json';
+
+/**
+ * English ships in the main bundle so the SSR and the pre-hydration UI
+ * always have complete translations.
+ */
+export const englishTranslations: Translations = english;
+
+const loadTranslationsPerLocale: Record<Locale, () => Promise<Translations>> = {
+  [Locale.DE_DE]: async () => (await import('./languages/german.json')).default,
+  [Locale.EN_GB]: async () => english,
+  [Locale.EN_US]: async () => english,
+  [Locale.ES_ES]: async () => (await import('./languages/spanish.json')).default,
+  [Locale.FA_IR]: async () => (await import('./languages/persian.json')).default,
+  [Locale.FR_FR]: async () => (await import('./languages/french.json')).default,
+  [Locale.PL_PL]: async () => (await import('./languages/polish.json')).default,
+  [Locale.RO_RO]: async () => (await import('./languages/romanian.json')).default,
+  [Locale.TR_TR]: async () => (await import('./languages/turkish.json')).default,
+};
+
+export const loadTranslations = (locale: Locale): Promise<Translations> => loadTranslationsPerLocale[locale]();

package/packages/scrabble-solver/src/i18n/languages/english.json

@@ -0,0 +1,88 @@
+{
+  "cell.enter-word": "Enter word",
+  "cell.filter-cell.exclude": "Exclude destination",
+  "cell.filter-cell.include": "Target destination",
+  "cell.set-blank": "Mark it a blank",
+  "cell.set-not-blank": "Mark it not a blank",
+  "cell.tile.location": "Board: tile {{coordinates}}",
+  "cell.toggle-direction": "Typing direction",
+  "common.arrows": "Arrow keys",
+  "common.blanks": "Blanks",
+  "common.clear": "Clear",
+  "common.close": "Close",
+  "common.consonants": "Consonants",
+  "common.loading": "Loading",
+  "common.next": "Next",
+  "common.off": "Off",
+  "common.on": "On",
+  "common.points": "Points",
+  "common.previous": "Previous",
+  "common.space": "Spacebar",
+  "common.tiles": "Tiles",
+  "common.two-letter-tiles": "Two-letter",
+  "common.vowels": "Vowels",
+  "common.word": "Word",
+  "common.words": "Words",
+  "dictionary.empty-state.no-definitions": "Word exists in the dictionary but it does not have a definition.",
+  "dictionary.empty-state.no-results": "Unable to find word definition in the dictionary.",
+  "dictionary.empty-state.not-allowed": "This word is not allowed.",
+  "dictionary.empty-state.uninitialized": "Word definition will be shown here.",
+  "dictionary.input.placeholder": "Search dictionary…",
+  "dictionary.input.title": "Comma-separated words",
+  "dictionary": "Dictionary",
+  "empty-state.error": "Error",
+  "empty-state.info": "Info",
+  "empty-state.success": "Yeah!",
+  "empty-state.warning": "Oops!",
+  "github": "See this project on GitHub",
+  "keyMap.board-and-rack.insert-two-letter-tile": "Insert two-letter tile",
+  "keyMap.board-and-rack.navigate": "Navigate",
+  "keyMap.board-and-rack.remove-tile": "Remove tile",
+  "keyMap.board-and-rack.submit": "Solve",
+  "keyMap.board-and-rack": "Board & rack",
+  "keyMap.board.toggle-blank": "Mark/unmark tile as a blank",
+  "keyMap.board.toggle-cell-filter": "Toggle destination filter",
+  "keyMap.board.toggle-direction": "Toggle typing direction",
+  "keyMap.board": "Board",
+  "keyMap.rack.insert-blank": "Insert blank",
+  "keyMap.rack": "Rack",
+  "keyMap": "Keyboard shortcuts",
+  "menu": "Menu",
+  "rack.placeholder": "Letters",
+  "rack.tile.location": "Rack: tile ({{index}})",
+  "rack.touchscreen.placeholder": "Letters…",
+  "remaining-tiles": "Remaining tiles",
+  "results.empty-state.no-results": "No results - unable to generate any words.",
+  "results.empty-state.outdated": "Results are outdated.",
+  "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",
+  "results.input.placeholder": "Search results... (RegExp)",
+  "results.insert": "Insert",
+  "results.preview": "Preview",
+  "results.select": "Select...",
+  "results.solve": "Solve",
+  "results": "Results",
+  "settings.autoGroupTiles.left": "On the left",
+  "settings.autoGroupTiles.null": "Do not group",
+  "settings.autoGroupTiles.right": "On the right",
+  "settings.autoGroupTiles": "Group remaining tiles",
+  "settings.game": "Game",
+  "settings.highlightUnreachableCells": "Highlight unreachable cells",
+  "settings.inputMode.keyboard": "Keyboard",
+  "settings.inputMode.touchscreen": "Touchscreen",
+  "settings.inputMode": "Input mode",
+  "settings.language": "Language",
+  "settings.removeCellFilters.always": "Always",
+  "settings.removeCellFilters.never": "Never",
+  "settings.removeCellFilters": "Automatically remove filters from board",
+  "settings.showCoordinates.alternative": "Alternative",
+  "settings.showCoordinates.original": "Original",
+  "settings.showCoordinates": "Coordinates",
+  "settings": "Settings",
+  "words.empty-state.no-words": "No created words - the board is empty.",
+  "words.input.placeholder": "Search words... (RegExp)",
+  "words.invalid": "Invalid",
+  "words.preview": "Preview",
+  "words.valid": "Valid",
+  "words.validity": "Validity",
+  "words": "Created words"
+}