@redocly/theme 0.55.0-next.7 → 0.55.0-next.8

package/src/components/Catalog/CatalogHighlight.tsx

@@ -0,0 +1,56 @@
+import React, { JSX } from 'react';
+import { findAll } from 'highlight-words-core';
+import styled from 'styled-components';
+
+export const HighlightContext = React.createContext<string[]>([]);
+
+export type CatalogHighlightProps = React.PropsWithChildren;
+
+export function CatalogHighlight(props: CatalogHighlightProps): JSX.Element | null {
+  const { children } = props;
+  const searchWords = React.useContext(HighlightContext);
+
+  if (!searchWords.length) {
+    return children ? <>{children}</> : null;
+  }
+
+  function highlight(str: string, childIdx: number = 0) {
+    const chunks = findAll({
+      searchWords,
+      textToHighlight: str,
+    });
+
+    return (
+      <span data-component-name="Catalog/CatalogHighlight" key={childIdx}>
+        {chunks.map((chunk, idx) => {
+          const { end, highlight, start } = chunk;
+          const text = str.substr(start, end - start);
+          if (highlight) {
+            return <HighlightedText key={idx}>{text}</HighlightedText>;
+          } else {
+            return text;
+          }
+        })}
+      </span>
+    );
+  }
+
+  if (typeof children === 'string') {
+    return highlight(children);
+  } else if (Array.isArray(children)) {
+    return (
+      <>
+        {children.map((child, idx) =>
+          typeof children === 'string' ? highlight(child, idx) : child || null,
+        )}
+      </>
+    );
+  } else {
+    return <>{children}</>;
+  }
+}
+
+const HighlightedText = styled.span`
+  background-color: var(--catalog-highlight-bg-color);
+  color: var(--catalog-highlight-text-color);
+`;

package/src/components/Catalog/CatalogPageDescription.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { breakpoints } from '@redocly/theme/core/utils';
+import { H3 } from '@redocly/theme/components/Typography/H3';
+
+import { CounterTag } from '../Tags/CounterTag';
+
+export type CatalogPageDescriptionProps = {
+  title: string;
+  titleTranslationKey?: string;
+  description: string;
+  descriptionTranslationKey?: string;
+  tag: number | string;
+};
+
+export function CatalogPageDescription({
+  title,
+  titleTranslationKey,
+  description,
+  descriptionTranslationKey,
+  tag,
+}: CatalogPageDescriptionProps) {
+  return (
+    <CatalogPageDescriptionWrapper>
+      <CatalogTitleWrapper>
+        <CatalogTitle data-translation-key={titleTranslationKey}>{title}</CatalogTitle>
+        <CounterTag borderless>{tag}</CounterTag>
+      </CatalogTitleWrapper>
+      <CatalogDescription data-translation-key={descriptionTranslationKey}>
+        {description}
+      </CatalogDescription>
+    </CatalogPageDescriptionWrapper>
+  );
+}
+
+const CatalogPageDescriptionWrapper = styled.div`
+  margin: var(--catalog-heading-margin);
+  display: var(--catalog-page-description-display-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: var(--catalog-page-description-display-desktop);
+  }
+`;
+
+const CatalogTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+`;
+
+const CatalogTitle = styled(H3)`
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+  margin: var(--catalog-title-margin);
+  margin-right: var(--catalog-title-spacing-right);
+`;
+
+const CatalogDescription = styled.p`
+  color: var(--catalog-description-text-color);
+  font-weight: var(--catalog-description-font-weight);
+  font-size: var(--catalog-description-font-size);
+  margin: var(--catalog-description-margin);
+  line-height: var(--catalog-description-line-height);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;

package/src/components/Catalog/CatalogSelector.tsx

@@ -0,0 +1,67 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+
+import { Select } from '@redocly/theme/components/Select/Select';
+import { CatalogSwitcherItem, getPathPrefix, SortOption, useThemeHooks } from '@redocly/theme/core';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+
+export type CatalogSelectorProps = {
+  catalogSwitcherItems: CatalogSwitcherItem[];
+  setSearchQuery: (query: string) => void;
+  setSortOption: (option: SortOption | null) => void;
+};
+
+export function CatalogSelector({
+  catalogSwitcherItems,
+  setSearchQuery,
+  setSortOption,
+}: CatalogSelectorProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+
+  const { translate } = useTranslate();
+  const navigate = useNavigate();
+  const pathPrefix = getPathPrefix();
+
+  const options = catalogSwitcherItems.map((item) => ({
+    value: item.slug,
+    element: translate(item.labelTranslationKey),
+    label: translate(item.labelTranslationKey),
+  }));
+
+  const selectedCatalogItem = catalogSwitcherItems.find((item) => item.selected);
+
+  return (
+    <CatalogSelectWrapper data-component-name="Catalog/CatalogSelector">
+      <CatalogSelectLabel>Catalogs</CatalogSelectLabel>
+      <CatalogSelect
+        value={selectedCatalogItem?.slug}
+        options={options}
+        onChange={(value) => {
+          navigate(`${pathPrefix}/catalogs/${value}`);
+          setSearchQuery('');
+          setSortOption(null);
+        }}
+        icon={<ChevronDownIcon color="var(--catalog-select-icon-color)" />}
+      />
+    </CatalogSelectWrapper>
+  );
+}
+
+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`
+  display: block;
+  margin-bottom: var(--catalog-select-label-margin-bottom);
+  font-weight: var(--catalog-select-label-font-weight);
+  font-size: var(--catalog-select-label-font-size);
+  line-height: var(--catalog-select-label-line-height);
+`;
+
+export const CatalogSelect = styled(Select)`
+  border-radius: var(--catalog-select-border-radius);
+  --select-input-padding: var(--catalog-select-input-padding);
+`;

