refactor(ts): remove implicit any (algolia#4791)

* refactor(ts): remove instances of implicit any * address feedback * fix lint
7Mat7 · Jul 9, 2021 · ddf60ad · ddf60ad
1 parent 07b7e08
commit ddf60ad
Show file tree

Hide file tree

Showing 124 changed files with 1,928 additions and 1,033 deletions.
diff --git a/.storybook/decorators/withHits.ts b/.storybook/decorators/withHits.ts
@@ -3,10 +3,29 @@ import algoliasearch from 'algoliasearch/lite';
 import instantsearch from '../../src/index';
 import defaultPlayground from '../playgrounds/default';
 import { configure } from '../../src/widgets';
-import { InstantSearch } from '../../src/types';
+import { InstantSearch, InstantSearchOptions } from '../../src/types';
 
 type InstantSearchUMDModule = typeof instantsearch;
 
+export type Playground = (options: {
+  search: InstantSearch;
+  instantsearch: InstantSearchUMDModule;
+  leftPanel: HTMLDivElement;
+  rightPanel: HTMLDivElement;
+}) => void;
+
+type InstantSearchOptionalParameters = 'searchClient' | 'indexName';
+
+type SearchOptions = Omit<
+  InstantSearchOptions,
+  InstantSearchOptionalParameters
+> &
+  Partial<Pick<InstantSearchOptions, InstantSearchOptionalParameters>> & {
+    appId?: string;
+    apiKey?: string;
+    playground?: Playground;
+  };
+
 export const withHits = (
   storyFn: ({
     container,
@@ -17,7 +36,7 @@ export const withHits = (
     instantsearch: InstantSearchUMDModule;
     search: InstantSearch;
   }) => void,
-  searchOptions?: any
+  searchOptions?: SearchOptions
 ) => () => {
   const {
     appId = 'latency',
@@ -38,6 +57,7 @@ export const withHits = (
         },
         read: () => ({}),
         createURL: () => '',
+        dispose: () => {},
         onUpdate: () => {},
       },
     },
@@ -82,6 +102,7 @@ export const withHits = (
 
   playground({
     search,
+    instantsearch,
     leftPanel: leftPanelPlaygroundElement,
     rightPanel: rightPanelPlaygroundElement,
   });

diff --git a/.storybook/decorators/withLifecycle.ts b/.storybook/decorators/withLifecycle.ts
@@ -1,4 +1,4 @@
-import { Widget } from '../../src/types';
+import { InstantSearch, Widget } from '../../src/types';
 import { IndexWidget } from '../../src/widgets/index/index';
 
 const setDisabledState = (element: HTMLButtonElement, state: boolean) => {
@@ -7,7 +7,7 @@ const setDisabledState = (element: HTMLButtonElement, state: boolean) => {
 };
 
 export const withLifecycle = (
-  search: any,
+  search: InstantSearch,
   container: HTMLElement,
   fn: (node: HTMLElement) => Widget | IndexWidget
 ) => {

diff --git a/.storybook/playgrounds/default.ts b/.storybook/playgrounds/default.ts
@@ -1,6 +1,4 @@
-import instantsearch from '../../src/index';
-import { panel, numericMenu, hits } from '../../src/widgets';
-import { createInsightsMiddleware } from '../../src/middlewares';
+import { Playground } from '../decorators';
 
 export const hitsItemTemplate = `
 <div
@@ -22,19 +20,18 @@ export const hitsItemTemplate = `
 </article>
 `;
 
-function instantSearchPlayground({
+const instantSearchPlayground: Playground = function instantSearchPlayground({
   search,
+  instantsearch,
   leftPanel,
   rightPanel,
-}: {
-  search: any;
-  leftPanel: HTMLElement;
-  rightPanel: HTMLElement;
 }) {
   const refinementList = document.createElement('div');
   leftPanel.appendChild(refinementList);
 
-  const brandList = panel({
+  const brandList = instantsearch.widgets.panel<
+    typeof instantsearch.widgets.refinementList
+  >({
     templates: {
       header: 'Brands',
     },
@@ -50,7 +47,9 @@ function instantSearchPlayground({
   const numericMenuContainer = document.createElement('div');
   leftPanel.appendChild(numericMenuContainer);
 
-  const priceMenu = panel({ templates: { header: 'Price' } })(numericMenu);
+  const priceMenu = instantsearch.widgets.panel<
+    typeof instantsearch.widgets.numericMenu
+  >({ templates: { header: 'Price' } })(instantsearch.widgets.numericMenu);
 
   search.addWidgets([
     priceMenu({
@@ -69,7 +68,9 @@ function instantSearchPlayground({
   const ratingMenu = document.createElement('div');
   leftPanel.appendChild(ratingMenu);
 
-  const ratingList = panel({
+  const ratingList = instantsearch.widgets.panel<
+    typeof instantsearch.widgets.ratingMenu
+  >({
     templates: {
       header: 'Rating',
     },
@@ -108,7 +109,7 @@ function instantSearchPlayground({
   rightPanel.appendChild(hitsElement);
 
   search.addWidgets([
-    hits({
+    instantsearch.widgets.hits({
       container: hitsElement,
       templates: {
         item: hitsItemTemplate,
@@ -128,13 +129,13 @@ function instantSearchPlayground({
     }),
   ]);
 
-  const insights = createInsightsMiddleware({
+  const insights = instantsearch.middlewares.createInsightsMiddleware({
     insightsClient: null,
     onEvent: props => {
       console.log('insights onEvent', props);
     },
   });
   search.use(insights);
-}
+};
 
 export default instantSearchPlayground;
diff --git a/.storybook/playgrounds/movies.ts b/.storybook/playgrounds/movies.ts
@@ -1,19 +1,17 @@
-import instantsearch from '../../src/index';
-import { panel } from '../../src/widgets';
+import { Playground } from '../decorators';
 
-function demoQueryRulesPlayground({
+const demoQueryRulesPlayground: Playground = function demoQueryRulesPlayground({
   search,
+  instantsearch,
   leftPanel,
   rightPanel,
-}: {
-  search: any;
-  leftPanel: HTMLElement;
-  rightPanel: HTMLElement;
 }) {
   const refinementList = document.createElement('div');
   leftPanel.appendChild(refinementList);
 
-  const brandList = panel({
+  const brandList = instantsearch.widgets.panel<
+    typeof instantsearch.widgets.refinementList
+  >({
     templates: {
       header: 'Genres',
     },
@@ -81,6 +79,6 @@ function demoQueryRulesPlayground({
       container: pagination,
     }),
   ]);
-}
+};
 
 export default demoQueryRulesPlayground;
diff --git a/.storybook/utils/create-info-box.d.ts b/.storybook/utils/create-info-box.d.ts
@@ -0,0 +1,15 @@
+declare class InfoBox {
+  div_: HTMLDivElement;
+  setOptions({ pixelOffset: any });
+  open(map: google.maps.Map, marker: google.maps.Marker): void;
+  close(): void;
+  getMap(): google.maps.Map;
+  setContent(html: string): void;
+  addListener(event: string, cb: () => void);
+}
+
+declare const createInfoBox: (
+  googleReference: typeof google
+) => new () => InfoBox;
+
+export default createInfoBox;
diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
     "@types/enzyme": "^3.1.15",
     "@types/jest": "^26.0.22",
     "@types/jest-diff": "^24.3.0",
+    "@types/scriptjs": "0.0.2",
     "@types/storybook__addon-actions": "^3.4.2",
     "@typescript-eslint/eslint-plugin": "4.15.1",
     "@typescript-eslint/parser": "4.15.1",

diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -8,11 +8,8 @@ import {
   BreadcrumbTemplates,
 } from '../../widgets/breadcrumb/breadcrumb';
 import { ComponentCSSClasses } from '../../types';
-
-type BreadcrumbItem = {
-  value: string;
-  label: string;
-};
+import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
+import { BreadcrumbConnectorParamsItem } from '../../connectors/breadcrumb/connectBreadcrumb';
 
 export type BreadcrumbComponentCSSClasses = ComponentCSSClasses<
   BreadcrumbCSSClasses
@@ -21,13 +18,11 @@ export type BreadcrumbComponentCSSClasses = ComponentCSSClasses<
 export type BreadcrumbComponentTemplates = Required<BreadcrumbTemplates>;
 
 export type BreadcrumbProps = {
-  items: BreadcrumbItem[];
+  items: BreadcrumbConnectorParamsItem[];
   cssClasses: BreadcrumbComponentCSSClasses;
-  templateProps: {
-    templates: BreadcrumbComponentTemplates;
-  };
-  createURL(value: string | undefined): string;
-  refine(value: string | undefined): void;
+  templateProps: PreparedTemplateProps<BreadcrumbComponentTemplates>;
+  createURL(value?: string | null): string;
+  refine(value?: string | null): void;
   canRefine?: boolean;
 };
 

diff --git a/src/components/Breadcrumb/__tests__/Breadcrumb-test.tsx b/src/components/Breadcrumb/__tests__/Breadcrumb-test.tsx
@@ -3,6 +3,8 @@
 import { h } from 'preact';
 import { render, fireEvent } from '@testing-library/preact';
 import Breadcrumb, { BreadcrumbProps } from '../Breadcrumb';
+import { prepareTemplateProps } from '../../../lib/utils';
+import defaultTemplates from '../../../widgets/breadcrumb/defaultTemplates';
 
 const defaultProps: BreadcrumbProps = {
   items: [],
@@ -17,12 +19,11 @@ const defaultProps: BreadcrumbProps = {
     link: 'link',
     separator: 'separator',
   },
-  templateProps: {
-    templates: {
-      home: 'home',
-      separator: ' > ',
-    },
-  },
+  templateProps: prepareTemplateProps({
+    defaultTemplates,
+    templates: {},
+    templatesConfig: {},
+  }),
 };
 
 describe('Breadcrumb', () => {

diff --git a/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.tsx.snap b/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Breadcrumb Rendering renders with a single item 1`] = `
         <a
           class="link"
         >
-          home
+          Home
         </a>
       </li>
       <li
@@ -47,7 +47,7 @@ exports[`Breadcrumb Rendering renders with multiple items 1`] = `
         <a
           class="link"
         >
-          home
+          Home
         </a>
       </li>
       <li
@@ -96,7 +96,7 @@ exports[`Breadcrumb Rendering renders without items 1`] = `
         <a
           class="link"
         >
-          home
+          Home
         </a>
       </li>
     </ul>

diff --git a/src/components/ClearRefinements/ClearRefinements.tsx b/src/components/ClearRefinements/ClearRefinements.tsx
@@ -9,6 +9,7 @@ import {
   ClearRefinementsTemplates,
 } from '../../widgets/clear-refinements/clear-refinements';
 import { ComponentCSSClasses } from '../../types';
+import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 
 export type ClearRefinementsComponentCSSClasses = ComponentCSSClasses<
   ClearRefinementsCSSClasses
@@ -22,10 +23,7 @@ export type ClearRefinementsProps = {
   refine: ClearRefinementsRenderState['refine'];
   cssClasses: ClearRefinementsComponentCSSClasses;
   hasRefinements: ClearRefinementsRenderState['hasRefinements'];
-  templateProps: {
-    [key: string]: any;
-    templates: ClearRefinementsComponentTemplates;
-  };
+  templateProps: PreparedTemplateProps<ClearRefinementsComponentTemplates>;
 };
 
 const ClearRefinements = ({

diff --git a/src/components/ClearRefinements/__tests__/ClearRefinements-test.tsx b/src/components/ClearRefinements/__tests__/ClearRefinements-test.tsx
@@ -3,6 +3,8 @@
 import { h } from 'preact';
 import ClearRefinements from '../ClearRefinements';
 import { mount } from '../../../../test/utils/enzyme';
+import { prepareTemplateProps } from '../../../lib/utils';
+import defaultTemplates from '../../../widgets/clear-refinements/defaultTemplates';
 
 describe('ClearRefinements', () => {
   const defaultProps = {
@@ -13,11 +15,13 @@ describe('ClearRefinements', () => {
       disabledButton: 'disabled',
     },
     hasRefinements: true,
-    templateProps: {
+    templateProps: prepareTemplateProps({
       templates: {
         resetLabel: '',
       },
-    },
+      defaultTemplates,
+      templatesConfig: {},
+    }),
     url: '#all-cleared!',
   };
 

diff --git a/src/components/Hits/Hits.tsx b/src/components/Hits/Hits.tsx
@@ -7,9 +7,9 @@ import { SearchResults } from 'algoliasearch-helper';
 import { BindEventForHits, SendEventForHits } from '../../lib/utils';
 import { ComponentCSSClasses, Hits as HitsArray } from '../../types';
 import { HitsCSSClasses, HitsTemplates } from '../../widgets/hits/hits';
+import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 
 export type HitsComponentCSSClasses = ComponentCSSClasses<HitsCSSClasses>;
-
 export type HitsComponentTemplates = Required<HitsTemplates>;
 
 export type HitsProps = {
@@ -18,10 +18,7 @@ export type HitsProps = {
   sendEvent?: SendEventForHits;
   bindEvent?: BindEventForHits;
   cssClasses: HitsComponentCSSClasses;
-  templateProps: {
-    [key: string]: any;
-    templates: HitsComponentTemplates;
-  };
+  templateProps: PreparedTemplateProps<HitsComponentTemplates>;
 };
 
 const Hits = ({
-Original file line number
+Diff line change
@@ Expand Up @@
             <a
               class="link"
             >
-              home
+              Home
             </a>
           </li>
           <li
@@ Expand Down Expand Up @@
             <a
               class="link"
             >
-              home
+              Home
             </a>
           </li>
           <li
@@ Expand Down Expand Up / @@ -96,7 +96,7 @@ exports[`Breadcrumb Rendering renders without items 1`] = ` @@
             <a
               class="link"
             >
-              home
+              Home
             </a>
           </li>
         </ul>
@@ Expand Down @@