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

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 (10) hide show
  1. package/compare-aspect-view.module.scss +2 -2
  2. package/compare-aspect-view.tsx +16 -14
  3. package/dist/compare-aspect-view.d.ts +1 -1
  4. package/dist/compare-aspect-view.js +9 -8
  5. package/dist/compare-aspect-view.js.map +1 -1
  6. package/dist/compare-aspect-view.module.scss +2 -2
  7. package/dist/{preview-1670894303358.js → preview-1673666932263.js} +0 -0
  8. package/package-tar/teambit-component.ui.component-compare.compare-aspects.compare-aspect-view-0.0.4.tgz +0 -0
  9. package/package.json +10 -10
  10. package/package-tar/teambit-component.ui.component-compare.compare-aspects.compare-aspect-view-0.0.2.tgz +0 -0
package/compare-aspect-view.module.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Monaco container is not flex so providing it a fixed calculated height
3
3
  * so it can fill up the remaining space correctly instead of overflowing
4
- * diff editor headers: h4 (24px) + padding (16px * 2) = 56px
4
+ * diff editor headers: h4 (24px) + padding (8px * 2) = 56px
5
5
  */
6
6
  $editor-padding: 56px;
7
7
 
@@ -26,7 +26,7 @@ $editor-padding: 56px;
26
26
  .componentCompareAspectCalculatedDiff {
27
27
  display: flex;
28
28
  flex: 1;
29
- padding: 8px;
29
+ padding: 0px 8px;
30
30
  height: 100%;
31
31
  flex-direction: column;
32
32
 
package/compare-aspect-view.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { HTMLAttributes, useMemo } from 'react';
2
2
  import classNames from 'classnames';
3
3
  import { H4 } from '@teambit/documenter.ui.heading';
4
- import { RoundLoader } from '@teambit/design.ui.round-loader';
4
+ import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
5
5
  import { DiffEditor } from '@monaco-editor/react';
6
6
  import { darkMode } from '@teambit/base-ui.theme.dark-theme';
7
7
  import { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
@@ -15,7 +15,13 @@ export type CompareAspectViewProps = {
15
15
  name?: string;
16
16
  } & HTMLAttributes<HTMLDivElement>;
17
17
 
18
- export function CompareAspectView({ baseAspectData, compareAspectData, name, className }: CompareAspectViewProps) {
18
+ export function CompareAspectView({
19
+ baseAspectData,
20
+ compareAspectData,
21
+ name,
22
+ loading,
23
+ className,
24
+ }: CompareAspectViewProps) {
19
25
  const title = useMemo(() => name?.split('/').pop(), [name]);
20
26
 
21
27
  const configDiffEditor = (
@@ -29,11 +35,7 @@ export function CompareAspectView({ baseAspectData, compareAspectData, name, cla
29
35
  options={{
30
36
  readOnly: true,
31
37
  }}
32
- loading={
33
- <div className={styles.loader}>
34
- <RoundLoader />
35
- </div>
36
- }
38
+ loading={<AspectsCompareViewLoader />}
37
39
  />
38
40
  );
39
41
 
@@ -48,11 +50,7 @@ export function CompareAspectView({ baseAspectData, compareAspectData, name, cla
48
50
  options={{
49
51
  readOnly: true,
50
52
  }}
51
- loading={
52
- <div className={styles.loader}>
53
- <RoundLoader />
54
- </div>
55
- }
53
+ loading={<AspectsCompareViewLoader />}
56
54
  />
57
55
  );
58
56
 
@@ -71,15 +69,19 @@ export function CompareAspectView({ baseAspectData, compareAspectData, name, cla
71
69
  <H4 size="xxs" className={styles.name}>
72
70
  <span>Config</span>
73
71
  </H4>
74
- {configDiffEditor}
72
+ {loading ? <AspectsCompareViewLoader /> : configDiffEditor}
75
73
  </div>
76
74
  <div className={styles.componentCompareAspectCalculatedDiff}>
77
75
  <H4 size="xxs" className={styles.name}>
78
76
  <span>Calculated Data</span>
79
77
  </H4>
80
- {calculatedDataDiffEditor}
78
+ {loading ? <AspectsCompareViewLoader /> : calculatedDataDiffEditor}
81
79
  </div>
82
80
  </div>
83
81
  </div>
84
82
  );
85
83
  }
84
+
85
+ function AspectsCompareViewLoader() {
86
+ return <BlockSkeleton className={styles.loader} lines={16} />;
87
+ }
package/dist/compare-aspect-view.d.ts CHANGED
@@ -6,4 +6,4 @@ export declare type CompareAspectViewProps = {
6
6
  loading?: boolean;
7
7
  name?: string;
8
8
  } & HTMLAttributes<HTMLDivElement>;
9
- export declare function CompareAspectView({ baseAspectData, compareAspectData, name, className }: CompareAspectViewProps): JSX.Element;
9
+ export declare function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }: CompareAspectViewProps): JSX.Element;
package/dist/compare-aspect-view.js CHANGED
@@ -30,20 +30,18 @@ exports.CompareAspectView = void 0;
30
30
  const react_1 = __importStar(require("react"));
31
31
  const classnames_1 = __importDefault(require("classnames"));
32
32
  const documenter_ui_heading_1 = require("@teambit/documenter.ui.heading");
33
- const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
33
+ const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
34
34
  const react_2 = require("@monaco-editor/react");
35
35
  const base_ui_theme_dark_theme_1 = require("@teambit/base-ui.theme.dark-theme");
36
36
  const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
37
- function CompareAspectView({ baseAspectData, compareAspectData, name, className }) {
37
+ function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }) {
38
38
  const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
39
39
  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: {
40
40
  readOnly: true,
41
- }, loading: react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.loader },
42
- react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null)) }));
41
+ }, loading: react_1.default.createElement(AspectsCompareViewLoader, null) }));
43
42
  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: {
44
43
  readOnly: true,
45
- }, loading: react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.loader },
46
- react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null)) }));
44
+ }, loading: react_1.default.createElement(AspectsCompareViewLoader, null) }));
47
45
  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) },
