@redocly/theme 0.57.0-next.0 → 0.57.0-next.2

package/lib/core/hooks/catalog/useGraph.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraph = useGraph;
+const react_1 = require("react");
+const react_2 = require("@xyflow/react");
+const catalog_1 = require("../../constants/catalog");
+// TODO: This isn't final implementation, leaved comments for future reference.
+function useGraph({ entity, relations }) {
+    const rootNodeId = entity.id;
+    // Compute final label for a relation considering its role
+    const getRelationLabel = (0, react_1.useCallback)((relation) => {
+        const relationType = relation.relationType;
+        if (!relationType) {
+            return 'related';
+        }
+        return relation.relationRole === 'source' ? catalog_1.reverseRelationMap[relationType] : relationType;
+    }, []);
+    const processedRelations = (0, react_1.useMemo)(() => {
+        // Exclude self-relations and deduplicate by id
+        const seenIds = new Set();
+        const filtered = (relations !== null && relations !== void 0 ? relations : []).filter((r) => r.id !== rootNodeId && r.key !== entity.key);
+        const unique = [];
+        for (const r of filtered) {
+            if (seenIds.has(r.id))
+                continue;
+            seenIds.add(r.id);
+            unique.push({
+                id: r.id,
+                title: r.title,
+                entityType: r.type, // Group by entity type, not relation type
+                relationLabel: getRelationLabel(r),
+                key: r.key,
+            });
+        }
+        return unique;
+    }, [relations, getRelationLabel, rootNodeId, entity.key]);
+    // Entity data type for layout
+    const computedNodes = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!processedRelations.length) {
+            return [
+                {
+                    id: rootNodeId,
+                    type: catalog_1.GraphCustomNodeType.CatalogEntity,
+                    position: { x: 0, y: 0 },
+                    data: {
+                        label: entity.title,
+                        entityType: entity.type,
+                        isRoot: true,
+                        entityKey: entity.key,
+                    },
+                    sourcePosition: react_2.Position.Bottom,
+                    targetPosition: react_2.Position.Top,
+                },
+            ];
+        }
+        // Group entities by their entity type
+        const entityTypeGroups = new Map();
+        for (const rel of processedRelations) {
+            const entityData = {
+                id: rel.id,
+                title: rel.title,
+                entityType: rel.entityType,
+                relationLabel: rel.relationLabel,
+                key: rel.key,
+            };
+            const current = entityTypeGroups.get(rel.entityType);
+            if (current) {
+                current.push(entityData);
+            }
+            else {
+                entityTypeGroups.set(rel.entityType, [entityData]);
+            }
+        }
+        // Sort entity types for consistent ordering
+        const entityTypes = Array.from(entityTypeGroups.keys()).sort();
+        // Layout constants
+        const rootY = 0;
+        const verticalGap = 80; // Gap between entities of same type (vertical)
+        const horizontalGap = 250; // Gap between different entity types (horizontal)
+        const topMargin = 240; // Distance from root to first row of entities
+        // Special handling for single entity type group - root on left, entities on right
+        const isSingleGroup = entityTypes.length === 1;
+        let rootX = 0;
+        let startX = 0;
+        if (isSingleGroup) {
+            // Position root on the left, entities on the right
+            rootX = -horizontalGap / 2;
+            startX = horizontalGap / 2;
+        }
+        else {
+            // Calculate starting X position to center all groups (original behavior)
+            const totalWidth = (entityTypes.length - 1) * horizontalGap;
+            startX = -totalWidth / 2;
+        }
+        const nodes = [
+            // Root entity
+            {
+                id: rootNodeId,
+                type: catalog_1.GraphCustomNodeType.CatalogEntity,
+                position: { x: rootX, y: rootY },
+                data: { label: entity.title, entityType: entity.type, isRoot: true, entityKey: entity.key },
+                sourcePosition: react_2.Position.Bottom,
+                targetPosition: react_2.Position.Top,
+            },
+        ];
+        // Position entities by type groups
+        for (let typeIndex = 0; typeIndex < entityTypes.length; typeIndex++) {
+            const entityType = entityTypes[typeIndex];
+            const entitiesOfType = (_a = entityTypeGroups.get(entityType)) !== null && _a !== void 0 ? _a : [];
+            // Calculate X position for this entity type group
+            const groupX = startX + typeIndex * horizontalGap;
+            // Calculate starting Y position to center entities vertically within the group
+            const groupHeight = (entitiesOfType.length - 1) * verticalGap;
+            const groupStartY = rootY + topMargin - groupHeight / 2;
+            // Position each entity within the group
+            for (let entityIndex = 0; entityIndex < entitiesOfType.length; entityIndex++) {
+                const entityData = entitiesOfType[entityIndex];
+                const entityY = groupStartY + entityIndex * verticalGap;
+                nodes.push({
+                    id: entityData.id,
+                    type: catalog_1.GraphCustomNodeType.CatalogEntity,
+                    position: { x: groupX, y: entityY },
+                    data: {
+                        label: entityData.title,
+                        entityType: entityData.entityType,
+                        isRoot: false,
+                        entityKey: entityData.key,
+                    },
+                    sourcePosition: react_2.Position.Bottom,
+                    targetPosition: react_2.Position.Top,
+                });
+            }
+        }
+        return nodes;
+    }, [rootNodeId, entity.title, entity.type, entity.key, processedRelations]);
+    const computedEdges = (0, react_1.useMemo)(() => {
+        return processedRelations.map((relation) => ({
+            id: `e-${rootNodeId}-${relation.id}`,
+            source: rootNodeId,
+            target: relation.id,
+            sourceHandle: catalog_1.GraphHandleType.Source, // Use the bottom handle of the center node
+            targetHandle: catalog_1.GraphHandleType.Target, // Use the target handle (top) of related nodes
+            type: catalog_1.GraphCustomEdgeType.CatalogEdge,
+            label: relation.relationLabel,
+        }));
+    }, [rootNodeId, processedRelations]);
+    const [nodes, setNodes, onNodesChange] = (0, react_2.useNodesState)(computedNodes);
+    const [edges, setEdges, onEdgesChange] = (0, react_2.useEdgesState)(computedEdges);
+    (0, react_1.useEffect)(() => {
+        setNodes(computedNodes);
+    }, [computedNodes, setNodes]);
+    (0, react_1.useEffect)(() => {
+        setEdges(computedEdges);
+    }, [computedEdges, setEdges]);
+    const onConnect = (0, react_1.useCallback)((params) => setEdges((edgesSnapshot) => (0, react_2.addEdge)(params, edgesSnapshot)), [setEdges]);
+    return {
+        nodes,
+        edges,
+        onNodesChange,
+        onEdgesChange,
+        onConnect,
+    };
+}
+//# sourceMappingURL=useGraph.js.map

