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

package/src/components/Accordion/AccordionHeader.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { BaseSyntheticEvent, JSX, ReactNode } from 'react';
+
+export type AccordionHeaderProps = {
+  isExpandable?: boolean;
+  expanded?: boolean;
+  disabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+  onClick?: (e: BaseSyntheticEvent) => void;
+};
+
+type AccordionHeaderWrapperProps = {
+  $isExpandable?: boolean;
+  $expanded?: boolean;
+  $disabled?: boolean;
+};
+
+export function AccordionHeader({
+  isExpandable,
+  expanded,
+  disabled,
+  children,
+  className,
+  onClick,
+}: AccordionHeaderProps): JSX.Element {
+  return (
+    <AccordionHeaderWrapper
+      className={className}
+      $isExpandable={isExpandable}
+      $expanded={expanded}
+      $disabled={disabled}
+      onClick={onClick}
+      data-component-name="Accordion/AccordionHeader"
+    >
+      {children}
+    </AccordionHeaderWrapper>
+  );
+}
+
+const AccordionHeaderWrapper = styled.div<AccordionHeaderWrapperProps>`
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+  color: var(--accordion-header-text-color);
+
+  cursor: ${({ $isExpandable = true }) => ($isExpandable ? 'pointer' : 'default')};
+
+  line-height: var(--accordion-header-line-height);
+  font-size: var(--accordion-header-font-size);
+  font-family: var(--accordion-header-font-family);
+  font-weight: var(--accordion-header-font-weight);
+  padding: var(--accordion-header-padding);
+  border: var(--accordion-header-border);
+  background-color: var(--accordion-header-bg-color);
+  border-radius: var(--accordion-border-radius);
+
+  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
+
+  &:hover {
+    color: ${({ $isExpandable = true }) =>
+      $isExpandable ? 'var(--text-color-primary)' : 'var(--accordion-header-text-color)'};
+  }
+`;

package/src/components/Accordion/AccordionTitle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX, ReactNode } from 'react';
+
+export type AccordionTitleProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export function AccordionTitle({ children, className }: AccordionTitleProps): JSX.Element {
+  return (
+    <AccordionTitleWrapper className={className} data-component-name="Accordion/AccordionTitle">
+      {children}
+    </AccordionTitleWrapper>
+  );
+}
+
+const AccordionTitleWrapper = styled.span`
+  font-weight: var(--accordion-header-font-weight);
+  line-height: var(--line-height-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--accordion-header-text-color);
+  flex: 1;
+`;

package/src/components/Accordion/variables.ts

@@ -0,0 +1,56 @@
+import { css } from 'styled-components';
+
+export const accordion = css`
+  /**
+  * @tokens Accordion spacing
+  * @presenter Spacing
+  */
+
+  --accordion-gap: var(--spacing-base);
+
+  /**
+  * @tokens Accordion common
+  */
+
+  --accordion-border-radius: var(--border-radius); // @presenter BorderRadius
+  --accordion-border: none; // @presenter Border
+
+  --accordion-line-height: var(--line-height-base); // @presenter LineHeight
+  --accordion-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+  * @tokens Accordion header common
+  */
+
+  --accordion-header-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-header-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-header-font-weight: var(--font-weight-medium, 500); // @presenter FontWeight
+  --accordion-header-text-color: var(--text-color-primary);
+  --accordion-header-padding: var(--spacing-sm) var(--spacing-base);
+  --accordion-header-line-height: var(--line-height-base); // @presenter LineHeight
+  --accordion-header-bg-color: transparent; // @presenter Color
+  --accordion-header-border: none; // @presenter Border
+
+  /**
+  * @tokens Accordion body common
+  */
+
+  --accordion-body-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-body-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --accordion-body-text-color: var(--text-color-secondary);
+  --accordion-body-padding: 0 var(--spacing-xs) var(--spacing-sm);
+  --accordion-body-bg-color: transparent; // @presenter Color
+  --accordion-body-border: none; // @presenter Border
+
+  /**
+  * @tokens Accordion chevron icon
+  */
+
+  --accordion-chevron-icon-color: var(--text-color-secondary); // @presenter Color
+  --accordion-chevron-icon-size: 16px;
+
+  // @tokens End
+`;

