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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/compare-aspect-view.tsx +16 -14
  2. package/dist/compare-aspect-view.d.ts +1 -1
  3. package/dist/compare-aspect-view.js +9 -8
  4. package/dist/compare-aspect-view.js.map +1 -1
  5. package/dist/{preview-1670894303358.js → preview-1672889151191.js} +0 -0
  6. package/package-tar/teambit-component.ui.component-compare.compare-aspects.compare-aspect-view-0.0.3.tgz +0 -0
  7. package/package.json +10 -10
  8. package/package-tar/teambit-component.ui.component-compare.compare-aspects.compare-aspect-view-0.0.2.tgz +0 -0
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/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.3",
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.3"
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,