feat(algolia): type highlight presets

algolia · Sep 17, 2020 · 9f4b6bd · 9f4b6bd
1 parent a6d858e
commit 9f4b6bd
Show file tree

Hide file tree

Showing 20 changed files with 365 additions and 240 deletions.
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -46,6 +46,19 @@ describe('autocomplete-js', () => {
             <div
               class="aa-InputWrapper"
             >
+              <input
+                aria-autocomplete="list"
+                aria-labelledby="autocomplete-label"
+                autocapitalize="off"
+                autocomplete="off"
+                autocorrect="off"
+                class="aa-Input"
+                id="autocomplete-input"
+                maxlength="512"
+                placeholder=""
+                spellcheck="false"
+                type="search"
+              />
               <label
                 class="aa-Label"
                 for="autocomplete-input"
@@ -70,24 +83,28 @@ describe('autocomplete-js', () => {
 
                 </svg>
               </label>
-              <input
-                aria-autocomplete="list"
-                aria-labelledby="autocomplete-label"
-                autocapitalize="off"
-                autocomplete="off"
-                autocorrect="off"
-                class="aa-Input"
-                id="autocomplete-input"
-                maxlength="512"
-                placeholder=""
-                spellcheck="false"
-                type="search"
-              />
               <button
-                class="aa-Reset"
+                class="aa-ResetButton"
                 type="reset"
               >
-                ｘ
+                <svg
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  
+        
+                  <path
+                    d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
+                    fill="none"
+                    fill-rule="evenodd"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  
+
+                </svg>
               </button>
             </div>
           </form>

diff --git a/...ocomplete-preset-algolia/src/constants.ts → ...ete-preset-algolia/src/constants/index.ts b/...ocomplete-preset-algolia/src/constants.ts → ...ete-preset-algolia/src/constants/index.ts
diff --git a/packages/autocomplete-preset-algolia/src/highlight.ts b/packages/autocomplete-preset-algolia/src/highlight.ts
diff --git a/packages/autocomplete-preset-algolia/src/highlight/ParseAlgoliaHitParams.ts b/packages/autocomplete-preset-algolia/src/highlight/ParseAlgoliaHitParams.ts
@@ -0,0 +1,5 @@
+export type ParseAlgoliaHitParams<TItem> = {
+  hit: TItem;
+  attribute: keyof TItem;
+  ignoreEscape?: string[];
+};
diff --git a/packages/autocomplete-preset-algolia/src/highlight/ParsedAttribute.ts b/packages/autocomplete-preset-algolia/src/highlight/ParsedAttribute.ts
@@ -0,0 +1,4 @@
+export type ParsedAttribute = {
+  value: string;
+  isHighlighted: boolean;
+};
diff --git a/...t-algolia/src/__tests__/highlight.test.ts → ...src/highlight/__tests__/highlight.test.ts b/...t-algolia/src/__tests__/highlight.test.ts → ...src/highlight/__tests__/highlight.test.ts
@@ -1,9 +1,7 @@
-import {
-  parseAlgoliaHitHighlight,
-  parseAlgoliaHitReverseHighlight,
-  parseAlgoliaHitSnippet,
-  parseAlgoliaHitReverseSnippet,
-} from '../highlight';
+import { parseAlgoliaHitHighlight } from '../parseAlgoliaHitHighlight';
+import { parseAlgoliaHitReverseHighlight } from '../parseAlgoliaHitReverseHighlight';
+import { parseAlgoliaHitReverseSnippet } from '../parseAlgoliaHitReverseSnippet';
+import { parseAlgoliaHitSnippet } from '../parseAlgoliaHitSnippet';
 
 describe('highlight', () => {
   describe('parseAlgoliaHitHighlight', () => {
@@ -12,10 +10,15 @@ describe('highlight', () => {
         parseAlgoliaHitHighlight({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _highlightResult: {
               title: {
                 value:
                   '__aa-highlight__He__/aa-highlight__llo t__aa-highlight__he__/aa-highlight__re',
+                matchLevel: 'partial',
+                matchedWords: [],
+                fullyHighlighted: false,
               },
             },
           },
@@ -47,6 +50,8 @@ describe('highlight', () => {
         parseAlgoliaHitHighlight({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _highlightResult: {
               title: {
                 value: `__aa-highlight__Food__/aa-highlight__ & <Drinks> 'n' "Music"`,
@@ -73,6 +78,8 @@ describe('highlight', () => {
         parseAlgoliaHitHighlight({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _highlightResult: {
               title: {
                 value: `__aa-highlight__Food__/aa-highlight__ & <Drinks> 'n' "Music"`,
@@ -102,6 +109,8 @@ describe('highlight', () => {
         parseAlgoliaHitReverseHighlight({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _highlightResult: {
               title: {
                 value:
@@ -136,7 +145,11 @@ describe('highlight', () => {
       expect(
         parseAlgoliaHitReverseHighlight({
           attribute: 'title',
-          hit: { _highlightResult: { title: { value: 'Hello' } } },
+          hit: {
+            objectID: '1',
+            title: 'Hello there',
+            _highlightResult: { title: { value: 'Hello' } },
+          },
         })
       ).toMatchInlineSnapshot(`
         Array [
@@ -153,6 +166,8 @@ describe('highlight', () => {
         parseAlgoliaHitReverseHighlight({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _highlightResult: {
               title: {
                 value: `__aa-highlight__Food__/aa-highlight__ & <Drinks> 'n' "Music"`,
@@ -179,6 +194,8 @@ describe('highlight', () => {
         parseAlgoliaHitReverseHighlight({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _highlightResult: {
               title: {
                 value: `__aa-highlight__Food__/aa-highlight__ & <Drinks> 'n' "Music"`,
@@ -208,6 +225,8 @@ describe('highlight', () => {
         parseAlgoliaHitReverseSnippet({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _snippetResult: {
               title: {
                 value:
@@ -243,6 +262,8 @@ describe('highlight', () => {
         parseAlgoliaHitReverseSnippet({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _snippetResult: {
               title: {
                 value: `__aa-highlight__Food__/aa-highlight__ & <Drinks> 'n' "Music"`,
@@ -269,6 +290,8 @@ describe('highlight', () => {
         parseAlgoliaHitReverseSnippet({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _snippetResult: {
               title: {
                 value: `__aa-highlight__Food__/aa-highlight__ & <Drinks> 'n' "Music"`,
@@ -298,6 +321,8 @@ describe('highlight', () => {
         parseAlgoliaHitSnippet({
           attribute: 'title',
           hit: {
+            objectID: '1',
+            title: 'Hello there',
             _snippetResult: {
               title: {
                 value:
@@ -334,6 +359,8 @@ describe('highlight', () => {
       parseAlgoliaHitSnippet({
         attribute: 'title',
         hit: {
+          objectID: '1',
+          title: 'Hello there',
           _snippetResult: {
             title: {
               value: `__aa-highlight__Food__/aa-highlight__ & <Drinks> 'n' "Music"`,
@@ -360,6 +387,8 @@ describe('highlight', () => {
       parseAlgoliaHitSnippet({
         attribute: 'title',
         hit: {
+          objectID: '1',
+          title: 'Hello there',
           _snippetResult: {
             title: {
               value: `__aa-highlight__Food__/aa-highlight__ & <Drinks> 'n' "Music"`,

diff --git a/packages/autocomplete-preset-algolia/src/highlight/getAttributeValueByPath.ts b/packages/autocomplete-preset-algolia/src/highlight/getAttributeValueByPath.ts
@@ -0,0 +1,15 @@
+export function getAttributeValueByPath<THit>(hit: THit, path: string): string {
+  const parts = path.split('.');
+  const value = parts.reduce<string>(
+    (current, key) => current && current[key],
+    hit as any
+  );
+
+  if (typeof value !== 'string') {
+    throw new Error(
+      `The attribute ${JSON.stringify(path)} does not exist on the hit.`
+    );
+  }
+
+  return value;
+}
diff --git a/packages/autocomplete-preset-algolia/src/highlight/index.ts b/packages/autocomplete-preset-algolia/src/highlight/index.ts
diff --git a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts b/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts
@@ -0,0 +1,22 @@
+import { Hit } from '@algolia/client-search';
+
+import { getAttributeValueByPath } from './getAttributeValueByPath';
+import { ParseAlgoliaHitParams } from './ParseAlgoliaHitParams';
+import { parseAttribute } from './parseAttribute';
+import { ParsedAttribute } from './ParsedAttribute';
+
+export function parseAlgoliaHitHighlight<THit extends Hit<{}>>({
+  hit,
+  attribute,
+  ignoreEscape,
+}: ParseAlgoliaHitParams<THit>): ParsedAttribute[] {
+  const highlightedValue = getAttributeValueByPath(
+    hit,
+    `_highlightResult.${attribute}.value`
+  );
+
+  return parseAttribute({
+    highlightedValue,
+    ignoreEscape,
+  });
+}