@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view 0.0.0-9bdbb4ce3175c8c295887431ed67b58587667bcf

package/compare-aspect-view.module.scss

@@ -0,0 +1,97 @@
+$editor-padding: 56px;
+
+.componentCompareAspectViewContainer {
+  width: 100%;
+  height: 100%;
+}
+.componentCompareAspectDiffEditorContainer {
+  padding: 0px 8px;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - $editor-padding);
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.name {
+  display: flex;
+  align-items: baseline;
+  padding: 8px;
+}
+
+.componentCompareAspectConfigDiff,
+.componentCompareAspectCalculatedDiff {
+  display: flex;
+  flex: 1 0 auto;
+  padding: 0px 8px;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.diffEditor {
+  width: 100%;
+}
+
+.diffWithActions {
+  position: relative;
+  width: 100%;
+}
+
+.copyActions {
+  position: absolute;
+  z-index: 1;
+  top: 8px;
+  right: 18px;
+  display: flex;
+  gap: 8px;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  height: 100%;
+  width: 100%;
+  // Skeleton shimmer built from theme surfaces. It ran to a hard-coded #2b2b2b, which on a light page
+  // produced grey-on-grey bands.
+  color: var(--surface-neutral-color, #fff);
+  background-image: linear-gradient(
+    to right,
+    currentColor 0%,
+    var(--surface-neutral-hover-color, #f4f5f6) 30%,
+    var(--surface-neutral-hover-color, #f4f5f6) 50%,
+    currentColor 100%
+  );
+  > div {
+    background-image: linear-gradient(
+      to right,
+      currentColor 0%,
+      var(--surface-neutral-hover-color, #f4f5f6) 30%,
+      var(--surface-neutral-hover-color, #f4f5f6) 50%,
+      currentColor 100%
+    );
+  }
+}
+
+.copyButton {
+  cursor: pointer;
+  border: 0;
+  padding: 4px;
+  border-radius: 4px;
+  color: inherit;
+  background: var(--surface-color, #fff);
+  opacity: 0;
+
+  &.isLabelVisible {
+    opacity: 1;
+  }
+}
+
+.diffWithActions:hover .copyButton,
+.copyButton:focus-visible {
+  opacity: 1;
+}
+
+.message {
+  left: 0;
+}

package/compare-aspect-view.spec.tsx

@@ -0,0 +1,16 @@
+import { unchangedContext } from './config-editor';
+
+// Tests the decision only, without rendering: rendering needs `react-dom`, and this component's env can
+// resolve a `react-dom` that does not match its `react`, which fails the suite before it runs.
+jest.mock('@teambit/code.ui.diff-viewer', () => ({ DiffViewer: () => null }));
+
+describe('unchangedContext', () => {
+  it('gives unlimited context when both sides are the same, so the diff is shown in full', () => {
+    const same = JSON.stringify({ policy: {} }, null, 2);
+    expect(unchangedContext(same, same)).toBe(Number.MAX_SAFE_INTEGER);
+  });
+
+  it('keeps the default context when the sides differ', () => {
+    expect(unchangedContext('{}', '{ "policy": {} }')).toBeUndefined();
+  });
+});

package/compare-aspect-view.tsx

@@ -0,0 +1,84 @@
+import type { HTMLAttributes } from 'react';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { H4 } from '@teambit/documenter.ui.heading';
+import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { DiffViewer } from '@teambit/code.ui.diff-viewer';
+import type { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
+import { ConfigDiffEditor, unchangedContext } from './config-editor';
+import styles from './compare-aspect-view.module.scss';
+
+export type CompareAspectViewProps = {
+  baseAspectData?: ComponentAspectData;
+  compareAspectData?: ComponentAspectData;
+  loading?: boolean;
+  name?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function CompareAspectView({
+  baseAspectData,
+  compareAspectData,
+  name,
+  loading,
+  className,
+}: CompareAspectViewProps) {
+  const title = useMemo(() => name?.split('/').pop(), [name]);
+  const originalConfig = JSON.stringify(baseAspectData?.config, null, 2) || '';
+  const modifiedConfig = JSON.stringify(compareAspectData?.config, null, 2) || '';
+  const originalData = JSON.stringify(baseAspectData?.data, null, 2) || '';
+  const modifiedData = JSON.stringify(compareAspectData?.data, null, 2) || '';
+
+  return (
+    <div
+      key={`aspect-diff-editor-${title}`}
+      className={classNames(styles.componentCompareAspectViewContainer, className)}
+    >
+      <div className={styles.name}>
+        <H4 size="xs" className={styles.name}>
+          <span>{title}</span>
+        </H4>
+      </div>
+      <div className={styles.componentCompareAspectDiffEditorContainer}>
+        <div className={styles.componentCompareAspectConfigDiff}>
+          <H4 size="xxs" className={styles.name}>
+            <span>Config</span>
+          </H4>
+          {loading ? (
+            <AspectsCompareViewLoader />
+          ) : (
+            <ConfigDiffEditor
+              original={originalConfig}
+              modified={modifiedConfig}
+              name={`${title || 'aspect'} config`}
+            />
+          )}
+        </div>
+        <div className={styles.componentCompareAspectCalculatedDiff}>
+          <H4 size="xxs" className={styles.name}>
+            <span>Calculated Data</span>
+          </H4>
+          {loading ? (
+            <AspectsCompareViewLoader />
+          ) : (
+            <DiffViewer
+              className={styles.diffEditor}
+              fileName={`${title || 'aspect'}-data.json`}
+              oldContent={originalData}
+              newContent={modifiedData}
+              language="json"
+              defaultView="split"
+              showHeader={false}
+              collapsible={false}
+              maxHeight={420}
+              contextLines={unchangedContext(originalData, modifiedData)}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AspectsCompareViewLoader() {
+  return <BlockSkeleton className={styles.loader} lines={16} />;
+}

package/config-editor.tsx

@@ -0,0 +1,69 @@
+import type { HTMLAttributes } from 'react';
+import React, { useState } from 'react';
+import copy from 'copy-to-clipboard';
+import classNames from 'classnames';
+import { CopiedMessage } from '@teambit/documenter.ui.copied-message';
+import { DiffViewer } from '@teambit/code.ui.diff-viewer';
+import { Icon } from '@teambit/design.elements.icon';
+
+import styles from './compare-aspect-view.module.scss';
+
+export type ConfigDiffEditorProps = {
+  original?: string;
+  modified?: string;
+  name?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function ConfigDiffEditor({ original = '', modified = '', name = 'aspect config' }: ConfigDiffEditorProps) {
+  return (
+    <div className={styles.diffWithActions}>
+      <div className={styles.copyActions}>
+        {original && <CopyButton text={original} label="Copy base config" />}
+        {modified && <CopyButton text={modified} label="Copy changed config" />}
+      </div>
+      <DiffViewer
+        className={styles.diffEditor}
+        fileName={`${name}.json`}
+        oldContent={original}
+        newContent={modified}
+        language="json"
+        defaultView="split"
+        showHeader={false}
+        collapsible={false}
+        maxHeight={420}
+        contextLines={unchangedContext(original, modified)}
+      />
+    </div>
+  );
+}
+
+/**
+ * Unlimited context when both sides are the same: an unchanged config has no change to collapse
+ * toward, so the default context would hide all of it behind a single "Expand N unchanged lines".
+ */
+export function unchangedContext(original: string, modified: string): number | undefined {
+  return original === modified ? Number.MAX_SAFE_INTEGER : undefined;
+}
+
+function CopyButton({ text, label }: { text: string; label: string }) {
+  const [isCopied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    copy(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      className={classNames(styles.copyButton, isCopied && styles.isLabelVisible)}
+      onClick={handleCopy}
+    >
+      <Icon className={styles.copyIcon} of="copy-cmp" />
+      <CopiedMessage className={styles.message} show={isCopied} />
+    </button>
+  );
+}

package/dist/compare-aspect-view.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
+export type CompareAspectViewProps = {
+    baseAspectData?: ComponentAspectData;
+    compareAspectData?: ComponentAspectData;
+    loading?: boolean;
+    name?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }: CompareAspectViewProps): React.JSX.Element;

package/dist/compare-aspect-view.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompareAspectView = CompareAspectView;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const documenter_ui_heading_1 = require("@teambit/documenter.ui.heading");
+const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
+const code_ui_diff_viewer_1 = require("@teambit/code.ui.diff-viewer");
+const config_editor_1 = require("./config-editor");
+const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
+function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }) {
+    const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
+    const originalConfig = JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.config, null, 2) || '';
+    const modifiedConfig = JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.config, null, 2) || '';
+    const originalData = JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.data, null, 2) || '';
+    const modifiedData = JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.data, null, 2) || '';
+    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) },
+        react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.name },
+            react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xs", className: compare_aspect_view_module_scss_1.default.name },
+                react_1.default.createElement("span", null, title))),
+        react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectDiffEditorContainer },
+            react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectConfigDiff },
+                react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
+                    react_1.default.createElement("span", null, "Config")),
+                loading ? (react_1.default.createElement(AspectsCompareViewLoader, null)) : (react_1.default.createElement(config_editor_1.ConfigDiffEditor, { original: originalConfig, modified: modifiedConfig, name: `${title || 'aspect'} config` }))),
+            react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectCalculatedDiff },
+                react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
+                    react_1.default.createElement("span", null, "Calculated Data")),
+                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, contextLines: (0, config_editor_1.unchangedContext)(originalData, modifiedData) }))))));
+}
+function AspectsCompareViewLoader() {
+    return react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { className: compare_aspect_view_module_scss_1.default.loader, lines: 16 });
+}
+//# sourceMappingURL=compare-aspect-view.js.map

