@redocly/theme 0.40.6 → 0.41.0-rc.1

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
+
+import { Tag, type TagProps } from '@redocly/theme/components/Tag/Tag';
+
+type SearchFilterFieldTagsProps = {
+  className?: string;
+  facet: SearchFacet;
+  selectedValues: string[];
+  onChange: (value: string | string[]) => void;
+};
+
+export function SearchFilterFieldTags({
+  className,
+  facet,
+  selectedValues,
+  onChange,
+}: SearchFilterFieldTagsProps) {
+  return (
+    <FilterTagsWrapper
+      data-component-name="Search/FilterFields/SearchFilterFieldTags"
+      className={className}
+    >
+      {facet.values.map((facetCount, index) => {
+        const { value, count, isCounterVisible } = facetCount as SearchFacetCount;
+        const active = selectedValues.includes(value);
+        return (
+          <FilterTagWrapper
+            key={`${count}-${index}`}
+            color={value}
+            onClick={() => {
+              const values = active
+                ? selectedValues.filter((item) => item !== value)
+                : [...selectedValues, value];
+              onChange(values);
+            }}
+            active={active}
+            borderless
+          >
+            {value} {isCounterVisible && <span>{count}</span>}
+          </FilterTagWrapper>
+        );
+      })}
+    </FilterTagsWrapper>
+  );
+}
+
+const FilterTagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-filter-field-tags-gap);
+`;
+
+const FilterTagWrapper = styled(Tag)<{ color: TagProps['color'] }>`
+  text-transform: uppercase;
+  cursor: pointer;
+  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
+  margin: var(--search-filter-field-tags-tag-margin);
+`;

package/src/components/Search/Search.tsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 
 import { SearchTrigger } from '@redocly/theme/components/Search/SearchTrigger';
 import { SearchDialog } from '@redocly/theme/components/Search/SearchDialog';
-import { useSearch } from '@redocly/theme/core/hooks';
+import { useSearchDialog } from '@redocly/theme/core/hooks';
 
 export type SearchProps = {
   className?: string;
 };
 
 export function Search({ className }: SearchProps): JSX.Element {
-  const { isOpen, onOpen, onClose } = useSearch();
+  const { isOpen, onOpen, onClose } = useSearchDialog();
 
   return (
     <SearchWrapper data-component-name="Search/Search" className={className}>

package/src/components/Search/SearchDialog.tsx

@@ -1,8 +1,8 @@
-import React, { useRef, useState } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import type { MouseEvent } from 'react';
-import type { SearchDocument } from '@redocly/theme/core/types';
+import type { SearchFacetCount, SearchItemData } from '@redocly/theme/core/types';
 
 import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
 import { SearchShortcut } from '@redocly/theme/components/Search/SearchShortcut';
@@ -11,9 +11,12 @@ import { breakpoints, concatClassNames } from '@redocly/theme/core/utils';
 import { SearchItem } from '@redocly/theme/components/Search/SearchItem';
 import { SearchRecent } from '@redocly/theme/components/Search/SearchRecent';
 import { SearchSuggestedPages } from '@redocly/theme/components/Search/SearchSuggestedPages';
-import { useThemeHooks, useDialogHotKeys } from '@redocly/theme/core/hooks';
+import { useThemeHooks, useDialogHotKeys, useSearchFilter } from '@redocly/theme/core/hooks';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { SearchFilter } from '@redocly/theme/components/Search/SearchFilter';
+import { SearchGroups } from '@redocly/theme/components/Search/SearchGroups';
+import { SpinnerLoader } from '@redocly/theme/components/Loaders/SpinnerLoader';
 
 export type SearchDialogProps = {
   onClose: () => void;
@@ -21,11 +24,20 @@ export type SearchDialogProps = {
 };
 
 export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
-  const { useTranslate, useCurrentProduct, useFuseSearch, useProducts } = useThemeHooks();
+  const { useTranslate, useCurrentProduct, useSearch, useProducts } = useThemeHooks();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
-  const { query, setQuery, items, isLoading } = useFuseSearch(product?.name);
+  const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore } =
+    useSearch(product?.name);
+  const {
+    isFilterOpen,
+    onFilterToggle,
+    onFilterChange,
+    onFilterReset,
+    onFacetReset,
+    onTopFacetsReset,
+  } = useSearchFilter(filter, setFilter);
   const modalRef = useRef<HTMLDivElement>(null);
   const { translate } = useTranslate();
 
@@ -39,19 +51,35 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     }
   };
 
-  const mapItem = (item: SearchDocument) => {
+  const mapItem = (item: SearchItemData) => {
     let itemProduct;
-    if (!product && item.product) {
+    if (!product && item.document.product) {
       const resolvedProduct = products.find((product) =>
-        product.slug.match(`/${item.product?.folder}/`),
+        product.slug.match(`/${item.document.product?.folder}/`),
       );
       itemProduct = resolvedProduct
         ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
         : undefined;
     }
-    return <SearchItem key={item.id} item={item} product={itemProduct} />;
+    return <SearchItem key={item.document.id} item={item} product={itemProduct} />;
   };
 
+  const showLoadMore = (groupKey: string, currentCount: number = 0) => {
+    const topFacet = facets.find((facet) => facet.isTop);
+    let needLoadMore = false;
+    if (topFacet) {
+      const groupValue = topFacet.values.find((value) => {
+        if (typeof value === 'object') {
+          return value.value === groupKey;
+        } else return false;
+      }) as SearchFacetCount;
+      needLoadMore = groupValue ? groupValue.count > currentCount : false;
+    }
+    return needLoadMore;
+  };
+
+  const showResults = !!((filter && filter.length) || query);
+
   return (
     <SearchOverlay
       data-component-name="Search/SearchDialog"
@@ -61,34 +89,83 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     >
       <SearchDialogWrapper className="scroll-lock" role="dialog">
         <SearchDialogHeader>
+          {product && (
+            <>
+              <SearchProductTag color="product">
+                {product.name}
+                <CloseIcon onClick={() => setProduct(undefined)} color="--icon-color-additional" />
+              </SearchProductTag>
+            </>
+          )}
           <SearchInput
             value={query}
             onChange={setQuery}
+            onFilterToggle={onFilterToggle}
             placeholder={translate('theme.search.label', 'Search docs...')}
-            isLoading={isLoading}
+            isLoading={isSearchLoading}
             data-translation-key="theme.search.label"
           />
-          {product && (
-            <SearchProductTag color="product">
-              {product.name}
-              <CloseIcon onClick={() => setProduct(undefined)} color="--icon-color-additional" />
-            </SearchProductTag>
-          )}
         </SearchDialogHeader>
         <SearchDialogBody>
-          {items !== null ? (
-            items.length ? (
-              items.map(mapItem)
+          <SearchDialogBodyMainView>
+            <SearchGroups
+              facets={facets}
+              searchFilter={filter}
+              onFilterChange={onFilterChange}
+              onTopFacetsReset={onTopFacetsReset}
+            />
+            {showResults ? (
+              items && Object.keys(items).some((key) => items[key]?.length) ? (
+                Object.keys(items).map((key) =>
+                  items[key]?.length ? (
+                    <Fragment key={key}>
+                      <SearchGroupTitle>{key}</SearchGroupTitle>
+                      {items[key]?.map(mapItem)}
+                      {showLoadMore(key, items[key]?.length || 0) && (
+                        <SearchGroupFooter
+                          data-translation-key="theme.search.showMore"
+                          onClick={() =>
+                            setLoadMore({ groupKey: key, offset: items[key]?.length || 0 })
+                          }
+                        >
+                          {translate('theme.search.showMore', 'Show more')}
+                        </SearchGroupFooter>
+                      )}
+                    </Fragment>
+                  ) : null,
+                )
+              ) : isSearchLoading ? (
+                <SearchMessage>
+                  <SpinnerLoader size="26px" color="var(--search-input-icon-color)" />
+                  {translate('theme.search.loading', 'Loading...')}
+                </SearchMessage>
+              ) : (
+                <SearchMessage data-translation-key="theme.search.noResults">
+                  <b>{translate('theme.search.noResults.title', 'No results')}</b>
+                  {translate(
+                    'theme.search.noResults.description',
+                    'Prease, try with a different query.',
+                  )}
+                </SearchMessage>
+              )
             ) : (
-              <SearchMessage data-translation-key="theme.search.noResults">
-                {translate('theme.search.noResults', 'No results')}
-              </SearchMessage>
-            )
-          ) : (
-            <>
-              <SearchRecent onSelect={setQuery} />
-              <SearchSuggestedPages />
-            </>
+              <>
+                <SearchRecent onSelect={setQuery} />
+                <SearchSuggestedPages />
+              </>
+            )}
+          </SearchDialogBodyMainView>
+          {isFilterOpen && (
+            <SearchDialogBodyFilterView>
+              <SearchFilter
+                facets={facets}
+                filter={filter}
+                query={query}
+                onFilterChange={onFilterChange}
+                onFilterReset={onFilterReset}
+                onFacetReset={onFacetReset}
+              />
+            </SearchDialogBodyFilterView>
           )}
         </SearchDialogBody>
         <SearchDialogFooter>
@@ -109,6 +186,12 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
               text={translate('theme.search.keys.exit', 'to exit')}
             />
           </SearchShortcuts>
+          {isSearchLoading && (
+            <SearchLoading>
+              <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
+              {translate('theme.search.loading', 'Loading...')}
+            </SearchLoading>
+          )}
           <SearchCancelButton
             data-translation-key="theme.search.cancel"
             variant="secondary"
@@ -139,7 +222,6 @@ const SearchOverlay = styled.div`
 const SearchDialogWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   overflow: auto;
   width: 100vw;
   height: 100vh;
