@redocly/theme 0.40.6 → 0.41.0-rc.2

package/src/core/hooks/search/use-search-filter.ts

@@ -0,0 +1,57 @@
+import { useCallback, useState } from 'react';
+
+import type { SearchFilterItem } from '@redocly/theme/core/types';
+
+export function useSearchFilter(
+  filter: SearchFilterItem[],
+  setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>,
+) {
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  const onFilterToggle = useCallback(() => {
+    setIsFilterOpen(!isFilterOpen);
+  }, [isFilterOpen]);
+
+  const onFilterChange = (field: string, value: string | string[] | undefined, isTop?: boolean) => {
+    const values = value ? (Array.isArray(value) ? value : [value]) : [];
+
+    const _filter = [...filter];
+    const fieldIndex = _filter.findIndex((filter) => filter.field === field);
+    if (fieldIndex > -1) {
+      // filter field already exists
+      _filter[fieldIndex].values = values;
+    } else {
+      if (!values.length) return;
+      _filter.push({ field, values, isTop });
+    }
+
+    setFilter(_filter.filter((item) => item.values.length));
+  };
+
+  const onFilterReset = () => {
+    setFilter([]);
+  };
+
+  const onTopFacetsReset = () => {
+    const _filter = [...filter];
+    setFilter(_filter.filter((item) => !item.isTop));
+  };
+
+  const onFacetReset = (field: string) => {
+    const _filter = [...filter];
+    const fieldIndex = _filter.findIndex((filter) => filter.field === field);
+    if (fieldIndex !== -1) {
+      _filter[fieldIndex].values = [];
+    }
+    setFilter(_filter.filter((item) => item.values.length));
+  };
+
+  return {
+    onFacetReset,
+    onTopFacetsReset,
+    onFilterChange,
+    onFilterReset,
+    onFilterToggle,
+    isFilterOpen,
+  };
+}

package/src/core/types/hooks.ts

