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

package/src/components/Catalog/Catalog.tsx

@@ -0,0 +1,235 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig } from '@redocly/config';
+
+import { BffCatalogEntityList } from '@redocly/theme/core/types';
+import { breakpoints } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { H3 } from '@redocly/theme/components/Typography/H3';
+import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
+import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
+import { CatalogSwitcherItem } from '@redocly/theme/core';
+import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
+import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
+import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
+
+export type CatalogProps = {
+  catalogConfig: CatalogEntityConfig;
+  entitiesTypes: string[];
+  initialEntitiesList?: BffCatalogEntityList;
+  catalogSwitcherItems: CatalogSwitcherItem[];
+};
+
+export function Catalog(props: CatalogProps): JSX.Element {
+  const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
+
+  const { useTranslate, useCatalog } = useThemeHooks();
+
+  const { translate } = useTranslate();
+
+  const {
+    filters,
+    searchQuery,
+    setSearchQuery,
+    filterQuery,
+    sortOption,
+    setSortOption,
+    handleSortClick,
+    isColumnSorted,
+    viewMode,
+    setViewMode,
+    entitiesCounter,
+    setEntitiesCounter,
+    onChangeViewClick,
+    onChangeCollapseSidebarClick,
+    layout,
+    collapsedSidebar,
+  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0);
+
+  return (
+    <>
+      <CatalogPageWrapper data-component-name="Catalog/Catalog">
+        <FiltersSidebar
+          collapsed={collapsedSidebar}
+          header={
+            collapsedSidebar ? null : (
+              <CatalogSelector
+                catalogSwitcherItems={catalogSwitcherItems}
+                setSearchQuery={setSearchQuery}
+                setSortOption={setSortOption}
+              />
+            )
+          }
+          menu={
+            <FilterContent
+              setFilterTerm={setSearchQuery}
+              filters={filters}
+              filterTerm={searchQuery}
+              hideSearch={true}
+              showCounter={false}
+              filterValuesCasing="sentence"
+            />
+          }
+          footer={
+            <SidebarActions
+              layout={layout}
+              collapsedSidebar={collapsedSidebar}
+              isApiDocs={false}
+              onChangeViewClick={onChangeViewClick}
+              onChangeCollapseSidebarClick={onChangeCollapseSidebarClick}
+            />
+          }
+        />
+        <CatalogPageContent>
+          <CatalogPageDescription>
+            <CatalogTitleWrapper>
+              <CatalogTitle data-translation-key={catalogConfig?.titleTranslationKey}>
+                {translate(catalogConfig?.titleTranslationKey)}{' '}
+              </CatalogTitle>
+              <CounterTag borderless>{entitiesCounter}</CounterTag>
+            </CatalogTitleWrapper>
+            <CatalogDescription data-translation-key={catalogConfig?.descriptionTranslationKey}>
+              {translate(catalogConfig?.descriptionTranslationKey)}
+            </CatalogDescription>
+          </CatalogPageDescription>
+
+          <CatalogActionsRow>
+            <CatalogSearchInputWrapper>
+              <FilterInput
+                value={searchQuery}
+                onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+              />
+            </CatalogSearchInputWrapper>
+
+            <CatalogControlsWrapper>
+              <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+              <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
+            </CatalogControlsWrapper>
+          </CatalogActionsRow>
+
+          <CatalogEntities
+            catalogConfig={catalogConfig}
+            excludedEntities={catalogConfig?.excludes}
+            filterQuery={filterQuery}
+            entitiesTypes={entitiesTypes}
+            sortOption={sortOption}
+            searchQuery={searchQuery}
+            viewMode={viewMode}
+            setEntitiesCounter={setEntitiesCounter}
+            initialEntitiesList={initialEntitiesList}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+          />
+        </CatalogPageContent>
+      </CatalogPageWrapper>
+    </>
+  );
+}
+
+const CatalogActionsRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const CatalogControlsWrapper = styled.div`
+  display: var(--catalog-controls-wrapper-display);
+  align-items: var(--catalog-controls-wrapper-align-items);
+  margin-left: var(--catalog-controls-wrapper-margin-left);
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+
+const CatalogPageContent = styled.main`
+  flex: 1;
+  width: var(--catalog-page-content-width-mobile);
+  margin: var(--catalog-page-content-margin-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    width: var(--catalog-page-content-width-desktop);
+    padding: var(--catalog-page-padding);
+  }
+`;
+
+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);
+`;
+
+const CatalogPageWrapper = styled.div`
+  --sidebar-width: var(--catalog-sidebar-width);
+
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--catalog-page-wrapper-font-weight);
+  color: var(--catalog-page-wrapper-text-color);
+  font-size: var(--catalog-page-wrapper-font-size);
+  font-family: var(--catalog-page-wrapper-font-family);
+  line-height: var(--catalog-page-wrapper-line-height);
+
+  hr {
+    border: 0;
+    width: var(--catalog-hr-width);
+    margin: var(--catalog-hr-margin);
+    border-top: var(--catalog-hr-border-width) solid var(--catalog-hr-border-color);
+  }
+  a:not([role='button']) {
+    text-decoration: var(--catalog-link-text-decoration);
+    color: var(--catalog-link-color);
+    font-weight: var(--catalog-link-font-weight);
+  }
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    flex-direction: row;
+    padding: 0;
+  }
+`;
+
+const CatalogPageDescription = 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 FiltersSidebar = styled(Sidebar)`
+  display: var(--catalog-sidebar-display-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: var(--catalog-sidebar-display-desktop);
+  }
+  --menu-container-padding-top: var(--catalog-sidebar-menu-container-padding-top);
+
+  ${SidebarHeader} {
+    border: none;
+  }
+`;
+
+const CatalogSearchInputWrapper = styled.div`
+  width: var(--catalog-search-input-wrapper-width);
+`;

