Implementation of filters in custom search modal.

package.json

@@ -55,6 +55,7 @@
     "humanize-duration": "^3.30.0",
     "infima": "^0.2.0-alpha.43",
     "plugin-image-zoom": "flexanalytics/plugin-image-zoom",
+    "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/theme/Footer/index.tsx

@@ -6,17 +6,19 @@
 
 import React from 'react';
 import Footer from '@theme-original/Footer';
-import type FooterType from '@theme/Footer';
-import type { WrapperProps } from '@docusaurus/types';
 import Social from '@site/src/components/Social';
 
-type Props = WrapperProps<typeof FooterType>;
+type FooterProps = {
+  footerStyleProps?: React.CSSProperties;
+};
 
-export default function FooterWrapper(props: Props): JSX.Element {
+const FooterWrapper = ({ footerStyleProps }: FooterProps) => {
   return (
-    <>
-      <Footer {...props} />
+    <div style={footerStyleProps}>
+      <Footer />
       <Social />
-    </>
+    </div>
   );
-}
+};
+
+export default FooterWrapper;

src/theme/Layout/Provider/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { composeProviders } from '@docusaurus/theme-common';
+import {
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from '@docusaurus/theme-common/internal';
+
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+
+function LayoutProvider({ children }) {
+  return <Provider>{children}</Provider>;
+}
+
+LayoutProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default LayoutProvider;

src/theme/Layout/index.js

@@ -0,0 +1,72 @@
+/**
+ * SWIZZLED VERSION: 2.4.3
+ * REASONS:
+ *  - Ejected to fix the fotter alignment
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import { useKeyboardNavigation } from '@docusaurus/theme-common/internal';
+import SkipToContent from '@theme/SkipToContent';
+import AnnouncementBar from '@theme/AnnouncementBar';
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+import LayoutProvider from '@theme/Layout/Provider';
+import ErrorPageContent from '@theme/ErrorPageContent';
+import styles from './styles.module.css';
+
+export default function Layout(props) {
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    footerStyleProps,
+    title,
+    description,
+  } = props;
+
+  useKeyboardNavigation();
+
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+
+      <SkipToContent />
+
+      <AnnouncementBar />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}
+      >
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+
+      {!noFooter && <Footer footerStyleProps={footerStyleProps} />}
+    </LayoutProvider>
+  );
+}
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+  noFooter: PropTypes.bool,
+  wrapperClassName: PropTypes.string,
+  footerStyleProps: PropTypes.object,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};

src/theme/Layout/styles.module.css

@@ -0,0 +1,21 @@
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}

src/theme/Root.js

@@ -0,0 +1,17 @@
+/**
+ * SWIZZLED VERSION: 2.4.3
+ * REASONS:
+ *  - Wrapped the component in context provider inorder to transfer data seamlessly between search bar and search page
+ */
+
+/* eslint-disable */
+import React from 'react';
+import { SearchProvider } from '@site/src/utils/SearchContext';
+
+export default function Root({ children }) {
+  return (
+    <SearchProvider>
+      <div>{children}</div>
+    </SearchProvider>
+  );
+}

src/theme/SearchBar/index.js

@@ -0,0 +1,218 @@
+/**
+ * SWIZZLED VERSION: 2.4.3
+ * REASONS:
+ *  - Ejected to add search filters using facets
+ */
+
+/* eslint-disable */
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  useContext,
+  useEffect,
+} from 'react';
+import { DocSearchButton, useDocSearchKeyboardEvents } from '@docsearch/react';
+import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
+import { useHistory } from '@docusaurus/router';
+import {
+  isRegexpStringMatch,
+  useSearchLinkCreator,
+} from '@docusaurus/theme-common';
+import { useSearchResultUrlProcessor } from '@docusaurus/theme-search-algolia/client';
+import Translate from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { createPortal } from 'react-dom';
+import translations from '@theme/SearchTranslations';
+import { FilterDropdown } from '../SearchPage/FilterDropdown';
+import { SearchContext } from '@site/src/utils/SearchContext';
+import { allFacets } from '@site/src/utils/searchConstant';
+
+let DocSearchModal = null;
+function Hit({ hit, children }) {
+  return <Link to={hit.url}>{children}</Link>;
+}
+
+function ResultsFooter({ state, onClose }) {
+  const createSearchLink = useSearchLinkCreator();
+  return (
+    <Link to={createSearchLink(state.query)} onClick={onClose}>
+      <Translate
+        id='theme.SearchBar.seeAll'
+        values={{ count: state.context.nbHits }}
+      >
+        {'See all {count} results'}
+      </Translate>
+    </Link>
+  );
+}
+
+function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
+  const { selectedFacets, setSelectedFacets } = useContext(SearchContext);
+  const { siteMetadata } = useDocusaurusContext();
+  const processSearchResultUrl = useSearchResultUrlProcessor();
+
+  const searchParameters = {
+    ...props.searchParameters,
+    facetFilters: selectedFacets,
+  };
+  const history = useHistory();
+  const searchContainer = useRef(null);
+  const searchButtonRef = useRef(null);
+  const filterDropdownMenuRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialQuery, setInitialQuery] = useState(undefined);
+
+  const importDocSearchModalIfNeeded = useCallback(async (event) => {
+    if (DocSearchModal) {
+      return Promise.resolve();
+    }
+    const [{ DocSearchModal: Modal }] = await Promise.all([
+      import('@docsearch/react/modal'),
+      import('@docsearch/react/style'),
+      import('./styles.css'),
+    ]);
+    DocSearchModal = Modal;
+  }, []);
+
+  const onOpen = useCallback(() => {
+    importDocSearchModalIfNeeded().then(() => {
+      searchContainer.current = document.createElement('div');
+      document.body.insertBefore(
+        searchContainer.current,
+        document.body.firstChild,
+      );
+      setIsOpen(true);
+    });
+  }, [importDocSearchModalIfNeeded, setIsOpen]);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+    searchContainer.current?.remove();
+  }, [setIsOpen]);
+
+  const onInput = useCallback(
+    (event) => {
+      importDocSearchModalIfNeeded().then(() => {
+        setIsOpen(true);
+        setInitialQuery(event.key);
+      });
+    },
+    [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
+  );
+
+  const navigator = useRef({
+    navigate({ itemUrl }) {
+      if (isRegexpStringMatch(externalUrlRegex, itemUrl)) {
+        window.location.href = itemUrl;
+      } else {
+        history.push(itemUrl);
+      }
+    },
+  }).current;
+
+  const transformItems = useRef((items) =>
+    props.transformItems
+      ? props.transformItems(items)
+      : items.map((item) => ({
+          ...item,
+          url: processSearchResultUrl(item.url),
+        })),
+  ).current;
+
+  const resultsFooterComponent = useMemo(
+    () => (footerProps) => <ResultsFooter {...footerProps} onClose={onClose} />,
+    [onClose],
+  );
+
+  const transformSearchClient = useCallback(
+    (searchClient) => {
+      searchClient.addAlgoliaAgent(
+        'docusaurus',
+        siteMetadata.docusaurusVersion,
+      );
+      return searchClient;
+    },
+    [siteMetadata.docusaurusVersion],
+  );
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    onInput,
+    searchButtonRef,
+  });
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event) => {
+      const filterDropdownMenu = document.querySelector('.dropdown__menu');
+      if (filterDropdownMenu && filterDropdownMenu.contains(event.target))
+        return;
+      if (
+        searchContainer.current &&
+        !searchContainer.current.contains(event.target)
+      ) {
+        setSelectedFacets(allFacets);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose, setSelectedFacets]);
+
+  return (
+    <>
+      <Head>
+        <link
+          rel='preconnect'
+          href={`https://${props.appId}-dsn.algolia.net`}
+          crossOrigin='anonymous'
+        />
+      </Head>
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        ref={searchButtonRef}
+        translations={translations.button}
+      />
+      {isOpen &&
+        DocSearchModal &&
+        searchContainer.current &&
+        createPortal(
+          <React.Fragment>
+            <DocSearchModal
+              onClose={onClose}
+              initialScrollY={window.scrollY}
+              initialQuery={initialQuery}
+              navigator={navigator}
+              transformItems={transformItems}
+              hitComponent={Hit}
+              transformSearchClient={transformSearchClient}
+              {...(props.searchPagePath && {
+                resultsFooterComponent,
+              })}
+              {...props}
+              searchParameters={searchParameters}
+              placeholder={translations.placeholder}
+              translations={translations.modal}
+            />
+          </React.Fragment>,
+          searchContainer.current,
+        )}
+    </>
+  );
+}
+
+export default function SearchBar() {
+  const { siteConfig } = useDocusaurusContext();
+  return <DocSearch {...siteConfig.themeConfig.algolia} />;
+}