@teambit/compositions 0.0.743 → 0.0.744

package/composition.section.tsx

@@ -22,7 +22,7 @@ export class CompositionsSection implements Section {
 
   route = {
     path: '~compositions',
-    children: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,
+    element: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,
   };
 
   order = 20;

package/compositions.tsx

@@ -18,7 +18,7 @@ import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
 import { Separator } from '@teambit/design.ui.separator';
 import { H1 } from '@teambit/documenter.ui.heading';
 import { AlertCard } from '@teambit/design.ui.alert-card';
-import { NativeLink } from '@teambit/base-ui.routing.native-link';
+import { Link } from '@teambit/base-react.navigation.link';
 import { OptionButton } from '@teambit/design.ui.input.option-button';
 import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
 import { EmptyStateSlot } from './compositions.ui.runtime';
@@ -70,9 +70,9 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
       <SplitPane layout={sidebarOpenness} size="85%" className={styles.compositionsPage}>
         <Pane className={styles.left}>
           <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>
-            <NativeLink external href={currentCompositionUrl} className={styles.openInNewTab}>
+            <Link external href={currentCompositionUrl} className={styles.openInNewTab}>
               <OptionButton icon="open-tab" />
-            </NativeLink>
+            </Link>
           </CompositionsMenuBar>
           <CompositionContent
             emptyState={emptyState}

package/dist/composition.section.d.ts

@@ -22,7 +22,7 @@ export declare class CompositionsSection implements Section {
     };
     route: {
         path: string;
-        children: JSX.Element;
+        element: JSX.Element;
     };
     order: number;
 }

package/dist/composition.section.js

