@teambit/component.ui.component-compare.component-compare 0.0.0-2914de1a41b6ff097e810b8da5f8b65f1593f205

package/component-compare.module.scss

@@ -0,0 +1,132 @@
+.componentCompareContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 24px 16px 24px;
+}
+
+.bottom {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  flex: 1;
+
+  &.hidden {
+    display: none;
+  }
+  // padding-bottom: 16px;
+}
+
+.navContainer {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  font-size: var(--bit-p-xs, 14px);
+  padding-left: 8px;
+}
+
+.navigation {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+
+  @media screen and (max-width: 768px) {
+    padding-left: 6px;
+  }
+
+  > li {
+    display: block;
+    margin-right: 16px;
+    height: 100%;
+  }
+}
+
+.loader {
+  padding: 16px 24px;
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.tabLoader {
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.compareLoader {
+  display: flex;
+  padding-top: 16px;
+}
+
+.compareSidebarLoader {
+  width: 30%;
+}
+
+.compareViewLoader {
+  width: 70%;
+  padding-right: 16px;
+}
+
+.activeNav {
+  > div {
+    color: var(--bit-accent-color, #6c5ce7);
+    border-radius: 5px;
+    background-color: var(--bit-accent-bg, #edebfc);
+  }
+
+  &:after {
+    // unset default selection styles
+    height: 0 !important;
+  }
+}
+
+.loadingNav {
+  // > div {
+  //   color: var(--bit-accent-color, #6c5ce7);
+  //   border-radius: 5px;
+  //   background-color: var(--bit-accent-bg, #edebfc);
+  // }
+
+  &:after {
+    // unset default selection styles
+    height: 0 !important;
+  }
+}
+
+.navItem {
+  position: relative;
+  color: var(--bit-text-color-light, #707279);
+
+  &.none {
+    > div {
+      opacity: 65%;
+    }
+  }
+}
+
+.compareMenuTab {
+  position: relative;
+}
+
+.indicator {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  border-radius: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+
+  &.hasChanged {
+    background-color: #ff8b00;
+  }
+
+  &.new {
+    // @todo - review styles
+    display: none;
+    background-color: var(--bit-accent-success-color, #37b26c);
+  }
+}

package/component-compare.tsx

@@ -0,0 +1,447 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/require-default-props */
+import React, { useContext, useMemo, HTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import {
+  CollapsibleMenuNav,
+  ComponentContext,
+  ComponentDescriptorContext,
+  ComponentID,
+  NavPlugin,
+  useComponent,
+} from '@teambit/component';
+import { ComponentCompareContext } from '@teambit/component.ui.component-compare.context';
+import { useComponentCompareQuery } from '@teambit/component.ui.component-compare.hooks.use-component-compare';
+import {
+  FileCompareResult,
+  FieldCompareResult,
+} from '@teambit/component.ui.component-compare.models.component-compare-model';
+import { useCompareQueryParam } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
+import { ComponentCompareVersionPicker } from '@teambit/component.ui.component-compare.version-picker';
+import { ComponentCompareHooks } from '@teambit/component.ui.component-compare.models.component-compare-hooks';
+import { useLocation } from '@teambit/base-react.navigation.link';
+import { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import type {
+  ComponentCompareProps,
+  TabItem,
+} from '@teambit/component.ui.component-compare.models.component-compare-props';
+import { groupByVersion } from '@teambit/component.ui.component-compare.utils.group-by-version';
+import { sortTabs } from '@teambit/component.ui.component-compare.utils.sort-tabs';
+import { sortByDateDsc } from '@teambit/component.ui.component-compare.utils.sort-logs';
+import { extractLazyLoadedData } from '@teambit/component.ui.component-compare.utils.lazy-loading';
+import { BlockSkeleton, WordSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';
+
+import styles from './component-compare.module.scss';
+
+const findPrevVersionFromCurrent = (compareVersion) => (_, index: number, logs: LegacyComponentLog[]) => {
+  if (compareVersion === 'workspace' || logs.length === 1) return true;
+
+  if (index === 0) return false;
+
+  const prevIndex = index - 1;
+
+  return logs[prevIndex].tag === compareVersion || logs[prevIndex].hash === compareVersion;
+};
+
+function deriveChangeTypeCssForNav(tab: TabItem, changed: ChangeType[] | null | undefined): string | null {
+  if (!changed || !tab.changeType) return null;
+  const hasChanged = changed.some((change) => tab.changeType === change);
+  return hasChanged ? styles.hasChanged : null;
+}
+
+function onNavClicked({ hooks, id }: { hooks?: ComponentCompareHooks; id?: string }) {
+  if (!hooks?.tabs?.onClick) return undefined;
+  return (e) => hooks?.tabs?.onClick?.(id, e);
+}
+
+function TabLoader() {
+  return <WordSkeleton className={styles.tabLoader} length={5} />;
+}
+
+function CompareMenuTab({
+  children,
+  changed,
+  changeTypeCss,
+  loading,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  changeTypeCss?: string | null;
+  loading?: boolean;
+  changed?: ChangeType[] | null;
+}) {
+  const hasChanged = useMemo(
+    () => changed?.some((change) => change !== ChangeType.NONE && change !== ChangeType.NEW),
+    [changeTypeCss]
+  );
+
+  if (loading) return <TabLoader />;
+
+  return (
+    <div {...rest} className={classnames(styles.compareMenuTab, className)}>
+      {changeTypeCss && hasChanged && <div className={classnames(styles.indicator, changeTypeCss)} />}
+      <div className={classnames(styles.menuTab)}>{children}</div>
+    </div>
+  );
+}
+
+function CompareMenuNav({ tabs, state, hooks, changes: changed }: ComponentCompareProps) {
+  const activeTab = state?.tabs?.id;
+  const isControlled = state?.tabs?.controlled;
+  const tabsFromProps = extractLazyLoadedData(tabs) || [];
+
+  const extractedTabs: [string, NavPlugin & TabItem][] = useMemo(
+    () =>
+      tabsFromProps.sort(sortTabs).map((tab, index) => {
+        const isActive = !state ? undefined : !!activeTab && !!tab?.id && activeTab === tab.id;
+        const changeTypeCss = deriveChangeTypeCssForNav(tab, changed);
+        const loading = changed === undefined;
+        const key = `${tab.id}-tab-${changeTypeCss}`;
+        return [
+          tab.id || `tab-${index}`,
+          {
+            ...tab,
+            props: {
+              ...tab.props,
+              key,
+              displayName: (!loading && tab.displayName) || undefined,
+              active: isActive,
+              onClick: onNavClicked({ id: tab.id, hooks }),
+              href: (!isControlled && tab.props?.href) || undefined,
+              activeClassName: (!loading && styles.activeNav) || styles.loadingNav,
+              className: styles.navItem,
+              children: (
+                <CompareMenuTab key={key} loading={loading} changeTypeCss={changeTypeCss} changed={changed}>
+                  {tab.props?.children}
+                </CompareMenuTab>
+              ),
+            },
+          },
+        ];
+      }),
+    [tabsFromProps.length, activeTab, changed, changed?.length]
+  );
+
+  const sortedTabs = useMemo(
+    () => extractedTabs.filter(([, tab]) => !tab.widget),
+    [extractedTabs.length, activeTab, changed?.length, changed]
+  );
+  const sortedWidgets = useMemo(
+    () => extractedTabs.filter(([, tab]) => tab.widget),
+    [extractedTabs.length, activeTab, changed?.length, changed]
+  );
+
+  return (
+    <div className={styles.navContainer}>
+      <CollapsibleMenuNav navPlugins={sortedTabs} widgetPlugins={sortedWidgets} />
+    </div>
+  );
+}
+
+function deriveChangeType(
+  baseId?: ComponentID,
+  compareId?: ComponentID,
+  fileCompareDataByName?: Map<string, FileCompareResult> | null,
+  fieldCompareDataByName?: Map<string, FieldCompareResult> | null,
+  testCompareDataByName?: Map<string, FileCompareResult> | null
+): ChangeType[] | undefined | null {
+  if (!baseId && !compareId) return null;
+  if (!baseId?.version) return [ChangeType.NEW];
+
+  if (fileCompareDataByName === null || fieldCompareDataByName === null) return null;
+  if (fileCompareDataByName === undefined || fieldCompareDataByName === undefined) return undefined;
+
+  const fileCompareData = [...fileCompareDataByName.values()];
+
+  if (
+    fieldCompareDataByName.size === 0 &&
+    (fileCompareDataByName.size === 0 || fileCompareData.every((f) => f.status === 'UNCHANGED'))
+  ) {
+    return [ChangeType.NONE];
+  }
+
+  const changed: ChangeType[] = [];
+  const DEPS_FIELD = ['dependencies', 'devDependencies', 'extensionDependencies', 'packageDependencies'];
+
+  if (testCompareDataByName?.size) {
+    changed.push(ChangeType.TESTS);
+  }
+
+  if (fileCompareDataByName.size > 0 && fileCompareData.some((f) => f.status !== 'UNCHANGED')) {
+    changed.push(ChangeType.SOURCE_CODE);
+  }
+
+  if (fieldCompareDataByName.size > 0) {
+    changed.push(ChangeType.ASPECTS);
+  }
+
+  if ([...fieldCompareDataByName.values()].some((field) => DEPS_FIELD.includes(field.fieldName))) {
+    changed.push(ChangeType.DEPENDENCY);
+  }
+
+  return changed;
+}
+
+function CompareLoader({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={className} {...rest}>
+      <BlockSkeleton className={styles.navLoader} lines={3} />
+      <div className={styles.compareLoader}>
+        <div className={styles.compareViewLoader}>
+          <BlockSkeleton lines={30} />
+        </div>
+        <div className={styles.compareSidebarLoader}>
+          <BlockSkeleton lines={30} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RenderCompareScreen(
+  props: ComponentCompareProps & {
+    baseVersion?: string;
+    compareVersion?: string;
+    compareHasLocalChanges?: boolean;
+    componentId: string;
+    loading?: boolean;
+  }
+) {
+  const {
+    routes,
+    state,
+    loading,
+    Loader = CompareLoader,
+    baseVersion,
+    compareVersion,
+    compareHasLocalChanges,
+    componentId,
+    hidden,
+  } = props;
+
+  const showVersionPicker = state?.versionPicker?.element !== null;
+
+  return (
+    <>
+      {showVersionPicker && (
+        <div className={styles.top}>
+          {state?.versionPicker?.element || (
+            <ComponentCompareVersionPicker
+              componentId={componentId}
+              baseVersion={baseVersion}
+              compareVersion={compareVersion}
+              compareHasLocalChanges={compareHasLocalChanges}
+              host={props.host}
+              customUseComponent={props.customUseComponent}
+            />
+          )}
+        </div>
+      )}
+      {loading && !hidden && <Loader className={classnames(styles.loader)} />}
+      {!loading && (
+        <div className={classnames(styles.bottom, hidden && styles.hidden)}>
+          <CompareMenuNav {...props} />
+          {(extractLazyLoadedData(routes) || []).length > 0 && (
+            <SlotRouter routes={extractLazyLoadedData(routes) || []} />
+          )}
+          {state?.tabs?.element}
+        </div>
+      )}
+    </>
+  );
+}
+
+// eslint-disable-next-line complexity
+export function ComponentCompare(props: ComponentCompareProps) {
+  const {
+    host: hostFromProps,
+    baseId: baseIdFromProps,
+    compareId: compareIdFromProps,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    routes,
+    state,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    tabs,
+    className,
+    hooks,
+    changes: changesFromProps,
+    customUseComponent,
+    Loader = CompareLoader,
+    baseContext,
+    compareContext,
+    isFullScreen,
+    hidden = false,
+    compareIdOverride,
+    baseIdOverride,
+    ...rest
+  } = props;
+
+  const baseVersion = useCompareQueryParam('baseVersion');
+
+  const component = useContext(ComponentContext);
+  const componentDescriptor = useContext(ComponentDescriptorContext);
+  const location = useLocation();
+  const isWorkspace = hostFromProps === 'teambit.workspace/workspace';
+  const compareHost =
+    isWorkspace && !location?.search.includes('version') && !compareIdFromProps && component.logs?.length === 0
+      ? hostFromProps
+      : 'teambit.scope/scope';
+  const host = 'teambit.scope/scope';
+  const {
+    component: compareComponent,
+    loading: loadingCompare,
+    componentDescriptor: compareComponentDescriptor,
+  } = useComponent(compareHost, compareIdOverride?.toString() || compareIdFromProps?.toString(), {
+    skip: hidden || (!compareIdFromProps && !compareIdOverride),
+    customUseComponent,
+    logFilters: {
+      log: {
+        // @todo - enable it when we implement lazy loading for logs
+        // limit: 3,
+      },
+    },
+  });
+
+  const allVersionInfo = useMemo(
+    () => (compareComponent?.logs || component.logs)?.slice().sort(sortByDateDsc) || [],
+    [component.id.toString(), loadingCompare, component.logs?.length, compareComponent?.logs?.length]
+  );
+  const isNew = useMemo(() => allVersionInfo.length === 0, [allVersionInfo]);
+  const compareVersion =
+    isWorkspace && !isNew && !location?.search.includes('version') && !compareIdFromProps
+      ? 'workspace'
+      : component.id.version;
+  const compareIsLocalChanges = compareVersion === 'workspace';
+
+  const lastVersionInfo = useMemo(() => {
+    if (compareIsLocalChanges) return allVersionInfo[0];
+    const prevVersionInfo = allVersionInfo.find(findPrevVersionFromCurrent(compareVersion));
+    return prevVersionInfo;
+  }, [component.logs?.length, loadingCompare, compareComponent?.logs?.length]);
+
+  const baseId = React.useMemo(
+    () =>
+      baseIdFromProps ||
+      (baseVersion && component.id.changeVersion(baseVersion)) ||
+      (lastVersionInfo && component.id.changeVersion(lastVersionInfo.tag || lastVersionInfo.hash)) ||
+      component.id,
+    [loadingCompare, baseIdFromProps, baseVersion, lastVersionInfo?.tag, lastVersionInfo?.hash]
+  );
+
+  const {
+    component: base,
+    loading: loadingBase,
+    componentDescriptor: baseComponentDescriptor,
+  } = useComponent(host, baseIdOverride?.toString() || baseId?.toString(), {
+    customUseComponent,
+    skip: hidden || (!baseId && !baseIdOverride),
+    logFilters: {
+      log: {
+        // @todo - enable it when we implement lazy loading for logs
+        // limit: 3,
+      },
+    },
+  });
+
+  const loading = loadingBase || loadingCompare;
+
+  const compare = compareIdFromProps ? compareComponent : component;
+
+  const compCompareId = `${base?.id.toString()}-${compare?.id.toString()}`;
+
+  const logsByVersion = useMemo(() => {
+    return (compare?.logs || []).slice().reduce(groupByVersion, new Map<string, LegacyComponentLog>());
+  }, [compare?.id.toString()]);
+
+  const skipComponentCompareQuery =
+    hidden || (base?.id.version?.toString() === compare?.id.version?.toString() && !compareIsLocalChanges);
+
+  const { loading: compCompareLoading, componentCompareData } = useComponentCompareQuery(
+    base?.id.toString(),
+    compare?.id.toString(),
+    undefined,
+    skipComponentCompareQuery
+  );
+
+  const fileCompareDataByName = useMemo(() => {
+    if (loading || compCompareLoading) return undefined;
+    if (!compCompareLoading && !componentCompareData) return null;
+
+    const fileCompareDataByNameLookup = new Map<string, FileCompareResult>();
+    (componentCompareData?.code || []).forEach((codeCompareData) => {
+      fileCompareDataByNameLookup.set(codeCompareData.fileName, codeCompareData);
+    });
+    return fileCompareDataByNameLookup;
+  }, [compCompareLoading, loading, compCompareId]);
+
+  const fieldCompareDataByName = useMemo(() => {
+    if (loading || compCompareLoading) return undefined;
+    if (!compCompareLoading && !componentCompareData) return null;
+    const fieldCompareDataByNameLookup = new Map<string, FieldCompareResult>();
+    (componentCompareData?.aspects || []).forEach((aspectCompareData) => {
+      fieldCompareDataByNameLookup.set(aspectCompareData.fieldName, aspectCompareData);
+    });
+    return fieldCompareDataByNameLookup;
+  }, [compCompareLoading, loading, compCompareId]);
+
+  const testCompareDataByName = useMemo(() => {
+    if (loading || compCompareLoading) return undefined;
+    if (!compCompareLoading && !componentCompareData) return null;
+    const testCompareDataByNameLookup = new Map<string, FileCompareResult>();
+    (componentCompareData?.tests || []).forEach((testCompareData) => {
+      testCompareDataByNameLookup.set(testCompareData.fileName, testCompareData);
+    });
+    return testCompareDataByNameLookup;
+  }, [compCompareLoading, loading, compCompareId]);
+
+  const componentCompareModel = {
+    compare: compare && {
+      model: compare,
+      descriptor: compareComponentDescriptor || componentDescriptor,
+      hasLocalChanges: compareIsLocalChanges,
+    },
+    base: base && {
+      model: base,
+      descriptor: baseComponentDescriptor,
+    },
+    loading,
+    logsByVersion,
+    state,
+    hooks,
+    baseContext,
+    compareContext,
+    fieldCompareDataByName,
+    fileCompareDataByName,
+    testCompareDataByName,
+    isFullScreen,
+    hidden,
+  };
+
+  const changes =
+    changesFromProps ||
+    deriveChangeType(baseId, compare?.id, fileCompareDataByName, fieldCompareDataByName, testCompareDataByName);
+
+  return (
+    <ComponentCompareContext.Provider value={componentCompareModel}>
+      <div className={classnames(styles.componentCompareContainer, className)} {...rest}>
+        <RenderCompareScreen
+          key={compCompareId}
+          {...props}
+          componentId={
+            compare?.id?.toStringWithoutVersion() ||
+            baseId.toStringWithoutVersion() ||
+            component?.id?.toStringWithoutVersion()
+          }
+          baseVersion={baseId.version}
+          compareVersion={compareIdFromProps?.version || component.id.version}
+          compareHasLocalChanges={compareIsLocalChanges}
+          changes={changes}
+          loading={loading}
+          Loader={Loader}
+        />
+      </div>
+    </ComponentCompareContext.Provider>
+  );
+}

package/dist/component-compare.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentCompareProps } from '@teambit/component.ui.component-compare.models.component-compare-props';
+export declare function ComponentCompare(props: ComponentCompareProps): import("react/jsx-runtime").JSX.Element;

package/dist/component-compare.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/require-default-props */
+import React, { useContext, useMemo } from 'react';
+import classnames from 'classnames';
+import { CollapsibleMenuNav, ComponentContext, ComponentDescriptorContext, useComponent, } from '@teambit/component';
+import { ComponentCompareContext } from '@teambit/component.ui.component-compare.context';
+import { useComponentCompareQuery } from '@teambit/component.ui.component-compare.hooks.use-component-compare';
+import { useCompareQueryParam } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
+import { ComponentCompareVersionPicker } from '@teambit/component.ui.component-compare.version-picker';
+import { useLocation } from '@teambit/base-react.navigation.link';
+import { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { groupByVersion } from '@teambit/component.ui.component-compare.utils.group-by-version';
+import { sortTabs } from '@teambit/component.ui.component-compare.utils.sort-tabs';
+import { sortByDateDsc } from '@teambit/component.ui.component-compare.utils.sort-logs';
+import { extractLazyLoadedData } from '@teambit/component.ui.component-compare.utils.lazy-loading';
+import { BlockSkeleton, WordSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';
+import styles from './component-compare.module.scss';
+const findPrevVersionFromCurrent = (compareVersion) => (_, index, logs) => {
+    if (compareVersion === 'workspace' || logs.length === 1)
+        return true;
+    if (index === 0)
+        return false;
+    const prevIndex = index - 1;
+    return logs[prevIndex].tag === compareVersion || logs[prevIndex].hash === compareVersion;
+};
+function deriveChangeTypeCssForNav(tab, changed) {
+    if (!changed || !tab.changeType)
+        return null;
+    const hasChanged = changed.some((change) => tab.changeType === change);
+    return hasChanged ? styles.hasChanged : null;
+}
+function onNavClicked({ hooks, id }) {
+    if (!hooks?.tabs?.onClick)
+        return undefined;
+    return (e) => hooks?.tabs?.onClick?.(id, e);
+}
+function TabLoader() {
+    return _jsx(WordSkeleton, { className: styles.tabLoader, length: 5 });
+}
+function CompareMenuTab({ children, changed, changeTypeCss, loading, className, ...rest }) {
+    const hasChanged = useMemo(() => changed?.some((change) => change !== ChangeType.NONE && change !== ChangeType.NEW), [changeTypeCss]);
+    if (loading)
+        return _jsx(TabLoader, {});
+    return (_jsxs("div", { ...rest, className: classnames(styles.compareMenuTab, className), children: [changeTypeCss && hasChanged && _jsx("div", { className: classnames(styles.indicator, changeTypeCss) }), _jsx("div", { className: classnames(styles.menuTab), children: children })] }));
+}
+function CompareMenuNav({ tabs, state, hooks, changes: changed }) {
+    const activeTab = state?.tabs?.id;
+    const isControlled = state?.tabs?.controlled;
+    const tabsFromProps = extractLazyLoadedData(tabs) || [];
+    const extractedTabs = useMemo(() => tabsFromProps.sort(sortTabs).map((tab, index) => {
+        const isActive = !state ? undefined : !!activeTab && !!tab?.id && activeTab === tab.id;
+        const changeTypeCss = deriveChangeTypeCssForNav(tab, changed);
+        const loading = changed === undefined;
+        const key = `${tab.id}-tab-${changeTypeCss}`;
+        return [
+            tab.id || `tab-${index}`,
+            {
+                ...tab,
+                props: {
+                    ...tab.props,
+                    key,
+                    displayName: (!loading && tab.displayName) || undefined,
+                    active: isActive,
+                    onClick: onNavClicked({ id: tab.id, hooks }),
+                    href: (!isControlled && tab.props?.href) || undefined,
+                    activeClassName: (!loading && styles.activeNav) || styles.loadingNav,
+                    className: styles.navItem,
+                    children: (_jsx(CompareMenuTab, { loading: loading, changeTypeCss: changeTypeCss, changed: changed, children: tab.props?.children }, key)),
+                },
+            },
+        ];
+    }), [tabsFromProps.length, activeTab, changed, changed?.length]);
+    const sortedTabs = useMemo(() => extractedTabs.filter(([, tab]) => !tab.widget), [extractedTabs.length, activeTab, changed?.length, changed]);
+    const sortedWidgets = useMemo(() => extractedTabs.filter(([, tab]) => tab.widget), [extractedTabs.length, activeTab, changed?.length, changed]);
+    return (_jsx("div", { className: styles.navContainer, children: _jsx(CollapsibleMenuNav, { navPlugins: sortedTabs, widgetPlugins: sortedWidgets }) }));
+}
+function deriveChangeType(baseId, compareId, fileCompareDataByName, fieldCompareDataByName, testCompareDataByName) {
+    if (!baseId && !compareId)
+        return null;
+    if (!baseId?.version)
+        return [ChangeType.NEW];
+    if (fileCompareDataByName === null || fieldCompareDataByName === null)
+        return null;
+    if (fileCompareDataByName === undefined || fieldCompareDataByName === undefined)
+        return undefined;
+    const fileCompareData = [...fileCompareDataByName.values()];
+    if (fieldCompareDataByName.size === 0 &&
+        (fileCompareDataByName.size === 0 || fileCompareData.every((f) => f.status === 'UNCHANGED'))) {
+        return [ChangeType.NONE];
+    }
+    const changed = [];
+    const DEPS_FIELD = ['dependencies', 'devDependencies', 'extensionDependencies', 'packageDependencies'];
+    if (testCompareDataByName?.size) {
+        changed.push(ChangeType.TESTS);
+    }
+    if (fileCompareDataByName.size > 0 && fileCompareData.some((f) => f.status !== 'UNCHANGED')) {
+        changed.push(ChangeType.SOURCE_CODE);
+    }
+    if (fieldCompareDataByName.size > 0) {
+        changed.push(ChangeType.ASPECTS);
+    }
+    if ([...fieldCompareDataByName.values()].some((field) => DEPS_FIELD.includes(field.fieldName))) {
+        changed.push(ChangeType.DEPENDENCY);
+    }
+    return changed;
+}
+function CompareLoader({ className, ...rest }) {
+    return (_jsxs("div", { className: className, ...rest, children: [_jsx(BlockSkeleton, { className: styles.navLoader, lines: 3 }), _jsxs("div", { className: styles.compareLoader, children: [_jsx("div", { className: styles.compareViewLoader, children: _jsx(BlockSkeleton, { lines: 30 }) }), _jsx("div", { className: styles.compareSidebarLoader, children: _jsx(BlockSkeleton, { lines: 30 }) })] })] }));
+}
+function RenderCompareScreen(props) {
+    const { routes, state, loading, Loader = CompareLoader, baseVersion, compareVersion, compareHasLocalChanges, componentId, hidden, } = props;
+    const showVersionPicker = state?.versionPicker?.element !== null;
+    return (_jsxs(_Fragment, { children: [showVersionPicker && (_jsx("div", { className: styles.top, children: state?.versionPicker?.element || (_jsx(ComponentCompareVersionPicker, { componentId: componentId, baseVersion: baseVersion, compareVersion: compareVersion, compareHasLocalChanges: compareHasLocalChanges, host: props.host, customUseComponent: props.customUseComponent })) })), loading && !hidden && _jsx(Loader, { className: classnames(styles.loader) }), !loading && (_jsxs("div", { className: classnames(styles.bottom, hidden && styles.hidden), children: [_jsx(CompareMenuNav, { ...props }), (extractLazyLoadedData(routes) || []).length > 0 && (_jsx(SlotRouter, { routes: extractLazyLoadedData(routes) || [] })), state?.tabs?.element] }))] }));
+}
+// eslint-disable-next-line complexity
+export function ComponentCompare(props) {
+    const { host: hostFromProps, baseId: baseIdFromProps, compareId: compareIdFromProps, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    routes, state, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    tabs, className, hooks, changes: changesFromProps, customUseComponent, Loader = CompareLoader, baseContext, compareContext, isFullScreen, hidden = false, compareIdOverride, baseIdOverride, ...rest } = props;
+    const baseVersion = useCompareQueryParam('baseVersion');
+    const component = useContext(ComponentContext);
+    const componentDescriptor = useContext(ComponentDescriptorContext);
+    const location = useLocation();
+    const isWorkspace = hostFromProps === 'teambit.workspace/workspace';
+    const compareHost = isWorkspace && !location?.search.includes('version') && !compareIdFromProps && component.logs?.length === 0
+        ? hostFromProps
+        : 'teambit.scope/scope';
+    const host = 'teambit.scope/scope';
+    const { component: compareComponent, loading: loadingCompare, componentDescriptor: compareComponentDescriptor, } = useComponent(compareHost, compareIdOverride?.toString() || compareIdFromProps?.toString(), {
+        skip: hidden || (!compareIdFromProps && !compareIdOverride),
+        customUseComponent,
+        logFilters: {
+            log: {
+            // @todo - enable it when we implement lazy loading for logs
+            // limit: 3,
+            },
+        },
+    });
+    const allVersionInfo = useMemo(() => (compareComponent?.logs || component.logs)?.slice().sort(sortByDateDsc) || [], [component.id.toString(), loadingCompare, component.logs?.length, compareComponent?.logs?.length]);
+    const isNew = useMemo(() => allVersionInfo.length === 0, [allVersionInfo]);
+    const compareVersion = isWorkspace && !isNew && !location?.search.includes('version') && !compareIdFromProps
+        ? 'workspace'
+        : component.id.version;
+    const compareIsLocalChanges = compareVersion === 'workspace';
+    const lastVersionInfo = useMemo(() => {
+        if (compareIsLocalChanges)
+            return allVersionInfo[0];
+        const prevVersionInfo = allVersionInfo.find(findPrevVersionFromCurrent(compareVersion));
+        return prevVersionInfo;
+    }, [component.logs?.length, loadingCompare, compareComponent?.logs?.length]);
+    const baseId = React.useMemo(() => baseIdFromProps ||
+        (baseVersion && component.id.changeVersion(baseVersion)) ||
+        (lastVersionInfo && component.id.changeVersion(lastVersionInfo.tag || lastVersionInfo.hash)) ||
+        component.id, [loadingCompare, baseIdFromProps, baseVersion, lastVersionInfo?.tag, lastVersionInfo?.hash]);
+    const { component: base, loading: loadingBase, componentDescriptor: baseComponentDescriptor, } = useComponent(host, baseIdOverride?.toString() || baseId?.toString(), {
+        customUseComponent,
+        skip: hidden || (!baseId && !baseIdOverride),
+        logFilters: {
+            log: {
+            // @todo - enable it when we implement lazy loading for logs
+            // limit: 3,
+            },
+        },
+    });
+    const loading = loadingBase || loadingCompare;
+    const compare = compareIdFromProps ? compareComponent : component;
+    const compCompareId = `${base?.id.toString()}-${compare?.id.toString()}`;
+    const logsByVersion = useMemo(() => {
+        return (compare?.logs || []).slice().reduce(groupByVersion, new Map());
+    }, [compare?.id.toString()]);
+    const skipComponentCompareQuery = hidden || (base?.id.version?.toString() === compare?.id.version?.toString() && !compareIsLocalChanges);
+    const { loading: compCompareLoading, componentCompareData } = useComponentCompareQuery(base?.id.toString(), compare?.id.toString(), undefined, skipComponentCompareQuery);
+    const fileCompareDataByName = useMemo(() => {
+        if (loading || compCompareLoading)
+            return undefined;
+        if (!compCompareLoading && !componentCompareData)
+            return null;
+        const fileCompareDataByNameLookup = new Map();
+        (componentCompareData?.code || []).forEach((codeCompareData) => {
+            fileCompareDataByNameLookup.set(codeCompareData.fileName, codeCompareData);
+        });
+        return fileCompareDataByNameLookup;
+    }, [compCompareLoading, loading, compCompareId]);
+    const fieldCompareDataByName = useMemo(() => {
+        if (loading || compCompareLoading)
+            return undefined;
+        if (!compCompareLoading && !componentCompareData)
+            return null;
+        const fieldCompareDataByNameLookup = new Map();
+        (componentCompareData?.aspects || []).forEach((aspectCompareData) => {
+            fieldCompareDataByNameLookup.set(aspectCompareData.fieldName, aspectCompareData);
+        });
+        return fieldCompareDataByNameLookup;
+    }, [compCompareLoading, loading, compCompareId]);
+    const testCompareDataByName = useMemo(() => {
+        if (loading || compCompareLoading)
+            return undefined;
+        if (!compCompareLoading && !componentCompareData)
+            return null;
+        const testCompareDataByNameLookup = new Map();
+        (componentCompareData?.tests || []).forEach((testCompareData) => {
+            testCompareDataByNameLookup.set(testCompareData.fileName, testCompareData);
+        });
+        return testCompareDataByNameLookup;
+    }, [compCompareLoading, loading, compCompareId]);
+    const componentCompareModel = {
+        compare: compare && {
+            model: compare,
+            descriptor: compareComponentDescriptor || componentDescriptor,
+            hasLocalChanges: compareIsLocalChanges,
+        },
+        base: base && {
+            model: base,
+            descriptor: baseComponentDescriptor,
+        },
+        loading,
+        logsByVersion,
+        state,
+        hooks,
+        baseContext,
+        compareContext,
+        fieldCompareDataByName,
+        fileCompareDataByName,
+        testCompareDataByName,
+        isFullScreen,
+        hidden,
+    };
+    const changes = changesFromProps ||
+        deriveChangeType(baseId, compare?.id, fileCompareDataByName, fieldCompareDataByName, testCompareDataByName);
+    return (_jsx(ComponentCompareContext.Provider, { value: componentCompareModel, children: _jsx("div", { className: classnames(styles.componentCompareContainer, className), ...rest, children: _jsx(RenderCompareScreen, { ...props, componentId: compare?.id?.toStringWithoutVersion() ||
+                    baseId.toStringWithoutVersion() ||
+                    component?.id?.toStringWithoutVersion(), baseVersion: baseId.version, compareVersion: compareIdFromProps?.version || component.id.version, compareHasLocalChanges: compareIsLocalChanges, changes: changes, loading: loading, Loader: Loader }, compCompareId) }) }));
+}
+//# sourceMappingURL=component-compare.js.map

package/dist/component-compare.js.map

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

package/dist/component-compare.module.scss

@@ -0,0 +1,132 @@
+.componentCompareContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 24px 16px 24px;
+}
+
+.bottom {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  flex: 1;
+
+  &.hidden {
+    display: none;
+  }
+  // padding-bottom: 16px;
+}
+
+.navContainer {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  font-size: var(--bit-p-xs, 14px);
+  padding-left: 8px;
+}
+
+.navigation {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+
+  @media screen and (max-width: 768px) {
+    padding-left: 6px;
+  }
+
+  > li {
+    display: block;
+    margin-right: 16px;
+    height: 100%;
+  }
+}
+
+.loader {
+  padding: 16px 24px;
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.tabLoader {
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.compareLoader {
+  display: flex;
+  padding-top: 16px;
+}
+
+.compareSidebarLoader {
+  width: 30%;
+}
+
+.compareViewLoader {
+  width: 70%;
+  padding-right: 16px;
+}
+
+.activeNav {
+  > div {
+    color: var(--bit-accent-color, #6c5ce7);
+    border-radius: 5px;
+    background-color: var(--bit-accent-bg, #edebfc);
+  }
+
+  &:after {
+    // unset default selection styles
+    height: 0 !important;
+  }
+}
+
+.loadingNav {
+  // > div {
+  //   color: var(--bit-accent-color, #6c5ce7);
+  //   border-radius: 5px;
+  //   background-color: var(--bit-accent-bg, #edebfc);
+  // }
+
+  &:after {
+    // unset default selection styles
+    height: 0 !important;
+  }
+}
+
+.navItem {
+  position: relative;
+  color: var(--bit-text-color-light, #707279);
+
+  &.none {
+    > div {
+      opacity: 65%;
+    }
+  }
+}
+
+.compareMenuTab {
+  position: relative;
+}
+
+.indicator {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  border-radius: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+
+  &.hasChanged {
+    background-color: #ff8b00;
+  }
+
+  &.new {
+    // @todo - review styles
+    display: none;
+    background-color: var(--bit-accent-success-color, #37b26c);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { ComponentCompare } from './component-compare';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { ComponentCompare } from './component-compare';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/preview-1752267760470.js

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

package/index.ts

@@ -0,0 +1 @@
+export { ComponentCompare } from './component-compare';

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@teambit/component.ui.component-compare.component-compare",
+  "version": "0.0.0-2914de1a41b6ff097e810b8da5f8b65f1593f205",
+  "homepage": "https://bit.cloud/teambit/component/ui/component-compare/component-compare",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-compare/component-compare",
+    "version": "2914de1a41b6ff097e810b8da5f8b65f1593f205"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
+    "@teambit/component.ui.component-compare.hooks.use-component-compare-url": "0.0.13",
+    "@teambit/component.ui.component-compare.models.component-compare-change-type": "0.0.7",
+    "@teambit/component.ui.component-compare.models.component-compare-hooks": "0.0.11",
+    "@teambit/component.ui.component-compare.models.component-compare-model": "0.0.112",
+    "@teambit/component.ui.component-compare.utils.group-by-version": "0.0.8",
+    "@teambit/component.ui.component-compare.utils.sort-logs": "0.0.8",
+    "@teambit/component.ui.component-compare.utils.sort-tabs": "0.0.104",
+    "@teambit/component.ui.component-compare.hooks.use-component-compare": "0.0.113",
+    "@teambit/component.ui.component-compare.context": "0.0.0-7c47c29b5cd9231a833d4cca0f632dfeaba76844",
+    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.0-b851134365ceb7d4a74d5e209eadadba31b10e38",
+    "@teambit/component.ui.component-compare.utils.lazy-loading": "0.0.7",
+    "@teambit/component.ui.component-compare.version-picker": "0.0.0-1907599d05327d861524936122c9509a6ae21da7",
+    "@teambit/legacy-component-log": "0.0.407",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.516"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/mocha": "9.1.0",
+    "@teambit/react.v17.react-env": "1.1.82"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "@types/react": "^17.0.0",
+    "@teambit/base-react.navigation.link": "2.0.33"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "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/types/asset.d.ts

@@ -0,0 +1,41 @@
+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;
+}
+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;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  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;
+}