@teambit/defender.ui.test-compare 0.0.1

package/compare-tests-page.tsx

@@ -0,0 +1,131 @@
+import React, { HTMLAttributes } from 'react';
+import { gql, useQuery, useSubscription } from '@apollo/client';
+import { ComponentModel } from '@teambit/component';
+import { EmptyStateSlot } from '@teambit/compositions';
+import { TestLoader } from '@teambit/defender.ui.test-loader';
+import { TestTable } from '@teambit/defender.ui.test-table';
+import { AlertCard } from '@teambit/design.ui.alert-card';
+import { EmptyBox } from '@teambit/design.ui.empty-box';
+import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
+import { styles } from '@teambit/tester';
+import classNames from 'classnames';
+
+export type CompareTestsPageProps = {
+  component: ComponentModel;
+  emptyState: EmptyStateSlot;
+  isCompareVersionWorkspace?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+const TESTS_SUBSCRIPTION_CHANGED = gql`
+  subscription OnTestsChanged($id: String!) {
+    testsChanged(id: $id) {
+      testsResults {
+        testFiles {
+          file
+          duration
+          pass
+          failed
+          pending
+          errorStr
+          tests {
+            ancestor
+            duration
+            status
+            name
+            error
+          }
+        }
+      }
+    }
+  }
+`;
+
+const GET_COMPONENT = gql`
+  query ($id: String!) {
+    getHost {
+      id # for GQL caching
+      getTests(id: $id) {
+        loading
+        testsResults {
+          testFiles {
+            file
+            duration
+            pass
+            failed
+            pending
+            errorStr
+            tests {
+              ancestor
+              duration
+              status
+              name
+              error
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export function CompareTestsPage(props: CompareTestsPageProps) {
+  const { component, emptyState, className, isCompareVersionWorkspace } = props;
+
+  const id = !isCompareVersionWorkspace ? component.id.toString() : component.id.toStringWithoutVersion();
+
+  const onTestsChanged = useSubscription(TESTS_SUBSCRIPTION_CHANGED, { variables: { id } });
+
+  const { data } = useQuery(GET_COMPONENT, {
+    variables: { id },
+  });
+
+  const testData = onTestsChanged.data?.testsChanged || data?.getHost?.getTests;
+  const testResults = testData?.testsResults?.testFiles;
+
+  // TODO: change loading EmptyBox
+  if (testData?.loading) return <TestLoader />;
+
+  const env = component.environment?.id;
+  const EmptyStateTemplate = emptyState.get(env || '');
+
+  if (
+    (testResults === null || testData?.testsResults === null) &&
+    component.host === 'teambit.workspace/workspace' &&
+    EmptyStateTemplate
+  ) {
+    return (
+      <div className={classNames(styles.testsPage, className)}>
+        <div>
+          <AlertCard
+            level="info"
+            title="There are no
+                    tests for this Component. Learn how to add tests:"
+          >
+            <MDXLayout>
+              <EmptyStateTemplate />
+            </MDXLayout>
+          </AlertCard>
+        </div>
+      </div>
+    );
+  }
+
+  // TODO: get the docs domain from the community aspect and pass it here as a prop
+  if (testResults === null || testData?.testsResults === null) {
+    return (
+      <EmptyBox
+        title="This component doesn’t have any tests."
+        linkText="Learn how to add tests to your components"
+        link={`https://bit.dev/docs/dev-services-overview/tester/tester-overview`}
+      />
+    );
+  }
+
+  return (
+    <div className={classNames(styles.testsPage, className)}>
+      <div>
+        <TestTable testResults={testResults} className={styles.testBlock} />
+      </div>
+    </div>
+  );
+}

package/compare-tests.module.scss

@@ -0,0 +1,29 @@
+.checkboxContainer {
+  margin-top: 16px;
+}
+
+.subView {
+  height: 100%;
+  background-color: white;
+  overflow: auto;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.toggleContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+
+  .toggle {
+    margin-right: 8px;
+  }
+}
+
+.splitLayout {
+  margin-top: 8px;
+}

package/compare-tests.tsx

