@redocly/theme 0.55.0-rc.2 → 0.55.0

package/lib/components/Admonition/Admonition.js

@@ -51,6 +51,10 @@ const Content = styled_components_1.default.div `
   & > p:first-child {
     margin-top: 0;
   }
+
+  & > p:last-child {
+    margin-bottom: 0;
+  }
 `;
 const AdmonitionWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,6 @@
+import { BreadcrumbItem } from '@redocly/config';
 import type { JSX } from 'react';
 export declare function Breadcrumbs(props: {
     className?: string;
+    additionalBreadcrumbs?: BreadcrumbItem[];
 }): JSX.Element | null;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -10,8 +10,9 @@ const hooks_1 = require("../../core/hooks");
 const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
 function Breadcrumbs(props) {
     const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const fileBreadcrumbs = useBreadcrumbs();
+    const breadcrumbs = [...fileBreadcrumbs, ...(props.additionalBreadcrumbs || [])];
     const telemetry = useTelemetry();
-    const breadcrumbs = useBreadcrumbs();
     if (breadcrumbs.length === 0) {
         return null;
     }

package/lib/components/Button/Button.d.ts

@@ -18,6 +18,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     title?: string;
     tabIndex?: number;
     onClick?: (e?: any) => void;
+    ref?: React.Ref<HTMLButtonElement>;
     type?: 'button' | 'submit' | 'reset';
 }
 export declare function generateClassName({ variant, tone, size, extraClass, }: ButtonProps): string;

package/lib/components/Catalog/Catalog.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig } from '@redocly/config';
+import { BffCatalogEntityList } from '../../core/types';
+import { CatalogSwitcherItem } from '../../core';
+export type CatalogProps = {
+    catalogConfig: CatalogEntityConfig;
+    entitiesTypes: string[];
+    initialEntitiesList?: BffCatalogEntityList;
+    catalogSwitcherItems: CatalogSwitcherItem[];
+};
+export declare function Catalog(props: CatalogProps): JSX.Element;

package/lib/components/Catalog/Catalog.js

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Catalog = Catalog;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const H3_1 = require("../../components/Typography/H3");
+const FilterContent_1 = require("../../components/Filter/FilterContent");
+const Sidebar_1 = require("../../components/Sidebar/Sidebar");
+const CatalogSelector_1 = require("../../components/Catalog/CatalogSelector");
+const SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
+const CounterTag_1 = require("../../components/Tags/CounterTag");
+const FilterInput_1 = require("../../components/Filter/FilterInput");
+const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
+const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
+const CatalogEntities_1 = require("../../components/Catalog/CatalogEntities");
+function Catalog(props) {
+    const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
+    const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/Catalog" },
+            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: false, filterValuesCasing: "sentence" }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
+            react_1.default.createElement(CatalogPageContent, null,
+                react_1.default.createElement(CatalogPageDescription, null,
+                    react_1.default.createElement(CatalogTitleWrapper, null,
+                        react_1.default.createElement(CatalogTitle, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey },
+                            translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey),
+                            ' '),
+                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, entitiesCounter)),
+                    react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey))),
+                react_1.default.createElement(CatalogActionsRow, null,
+                    react_1.default.createElement(CatalogSearchInputWrapper, null,
+                        react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm) })),
+                    react_1.default.createElement(CatalogControlsWrapper, null,
+                        react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
+                        react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode }))),
+                react_1.default.createElement(CatalogEntities_1.CatalogEntities, { catalogConfig: catalogConfig, excludedEntities: catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.excludes, filterQuery: filterQuery, entitiesTypes: entitiesTypes, sortOption: sortOption, searchQuery: searchQuery, viewMode: viewMode, setEntitiesCounter: setEntitiesCounter, initialEntitiesList: initialEntitiesList, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))));
+}
+const CatalogActionsRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const CatalogControlsWrapper = styled_components_1.default.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_components_1.default.main `
+  flex: 1;
+  width: var(--catalog-page-content-width-mobile);
+  margin: var(--catalog-page-content-margin-mobile);
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    width: var(--catalog-page-content-width-desktop);
+    padding: var(--catalog-page-padding);
+  }
+`;
+const CatalogTitleWrapper = styled_components_1.default.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 = (0, styled_components_1.default)(H3_1.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_components_1.default.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_components_1.default.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: ${utils_1.breakpoints.medium}) {
+    flex-direction: row;
+    padding: 0;
+  }
+`;
+const CatalogPageDescription = styled_components_1.default.div `
+  margin: var(--catalog-heading-margin);
+  display: var(--catalog-page-description-display-mobile);
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: var(--catalog-page-description-display-desktop);
+  }
+`;
+const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
+  display: var(--catalog-sidebar-display-mobile);
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: var(--catalog-sidebar-display-desktop);
+  }
+  --menu-container-padding-top: var(--catalog-sidebar-menu-container-padding-top);
+
+  ${Sidebar_1.SidebarHeader} {
+    border: none;
+  }
+`;
+const CatalogSearchInputWrapper = styled_components_1.default.div `
+  width: var(--catalog-search-input-wrapper-width);
+`;
+//# sourceMappingURL=Catalog.js.map

