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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.0",
+  "version": "0.59.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,10 +63,10 @@
     "styled-system": "5.1.5",
     "ts-node": "10.9.2",
     "ts-node-dev": "2.0.0",
-    "tsc-alias": "1.8.10",
+    "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
-    "typescript": "5.6.2",
+    "typescript": "5.9.3",
     "vitest": "3.2.4",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0"
@@ -84,10 +84,10 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.1",
+    "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.35.1",
+    "@redocly/config": "0.36.0",
     "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
   },
   "scripts": {

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import type { BaseSyntheticEvent, PropsWithChildren, ReactNode, JSX } from 'react';
+import type { AccordionHeaderProps } from '@redocly/theme/components/Accordion/AccordionHeader';
+
+import { AccordionBody } from '@redocly/theme/components/Accordion/AccordionBody';
+import { AccordionHeader } from '@redocly/theme/components/Accordion/AccordionHeader';
+import { AccordionTitle } from '@redocly/theme/components/Accordion/AccordionTitle';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+
+export type AccordionProps = {
+  expanded?: boolean;
+  isExpandable?: boolean;
+  className?: string;
+  renderChildrenHidden?: boolean;
+  header?: ReactNode | ((props: AccordionHeaderProps) => ReactNode);
+  onToggle?: (expanded: boolean) => void;
+  dataTestId?: string;
+};
+
+export function Accordion({
+  expanded = true,
+  isExpandable = true,
+  renderChildrenHidden = false,
+  header,
+  className,
+  children,
+  onToggle,
+  dataTestId,
+}: PropsWithChildren<AccordionProps>): JSX.Element {
+  const [isExpanded, setExpanded] = useState(expanded);
+  const [animate, setAnimate] = useState(false);
+
+  const toggle = ({ target }: BaseSyntheticEvent): void => {
+    if (target instanceof HTMLAnchorElement || !isExpandable) return;
+    setAnimate(true);
+    setExpanded(!isExpanded);
+    onToggle?.(!isExpanded);
+  };
+
+  useEffect(() => setExpanded(expanded), [expanded]);
+
+  return (
+    <AccordionWrapper
+      className={className}
+      data-testid={dataTestId}
+      data-component-name="Accordion/Accordion"
+    >
+      {header &&
+        (typeof header === 'function' ? (
+          header({ expanded: isExpanded })
+        ) : (
+          <AccordionHeader
+            data-testid="accordion-header"
+            onClick={toggle}
+            expanded={isExpanded}
+            isExpandable={isExpandable}
+          >
+            <HeaderContent>
+              <AccordionTitle data-testid="title">{header}</AccordionTitle>
+              {isExpandable &&
+                (isExpanded ? (
+                  <ChevronDownIcon color="--accordion-chevron-icon-color" />
+                ) : (
+                  <ChevronRightIcon color="--accordion-chevron-icon-color" />
+                ))}
+            </HeaderContent>
+          </AccordionHeader>
+        ))}
+
+      {(isExpanded || renderChildrenHidden) && (
+        <AccordionBody data-testid="accordion-body" hidden={!isExpanded} animate={animate}>
+          {children}
+        </AccordionBody>
+      )}
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.div`
+  background-color: transparent;
+  font-family: var(--accordion-font-family);
+  font-size: var(--accordion-font-size);
+  font-weight: var(--accordion-font-weight);
+  border-radius: var(--accordion-border-radius);
+  border: var(--accordion-border);
+
+  &:not(:last-child) {
+    margin-bottom: var(--accordion-gap);
+  }
+`;
+
+const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--spacing-xs);
+`;

package/src/components/Accordion/AccordionBody.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled, { keyframes, css } from 'styled-components';
+
+import type { JSX, ReactNode } from 'react';
+
+type AccordionBodyWrapperProps = {
+  $animate?: boolean;
+  $hidden?: boolean;
+};
+
+export type AccordionBodyProps = {
+  animate?: boolean;
+  hidden?: boolean;
+  children?: ReactNode;
+  className?: string;
+};
+
+export function AccordionBody({
+  animate,
+  hidden,
+  children,
+  className,
+}: AccordionBodyProps): JSX.Element {
+  return (
+    <AccordionBodyWrapper
+      className={className}
+      $animate={animate}
+      $hidden={hidden}
+      data-component-name="Accordion/AccordionBody"
+    >
+      {children}
+    </AccordionBodyWrapper>
+  );
+}
+
+const showAccordion = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const showAccordionAnimation = css`
+  animation: ${showAccordion} 0.15s ease-out;
+`;
+
+const AccordionBodyWrapper = styled.div<AccordionBodyWrapperProps>`
+  ${({ $animate }) => $animate && showAccordionAnimation};
+  ${({ $hidden }) => $hidden && 'visibility: hidden'};
+
+  background-color: var(--accordion-body-bg-color);
+
+  font-family: var(--accordion-body-font-family);
+  font-size: var(--accordion-body-font-size);
+  font-weight: var(--accordion-body-font-weight);
+  border: var(--accordion-body-border);
+  padding: var(--accordion-body-padding);
+  color: var(--accordion-body-text-color);
+
+  border-radius: var(--accordion-border-radius);
+`;

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';
@@ -20,8 +20,11 @@ import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/Catalog
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
 
+type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
+
 export type CatalogProps = {
   catalogConfig: CatalogEntityConfig;
+  filters?: CatalogFiltersWithCounts;
   entitiesTypes: string[];
   initialEntitiesList?: BffCatalogEntityList;
   catalogSwitcherItems: CatalogSwitcherItem[];
@@ -29,9 +32,11 @@ export type CatalogProps = {
 };
 
 const customCatalogOptionsCasing = (str: string): string => {
-  if (!str) return str;
+  const trimmedStr = str.trim();
+  if (!trimmedStr) return trimmedStr;
+
+  const words = trimmedStr.split(/[\s-_]+/);
 
-  const words = str.split(/[\s-_]+/);
   return words
     .map((word, index) => {
       if (index === 0 && word.toLowerCase() === 'api') {
@@ -45,6 +50,7 @@ const customCatalogOptionsCasing = (str: string): string => {
 export function Catalog(props: CatalogProps): JSX.Element {
   const {
     catalogConfig,
+    filters: serverFilters,
     entitiesTypes,
     initialEntitiesList,
     catalogSwitcherItems,
@@ -72,7 +78,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0, initialViewMode);
+  } = useCatalog(
+    catalogConfig,
+    serverFilters,
+    initialEntitiesList?.page.total || 0,
+    initialViewMode,
+  );
 
   return (
     <>
@@ -89,12 +100,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
             )
           }
           menu={
-            <FilterContent
+            <CatalogFilterContent
               setFilterTerm={setSearchQuery}
               filters={filters}
               filterTerm={searchQuery}
               hideSearch={true}
-              showCounter={false}
+              showCounter={true}
               filterValuesCasing={customCatalogOptionsCasing}
             />
           }
@@ -128,6 +139,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
               <FilterInput
                 value={searchQuery}
                 onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+                dataTestId="catalog-search-input"
               />
             </CatalogSearchInputWrapper>
 

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs size={TabsSize.MEDIUM}>
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"