@@ -0,0 +1,80 @@
+import { CompareSplitLayoutPreset, useComponentCompare } from '@teambit/component.ui.compare';
+import { EmptyStateSlot } from '@teambit/compositions';
+import { Toggle } from '@teambit/design.ui.input.toggle';
+import { RoundLoader } from '@teambit/design.ui.round-loader';
+import React, { HTMLAttributes, UIEvent, useMemo, useRef, useState } from 'react';
+import { CompareTestsPage } from './compare-tests-page';
+import styles from './compare-tests.module.scss';
+
+export type CompareTestsProps = {
+  emptyState: EmptyStateSlot;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function CompareTests(props: CompareTestsProps) {
+  const { emptyState } = props;
+  const componentCompare = useComponentCompare();
+  const [isScrollingSynced, setIsScrollingSynced] = useState<boolean>(true);
+
+  const leftPanelRef = useRef<HTMLDivElement>(null);
+  const rightPanelRef = useRef<HTMLDivElement>(null);
+
+  function handleLeftPanelScroll(event: UIEvent<HTMLDivElement>) {
+    if (!isScrollingSynced) return;
+    rightPanelRef.current?.scrollTo({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft });
+  }
+
+  function handleRightPanelScroll(event: UIEvent<HTMLDivElement>) {
+    if (!isScrollingSynced) return;
+    leftPanelRef.current?.scrollTo({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft });
+  }
+
+  function handleScrollingSyncChange() {
+    rightPanelRef.current?.scrollTo({ top: leftPanelRef.current?.scrollTop, left: leftPanelRef.current?.scrollLeft });
+    setIsScrollingSynced((prev) => !prev);
+  }
+
+  const BaseLayout = useMemo(() => {
+    if (componentCompare?.base === undefined) {
+      return <></>;
+    }
+
+    return (
+      <div className={styles.subView} ref={leftPanelRef} onScroll={handleLeftPanelScroll}>
+        <CompareTestsPage component={componentCompare.base} emptyState={emptyState} />
+      </div>
+    );
+  }, [componentCompare?.base, isScrollingSynced]);
+
+  const CompareLayout = useMemo(() => {
+    if (componentCompare?.compare === undefined) {
+      return <></>;
+    }
+
+    return (
+      <div className={styles.subView} ref={rightPanelRef} onScroll={handleRightPanelScroll}>
+        <CompareTestsPage
+          component={componentCompare.compare}
+          isCompareVersionWorkspace={componentCompare.compareIsLocalChanges}
+          emptyState={emptyState}
+        />
+      </div>
+    );
+  }, [componentCompare?.compare, isScrollingSynced]);
+
+  return (
+    <>
+      {componentCompare?.loading && (
+        <div className={styles.loader}>
+          <RoundLoader />
+        </div>
+      )}
+      <div className={styles.checkboxContainer}>
+        <div className={styles.toggleContainer}>
+          <Toggle checked={isScrollingSynced} onInputChanged={handleScrollingSyncChange} className={styles.toggle} />
+          Synchronize Scrolling
+        </div>
+      </div>
+      <CompareSplitLayoutPreset base={BaseLayout} compare={CompareLayout} className={styles.splitLayout} />
+    </>
+  );
+}

package/dist/compare-tests-page.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { ComponentModel } from '@teambit/component';
+import { EmptyStateSlot } from '@teambit/compositions';
+export declare type CompareTestsPageProps = {
+    component: ComponentModel;
+    emptyState: EmptyStateSlot;
+    isCompareVersionWorkspace?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function CompareTestsPage(props: CompareTestsPageProps): JSX.Element;

package/dist/compare-tests-page.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompareTestsPage = void 0;
+const react_1 = __importDefault(require("react"));
+const client_1 = require("@apollo/client");
+const defender_ui_test_loader_1 = require("@teambit/defender.ui.test-loader");
+const defender_ui_test_table_1 = require("@teambit/defender.ui.test-table");
+const design_ui_alert_card_1 = require("@teambit/design.ui.alert-card");
+const design_ui_empty_box_1 = require("@teambit/design.ui.empty-box");
+const mdx_ui_mdx_layout_1 = require("@teambit/mdx.ui.mdx-layout");
+const tester_1 = require("@teambit/tester");
+const classnames_1 = __importDefault(require("classnames"));
+const TESTS_SUBSCRIPTION_CHANGED = (0, client_1.gql) `
+  subscription OnTestsChanged($id: String!) {
+    testsChanged(id: $id) {
+      testsResults {
+        testFiles {
+          file
+          duration
+          pass
+          failed
+          pending
+          errorStr
+          tests {
+            ancestor
+            duration
+            status
+            name
+            error
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_COMPONENT = (0, client_1.gql) `
+  query ($id: String!) {
+    getHost {
+      id # for GQL caching
+      getTests(id: $id) {
+        loading
+        testsResults {
+          testFiles {
+            file
+            duration
+            pass
+            failed
+            pending
+            errorStr
+            tests {
+              ancestor
+              duration
+              status
+              name
+              error
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function CompareTestsPage(props) {
+    var _a, _b, _c, _d;
+    const { component, emptyState, className, isCompareVersionWorkspace } = props;
+    const id = !isCompareVersionWorkspace ? component.id.toString() : component.id.toStringWithoutVersion();
+    const onTestsChanged = (0, client_1.useSubscription)(TESTS_SUBSCRIPTION_CHANGED, { variables: { id } });
+    const { data } = (0, client_1.useQuery)(GET_COMPONENT, {
+        variables: { id },
+    });
+    const testData = ((_a = onTestsChanged.data) === null || _a === void 0 ? void 0 : _a.testsChanged) || ((_b = data === null || data === void 0 ? void 0 : data.getHost) === null || _b === void 0 ? void 0 : _b.getTests);
+    const testResults = (_c = testData === null || testData === void 0 ? void 0 : testData.testsResults) === null || _c === void 0 ? void 0 : _c.testFiles;
+    // TODO: change loading EmptyBox
+    if (testData === null || testData === void 0 ? void 0 : testData.loading)
+        return react_1.default.createElement(defender_ui_test_loader_1.TestLoader, null);
+    const env = (_d = component.environment) === null || _d === void 0 ? void 0 : _d.id;
+    const EmptyStateTemplate = emptyState.get(env || '');
+    if ((testResults === null || (testData === null || testData === void 0 ? void 0 : testData.testsResults) === null) &&
+        component.host === 'teambit.workspace/workspace' &&
+        EmptyStateTemplate) {
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(tester_1.styles.testsPage, className) },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(design_ui_alert_card_1.AlertCard, { level: "info", title: "There are no\n                    tests for this Component. Learn how to add tests:" },
+                    react_1.default.createElement(mdx_ui_mdx_layout_1.MDXLayout, null,
+                        react_1.default.createElement(EmptyStateTemplate, null))))));
+    }
+    // TODO: get the docs domain from the community aspect and pass it here as a prop
+    if (testResults === null || (testData === null || testData === void 0 ? void 0 : testData.testsResults) === null) {
+        return (react_1.default.createElement(design_ui_empty_box_1.EmptyBox, { title: "This component doesn\u2019t have any tests.", linkText: "Learn how to add tests to your components", link: `https://bit.dev/docs/dev-services-overview/tester/tester-overview` }));
+    }
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(tester_1.styles.testsPage, className) },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(defender_ui_test_table_1.TestTable, { testResults: testResults, className: tester_1.styles.testBlock }))));
+}
+exports.CompareTestsPage = CompareTestsPage;
+//# sourceMappingURL=compare-tests-page.js.map

