scrabble-solver 2.11.0 → 2.11.2

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

@@ -11,21 +11,21 @@ import {
   selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
+  selectResults,
   selectSolveError,
-  selectSortedFilteredResults,
-  selectSortedResults,
   solveSlice,
   useTranslate,
   useTypedSelector,
 } 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 { EmptyState, FloatingSolveButton, ResultCandidatePicker } from './components';
+import { FloatingSolveButton, ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -40,18 +40,16 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
+  const { columnWidth, componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
     useAppLayout();
-  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
-  const [columnRef, { width: columnWidth }] = useMeasure<HTMLDivElement>();
-  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
-  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const config = useTypedSelector(selectConfig);
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const allResults = useTypedSelector(selectSortedResults);
-  const results = useTypedSelector(selectSortedFilteredResults);
+  const results = useTypedSelector(selectResults);
+  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
+  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
+  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const [bestResult] = results || [];
   const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
   const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
@@ -111,13 +109,13 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
     <div className={classNames(styles.solver, className)}>
       <div className={styles.container}>
         <div className={styles.content}>
-          <form id="a" className={styles.boardContainer} onSubmit={handleSubmit}>
+          <form className={styles.boardContainer} onSubmit={handleSubmit}>
             <Board cellSize={cellSizeSafe} className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          <div className={styles.column} ref={columnRef}>
-            <Results callbacks={callbacks} />
+          <div className={styles.column}>
+            <Results callbacks={callbacks} className={styles.results} />
 
             <div className={styles.dictionaryContainer}>
               <Dictionary className={styles.dictionary} />
@@ -129,7 +127,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
       <div className={styles.bottomContainer} ref={bottomContainerRef}>
         <div className={styles.bottomContent}>
-          <form id="b" onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
@@ -139,15 +137,15 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
               <ResultCandidatePicker onResultClick={onShowResults} />
 
               {error && (
-                <EmptyState className={styles.emptyState} variant="error">
+                <Alert className={styles.emptyState} variant="error">
                   {error.message}
-                </EmptyState>
+                </Alert>
               )}
 
-              {allResults && allResults.length === 0 && !isOutdated && (
-                <EmptyState className={styles.emptyState} variant="warning">
+              {results && results.length === 0 && !isOutdated && (
+                <Alert className={styles.emptyState} variant="warning">
                   {translate('results.empty-state.no-results')}
-                </EmptyState>
+                </Alert>
               )}
             </div>
           )}

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

@@ -10,7 +10,7 @@ import {
   selectIsLoading,
   selectLocale,
   selectResultCandidate,
-  selectSortedResults,
+  selectResults,
   useTranslate,
   useTypedSelector,
 } from 'state';
@@ -31,13 +31,12 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const locale = useTypedSelector(selectLocale);
   const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const sortedResults = useTypedSelector(selectSortedResults);
-  const results = sortedResults || [];
+  const results = useTypedSelector(selectResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const index = resultCandidate ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
+  const index = resultCandidate && results ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
   const disabled = isOutdated || !resultCandidate;
-  const isPreviousDisabled = index <= 0 || disabled;
-  const isNextDisabled = index >= results.length - 1 || disabled;
+  const isPreviousDisabled = !results || index <= 0 || disabled;
+  const isNextDisabled = !results || index >= results.length - 1 || disabled;
   const bothEnabled = !isPreviousDisabled && !isNextDisabled;
   const { showFloatingSolveButton } = useAppLayout();
 

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

@@ -1,4 +1,3 @@
-export { default as EmptyState } from './EmptyState';
 export { default as FloatingSolveButton } from './FloatingSolveButton';
 export { default as InsertButton } from './InsertButton';
 export { default as ResultCandidatePicker } from './ResultCandidatePicker';

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

@@ -4,7 +4,17 @@
   --background-color: transparent;
 
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background-color: var(--background-color);
+  border-radius: var(--border--radius);
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
   transition: var(--transition);
+  user-select: none;
 
   &.points1 {
     --background-color: var(--color--yellow);
@@ -23,13 +33,30 @@
     --background-color: var(--color--red);
   }
 
+  &.raised {
+    --shadow--size: 2px;
+    --shadow--blur: 2px;
+    --shadow--spread: -1px;
+    --shadow--color: rgba(34, 34, 34, 0.8);
+
+    box-shadow: inset calc(-1 * var(--shadow--size)) calc(-1 * var(--shadow--size)) var(--shadow--blur)
+      var(--shadow--spread) var(--shadow--color);
+
+    @include media('<xs') {
+      --shadow--size: 1px;
+      --shadow--spread: 0;
+      --shadow--blur: 1px;
+    }
+  }
+
   &.blank {
     --background-color: var(--color--white);
 
-    .placeholder,
-    .character {
-      color: var(--color--foreground);
-    }
+    color: var(--color--foreground);
+  }
+
+  &.empty {
+    color: var(--color--inactive);
   }
 
   &.highlighted {
@@ -37,76 +64,28 @@
 
     color: var(--color--primary--opposite);
 
-    .placeholder,
-    .character {
-      color: inherit;
-    }
-
     .points {
       color: inherit;
     }
   }
-
-  &:not(.disabled) {
-    .input::selection {
-      --background--color: transparent;
-    }
-  }
-}
-
-.input,
-.character,
-.placeholder {
-  padding: 0;
-  font-weight: bold;
-  text-transform: uppercase;
-  text-align: center;
-  caret-color: transparent;
-  box-sizing: border-box;
 }
 
 .input {
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  color: transparent;
-  border: none;
-  font-size: 16px; // prevent iOS from automatically zooming in on focus
-}
-
-.character,
-.placeholder {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--background-color);
-  transition: var(--transition);
-  pointer-events: none;
-  user-select: none;
-
-  .empty & {
-    color: var(--color--inactive);
-  }
-
-  .raised & {
-    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
-
-    @include media('<xs') {
-      box-shadow: inset -2px -2px 1px -1px rgba(34, 34, 34, 0.8);
-    }
-  }
-}
-
-.character {
-  opacity: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font-size: 16px; // prevent iOS from automatically zooming in on focus
 
-  .empty & {
-    opacity: 0;
+  &::selection {
+    --background--color: transparent;
   }
 }
 
@@ -146,10 +125,12 @@
   [dir='ltr'] & {
     top: 0;
     right: 0;
+    border-top-right-radius: inherit;
   }
 
   [dir='rtl'] & {
     bottom: 0;
     right: 0;
+    border-bottom-right-radius: inherit;
   }
 }

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

@@ -60,8 +60,10 @@ const Tile: FunctionComponent<Props> = ({
   const locale = useTypedSelector(selectLocale);
   const { animateTile, showTilePoints } = useAppLayout();
   const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
-  const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
-  const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
+  const style = useMemo(
+    () => ({ fontSize: tileFontSize, height: tileSize, width: tileSize }),
+    [tileSize, tileFontSize],
+  );
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);
@@ -98,7 +100,6 @@ const Tile: FunctionComponent<Props> = ({
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}
-      characterStyle={characterStyle}
       className={className}
       disabled={disabled}
       highlighted={highlighted}

package/packages/scrabble-solver/src/components/Tile/TilePure.tsx

@@ -18,7 +18,6 @@ interface Props {
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
-  characterStyle?: CSSProperties;
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
@@ -42,7 +41,6 @@ const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
   character,
-  characterStyle,
   className,
   disabled,
   highlighted,
@@ -66,15 +64,18 @@ const TilePure: FunctionComponent<Props> = ({
       [styles.disabled]: disabled,
       [styles.empty]: !character,
       [styles.highlighted]: highlighted,
-      [styles.raised]: raised,
+      [styles.placeholder]: !character,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
       [styles.points3]: points === 3,
       [styles.points4]: points === 4,
       [styles.points5]: typeof points === 'number' && points >= 5,
+      [styles.raised]: raised,
     })}
     style={style}
   >
+    {character || placeholder}
+
     <input
       aria-label={ariaLabel}
       autoCapitalize="none"
@@ -92,16 +93,6 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
-    {placeholder && (
-      <div className={styles.placeholder} style={characterStyle} tabIndex={-1}>
-        {placeholder}
-      </div>
-    )}
-
-    <div className={styles.character} style={characterStyle} tabIndex={-1}>
-      {character}
-    </div>
-
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
         {pointsFormatted}

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

@@ -1,11 +1,3 @@
-$arrow-size: 4px;
-
-:export {
-  ARROW_SIZE: $arrow-size;
-  PREVENT_OVERFLOW: 10px;
-  OFFSET: 2px;
-}
-
 .tooltip {
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
@@ -13,71 +5,8 @@ $arrow-size: 4px;
   background-color: var(--color--tooltip--background);
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
-
-  &.top {
-    .arrow {
-      bottom: -$arrow-size;
-
-      &::after {
-        left: 0;
-        bottom: 0;
-        border-top-color: var(--color--tooltip--background);
-        border-bottom: none;
-      }
-    }
-  }
-
-  &.right {
-    .arrow {
-      left: -$arrow-size;
-
-      &::after {
-        left: 0;
-        top: 0;
-        border-right-color: var(--color--tooltip--background);
-        border-left: none;
-      }
-    }
-  }
-
-  &.bottom {
-    .arrow {
-      top: -$arrow-size;
-
-      &::after {
-        top: 0;
-        left: 0;
-        border-bottom-color: var(--color--tooltip--background);
-        border-top: none;
-      }
-    }
-  }
-
-  &.left {
-    .arrow {
-      right: -$arrow-size;
-
-      &::after {
-        right: 0;
-        top: 0;
-        border-left-color: var(--color--tooltip--background);
-        border-right: none;
-      }
-    }
-  }
 }
 
 .arrow {
-  position: absolute;
-  width: 2 * $arrow-size;
-  height: 2 * $arrow-size;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    height: 0;
-    width: 0;
-    pointer-events: none;
-    border: $arrow-size solid transparent;
-  }
+  fill: var(--color--tooltip--background);
 }

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

@@ -1,3 +1,4 @@
+import { arrow, autoUpdate, flip, FloatingArrow, offset, shift, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
 import {
   FocusEvent,
@@ -6,16 +7,15 @@ import {
   MouseEventHandler,
   ReactNode,
   useCallback,
+  useId,
   useMemo,
+  useRef,
   useState,
 } from 'react';
-import { usePopper } from 'react-popper';
-import { useMountedState, useRafLoop } from 'react-use';
 
-import { useIsTouchDevice, usePortal, useUniqueId } from 'hooks';
+import { useIsTouchDevice, usePortal } from 'hooks';
 import { noop } from 'lib';
 
-import { MODIFIERS } from './constants';
 import styles from './Tooltip.module.scss';
 
 interface Props {
@@ -36,29 +36,27 @@ interface TriggerProps {
   onMouseOver?: MouseEventHandler;
 }
 
+const ARROW_SIZE = 7;
+const ARROW_GAP = 3;
+const PADDING = 10;
+
 // eslint-disable-next-line max-statements
 const useTooltip = (
   tooltip: ReactNode,
   { className, placement = 'top', onBlur = noop, onFocus = noop, onMouseOut = noop, onMouseOver = noop }: Props = {},
 ): TriggerProps => {
-  const id = useUniqueId();
+  const id = useId();
   const isTouchDevice = useIsTouchDevice();
   const isEnabled = Boolean(tooltip) || tooltip === 0;
-  const isMounted = useMountedState();
   const [isShown, setIsShown] = useState<boolean>(false);
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
-  const {
-    attributes,
-    styles: popperStyles,
-    update,
-  } = usePopper(referenceElement, popperElement, {
-    modifiers: [{ name: 'arrow', options: { element: arrowElement } }, ...MODIFIERS],
+  const arrowRef = useRef(null);
+  const ariaAttributes = useMemo(() => (isShown ? { 'aria-describedby': id } : {}), [id, isShown]);
+
+  const { x, y, context, refs, strategy } = useFloating({
+    middleware: [flip(), shift({ padding: PADDING }), offset(ARROW_SIZE + ARROW_GAP), arrow({ element: arrowRef })],
     placement,
+    whileElementsMounted: autoUpdate,
   });
-  const computedPlacement = attributes.popper ? attributes.popper['data-popper-placement'] : placement;
-  const ariaAttributes = useMemo(() => (isShown ? { 'aria-describedby': id } : {}), [id, isShown]);
 
   const handleBlur = useCallback(
     (event: FocusEvent) => {
@@ -95,7 +93,7 @@ const useTooltip = (
   const mouseTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
-      ref: setReferenceElement,
+      ref: refs.setReference,
       onBlur: handleBlur,
       onFocus: handleFocus,
       onMouseOut: handleMouseOut,
@@ -107,33 +105,25 @@ const useTooltip = (
   const touchTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
-      ref: setReferenceElement,
+      ref: refs.setReference,
     }),
     [ariaAttributes],
   );
 
   const triggerProps = isTouchDevice ? touchTriggerProps : mouseTriggerProps;
 
-  useRafLoop(() => {
-    if (isMounted() && update) {
-      update();
-    }
-  });
-
   usePortal(
     <div
-      className={classNames(styles.tooltip, className, {
-        [styles.top]: computedPlacement === 'top',
-        [styles.right]: computedPlacement === 'right',
-        [styles.bottom]: computedPlacement === 'bottom',
-        [styles.left]: computedPlacement === 'left',
-      })}
-      ref={setPopperElement}
-      style={popperStyles.popper}
-      {...attributes.popper}
+      className={classNames(styles.tooltip, className)}
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+      }}
     >
       <div>{tooltip}</div>
-      <div className={styles.arrow} ref={setArrowElement} style={popperStyles.arrow} />
+      <FloatingArrow className={styles.arrow} context={context} ref={arrowRef} />
     </div>,
     { disabled: !isEnabled || !isShown },
   );

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

@@ -1,3 +1,4 @@
+export { default as Alert } from './Alert';
 export { default as Badge } from './Badge';
 export { default as Board } from './Board';
 export { default as Button } from './Button';

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

@@ -5,4 +5,3 @@ export { default as useLanguage } from './useLanguage';
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as usePortal } from './usePortal';
-export { default as useUniqueId } from './useUniqueId';

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

@@ -1,4 +1,4 @@
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL } from 'parameters';
+import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL, SOLVER_COLUMN_WIDTH } from 'parameters';
 
 import useIsTouchDevice from './useIsTouchDevice';
 import useMediaQuery from './useMediaQuery';
@@ -14,8 +14,10 @@ const useAppLayout = () => {
 
   return {
     animateTile: !isLessThanXs,
+    columnWidth: showColumn ? SOLVER_COLUMN_WIDTH : 0,
     componentsSpacing: isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING,
     isBoardFullWidth: isLessThanM,
+    isModalFullWidth: isLessThanS,
     showColumn,
     showCompactControls: !showColumn,
     showFloatingSolveButton: isTouchDevice,

package/packages/scrabble-solver/src/i18n/de.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Ablage: Stein ({{index}})",
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
-  "results.empty-state.no-filtered-results": "Keine Ergebnisse für diese Anfrage.",
   "results.empty-state.no-results": "Keine Ergebnisse - kein Wort konnte generiert werden.",
   "results.empty-state.outdated": "Ergebnisse sind alt. Klicken zum Aktualisieren.",
   "results.empty-state.uninitialized": "Wörter die aus deinen Buchstaben generiert wurden erscheinen hier.",

package/packages/scrabble-solver/src/i18n/en.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Rack: tile ({{index}})",
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
-  "results.empty-state.no-filtered-results": "No result matches this query.",
   "results.empty-state.no-results": "No results - unable to generate any words.",
   "results.empty-state.outdated": "Results are outdated. Click below to update.",
   "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",

package/packages/scrabble-solver/src/i18n/es.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Estante: espacio ({{index}})",
   "remaining-tiles": "Casillas restantes",
   "results": "Resultados",
-  "results.empty-state.no-filtered-results": "Ningún resultado coincide con esta consulta.",
   "results.empty-state.no-results": "No hay resultados; no se pueden generar palabras",
   "results.empty-state.outdated": "Los resultados están desactualizados. Haga clic a continuación para actualizar.",
   "results.empty-state.uninitialized": "Aquí se mostrarán las palabras generadas a partir de sus letras.",

package/packages/scrabble-solver/src/i18n/fa.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "({{index}}) کاشی: طاقچه",
   "remaining-tiles": "کاشی های باقی مانده",
   "results": "نتایج",
-  "results.empty-state.no-filtered-results": "پاسخی یافت نشد.",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
   "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",
   "results.empty-state.uninitialized": "کلمات تولید شده از حروف شما اینجا نمایش داده خواهد شد.",

package/packages/scrabble-solver/src/i18n/fr.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Chevalet: la case ({{index}})",
   "remaining-tiles": "Cases restantes",
   "results": "Résultats",
-  "results.empty-state.no-filtered-results": "Aucun résultat ne correspond à cette requête",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
   "results.empty-state.outdated": "Les résultats sont dépassé. Cliquer ci-dessous pour mettre à jour.",
   "results.empty-state.uninitialized": "Les mots générés à partir de vos lettres seront affichés ici.",

package/packages/scrabble-solver/src/i18n/pl.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Stojak: płytka ({{index}})",
   "remaining-tiles": "Pozostałe płytki",
   "results": "Wyniki",
-  "results.empty-state.no-filtered-results": "Żaden wynik nie pasuje do tej kwerendy.",
   "results.empty-state.no-results": "Brak wyników - nie można wygenerować żadnego słowa.",
   "results.empty-state.outdated": "Wyniki są nieaktualne. Kliknij poniżej, aby zaktualizować.",
   "results.empty-state.uninitialized": "Tu zostaną wyświetlone słowa wygenerowane z Twoich liter.",

package/packages/scrabble-solver/src/lib/createRegExp.ts

@@ -0,0 +1,13 @@
+const createRegExp = (input: string): RegExp => {
+  if (input.trim().length === 0) {
+    return /.*/;
+  }
+
+  try {
+    return new RegExp(input, 'gi');
+  } catch {
+    return /.*/;
+  }
+};
+
+export default createRegExp;