package/src/components/Catalog/CatalogSortButton.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { SortOption } from '@redocly/theme/core/types';
+import { AscSortIcon } from '@redocly/theme/icons/AscSortIcon/AscSortIcon';
+import { DescSortIcon } from '@redocly/theme/icons/DescSortIcon/DescSortIcon';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+
+export type CatalogSortButtonProps = {
+  onSortChange: (sortOption: SortOption | null) => void;
+  currentSort?: SortOption | null;
+};
+
+export function CatalogSortButton({
+  onSortChange,
+  currentSort,
+}: {
+  onSortChange: (sortOption: SortOption | null) => void;
+  currentSort?: SortOption | null;
+}) {
+  const toggleSort = useCallback(
+    (field: string): void => {
+      const newSort = currentSort === `-${field}` ? field : `-${field}`;
+      onSortChange(newSort as SortOption);
+    },
+    [currentSort, onSortChange],
+  );
+
+  return (
+    <CatalogSortButtonWrapper
+      data-component-name="Catalog/CatalogSortButton"
+      trigger={
+        <SortTrigger>
+          <SortIconWrapper>
+            {currentSort === '-title' ? <DescSortIcon /> : <AscSortIcon />}
+          </SortIconWrapper>
+          <SortText>Sort</SortText>
+        </SortTrigger>
+      }
+      alignment="end"
+    >
+      <DropdownMenu>
+        <DropdownMenuItem onAction={() => toggleSort('title')}>
+          {currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A'}
+        </DropdownMenuItem>
+      </DropdownMenu>
+    </CatalogSortButtonWrapper>
+  );
+}
+
+const CatalogSortButtonWrapper = styled(Dropdown)``;
+
+const SortTrigger = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-sort-trigger-gap);
+  padding: var(--catalog-sort-trigger-padding);
+  border-radius: var(--catalog-sort-trigger-border-radius);
+  cursor: pointer;
+  &:hover {
+    background-color: var(--catalog-sort-trigger-hover-bg-color);
+  }
+`;
+
+const SortIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--catalog-sort-icon-color);
+`;
+
+const SortText = styled.span`
+  font-size: var(--catalog-sort-text-font-size);
+  color: var(--catalog-sort-text-color);
+  font-weight: var(--catalog-sort-text-font-weight);
+`;

package/src/components/Catalog/CatalogTableView/CatalogDomainsCell.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+
+export type CatalogDomainsCellProps = {
+  domains: string[];
+};
+
+export function CatalogDomainsCell({ domains }: CatalogDomainsCellProps) {
+  return (
+    <div data-component-name="Catalog/CatalogTableView/CatalogDomainsCell">
+      <CatalogTagsWithTooltip
+        data-testid="catalog-domains-cell"
+        items={domains}
+        showPlaceholder={false}
+        tagProps={{
+          style: {
+            fontSize: 'var(--font-size-base)',
+            backgroundColor: 'transparent',
+            borderRadius: 'var(--border-radius-xl)',
+          },
+        }}
+      />
+    </div>
+  );
+}

