@scrabble-solver/scrabble-solver 2.11.9 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.9",
+  "version": "2.12.0",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@floating-ui/react": "^0.22.2",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.9",
-    "@scrabble-solver/constants": "^2.11.9",
-    "@scrabble-solver/dictionaries": "^2.11.9",
-    "@scrabble-solver/logger": "^2.11.9",
-    "@scrabble-solver/solver": "^2.11.9",
-    "@scrabble-solver/types": "^2.11.9",
-    "@scrabble-solver/word-definitions": "^2.11.9",
+    "@scrabble-solver/configs": "^2.12.0",
+    "@scrabble-solver/constants": "^2.12.0",
+    "@scrabble-solver/dictionaries": "^2.12.0",
+    "@scrabble-solver/logger": "^2.12.0",
+    "@scrabble-solver/solver": "^2.12.0",
+    "@scrabble-solver/types": "^2.12.0",
+    "@scrabble-solver/word-definitions": "^2.12.0",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -46,6 +46,7 @@
     "react": "^18.2.0",
     "react-cool-onclickoutside": "^1.7.0",
     "react-dom": "^18.2.0",
+    "react-highlight-words": "^0.20.0",
     "react-modal": "^3.16.1",
     "react-portal": "^4.2.2",
     "react-redux": "^8.0.5",
@@ -62,6 +63,7 @@
     "@types/classnames": "^2.3.0",
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
+    "@types/react-highlight-words": "^0.16.4",
     "@types/react-modal": "^3.13.1",
     "@types/react-portal": "^4.0.4",
     "@types/react-redux": "^7.1.25",
@@ -72,5 +74,5 @@
     "sass": "^1.60.0",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "ff5376346ee2ff7d0db2cbcbe98a47de1c96bea2"
+  "gitHead": "0fe4eb1f970634bbfc7f6aa5bd43dcb2ef3ba3d8"
 }

package/src/components/Board/components/InputPrompt/InputPrompt.module.scss

@@ -28,6 +28,7 @@
   border: none;
   border-top: var(--border);
   border-bottom: var(--border);
+  border-radius: 0;
 }
 
 .insert {

package/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { TranslationKey } from 'types';
@@ -9,13 +9,14 @@ import { useTooltip } from '../Tooltip';
 import styles from './Results.module.scss';
 
 interface Props {
+  children?: ReactNode;
   className?: string;
   translationKey: TranslationKey;
   tooltip?: string | number;
   value: string | number;
 }
 
-const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, value }) => {
+const Cell: FunctionComponent<Props> = ({ children, className, translationKey, tooltip, value }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
@@ -23,7 +24,7 @@ const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, va
 
   return (
     <div className={classNames(styles.cell, className)} {...triggerProps}>
-      {formattedValue}
+      {children || formattedValue}
     </div>
   );
 };

package/src/components/Results/Result.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useRef } from 'react';
+import Highlighter from 'react-highlight-words';
 
 import { LOCALE_FEATURES } from 'i18n';
 import { noop } from 'lib';
-import { selectIsResultMatching, selectLocale, useTypedSelector } from 'state';
+import { selectIsResultMatching, selectLocale, selectResultsQuery, useTypedSelector } from 'state';
 import { ResultColumn } from 'types';
 
 import Cell from './Cell';
@@ -30,6 +31,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
+  const query = useTypedSelector(selectResultsQuery);
   const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
@@ -60,7 +62,9 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     >
       <span className={styles.resultContent}>
         {enabledColumns[ResultColumn.Word] && (
-          <Cell className={styles.word} translationKey="common.word" value={result.word} />
+          <Cell className={styles.word} translationKey="common.word" value={result.word}>
+            <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
+          </Cell>
         )}
 
         {enabledColumns[ResultColumn.TilesCount] && (

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

@@ -220,3 +220,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   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/src/styles/variables.scss

@@ -39,6 +39,7 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --color--background--overlay: rgba(255, 255, 255, 0.65);
   --color--foreground: #222;
   --color--foreground--secondary: #444;
+  --color--mark: #ffff00;
   --color--error: hsl(0, 92%, 62%);
   --color--error--opposite: var(--color--white);
   --color--info: #1868ad;