fix(relevantSort): rename smartSort to relevantSort (#4668)

Author: Eunjae Lee

CHANGELOG.md

@@ -3,7 +3,7 @@
 
 ### Bug Fixes
 
-* **smartSort:** export the widget and the connector ([#4663](https://github.com/algolia/instantsearch.js/issues/4663)) ([e7aaa8c](https://github.com/algolia/instantsearch.js/commit/e7aaa8ceb47b8cafc3a3a323ebe47f45f3841ba4))
+* **relevantSort:** export the widget and the connector ([#4663](https://github.com/algolia/instantsearch.js/issues/4663)) ([e7aaa8c](https://github.com/algolia/instantsearch.js/commit/e7aaa8ceb47b8cafc3a3a323ebe47f45f3841ba4))
 
 
 ### Features
@@ -17,7 +17,7 @@
 
 ### Features
 
-* **smartSort:** add widget ([#4648](https://github.com/algolia/instantsearch.js/issues/4648)) ([89c6e86](https://github.com/algolia/instantsearch.js/commit/89c6e868f490e9b6e507dd70c215e962f4c69ccb))
+* **relevantSort:** add widget ([#4648](https://github.com/algolia/instantsearch.js/issues/4648)) ([89c6e86](https://github.com/algolia/instantsearch.js/commit/89c6e868f490e9b6e507dd70c215e962f4c69ccb))
 * **stats:** apply nbSortedHits ([#4649](https://github.com/algolia/instantsearch.js/issues/4649)) ([34478c1](https://github.com/algolia/instantsearch.js/commit/34478c198dcafbd45fd101db0cd2fbe6328272b8))
 * **ts:** convert menu ([#4652](https://github.com/algolia/instantsearch.js/issues/4652)) ([2271b43](https://github.com/algolia/instantsearch.js/commit/2271b4379918e865a1b0cea09c139e517df97bc5))
 

src/components/SmartSort/SmartSort.tsx src/components/RelevantSort/RelevantSort.tsx

@@ -3,25 +3,25 @@
 import { h } from 'preact';
 import Template from '../Template/Template';
 import {
-  SmartSortCSSClasses,
-  SmartSortTemplates,
-} from '../../widgets/smart-sort/smart-sort';
+  RelevantSortCSSClasses,
+  RelevantSortTemplates,
+} from '../../widgets/relevant-sort/relevant-sort';
 
-type SmartSortProps = {
-  cssClasses: SmartSortCSSClasses;
-  templates: SmartSortTemplates;
-  isSmartSorted: boolean;
+type RelevantSortProps = {
+  cssClasses: RelevantSortCSSClasses;
+  templates: RelevantSortTemplates;
+  isRelevantSorted: boolean;
   isVirtualReplica: boolean;
   refine(relevancyStrictness: number | undefined): void;
 };
 
-const SmartSort = ({
+const RelevantSort = ({
   cssClasses,
   templates,
-  isSmartSorted,
+  isRelevantSorted,
   isVirtualReplica,
   refine,
-}: SmartSortProps) =>
+}: RelevantSortProps) =>
   isVirtualReplica ? (
     <div className={cssClasses.root}>
       <Template
@@ -30,13 +30,13 @@ const SmartSort = ({
         rootProps={{
           className: cssClasses.text,
         }}
-        data={{ isSmartSorted }}
+        data={{ isRelevantSorted }}
       />
       <button
         type="button"
         className={cssClasses.button}
         onClick={() => {
-          if (isSmartSorted) {
+          if (isRelevantSorted) {
             refine(0);
           } else {
             refine(undefined);
@@ -47,10 +47,10 @@ const SmartSort = ({
           rootTagName="span"
           templateKey="button"
           templates={templates}
-          data={{ isSmartSorted }}
+          data={{ isRelevantSorted }}
         />
       </button>
     </div>
   ) : null;
 
-export default SmartSort;
+export default RelevantSort;

src/components/SmartSort/__tests__/SmartSort-test.tsx src/components/RelevantSort/__tests__/RelevantSort-test.tsx

@@ -3,7 +3,7 @@
 import { h } from 'preact';
 import { render, fireEvent } from '@testing-library/preact';
 
-import SmartSort from '../SmartSort';
+import RelevantSort from '../RelevantSort';
 
 const cssClasses = {
   root: 'root',
@@ -13,18 +13,18 @@ const cssClasses = {
 
 const templates = {
   text: '',
-  button: ({ isSmartSorted }) => {
-    return isSmartSorted ? 'See all results' : 'See relevant results';
+  button: ({ isRelevantSorted }) => {
+    return isRelevantSorted ? 'See all results' : 'See relevant results';
   },
 };
 
-describe('SmartSort', () => {
+describe('RelevantSort', () => {
   it('render nothing if not virtual replica', () => {
     const { container } = render(
-      <SmartSort
+      <RelevantSort
         cssClasses={cssClasses}
         templates={templates}
-        isSmartSorted={false}
+        isRelevantSorted={false}
         isVirtualReplica={false}
         refine={() => {}}
       />
@@ -34,10 +34,10 @@ describe('SmartSort', () => {
 
   it('render the default status', () => {
     const { container } = render(
-      <SmartSort
+      <RelevantSort
         cssClasses={cssClasses}
         templates={templates}
-        isSmartSorted={false}
+        isRelevantSorted={false}
         isVirtualReplica={true}
         refine={() => {}}
       />
@@ -66,10 +66,10 @@ describe('SmartSort', () => {
   it('refine on button click', () => {
     const refine = jest.fn();
     const { getByText } = render(
-      <SmartSort
+      <RelevantSort
         cssClasses={cssClasses}
         templates={templates}
-        isSmartSorted={false}
+        isRelevantSorted={false}
         isVirtualReplica={true}
         refine={refine}
       />
@@ -80,10 +80,10 @@ describe('SmartSort', () => {
 
   it('render sorted status', () => {
     const { container } = render(
-      <SmartSort
+      <RelevantSort
         cssClasses={cssClasses}
         templates={templates}
-        isSmartSorted={true}
+        isRelevantSorted={true}
         isVirtualReplica={true}
         refine={() => {}}
       />
@@ -112,10 +112,10 @@ describe('SmartSort', () => {
   it('refine with `undefined` on "See relevant results"', () => {
     const refine = jest.fn();
     const { getByText } = render(
-      <SmartSort
+      <RelevantSort
         cssClasses={cssClasses}
         templates={templates}
-        isSmartSorted={false}
+        isRelevantSorted={false}
         isVirtualReplica={true}
         refine={refine}
       />
@@ -128,10 +128,10 @@ describe('SmartSort', () => {
   it('refine with `0` on "Seeing all results"', () => {
     const refine = jest.fn();
     const { getByText } = render(
-      <SmartSort
+      <RelevantSort
         cssClasses={cssClasses}
         templates={templates}
-        isSmartSorted={true}
+        isRelevantSorted={true}
         isVirtualReplica={true}
         refine={refine}
       />

src/connectors/index.ts

@@ -25,4 +25,4 @@ export { default as connectAutocomplete } from './autocomplete/connectAutocomple
 export { default as connectQueryRules } from './query-rules/connectQueryRules';
 export { default as connectVoiceSearch } from './voice-search/connectVoiceSearch';
 export { default as EXPERIMENTAL_connectAnswers } from './answers/connectAnswers';
-export { default as connectSmartSort } from './smart-sort/connectSmartSort';
+export { default as connectRelevantSort } from './relevant-sort/connectRelevantSort';

src/connectors/smart-sort/__tests__/connectSmartSort-test.ts src/connectors/relevant-sort/__tests__/connectRelevantSort-test.ts

@@ -2,7 +2,7 @@ import algoliasearchHelper, {
   SearchParameters,
   SearchResults,
 } from 'algoliasearch-helper';
-import connectSmartSort from '../connectSmartSort';
+import connectRelevantSort from '../connectRelevantSort';
 import {
   createInitOptions,
   createRenderOptions,
@@ -16,17 +16,17 @@ const createHelper = () => {
   return algoliasearchHelper(createSearchClient(), '', {});
 };
 
-describe('connectSmartSort', () => {
+describe('connectRelevantSort', () => {
   it('is a widget', () => {
     const render = jest.fn();
     const unmount = jest.fn();
 
-    const customSmartSort = connectSmartSort(render, unmount);
-    const widget = customSmartSort({});
+    const customRelevantSort = connectRelevantSort(render, unmount);
+    const widget = customRelevantSort({});
 
     expect(widget).toEqual(
       expect.objectContaining({
-        $$type: 'ais.smartSort',
+        $$type: 'ais.relevantSort',
         init: expect.any(Function),
         render: expect.any(Function),
         dispose: expect.any(Function),
@@ -36,7 +36,7 @@ describe('connectSmartSort', () => {
 
   it('dispose relevancyStrictness set by the widget', () => {
     const helper = createHelper();
-    const makeWidget = connectSmartSort(noop);
+    const makeWidget = connectRelevantSort(noop);
     const widget = makeWidget({});
     widget.init!(createInitOptions({ helper }));
     const { refine } = widget.getWidgetRenderState(
@@ -59,7 +59,7 @@ describe('connectSmartSort', () => {
 
   it('apply relevancyStrictness to helper on refine()', () => {
     const helper = createHelper();
-    const makeWidget = connectSmartSort(noop);
+    const makeWidget = connectRelevantSort(noop);
     const widget = makeWidget({});
 
     widget.init!(createInitOptions({ helper }));
@@ -76,9 +76,9 @@ describe('connectSmartSort', () => {
     expect(helper.state.relevancyStrictness).toEqual(11);
   });
 
-  it('decide isSmartSorted based on appliedRelevancyStrictness', () => {
+  it('decide isRelevantSorted based on appliedRelevancyStrictness', () => {
     const helper = createHelper();
-    const makeWidget = connectSmartSort(noop);
+    const makeWidget = connectRelevantSort(noop);
     const widget = makeWidget({});
 
     widget.init!(createInitOptions({ helper }));
@@ -94,7 +94,7 @@ describe('connectSmartSort', () => {
         ]),
       })
     );
-    expect(renderState.isSmartSorted).toBe(true);
+    expect(renderState.isRelevantSorted).toBe(true);
 
     renderState = widget.getWidgetRenderState(
       createRenderOptions({
@@ -107,12 +107,12 @@ describe('connectSmartSort', () => {
         ]),
       })
     );
-    expect(renderState.isSmartSorted).toBe(false);
+    expect(renderState.isRelevantSorted).toBe(false);
   });
 
   it('decide isVirtualReplica based on appliedRelevancyStrictness', () => {
     const helper = createHelper();
-    const makeWidget = connectSmartSort(noop);
+    const makeWidget = connectRelevantSort(noop);
     const widget = makeWidget({});
 
     widget.init!(createInitOptions({ helper }));
@@ -162,15 +162,15 @@ describe('connectSmartSort', () => {
       const helper = createHelper();
       const renderFn = jest.fn();
       const unmountFn = jest.fn();
-      const makeWidget = connectSmartSort(renderFn, unmountFn);
+      const makeWidget = connectRelevantSort(renderFn, unmountFn);
       const widget = makeWidget({});
 
       const renderState1 = widget.getRenderState(
         {},
         createInitOptions({ helper })
       );
-      expect(renderState1.smartSort).toEqual({
-        isSmartSorted: false,
+      expect(renderState1.relevantSort).toEqual({
+        isRelevantSorted: false,
         isVirtualReplica: false,
         refine: expect.any(Function),
         widgetParams: {},
@@ -189,8 +189,8 @@ describe('connectSmartSort', () => {
           ]),
         })
       );
-      expect(renderState2.smartSort).toEqual({
-        isSmartSorted: true,
+      expect(renderState2.relevantSort).toEqual({
+        isRelevantSorted: true,
         isVirtualReplica: true,
         refine: expect.any(Function),
         widgetParams: {},
@@ -201,14 +201,14 @@ describe('connectSmartSort', () => {
   describe('getWidgetRenderState', () => {
     it('return the widget render state', () => {
       const helper = createHelper();
-      const makeWidget = connectSmartSort(noop);
+      const makeWidget = connectRelevantSort(noop);
       const widget = makeWidget({});
 
       const widgetRenderState1 = widget.getWidgetRenderState(
         createInitOptions({ helper })
       );
       expect(widgetRenderState1).toEqual({
-        isSmartSorted: false,
+        isRelevantSorted: false,
         isVirtualReplica: false,
         refine: expect.any(Function),
         widgetParams: {},
@@ -227,7 +227,7 @@ describe('connectSmartSort', () => {
         })
       );
       expect(widgetRenderState2).toEqual({
-        isSmartSorted: true,
+        isRelevantSorted: true,
         isVirtualReplica: true,
         refine: expect.any(Function),
         widgetParams: {},
@@ -238,19 +238,19 @@ describe('connectSmartSort', () => {
   describe('getWidgetUiState', () => {
     it('does not have relevancyStrictness by default', () => {
       const helper = createHelper();
-      const makeWidget = connectSmartSort(noop);
+      const makeWidget = connectRelevantSort(noop);
       const widget = makeWidget({});
 
       const widgetUiState = widget.getWidgetUiState!(
         {},
         { helper, searchParameters: helper.state }
       );
-      expect(widgetUiState.smartSort?.relevancyStrictness).toBeUndefined();
+      expect(widgetUiState.relevantSort?.relevancyStrictness).toBeUndefined();
     });
 
     it('add refined parameters', () => {
       const helper = createHelper();
-      const makeWidget = connectSmartSort(noop);
+      const makeWidget = connectRelevantSort(noop);
       const widget = makeWidget({});
 
       widget.init!(createInitOptions({ helper }));
@@ -262,22 +262,22 @@ describe('connectSmartSort', () => {
       expect(
         widget.getWidgetUiState!({}, { helper, searchParameters: helper.state })
       ).toEqual({
-        smartSort: { relevancyStrictness: 25 },
+        relevantSort: { relevancyStrictness: 25 },
       });
     });
 
     it('overwrite existing uiState with searchParameters', () => {
       const helper = createHelper();
-      const makeWidget = connectSmartSort(noop);
+      const makeWidget = connectRelevantSort(noop);
       const widget = makeWidget({});
 
       expect(
         widget.getWidgetUiState!(
-          { smartSort: { relevancyStrictness: 25 } },
+          { relevantSort: { relevancyStrictness: 25 } },
           { helper, searchParameters: helper.state }
         )
       ).toEqual({
-        smartSort: { relevancyStrictness: undefined },
+        relevantSort: { relevancyStrictness: undefined },
       });
 
       const { refine } = widget.getWidgetRenderState(
@@ -288,18 +288,18 @@ describe('connectSmartSort', () => {
       // applies 30 from searchParameters
       expect(
         widget.getWidgetUiState!(
-          { smartSort: { relevancyStrictness: 25 } },
+          { relevantSort: { relevancyStrictness: 25 } },
           { helper, searchParameters: helper.state }
         )
       ).toEqual({
-        smartSort: { relevancyStrictness: 30 },
+        relevantSort: { relevancyStrictness: 30 },
       });
     });
   });
 
   describe('getWidgetSearchParameters', () => {
     it('does not include relevancyStrictness by default', () => {
-      const makeWidget = connectSmartSort(noop);
+      const makeWidget = connectRelevantSort(noop);
       const widget = makeWidget({});
 
       const searchParameters = widget.getWidgetSearchParameters!(
@@ -312,14 +312,14 @@ describe('connectSmartSort', () => {
     });
 
     it('return parameters set by uiState', () => {
-      const makeWidget = connectSmartSort(noop);
+      const makeWidget = connectRelevantSort(noop);
       const widget = makeWidget({});
 
       const searchParameters = widget.getWidgetSearchParameters!(
         new SearchParameters(),
         {
           uiState: {
-            smartSort: {
+            relevantSort: {
               relevancyStrictness: 15,
             },
           },
@@ -332,7 +332,7 @@ describe('connectSmartSort', () => {
 
     it('store refined state', () => {
       const helper = createHelper();
-      const makeWidget = connectSmartSort(noop);
+      const makeWidget = connectRelevantSort(noop);
       const widget = makeWidget({});
 
       const { refine } = widget.getWidgetRenderState(
@@ -348,7 +348,7 @@ describe('connectSmartSort', () => {
 
     it('override parameters with the value from uiState', () => {
       const helper = createHelper();
-      const makeWidget = connectSmartSort(noop);
+      const makeWidget = connectRelevantSort(noop);
       const widget = makeWidget({});
 
       const { refine } = widget.getWidgetRenderState(
@@ -360,7 +360,7 @@ describe('connectSmartSort', () => {
         new SearchParameters(),
         {
           uiState: {
-            smartSort: {
+            relevantSort: {
               relevancyStrictness: 15,
             },
           },

src/connectors/smart-sort/connectSmartSort.ts src/connectors/relevant-sort/connectRelevantSort.ts

@@ -1,22 +1,22 @@
 import { Connector } from '../../types';
 import { noop } from '../../lib/utils';
 
-export type SmartSortConnectorParams = {};
+export type RelevantSortConnectorParams = {};
 
 type Refine = (relevancyStrictness: number) => void;
 
-export type SmartSortRendererOptions = {
-  isSmartSorted: boolean;
+export type RelevantSortRendererOptions = {
+  isRelevantSorted: boolean;
   isVirtualReplica: boolean;
   refine: Refine;
 };
 
-export type SmartSortConnector = Connector<
-  SmartSortRendererOptions,
-  SmartSortConnectorParams
+export type RelevantSortConnector = Connector<
+  RelevantSortRendererOptions,
+  RelevantSortConnectorParams
 >;
 
-const connectSmartSort: SmartSortConnector = function connectSmartSort(
+const connectRelevantSort: RelevantSortConnector = function connectRelevantSort(
   renderFn = noop,
   unmountFn = noop
 ) {
@@ -28,7 +28,7 @@ const connectSmartSort: SmartSortConnector = function connectSmartSort(
     const connectorState: ConnectorState = {};
 
     return {
-      $$type: 'ais.smartSort',
+      $$type: 'ais.relevantSort',
 
       init(initOptions) {
         const { instantSearchInstance } = initOptions;
@@ -62,7 +62,7 @@ const connectSmartSort: SmartSortConnector = function connectSmartSort(
       getRenderState(renderState, renderOptions) {
         return {
           ...renderState,
-          smartSort: this.getWidgetRenderState(renderOptions),
+          relevantSort: this.getWidgetRenderState(renderOptions),
         };
       },
 
@@ -78,7 +78,7 @@ const connectSmartSort: SmartSortConnector = function connectSmartSort(
         const { appliedRelevancyStrictness } = results || {};
 
         return {
-          isSmartSorted:
+          isRelevantSorted:
             typeof appliedRelevancyStrictness !== 'undefined' &&
             appliedRelevancyStrictness > 0,
           isVirtualReplica: appliedRelevancyStrictness !== undefined,
@@ -90,15 +90,15 @@ const connectSmartSort: SmartSortConnector = function connectSmartSort(
       getWidgetSearchParameters(state, { uiState }) {
         return state.setQueryParameter(
           'relevancyStrictness',
-          uiState.smartSort?.relevancyStrictness ?? state.relevancyStrictness
+          uiState.relevantSort?.relevancyStrictness ?? state.relevancyStrictness
         );
       },
 
       getWidgetUiState(uiState, { searchParameters }) {
         return {
           ...uiState,
-          smartSort: {
-            ...uiState.smartSort,
+          relevantSort: {
+            ...uiState.relevantSort,
             relevancyStrictness: searchParameters.relevancyStrictness,
           },
         };
@@ -107,4 +107,4 @@ const connectSmartSort: SmartSortConnector = function connectSmartSort(
   };
 };
 
-export default connectSmartSort;
+export default connectRelevantSort;

src/types/widget.ts

@@ -71,9 +71,9 @@ import {
   RangeRendererOptions,
 } from '../connectors/range/connectRange';
 import {
-  SmartSortConnectorParams,
-  SmartSortRendererOptions,
-} from '../connectors/smart-sort/connectSmartSort';
+  RelevantSortConnectorParams,
+  RelevantSortRendererOptions,
+} from '../connectors/relevant-sort/connectRelevantSort';
 import {
   MenuConnectorParams,
   MenuRendererOptions,
@@ -172,7 +172,7 @@ export type IndexUiState = {
      */
     boundingBox: string;
   };
-  smartSort?: {
+  relevantSort?: {
     relevancyStrictness?: number;
   };
   sortBy?: string;
@@ -369,9 +369,9 @@ export type IndexRenderState = Partial<{
     >;
   };
   answers: WidgetRenderState<AnswersRendererOptions, AnswersConnectorParams>;
-  smartSort: WidgetRenderState<
-    SmartSortRendererOptions,
-    SmartSortConnectorParams
+  relevantSort: WidgetRenderState<
+    RelevantSortRendererOptions,
+    RelevantSortConnectorParams
   >;
 }>;
 
@@ -420,7 +420,7 @@ export type Widget<
     | 'ais.ratingMenu'
     | 'ais.refinementList'
     | 'ais.searchBox'
-    | 'ais.smartSort'
+    | 'ais.relevantSort'
     | 'ais.sortBy'
     | 'ais.stats'
     | 'ais.toggleRefinement'
@@ -457,7 +457,7 @@ export type Widget<
     | 'ais.ratingMenu'
     | 'ais.refinementList'
     | 'ais.searchBox'
-    | 'ais.smartSort'
+    | 'ais.relevantSort'
     | 'ais.sortBy'
     | 'ais.stats'
     | 'ais.toggleRefinement'

src/widgets/index.ts

@@ -29,4 +29,4 @@ export { default as queryRuleContext } from './query-rule-context/query-rule-con
 export { default as index } from './index/index';
 export { default as places } from './places/places';
 export { default as EXPERIMENTAL_answers } from './answers/answers';
-export { default as smartSort } from './smart-sort/smart-sort';
+export { default as relevantSort } from './relevant-sort/relevant-sort';

src/widgets/smart-sort/__tests__/smart-sort-test.ts src/widgets/relevant-sort/__tests__/relevant-sort-test.ts

@@ -1,5 +1,5 @@
 import { render } from 'preact';
-import smartSort from '../smart-sort';
+import relevantSort from '../relevant-sort';
 import algoliasearchHelper, { SearchResults } from 'algoliasearch-helper';
 import { createSearchClient } from '../../../../test/mock/createSearchClient';
 import {
@@ -18,12 +18,12 @@ jest.mock('preact', () => {
 
 const templates = {
   text: '',
-  button: ({ isSmartSorted }) => {
-    return isSmartSorted ? 'See all results' : 'See relevant results';
+  button: ({ isRelevantSorted }) => {
+    return isRelevantSorted ? 'See all results' : 'See relevant results';
   },
 };
 
-describe('smartSort', () => {
+describe('relevantSort', () => {
   beforeEach(() => {
     (render as jest.Mock).mockReset();
   });
@@ -32,21 +32,21 @@ describe('smartSort', () => {
     it('throws without container', () => {
       expect(() => {
         // @ts-ignore wrong options
-        smartSort({ container: undefined });
+        relevantSort({ container: undefined });
       }).toThrowErrorMatchingInlineSnapshot(`
 "The \`container\` option is required.
 
-See documentation: https://www.algolia.com/doc/api-reference/widgets/smart-sort/js/"
+See documentation: https://www.algolia.com/doc/api-reference/widgets/relevant-sort/js/"
 `);
     });
   });
 
   it('render', () => {
     const helper = algoliasearchHelper(createSearchClient(), '', {});
-    const widget = smartSort({
+    const widget = relevantSort({
       container: document.createElement('div'),
       cssClasses: {
-        root: 'my-SmartSort',
+        root: 'my-RelevantSort',
       },
       templates,
     });
@@ -71,11 +71,11 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/smart-sort/
     expect(secondRender[0].props).toEqual(
       expect.objectContaining({
         cssClasses: {
-          root: 'ais-SmartSort my-SmartSort',
-          text: 'ais-SmartSort-text',
-          button: 'ais-SmartSort-button',
+          root: 'ais-RelevantSort my-RelevantSort',
+          text: 'ais-RelevantSort-text',
+          button: 'ais-RelevantSort-button',
         },
-        isSmartSorted: true,
+        isRelevantSorted: true,
         isVirtualReplica: true,
         refine: expect.any(Function),
         templates,

src/widgets/relevant-sort/defaultTemplates.ts

@@ -0,0 +1,5 @@
+export default {
+  text: '',
+  button: ({ isRelevantSorted }) =>
+    isRelevantSorted ? 'See all results' : 'See relevant results',
+};

src/widgets/relevant-sort/relevant-sort.tsx

@@ -0,0 +1,108 @@
+/** @jsx h */
+
+import { h, render } from 'preact';
+import cx from 'classnames';
+import {
+  getContainerNode,
+  createDocumentationMessageGenerator,
+} from '../../lib/utils';
+import { component } from '../../lib/suit';
+import { WidgetFactory, Renderer, Template } from '../../types';
+import connectRelevantSort, {
+  RelevantSortConnectorParams,
+  RelevantSortRendererOptions,
+} from '../../connectors/relevant-sort/connectRelevantSort';
+import RelevantSort from '../../components/RelevantSort/RelevantSort';
+import defaultTemplates from './defaultTemplates';
+
+export type RelevantSortCSSClasses = Partial<{
+  root: string;
+  text: string;
+  button: string;
+}>;
+
+export type RelevantSortTemplates = Partial<{
+  text: Template<{ isRelevantSorted: boolean }>;
+  button: Template<{ isRelevantSorted: boolean }>;
+}>;
+
+type RelevantSortWidgetParams = {
+  container: string | HTMLElement;
+  cssClasses?: RelevantSortCSSClasses;
+  templates?: RelevantSortTemplates;
+};
+
+type RelevantSortRendererWidgetParams = {
+  container: HTMLElement;
+  cssClasses: RelevantSortCSSClasses;
+  templates: RelevantSortTemplates;
+} & RelevantSortWidgetParams;
+
+type RelevantSortWidget = WidgetFactory<
+  RelevantSortRendererOptions,
+  RelevantSortConnectorParams,
+  RelevantSortWidgetParams
+>;
+
+const withUsage = createDocumentationMessageGenerator({
+  name: 'relevant-sort',
+});
+
+const suit = component('RelevantSort');
+
+const renderer: Renderer<
+  RelevantSortRendererOptions,
+  RelevantSortRendererWidgetParams
+> = ({ isRelevantSorted, isVirtualReplica, refine, widgetParams }) => {
+  const { container, cssClasses, templates } = widgetParams;
+
+  render(
+    <RelevantSort
+      cssClasses={cssClasses}
+      templates={templates}
+      isRelevantSorted={isRelevantSorted}
+      isVirtualReplica={isVirtualReplica}
+      refine={refine}
+    />,
+    container
+  );
+};
+
+const relevantSort: RelevantSortWidget = widgetParams => {
+  const {
+    container,
+    templates: userTemplates = {} as RelevantSortTemplates,
+    cssClasses: userCssClasses = {} as RelevantSortCSSClasses,
+  } = widgetParams;
+
+  if (!container) {
+    throw new Error(withUsage('The `container` option is required.'));
+  }
+
+  const cssClasses: RelevantSortCSSClasses = {
+    root: cx(suit(), userCssClasses.root),
+    text: cx(suit({ descendantName: 'text' }), userCssClasses.text),
+    button: cx(suit({ descendantName: 'button' }), userCssClasses.button),
+  };
+
+  const templates: RelevantSortTemplates = {
+    ...defaultTemplates,
+    ...userTemplates,
+  };
+
+  const containerNode = getContainerNode(container);
+  const makeWidget = connectRelevantSort(renderer, () => {
+    render(null, containerNode);
+  });
+
+  return {
+    ...makeWidget({
+      container: containerNode,
+      cssClasses,
+      templates,
+    }),
+    $$widgetType: 'ais.relevantSort',
+  };
+};
+
+export default relevantSort;

src/widgets/smart-sort/defaultTemplates.ts

@@ -1,21 +1,21 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
-import smartSort from '../src/widgets/smart-sort/smart-sort';
+import relevantSort from '../src/widgets/relevant-sort/relevant-sort';
 
 const searchOptions = {
   appId: 'C7RIRJRYR9',
   apiKey: '77af6d5ffb27caa5ff4937099fcb92e8',
   indexName: 'test_Bestbuy_vr_price_asc',
 };
 
-storiesOf('Sorting/SmartSort', module).add(
+storiesOf('Sorting/RelevantSort', module).add(
   'default',
   withHits(({ search, container }) => {
     search.addWidgets([
-      smartSort({
+      relevantSort({
         container,
         cssClasses: {
-          root: 'my-SmartSort',
+          root: 'my-RelevantSort',
         },
       }),
     ]);