@redocly/theme 0.55.0-rc.1 → 0.55.0

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);
+    `}
+`;

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

@@ -0,0 +1,176 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { EntityType, SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
+import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
+import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
+import { CatalogTableHeaderCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableHeaderCell';
+import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
+import { CatalogTableViewRow } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableViewRow';
+
+export type BaseEntity = {
+  id: string;
+  key: string;
+  type: string;
+  title: string;
+  summary?: string | null;
+};
+
+export type CatalogTableViewProps<T extends BaseEntity> = {
+  entities: T[];
+  entitiesCatalogConfig?: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  columns?: 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 type CatalogColumn<T> = {
+  key: string;
+  title: string;
+  render: (entity: T) => ReactNode;
+  width?: string;
+  minWidth?: string;
+  sortable?: boolean;
+  sortKey?: string;
+};
+
+export const getEntityTagColor = (type: EntityType): string => {
+  switch (type) {
+    case 'service':
+      return 'blue';
+    case 'domain':
+      return 'grass';
+    case 'team':
+      return 'purple';
+    case 'user':
+      return 'yellow';
+    case 'api-description':
+      return 'sky';
+    default:
+      const exhaustiveCheck: never = type;
+      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+  }
+};
+
+const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
+  {
+    key: 'entity',
+    title: 'Entity',
+    render: (entity) => <CatalogEntityCell entity={entity} />,
+    width: '3fr',
+    minWidth: '250px',
+    sortable: true,
+    sortKey: 'title',
+  },
+  {
+    key: 'type',
+    title: 'Type',
+    render: (entity) => (
+      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
+        {entity.type}
+      </EntityTypeTag>
+    ),
+    width: '2fr',
+    minWidth: '120px',
+    sortable: true,
+    sortKey: 'type',
+  },
+  {
+    key: 'domains',
+    title: 'Domains',
+    render: (entity) => (
+      <CatalogDomainsCell domains={entity.domains?.map((domain) => domain.title) || []} />
+    ),
+    width: '2fr',
+    minWidth: '150px',
+  },
+  {
+    key: 'owners',
+    title: 'Owners',
+    render: (entity) => (
+      <CatalogOwnersCell owners={entity.owners?.map((owner) => owner.title) || []} />
+    ),
+    width: '2fr',
+    minWidth: '150px',
+  },
+  {
+    key: 'tags',
+    title: 'Tags',
+    render: (entity) => <CatalogTagsCell entity={entity} />,
+    width: '2fr',
+    minWidth: '120px',
+  },
+];
+
+export const CatalogTableView = <T extends BaseEntity>({
+  entities,
+  entitiesCatalogConfig,
+  catalogConfig,
+  columns = baseColumns as CatalogColumn<BaseEntity>[],
+  setSortOption,
+  currentSortOption,
+  handleSortClick,
+  isColumnSorted,
+}: CatalogTableViewProps<T>) => {
+  return (
+    <CatalogTableWrapper data-component-name="Catalog/CatalogTableView">
+      <CatalogTableHeader
+        columnsWidths={columns.map((column) => column.width || '1fr')}
+        columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
+      >
+        {columns.map((column) => (
+          <CatalogTableHeaderCell<T>
+            key={column.key}
+            column={column}
+            setSortOption={setSortOption}
+            currentSortOption={currentSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+          />
+        ))}
+      </CatalogTableHeader>
+      <div>
+        {entities.map((entity) => (
+          <CatalogTableViewRow
+            key={entity.id}
+            entity={entity}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            columns={columns}
+          />
+        ))}
+      </div>
+    </CatalogTableWrapper>
+  );
+};
+
+const EntityTypeTag = styled(Tag)`
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;
+
+const CatalogTableWrapper = styled.div`
+  width: 100%;
+  border-bottom: 1px solid var(--catalog-table-border-color);
+  margin-bottom: var(--spacing-xl);
+  margin-top: var(--spacing-xl);
+`;
+
+const CatalogTableHeader = styled.div<{ columnsWidths: string[]; columnsMinWidths: string[] }>`
+  display: grid;
+  grid-template-columns: ${({ columnsWidths, columnsMinWidths }) =>
+    columnsWidths
+      .map((width, index) =>
+        columnsMinWidths[index] !== 'auto' ? `minmax(${columnsMinWidths[index]}, ${width})` : width,
+      )
+      .join(' ')};
+  background: var(--catalog-table-header-bg-color);
+  font-weight: var(--catalog-table-header-font-weight);
+`;

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

@@ -0,0 +1,180 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { EntityType, BffCatalogEntity } from '@redocly/theme/core/types';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
+import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
+import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
+import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
+import { useCatalogTableViewRow } from '@redocly/theme/core/hooks/catalog/useCatalogTableViewRow';
+
+export type BaseEntity = {
+  id: string;
+  key: string;
+  type: string;
+  title: string;
+  summary?: string | null;
+};
+
+export type CatalogTableViewRowProps<T extends BaseEntity> = {
+  entity: T;
+  entitiesCatalogConfig?: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  columns?: CatalogColumn<T>[];
+};
+
+export type CatalogColumn<T> = {
+  key: string;
+  title: string;
+  render: (entity: T) => ReactNode;
+  width?: string;
+  minWidth?: string;
+  sortable?: boolean;
+  sortKey?: string;
+};
+
+export const getEntityTagColor = (type: EntityType): string => {
+  switch (type) {
+    case 'service':
+      return 'blue';
+    case 'domain':
+      return 'grass';
+    case 'team':
+      return 'purple';
+    case 'user':
+      return 'yellow';
+    case 'api-description':
+      return 'sky';
+    default:
+      const exhaustiveCheck: never = type;
+      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+  }
+};
+
+const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
+  {
+    key: 'entity',
+    title: 'Entity',
+    render: (entity) => <CatalogEntityCell entity={entity} />,
+    width: '3fr',
+    minWidth: '250px',
+    sortable: true,
+    sortKey: 'title',
+  },
+  {
+    key: 'type',
+    title: 'Type',
+    render: (entity) => (
+      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
+        {entity.type}
+      </EntityTypeTag>
+    ),
+    width: '2fr',
+    minWidth: '120px',
+    sortable: true,
+    sortKey: 'type',
+  },
+  {
+    key: 'domains',
+    title: 'Domains',
+    render: (entity) => (
+      <CatalogDomainsCell domains={entity.domains?.map((domain) => domain.title) || []} />
+    ),
+    width: '2fr',
+    minWidth: '150px',
+  },
+  {
+    key: 'owners',
+    title: 'Owners',
+    render: (entity) => (
+      <CatalogOwnersCell owners={entity.owners?.map((owner) => owner.title) || []} />
+    ),
+    width: '2fr',
+    minWidth: '150px',
+  },
+  {
+    key: 'tags',
+    title: 'Tags',
+    render: (entity) => <CatalogTagsCell entity={entity} />,
+    width: '2fr',
+    minWidth: '120px',
+  },
+];
+
+export const CatalogTableViewRow = <T extends BaseEntity>({
+  entity,
+  entitiesCatalogConfig,
+  catalogConfig,
+  columns = baseColumns as CatalogColumn<BaseEntity>[],
+}: CatalogTableViewRowProps<T>) => {
+  const { getEntityDetailsLink } = useCatalogTableViewRow({
+    entityKey: entity.key,
+    entityType: entity.type,
+    catalogConfig,
+    entitiesCatalogConfig,
+  });
+
+  const handleRowClick = (): void => {
+    window.location.assign(getEntityDetailsLink());
+  };
+
+  return (
+    <TableRow
+      key={entity.id}
+      columnsWidths={columns.map((column) => column.width || '1fr')}
+      columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
+      onClick={() => handleRowClick()}
+    >
+      {columns.map((column) => (
+        <TableCell
+          key={column.key}
+          className={column.key === 'entity' ? '' : 'tooltip-cell-container'}
+        >
+          {column.render(entity)}
+        </TableCell>
+      ))}
+    </TableRow>
+  );
+};
+
+const EntityTypeTag = styled(Tag)`
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;
+
+const TableRow = styled.div<{ columnsWidths: string[]; columnsMinWidths: string[] }>`
+  display: grid;
+  grid-template-columns: ${({ columnsWidths, columnsMinWidths }) =>
+    columnsWidths
+      .map((width, index) =>
+        columnsMinWidths[index] !== 'auto' ? `minmax(${columnsMinWidths[index]}, ${width})` : width,
+      )
+      .join(' ')};
+  border-bottom: 1px solid var(--catalog-table-border-color);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: var(--catalog-table-row-hover-bg-color);
+  }
+`;
+
+const TableCell = styled.div`
+  padding: var(--catalog-table-cell-padding);
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &.tooltip-cell-container {
+    overflow: visible;
+  }
+`;