@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view 0.0.16 → 0.0.17

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 (13) hide show
  1. package/.npmignore +10 -0
  2. package/compare-aspect-view.module.scss +34 -27
  3. package/compare-aspect-view.tsx +33 -24
  4. package/config-editor.tsx +40 -91
  5. package/dist/compare-aspect-view.d.ts +3 -2
  6. package/dist/compare-aspect-view.js +24 -15
  7. package/dist/compare-aspect-view.js.map +1 -1
  8. package/dist/compare-aspect-view.module.scss +34 -27
  9. package/dist/config-editor.d.ts +4 -4
  10. package/dist/config-editor.js +29 -54
  11. package/dist/config-editor.js.map +1 -1
  12. package/package.json +13 -14
  13. /package/dist/{preview-1738855733607.js → preview-1789503490046.js} +0 -0
package/.npmignore ADDED
@@ -0,0 +1,10 @@
1
+ dist/tsconfig.tsbuildinfo
2
+ dist/tsconfig.json
3
+ /tsconfig.json
4
+
5
+ package-tar/
6
+ .bit-capsule-ready
7
+ artifacts/*
8
+ package-tar/
9
+ .bit-capsule-ready
10
+ artifacts/*
package/compare-aspect-view.module.scss CHANGED
@@ -1,8 +1,3 @@
1
- /**
2
- * Monaco container is not flex so providing it a fixed calculated height
3
- * so it can fill up the remaining space correctly instead of overflowing
4
- * diff editor headers: h4 (24px) + padding (8px * 2) = 56px
5
- */
6
1
  $editor-padding: 56px;
7
2
 
8
3
  .componentCompareAspectViewContainer {
@@ -14,6 +9,8 @@ $editor-padding: 56px;
14
9
  display: flex;
15
10
  flex-direction: column;
16
11
  height: calc(100% - $editor-padding);
12
+ min-height: 0;
13
+ overflow-y: auto;
17
14
  }
18
15
 
19
16
  .name {
@@ -25,15 +22,28 @@ $editor-padding: 56px;
25
22
  .componentCompareAspectConfigDiff,
26
23
  .componentCompareAspectCalculatedDiff {
27
24
  display: flex;
28
- flex: 1;
25
+ flex: 1 0 auto;
29
26
  padding: 0px 8px;
30
- height: 100%;
27
+ min-height: 0;
31
28
  flex-direction: column;
29
+ }
32
30
 
33
- > section {
34
- overflow: hidden;
35
- border-radius: 8px;
36
- }
31
+ .diffEditor {
32
+ width: 100%;
33
+ }
34
+
35
+ .diffWithActions {
36
+ position: relative;
37
+ width: 100%;
38
+ }
39
+
40
+ .copyActions {
41
+ position: absolute;
42
+ z-index: 1;
43
+ top: 8px;
44
+ right: 18px;
45
+ display: flex;
46
+ gap: 8px;
37
47
  }
38
48
 
39
49
  .loader {
@@ -49,28 +59,25 @@ $editor-padding: 56px;
49
59
  }
50
60
  }
51
61
 
52
-
53
- :global(.side-by-side) {
54
- // display the copy button only in side by side view & on hover
55
- &:hover {
56
- .copyButton {
57
- display: unset;
58
- }
59
- }
60
- }
61
-
62
62
  .copyButton {
63
63
  cursor: pointer;
64
- display: none;
65
- position: absolute;
66
- top: 0;
67
- right: 0;
64
+ border: 0;
65
+ padding: 4px;
66
+ border-radius: 4px;
67
+ color: inherit;
68
+ background: var(--surface-color, #fff);
69
+ opacity: 0;
68
70
 
69
71
  &.isLabelVisible {
70
- display: unset;
72
+ opacity: 1;
71
73
  }
72
74
  }
73
75
 
76
+ .diffWithActions:hover .copyButton,
77
+ .copyButton:focus-visible {
78
+ opacity: 1;
79
+ }
80
+
74
81
  .message {
75
82
  left: 0;
76
- }
83
+ }
package/compare-aspect-view.tsx CHANGED
@@ -1,10 +1,11 @@
1
- import React, { HTMLAttributes, useMemo } from 'react';
1
+ import type { HTMLAttributes } from 'react';
2
+ import React, { useMemo } from 'react';
2
3
  import classNames from 'classnames';