package/src/components/Buttons/AIAssistantButton.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { useState } from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { SearchDialog } from '@redocly/theme/components/Search/SearchDialog';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
+import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
+import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+import { RedoclyIcon } from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
+
+type AIAssistantButtonIconType = 'chat' | 'sparkles' | 'redocly';
+type AIAssistantButtonType = 'button' | 'icon';
+
+interface AIAssistantButtonConfig {
+  hide?: boolean;
+  inputType?: AIAssistantButtonType;
+  inputIcon?: AIAssistantButtonIconType;
+}
+
+const defaultConfig: Required<AIAssistantButtonConfig> = {
+  hide: false,
+  inputType: 'button',
+  inputIcon: 'redocly',
+};
+
+const getIcon = (
+  iconType: AIAssistantButtonIconType,
+  inputType: AIAssistantButtonType = 'button',
+) => {
+  const iconSize =
+    inputType === 'icon'
+      ? 'var(--ai-assistant-button-icon-icon-size)'
+      : 'var(--ai-assistant-button-text-icon-size)';
+
+  const redoclyIcon = (
+    <RedoclyIcon size={iconSize} color="var(--ai-assistant-button-redocly-icon-color)" />
+  );
+  const sparklesIcon = (
+    <AiStarsGradientIcon size={iconSize} color="var(--search-ai-button-icon-color)" />
+  );
+  const chatIcon = <ChatIcon size={iconSize} />;
+
+  switch (iconType) {
+    case 'chat':
+      return chatIcon;
+    case 'sparkles':
+      return sparklesIcon;
+    case 'redocly':
+      return redoclyIcon;
+    default:
+      return redoclyIcon;
+  }
+};
+
+export function AIAssistantButton() {
+  const [isOpen, setIsOpen] = useState(false);
+  const themeConfig = useThemeConfig();
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const buttonConfig = {
+    ...defaultConfig,
+    ...(themeConfig.aiAssistant?.trigger ?? {}),
+  };
+
+  const { hide, inputIcon, inputType } = buttonConfig;
+
+  if (hide) {
+    return null;
+  }
+
+  const icon = getIcon(inputIcon, inputType);
+  const text = translate('aiAssistant.trigger', 'Ask AI');
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <StyledAIAssistantButton
+        variant="outlined"
+        size="medium"
+        $inputType={inputType}
+        onClick={handleOpen}
+        aria-label={`AI Assistant button - ${inputIcon}`}
+        data-component-name="Buttons/AIAssistantButton"
+      >
+        {icon}
+        {inputType === 'button' && text}
+      </StyledAIAssistantButton>
+
+      {isOpen && <SearchDialog onClose={handleClose} initialMode="ai-dialog" />}
+    </>
+  );
+}
+
+const StyledAIAssistantButton = styled(Button)<{ $inputType?: AIAssistantButtonType }>`
+  position: fixed;
+  bottom: var(--ai-assistant-button-bottom);
+  right: var(--ai-assistant-button-right);
+  ${({ $inputType }) =>
+    $inputType === 'icon'
+      ? `
+    border-radius: var(--ai-assistant-button-border-radius-icon);
+    width: var(--ai-assistant-button-icon-size);
+    height: var(--ai-assistant-button-icon-size);
+  `
+      : `
+    border-radius: var(--ai-assistant-button-border-radius-text);
+    padding: var(--ai-assistant-button-text-padding);
+    height: var(--ai-assistant-button-text-height);
+  `}
+  min-width: var(--ai-assistant-button-min-width);
+  font-size: var(--ai-assistant-button-font-size);
+  font-weight: var(--ai-assistant-button-font-weight);
+  box-shadow: var(--bg-raised-shadow);
+  z-index: var(--ai-assistant-button-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ai-assistant-button-gap);
+  background-color: var(--ai-assistant-button-bg-color) !important;
+
+  transition: var(--ai-assistant-button-transition);
+
+  &:hover {
+    box-shadow: var(--ai-assistant-button-shadow-hover);
+    transform: var(--ai-assistant-button-transform-hover);
+  }
+
+  &:active {
+    transform: var(--bg-raised-shadow);
+    box-shadow: var(--ai-assistant-button-shadow-active);
+  }
+`;

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

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+
+export const aiAssistantButtonDarkMode = css`
+
+ /* Background color */
+ --ai-assistant-button-bg-color: var(--color-warm-grey-4);
+`;

