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

package/src/core/styles/dark.ts

@@ -10,6 +10,7 @@ import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
 import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
 import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
 import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables.dark';
+import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dark';
 
 
 const replayDarkMode = css`
@@ -316,6 +317,7 @@ export const darkMode = css`
   ${replayDarkMode}
   ${switcherDarkMode}
   ${cardsDarkMode}
+  ${catalogDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -8,6 +8,7 @@ import { sidebar } from '@redocly/theme/components/Sidebar/variables';
 import { breadcrumbs } from '@redocly/theme/components/Breadcrumbs/variables';
 import { tag } from '@redocly/theme/components/Tag/variables';
 import { toc } from '@redocly/theme/components/TableOfContent/variables';
+import { catalog } from '@redocly/theme/components/Catalog/variables';
 import { filter } from '@redocly/theme/components/Filter/variables';
 import { catalogClassic } from '@redocly/theme/components/CatalogClassic/variables';
 import { apiReferencePanels, responsePanelColors } from '@redocly/theme/components/Panel/variables';
@@ -367,6 +368,7 @@ const typography = css`
   --font-size-base: 14px; // Base font size of the entire system.
   --font-size-sm: 12px;
   --font-size-lg: 16px;
+  --font-size-md: 18px;
   --font-size-xl: 20px;
 
   /**
@@ -1211,6 +1213,7 @@ export const styles = css`
     ${breadcrumbs}
     ${button}
     ${cards}
+    ${catalog}
     ${catalogClassic}
     ${code}
     ${codeWalkthrough}

package/src/core/types/catalog.ts

@@ -1,5 +1,41 @@
+import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
+import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
+
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
+export type SortOption = 'title' | '-title' | 'type' | '-type';
+
+export type UseCatalogResponse = {
+  filters: ResolvedFilter[];
+  filterQuery: string;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  viewMode: CatalogViewMode;
+  setViewMode: (mode: CatalogViewMode) => void;
+  entitiesCounter: number;
+  setEntitiesCounter: (counter: number) => void;
+  onChangeViewClick: () => void;
+  onChangeCollapseSidebarClick: () => void;
+  layout: LayoutVariant;
+  collapsedSidebar: boolean;
+};
+
+export type UseCatalogSortResponse = {
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+export type UseCatalogSearchResponse = {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+};
+
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
   filters: ResolvedFilter[];
@@ -12,10 +48,6 @@ export type ResolvedFilter = Omit<CatalogFilterConfig, 'options'> & {
     value: string;
     count: number;
   }[];
-  filteredOptions: {
-    value: string;
-    count: number;
-  }[];
   toggleOption: (option: string) => void;
   selectOption: (option: string) => void;
   parentUsed: boolean;
@@ -34,9 +66,115 @@ export type CatalogItem = {
   scorecardLevelIdx?: number;
   scorecardLevels?: Record<string, { uniqueErrors: number; uniqueWarnings: number }>;
   scoreCardSlug?: string;
-  tags?: unknown[];
+  tags?: string[];
   versions?: CatalogItem[];
   version?: string;
   versionFolderId?: string;
   [k: string]: unknown;
 };
+
+export type DefaultCatalogSlug =
+  | 'services'
+  | 'users'
+  | 'teams'
+  | 'domains'
+  | 'api-descriptions'
+  | 'all';
+
+export type CatalogApiResults<T, L> = {
+  query: UseInfiniteQueryResult<InfiniteData<L, unknown>, Error>;
+  items: T[];
+  total: number;
+};
+
+export type CatalogApiParams = {
+  limit?: number;
+  filter?: string;
+  sort?: string;
+  search?: string;
+};
+
+export type UseCatalogEntitiesProps = {
+  entitiesTypes: string[];
+  excludedEntities?: CatalogEntityConfig['excludes'];
+};
+
+export type UseCatalogEntitiesResponse = {
+  setEntitiesCounter: (counter: number) => void;
+};
+
+export type EntityType = 'service' | 'domain' | 'team' | 'user' | 'api-description';
+
+export type CatalogViewMode = 'cards' | 'table';
+
+export type CatalogSwitcherItem = {
+  labelTranslationKey: string;
+  slug: string;
+  selected: boolean;
+};
+
+// TODO: remove this types after we make api-sdk package public and will be able import them from there
+export type BffCatalogRelatedEntity = {
+  readonly id: string;
+  type: string;
+  key: string;
+  title: string;
+  summary?: string | null;
+  readonly source: 'api' | 'file';
+  sourceFile?: string | null;
+  metadata?: Record<string, any>;
+  readonly createdAt: string | null;
+  readonly updatedAt: string | null;
+};
+
+export type BffCatalogEntity = {
+  readonly id: string;
+  readonly organizationId: string;
+  readonly projectId: string;
+  key: string;
+  type: string;
+  title: string;
+  readonly source: 'api' | 'file';
+  domains?: Array<BffCatalogRelatedEntity>;
+  owners?: Array<BffCatalogRelatedEntity>;
+  summary?: string;
+  tags?: Array<string>;
+  metadata?: Record<string, any>;
+  git?: Array<string>;
+  contact?: {
+    slack?: {
+      channels?: Array<{
+        name: string;
+      }>;
+    };
+  };
+  links?: Array<{
+    label: string;
+    url: string;
+  }>;
+  sourceFile?: string;
+  readonly object: 'catalogEntityView';
+  readonly createdAt: string;
+  readonly updatedAt: string;
+};
+
+export type BffCatalogEntityList = {
+  object: 'list';
+  page: Page;
+  items: Array<BffCatalogEntity>;
+};
+
+export type BffCatalogRelatedEntityList = {
+  object: 'list';
+  page: Page;
+  items: Array<BffCatalogRelatedEntity>;
+};
+
+export type Page = {
+  endCursor: string | null;
+  startCursor: string | null;
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+  limit: number;
+  total: number;
+};

package/src/core/types/filter.ts

@@ -4,6 +4,7 @@ import type { RedoclyConfig } from '@redocly/config';
 export type FilterProps = {
   filter: ResolvedFilter & { selectedOptions: any };
   filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+  showCounter?: boolean;
 };
 
 export type FilterTypes = NonNullable<FilterProps['filter']['type']>;

package/src/core/types/hooks.ts

@@ -1,13 +1,16 @@
-import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
-
-import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type {
+  CatalogEntityConfig,
+  PageProps,
+  ResolvedNavItemWithLink,
+  Version,
+} from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '@redocly/theme/config';
 import type {
   UserMenuData,
-  FilteredCatalog,
+  UseCatalogResponse,
   ItemState,
   SearchItemData,
   SubmitFeedbackParams,
@@ -18,8 +21,21 @@ import type {
   SearchFilterItem,
   SearchFacetQuery,
   AiSearchConversationItem,
+  CatalogApiResults,
+  CatalogApiParams,
+  FilteredCatalog,
+  UseCatalogSortResponse,
+  UseCatalogSearchResponse,
+  EventType,
+  SendEventParams,
 } from '@redocly/theme/core/types';
 
+import {
+  BffCatalogEntity,
+  BffCatalogEntityList,
+  BffCatalogRelatedEntity,
+  BffCatalogRelatedEntityList,
+} from '@redocly/theme/core/types';
 import { AiSearchError } from '@redocly/theme/core/constants';
 
 export type ThemeHooks = {
@@ -118,9 +134,20 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
       }
     | undefined;
+  useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number) => UseCatalogResponse;
+  useCatalogSort: () => UseCatalogSortResponse;
+  useCatalogSearch: () => UseCatalogSearchResponse;
+  useFetchCatalogEntities: (
+    params: CatalogApiParams,
+    initialData?: BffCatalogEntityList,
+  ) => CatalogApiResults<BffCatalogEntity, BffCatalogEntityList>;
+  useFetchCatalogEntitiesRelations: (
+    params: CatalogApiParams & { entityKey: string },
+    initialData?: BffCatalogRelatedEntityList,
+  ) => CatalogApiResults<BffCatalogRelatedEntity, BffCatalogRelatedEntityList>;
   useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
   useTelemetry: () => {
-    send(data: AsyncApiRealm.Messages): void;
+    send<TEventType extends EventType>(event: SendEventParams<TEventType>): void;
   };
   useUserTeams: () => string[];
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;

package/src/core/types/index.ts

@@ -15,3 +15,4 @@ export * from '@redocly/theme/core/types/common';
 export * from '@redocly/theme/core/types/open-api-server';
 export * from '@redocly/theme/core/types/marker';
 export * from '@redocly/theme/core/types/code-walkthrough';
+export * from '@redocly/theme/core/types/telemetry';

package/src/core/types/l10n.ts

@@ -118,6 +118,26 @@ export type TranslationKey =
   | 'catalog.filters.select.addFilter'
   | 'catalog.filters.select.all'
   | 'catalog.filters.done'
+  | 'catalog.catalogs.all.title'
+  | 'catalog.catalogs.all.description'
+  | 'catalog.catalogs.all.switcherLabel'
+  | 'catalog.catalogs.service.title'
+  | 'catalog.catalogs.service.description'
+  | 'catalog.catalogs.service.switcherLabel'
+  | 'catalog.catalogs.user.title'
+  | 'catalog.catalogs.user.description'
+  | 'catalog.catalogs.user.switcherLabel'
+  | 'catalog.catalogs.team.title'
+  | 'catalog.catalogs.team.description'
+  | 'catalog.catalogs.team.switcherLabel'
+  | 'catalog.catalogs.domain.title'
+  | 'catalog.catalogs.domain.description'
+  | 'catalog.catalogs.domain.switcherLabel'
+  | 'catalog.catalogs.apiDescription.title'
+  | 'catalog.catalogs.apiDescription.description'
+  | 'catalog.catalogs.apiDescription.switcherLabel'
+  | 'catalog.entity.metadata.title'
+  | 'catalog.entity.properties.apiDescription.title'
   | 'sidebar.menu.backLabel'
   | 'sidebar.menu.backToLabel'
   | 'sidebar.actions.show'

package/src/core/types/telemetry.ts

@@ -0,0 +1,36 @@
+import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
+
+type ExtractEventType<T> = T extends {
+  span?: { attributes?: { 'cloudevents.event_type': infer EventType } };
+}
+  ? EventType
+  : never;
+
+export type EventType = ExtractEventType<AsyncApiRealm.Messages>;
+
+type GetMessageForEventType<TEventType extends EventType> = Extract<
+  AsyncApiRealm.Messages,
+  { span?: { attributes?: { 'cloudevents.event_type': TEventType } } }
+>;
+
+type ExtractEventDataForType<TEventType extends EventType> =
+  GetMessageForEventType<TEventType> extends {
+    span?: { attributes?: infer Attrs };
+  }
+    ? {
+        [K in keyof Attrs as K extends `cloudevents.event_data.${string}` ? K : never]: Attrs[K];
+      }
+    : never;
+
+export type ConvertEventDataToPayload<T> = {
+  [K in keyof T as K extends `cloudevents.event_data.${infer FieldName}` ? FieldName : never]: T[K];
+};
+
+export type EventPayload<TEventType extends EventType> = ConvertEventDataToPayload<
+  ExtractEventDataForType<TEventType>
+>;
+
+export interface SendEventParams<TEventType extends EventType> {
+  type: TEventType;
+  payload?: EventPayload<TEventType>;
+}

package/src/core/utils/load-and-navigate.ts

@@ -32,10 +32,11 @@ export async function loadAndNavigate({
   if (result && lastNavigatedPath === to) {
     if (pathname !== window.location.pathname || search !== window.location.search) {
       // origin is used to prevent infinite loop when navigating from post message (from wysiwyg)
-      navigate(
-        { pathname, search, hash },
-        { ...options, state: { origin }, unstable_flushSync: true },
-      );
+      navigate({ pathname, search, hash }, {
+        ...options,
+        state: { origin },
+        unstable_flushSync: true,
+      } as NavigateOptions & { unstable_flushSync: boolean });
     }
     // @ts-ignore
     if (result.props?.disableAutoScroll) return;

package/src/icons/AscSortIcon/AscSortIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M9 11L9.707 10.293L11.5 12.086V2H12.5V12.086L14.293 10.293L15 11L12 14L9 11Z"
+      fill="#22242B"
+    />
+    <path d="M8 9H1V10H8V9Z" fill="#22242B" />
+    <path d="M8 6H3V7H8V6Z" fill="#22242B" />
+    <path d="M8 3H5V4H8V3Z" fill="#22242B" />
+  </svg>
+);
+
+export const AscSortIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AscSortIcon/AscSortIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CardsIcon/CardsIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M4 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V4C0 4.26522 0.105357 4.51957 0.292893 4.70711C0.48043 4.89464 0.734784 5 1 5H4C4.26522 5 4.51957 4.89464 4.70711 4.70711C4.89464 4.51957 5 4.26522 5 4V1C5 0.734784 4.89464 0.48043 4.70711 0.292893C4.51957 0.105357 4.26522 0 4 0ZM4 4H1V1H4V4Z"
+      fill="#22242B"
+    />
+    <path
+      d="M11 0H8C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V4C7 4.26522 7.10536 4.51957 7.29289 4.70711C7.48043 4.89464 7.73478 5 8 5H11C11.2652 5 11.5196 4.89464 11.7071 4.70711C11.8946 4.51957 12 4.26522 12 4V1C12 0.734784 11.8946 0.48043 11.7071 0.292893C11.5196 0.105357 11.2652 0 11 0ZM11 4H8V1H11V4Z"
+      fill="#22242B"
+    />
+    <path
+      d="M4 7H1C0.734784 7 0.48043 7.10536 0.292893 7.29289C0.105357 7.48043 0 7.73478 0 8V11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H4C4.26522 12 4.51957 11.8946 4.70711 11.7071C4.89464 11.5196 5 11.2652 5 11V8C5 7.73478 4.89464 7.48043 4.70711 7.29289C4.51957 7.10536 4.26522 7 4 7ZM4 11H1V8H4V11Z"
+      fill="#22242B"
+    />
+    <path
+      d="M11 7H8C7.73478 7 7.48043 7.10536 7.29289 7.29289C7.10536 7.48043 7 7.73478 7 8V11C7 11.2652 7.10536 11.5196 7.29289 11.7071C7.48043 11.8946 7.73478 12 8 12H11C11.2652 12 11.5196 11.8946 11.7071 11.7071C11.8946 11.5196 12 11.2652 12 11V8C12 7.73478 11.8946 7.48043 11.7071 7.29289C11.5196 7.10536 11.2652 7 11 7ZM11 11H8V8H11V11Z"
+      fill="#22242B"
+    />
+  </svg>
+);
+
+export const CardsIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CardsIcon/CardsIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CaretDownIcon/CaretDownIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M6.77566 0C7.04293 0 7.17678 0.323143 6.98779 0.512132L4.21205 3.28787C4.0949 3.40503 3.90495 3.40503 3.78779 3.28787L1.01205 0.512132C0.823064 0.323142 0.956914 0 1.22419 0H6.77566Z"
+      fill="#6E6F7A"
+    />
+  </svg>
+);
+
+export const CaretDownIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CaretDownIcon/CaretDownIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '4px'};
+  width: ${({ size }) => size || '8px'};
+`;

package/src/icons/CaretUpIcon/CaretUpIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M1.22419 3.99573C0.956914 3.99573 0.823064 3.67259 1.01205 3.4836L3.78779 0.707863C3.90495 0.590706 4.0949 0.590706 4.21205 0.707863L6.98779 3.4836C7.17678 3.67259 7.04293 3.99573 6.77566 3.99573L1.22419 3.99573Z"
+      fill="#6E6F7A"
+    />
+  </svg>
+);
+
+export const CaretUpIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CaretUpIcon/CaretUpIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '4px'};
+  width: ${({ size }) => size || '8px'};
+`;

package/src/icons/DescSortIcon/DescSortIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M9 11L9.707 10.293L11.5 12.086V2H12.5V12.086L14.293 10.293L15 11L12 14L9 11Z"
+      fill="#22242B"
+    />
+    <path d="M8 3H1V4H8V3Z" fill="#22242B" />
+    <path d="M8 6H3V7H8V6Z" fill="#22242B" />
+    <path d="M8 9H5V10H8V9Z" fill="#22242B" />
+  </svg>
+);
+
+export const DescSortIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DescSortIcon/DescSortIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/EntityTypeIcon/EntityTypeIcon.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M17.7501 8.375H9.62507V0.250001H8.37507V8.375H0.250073V9.625H8.37507V17.75H9.62507V9.625H17.7501V8.375Z"
+      fill="#555761"
+    />
+    <path
+      d="M14.9913 11.5L15.8751 12.3837L13.6338 14.625L15.8751 16.8662L14.9913 17.75L11.8663 14.625L14.9913 11.5Z"
+      fill="#555761"
+    />
+    <path
+      d="M5.87507 17.75H0.875073C0.768526 17.75 0.663745 17.7228 0.570682 17.6709C0.477618 17.619 0.399362 17.5442 0.343347 17.4536C0.287331 17.363 0.255415 17.2595 0.250631 17.1531C0.245846 17.0466 0.268352 16.9407 0.31601 16.8454L2.81601 11.8454C2.8737 11.7486 2.95556 11.6684 3.05356 11.6127C3.15156 11.557 3.26235 11.5277 3.37507 11.5277C3.48779 11.5277 3.59858 11.557 3.69659 11.6127C3.79459 11.6684 3.87644 11.7486 3.93413 11.8454L6.43413 16.8454C6.48179 16.9407 6.5043 17.0466 6.49951 17.1531C6.49473 17.2595 6.46281 17.363 6.4068 17.4536C6.35078 17.5442 6.27253 17.619 6.17946 17.6709C6.0864 17.7228 5.98162 17.75 5.87507 17.75ZM1.88645 16.5H4.8637L3.37507 13.5227L1.88645 16.5Z"
+      fill="#555761"
+    />
+    <path
+      d="M16.5001 6.5H12.7501C12.4187 6.49962 12.1009 6.3678 11.8666 6.13346C11.6323 5.89913 11.5005 5.5814 11.5001 5.25V1.5C11.5005 1.1686 11.6323 0.850876 11.8666 0.616538C12.1009 0.3822 12.4187 0.250382 12.7501 0.250001H16.5001C16.8315 0.250382 17.1492 0.3822 17.3835 0.616538C17.6179 0.850876 17.7497 1.1686 17.7501 1.5V5.25C17.7497 5.5814 17.6179 5.89913 17.3835 6.13346C17.1492 6.3678 16.8315 6.49962 16.5001 6.5ZM12.7501 1.5V5.25H16.5007L16.5001 1.5H12.7501Z"
+      fill="#555761"
+    />
+    <path
+      d="M3.37507 6.5C2.75701 6.5 2.15282 6.31672 1.63892 5.97334C1.12501 5.62996 0.724473 5.14191 0.487949 4.57089C0.251425 3.99987 0.18954 3.37153 0.310119 2.76534C0.430697 2.15915 0.728325 1.60233 1.16536 1.16529C1.6024 0.728254 2.15922 0.430626 2.76542 0.310047C3.37161 0.189469 3.99994 0.251354 4.57096 0.487878C5.14198 0.724402 5.63003 1.12494 5.97341 1.63884C6.31679 2.15275 6.50007 2.75693 6.50007 3.375C6.4991 4.2035 6.16954 4.99779 5.5837 5.58363C4.99786 6.16947 4.20357 6.49902 3.37507 6.5ZM3.37507 1.5C3.00423 1.5 2.64172 1.60997 2.33338 1.816C2.02504 2.02202 1.78471 2.31486 1.6428 2.65747C1.50088 3.00008 1.46375 3.37708 1.5361 3.7408C1.60845 4.10451 1.78702 4.4386 2.04925 4.70083C2.31147 4.96305 2.64556 5.14163 3.00928 5.21397C3.37299 5.28632 3.74999 5.24919 4.0926 5.10728C4.43522 4.96536 4.72805 4.72504 4.93408 4.4167C5.14011 4.10835 5.25007 3.74584 5.25007 3.375C5.24953 2.87789 5.05181 2.40129 4.70029 2.04978C4.34878 1.69827 3.87219 1.50055 3.37507 1.5Z"
+      fill="#555761"
+    />
+  </svg>
+);
+
+export const EntityTypeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/EntityTypeIcon/EntityTypeIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;

