feat(instantsearch.js): replace Highlight and cx (#6030)

Co-authored-by: Haroen Viaene <[email protected]>

Author: sarahdayan

packages/instantsearch-ui-components/src/lib/cx.ts

@@ -1,5 +1,13 @@
-export function cx(
-  ...classNames: Array<string | number | boolean | undefined | null>
-) {
-  return classNames.filter(Boolean).join(' ');
+type ClassValue = string | undefined | boolean | null | number;
+
+export function cx(...classNames: Array<ClassValue | ClassValue[]>) {
+  return classNames
+    .reduce<ClassValue[]>((acc, className) => {
+      if (Array.isArray(className)) {
+        return acc.concat(className);
+      }
+      return acc.concat([className]);
+    }, [])
+    .filter(Boolean)
+    .join(' ');
 }

packages/instantsearch.js/package.json

@@ -27,15 +27,14 @@
   ],
   "dependencies": {
     "@algolia/events": "^4.0.1",
-    "@algolia/ui-components-highlight-vdom": "^1.2.2",
-    "@algolia/ui-components-shared": "^1.2.2",
     "@types/dom-speech-recognition": "^0.0.1",
     "@types/google.maps": "^3.45.3",
     "@types/hogan.js": "^3.0.0",
     "@types/qs": "^6.5.3",
     "algoliasearch-helper": "3.16.2",
     "hogan.js": "^3.0.2",
     "htm": "^3.0.0",
+    "instantsearch-ui-components": "^0.2.0",
     "preact": "^10.10.0",
     "qs": "^6.5.1 < 6.10",
     "search-insights": "^2.13.0"

packages/instantsearch.js/src/components/Answers/Answers.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { warning } from '../../lib/utils';

packages/instantsearch.js/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import Template from '../Template/Template';

packages/instantsearch.js/src/components/ClearRefinements/ClearRefinements.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import Template from '../Template/Template';

packages/instantsearch.js/src/components/CurrentRefinements/CurrentRefinements.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { isSpecialClick, capitalize } from '../../lib/utils';

packages/instantsearch.js/src/components/GeoSearchControls/GeoSearchControls.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h, Fragment } from 'preact';
 
 import Template from '../Template/Template';

packages/instantsearch.js/src/components/Highlight/Highlight.tsx

@@ -1,13 +1,13 @@
 /** @jsx h */
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { InternalHighlight } from '../InternalHighlight/InternalHighlight';
 
 import type {
   HighlightProps as InternalHighlightProps,
   HighlightClassNames as InternalHighlightClassNames,
-} from '@algolia/ui-components-highlight-vdom';
+} from 'instantsearch-ui-components';
 
 export type HighlightClassNames = InternalHighlightClassNames;
 export type HighlightProps = Omit<InternalHighlightProps, 'classNames'> & {

packages/instantsearch.js/src/components/Hits/Hits.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { createInsightsEventHandler } from '../../lib/insights/listener';

packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { createInsightsEventHandler } from '../../lib/insights/listener';

packages/instantsearch.js/src/components/InternalHighlight/InternalHighlight.tsx

@@ -1,4 +1,4 @@
-import { createHighlightComponent } from '@algolia/ui-components-highlight-vdom';
+import { createHighlightComponent } from 'instantsearch-ui-components';
 import { createElement, Fragment } from 'preact';
 
 export const InternalHighlight = createHighlightComponent({

packages/instantsearch.js/src/components/InternalHighlight/__tests__/InternalHighlight.test.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { find } from '../../lib/utils';

packages/instantsearch.js/src/components/MenuSelect/MenuSelect.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { isSpecialClick } from '../../lib/utils';

packages/instantsearch.js/src/components/Pagination/Pagination.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 

packages/instantsearch.js/src/components/Panel/Panel.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h, Component } from 'preact';
 
 import Template from '../Template/Template';

packages/instantsearch.js/src/components/RangeInput/RangeInput.tsx

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h, createRef, Component } from 'preact';
 
 import { isSpecialClick, isEqual } from '../../lib/utils';

packages/instantsearch.js/src/components/RefinementList/RefinementList.tsx

@@ -1,13 +1,13 @@
 /** @jsx h */
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { InternalHighlight } from '../InternalHighlight/InternalHighlight';
 
 import type {
   HighlightProps as InternalHighlightProps,
   HighlightClassNames as InternalHighlightClassNames,
-} from '@algolia/ui-components-highlight-vdom';
+} from 'instantsearch-ui-components';
 
 export type ReverseHighlightClassNames = InternalHighlightClassNames;
 export type ReverseHighlightProps = Omit<

packages/instantsearch.js/src/components/ReverseHighlight/ReverseHighlight.tsx

@@ -1,13 +1,13 @@
 /** @jsx h */
-import { cx } from '@algolia/ui-components-shared';
+import { cx } from 'instantsearch-ui-components';
 import { h } from 'preact';
 
 import { InternalHighlight } from '../InternalHighlight/InternalHighlight';
 
 import type {
   HighlightProps as InternalHighlightProps,
   HighlightClassNames as InternalHighlightClassNames,
-} from '@algolia/ui-components-highlight-vdom';
+} from 'instantsearch-ui-components';
 
 export type ReverseSnippetClassNames = InternalHighlightClassNames;
 export type ReverseSnippetProps = Omit<InternalHighlightProps, 'classNames'> & {