fix(queryRules): fix types and stories (#3670)

src/components/QueryRuleCustomData/QueryRuleCustomData.tsx

@@ -8,7 +8,7 @@ import Template from '../Template/Template';
 type QueryRuleCustomDataProps = {
   cssClasses: QueryRuleCustomDataCSSClasses;
   templates: QueryRuleCustomDataTemplates;
-  items: object[];
+  items: any[];
 };
 
 const QueryRuleCustomData = ({

src/connectors/query-rules/connectQueryRules.ts

@@ -26,7 +26,7 @@ export type ParamTrackedFilters = {
   ) => TrackedFilterRefinement[];
 };
 export type ParamTransformRuleContexts = (ruleContexts: string[]) => string[];
-type ParamTransformItems = (items: object[]) => any;
+type ParamTransformItems = (items: any[]) => any;
 
 export type QueryRulesConnectorParams = {
   trackedFilters?: ParamTrackedFilters;
@@ -35,7 +35,7 @@ export type QueryRulesConnectorParams = {
 };
 
 export interface QueryRulesRenderOptions<T> extends RenderOptions<T> {
-  items: object[];
+  items: any[];
 }
 
 export type QueryRulesRenderer<T> = Renderer<

src/widgets/query-rule-context/query-rule-context.tsx

@@ -6,19 +6,19 @@ import connectQueryRules, {
   ParamTransformRuleContexts,
 } from '../../connectors/query-rules/connectQueryRules';
 
-type QueryRulesWidgetParams = {
+type QueryRuleContextWidgetParams = {
   trackedFilters: ParamTrackedFilters;
   transformRuleContexts?: ParamTransformRuleContexts;
 };
 
-type QueryRuleContext = WidgetFactory<QueryRulesWidgetParams>;
+type QueryRuleContext = WidgetFactory<QueryRuleContextWidgetParams>;
 
 const withUsage = createDocumentationMessageGenerator({
   name: 'query-rule-context',
 });
 
 const queryRuleContext: QueryRuleContext = (
-  { trackedFilters, transformRuleContexts } = {} as QueryRulesWidgetParams
+  { trackedFilters, transformRuleContexts } = {} as QueryRuleContextWidgetParams
 ) => {
   if (!trackedFilters) {
     throw new Error(withUsage('The `trackedFilters` option is required.'));

src/widgets/query-rule-custom-data/query-rule-custom-data.tsx

@@ -16,14 +16,14 @@ export type QueryRuleCustomDataCSSClasses = {
 };
 
 export type QueryRuleCustomDataTemplates = {
-  default: string | (({ items }: { items: object[] }) => string);
+  default?: string | (({ items }: { items: any }) => string);
 };
 
 type QueryRuleCustomDataWidgetParams = {
   container: string | HTMLElement;
   cssClasses?: QueryRuleCustomDataCSSClasses;
   templates?: QueryRuleCustomDataTemplates;
-  transformItems?: (items: object[]) => any;
+  transformItems?: (items: any[]) => any;
 };
 
 interface QueryRuleCustomDataRendererWidgetParams

stories/query-rule-context.stories.ts

@@ -1,6 +1,9 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 import moviesPlayground from '../.storybook/playgrounds/movies';
+import configure from '../src/widgets/configure/configure';
+import queryRuleCustomData from '../src/widgets/query-rule-custom-data/query-rule-custom-data';
+import queryRuleContext from '../src/widgets/query-rule-context/query-rule-context';
 
 type CustomDataItem = {
   title: string;
@@ -18,7 +21,7 @@ const searchOptions = {
 storiesOf('QueryRuleContext', module)
   .add(
     'default',
-    withHits(({ search, container, instantsearch }) => {
+    withHits(({ search, container }) => {
       const widgetContainer = document.createElement('div');
       const description = document.createElement('ul');
       description.innerHTML = `
@@ -31,15 +34,15 @@ storiesOf('QueryRuleContext', module)
       container.appendChild(widgetContainer);
 
       search.addWidget(
-        instantsearch.widgets.queryRuleContext({
+        queryRuleContext({
           trackedFilters: {
             genre: () => ['Thriller', 'Drama'],
           },
         })
       );
 
       search.addWidget(
-        instantsearch.widgets.queryRuleCustomData({
+        queryRuleCustomData({
           container: widgetContainer,
           transformItems(items: CustomDataItem[]) {
             return items.filter(item => typeof item.banner !== 'undefined');
@@ -68,7 +71,7 @@ storiesOf('QueryRuleContext', module)
   )
   .add(
     'with initial filter',
-    withHits(({ search, container, instantsearch }) => {
+    withHits(({ search, container }) => {
       const widgetContainer = document.createElement('div');
       const description = document.createElement('ul');
       description.innerHTML = `
@@ -81,33 +84,34 @@ storiesOf('QueryRuleContext', module)
       container.appendChild(widgetContainer);
 
       search.addWidget(
-        instantsearch.widgets.configure({
+        configure({
           disjunctiveFacetsRefinements: {
             genre: ['Drama'],
           },
         })
       );
 
       search.addWidget(
-        instantsearch.widgets.queryRuleContext({
+        queryRuleContext({
           trackedFilters: {
             genre: () => ['Thriller', 'Drama'],
           },
         })
       );
 
       search.addWidget(
-        instantsearch.widgets.queryRuleCustomData({
+        queryRuleCustomData({
           container: widgetContainer,
           transformItems(items: CustomDataItem[]) {
             return items.filter(item => typeof item.banner !== 'undefined');
           },
           templates: {
             default: ({ items }: { items: CustomDataItem[] }) =>
-              items.map(item => {
-                const { title, banner, link } = item;
+              items
+                .map(item => {
+                  const { title, banner, link } = item;
 
-                return `
+                  return `
                   <section>
                     <h2>${title}</h2>
 
@@ -116,7 +120,8 @@ storiesOf('QueryRuleContext', module)
                     </a>
                   </section>
                 `;
-              }),
+                })
+                .join(''),
           },
         })
       );

stories/query-rule-custom-data.stories.ts

@@ -1,6 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 import moviesPlayground from '../.storybook/playgrounds/movies';
+import queryRuleCustomData from '../src/widgets/query-rule-custom-data/query-rule-custom-data';
 
 type CustomDataItem = {
   title: string;
@@ -18,7 +19,7 @@ const searchOptions = {
 storiesOf('QueryRuleCustomData', module)
   .add(
     'default',
-    withHits(({ search, container, instantsearch }) => {
+    withHits(({ search, container }) => {
       const widgetContainer = document.createElement('div');
       const description = document.createElement('p');
       description.innerHTML = 'Type <q>music</q> and a banner will appear.';
@@ -27,7 +28,7 @@ storiesOf('QueryRuleCustomData', module)
       container.appendChild(widgetContainer);
 
       search.addWidget(
-        instantsearch.widgets.queryRuleCustomData({
+        queryRuleCustomData({
           container: widgetContainer,
           templates: {
             default: ({ items }: { items: CustomDataItem[] }) =>
@@ -88,7 +89,7 @@ storiesOf('QueryRuleCustomData', module)
   )
   .add(
     'with default and single banner',
-    withHits(({ search, container, instantsearch }) => {
+    withHits(({ search, container }) => {
       const widgetContainer = document.createElement('div');
       const description = document.createElement('p');
       description.innerHTML =
@@ -98,7 +99,7 @@ storiesOf('QueryRuleCustomData', module)
       container.appendChild(widgetContainer);
 
       search.addWidget(
-        instantsearch.widgets.queryRuleCustomData({
+        queryRuleCustomData({
           container: widgetContainer,
           transformItems: (items: CustomDataItem[]) => {
             if (items.length > 0) {
@@ -115,9 +116,9 @@ storiesOf('QueryRuleCustomData', module)
             ];
           },
           templates: {
-            default(items: CustomDataItem[]) {
+            default({ items }: { items: CustomDataItem[] }) {
               if (items.length === 0) {
-                return;
+                return '';
               }
 
               const { title, banner, link } = items[0];