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

package/lib/components/Catalog/CatalogSelector.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogSelect = exports.CatalogSelectLabel = exports.CatalogSelectWrapper = void 0;
+exports.CatalogSelector = CatalogSelector;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const Select_1 = require("../../components/Select/Select");
+const core_1 = require("../../core");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption, }) {
+    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const pathPrefix = (0, core_1.getPathPrefix)();
+    const options = catalogSwitcherItems.map((item) => ({
+        value: item.slug,
+        element: translate(item.labelTranslationKey),
+        label: translate(item.labelTranslationKey),
+    }));
+    const selectedCatalogItem = catalogSwitcherItems.find((item) => item.selected);
+    return (react_1.default.createElement(exports.CatalogSelectWrapper, { "data-component-name": "Catalog/CatalogSelector" },
+        react_1.default.createElement(exports.CatalogSelectLabel, null, "Catalogs"),
+        react_1.default.createElement(exports.CatalogSelect, { value: selectedCatalogItem === null || selectedCatalogItem === void 0 ? void 0 : selectedCatalogItem.slug, options: options, onChange: (value) => {
+                navigate(`${pathPrefix}/catalogs/${value}`);
+                setSearchQuery('');
+                setSortOption(null);
+            }, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--catalog-select-icon-color)" }) })));
+}
+exports.CatalogSelectWrapper = styled_components_1.default.div `
+  margin-top: var(--catalog-select-wrapper-margin-top);
+  margin-bottom: var(--catalog-select-wrapper-margin-bottom);
+`;
+exports.CatalogSelectLabel = styled_components_1.default.label `
+  display: block;
+  margin-bottom: var(--catalog-select-label-margin-bottom);
+  font-weight: var(--catalog-select-label-font-weight);
+  font-size: var(--catalog-select-label-font-size);
+  line-height: var(--catalog-select-label-line-height);
+`;
+exports.CatalogSelect = (0, styled_components_1.default)(Select_1.Select) `
+  border-radius: var(--catalog-select-border-radius);
+  --select-input-padding: var(--catalog-select-input-padding);
+`;
+//# sourceMappingURL=CatalogSelector.js.map

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortOption } from '../../core/types';
+export type CatalogSortButtonProps = {
+    onSortChange: (sortOption: SortOption | null) => void;
+    currentSort?: SortOption | null;
+};
+export declare function CatalogSortButton({ onSortChange, currentSort, }: {
+    onSortChange: (sortOption: SortOption | null) => void;
+    currentSort?: SortOption | null;
+}): React.JSX.Element;

package/lib/components/Catalog/CatalogSortButton.js

@@ -0,0 +1,71 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogSortButton = CatalogSortButton;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AscSortIcon_1 = require("../../icons/AscSortIcon/AscSortIcon");
+const DescSortIcon_1 = require("../../icons/DescSortIcon/DescSortIcon");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+function CatalogSortButton({ onSortChange, currentSort, }) {
+    const toggleSort = (0, react_1.useCallback)((field) => {
+        const newSort = currentSort === `-${field}` ? field : `-${field}`;
+        onSortChange(newSort);
+    }, [currentSort, onSortChange]);
+    return (react_1.default.createElement(CatalogSortButtonWrapper, { "data-component-name": "Catalog/CatalogSortButton", trigger: react_1.default.createElement(SortTrigger, null,
+            react_1.default.createElement(SortIconWrapper, null, currentSort === '-title' ? react_1.default.createElement(DescSortIcon_1.DescSortIcon, null) : react_1.default.createElement(AscSortIcon_1.AscSortIcon, null)),
+            react_1.default.createElement(SortText, null, "Sort")), alignment: "end" },
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, null,
+            react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => toggleSort('title') }, currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A'))));
+}
+const CatalogSortButtonWrapper = (0, styled_components_1.default)(Dropdown_1.Dropdown) ``;
+const SortTrigger = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-sort-trigger-gap);
+  padding: var(--catalog-sort-trigger-padding);
+  border-radius: var(--catalog-sort-trigger-border-radius);
+  cursor: pointer;
+  &:hover {
+    background-color: var(--catalog-sort-trigger-hover-bg-color);
+  }
+`;
+const SortIconWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--catalog-sort-icon-color);
+`;
+const SortText = styled_components_1.default.span `
+  font-size: var(--catalog-sort-text-font-size);
+  color: var(--catalog-sort-text-color);
+  font-weight: var(--catalog-sort-text-font-weight);
+`;
+//# sourceMappingURL=CatalogSortButton.js.map

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export type CatalogDomainsCellProps = {
+    domains: string[];
+};
+export declare function CatalogDomainsCell({ domains }: CatalogDomainsCellProps): React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogDomainsCell.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogDomainsCell = CatalogDomainsCell;
+const react_1 = __importDefault(require("react"));
+const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
+function CatalogDomainsCell({ domains }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogTableView/CatalogDomainsCell" },
+        react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { "data-testid": "catalog-domains-cell", items: domains, showPlaceholder: false, tagProps: {
+                style: {
+                    fontSize: 'var(--font-size-base)',
+                    backgroundColor: 'transparent',
+                    borderRadius: 'var(--border-radius-xl)',
+                },
+            } })));
+}
+//# sourceMappingURL=CatalogDomainsCell.js.map

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BffCatalogRelatedEntity } from '../../../core/types';
+export type CatalogEntityCellProps = {
+    entity: BffCatalogRelatedEntity;
+};
+export declare function CatalogEntityCell({ entity }: CatalogEntityCellProps): React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogEntityCell.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityCell = CatalogEntityCell;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
+const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
+function CatalogEntityCell({ entity }) {
+    return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityCell" },
+        react_1.default.createElement(IconContainer, null,
+            react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+        react_1.default.createElement(EntityTitleContent, null,
+            react_1.default.createElement(EntityTitle, null,
+                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
+            entity.summary && (react_1.default.createElement(EntitySummary, null,
+                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.summary))))));
+}
+const EntityTitleCellWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-table-title-cell-gap);
+  max-width: 100%;
+`;
+const IconContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-table-icon-width);
+  height: var(--catalog-table-icon-height);
+  border-radius: var(--catalog-table-icon-border-radius);
+  background-color: var(--catalog-table-icon-bg-color);
+  flex-shrink: 0;
+  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
+`;
+const EntityTitleContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  max-width: calc(
+    100% - var(--catalog-table-entity-title-content-offset)
+  ); /* Account for icon width (30px) + gap (12px) */
+  overflow: hidden;
+`;
+const EntityTitle = styled_components_1.default.div `
+  font-size: var(--catalog-table-entity-title-font-size);
+  line-height: var(--catalog-table-entity-title-line-height);
+  font-weight: var(--catalog-table-entity-title-font-weight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const EntitySummary = styled_components_1.default.div `
+  font-size: var(--catalog-table-entity-summary-font-size);
+  line-height: var(--catalog-table-entity-summary-line-height);
+  color: var(--catalog-table-description-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;
+//# sourceMappingURL=CatalogEntityCell.js.map

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export type CatalogOwnersCellProps = {
+    owners: string[];
+};
+export declare function CatalogOwnersCell({ owners }: CatalogOwnersCellProps): React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogOwnersCell.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogOwnersCell = CatalogOwnersCell;
+const react_1 = __importDefault(require("react"));
+const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
+function CatalogOwnersCell({ owners }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogTableView/CatalogOwnersCell" },
+        react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { "data-testid": "catalog-owners-cell", items: owners, showPlaceholder: false, tagProps: {
+                style: {
+                    fontSize: 'var(--font-size-base)',
+                    backgroundColor: 'transparent',
+                    borderRadius: 'var(--border-radius-xl)',
+                },
+            } })));
+}
+//# sourceMappingURL=CatalogOwnersCell.js.map

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SortOption } from '../../../core/types';
+import { BaseEntity, CatalogColumn } from './CatalogTableView';
+export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
+    column: CatalogColumn<T>;
+    setSortOption: (sortOption: SortOption | null) => void;
+    currentSortOption?: SortOption | null;
+    handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+    isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+export declare const CatalogTableHeaderCell: <T extends BaseEntity>({ column, handleSortClick, isColumnSorted, setSortOption, }: CatalogTableHeaderCellProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableHeaderCell.js

@@ -0,0 +1,101 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogTableHeaderCell = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const CaretDownIcon_1 = require("../../../icons/CaretDownIcon/CaretDownIcon");
+const CaretUpIcon_1 = require("../../../icons/CaretUpIcon/CaretUpIcon");
+const useCatalogTableHeaderCellActions_1 = require("../../../core/hooks/catalog/useCatalogTableHeaderCellActions");
+const CatalogTableHeaderCell = ({ column, handleSortClick, isColumnSorted, setSortOption, }) => {
+    const { handleCellClick, sortKey, isUpActive, isDownActive } = (0, useCatalogTableHeaderCellActions_1.useCatalogTableHeaderCellActions)({
+        column,
+        handleSortClick,
+        isColumnSorted,
+        setSortOption,
+    });
+    return (react_1.default.createElement(TableHeaderCellWrapper, { key: column.key, "data-component-name": "Catalog/CatalogTableView/CatalogTableHeaderCell", onClick: handleCellClick, "$sortable": Boolean(column.sortable && sortKey) },
+        react_1.default.createElement(HeaderContent, null,
+            react_1.default.createElement(HeaderTitle, null, column.title),
+            column.sortable && sortKey && (react_1.default.createElement(SortIndicator, null,
+                react_1.default.createElement(SortArrow, { "$isActive": isUpActive },
+                    react_1.default.createElement(CaretUpIcon_1.CaretUpIcon, { size: "9px", color: isUpActive
+                            ? 'var(--catalog-table-header-sort-icon-color-active)'
+                            : 'var(--catalog-table-header-sort-icon-color-inactive)' })),
+                react_1.default.createElement(SortArrow, { "$isActive": isDownActive },
+                    react_1.default.createElement(CaretDownIcon_1.CaretDownIcon, { size: "9px", color: isDownActive
+                            ? 'var(--catalog-table-header-sort-icon-color-active)'
+                            : 'var(--catalog-table-header-sort-icon-color-inactive)' })))))));
+};
+exports.CatalogTableHeaderCell = CatalogTableHeaderCell;
+const TableHeaderCellWrapper = styled_components_1.default.div `
+  padding: var(--catalog-table-header-cell-padding);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+  ${(props) => props.$sortable &&
+    (0, styled_components_1.css) `
+      cursor: pointer;
+      user-select: none;
+    `}
+`;
+const HeaderContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+const HeaderTitle = styled_components_1.default.span `
+  flex: 1;
+`;
+const SortIndicator = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  gap: 2px;
+  color: var(--catalog-table-header-sort-indicator-color);
+`;
+const SortArrow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 9px;
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+
+  svg {
+    display: block;
+  }
+
+  ${(props) => props.$isActive &&
+    (0, styled_components_1.css) `
+      background-color: var(--catalog-table-header-sort-arrow-bg-active);
+    `}
+`;
+//# sourceMappingURL=CatalogTableHeaderCell.js.map

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

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { EntityType, SortOption } from '../../../core/types';
+export type BaseEntity = {
+    id: string;
+    key: string;
+    type: string;
+    title: string;
+    summary?: string | null;
+};
+export type CatalogTableViewProps<T extends BaseEntity> = {
+    entities: T[];
+    entitiesCatalogConfig?: EntitiesCatalogConfig;
+    catalogConfig: CatalogEntityConfig;
+    columns?: CatalogColumn<T>[];
+    setSortOption: (sortOption: SortOption | null) => void;
+    currentSortOption?: SortOption | null;
+    handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+    isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+export type CatalogColumn<T> = {
+    key: string;
+    title: string;
+    render: (entity: T) => ReactNode;
+    width?: string;
+    minWidth?: string;
+    sortable?: boolean;
+    sortKey?: string;
+};
+export declare const getEntityTagColor: (type: EntityType) => string;
+export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, }: CatalogTableViewProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogTableView = exports.getEntityTagColor = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../../components/Tag/Tag");
+const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogOwnersCell");
+const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
+const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
+const CatalogTableHeaderCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableHeaderCell");
+const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
+const CatalogTableViewRow_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableViewRow");
+const getEntityTagColor = (type) => {
+    switch (type) {
+        case 'service':
+            return 'blue';
+        case 'domain':
+            return 'grass';
+        case 'team':
+            return 'purple';
+        case 'user':
+            return 'yellow';
+        case 'api-description':
+            return 'sky';
+        default:
+            const exhaustiveCheck = type;
+            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+    }
+};
+exports.getEntityTagColor = getEntityTagColor;
+const baseColumns = [
+    {
+        key: 'entity',
+        title: 'Entity',
+        render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
+        width: '3fr',
+        minWidth: '250px',
+        sortable: true,
+        sortKey: 'title',
+    },
+    {
+        key: 'type',
+        title: 'Type',
+        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, exports.getEntityTagColor)(entity.type) }, entity.type)),
+        width: '2fr',
+        minWidth: '120px',
+        sortable: true,
+        sortKey: 'type',
+    },
+    {
+        key: 'domains',
+        title: 'Domains',
+        render: (entity) => {
+            var _a;
+            return (react_1.default.createElement(CatalogDomainsCell_1.CatalogDomainsCell, { domains: ((_a = entity.domains) === null || _a === void 0 ? void 0 : _a.map((domain) => domain.title)) || [] }));
+        },
+        width: '2fr',
+        minWidth: '150px',
+    },
+    {
+        key: 'owners',
+        title: 'Owners',
+        render: (entity) => {
+            var _a;
+            return (react_1.default.createElement(CatalogOwnersCell_1.CatalogOwnersCell, { owners: ((_a = entity.owners) === null || _a === void 0 ? void 0 : _a.map((owner) => owner.title)) || [] }));
+        },
+        width: '2fr',
+        minWidth: '150px',
+    },
+    {
+        key: 'tags',
+        title: 'Tags',
+        render: (entity) => react_1.default.createElement(CatalogTagsCell_1.CatalogTagsCell, { entity: entity }),
+        width: '2fr',
+        minWidth: '120px',
+    },
+];
+const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, }) => {
+    return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView" },
+        react_1.default.createElement(CatalogTableHeader, { columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto') }, columns.map((column) => (react_1.default.createElement(CatalogTableHeaderCell_1.CatalogTableHeaderCell, { key: column.key, column: column, setSortOption: setSortOption, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
+        react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns }))))));
+};
+exports.CatalogTableView = CatalogTableView;
+const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;
+const CatalogTableWrapper = styled_components_1.default.div `
+  width: 100%;
+  border-bottom: 1px solid var(--catalog-table-border-color);
+  margin-bottom: var(--spacing-xl);
+  margin-top: var(--spacing-xl);
+`;
+const CatalogTableHeader = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: ${({ columnsWidths, columnsMinWidths }) => columnsWidths
+    .map((width, index) => columnsMinWidths[index] !== 'auto' ? `minmax(${columnsMinWidths[index]}, ${width})` : width)
+    .join(' ')};
+  background: var(--catalog-table-header-bg-color);
+  font-weight: var(--catalog-table-header-font-weight);
+`;
+//# sourceMappingURL=CatalogTableView.js.map

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

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { EntityType } from '../../../core/types';
+export type BaseEntity = {
+    id: string;
+    key: string;
+    type: string;
+    title: string;
+    summary?: string | null;
+};
+export type CatalogTableViewRowProps<T extends BaseEntity> = {
+    entity: T;
+    entitiesCatalogConfig?: EntitiesCatalogConfig;
+    catalogConfig: CatalogEntityConfig;
+    columns?: CatalogColumn<T>[];
+};
+export type CatalogColumn<T> = {
+    key: string;
+    title: string;
+    render: (entity: T) => ReactNode;
+    width?: string;
+    minWidth?: string;
+    sortable?: boolean;
+    sortKey?: string;
+};
+export declare const getEntityTagColor: (type: EntityType) => string;
+export declare const CatalogTableViewRow: <T extends BaseEntity>({ entity, entitiesCatalogConfig, catalogConfig, columns, }: CatalogTableViewRowProps<T>) => React.JSX.Element;