@redocly/theme 0.59.0-next.0 → 0.59.0-next.1

package/src/components/Catalog/CatalogFilter/CatalogFilterContent.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ResolvedFilter } from '@redocly/theme/core/types';
+import type { RedoclyConfig } from '@redocly/theme/config';
+
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CatalogFilter } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilter';
+import { isFromToSelectedOptions } from '@redocly/theme/core/utils';
+
+export type CatalogFilterContentProps = {
+  setFilterTerm: (value: string) => void;
+  filters: ResolvedFilter[];
+  filterTerm: string;
+  filterValuesCasing?:
+    | NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing']
+    | ((str: string) => string);
+  hideSearch?: boolean;
+  showCounter?: boolean;
+  className?: string;
+};
+
+export function CatalogFilterContent({
+  setFilterTerm,
+  filters,
+  filterTerm,
+  filterValuesCasing,
+  hideSearch,
+  showCounter = true,
+  className,
+}: CatalogFilterContentProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const hasActiveFilters = filters.some((filter) => {
+    if (filterTerm) return true;
+    if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    } else if (
+      isFromToSelectedOptions(filter.selectedOptions) &&
+      filter.selectedOptions.from &&
+      filter.selectedOptions.to
+    ) {
+      return true;
+    }
+  });
+
+  const handleClearAll = (): void => {
+    filters.forEach((filter) => filter.selectOption(''));
+    setFilterTerm('');
+  };
+
+  if (!filters.length) {
+    return null;
+  }
+
+  return (
+    <CatalogFilterContentWrapper
+      className={className}
+      data-component-name="Catalog/CatalogFilterContent"
+    >
+      <FiltersHeader>
+        <FiltersTitle data-translation-key="catalog.filters.title">
+          {translate('catalog.filters.title', 'Filters')}
+        </FiltersTitle>
+        {hasActiveFilters ? (
+          <Button size="medium" tone="danger" variant="ghost" onClick={handleClearAll}>
+            {translate('catalog.filters.clearAll', 'Clear filters')}
+          </Button>
+        ) : null}
+      </FiltersHeader>
+      {!hideSearch && (
+        <FilterInput value={filterTerm} onChange={(updatedTerm) => setFilterTerm(updatedTerm)} />
+      )}
+      <FilterItems hideSearch={hideSearch}>
+        {filters.map((filter, idx) => (
+          <CatalogFilter
+            filter={filter}
+            key={filter.property + '-' + idx}
+            filterValuesCasing={filterValuesCasing}
+            showCounter={showCounter}
+          />
+        ))}
+      </FilterItems>
+    </CatalogFilterContentWrapper>
+  );
+}
+
+const CatalogFilterContentWrapper = styled.div`
+  padding: 0 0 var(--filter-content-padding-vertical) 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+const FiltersHeader = styled.div`
+  display: flex;
+  padding: var(--filter-content-header-padding-vertical)
+    var(--filter-content-header-padding-horizontal);
+`;
+
+const FiltersTitle = styled.div`
+  margin-right: auto;
+  font-size: var(--filter-content-title-font-size);
+  font-weight: var(--filter-content-title-font-weight);
+  line-height: var(--filter-content-title-line-height);
+`;
+
+const FilterItems = styled.div<{ hideSearch?: boolean }>`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border-color-secondary);
+  ${({ hideSearch }) =>
+    hideSearch &&
+    css`
+      border-top: none;
+    `}
+`;

package/src/components/Catalog/CatalogFilter/CatalogFilterDateRange.tsx

@@ -0,0 +1,147 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { FilterProps } from '@redocly/theme/core/types';
+
+import { FilterOptions } from '@redocly/theme/components/Filter/FilterOptions';
+import { DatePicker } from '@redocly/theme/components/DatePicker/DatePicker';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { formatDateWithoutTimeZone } from '@redocly/theme/core/utils';
+import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
+
+export type CatalogFilterDateRangeProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilterDateRange({
+  filter,
+  className,
+}: CatalogFilterDateRangeProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const from = useMemo(
+    () => (filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined),
+    [filter.selectedOptions.from],
+  );
+  const to = useMemo(
+    () => (filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : undefined),
+    [filter.selectedOptions.to],
+  );
+
+  const selectedCount = useMemo(() => {
+    return from && to ? 1 : 0;
+  }, [from, to]);
+
+  const headerContent = (
+    <AccordionHeaderContent>
+      <span>{translate(filter.titleTranslationKey, filter.title)}</span>
+      {selectedCount > 0 && <CounterTag borderless>{selectedCount}</CounterTag>}
+    </AccordionHeaderContent>
+  );
+
+  return (
+    <AccordionWrapper
+      className={className}
+      $hasSelection={selectedCount > 0}
+      data-component-name="Catalog/CatalogFilterDateRange"
+    >
+      <Accordion expanded={false} header={headerContent}>
+        <FilterOptions>
+          <DateRangeWrapper>
+            <DateRangeRow>
+              <span>From:</span>
+              <DatePicker
+                closeCalendar={true}
+                format="y-MM-dd"
+                dayPlaceholder="DD"
+                monthPlaceholder="MM"
+                yearPlaceholder="YYYY"
+                value={from}
+                maxDate={new Date()}
+                onChange={(from) => {
+                  if (Array.isArray(from)) return;
+                  filter.selectOption({
+                    ...filter.selectedOptions,
+                    from: formatDateWithoutTimeZone(from),
+                    to: formatDateWithoutTimeZone(to),
+                  });
+                }}
+              />
+            </DateRangeRow>
+            <DateRangeRow>
+              <span>To:</span>
+              <DatePicker
+                closeCalendar={true}
+                dayPlaceholder="DD"
+                monthPlaceholder="MM"
+                yearPlaceholder="YYYY"
+                format="y-MM-dd"
+                minDate={from}
+                value={to}
+                onChange={(to) => {
+                  if (Array.isArray(to)) return;
+                  filter.selectOption({
+                    ...filter.selectedOptions,
+                    from: formatDateWithoutTimeZone(from),
+                    to: formatDateWithoutTimeZone(to),
+                  });
+                }}
+              />
+            </DateRangeRow>
+          </DateRangeWrapper>
+        </FilterOptions>
+      </Accordion>
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.div<{ $hasSelection: boolean }>`
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) =>
+    $hasSelection &&
+    `border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+
+const AccordionHeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+
+const DateRangeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-options-gap);
+`;
+
+const DateRangeRow = styled.div`
+  color: var(--filter-date-picker-color);
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  gap: var(--filter-date-picker-gap);
+
+  > span {
+    width: var(--filter-date-picker-width);
+    color: var(--filter-option-label-color);
+  }
+`;