@@ -155,39 +237,51 @@ const SearchDialogWrapper = styled.div`
     max-height: 95vh;
     height: auto;
     resize: both;
-    min-width: 300px;
-    min-height: 200px;
   }
 `;
 
 const SearchDialogHeader = styled.header`
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--border-color-secondary);
-  background-color: var(--search-input-bg-color);
-  padding: var(--spacing-sm);
+  border-bottom: var(--search-modal-border);
+  background-color: var(--search-modal-header-bg-color);
+  padding: var(--search-modal-header-padding);
 `;
 
 const SearchDialogBody = styled.div`
+  display: flex;
+  flex-direction: row;
   flex-grow: 1;
-  overflow-y: scroll;
-  overscroll-behavior: contain;
 
   @media screen and (min-width: ${breakpoints.small}) {
     height: var(--search-modal-min-height);
   }
 `;
 
+const SearchDialogBodyMainView = styled.div`
+  flex: 2;
+  flex-grow: 2;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+  border-right: var(--search-modal-border);
+`;
+
+const SearchDialogBodyFilterView = styled.div`
+  overflow: scroll;
+`;
+
 const SearchDialogFooter = styled.footer`
-  padding: var(--spacing-sm);
-  border-top: 1px solid var(--border-color-secondary);
+  display: flex;
+  gap: var(--search-modal-footer-gap);
+  padding: var(--search-modal-footer-padding);
+  border-top: var(--search-modal-border);
 `;
 
 const SearchShortcuts = styled.div`
   display: none;
   justify-content: flex-start;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--search-shortcuts-gap);
 
   @media screen and (min-width: ${breakpoints.small}) {
     display: flex;
@@ -195,13 +289,21 @@ const SearchShortcuts = styled.div`
 `;
 
 const SearchMessage = styled.div`