package/lib/components/Catalog/CatalogActionsRow.d.ts

@@ -0,0 +1,15 @@
+import React, { JSX } from 'react';
+import { SortOption, CatalogViewMode } from '../../core/types';
+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 declare function CatalogActionsRow({ searchQuery, setSearchQuery, sortOption, setSortOption, viewMode, onViewModeChange, style, }: CatalogActionsRowProps): JSX.Element;
+export declare const CatalogActionsRowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogControlsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogSearchInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Catalog/CatalogActionsRow.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogSearchInputWrapper = exports.CatalogControlsWrapper = exports.CatalogActionsRowWrapper = void 0;
+exports.CatalogActionsRow = CatalogActionsRow;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterInput_1 = require("../../components/Filter/FilterInput");
+const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
+const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
+function CatalogActionsRow({ searchQuery, setSearchQuery, sortOption, setSortOption, viewMode, onViewModeChange, style, }) {
+    return (react_1.default.createElement(exports.CatalogActionsRowWrapper, { style: style },
+        react_1.default.createElement(exports.CatalogSearchInputWrapper, null,
+            react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm) })),
+        react_1.default.createElement(exports.CatalogControlsWrapper, null,
+            react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
+            viewMode && onViewModeChange && (react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: onViewModeChange })))));
+}
+exports.CatalogActionsRowWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+exports.CatalogControlsWrapper = styled_components_1.default.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);
+`;
+exports.CatalogSearchInputWrapper = styled_components_1.default.div `
+  width: var(--catalog-search-input-wrapper-width);
+`;
+//# sourceMappingURL=CatalogActionsRow.js.map

package/lib/components/Catalog/CatalogCardView/CatalogCard.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig } from '@redocly/config';
+import { BffCatalogEntity } from '../../../core/types';
+export type CatalogCardProps = {
+    entity: BffCatalogEntity;
+    catalogConfig: CatalogEntityConfig;
+};
+export declare function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.Element;

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -0,0 +1,179 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogCard = CatalogCard;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
+const GraphIcon_1 = require("../../../icons/GraphIcon/GraphIcon");
+const ArrowRightIcon_1 = require("../../../icons/ArrowRightIcon/ArrowRightIcon");
+const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
+const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
+const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
+const core_1 = require("../../../core");
+function CatalogCard({ entity, catalogConfig }) {
+    var _a, _b, _c;
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const pathPrefix = (0, core_1.getPathPrefix)();
+    return (react_1.default.createElement(CatalogCardWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCard", onClick: () => {
+            window.location.assign(`${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`);
+            telemetry.send({ type: 'catalog_item.clicked' });
+        } },
+        react_1.default.createElement(CardContent, null,
+            react_1.default.createElement(CardHeader, null,
+                react_1.default.createElement(HeaderIconWrapper, null,
+                    react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+                react_1.default.createElement(CardTitle, null,
+                    react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title))),
+            react_1.default.createElement(CardDescription, null,
+                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = entity.summary) !== null && _a !== void 0 ? _a : '')),
+            react_1.default.createElement(CardMetadataSection, null,
+                react_1.default.createElement(MetadataColumn, null,
+                    react_1.default.createElement(MetadataLabel, null, "Domains:"),
+                    react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_b = entity.domains) === null || _b === void 0 ? void 0 : _b.map((domain) => domain.title)) || [], tagProps: {
+                            style: {
+                                fontSize: 'var(--catalog-card-font-size)',
+                                backgroundColor: 'var(--catalog-card-icon-bg-color)',
+                            },
+                            icon: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: "var(--color-green-8)" }),
+                        } })),
+                react_1.default.createElement(MetadataColumn, null,
+                    react_1.default.createElement(MetadataLabel, null, "Owners:"),
+                    react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_c = entity.owners) === null || _c === void 0 ? void 0 : _c.map((owner) => owner.key)) || [], tagProps: {
+                            style: {
+                                fontSize: 'var(--catalog-card-font-size)',
+                                backgroundColor: 'var(--catalog-card-icon-bg-color)',
+                                borderRadius: 'var(--border-radius-xl)',
+                            },
+                        } })))),
+        react_1.default.createElement(Divider, null),
+        react_1.default.createElement(CardFooter, null,
+            react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: entity.tags || [], tagProps: {
+                    style: {
+                        fontSize: 'var(--catalog-card-font-size)',
+                        borderRadius: 'var(--border-radius)',
+                    },
+                    borderless: true,
+                    color: 'grey',
+                }, itemsToShow: 3 }),
+            react_1.default.createElement(ArrowCircle, null,
+                react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "16px" }),
+                react_1.default.createElement(ArrowUpRightIcon_1.ArrowUpRightIcon, { size: "16px" })))));
+}
+const HeaderIconWrapper = styled_components_1.default.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_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const MetadataLabel = styled_components_1.default.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_components_1.default.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_components_1.default.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_components_1.default.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_1.ArrowRightIcon}, ${ArrowUpRightIcon_1.ArrowUpRightIcon} {
+    position: absolute;
+    transition: opacity 0.2s ease-in-out;
+  }
+`;
+const CardContent = styled_components_1.default.div `
+  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+`;
+const CardFooter = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+`;
+const Divider = styled_components_1.default.div `
+  width: 100%;
+  height: 1px;
+  background-color: var(--catalog-card-divider-color);
+`;
+const CatalogCardWrapper = styled_components_1.default.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_1.ArrowRightIcon} {
+    opacity: 1;
+  }
+  ${ArrowUpRightIcon_1.ArrowUpRightIcon} {
+    opacity: 0;
+  }
+  &:hover {
+    ${ArrowRightIcon_1.ArrowRightIcon} {
+      opacity: 0;
+    }
+    ${ArrowUpRightIcon_1.ArrowUpRightIcon} {
+      opacity: 1;
+    }
+    border-color: var(--catalog-card-border-color-hover);
+  }
+`;
+const CardTitle = styled_components_1.default.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_components_1.default.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%;
+`;
+//# sourceMappingURL=CatalogCard.js.map

package/lib/components/Catalog/CatalogCardView/CatalogCardView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CatalogEntityConfig } from '@redocly/config';
+import { BffCatalogEntity } from '../../../core/types';
+export type CatalogCardViewProps = {
+    entities: BffCatalogEntity[];
+    catalogConfig: CatalogEntityConfig;
+};
+export declare function CatalogCardView({ entities, catalogConfig }: CatalogCardViewProps): React.JSX.Element;

package/lib/components/Catalog/CatalogCardView/CatalogCardView.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogCardView = CatalogCardView;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogCard_1 = require("../../../components/Catalog/CatalogCardView/CatalogCard");
+function CatalogCardView({ entities, catalogConfig }) {
+    return (react_1.default.createElement(CatalogCardsWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCardView" }, entities.map((entity) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: entity.id, entity: entity, catalogConfig: catalogConfig })))));
+}
+const CatalogCardsWrapper = styled_components_1.default.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);
+`;
+//# sourceMappingURL=CatalogCardView.js.map

package/lib/components/Catalog/CatalogEntities.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig } from '@redocly/config';
+import { BffCatalogEntityList, SortOption } from '../../core/types';
+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;
+};
+export declare function CatalogEntities(props: CatalogEntitiesProps): JSX.Element;

