@teambit/compositions 0.0.1067 → 0.0.1068
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/compositions.tsx +6 -3
- package/dist/compositions.js +4 -2
- package/dist/compositions.js.map +1 -1
- package/dist/{preview-1685418569798.js → preview-1685503265901.js} +2 -2
- package/dist/ui/composition-preview.js +5 -4
- package/dist/ui/composition-preview.js.map +1 -1
- package/dist/ui/compositions-panel/compositions-panel.d.ts +2 -1
- package/dist/ui/compositions-panel/compositions-panel.js +4 -2
- package/dist/ui/compositions-panel/compositions-panel.js.map +1 -1
- package/package-tar/teambit-compositions-0.0.1068.tgz +0 -0
- package/package.json +16 -16
- package/ui/composition-preview.tsx +7 -4
- package/ui/compositions-panel/compositions-panel.tsx +6 -1
- package/package-tar/teambit-compositions-0.0.1067.tgz +0 -0
package/compositions.tsx
CHANGED
|
@@ -69,9 +69,11 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
|
|
|
69
69
|
|
|
70
70
|
const compositionUrl = toPreviewUrl(component, 'compositions');
|
|
71
71
|
const isScaling = component?.preview?.isScaling;
|
|
72
|
-
const
|
|
73
|
-
|
|
74
|
-
|
|
72
|
+
const includesEnvTemplates = component?.preview?.includesEnvTemplate;
|
|
73
|
+
const compositionIdentifierParam =
|
|
74
|
+
isScaling && includesEnvTemplates === false
|
|
75
|
+
? `name=${currentComposition?.identifier}`
|
|
76
|
+
: currentComposition?.identifier;
|
|
75
77
|
const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);
|
|
76
78
|
|
|
77
79
|
const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});
|
|
@@ -115,6 +117,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
|
|
|
115
117
|
<TabPanel className={styles.tabContent}>
|
|
116
118
|
<CompositionsPanel
|
|
117
119
|
isScaling={isScaling}
|
|
120
|
+
includesEnvTemplate={component.preview?.includesEnvTemplate}
|
|
118
121
|
onSelectComposition={(composition) => {
|
|
119
122
|
if (!currentComposition || !location) return;
|
|
120
123
|
if (location.pathname.includes(currentComposition.identifier.toLowerCase())) {
|
package/dist/compositions.js
CHANGED
|
@@ -218,7 +218,7 @@ function Compositions({
|
|
|
218
218
|
menuBarWidgets,
|
|
219
219
|
emptyState
|
|
220
220
|
}) {
|
|
221
|
-
var _component$preview;
|
|
221
|
+
var _component$preview, _component$preview2, _component$preview3;
|
|
222
222
|
const component = (0, _react().useContext)(_component().ComponentContext);
|
|
223
223
|
// const [searchParams, setSearchParams] = useSearchParams();
|
|
224
224
|
const params = (0, _reactRouterDom().useParams)();
|
|
@@ -246,7 +246,8 @@ function Compositions({
|
|
|
246
246
|
const sidebarOpenness = isSidebarOpen ? _baseUiSurfacesSplitPane().Layout.row : _baseUiSurfacesSplitPane().Layout.left;
|
|
247
247
|
const compositionUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions');
|
|
248
248
|
const isScaling = component === null || component === void 0 ? void 0 : (_component$preview = component.preview) === null || _component$preview === void 0 ? void 0 : _component$preview.isScaling;
|
|
249
|
-
const
|
|
249
|
+
const includesEnvTemplates = component === null || component === void 0 ? void 0 : (_component$preview2 = component.preview) === null || _component$preview2 === void 0 ? void 0 : _component$preview2.includesEnvTemplate;
|
|
250
|
+
const compositionIdentifierParam = isScaling && includesEnvTemplates === false ? `name=${currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.identifier}` : currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.identifier;
|
|
250
251
|
const currentCompositionFullUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions', compositionIdentifierParam);
|
|
251
252
|
const [compositionParams, setCompositionParams] = (0, _react().useState)({});
|
|
252
253
|
const queryParams = (0, _react().useMemo)(() => _queryString().default.stringify(compositionParams), [compositionParams]);
|
|
@@ -296,6 +297,7 @@ function Compositions({
|
|
|
296
297
|
className: _compositionsModule().default.tabContent
|
|
297
298
|
}, /*#__PURE__*/_react().default.createElement(_compositionsPanel().CompositionsPanel, {
|
|
298
299
|
isScaling: isScaling,
|
|
300
|
+
includesEnvTemplate: (_component$preview3 = component.preview) === null || _component$preview3 === void 0 ? void 0 : _component$preview3.includesEnvTemplate,
|
|
299
301
|
onSelectComposition: composition => {
|
|
300
302
|
if (!currentComposition || !location) return;
|
|
301
303
|
if (location.pathname.includes(currentComposition.identifier.toLowerCase())) {
|
package/dist/compositions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Compositions","menuBarWidgets","emptyState","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","length","isSidebarOpen","setSidebarOpenness","useState","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","useEffect","styles","compositionsPage","menuBar","openInNewTab","splitter","e","stopPropagation","x","collapser","right","tabsContainer","tabs","tabContent","pathname","includes","path","replace","nextPath","concat","compost","CompositionContent","selected","componentCompositionProps","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 { 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 compositionIdentifierParam = isScaling\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 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/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 {...componentCompositionProps}\n />\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;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAA+E;AAAA;AAUxE,SAASA,YAAY,CAAC;EAAEC,cAAc;EAAEC;AAA6B,CAAC,EAAE;EAAA;EAC7E,MAAMC,SAAS,GAAG,IAAAC,mBAAU,EAACC,6BAAgB,CAAC;EAC9C;EACA,MAAMC,MAAM,GAAG,IAAAC,2BAAS,GAAE;EAC1B,MAAMC,QAAQ,GAAG,IAAAC,kCAAW,GAAE;EAC9B,MAAMC,QAAQ,GAAG,IAAAC,kCAAW,GAAE;EAC9B,MAAMC,sBAAsB,GAAGN,MAAM,CAAC,GAAG,CAAC;EAC1C;EACA,MAAMO,kBAAkB,GACtBV,SAAS,CAACW,YAAY,CAACC,IAAI,CAAEC,WAAW,IAAKA,WAAW,CAACC,UAAU,CAACC,WAAW,EAAE,KAAKN,sBAAsB,CAAC,IAC7G,IAAAO,iBAAI,EAAChB,SAAS,CAACW,YAAY,CAAC;EAC9B;EACA,MAAMM,WAAW,GAAG,IAAAC,eAAM,EAACR,kBAAkB,CAAC;EAC9CO,WAAW,CAACE,OAAO,GAAGT,kBAAkB;EAExC,MAAMU,UAAU,GAAG,IAAAC,wBAAO,EAACrB,SAAS,CAACsB,EAAE,CAAC;;EAExC;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA,MAAMC,QAAQ,GAAG,IAAAC,kCAAW,GAAE;EAC9B,MAAMC,WAAW,GAAG,CAACF,QAAQ,IAAIvB,SAAS,CAACW,YAAY,CAACe,MAAM,GAAG,CAAC;EAClE,MAAM,CAACC,aAAa,EAAEC,kBAAkB,CAAC,GAAG,IAAAC,iBAAQ,EAACJ,WAAW,CAAC;EAEjE,MAAMK,eAAe,GAAGH,aAAa,GAAGI,iCAAM,CAACC,GAAG,GAAGD,iCAAM,CAACE,IAAI;EAEhE,MAAMC,cAAc,GAAG,IAAAC,yBAAY,EAACnC,SAAS,EAAE,cAAc,CAAC;EAC9D,MAAMoC,SAAS,GAAGpC,SAAS,aAATA,SAAS,6CAATA,SAAS,CAAEqC,OAAO,uDAAlB,mBAAoBD,SAAS;EAC/C,MAAME,0BAA0B,GAAGF,SAAS,GACvC,QAAO1B,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEI,UAAW,EAAC,GACxCJ,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEI,UAAU;EAClC,MAAMyB,yBAAyB,GAAG,IAAAJ,yBAAY,EAACnC,SAAS,EAAE,cAAc,EAAEsC,0BAA0B,CAAC;EAErG,MAAM,CAACE,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAZ,iBAAQ,EAAsB,CAAC,CAAC,CAAC;EACnF,MAAMa,WAAW,GAAG,IAAAC,gBAAO,EAAC,MAAMC,sBAAW,CAACC,SAAS,CAACL,iBAAiB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAEhG;EACA,IAAAM,kBAAS,EAAC,MAAMlB,kBAAkB,CAACH,WAAW,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAC/D,oBACE,+BAAC,iDAA0B;IAAC,WAAW,EAAEe,iBAAkB;IAAC,cAAc,EAAEC;EAAqB,gBAC/F,+BAAC,oCAAS;IAAC,MAAM,EAAEX,eAAgB;IAAC,IAAI,EAAC,KAAK;IAAC,SAAS,EAAEiB,6BAAM,CAACC;EAAiB,gBAChF,+BAAC,+BAAI;IAAC,SAAS,EAAED,6BAAM,CAACd;EAAK,gBAC3B,+BAAC,qCAAmB;IAAC,cAAc,EAAEnC,cAAe;IAAC,SAAS,EAAEiD,6BAAM,CAACE;EAAQ,gBAC7E,+BAAC,2BAAI;IAAC,QAAQ;IAAC,IAAI,EAAEV,yBAA0B;IAAC,SAAS,EAAEQ,6BAAM,CAACG;EAAa,gBAC7E,+BAAC,6BAAY;IAAC,IAAI,EAAC;EAAU,EAAG,CAC3B,CACa,eACtB,+BAAC,kBAAkB;IACjB,UAAU,EAAEnD,UAAW;IACvB,SAAS,EAAEC,SAAU;IACrB,QAAQ,EAAEU,kBAAmB;IAC7B,WAAW,EAAEgC;EAAY,EACzB,CACG,eACP,+BAAC,yCAAa;IAAC,SAAS,EAAEK,6BAAM,CAACI;EAAS,gBACxC,+BAAC,kCAAS;IACR,SAAS,EAAC,MAAM;IAChB,MAAM,EAAExB,aAAc;IACtB,WAAW,EAAGyB,CAAC,IAAKA,CAAC,CAACC,eAAe,EAAG,CAAC;IAAA;IACzC,OAAO,EAAE,MAAMzB,kBAAkB,CAAE0B,CAAC,IAAK,CAACA,CAAC,CAAE;IAC7C,cAAc,EAAG,GAAE3B,aAAa,GAAG,MAAM,GAAG,MAAO,oBAAoB;IACvE,SAAS,EAAEoB,6BAAM,CAACQ;EAAU,EAC5B,CACY,eAChB,+BAAC,+BAAI;IAAC,SAAS,EAAER,6BAAM,CAACS;EAAM,gBAC5B,+BAAC,+BAAY,qBACX,+BAAC,sBAAY;IAAC,SAAS,EAAET,6BAAM,CAACU;EAAc,gBAC5C,+BAAC,iBAAO;IAAC,SAAS,EAAEV,6BAAM,CAACW;EAAK,gBAC9B,+BAAC,aAAG,QAAC,cAAY,CAAM,eACvB,+BAAC,aAAG,QAAC,YAAU,CAAM,CACb,eACV,+BAAC,kBAAQ;IAAC,SAAS,EAAEX,6BAAM,CAACY;EAAW,gBACrC,+BAAC,sCAAiB;IAChB,SAAS,EAAEvB,SAAU;IACrB,mBAAmB,EAAGvB,WAAW,IAAK;MACpC,IAAI,CAACH,kBAAkB,IAAI,CAACH,QAAQ,EAAE;MACtC,IAAIA,QAAQ,CAACqD,QAAQ,CAACC,QAAQ,CAACnD,kBAAkB,CAACI,UAAU,CAACC,WAAW,EAAE,CAAC,EAAE;QAC3EV,QAAQ,CAACQ,WAAW,CAACC,UAAU,CAACC,WAAW,EAAE,CAAC;QAC9C;MACF;MAEA,MAAM+C,IAAI,GAAGvD,QAAQ,CAACqD,QAAQ,CAACG,OAAO,CACpCrD,kBAAkB,CAACI,UAAU,CAACC,WAAW,EAAE,EAC3CF,WAAW,CAACC,UAAU,CAACC,WAAW,EAAE,CACrC;MAED,IAAI,CAAC+C,IAAI,EAAE;MACX,IAAI,CAACA,IAAI,CAACD,QAAQ,CAAChD,WAAW,CAACC,UAAU,CAACC,WAAW,EAAE,CAAC,EAAE;QACxD,MAAMiD,QAAQ,GAAGzD,QAAQ,CAACqD,QAAQ,CAACK,MAAM,CAAE,IAAGpD,WAAW,CAACC,UAAU,CAACC,WAAW,EAAG,EAAC,CAAC;QACrFV,QAAQ,CAAC2D,QAAQ,CAAC;QAClB;MACF;MACA3D,QAAQ,CAACyD,IAAI,CAAC;IAChB,CAAE;IACF,GAAG,EAAE5B,cAAe;IACpB,YAAY,EAAElC,SAAS,CAACW,YAAa;IACrC,MAAM,EAAED,kBAAmB;IAC3B,SAAS,EAAEqC,6BAAM,CAACmB;EAAQ,EAC1B,CACO,eACX,+BAAC,kBAAQ;IAAC,SAAS,EAAEnB,6BAAM,CAACY;EAAW,GACpCvC,UAAU,IAAIA,UAAU,CAACM,MAAM,GAAG,CAAC,gBAAG,+BAAC,yBAAS;IAAC,IAAI,EAAEN,UAAW;IAAC,YAAY;EAAA,EAAG,gBAAG,2CAAO,CACpF,CACE,CACF,CACV,CACG,CACe;AAEjC;AASO,SAAS+C,kBAAkB,OAMN;EAAA;EAAA,IANO;MACjCnE,SAAS;MACToE,QAAQ;MACR1B,WAAW;MACX3C;IAEuB,CAAC;IADrBsE,yBAAyB;EAE5B,MAAMC,GAAG,4BAAGtE,SAAS,CAACuE,WAAW,0DAArB,sBAAuBjD,EAAE;EACrC,MAAMkD,kBAAkB,GAAGzE,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAE0E,GAAG,CAACH,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;;EAEvD,IAAItE,SAAS,CAACW,YAAY,CAACe,MAAM,KAAK,CAAC,IAAI1B,SAAS,CAAC0E,IAAI,KAAK,6BAA6B,IAAIF,kBAAkB,EAAE;IACjH,oBACE;MAAK,SAAS,EAAEzB,6BAAM,CAAC4B;IAAmB,gBACxC,yDACE,+BAAC,mBAAE;MAAC,SAAS,EAAE5B,6BAAM,CAAC6B;IAAM,GAAC,cAAY,CAAK,eAC9C,+BAAC,sBAAS;MAAC,gBAAgB;MAAC,SAAS,EAAE7B,6BAAM,CAAC8B;IAAU,EAAG,eAC3D,+BAAC,sBAAS;MACR,KAAK,EAAC,MAAM;MACZ,KAAK,EAAC;IAC4D,gBAElE,+BAAC,kBAAS,qBACR,+BAAC,kBAAkB,OAAG,CACZ,CACF,CACR,CACF;EAEV;EAEA,IAAI,CAAA7E,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAE8E,WAAW,MAAK,SAAS,IAAI,CAAA9E,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAE0E,IAAI,MAAK,qBAAqB,EACnF,oBACE,+BAAC,qCAAiB;IAAC,SAAS,EAAE3B,6BAAM,CAACgC,kBAAmB;IAAC,MAAM,EAAC,YAAY;IAAC,KAAK,EAAC;EAA2B,GAAC,2BAE/G,CAAoB;EAExB,IAAI,CAAA/E,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAE8E,WAAW,MAAK,QAAQ,IAAI,CAAA9E,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAE0E,IAAI,MAAK,qBAAqB,EAClF,oBACE,+BAAC,qCAAiB;IAChB,SAAS,EAAE3B,6BAAM,CAACgC,kBAAmB;IACrC,MAAM,EAAC,SAAS;IAChB,KAAK,EAAC;EAAkC,EACrB;;EAGzB;EACA,IAAI/E,SAAS,CAACW,YAAY,CAACe,MAAM,KAAK,CAAC,EAAE;IACvC,oBACE,+BAAC,oBAAQ;MACP,KAAK,EAAC,+CAA+C;MACrD,QAAQ,EAAC,kCAAkC;MAC3C,IAAI,EAAG;IAA+E,EACtF;EAEN;EAEA,oBACE,+BAAC,0BAAoB;IACnB,SAAS,EAAEqB,6BAAM,CAACiC;IAClB;IAAA;IACA,QAAQ,EAAE,IAAK;IACf,SAAS,EAAEhF,SAAU;IACrB,WAAW,EAAC,MAAM;IAClB,WAAW,EAAEoE,QAAS;IACtB,iBAAiB;IACjB,MAAM,EAAE,IAAK;IACb,WAAW,EAAE1B;EAAY,GACrB2B,yBAAyB,EAC7B;AAEN"}
|
|
1
|
+
{"version":3,"names":["Compositions","menuBarWidgets","emptyState","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","length","isSidebarOpen","setSidebarOpenness","useState","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","includesEnvTemplates","includesEnvTemplate","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","useEffect","styles","compositionsPage","menuBar","openInNewTab","splitter","e","stopPropagation","x","collapser","right","tabsContainer","tabs","tabContent","pathname","includes","path","replace","nextPath","concat","compost","CompositionContent","selected","componentCompositionProps","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 { 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/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 {...componentCompositionProps}\n />\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.
|
|
2
|
-
import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.
|
|
1
|
+
import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.1068/dist/compositions.composition.js';
|
|
2
|
+
import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.1068/dist/compositions.docs.mdx';
|
|
3
3
|
|
|
4
4
|
export const compositions = [compositions_0];
|
|
5
5
|
export const overview = [overview_0];
|
|
@@ -36,16 +36,17 @@ function _previewUi() {
|
|
|
36
36
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
37
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
38
38
|
function ComponentComposition(_ref) {
|
|
39
|
+
var _component$preview, _component$preview2;
|
|
39
40
|
let {
|
|
40
41
|
composition,
|
|
41
42
|
component,
|
|
42
43
|
queryParams = []
|
|
43
44
|
} = _ref,
|
|
44
45
|
rest = (0, _objectWithoutProperties2().default)(_ref, ["composition", "component", "queryParams"]);
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}, [composition === null || composition === void 0 ? void 0 : composition.identifier, queryParams]);
|
|
46
|
+
const includesEnvTemplate = (_component$preview = component.preview) === null || _component$preview === void 0 ? void 0 : _component$preview.includesEnvTemplate;
|
|
47
|
+
const isScaling = (_component$preview2 = component.preview) === null || _component$preview2 === void 0 ? void 0 : _component$preview2.isScaling;
|
|
48
|
+
const shouldAddNameParam = isScaling && includesEnvTemplate === false;
|
|
49
|
+
const compositionParams = (0, _react().useMemo)(() => (composition ? [shouldAddNameParam ? `name=${composition.identifier}` : composition.identifier] : []).concat(queryParams), [composition === null || composition === void 0 ? void 0 : composition.identifier, queryParams]);
|
|
49
50
|
return /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, (0, _extends2().default)({}, rest, {
|
|
50
51
|
component: component,
|
|
51
52
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ComponentComposition","composition","component","queryParams","rest","
|
|
1
|
+
{"version":3,"names":["ComponentComposition","composition","component","queryParams","rest","includesEnvTemplate","preview","isScaling","shouldAddNameParam","compositionParams","useMemo","identifier","concat","width","height"],"sources":["composition-preview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';\n\nimport { Composition } from '../composition';\n\nexport type ComponentCompositionProps = {\n /**\n * composition to use for component rendering.\n */\n composition?: Composition;\n} & ComponentPreviewProps;\n\nexport function ComponentComposition({ composition, component, queryParams = [], ...rest }: ComponentCompositionProps) {\n const includesEnvTemplate = component.preview?.includesEnvTemplate;\n const isScaling = component.preview?.isScaling;\n const shouldAddNameParam = isScaling && includesEnvTemplate === false;\n\n const compositionParams = useMemo(\n () =>\n (composition ? [shouldAddNameParam ? `name=${composition.identifier}` : composition.identifier] : []).concat(\n queryParams\n ),\n [composition?.identifier, queryParams]\n );\n\n return (\n <ComponentPreview\n {...rest}\n component={component}\n style={{ width: '100%', height: '100%' }}\n previewName=\"compositions\"\n queryParams={compositionParams}\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAgG;AAAA;AAWzF,SAASA,oBAAoB,OAAmF;EAAA;EAAA,IAAlF;MAAEC,WAAW;MAAEC,SAAS;MAAEC,WAAW,GAAG;IAAuC,CAAC;IAAjCC,IAAI;EACtF,MAAMC,mBAAmB,yBAAGH,SAAS,CAACI,OAAO,uDAAjB,mBAAmBD,mBAAmB;EAClE,MAAME,SAAS,0BAAGL,SAAS,CAACI,OAAO,wDAAjB,oBAAmBC,SAAS;EAC9C,MAAMC,kBAAkB,GAAGD,SAAS,IAAIF,mBAAmB,KAAK,KAAK;EAErE,MAAMI,iBAAiB,GAAG,IAAAC,gBAAO,EAC/B,MACE,CAACT,WAAW,GAAG,CAACO,kBAAkB,GAAI,QAAOP,WAAW,CAACU,UAAW,EAAC,GAAGV,WAAW,CAACU,UAAU,CAAC,GAAG,EAAE,EAAEC,MAAM,CAC1GT,WAAW,CACZ,EACH,CAACF,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEU,UAAU,EAAER,WAAW,CAAC,CACvC;EAED,oBACE,+BAAC,6BAAgB,+BACXC,IAAI;IACR,SAAS,EAAEF,SAAU;IACrB,KAAK,EAAE;MAAEW,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE;IAAO,CAAE;IACzC,WAAW,EAAC,cAAc;IAC1B,WAAW,EAAEL;EAAkB,GAC/B;AAEN"}
|
|
@@ -21,5 +21,6 @@ export declare type CompositionsPanelProps = {
|
|
|
21
21
|
* checks if a component is using the new preview api. if false, doesnt scale to support new preview
|
|
22
22
|
*/
|
|
23
23
|
isScaling?: boolean;
|
|
24
|
+
includesEnvTemplate?: boolean;
|
|
24
25
|
} & React.HTMLAttributes<HTMLUListElement>;
|
|
25
|
-
export declare function CompositionsPanel({ url, compositions, isScaling, onSelectComposition: onSelect, active, className, ...rest }: CompositionsPanelProps): JSX.Element;
|
|
26
|
+
export declare function CompositionsPanel({ url, compositions, isScaling, onSelectComposition: onSelect, active, includesEnvTemplate, className, ...rest }: CompositionsPanelProps): JSX.Element;
|
|
@@ -56,16 +56,18 @@ function CompositionsPanel(_ref) {
|
|
|
56
56
|
isScaling,
|
|
57
57
|
onSelectComposition: onSelect,
|
|
58
58
|
active,
|
|
59
|
+
includesEnvTemplate,
|
|
59
60
|
className
|
|
60
61
|
} = _ref,
|
|
61
|
-
rest = (0, _objectWithoutProperties2().default)(_ref, ["url", "compositions", "isScaling", "onSelectComposition", "active", "className"]);
|
|
62
|
+
rest = (0, _objectWithoutProperties2().default)(_ref, ["url", "compositions", "isScaling", "onSelectComposition", "active", "includesEnvTemplate", "className"]);
|
|
63
|
+
const shouldAddNameParam = isScaling && includesEnvTemplate === false;
|
|
62
64
|
const handleSelect = (0, _react().useCallback)(selected => {
|
|
63
65
|
onSelect && onSelect(selected);
|
|
64
66
|
}, [onSelect]);
|
|
65
67
|
return /*#__PURE__*/_react().default.createElement("ul", (0, _extends2().default)({}, rest, {
|
|
66
68
|
className: (0, _classnames().default)(className)
|
|
67
69
|
}), compositions.map(composition => {
|
|
68
|
-
const href =
|
|
70
|
+
const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;
|
|
69
71
|
|
|
70
72
|
// TODO - move to composition panel node
|
|
71
73
|
return /*#__PURE__*/_react().default.createElement("li", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 const href =
|
|
1
|
+
{"version":3,"names":["CompositionsPanel","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","className","rest","shouldAddNameParam","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\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":";;;;;;;;;;;;;;;;;;;;;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;AAAsD;AAAA;AA2B/C,SAASA,iBAAiB,OASN;EAAA,IATO;MAChCC,GAAG;MACHC,YAAY;MACZC,SAAS;MACTC,mBAAmB,EAAEC,QAAQ;MAC7BC,MAAM;MACNC,mBAAmB;MACnBC;IAEsB,CAAC;IADpBC,IAAI;EAEP,MAAMC,kBAAkB,GAAGP,SAAS,IAAII,mBAAmB,KAAK,KAAK;EAErE,MAAMI,YAAY,GAAG,IAAAC,oBAAW,EAC7BC,QAAqB,IAAK;IACzBR,QAAQ,IAAIA,QAAQ,CAACQ,QAAQ,CAAC;EAChC,CAAC,EACD,CAACR,QAAQ,CAAC,CACX;EAED,oBACE,kEAAQI,IAAI;IAAE,SAAS,EAAE,IAAAK,qBAAU,EAACN,SAAS;EAAE,IAC5CN,YAAY,CAACa,GAAG,CAAEC,WAAW,IAAK;IACjC,MAAMC,IAAI,GAAGP,kBAAkB,GAAI,GAAET,GAAI,SAAQe,WAAW,CAACE,UAAW,EAAC,GAAI,GAAEjB,GAAI,IAAGe,WAAW,CAACE,UAAW,EAAC;;IAE9G;IACA,oBACE;MACE,GAAG,EAAEF,WAAW,CAACE,UAAW;MAC5B,SAAS,EAAE,IAAAJ,qBAAU,EAACK,kCAAM,CAACC,WAAW,EAAEJ,WAAW,KAAKV,MAAM,IAAIa,kCAAM,CAACb,MAAM;IAAE,gBAEnF;MAAG,SAAS,EAAEa,kCAAM,CAACE,SAAU;MAAC,OAAO,EAAE,MAAMV,YAAY,CAACK,WAAW;IAAE,gBACvE;MAAM,SAAS,EAAEG,kCAAM,CAACG;IAAI,EAAQ,eACpC;MAAM,SAAS,EAAEH,kCAAM,CAACI;IAAK,GAAEP,WAAW,CAACQ,WAAW,CAAQ,CAC5D,eACJ;MAAK,SAAS,EAAEL,kCAAM,CAACM;IAAM,gBAC3B;MAAG,SAAS,EAAEN,kCAAM,CAACE,SAAU;MAAC,MAAM,EAAC,QAAQ;MAAC,GAAG,EAAC,qBAAqB;MAAC,IAAI,EAAEJ;IAAK,gBACnF,+BAAC,0BAAI;MAAC,SAAS,EAAEE,kCAAM,CAACO,IAAK;MAAC,EAAE,EAAC;IAAU,EAAG,CAC5C,CACA,CACH;EAET,CAAC,CAAC,CACC;AAET"}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/compositions",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.1068",
|
|
4
4
|
"homepage": "https://bit.cloud/teambit/compositions/compositions",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "teambit.compositions",
|
|
8
8
|
"name": "compositions",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.1068"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"graphql-tag": "2.12.1",
|
|
@@ -30,29 +30,29 @@
|
|
|
30
30
|
"@teambit/documenter.ui.heading": "4.1.1",
|
|
31
31
|
"@teambit/documenter.ui.property-table": "4.1.3",
|
|
32
32
|
"@teambit/evangelist.elements.icon": "1.0.2",
|
|
33
|
-
"@teambit/component": "0.0.
|
|
33
|
+
"@teambit/component": "0.0.1068",
|
|
34
34
|
"@teambit/compositions.model.composition-id": "0.0.496",
|
|
35
|
-
"@teambit/graphql": "0.0.
|
|
36
|
-
"@teambit/cli": "0.0.
|
|
37
|
-
"@teambit/dev-files": "0.0.
|
|
38
|
-
"@teambit/envs": "0.0.
|
|
39
|
-
"@teambit/preview": "0.0.
|
|
40
|
-
"@teambit/schema": "0.0.
|
|
35
|
+
"@teambit/graphql": "0.0.1068",
|
|
36
|
+
"@teambit/cli": "0.0.721",
|
|
37
|
+
"@teambit/dev-files": "0.0.1068",
|
|
38
|
+
"@teambit/envs": "0.0.1068",
|
|
39
|
+
"@teambit/preview": "0.0.1068",
|
|
40
|
+
"@teambit/schema": "0.0.1068",
|
|
41
41
|
"@teambit/toolbox.path.match-patterns": "0.0.9",
|
|
42
|
-
"@teambit/workspace": "0.0.
|
|
42
|
+
"@teambit/workspace": "0.0.1068",
|
|
43
43
|
"@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498",
|
|
44
44
|
"@teambit/compositions.ui.compositions-menu-bar": "0.0.172",
|
|
45
45
|
"@teambit/compositions.ui.hooks.use-composition": "0.0.172",
|
|
46
46
|
"@teambit/docs.ui.queries.get-docs": "0.0.498",
|
|
47
47
|
"@teambit/mdx.ui.mdx-layout": "0.0.515",
|
|
48
|
-
"@teambit/panels": "0.0.
|
|
48
|
+
"@teambit/panels": "0.0.722",
|
|
49
49
|
"@teambit/preview.ui.component-preview": "0.0.519",
|
|
50
50
|
"@teambit/ui-foundation.ui.buttons.collapser": "0.0.206",
|
|
51
51
|
"@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.188",
|
|
52
|
-
"@teambit/component-compare": "0.0.
|
|
53
|
-
"@teambit/compositions.ui.composition-compare-section": "0.0.
|
|
54
|
-
"@teambit/compositions.ui.composition-compare": "0.0.
|
|
55
|
-
"@teambit/ui": "0.0.
|
|
52
|
+
"@teambit/component-compare": "0.0.316",
|
|
53
|
+
"@teambit/compositions.ui.composition-compare-section": "0.0.28",
|
|
54
|
+
"@teambit/compositions.ui.composition-compare": "0.0.183",
|
|
55
|
+
"@teambit/ui": "0.0.1068"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@types/react": "^17.0.8",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"react-router-dom": "^6.0.0",
|
|
71
|
-
"@teambit/legacy": "1.0.
|
|
71
|
+
"@teambit/legacy": "1.0.501",
|
|
72
72
|
"react": "^16.8.0 || ^17.0.0",
|
|
73
73
|
"react-dom": "^16.8.0 || ^17.0.0"
|
|
74
74
|
},
|
|
@@ -11,12 +11,15 @@ export type ComponentCompositionProps = {
|
|
|
11
11
|
} & ComponentPreviewProps;
|
|
12
12
|
|
|
13
13
|
export function ComponentComposition({ composition, component, queryParams = [], ...rest }: ComponentCompositionProps) {
|
|
14
|
+
const includesEnvTemplate = component.preview?.includesEnvTemplate;
|
|
15
|
+
const isScaling = component.preview?.isScaling;
|
|
16
|
+
const shouldAddNameParam = isScaling && includesEnvTemplate === false;
|
|
17
|
+
|
|
14
18
|
const compositionParams = useMemo(
|
|
15
19
|
() =>
|
|
16
|
-
(composition
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
).concat(queryParams),
|
|
20
|
+
(composition ? [shouldAddNameParam ? `name=${composition.identifier}` : composition.identifier] : []).concat(
|
|
21
|
+
queryParams
|
|
22
|
+
),
|
|
20
23
|
[composition?.identifier, queryParams]
|
|
21
24
|
);
|
|
22
25
|
|
|
@@ -26,6 +26,8 @@ export type CompositionsPanelProps = {
|
|
|
26
26
|
* checks if a component is using the new preview api. if false, doesnt scale to support new preview
|
|
27
27
|
*/
|
|
28
28
|
isScaling?: boolean;
|
|
29
|
+
|
|
30
|
+
includesEnvTemplate?: boolean;
|
|
29
31
|
} & React.HTMLAttributes<HTMLUListElement>;
|
|
30
32
|
|
|
31
33
|
export function CompositionsPanel({
|
|
@@ -34,9 +36,12 @@ export function CompositionsPanel({
|
|
|
34
36
|
isScaling,
|
|
35
37
|
onSelectComposition: onSelect,
|
|
36
38
|
active,
|
|
39
|
+
includesEnvTemplate,
|
|
37
40
|
className,
|
|
38
41
|
...rest
|
|
39
42
|
}: CompositionsPanelProps) {
|
|
43
|
+
const shouldAddNameParam = isScaling && includesEnvTemplate === false;
|
|
44
|
+
|
|
40
45
|
const handleSelect = useCallback(
|
|
41
46
|
(selected: Composition) => {
|
|
42
47
|
onSelect && onSelect(selected);
|
|
@@ -47,7 +52,7 @@ export function CompositionsPanel({
|
|
|
47
52
|
return (
|
|
48
53
|
<ul {...rest} className={classNames(className)}>
|
|
49
54
|
{compositions.map((composition) => {
|
|
50
|
-
const href =
|
|
55
|
+
const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;
|
|
51
56
|
|
|
52
57
|
// TODO - move to composition panel node
|
|
53
58
|
return (
|
|
Binary file
|