3
4
  import { H4 } from '@teambit/documenter.ui.heading';
4
5
  import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
5
- import { DiffEditor } from '@monaco-editor/react';
6
- import { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
7
- import { ConfigDiffEditor } from './config-editor'
6
+ import { DiffViewer } from '@teambit/code.ui.diff-viewer';
7
+ import type { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
8
+ import { ConfigDiffEditor } from './config-editor';
8
9
  import styles from './compare-aspect-view.module.scss';
9
10
 
10
11
  export type CompareAspectViewProps = {
@@ -22,24 +23,10 @@ export function CompareAspectView({
22
23
  className,
23
24
  }: CompareAspectViewProps) {
24
25
  const title = useMemo(() => name?.split('/').pop(), [name]);
25
-
26
- const original = JSON.stringify(baseAspectData?.config, null, 2)
27
- const modified = JSON.stringify(compareAspectData?.config, null, 2)
28
-
29
- const calculatedDataDiffEditor = (
30
- <DiffEditor
31
- key={`aspect-data-diff-editor-${title}`}
32
- modified={JSON.stringify(compareAspectData?.data, null, 2)}
33
- original={JSON.stringify(baseAspectData?.data, null, 2)}
34
- language={'json'}
35
- className={styles.diffEditor}
36
- theme={'vs-dark'}
37
- options={{
38
- readOnly: true,
39
- }}
40
- loading={<AspectsCompareViewLoader />}
41
- />
42
- );
26
+ const originalConfig = JSON.stringify(baseAspectData?.config, null, 2) || '';
27
+ const modifiedConfig = JSON.stringify(compareAspectData?.config, null, 2) || '';
28
+ const originalData = JSON.stringify(baseAspectData?.data, null, 2) || '';
29
+ const modifiedData = JSON.stringify(compareAspectData?.data, null, 2) || '';
43
30
 
44
31
  return (
45
32
  <div
@@ -56,13 +43,35 @@ export function CompareAspectView({
56
43
  <H4 size="xxs" className={styles.name}>
57
44
  <span>Config</span>
58
45
  </H4>
59
- {loading ? <AspectsCompareViewLoader /> : <ConfigDiffEditor original={original} modified={modified} />}
46
+ {loading ? (
47
+ <AspectsCompareViewLoader />
48
+ ) : (
49
+ <ConfigDiffEditor
50
+ original={originalConfig}
51
+ modified={modifiedConfig}
52
+ name={`${title || 'aspect'} config`}
53
+ />
54
+ )}
60
55
  </div>
61
56
  <div className={styles.componentCompareAspectCalculatedDiff}>
62
57
  <H4 size="xxs" className={styles.name}>
63
58
  <span>Calculated Data</span>
64
59
  </H4>
65
- {loading ? <AspectsCompareViewLoader /> : calculatedDataDiffEditor}
60
+ {loading ? (
61
+ <AspectsCompareViewLoader />
62
+ ) : (
63
+ <DiffViewer
64
+ className={styles.diffEditor}
65
+ fileName={`${title || 'aspect'}-data.json`}
66
+ oldContent={originalData}
67
+ newContent={modifiedData}
68
+ language="json"
69
+ defaultView="split"
70
+ showHeader={false}
71
+ collapsible={false}
72
+ maxHeight={420}
73
+ />
74
+ )}
66
75
  </div>
67
76
  </div>
68
77
  </div>
package/config-editor.tsx CHANGED
@@ -1,111 +1,60 @@
1
- import React, { HTMLAttributes, useMemo, useState, useRef, useEffect, ForwardedRef } from 'react';
1
+ import type { HTMLAttributes } from 'react';
2
+ import React, { useState } from 'react';
2
3
  import copy from 'copy-to-clipboard';
3
4
  import classNames from 'classnames';
4
5
  import { CopiedMessage } from '@teambit/documenter.ui.copied-message';
5
- import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
6
- import { DiffEditor } from '@monaco-editor/react';
7
- import { darkMode } from '@teambit/base-ui.theme.dark-theme';
6
+ import { DiffViewer } from '@teambit/code.ui.diff-viewer';
8
7
  import { Icon } from '@teambit/design.elements.icon';
9
8
 
10
9
  import styles from './compare-aspect-view.module.scss';
11
10
 
12
- export type CompareAspectViewProps = {
11
+ export type ConfigDiffEditorProps = {
13
12
  original?: string;
14
13
  modified?: string;
15
- loading?: boolean;
16
14
  name?: string;
17
15
  } & HTMLAttributes<HTMLDivElement>;
18
16
 
19
- export function ConfigDiffEditor({
20
- original,
21
- modified,
22
- name,
23
- }: CompareAspectViewProps) {
24
- const diffEditorRef = useRef(null);
25
- const title = useMemo(() => name?.split('/').pop(), [name]);
26
-
27
- const originalPanelRef = useRef(null);
28
- const modifiedPanelRef = useRef(null);
29
-
30
- const handleEditorMount = (editor) => {
31
- diffEditorRef.current = editor;
32
-
33
- // Access the original and modified editors
34
- const originalEditor = editor.getOriginalEditor();
35
- const modifiedEditor = editor.getModifiedEditor();
36
-
37
- // Append copy button directly to the original and modified panels
38
- appendComponentToPanel(originalEditor, originalPanelRef.current);
39
- appendComponentToPanel(modifiedEditor, modifiedPanelRef.current);
40
- };
41
-
42
- const appendComponentToPanel = (editorInstance, element) => {
43
- const editorDomNode = editorInstance.getDomNode();
44
- if (editorDomNode && element) {
45
- // Append the React component's DOM node directly to the editor
46
- editorDomNode.appendChild(element);
47
- }
48
- };
49
- return (
50
- <>
51
- <DiffEditor
52
- key={`aspect-config-diff-editor-${title}`}
53
- original={original}
54
- modified={modified}
55
- language={'json'}
56
- className={darkMode}
57
- theme={'vs-dark'}
58
- options={{
59
- readOnly: true,
60
- }}
61
- loading={<AspectsCompareViewLoader />}
62
-
63
- onMount={handleEditorMount}
64
-
65
- />
66
- {original && <PanelContent text={original} ref={originalPanelRef} />}
67
- {modified && <PanelContent text={modified} ref={modifiedPanelRef} />}
68
- </>
69
- );
70
- };
71
-
72
-
73
- function AspectsCompareViewLoader() {
74
- return <BlockSkeleton className={styles.loader} lines={16} />;
17
+ export function ConfigDiffEditor({ original = '', modified = '', name = 'aspect config' }: ConfigDiffEditorProps) {
18
+ return (
19
+ <div className={styles.diffWithActions}>
20
+ <div className={styles.copyActions}>
21
+ {original && <CopyButton text={original} label="Copy base config" />}
22
+ {modified && <CopyButton text={modified} label="Copy changed config" />}
23
+ </div>
24
+ <DiffViewer
25
+ className={styles.diffEditor}
26
+ fileName={`${name}.json`}
27
+ oldContent={original}
28
+ newContent={modified}
29
+ language="json"
30
+ defaultView="split"
31
+ showHeader={false}
32
+ collapsible={false}
33
+ maxHeight={420}
34
+ />
35
+ </div>
36
+ );
75
37
  }
76
38
 
77
- function CopyButton({text}: {text: string}) {
78
- const [isCopied, setCopy] = useState(false);
79
-
39
+ function CopyButton({ text, label }: { text: string; label: string }) {
40
+ const [isCopied, setCopied] = useState(false);
41
+
80
42
  const handleCopy = () => {
81
- setCopy(true);
82
- setTimeout(() => setCopy(false), 2000);
83
43
  copy(text);
44
+ setCopied(true);
45
+ setTimeout(() => setCopied(false), 2000);
84
46
  };
85
47
 
86
48
  return (
87
-
88
- <div className={classNames(styles.copyButton, isCopied && styles.isLabelVisible)} onClick={handleCopy}>
89
- <Icon className={styles.copyIcon} of="copy-cmp" />
90
- <CopiedMessage className={styles.message} show={isCopied} />
91
- </div>
92
-
93
- )
49
+ <button
50
+ type="button"
51
+ aria-label={label}
52
+ title={label}
53
+ className={classNames(styles.copyButton, isCopied && styles.isLabelVisible)}
54
+ onClick={handleCopy}
55
+ >
56
+ <Icon className={styles.copyIcon} of="copy-cmp" />
57
+ <CopiedMessage className={styles.message} show={isCopied} />
58
+ </button>
59
+ );
94
60
  }
95
-
96
-
97
- const PanelContent = React.forwardRef(({ text }: { text: string }, ref: ForwardedRef<HTMLDivElement>) => {
98
- return (
99
- <div
100
- ref={ref}
101
- style={{
102
- position: 'absolute',
103
- top: '8px',
104
- right: '18px',
105
- }}
106
- >
107
- <CopyButton text={text} />
108
- </div>
109
- );
110
- });
111
-
package/dist/compare-aspect-view.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import React, { HTMLAttributes } from 'react';
2
- import { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
1
+ import type { HTMLAttributes } from 'react';
2
+ import React from 'react';
3
+ import type { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
3
4
  export type CompareAspectViewProps = {
4
5
  baseAspectData?: ComponentAspectData;
5
6
  compareAspectData?: ComponentAspectData;
package/dist/compare-aspect-view.js CHANGED
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
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
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
37
  };
@@ -31,16 +41,15 @@ const react_1 = __importStar(require("react"));
31
41
  const classnames_1 = __importDefault(require("classnames"));
32
42
  const documenter_ui_heading_1 = require("@teambit/documenter.ui.heading");
33
43
  const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
34
- const react_2 = require("@monaco-editor/react");
44
+ const code_ui_diff_viewer_1 = require("@teambit/code.ui.diff-viewer");
35
45
  const config_editor_1 = require("./config-editor");
36
46
  const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
37
47
  function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }) {
38
48
  const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
39
- const original = JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.config, null, 2);
40
- const modified = JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.config, null, 2);
41
- const calculatedDataDiffEditor = (react_1.default.createElement(react_2.DiffEditor, { key: `aspect-data-diff-editor-${title}`, modified: JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.data, null, 2), original: JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.data, null, 2), language: 'json', className: compare_aspect_view_module_scss_1.default.diffEditor, theme: 'vs-dark', options: {
42
- readOnly: true,
43
- }, loading: react_1.default.createElement(AspectsCompareViewLoader, null) }));
49
+ const originalConfig = JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.config, null, 2) || '';
50
+ const modifiedConfig = JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.config, null, 2) || '';
51
+ const originalData = JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.data, null, 2) || '';
52
+ const modifiedData = JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.data, null, 2) || '';
44
53
  return (react_1.default.createElement("div", { key: `aspect-diff-editor-${title}`, className: (0, classnames_1.default)(compare_aspect_view_module_scss_1.default.componentCompareAspectViewContainer, className) },
45
54
  react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.name },
46
55
  react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xs", className: compare_aspect_view_module_scss_1.default.name },
@@ -49,11 +58,11 @@ function CompareAspectView({ baseAspectData, compareAspectData, name, loading, c
49
58
  react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectConfigDiff },
50
59
  react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
51
60
  react_1.default.createElement("span", null, "Config")),
52
- loading ? react_1.default.createElement(AspectsCompareViewLoader, null) : react_1.default.createElement(config_editor_1.ConfigDiffEditor, { original: original, modified: modified })),
61
+ loading ? (react_1.default.createElement(AspectsCompareViewLoader, null)) : (react_1.default.createElement(config_editor_1.ConfigDiffEditor, { original: originalConfig, modified: modifiedConfig, name: `${title || 'aspect'} config` }))),
53
62
  react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectCalculatedDiff },
