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

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

@@ -0,0 +1,127 @@
+import React, { JSX, ReactNode } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
+import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
+import { CatalogUserEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
+import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+
+const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
+  {
+    key: 'entity',
+    title: 'User name',
+    render: (entity) => (
+      <CatalogUserEntityCell name={entity.title} email={entity.metadata?.email as string} />
+    ),
+    width: '2fr',
+    sortable: true,
+    sortKey: 'title',
+  },
+  {
+    key: 'metadata',
+    title: 'Role',
+    render: (entity) => (entity.metadata?.role ? <Tag>{entity.metadata?.role}</Tag> : null),
+    width: '2fr',
+  },
+  {
+    key: 'description',
+    title: 'Description',
+    render: (entity) => <EntityDescription>{entity.summary}</EntityDescription>,
+    width: '3fr',
+  },
+];
+
+export type CatalogEntityTeamRelationsProps = {
+  entity: BffCatalogEntity;
+  catalogConfig: CatalogEntityConfig;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  relations: BffCatalogRelatedEntity[];
+  query: {
+    fetchNextPage: () => void;
+    isFetchingNextPage: boolean;
+    hasNextPage: boolean;
+  };
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (sortOption: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  shouldShowLoadMore: boolean;
+};
+
+export function CatalogEntityTeamRelations({
+  entity,
+  relations,
+  query,
+  searchQuery,
+  setSearchQuery,
+  entitiesCatalogConfig,
+  catalogConfig,
+  sortOption,
+  setSortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+}: CatalogEntityTeamRelationsProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+        <TabItem label="Members" icon={<PeopleIcon />}>
+          <CatalogEntityRelationsTable
+            entity={entity}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            relations={relations}
+            query={query}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            heading="Members"
+            filter="type:user"
+            columns={teamColumns}
+            sortOption={sortOption}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            shouldShowLoadMore={shouldShowLoadMore}
+          />
+        </TabItem>
+        <TabItem label="Related entities" icon={<EntityTypeIcon />}>
+          <CatalogEntityDefaultRelations
+            entity={entity}
+            relations={relations}
+            query={query}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            sortOption={sortOption}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            shouldShowLoadMore={shouldShowLoadMore}
+          />
+        </TabItem>
+      </Tabs>
+    </div>
+  );
+}
+
+const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
+  padding: 12px;
+`;
+
+const EntityDescription = styled.div`
+  font-size: var(--catalog-table-entity-summary-font-size);
+  line-height: var(--catalog-table-entity-summary-line-height);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -0,0 +1,41 @@
+import React, { JSX } from 'react';
+
+import { EntityType } from '@redocly/theme/core/types';
+import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
+import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
+import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
+
+const iconColor = 'var(--catalog-entity-icon-color)';
+
+const entityIconMap: Record<EntityType, JSX.Element> = {
+  service: <CodeIcon color={iconColor} />,
+  domain: <GraphIcon color={iconColor} />,
+  team: <PeopleIcon color={iconColor} />,
+  user: <UserIcon color={iconColor} />,
+  'api-description': <CodeIcon color={iconColor} />,
+};
+
+export type CatalogEntityIconProps = {
+  entityType: string;
+};
+
+export function CatalogEntityIcon({ entityType }: CatalogEntityIconProps): JSX.Element {
+  const key = entityType.toLowerCase() as EntityType;
+
+  switch (key) {
+    case 'service':
+      return entityIconMap.service;
+    case 'domain':
+      return entityIconMap.domain;
+    case 'team':
+      return entityIconMap.team;
+    case 'user':
+      return entityIconMap.user;
+    case 'api-description':
+      return entityIconMap['api-description'];
+    default:
+      const exhaustiveCheck: never = key;
+      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+  }
+}

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+
+import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
+import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
+import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
+
+const getEntityIcon = (entityType: string): ReactNode => {
+  const iconColor = 'var(--catalog-entity-icon-color)';
+
+  switch (entityType.toLowerCase()) {
+    case 'service':
+      return <CodeIcon color={iconColor} />;
+    case 'domain':
+      return <GraphIcon color={iconColor} />;
+    case 'team':
+      return <PeopleIcon color={iconColor} />;
+    case 'user':
+      return <UserIcon color={iconColor} />;
+    default:
+      return <CodeIcon color={iconColor} />;
+  }
+};
+
+export type CatalogEntityTypeIconProps = {
+  entityType: string;
+};
+
+export function CatalogEntityTypeIcon({ entityType }: CatalogEntityTypeIconProps) {
+  return (
+    <IconContainer data-component-name="Catalog/CatalogEntityTypeIcon">
+      {getEntityIcon(entityType)}
+    </IconContainer>
+  );
+}
+
+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);
+`;

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