refactor(atomic): migrate atomic-search-box

packages/atomic/src/components/search/index.ts

@@ -26,6 +26,7 @@ export {AtomicResultSectionVisual} from './atomic-result-section-visual/atomic-r
 export {AtomicResultTemplate} from './atomic-result-template/atomic-result-template.js';
 export {AtomicResultText} from './atomic-result-text/atomic-result-text.js';
 export {AtomicResultsPerPage} from './atomic-results-per-page/atomic-results-per-page.js';
+export {AtomicSearchBox} from './atomic-search-box/atomic-search-box.js';
 export {AtomicSearchBoxInstantResults} from './atomic-search-box-instant-results/atomic-search-box-instant-results.js';
 export {AtomicSearchBoxQuerySuggestions} from './atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.js';
 export {AtomicSearchBoxRecentQueries} from './atomic-search-box-recent-queries/atomic-search-box-recent-queries.js';

packages/atomic/src/components/search/lazy-index.ts

@@ -70,6 +70,8 @@ export default {
     await import('./atomic-result-text/atomic-result-text.js'),
   'atomic-results-per-page': async () =>
     await import('./atomic-results-per-page/atomic-results-per-page.js'),
+  'atomic-search-box': async () =>
+    await import('./atomic-search-box/atomic-search-box.js'),
   'atomic-search-box-instant-results': async () =>
     await import(
       './atomic-search-box-instant-results/atomic-search-box-instant-results.js'

packages/atomic/vitest-utils/testing-helpers/fixtures/atomic/search/fake-atomic-search-box-suggestions-fixture.ts

@@ -0,0 +1,55 @@
+import type {SearchBox} from '@coveo/headless';
+import {LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {dispatchSearchBoxSuggestionsEvent} from '@/src/components/common/suggestions/suggestions-events';
+import type {
+  SearchBoxSuggestionElement,
+  SearchBoxSuggestions,
+  SearchBoxSuggestionsBindings,
+} from '@/src/components/common/suggestions/suggestions-types';
+import type {Bindings} from '@/src/components/search/atomic-search-interface/atomic-search-interface';
+import type {SearchBoxSuggestionsComponent} from '@/src/decorators/types';
+
+@customElement('fake-atomic-search-box-suggestions')
+export class FixtureFakeAtomicSearchBoxSuggestions
+  extends LitElement
+  implements SearchBoxSuggestionsComponent<Bindings>
+{
+  bindings!: SearchBoxSuggestionsBindings<SearchBox, Bindings>;
+  @state() error!: Error;
+
+  @property({type: Number, attribute: 'suggestion-count'})
+  suggestionCount = 3;
+
+  connectedCallback() {
+    super.connectedCallback();
+    dispatchSearchBoxSuggestionsEvent<SearchBox, Bindings>(
+      (bindings) => {
+        this.bindings = bindings;
+        return this.initialize();
+      },
+      this,
+      ['atomic-search-box']
+    );
+  }
+
+  initialize(): SearchBoxSuggestions {
+    return {
+      position: 0,
+      renderItems: () => this.renderItems(),
+    };
+  }
+
+  private renderItems(): SearchBoxSuggestionElement[] {
+    return Array.from({length: this.suggestionCount}, (_, i) => {
+      const num = i + 1;
+      const div = document.createElement('div');
+      div.textContent = `suggestion ${num}`;
+      return {
+        key: `suggestion-${num}`,
+        content: div,
+        query: `suggestion ${num}`,
+      };
+    });
+  }
+}

packages/atomic/vitest-utils/testing-helpers/fixtures/headless/search/search-box-controller.ts

@@ -0,0 +1,26 @@
+import type {SearchBox, SearchBoxState} from '@coveo/headless';
+import {vi} from 'vitest';
+
+export const defaultState: SearchBoxState = {
+  value: '',
+  suggestions: [],
+  isLoading: false,
+  isLoadingSuggestions: false,
+};
+
+export const defaultImplementation = {
+  subscribe: vi.fn((subscribedFunction: () => void) => {
+    subscribedFunction();
+  }) as unknown as SearchBox['subscribe'],
+  state: defaultState,
+};
+
+export const buildFakeSearchBox = (
+  state?: Partial<SearchBoxState>,
+  methods?: Partial<SearchBox>
+): SearchBox =>
+  ({
+    ...defaultImplementation,
+    ...{state: {...defaultState, ...(state || {})}},
+    ...(methods && {...methods}),
+  }) as SearchBox;

packages/atomic/vitest-utils/testing-helpers/fixtures/headless/search/standalone-search-box-controller.ts

@@ -0,0 +1,37 @@
+import type {
+  StandaloneSearchBox,
+  StandaloneSearchBoxState,
+} from '@coveo/headless';
+import {vi} from 'vitest';
+
+export const defaultState: StandaloneSearchBoxState = {
+  value: '',
+  suggestions: [],
+  isLoading: false,
+  isLoadingSuggestions: false,
+  redirectTo: '',
+  analytics: {
+    cause: '',
+    metadata: {},
+  },
+};
+
+export const defaultImplementation = {
+  subscribe: vi.fn((subscribedFunction: () => void) => {
+    subscribedFunction();
+  }) as unknown as StandaloneSearchBox['subscribe'],
+  submit: vi.fn() as StandaloneSearchBox['submit'],
+  updateRedirectUrl: vi.fn() as StandaloneSearchBox['updateRedirectUrl'],
+  afterRedirection: vi.fn() as StandaloneSearchBox['afterRedirection'],
+  state: defaultState,
+};
+
+export const buildFakeStandaloneSearchBox = (
+  state?: Partial<StandaloneSearchBoxState>,
+  methods?: Partial<StandaloneSearchBox>
+): StandaloneSearchBox =>
+  ({
+    ...defaultImplementation,
+    ...{state: {...defaultState, ...(state || {})}},
+    ...(methods && {...methods}),
+  }) as StandaloneSearchBox;