54
63
  react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
55
64
  react_1.default.createElement("span", null, "Calculated Data")),
56
- loading ? react_1.default.createElement(AspectsCompareViewLoader, null) : calculatedDataDiffEditor))));
65
+ loading ? (react_1.default.createElement(AspectsCompareViewLoader, null)) : (react_1.default.createElement(code_ui_diff_viewer_1.DiffViewer, { className: compare_aspect_view_module_scss_1.default.diffEditor, fileName: `${title || 'aspect'}-data.json`, oldContent: originalData, newContent: modifiedData, language: "json", defaultView: "split", showHeader: false, collapsible: false, maxHeight: 420 }))))));
57
66
  }
58
67
  function AspectsCompareViewLoader() {
59
68
  return react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { className: compare_aspect_view_module_scss_1.default.loader, lines: 16 });
package/dist/compare-aspect-view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"compare-aspect-view.js","sourceRoot":"","sources":["../compare-aspect-view.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,8CAqDC;AArED,+CAAuD;AACvD,4DAAoC;AACpC,0EAAoD;AACpD,gFAAkE;AAClE,gDAAkD;AAElD,mDAAkD;AAClD,wGAAuD;AASvD,SAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,iBAAiB,EACjB,IAAI,EACJ,OAAO,EACP,SAAS,GACc;IACvB,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAChE,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAErE,MAAM,wBAAwB,GAAG,CAC/B,8BAAC,kBAAU,IACT,GAAG,EAAE,2BAA2B,KAAK,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,EACvD,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,yCAAM,CAAC,UAAU,EAC5B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE;YACP,QAAQ,EAAE,IAAI;SACf,EACD,OAAO,EAAE,8BAAC,wBAAwB,OAAG,GACrC,CACH,CAAC;IAEF,OAAO,CACL,uCACE,GAAG,EAAE,sBAAsB,KAAK,EAAE,EAClC,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,mCAAmC,EAAE,SAAS,CAAC;QAE5E,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;YACzB,8BAAC,0BAAE,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;gBAClC,4CAAO,KAAK,CAAQ,CACjB,CACD;QACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,yCAAyC;YAC9D,uCAAK,SAAS,EAAE,yCAAM,CAAC,gCAAgC;gBACrD,8BAAC,0BAAE,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;oBACnC,qDAAmB,CAChB;gBACJ,OAAO,CAAC,CAAC,CAAC,8BAAC,wBAAwB,OAAG,CAAC,CAAC,CAAC,8BAAC,gCAAgB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAClG;YACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,oCAAoC;gBACzD,8BAAC,0BAAE,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;oBACnC,8DAA4B,CACzB;gBACJ,OAAO,CAAC,CAAC,CAAC,8BAAC,wBAAwB,OAAG,CAAC,CAAC,CAAC,wBAAwB,CAC9D,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,wBAAwB;IAC/B,OAAO,8BAAC,wCAAa,IAAC,SAAS,EAAE,yCAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,GAAI,CAAC;AAChE,CAAC"}
1
+ {"version":3,"file":"compare-aspect-view.js","sourceRoot":"","sources":["../compare-aspect-view.tsx"],"names":[],"mappings":"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"}
package/dist/compare-aspect-view.module.scss CHANGED
@@ -1,8 +1,3 @@
1
- /**
2
- * Monaco container is not flex so providing it a fixed calculated height
3
- * so it can fill up the remaining space correctly instead of overflowing
4
- * diff editor headers: h4 (24px) + padding (8px * 2) = 56px
5
- */
6
1
  $editor-padding: 56px;
