@teambit/compositions 0.0.751 → 0.0.754

package/composition.compare.section.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { EmptyStateSlot } from '@teambit/compositions';
+import { Section } from '@teambit/component';
+import { CompositionCompare } from '@teambit/compositions.ui.composition-compare';
+
+export class CompositionCompareSection implements Section {
+  constructor(private emptyStateSlot: EmptyStateSlot) {}
+
+  navigationLink = {
+    href: 'compositions',
+    children: 'Compositions',
+    order: 1,
+  };
+
+  route = {
+    path: 'compositions/*',
+    element: <CompositionCompare emptyState={this.emptyStateSlot} />,
+  };
+}

package/compositions.tsx

@@ -118,14 +118,14 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
   );
 }
 
-type CompositionContentProps = {
+export type CompositionContentProps = {
   component: ComponentModel;
   selected?: Composition;
   queryParams?: string | string[];
   emptyState?: EmptyStateSlot;
 };
 
-function CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps) {
+export function CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps) {
   const env = component.environment?.id;
   const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;
 

package/compositions.ui.runtime.tsx

@@ -3,9 +3,11 @@ import { ComponentType } from 'react';
 import { Slot, SlotRegistry } from '@teambit/harmony';
 import { ComponentAspect, ComponentUI } from '@teambit/component';
 import { UIRuntime } from '@teambit/ui';
+import { ComponentCompareUI, ComponentCompareAspect } from '@teambit/component-compare';
 import { CompositionsSection } from './composition.section';
 import { CompositionsAspect } from './compositions.aspect';
 import { MenuBarWidget } from './compositions';
+import { CompositionCompareSection } from './composition.compare.section';
 
 export type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;
 export type EmptyStateSlot = SlotRegistry<ComponentType>;
@@ -25,12 +27,12 @@ export class CompositionsUI {
     this.menuBarWidgetSlot.register(widget);
   }
 
-  static dependencies = [ComponentAspect];
+  static dependencies = [ComponentAspect, ComponentCompareAspect];
   static runtime = UIRuntime;
   static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>()];
 
   static async provider(
-    [component]: [ComponentUI],
+    [component, componentCompare]: [ComponentUI, ComponentCompareUI],
     config: {},
     [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]
   ) {
@@ -40,10 +42,15 @@ export class CompositionsUI {
       { menuBarWidgetSlot: compositions.menuBarWidgetSlot },
       emptyStateSlot
     );
+    const compositionCompare = new CompositionCompareSection(emptyStateSlot);
 
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
-
+    componentCompare.registerNavigation({
+      props: compositionCompare.navigationLink,
+      order: compositionCompare.navigationLink.order,
+    });
+    componentCompare.registerRoutes([compositionCompare.route]);
     return compositions;
   }
 }

package/dist/composition.compare.section.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { EmptyStateSlot } from '@teambit/compositions';
+import { Section } from '@teambit/component';
+export declare class CompositionCompareSection implements Section {
+    private emptyStateSlot;
+    constructor(emptyStateSlot: EmptyStateSlot);
+    navigationLink: {
+        href: string;
+        children: string;
+        order: number;
+    };
+    route: {
+        path: string;
+        element: JSX.Element;
+    };
+}