48
46
  react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.name },
49
47
  react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xs", className: compare_aspect_view_module_scss_1.default.name },
@@ -52,11 +50,14 @@ function CompareAspectView({ baseAspectData, compareAspectData, name, className
52
50
  react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectConfigDiff },
53
51
  react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
54
52
  react_1.default.createElement("span", null, "Config")),
55
- configDiffEditor),
53
+ loading ? react_1.default.createElement(AspectsCompareViewLoader, null) : configDiffEditor),
56
54
  react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectCalculatedDiff },
57
55
  react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
58
56
  react_1.default.createElement("span", null, "Calculated Data")),
59
- calculatedDataDiffEditor))));
57
+ loading ? react_1.default.createElement(AspectsCompareViewLoader, null) : calculatedDataDiffEditor))));
60
58
  }
61
59
  exports.CompareAspectView = CompareAspectView;
60
+ function AspectsCompareViewLoader() {
61
+ return react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { className: compare_aspect_view_module_scss_1.default.loader, lines: 16 });
62
+ }
62
63
  //# sourceMappingURL=compare-aspect-view.js.map
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
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,7 +1,7 @@
1
1
  /**
2
2
  * Monaco container is not flex so providing it a fixed calculated height
3
3
  * so it can fill up the remaining space correctly instead of overflowing
4
- * diff editor headers: h4 (24px) + padding (16px * 2) = 56px
4
+ * diff editor headers: h4 (24px) + padding (8px * 2) = 56px
5
5
  */
6
6
  $editor-padding: 56px;
7
7
 
@@ -26,7 +26,7 @@ $editor-padding: 56px;
26
26
  .componentCompareAspectCalculatedDiff {
27
27
  display: flex;
28
28
  flex: 1;
29
- padding: 8px;
29
+ padding: 0px 8px;
30
30
  height: 100%;
31
31
  flex-direction: column;
32
32
 
package/package.json CHANGED
@@ -1,35 +1,35 @@
1
1
  {
2
2
  "name": "@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "homepage": "https://bit.dev/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.2"
9
+ "version": "0.0.4"
10
10
  },
11
11
  "dependencies": {
12
12
  "@monaco-editor/react": "4.4.6",
13
13
  "classnames": "2.2.6",
14
14
  "core-js": "^3.0.0",
15
+ "@teambit/base-ui.loaders.skeleton": "1.0.1",
15
16
  "@teambit/base-ui.theme.dark-theme": "1.0.2",
16
17
  "@teambit/documenter.ui.heading": "4.1.1",
17
- "@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.3",
18
- "@teambit/design.ui.round-loader": "0.0.355"
18
+ "@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.4"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@types/classnames": "2.2.11",
22
22
  "@types/react": "^17.0.8",
23
23
  "@types/mocha": "9.1.0",
24
- "@types/testing-library__jest-dom": "5.9.5",
25
- "@babel/runtime": "7.20.0",
26
- "@types/jest": "^26.0.0",
24
+ "@types/node": "12.20.4",
27
25
  "@types/react-dom": "^17.0.5",
28
- "@types/node": "12.20.4"
26
+ "@types/jest": "^26.0.0",
27
+ "@babel/runtime": "7.20.0",
28
+ "@types/testing-library__jest-dom": "5.9.5"
29
29
  },
30
30
  "peerDependencies": {
31
- "react-dom": "^16.8.0 || ^17.0.0",
32
- "react": "^16.8.0 || ^17.0.0"
31
+ "react": "^16.8.0 || ^17.0.0",
32
+ "react-dom": "^16.8.0 || ^17.0.0"
33
33
  },
34
34
  "license": "Apache-2.0",
35
35
  "private": false,