package/src/components/Buttons/variables.ts

@@ -0,0 +1,48 @@
+import { css } from 'styled-components';
+
+export const aiAssistantButton = css`
+  /**
+   * @tokens AI Assistant Button
+   * @presenter Color
+   */
+
+  /* Button sizing */
+  --ai-assistant-button-icon-size: 40px;
+  --ai-assistant-button-text-height: 40px;
+  --ai-assistant-button-text-padding: var(--spacing-sm) var(--spacing-md);
+  --ai-assistant-button-border-radius-icon: 50%;
+  --ai-assistant-button-border-radius-text: 1.75rem;
+  --ai-assistant-button-min-width: auto;
+
+  /* Icon sizing */
+  --ai-assistant-button-icon-icon-size: 18px;
+  --ai-assistant-button-text-icon-size: 20px;
+
+  /* Positioning */
+  --ai-assistant-button-bottom: var(--spacing-xl);
+  --ai-assistant-button-right: var(--spacing-xl);
+  --ai-assistant-button-z-index: 1000;
+
+  /* Typography */
+  --ai-assistant-button-font-size: var(--font-size-base);
+  --ai-assistant-button-font-weight: var(--font-weight-medium);
+  --ai-assistant-button-gap: var(--spacing-xs);
+
+  /* Background color */
+  --ai-assistant-button-bg-color: var(--color-static-white);
+
+  /* Icon colors */
+  --ai-assistant-button-redocly-icon-color: #297AFE;
+
+  /* Transform */
+  --ai-assistant-button-transform-hover: none;
+  --ai-assistant-button-transform-active: translateY(0);
+
+  /* Shadow */
+  --ai-assistant-button-shadow-hover:
+    2px 1px 12px 4px rgba(143, 98, 254, 0.2),
+    -3px -2px 24px 0px rgba(41, 122, 254, 0.2);
+
+  /* Transition */
+  --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
+`;

package/src/components/Catalog/Catalog.tsx

