@redocly/theme 0.69.0-next.1 → 0.69.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/lib/components/Buttons/ConnectMCPButton.js +43 -14
  2. package/lib/components/MCP/McpConnectionTabs.d.ts +7 -0
  3. package/lib/components/MCP/McpConnectionTabs.js +151 -0
  4. package/lib/core/constants/mcp.d.ts +2 -0
  5. package/lib/core/constants/mcp.js +8 -1
  6. package/lib/core/hooks/use-active-section-id.js +3 -1
  7. package/lib/core/hooks/use-connect-mcp-button.d.ts +1 -1
  8. package/lib/core/hooks/use-connect-mcp-button.js +16 -13
  9. package/lib/core/styles/global.js +6 -1
  10. package/lib/core/types/catalog.d.ts +2 -0
  11. package/lib/core/types/l10n.d.ts +1 -1
  12. package/lib/core/types/mcp.d.ts +1 -1
  13. package/lib/core/utils/mcp.d.ts +5 -0
  14. package/lib/core/utils/mcp.js +35 -0
  15. package/lib/icons/CodexIcon/CodexIcon.d.ts +25 -0
  16. package/lib/icons/CodexIcon/CodexIcon.js +22 -0
  17. package/lib/layouts/McpNotAllowed.js +5 -3
  18. package/lib/markdoc/tags/connect-mcp.js +2 -1
  19. package/package.json +2 -2
  20. package/src/components/Buttons/ConnectMCPButton.tsx +44 -14
  21. package/src/components/MCP/McpConnectionTabs.tsx +263 -0
  22. package/src/core/constants/mcp.ts +10 -0
  23. package/src/core/hooks/use-active-section-id.ts +3 -1
  24. package/src/core/hooks/use-connect-mcp-button.ts +23 -15
  25. package/src/core/styles/global.ts +6 -1
  26. package/src/core/types/catalog.ts +3 -0
  27. package/src/core/types/l10n.ts +17 -0
  28. package/src/core/types/mcp.ts +1 -1
  29. package/src/core/utils/mcp.ts +39 -0
  30. package/src/icons/CodexIcon/CodexIcon.tsx +23 -0
  31. package/src/layouts/McpNotAllowed.tsx +4 -2
  32. package/src/markdoc/tags/connect-mcp.ts +3 -1
package/src/icons/CodexIcon/CodexIcon.tsx ADDED
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+
4
+ import type { IconProps } from '@redocly/theme/icons/types';
5
+
6
+ import { getCssColorVariable } from '@redocly/theme/core/utils';
7
+
8
+ const Icon = (props: IconProps) => (
9
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
10
+ <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.073zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.8956zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997z" />
11
+ </svg>
12
+ );
13
+
14
+ export const CodexIcon = styled(Icon).attrs({
15
+ 'data-component-name': 'icons/CodexIcon/CodexIcon',
16
+ })`
17
+ path {
18
+ fill: ${({ color }) => getCssColorVariable(color)};
19
+ }
20
+
21
+ height: ${({ size }) => size || '16px'};
22
+ width: ${({ size }) => size || '16px'};
23
+ `;
package/src/layouts/McpNotAllowed.tsx CHANGED
@@ -5,6 +5,7 @@ import type { JSX } from 'react';
5
5
 
6
6
  import { useThemeHooks } from '@redocly/theme/core/hooks';
7
7
  import { ConnectMCPButton } from '@redocly/theme/components/Buttons/ConnectMCPButton';
8
+ import { McpConnectionTabs } from '@redocly/theme/components/MCP/McpConnectionTabs';
8
9
 
9
10
  export default function McpNotAllowed(): JSX.Element {
10
11
  const { useTranslate } = useThemeHooks();
@@ -14,17 +15,18 @@ export default function McpNotAllowed(): JSX.Element {
14
15
  <NotAllowedWrapper data-component-name="layouts/McpNotAllowed">
15
16
  <StatusText>405</StatusText>
16
17
  <Title data-translation-key="page.mcpNotAllowed.title">
17
- {translate('page.mcpNotAllowed.title', 'Method not allowed')}
18
+ {translate('page.mcpNotAllowed.title', 'Connect to the MCP server')}
18
19
  </Title>
19
20
  <Description data-translation-key="page.mcpNotAllowed.description">
20
21
  {translate(
21
22
  'page.mcpNotAllowed.description',
22
- 'To use this MCP server, register it in your MCP Client (for example: VS Code, Cursor, or Claude Code).',
23
+ 'To use this MCP server, register it in your MCP client (for example: VS Code, Cursor, or Claude Code).',
23
24
  )}
24
25
  </Description>
25
26
  <ButtonWrapper>
26
27
  <ConnectMCPButton alignment="start" />
27
28
  </ButtonWrapper>
29
+ <McpConnectionTabs />
28
30
  </NotAllowedWrapper>
29
31
  );
30
32
  }
package/src/markdoc/tags/connect-mcp.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
2
2
 
3
+ import { DEFAULT_MCP_OPTIONS } from '@redocly/theme/core/constants';
4
+
3
5
  export const connectMcp: MarkdocSchemaWrapper = {
4
6
  schema: {
5
7
  render: 'ConnectMCP',
@@ -16,7 +18,7 @@ export const connectMcp: MarkdocSchemaWrapper = {
16
18
  },
17
19
  options: {
18
20
  type: Array,
19
- default: ['cursor', 'vscode', 'copy'],
21
+ default: DEFAULT_MCP_OPTIONS,
20
22
  },
21
23
  },
22
24
  selfClosing: true,