7
2
 
8
3
  .componentCompareAspectViewContainer {
@@ -14,6 +9,8 @@ $editor-padding: 56px;
14
9
  display: flex;
15
10
  flex-direction: column;
16
11
  height: calc(100% - $editor-padding);
12
+ min-height: 0;
13
+ overflow-y: auto;
17
14
  }
18
15
 
19
16
  .name {
@@ -25,15 +22,28 @@ $editor-padding: 56px;
25
22
  .componentCompareAspectConfigDiff,
26
23
  .componentCompareAspectCalculatedDiff {
27
24
  display: flex;
28
- flex: 1;
25
+ flex: 1 0 auto;
29
26
  padding: 0px 8px;
30
- height: 100%;
27
+ min-height: 0;
31
28
  flex-direction: column;
29
+ }
32
30
 
33
- > section {
34
- overflow: hidden;
35
- border-radius: 8px;
36
- }
31
+ .diffEditor {
32
+ width: 100%;
33
+ }
34
+
35
+ .diffWithActions {
36
+ position: relative;
37
+ width: 100%;
38
+ }
39
+
40
+ .copyActions {
41
+ position: absolute;
42
+ z-index: 1;
43
+ top: 8px;
44
+ right: 18px;
45
+ display: flex;
46
+ gap: 8px;
37
47
  }
38
48
 
39
49
  .loader {
@@ -49,28 +59,25 @@ $editor-padding: 56px;
49
59
  }
50
60
  }