package/src/components/Catalog/CatalogActionsRow.tsx

@@ -0,0 +1,58 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { SortOption, CatalogViewMode } from '@redocly/theme/core/types';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
+import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+
+export type CatalogActionsRowProps = {
+  searchQuery: string;
+  setSearchQuery: (updatedTerm: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  viewMode?: CatalogViewMode;
+  onViewModeChange?: (mode: CatalogViewMode) => void;
+  style?: React.CSSProperties;
+};
+
+export function CatalogActionsRow({
+  searchQuery,
+  setSearchQuery,
+  sortOption,
+  setSortOption,
+  viewMode,
+  onViewModeChange,
+  style,
+}: CatalogActionsRowProps): JSX.Element {
+  return (
+    <CatalogActionsRowWrapper style={style}>
+      <CatalogSearchInputWrapper>
+        <FilterInput value={searchQuery} onChange={(updatedTerm) => setSearchQuery(updatedTerm)} />
+      </CatalogSearchInputWrapper>
+
+      <CatalogControlsWrapper>
+        <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+        {viewMode && onViewModeChange && (
+          <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
+        )}
+      </CatalogControlsWrapper>
+    </CatalogActionsRowWrapper>
+  );
+}
+
+export const CatalogActionsRowWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const CatalogControlsWrapper = styled.div`
+  display: var(--catalog-controls-wrapper-display);
+  align-items: var(--catalog-controls-wrapper-align-items);
+  margin-left: var(--catalog-controls-wrapper-margin-left);
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+
+export const CatalogSearchInputWrapper = styled.div`
+  width: var(--catalog-search-input-wrapper-width);
+`;

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

@@ -0,0 +1,227 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig } from '@redocly/config';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
+import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
+import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { getPathPrefix } from '@redocly/theme/core';
+
+export type CatalogCardProps = {
+  entity: BffCatalogEntity;
+  catalogConfig: CatalogEntityConfig;
+};
+
+export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.Element {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const pathPrefix = getPathPrefix();
+
+  return (
+    <CatalogCardWrapper
+      data-component-name="Catalog/CatalogCardView/CatalogCard"
+      onClick={() => {
+        window.location.assign(
+          `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`,
+        );
+        telemetry.send({ type: 'catalog_item.clicked' });
+      }}
+    >
+      <CardContent>
+        <CardHeader>
+          <HeaderIconWrapper>
+            <CatalogEntityIcon entityType={entity.type} />
+          </HeaderIconWrapper>
+          <CardTitle>
+            <CatalogHighlight>{entity.title}</CatalogHighlight>
+          </CardTitle>
+        </CardHeader>
+
+        <CardDescription>
+          <CatalogHighlight>{entity.summary ?? ''}</CatalogHighlight>
+        </CardDescription>
+
+        <CardMetadataSection>
+          <MetadataColumn>
+            <MetadataLabel>Domains:</MetadataLabel>
+            <CatalogTagsWithTooltip
+              items={entity.domains?.map((domain) => domain.title) || []}
+              tagProps={{
+                style: {
+                  fontSize: 'var(--catalog-card-font-size)',
+                  backgroundColor: 'var(--catalog-card-icon-bg-color)',
+                },
+                icon: <GraphIcon color="var(--color-green-8)" />,
+              }}
+            />
+          </MetadataColumn>
+
+          <MetadataColumn>
+            <MetadataLabel>Owners:</MetadataLabel>
+            <CatalogTagsWithTooltip
+              items={entity.owners?.map((owner) => owner.key) || []}
+              tagProps={{
+                style: {
+                  fontSize: 'var(--catalog-card-font-size)',
+                  backgroundColor: 'var(--catalog-card-icon-bg-color)',
+                  borderRadius: 'var(--border-radius-xl)',
+                },
+              }}
+            />
+          </MetadataColumn>
+        </CardMetadataSection>
+      </CardContent>
+
+      <Divider />
+
+      <CardFooter>
+        <CatalogTagsWithTooltip
+          items={entity.tags || []}
+          tagProps={{
+            style: {
+              fontSize: 'var(--catalog-card-font-size)',
+              borderRadius: 'var(--border-radius)',
+            },
+            borderless: true,
+            color: 'grey',
+          }}
+          itemsToShow={3}
+        />
+
+        <ArrowCircle>
+          <ArrowRightIcon size="16px" />
+          <ArrowUpRightIcon size="16px" />
+        </ArrowCircle>
+      </CardFooter>
+    </CatalogCardWrapper>
+  );
+}
+
+const HeaderIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-card-icon-width);
+  height: var(--catalog-card-icon-height);
+  border-radius: var(--catalog-card-icon-border-radius);
+  background-color: var(--catalog-card-icon-bg-color);
+  flex-shrink: 0;
+  border: var(--catalog-card-icon-border-width) solid var(--catalog-card-icon-border-color);
+  margin-right: var(--catalog-card-icon-margin-right);
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const MetadataLabel = styled.div`
+  font-size: var(--catalog-metadata-label-font-size);
+  font-weight: var(--catalog-metadata-label-font-weight);
+  color: var(--catalog-metadata-label-color);
+  margin-bottom: var(--catalog-metadata-label-margin-bottom);
+`;
+
+const CardMetadataSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--catalog-metadata-section-margin-top);
+  gap: var(--catalog-metadata-section-gap);
+  width: 100%;
+`;
+
+const MetadataColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: calc(50% - var(--catalog-metadata-column-half-gap)); /* 50% minus half the gap */
+`;
+
+const ArrowCircle = styled.div`
+  width: var(--catalog-arrow-circle-size);
+  height: var(--catalog-arrow-circle-size);
+  border-radius: var(--catalog-arrow-circle-radius);
+  background-color: var(--catalog-arrow-circle-bg-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  ${ArrowRightIcon}, ${ArrowUpRightIcon} {
+    position: absolute;
+    transition: opacity 0.2s ease-in-out;
+  }
+`;
+
+const CardContent = styled.div`
+  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+`;
+
+const CardFooter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+`;
+
+const Divider = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: var(--catalog-card-divider-color);
+`;
+
+const CatalogCardWrapper = styled.div`
+  min-height: var(--catalog-card-min-height);
+  height: 100%;
+  color: var(--catalog-card-text-color);
+  font-size: var(--catalog-card-font-size);
+  font-weight: var(--catalog-card-font-weight);
+  background-color: var(--catalog-card-bg-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
+  transition: all 0.2s ease-in-out;
+  border-radius: var(--catalog-card-border-radius);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  ${ArrowRightIcon} {
+    opacity: 1;
+  }
+  ${ArrowUpRightIcon} {
+    opacity: 0;
+  }
+  &:hover {
+    ${ArrowRightIcon} {
+      opacity: 0;
+    }
+    ${ArrowUpRightIcon} {
+      opacity: 1;
+    }
+    border-color: var(--catalog-card-border-color-hover);
+  }
+`;
+
+const CardTitle = styled.div`
+  color: var(--catalog-card-title-color);
+  font-size: var(--catalog-card-title-font-size);
+  font-weight: var(--catalog-card-title-font-weight);
+  line-height: var(--catalog-card-title-line-height);
+  margin: 0;
+`;
+
+const CardDescription = styled.div`
+  margin-top: var(--catalog-card-description-margin-top);
+  color: var(--catalog-card-description-color);
+  font-size: var(--catalog-card-description-font-size);
+  font-weight: var(--catalog-card-description-font-weight);
+  line-height: var(--catalog-card-description-line-height);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;

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