@redocly/theme 0.59.0-next.10 → 0.59.0-next.12

package/lib/components/Buttons/ConnectMCPButton.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { MCPOption } from '../../core/types';
+export type ConnectMCPButtonProps = {
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    options?: MCPOption[];
+};
+export declare function ConnectMCPButton({ placement, alignment, options, }: ConnectMCPButtonProps): JSX.Element;

package/lib/components/Buttons/ConnectMCPButton.js

@@ -0,0 +1,145 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.ConnectMCPButton = ConnectMCPButton;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const Button_1 = require("../../components/Button/Button");
+const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
+const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
+const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const ConnectIcon_1 = require("../../icons/ConnectIcon/ConnectIcon");
+const use_connect_mcp_button_1 = require("../../core/hooks/use-connect-mcp-button");
+const hooks_1 = require("../../core/hooks");
+const TriggerButton = react_1.default.memo(({ text }) => {
+    return (react_1.default.createElement(StyledButton, { variant: "secondary", icon: react_1.default.createElement(ConnectIcon_1.ConnectIcon, null) }, text));
+});
+const MENU_OPTIONS = [
+    {
+        key: 'cursor',
+        icon: CursorIcon_1.CursorIcon,
+        titleTranslationKey: 'page.actions.connectMcp.cursor',
+        titleDefault: 'Connect to Cursor',
+        descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
+        descriptionDefault: 'Install MCP server on Cursor',
+    },
+    {
+        key: 'vscode',
+        icon: VSCodeIcon_1.VSCodeIcon,
+        titleTranslationKey: 'page.actions.connectMcp.vscode',
+        titleDefault: 'Connect to VS Code',
+        descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
+        descriptionDefault: 'Install MCP server on VS Code',
+    },
+    {
+        key: 'copy',
+        icon: CopyIcon_1.CopyIcon,
+        titleTranslationKey: 'page.actions.connectMcp.copyConfig',
+        titleDefault: 'Copy MCP Configuration',
+        descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
+        descriptionDefault: 'Copy MCP JSON Configuration',
+    },
+];
+function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = ['cursor', 'vscode', 'copy'], }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { isCopied, triggerButtonText, visibleOptions, handleAction } = (0, use_connect_mcp_button_1.useConnectMCPButton)({
+        options,
+    });
+    const menuOptions = (0, react_1.useMemo)(() => MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key)), [visibleOptions]);
+    return (react_1.default.createElement(ConnectMCPButtonWrapper, { "data-component-name": "Buttons/ConnectMCPButton" },
+        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(TriggerButton, { text: triggerButtonText }), triggerEvent: "hover", placement: placement, alignment: alignment, closeOnClick: false },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, menuOptions.map((option) => {
+                const Icon = option.icon;
+                const showCheckmark = option.key === 'copy' && isCopied;
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleAction(option.key) },
+                    react_1.default.createElement(MenuItemContent, null,
+                        react_1.default.createElement(MenuItemIcon, null, showCheckmark ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(Icon, null))),
+                        react_1.default.createElement(MenuItemText, null,
+                            react_1.default.createElement(MenuItemTitle, null, translate(option.titleTranslationKey, option.titleDefault)),
+                            react_1.default.createElement(MenuItemDescription, null, translate(option.descriptionTranslationKey, option.descriptionDefault))))));
+            })))));
+}
+const ConnectMCPButtonWrapper = styled_components_1.default.div `
+  display: inline-block;
+  position: relative;
+`;
+const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
+  --button-gap: var(--connect-mcp-button-gap);
+`;
+const MenuItemContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--connect-mcp-button-menu-item-gap);
+  padding: var(--connect-mcp-button-menu-item-padding-block)
+    var(--connect-mcp-button-menu-item-padding-inline);
+`;
+const MenuItemIcon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--connect-mcp-button-menu-item-icon-size);
+  height: var(--connect-mcp-button-menu-item-icon-size);
+  flex-shrink: 0;
+  border: var(--connect-mcp-button-menu-item-icon-border);
+  border-radius: var(--connect-mcp-button-menu-item-icon-border-radius);
+  color: var(--connect-mcp-button-menu-item-icon-color);
+`;
+const MenuItemText = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--connect-mcp-button-menu-item-text-gap);
+  flex: 1;
+`;
+const MenuItemTitle = styled_components_1.default.div `
+  font-size: var(--connect-mcp-button-menu-item-title-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-title-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-title-line-height);
+  color: var(--connect-mcp-button-menu-item-title-color);
+`;
+const MenuItemDescription = styled_components_1.default.div `
+  font-size: var(--connect-mcp-button-menu-item-description-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-description-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-description-line-height);
+  color: var(--connect-mcp-button-menu-item-description-color);
+`;
+//# sourceMappingURL=ConnectMCPButton.js.map

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