package/lib/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MockIntersectionObserver = void 0;
+const vitest_1 = require("vitest");
 class MockIntersectionObserver {
     // @ts-ignore
     constructor(callback, options) {
@@ -43,9 +44,9 @@ class MockIntersectionObserver {
         this.root = null;
         this.rootMargin = '0px';
         this.thresholds = [1];
-        this.observe = jest.fn;
-        this.unobserve = jest.fn;
-        this.disconnect = jest.fn;
+        this.observe = vitest_1.vi.fn();
+        this.unobserve = vitest_1.vi.fn();
+        this.disconnect = vitest_1.vi.fn();
     }
     takeRecords() {
         return [];

package/lib/core/hooks/index.d.ts

@@ -37,6 +37,7 @@ export * from './use-element-size';
 export * from './use-time-ago';
 export * from './use-input-key-commands';
 export * from './catalog/useCatalogEntities';
+export * from './catalog/useGraph';
 export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';

package/lib/core/hooks/index.js

@@ -53,6 +53,7 @@ __exportStar(require("./use-element-size"), exports);
 __exportStar(require("./use-time-ago"), exports);
 __exportStar(require("./use-input-key-commands"), exports);
 __exportStar(require("./catalog/useCatalogEntities"), exports);
+__exportStar(require("./catalog/useGraph"), exports);
 __exportStar(require("./use-active-page-version"), exports);
 __exportStar(require("./use-page-versions"), exports);
 __exportStar(require("./use-user-teams"), exports);

package/lib/core/hooks/menu/__mocks__/use-mobile-menu-items.d.ts

@@ -1 +1 @@
-export declare const useMobileMenuItems: jest.Mock<any, any, any>;
+export declare const useMobileMenuItems: import("vitest").Mock<(...args: any[]) => any>;

package/lib/core/hooks/menu/__mocks__/use-mobile-menu-items.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenuItems = void 0;
-exports.useMobileMenuItems = jest.fn().mockReturnValue({
+const vitest_1 = require("vitest");
+exports.useMobileMenuItems = vitest_1.vi.fn().mockReturnValue({
     items: [
         {
             type: 'group',

package/lib/core/hooks/use-page-actions.js

@@ -26,7 +26,8 @@ function usePageActions(pageSlug) {
     const { translate } = useTranslate();
     const { navigation } = (0, use_theme_config_1.useThemeConfig)();
     // Can't use any actions if no markdown files are generated for LLMs
-    const isLlmsDisabled = ((_c = (_b = (_a = usePageProps()) === null || _a === void 0 ? void 0 : _a.seo) === null || _b === void 0 ? void 0 : _b.llmstxt) === null || _c === void 0 ? void 0 : _c.hide) === true;
+    const pageProps = usePageProps();
+    const isLlmsDisabled = ((_b = (_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.seo) === null || _a === void 0 ? void 0 : _a.llmstxt) === null || _b === void 0 ? void 0 : _b.hide) || ((_c = pageProps === null || pageProps === void 0 ? void 0 : pageProps.frontmatter) === null || _c === void 0 ? void 0 : _c.excludeFromSearch);
     const { isPublic } = usePageData() || {};
     const actions = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -54,6 +55,9 @@ function usePageActions(pageSlug) {
                         onClick: () => __awaiter(this, void 0, void 0, function* () {
                             try {
                                 const result = yield fetch(mdPageUrl);
+                                if (result.status !== 200) {
+                                    throw new Error('Failed to fetch markdown content');
+                                }
                                 const text = yield result.text();
                                 clipboard_service_1.ClipboardService.copyCustom(text);
                             }

package/lib/core/openapi/index.d.ts

@@ -16,3 +16,4 @@ export { useModalScrollLock } from '../hooks/use-modal-scroll-lock';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
+export { ENTITY_RELATION_TYPES } from '../constants/catalog';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.ENTITY_RELATION_TYPES = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 // This file is intended to provide selective imports from @redocly/theme/core
 // to reduce bundle size by exporting only functionality used in the @redocly/openapi-docs package.
 //
@@ -45,4 +45,6 @@ Object.defineProperty(exports, "isNotNull", { enumerable: true, get: function ()
 Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return type_guards_1.isObject; } });
 var ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 Object.defineProperty(exports, "ThemeDataContext", { enumerable: true, get: function () { return ThemeDataContext_1.ThemeDataContext; } });
+var catalog_1 = require("../constants/catalog");
+Object.defineProperty(exports, "ENTITY_RELATION_TYPES", { enumerable: true, get: function () { return catalog_1.ENTITY_RELATION_TYPES; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/index.d.ts

@@ -1,2 +1,3 @@
 export * from './global';
 export * from './dark';
+export { xyflow } from './xyflow';

package/lib/core/styles/index.js

@@ -14,6 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.xyflow = void 0;
 __exportStar(require("./global"), exports);
 __exportStar(require("./dark"), exports);
+var xyflow_1 = require("./xyflow");
+Object.defineProperty(exports, "xyflow", { enumerable: true, get: function () { return xyflow_1.xyflow; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/xyflow.d.ts

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