Update docsearch component.

Author: Hyperkid123

packages/react-renderer-demo/package.json

@@ -31,6 +31,8 @@
         "@data-driven-forms/editor-pro": "0.0.13",
         "@data-driven-forms/mui-component-mapper": "*",
         "@data-driven-forms/react-form-renderer": "*",
+        "@docsearch/css": "^3.2.1",
+        "@docsearch/react":"^3.2.1",
         "@emotion/cache": "^11.10.3",
         "@emotion/react": "^11.10.4",
         "@emotion/server": "^11.10.0",
@@ -48,7 +50,6 @@
         "@stackblitz/sdk": "^1.5.3",
         "clsx": "^1.1.1",
         "codesandbox": "2.2.3",
-        "docsearch.js": "^2.6.3",
         "evergreen-ui": "^6.9.10",
         "firebase-admin": "^10.0.1",
         "firebase-functions": "^3.16.0",

packages/react-renderer-demo/src/components/docsearch.js

@@ -1,87 +1,21 @@
-import React, { useEffect } from 'react';
-import TextField from '@mui/material/TextField';
-import InputAdornment from '@mui/material/InputAdornment';
-import Search from '@mui/icons-material/Search';
-import docsearch from 'docsearch.js';
-import { useRouter } from 'next/router';
-import { styled } from '@mui/material/styles';
+import React from 'react';
+import { DocSearch as AlgDocSearch } from '@docsearch/react';
 
-const Root = styled('form')(({ theme }) => ({
-  '&.wrapper': {
-    marginRight: 16,
-    '& .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main.algolia-docsearch-suggestion__secondary': {
-      textDecoration: 'none',
-    },
-    '& .algolia-autocomplete .algolia-docsearch-suggestion--title': {
-      marginBottom: 0,
-    },
-    '& .ds-dropdown-menu': {
-      [theme.breakpoints.down('md')]: {
-        position: 'fixed !important',
-        top: '50px !important',
-        maxWidth: '100% !important',
-        minWidth: '100%',
-      },
-      '& [class^=ds-dataset-]': {
-        borderRadius: 0,
-      },
-      '&:before': {
-        display: 'none',
-      },
-    },
-  },
-  '& .search-input': {
-    '& input': {
-      color: 'white',
-    },
-    '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
-      borderBottomColor: 'white',
-    },
-    '& .MuiInput-underline:after': {
-      borderBottomColor: 'white',
-    },
-    '& .MuiInput-underline:before': {
-      borderBottomColor: 'transparent',
-    },
-  },
-  '& .search-icon': {
-    fill: 'white',
-  },
-}));
+import '@docsearch/css';
+import Link from 'next/link';
 
-const DocSearch = () => {
-  const { push } = useRouter();
-  useEffect(() => {
-    docsearch({
-      apiKey: '5e9dbd314423e38339595e183d1ae7b6',
-      indexName: 'data-driven-forms',
-      inputSelector: '#data-driven-forms-search',
-      handleSelected: (input, event, suggestion) => {
-        event.button = 0;
-        push(suggestion.url.replace('https://data-driven-forms.org', ''));
-        input.close();
-      },
-      // debug: true, // Set debug to true if you want to inspect the dropdown.
-    });
-  }, [push]);
-  return (
-    <Root className="wrapper">
-      <TextField
-        variant="standard"
-        id="data-driven-forms-search"
-        type="search"
-        placeholder="Search..."
-        className="search-input"
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <Search className="search-icon" />
-            </InputAdornment>
-          ),
-        }}
-      />
-    </Root>
-  );
-};
+const DocSearch = () => (
+  <AlgDocSearch
+    hitComponent={({ hit, children }) => (
+      <Link href={hit.url.replace('https://data-driven-forms.org', '')}>
+        <a href={hit.url.replace('https://data-driven-forms.org', '')}>{children}</a>
+      </Link>
+    )}
+    debug
+    apiKey="89894d702d5ead6999eaf04e3b34012a"
+    appId="4KH6MQCYWM"
+    indexName="data-driven-forms"
+  />
+);
 
 export default DocSearch;