51
61
 
52
-
53
- :global(.side-by-side) {
54
- // display the copy button only in side by side view & on hover
55
- &:hover {
56
- .copyButton {
57
- display: unset;
58
- }
59
- }
60
- }
61
-
62
62
  .copyButton {
63
63
  cursor: pointer;
64
- display: none;
65
- position: absolute;
66
- top: 0;
67
- right: 0;
64
+ border: 0;
65
+ padding: 4px;
66
+ border-radius: 4px;
67
+ color: inherit;
68
+ background: var(--surface-color, #fff);
69
+ opacity: 0;
68
70
 
69
71
  &.isLabelVisible {
70
- display: unset;
72
+ opacity: 1;
71
73
  }
72
74
  }
73
75
 
76
+ .diffWithActions:hover .copyButton,
77
+ .copyButton:focus-visible {
78
+ opacity: 1;
79
+ }
80
+
74
81
  .message {
75
82
  left: 0;
76
- }
83
+ }
package/dist/config-editor.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import React, { HTMLAttributes } from 'react';
2
- export type CompareAspectViewProps = {
1
+ import type { HTMLAttributes } from 'react';
2
+ import React from 'react';
3
+ export type ConfigDiffEditorProps = {
3
4
  original?: string;
4
5
  modified?: string;
5
- loading?: boolean;
6
6
  name?: string;
7
7
  } & HTMLAttributes<HTMLDivElement>;
8
- export declare function ConfigDiffEditor({ original, modified, name, }: CompareAspectViewProps): React.JSX.Element;
8
+ export declare function ConfigDiffEditor({ original, modified, name }: ConfigDiffEditorProps): React.JSX.Element;
package/dist/config-editor.js CHANGED
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
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
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
37
  };
