@redocly/theme 0.9.11 → 0.9.12-alpha.0

package/lib/Catalog/Filter.d.ts

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

package/lib/Catalog/Filter.js

@@ -7,19 +7,36 @@ exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Checkbox_1 = require("../ui/Checkbox");
+// TODO: figure out how to fix this
+const DatePicker = 
+// eslint-disable-next-line @typescript-eslint/no-var-requires, import/order, import/no-extraneous-dependencies
+require('react-date-picker').default;
+// disabled type checking for selectedOptions
 function Filter({ filter }) {
-    var _a;
+    var _a, _b;
     if (!filter.parentUsed)
         return null;
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null, 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,
+            filter.title,
+            ((_a = filter.selectedOptions) === null || _a === void 0 ? void 0 : _a.size) ? (react_1.default.createElement("a", { onClick: () => filter.selectOption('') }, " 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: "" }, "All"),
             filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },
                 value.value,
                 " (",
                 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(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) => {
+                        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(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) => {
+                        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) }),
@@ -44,6 +61,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;
@@ -78,9 +100,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.11",
+  "version": "0.9.12-alpha.0",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -83,6 +83,7 @@
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
     "highlight-words-core": "^1.2.2",
+    "react-date-picker": "9.2.0",
     "hotkeys-js": "^3.10.1",
     "timeago.js": "^4.0.2"
   },

package/src/Catalog/Filter.tsx

@@ -1,18 +1,31 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { DatePickerProps } from 'react-date-picker';
+
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { Checkbox } from '@theme/ui/Checkbox';
 
-export function Filter({ filter }: { filter: ResolvedFilter }) {
+// TODO: figure out how to fix this
+const DatePicker: React.FC<DatePickerProps> =
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, import/order, import/no-extraneous-dependencies
+  require('react-date-picker').default;
+
+// disabled type checking for selectedOptions
+export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions: any } }) {
   if (!filter.parentUsed) return null;
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>{filter.title}</FilterTitle>
+      <FilterTitle>
+        {filter.title}
+        {filter.selectedOptions?.size ? (
+          <a onClick={() => filter.selectOption('')}> 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="">
             All
@@ -23,6 +36,49 @@ export function Filter({ filter }: { filter: ResolvedFilter }) {
             </option>
           ))}
         </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: Date) => {
+                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: Date) => {
+                filter.selectOption({
+                  ...filter.selectedOptions,
+                  to: formatDateWithNoTimeZone(to),
+                });
+              }}
+            />
+          </DatePickerWrapper>
+        </>
       ) : (
         filter.filteredOptions.map((value: any) => {
           const id = 'filter--' + filter.property + '--' + slug(value.value);
@@ -59,6 +115,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`
@@ -95,9 +156,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/types/portal/src/shared/types/catalog.d.ts

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