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

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

@@ -0,0 +1,127 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogTableViewRow = 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 CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
+const useCatalogTableViewRow_1 = require("../../../core/hooks/catalog/useCatalogTableViewRow");
+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 CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, columns = baseColumns, }) => {
+    const { getEntityDetailsLink } = (0, useCatalogTableViewRow_1.useCatalogTableViewRow)({
+        entityKey: entity.key,
+        entityType: entity.type,
+        catalogConfig,
+        entitiesCatalogConfig,
+    });
+    const handleRowClick = () => {
+        window.location.assign(getEntityDetailsLink());
+    };
+    return (react_1.default.createElement(TableRow, { key: entity.id, columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto'), onClick: () => handleRowClick() }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
+};
+exports.CatalogTableViewRow = CatalogTableViewRow;
+const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;
+const TableRow = 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(' ')};
+  border-bottom: 1px solid var(--catalog-table-border-color);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: var(--catalog-table-row-hover-bg-color);
+  }
+`;
+const TableCell = styled_components_1.default.div `
+  padding: var(--catalog-table-cell-padding);
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &.tooltip-cell-container {
+    overflow: visible;
+  }
+`;
+//# sourceMappingURL=CatalogTableViewRow.js.map

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

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

package/lib/components/Catalog/CatalogTableView/CatalogTagsCell.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.CatalogTagsCell = CatalogTagsCell;
+const react_1 = __importDefault(require("react"));
+const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
+function CatalogTagsCell({ entity }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogTableView/CatalogTagsCell" },
+        react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { "data-testid": "catalog-tags-cell", items: entity.tags || [], showPlaceholder: false, tagProps: {
+                style: {
+                    fontSize: 'var(--font-size-base)',
+                    borderRadius: 'var(--border-radius)',
+                },
+                borderless: true,
+                color: 'grey',
+            } })));
+}
+//# sourceMappingURL=CatalogTagsCell.js.map

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export type CatalogUserEntityCellProps = {
+    name: string;
+    email: string;
+};
+export declare function CatalogUserEntityCell({ name, email }: CatalogUserEntityCellProps): React.JSX.Element;
+export declare const Email: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Email = void 0;
+exports.CatalogUserEntityCell = CatalogUserEntityCell;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
+const extractInitials = (name) => {
+    return name
+        .split(' ')
+        .map((n) => n[0])
+        .join('');
+};
+function CatalogUserEntityCell({ name, email }) {
+    return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogUserEntityCell" },
+        react_1.default.createElement(Avatar, null, extractInitials(name)),
+        react_1.default.createElement(EntityTitleContent, null,
+            react_1.default.createElement(EntityTitle, null,
+                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, name)),
+            react_1.default.createElement(exports.Email, null,
+                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, email)))));
+}
+const EntityTitleCellWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+`;
+const Avatar = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--catalog-avatar-bg-color);
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 400;
+`;
+const EntityTitleContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  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;
+`;
+exports.Email = 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(--color-blue-6);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;
+//# sourceMappingURL=CatalogUserEntityCell.js.map

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

@@ -0,0 +1,9 @@
+import { JSX } from 'react';
+import { TagProps } from '../Tag/Tag';
+export type CatalogTagsWithTooltipProps = {
+    items: string[];
+    itemsToShow?: number;
+    showPlaceholder?: boolean;
+    tagProps?: TagProps;
+};
+export declare function CatalogTagsWithTooltip({ items, itemsToShow, showPlaceholder, tagProps, }: CatalogTagsWithTooltipProps): JSX.Element | null;

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogTagsWithTooltip = CatalogTagsWithTooltip;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../../core/constants");
+const Tag_1 = require("../Tag/Tag");
+const CatalogHighlight_1 = require("./CatalogHighlight");
+const Tooltip_1 = require("../Tooltip/Tooltip");
+function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true, tagProps, }) {
+    if (!items || items.length === 0) {
+        if (showPlaceholder) {
+            return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
+                react_1.default.createElement(Tag_1.Tag, { style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
+        }
+        return null;
+    }
+    if (items.length <= itemsToShow) {
+        return (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px", disabled: items.join(', ').length <= constants_1.CATALOG_TAG_MAX_LENGTH },
+            react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
+                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))))));
+    }
+    const displayedItems = items.slice(0, itemsToShow);
+    const remainingCount = items.length - itemsToShow;
+    return (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
+        react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
+            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
+                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
+            react_1.default.createElement(MoreTagsButton, null,
+                "+",
+                remainingCount,
+                " more"))));
+}
+const CatalogTagsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--catalog-tags-wrapper-gap);
+`;
+const MoreTagsButton = styled_components_1.default.span `
+  font-size: var(--catalog-tags-more-button-font-size);
+  margin-left: var(--catalog-tags-more-button-margin-left);
+`;
+//# sourceMappingURL=CatalogTagsWithTooltip.js.map

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CatalogViewMode } from '../../core';
+export type CatalogViewModeToggleProps = {
+    viewMode: CatalogViewMode;
+    onViewModeChange: (mode: CatalogViewMode) => void;
+};
+export declare function CatalogViewModeToggle({ viewMode: initialViewMode, onViewModeChange, }: CatalogViewModeToggleProps): React.JSX.Element;

package/lib/components/Catalog/CatalogViewModeToggle.js

@@ -0,0 +1,67 @@
+"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.CatalogViewModeToggle = CatalogViewModeToggle;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const TableIcon_1 = require("../../icons/TableIcon/TableIcon");
+const CardsIcon_1 = require("../../icons/CardsIcon/CardsIcon");
+function useViewMode(initialViewMode) {
+    const [viewMode, setViewMode] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setViewMode(initialViewMode);
+    }, [initialViewMode]);
+    return viewMode;
+}
+function CatalogViewModeToggle({ viewMode: initialViewMode, onViewModeChange, }) {
+    const viewMode = useViewMode(initialViewMode);
+    return (react_1.default.createElement(ViewModeToggleWrapper, { "data-component-name": "Catalog/CatalogViewModeToggle" },
+        react_1.default.createElement(ViewModeButton, { className: viewMode === 'table' ? 'active' : '', onClick: () => onViewModeChange('table') },
+            react_1.default.createElement(TableIcon_1.TableIcon, { size: "var(--catalog-view-mode-table-icon-size)" })),
+        react_1.default.createElement(ViewModeButton, { className: viewMode === 'cards' ? 'active' : '', onClick: () => onViewModeChange('cards') },
+            react_1.default.createElement(CardsIcon_1.CardsIcon, { size: "var(--catalog-view-mode-cards-icon-size)" }))));
+}
+const ViewModeToggleWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: var(--catalog-view-mode-toggle-gap);
+`;
+const ViewModeButton = styled_components_1.default.button `
+  width: var(--catalog-view-mode-button-width);
+  height: var(--catalog-view-mode-button-height);
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--catalog-view-mode-button-border-radius);
+
+  &.active {
+    background-color: var(--catalog-view-mode-toggle-active-bg-color);
+  }
+`;
+//# sourceMappingURL=CatalogViewModeToggle.js.map

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

@@ -0,0 +1 @@
+export declare const catalog: import("styled-components").FlattenSimpleInterpolation;

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

@@ -0,0 +1 @@
+export declare const catalogDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Catalog/variables.dark.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.catalogDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.catalogDarkMode = (0, styled_components_1.css) `
+  --catalog-avatar-bg-color: #3b3c45;
+`;
+//# sourceMappingURL=variables.dark.js.map