@redocly/theme 0.45.2-rc.0 → 0.45.2-rc.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.
Files changed (8) hide show
  1. package/lib/components/CodeBlock/CodeBlock.d.ts +2 -1
  2. package/lib/components/CodeBlock/CodeBlock.js +21 -5
  3. package/lib/components/CodeBlock/CodeBlockContainer.js +16 -1
  4. package/lib/core/types/hooks.d.ts +2 -1
  5. package/package.json +1 -1
  6. package/src/components/CodeBlock/CodeBlock.tsx +7 -1
  7. package/src/components/CodeBlock/CodeBlockContainer.tsx +16 -1
  8. package/src/core/types/hooks.ts +4 -1
package/lib/components/CodeBlock/CodeBlock.d.ts CHANGED
@@ -16,6 +16,7 @@ export type CodeBlockProps = {
16
16
  codeBlockMaxHeight?: string;
17
17
  hideCodeColors?: boolean;
18
18
  wrapContents?: boolean;
19
+ [key: string]: unknown;
19
20
  };
20
21
  type UnstableExternalCodeSample = {
21
22
  lang: string;
@@ -36,5 +37,5 @@ type ExternalSource = {
36
37
  properties?: any;
37
38
  operation?: any;
38
39
  };
39
- export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents, children, }: React.PropsWithChildren<CodeBlockProps>): JSX.Element;
40
+ export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents, children, ...rest }: React.PropsWithChildren<CodeBlockProps>): JSX.Element;
40
41
  export {};
package/lib/components/CodeBlock/CodeBlock.js CHANGED
@@ -22,6 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __rest = (this && this.__rest) || function (s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
28
+ t[p] = s[p];
29
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
30
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
32
+ t[p[i]] = s[p[i]];
33
+ }
34
+ return t;
35
+ };
25
36
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
38
  };
@@ -34,9 +45,10 @@ const hooks_1 = require("../../core/hooks");
34
45
  const ReportDialog_1 = require("../../components/Feedback/ReportDialog");
35
46
  const CodeBlockContainer_1 = require("../../components/CodeBlock/CodeBlockContainer");
36
47
  const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControls");
37
- function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children, }) {
38
- var _a, _b, _c, _d, _e, _f;
39
- const [sourceCode, setSourceCode] = (0, react_1.useState)((_c = (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)))) !== null && _c !== void 0 ? _c : '');
48
+ function CodeBlock(_a) {
49
+ var _b, _c, _d, _e, _f, _g;
50
+ var { lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children } = _a, rest = __rest(_a, ["lang", "source", "externalSource", "header", "dataTestId", "codeBlockRef", "highlightedHtml", "withLineNumbers", "startLineNumber", "className", "codeBlockMaxHeight", "tabs", "hideCodeColors", "wrapContents", "children"]);
51
+ const [sourceCode, setSourceCode] = (0, react_1.useState)((_d = (source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)))) !== null && _d !== void 0 ? _d : '');
40
52
  const { useCodeHighlight } = (0, hooks_1.useThemeHooks)();
41
53
  const { highlight } = useCodeHighlight() || {};
42
54
  const highlightedCode = highlightedHtml
@@ -45,7 +57,11 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
45
57
  : highlightedHtml
46
58
  : children
47
59
  ? null
48
- : highlight === null || highlight === void 0 ? void 0 : highlight(sourceCode, lang, { withLineNumbers, startLineNumber });
60
+ : highlight === null || highlight === void 0 ? void 0 : highlight(sourceCode, lang, {
61
+ withLineNumbers,
62
+ startLineNumber,
63
+ highlight: rest['data-highlight'],
64
+ });
49
65
  // The same initial value should be returned for ssr and frontend to avoid issues
50
66
  // Because we don't have session storage in ssr and can't get the security details there
51
67
  // Issue for more details https://github.com/Redocly/reference-docs/issues/888
@@ -58,7 +74,7 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
58
74
  }, [source, externalSource]);
59
75
  const { reportDialog, reportButton } = (0, hooks_1.useReportDialog)();
60
76
  (0, hooks_1.useModalScrollLock)(Boolean(reportDialog.visible));