package/lib/components/Catalog/CatalogEntities.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntities = CatalogEntities;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../core/hooks");
+const ArrowDownIcon_1 = require("../../icons/ArrowDownIcon/ArrowDownIcon");
+const CatalogCardView_1 = require("../../components/Catalog/CatalogCardView/CatalogCardView");
+const CatalogTableView_1 = require("../../components/Catalog/CatalogTableView/CatalogTableView");
+const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
+const LoadMore_1 = require("../../components/LoadMore/LoadMore");
+const CatalogEntitiesEmptyState_1 = require("../../components/Catalog/CatalogEntitiesEmptyState");
+const LOAD_MORE_THRESHOLD = 10;
+function CatalogEntities(props) {
+    const { catalogConfig, excludedEntities, filterQuery, entitiesTypes, sortOption, searchQuery, viewMode, setEntitiesCounter, setSortOption, handleSortClick, isColumnSorted, } = props;
+    const { useFetchCatalogEntities } = (0, hooks_1.useThemeHooks)();
+    const { initialFilter } = (0, hooks_1.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);
+    (0, react_1.useEffect)(() => {
+        setEntitiesCounter(total || 0);
+    }, [total, setEntitiesCounter]);
+    if (!query.isPending && (!entities || entities.length === 0)) {
+        return react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, null);
+    }
+    return (react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery], "data-component-name": "Catalog/CatalogEntities" },
+        viewMode === 'cards' ? (react_1.default.createElement(CatalogCardView_1.CatalogCardView, { entities: entities, catalogConfig: catalogConfig })) : (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: entities, catalogConfig: catalogConfig, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })),
+        shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
+}
+//# sourceMappingURL=CatalogEntities.js.map

