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

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+
+export type CatalogTagsCellProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogTagsCell({ entity }: CatalogTagsCellProps) {
+  return (
+    <div data-component-name="Catalog/CatalogTableView/CatalogTagsCell">
+      <CatalogTagsWithTooltip
+        data-testid="catalog-tags-cell"
+        items={entity.tags || []}
+        showPlaceholder={false}
+        tagProps={{
+          style: {
+            fontSize: 'var(--font-size-base)',
+            borderRadius: 'var(--border-radius)',
+          },
+          borderless: true,
+          color: 'grey',
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+
+export type CatalogUserEntityCellProps = {
+  name: string;
+  email: string;
+};
+
+const extractInitials = (name: string) => {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('');
+};
+
+export function CatalogUserEntityCell({ name, email }: CatalogUserEntityCellProps) {
+  return (
+    <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogUserEntityCell">
+      <Avatar>{extractInitials(name)}</Avatar>
+      <EntityTitleContent>
+        <EntityTitle>
+          <CatalogHighlight>{name}</CatalogHighlight>
+        </EntityTitle>
+        <Email>
+          <CatalogHighlight>{email}</CatalogHighlight>
+        </Email>
+      </EntityTitleContent>
+    </EntityTitleCellWrapper>
+  );
+}
+
+const EntityTitleCellWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+`;
+
+const Avatar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--catalog-avatar-bg-color);
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 400;
+`;
+
+const EntityTitleContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  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;
+`;
+
+export const Email = styled.div`
+  font-size: var(--catalog-table-entity-summary-font-size);
+  line-height: var(--catalog-table-entity-summary-line-height);
+  color: var(--color-blue-6);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -0,0 +1,83 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
+
+import { Tag, TagProps } from '../Tag/Tag';
+import { CatalogHighlight } from './CatalogHighlight';
+import { TooltipComponent } from '../Tooltip/Tooltip';
+
+export type CatalogTagsWithTooltipProps = {
+  items: string[];
+  itemsToShow?: number;
+  showPlaceholder?: boolean;
+  tagProps?: TagProps;
+};
+
+export function CatalogTagsWithTooltip({
+  items,
+  itemsToShow = 1,
+  showPlaceholder = true,
+  tagProps,
+}: CatalogTagsWithTooltipProps): JSX.Element | null {
+  if (!items || items.length === 0) {
+    if (showPlaceholder) {
+      return (
+        <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
+            N/A
+          </Tag>
+        </CatalogTagsWrapper>
+      );
+    }
+    return null;
+  }
+
+  if (items.length <= itemsToShow) {
+    return (
+      <TooltipComponent
+        tip={items.join(', ')}
+        placement="bottom"
+        className="catalog"
+        width="400px"
+        disabled={items.join(', ').length <= CATALOG_TAG_MAX_LENGTH}
+      >
+        <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+          {items.map((item, index) => (
+            <Tag key={`${item}-${index}`} {...tagProps} maxLength={CATALOG_TAG_MAX_LENGTH}>
+              <CatalogHighlight>{item}</CatalogHighlight>
+            </Tag>
+          ))}
+        </CatalogTagsWrapper>
+      </TooltipComponent>
+    );
+  }
+
+  const displayedItems = items.slice(0, itemsToShow);
+  const remainingCount = items.length - itemsToShow;
+
+  return (
+    <TooltipComponent tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
+      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+        {displayedItems.map((item, index) => (
+          <Tag key={`${item}-${index}`} {...tagProps} maxLength={CATALOG_TAG_MAX_LENGTH}>
+            <CatalogHighlight>{item}</CatalogHighlight>
+          </Tag>
+        ))}
+
+        <MoreTagsButton>+{remainingCount} more</MoreTagsButton>
+      </CatalogTagsWrapper>
+    </TooltipComponent>
+  );
+}
+
+const CatalogTagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--catalog-tags-wrapper-gap);
+`;
+
+const MoreTagsButton = styled.span`
+  font-size: var(--catalog-tags-more-button-font-size);
+  margin-left: var(--catalog-tags-more-button-margin-left);
+`;

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
+import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
+import { CatalogViewMode } from '@redocly/theme/core';
+
+function useViewMode(initialViewMode: CatalogViewMode) {
+  const [viewMode, setViewMode] = useState<CatalogViewMode | null>(null);
+
+  useEffect(() => {
+    setViewMode(initialViewMode);
+  }, [initialViewMode]);
+
+  return viewMode;
+}
+
+export type CatalogViewModeToggleProps = {
+  viewMode: CatalogViewMode;
+  onViewModeChange: (mode: CatalogViewMode) => void;
+};
+
+export function CatalogViewModeToggle({
+  viewMode: initialViewMode,
+  onViewModeChange,
+}: CatalogViewModeToggleProps) {
+  const viewMode = useViewMode(initialViewMode);
+
+  return (
+    <ViewModeToggleWrapper data-component-name="Catalog/CatalogViewModeToggle">
+      <ViewModeButton
+        className={viewMode === 'table' ? 'active' : ''}
+        onClick={() => onViewModeChange('table')}
+      >
+        <TableIcon size="var(--catalog-view-mode-table-icon-size)" />
+      </ViewModeButton>
+      <ViewModeButton
+        className={viewMode === 'cards' ? 'active' : ''}
+        onClick={() => onViewModeChange('cards')}
+      >
+        <CardsIcon size="var(--catalog-view-mode-cards-icon-size)" />
+      </ViewModeButton>
+    </ViewModeToggleWrapper>
+  );
+}
+
+const ViewModeToggleWrapper = styled.div`
+  display: flex;
+  gap: var(--catalog-view-mode-toggle-gap);
+`;
+
+const ViewModeButton = styled.button`
+  width: var(--catalog-view-mode-button-width);
+  height: var(--catalog-view-mode-button-height);
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--catalog-view-mode-button-border-radius);
+
+  &.active {
+    background-color: var(--catalog-view-mode-toggle-active-bg-color);
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export const catalogDarkMode = css`
+  --catalog-avatar-bg-color: #3b3c45;
+`;