package/src/components/Catalog/CatalogTableView/CatalogEntityCell.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+
+export type CatalogEntityCellProps = {
+  entity: BffCatalogRelatedEntity;
+};
+
+export function CatalogEntityCell({ entity }: CatalogEntityCellProps) {
+  return (
+    <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
+      <IconContainer>
+        <CatalogEntityIcon entityType={entity.type} />
+      </IconContainer>
+      <EntityTitleContent>
+        <EntityTitle>
+          <CatalogHighlight>{entity.title}</CatalogHighlight>
+        </EntityTitle>
+        {entity.summary && (
+          <EntitySummary>
+            <CatalogHighlight>{entity.summary}</CatalogHighlight>
+          </EntitySummary>
+        )}
+      </EntityTitleContent>
+    </EntityTitleCellWrapper>
+  );
+}
+
+const EntityTitleCellWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-table-title-cell-gap);
+  max-width: 100%;
+`;
+
+const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-table-icon-width);
+  height: var(--catalog-table-icon-height);
+  border-radius: var(--catalog-table-icon-border-radius);
+  background-color: var(--catalog-table-icon-bg-color);
+  flex-shrink: 0;
+  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
+`;
+
+const EntityTitleContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: calc(
+    100% - var(--catalog-table-entity-title-content-offset)
+  ); /* Account for icon width (30px) + gap (12px) */
+  overflow: hidden;
+`;
+
+const EntityTitle = styled.div`
+  font-size: var(--catalog-table-entity-title-font-size);
+  line-height: var(--catalog-table-entity-title-line-height);
+  font-weight: var(--catalog-table-entity-title-font-weight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const EntitySummary = styled.div`
+  font-size: var(--catalog-table-entity-summary-font-size);
+  line-height: var(--catalog-table-entity-summary-line-height);
+  color: var(--catalog-table-description-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;

package/src/components/Catalog/CatalogTableView/CatalogOwnersCell.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+
+export type CatalogOwnersCellProps = {
+  owners: string[];
+};
+
+export function CatalogOwnersCell({ owners }: CatalogOwnersCellProps) {
+  return (
+    <div data-component-name="Catalog/CatalogTableView/CatalogOwnersCell">
+      <CatalogTagsWithTooltip
+        data-testid="catalog-owners-cell"
+        items={owners}
+        showPlaceholder={false}
+        tagProps={{
+          style: {
+            fontSize: 'var(--font-size-base)',
+            backgroundColor: 'transparent',
+            borderRadius: 'var(--border-radius-xl)',
+          },
+        }}
+      />
+    </div>
+  );
+}

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { SortOption } from '@redocly/theme/core/types';
+import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
+import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
+import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks/catalog/useCatalogTableHeaderCellActions';
+
+import { BaseEntity, CatalogColumn } from './CatalogTableView';
+
+export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
+  column: CatalogColumn<T>;
+  setSortOption: (sortOption: SortOption | null) => void;
+  currentSortOption?: SortOption | null;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+export const CatalogTableHeaderCell = <T extends BaseEntity>({
+  column,
+  handleSortClick,
+  isColumnSorted,
+  setSortOption,
+}: CatalogTableHeaderCellProps<T>) => {
+  const { handleCellClick, sortKey, isUpActive, isDownActive } = useCatalogTableHeaderCellActions({
+    column,
+    handleSortClick,
+    isColumnSorted,
+    setSortOption,
+  });
+
+  return (
+    <TableHeaderCellWrapper
+      key={column.key}
+      data-component-name="Catalog/CatalogTableView/CatalogTableHeaderCell"
+      onClick={handleCellClick}
+      $sortable={Boolean(column.sortable && sortKey)}
+    >
+      <HeaderContent>
+        <HeaderTitle>{column.title}</HeaderTitle>
+        {column.sortable && sortKey && (
+          <SortIndicator>
+            <SortArrow $isActive={isUpActive}>
+              <CaretUpIcon
+                size="9px"
+                color={
+                  isUpActive
+                    ? 'var(--catalog-table-header-sort-icon-color-active)'
+                    : 'var(--catalog-table-header-sort-icon-color-inactive)'
+                }
+              />
+            </SortArrow>
+            <SortArrow $isActive={isDownActive}>
+              <CaretDownIcon
+                size="9px"
+                color={
+                  isDownActive
+                    ? 'var(--catalog-table-header-sort-icon-color-active)'
+                    : 'var(--catalog-table-header-sort-icon-color-inactive)'
+                }
+              />
+            </SortArrow>
+          </SortIndicator>
+        )}
+      </HeaderContent>
+    </TableHeaderCellWrapper>
+  );
+};
+
+const TableHeaderCellWrapper = styled.div<{ $sortable: boolean }>`
+  padding: var(--catalog-table-header-cell-padding);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+  ${(props) =>
+    props.$sortable &&
+    css`
+      cursor: pointer;
+      user-select: none;
+    `}
+`;
+
+const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const HeaderTitle = styled.span`
+  flex: 1;
+`;
+
+const SortIndicator = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  gap: 2px;
+  color: var(--catalog-table-header-sort-indicator-color);
+`;
+
+const SortArrow = styled.div<{ $isActive: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 9px;
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+
+  svg {
+    display: block;
+  }
+
+  ${(props) =>
+    props.$isActive &&
+    css`
+      background-color: var(--catalog-table-header-sort-arrow-bg-active);
+    `}
+`;