package/lib/components/Catalog/CatalogEntitiesEmptyState.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export declare function CatalogEntitiesEmptyState(): JSX.Element;

package/lib/components/Catalog/CatalogEntitiesEmptyState.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntitiesEmptyState = CatalogEntitiesEmptyState;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function CatalogEntitiesEmptyState() {
+    return (react_1.default.createElement(EmptyStateWrapper, { "data-component-name": "Catalog/CatalogEntitiesEmptyState" },
+        react_1.default.createElement(EmptyStateHeader, null, "No entities yet"),
+        react_1.default.createElement(EmptyStateText, null, "Start by adding your first entity to"),
+        react_1.default.createElement(EmptyStateText, null, "begin building your catalog.")));
+}
+const EmptyStateWrapper = styled_components_1.default.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_components_1.default.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_components_1.default.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;
+`;
+//# sourceMappingURL=CatalogEntitiesEmptyState.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntity.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '../../../core/types';
+export type CatalogEntityProps = {
+    entity: BffCatalogEntity;
+    entitiesCatalogConfig: EntitiesCatalogConfig;
+    catalogConfig: CatalogEntityConfig;
+    initialRelations: BffCatalogRelatedEntityList;
+    mainCatalogLabelTranslationKey?: string;
+    mainCatalogSlug?: string;
+};
+export declare function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, mainCatalogLabelTranslationKey, mainCatalogSlug, }: CatalogEntityProps): React.JSX.Element;