refactor(js): update types

Author: francoischalifour

packages/autocomplete-core/src/types/AutocompleteApi.ts

@@ -8,7 +8,7 @@ export interface AutocompleteScopeApi<TItem extends BaseItem>
   /**
    * Triggers a search to refresh the state.
    */
-  refresh: () => Promise<void>;
+  refresh(): Promise<void>;
 }
 
 export type AutocompleteApi<

packages/autocomplete-js/src/createAutocompleteDom.ts

@@ -17,7 +17,7 @@ import {
 import { AutocompleteClassNames, AutocompleteDom } from './types';
 
 type CreateDomProps<TItem extends BaseItem> = AutocompleteCoreApi<TItem> & {
-  classNames: AutocompleteClassNames;
+  classNames: Partial<AutocompleteClassNames>;
 };
 
 export function createAutocompleteDom<TItem extends BaseItem>({

packages/autocomplete-js/src/render.ts

@@ -20,7 +20,7 @@ import { setProperties, setPropertiesWithoutEvents } from './utils';
 
 type RenderProps<TItem extends BaseItem> = {
   state: AutocompleteState<TItem>;
-  classNames: AutocompleteClassNames;
+  classNames: Partial<AutocompleteClassNames>;
   panelRoot: HTMLElement;
 } & AutocompleteCoreApi<TItem> &
   AutocompleteDom;

packages/autocomplete-js/src/types/AutocompleteApi.ts

@@ -0,0 +1,12 @@
+import {
+  AutocompleteScopeApi as AutocompleteCoreScopeApi,
+  BaseItem,
+} from '@algolia/autocomplete-core';
+
+export interface AutocompleteApi<TItem extends BaseItem>
+  extends AutocompleteCoreScopeApi<TItem> {
+  /**
+   * Cleans up the DOM mutations and event listeners.
+   */
+  destroy(): void;
+}

packages/autocomplete-js/src/types/AutocompleteClassNames.ts

@@ -0,0 +1,17 @@
+export type AutocompleteClassNames = {
+  root: string;
+  form: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  submitButton: string;
+  resetButton: string;
+  loadingIndicator: string;
+  panel: string;
+  panelLayout: string;
+  source: string;
+  sourceHeader: string;
+  list: string;
+  item: string;
+  sourceFooter: string;
+};

packages/autocomplete-js/src/types/AutocompleteCollection.ts

@@ -0,0 +1,8 @@
+import { BaseItem } from '@algolia/autocomplete-core';
+
+import { InternalAutocompleteSource } from './AutocompleteSource';
+
+export interface AutocompleteCollection<TItem extends BaseItem> {
+  source: InternalAutocompleteSource<TItem>;
+  items: TItem[];
+}

packages/autocomplete-js/src/types/AutocompleteDom.ts

@@ -0,0 +1,11 @@
+export type AutocompleteDom = {
+  inputWrapper: HTMLDivElement;
+  input: HTMLInputElement;
+  root: HTMLDivElement;
+  form: HTMLFormElement;
+  label: HTMLLabelElement;
+  submitButton: HTMLButtonElement;
+  resetButton: HTMLButtonElement;
+  loadingIndicator: HTMLDivElement;
+  panel: HTMLDivElement;
+};

packages/autocomplete-js/src/types/AutocompleteOptions.ts

@@ -0,0 +1,66 @@
+import {
+  AutocompleteOptions as AutocompleteCoreOptions,
+  BaseItem,
+  GetSourcesParams,
+} from '@algolia/autocomplete-core';
+import { MaybePromise } from '@algolia/autocomplete-shared';
+
+import { AutocompleteClassNames } from './AutocompleteClassNames';
+import { AutocompleteSource } from './AutocompleteSource';
+import { AutocompleteState } from './AutocompleteState';
+
+export type AutocompleteRenderer<TItem extends BaseItem> = (params: {
+  root: HTMLElement;
+  sections: HTMLElement[];
+  state: AutocompleteState<TItem>;
+}) => void;
+
+export interface AutocompleteOptions<TItem extends BaseItem>
+  extends AutocompleteCoreOptions<TItem> {
+  /**
+   * The container for the Autocomplete search box.
+   *
+   * You can either pass a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/docs/Web/API/HTMLElement). The first element matching the provided selector will be used as container.
+   */
+  container: string | HTMLElement;
+  /**
+   * The container for the Autocomplete panel.
+   *
+   * You can either pass a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/docs/Web/API/HTMLElement). The first element matching the provided selector will be used as container.
+   *
+   * @default document.body
+   */
+  panelContainer?: string | HTMLElement;
+  getSources?: (
+    params: GetSourcesParams<TItem>
+  ) => MaybePromise<Array<AutocompleteSource<TItem>>>;
+  /**
+   * The panel horizontal position.
+   *
+   * @default "input-wrapper-width"
+   */
+  panelPlacement?: 'start' | 'end' | 'full-width' | 'input-wrapper-width';
+  /**
+   * The class names to inject in each created DOM element.
+   *
+   * It it useful to design with external CSS frameworks.
+   */
+  classNames?: Partial<AutocompleteClassNames>;
+  /**
+   * Function called to render the autocomplete results. It is useful for rendering sections in different row or column layouts.
+   * The default implementation appends all the sections to the root:
+   *
+   * ```js
+   * autocomplete({
+   *   // ...
+   *   render({ root, sections }) {
+   *     for (const section of sections) {
+   *       root.appendChild(section);
+   *     }
+   *   },
+   * });
+   * ```
+   */
+  render?: AutocompleteRenderer<TItem>;
+  initialState?: Partial<AutocompleteState<TItem>>;
+}

packages/autocomplete-js/src/types/AutocompleteSource.ts

@@ -0,0 +1,56 @@
+import {
+  AutocompleteSource as AutocompleteCoreSource,
+  InternalAutocompleteSource as InternalAutocompleteCoreSource,
+  BaseItem,
+} from '@algolia/autocomplete-core';
+
+import { AutocompleteState } from './AutocompleteState';
+
+type Template<TParams> = (params: TParams) => string | void;
+
+/**
+ * Templates to display in the autocomplete panel.
+ *
+ * A template can either return a string, or perform DOM mutations (manipulating DOM elements with JavaScript and attaching events) without returning a string.
+ */
+export type SourceTemplates<TItem extends BaseItem> = {
+  /**
+   * The template for the suggestion item.
+   */
+  item: Template<{
+    root: HTMLElement;
+    item: TItem;
+    state: AutocompleteState<TItem>;
+  }>;
+  /**
+   * The template for the section header.
+   */
+  header?: Template<{
+    root: HTMLElement;
+    state: AutocompleteState<TItem>;
+    source: AutocompleteSource<TItem>;
+    items: TItem[];
+  }>;
+  /**
+   * The template for the section footer.
+   */
+  footer?: Template<{
+    root: HTMLElement;
+    state: AutocompleteState<TItem>;
+    source: AutocompleteSource<TItem>;
+    items: TItem[];
+  }>;
+};
+
+type WithTemplates<TType, TItem extends BaseItem> = TType & {
+  templates: SourceTemplates<TItem>;
+};
+
+export type AutocompleteSource<TItem extends BaseItem> = WithTemplates<
+  AutocompleteCoreSource<TItem>,
+  TItem
+>;
+export type InternalAutocompleteSource<TItem extends BaseItem> = WithTemplates<
+  InternalAutocompleteCoreSource<TItem>,
+  TItem
+>;

packages/autocomplete-js/src/types/AutocompleteState.ts

@@ -0,0 +1,13 @@
+import {
+  AutocompleteState as AutocompleteCoreState,
+  BaseItem,
+} from '@algolia/autocomplete-core';
+
+import { AutocompleteCollection } from './AutocompleteCollection';
+
+export type AutocompleteState<TItem extends BaseItem> = Omit<
+  AutocompleteCoreState<TItem>,
+  'collections'
+> & {
+  collections: Array<AutocompleteCollection<TItem>>;
+};