@@ -31,60 +41,25 @@ const react_1 = __importStar(require("react"));
31
41
  const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
32
42
  const classnames_1 = __importDefault(require("classnames"));
33
43
  const documenter_ui_copied_message_1 = require("@teambit/documenter.ui.copied-message");
34
- const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
35
- const react_2 = require("@monaco-editor/react");
36
- const base_ui_theme_dark_theme_1 = require("@teambit/base-ui.theme.dark-theme");
44
+ const code_ui_diff_viewer_1 = require("@teambit/code.ui.diff-viewer");
37
45
  const design_elements_icon_1 = require("@teambit/design.elements.icon");
38
46
  const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
39
- function ConfigDiffEditor({ original, modified, name, }) {
40
- const diffEditorRef = (0, react_1.useRef)(null);
41
- const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
42
- const originalPanelRef = (0, react_1.useRef)(null);
43
- const modifiedPanelRef = (0, react_1.useRef)(null);
44
- const handleEditorMount = (editor) => {
45
- diffEditorRef.current = editor;
46
- // Access the original and modified editors
47
- const originalEditor = editor.getOriginalEditor();
48
- const modifiedEditor = editor.getModifiedEditor();
49
- // Append copy button directly to the original and modified panels
50
- appendComponentToPanel(originalEditor, originalPanelRef.current);
51
- appendComponentToPanel(modifiedEditor, modifiedPanelRef.current);
52
- };
53
- const appendComponentToPanel = (editorInstance, element) => {
54
- const editorDomNode = editorInstance.getDomNode();
55
- if (editorDomNode && element) {
56
- // Append the React component's DOM node directly to the editor
57
- editorDomNode.appendChild(element);
58
- }
59
- };
60
- return (react_1.default.createElement(react_1.default.Fragment, null,
61
- react_1.default.createElement(react_2.DiffEditor, { key: `aspect-config-diff-editor-${title}`, original: original, modified: modified, language: 'json', className: base_ui_theme_dark_theme_1.darkMode, theme: 'vs-dark', options: {
62
- readOnly: true,
63
- }, loading: react_1.default.createElement(AspectsCompareViewLoader, null), onMount: handleEditorMount }),
64
- original && react_1.default.createElement(PanelContent, { text: original, ref: originalPanelRef }),
65
- modified && react_1.default.createElement(PanelContent, { text: modified, ref: modifiedPanelRef })));
66
- }
67
- ;
68
- function AspectsCompareViewLoader() {
69
- return react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { className: compare_aspect_view_module_scss_1.default.loader, lines: 16 });
47
+ function ConfigDiffEditor({ original = '', modified = '', name = 'aspect config' }) {
48
+ return (react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.diffWithActions },
49
+ react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.copyActions },
50
+ original && react_1.default.createElement(CopyButton, { text: original, label: "Copy base config" }),
51
+ modified && react_1.default.createElement(CopyButton, { text: modified, label: "Copy changed config" })),
52
+ react_1.default.createElement(code_ui_diff_viewer_1.DiffViewer, { className: compare_aspect_view_module_scss_1.default.diffEditor, fileName: `${name}.json`, oldContent: original, newContent: modified, language: "json", defaultView: "split", showHeader: false, collapsible: false, maxHeight: 420 })));
70
53
  }
