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

package/src/components/Catalog/CatalogCardView/CatalogCardView.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig } from '@redocly/config';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCard';
+
+export type CatalogCardViewProps = {
+  entities: BffCatalogEntity[];
+  catalogConfig: CatalogEntityConfig;
+};
+
+export function CatalogCardView({ entities, catalogConfig }: CatalogCardViewProps) {
+  return (
+    <CatalogCardsWrapper data-component-name="Catalog/CatalogCardView/CatalogCardView">
+      {entities.map((entity) => (
+        <CatalogCard key={entity.id} entity={entity} catalogConfig={catalogConfig} />
+      ))}
+    </CatalogCardsWrapper>
+  );
+}
+
+const CatalogCardsWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-min-width), 1fr));
+  gap: var(--catalog-cards-group-gap);
+  margin-bottom: var(--spacing-xl);
+  margin-top: var(--spacing-xl);
+`;

package/src/components/Catalog/CatalogEntities.tsx

@@ -0,0 +1,107 @@
+import React, { JSX, useEffect } from 'react';
+import { CatalogEntityConfig } from '@redocly/config';
+
+import { BffCatalogEntity, BffCatalogEntityList, SortOption } from '@redocly/theme/core/types';
+import { useThemeHooks, useCatalogEntities } from '@redocly/theme/core/hooks';
+import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
+import { CatalogCardView } from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCardView';
+import { CatalogTableView } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
+import { CatalogEntitiesEmptyState } from '@redocly/theme/components/Catalog/CatalogEntitiesEmptyState';
+
+export type CatalogEntitiesProps = {
+  catalogConfig: CatalogEntityConfig;
+  excludedEntities?: CatalogEntityConfig['excludes'];
+  filterQuery: string;
+  entitiesTypes: string[];
+  searchQuery: string;
+  viewMode: string;
+  setEntitiesCounter: (counter: number) => void;
+  initialEntitiesList?: BffCatalogEntityList;
+  sortOption: SortOption | null;
+  setSortOption: (sortOption: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+const LOAD_MORE_THRESHOLD = 10;
+
+export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
+  const {
+    catalogConfig,
+    excludedEntities,
+    filterQuery,
+    entitiesTypes,
+    sortOption,
+    searchQuery,
+    viewMode,
+    setEntitiesCounter,
+    setSortOption,
+    handleSortClick,
+    isColumnSorted,
+  } = props;
+
+  const { useFetchCatalogEntities } = useThemeHooks();
+
+  const { initialFilter } = useCatalogEntities({
+    entitiesTypes,
+    excludedEntities,
+  });
+
+  const {
+    items: entities,
+    query,
+    total,
+  } = useFetchCatalogEntities(
+    {
+      limit: LOAD_MORE_THRESHOLD,
+      filter:
+        initialFilter && filterQuery
+          ? `${initialFilter} AND ${filterQuery}`
+          : initialFilter || filterQuery,
+      sort: sortOption || undefined,
+      search: searchQuery,
+    },
+    props.initialEntitiesList,
+  );
+
+  const shouldShowLoadMore =
+    query.hasNextPage ||
+    (query.isPlaceholderData && entities && entities.length >= LOAD_MORE_THRESHOLD);
+
+  useEffect(() => {
+    setEntitiesCounter(total || 0);
+  }, [total, setEntitiesCounter]);
+
+  if (!query.isPending && (!entities || entities.length === 0)) {
+    return <CatalogEntitiesEmptyState />;
+  }
+
+  return (
+    <HighlightContext.Provider value={[searchQuery]} data-component-name="Catalog/CatalogEntities">
+      {viewMode === 'cards' ? (
+        <CatalogCardView entities={entities} catalogConfig={catalogConfig} />
+      ) : (
+        <CatalogTableView<BffCatalogEntity>
+          entities={entities}
+          catalogConfig={catalogConfig}
+          setSortOption={setSortOption}
+          currentSortOption={sortOption}
+          handleSortClick={handleSortClick}
+          isColumnSorted={isColumnSorted}
+        />
+      )}
+
+      {shouldShowLoadMore && (
+        <LoadMore
+          icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}
+          onClick={query.fetchNextPage}
+          disabled={query.isFetchingNextPage}
+          blinking={query.isFetchingNextPage}
+          label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
+        />
+      )}
+    </HighlightContext.Provider>
+  );
+}

package/src/components/Catalog/CatalogEntitiesEmptyState.tsx

@@ -0,0 +1,38 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+export function CatalogEntitiesEmptyState(): JSX.Element {
+  return (
+    <EmptyStateWrapper data-component-name="Catalog/CatalogEntitiesEmptyState">
+      <EmptyStateHeader>No entities yet</EmptyStateHeader>
+      <EmptyStateText>Start by adding your first entity to</EmptyStateText>
+      <EmptyStateText>begin building your catalog.</EmptyStateText>
+    </EmptyStateWrapper>
+  );
+}
+
+const EmptyStateWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--catalog-empty-state-padding);
+  text-align: center;
+  min-height: var(--catalog-empty-state-min-height);
+`;
+
+const EmptyStateHeader = styled.p`
+  color: var(--catalog-empty-state-header-text-color);
+  font-size: var(--catalog-empty-state-header-font-size);
+  font-weight: var(--catalog-empty-state-header-font-weight);
+  line-height: var(--catalog-empty-state-header-line-height);
+  margin: 0;
+`;
+
+const EmptyStateText = styled.p`
+  color: var(--catalog-empty-state-text-color);
+  font-size: var(--catalog-empty-state-font-size);
+  font-weight: var(--catalog-empty-state-font-weight);
+  line-height: var(--catalog-empty-state-line-height);
+  margin: 0;
+`;

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