@@ -1 +1,2 @@
 export declare const aiAssistantButton: import("styled-components").FlattenSimpleInterpolation;
+export declare const connectMCPButton: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Buttons/variables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.aiAssistantButton = void 0;
+exports.connectMCPButton = exports.aiAssistantButton = void 0;
 const styled_components_1 = require("styled-components");
 exports.aiAssistantButton = (0, styled_components_1.css) `
   /**
@@ -48,4 +48,44 @@ exports.aiAssistantButton = (0, styled_components_1.css) `
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+exports.connectMCPButton = (0, styled_components_1.css) `
+  /**
+   * @tokens Connect MCP Button
+   * @presenter Color
+   */
+
+  /* Button gap */
+  --connect-mcp-button-gap: var(--spacing-xs);
+
+  /* Menu item layout */
+  --connect-mcp-button-menu-item-gap: var(--spacing-sm);
+  --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);
+  --connect-mcp-button-menu-item-padding-inline: 0;
+
+  /* Menu item icon */
+  --connect-mcp-button-menu-item-icon-size: 32px;
+  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
+  --connect-mcp-button-menu-item-icon-border-style: solid;
+  --connect-mcp-button-menu-item-icon-border-width: 1px;
+  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
+    var(--connect-mcp-button-menu-item-icon-border-style)
+    var(--connect-mcp-button-menu-item-icon-border-color);
+  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
+  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);
+
+  /* Menu item text */
+  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);
+
+  /* Menu item title */
+  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
+  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
+  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);
+
+  /* Menu item description */
+  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
+  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
+  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
+`;
 //# sourceMappingURL=variables.js.map

package/lib/components/PageActions/PageActions.js