71
- function CopyButton({ text }) {
72
- const [isCopied, setCopy] = (0, react_1.useState)(false);
54
+ function CopyButton({ text, label }) {
55
+ const [isCopied, setCopied] = (0, react_1.useState)(false);
73
56
  const handleCopy = () => {
74
- setCopy(true);
75
- setTimeout(() => setCopy(false), 2000);
76
57
  (0, copy_to_clipboard_1.default)(text);
58
+ setCopied(true);
59
+ setTimeout(() => setCopied(false), 2000);
77
60
  };
78
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)(compare_aspect_view_module_scss_1.default.copyButton, isCopied && compare_aspect_view_module_scss_1.default.isLabelVisible), onClick: handleCopy },
61
+ return (react_1.default.createElement("button", { type: "button", "aria-label": label, title: label, className: (0, classnames_1.default)(compare_aspect_view_module_scss_1.default.copyButton, isCopied && compare_aspect_view_module_scss_1.default.isLabelVisible), onClick: handleCopy },
79
62
  react_1.default.createElement(design_elements_icon_1.Icon, { className: compare_aspect_view_module_scss_1.default.copyIcon, of: "copy-cmp" }),
80
63
  react_1.default.createElement(documenter_ui_copied_message_1.CopiedMessage, { className: compare_aspect_view_module_scss_1.default.message, show: isCopied })));
81
64
  }
82
- const PanelContent = react_1.default.forwardRef(({ text }, ref) => {
83
- return (react_1.default.createElement("div", { ref: ref, style: {
84
- position: 'absolute',
85
- top: '8px',
86
- right: '18px',
87
- } },
88
- react_1.default.createElement(CopyButton, { text: text })));
89
- });
90
65
  //# sourceMappingURL=config-editor.js.map