package/dist/compare-tests-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-tests-page.js","sourceRoot":"","sources":["../compare-tests-page.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA8C;AAC9C,2CAAgE;AAGhE,8EAA8D;AAC9D,4EAA4D;AAC5D,wEAA0D;AAC1D,sEAAwD;AACxD,kEAAuD;AACvD,4CAAyC;AACzC,4DAAoC;AAQpC,MAAM,0BAA0B,GAAG,IAAA,YAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;CAsBrC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAA,YAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BxB,CAAC;AAEF,SAAgB,gBAAgB,CAAC,KAA4B;;IAC3D,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IAE9E,MAAM,EAAE,GAAG,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,sBAAsB,EAAE,CAAC;IAExG,MAAM,cAAc,GAAG,IAAA,wBAAe,EAAC,0BAA0B,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAE1F,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,iBAAQ,EAAC,aAAa,EAAE;QACvC,SAAS,EAAE,EAAE,EAAE,EAAE;KAClB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,CAAA,MAAA,cAAc,CAAC,IAAI,0CAAE,YAAY,MAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,QAAQ,CAAA,CAAC;IAC9E,MAAM,WAAW,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,0CAAE,SAAS,CAAC;IAEtD,gCAAgC;IAChC,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO;QAAE,OAAO,8BAAC,oCAAU,OAAG,CAAC;IAE7C,MAAM,GAAG,GAAG,MAAA,SAAS,CAAC,WAAW,0CAAE,EAAE,CAAC;IACtC,MAAM,kBAAkB,GAAG,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC;IAErD,IACE,CAAC,WAAW,KAAK,IAAI,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,MAAK,IAAI,CAAC;QACzD,SAAS,CAAC,IAAI,KAAK,6BAA6B;QAChD,kBAAkB,EAClB;QACA,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YACrD;gBACE,8BAAC,gCAAS,IACR,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,qFACoD;oBAE1D,8BAAC,6BAAS;wBACR,8BAAC,kBAAkB,OAAG,CACZ,CACF,CACR,CACF,CACP,CAAC;KACH;IAED,iFAAiF;IACjF,IAAI,WAAW,KAAK,IAAI,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,MAAK,IAAI,EAAE;QAC3D,OAAO,CACL,8BAAC,8BAAQ,IACP,KAAK,EAAC,6CAAwC,EAC9C,QAAQ,EAAC,2CAA2C,EACpD,IAAI,EAAE,mEAAmE,GACzE,CACH,CAAC;KACH;IAED,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QACrD;YACE,8BAAC,kCAAS,IAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,eAAM,CAAC,SAAS,GAAI,CAChE,CACF,CACP,CAAC;AACJ,CAAC;AA5DD,4CA4DC"}

