@teambit/compositions.ui.composition-compare 0.0.1

package/composition-compare.module.scss

@@ -0,0 +1,42 @@
+.dropdownContainer {
+  display: flex;
+}
+
+.leftDropdown {
+  flex: 1;
+  padding: 16px;
+}
+
+.rightDropdown {
+  flex: 1;
+  padding: 16px 16px 16px 0px;
+}
+
+.mainContainer {
+  display: flex;
+  height: 100%;
+}
+
+.subContainerLeft {
+  flex: 1;
+  background-color: #ededed;
+  padding: 16px;
+}
+
+.subContainerRight {
+  flex: 1;
+  background-color: #ededed;
+  padding: 16px 16px 16px 0px;
+}
+
+.subView {
+  height: 100%;
+  background-color: white;
+  overflow-y: scroll;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

package/composition-compare.tsx

@@ -0,0 +1,152 @@
+import {
+  CompareSplitLayoutPreset,
+  useCompareQueryParam,
+  useComponentCompare,
+  useUpdatedUrlFromQuery,
+} from '@teambit/component.ui.compare';
+import { CompositionContent, EmptyStateSlot } from '@teambit/compositions';
+import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
+import { RoundLoader } from '@teambit/design.ui.round-loader';
+import queryString from 'query-string';
+import React, { useMemo, useState } from 'react';
+import styles from './composition-compare.module.scss';
+import { CompositionDropdown } from './composition-dropdown';
+
+export type CompositionCompareProps = {
+  emptyState?: EmptyStateSlot;
+};
+
+export function CompositionCompare(props: CompositionCompareProps) {
+  const { emptyState } = props;
+
+  const component = useComponentCompare();
+
+  const base = component?.base;
+  const compare = component?.compare;
+
+  const baseCompositions = base?.compositions;
+  const compareCompositions = compare?.compositions;
+  const selectedCompositionBaseFile = useCompareQueryParam('compositionBaseFile');
+  const selectedCompositionCompareFile = useCompareQueryParam('compositionCompareFile');
+
+  const selectedBaseComp =
+    (selectedCompositionBaseFile &&
+      baseCompositions &&
+      baseCompositions.find((c) => c.identifier === selectedCompositionBaseFile)) ||
+    (baseCompositions && baseCompositions[0]);
+
+  const selectedCompareComp =
+    (selectedCompositionCompareFile &&
+      compareCompositions &&
+      compareCompositions.find((c) => c.identifier === selectedCompositionCompareFile)) ||
+    (compareCompositions && compareCompositions[0]);
+
+  const baseCompositionDropdownSource =
+    baseCompositions?.map((c) => {
+      const href = useUpdatedUrlFromQuery({
+        compositionBaseFile: c.identifier,
+        compositionCompareFile: selectedCompareComp?.identifier,
+      });
+
+      return { id: c.identifier, label: c.displayName, value: href };
+    }) || [];
+
+  const compareCompositionDropdownSource =
+    compareCompositions?.map((c) => {
+      const href = useUpdatedUrlFromQuery({
+        compositionBaseFile: selectedBaseComp?.identifier,
+        compositionCompareFile: c.identifier,
+      });
+      return { id: c.identifier, label: c.displayName, value: href };
+    }) || [];
+
+  const [baseCompositionParams, setBaseCompositionParams] = useState<Record<string, any>>({});
+  const baseCompQueryParams = useMemo(() => queryString.stringify(baseCompositionParams), [baseCompositionParams]);
+
+  const [compareCompositionParams, setCompareCompositionParams] = useState<Record<string, any>>({});
+  const compareCompQueryParams = useMemo(
+    () => queryString.stringify(compareCompositionParams),
+    [compareCompositionParams]
+  );
+
+  const selectedBaseDropdown = selectedBaseComp && {
+    id: selectedBaseComp.identifier,
+    label: selectedBaseComp.displayName,
+  };
+
+  const selectedCompareDropdown = selectedCompareComp && {
+    id: selectedCompareComp.identifier,
+    label: selectedCompareComp.displayName,
+  };
+
+  const BaseLayout = useMemo(() => {
+    if (component?.base === undefined) {
+      return <></>;
+    }
+
+    return (
+      <div className={styles.subView}>
+        <CompositionContextProvider queryParams={baseCompositionParams} setQueryParams={setBaseCompositionParams}>
+          <CompositionContent
+            emptyState={emptyState}
+            component={component?.base}
+            selected={selectedBaseComp}
+            queryParams={baseCompQueryParams}
+          />
+        </CompositionContextProvider>
+      </div>
+    );
+  }, [component?.base, selectedBaseComp]);
+
+  const CompareLayout = useMemo(() => {
+    if (component?.compare === undefined) {
+      return <></>;
+    }
+
+    return (
+      <div className={styles.subView}>
+        <CompositionContextProvider queryParams={compareCompositionParams} setQueryParams={setCompareCompositionParams}>
+          <CompositionContent
+            emptyState={emptyState}
+            component={component.compare}
+            selected={selectedCompareComp}
+            queryParams={compareCompQueryParams}
+          />
+        </CompositionContextProvider>
+      </div>
+    );
+  }, [component?.compare, selectedCompareComp]);
+
+  function CompositionDropdowns() {
+    if (baseCompositionDropdownSource.length < 0 && compareCompositionDropdownSource.length < 0) {
+      return <></>;
+    }
+
+    return (
+      <div className={styles.dropdownContainer}>
+        <div className={styles.leftDropdown}>
+          {baseCompositionDropdownSource.length > 0 && (
+            <CompositionDropdown dropdownItems={baseCompositionDropdownSource} selected={selectedBaseDropdown} />
+          )}
+        </div>
+        <div className={styles.rightDropdown}>
+          {compareCompositionDropdownSource.length > 0 && (
+            <CompositionDropdown dropdownItems={compareCompositionDropdownSource} selected={selectedCompareDropdown} />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {component?.loading && (
+        <div className={styles.loader}>
+          <RoundLoader />
+        </div>
+      )}
+      <CompositionDropdowns />
+      <CompareSplitLayoutPreset base={BaseLayout} compare={CompareLayout} />
+    </>
+  );
+}

package/composition-dropdown.module.scss

@@ -0,0 +1,25 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.placeholder {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 8px;
+  height: 30px;
+  border-radius: 6px;
+  user-select: none;
+  transition: background-color 300ms ease-in-out;
+  border: 1px solid var(--bit-border-color, #babec9);
+}
+
+.menu {
+  font-size: var(--bit-p-xs);
+  border-radius: 6px;
+  max-height: 240px;
+  overflow-y: scroll;
+  max-width: 100%;
+  width: 100%;
+  padding: 0px;
+  z-index: $nav-z-index + 1;
+}

package/composition-dropdown.tsx

@@ -0,0 +1,57 @@
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
+import React, { useEffect, useRef } from 'react';
+import styles from './composition-dropdown.module.scss';
+
+export type DropdownItem = { id: string; label: string; value: string };
+
+export type CompositionDropdownProps = {
+  selected?: Omit<DropdownItem, 'value'>;
+  dropdownItems: Array<DropdownItem>;
+};
+
+export function CompositionDropdown(props: CompositionDropdownProps) {
+  const { selected, dropdownItems: data } = props;
+
+  return (
+    <Dropdown
+      dropClass={styles.menu}
+      placeholder={
+        <div className={styles.placeholder}>
+          <div>{selected && selected.label}</div>
+          <Icon of="fat-arrow-down" />
+        </div>
+      }
+    >
+      {data.map((item) => {
+        return <MenuItem key={item.id} current={item} selected={selected} />;
+      })}
+    </Dropdown>
+  );
+}
+
+type MenuItemProps = {
+  selected?: Omit<DropdownItem, 'value'>;
+  current: DropdownItem;
+};
+
+function MenuItem(props: MenuItemProps) {
+  const { selected, current } = props;
+
+  const isCurrent = selected?.id === current.id;
+  const currentVersionRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (isCurrent) {
+      currentVersionRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }, [isCurrent]);
+
+  return (
+    <div ref={currentVersionRef}>
+      <MenuLinkItem isActive={() => current.id === selected?.id} href={current.value}>
+        <div>{current.label}</div>
+      </MenuLinkItem>
+    </div>
+  );
+}

package/dist/composition-compare.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { EmptyStateSlot } from '@teambit/compositions';
+export declare type CompositionCompareProps = {
+    emptyState?: EmptyStateSlot;
+};
+export declare function CompositionCompare(props: CompositionCompareProps): JSX.Element;

package/dist/composition-compare.js

@@ -0,0 +1,108 @@
+"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.CompositionCompare = void 0;
+const component_ui_compare_1 = require("@teambit/component.ui.compare");
+const compositions_1 = require("@teambit/compositions");
+const compositions_ui_hooks_use_composition_1 = require("@teambit/compositions.ui.hooks.use-composition");
+const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
+const query_string_1 = __importDefault(require("query-string"));
+const react_1 = __importStar(require("react"));
+const composition_compare_module_scss_1 = __importDefault(require("./composition-compare.module.scss"));
+const composition_dropdown_1 = require("./composition-dropdown");
+function CompositionCompare(props) {
+    const { emptyState } = props;
+    const component = (0, component_ui_compare_1.useComponentCompare)();
+    const base = component === null || component === void 0 ? void 0 : component.base;
+    const compare = component === null || component === void 0 ? void 0 : component.compare;
+    const baseCompositions = base === null || base === void 0 ? void 0 : base.compositions;
+    const compareCompositions = compare === null || compare === void 0 ? void 0 : compare.compositions;
+    const selectedCompositionBaseFile = (0, component_ui_compare_1.useCompareQueryParam)('compositionBaseFile');
+    const selectedCompositionCompareFile = (0, component_ui_compare_1.useCompareQueryParam)('compositionCompareFile');
+    const selectedBaseComp = (selectedCompositionBaseFile &&
+        baseCompositions &&
+        baseCompositions.find((c) => c.identifier === selectedCompositionBaseFile)) ||
+        (baseCompositions && baseCompositions[0]);
+    const selectedCompareComp = (selectedCompositionCompareFile &&
+        compareCompositions &&
+        compareCompositions.find((c) => c.identifier === selectedCompositionCompareFile)) ||
+        (compareCompositions && compareCompositions[0]);
+    const baseCompositionDropdownSource = (baseCompositions === null || baseCompositions === void 0 ? void 0 : baseCompositions.map((c) => {
+        const href = (0, component_ui_compare_1.useUpdatedUrlFromQuery)({
+            compositionBaseFile: c.identifier,
+            compositionCompareFile: selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier,
+        });
+        return { id: c.identifier, label: c.displayName, value: href };
+    })) || [];
+    const compareCompositionDropdownSource = (compareCompositions === null || compareCompositions === void 0 ? void 0 : compareCompositions.map((c) => {
+        const href = (0, component_ui_compare_1.useUpdatedUrlFromQuery)({
+            compositionBaseFile: selectedBaseComp === null || selectedBaseComp === void 0 ? void 0 : selectedBaseComp.identifier,
+            compositionCompareFile: c.identifier,
+        });
+        return { id: c.identifier, label: c.displayName, value: href };
+    })) || [];
+    const [baseCompositionParams, setBaseCompositionParams] = (0, react_1.useState)({});
+    const baseCompQueryParams = (0, react_1.useMemo)(() => query_string_1.default.stringify(baseCompositionParams), [baseCompositionParams]);
+    const [compareCompositionParams, setCompareCompositionParams] = (0, react_1.useState)({});
+    const compareCompQueryParams = (0, react_1.useMemo)(() => query_string_1.default.stringify(compareCompositionParams), [compareCompositionParams]);
+    const selectedBaseDropdown = selectedBaseComp && {
+        id: selectedBaseComp.identifier,
+        label: selectedBaseComp.displayName,
+    };
+    const selectedCompareDropdown = selectedCompareComp && {
+        id: selectedCompareComp.identifier,
+        label: selectedCompareComp.displayName,
+    };
+    const BaseLayout = (0, react_1.useMemo)(() => {
+        if ((component === null || component === void 0 ? void 0 : component.base) === undefined) {
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        }
+        return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
+            react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: baseCompositionParams, setQueryParams: setBaseCompositionParams },
+                react_1.default.createElement(compositions_1.CompositionContent, { emptyState: emptyState, component: component === null || component === void 0 ? void 0 : component.base, selected: selectedBaseComp, queryParams: baseCompQueryParams }))));
+    }, [component === null || component === void 0 ? void 0 : component.base, selectedBaseComp]);
+    const CompareLayout = (0, react_1.useMemo)(() => {
+        if ((component === null || component === void 0 ? void 0 : component.compare) === undefined) {
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        }
+        return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
+            react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: compareCompositionParams, setQueryParams: setCompareCompositionParams },
+                react_1.default.createElement(compositions_1.CompositionContent, { emptyState: emptyState, component: component.compare, selected: selectedCompareComp, queryParams: compareCompQueryParams }))));
+    }, [component === null || component === void 0 ? void 0 : component.compare, selectedCompareComp]);
+    function CompositionDropdowns() {
+        if (baseCompositionDropdownSource.length < 0 && compareCompositionDropdownSource.length < 0) {
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        }
+        return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.dropdownContainer },
+            react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.leftDropdown }, baseCompositionDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: baseCompositionDropdownSource, selected: selectedBaseDropdown }))),
+            react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.rightDropdown }, compareCompositionDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: compareCompositionDropdownSource, selected: selectedCompareDropdown })))));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        (component === null || component === void 0 ? void 0 : component.loading) && (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.loader },
+            react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
+        react_1.default.createElement(CompositionDropdowns, null),
+        react_1.default.createElement(component_ui_compare_1.CompareSplitLayoutPreset, { base: BaseLayout, compare: CompareLayout })));
+}
+exports.CompositionCompare = CompositionCompare;
+//# sourceMappingURL=composition-compare.js.map

