@teambit/compositions 1.0.59 → 1.0.60

package/compositions.module.scss

@@ -97,3 +97,8 @@ $panelBg: #fafafa;
 .buildStatusMessage {
   margin: auto;
 }
+
+.compositionPanel {
+  display: flex;
+  flex: 1;
+}

package/compositions.tsx

@@ -91,6 +91,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
             </Link>
           </CompositionsMenuBar>
           <CompositionContent
+            className={styles.compositionPanel}
             emptyState={emptyState}
             component={component}
             selected={currentComposition}
@@ -141,7 +142,6 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
                   url={compositionUrl}
                   compositions={component.compositions}
                   active={currentComposition}
-                  className={styles.compost}
                 />
               </TabPanel>
               <TabPanel className={styles.tabContent}>

package/dist/compositions.js

@@ -260,6 +260,7 @@ function Compositions({
   }, /*#__PURE__*/_react().default.createElement(_designUiInput().OptionButton, {
     icon: "open-tab"
   }))), /*#__PURE__*/_react().default.createElement(CompositionContent, {
+    className: _compositionsModule().default.compositionPanel,
     emptyState: emptyState,
     component: component,
     selected: currentComposition,
@@ -302,8 +303,7 @@ function Compositions({
     },
     url: compositionUrl,
     compositions: component.compositions,
-    active: currentComposition,
-    className: _compositionsModule().default.compost
+    active: currentComposition
   })), /*#__PURE__*/_react().default.createElement(_panels().TabPanel, {
     className: _compositionsModule().default.tabContent
   }, properties && properties.length > 0 ? /*#__PURE__*/_react().default.createElement(_documenterUi().PropTable, {

package/dist/compositions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_reactRouterDom","_lodash","_interopRequireDefault","_queryString","_documenterTheme","_baseUiSurfacesSplitPane","_baseUiSurfacesSplitPane2","_component","_documenterUi","_panels","_docsUiQueries","_uiFoundationUiButtons","_designUi","_previewUi","_uiFoundationUiHooks","_compositionsUi","_compositionsUiHooks","_mdxUi","_designUi2","_documenterUi2","_designUi3","_baseReactNavigation","_designUiInput","_designUiSurfaces","_compositionsModule","_ui","_compositionsPanel","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Compositions","menuBarWidgets","emptyState","_component$preview","_component$preview2","_component$preview3","component","useContext","ComponentContext","params","useParams","navigate","useNavigate","location","useLocation","currentCompositionName","currentComposition","compositions","find","composition","identifier","toLowerCase","head","selectedRef","useRef","current","properties","useDocs","id","isMobile","useIsMobile","showSidebar","isSidebarOpen","setSidebarOpenness","useState","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","includesEnvTemplates","includesEnvTemplate","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","useEffect","createElement","CompositionContextProvider","setQueryParams","SplitPane","layout","size","className","styles","compositionsPage","Pane","CompositionsMenuBar","menuBar","Link","external","href","openInNewTab","OptionButton","icon","CompositionContent","selected","HoverSplitter","splitter","Collapser","placement","isOpen","onMouseDown","stopPropagation","onClick","x","tooltipContent","collapser","right","ThemeContext","TabContainer","tabsContainer","TabList","tabs","Tab","TabPanel","tabContent","CompositionsPanel","onSelectComposition","pathname","includes","path","replace","nextPath","concat","url","active","compost","PropTable","rows","showListView","_ref","_component$environmen","componentCompositionProps","env","environment","EmptyStateTemplate","host","noCompositionsPage","H1","title","Separator","isPresentational","separator","AlertCard","level","MDXLayout","buildStatus","StatusMessageCard","buildStatusMessage","status","EmptyBox","linkText","link","ComponentComposition","compositionsIframe","viewport","forceHeight","fullContentHeight","pubsub"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport { useParams } from 'react-router-dom';\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, useNavigate, useLocation } 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';\nimport { ComponentCompositionProps } from './ui/composition-preview';\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 [searchParams, setSearchParams] = useSearchParams();\n  const params = useParams();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const currentCompositionName = params['*'];\n  // console.log(routes);\n  const currentComposition =\n    component.compositions.find((composition) => composition.identifier.toLowerCase() === currentCompositionName) ||\n    head(component.compositions);\n  // const [selected, selectComposition] = useState(head(component.compositions));\n  const selectedRef = useRef(currentComposition);\n  selectedRef.current = currentComposition;\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  //   navigate(next.displayName.toLowerCase().replaceAll(' ', '-'));\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 isScaling = component?.preview?.isScaling;\n  const includesEnvTemplates = component?.preview?.includesEnvTemplate;\n  const compositionIdentifierParam =\n    isScaling && includesEnvTemplates === false\n      ? `name=${currentComposition?.identifier}`\n      : currentComposition?.identifier;\n  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);\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  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={currentCompositionFullUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </Link>\n          </CompositionsMenuBar>\n          <CompositionContent\n            emptyState={emptyState}\n            component={component}\n            selected={currentComposition}\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                  isScaling={isScaling}\n                  includesEnvTemplate={component.preview?.includesEnvTemplate}\n                  onSelectComposition={(composition) => {\n                    if (!currentComposition || !location) return;\n                    if (location.pathname.includes(currentComposition.identifier.toLowerCase())) {\n                      navigate(composition.identifier.toLowerCase());\n                      return;\n                    }\n\n                    const path = location.pathname.replace(\n                      currentComposition.identifier.toLowerCase(),\n                      composition.identifier.toLowerCase()\n                    );\n\n                    if (!path) return;\n                    if (!path.includes(composition.identifier.toLowerCase())) {\n                      const nextPath = location.pathname.concat(`/${composition.identifier.toLowerCase()}`);\n                      navigate(nextPath);\n                      return;\n                    }\n                    navigate(path);\n                  }}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={currentComposition}\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} & ComponentCompositionProps;\n\nexport function CompositionContent({\n  component,\n  selected,\n  queryParams,\n  emptyState,\n  ...componentCompositionProps\n}: 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/reference/dev-services-overview/compositions/compositions-overview`}\n      />\n    );\n  }\n\n  return (\n    <ComponentComposition\n      className={styles.compositionsIframe}\n      // TODO: Oded to add control for viewport.\n      viewport={null}\n      component={component}\n      forceHeight=\"100%\"\n      composition={selected}\n      fullContentHeight\n      pubsub={true}\n      queryParams={queryParams}\n      {...componentCompositionProps}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_reactRouterDom","_lodash","_interopRequireDefault","_queryString","_documenterTheme","_baseUiSurfacesSplitPane","_baseUiSurfacesSplitPane2","_component","_documenterUi","_panels","_docsUiQueries","_uiFoundationUiButtons","_designUi","_previewUi","_uiFoundationUiHooks","_compositionsUi","_compositionsUiHooks","_mdxUi","_designUi2","_documenterUi2","_designUi3","_baseReactNavigation","_designUiInput","_designUiSurfaces","_compositionsModule","_ui","_compositionsPanel","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Compositions","menuBarWidgets","emptyState","_component$preview","_component$preview2","_component$preview3","component","useContext","ComponentContext","params","useParams","navigate","useNavigate","location","useLocation","currentCompositionName","currentComposition","compositions","find","composition","identifier","toLowerCase","head","selectedRef","useRef","current","properties","useDocs","id","isMobile","useIsMobile","showSidebar","isSidebarOpen","setSidebarOpenness","useState","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","includesEnvTemplates","includesEnvTemplate","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","useEffect","createElement","CompositionContextProvider","setQueryParams","SplitPane","layout","size","className","styles","compositionsPage","Pane","CompositionsMenuBar","menuBar","Link","external","href","openInNewTab","OptionButton","icon","CompositionContent","compositionPanel","selected","HoverSplitter","splitter","Collapser","placement","isOpen","onMouseDown","stopPropagation","onClick","x","tooltipContent","collapser","right","ThemeContext","TabContainer","tabsContainer","TabList","tabs","Tab","TabPanel","tabContent","CompositionsPanel","onSelectComposition","pathname","includes","path","replace","nextPath","concat","url","active","PropTable","rows","showListView","_ref","_component$environmen","componentCompositionProps","env","environment","EmptyStateTemplate","host","noCompositionsPage","H1","title","Separator","isPresentational","separator","AlertCard","level","MDXLayout","buildStatus","StatusMessageCard","buildStatusMessage","status","EmptyBox","linkText","link","ComponentComposition","compositionsIframe","viewport","forceHeight","fullContentHeight","pubsub"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport { useParams } from 'react-router-dom';\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, useNavigate, useLocation } 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';\nimport { ComponentCompositionProps } from './ui/composition-preview';\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 [searchParams, setSearchParams] = useSearchParams();\n  const params = useParams();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const currentCompositionName = params['*'];\n  // console.log(routes);\n  const currentComposition =\n    component.compositions.find((composition) => composition.identifier.toLowerCase() === currentCompositionName) ||\n    head(component.compositions);\n  // const [selected, selectComposition] = useState(head(component.compositions));\n  const selectedRef = useRef(currentComposition);\n  selectedRef.current = currentComposition;\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  //   navigate(next.displayName.toLowerCase().replaceAll(' ', '-'));\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 isScaling = component?.preview?.isScaling;\n  const includesEnvTemplates = component?.preview?.includesEnvTemplate;\n  const compositionIdentifierParam =\n    isScaling && includesEnvTemplates === false\n      ? `name=${currentComposition?.identifier}`\n      : currentComposition?.identifier;\n  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);\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  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={currentCompositionFullUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </Link>\n          </CompositionsMenuBar>\n          <CompositionContent\n            className={styles.compositionPanel}\n            emptyState={emptyState}\n            component={component}\n            selected={currentComposition}\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                  isScaling={isScaling}\n                  includesEnvTemplate={component.preview?.includesEnvTemplate}\n                  onSelectComposition={(composition) => {\n                    if (!currentComposition || !location) return;\n                    if (location.pathname.includes(currentComposition.identifier.toLowerCase())) {\n                      navigate(composition.identifier.toLowerCase());\n                      return;\n                    }\n\n                    const path = location.pathname.replace(\n                      currentComposition.identifier.toLowerCase(),\n                      composition.identifier.toLowerCase()\n                    );\n\n                    if (!path) return;\n                    if (!path.includes(composition.identifier.toLowerCase())) {\n                      const nextPath = location.pathname.concat(`/${composition.identifier.toLowerCase()}`);\n                      navigate(nextPath);\n                      return;\n                    }\n                    navigate(path);\n                  }}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={currentComposition}\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} & ComponentCompositionProps;\n\nexport function CompositionContent({\n  component,\n  selected,\n  queryParams,\n  emptyState,\n  ...componentCompositionProps\n}: 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/reference/dev-services-overview/compositions/compositions-overview`}\n      />\n    );\n  }\n\n  return (\n    <ComponentComposition\n      className={styles.compositionsIframe}\n      // TODO: Oded to add control for viewport.\n      viewport={null}\n      component={component}\n      forceHeight=\"100%\"\n      composition={selected}\n      fullContentHeight\n      pubsub={true}\n      queryParams={queryParams}\n      {...componentCompositionProps}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/compositions.module.scss

@@ -97,3 +97,8 @@ $panelBg: #fafafa;
 .buildStatusMessage {
   margin: auto;
 }
+
+.compositionPanel {
+  display: flex;
+  flex: 1;
+}

package/dist/{preview-1700363827141.js → preview-1700557411652.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@1.0.59/dist/compositions.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@1.0.59/dist/compositions.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@1.0.60/dist/compositions.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@1.0.60/dist/compositions.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/dist/ui/compositions-panel/compositions-panel.js

@@ -25,6 +25,20 @@ function _react() {
   };
   return data;
 }
+function _uiFoundationUi() {
+  const data = require("@teambit/ui-foundation.ui.menu-widget-icon");
+  _uiFoundationUi = function () {
+    return data;
+  };
+  return data;
+}
+function _baseReactNavigation() {
+  const data = require("@teambit/base-react.navigation.link");
+  _baseReactNavigation = function () {
+    return data;
+  };
+  return data;
+}
 function _compositionsPanelModule() {
   const data = _interopRequireDefault(require("./compositions-panel.module.scss"));
   _compositionsPanelModule = function () {
@@ -54,12 +68,17 @@ function CompositionsPanel(_ref) {
   const handleSelect = (0, _react().useCallback)(selected => {
     onSelect && onSelect(selected);
   }, [onSelect]);
+  const location = (0, _baseReactNavigation().useLocation)();
+  const navigate = (0, _baseReactNavigation().useNavigate)();
+  const onCompositionCodeClicked = (0, _react().useCallback)(composition => e => {
+    e.preventDefault();
+    const basePath = location === null || location === void 0 ? void 0 : location.pathname.split('/~compositions')[0];
+    navigate(`${basePath}/~code/${composition.filepath}#search=${composition.identifier}`);
+  }, [location === null || location === void 0 ? void 0 : location.pathname]);
   return /*#__PURE__*/_react().default.createElement("ul", _extends({}, rest, {
     className: (0, _classnames().default)(className)
   }), compositions.map(composition => {
     const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;
-
-    // TODO - move to composition panel node
     return /*#__PURE__*/_react().default.createElement("li", {
       key: composition.identifier,
       className: (0, _classnames().default)(_compositionsPanelModule().default.linkWrapper, composition === active && _compositionsPanelModule().default.active)
@@ -72,7 +91,12 @@ function CompositionsPanel(_ref) {
       className: _compositionsPanelModule().default.name
     }, composition.displayName)), /*#__PURE__*/_react().default.createElement("div", {
       className: _compositionsPanelModule().default.right
-    }, /*#__PURE__*/_react().default.createElement("a", {
+    }, /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MenuWidgetIcon, {
+      className: _compositionsPanelModule().default.codeLink,
+      icon: "Code",
+      tooltipContent: "Code",
+      onClick: onCompositionCodeClicked(composition)
+    }), /*#__PURE__*/_react().default.createElement("a", {
       className: _compositionsPanelModule().default.panelLink,
       target: "_blank",
       rel: "noopener noreferrer",

package/dist/ui/compositions-panel/compositions-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_react","_interopRequireWildcard","_compositionsPanelModule","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","className","rest","shouldAddNameParam","handleSelect","useCallback","selected","createElement","classNames","map","composition","href","identifier","styles","linkWrapper","panelLink","onClick","box","name","displayName","right","rel","Icon","icon","of"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport React, { useCallback } from 'react';\n\nimport { Composition } from '../../composition';\nimport styles from './compositions-panel.module.scss';\n\nexport type CompositionsPanelProps = {\n  /**\n   * list of compositions\n   */\n  compositions: Composition[];\n  /**\n   * select composition to display\n   */\n  onSelectComposition: (composition: Composition) => void;\n  /**\n   * the currently active composition\n   */\n  active?: Composition;\n  /**\n   * the url to the base composition. doesntc contain the current composition params\n   */\n  url: string;\n  /**\n   * checks if a component is using the new preview api. if false, doesnt scale to support new preview\n   */\n  isScaling?: boolean;\n\n  includesEnvTemplate?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  isScaling,\n  onSelectComposition: onSelect,\n  active,\n  includesEnvTemplate,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\n  const shouldAddNameParam = isScaling && includesEnvTemplate === false;\n\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n    },\n    [onSelect]\n  );\n\n  return (\n    <ul {...rest} className={classNames(className)}>\n      {compositions.map((composition) => {\n        const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;\n\n        // TODO - move to composition panel node\n        return (\n          <li\n            key={composition.identifier}\n            className={classNames(styles.linkWrapper, composition === active && styles.active)}\n          >\n            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n              <span className={styles.box}></span>\n              <span className={styles.name}>{composition.displayName}</span>\n            </a>\n            <div className={styles.right}>\n              <a className={styles.panelLink} target=\"_blank\" rel=\"noopener noreferrer\" href={href}>\n                <Icon className={styles.icon} of=\"open-tab\" />\n              </a>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_react","_interopRequireWildcard","_uiFoundationUi","_baseReactNavigation","_compositionsPanelModule","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","className","rest","shouldAddNameParam","handleSelect","useCallback","selected","location","useLocation","navigate","useNavigate","onCompositionCodeClicked","composition","preventDefault","basePath","pathname","split","filepath","identifier","createElement","classNames","map","href","styles","linkWrapper","panelLink","onClick","box","name","displayName","right","MenuWidgetIcon","codeLink","icon","tooltipContent","rel","Icon","of"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport React, { useCallback } from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport { Composition } from '../../composition';\nimport styles from './compositions-panel.module.scss';\n\nexport type CompositionsPanelProps = {\n  /**\n   * list of compositions\n   */\n  compositions: Composition[];\n  /**\n   * select composition to display\n   */\n  onSelectComposition: (composition: Composition) => void;\n  /**\n   * the currently active composition\n   */\n  active?: Composition;\n  /**\n   * the url to the base composition. doesntc contain the current composition params\n   */\n  url: string;\n  /**\n   * checks if a component is using the new preview api. if false, doesnt scale to support new preview\n   */\n  isScaling?: boolean;\n\n  includesEnvTemplate?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  isScaling,\n  onSelectComposition: onSelect,\n  active,\n  includesEnvTemplate,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\n  const shouldAddNameParam = isScaling && includesEnvTemplate === false;\n\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n    },\n    [onSelect]\n  );\n\n  const location = useLocation();\n  const navigate = useNavigate();\n\n  const onCompositionCodeClicked = useCallback(\n    (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      const basePath = location?.pathname.split('/~compositions')[0];\n      navigate(`${basePath}/~code/${composition.filepath}#search=${composition.identifier}`);\n    },\n    [location?.pathname]\n  );\n\n  return (\n    <ul {...rest} className={classNames(className)}>\n      {compositions.map((composition) => {\n        const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;\n        return (\n          <li\n            key={composition.identifier}\n            className={classNames(styles.linkWrapper, composition === active && styles.active)}\n          >\n            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n              <span className={styles.box}></span>\n              <span className={styles.name}>{composition.displayName}</span>\n            </a>\n            <div className={styles.right}>\n              <MenuWidgetIcon\n                className={styles.codeLink}\n                icon=\"Code\"\n                tooltipContent=\"Code\"\n                onClick={onCompositionCodeClicked(composition)}\n              />\n              <a className={styles.panelLink} target=\"_blank\" rel=\"noopener noreferrer\" href={href}>\n                <Icon className={styles.icon} of=\"open-tab\" />\n              </a>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/compositions-panel/compositions-panel.module.scss

@@ -51,11 +51,18 @@
     }
   }
   .right {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
     opacity: 0;
     visibility: hidden;
     font-size: 13px;
     transition: visibility 200ms, opacity 100ms ease-in-out;
   }
+  .codeLink {
+    cursor: pointer;
+  }
 }
 
 .box {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.59"
+    "version": "1.0.60"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -38,21 +38,22 @@
     "@teambit/compositions.ui.composition-compare-section": "0.0.100",
     "@teambit/compositions.ui.composition-compare": "0.0.255",
     "@teambit/evangelist.elements.icon": "1.0.2",
-    "@teambit/component": "1.0.59",
+    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.502",
+    "@teambit/component": "1.0.60",
     "@teambit/compositions.model.composition-id": "0.0.500",
-    "@teambit/graphql": "1.0.59",
-    "@teambit/cli": "0.0.819",
-    "@teambit/dev-files": "1.0.59",
-    "@teambit/envs": "1.0.59",
-    "@teambit/preview": "1.0.59",
-    "@teambit/schema": "1.0.59",
+    "@teambit/graphql": "1.0.60",
+    "@teambit/cli": "0.0.820",
+    "@teambit/dev-files": "1.0.60",
+    "@teambit/envs": "1.0.60",
+    "@teambit/preview": "1.0.60",
+    "@teambit/schema": "1.0.60",
     "@teambit/toolbox.path.match-patterns": "0.0.13",
-    "@teambit/workspace": "1.0.59",
+    "@teambit/workspace": "1.0.60",
     "@teambit/docs.ui.queries.get-docs": "0.0.506",
-    "@teambit/panels": "0.0.820",
+    "@teambit/panels": "0.0.821",
     "@teambit/preview.ui.component-preview": "1.0.3",
-    "@teambit/component-compare": "1.0.59",
-    "@teambit/ui": "1.0.59"
+    "@teambit/component-compare": "1.0.60",
+    "@teambit/ui": "1.0.60"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -68,7 +69,7 @@
   },
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
-    "@teambit/legacy": "1.0.602",
+    "@teambit/legacy": "1.0.603",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

package/ui/compositions-panel/compositions-panel.module.scss

@@ -51,11 +51,18 @@
     }
   }
   .right {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
     opacity: 0;
     visibility: hidden;
     font-size: 13px;
     transition: visibility 200ms, opacity 100ms ease-in-out;
   }
+  .codeLink {
+    cursor: pointer;
+  }
 }
 
 .box {

package/ui/compositions-panel/compositions-panel.tsx

@@ -1,7 +1,8 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
 import classNames from 'classnames';
 import React, { useCallback } from 'react';
-
+import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
+import { useNavigate, useLocation } from '@teambit/base-react.navigation.link';
 import { Composition } from '../../composition';
 import styles from './compositions-panel.module.scss';
 
@@ -49,12 +50,22 @@ export function CompositionsPanel({
     [onSelect]
   );
 
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const onCompositionCodeClicked = useCallback(
+    (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const basePath = location?.pathname.split('/~compositions')[0];
+      navigate(`${basePath}/~code/${composition.filepath}#search=${composition.identifier}`);
+    },
+    [location?.pathname]
+  );
+
   return (
     <ul {...rest} className={classNames(className)}>
       {compositions.map((composition) => {
         const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;
-
-        // TODO - move to composition panel node
         return (
           <li
             key={composition.identifier}
@@ -65,6 +76,12 @@ export function CompositionsPanel({
               <span className={styles.name}>{composition.displayName}</span>
             </a>
             <div className={styles.right}>
+              <MenuWidgetIcon
+                className={styles.codeLink}
+                icon="Code"
+                tooltipContent="Code"
+                onClick={onCompositionCodeClicked(composition)}
+              />
               <a className={styles.panelLink} target="_blank" rel="noopener noreferrer" href={href}>
                 <Icon className={styles.icon} of="open-tab" />
               </a>