package/dist/composition.compare.section.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompositionCompareSection = void 0;
+
+function _defineProperty2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+  _defineProperty2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _compositionsUi() {
+  const data = require("@teambit/compositions.ui.composition-compare");
+
+  _compositionsUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+class CompositionCompareSection {
+  constructor(emptyStateSlot) {
+    this.emptyStateSlot = emptyStateSlot;
+    (0, _defineProperty2().default)(this, "navigationLink", {
+      href: 'compositions',
+      children: 'Compositions',
+      order: 1
+    });
+    (0, _defineProperty2().default)(this, "route", {
+      path: 'compositions/*',
+      element: /*#__PURE__*/_react().default.createElement(_compositionsUi().CompositionCompare, {
+        emptyState: this.emptyStateSlot
+      })
+    });
+  }
+
+}
+
+exports.CompositionCompareSection = CompositionCompareSection;
+
+//# sourceMappingURL=composition.compare.section.js.map

package/dist/composition.compare.section.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CompositionCompareSection","constructor","emptyStateSlot","href","children","order","path","element"],"sources":["composition.compare.section.tsx"],"sourcesContent":["import React from 'react';\nimport { EmptyStateSlot } from '@teambit/compositions';\nimport { Section } from '@teambit/component';\nimport { CompositionCompare } from '@teambit/compositions.ui.composition-compare';\n\nexport class CompositionCompareSection implements Section {\n  constructor(private emptyStateSlot: EmptyStateSlot) {}\n\n  navigationLink = {\n    href: 'compositions',\n    children: 'Compositions',\n    order: 1,\n  };\n\n  route = {\n    path: 'compositions/*',\n    element: <CompositionCompare emptyState={this.emptyStateSlot} />,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,yBAAN,CAAmD;EACxDC,WAAW,CAASC,cAAT,EAAyC;IAAA,KAAhCA,cAAgC,GAAhCA,cAAgC;IAAA,wDAEnC;MACfC,IAAI,EAAE,cADS;MAEfC,QAAQ,EAAE,cAFK;MAGfC,KAAK,EAAE;IAHQ,CAFmC;IAAA,+CAQ5C;MACNC,IAAI,EAAE,gBADA;MAENC,OAAO,eAAE,+BAAC,oCAAD;QAAoB,UAAU,EAAE,KAAKL;MAArC;IAFH,CAR4C;EAAE;;AADE"}

package/dist/compositions.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
+import { ComponentModel } from '@teambit/component';
 import { EmptyStateSlot } from './compositions.ui.runtime';
+import { Composition } from './composition';
 import type { CompositionsMenuSlot } from './compositions.ui.runtime';
 export declare type MenuBarWidget = {
     location: 'start' | 'end';
@@ -10,3 +12,10 @@ export declare type CompositionsProp = {
     emptyState?: EmptyStateSlot;
 };
 export declare function Compositions({ menuBarWidgets, emptyState }: CompositionsProp): JSX.Element;
+export declare type CompositionContentProps = {
+    component: ComponentModel;
+    selected?: Composition;
+    queryParams?: string | string[];
+    emptyState?: EmptyStateSlot;
+};
+export declare function CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps): JSX.Element;

package/dist/compositions.js

@@ -7,6 +7,7 @@ require("core-js/modules/es.array.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.CompositionContent = CompositionContent;
 exports.Compositions = Compositions;
 
 function _react() {

package/dist/compositions.js.map

@@ -1 +1 @@
-{"version":3,"names":["Compositions","menuBarWidgets","emptyState","component","useContext","ComponentContext","selected","selectComposition","useState","head","compositions","selectedRef","useRef","current","properties","useDocs","id","useEffect","prevId","identifier","next","find","c","isMobile","useIsMobile","showSidebar","length","isSidebarOpen","setSidebarOpenness","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","currentCompositionUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","styles","compositionsPage","menuBar","openInNewTab","splitter","e","stopPropagation","x","collapser","right","tabsContainer","tabs","tabContent","compost","CompositionContent","env","environment","EmptyStateTemplate","get","host","noCompositionsPage","title","separator","buildStatus","buildStatusMessage","compositionsIframe"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport head from 'lodash.head';\nimport queryString from 'query-string';\nimport { ThemeContext } from '@teambit/documenter.theme.theme-context';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { ComponentContext, ComponentModel } from '@teambit/component';\nimport { PropTable } from '@teambit/documenter.ui.property-table';\nimport { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';\nimport { useDocs } from '@teambit/docs.ui.queries.get-docs';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { EmptyBox } from '@teambit/design.ui.empty-box';\nimport { toPreviewUrl } from '@teambit/preview.ui.component-preview';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';\nimport { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { OptionButton } from '@teambit/design.ui.input.option-button';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { EmptyStateSlot } from './compositions.ui.runtime';\nimport { Composition } from './composition';\nimport styles from './compositions.module.scss';\nimport { ComponentComposition } from './ui';\nimport { CompositionsPanel } from './ui/compositions-panel/compositions-panel';\nimport type { CompositionsMenuSlot } from './compositions.ui.runtime';\n\nexport type MenuBarWidget = {\n  location: 'start' | 'end';\n  content: ReactNode;\n};\nexport type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptyState?: EmptyStateSlot };\n\nexport function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {\n  const component = useContext(ComponentContext);\n  const [selected, selectComposition] = useState(head(component.compositions));\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const properties = useDocs(component.id);\n\n  // reset selected composition when component changes.\n  // this does trigger renderer, but perf seems to be ok\n  useEffect(() => {\n    const prevId = selectedRef.current?.identifier;\n    const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];\n\n    selectComposition(next);\n  }, [component]);\n  const isMobile = useIsMobile();\n  const showSidebar = !isMobile && component.compositions.length > 0;\n  const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);\n\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;\n\n  const compositionUrl = toPreviewUrl(component, 'compositions');\n  const currentCompositionUrl = toPreviewUrl(component, 'compositions', selected?.identifier);\n\n  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});\n  const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);\n\n  // collapse sidebar when empty, reopen when not\n  useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);\n\n  return (\n    <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>\n      <SplitPane layout={sidebarOpenness} size=\"85%\" className={styles.compositionsPage}>\n        <Pane className={styles.left}>\n          <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>\n            <Link external href={currentCompositionUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </Link>\n          </CompositionsMenuBar>\n          <CompositionContent\n            emptyState={emptyState}\n            component={component}\n            selected={selected}\n            queryParams={queryParams}\n          />\n        </Pane>\n        <HoverSplitter className={styles.splitter}>\n          <Collapser\n            placement=\"left\"\n            isOpen={isSidebarOpen}\n            onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n            onClick={() => setSidebarOpenness((x) => !x)}\n            tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side compositions`}\n            className={styles.collapser}\n          />\n        </HoverSplitter>\n        <Pane className={styles.right}>\n          <ThemeContext>\n            <TabContainer className={styles.tabsContainer}>\n              <TabList className={styles.tabs}>\n                <Tab>compositions</Tab>\n                <Tab>properties</Tab>\n              </TabList>\n              <TabPanel className={styles.tabContent}>\n                <CompositionsPanel\n                  onSelectComposition={selectComposition}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={selected}\n                  className={styles.compost}\n                />\n              </TabPanel>\n              <TabPanel className={styles.tabContent}>\n                {properties && properties.length > 0 ? <PropTable rows={properties} showListView /> : <div />}\n              </TabPanel>\n            </TabContainer>\n          </ThemeContext>\n        </Pane>\n      </SplitPane>\n    </CompositionContextProvider>\n  );\n}\n\ntype CompositionContentProps = {\n  component: ComponentModel;\n  selected?: Composition;\n  queryParams?: string | string[];\n  emptyState?: EmptyStateSlot;\n};\n\nfunction CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps) {\n  const env = component.environment?.id;\n  const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;\n\n  if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {\n    return (\n      <div className={styles.noCompositionsPage}>\n        <div>\n          <H1 className={styles.title}>Compositions</H1>\n          <Separator isPresentational className={styles.separator} />\n          <AlertCard\n            level=\"info\"\n            title=\"There are no\n              compositions for this Component. Learn how to add compositions:\"\n          >\n            <MDXLayout>\n              <EmptyStateTemplate />\n            </MDXLayout>\n          </AlertCard>\n        </div>\n      </div>\n    );\n  }\n\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard className={styles.buildStatusMessage} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        className={styles.buildStatusMessage}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  // TODO: get the docs domain from the community aspect and pass it here as a prop\n  if (component.compositions.length === 0) {\n    return (\n      <EmptyBox\n        title=\"There are no compositions for this component.\"\n        linkText=\"Learn how to create compositions\"\n        link={`https://bit.dev/docs/dev-services-overview/compositions/compositions-overview`}\n      />\n    );\n  }\n\n  return (\n    <ComponentComposition\n      className={styles.compositionsIframe}\n      component={component}\n      composition={selected}\n      queryParams={queryParams}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["Compositions","menuBarWidgets","emptyState","component","useContext","ComponentContext","selected","selectComposition","useState","head","compositions","selectedRef","useRef","current","properties","useDocs","id","useEffect","prevId","identifier","next","find","c","isMobile","useIsMobile","showSidebar","length","isSidebarOpen","setSidebarOpenness","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","currentCompositionUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","styles","compositionsPage","menuBar","openInNewTab","splitter","e","stopPropagation","x","collapser","right","tabsContainer","tabs","tabContent","compost","CompositionContent","env","environment","EmptyStateTemplate","get","host","noCompositionsPage","title","separator","buildStatus","buildStatusMessage","compositionsIframe"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport head from 'lodash.head';\nimport queryString from 'query-string';\nimport { ThemeContext } from '@teambit/documenter.theme.theme-context';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { ComponentContext, ComponentModel } from '@teambit/component';\nimport { PropTable } from '@teambit/documenter.ui.property-table';\nimport { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';\nimport { useDocs } from '@teambit/docs.ui.queries.get-docs';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { EmptyBox } from '@teambit/design.ui.empty-box';\nimport { toPreviewUrl } from '@teambit/preview.ui.component-preview';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';\nimport { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { OptionButton } from '@teambit/design.ui.input.option-button';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { EmptyStateSlot } from './compositions.ui.runtime';\nimport { Composition } from './composition';\nimport styles from './compositions.module.scss';\nimport { ComponentComposition } from './ui';\nimport { CompositionsPanel } from './ui/compositions-panel/compositions-panel';\nimport type { CompositionsMenuSlot } from './compositions.ui.runtime';\n\nexport type MenuBarWidget = {\n  location: 'start' | 'end';\n  content: ReactNode;\n};\nexport type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptyState?: EmptyStateSlot };\n\nexport function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {\n  const component = useContext(ComponentContext);\n  const [selected, selectComposition] = useState(head(component.compositions));\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const properties = useDocs(component.id);\n\n  // reset selected composition when component changes.\n  // this does trigger renderer, but perf seems to be ok\n  useEffect(() => {\n    const prevId = selectedRef.current?.identifier;\n    const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];\n\n    selectComposition(next);\n  }, [component]);\n  const isMobile = useIsMobile();\n  const showSidebar = !isMobile && component.compositions.length > 0;\n  const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);\n\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;\n\n  const compositionUrl = toPreviewUrl(component, 'compositions');\n  const currentCompositionUrl = toPreviewUrl(component, 'compositions', selected?.identifier);\n\n  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});\n  const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);\n\n  // collapse sidebar when empty, reopen when not\n  useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);\n\n  return (\n    <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>\n      <SplitPane layout={sidebarOpenness} size=\"85%\" className={styles.compositionsPage}>\n        <Pane className={styles.left}>\n          <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>\n            <Link external href={currentCompositionUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </Link>\n          </CompositionsMenuBar>\n          <CompositionContent\n            emptyState={emptyState}\n            component={component}\n            selected={selected}\n            queryParams={queryParams}\n          />\n        </Pane>\n        <HoverSplitter className={styles.splitter}>\n          <Collapser\n            placement=\"left\"\n            isOpen={isSidebarOpen}\n            onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n            onClick={() => setSidebarOpenness((x) => !x)}\n            tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side compositions`}\n            className={styles.collapser}\n          />\n        </HoverSplitter>\n        <Pane className={styles.right}>\n          <ThemeContext>\n            <TabContainer className={styles.tabsContainer}>\n              <TabList className={styles.tabs}>\n                <Tab>compositions</Tab>\n                <Tab>properties</Tab>\n              </TabList>\n              <TabPanel className={styles.tabContent}>\n                <CompositionsPanel\n                  onSelectComposition={selectComposition}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={selected}\n                  className={styles.compost}\n                />\n              </TabPanel>\n              <TabPanel className={styles.tabContent}>\n                {properties && properties.length > 0 ? <PropTable rows={properties} showListView /> : <div />}\n              </TabPanel>\n            </TabContainer>\n          </ThemeContext>\n        </Pane>\n      </SplitPane>\n    </CompositionContextProvider>\n  );\n}\n\nexport type CompositionContentProps = {\n  component: ComponentModel;\n  selected?: Composition;\n  queryParams?: string | string[];\n  emptyState?: EmptyStateSlot;\n};\n\nexport function CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps) {\n  const env = component.environment?.id;\n  const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;\n\n  if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {\n    return (\n      <div className={styles.noCompositionsPage}>\n        <div>\n          <H1 className={styles.title}>Compositions</H1>\n          <Separator isPresentational className={styles.separator} />\n          <AlertCard\n            level=\"info\"\n            title=\"There are no\n              compositions for this Component. Learn how to add compositions:\"\n          >\n            <MDXLayout>\n              <EmptyStateTemplate />\n            </MDXLayout>\n          </AlertCard>\n        </div>\n      </div>\n    );\n  }\n\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard className={styles.buildStatusMessage} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        className={styles.buildStatusMessage}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  // TODO: get the docs domain from the community aspect and pass it here as a prop\n  if (component.compositions.length === 0) {\n    return (\n      <EmptyBox\n        title=\"There are no compositions for this component.\"\n        linkText=\"Learn how to create compositions\"\n        link={`https://bit.dev/docs/dev-services-overview/compositions/compositions-overview`}\n      />\n    );\n  }\n\n  return (\n    <ComponentComposition\n      className={styles.compositionsIframe}\n      component={component}\n      composition={selected}\n      queryParams={queryParams}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/compositions.ui.runtime.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { ComponentType } from 'react';
 import { SlotRegistry } from '@teambit/harmony';
 import { ComponentUI } from '@teambit/component';
+import { ComponentCompareUI } from '@teambit/component-compare';
 import { MenuBarWidget } from './compositions';
 export declare type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;
 export declare type EmptyStateSlot = SlotRegistry<ComponentType>;
@@ -17,6 +18,6 @@ export declare class CompositionsUI {
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
     static slots: ((registerFn: () => string) => SlotRegistry<ReactNode>)[];
-    static provider([component]: [ComponentUI], config: {}, [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]): Promise<CompositionsUI>;
+    static provider([component, componentCompare]: [ComponentUI, ComponentCompareUI], config: {}, [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]): Promise<CompositionsUI>;
 }
 export default CompositionsUI;

package/dist/compositions.ui.runtime.js

@@ -51,6 +51,16 @@ function _ui() {
   return data;
 }
 
+function _componentCompare() {
+  const data = require("@teambit/component-compare");
+
+  _componentCompare = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _composition() {
   const data = require("./composition.section");
 
@@ -71,6 +81,16 @@ function _compositions() {
   return data;
 }
 
+function _compositionCompare() {
+  const data = require("./composition.compare.section");
+
+  _compositionCompare = function () {
+    return data;
+  };
+
+  return data;
+}
+
 class CompositionsUI {
   constructor(menuBarWidgetSlot, emptyStateSlot) {
     this.menuBarWidgetSlot = menuBarWidgetSlot;
@@ -90,20 +110,26 @@ class CompositionsUI {
     this.menuBarWidgetSlot.register(widget);
   }
 
-  static async provider([component], config, [compositionMenuSlot, emptyStateSlot]) {
+  static async provider([component, componentCompare], config, [compositionMenuSlot, emptyStateSlot]) {
     const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot);
     const section = new (_composition().CompositionsSection)(compositions, {
       menuBarWidgetSlot: compositions.menuBarWidgetSlot
     }, emptyStateSlot);
+    const compositionCompare = new (_compositionCompare().CompositionCompareSection)(emptyStateSlot);
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
+    componentCompare.registerNavigation({
+      props: compositionCompare.navigationLink,
+      order: compositionCompare.navigationLink.order
+    });
+    componentCompare.registerRoutes([compositionCompare.route]);
     return compositions;
   }
 
 }
 
 exports.CompositionsUI = CompositionsUI;
-(0, _defineProperty2().default)(CompositionsUI, "dependencies", [_component().ComponentAspect]);
+(0, _defineProperty2().default)(CompositionsUI, "dependencies", [_component().ComponentAspect, _componentCompare().ComponentCompareAspect]);
 (0, _defineProperty2().default)(CompositionsUI, "runtime", _ui().UIRuntime);
 (0, _defineProperty2().default)(CompositionsUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType()]);
 var _default = CompositionsUI;

package/dist/compositions.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["CompositionsUI","constructor","menuBarWidgetSlot","emptyStateSlot","registerEmptyState","emptyStateComponent","register","registerMenuWidget","widget","provider","component","config","compositionMenuSlot","compositions","section","CompositionsSection","registerRoute","route","registerNavigation","navigationLink","order","ComponentAspect","UIRuntime","Slot","withType","CompositionsAspect","addRuntime"],"sources":["compositions.ui.runtime.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ComponentType } from 'react';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\nimport { CompositionsSection } from './composition.section';\nimport { CompositionsAspect } from './compositions.aspect';\nimport { MenuBarWidget } from './compositions';\n\nexport type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;\nexport type EmptyStateSlot = SlotRegistry<ComponentType>;\n\nexport class CompositionsUI {\n  constructor(private menuBarWidgetSlot: CompositionsMenuSlot, private emptyStateSlot: EmptyStateSlot) {}\n\n  /**\n   * register a new tester empty state. this allows to register a different empty state from each environment for example.\n   */\n  registerEmptyState(emptyStateComponent: ComponentType) {\n    this.emptyStateSlot.register(emptyStateComponent);\n    return this;\n  }\n\n  registerMenuWidget(...widget: MenuBarWidget[]) {\n    this.menuBarWidgetSlot.register(widget);\n  }\n\n  static dependencies = [ComponentAspect];\n  static runtime = UIRuntime;\n  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>()];\n\n  static async provider(\n    [component]: [ComponentUI],\n    config: {},\n    [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]\n  ) {\n    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot);\n    const section = new CompositionsSection(\n      compositions,\n      { menuBarWidgetSlot: compositions.menuBarWidgetSlot },\n      emptyStateSlot\n    );\n\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n\n    return compositions;\n  }\n}\n\nexport default CompositionsUI;\n\nCompositionsAspect.addRuntime(CompositionsUI);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAMO,MAAMA,cAAN,CAAqB;EAC1BC,WAAW,CAASC,iBAAT,EAA0DC,cAA1D,EAA0F;IAAA,KAAjFD,iBAAiF,GAAjFA,iBAAiF;IAAA,KAAhCC,cAAgC,GAAhCA,cAAgC;EAAE;EAEvG;AACF;AACA;;;EACEC,kBAAkB,CAACC,mBAAD,EAAqC;IACrD,KAAKF,cAAL,CAAoBG,QAApB,CAA6BD,mBAA7B;IACA,OAAO,IAAP;EACD;;EAEDE,kBAAkB,CAAC,GAAGC,MAAJ,EAA6B;IAC7C,KAAKN,iBAAL,CAAuBI,QAAvB,CAAgCE,MAAhC;EACD;;EAMoB,aAARC,QAAQ,CACnB,CAACC,SAAD,CADmB,EAEnBC,MAFmB,EAGnB,CAACC,mBAAD,EAAsBT,cAAtB,CAHmB,EAInB;IACA,MAAMU,YAAY,GAAG,IAAIb,cAAJ,CAAmBY,mBAAnB,EAAwCT,cAAxC,CAArB;IACA,MAAMW,OAAO,GAAG,KAAIC,kCAAJ,EACdF,YADc,EAEd;MAAEX,iBAAiB,EAAEW,YAAY,CAACX;IAAlC,CAFc,EAGdC,cAHc,CAAhB;IAMAO,SAAS,CAACM,aAAV,CAAwBF,OAAO,CAACG,KAAhC;IACAP,SAAS,CAACQ,kBAAV,CAA6BJ,OAAO,CAACK,cAArC,EAAqDL,OAAO,CAACM,KAA7D;IAEA,OAAOP,YAAP;EACD;;AAnCyB;;;gCAAfb,c,kBAeW,CAACqB,4BAAD,C;gCAfXrB,c,aAgBMsB,e;gCAhBNtB,c,WAiBI,CAACuB,eAAA,CAAKC,QAAL,EAAD,EAA6BD,eAAA,CAAKC,QAAL,EAA7B,C;eAqBFxB,c;;;AAEfyB,kCAAA,CAAmBC,UAAnB,CAA8B1B,cAA9B"}
+{"version":3,"names":["CompositionsUI","constructor","menuBarWidgetSlot","emptyStateSlot","registerEmptyState","emptyStateComponent","register","registerMenuWidget","widget","provider","component","componentCompare","config","compositionMenuSlot","compositions","section","CompositionsSection","compositionCompare","CompositionCompareSection","registerRoute","route","registerNavigation","navigationLink","order","props","registerRoutes","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","CompositionsAspect","addRuntime"],"sources":["compositions.ui.runtime.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ComponentType } from 'react';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\nimport { ComponentCompareUI, ComponentCompareAspect } from '@teambit/component-compare';\nimport { CompositionsSection } from './composition.section';\nimport { CompositionsAspect } from './compositions.aspect';\nimport { MenuBarWidget } from './compositions';\nimport { CompositionCompareSection } from './composition.compare.section';\n\nexport type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;\nexport type EmptyStateSlot = SlotRegistry<ComponentType>;\n\nexport class CompositionsUI {\n  constructor(private menuBarWidgetSlot: CompositionsMenuSlot, private emptyStateSlot: EmptyStateSlot) {}\n\n  /**\n   * register a new tester empty state. this allows to register a different empty state from each environment for example.\n   */\n  registerEmptyState(emptyStateComponent: ComponentType) {\n    this.emptyStateSlot.register(emptyStateComponent);\n    return this;\n  }\n\n  registerMenuWidget(...widget: MenuBarWidget[]) {\n    this.menuBarWidgetSlot.register(widget);\n  }\n\n  static dependencies = [ComponentAspect, ComponentCompareAspect];\n  static runtime = UIRuntime;\n  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>()];\n\n  static async provider(\n    [component, componentCompare]: [ComponentUI, ComponentCompareUI],\n    config: {},\n    [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]\n  ) {\n    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot);\n    const section = new CompositionsSection(\n      compositions,\n      { menuBarWidgetSlot: compositions.menuBarWidgetSlot },\n      emptyStateSlot\n    );\n    const compositionCompare = new CompositionCompareSection(emptyStateSlot);\n\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n    componentCompare.registerNavigation({\n      props: compositionCompare.navigationLink,\n      order: compositionCompare.navigationLink.order,\n    });\n    componentCompare.registerRoutes([compositionCompare.route]);\n    return compositions;\n  }\n}\n\nexport default CompositionsUI;\n\nCompositionsAspect.addRuntime(CompositionsUI);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAKO,MAAMA,cAAN,CAAqB;EAC1BC,WAAW,CAASC,iBAAT,EAA0DC,cAA1D,EAA0F;IAAA,KAAjFD,iBAAiF,GAAjFA,iBAAiF;IAAA,KAAhCC,cAAgC,GAAhCA,cAAgC;EAAE;EAEvG;AACF;AACA;;;EACEC,kBAAkB,CAACC,mBAAD,EAAqC;IACrD,KAAKF,cAAL,CAAoBG,QAApB,CAA6BD,mBAA7B;IACA,OAAO,IAAP;EACD;;EAEDE,kBAAkB,CAAC,GAAGC,MAAJ,EAA6B;IAC7C,KAAKN,iBAAL,CAAuBI,QAAvB,CAAgCE,MAAhC;EACD;;EAMoB,aAARC,QAAQ,CACnB,CAACC,SAAD,EAAYC,gBAAZ,CADmB,EAEnBC,MAFmB,EAGnB,CAACC,mBAAD,EAAsBV,cAAtB,CAHmB,EAInB;IACA,MAAMW,YAAY,GAAG,IAAId,cAAJ,CAAmBa,mBAAnB,EAAwCV,cAAxC,CAArB;IACA,MAAMY,OAAO,GAAG,KAAIC,kCAAJ,EACdF,YADc,EAEd;MAAEZ,iBAAiB,EAAEY,YAAY,CAACZ;IAAlC,CAFc,EAGdC,cAHc,CAAhB;IAKA,MAAMc,kBAAkB,GAAG,KAAIC,+CAAJ,EAA8Bf,cAA9B,CAA3B;IAEAO,SAAS,CAACS,aAAV,CAAwBJ,OAAO,CAACK,KAAhC;IACAV,SAAS,CAACW,kBAAV,CAA6BN,OAAO,CAACO,cAArC,EAAqDP,OAAO,CAACQ,KAA7D;IACAZ,gBAAgB,CAACU,kBAAjB,CAAoC;MAClCG,KAAK,EAAEP,kBAAkB,CAACK,cADQ;MAElCC,KAAK,EAAEN,kBAAkB,CAACK,cAAnB,CAAkCC;IAFP,CAApC;IAIAZ,gBAAgB,CAACc,cAAjB,CAAgC,CAACR,kBAAkB,CAACG,KAApB,CAAhC;IACA,OAAON,YAAP;EACD;;AAxCyB;;;gCAAfd,c,kBAeW,CAAC0B,4BAAD,EAAkBC,0CAAlB,C;gCAfX3B,c,aAgBM4B,e;gCAhBN5B,c,WAiBI,CAAC6B,eAAA,CAAKC,QAAL,EAAD,EAA6BD,eAAA,CAAKC,QAAL,EAA7B,C;eA0BF9B,c;;;AAEf+B,kCAAA,CAAmBC,UAAnB,CAA8BhC,cAA9B"}

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import { CompositionsAspect } from './compositions.aspect';
 export { CompositionsAspect };
 export type { CompositionsMain } from './compositions.main.runtime';
-export type { CompositionsUI, CompositionsMenuSlot } from './compositions.ui.runtime';
+export type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';
 export { Composition, CompositionProps } from './composition';
+export { CompositionContent, CompositionContentProps } from './compositions';
 export type { CompositionsPreview } from './compositions.preview.runtime';
 export { CompositionsOverview } from './ui/compositions-overview';
 export { ComponentComposition } from './ui';

package/dist/index.js

@@ -15,6 +15,18 @@ Object.defineProperty(exports, "Composition", {
     return _composition().Composition;
   }
 });
+Object.defineProperty(exports, "CompositionContent", {
+  enumerable: true,
+  get: function () {
+    return _compositions2().CompositionContent;
+  }
+});
+Object.defineProperty(exports, "CompositionContentProps", {
+  enumerable: true,
+  get: function () {
+    return _compositions2().CompositionContentProps;
+  }
+});
 Object.defineProperty(exports, "CompositionProps", {
   enumerable: true,
   get: function () {
@@ -55,6 +67,16 @@ function _composition() {
   return data;
 }
 
+function _compositions2() {
+  const data = require("./compositions");
+
+  _compositions2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _compositionsOverview() {
   const data = require("./ui/compositions-overview");
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CompositionsAspect"],"sources":["index.ts"],"sourcesContent":["import { CompositionsAspect } from './compositions.aspect';\n\nexport { CompositionsAspect };\nexport type { CompositionsMain } from './compositions.main.runtime';\nexport type { CompositionsUI, CompositionsMenuSlot } from './compositions.ui.runtime';\nexport { Composition, CompositionProps } from './composition';\nexport type { CompositionsPreview } from './compositions.preview.runtime';\nexport { CompositionsOverview } from './ui/compositions-overview';\nexport { ComponentComposition } from './ui';\nexport default CompositionsAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAKA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;eACeA,kC"}
+{"version":3,"names":["CompositionsAspect"],"sources":["index.ts"],"sourcesContent":["import { CompositionsAspect } from './compositions.aspect';\n\nexport { CompositionsAspect };\nexport type { CompositionsMain } from './compositions.main.runtime';\nexport type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';\nexport { Composition, CompositionProps } from './composition';\nexport { CompositionContent, CompositionContentProps } from './compositions';\nexport type { CompositionsPreview } from './compositions.preview.runtime';\nexport { CompositionsOverview } from './ui/compositions-overview';\nexport { ComponentComposition } from './ui';\nexport default CompositionsAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAKA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;eACeA,kC"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.751",
+  "version": "0.0.754",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.751"
+    "version": "0.0.754"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -25,17 +25,18 @@
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.property-table": "4.1.3",
     "@teambit/evangelist.elements.icon": "1.0.2",
-    "@teambit/component": "0.0.751",
+    "@teambit/component": "0.0.754",
+    "@teambit/compositions.ui.composition-compare": "0.0.2",
     "@teambit/compositions.model.composition-id": "0.0.487",
-    "@teambit/graphql": "0.0.751",
-    "@teambit/cli": "0.0.496",
-    "@teambit/dev-files": "0.0.751",
-    "@teambit/preview": "0.0.751",
-    "@teambit/schema": "0.0.751",
+    "@teambit/graphql": "0.0.754",
+    "@teambit/cli": "0.0.497",
+    "@teambit/dev-files": "0.0.754",
+    "@teambit/preview": "0.0.754",
+    "@teambit/schema": "0.0.754",
     "@teambit/toolbox.path.match-patterns": "0.0.1",
-    "@teambit/workspace": "0.0.751",
+    "@teambit/workspace": "0.0.754",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
-    "@teambit/envs": "0.0.751",
+    "@teambit/envs": "0.0.754",
     "@teambit/component-id": "0.0.402",
     "@teambit/compositions.ui.compositions-menu-bar": "0.0.163",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.163",
@@ -44,11 +45,12 @@
     "@teambit/design.ui.surfaces.status-message-card": "0.0.7",
     "@teambit/docs.ui.queries.get-docs": "0.0.487",
     "@teambit/mdx.ui.mdx-layout": "0.0.500",
-    "@teambit/panels": "0.0.497",
+    "@teambit/panels": "0.0.498",
     "@teambit/preview.ui.component-preview": "0.0.493",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.194",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.179",
-    "@teambit/ui": "0.0.751",
+    "@teambit/component-compare": "0.0.2",
+    "@teambit/ui": "0.0.754",
     "@teambit/compositions.model.composition-type": "0.0.488",
     "@teambit/compositions.ui.composition-card": "0.0.495"
   },
@@ -64,7 +66,7 @@
     "@teambit/compositions.aspect-docs.compositions": "0.0.138"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.276",
+    "@teambit/legacy": "1.0.277",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -92,7 +94,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.276",
+        "@teambit/legacy": "1.0.277",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1654313169583.js → preview-1654658836872.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.751/dist/compositions.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.751/dist/compositions.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.754/dist/compositions.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.754/dist/compositions.docs.mdx')]