package/dist/composition-compare.js.map

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

package/dist/composition-compare.module.scss

@@ -0,0 +1,42 @@
+.dropdownContainer {
+  display: flex;
+}
+
+.leftDropdown {
+  flex: 1;
+  padding: 16px;
+}
+
+.rightDropdown {
+  flex: 1;
+  padding: 16px 16px 16px 0px;
+}
+
+.mainContainer {
+  display: flex;
+  height: 100%;
+}
+
+.subContainerLeft {
+  flex: 1;
+  background-color: #ededed;
+  padding: 16px;
+}
+
+.subContainerRight {
+  flex: 1;
+  background-color: #ededed;
+  padding: 16px 16px 16px 0px;
+}
+
+.subView {
+  height: 100%;
+  background-color: white;
+  overflow-y: scroll;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

package/dist/composition-dropdown.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type DropdownItem = {
+    id: string;
+    label: string;
+    value: string;
+};
+export declare type CompositionDropdownProps = {
+    selected?: Omit<DropdownItem, 'value'>;
+    dropdownItems: Array<DropdownItem>;
+};
+export declare function CompositionDropdown(props: CompositionDropdownProps): JSX.Element;

package/dist/composition-dropdown.js

@@ -0,0 +1,54 @@
+"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.CompositionDropdown = void 0;
+const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const evangelist_surfaces_dropdown_1 = require("@teambit/evangelist.surfaces.dropdown");
+const react_1 = __importStar(require("react"));
+const composition_dropdown_module_scss_1 = __importDefault(require("./composition-dropdown.module.scss"));
+function CompositionDropdown(props) {
+    const { selected, dropdownItems: data } = props;
+    return (react_1.default.createElement(evangelist_surfaces_dropdown_1.Dropdown, { dropClass: composition_dropdown_module_scss_1.default.menu, placeholder: react_1.default.createElement("div", { className: composition_dropdown_module_scss_1.default.placeholder },
+            react_1.default.createElement("div", null, selected && selected.label),
+            react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down" })) }, data.map((item) => {
+        return react_1.default.createElement(MenuItem, { key: item.id, current: item, selected: selected });
+    })));
+}
+exports.CompositionDropdown = CompositionDropdown;
+function MenuItem(props) {
+    const { selected, current } = props;
+    const isCurrent = (selected === null || selected === void 0 ? void 0 : selected.id) === current.id;
+    const currentVersionRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isCurrent) {
+            (_a = currentVersionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+    }, [isCurrent]);
+    return (react_1.default.createElement("div", { ref: currentVersionRef },
+        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { isActive: () => current.id === (selected === null || selected === void 0 ? void 0 : selected.id), href: current.value },
+            react_1.default.createElement("div", null, current.label))));
+}
+//# sourceMappingURL=composition-dropdown.js.map

