@teambit/compositions 0.0.851 → 0.0.853

package/compositions.tsx

@@ -56,21 +56,22 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
 
   const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
 
-  const compositionUrl = toPreviewUrl(component, 'compositions');
-  const currentCompositionUrl = toPreviewUrl(component, 'compositions', selected?.identifier);
+  const compositionUrl = toPreviewUrl(component, 'compositions');  
+  const isScaling = component?.preview?.isScaling;
+  const compositionIdentifierParam = isScaling ? `name=${selected?.identifier}` : selected?.identifier;
+  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);
 
   const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});
   const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);
 
   // collapse sidebar when empty, reopen when not
   useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);
-
   return (
     <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>
       <SplitPane layout={sidebarOpenness} size="85%" className={styles.compositionsPage}>
         <Pane className={styles.left}>
           <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>
-            <Link external href={currentCompositionUrl} className={styles.openInNewTab}>
+            <Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>
               <OptionButton icon="open-tab" />
             </Link>
           </CompositionsMenuBar>
@@ -100,6 +101,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
               </TabList>
               <TabPanel className={styles.tabContent}>
                 <CompositionsPanel
+                  isScaling={isScaling}
                   onSelectComposition={selectComposition}
                   url={compositionUrl}
                   compositions={component.compositions}

package/dist/compositions.js

@@ -278,6 +278,8 @@ function Compositions({
   menuBarWidgets,
   emptyState
 }) {
+  var _component$preview;
+
   const component = (0, _react().useContext)(_component().ComponentContext);
   const [selected, selectComposition] = (0, _react().useState)((0, _lodash().default)(component.compositions));
   const selectedRef = (0, _react().useRef)(selected);
@@ -297,7 +299,9 @@ function Compositions({
   const [isSidebarOpen, setSidebarOpenness] = (0, _react().useState)(showSidebar);
   const sidebarOpenness = isSidebarOpen ? _baseUiSurfacesSplitPane().Layout.row : _baseUiSurfacesSplitPane().Layout.left;
   const compositionUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions');
-  const currentCompositionUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions', selected === null || selected === void 0 ? void 0 : selected.identifier);
+  const isScaling = component === null || component === void 0 ? void 0 : (_component$preview = component.preview) === null || _component$preview === void 0 ? void 0 : _component$preview.isScaling;
+  const compositionIdentifierParam = isScaling ? `name=${selected === null || selected === void 0 ? void 0 : selected.identifier}` : selected === null || selected === void 0 ? void 0 : selected.identifier;
+  const currentCompositionFullUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions', compositionIdentifierParam);
   const [compositionParams, setCompositionParams] = (0, _react().useState)({});
   const queryParams = (0, _react().useMemo)(() => _queryString().default.stringify(compositionParams), [compositionParams]); // collapse sidebar when empty, reopen when not
 
@@ -316,7 +320,7 @@ function Compositions({
     className: _compositionsModule().default.menuBar
   }, /*#__PURE__*/_react().default.createElement(_baseReactNavigation().Link, {
     external: true,
-    href: currentCompositionUrl,
+    href: currentCompositionFullUrl,
     className: _compositionsModule().default.openInNewTab
   }, /*#__PURE__*/_react().default.createElement(_designUiInput().OptionButton, {
     icon: "open-tab"
@@ -344,6 +348,7 @@ function Compositions({
   }, /*#__PURE__*/_react().default.createElement(_panels().Tab, null, "compositions"), /*#__PURE__*/_react().default.createElement(_panels().Tab, null, "properties")), /*#__PURE__*/_react().default.createElement(_panels().TabPanel, {
     className: _compositionsModule().default.tabContent
   }, /*#__PURE__*/_react().default.createElement(_compositionsPanel().CompositionsPanel, {
+    isScaling: isScaling,
     onSelectComposition: selectComposition,
     url: compositionUrl,
     compositions: component.compositions,

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\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      // 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    />\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","isScaling","preview","compositionIdentifierParam","currentCompositionFullUrl","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 isScaling = component?.preview?.isScaling;\n  const compositionIdentifierParam = isScaling ? `name=${selected?.identifier}` : selected?.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={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                  isScaling={isScaling}\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      // 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    />\n  );\n}\n"],"mappings":"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"}

package/dist/ui/compositions-panel/compositions-panel.d.ts

@@ -1,9 +1,25 @@
 import React from 'react';
 import { Composition } from '../../composition';
 export declare type CompositionsPanelProps = {
+    /**
+     * list of compositions
+     */
     compositions: Composition[];
+    /**
+     * select composition to display
+     */
     onSelectComposition: (composition: Composition) => void;
+    /**
+     * the currently active composition
+     */
     active?: Composition;
+    /**
+     * the url to the base composition. doesntc contain the current composition params
+     */
     url: string;
+    /**
+     * checks if a component is using the new preview api. if false, doesnt scale to support new preview
+     */
+    isScaling?: boolean;
 } & React.HTMLAttributes<HTMLUListElement>;
-export declare function CompositionsPanel({ url, compositions, onSelectComposition: onSelect, active, className, ...rest }: CompositionsPanelProps): JSX.Element;
+export declare function CompositionsPanel({ url, compositions, isScaling, onSelectComposition: onSelect, active, className, ...rest }: CompositionsPanelProps): JSX.Element;

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

@@ -75,18 +75,20 @@ function CompositionsPanel(_ref) {
   let {
     url,
     compositions,
+    isScaling,
     onSelectComposition: onSelect,
     active,
     className
   } = _ref,
-      rest = (0, _objectWithoutProperties2().default)(_ref, ["url", "compositions", "onSelectComposition", "active", "className"]);
+      rest = (0, _objectWithoutProperties2().default)(_ref, ["url", "compositions", "isScaling", "onSelectComposition", "active", "className"]);
   const handleSelect = (0, _react().useCallback)(selected => {
     onSelect && onSelect(selected);
   }, [onSelect]);
   return /*#__PURE__*/_react().default.createElement("ul", (0, _extends2().default)({}, rest, {
     className: (0, _classnames().default)(className)
   }), compositions.map(composition => {
-    // TODO - move to composition panel node
+    const href = isScaling ? `${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)
@@ -103,7 +105,7 @@ function CompositionsPanel(_ref) {
       className: _compositionsPanelModule().default.panelLink,
       target: "_blank",
       rel: "noopener noreferrer",
-      href: `${url}&${composition.identifier}`
+      href: href
     }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
       className: _compositionsPanelModule().default.icon,
       of: "open-tab"

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

@@ -1 +1 @@
-{"version":3,"names":["CompositionsPanel","url","compositions","onSelectComposition","onSelect","active","className","rest","handleSelect","useCallback","selected","classNames","map","composition","identifier","styles","linkWrapper","panelLink","box","name","displayName","right","icon"],"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  compositions: Composition[];\n  onSelectComposition: (composition: Composition) => void;\n  active?: Composition;\n  url: string;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  onSelectComposition: onSelect,\n  active,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\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        // 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\n                className={styles.panelLink}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href={`${url}&${composition.identifier}`}\n              >\n                <Icon className={styles.icon} of=\"open-tab\" />\n              </a>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AASO,SAASA,iBAAT,OAOoB;EAAA,IAPO;IAChCC,GADgC;IAEhCC,YAFgC;IAGhCC,mBAAmB,EAAEC,QAHW;IAIhCC,MAJgC;IAKhCC;EALgC,CAOP;EAAA,IADtBC,IACsB;EACzB,MAAMC,YAAY,GAAG,IAAAC,oBAAA,EAClBC,QAAD,IAA2B;IACzBN,QAAQ,IAAIA,QAAQ,CAACM,QAAD,CAApB;EACD,CAHkB,EAInB,CAACN,QAAD,CAJmB,CAArB;EAOA,oBACE,kEAAQG,IAAR;IAAc,SAAS,EAAE,IAAAI,qBAAA,EAAWL,SAAX;EAAzB,IACGJ,YAAY,CAACU,GAAb,CAAkBC,WAAD,IAAiB;IACjC;IACA,oBACE;MACE,GAAG,EAAEA,WAAW,CAACC,UADnB;MAEE,SAAS,EAAE,IAAAH,qBAAA,EAAWI,kCAAA,CAAOC,WAAlB,EAA+BH,WAAW,KAAKR,MAAhB,IAA0BU,kCAAA,CAAOV,MAAhE;IAFb,gBAIE;MAAG,SAAS,EAAEU,kCAAA,CAAOE,SAArB;MAAgC,OAAO,EAAE,MAAMT,YAAY,CAACK,WAAD;IAA3D,gBACE;MAAM,SAAS,EAAEE,kCAAA,CAAOG;IAAxB,EADF,eAEE;MAAM,SAAS,EAAEH,kCAAA,CAAOI;IAAxB,GAA+BN,WAAW,CAACO,WAA3C,CAFF,CAJF,eAQE;MAAK,SAAS,EAAEL,kCAAA,CAAOM;IAAvB,gBACE;MACE,SAAS,EAAEN,kCAAA,CAAOE,SADpB;MAEE,MAAM,EAAC,QAFT;MAGE,GAAG,EAAC,qBAHN;MAIE,IAAI,EAAG,GAAEhB,GAAI,IAAGY,WAAW,CAACC,UAAW;IAJzC,gBAME,+BAAC,0BAAD;MAAM,SAAS,EAAEC,kCAAA,CAAOO,IAAxB;MAA8B,EAAE,EAAC;IAAjC,EANF,CADF,CARF,CADF;EAqBD,CAvBA,CADH,CADF;AA4BD"}
+{"version":3,"names":["CompositionsPanel","url","compositions","isScaling","onSelectComposition","onSelect","active","className","rest","handleSelect","useCallback","selected","classNames","map","composition","href","identifier","styles","linkWrapper","panelLink","box","name","displayName","right","icon"],"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} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  isScaling,\n  onSelectComposition: onSelect,\n  active,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\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\n        const href = isScaling ? `${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\n                className={styles.panelLink}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href={href}\n              >\n                <Icon className={styles.icon} of=\"open-tab\" />\n              </a>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAyBO,SAASA,iBAAT,OAQoB;EAAA,IARO;IAChCC,GADgC;IAEhCC,YAFgC;IAGhCC,SAHgC;IAIhCC,mBAAmB,EAAEC,QAJW;IAKhCC,MALgC;IAMhCC;EANgC,CAQP;EAAA,IADtBC,IACsB;EACzB,MAAMC,YAAY,GAAG,IAAAC,oBAAA,EAClBC,QAAD,IAA2B;IACzBN,QAAQ,IAAIA,QAAQ,CAACM,QAAD,CAApB;EACD,CAHkB,EAInB,CAACN,QAAD,CAJmB,CAArB;EAOA,oBACE,kEAAQG,IAAR;IAAc,SAAS,EAAE,IAAAI,qBAAA,EAAWL,SAAX;EAAzB,IACGL,YAAY,CAACW,GAAb,CAAkBC,WAAD,IAAiB;IAEjC,MAAMC,IAAI,GAAGZ,SAAS,GAAI,GAAEF,GAAI,SAAQa,WAAW,CAACE,UAAW,EAAzC,GAA8C,GAAEf,GAAI,IAAGa,WAAW,CAACE,UAAW,EAApG,CAFiC,CAIjC;;IACA,oBACE;MACE,GAAG,EAAEF,WAAW,CAACE,UADnB;MAEE,SAAS,EAAE,IAAAJ,qBAAA,EAAWK,kCAAA,CAAOC,WAAlB,EAA+BJ,WAAW,KAAKR,MAAhB,IAA0BW,kCAAA,CAAOX,MAAhE;IAFb,gBAIE;MAAG,SAAS,EAAEW,kCAAA,CAAOE,SAArB;MAAgC,OAAO,EAAE,MAAMV,YAAY,CAACK,WAAD;IAA3D,gBACE;MAAM,SAAS,EAAEG,kCAAA,CAAOG;IAAxB,EADF,eAEE;MAAM,SAAS,EAAEH,kCAAA,CAAOI;IAAxB,GAA+BP,WAAW,CAACQ,WAA3C,CAFF,CAJF,eAQE;MAAK,SAAS,EAAEL,kCAAA,CAAOM;IAAvB,gBACE;MACE,SAAS,EAAEN,kCAAA,CAAOE,SADpB;MAEE,MAAM,EAAC,QAFT;MAGE,GAAG,EAAC,qBAHN;MAIE,IAAI,EAAEJ;IAJR,gBAME,+BAAC,0BAAD;MAAM,SAAS,EAAEE,kCAAA,CAAOO,IAAxB;MAA8B,EAAE,EAAC;IAAjC,EANF,CADF,CARF,CADF;EAqBD,CA1BA,CADH,CADF;AA+BD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.851",
+  "version": "0.0.853",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.851"
+    "version": "0.0.853"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -15,18 +15,18 @@
     "classnames": "2.2.6",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/component": "0.0.851",
+    "@teambit/component": "0.0.853",
     "@teambit/compositions.ui.composition-compare": "0.0.81",
     "@teambit/compositions.model.composition-id": "0.0.494",
     "@teambit/harmony": "0.3.3",
-    "@teambit/graphql": "0.0.851",
+    "@teambit/graphql": "0.0.853",
     "@teambit/cli": "0.0.566",
-    "@teambit/dev-files": "0.0.851",
-    "@teambit/envs": "0.0.851",
-    "@teambit/preview": "0.0.851",
-    "@teambit/schema": "0.0.851",
+    "@teambit/dev-files": "0.0.853",
+    "@teambit/envs": "0.0.853",
+    "@teambit/preview": "0.0.853",
+    "@teambit/schema": "0.0.853",
     "@teambit/toolbox.path.match-patterns": "0.0.7",
-    "@teambit/workspace": "0.0.851",
+    "@teambit/workspace": "0.0.853",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494",
     "@teambit/component-id": "0.0.417",
     "@teambit/base-react.navigation.link": "2.0.27",
@@ -45,11 +45,11 @@
     "@teambit/documenter.ui.property-table": "4.1.3",
     "@teambit/mdx.ui.mdx-layout": "0.0.507",
     "@teambit/panels": "0.0.567",
-    "@teambit/preview.ui.component-preview": "0.0.501",
+    "@teambit/preview.ui.component-preview": "0.0.502",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.201",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.185",
-    "@teambit/component-compare": "0.0.99",
-    "@teambit/ui": "0.0.851",
+    "@teambit/component-compare": "0.0.101",
+    "@teambit/ui": "0.0.853",
     "@teambit/compositions.model.composition-type": "0.0.495",
     "@teambit/compositions.ui.composition-card": "0.0.502",
     "@teambit/evangelist.elements.icon": "1.0.2"

package/{preview-1662990602352.js → preview-1663126549096.js}

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

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

@@ -6,15 +6,32 @@ import { Composition } from '../../composition';
 import styles from './compositions-panel.module.scss';
 
 export type CompositionsPanelProps = {
+  /**
+   * list of compositions
+   */
   compositions: Composition[];
+  /**
+   * select composition to display
+   */
   onSelectComposition: (composition: Composition) => void;
+  /**
+   * the currently active composition
+   */
   active?: Composition;
+  /**
+   * the url to the base composition. doesntc contain the current composition params
+   */
   url: string;
+  /**
+   * checks if a component is using the new preview api. if false, doesnt scale to support new preview
+   */
+  isScaling?: boolean;
 } & React.HTMLAttributes<HTMLUListElement>;
 
 export function CompositionsPanel({
   url,
   compositions,
+  isScaling,
   onSelectComposition: onSelect,
   active,
   className,
@@ -30,6 +47,9 @@ export function CompositionsPanel({
   return (
     <ul {...rest} className={classNames(className)}>
       {compositions.map((composition) => {
+
+        const href = isScaling ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;
+
         // TODO - move to composition panel node
         return (
           <li
@@ -45,7 +65,7 @@ export function CompositionsPanel({
                 className={styles.panelLink}
                 target="_blank"
                 rel="noopener noreferrer"
-                href={`${url}&${composition.identifier}`}
+                href={href}
               >
                 <Icon className={styles.icon} of="open-tab" />
               </a>