@redocly/theme 0.67.0-next.4 → 0.67.0-next.6

package/src/core/utils/telemetry/generate-resource-urn.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates a resource URN for Realm UI telemetry.
+ * @param object - The object type.
+ * @param id - The resource ID.
+ * @returns The resource URN.
+ */
+export function generateResourceUrn<K, T, U>(object: K, id: T): U {
+  return `urn:redocly:realm:ui:${object}:${id}` as U;
+}

package/src/core/utils/telemetry/get-base-data-attributes.ts

@@ -0,0 +1,27 @@
+import { generateResourceUrn } from './generate-resource-urn';
+
+export type BaseDataAttributes<T, K, U> = {
+  /** Resource identifier (e.g. UI key, or page URL when tracking navigation). */
+  id: T;
+  /** Object kind used for telemetry categorization (e.g. `'button'`, `'page'`). */
+  object: K;
+  /** Resolved URI: the optional `url` when provided, otherwise a Realm UI resource URN. */
+  uri: U;
+};
+
+/**
+ * Builds the base fields for Realm UI telemetry payloads: `id`, `object`, and `uri`.
+ * When `url` is omitted, {@link generateResourceUrn} derives `uri` as
+ * `urn:redocly:realm:ui:{object}:{id}`.
+ */
+export function getBaseDataAttributes<T, K, U>(
+  id: T,
+  object: K,
+  url?: U,
+): BaseDataAttributes<T, K, U> {
+  return {
+    id,
+    object,
+    uri: url ?? generateResourceUrn(object, id),
+  };
+}

package/src/layouts/McpNotAllowed.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { ConnectMCPButton } from '@redocly/theme/components/Buttons/ConnectMCPButton';
+
+export default function McpNotAllowed(): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <NotAllowedWrapper data-component-name="layouts/McpNotAllowed">
+      <StatusText>405</StatusText>
+      <Title data-translation-key="page.mcpNotAllowed.title">
+        {translate('page.mcpNotAllowed.title', 'Method not allowed')}
+      </Title>
+      <Description data-translation-key="page.mcpNotAllowed.description">
+        {translate(
+          'page.mcpNotAllowed.description',
+          'To use this MCP server, register it in your MCP Client (for example: VS Code, Cursor, or Claude Code).',
+        )}
+      </Description>
+      <ButtonWrapper>
+        <ConnectMCPButton alignment="start" />
+      </ButtonWrapper>
+    </NotAllowedWrapper>
+  );
+}
+
+const NotAllowedWrapper = styled.div`
+  height: 100%;
+  max-width: var(--page-mcp-405-max-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: var(--page-mcp-405-margin-vertical) var(--page-mcp-405-margin-horizontal);
+  font-family: var(--page-mcp-405-font-family);
+  gap: var(--page-mcp-405-gap);
+
+  @media (max-width: 480px) {
+    margin: var(--page-mcp-405-margin-vertical-mobile) var(--page-mcp-405-margin-horizontal-mobile);
+  }
+`;
+
+const StatusText = styled.div`
+  color: var(--page-mcp-405-status-text-color);
+  font-size: var(--page-mcp-405-status-font-size);
+  line-height: var(--page-mcp-405-status-line-height);
+  font-weight: var(--page-mcp-405-status-font-weight);
+`;
+
+const Title = styled.div`
+  font-size: var(--page-mcp-405-title-font-size);
+  line-height: var(--page-mcp-405-title-line-height);
+  font-weight: var(--page-mcp-405-title-font-weight);
+  color: var(--page-mcp-405-title-text-color);
+
+  @media (max-width: 480px) {
+    font-size: var(--page-mcp-405-title-font-size-mobile);
+    line-height: var(--page-mcp-405-title-line-height-mobile);
+  }
+`;
+
+const Description = styled.div`
+  color: var(--page-mcp-405-description-text-color);
+  font-size: var(--page-mcp-405-description-font-size);
+  line-height: var(--page-mcp-405-description-line-height);
+  font-weight: var(--page-mcp-405-description-font-weight);
+
+  @media (max-width: 480px) {
+    font-size: var(--page-mcp-405-description-font-size-mobile);
+    line-height: var(--page-mcp-405-description-line-height-mobile);
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;