feat(queryRules): add queryRuleContext widget

src/widgets/index.js

@@ -40,3 +40,6 @@ export { default as panel } from './panel/panel';
 export {
   default as queryRuleCustomData,
 } from './query-rule-custom-data/query-rule-custom-data';
+export {
+  default as queryRuleContext,
+} from './query-rule-context/query-rule-context';

src/widgets/query-rule-context/__tests__/query-rule-context-test.ts

@@ -0,0 +1,18 @@
+import queryRuleContext from '../query-rule-context';
+
+describe('queryRuleContext', () => {
+  describe('Usage', () => {
+    test('does not throw without options', () => {
+      expect(() => {
+        // @ts-ignore
+        queryRuleContext();
+      }).not.toThrow();
+    });
+
+    test('does not throw with empty options', () => {
+      expect(() => {
+        queryRuleContext({});
+      }).not.toThrow();
+    });
+  });
+});

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

@@ -0,0 +1,24 @@
+import noop from 'lodash/noop';
+import { WidgetFactory } from '../../types';
+import connectQueryRules, {
+  QueryRulesConnectorParams,
+} from '../../connectors/query-rules/connectQueryRules';
+
+type QueryRulesWidgetParams = Pick<
+  QueryRulesConnectorParams,
+  'trackedFilters' | 'transformRuleContexts'
+>;
+
+type QueryRuleContext = WidgetFactory<QueryRulesWidgetParams>;
+
+const queryRuleContext: QueryRuleContext = ({
+  trackedFilters,
+  transformRuleContexts,
+} = {}) => {
+  return connectQueryRules(noop)({
+    trackedFilters,
+    transformRuleContexts,
+  });
+};
+
+export default queryRuleContext;

stories/query-rule-context.stories.ts

@@ -0,0 +1,63 @@
+import { storiesOf } from '@storybook/html';
+import { withHits } from '../.storybook/decorators';
+import moviesPlayground from '../.storybook/playgrounds/movies';
+
+type CustomDataItem = {
+  title: string;
+  banner: string;
+  link: string;
+};
+
+const searchOptions = {
+  appId: 'latency',
+  apiKey: 'af044fb0788d6bb15f807e4420592bc5',
+  indexName: 'instant_search_movies',
+  playground: moviesPlayground,
+};
+
+storiesOf('QueryRuleContext', module).add(
+  'default',
+  withHits(({ search, container, instantsearch }) => {
+    const widgetContainer = document.createElement('div');
+    const description = document.createElement('ul');
+    description.innerHTML = `
+        <li>Select the "Drama" category and The Shawshank Redemption appears</li>
+        <li>Select the "Thriller" category and Pulp Fiction appears</li>
+        <li>Type <q>music</q> and a banner will appear.</li>
+      `;
+
+    container.appendChild(description);
+    container.appendChild(widgetContainer);
+
+    search.addWidget(
+      instantsearch.widgets.queryRuleContext({
+        container,
+        trackedFilters: {
+          genre: () => ['Thriller', 'Drama'],
+        },
+      })
+    );
+
+    search.addWidget(
+      instantsearch.widgets.queryRuleCustomData({
+        container: widgetContainer,
+        transformItems: (items: CustomDataItem[]) => items[0],
+        templates: {
+          default({ title, banner, link }: CustomDataItem) {
+            if (!banner) {
+              return '';
+            }
+
+            return `
+              <h2>${title}</h2>
+
+              <a href="${link}">
+                <img src="${banner}" alt="${title}">
+              </a>
+            `;
+          },
+        },
+      })
+    );
+  }, searchOptions)
+);