@@ -86,7 +86,7 @@ function PageActions(props) {
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
             react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
             actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
-                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: menuItems }))) : null)));
+                react_1.default.createElement(StyledDropdownMenu, { items: menuItems }))) : null)));
 }
 function renderIcon(buttonAction, actionState) {
     switch (actionState) {
@@ -111,4 +111,7 @@ const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
   --link-decoration-hover: none;
 `;
+const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
+`;
 //# sourceMappingURL=PageActions.js.map

package/lib/components/PageActions/variables.js

@@ -9,6 +9,8 @@ exports.pageActions = (0, styled_components_1.css) `
   --page-actions-button-text-color: var(--text-color-secondary);
   --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
 
+  --page-actions-dropdown-max-height: fit-content;
+
   --page-actions-menu-item-padding: 3px 0;
   --page-actions-menu-item-gap: var(--spacing-xs);
   --page-actions-menu-item-icon-color: var(--icon-color-secondary);

package/lib/components/Segmented/Segmented.d.ts

@@ -1,12 +1,5 @@
 import type { ForwardedRef, ReactElement } from 'react';
-import type { SelectOption } from '../../core/types/select';
-export type SegmentedProps<T> = {
-    options: SelectOption<T>[];
-    value: T;
-    onChange: ({ label, value }: SelectOption<T>) => void;
-    className?: string;
-    size?: 'regular' | 'small';
-};
+import type { SegmentedProps } from '../../core/types/segmented';
 export declare const Segmented: <T>(props: SegmentedProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => ReactElement;

package/lib/components/Segmented/Segmented.js

@@ -38,7 +38,9 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typedMemo_1 = require("../../core/hoc/typedMemo");
 function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
-    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
+    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
+        opt.divider,
+        react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.element || opt.label))))));
 }
 exports.Segmented = (0, typedMemo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `

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

@@ -4,3 +4,4 @@ export * from './code-walkthrough';
 export * from './search';
 export * from './catalog';
 export * from './breadcrumb';
+export * from './mcp';

package/lib/core/constants/index.js

@@ -20,4 +20,5 @@ __exportStar(require("./code-walkthrough"), exports);
 __exportStar(require("./search"), exports);
 __exportStar(require("./catalog"), exports);
 __exportStar(require("./breadcrumb"), exports);
+__exportStar(require("./mcp"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/constants/mcp.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_MCP_SERVER_NAME = "mcp-server";

package/lib/core/constants/mcp.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_MCP_SERVER_NAME = void 0;
+exports.DEFAULT_MCP_SERVER_NAME = 'mcp-server';
+//# sourceMappingURL=mcp.js.map

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

@@ -43,3 +43,5 @@ export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';
 export * from './use-page-actions';
+export * from './use-mcp-config';
+export * from './use-connect-mcp-button';

package/lib/core/hooks/index.js

@@ -59,4 +59,6 @@ __exportStar(require("./use-active-page-version"), exports);
 __exportStar(require("./use-page-versions"), exports);
 __exportStar(require("./use-user-teams"), exports);
 __exportStar(require("./use-page-actions"), exports);
+__exportStar(require("./use-mcp-config"), exports);
+__exportStar(require("./use-connect-mcp-button"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-connect-mcp-button.d.ts

@@ -0,0 +1,13 @@
+import type { MCPOption } from '../types';
+export type McpButtonOptions = {
+    options?: MCPOption[];
+};
+export type McpButtonSettings = {
+    isCopied: boolean;
+    cursorUrl: string;
+    vscodeUrl: string;
+    triggerButtonText: string;
+    visibleOptions: MCPOption[];
+    handleAction: (action: MCPOption) => void;
+};
+export declare function useConnectMCPButton({ options, }?: McpButtonOptions): McpButtonSettings;

package/lib/core/hooks/use-connect-mcp-button.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectMCPButton = useConnectMCPButton;
+const react_1 = require("react");
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const use_theme_hooks_1 = require("./use-theme-hooks");
+const use_mcp_config_1 = require("./use-mcp-config");
+const clipboard_service_1 = require("../utils/clipboard-service");
+const COPIED_RESET_TIMEOUT = 1000;
+function useConnectMCPButton({ options = ['cursor', 'vscode', 'copy'], } = {}) {
+    const { useTranslate } = (0, use_theme_hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { serverName, serverUrl, cursorUrl, vscodeUrl } = (0, use_mcp_config_1.useMCPConfig)();
+    const [isCopied, setIsCopied] = (0, react_1.useState)(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const resetCopied = (0, react_1.useCallback)((0, lodash_debounce_1.default)(() => setIsCopied(false), COPIED_RESET_TIMEOUT), []);
+    const handleAction = (0, react_1.useCallback)((action) => {
+        if (action === 'copy') {
+            const config = {
+                [serverName]: {
+                    url: serverUrl,
+                    description: 'MCP Server',
+                },
+            };
+            clipboard_service_1.ClipboardService.copyCustom(JSON.stringify(config, null, 2));
+            setIsCopied(true);
+            resetCopied();
+            return;
+        }
+        const urlMap = {
+            cursor: cursorUrl,
+            vscode: vscodeUrl,
+        };
+        window.open(urlMap[action], '_blank');
+    }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied]);
+    const triggerButtonText = (0, react_1.useMemo)(() => translate('page.actions.connectMcp', 'Connect MCP'), [translate]);
+    const visibleOptions = (0, react_1.useMemo)(() => options.filter(Boolean), [options]);
+    return {
+        isCopied,
+        cursorUrl,
+        vscodeUrl,
+        triggerButtonText,
+        visibleOptions,
+        handleAction,
+    };
+}
+//# sourceMappingURL=use-connect-mcp-button.js.map

package/lib/core/hooks/use-mcp-config.d.ts

@@ -0,0 +1,9 @@
+export type McpConfig = {
+    serverName: string;
+    origin: string;
+    serverUrl: string;
+    cursorUrl: string;
+    vscodeUrl: string;
+    isMcpDisabled: boolean;
+};
+export declare function useMCPConfig(): McpConfig;

package/lib/core/hooks/use-mcp-config.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMCPConfig = useMCPConfig;
+const react_1 = require("react");
+const use_theme_config_1 = require("./use-theme-config");
+const dom_1 = require("../utils/dom");
+const constants_1 = require("../constants");
+const mcp_1 = require("../utils/mcp");
+function useMCPConfig() {
+    var _a, _b, _c, _d, _e;
+    const themeConfig = (0, use_theme_config_1.useThemeConfig)();
+    const origin = dom_1.IS_BROWSER ? window.location.origin : globalThis['SSR_HOSTNAME'];
+    const serverName = ((_b = (_a = themeConfig.mcp) === null || _a === void 0 ? void 0 : _a.docs) === null || _b === void 0 ? void 0 : _b.name) || constants_1.DEFAULT_MCP_SERVER_NAME;
+    const serverUrl = `${origin}/mcp`;
+    const isMcpDisabled = ((_c = themeConfig.mcp) === null || _c === void 0 ? void 0 : _c.hide) || ((_e = (_d = themeConfig.mcp) === null || _d === void 0 ? void 0 : _d.docs) === null || _e === void 0 ? void 0 : _e.hide) || false;
+    const cursorUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('cursor', { serverName, url: serverUrl }), [serverName, serverUrl]);
+    const vscodeUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('vscode', { serverName, url: serverUrl }), [serverName, serverUrl]);
+    return {
+        serverName,
+        origin,
+        serverUrl,
+        cursorUrl,
+        vscodeUrl,
+        isMcpDisabled,
+    };
+}
+//# sourceMappingURL=use-mcp-config.js.map

package/lib/core/hooks/use-page-actions.d.ts

@@ -1,3 +1,3 @@
 import type { PageAction } from '../types';
-export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'docs-mcp-cursor' | 'docs-mcp-vscode' | 'mcp-cursor' | 'mcp-vscode';
 export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];