@redocly/theme 0.70.0-next.8 → 0.70.0-next.9

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

@@ -1,101 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTableViewRow = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-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 hooks_1 = require("../../../core/hooks");
-const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
-const Link_1 = require("../../../components/Link/Link");
-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(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: 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, onRowClick = () => { }, }) => {
-    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
-        catalogConfig,
-        entitiesCatalogConfig,
-        revision: entity.revision,
-        version: entity.version,
-    });
-    const link = getEntityDetailsLink({ key: entity.key, type: entity.type });
-    return (react_1.default.createElement(TableRow, { key: entity.id, $columnsWidths: columns.map((column) => column.width || '1fr'), $columnsMinWidths: columns.map((column) => column.minWidth || 'auto'), to: link, onClick: () => onRowClick(entity), style: { color: 'var(--catalog-page-wrapper-text-color)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, 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 TableRow = (0, styled_components_1.default)(Link_1.Link) `
-  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;
-  }
-
-  height: 52px;
-`;
-//# sourceMappingURL=CatalogTableViewRow.js.map

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { 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

@@ -1,22 +0,0 @@
-"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 CatalogTags_1 = require("../../../components/Catalog/CatalogTags");
-function CatalogTagsCell({ entity }) {
-    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogTableView/CatalogTagsCell" },
-        react_1.default.createElement(CatalogTags_1.CatalogTags, { "data-testid": "catalog-tags-cell", items: entity.tags || [], showPlaceholder: false, tagProps: {
-                style: {
-                    fontSize: 'var(--font-size-base)',
-                    borderRadius: 'var(--border-radius)',
-                    margin: 0,
-                },
-                borderless: true,
-                color: 'grey',
-                textTransform: 'none',
-            } })));
-}
-//# sourceMappingURL=CatalogTagsCell.js.map

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

@@ -1,7 +0,0 @@
-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/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

@@ -1,49 +0,0 @@
-"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 CatalogAvatar_1 = require("../../../components/Catalog/CatalogAvatar");
-function CatalogUserEntityCell({ name, email }) {
-    return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogUserEntityCell" },
-        react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: name, size: "medium" }),
-        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 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-user-entity-cell-email-font-size);
-  line-height: var(--catalog-user-entity-cell-email-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/CatalogTags.d.ts

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

package/lib/components/Catalog/CatalogTags.js

@@ -1,63 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTags = CatalogTags;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../../core/constants");
-const Tag_1 = require("../../components/Tag/Tag");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
-const hooks_1 = require("../../core/hooks");
-const CatalogAvatar_1 = require("../../components/Catalog/CatalogAvatar");
-function CatalogTags({ items, itemsToShow = 1, showPlaceholder = false, showAvatars, tagProps, maxItemLength = constants_1.CATALOG_TAG_MAX_LENGTH, }) {
-    var _a;
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    if (!items || items.length === 0) {
-        if (showPlaceholder) {
-            return (react_1.default.createElement(CatalogTagsNotConnectedWrapper, { "data-component-name": "Catalog/CatalogTags" }, translate('catalog.notConnected', 'Not connected')));
-        }
-        return null;
-    }
-    const maxLength = showAvatars || (tagProps === null || tagProps === void 0 ? void 0 : tagProps.icon) ? maxItemLength - 3 : maxItemLength;
-    const isFirstItemTruncated = ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.length) > maxLength;
-    const anyItemHidden = items.length > itemsToShow;
-    const shouldUseVariantWithTooltip = anyItemHidden || isFirstItemTruncated;
-    if (shouldUseVariantWithTooltip) {
-        const displayedItems = items.slice(0, itemsToShow);
-        const remainingCount = items.length - itemsToShow;
-        return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog" },
-            react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTags" },
-                displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
-                    icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
-                    style: Object.assign(Object.assign({}, tagProps === null || tagProps === void 0 ? void 0 : tagProps.style), { paddingLeft: 'var(--catalog-tags-tag-left-padding)' }),
-                }), { textTransform: "none", maxLength: maxLength }),
-                    react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
-                remainingCount > 0 && react_1.default.createElement(MoreTagsButton, null,
-                    "+ ",
-                    remainingCount))));
-    }
-    return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTags" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
-        icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
-        style: Object.assign(Object.assign({}, tagProps === null || tagProps === void 0 ? void 0 : tagProps.style), { paddingLeft: 'var(--catalog-tags-tag-left-padding)' }),
-    }), { maxLength: maxLength }),
-        react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item))))));
-}
-const CatalogTagsWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: var(--catalog-tags-row-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);
-`;
-const CatalogTagsNotConnectedWrapper = styled_components_1.default.span `
-  font-size: var(--catalog-tags-not-connected-font-size);
-  line-height: var(--catalog-tags-not-connected-line-height);
-  color: var(--catalog-tags-not-connected-color);
-`;
-//# sourceMappingURL=CatalogTags.js.map

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

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

package/lib/components/Catalog/CatalogViewModeToggle.js

@@ -1,36 +0,0 @@
-"use strict";
-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 = __importDefault(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 CatalogViewModeToggle({ viewMode, onViewModeChange }) {
-    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

@@ -1 +0,0 @@
-export declare const catalog: import("styled-components").RuleSet<object>;

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

@@ -1 +0,0 @@
-export declare const catalogDarkMode: import("styled-components").RuleSet<object>;

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

@@ -1,8 +0,0 @@
-"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: var(--color-warm-grey-4);
-`;
-//# sourceMappingURL=variables.dark.js.map