package/dist/composition-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composition-dropdown.js","sourceRoot":"","sources":["../composition-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kGAA0E;AAC1E,gFAAyD;AACzD,wFAAiE;AACjE,+CAAiD;AACjD,0GAAwD;AASxD,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEhD,OAAO,CACL,8BAAC,uCAAQ,IACP,SAAS,EAAE,0CAAM,CAAC,IAAI,EACtB,WAAW,EACT,uCAAK,SAAS,EAAE,0CAAM,CAAC,WAAW;YAChC,2CAAM,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAO;YACvC,8BAAC,+BAAI,IAAC,EAAE,EAAC,gBAAgB,GAAG,CACxB,IAGP,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACjB,OAAO,8BAAC,QAAQ,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACvE,CAAC,CAAC,CACO,CACZ,CAAC;AACJ,CAAC;AAlBD,kDAkBC;AAOD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEpC,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,MAAK,OAAO,CAAC,EAAE,CAAC;IAC9C,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACrF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB;QACzB,8BAAC,gDAAY,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,MAAK,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,CAAA,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK;YAC5E,2CAAM,OAAO,CAAC,KAAK,CAAO,CACb,CACX,CACP,CAAC;AACJ,CAAC"}

package/dist/composition-dropdown.module.scss

@@ -0,0 +1,25 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.placeholder {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 8px;
+  height: 30px;
+  border-radius: 6px;
+  user-select: none;
+  transition: background-color 300ms ease-in-out;
+  border: 1px solid var(--bit-border-color, #babec9);
+}
+
+.menu {
+  font-size: var(--bit-p-xs);
+  border-radius: 6px;
+  max-height: 240px;
+  overflow-y: scroll;
+  max-width: 100%;
+  width: 100%;
+  padding: 0px;
+  z-index: $nav-z-index + 1;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { CompositionCompare } from './composition-compare';

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6DAA2D;AAAlD,yHAAA,kBAAkB,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 { CompositionCompare } from './composition-compare';

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@teambit/compositions.ui.composition-compare",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.compositions",
+    "name": "ui/composition-compare",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "query-string": "7.0.0",
+    "core-js": "^3.0.0",
+    "@teambit/design.ui.surfaces.menu.link-item": "0.0.379",
+    "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/evangelist.surfaces.dropdown": "1.0.2",
+    "@teambit/component.ui.compare": "0.0.1",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.163",
+    "@teambit/design.ui.round-loader": "0.0.346",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487"
+  },
+  "devDependencies": {
+    "@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": {
+    "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;
+}