-  padding: var(--spacing-lg);
-  color: var(--search-item-title-text-color);
+  display: flex;
+  height: 40%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: var(--search-message-font-size);
+  font-weight: var(--search-message-font-weight);
+  line-height: var(--search-message-line-height);
+  color: var(--search-message-text-color);
+  gap: var(--search-message-gap);
 `;
 
 const SearchProductTag = styled(Tag)`
   --tag-border-radius: var(--border-radius);
-
+  border: none;
   margin: var(--spacing-xs) var(--spacing-sm) !important;
 `;
 
@@ -212,3 +314,27 @@ const SearchCancelButton = styled(Button)`
     display: none;
   }
 `;
+
+const SearchGroupTitle = styled.div`
+  border-bottom: var(--search-modal-border);
+  padding: var(--search-group-title-padding);
+  background-color: var(--search-group-title-bg-color);
+`;
+
+const SearchGroupFooter = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: var(--search-group-footer-padding);
+  color: var(--search-group-footer-text-color);
+  cursor: pointer;
+`;
+
+const SearchLoading = styled.div`
+  display: none;
+  align-items: center;
+  gap: var(--spacing-xs);
+
+  @media screen and (min-width: ${breakpoints.small}) {
+    display: flex;
+  }
+`;

package/src/components/Search/SearchFilter.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { SearchFilterItem, SearchFacet } from '@redocly/theme/core/types';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CleanIcon } from '@redocly/theme/icons/CleanIcon/CleanIcon';
+import { SearchFilterField } from '@redocly/theme/components/Search/SearchFilterField';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type SearchFilterProps = {
+  className?: string;
+  facets: SearchFacet[];
+  filter: SearchFilterItem[];
+  query: string;
+  onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+  onFilterReset: () => void;
+  onFacetReset: (field: string) => void;
+};
+
+export function SearchFilter({
+  className,
+  facets,
+  filter,
+  query,
+  onFilterChange,
+  onFilterReset,
+  onFacetReset,
+}: SearchFilterProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  return (
+    <SearchFilterWrapper data-component-name="Search/SearchFilter" className={className}>
+      <SearchFilterHeader>
+        <span data-translation-key="theme.search.filter.title">
+          {translate('theme.search.filter.title', 'Advanced filter')}
+        </span>
+        <Button
+          data-translation-key="theme.search.filter.reset"
+          onClick={onFilterReset}
+          variant="ghost"
+          icon={<CleanIcon />}
+        >
+          {translate('theme.search.filter.reset', 'Reset filters')}
+        </Button>
+      </SearchFilterHeader>
+
+      <SearchFilterFields>
+        {facets.map((facet, index) => (
+          <SearchFilterField
+            key={`${facet.field}-${index}`}
+            facet={facet}
+            onFilterChange={onFilterChange}
+            onFacetReset={onFacetReset}
+            filter={filter}
+            query={query}
+          />
+        ))}
+      </SearchFilterFields>
+    </SearchFilterWrapper>
+  );
+}
+
+const SearchFilterWrapper = styled.div`
+  width: var(--search-filter-width);
+  display: flex;
+  flex-direction: column;
+  padding: var(--search-filter-padding);
+  font-size: var(--search-filter-font-size);
+  font-weight: var(--search-filter-font-weight);
+  line-height: var(--search-filter-line-height);
+`;
+
+const SearchFilterHeader = styled.div`
+  position: sticky;
+  top: 0px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--search-filter-header-padding);
+  color: var(--search-filter-header-text-color);
+  background-color: var(--search-filter-bg-color);
+  z-index: var(--search-filter-header-z-index);
+`;
+
+const SearchFilterFields = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-filter-fields-gap);
+`;

package/src/components/Search/SearchFilterField.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { SearchFacet, SearchFilterItem } from '@redocly/theme/core/types';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ResetIcon } from '@redocly/theme/icons/ResetIcon/ResetIcon';
+import { useThemeHooks } from '@redocly/theme/core';
+import { SearchFilterFieldSelect } from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldSelect';
+import { SearchFilterFieldTags } from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldTags';
+
+type SearchFilterFieldProps = {
+  className?: string;
+  facet: SearchFacet;
+  filter: SearchFilterItem[];
+  query: string;
+  onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+  onFacetReset: (filed: string) => void;
+};
+
+export function SearchFilterField({
+  className,
+  facet,
+  filter,
+  query,
+  onFilterChange,
+  onFacetReset,
+}: SearchFilterFieldProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const selectedValues = filter.find((item) => item.field === facet.field)?.values || [];
+
+  const onChange = (value: string | string[]) => {
+    onFilterChange(facet.field, value, facet.isTop);
+  };
+
+  const onReset = () => {
+    onFacetReset(facet.field);
+  };
+
+  return (
+    <FilterFieldWrapper data-component-name="Search/SearchFilterField" className={className}>
+      <FilterFieldLabel>
+        {facet.name}
+        {selectedValues.length > 0 && (
+          <Button
+            data-translation-key="theme.search.filter.field.reset"
+            icon={<ResetIcon />}
+            variant="ghost"
+            size="small"
+            onClick={onReset}
+          >
+            {translate('theme.search.filter.field.reset', 'Reset')}
+          </Button>
+        )}
+      </FilterFieldLabel>
+      {['select', 'multi-select'].includes(facet.type) && (
+        <SearchFilterFieldSelect
+          facet={facet}
+          filter={filter}
+          query={query}
+          selectedValues={selectedValues}
+          onChange={onChange}
+        />
+      )}
+      {/* Special default HTTP Methods filed */}
+      {facet.type === 'tags' && (
+        <SearchFilterFieldTags facet={facet} selectedValues={selectedValues} onChange={onChange} />
+      )}
+    </FilterFieldWrapper>
+  );
+}
+
+const FilterFieldWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const FilterFieldLabel = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;

package/src/components/Search/SearchGroups.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { type SearchFacet, type SearchFacetCount, type SearchFilterItem } from '@redocly/theme';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+
+type SearchGroupsProps = {
+  facets: SearchFacet[];
+  searchFilter: SearchFilterItem[];
+  onFilterChange: (field: string, value: string[], isTop?: boolean) => void;
+  onTopFacetsReset: () => void;
+};
+
+export function SearchGroups({
+  facets,
+  searchFilter,
+  onFilterChange,
+  onTopFacetsReset,
+}: SearchGroupsProps): JSX.Element {
+  const groupFacets = facets.filter((facet) => facet.isTop);
+
+  const handleGroupTagClick = (
+    value: string,
+    fieldId: string,
+    active: boolean,
+    currentValues: string[],
+  ) => {
+    const values = active
+      ? currentValues.filter((item) => item !== value)
+      : [...currentValues, value];
+    onFilterChange(fieldId, values, true);
+  };
+
+  return (
+    <SearchGroupsWrapper>
+      <GroupTag
+        borderless
+        active={!searchFilter.some((item) => item.isTop)}
+        onClick={() => searchFilter.some((item) => item.isTop) && onTopFacetsReset()}
+      >
+        All
+      </GroupTag>
+      <Divider />
+      {groupFacets.flatMap((facet) =>
+        facet.values.map((facetCount, index) => {
+          const { value, count, isCounterVisible } = facetCount as SearchFacetCount;
+          const currentValues =
+            searchFilter.find((item) => item.field === facet.field)?.values || [];
+          const active = currentValues?.includes(value);
+          return (
+            <GroupTag
+              key={`${facet.field}-${index}`}
+              onClick={() => handleGroupTagClick(value, facet.field, active, currentValues)}
+              active={active}
+              borderless
+            >
+              {value} {isCounterVisible && <span>{count}</span>}
+            </GroupTag>
+          );
+        }),
+      )}
+    </SearchGroupsWrapper>
+  );
+}
+
+const SearchGroupsWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+  padding: var(--spacing-md);
+`;
+
+const GroupTag = styled(Tag)`
+  cursor: pointer;
+  gap: 4px;
+`;
+
+const Divider = styled.div`
+  border-right: 1px solid var(--border-color-secondary);
+  margin: 5px 5px 5px 0;
+`;