61
- const controls = (header === null || header === void 0 ? void 0 : header.controls) && Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: Object.assign(Object.assign({}, (_d = header === null || header === void 0 ? void 0 : header.controls) === null || _d === void 0 ? void 0 : _d.report), { props: reportButton.props }), copy: ((_e = header === null || header === void 0 ? void 0 : header.controls) === null || _e === void 0 ? void 0 : _e.copy) ? Object.assign(Object.assign({}, (_f = header === null || header === void 0 ? void 0 : header.controls) === null || _f === void 0 ? void 0 : _f.copy), { data: sourceCode }) : undefined });
77
+ const controls = (header === null || header === void 0 ? void 0 : header.controls) && Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: Object.assign(Object.assign({}, (_e = header === null || header === void 0 ? void 0 : header.controls) === null || _e === void 0 ? void 0 : _e.report), { props: reportButton.props }), copy: ((_f = header === null || header === void 0 ? void 0 : header.controls) === null || _f === void 0 ? void 0 : _f.copy) ? Object.assign(Object.assign({}, (_g = header === null || header === void 0 ? void 0 : header.controls) === null || _g === void 0 ? void 0 : _g.copy), { data: sourceCode }) : undefined });
62
78
  return (react_1.default.createElement(CodeBlockWrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
63
79
  react_1.default.createElement(ContainerWrapper, null,
64
80
  react_1.default.createElement(CodeBlockControls_1.CodeBlockControls, { tabs: tabs, className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
package/lib/components/CodeBlock/CodeBlockContainer.js CHANGED
@@ -138,6 +138,16 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
138
138
 
139
139
  .highlighted {
140
140
  background: var(--tag-basic-bg-color);
141
+ margin-left: calc(var(--spacing-sm) * -1);
142
+ padding-left: var(--spacing-sm);
143
+
144
+ &.error {
145
+ background: var(--color-raspberry-2);
146
+ }
147
+
148
+ &.warning {
149
+ background: var(--color-carrot-2);
150
+ }
141
151
  }
142
152
 
143
153
  /*
@@ -163,17 +173,22 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
163
173
  }
164
174
 
165
175
  .diff {
176
+ margin-left: calc(var(--spacing-sm) * -1);
177
+ padding-left: var(--spacing-sm);
178
+
166
179
  &.add {
167
180
  background: var(--color-grass-2);
168
181
  &:before {
169
182
  content: '+';
183
+ color: var(--color-grass-7);
170
184
  }
171
185
  }
172
186
  &.remove {
173
- background: var(--color-red-2);
187
+ background: var(--color-raspberry-2);
174
188
 
175
189
  &:before {
176
190
  content: '-';
191
+ color: var(--color-raspberry-7);
177
192
  }
178
193
  }
179
194
  }
package/lib/core/types/hooks.d.ts CHANGED
@@ -96,9 +96,10 @@ export type ThemeHooks = {
96
96
  useUserTeams: () => string[];
97
97
  usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
98
98
  useCodeHighlight: () => {
99
- highlight: (code: string, language: string | undefined, { withLineNumbers, startLineNumber }: {
99
+ highlight: (code: string, language: string | undefined, { withLineNumbers, startLineNumber, }: {
100
100
  withLineNumbers?: boolean;
101
101
  startLineNumber?: number;
102
+ highlight?: string;
102
103
  }) => string;
103
104
  };
104
105
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.45.2-rc.0",
3
+ "version": "0.45.2-rc.1",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/CodeBlock/CodeBlock.tsx CHANGED
@@ -26,6 +26,7 @@ export type CodeBlockProps = {
26
26
  codeBlockMaxHeight?: string;
27
27
  hideCodeColors?: boolean;
28
28
  wrapContents?: boolean;
29
+ [key: string]: unknown;
29
30
  };
30
31
 
31
32
  type UnstableExternalCodeSample = {
@@ -64,6 +65,7 @@ export function CodeBlock({
64
65
  hideCodeColors,
65
66
  wrapContents = false,
66
67
  children,
68
+ ...rest
67
69
  }: React.PropsWithChildren<CodeBlockProps>): JSX.Element {
68
70
  const [sourceCode, setSourceCode] = useState<string>(
69
71
  (source || externalSource?.sample?.get?.(externalSource)) ?? '',
@@ -77,7 +79,11 @@ export function CodeBlock({
77
79
  : highlightedHtml
78
80
  : children
79
81
  ? null
80
- : highlight?.(sourceCode, lang, { withLineNumbers, startLineNumber });
82
+ : highlight?.(sourceCode, lang, {
83
+ withLineNumbers,
84
+ startLineNumber,
85
+ highlight: rest['data-highlight'] as string | undefined,
86
+ });
81
87
 
82
88
  // The same initial value should be returned for ssr and frontend to avoid issues
83
89
  // Because we don't have session storage in ssr and can't get the security details there
package/src/components/CodeBlock/CodeBlockContainer.tsx CHANGED
@@ -128,6 +128,16 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
128
128
 
129
129
  .highlighted {
130
130
  background: var(--tag-basic-bg-color);
131
+ margin-left: calc(var(--spacing-sm) * -1);
132
+ padding-left: var(--spacing-sm);
133
+
134
+ &.error {
135
+ background: var(--color-raspberry-2);
136
+ }
137
+
138
+ &.warning {
139
+ background: var(--color-carrot-2);
140
+ }
131
141
  }
132
142
 
133
143
  /*
@@ -153,17 +163,22 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
153
163
  }
154
164
 
155
165
  .diff {
166
+ margin-left: calc(var(--spacing-sm) * -1);
167
+ padding-left: var(--spacing-sm);
168
+
156
169
  &.add {
157
170
  background: var(--color-grass-2);
158
171
  &:before {
159
172
  content: '+';
173
+ color: var(--color-grass-7);
160
174
  }
161
175
  }
162
176
  &.remove {
163
- background: var(--color-red-2);
177
+ background: var(--color-raspberry-2);
164
178
 
165
179
  &:before {
166
180
  content: '-';
181
+ color: var(--color-raspberry-7);
167
182
  }
168
183
  }
169
184
  }
package/src/core/types/hooks.ts CHANGED
@@ -113,7 +113,10 @@ export type ThemeHooks = {
113
113
  highlight: (
114
114
  code: string,
115
115
  language: string | undefined,
116
- { withLineNumbers, startLineNumber }: { withLineNumbers?: boolean; startLineNumber?: number },
116
+ {
117
+ withLineNumbers,
118
+ startLineNumber,
119
+ }: { withLineNumbers?: boolean; startLineNumber?: number; highlight?: string },
117
120
  ) => string;
118
121
  };
119
122
  };