package/dist/compare-tests.d.ts

@@ -0,0 +1,6 @@
+import { EmptyStateSlot } from '@teambit/compositions';
+import { HTMLAttributes } from 'react';
+export declare type CompareTestsProps = {
+    emptyState: EmptyStateSlot;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function CompareTests(props: CompareTestsProps): JSX.Element;

package/dist/compare-tests.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.CompareTests = void 0;
+const component_ui_compare_1 = require("@teambit/component.ui.compare");
+const design_ui_input_toggle_1 = require("@teambit/design.ui.input.toggle");
+const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
+const react_1 = __importStar(require("react"));
+const compare_tests_page_1 = require("./compare-tests-page");
+const compare_tests_module_scss_1 = __importDefault(require("./compare-tests.module.scss"));
+function CompareTests(props) {
+    const { emptyState } = props;
+    const componentCompare = (0, component_ui_compare_1.useComponentCompare)();
+    const [isScrollingSynced, setIsScrollingSynced] = (0, react_1.useState)(true);
+    const leftPanelRef = (0, react_1.useRef)(null);
+    const rightPanelRef = (0, react_1.useRef)(null);
+    function handleLeftPanelScroll(event) {
+        var _a;
+        if (!isScrollingSynced)
+            return;
+        (_a = rightPanelRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft });
+    }
+    function handleRightPanelScroll(event) {
+        var _a;
+        if (!isScrollingSynced)
+            return;
+        (_a = leftPanelRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft });
+    }
+    function handleScrollingSyncChange() {
+        var _a, _b, _c;
+        (_a = rightPanelRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: (_b = leftPanelRef.current) === null || _b === void 0 ? void 0 : _b.scrollTop, left: (_c = leftPanelRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft });
+        setIsScrollingSynced((prev) => !prev);
+    }
+    const BaseLayout = (0, react_1.useMemo)(() => {
+        if ((componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.base) === undefined) {
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        }
+        return (react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.subView, ref: leftPanelRef, onScroll: handleLeftPanelScroll },
+            react_1.default.createElement(compare_tests_page_1.CompareTestsPage, { component: componentCompare.base, emptyState: emptyState })));
+    }, [componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.base, isScrollingSynced]);
+    const CompareLayout = (0, react_1.useMemo)(() => {
+        if ((componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare) === undefined) {
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        }
+        return (react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.subView, ref: rightPanelRef, onScroll: handleRightPanelScroll },
+            react_1.default.createElement(compare_tests_page_1.CompareTestsPage, { component: componentCompare.compare, isCompareVersionWorkspace: componentCompare.compareIsLocalChanges, emptyState: emptyState })));
+    }, [componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare, isScrollingSynced]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        (componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.loading) && (react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.loader },
+            react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
+        react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.checkboxContainer },
+            react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.toggleContainer },
+                react_1.default.createElement(design_ui_input_toggle_1.Toggle, { checked: isScrollingSynced, onInputChanged: handleScrollingSyncChange, className: compare_tests_module_scss_1.default.toggle }),
+                "Synchronize Scrolling")),
+        react_1.default.createElement(component_ui_compare_1.CompareSplitLayoutPreset, { base: BaseLayout, compare: CompareLayout, className: compare_tests_module_scss_1.default.splitLayout })));
+}
+exports.CompareTests = CompareTests;
+//# sourceMappingURL=compare-tests.js.map

