@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view 0.0.2

package/compare-aspect-view.module.scss

@@ -0,0 +1,45 @@
+/**
+  * Monaco container is not flex so providing it a fixed calculated height
+  * so it can fill up the remaining space correctly instead of overflowing
+  *  diff editor headers: h4 (24px) + padding (16px * 2) = 56px
+  */
+$editor-padding: 56px;
+
+.componentCompareAspectViewContainer {
+  width: 100%;
+  height: 100%;
+}
+.componentCompareAspectDiffEditorContainer {
+  padding: 0px 8px;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - $editor-padding);
+}
+
+.name {
+  display: flex;
+  align-items: baseline;
+  padding: 8px;
+}
+
+.componentCompareAspectConfigDiff,
+.componentCompareAspectCalculatedDiff {
+  display: flex;
+  flex: 1;
+  padding: 8px;
+  height: 100%;
+  flex-direction: column;
+
+  > section {
+    overflow: hidden;
+    border-radius: 8px;
+  }
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  height: 100%;
+  width: 100%;
+}

package/compare-aspect-view.tsx

@@ -0,0 +1,85 @@
+import React, { HTMLAttributes, useMemo } from 'react';
+import classNames from 'classnames';
+import { H4 } from '@teambit/documenter.ui.heading';
+import { RoundLoader } from '@teambit/design.ui.round-loader';
+import { DiffEditor } from '@monaco-editor/react';
+import { darkMode } from '@teambit/base-ui.theme.dark-theme';
+import { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
+
+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, className }: CompareAspectViewProps) {
+  const title = useMemo(() => name?.split('/').pop(), [name]);
+
+  const configDiffEditor = (
+    <DiffEditor
+      key={`aspect-config-diff-editor-${title}`}
+      modified={JSON.stringify(compareAspectData?.config, null, 2)}
+      original={JSON.stringify(baseAspectData?.config, null, 2)}
+      language={'json'}
+      className={darkMode}
+      theme={'vs-dark'}
+      options={{
+        readOnly: true,
+      }}
+      loading={
+        <div className={styles.loader}>
+          <RoundLoader />
+        </div>
+      }
+    />
+  );
+
+  const calculatedDataDiffEditor = (
+    <DiffEditor
+      key={`aspect-data-diff-editor-${title}`}
+      modified={JSON.stringify(compareAspectData?.data, null, 2)}
+      original={JSON.stringify(baseAspectData?.data, null, 2)}
+      language={'json'}
+      className={styles.diffEditor}
+      theme={'vs-dark'}
+      options={{
+        readOnly: true,
+      }}
+      loading={
+        <div className={styles.loader}>
+          <RoundLoader />
+        </div>
+      }
+    />
+  );
+
+  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>
+          {configDiffEditor}
+        </div>
+        <div className={styles.componentCompareAspectCalculatedDiff}>
+          <H4 size="xxs" className={styles.name}>
+            <span>Calculated Data</span>
+          </H4>
+          {calculatedDataDiffEditor}
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

package/dist/compare-aspect-view.js

@@ -0,0 +1,62 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const documenter_ui_heading_1 = require("@teambit/documenter.ui.heading");
+const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
+const react_2 = require("@monaco-editor/react");
+const base_ui_theme_dark_theme_1 = require("@teambit/base-ui.theme.dark-theme");
+const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
+function CompareAspectView({ baseAspectData, compareAspectData, name, className }) {
+    const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
+    const configDiffEditor = (react_1.default.createElement(react_2.DiffEditor, { key: `aspect-config-diff-editor-${title}`, modified: JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.config, null, 2), original: JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.config, null, 2), language: 'json', className: base_ui_theme_dark_theme_1.darkMode, theme: 'vs-dark', options: {
+            readOnly: true,
+        }, loading: react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.loader },
+            react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null)) }));
+    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: {
+            readOnly: true,
+        }, loading: react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.loader },
+            react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null)) }));
+    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")),
+                configDiffEditor),
+            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")),
+                calculatedDataDiffEditor))));
+}
+exports.CompareAspectView = CompareAspectView;
+//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuD;AACvD,4DAAoC;AACpC,0EAAoD;AACpD,4EAA8D;AAC9D,gDAAkD;AAClD,gFAA6D;AAG7D,wGAAuD;AASvD,SAAgB,iBAAiB,CAAC,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAA0B;IAC9G,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;IAE5D,MAAM,gBAAgB,GAAG,CACvB,8BAAC,kBAAU,IACT,GAAG,EAAE,6BAA6B,KAAK,EAAE,EACzC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,EAC5D,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,EACzD,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,mCAAQ,EACnB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE;YACP,QAAQ,EAAE,IAAI;SACf,EACD,OAAO,EACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,MAAM;YAC3B,8BAAC,oCAAW,OAAG,CACX,GAER,CACH,CAAC;IAEF,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,EACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,MAAM;YAC3B,8BAAC,oCAAW,OAAG,CACX,GAER,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,gBAAgB,CACb;YACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,oCAAoC;gBACzD,8BAAC,0BAAE,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;oBACnC,8DAA4B,CACzB;gBACJ,wBAAwB,CACrB,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAnED,8CAmEC"}

package/dist/compare-aspect-view.module.scss

@@ -0,0 +1,45 @@
+/**
+  * Monaco container is not flex so providing it a fixed calculated height
+  * so it can fill up the remaining space correctly instead of overflowing
+  *  diff editor headers: h4 (24px) + padding (16px * 2) = 56px
+  */
+$editor-padding: 56px;
+
+.componentCompareAspectViewContainer {
+  width: 100%;
+  height: 100%;
+}
+.componentCompareAspectDiffEditorContainer {
+  padding: 0px 8px;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - $editor-padding);
+}
+
+.name {
+  display: flex;
+  align-items: baseline;
+  padding: 8px;
+}
+
+.componentCompareAspectConfigDiff,
+.componentCompareAspectCalculatedDiff {
+  display: flex;
+  flex: 1;
+  padding: 8px;
+  height: 100%;
+  flex-direction: column;
+
+  > section {
+    overflow: hidden;
+    border-radius: 8px;
+  }
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  height: 100%;
+  width: 100%;
+}

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-1670894303358.js

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

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/index.ts

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

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view",
+  "version": "0.0.2",
+  "homepage": "https://bit.dev/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": "0.0.2"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "4.4.6",
+    "classnames": "2.2.6",
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.theme.dark-theme": "1.0.2",
+    "@teambit/documenter.ui.heading": "4.1.1",
+    "@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.3",
+    "@teambit/design.ui.round-loader": "0.0.355"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@babel/runtime": "7.20.0",
+    "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5",
+    "@types/node": "12.20.4"
+  },
+  "peerDependencies": {
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "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/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "DOM",
+      "ES6",
+      "DOM.Iterable"
+    ],
+    "target": "es2015",
+    "module": "CommonJS",
+    "jsx": "react",
+    "allowJs": true,
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
+  ]
+}

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;
+}