@@ -10,7 +10,7 @@ import {
 import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { H3 } from '@redocly/theme/components/Typography/H3';
-import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
+import { CatalogFilterContent } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterContent';
 import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
 import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
@@ -89,7 +89,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
             )
           }
           menu={
-            <FilterContent
+            <CatalogFilterContent
               setFilterTerm={setSearchQuery}
               filters={filters}
               filterTerm={searchQuery}
@@ -128,6 +128,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
               <FilterInput
                 value={searchQuery}
                 onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+                dataTestId="catalog-search-input"
               />
             </CatalogSearchInputWrapper>
 

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { FilterProps, FilterTypes } from '@redocly/theme/core/types';
+
+import { CatalogFilterSelect } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterSelect';
+import { CatalogFilterCheckboxes } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterCheckboxes';
+import { CatalogFilterDateRange } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterDateRange';
+
+const filterComponents = {
+  select: CatalogFilterSelect,
+  'date-range': CatalogFilterDateRange,
+  checkboxes: CatalogFilterCheckboxes,
+} as const;
+
+export type CatalogFilterProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilter({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+  className,
+}: CatalogFilterProps): JSX.Element | null {
+  if (!filter.parentUsed) return null;
+
+  const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
+
+  return (
+    <CatalogFilterGroup
+      className={className}
+      data-component-name="Catalog/CatalogFilter"
+      key={filter.property + filter.title}
+    >
+      <FilterComponent
+        filter={filter}
+        filterValuesCasing={filterValuesCasing}
+        showCounter={showCounter}
+      />
+    </CatalogFilterGroup>
+  );
+}
+
+const CatalogFilterGroup = styled.div`
+  padding: var(--filter-group-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+
+  &:first-child {
+    border-top: 1px solid var(--catalog-table-border-color);
+  }
+`;

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

@@ -0,0 +1,169 @@
+import React, { useState, useMemo } from 'react';
+import styled from 'styled-components';
+import { findAll } from 'highlight-words-core';
+
+import type { JSX } from 'react';
+import type { FilterProps } from '@redocly/theme/core/types';
+
+import { FilterOptions } from '@redocly/theme/components/Filter/FilterOptions';
+import { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
+import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { changeTextCasing } from '@redocly/theme/core/utils';
+import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
+
+export type CatalogFilterCheckboxesProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilterCheckboxes({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+  className,
+}: CatalogFilterCheckboxesProps): JSX.Element {
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const filteredOptions = useMemo(() => {
+    const options = filter.filteredOptions || filter.options;
+    if (!searchTerm.trim()) return options;
+
+    const lowerSearchTerm = searchTerm.toLowerCase();
+    return options.filter(({ value }) => {
+      const translatedValue = changeTextCasing(translate(value), filterValuesCasing);
+      if (!translatedValue) return false;
+      return translatedValue.toLowerCase().includes(lowerSearchTerm);
+    });
+  }, [searchTerm, filter.filteredOptions, filter.options, translate, filterValuesCasing]);
+
+  const selectedCount = useMemo(() => {
+    if (filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    }
+    return 0;
+  }, [filter.selectedOptions]);
+
+  const highlightText = (text: string): JSX.Element => {
+    if (!searchTerm.trim()) {
+      return <>{text}</>;
+    }
+
+    const chunks = findAll({
+      searchWords: [searchTerm],
+      textToHighlight: text,
+    });
+
+    return (
+      <>
+        {chunks.map((chunk, idx) => {
+          const { end, highlight, start } = chunk;
+          const chunkText = text.substr(start, end - start);
+          if (highlight) {
+            return <HighlightedText key={idx}>{chunkText}</HighlightedText>;
+          } else {
+            return <span key={idx}>{chunkText}</span>;
+          }
+        })}
+      </>
+    );
+  };
+
+  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/CatalogFilterCheckboxes"
+    >
+      <Accordion expanded={isExpanded} header={headerContent} onToggle={setIsExpanded}>
+        <FilterSearchWrapper>
+          <FilterInput value={searchTerm} onChange={setSearchTerm} />
+        </FilterSearchWrapper>
+        <FilterOptions>
+          {filteredOptions.map(({ value, count }) => {
+            const id = 'filter--' + filter.property + '--' + value;
+            return (
+              <FilterCheckboxOption
+                key={id}
+                role="link"
+                onClick={() => {
+                  filter.toggleOption(value);
+                  telemetry.sendFilterCheckboxToggledMessage({ id });
+                }}
+              >
+                <CheckboxIcon
+                  checked={
+                    filter.selectedOptions instanceof Set
+                      ? filter.selectedOptions.has(value) ||
+                        filter.selectedOptions.has(value?.toLowerCase())
+                      : false
+                  }
+                />
+                <FilterOptionLabel data-translation-key={value}>
+                  {highlightText(changeTextCasing(translate(value), filterValuesCasing) || '')}
+                </FilterOptionLabel>
+                {showCounter && <CounterTag borderless>{count}</CounterTag>}
+              </FilterCheckboxOption>
+            );
+          })}
+        </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 HighlightedText = styled.span`
+  background-color: var(--catalog-highlight-bg-color);
+  color: var(--catalog-highlight-text-color);
+`;
+
+const FilterCheckboxOption = styled(FilterOption)`
+  padding-left: var(--filter-option-checkbox-padding-left);
+`;
+
+const FilterSearchWrapper = styled.div`
+  padding: var(--filter-content-search-padding);
+`;