@@ -52,7 +52,7 @@ class CompositionsSection {
     });
     (0, _defineProperty2().default)(this, "route", {
       path: '~compositions',
-      children: /*#__PURE__*/_react().default.createElement(_compositions().Compositions, {
+      element: /*#__PURE__*/_react().default.createElement(_compositions().Compositions, {
         menuBarWidgets: this.options.menuBarWidgetSlot,
         emptyState: this.emptyStateSlot
       })

package/dist/composition.section.js.map

@@ -1 +1 @@
-{"version":3,"names":["CompositionsSection","constructor","compositions","options","emptyStateSlot","href","children","path","menuBarWidgetSlot"],"sources":["composition.section.tsx"],"sourcesContent":["import { Section } from '@teambit/component';\nimport React from 'react';\nimport { Compositions } from './compositions';\nimport type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';\n\ntype Options = { menuBarWidgetSlot: CompositionsMenuSlot };\n\nexport class CompositionsSection implements Section {\n  constructor(\n    /**\n     * simulations ui extension.\n     */\n    private compositions: CompositionsUI,\n    private options: Options,\n    private emptyStateSlot: EmptyStateSlot\n  ) {}\n\n  navigationLink = {\n    href: '~compositions',\n    children: 'Compositions',\n  };\n\n  route = {\n    path: '~compositions',\n    children: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,\n  };\n\n  order = 20;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAKO,MAAMA,mBAAN,CAA6C;EAClDC,WAAW;EACT;AACJ;AACA;EACYC,YAJC,EAKDC,OALC,EAMDC,cANC,EAOT;IAAA,KAHQF,YAGR,GAHQA,YAGR;IAAA,KAFQC,OAER,GAFQA,OAER;IAAA,KADQC,cACR,GADQA,cACR;IAAA,wDAEe;MACfC,IAAI,EAAE,eADS;MAEfC,QAAQ,EAAE;IAFK,CAFf;IAAA,+CAOM;MACNC,IAAI,EAAE,eADA;MAEND,QAAQ,eAAE,+BAAC,4BAAD;QAAc,cAAc,EAAE,KAAKH,OAAL,CAAaK,iBAA3C;QAA8D,UAAU,EAAE,KAAKJ;MAA/E;IAFJ,CAPN;IAAA,+CAYM,EAZN;EAAE;;AAR8C"}
+{"version":3,"names":["CompositionsSection","constructor","compositions","options","emptyStateSlot","href","children","path","element","menuBarWidgetSlot"],"sources":["composition.section.tsx"],"sourcesContent":["import { Section } from '@teambit/component';\nimport React from 'react';\nimport { Compositions } from './compositions';\nimport type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';\n\ntype Options = { menuBarWidgetSlot: CompositionsMenuSlot };\n\nexport class CompositionsSection implements Section {\n  constructor(\n    /**\n     * simulations ui extension.\n     */\n    private compositions: CompositionsUI,\n    private options: Options,\n    private emptyStateSlot: EmptyStateSlot\n  ) {}\n\n  navigationLink = {\n    href: '~compositions',\n    children: 'Compositions',\n  };\n\n  route = {\n    path: '~compositions',\n    element: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,\n  };\n\n  order = 20;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAKO,MAAMA,mBAAN,CAA6C;EAClDC,WAAW;EACT;AACJ;AACA;EACYC,YAJC,EAKDC,OALC,EAMDC,cANC,EAOT;IAAA,KAHQF,YAGR,GAHQA,YAGR;IAAA,KAFQC,OAER,GAFQA,OAER;IAAA,KADQC,cACR,GADQA,cACR;IAAA,wDAEe;MACfC,IAAI,EAAE,eADS;MAEfC,QAAQ,EAAE;IAFK,CAFf;IAAA,+CAOM;MACNC,IAAI,EAAE,eADA;MAENC,OAAO,eAAE,+BAAC,4BAAD;QAAc,cAAc,EAAE,KAAKL,OAAL,CAAaM,iBAA3C;QAA8D,UAAU,EAAE,KAAKL;MAA/E;IAFH,CAPN;IAAA,+CAYM,EAZN;EAAE;;AAR8C"}

package/dist/compositions.js

@@ -209,10 +209,10 @@ function _designUi3() {
   return data;
 }
 
-function _baseUiRouting() {
-  const data = require("@teambit/base-ui.routing.native-link");
+function _baseReactNavigation() {
+  const data = require("@teambit/base-react.navigation.link");
 
-  _baseUiRouting = function () {
+  _baseReactNavigation = function () {
     return data;
   };
 
@@ -313,7 +313,7 @@ function Compositions({
   }, /*#__PURE__*/_react().default.createElement(_compositionsUi().CompositionsMenuBar, {
     menuBarWidgets: menuBarWidgets,
     className: _compositionsModule().default.menuBar
-  }, /*#__PURE__*/_react().default.createElement(_baseUiRouting().NativeLink, {
+  }, /*#__PURE__*/_react().default.createElement(_baseReactNavigation().Link, {
     external: true,
     href: currentCompositionUrl,
     className: _compositionsModule().default.openInNewTab

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 { NativeLink } from '@teambit/base-ui.routing.native-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            <NativeLink external href={currentCompositionUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </NativeLink>\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\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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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.743",
+  "version": "0.0.744",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.743"
+    "version": "0.0.744"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -16,7 +16,7 @@
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/harmony": "0.3.3",
-    "@teambit/base-ui.routing.native-link": "1.0.0",
+    "@teambit/base-react.navigation.link": "2.0.27",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
     "@teambit/design.ui.input.option-button": "1.0.0",
@@ -25,17 +25,17 @@
     "@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.743",
+    "@teambit/component": "0.0.744",
     "@teambit/compositions.model.composition-id": "0.0.487",
-    "@teambit/graphql": "0.0.743",
+    "@teambit/graphql": "0.0.744",
     "@teambit/cli": "0.0.493",
-    "@teambit/dev-files": "0.0.743",
-    "@teambit/preview": "0.0.743",
-    "@teambit/schema": "0.0.743",
+    "@teambit/dev-files": "0.0.744",
+    "@teambit/preview": "0.0.744",
+    "@teambit/schema": "0.0.744",
     "@teambit/toolbox.path.match-patterns": "0.0.1",
-    "@teambit/workspace": "0.0.743",
+    "@teambit/workspace": "0.0.744",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
-    "@teambit/envs": "0.0.743",
+    "@teambit/envs": "0.0.744",
     "@teambit/component-id": "0.0.402",
     "@teambit/compositions.ui.compositions-menu-bar": "0.0.163",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.163",
@@ -43,12 +43,12 @@
     "@teambit/design.ui.empty-box": "0.0.353",
     "@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.499",
+    "@teambit/mdx.ui.mdx-layout": "0.0.500",
     "@teambit/panels": "0.0.494",
     "@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.743",
+    "@teambit/ui": "0.0.744",
     "@teambit/compositions.model.composition-type": "0.0.488",
     "@teambit/compositions.ui.composition-card": "0.0.495"
   },
@@ -61,7 +61,7 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/compositions.aspect-docs.compositions": "0.0.137"
+    "@teambit/compositions.aspect-docs.compositions": "0.0.138"
   },
   "peerDependencies": {
     "@teambit/legacy": "1.0.273",

package/{preview-1653708349111.js → preview-1653827208409.js}

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