package/dist/compare-aspect-view.js.map

@@ -0,0 +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

@@ -0,0 +1,97 @@
+$editor-padding: 56px;
+
+.componentCompareAspectViewContainer {
+  width: 100%;
+  height: 100%;
+}
+.componentCompareAspectDiffEditorContainer {
+  padding: 0px 8px;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - $editor-padding);
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.name {
+  display: flex;
+  align-items: baseline;
+  padding: 8px;
+}
+
+.componentCompareAspectConfigDiff,
+.componentCompareAspectCalculatedDiff {
+  display: flex;
+  flex: 1 0 auto;
+  padding: 0px 8px;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.diffEditor {
+  width: 100%;
+}
+
+.diffWithActions {
+  position: relative;
+  width: 100%;
+}
+
+.copyActions {
+  position: absolute;
+  z-index: 1;
+  top: 8px;
+  right: 18px;
+  display: flex;
+  gap: 8px;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  height: 100%;
+  width: 100%;
+  // Skeleton shimmer built from theme surfaces. It ran to a hard-coded #2b2b2b, which on a light page
+  // produced grey-on-grey bands.
+  color: var(--surface-neutral-color, #fff);
+  background-image: linear-gradient(
+    to right,
+    currentColor 0%,
+    var(--surface-neutral-hover-color, #f4f5f6) 30%,
+    var(--surface-neutral-hover-color, #f4f5f6) 50%,
+    currentColor 100%
+  );
+  > div {
+    background-image: linear-gradient(
+      to right,
+      currentColor 0%,
+      var(--surface-neutral-hover-color, #f4f5f6) 30%,
+      var(--surface-neutral-hover-color, #f4f5f6) 50%,
+      currentColor 100%
+    );
+  }
+}
+
+.copyButton {
+  cursor: pointer;
+  border: 0;
+  padding: 4px;
+  border-radius: 4px;
+  color: inherit;
+  background: var(--surface-color, #fff);
+  opacity: 0;
+
+  &.isLabelVisible {
+    opacity: 1;
+  }
+}
+
+.diffWithActions:hover .copyButton,
+.copyButton:focus-visible {
+  opacity: 1;
+}
+
+.message {
+  left: 0;
+}

package/dist/compare-aspect-view.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/compare-aspect-view.spec.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_editor_1 = require("./config-editor");
+// Tests the decision only, without rendering: rendering needs `react-dom`, and this component's env can
+// resolve a `react-dom` that does not match its `react`, which fails the suite before it runs.
+jest.mock('@teambit/code.ui.diff-viewer', () => ({ DiffViewer: () => null }));
+describe('unchangedContext', () => {
+    it('gives unlimited context when both sides are the same, so the diff is shown in full', () => {
+        const same = JSON.stringify({ policy: {} }, null, 2);
+        expect((0, config_editor_1.unchangedContext)(same, same)).toBe(Number.MAX_SAFE_INTEGER);
+    });
+    it('keeps the default context when the sides differ', () => {
+        expect((0, config_editor_1.unchangedContext)('{}', '{ "policy": {} }')).toBeUndefined();
+    });
+});
+//# sourceMappingURL=compare-aspect-view.spec.js.map

package/dist/compare-aspect-view.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-aspect-view.spec.js","sourceRoot":"","sources":["../compare-aspect-view.spec.tsx"],"names":[],"mappings":";;AAAA,mDAAmD;AAEnD,wGAAwG;AACxG,+FAA+F;AAC/F,IAAI,CAAC,IAAI,CAAC,8BAA8B,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AAE9E,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,oFAAoF,EAAE,GAAG,EAAE;QAC5F,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,IAAA,gCAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACrE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,CAAC,IAAA,gCAAgB,EAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/config-editor.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export type ConfigDiffEditorProps = {
+    original?: string;
+    modified?: string;
+    name?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function ConfigDiffEditor({ original, modified, name }: ConfigDiffEditorProps): React.JSX.Element;
+/**
+ * Unlimited context when both sides are the same: an unchanged config has no change to collapse
+ * toward, so the default context would hide all of it behind a single "Expand N unchanged lines".
+ */
+export declare function unchangedContext(original: string, modified: string): number | undefined;

package/dist/config-editor.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigDiffEditor = ConfigDiffEditor;
+exports.unchangedContext = unchangedContext;
+const react_1 = __importStar(require("react"));
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const classnames_1 = __importDefault(require("classnames"));
+const documenter_ui_copied_message_1 = require("@teambit/documenter.ui.copied-message");
+const code_ui_diff_viewer_1 = require("@teambit/code.ui.diff-viewer");
+const design_elements_icon_1 = require("@teambit/design.elements.icon");
+const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
+function ConfigDiffEditor({ original = '', modified = '', name = 'aspect config' }) {
+    return (react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.diffWithActions },
+        react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.copyActions },
+            original && react_1.default.createElement(CopyButton, { text: original, label: "Copy base config" }),
+            modified && react_1.default.createElement(CopyButton, { text: modified, label: "Copy changed config" })),
+        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, contextLines: unchangedContext(original, modified) })));
+}
+/**
+ * Unlimited context when both sides are the same: an unchanged config has no change to collapse
+ * toward, so the default context would hide all of it behind a single "Expand N unchanged lines".
+ */
+function unchangedContext(original, modified) {
+    return original === modified ? Number.MAX_SAFE_INTEGER : undefined;
+}
+function CopyButton({ text, label }) {
+    const [isCopied, setCopied] = (0, react_1.useState)(false);
+    const handleCopy = () => {
+        (0, copy_to_clipboard_1.default)(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    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 },
+        react_1.default.createElement(design_elements_icon_1.Icon, { className: compare_aspect_view_module_scss_1.default.copyIcon, of: "copy-cmp" }),
+        react_1.default.createElement(documenter_ui_copied_message_1.CopiedMessage, { className: compare_aspect_view_module_scss_1.default.message, show: isCopied })));
+}
+//# sourceMappingURL=config-editor.js.map

package/dist/config-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-editor.js","sourceRoot":"","sources":["../config-editor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,4CAqBC;AAMD,4CAEC;AA5CD,+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,EACd,YAAY,EAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAClD,CACE,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAgB,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;IACjE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;AACrE,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/dist/index.d.ts

@@ -0,0 +1 @@
+export { CompareAspectView, CompareAspectViewProps } from './compare-aspect-view';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompareAspectView = void 0;
+var compare_aspect_view_1 = require("./compare-aspect-view");
+Object.defineProperty(exports, "CompareAspectView", { enumerable: true, get: function () { return compare_aspect_view_1.CompareAspectView; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6DAAkF;AAAzE,wHAAA,iBAAiB,OAAA"}

package/dist/preview-1792521987504.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/index.ts

@@ -0,0 +1 @@
+export { CompareAspectView, CompareAspectViewProps } from './compare-aspect-view';

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view",
+  "version": "0.0.0-9bdbb4ce3175c8c295887431ed67b58587667bcf",
+  "homepage": "https://bit.cloud/teambit/component/ui/component-compare/compare-aspects/compare-aspect-view",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-compare/compare-aspects/compare-aspect-view",
+    "version": "9bdbb4ce3175c8c295887431ed67b58587667bcf"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "copy-to-clipboard": "3.3.1",
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.loaders.skeleton": "1.0.2",
+    "@teambit/code.ui.diff-viewer": "0.0.0-12776d1e3d08718c601710caf7c198f6f2f6d7a1",
+    "@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.12",
+    "@teambit/documenter.ui.heading": "4.1.8",
+    "@teambit/documenter.ui.copied-message": "4.1.8",
+    "@teambit/design.elements.icon": "1.0.24"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.3.4",
+    "@types/react": "^19.0.0",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^19.0.0",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}