package/dist/config-editor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"config-editor.js","sourceRoot":"","sources":["../config-editor.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"config-editor.js","sourceRoot":"","sources":["../config-editor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,4CAoBC;AAnCD,+CAAwC;AACxC,0EAAqC;AACrC,4DAAoC;AACpC,wFAAsE;AACtE,sEAA0D;AAC1D,wEAAqD;AAErD,wGAAuD;AAQvD,SAAgB,gBAAgB,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,IAAI,GAAG,eAAe,EAAyB;IAC9G,OAAO,CACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,eAAe;QACpC,uCAAK,SAAS,EAAE,yCAAM,CAAC,WAAW;YAC/B,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,kBAAkB,GAAG;YACnE,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,qBAAqB,GAAG,CACnE;QACN,8BAAC,gCAAU,IACT,SAAS,EAAE,yCAAM,CAAC,UAAU,EAC5B,QAAQ,EAAE,GAAG,IAAI,OAAO,EACxB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAC,MAAM,EACf,WAAW,EAAC,OAAO,EACnB,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE,GAAG,GACd,CACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAmC;IAClE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAA,2BAAI,EAAC,IAAI,CAAC,CAAC;QACX,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,OAAO,CACL,0CACE,IAAI,EAAC,QAAQ,gBACD,KAAK,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,UAAU,EAAE,QAAQ,IAAI,yCAAM,CAAC,cAAc,CAAC,EAC3E,OAAO,EAAE,UAAU;QAEnB,8BAAC,2BAAI,IAAC,SAAS,EAAE,yCAAM,CAAC,QAAQ,EAAE,EAAE,EAAC,UAAU,GAAG;QAClD,8BAAC,4CAAa,IAAC,SAAS,EAAE,yCAAM,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,GAAI,CACrD,CACV,CAAC;AACJ,CAAC"}
package/package.json CHANGED
@@ -1,38 +1,37 @@
1
1
  {
2
2
  "name": "@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view",
3
- "version": "0.0.16",
3
+ "version": "0.0.17",
4
4
  "homepage": "https://bit.cloud/teambit/component/ui/component-compare/compare-aspects/compare-aspect-view",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.component",
8
8
  "name": "ui/component-compare/compare-aspects/compare-aspect-view",
9
- "version": "0.0.16"
9
+ "version": "0.0.17"
10
10
  },
11
11
  "dependencies": {
12
- "@monaco-editor/react": "4.4.6",
13
- "classnames": "2.2.6",
14
- "copy-to-clipboard": "^3.3.3",
12
+ "classnames": "^2.5.1",
13
+ "copy-to-clipboard": "3.3.1",
15
14
  "core-js": "^3.0.0",
16
- "@teambit/base-ui.loaders.skeleton": "1.0.1",
17
- "@teambit/documenter.ui.heading": "4.1.1",
18
- "@teambit/base-ui.theme.dark-theme": "1.0.2",
15
+ "@teambit/base-ui.loaders.skeleton": "1.0.2",
16
+ "@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.12",
17
+ "@teambit/documenter.ui.heading": "4.1.8",
19
18
  "@teambit/design.elements.icon": "1.0.24",
20
19
  "@teambit/documenter.ui.copied-message": "4.1.8",
21
- "@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.12"
20
+ "@teambit/code.ui.diff-viewer": "0.0.7"
22
21
  },
23
22
  "devDependencies": {
24
- "@types/classnames": "2.2.11",
25
- "@types/react": "^17.0.8",
23
+ "@types/classnames": "^2.3.4",
24
+ "@types/react": "^19.0.0",
26
25
  "@types/mocha": "9.1.0",
27
26
  "@types/node": "12.20.4",
28
- "@types/react-dom": "^17.0.5",
27
+ "@types/react-dom": "^19.0.0",
29
28
  "@types/jest": "^26.0.0",
30
29
  "@babel/runtime": "7.20.0",
31
30
  "@types/testing-library__jest-dom": "5.9.5"
32
31
  },
33
32
  "peerDependencies": {
34
- "react": "^16.8.0 || ^17.0.0",
35
- "react-dom": "^16.8.0 || ^17.0.0"
33
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
34
+ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
36
35
  },
37
36
  "license": "Apache-2.0",
38
37
  "optionalDependencies": {},