@teambit/compositions 0.0.876 → 0.0.878
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 +1 -1
- package/dist/composition.js.map +1 -1
- package/dist/compositions.js.map +1 -1
- package/dist/compositions.preview-definition.js.map +1 -1
- package/dist/ui/composition-preview.js.map +1 -1
- package/dist/ui/compositions-panel/compositions-panel.js.map +1 -1
- package/package-tar/teambit-compositions-0.0.878.tgz +0 -0
- package/package.json +23 -23
- package/{preview-1665459720186.js → preview-1665718844698.js} +2 -2
- package/ui/composition-preview.tsx +5 -1
- package/ui/compositions-panel/compositions-panel.tsx +1 -7
- package/package-tar/teambit-compositions-0.0.876.tgz +0 -0
package/compositions.tsx
CHANGED
|
@@ -56,7 +56,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
|
|
|
56
56
|
|
|
57
57
|
const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
|
|
58
58
|
|
|
59
|
-
const compositionUrl = toPreviewUrl(component, 'compositions');
|
|
59
|
+
const compositionUrl = toPreviewUrl(component, 'compositions');
|
|
60
60
|
const isScaling = component?.preview?.isScaling;
|
|
61
61
|
const compositionIdentifierParam = isScaling ? `name=${selected?.identifier}` : selected?.identifier;
|
|
62
62
|
const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);
|
package/dist/composition.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Composition","constructor","identifier","filepath","_displayName","displayName","humanizeCompositionId","toObject","toBrowserMetaDataObject","fromArray","compositions","map","composition"],"sources":["composition.ts"],"sourcesContent":["import { humanizeCompositionId } from '@teambit/compositions.model.composition-id';\n\nexport type CompositionProps = {\n identifier: string;\n filepath?: string;\n displayName?: string;\n};\n\nexport type CompositionBrowserMetadata = {\n displayName?: string;\n identifier: string;\n}
|
|
1
|
+
{"version":3,"names":["Composition","constructor","identifier","filepath","_displayName","displayName","humanizeCompositionId","toObject","toBrowserMetaDataObject","fromArray","compositions","map","composition"],"sources":["composition.ts"],"sourcesContent":["import { humanizeCompositionId } from '@teambit/compositions.model.composition-id';\n\nexport type CompositionProps = {\n identifier: string;\n filepath?: string;\n displayName?: string;\n};\n\nexport type CompositionBrowserMetadata = {\n displayName?: string;\n identifier: string;\n};\n\nexport type CompositionBrowserMetadataObject = {\n compositions: CompositionBrowserMetadata[];\n};\n\nexport class Composition {\n constructor(\n /**\n * identifier of the composition\n */\n readonly identifier: string,\n\n /**\n * file path in which the composition is contained.\n */\n readonly filepath?: string,\n\n /**\n * set explicit display name\n */\n private _displayName?: string\n ) {}\n\n get displayName() {\n return this._displayName || humanizeCompositionId(this.identifier);\n }\n\n toObject() {\n return {\n identifier: this.identifier,\n filepath: this.filepath,\n displayName: this._displayName,\n };\n }\n\n toBrowserMetaDataObject(): CompositionBrowserMetadata {\n return {\n identifier: this.identifier,\n displayName: this._displayName,\n };\n }\n\n static fromArray(compositions: CompositionProps[]): Composition[] {\n return compositions.map((composition) => {\n return new Composition(composition.identifier, composition.filepath, composition.displayName);\n });\n }\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAiBO,MAAMA,WAAN,CAAkB;EACvBC,WAAW;EACT;AACJ;AACA;EACaC,UAJA;EAMT;AACJ;AACA;EACaC,QATA;EAWT;AACJ;AACA;EACYC,YAdC,EAeT;IAAA,KAXSF,UAWT,GAXSA,UAWT;IAAA,KANSC,QAMT,GANSA,QAMT;IAAA,KADQC,YACR,GADQA,YACR;EAAE;;EAEW,IAAXC,WAAW,GAAG;IAChB,OAAO,KAAKD,YAAL,IAAqB,IAAAE,0CAAA,EAAsB,KAAKJ,UAA3B,CAA5B;EACD;;EAEDK,QAAQ,GAAG;IACT,OAAO;MACLL,UAAU,EAAE,KAAKA,UADZ;MAELC,QAAQ,EAAE,KAAKA,QAFV;MAGLE,WAAW,EAAE,KAAKD;IAHb,CAAP;EAKD;;EAEDI,uBAAuB,GAA+B;IACpD,OAAO;MACLN,UAAU,EAAE,KAAKA,UADZ;MAELG,WAAW,EAAE,KAAKD;IAFb,CAAP;EAID;;EAEe,OAATK,SAAS,CAACC,YAAD,EAAkD;IAChE,OAAOA,YAAY,CAACC,GAAb,CAAkBC,WAAD,IAAiB;MACvC,OAAO,IAAIZ,WAAJ,CAAgBY,WAAW,CAACV,UAA5B,EAAwCU,WAAW,CAACT,QAApD,EAA8DS,WAAW,CAACP,WAA1E,CAAP;IACD,CAFM,CAAP;EAGD;;AAzCsB"}
|
package/dist/compositions.js.map
CHANGED
|
@@ -1 +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","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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"}
|
|
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","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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["CompositionPreviewDefinition","constructor","compositions","renderTemplatePath","context","renderTemplatePathByEnv","env","getMounter","getModuleMap","components","map","getPreviewFiles","getMetadata","component","getCompositions","composition","displayName","identifier"],"sources":["compositions.preview-definition.ts"],"sourcesContent":["import { Component, ComponentMap } from '@teambit/component';\nimport type { ExecutionContext, Environment } from '@teambit/envs';\nimport { PreviewDefinition } from '@teambit/preview';\nimport { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';\n\nimport { CompositionsMain } from './compositions.main.runtime';\nimport { CompositionBrowserMetadataObject } from './composition';\n\
|
|
1
|
+
{"version":3,"names":["CompositionPreviewDefinition","constructor","compositions","renderTemplatePath","context","renderTemplatePathByEnv","env","getMounter","getModuleMap","components","map","getPreviewFiles","getMetadata","component","getCompositions","composition","displayName","identifier"],"sources":["compositions.preview-definition.ts"],"sourcesContent":["import { Component, ComponentMap } from '@teambit/component';\nimport type { ExecutionContext, Environment } from '@teambit/envs';\nimport { PreviewDefinition } from '@teambit/preview';\nimport { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';\n\nimport { CompositionsMain } from './compositions.main.runtime';\nimport { CompositionBrowserMetadataObject } from './composition';\n\nexport class CompositionPreviewDefinition implements PreviewDefinition {\n readonly prefix = 'compositions';\n readonly includePeers = true;\n\n constructor(private compositions: CompositionsMain) {}\n\n async renderTemplatePath(context: ExecutionContext): Promise<string> {\n return this.renderTemplatePathByEnv(context.env);\n }\n\n async renderTemplatePathByEnv(env: Environment) {\n return env.getMounter();\n }\n\n async getModuleMap(components: Component[]): Promise<ComponentMap<AbstractVinyl[]>> {\n const map = this.compositions.getPreviewFiles(components);\n return map;\n }\n\n async getMetadata(component: Component): Promise<CompositionBrowserMetadataObject> {\n const compositions = this.compositions\n .getCompositions(component)\n .map((composition) => ({ displayName: composition.displayName, identifier: composition.identifier }));\n return {\n compositions,\n };\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQO,MAAMA,4BAAN,CAAgE;EAIrEC,WAAW,CAASC,YAAT,EAAyC;IAAA,KAAhCA,YAAgC,GAAhCA,YAAgC;IAAA,gDAHlC,cAGkC;IAAA,sDAF5B,IAE4B;EAAE;;EAE9B,MAAlBC,kBAAkB,CAACC,OAAD,EAA6C;IACnE,OAAO,KAAKC,uBAAL,CAA6BD,OAAO,CAACE,GAArC,CAAP;EACD;;EAE4B,MAAvBD,uBAAuB,CAACC,GAAD,EAAmB;IAC9C,OAAOA,GAAG,CAACC,UAAJ,EAAP;EACD;;EAEiB,MAAZC,YAAY,CAACC,UAAD,EAAkE;IAClF,MAAMC,GAAG,GAAG,KAAKR,YAAL,CAAkBS,eAAlB,CAAkCF,UAAlC,CAAZ;IACA,OAAOC,GAAP;EACD;;EAEgB,MAAXE,WAAW,CAACC,SAAD,EAAkE;IACjF,MAAMX,YAAY,GAAG,KAAKA,YAAL,CAClBY,eADkB,CACFD,SADE,EAElBH,GAFkB,CAEbK,WAAD,KAAkB;MAAEC,WAAW,EAAED,WAAW,CAACC,WAA3B;MAAwCC,UAAU,EAAEF,WAAW,CAACE;IAAhE,CAAlB,CAFc,CAArB;IAGA,OAAO;MACLf;IADK,CAAP;EAGD;;AA1BoE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ComponentComposition","composition","component","queryParams","rest","compositionParams","useMemo","preview","isScaling","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 compositionParams = useMemo(\n ()
|
|
1
|
+
{"version":3,"names":["ComponentComposition","composition","component","queryParams","rest","compositionParams","useMemo","preview","isScaling","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 compositionParams = useMemo(\n () =>\n (composition\n ? [component.preview?.isScaling ? `name=${composition.identifier}` : composition.identifier]\n : []\n ).concat(queryParams),\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;;;;;;AAWO,SAASA,oBAAT,OAAgH;EAAA,IAAlF;IAAEC,WAAF;IAAeC,SAAf;IAA0BC,WAAW,GAAG;EAAxC,CAAkF;EAAA,IAAnCC,IAAmC;EACrH,MAAMC,iBAAiB,GAAG,IAAAC,gBAAA,EACxB;IAAA;;IAAA,OACE,CAACL,WAAW,GACR,CAAC,sBAAAC,SAAS,CAACK,OAAV,kEAAmBC,SAAnB,GAAgC,QAAOP,WAAW,CAACQ,UAAW,EAA9D,GAAkER,WAAW,CAACQ,UAA/E,CADQ,GAER,EAFJ,EAGEC,MAHF,CAGSP,WAHT,CADF;EAAA,CADwB,EAMxB,CAACF,WAAD,aAACA,WAAD,uBAACA,WAAW,CAAEQ,UAAd,EAA0BN,WAA1B,CANwB,CAA1B;EASA,oBACE,+BAAC,6BAAD,+BACMC,IADN;IAEE,SAAS,EAAEF,SAFb;IAGE,KAAK,EAAE;MAAES,KAAK,EAAE,MAAT;MAAiBC,MAAM,EAAE;IAAzB,CAHT;IAIE,WAAW,EAAC,cAJd;IAKE,WAAW,EAAEP;EALf,GADF;AASD"}
|
|
@@ -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
|
|
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 = 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 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;;;;;;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;IACjC,MAAMC,IAAI,GAAGZ,SAAS,GAAI,GAAEF,GAAI,SAAQa,WAAW,CAACE,UAAW,EAAzC,GAA8C,GAAEf,GAAI,IAAGa,WAAW,CAACE,UAAW,EAApG,CADiC,CAGjC;;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;MAAG,SAAS,EAAEN,kCAAA,CAAOE,SAArB;MAAgC,MAAM,EAAC,QAAvC;MAAgD,GAAG,EAAC,qBAApD;MAA0E,IAAI,EAAEJ;IAAhF,gBACE,+BAAC,0BAAD;MAAM,SAAS,EAAEE,kCAAA,CAAOO,IAAxB;MAA8B,EAAE,EAAC;IAAjC,EADF,CADF,CARF,CADF;EAgBD,CApBA,CADH,CADF;AAyBD"}
|
|
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.878",
|
|
4
4
|
"homepage": "https://bit.dev/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.878"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"graphql-tag": "2.12.1",
|
|
@@ -25,34 +25,34 @@
|
|
|
25
25
|
"@teambit/documenter.ui.heading": "4.1.1",
|
|
26
26
|
"@teambit/documenter.ui.property-table": "4.1.3",
|
|
27
27
|
"@teambit/evangelist.elements.icon": "1.0.2",
|
|
28
|
-
"@teambit/component": "0.0.
|
|
29
|
-
"@teambit/compositions.ui.composition-compare": "0.0.
|
|
30
|
-
"@teambit/compositions.model.composition-id": "0.0.
|
|
31
|
-
"@teambit/graphql": "0.0.
|
|
32
|
-
"@teambit/cli": "0.0.
|
|
33
|
-
"@teambit/dev-files": "0.0.
|
|
34
|
-
"@teambit/envs": "0.0.
|
|
35
|
-
"@teambit/preview": "0.0.
|
|
36
|
-
"@teambit/schema": "0.0.
|
|
28
|
+
"@teambit/component": "0.0.878",
|
|
29
|
+
"@teambit/compositions.ui.composition-compare": "0.0.102",
|
|
30
|
+
"@teambit/compositions.model.composition-id": "0.0.495",
|
|
31
|
+
"@teambit/graphql": "0.0.878",
|
|
32
|
+
"@teambit/cli": "0.0.588",
|
|
33
|
+
"@teambit/dev-files": "0.0.878",
|
|
34
|
+
"@teambit/envs": "0.0.878",
|
|
35
|
+
"@teambit/preview": "0.0.878",
|
|
36
|
+
"@teambit/schema": "0.0.878",
|
|
37
37
|
"@teambit/toolbox.path.match-patterns": "0.0.7",
|
|
38
|
-
"@teambit/workspace": "0.0.
|
|
38
|
+
"@teambit/workspace": "0.0.878",
|
|
39
39
|
"@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494",
|
|
40
|
-
"@teambit/component-id": "0.0.
|
|
40
|
+
"@teambit/component-id": "0.0.418",
|
|
41
41
|
"@teambit/compositions.ui.compositions-menu-bar": "0.0.169",
|
|
42
42
|
"@teambit/compositions.ui.hooks.use-composition": "0.0.169",
|
|
43
43
|
"@teambit/design.ui.alert-card": "0.0.23",
|
|
44
44
|
"@teambit/design.ui.empty-box": "0.0.360",
|
|
45
45
|
"@teambit/design.ui.surfaces.status-message-card": "0.0.14",
|
|
46
46
|
"@teambit/docs.ui.queries.get-docs": "0.0.495",
|
|
47
|
-
"@teambit/mdx.ui.mdx-layout": "0.0.
|
|
48
|
-
"@teambit/panels": "0.0.
|
|
49
|
-
"@teambit/preview.ui.component-preview": "0.0.
|
|
50
|
-
"@teambit/ui-foundation.ui.buttons.collapser": "0.0.
|
|
47
|
+
"@teambit/mdx.ui.mdx-layout": "0.0.508",
|
|
48
|
+
"@teambit/panels": "0.0.589",
|
|
49
|
+
"@teambit/preview.ui.component-preview": "0.0.505",
|
|
50
|
+
"@teambit/ui-foundation.ui.buttons.collapser": "0.0.202",
|
|
51
51
|
"@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.185",
|
|
52
|
-
"@teambit/component-compare": "0.0.
|
|
53
|
-
"@teambit/ui": "0.0.
|
|
54
|
-
"@teambit/compositions.model.composition-type": "0.0.
|
|
55
|
-
"@teambit/compositions.ui.composition-card": "0.0.
|
|
52
|
+
"@teambit/component-compare": "0.0.126",
|
|
53
|
+
"@teambit/ui": "0.0.878",
|
|
54
|
+
"@teambit/compositions.model.composition-type": "0.0.496",
|
|
55
|
+
"@teambit/compositions.ui.composition-card": "0.0.503"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@types/react": "^17.0.8",
|
|
@@ -63,10 +63,10 @@
|
|
|
63
63
|
"@types/jest": "^26.0.0",
|
|
64
64
|
"@types/react-dom": "^17.0.5",
|
|
65
65
|
"@types/node": "12.20.4",
|
|
66
|
-
"@teambit/compositions.aspect-docs.compositions": "0.0.
|
|
66
|
+
"@teambit/compositions.aspect-docs.compositions": "0.0.146"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
|
-
"@teambit/legacy": "1.0.
|
|
69
|
+
"@teambit/legacy": "1.0.369",
|
|
70
70
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
71
71
|
"react": "^16.8.0 || ^17.0.0"
|
|
72
72
|
},
|
|
@@ -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.878/dist/compositions.composition.js';
|
|
2
|
+
import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compositions_compositions@0.0.878/dist/compositions.docs.mdx';
|
|
3
3
|
|
|
4
4
|
export const compositions = [compositions_0];
|
|
5
5
|
export const overview = [overview_0];
|
|
@@ -12,7 +12,11 @@ export type ComponentCompositionProps = {
|
|
|
12
12
|
|
|
13
13
|
export function ComponentComposition({ composition, component, queryParams = [], ...rest }: ComponentCompositionProps) {
|
|
14
14
|
const compositionParams = useMemo(
|
|
15
|
-
() =>
|
|
15
|
+
() =>
|
|
16
|
+
(composition
|
|
17
|
+
? [component.preview?.isScaling ? `name=${composition.identifier}` : composition.identifier]
|
|
18
|
+
: []
|
|
19
|
+
).concat(queryParams),
|
|
16
20
|
[composition?.identifier, queryParams]
|
|
17
21
|
);
|
|
18
22
|
|
|
@@ -47,7 +47,6 @@ export function CompositionsPanel({
|
|
|
47
47
|
return (
|
|
48
48
|
<ul {...rest} className={classNames(className)}>
|
|
49
49
|
{compositions.map((composition) => {
|
|
50
|
-
|
|
51
50
|
const href = isScaling ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;
|
|
52
51
|
|
|
53
52
|
// TODO - move to composition panel node
|
|
@@ -61,12 +60,7 @@ export function CompositionsPanel({
|
|
|
61
60
|
<span className={styles.name}>{composition.displayName}</span>
|
|
62
61
|
</a>
|
|
63
62
|
<div className={styles.right}>
|
|
64
|
-
<a
|
|
65
|
-
className={styles.panelLink}
|
|
66
|
-
target="_blank"
|
|
67
|
-
rel="noopener noreferrer"
|
|
68
|
-
href={href}
|
|
69
|
-
>
|
|
63
|
+
<a className={styles.panelLink} target="_blank" rel="noopener noreferrer" href={href}>
|
|
70
64
|
<Icon className={styles.icon} of="open-tab" />
|
|
71
65
|
</a>
|
|
72
66
|
</div>
|
|
Binary file
|