package/dist/compare-tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-tests.js","sourceRoot":"","sources":["../compare-tests.tsx"],"names":[],"mappings":"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"}

package/dist/compare-tests.module.scss

@@ -0,0 +1,29 @@
+.checkboxContainer {
+  margin-top: 16px;
+}
+
+.subView {
+  height: 100%;
+  background-color: white;
+  overflow: auto;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.toggleContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+
+  .toggle {
+    margin-right: 8px;
+  }
+}
+
+.splitLayout {
+  margin-top: 8px;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { CompareTests } from './compare-tests';

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iDAA+C;AAAtC,6GAAA,YAAY,OAAA"}

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 { CompareTests } from './compare-tests';

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@teambit/defender.ui.test-compare",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.defender",
+    "name": "ui/test-compare",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "core-js": "^3.0.0",
+    "@teambit/design.ui.input.toggle": "1.0.12",
+    "@teambit/defender.ui.test-loader": "0.0.490",
+    "@teambit/defender.ui.test-table": "0.0.495",
+    "@teambit/design.ui.alert-card": "0.0.16",
+    "@teambit/design.ui.empty-box": "0.0.353",
+    "@teambit/mdx.ui.mdx-layout": "0.0.500",
+    "@teambit/component.ui.compare": "0.0.1",
+    "@teambit/design.ui.round-loader": "0.0.346"
+  },
+  "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.12.18",
+    "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5",
+    "@types/node": "12.20.4"
+  },
+  "peerDependencies": {
+    "@apollo/client": "^3.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "bit": {
+    "bindingPrefix": "@teambit",
+    "env": {},
+    "overrides": {
+      "dependencies": {
+        "@teambit/legacy": "-",
+        "core-js": "^3.0.0",
+        "react-dom": "-",
+        "react": "-"
+      },
+      "devDependencies": {
+        "@teambit/legacy": "-",
+        "@types/mocha": "9.1.0",
+        "@types/testing-library__jest-dom": "5.9.5",
+        "@babel/runtime": "7.12.18",
+        "@types/jest": "^26.0.0",
+        "@types/react-dom": "^17.0.5",
+        "@types/react": "^17.0.8",
+        "@types/node": "12.20.4",
+        "react-dom": "-",
+        "react": "-"
+      },
+      "peerDependencies": {
+        "react-dom": "^16.8.0 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.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",
+    "vue",
+    "vue-components"
+  ]
+}

package/preview-1654572446572.js

@@ -0,0 +1 @@
+

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