@redocly/theme 0.12.1 → 0.12.3

package/lib/components/Catalog/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Catalog';
+export * from './CatalogCard';
+export * from './useCatalog';

package/lib/components/Catalog/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Catalog"), exports);
+__exportStar(require("./CatalogCard"), exports);
+__exportStar(require("./useCatalog"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Catalog/useCatalog.js

@@ -34,6 +34,13 @@ function useCatalog(items, config) {
     const [filtersState, setFiltersState] = React.useState(() => {
         var _a;
         return ((_a = config.filters) !== null && _a !== void 0 ? _a : []).map((f) => {
+            var _a, _b;
+            if (f.type === 'date-range') {
+                const [from, to] = (_b = (_a = searchParams.get(f.property)) === null || _a === void 0 ? void 0 : _a.split('--')) !== null && _b !== void 0 ? _b : [];
+                if (!from && !to)
+                    return {};
+                return { from, to };
+            }
             return new Set(searchParams.getAll(f.property));
         });
     });
@@ -43,6 +50,8 @@ function useCatalog(items, config) {
     const toggleOption = React.useCallback((filterIdx, option) => {
         setFiltersState((prev) => {
             const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set();
+            if (!(newFilterOptions instanceof Set))
+                return prev;
             if (newFilterOptions.has(option)) {
                 newFilterOptions.delete(option);
             }
@@ -55,7 +64,12 @@ function useCatalog(items, config) {
     }, []);
     const selectOption = React.useCallback((filterIdx, option) => {
         setFiltersState((prev) => {
-            const newFilterOptions = new Set(option ? [option] : []);
+            const newFilterOptions = prev[filterIdx] instanceof Set
+                ? new Set(option ? [option] : [])
+                : {
+                    from: option === null || option === void 0 ? void 0 : option.from,
+                    to: option === null || option === void 0 ? void 0 : option.to,
+                };
             const filter = filtersWithOptions[filterIdx];
             return prev.map((f, idx) => idx === filterIdx
                 ? newFilterOptions
@@ -72,11 +86,16 @@ function useCatalog(items, config) {
             if (!filter)
                 return;
             searchParams.delete(filter.property);
-            filterValues.forEach((value) => {
-                searchParams.append(filter.property, value);
-            });
+            if (filterValues instanceof Set) {
+                filterValues.forEach((value) => {
+                    searchParams.append(filter.property, value);
+                });
+            }
+            else if (filterValues.from || filterValues.to) {
+                searchParams.append(filter.property, `${filterValues.from || ''}--${filterValues.to || ''}`);
+                return;
+            }
         });
-        searchParams;
         if (filterTerm) {
             searchParams.set('filter', filterTerm);
         }
@@ -84,14 +103,17 @@ function useCatalog(items, config) {
             searchParams.delete('filter');
         }
         const newSearch = searchParams.toString();
+        if (newSearch === location.search.substring(1))
+            return;
         navigate({ search: newSearch });
-    }, [config.filters, searchParams, filtersState, filterTerm, navigate]);
+    }, [config.filters, searchParams, filtersState, filterTerm, navigate, location]);
     // filterParents[i] is a Set with indexes of parents of this filter
     const filterParents = React.useMemo(() => collectFilterParents(config.filters), [config.filters]);
     return React.useMemo(() => {
+        var _a;
         const filters = filtersWithOptions.map((filter, idx) => {
             var _a, _b, _c;
-            return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 }));
+            return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 || !!filtersState[idx].from }));
         });
         const filteredItems = filterItems(normalizedItems, filters, filterTerm);
         // add more information to filters state which is known only after filtering items
@@ -99,7 +121,8 @@ function useCatalog(items, config) {
             var _a, _b;
             const parentFilterIdx = filters.findIndex((f) => f.property === filter.parentFilter);
             const parentUsed = filter.parentFilter
-                ? ((_b = (_a = filtersState[parentFilterIdx]) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0) > 0
+                ? ((_b = (_a = filtersState[parentFilterIdx]) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0) > 0 ||
+                    !!filtersState[parentFilterIdx].from
                 : true;
             // we filter items with all the other independent filters current state
             // then we can calculate the options for this filter after other filters are applied
@@ -110,7 +133,7 @@ function useCatalog(items, config) {
             const adjustedFilterOptions = collectFilterOptions(filteredWithOtherFilters.map((m) => ({ metadata: m })), config.filters);
             return Object.assign(Object.assign({}, filter), { parentUsed, filteredOptions: adjustedFilterOptions[idx].options });
         });
-        const groups = config.groupByFirstFilter && filters[0].selectedOptions.size > 0
+        const groups = config.groupByFirstFilter && ((_a = filters[0].selectedOptions) === null || _a === void 0 ? void 0 : _a.size) > 0
             ? groupByFirstFilter(resolvedFilters, filteredItems)
             : [{ title: 'APIs', items: filteredItems }];
         return { groups, filters: resolvedFilters, setFilterTerm, filterTerm };
@@ -171,7 +194,7 @@ function normalizeItems(items, config) {
         const metadata = item.metadata || {};
         const link = item.link || ((_a = (0, utils_1.findDeepFirst)(item.items || [], (i) => 'link' in i && !!i.link)) === null || _a === void 0 ? void 0 : _a.link);
         const firstSidebarItem = (_b = item.sidebar) === null || _b === void 0 ? void 0 : _b[0];
-        return Object.assign(Object.assign({}, metadata), { title: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.title) || item.label || 'Untitled', description: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.description), link: (_c = (0, utils_1.withoutHash)(link)) !== null && _c !== void 0 ? _c : '#', docsLink: (0, utils_1.withoutHash)(firstSidebarItem === null || firstSidebarItem === void 0 ? void 0 : firstSidebarItem.link), image: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.image) });
+        return Object.assign(Object.assign({}, metadata), { publishedAt: metadata.publishedAt || metadata.createdAt, title: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.title) || item.label || 'Untitled', description: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.description), link: (_c = (0, utils_1.withoutHash)(link)) !== null && _c !== void 0 ? _c : '#', docsLink: (0, utils_1.withoutHash)(firstSidebarItem === null || firstSidebarItem === void 0 ? void 0 : firstSidebarItem.link), image: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.image) });
     });
 }
 function collectFilterParents(filtersWithOptions) {
@@ -233,6 +256,17 @@ function filterItems(normalizedItems, filters, term) {
     // filter by filters first, and then by search term
     const filteredByFilters = normalizedItems.filter((item) => {
         return filters.every((filter) => {
+            var _a, _b;
+            if (filter.selectedOptions && !(filter.selectedOptions instanceof Set)) {
+                try {
+                    const date = new Date(item[filter.property]).toISOString().split('T')[0];
+                    return (date >= ((_a = filter.selectedOptions.from) !== null && _a !== void 0 ? _a : '') &&
+                        date <= ((_b = filter.selectedOptions.to) !== null && _b !== void 0 ? _b : 'Z'));
+                }
+                catch (e) {
+                    return true;
+                }
+            }
             if (filter.selectedOptions.size === 0) {
                 return true;
             }

package/lib/components/Filter/Filter.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
 export declare function Filter({ filter }: {
-    filter: ResolvedFilter;
+    filter: ResolvedFilter & {
+        selectedOptions: any;
+    };
 }): JSX.Element | null;

package/lib/components/Filter/Filter.js

@@ -6,19 +6,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const react_date_picker_1 = require("react-date-picker");
 const Checkbox_1 = require("../../ui/Checkbox");
 const hooks_1 = require("../../mocks/hooks");
 function Filter({ filter }) {
-    var _a;
+    var _a, _b;
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         selectAll: 'theme.catalog.filters.select.all',
+        clear: 'theme.catalog.filters.clear',
     };
     if (!filter.parentUsed)
         return null;
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null, translate(filter.titleTranslationKey, filter.title)),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
+        react_1.default.createElement(FilterTitle, null,
+            translate(filter.titleTranslationKey, filter.title),
+            ' ',
+            ((_a = filter.selectedOptions) === null || _a === void 0 ? void 0 : _a.size) ? (react_1.default.createElement("a", { "data-translation-key": translationKeys.clear, onClick: () => filter.selectOption('') }, translate(translationKeys.clear, 'Clear'))) : null),
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_b = filter.selectedOptions.values().next()) === null || _b === void 0 ? void 0 : _b.value) || '' },
             react_1.default.createElement("option", { key: "none", value: "", "data-translation-key": translationKeys.selectAll }, translate(translationKeys.selectAll, 'All')),
             filter.filteredOptions.map((value) => {
                 return (react_1.default.createElement("option", { key: value.value, value: value.value },
@@ -26,7 +31,21 @@ function Filter({ filter }) {
                     " (",
                     value.count,
                     ")"));
-            }))) : (filter.filteredOptions.map((value) => {
+            }))) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(DatePickerWrapper, null,
+                react_1.default.createElement("span", null, "From:"),
+                react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
+                        if (Array.isArray(from))
+                            return;
+                        filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: formatDateWithNoTimeZone(from) }));
+                    } })),
+            react_1.default.createElement(DatePickerWrapper, null,
+                react_1.default.createElement("span", null, "To:"),
+                react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", format: "y-MM-dd", minDate: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined, value: filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null, minDetail: "decade", onChange: (to) => {
+                        if (Array.isArray(to))
+                            return;
+                        filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
+                    } })))) : (filter.filteredOptions.map((value) => {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
             return (react_1.default.createElement(FilterValue, { key: id },
                 react_1.default.createElement(Checkbox_1.Checkbox, { type: "checkbox", id: id, checked: filter.selectedOptions.has(value.value), onChange: () => filter.toggleOption(value.value) }),
@@ -51,6 +70,11 @@ const FilterTitle = styled_components_1.default.h4 `
   font-weight: var(--font-weight-bold);
   margin: 0;
   margin-bottom: 16px;
+
+  > a {
+    font-size: 14px;
+    cursor: pointer;
+  }
 `;
 const FilterValue = styled_components_1.default.label `
   display: block;
@@ -85,9 +109,66 @@ const StyledSelect = styled_components_1.default.select `
   background-position: right 10px center;
   background-size: 1em;
   width: 100%;
+  padding-right: 25px;
 `;
 // TODO: import from portal
 function slug(str) {
     return str.replace(/\s/g, '-').toLowerCase();
 }
+const DatePickerWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 5px;
+
+  align-items: center;
+  gap: 10px;
+
+  > span {
+    width: 50px;
+  }
+
+  .react-date-picker {
+    flex: 1;
+  }
+
+  .react-calendar__tile--now {
+    background: #cbf7f1;
+    color: black;
+
+    &:enabled:hover,
+    &:enabled:focus {
+      background: #b1efe7;
+      color: black;
+    }
+  }
+
+  .react-date-picker__inputGroup__input:invalid {
+    background: rgb(255 125 0 / 10%);
+  }
+
+  .react-date-picker__button {
+    padding: 4px 4px;
+    svg {
+      width: 12px;
+    }
+  }
+
+  .react-date-picker__wrapper {
+    border: 1px solid rgba(0, 0, 0, 0.23);
+    border-radius: var(--border-radius);
+    padding: var(--input-padding);
+  }
+
+  .react-date-picker__inputGroup__input {
+    width: 20px;
+  }
+`;
+function padZero(num) {
+    return num < 10 ? '0' + num : num;
+}
+function formatDateWithNoTimeZone(date) {
+    if (!date)
+        return date;
+    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
+}
 //# sourceMappingURL=Filter.js.map

package/lib/components/index.d.ts

@@ -26,3 +26,4 @@ export * from './Menu';
 export * from './Separator';
 export * from './Cards';
 export * from './Tiles';
+export * from './Catalog';

package/lib/components/index.js

@@ -42,4 +42,5 @@ __exportStar(require("./Menu"), exports);
 __exportStar(require("./Separator"), exports);
 __exportStar(require("./Cards"), exports);
 __exportStar(require("./Tiles"), exports);
+__exportStar(require("./Catalog"), exports);
 //# sourceMappingURL=index.js.map

package/lib/types/portal/src/shared/types/catalog.d.ts

@@ -9,7 +9,7 @@ export type FilteredCatalog = {
     setFilterTerm: (term: string) => void;
 };
 export type Filter = {
-    type?: 'select' | 'checkboxes';
+    type?: 'select' | 'checkboxes' | 'date-range';
     title: string;
     titleTranslationKey?: string;
     property: string;
@@ -42,12 +42,16 @@ export type ResolvedFilter = Omit<Filter, 'options'> & {
     toggleOption: (option: string) => void;
     selectOption: (option: string) => void;
     parentUsed: boolean;
-    selectedOptions: Set<string>;
+    selectedOptions: Set<string> | {
+        from?: string;
+        to?: string;
+    };
 };
 export type CatalogItem = {
     title: string;
     link: string;
     description?: string;
     image?: string;
+    docsLink?: string;
     [k: string]: unknown;
 };

package/lib/ui/index.d.ts

@@ -5,5 +5,6 @@ export * from '../ui/Dropdown';
 export * from '../ui/Flex';
 export * from '../ui/Jumbotron';
 export * from '../ui/ArrowBack';
+export * from '../ui/Highlight';
 export declare const LandingLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;
 export declare const EmptyLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;

package/lib/ui/index.js

@@ -21,6 +21,7 @@ __exportStar(require("../ui/Dropdown"), exports);
 __exportStar(require("../ui/Flex"), exports);
 __exportStar(require("../ui/Jumbotron"), exports);
 __exportStar(require("../ui/ArrowBack"), exports);
+__exportStar(require("../ui/Highlight"), exports);
 const LandingLayout = ({ children }) => children;
 exports.LandingLayout = LandingLayout;
 exports.EmptyLayout = exports.LandingLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "description": "Shared UI components library",
   "keywords": [],
   "author": "team@redocly.com",
@@ -82,6 +82,8 @@
     "@redocly/ajv": "^8.11.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight-words-core": "^1.2.2",
+    "react-date-picker": "10.0.3",
+    "react-calendar": "4.2.1",
     "hotkeys-js": "^3.10.1",
     "timeago.js": "^4.0.2"
   },

package/src/components/Catalog/index.tsx

@@ -0,0 +1,3 @@
+export * from './Catalog';
+export * from './CatalogCard';
+export * from './useCatalog';

package/src/components/Catalog/useCatalog.ts

@@ -6,10 +6,10 @@ import type { Location } from 'react-router-dom';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import type {
   CatalogConfig,
-  FilteredCatalog,
-  ResolvedFilter,
   CatalogItem,
   Filter,
+  FilteredCatalog,
+  ResolvedFilter,
 } from '@theme/types/portal/src/shared/types/catalog';
 import { findDeepFirst, toStringIfDefined, withoutHash } from '@theme/utils';
 
@@ -19,6 +19,11 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
   const searchParams = useSearchParams(location);
   const [filtersState, setFiltersState] = React.useState(() =>
     (config.filters ?? []).map((f) => {
+      if (f.type === 'date-range') {
+        const [from, to] = searchParams.get(f.property)?.split('--') ?? [];
+        if (!from && !to) return {};
+        return { from, to };
+      }
       return new Set(searchParams.getAll(f.property));
     }),
   );
@@ -33,6 +38,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
   const toggleOption = React.useCallback((filterIdx, option) => {
     setFiltersState((prev) => {
       const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set<string>();
+      if (!(newFilterOptions instanceof Set)) return prev;
       if (newFilterOptions.has(option)) {
         newFilterOptions.delete(option);
       } else {
@@ -46,7 +52,13 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
   const selectOption = React.useCallback(
     (filterIdx, option) => {
       setFiltersState((prev) => {
-        const newFilterOptions = new Set<string>(option ? [option] : []);
+        const newFilterOptions =
+          prev[filterIdx] instanceof Set
+            ? new Set<string>(option ? [option] : [])
+            : {
+                from: option?.from,
+                to: option?.to,
+              };
         const filter = filtersWithOptions[filterIdx];
 
         return prev.map((f, idx) =>
@@ -67,19 +79,28 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       const filter = config.filters?.[filterIdx];
       if (!filter) return;
       searchParams.delete(filter.property);
-      filterValues.forEach((value) => {
-        searchParams.append(filter.property, value);
-      });
+      if (filterValues instanceof Set) {
+        filterValues.forEach((value) => {
+          searchParams.append(filter.property, value);
+        });
+      } else if (filterValues.from || filterValues.to) {
+        searchParams.append(
+          filter.property,
+          `${filterValues.from || ''}--${filterValues.to || ''}`,
+        );
+        return;
+      }
     });
-    searchParams;
+
     if (filterTerm) {
       searchParams.set('filter', filterTerm);
     } else {
       searchParams.delete('filter');
     }
     const newSearch = searchParams.toString();
+    if (newSearch === location.search.substring(1)) return;
     navigate({ search: newSearch });
-  }, [config.filters, searchParams, filtersState, filterTerm, navigate]);
+  }, [config.filters, searchParams, filtersState, filterTerm, navigate, location]);
 
   // filterParents[i] is a Set with indexes of parents of this filter
   const filterParents = React.useMemo(() => collectFilterParents(config.filters), [config.filters]);
@@ -90,7 +111,8 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       toggleOption: (value: string) => toggleOption(idx, value),
       selectOption: (value: string) => selectOption(idx, value),
       selectedOptions: filtersState[idx] ?? new Set<string>(),
-      isFilterUsed: (filtersState[idx]?.size ?? 0) > 0, // TODO: rename to isUsed
+      isFilterUsed:
+        ((filtersState[idx] as any)?.size ?? 0) > 0 || !!(filtersState[idx] as any).from,
     }));
 
     const filteredItems = filterItems(normalizedItems, filters, filterTerm);
@@ -99,7 +121,8 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
     const resolvedFilters = filters.map((filter, idx) => {
       const parentFilterIdx = filters.findIndex((f) => f.property === filter.parentFilter);
       const parentUsed = filter.parentFilter
-        ? (filtersState[parentFilterIdx]?.size ?? 0) > 0
+        ? ((filtersState[parentFilterIdx] as any)?.size ?? 0) > 0 ||
+          !!(filtersState[parentFilterIdx] as any).from
         : true;
 
       // we filter items with all the other independent filters current state
@@ -127,7 +150,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
     });
 
     const groups =
-      config.groupByFirstFilter && filters[0].selectedOptions.size > 0
+      config.groupByFirstFilter && (filters[0].selectedOptions as any)?.size > 0
         ? groupByFirstFilter(resolvedFilters, filteredItems)
         : [{ title: 'APIs', items: filteredItems }];
 
@@ -193,6 +216,7 @@ function normalizeItems(items: ResolvedNavItem[], config: CatalogConfig): Catalo
     const firstSidebarItem = (item as any).sidebar?.[0];
     return {
       ...metadata,
+      publishedAt: metadata.publishedAt || metadata.createdAt,
       title: toStringIfDefined(metadata?.title) || item.label || 'Untitled',
       description: toStringIfDefined(metadata?.description),
       link: withoutHash(link) ?? '#',
@@ -272,12 +296,25 @@ function filterItems(
   // filter by filters first, and then by search term
   const filteredByFilters = normalizedItems.filter((item) => {
     return filters.every((filter) => {
+      if (filter.selectedOptions && !(filter.selectedOptions instanceof Set)) {
+        try {
+          const date = new Date(item[filter.property] as string).toISOString().split('T')[0];
+          return (
+            date >= (filter.selectedOptions.from ?? '') &&
+            date <= (filter.selectedOptions.to ?? 'Z')
+          );
+        } catch (e) {
+          return true;
+        }
+      }
+
       if (filter.selectedOptions.size === 0) {
         return true;
       }
+
       const itemValue = item?.[filter.property] || filter.missingCategoryName || 'Others';
       if (Array.isArray(itemValue)) {
-        return itemValue.some((value) => filter.selectedOptions.has(value));
+        return itemValue.some((value) => (filter.selectedOptions as Set<any>).has(value));
       }
       return filter.selectedOptions.has(itemValue as string);
     });

package/src/components/Filter/Filter.tsx

@@ -1,24 +1,33 @@
 import React from 'react';
 import styled from 'styled-components';
+import { DatePicker } from 'react-date-picker';
 
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { Checkbox } from '@theme/ui/Checkbox';
 import { useTranslate } from '@portal/hooks';
 
-export function Filter({ filter }: { filter: ResolvedFilter }) {
+export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions: any } }) {
   const { translate } = useTranslate();
   const translationKeys = {
     selectAll: 'theme.catalog.filters.select.all',
+    clear: 'theme.catalog.filters.clear',
   };
 
   if (!filter.parentUsed) return null;
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>{translate(filter.titleTranslationKey, filter.title)}</FilterTitle>
+      <FilterTitle>
+        {translate(filter.titleTranslationKey, filter.title)}{' '}
+        {filter.selectedOptions?.size ? (
+          <a data-translation-key={translationKeys.clear} onClick={() => filter.selectOption('')}>
+            {translate(translationKeys.clear, 'Clear')}
+          </a>
+        ) : null}
+      </FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
           onChange={(e) => filter.selectOption(e.target.value)}
-          value={filter.selectedOptions.values().next()?.value || ''}
+          value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
         >
           <option key="none" value="" data-translation-key={translationKeys.selectAll}>
             {translate(translationKeys.selectAll, 'All')}
@@ -31,6 +40,51 @@ export function Filter({ filter }: { filter: ResolvedFilter }) {
             );
           })}
         </StyledSelect>
+      ) : filter.type === 'date-range' ? (
+        <>
+          <DatePickerWrapper>
+            <span>From:</span>
+            <DatePicker
+              closeCalendar={true}
+              format="y-MM-dd"
+              dayPlaceholder="DD"
+              monthPlaceholder="MM"
+              yearPlaceholder="YYYY"
+              value={filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null}
+              minDetail="decade"
+              maxDate={new Date()}
+              onChange={(from) => {
+                if (Array.isArray(from)) return;
+                filter.selectOption({
+                  ...(filter.selectedOptions as any),
+                  from: formatDateWithNoTimeZone(from),
+                });
+              }}
+            />
+          </DatePickerWrapper>
+          <DatePickerWrapper>
+            <span>To:</span>
+            <DatePicker
+              closeCalendar={true}
+              dayPlaceholder="DD"
+              monthPlaceholder="MM"
+              yearPlaceholder="YYYY"
+              format="y-MM-dd"
+              minDate={
+                filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined
+              }
+              value={filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null}
+              minDetail="decade"
+              onChange={(to) => {
+                if (Array.isArray(to)) return;
+                filter.selectOption({
+                  ...filter.selectedOptions,
+                  to: formatDateWithNoTimeZone(to),
+                });
+              }}
+            />
+          </DatePickerWrapper>
+        </>
       ) : (
         filter.filteredOptions.map((value: any) => {
           const id = 'filter--' + filter.property + '--' + slug(value.value);
@@ -67,6 +121,11 @@ const FilterTitle = styled.h4`
   font-weight: var(--font-weight-bold);
   margin: 0;
   margin-bottom: 16px;
+
+  > a {
+    font-size: 14px;
+    cursor: pointer;
+  }
 `;
 
 const FilterValue = styled.label`
@@ -103,9 +162,68 @@ const StyledSelect = styled.select`
   background-position: right 10px center;
   background-size: 1em;
   width: 100%;
+  padding-right: 25px;
 `;
 
 // TODO: import from portal
 function slug(str: string): string {
   return str.replace(/\s/g, '-').toLowerCase();
 }
+
+const DatePickerWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 5px;
+
+  align-items: center;
+  gap: 10px;
+
+  > span {
+    width: 50px;
+  }
+
+  .react-date-picker {
+    flex: 1;
+  }
+
+  .react-calendar__tile--now {
+    background: #cbf7f1;
+    color: black;
+
+    &:enabled:hover,
+    &:enabled:focus {
+      background: #b1efe7;
+      color: black;
+    }
+  }
+
+  .react-date-picker__inputGroup__input:invalid {
+    background: rgb(255 125 0 / 10%);
+  }
+
+  .react-date-picker__button {
+    padding: 4px 4px;
+    svg {
+      width: 12px;
+    }
+  }
+
+  .react-date-picker__wrapper {
+    border: 1px solid rgba(0, 0, 0, 0.23);
+    border-radius: var(--border-radius);
+    padding: var(--input-padding);
+  }
+
+  .react-date-picker__inputGroup__input {
+    width: 20px;
+  }
+`;
+
+function padZero(num: number) {
+  return num < 10 ? '0' + num : num;
+}
+
+function formatDateWithNoTimeZone(date?: Date | null) {
+  if (!date) return date;
+  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
+}

package/src/components/index.ts

@@ -26,3 +26,4 @@ export * from './Menu';
 export * from './Separator';
 export * from './Cards';
 export * from './Tiles';
+export * from './Catalog';

package/src/types/portal/src/shared/types/catalog.ts

@@ -8,7 +8,7 @@ export type FilteredCatalog = {
 };
 
 export type Filter = {
-  type?: 'select' | 'checkboxes';
+  type?: 'select' | 'checkboxes' | 'date-range';
   title: string;
   titleTranslationKey?: string;
   property: string;
@@ -43,7 +43,12 @@ export type ResolvedFilter = Omit<Filter, 'options'> & {
   toggleOption: (option: string) => void;
   selectOption: (option: string) => void;
   parentUsed: boolean;
-  selectedOptions: Set<string>;
+  selectedOptions:
+    | Set<string>
+    | {
+        from?: string;
+        to?: string;
+      };
 };
 
 export type CatalogItem = {
@@ -51,5 +56,6 @@ export type CatalogItem = {
   link: string;
   description?: string;
   image?: string;
+  docsLink?: string;
   [k: string]: unknown;
 };

package/src/ui/index.tsx

@@ -6,6 +6,7 @@ export * from '@theme/ui/Dropdown';
 export * from '@theme/ui/Flex';
 export * from '@theme/ui/Jumbotron';
 export * from '@theme/ui/ArrowBack';
+export * from '@theme/ui/Highlight';
 
 export const LandingLayout = ({ children }: React.PropsWithChildren<object>): React.ReactNode =>
   children;