feat(component compare | lane compare): live controls support

.bitmap

@@ -1787,6 +1787,27 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/preview/ui/component-preview"
     },
+    "ui/composition-compare": {
+        "name": "ui/composition-compare",
+        "scope": "teambit.compositions",
+        "version": "0.0.258",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/composition-compare"
+    },
+    "ui/composition-compare-section": {
+        "name": "ui/composition-compare-section",
+        "scope": "teambit.compositions",
+        "version": "0.0.101",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/composition-compare-section"
+    },
+    "ui/composition-live-controls": {
+        "name": "ui/composition-live-controls",
+        "scope": "teambit.compositions",
+        "version": "0.0.3",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/composition-live-controls"
+    },
     "ui/compositions-app": {
         "name": "ui/compositions-app",
         "scope": "teambit.react",

components/ui/composition-compare-section/composition.compare.section.ts

@@ -0,0 +1,22 @@
+import type { CompositionsUI } from '@teambit/compositions';
+import type { Section } from '@teambit/component';
+import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
+
+export class CompositionCompareSection implements Section, TabItem {
+  constructor(private ui: CompositionsUI) {}
+
+  navigationLink = {
+    href: 'compositions',
+    children: 'Preview',
+  };
+
+  props = this.navigationLink;
+
+  route: Section['route'] = {
+    path: 'compositions/*',
+    element: this.ui.getCompositionsCompare(),
+  };
+
+  order = 1;
+  id = 'preview';
+}

components/ui/composition-compare-section/index.ts

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

components/ui/composition-compare/composition-compare.context.tsx

@@ -0,0 +1,14 @@
+import { useContext, createContext } from 'react';
+import { CompositionContentProps } from '@teambit/compositions';
+
+export type CompositionCompareContextModel = {
+  compositionProps?: CompositionContentProps;
+  isBase?: boolean;
+  isCompare?: boolean;
+};
+
+export const CompositionCompareContext: React.Context<CompositionCompareContextModel | undefined> = createContext<
+  CompositionCompareContextModel | undefined
+>(undefined);
+
+export const useCompositionCompare = () => useContext(CompositionCompareContext);

components/ui/composition-compare/composition-compare.module.scss

@@ -0,0 +1,52 @@
+.toolbar {
+  display: flex;
+  padding: 4px;
+}
+
+.left,
+.right {
+  display: flex;
+  flex: 1;
+  padding: 4px;
+  background-color: var(--background-color);
+  align-items: center;
+  justify-content: space-between;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.mainContainer {
+  display: flex;
+  height: 100%;
+  min-height: 80vh;
+}
+
+.subContainerLeft {
+  flex: 1;
+}
+
+.subContainerRight {
+  flex: 1;
+}
+
+.subView {
+  height: 100%;
+  background-color: var(--background-color);
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.widgets {
+  display: flex;
+  padding: 4px;
+}
+
+.dropdown {
+  display: flex;
+}

components/ui/composition-compare/composition-compare.tsx

@@ -0,0 +1,253 @@
+import React, { useMemo, useState } from 'react';
+import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
+import {
+  CompositionContent,
+  LiveControlsRenderer,
+  type CompositionContentProps,
+  type EmptyStateSlot,
+} from '@teambit/compositions';
+import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
+import {
+  useCompareQueryParam,
+  useUpdatedUrlFromQuery,
+} from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
+import { CompareSplitLayoutPreset } from '@teambit/component.ui.component-compare.layouts.compare-split-layout-preset';
+import { RoundLoader } from '@teambit/design.ui.round-loader';
+import queryString from 'query-string';
+import { CompositionDropdown } from './composition-dropdown';
+import { CompositionCompareContext } from './composition-compare.context';
+import { uniqBy } from 'lodash';
+
+import styles from './composition-compare.module.scss';
+
+export type CompositionCompareProps = {
+  emptyState?: EmptyStateSlot;
+  Widgets?: {
+    Right?: React.ReactNode;
+    Left?: React.ReactNode;
+  };
+  previewViewProps?: CompositionContentProps;
+  PreviewView?: React.ComponentType<CompositionContentProps>;
+};
+
+export function CompositionCompare(props: CompositionCompareProps) {
+  const { emptyState, PreviewView = CompositionContent, Widgets, previewViewProps = {} } = props;
+
+  const componentCompareContext = useComponentCompare();
+
+  const { base, compare, baseContext, compareContext } = componentCompareContext || {};
+
+  const baseCompositions = base?.model.compositions;
+  const compareCompositions = compare?.model.compositions;
+
+  const selectedCompositionBaseFile = useCompareQueryParam('compositionBaseFile');
+  const selectedCompositionCompareFile = useCompareQueryParam('compositionCompareFile');
+
+  const baseState = baseContext?.state?.preview;
+  const compareState = compareContext?.state?.preview;
+  const baseHooks = baseContext?.hooks?.preview;
+  const compareHooks = compareContext?.hooks?.preview;
+  const selectedBaseFromState = baseState?.id;
+  const selectedCompareFromState = compareState?.id;
+
+  const selectedBaseCompositionId = selectedBaseFromState || selectedCompositionBaseFile;
+  const selectedCompositionCompareId = selectedCompareFromState || selectedCompositionCompareFile;
+
+  const selectedBaseComp =
+    (selectedBaseCompositionId &&
+      baseCompositions &&
+      baseCompositions.find((c) => {
+        return c.identifier === selectedBaseCompositionId;
+      })) ||
+    (baseCompositions && baseCompositions[0]);
+
+  const selectedCompareComp =
+    (selectedCompositionCompareId &&
+      compareCompositions &&
+      compareCompositions.find((c) => {
+        return c.identifier === selectedCompositionCompareId;
+      })) ||
+    (compareCompositions && compareCompositions[0]);
+
+  // const baseCompositionDropdownSource =
+  //   baseCompositions?.map((c) => {
+  //     const href = !baseState?.controlled
+  //       ? useUpdatedUrlFromQuery({
+  //         compositionBaseFile: c.identifier,
+  //         compositionCompareFile: selectedCompareComp?.identifier,
+  //       })
+  //       : useUpdatedUrlFromQuery({});
+
+  //     const onClick = baseState?.controlled ? baseHooks?.onClick : undefined;
+
+  //     return { id: c.identifier, label: c.displayName, href, onClick };
+  //   }) || [];
+
+  // const compareCompositionDropdownSource =
+  //   compareCompositions?.map((c) => {
+  //     const href = !compareState?.controlled
+  //       ? useUpdatedUrlFromQuery({
+  //         compositionBaseFile: selectedBaseComp?.identifier,
+  //         compositionCompareFile: c.identifier,
+  //       })
+  //       : useUpdatedUrlFromQuery({});
+
+  //     const onClick = compareState?.controlled ? () => compareHooks?.onClick : undefined;
+
+  //     return { id: c.identifier, label: c.displayName, href, onClick };
+  //   }) || [];
+
+  const compositionsDropdownSource = uniqBy(
+    (baseCompositions || []).concat(compareCompositions || []),
+    'identifier'
+  )?.map((c) => {
+    const href = !compareState?.controlled
+      ? useUpdatedUrlFromQuery({
+          compositionBaseFile: selectedBaseComp?.identifier,
+          compositionCompareFile: c.identifier,
+        })
+      : useUpdatedUrlFromQuery({});
+
+    const onClick = compareState?.controlled
+      ? (_, __) => {
+          compareHooks?.onClick?.(_, __);
+          baseHooks?.onClick?.(_, __);
+        }
+      : undefined;
+    return { id: c.identifier, label: c.displayName, href, onClick };
+  });
+
+  const [baseCompositionParams, setBaseCompositionParams] = useState<Record<string, any>>({
+    livecontrols: true,
+  });
+  // eslint-disable-next-line no-console
+  console.log('🚀 ~ CompositionCompare ~ baseCompositionParams:', baseCompositionParams);
+  const baseCompQueryParams = useMemo(() => queryString.stringify(baseCompositionParams), [baseCompositionParams]);
+
+  const [compareCompositionParams, setCompareCompositionParams] = useState<Record<string, any>>({
+    livecontrols: true,
+  });
+  // eslint-disable-next-line no-console
+  console.log('🚀 ~ CompositionCompare ~ compareCompositionParams:', compareCompositionParams);
+  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 (base === undefined) {
+      return null;
+    }
+    const baseCompModel = base.model;
+    const compositionProps = {
+      forceHeight: undefined,
+      innerBottomPadding: 50,
+      ...previewViewProps,
+      emptyState,
+      component: baseCompModel,
+      queryParams: baseCompQueryParams,
+      selected: selectedCompareComp,
+    };
+    return (
+      <div className={styles.subView}>
+        <CompositionCompareContext.Provider value={{ compositionProps, isBase: true }}>
+          <CompositionContextProvider queryParams={baseCompositionParams} setQueryParams={setBaseCompositionParams}>
+            <PreviewView
+              forceHeight={undefined}
+              innerBottomPadding={50}
+              {...previewViewProps}
+              emptyState={emptyState}
+              component={baseCompModel}
+              selected={selectedCompareComp}
+              queryParams={baseCompQueryParams}
+            />
+          </CompositionContextProvider>
+        </CompositionCompareContext.Provider>
+      </div>
+    );
+  }, [base, selectedCompareComp?.identifier]);
+
+  const CompareLayout = useMemo(() => {
+    if (compare === undefined) {
+      return null;
+    }
+    const compareCompModel = compare.model;
+    const compositionProps = {
+      forceHeight: undefined,
+      innerBottomPadding: 50,
+      ...previewViewProps,
+      emptyState,
+      component: compareCompModel,
+      // queryParams: compareCompQueryParams,
+      queryParams: 'livecontrols=true',
+      selected: selectedCompareComp,
+    };
+    return (
+      <div className={styles.subView}>
+        <CompositionCompareContext.Provider value={{ compositionProps, isCompare: true }}>
+          <CompositionContextProvider
+            queryParams={compareCompositionParams}
+            setQueryParams={setCompareCompositionParams}
+          >
+            <PreviewView
+              forceHeight={undefined}
+              innerBottomPadding={50}
+              {...previewViewProps}
+              emptyState={emptyState}
+              component={compareCompModel}
+              queryParams={compareCompQueryParams}
+              selected={selectedCompareComp}
+            />
+          </CompositionContextProvider>
+        </CompositionCompareContext.Provider>
+      </div>
+    );
+  }, [compare, selectedCompareComp?.identifier]);
+
+  const CompositionToolbar = () => {
+    if (!base && !compare) {
+      return null;
+    }
+
+    return (
+      <div className={styles.toolbar}>
+        <div className={styles.left}>
+          <div className={styles.dropdown}>
+            {compositionsDropdownSource.length > 0 && (
+              <CompositionDropdown dropdownItems={compositionsDropdownSource} selected={selectedCompareDropdown} />
+            )}
+          </div>
+          <div className={styles.widgets}>{Widgets?.Left}</div>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.widgets}>{Widgets?.Right}</div>
+        </div>
+      </div>
+    );
+  };
+
+  const key = `${componentCompareContext?.base?.model.id.toString()}-${componentCompareContext?.compare?.model.id.toString()}-composition-compare`;
+
+  return (
+    <React.Fragment key={key}>
+      {componentCompareContext?.loading && (
+        <div className={styles.loader}>
+          <RoundLoader />
+        </div>
+      )}
+      <CompositionToolbar />
+      <LiveControlsRenderer />
+      <CompareSplitLayoutPreset base={BaseLayout} compare={CompareLayout} />
+    </React.Fragment>
+  );
+}