@@ -0,0 +1,207 @@
+import React from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
+
+import { breakpoints } from '@redocly/theme/core/utils';
+import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
+import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
+import { CatalogEntityProperties } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties';
+import { CatalogEntityMetadata } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMetadata';
+import { CatalogEntityLinks } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityLinks';
+import { Breadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
+import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
+import { Menu } from '@redocly/theme/components/Menu/Menu';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CatalogEntityRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+import { SidebarActions } from '../../SidebarActions/SidebarActions';
+
+export type CatalogEntityProps = {
+  entity: BffCatalogEntity;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  initialRelations: BffCatalogRelatedEntityList;
+  mainCatalogLabelTranslationKey?: string;
+  mainCatalogSlug?: string;
+};
+
+export function CatalogEntity({
+  entity,
+  entitiesCatalogConfig,
+  catalogConfig,
+  initialRelations,
+  mainCatalogLabelTranslationKey,
+  mainCatalogSlug,
+}: CatalogEntityProps) {
+  const { useTranslate, useCatalog } = useThemeHooks();
+  const { translate } = useTranslate();
+  const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
+  const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
+
+  const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick } =
+    useCatalog();
+
+  return (
+    <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
+      <CatalogSidebar
+        collapsed={collapsedSidebar}
+        header={
+          <BackLink
+            icon={<ArrowLeftIcon />}
+            iconPosition="left"
+            variant="ghost"
+            size="medium"
+            data-component-name="Sidebar/BackButton"
+            to={linkToMainCatalog}
+          >
+            {collapsedSidebar ? (
+              ''
+            ) : (
+              <div data-translation-key="sidebar.menu.backLabel">
+                {translate('sidebar.menu.backLabel')}
+              </div>
+            )}
+          </BackLink>
+        }
+        menu={
+          <Menu
+            items={[
+              {
+                label: 'Overview',
+                link: `${linkToMainCatalog}/entities/${entity.key}`,
+                active: true,
+                items: [],
+                hasActiveSubItem: false,
+              },
+            ]}
+          />
+        }
+        footer={
+          <SidebarActions
+            layout={layout}
+            collapsedSidebar={collapsedSidebar}
+            isApiDocs={false}
+            onChangeViewClick={onChangeViewClick}
+            onChangeCollapseSidebarClick={onChangeCollapseSidebarClick}
+          />
+        }
+      />
+      <CatalogPageContent>
+        <Breadcrumbs
+          additionalBreadcrumbs={[
+            ...(mainCatalogLabelTranslationKey
+              ? [
+                  {
+                    label: translate(mainCatalogLabelTranslationKey),
+                    link: `catalogs/${mainCatalogSlug}`,
+                  },
+                ]
+              : []),
+            { label: linkToMainCatalogLabel, link: linkToMainCatalog },
+            { label: entity.title },
+          ]}
+        />
+        <CatalogEntityPageWrapper>
+          <CatalogPageDescription
+            title={entity.title}
+            description={entity.summary ?? ''}
+            tag={entity.key}
+          />
+          <CatalogEntityProperties entity={entity} />
+          <CatalogTwoColumnsSection>
+            <CatalogEntityMetadata entity={entity} />
+            <CatalogEntityLinks entity={entity} />
+          </CatalogTwoColumnsSection>
+          <CatalogEntityRelations
+            entity={entity}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            initialRelations={initialRelations}
+          />
+        </CatalogEntityPageWrapper>
+      </CatalogPageContent>
+    </CatalogPageWrapper>
+  );
+}
+
+const CatalogPageWrapper = styled.div`
+  --sidebar-width: var(--catalog-sidebar-width);
+  --link-color-primary: var(--breadcrumbs-text-color);
+
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--font-weight-regular);
+
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  hr {
+    border: 0;
+    width: calc(100% + 48px);
+    margin: auto -24px 0 -24px;
+    border-top: 1px solid var(--border-color-primary);
+  }
+  a:not([role='button']) {
+    text-decoration: none;
+    color: var(--link-color-primary);
+    font-weight: var(--link-font-weight);
+  }
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    flex-direction: row;
+    padding: 0;
+  }
+`;
+
+const CatalogPageContent = styled.main`
+  flex: 1;
+  width: 90%;
+  margin: 0 auto;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    width: 100%;
+    padding: var(--catalog-page-padding);
+  }
+`;
+
+const CatalogSidebar = styled(Sidebar)`
+  display: none;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: flex;
+  }
+  --menu-container-padding-top: 0;
+`;
+
+const CatalogEntityPageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--font-weight-regular);
+
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+`;
+
+const CatalogTwoColumnsSection = styled.section`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  align-items: start;
+`;
+
+const BackLink = styled(Button)`
+  padding: var(--spacing-unit) 0;
+  height: calc(var(--line-height-base) + var(--spacing-unit) * 2);
+  justify-content: flex-start;
+  width: 100%;
+  margin-bottom: 0px;
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityInfoBar.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode, JSX } from 'react';
+import styled from 'styled-components';
+
+export type CatalogEntityInfoBarProps = {
+  leftContent: ReactNode;
+  rightContent: ReactNode;
+  withSeparator?: boolean;
+};
+
+export function CatalogEntityInfoBar({
+  leftContent,
+  rightContent,
+  withSeparator = true,
+}: CatalogEntityInfoBarProps): JSX.Element {
+  return (
+    <InfoBarWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar">
+      <LeftColumn withSeparator={withSeparator}>{leftContent}</LeftColumn>
+      <RightColumn>{rightContent}</RightColumn>
+    </InfoBarWrapper>
+  );
+}
+
+const InfoBarWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: 'left right';
+  align-items: center;
+
+  color: var(--catalog-card-text-color, inherit);
+  background-color: var(--catalog-card-bg-color, white);
+  border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
+  border-radius: var(--catalog-card-border-radius);
+  transition: all 0.2s ease-in-out;
+  height: 100%;
+  padding: var(--catalog-card-gap);
+
+  &:hover {
+    border-color: var(--catalog-card-border-color-hover);
+  }
+`;
+
+const LeftColumn = styled.div<{ withSeparator?: boolean }>`
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+  width: 100%;
+  grid-area: left;
+  justify-self: start;
+  text-align: left;
+  border-right: ${({ withSeparator }) =>
+    withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+`;
+
+const RightColumn = styled.div`
+  color: var(--catalog-metadata-value-color);
+  font-weight: var(--font-weight-medium);
+  grid-area: right;
+  justify-self: end;
+  text-align: right;
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityLinks.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
+import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { Link } from '@redocly/theme/components/Link/Link';
+
+export type CatalogEntityLinksProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
+  const links = Object.entries(entity.links || []);
+
+  if (!links.length) {
+    return null;
+  }
+
+  return (
+    <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
+      <Heading>Links</Heading>
+      {links.map(([key, value]) => (
+        <CatalogEntityInfoBar
+          key={key}
+          leftContent={
+            <Label>
+              <DocumentIcon /> {value.label}
+            </Label>
+          }
+          rightContent={
+            <Link color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
+              <LaunchIcon />
+            </Link>
+          }
+          withSeparator={false}
+        />
+      ))}
+    </LinksWrapper>
+  );
+}
+
+const LinksWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+
+const Label = styled.span`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-unit);
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityMetadata.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { capitalize } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+
+const MAX_INITIAL_ITEMS = 4;
+
+export type CatalogEntityMetadataProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { schema, ...metadataToShow } = entity.metadata || {};
+  const metadata = Object.entries(metadataToShow);
+  const [isOn, setIsOn] = useState(false);
+  const hasMoreItems = metadata.length > MAX_INITIAL_ITEMS;
+  const visibleMetadata = isOn ? metadata : metadata.slice(0, MAX_INITIAL_ITEMS);
+
+  if (!metadata.length) {
+    return null;
+  }
+  return (
+    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
+      <Heading>{translate('catalog.entity.metadata.title')}</Heading>
+      {visibleMetadata.map(([key, value]) => (
+        <CatalogEntityInfoBar
+          key={key}
+          leftContent={<Label>{capitalize(key)}:</Label>}
+          rightContent={<Value>{value}</Value>}
+        />
+      ))}
+      {hasMoreItems && (
+        <ShowMoreButton onClick={() => setIsOn(!isOn)}>
+          {isOn ? 'Show less' : 'Show more'} <ChevronIcon $isExpanded={isOn} />
+        </ShowMoreButton>
+      )}
+    </MetadataWrapper>
+  );
+}
+
+const MetadataWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+
+const Label = styled.span`
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+`;
+
+const Value = styled.span`
+  color: var(--catalog-metadata-value-color);
+  font-weight: var(--font-weight-medium);
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-base);
+  margin-top: 0;
+  font-size: var(--catalog-metadata-heading-size);
+`;
+
+const ChevronIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.2s ease;
+`;
+
+const ShowMoreButton = styled.button`
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-metadata-button-gap, 0.5rem);
+  cursor: pointer;
+  color: var(--catalog-metadata-button-color);
+  padding: 0;
+  font-weight: var(--font-weight-medium);
+  margin-top: var(--spacing-unit);
+
+  &:hover {
+    color: var(--catalog-metadata-button-color-hover);
+  }
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty.tsx

@@ -0,0 +1,35 @@
+import React, { JSX } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { DocumentIcon, getPathPrefix, Tag, useThemeHooks } from '@redocly/theme';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type ApiDescriptionPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function ApiDescriptionProperty({ entity }: ApiDescriptionPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const navigate = useNavigate();
+  const pathPrefix = getPathPrefix();
+  const descriptionFile = entity.metadata?.descriptionFile;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <DocumentIcon />
+            {translate('catalog.entity.properties.apiDescription.title')}
+          </>
+        }
+        content={<Tag>{descriptionFile}</Tag>}
+        onClick={() => {
+          navigate(`${pathPrefix}/${descriptionFile}`);
+        }}
+      />
+    </div>
+  );
+}