package/src/components/Catalog/CatalogFilter/CatalogFilterSelect.tsx

@@ -0,0 +1,136 @@
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { FilterProps, SelectProps, SelectOption } from '@redocly/theme/core/types';
+
+import { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
+import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
+import { Select } from '@redocly/theme/components/Select/Select';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { changeTextCasing } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
+
+export type CatalogFilterSelectProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilterSelect({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+  className,
+}: CatalogFilterSelectProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const selectedCount = useMemo(() => {
+    if (filter.selectedOptions instanceof Set) {
+      const firstValue = filter.selectedOptions.values().next()?.value;
+
+      return firstValue && firstValue !== '' ? 1 : 0;
+    }
+    return 0;
+  }, [filter.selectedOptions]);
+
+  let selectOptions: SelectOption<string>[] = [];
+
+  const defaultOptionCount = filter.options.reduce((acc, option) => acc + option.count, 0);
+
+  selectOptions = [
+    {
+      value: '',
+      element: (
+        <FilterOption key="all" onClick={() => filter.selectOption('')}>
+          <FilterOptionLabel data-translation-key="catalog.filters.select.all">
+            {translate('catalog.filters.select.all', 'All')}
+          </FilterOptionLabel>
+          <CounterTag borderless>{defaultOptionCount}</CounterTag>
+        </FilterOption>
+      ),
+    },
+    ...filter.options.map((option) => ({
+      value: option.value,
+      element: (
+        <FilterOption key={option.value}>
+          <FilterOptionLabel data-translation-key={option.value}>
+            {changeTextCasing(translate(option.value), filterValuesCasing)}
+          </FilterOptionLabel>
+          {showCounter && <CounterTag borderless>{option.count}</CounterTag>}
+        </FilterOption>
+      ),
+    })),
+  ];
+
+  const headerContent = (
+    <AccordionHeaderContent>
+      <span>{translate(filter.titleTranslationKey, filter.title)}</span>
+      {selectedCount > 0 && <CounterTag borderless>{selectedCount}</CounterTag>}
+    </AccordionHeaderContent>
+  );
+
+  return (
+    <AccordionWrapper
+      className={className}
+      $hasSelection={selectedCount > 0 && !isExpanded}
+      data-component-name="Catalog/CatalogFilterSelect"
+    >
+      <Accordion expanded={isExpanded} header={headerContent} onToggle={setIsExpanded}>
+        <StyledSelect
+          value={
+            (filter.selectedOptions instanceof Set ? filter.selectedOptions : new Set())
+              .values()
+              .next()?.value || ''
+          }
+          onChange={(value) => filter.selectOption(value)}
+          options={selectOptions}
+        />
+      </Accordion>
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.div<{ $hasSelection: boolean }>`
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) =>
+    $hasSelection &&
+    `border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+
+const AccordionHeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+
+const StyledSelect = styled(Select)<SelectProps>`
+  --select-list-max-width: var(--filter-select-max-width);
+
+  min-height: var(--filter-select-min-height);
+  --select-text-color: var(--filter-select-color);
+  border: 1px solid var(--filter-select-border-color);
+  --select-border-radius: var(--filter-select-border-radius);
+  padding: var(--filter-select-padding);
+
+  :hover {
+    border-color: var(--filter-select-border-color-hover);
+  }
+  --filter-option-margin: var(--filter-select-option-margin);
+`;

package/src/components/Catalog/CatalogSelector.tsx

@@ -52,7 +52,6 @@ export function CatalogSelector({
 
 export const CatalogSelectWrapper = styled.div`
   margin-top: var(--catalog-select-wrapper-margin-top);
-  margin-bottom: var(--catalog-select-wrapper-margin-bottom);
 `;
 
 export const CatalogSelectLabel = styled.label`

package/src/components/Catalog/variables.ts

@@ -80,7 +80,6 @@ export const catalog = css`
     * @tokens Catalog selector
     */
   --catalog-select-wrapper-margin-top: var(--spacing-xxs);
-  --catalog-select-wrapper-margin-bottom: var(--spacing-base);
   --catalog-select-label-margin-bottom: var(--spacing-xxs);
   --catalog-select-label-font-weight: var(--filter-title-font-weight);
   --catalog-select-label-font-size: var(--filter-title-font-size);

package/src/components/Filter/FilterInput.tsx

@@ -9,10 +9,11 @@ import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 export type FilterInputProps = {
   value: string;
   onChange: (newValue: string) => void;
+  dataTestId?: string;
 };
 
 export function FilterInput(props: FilterInputProps): JSX.Element {
-  const { value: initialValue, onChange } = props;
+  const { value: initialValue, onChange, dataTestId } = props;
 
   const [value, setValue] = useState(initialValue);
 
@@ -30,7 +31,7 @@ export function FilterInput(props: FilterInputProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <InputWrapper data-component-name="Filter/FilterInput">
+    <InputWrapper data-component-name="Filter/FilterInput" data-testid={dataTestId}>
       <InputIcon />
       <Input
         value={value}

package/src/components/Filter/FilterOptions.tsx

@@ -16,4 +16,6 @@ const FilterOptionsComponent = styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--filter-options-gap);
+  max-height: var(--filter-options-max-height);
+  overflow-y: scroll;
 `;

package/src/components/Filter/variables.ts

@@ -15,6 +15,7 @@ export const filter = css`
   --filter-options-padding-vertical: 0;
   --filter-options-padding-horizontal: 0;
   --filter-options-gap: var(--spacing-sm);
+  --filter-options-max-height: 350px;
 
   --filter-option-font-size: var(--font-size-base);
   --filter-option-gap: var(--spacing-xs);
@@ -25,12 +26,14 @@ export const filter = css`
 
   --filter-option-checkbox-padding-left: var(--spacing-xs);
 
-  --filter-content-header-padding-vertical: 5px;
-  --filter-content-header-padding-horizontal: 0;
+  --filter-content-header-padding-vertical: var(--spacing-xs) var(--spacing-sm);
+  --filter-content-header-padding-horizontal: var(--spacing-base);
 
-  --filter-content-title-font-size: var(--font-size-base);
-  --filter-content-title-line-height: var(--line-height-base);
+  --filter-content-title-font-size: var(--font-size-lg);
+  --filter-content-title-line-height: var(--line-height-lg);
   --filter-content-title-font-weight: var(--font-weight-semibold);
+
+  --filter-content-search-padding: 0 var(--spacing-xs) var(--spacing-sm);
   
   --filter-content-padding-vertical: var(--spacing-sm);
   --filter-content-padding-horizontal: var(--spacing-base);

package/src/components/Search/SearchAiDialog.tsx

@@ -43,12 +43,12 @@ export function SearchAiDialog({
   setConversation,
 }: SearchAiDialogProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
-  const { search } = useThemeConfig();
+  const { aiAssistant } = useThemeConfig();
   const { translate } = useTranslate();
 
   const conversationEndRef = React.useRef<HTMLDivElement>(null);
 
-  const suggestions = search?.ai?.suggestions;
+  const suggestions = aiAssistant?.suggestions;
 
   const placeholder = isGeneratingResponse
     ? translate('search.ai.generatingResponse', 'Generating response...')

package/src/components/Search/SearchAiResponse.tsx

@@ -34,7 +34,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
   const { useMarkdownText } = useThemeHooks();
   const { question, response, isGeneratingResponse, resources, error, onSuggestionClick } = props;
 
-  const { search } = useThemeConfig();
+  const { aiAssistant } = useThemeConfig();
   const { useTranslate } = useThemeHooks();
 
   const { translate } = useTranslate();
@@ -42,7 +42,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
 
   let responseContainer = null;
 
-  const suggestions = search?.ai?.suggestions;
+  const suggestions = aiAssistant?.suggestions;
 
   const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
   if (hasPendingOrReceivedResponse) {

package/src/components/Search/SearchDialog.tsx

@@ -34,16 +34,21 @@ import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/Ai
 export type SearchDialogProps = {
   onClose: () => void;
   className?: string;
+  initialMode?: 'search' | 'ai-dialog';
 };
 
-export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
+export function SearchDialog({
+  onClose,
+  className,
+  initialMode = 'search',
+}: SearchDialogProps): JSX.Element {
   const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
     useThemeHooks();
   const telemetry = useTelemetry();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
-  const [mode, setMode] = useState<'search' | 'ai-dialog'>('search');
+  const [mode, setMode] = useState<'search' | 'ai-dialog'>(initialMode);
   const autoSearchDisabled = mode !== 'search';
   const {
     query,

package/src/components/Tag/variables.dark.ts

@@ -55,10 +55,10 @@ export const tagDarkMode = css`
   }
 
   .tag-green {
-    --tag-color: var(--color-green-6); // @presenter Color
+    --tag-color: var(--color-green-7); // @presenter Color
     --tag-bg-color: var(--color-green-1); // @presenter Color
     --tag-border-color: var(--color-green-3); // @presenter Color
-    --tag-border-color-hover: var(--color-green-4); // @presenter Color
+    --tag-border-color-hover: var(--color-green-5); // @presenter Color
     --tag-bg-color-hover: var(--color-green-2); // @presenter Color
   }
 

package/src/core/styles/dark.ts

@@ -4,6 +4,7 @@ import { scorecardDarkMode } from '@redocly/theme/components/Scorecard/variables
 import { mermaidDarkMode } from '@redocly/theme/markdoc/components/Mermaid/variables.dark'
 import { menuDarkMode } from '@redocly/theme/components/Menu/variables.dark';
 import { buttonDarkMode } from '@redocly/theme/components/Button/variables.dark';
+import { aiAssistantButtonDarkMode } from '@redocly/theme/components/Buttons/variables.dark';
 import { segmentedButtonsDarkMode } from '@redocly/theme/components/Segmented/variables.dark';
 import { checkboxDarkMode } from '@redocly/theme/icons/CheckboxIcon/variables.dark';
 import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
@@ -137,14 +138,15 @@ export const darkMode = css`
 
   --color-green-1: #1a4d40;
   --color-green-2: #195848;
-  --color-green-3: #0e8450;
-  --color-green-4: #149e53;
-  --color-green-5: #1cb854;
-  --color-green-6: #4dd470;
-  --color-green-7: #72e985;
-  --color-green-8: #a3f7a9;
-  --color-green-9: #d2fbd0;
-  --color-green-10: #edfbec;
+  --color-green-3: #136a4d;
+  --color-green-4: #0e8450;
+  --color-green-5: #149e53;
+  --color-green-6: #1cb854;
+  --color-green-7: #4dd470;
+  --color-green-8: #72e985;
+  --color-green-9: #a3f7a9;
+  --color-green-10: #d2fbd0;
+  --color-green-11: #edfbec;
 
   --color-grass-1: #1f4d2d;
   --color-grass-2: #164f29;
@@ -309,6 +311,7 @@ export const darkMode = css`
 
   ${segmentedButtonsDarkMode}
   ${buttonDarkMode}
+  ${aiAssistantButtonDarkMode}
   ${checkboxDarkMode}
   ${tagDarkMode}
   ${statusCodeDarkMode}

package/src/core/styles/global.ts

@@ -11,6 +11,7 @@ import { catalog } from '@redocly/theme/components/Catalog/variables';
 import { filter } from '@redocly/theme/components/Filter/variables';
 import { catalogClassic } from '@redocly/theme/components/CatalogClassic/variables';
 import { apiReferencePanels, responsePanelColors } from '@redocly/theme/components/Panel/variables';
+import { accordion } from '@redocly/theme/components/Accordion/variables';
 import { select } from '@redocly/theme/components/Select/variables';
 import { dropdown } from '@redocly/theme/components/Dropdown/variables';
 import { tooltip } from '@redocly/theme/components/Tooltip/variables';
@@ -18,6 +19,7 @@ import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
 import { admonition } from '@redocly/theme/components/Admonition/variables';
 import { footer } from '@redocly/theme/components/Footer/variables';
 import { button } from '@redocly/theme/components/Button/variables';
+import { aiAssistantButton } from '@redocly/theme/components/Buttons/variables';
 import { navbar } from '@redocly/theme/components/Navbar/variables';
 import { search } from '@redocly/theme/components/Search/variables';
 import { menu, mobileMenu } from '@redocly/theme/components/Menu/variables';
@@ -141,8 +143,9 @@ const themeColors = css`
   --color-green-6: #1cb854;
   --color-green-7: #149e53;
   --color-green-8: #0e8450;
-  --color-green-9: #195848;
-  --color-green-10: #1a4d40;
+  --color-green-9: #136a4d;
+  --color-green-10: #195848;
+  --color-green-11: #1a4d40;
 
   --color-grass-1: #f0faeb;
   --color-grass-2: #e3fad6;
@@ -1227,6 +1230,7 @@ const replay = css`
 
 export const styles = css`
   :root {
+    ${accordion}
     ${admonition}
     ${apiReferenceDocs}
     ${apiReferencePanels}
@@ -1234,6 +1238,7 @@ export const styles = css`
     ${borders}
     ${breadcrumbs}
     ${button}
+    ${aiAssistantButton}
     ${cards}
     ${catalog}
     ${catalogClassic}

package/src/core/types/l10n.ts

@@ -103,6 +103,7 @@ export type TranslationKey =
   | 'search.ai.error.header'
   | 'search.ai.error.header.forbidden'
   | 'search.ai.error.header.unauthorized'
+  | 'aiAssistant.trigger'
   | 'toc.header'
   | 'footer.copyrightText'
   | 'page.homeButton'