package/src/icons/GithubIcon/GithubIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.99982 0.250052C6.9225 0.250332 4.91303 0.989665 3.33088 2.3358C1.74873 3.68193 0.697109 5.54705 0.364134 7.59751C0.0311591 9.64798 0.438552 11.75 1.51344 13.5276C2.58832 15.3052 4.26058 16.6424 6.23107 17.3001C6.66857 17.3813 6.85607 17.1126 6.85607 16.8813C6.85607 16.6501 6.85607 16.1251 6.85607 15.3938C4.42482 15.9188 3.91232 14.2188 3.91232 14.2188C3.74135 13.6831 3.38152 13.2277 2.89982 12.9376C2.10607 12.4001 2.96232 12.4063 2.96232 12.4063C3.23957 12.4455 3.50421 12.5475 3.73601 12.7045C3.96782 12.8616 4.16066 13.0696 4.29982 13.3126C4.54191 13.7468 4.94653 14.0671 5.42471 14.203C5.9029 14.339 6.4155 14.2794 6.84982 14.0376C6.88511 13.5941 7.08061 13.1786 7.39982 12.8688C5.46232 12.6438 3.41857 11.8938 3.41857 8.5438C3.4044 7.67374 3.72683 6.83182 4.31857 6.1938C4.05073 5.44017 4.08205 4.61254 4.40607 3.8813C4.40607 3.8813 5.13732 3.6438 6.81232 4.77505C8.24449 4.3844 9.75515 4.3844 11.1873 4.77505C12.8561 3.6438 13.5873 3.8813 13.5873 3.8813C13.9113 4.61254 13.9427 5.44017 13.6748 6.1938C14.2666 6.83182 14.589 7.67374 14.5748 8.5438C14.5748 11.9063 12.5311 12.6438 10.5811 12.8626C10.79 13.0743 10.951 13.3283 11.0535 13.6075C11.1559 13.8868 11.1973 14.1847 11.1748 14.4813C11.1748 15.6501 11.1748 16.5938 11.1748 16.8813C11.1748 17.1688 11.3311 17.3876 11.7998 17.3001C13.7729 16.6416 15.4469 15.3018 16.5216 13.521C17.5963 11.7401 18.0015 9.63459 17.6644 7.58204C17.3273 5.5295 16.2701 3.66416 14.6822 2.32053C13.0944 0.976903 11.0798 0.242866 8.99982 0.250052Z"
+      fill="#555761"
+    />
+  </svg>
+);
+
+export const GithubIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/GithubIcon/GithubIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;

package/src/icons/GraphIcon/GraphIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M13.125 4.25V0.75H9.625V2.0625H7.875C7.64302 2.06277 7.42061 2.15504 7.25658 2.31908C7.09254 2.48311 7.00027 2.70552 7 2.9375V5.5625H4.375V4.25H0.875V7.75H4.375V6.4375H7V9.0625C7.00027 9.29448 7.09254 9.51689 7.25658 9.68092C7.42061 9.84496 7.64302 9.93723 7.875 9.9375H9.625V11.25H13.125V7.75H9.625V9.0625H7.875V2.9375H9.625V4.25H13.125ZM3.5 6.875H1.75V5.125H3.5V6.875ZM10.5 8.625H12.25V10.375H10.5V8.625ZM10.5 1.625H12.25V3.375H10.5V1.625Z"
+      fill="#0E8450"
+    />
+  </svg>
+);
+
+export const GraphIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/GraphIcon/GraphIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '12px'};
+  width: ${({ size }) => size || '14px'};
+`;