@@ -6,11 +6,14 @@ import type {
   UserMenuData,
   FilteredCatalog,
   ItemState,
-  SearchDocument,
+  SearchItemData,
   SubmitFeedbackParams,
   TFunction,
   BreadcrumbItem,
   DrilldownMenuItemDetails,
+  SearchFacet,
+  SearchFilterItem,
+  SearchFacetQuery,
 } from '@redocly/theme/core/types';
 
 export type ThemeHooks = {
@@ -51,11 +54,28 @@ export type ThemeHooks = {
     location: Location;
   };
   useBreadcrumbs: () => BreadcrumbItem[];
-  useFuseSearch: (product?: string) => {
+  useSearch: (product?: string) => {
     query: string;
     setQuery: React.Dispatch<React.SetStateAction<string>>;
-    items: SearchDocument[] | null;
-    isLoading: boolean;
+    filter: SearchFilterItem[];
+    setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>;
+    items: Record<string, SearchItemData[] | null>;
+    isSearchLoading: boolean;
+    facets: SearchFacet[];
+    setLoadMore: React.Dispatch<
+      React.SetStateAction<
+        | {
+            groupKey: string;
+            offset: number;
+          }
+        | undefined
+      >
+    >;
+  };
+  useFacetQuery: (field: string) => {
+    searchFacet: SearchFacet | null;
+    setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;
+    setSearchFacetQuery: React.Dispatch<React.SetStateAction<SearchFacetQuery | null>>;
   };
   useSidebarItems: (activeVersion?: Version | null) => {
     currentItems: ItemState[];

package/src/core/types/index.ts

@@ -6,7 +6,7 @@ export * from '@redocly/theme/core/types/hooks';
 export * from '@redocly/theme/core/types/markdown';
 export * from '@redocly/theme/core/types/navbar';
 export * from '@redocly/theme/core/types/search';
-export * from '@redocly/theme/core/types/select-option';
+export * from '@redocly/theme/core/types/select';
 export * from '@redocly/theme/core/types/sidebar';
 export * from '@redocly/theme/core/types/filter';
 export * from '@redocly/theme/core/types/user-menu';

package/src/core/types/l10n.ts

@@ -69,7 +69,9 @@ export type TranslationKey =
   | 'dev.app.overview.created'
   | 'dev.app.overview.visibilityToggle.hide'
   | 'dev.app.overview.visibilityToggle.show'
-  | 'theme.search.noResults'
+  | 'theme.search.loading'
+  | 'theme.search.noResults.title'
+  | 'theme.search.noResults.description'
   | 'theme.search.keys.navigate'
   | 'theme.search.keys.select'
   | 'theme.search.keys.exit'
@@ -78,6 +80,10 @@ export type TranslationKey =
   | 'theme.search.recent'
   | 'theme.search.navbar.label'
   | 'theme.search.suggested'
+  | 'theme.search.showMore'
+  | 'theme.search.filter.title'
+  | 'theme.search.filter.reset'
+  | 'theme.search.filter.field.reset'
   | 'theme.toc.header'
   | 'theme.footer.copyrightText'
   | 'theme.page.homeButton'

package/src/core/types/search.ts

@@ -14,9 +14,9 @@ export type SearchDocument = {
   title: string | string[];
   text: string | string[];
   path?: string[];
-  httpVerb?: string;
+  httpMethod?: string;
+  httpPath?: string | string[];
   deprecated?: boolean;
-  pathName?: string | string[];
   parameters?: OperationParameter[];
   metadata?: Record<string, any>;
   version?: string;
@@ -26,4 +26,56 @@ export type SearchDocument = {
   'redocly::teams-rbac'?: { [x: string]: string };
   [REDOCLY_ROUTE_RBAC]?: { slug?: string; fsPath?: string };
   badges?: ItemBadge[];
+  facets?: Record<string, string>;
+  filterTags?: string[];
+  parametersNames?: string[]; // this field is used only for flexsearch indexing
+  parametersDescriptons?: string[]; // this field is used only for flexsearch indexing
+};
+
+export type ParameterHighlight = {
+  name: string;
+  description: string;
+  place: string;
+  path: string[];
+};
+
+export type SearchItemData = {
+  document: SearchDocument;
+  highlight: Record<string, string> & { parameters?: ParameterHighlight[]; path?: string[] };
+};
+
+export type SearchFacet = {
+  name: string;
+  field: string;
+  type: SearchFacetType;
+  values: string[] | SearchFacetCount[];
+  isTop?: boolean;
+  index?: number;
+};
+
+export type SearchFacetCount = {
+  value: string;
+  count: number;
+  isCounterVisible?: boolean;
+};
+
+export type SearchFacetQuery = {
+  query: string;
+  filter: SearchFilterItem[];
+  facetQuery: string;
+};
+
+export type SearchFacetType =
+  | 'input'
+  | 'multi-select'
+  | 'select'
+  | 'switch'
+  | 'radio'
+  | 'tags'
+  | 'checkbox';
+
+export type SearchFilterItem = {
+  field: string;
+  values: string[];
+  isTop?: boolean;
 };

package/src/core/types/select.ts

@@ -0,0 +1,32 @@
+import type React from 'react';
+
+export type SelectOption<T> = {
+  value: T;
+  element?: React.ReactNode | JSX.Element | string;
+  label?: string;
+};
+
+export type SelectProps<T = any> = {
+  value?: SelectOption<T> | SelectOption<T>[] | T | T[];
+  options: SelectOption<T>[];
+  multiple?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  dataAttributes?: Record<string, string>;
+  className?: string;
+  withArrow?: boolean;
+  triggerEvent?: 'click' | 'hover';
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  onlyIcon?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  hideCheckmarkIcon?: boolean;
+  dataTestId?: string;
+  icon?: React.ReactNode;
+  footer?: React.ReactNode;
+  onChange?: (value: T | T[]) => void;
+  renderInput?: () => React.ReactElement;
+  renderDivider?: () => React.ReactElement;
+  onSearch?: (value: T | null) => void;
+};

package/src/icons/ResetIcon/ResetIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M9 14C10.1867 14 11.3467 13.6481 12.3334 12.9888C13.3201 12.3295 14.0892 11.3925 14.5433 10.2961C14.9974 9.19975 15.1162 7.99335 14.8847 6.82946C14.6532 5.66558 14.0818 4.59648 13.2426 3.75736C12.4035 2.91825 11.3344 2.3468 10.1705 2.11529C9.00666 1.88378 7.80026 2.0026 6.7039 2.45673C5.60754 2.91085 4.67047 3.67989 4.01118 4.66658C3.35189 5.65328 3 6.81331 3 8V11.1L1.2 9.3L0.5 10L3.5 13L6.5 10L5.8 9.3L4 11.1V8C4 7.0111 4.29324 6.0444 4.84265 5.22215C5.39206 4.39991 6.17295 3.75904 7.08658 3.38061C8.00021 3.00217 9.00555 2.90315 9.97545 3.09608C10.9454 3.289 11.8363 3.76521 12.5355 4.46447C13.2348 5.16373 13.711 6.05465 13.9039 7.02455C14.0969 7.99446 13.9978 8.99979 13.6194 9.91342C13.241 10.8271 12.6001 11.6079 11.7779 12.1574C10.9556 12.7068 9.98891 13 9 13V14Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const ResetIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ResetIcon/ResetIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SettingsIcon/SettingsIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M15.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z"
+      fill="#22242B"
+    />
+    <path
+      d="M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z"
+      fill="#22242B"
+    />
+  </svg>
+);
+
+export const SettingsIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SettingsIcon/SettingsIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -13,7 +13,7 @@ export * from '@redocly/theme/components/Badge/Badge';
 export * from '@redocly/theme/components/Dropdown/Dropdown';
 export * from '@redocly/theme/components/Dropdown/DropdownMenu';
 export * from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-export * from '@redocly/theme/components/Loading/Loading';
+export * from '@redocly/theme/components/Loaders/Loading';
 export * from '@redocly/theme/components/Link/Link';
 export * from '@redocly/theme/components/Portal/Portal';
 export * from '@redocly/theme/components/Segmented/Segmented';
@@ -135,6 +135,10 @@ export * from '@redocly/theme/components/Search/SearchShortcut';
 export * from '@redocly/theme/components/Search/SearchTrigger';
 export * from '@redocly/theme/components/Search/SearchRecent';
 export * from '@redocly/theme/components/Search/SearchSuggestedPages';
+export * from '@redocly/theme/components/Search/SearchFilter';
+export * from '@redocly/theme/components/Search/SearchFilterField';
+export * from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldSelect';
+export * from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldTags';
 /* Icons */
 export * from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 export * from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
@@ -150,6 +154,7 @@ export * from '@redocly/theme/icons/FolderAddIcon/FolderAddIcon';
 export * from '@redocly/theme/icons/FolderIcon/FolderIcon';
 export * from '@redocly/theme/icons/FolderMoveToIcon/FolderMoveToIcon';
 export * from '@redocly/theme/icons/SelectIcon/SelectIcon';
+export * from '@redocly/theme/icons/SettingsIcon/SettingsIcon';
 export * from '@redocly/theme/icons/CloseIcon/CloseIcon';
 export * from '@redocly/theme/icons/CloseOutlineIcon/CloseOutlineIcon';
 export * from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
@@ -197,6 +202,7 @@ export * from '@redocly/theme/icons/MobileSidebarIcon/MobileSidebarIcon';
 export * from '@redocly/theme/icons/CopyLinkIcon/CopyLinkIcon';
 export * from '@redocly/theme/icons/OverflowMenuHorizontalIcon/OverflowMenuHorizontalIcon';
 export * from '@redocly/theme/icons/RenewIcon/RenewIcon';
+export * from '@redocly/theme/icons/ResetIcon/ResetIcon';
 export * from '@redocly/theme/icons/WarningAltIcon/WarningAltIcon';
 export * from '@redocly/theme/icons/MoonIcon/MoonIcon';
 export * from '@redocly/theme/icons/SunIcon/SunIcon';

package/lib/core/types/select-option.d.ts

@@ -1,4 +0,0 @@
-export type SelectOption<T> = {
-    value: T;
-    label: string;
-};

package/src/core/types/select-option.ts

@@ -1,4 +0,0 @@
-export type SelectOption<T> = {
-  value: T;
-  label: string;
-};