@redocly/theme 0.16.0 → 0.17.1
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.
- package/lib/components/CodeBlock/CodeBlock.d.ts +29 -1
- package/lib/components/CodeBlock/CodeBlock.js +56 -94
- package/lib/components/CodeBlock/CodeBlockContainer.d.ts +3 -0
- package/lib/components/CodeBlock/CodeBlockContainer.js +120 -0
- package/lib/components/CodeBlock/CodeBlockControlButton.d.ts +5 -0
- package/lib/components/CodeBlock/CodeBlockControlButton.js +63 -0
- package/lib/components/CodeBlock/CodeBlockControls.d.ts +33 -0
- package/lib/components/CodeBlock/CodeBlockControls.js +56 -0
- package/lib/components/CodeBlock/index.d.ts +3 -0
- package/lib/components/CodeBlock/index.js +3 -0
- package/lib/components/CopyButton/CopyButton.d.ts +12 -3
- package/lib/components/CopyButton/CopyButton.js +30 -26
- package/lib/components/CopyButton/index.d.ts +0 -1
- package/lib/components/CopyButton/index.js +0 -1
- package/lib/components/Feedback/useReportDialog.d.ts +12 -6
- package/lib/components/Feedback/useReportDialog.js +13 -5
- package/lib/components/JsonViewer/JsonViewer.d.ts +0 -1
- package/lib/components/JsonViewer/JsonViewer.js +100 -119
- package/lib/components/Markdown/MarkdownWrapper.d.ts +5 -1
- package/lib/components/Markdown/MarkdownWrapper.js +59 -53
- package/lib/components/Menu/MobileMenu.js +2 -2
- package/lib/components/Menu/MobileMenuGroup.js +1 -1
- package/lib/components/Panel/PanelHeader.js +0 -1
- package/lib/components/Tooltip/Tooltip.js +2 -0
- package/lib/components/index.d.ts +0 -3
- package/lib/components/index.js +0 -3
- package/lib/config.d.ts +526 -24
- package/lib/config.js +150 -4
- package/lib/globalStyle.js +50 -7
- package/lib/icons/ArrowIcon/ArrowIcon.d.ts +3 -3
- package/lib/icons/ArrowIcon/ArrowIcon.js +33 -6
- package/lib/icons/CollapseIcon/CollapseIcon.d.ts +7 -0
- package/lib/icons/CollapseIcon/CollapseIcon.js +22 -0
- package/lib/icons/CollapseIcon/index.d.ts +1 -0
- package/lib/{components/SourceCode → icons/CollapseIcon}/index.js +1 -1
- package/lib/icons/CopyIcon/CopyIcon.d.ts +7 -0
- package/lib/icons/CopyIcon/CopyIcon.js +17 -0
- package/lib/icons/CopyIcon/index.d.ts +1 -0
- package/lib/{components/CodeSample → icons/CopyIcon}/index.js +1 -1
- package/lib/icons/DeselectIcon/DeselectIcon.d.ts +7 -0
- package/lib/icons/DeselectIcon/DeselectIcon.js +19 -0
- package/lib/icons/DeselectIcon/index.d.ts +1 -0
- package/lib/{components/SamplesPanelControls → icons/DeselectIcon}/index.js +1 -1
- package/lib/icons/ExpandIcon/ExpandIcon.d.ts +5 -6
- package/lib/icons/ExpandIcon/ExpandIcon.js +10 -19
- package/lib/icons/FileIcon/FileIcon.d.ts +7 -0
- package/lib/icons/FileIcon/FileIcon.js +17 -0
- package/lib/icons/FileIcon/index.d.ts +1 -0
- package/lib/icons/FileIcon/index.js +18 -0
- package/lib/icons/ReportIcon/ReportIcon.d.ts +7 -0
- package/lib/icons/ReportIcon/ReportIcon.js +19 -0
- package/lib/icons/ReportIcon/index.d.ts +1 -0
- package/lib/icons/ReportIcon/index.js +18 -0
- package/lib/icons/SelectIcon/SelectIcon.d.ts +7 -0
- package/lib/icons/SelectIcon/SelectIcon.js +19 -0
- package/lib/icons/SelectIcon/index.d.ts +1 -0
- package/lib/icons/SelectIcon/index.js +18 -0
- package/lib/icons/index.d.ts +7 -1
- package/lib/icons/index.js +7 -1
- package/lib/layouts/Forbidden.js +2 -2
- package/lib/ui/darkColors.js +4 -4
- package/lib/utils/highlight.d.ts +1 -0
- package/lib/utils/highlight.js +1 -0
- package/package.json +2 -2
- package/src/components/CodeBlock/CodeBlock.tsx +100 -0
- package/src/components/CodeBlock/{CodeBlock.ts → CodeBlockContainer.tsx} +23 -6
- package/src/components/CodeBlock/CodeBlockControlButton.tsx +38 -0
- package/src/components/CodeBlock/CodeBlockControls.tsx +182 -0
- package/src/components/CodeBlock/index.ts +3 -0
- package/src/components/CopyButton/CopyButton.tsx +71 -19
- package/src/components/CopyButton/index.ts +0 -1
- package/src/components/Feedback/useReportDialog.ts +24 -14
- package/src/components/JsonViewer/JsonViewer.tsx +112 -142
- package/src/components/Markdown/MarkdownWrapper.tsx +65 -54
- package/src/components/Menu/MobileMenu.tsx +3 -3
- package/src/components/Menu/MobileMenuGroup.tsx +4 -2
- package/src/components/Panel/PanelHeader.ts +0 -1
- package/src/components/Tooltip/Tooltip.tsx +2 -0
- package/src/components/index.ts +0 -3
- package/src/config.ts +168 -8
- package/src/globalStyle.ts +50 -7
- package/src/icons/ArrowIcon/ArrowIcon.tsx +37 -14
- package/src/icons/CollapseIcon/CollapseIcon.tsx +40 -0
- package/src/icons/CollapseIcon/index.tsx +1 -0
- package/src/icons/CopyIcon/CopyIcon.tsx +26 -0
- package/src/icons/CopyIcon/index.ts +1 -0
- package/src/icons/DeselectIcon/DeselectIcon.tsx +28 -0
- package/src/icons/DeselectIcon/index.ts +1 -0
- package/src/icons/ExpandIcon/ExpandIcon.tsx +28 -34
- package/src/icons/FileIcon/FileIcon.tsx +29 -0
- package/src/icons/FileIcon/index.ts +1 -0
- package/src/icons/ReportIcon/ReportIcon.tsx +36 -0
- package/src/icons/ReportIcon/index.ts +1 -0
- package/src/icons/SelectIcon/SelectIcon.tsx +31 -0
- package/src/icons/SelectIcon/index.ts +1 -0
- package/src/icons/index.ts +7 -1
- package/src/layouts/Forbidden.tsx +1 -1
- package/src/ui/darkColors.tsx +4 -4
- package/src/utils/highlight.ts +1 -0
- package/lib/components/CodeSample/CodeSample.d.ts +0 -10
- package/lib/components/CodeSample/CodeSample.js +0 -226
- package/lib/components/CodeSample/index.d.ts +0 -1
- package/lib/components/CopyButton/CopyButtonWrapper.d.ts +0 -11
- package/lib/components/CopyButton/CopyButtonWrapper.js +0 -53
- package/lib/components/SamplesPanelControls/SamplesPanelControls.d.ts +0 -4
- package/lib/components/SamplesPanelControls/SamplesPanelControls.js +0 -76
- package/lib/components/SamplesPanelControls/index.d.ts +0 -1
- package/lib/components/SourceCode/SourceCode.d.ts +0 -33
- package/lib/components/SourceCode/SourceCode.js +0 -60
- package/lib/components/SourceCode/index.d.ts +0 -1
- package/src/components/CodeSample/CodeSample.tsx +0 -257
- package/src/components/CodeSample/index.ts +0 -1
- package/src/components/CopyButton/CopyButtonWrapper.tsx +0 -55
- package/src/components/SamplesPanelControls/SamplesPanelControls.ts +0 -76
- package/src/components/SamplesPanelControls/index.ts +0 -1
- package/src/components/SourceCode/SourceCode.tsx +0 -128
- package/src/components/SourceCode/index.ts +0 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
|
|
4
|
+
interface IconProps {
|
|
5
|
+
className?: string;
|
|
6
|
+
color?: string;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Icon = ({ className, color = 'white' }: IconProps) => (
|
|
10
|
+
<svg
|
|
11
|
+
data-component-name="icons/SelectIcon"
|
|
12
|
+
viewBox="0 0 16 16"
|
|
13
|
+
fill="none"
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
className={className}
|
|
16
|
+
>
|
|
17
|
+
<path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill={color} />
|
|
18
|
+
<path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill={color} />
|
|
19
|
+
<path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill={color} />
|
|
20
|
+
<path
|
|
21
|
+
d="M10.5 10.9425L9.205 9.64746L8.5 10.3525L10.5 12.3525L14.5 8.35246L13.795 7.64746L10.5 10.9425Z"
|
|
22
|
+
fill={color}
|
|
23
|
+
/>
|
|
24
|
+
</svg>
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
export const SelectIcon = styled(Icon)`
|
|
28
|
+
width: 1.3em;
|
|
29
|
+
height: 1.3em;
|
|
30
|
+
vertical-align: middle;
|
|
31
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@theme/icons/SelectIcon/SelectIcon';
|
package/src/icons/index.ts
CHANGED
|
@@ -5,7 +5,13 @@ export * from '@theme/icons/ColorModeIcon';
|
|
|
5
5
|
export * from '@theme/icons/AnchorIcon';
|
|
6
6
|
export * from '@theme/icons/ExternalIcon';
|
|
7
7
|
export * from '@theme/icons/SpinnerIcon';
|
|
8
|
+
export * from '@theme/icons/CollapseIcon';
|
|
9
|
+
export * from '@theme/icons/CopyIcon';
|
|
10
|
+
export * from '@theme/icons/DeselectIcon';
|
|
11
|
+
export * from '@theme/icons/ExpandIcon';
|
|
12
|
+
export * from '@theme/icons/FileIcon';
|
|
13
|
+
export * from '@theme/icons/ReportIcon';
|
|
14
|
+
export * from '@theme/icons/SelectIcon';
|
|
8
15
|
export * from '@theme/icons/BurgerIcon';
|
|
9
16
|
export * from '@theme/icons/CloseIcon';
|
|
10
17
|
export * from '@theme/icons/LogoutIcon';
|
|
11
|
-
export * from '@theme/icons/ExpandIcon';
|
package/src/ui/darkColors.tsx
CHANGED
|
@@ -6,13 +6,13 @@ export const darkMode = css`
|
|
|
6
6
|
* @presenter Color
|
|
7
7
|
*/
|
|
8
8
|
--background-color: #141414;
|
|
9
|
-
--footer-background-color: #
|
|
10
|
-
--navbar-background-color: #
|
|
9
|
+
--footer-background-color: #1f1f1f;
|
|
10
|
+
--navbar-background-color: #1f1f1f;
|
|
11
11
|
--mobile-menu-background: #141414;
|
|
12
12
|
--mobile-menu-profile-background: var(--mobile-menu-background);
|
|
13
|
-
--mobile-menu-login-button-background: var(--mobile-menu-profile-background);
|
|
13
|
+
--mobile-menu-login-button-background: var(--mobile-menu-profile-background);
|
|
14
14
|
--mobile-menu-item-text-color: rgba(255, 255, 255, 0.6);
|
|
15
|
-
--mobile-menu-item-active-color: #
|
|
15
|
+
--mobile-menu-item-active-color: #1f1f1f;
|
|
16
16
|
--mobile-menu-item-active-text-color: rgba(255, 255, 255, 0.85);
|
|
17
17
|
--mobile-menu-control-button-color: #ffffff;
|
|
18
18
|
--mobile-menu-profile-border-color: #222222;
|
package/src/utils/highlight.ts
CHANGED
|
@@ -9,6 +9,7 @@ import 'prismjs/components/prism-go.js';
|
|
|
9
9
|
import 'prismjs/components/prism-http.js';
|
|
10
10
|
import 'prismjs/components/prism-java.js';
|
|
11
11
|
import 'prismjs/components/prism-lua.js';
|
|
12
|
+
import 'prismjs/components/prism-markdown.js';
|
|
12
13
|
import 'prismjs/components/prism-markup-templating.js'; // dep of php
|
|
13
14
|
import 'prismjs/components/prism-markup.js'; // xml
|
|
14
15
|
import 'prismjs/components/prism-objectivec.js';
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export type CodeSampleProps = {
|
|
3
|
-
language: string;
|
|
4
|
-
highlighted: string;
|
|
5
|
-
rawContent: string;
|
|
6
|
-
'data-source'?: string;
|
|
7
|
-
'data-hash'?: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
};
|
|
10
|
-
export declare function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, className, }: CodeSampleProps): JSX.Element;
|
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.CodeSample = void 0;
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const styled_components_1 = __importStar(require("styled-components"));
|
|
29
|
-
const ClipboardService_1 = require("../../utils/ClipboardService");
|
|
30
|
-
const useThemeConfig_1 = require("../../hooks/useThemeConfig");
|
|
31
|
-
const Feedback_1 = require("../../components/Feedback");
|
|
32
|
-
const hooks_1 = require("../../mocks/hooks");
|
|
33
|
-
const utils_1 = require("../../utils");
|
|
34
|
-
function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, className = '', }) {
|
|
35
|
-
const langClassName = language ? `language-${language}` : '';
|
|
36
|
-
const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
|
|
37
|
-
const [isCopied, setIsCopied] = (0, react_1.useState)(false);
|
|
38
|
-
const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } = (0, Feedback_1.useReportDialog)(report);
|
|
39
|
-
const { translate } = (0, hooks_1.useTranslate)();
|
|
40
|
-
const translationKeys = {
|
|
41
|
-
buttonText: 'theme.codeSnippet.copy.buttonText',
|
|
42
|
-
tooltipText: 'theme.codeSnippet.copy.tooltipText',
|
|
43
|
-
toasterText: 'theme.codeSnippet.copy.toasterText',
|
|
44
|
-
reportTitle: 'theme.codeSnippet.report.title',
|
|
45
|
-
};
|
|
46
|
-
const copyCode = (code) => {
|
|
47
|
-
ClipboardService_1.ClipboardService.copyCustom(code);
|
|
48
|
-
setIsCopied(true);
|
|
49
|
-
setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
|
|
50
|
-
};
|
|
51
|
-
return (react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('code-sample', className), "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
|
|
52
|
-
react_1.default.createElement(CodeSampleButtonContainer, null,
|
|
53
|
-
!copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
54
|
-
!isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: translate(translationKeys.tooltipText, copy.tooltipText || 'Copy to clipboard') }, translate(translationKeys.buttonText, copy.buttonText || 'Copy'))),
|
|
55
|
-
isCopied && (react_1.default.createElement(DoneIndicator, null, translate(translationKeys.toasterText, copy.toasterText || 'Copied!'))))),
|
|
56
|
-
isReportButtonShown && (react_1.default.createElement(Button, Object.assign({}, reportButtonProps), translate(translationKeys.reportTitle, 'Report'))),
|
|
57
|
-
isReportDialogShown && react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialogProps, { location: rawContent }))),
|
|
58
|
-
react_1.default.createElement("pre", { className: langClassName },
|
|
59
|
-
react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
|
|
60
|
-
}
|
|
61
|
-
exports.CodeSample = CodeSample;
|
|
62
|
-
const CodeSampleButtonContainer = styled_components_1.default.div `
|
|
63
|
-
display: flex;
|
|
64
|
-
position: absolute;
|
|
65
|
-
top: 12px;
|
|
66
|
-
right: 5px;
|
|
67
|
-
`;
|
|
68
|
-
const Button = styled_components_1.default.div `
|
|
69
|
-
padding: var(--code-block-controls-padding);
|
|
70
|
-
border-radius: var(--code-block-controls-border-radius);
|
|
71
|
-
font-size: var(--code-block-controls-font-size);
|
|
72
|
-
font-family: var(--code-block-controls-font-family);
|
|
73
|
-
&:hover {
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@media print {
|
|
78
|
-
display: none;
|
|
79
|
-
}
|
|
80
|
-
`;
|
|
81
|
-
const DoneIndicator = styled_components_1.default.div `
|
|
82
|
-
padding: var(--code-block-controls-padding);
|
|
83
|
-
border-radius: var(--code-block-controls-border-radius);
|
|
84
|
-
font-size: var(--code-block-controls-font-size);
|
|
85
|
-
font-family: var(--code-block-controls-font-family);
|
|
86
|
-
cursor: default;
|
|
87
|
-
`;
|
|
88
|
-
const darkStyleTokens = (0, styled_components_1.css) `
|
|
89
|
-
.token.comment,
|
|
90
|
-
.token.prolog,
|
|
91
|
-
.token.doctype,
|
|
92
|
-
.token.cdata {
|
|
93
|
-
color: hsl(30, 20%, 50%);
|
|
94
|
-
}
|
|
95
|
-
.token.property,
|
|
96
|
-
.token.tag,
|
|
97
|
-
.token.number,
|
|
98
|
-
.token.constant,
|
|
99
|
-
.token.symbol {
|
|
100
|
-
color: #62bff9;
|
|
101
|
-
}
|
|
102
|
-
.token.boolean {
|
|
103
|
-
color: firebrick;
|
|
104
|
-
}
|
|
105
|
-
.token.selector,
|
|
106
|
-
.token.attr-name,
|
|
107
|
-
.token.string,
|
|
108
|
-
.token.char,
|
|
109
|
-
.token.builtin,
|
|
110
|
-
.token.inserted {
|
|
111
|
-
color: #a0fbaa;
|
|
112
|
-
& + a,
|
|
113
|
-
& + a:visited {
|
|
114
|
-
color: #4ed2ba;
|
|
115
|
-
text-decoration: underline;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
.token.operator,
|
|
119
|
-
.token.entity,
|
|
120
|
-
.token.url,
|
|
121
|
-
.token.variable {
|
|
122
|
-
color: hsl(40, 90%, 60%);
|
|
123
|
-
}
|
|
124
|
-
.token.atrule,
|
|
125
|
-
.token.attr-value,
|
|
126
|
-
.token.keyword {
|
|
127
|
-
color: hsl(350, 40%, 70%);
|
|
128
|
-
}
|
|
129
|
-
.token.regex,
|
|
130
|
-
.token.important {
|
|
131
|
-
color: #e90;
|
|
132
|
-
}
|
|
133
|
-
.token.deleted {
|
|
134
|
-
color: red;
|
|
135
|
-
}
|
|
136
|
-
`;
|
|
137
|
-
const Wrapper = styled_components_1.default.div `
|
|
138
|
-
overflow: auto;
|
|
139
|
-
border-radius: 4px;
|
|
140
|
-
position: relative;
|
|
141
|
-
|
|
142
|
-
${Button},
|
|
143
|
-
${DoneIndicator} {
|
|
144
|
-
color: var(--code-block-controls-text-color);
|
|
145
|
-
background-color: var(--code-block-controls-background-color);
|
|
146
|
-
opacity: var(--code-block-controls-opacity);
|
|
147
|
-
}
|
|
148
|
-
${Button}:hover {
|
|
149
|
-
color: var(--code-block-controls-hover-text-color);
|
|
150
|
-
background-color: var(--code-block-controls-hover-background-color);
|
|
151
|
-
opacity: var(--code-block-controls-active-opacity);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
pre {
|
|
155
|
-
white-space: var(--code-wrap);
|
|
156
|
-
color: white;
|
|
157
|
-
padding: 12px 14px 15px 14px;
|
|
158
|
-
overflow-x: auto;
|
|
159
|
-
line-height: normal;
|
|
160
|
-
border-radius: var(--code-block-border-radius);
|
|
161
|
-
font-family: var(--code-font-family);
|
|
162
|
-
background-color: var(--code-block-background-color);
|
|
163
|
-
|
|
164
|
-
print-color-adjust: exact;
|
|
165
|
-
-webkit-print-color-adjust: exact;
|
|
166
|
-
|
|
167
|
-
code {
|
|
168
|
-
background-color: transparent;
|
|
169
|
-
border: 0;
|
|
170
|
-
padding: 0;
|
|
171
|
-
color: var(--code-block-text-color);
|
|
172
|
-
&:before,
|
|
173
|
-
&:after {
|
|
174
|
-
content: none;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
pre[class*='language-'] {
|
|
179
|
-
padding: 1em;
|
|
180
|
-
margin: 0.5em 0;
|
|
181
|
-
overflow: auto;
|
|
182
|
-
border: 0;
|
|
183
|
-
border-radius: var(--border-radius);
|
|
184
|
-
}
|
|
185
|
-
code[class='language-text'] {
|
|
186
|
-
line-height: 1.2em;
|
|
187
|
-
display: inline-flex;
|
|
188
|
-
white-space: pre-wrap;
|
|
189
|
-
overflow-wrap: anywhere;
|
|
190
|
-
}
|
|
191
|
-
code[class*='language-'],
|
|
192
|
-
pre[class*='language-'] {
|
|
193
|
-
text-align: left;
|
|
194
|
-
white-space: pre;
|
|
195
|
-
word-spacing: normal;
|
|
196
|
-
word-break: normal;
|
|
197
|
-
word-wrap: normal;
|
|
198
|
-
line-height: 1.5;
|
|
199
|
-
-moz-tab-size: 4;
|
|
200
|
-
-o-tab-size: 4;
|
|
201
|
-
tab-size: 4;
|
|
202
|
-
-webkit-hyphens: none;
|
|
203
|
-
-moz-hyphens: none;
|
|
204
|
-
-ms-hyphens: none;
|
|
205
|
-
hyphens: none;
|
|
206
|
-
.token.important,
|
|
207
|
-
.token.bold {
|
|
208
|
-
font-weight: bold;
|
|
209
|
-
}
|
|
210
|
-
.token.italic {
|
|
211
|
-
font-style: italic;
|
|
212
|
-
}
|
|
213
|
-
.token.entity {
|
|
214
|
-
cursor: help;
|
|
215
|
-
}
|
|
216
|
-
.token.punctuation {
|
|
217
|
-
opacity: 0.7;
|
|
218
|
-
}
|
|
219
|
-
.namespace {
|
|
220
|
-
opacity: 0.7;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
${darkStyleTokens};
|
|
224
|
-
}
|
|
225
|
-
`;
|
|
226
|
-
//# sourceMappingURL=CodeSample.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '../../components/CodeSample/CodeSample';
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { TooltipProps } from '../../components/Tooltip';
|
|
3
|
-
export interface CopyButtonWrapperProps {
|
|
4
|
-
data: unknown;
|
|
5
|
-
children: (props: {
|
|
6
|
-
renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
|
|
7
|
-
}) => JSX.Element;
|
|
8
|
-
onCopyClick?: () => void;
|
|
9
|
-
dataTestId?: string;
|
|
10
|
-
}
|
|
11
|
-
export declare const CopyButtonWrapper: React.NamedExoticComponent<CopyButtonWrapperProps>;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.CopyButtonWrapper = void 0;
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const SamplesPanelControls_1 = require("../../components/SamplesPanelControls");
|
|
29
|
-
const Tooltip_1 = require("../../components/Tooltip");
|
|
30
|
-
const hooks_1 = require("../../hooks");
|
|
31
|
-
const utils_1 = require("../../utils");
|
|
32
|
-
function CopyButtonWrapperComponent({ data, children, onCopyClick, dataTestId = 'copy-button', }) {
|
|
33
|
-
const tooltip = (0, hooks_1.useControl)();
|
|
34
|
-
const showTooltip = () => {
|
|
35
|
-
tooltip.handleOpen();
|
|
36
|
-
setTimeout(() => {
|
|
37
|
-
tooltip.handleClose();
|
|
38
|
-
}, 1500);
|
|
39
|
-
};
|
|
40
|
-
const copy = () => {
|
|
41
|
-
const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
|
|
42
|
-
utils_1.ClipboardService.copyCustom(content);
|
|
43
|
-
showTooltip();
|
|
44
|
-
onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick();
|
|
45
|
-
};
|
|
46
|
-
const renderCopyButton = (placement = 'top') => {
|
|
47
|
-
return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: "Copied", isOpen: tooltip.isOpened, placement: placement },
|
|
48
|
-
react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: copy, "data-cy": dataTestId }, "Copy")));
|
|
49
|
-
};
|
|
50
|
-
return children({ renderCopyButton });
|
|
51
|
-
}
|
|
52
|
-
exports.CopyButtonWrapper = (0, react_1.memo)(CopyButtonWrapperComponent);
|
|
53
|
-
//# sourceMappingURL=CopyButtonWrapper.js.map
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export declare const SamplesControlButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
2
|
-
export declare const SampleControls: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
-
export declare const SampleControlsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export declare const PreformattedCodeBlock: import("styled-components").StyledComponent<"pre", any, {}, never>;
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.PreformattedCodeBlock = exports.SampleControlsWrap = exports.SampleControls = exports.SamplesControlButton = void 0;
|
|
7
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
-
const CodeBlock_1 = require("../../components/CodeBlock");
|
|
9
|
-
exports.SamplesControlButton = styled_components_1.default.button.attrs(({ className }) => ({
|
|
10
|
-
'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
|
|
11
|
-
className: className,
|
|
12
|
-
})) `
|
|
13
|
-
background-color: var(--panel-samples-controls-background-color);
|
|
14
|
-
border: 0;
|
|
15
|
-
outline: 0;
|
|
16
|
-
border-radius: var(--border-radius);
|
|
17
|
-
height: 20px;
|
|
18
|
-
color: var(--panel-samples-controls-text-color);
|
|
19
|
-
font-size: 12px;
|
|
20
|
-
line-height: 12px;
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
padding: 1px 6px;
|
|
23
|
-
min-width: 90px;
|
|
24
|
-
|
|
25
|
-
${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
|
|
26
|
-
padding: 2px 20px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
:hover,
|
|
30
|
-
:focus {
|
|
31
|
-
background-color: var(--panel-samples-controls-hover-background-color);
|
|
32
|
-
}
|
|
33
|
-
`;
|
|
34
|
-
exports.SampleControls = styled_components_1.default.div `
|
|
35
|
-
padding: 10px 0;
|
|
36
|
-
opacity: 0.7;
|
|
37
|
-
transition: opacity 0.3s ease;
|
|
38
|
-
text-align: right;
|
|
39
|
-
|
|
40
|
-
&:focus-within {
|
|
41
|
-
opacity: 1;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
> div,
|
|
45
|
-
> ${exports.SamplesControlButton} {
|
|
46
|
-
/* can have tooltip wrapper div also */
|
|
47
|
-
margin-top: 5px;
|
|
48
|
-
margin-left: 10px;
|
|
49
|
-
|
|
50
|
-
${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
|
|
51
|
-
margin-top: 0;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&:first-child {
|
|
55
|
-
margin-left: 0;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
`;
|
|
59
|
-
exports.SampleControlsWrap = styled_components_1.default.div `
|
|
60
|
-
&:hover ${exports.SampleControls} {
|
|
61
|
-
opacity: 1;
|
|
62
|
-
}
|
|
63
|
-
`;
|
|
64
|
-
exports.PreformattedCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock.withComponent('pre')) `
|
|
65
|
-
overflow-x: auto;
|
|
66
|
-
margin: 0;
|
|
67
|
-
max-height: var(--code-block-max-height);
|
|
68
|
-
font-family: var(--code-font-family);
|
|
69
|
-
padding: 20px;
|
|
70
|
-
border-radius: var(--border-radius);
|
|
71
|
-
background-color: var(--panel-samples-controls-background-color);
|
|
72
|
-
color: var(--text-color-inverse);
|
|
73
|
-
font-size: var(--code-font-size);
|
|
74
|
-
white-space: var(--code-wrap, pre);
|
|
75
|
-
`;
|
|
76
|
-
//# sourceMappingURL=SamplesPanelControls.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '../../components/SamplesPanelControls/SamplesPanelControls';
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface CommonCodeProps {
|
|
3
|
-
withLineNumbers?: boolean;
|
|
4
|
-
startLineNumber?: number;
|
|
5
|
-
className?: string;
|
|
6
|
-
}
|
|
7
|
-
export interface SourceCodeProps extends CommonCodeProps {
|
|
8
|
-
lang: string;
|
|
9
|
-
source?: string;
|
|
10
|
-
externalSource?: ExternalSource;
|
|
11
|
-
onCopyClick?: () => void;
|
|
12
|
-
withCopyButton?: boolean;
|
|
13
|
-
dataTestId?: string;
|
|
14
|
-
}
|
|
15
|
-
interface CodeProps extends Required<Pick<SourceCodeProps, 'lang' | 'source' | 'dataTestId'>>, CommonCodeProps {
|
|
16
|
-
}
|
|
17
|
-
export interface Sample {
|
|
18
|
-
lang: string;
|
|
19
|
-
label?: string;
|
|
20
|
-
}
|
|
21
|
-
export type UnstableExternalCodeSample = Sample & {
|
|
22
|
-
get: (source: ExternalSource) => string;
|
|
23
|
-
};
|
|
24
|
-
export interface ExternalSource {
|
|
25
|
-
sample: UnstableExternalCodeSample;
|
|
26
|
-
exampleName?: string;
|
|
27
|
-
pathParams?: any;
|
|
28
|
-
properties?: any;
|
|
29
|
-
operation?: any;
|
|
30
|
-
}
|
|
31
|
-
export declare function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }: CodeProps): JSX.Element;
|
|
32
|
-
export declare function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId, withLineNumbers, startLineNumber, className, }: SourceCodeProps): JSX.Element;
|
|
33
|
-
export {};
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.SourceCode = exports.Code = void 0;
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const utils_1 = require("../../utils");
|
|
29
|
-
const SamplesPanelControls_1 = require("../../components/SamplesPanelControls");
|
|
30
|
-
const CopyButton_1 = require("../../components/CopyButton");
|
|
31
|
-
function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }) {
|
|
32
|
-
const highlightedCode = (0, utils_1.highlight)(source, lang);
|
|
33
|
-
return (react_1.default.createElement(SamplesPanelControls_1.PreformattedCodeBlock, { className: className, dangerouslySetInnerHTML: {
|
|
34
|
-
__html: withLineNumbers
|
|
35
|
-
? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
|
|
36
|
-
: highlightedCode,
|
|
37
|
-
}, "data-cy": dataTestId }));
|
|
38
|
-
}
|
|
39
|
-
exports.Code = Code;
|
|
40
|
-
function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId = 'source-code', withLineNumbers, startLineNumber, className, }) {
|
|
41
|
-
const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
|
|
42
|
-
// The same initial value should be returned for ssr and frontend to avoid issues
|
|
43
|
-
// Because we don't have session storage in ssr and can't get the security details there
|
|
44
|
-
// Issue for more details https://github.com/Redocly/reference-docs/issues/888
|
|
45
|
-
(0, react_1.useEffect)(() => {
|
|
46
|
-
var _a, _b;
|
|
47
|
-
const _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
|
|
48
|
-
if (_source) {
|
|
49
|
-
setSourceCode(_source);
|
|
50
|
-
}
|
|
51
|
-
}, [source, externalSource]);
|
|
52
|
-
if (withCopyButton) {
|
|
53
|
-
return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, onCopyClick: onCopyClick, "data-component-name": "SourceCode/SourceCode" }, ({ renderCopyButton }) => (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
|
|
54
|
-
react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
|
|
55
|
-
react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId, className: className })))));
|
|
56
|
-
}
|
|
57
|
-
return (react_1.default.createElement(Code, { dataTestId: dataTestId, className: className, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
|
|
58
|
-
}
|
|
59
|
-
exports.SourceCode = SourceCode;
|
|
60
|
-
//# sourceMappingURL=SourceCode.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '../../components/SourceCode/SourceCode';
|