fix(ts): make template types consistent (algolia#4785)

* fix(ts): make templates types consistent * fix: `Answers` type naming * fix: remove `ComponentTemplates` type utils * fix: remove unneeded comment * fix: inline `searchBoxTemplateProps` templates * fix: remove unneeded casts * fix: move internal type to widget file * rename template component type to `RefinementListComponentTemplates` * fix: make `searchableNoResults` optional * fix: remove unneeded default template * fix: type `defaultTemplates` * fix: apply changes from suggestion Co-authored-by: Haroen Viaene <[email protected]>
7Mat7 · Jul 5, 2021 · e0fbd55 · e0fbd55
1 parent 2f5af95
commit e0fbd55
Show file tree

Hide file tree

Showing 56 changed files with 431 additions and 267 deletions.
diff --git a/src/components/Answers/Answers.tsx b/src/components/Answers/Answers.tsx
@@ -9,15 +9,17 @@ import {
 } from '../../widgets/answers/answers';
 import { ComponentCSSClasses, Hits } from '../../types';
 
-export type AnswerComponentCSSClasses = ComponentCSSClasses<AnswersCSSClasses>;
+export type AnswersComponentCSSClasses = ComponentCSSClasses<AnswersCSSClasses>;
+
+export type AnswersComponentTemplates = Required<AnswersTemplates>;
 
 export type AnswersProps = {
   hits: Hits;
   isLoading: boolean;
-  cssClasses: AnswerComponentCSSClasses;
+  cssClasses: AnswersComponentCSSClasses;
   templateProps: {
     [key: string]: any;
-    templates: AnswersTemplates;
+    templates: AnswersComponentTemplates;
   };
 };
 

diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -3,7 +3,10 @@
 import { h } from 'preact';
 import cx from 'classnames';
 import Template from '../Template/Template';
-import { BreadcrumbCSSClasses } from '../../widgets/breadcrumb/breadcrumb';
+import {
+  BreadcrumbCSSClasses,
+  BreadcrumbTemplates,
+} from '../../widgets/breadcrumb/breadcrumb';
 import { ComponentCSSClasses } from '../../types';
 
 type BreadcrumbItem = {
@@ -15,16 +18,13 @@ export type BreadcrumbComponentCSSClasses = ComponentCSSClasses<
   BreadcrumbCSSClasses
 >;
 
-type BreadcrumbTemplates = {
-  home: string;
-  separator: string;
-};
+export type BreadcrumbComponentTemplates = Required<BreadcrumbTemplates>;
 
 export type BreadcrumbProps = {
   items: BreadcrumbItem[];
   cssClasses: BreadcrumbComponentCSSClasses;
   templateProps: {
-    templates: BreadcrumbTemplates;
+    templates: BreadcrumbComponentTemplates;
   };
   createURL(value: string | undefined): string;
   refine(value: string | undefined): void;

diff --git a/src/components/ClearRefinements/ClearRefinements.tsx b/src/components/ClearRefinements/ClearRefinements.tsx
@@ -14,13 +14,17 @@ export type ClearRefinementsComponentCSSClasses = ComponentCSSClasses<
   ClearRefinementsCSSClasses
 >;
 
+export type ClearRefinementsComponentTemplates = Required<
+  ClearRefinementsTemplates
+>;
+
 export type ClearRefinementsProps = {
   refine: ClearRefinementsRenderState['refine'];
   cssClasses: ClearRefinementsComponentCSSClasses;
   hasRefinements: ClearRefinementsRenderState['hasRefinements'];
   templateProps: {
     [key: string]: any;
-    templates: ClearRefinementsTemplates;
+    templates: ClearRefinementsComponentTemplates;
   };
 };
 

diff --git a/src/components/Hits/Hits.tsx b/src/components/Hits/Hits.tsx
@@ -10,6 +10,8 @@ import { HitsCSSClasses, HitsTemplates } from '../../widgets/hits/hits';
 
 export type HitsComponentCSSClasses = ComponentCSSClasses<HitsCSSClasses>;
 
+export type HitsComponentTemplates = Required<HitsTemplates>;
+
 export type HitsProps = {
   results: SearchResults;
   hits: HitsArray;
@@ -18,7 +20,7 @@ export type HitsProps = {
   cssClasses: HitsComponentCSSClasses;
   templateProps: {
     [key: string]: any;
-    templates: HitsTemplates;
+    templates: HitsComponentTemplates;
   };
 };
 

diff --git a/src/components/Hits/__tests__/Hits-test.tsx b/src/components/Hits/__tests__/Hits-test.tsx
@@ -20,7 +20,7 @@ describe('Hits', () => {
   function shallowRender(extraProps = {}) {
     const props = {
       cssClasses,
-      templateProps: { templates: {} },
+      templateProps: { templates: { empty: 'No results', item: 'item' } },
       ...extraProps,
     };
 
@@ -244,6 +244,7 @@ describe('Hits', () => {
         templateProps: {
           templates: {
             item: 'item',
+            empty: 'No results',
           },
         },
         cssClasses,
@@ -295,6 +296,7 @@ describe('Hits', () => {
                 hit,
               });
             },
+            empty: 'No results',
           },
         },
         cssClasses,

diff --git a/src/components/InfiniteHits/InfiniteHits.tsx b/src/components/InfiniteHits/InfiniteHits.tsx
@@ -15,6 +15,8 @@ export type InfiniteHitsComponentCSSClasses = ComponentCSSClasses<
   InfiniteHitsCSSClasses
 >;
 
+export type InfiniteHitsComponentTemplates = Required<InfiniteHitsTemplates>;
+
 export type InfiniteHitsProps = {
   cssClasses: InfiniteHitsComponentCSSClasses;
   hits: Hits;
@@ -24,7 +26,7 @@ export type InfiniteHitsProps = {
   showMore: () => void;
   templateProps: {
     [key: string]: any;
-    templates: InfiniteHitsTemplates;
+    templates: InfiniteHitsComponentTemplates;
   };
   isFirstPage: boolean;
   isLastPage: boolean;

diff --git a/src/components/MenuSelect/MenuSelect.tsx b/src/components/MenuSelect/MenuSelect.tsx
@@ -15,6 +15,8 @@ export type MenuSelectComponentCSSClasses = ComponentCSSClasses<
   MenuSelectCSSClasses
 >;
 
+export type MenuSelectComponentTemplates = Required<MenuSelectTemplates>;
+
 type MenuItem = {
   /**
    * The value of the menu item.
@@ -39,7 +41,7 @@ type Props = {
   items: MenuItem[];
   refine: MenuRenderState['refine'];
   templateProps: {
-    templates: MenuSelectTemplates;
+    templates: MenuSelectComponentTemplates;
   };
 };
 

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -15,11 +15,13 @@ export type PaginationComponentCSSClasses = ComponentCSSClasses<
   PaginationCSSClasses
 >;
 
+export type PaginationComponentTemplates = Required<PaginationTemplates>;
+
 export type PaginationProps = {
   createURL(value: number): string;
   cssClasses: PaginationComponentCSSClasses;
   currentPage: number;
-  templates: PaginationTemplates;
+  templates: PaginationComponentTemplates;
   nbPages?: number;
   pages?: number[];
   isFirstPage: boolean;

diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
@@ -16,13 +16,17 @@ export type PanelComponentCSSClasses = ComponentCSSClasses<
   Omit<PanelCSSClasses, 'collapseIcon'>
 >;
 
+export type PanelComponentTemplates<
+  TWidget extends UnknownWidgetFactory
+> = Required<PanelTemplates<TWidget>>;
+
 export type PanelProps<TWidget extends UnknownWidgetFactory> = {
   hidden: boolean;
   collapsible: boolean;
   isCollapsed: boolean;
   data: RenderOptions;
   cssClasses: PanelComponentCSSClasses;
-  templates: Required<PanelTemplates<TWidget>>;
+  templates: PanelComponentTemplates<TWidget>;
   bodyElement: HTMLElement;
 };
 

diff --git a/src/components/QueryRuleCustomData/QueryRuleCustomData.tsx b/src/components/QueryRuleCustomData/QueryRuleCustomData.tsx
@@ -12,9 +12,13 @@ export type QueryRuleCustomDataComponentCSSClasses = ComponentCSSClasses<
   QueryRuleCustomDataCSSClasses
 >;
 
+export type QueryRuleCustomDataComponentTemplates = Required<
+  QueryRuleCustomDataTemplates
+>;
+
 export type QueryRuleCustomDataProps = {
   cssClasses: QueryRuleCustomDataComponentCSSClasses;
-  templates: QueryRuleCustomDataTemplates;
+  templates: QueryRuleCustomDataComponentTemplates;
   items: any[];
 };
 

diff --git a/src/components/RangeInput/RangeInput.tsx b/src/components/RangeInput/RangeInput.tsx
@@ -14,14 +14,16 @@ export type RangeInputComponentCSSClasses = ComponentCSSClasses<
   RangeInputCSSClasses
 >;
 
+export type RangeInputComponentTemplates = Required<RangeInputTemplates>;
+
 export type RangeInputProps = {
   min?: number;
   max?: number;
   step: number;
   values: Partial<Range>;
   cssClasses: RangeInputComponentCSSClasses;
   templateProps: {
-    templates: RangeInputTemplates;
+    templates: RangeInputComponentTemplates;
   };
   refine(rangeValue: RangeBoundaries): void;
 };

diff --git a/src/components/RefinementList/RefinementList.tsx b/src/components/RefinementList/RefinementList.tsx
@@ -8,15 +8,24 @@ import Template from '../Template/Template';
 import RefinementListItem from './RefinementListItem';
 import SearchBox, {
   SearchBoxComponentCSSClasses,
+  SearchBoxComponentTemplates,
 } from '../SearchBox/SearchBox';
 import { RefinementListItem as TRefinementListItem } from '../../connectors/refinement-list/connectRefinementList';
 import { HierarchicalMenuItem } from '../../connectors/hierarchical-menu/connectHierarchicalMenu';
-import { SearchBoxTemplates } from '../../widgets/search-box/search-box';
-import { ComponentCSSClasses, CreateURL, Templates } from '../../types';
-import { RefinementListOwnCSSClasses } from '../../widgets/refinement-list/refinement-list';
+import {
+  ComponentCSSClasses,
+  CreateURL,
+  Templates,
+  Template as TemplateType,
+} from '../../types';
+import {
+  RefinementListOwnCSSClasses,
+  RefinementListOwnTemplates,
+} from '../../widgets/refinement-list/refinement-list';
 import { RatingMenuComponentCSSClasses } from '../../widgets/rating-menu/rating-menu';
 import { HierarchicalMenuComponentCSSClasses } from '../../widgets/hierarchical-menu/hierarchical-menu';
 
+// CSS types
 type RefinementListOptionalClasses =
   | 'noResults'
   | 'checkbox'
@@ -29,19 +38,25 @@ type RefinementListWidgetCSSClasses = ComponentCSSClasses<
   RefinementListOwnCSSClasses
 >;
 
-type RefinementListRequired = Omit<
+type RefinementListRequiredCSSClasses = Omit<
   RefinementListWidgetCSSClasses,
   RefinementListOptionalClasses
 > &
   Partial<Pick<RefinementListWidgetCSSClasses, RefinementListOptionalClasses>>;
 
-export type RefinementListComponentCSSClasses = RefinementListRequired & {
+export type RefinementListComponentCSSClasses = RefinementListRequiredCSSClasses & {
   searchable?: SearchBoxComponentCSSClasses;
 } & Partial<Pick<RatingMenuComponentCSSClasses, 'disabledItem'>> &
   Partial<
     Pick<HierarchicalMenuComponentCSSClasses, 'childList' | 'parentItem'>
   >;
 
+export type RefinementListComponentTemplates = Required<
+  RefinementListOwnTemplates
+> & {
+  searchableNoResults?: TemplateType<void>;
+};
+
 type FacetValue = TRefinementListItem | HierarchicalMenuItem;
 type FacetValues = TRefinementListItem[] | HierarchicalMenuItem[];
 
@@ -51,20 +66,22 @@ export type RefinementListProps<TTemplates extends Templates> = {
   depth?: number;
   facetValues?: FacetValues;
   attribute?: string;
-  templateProps?: PreparedTemplateProps<TTemplates>;
-  searchBoxTemplateProps?: PreparedTemplateProps<SearchBoxTemplates>;
+  templateProps: PreparedTemplateProps<TTemplates>;
   toggleRefinement: (value: string) => void;
-  searchFacetValues?: (query: string) => void;
-  searchPlaceholder?: string;
-  isFromSearch?: boolean;
   showMore?: boolean;
   toggleShowMore?: () => void;
   isShowingMore?: boolean;
   hasExhaustiveItems?: boolean;
   canToggleShowMore?: boolean;
-  searchIsAlwaysActive?: boolean;
   className?: string;
   children?: h.JSX.Element;
+
+  // searchable props are optional, but will definitely be present in a searchable context
+  isFromSearch?: boolean;
+  searchIsAlwaysActive?: boolean;
+  searchFacetValues?: (query: string) => void;
+  searchPlaceholder?: string;
+  searchBoxTemplateProps?: PreparedTemplateProps<SearchBoxComponentTemplates>;
 };
 
 const defaultProps = {
@@ -302,18 +319,14 @@ class RefinementList<TTemplates extends Templates> extends Component<
       this.props.searchIsAlwaysActive !== true &&
       !(this.props.isFromSearch || !this.props.hasExhaustiveItems);
 
-    const templates = this.props.searchBoxTemplateProps
-      ? this.props.searchBoxTemplateProps.templates
-      : undefined;
-
     const searchBox = this.props.searchFacetValues && (
       <div className={this.props.cssClasses.searchBox}>
         <SearchBox
           ref={this.searchBox}
           placeholder={this.props.searchPlaceholder}
           disabled={shouldDisableSearchBox}
           cssClasses={this.props.cssClasses.searchable!}
-          templates={templates}
+          templates={this.props.searchBoxTemplateProps!.templates}
           onChange={(event: Event) =>
             this.props.searchFacetValues!(
               (event.target as HTMLInputElement).value

diff --git a/src/components/RefinementList/__tests__/RefinementList-test.tsx b/src/components/RefinementList/__tests__/RefinementList-test.tsx
@@ -544,10 +544,7 @@ describe('RefinementList', () => {
         canToggleShowMore: true,
         templateProps: {
           templatesConfig: {},
-          templates: {
-            item: (item: RefinementListItemData) => item.value,
-            showMoreText: (x: any) => JSON.stringify(x),
-          },
+          templates,
           useCustomCompileOptions: {},
         },
         toggleRefinement: () => {},
@@ -588,10 +585,7 @@ describe('RefinementList', () => {
         canToggleShowMore: false,
         templateProps: {
           templatesConfig: {},
-          templates: {
-            item: (item: RefinementListItemData) => item.value,
-            showMoreText: (x: any) => JSON.stringify(x),
-          },
+          templates,
           useCustomCompileOptions: {},
         },
         toggleRefinement: () => {},

diff --git a/src/components/RelevantSort/RelevantSort.tsx b/src/components/RelevantSort/RelevantSort.tsx
@@ -12,9 +12,11 @@ export type RelevantSortComponentCSSClasses = ComponentCSSClasses<
   RelevantSortCSSClasses
 >;
 
+export type RelevantSortComponentTemplates = Required<RelevantSortTemplates>;
+
 type RelevantSortProps = {
   cssClasses: RelevantSortComponentCSSClasses;
-  templates: RelevantSortTemplates;
+  templates: RelevantSortComponentTemplates;
   isRelevantSorted: boolean;
   isVirtualReplica: boolean;
   refine(relevancyStrictness: number | undefined): void;

diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
@@ -13,10 +13,12 @@ export type SearchBoxComponentCSSClasses = ComponentCSSClasses<
   SearchBoxCSSClasses
 >;
 
+export type SearchBoxComponentTemplates = Required<SearchBoxTemplates>;
+
 type SearchBoxProps = {
   placeholder?: string;
   cssClasses: SearchBoxComponentCSSClasses;
-  templates?: SearchBoxTemplates;
+  templates: SearchBoxComponentTemplates;
   query?: string;
   showSubmit?: boolean;
   showReset?: boolean;

diff --git a/src/components/Stats/Stats.tsx b/src/components/Stats/Stats.tsx
@@ -8,11 +8,13 @@ import { ComponentCSSClasses } from '../../types';
 
 export type StatsComponentCSSClasses = ComponentCSSClasses<StatsCSSClasses>;
 
+export type StatsComponentTemplates = Required<StatsTemplates>;
+
 type StatsProps = {
   cssClasses: StatsComponentCSSClasses;
   templateProps: {
     [key: string]: any;
-    templates: StatsTemplates;
+    templates: StatsComponentTemplates;
   };
   hitsPerPage: number | undefined;
   nbHits: number;