@teambit/compositions 0.0.555 → 0.0.559

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.555",
+  "version": "0.0.559",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.555"
+    "version": "0.0.559"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -23,32 +23,32 @@
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.property-table": "4.1.3",
     "@teambit/evangelist.elements.icon": "1.0.2",
-    "@teambit/component": "0.0.555",
-    "@teambit/compositions.model.composition-id": "0.0.463",
-    "@teambit/graphql": "0.0.555",
-    "@teambit/cli": "0.0.386",
-    "@teambit/dev-files": "0.0.555",
-    "@teambit/preview": "0.0.555",
-    "@teambit/schema": "0.0.555",
-    "@teambit/workspace": "0.0.555",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.463",
-    "@teambit/envs": "0.0.555",
-    "@teambit/compositions.ui.compositions-menu-bar": "0.0.140",
-    "@teambit/compositions.ui.hooks.use-composition": "0.0.140",
+    "@teambit/component": "0.0.559",
+    "@teambit/compositions.model.composition-id": "0.0.466",
+    "@teambit/graphql": "0.0.559",
+    "@teambit/cli": "0.0.389",
+    "@teambit/dev-files": "0.0.559",
+    "@teambit/preview": "0.0.559",
+    "@teambit/schema": "0.0.559",
+    "@teambit/workspace": "0.0.559",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.466",
+    "@teambit/envs": "0.0.559",
+    "@teambit/compositions.ui.compositions-menu-bar": "0.0.143",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.143",
     "@teambit/design.ui.alert-card": "0.0.13",
     "@teambit/design.ui.empty-box": "0.0.352",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.separator": "0.0.351",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.6",
-    "@teambit/docs.ui.queries.get-docs": "0.0.463",
-    "@teambit/mdx.ui.mdx-layout": "0.0.467",
-    "@teambit/panels": "0.0.386",
-    "@teambit/preview.ui.component-preview": "0.0.463",
-    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.168",
-    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.156",
-    "@teambit/ui": "0.0.555",
-    "@teambit/compositions.model.composition-type": "0.0.464",
-    "@teambit/compositions.ui.composition-card": "0.0.469"
+    "@teambit/docs.ui.queries.get-docs": "0.0.466",
+    "@teambit/mdx.ui.mdx-layout": "0.0.470",
+    "@teambit/panels": "0.0.389",
+    "@teambit/preview.ui.component-preview": "0.0.466",
+    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.171",
+    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.159",
+    "@teambit/ui": "0.0.559",
+    "@teambit/compositions.model.composition-type": "0.0.467",
+    "@teambit/compositions.ui.composition-card": "0.0.472"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -59,10 +59,10 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/compositions.aspect-docs.compositions": "0.0.105"
+    "@teambit/compositions.aspect-docs.compositions": "0.0.108"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.172",
+    "@teambit/legacy": "1.0.175",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -90,12 +90,27 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.172",
+        "@teambit/legacy": "1.0.175",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "**/*.md",
+    "**/*.mdx",
+    "**/*.js",
+    "**/*.json",
+    "**/*.sass",
+    "**/*.scss",
+    "**/*.less",
+    "**/*.css",
+    "**/*.css",
+    "**/*.jpeg",
+    "**/*.gif"
+  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/tsconfig.json

@@ -15,9 +15,9 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "outDir": "dist",
     "composite": true,
     "emitDeclarationOnly": true,
+    "outDir": "dist",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "allowSyntheticDefaultImports": true,

package/composition.section.tsx

@@ -1,29 +0,0 @@
-import { Section } from '@teambit/component';
-import React from 'react';
-import { Compositions } from './compositions';
-import type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';
-
-type Options = { menuBarWidgetSlot: CompositionsMenuSlot };
-
-export class CompositionsSection implements Section {
-  constructor(
-    /**
-     * simulations ui extension.
-     */
-    private compositions: CompositionsUI,
-    private options: Options,
-    private emptyStateSlot: EmptyStateSlot
-  ) {}
-
-  navigationLink = {
-    href: '~compositions',
-    children: 'Compositions',
-  };
-
-  route = {
-    path: '~compositions',
-    children: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,
-  };
-
-  order = 20;
-}

package/composition.ts

@@ -1,44 +0,0 @@
-import { humanizeCompositionId } from '@teambit/compositions.model.composition-id';
-
-export type CompositionProps = {
-  identifier: string;
-  filepath?: string;
-  displayName?: string;
-};
-
-export class Composition {
-  constructor(
-    /**
-     * identifier of the composition
-     */
-    readonly identifier: string,
-
-    /**
-     * file path in which the composition is contained.
-     */
-    readonly filepath?: string,
-
-    /**
-     * set explicit display name
-     */
-    private _displayName?: string
-  ) {}
-
-  get displayName() {
-    return this._displayName || humanizeCompositionId(this.identifier);
-  }
-
-  toObject() {
-    return {
-      identifier: this.identifier,
-      filepath: this.filepath,
-      displayName: this._displayName,
-    };
-  }
-
-  static fromArray(compositions: CompositionProps[]): Composition[] {
-    return compositions.map((composition) => {
-      return new Composition(composition.identifier, composition.filepath, composition.displayName);
-    });
-  }
-}

package/compositions.aspect.ts

@@ -1,9 +0,0 @@
-import { Aspect } from '@teambit/harmony';
-
-export const CompositionsAspect = Aspect.create({
-  id: 'teambit.compositions/compositions',
-  dependencies: [],
-  defaultConfig: {},
-});
-
-export default CompositionsAspect;

package/compositions.graphql.ts

@@ -1,32 +0,0 @@
-import { Component } from '@teambit/component';
-import { Schema } from '@teambit/graphql';
-import gql from 'graphql-tag';
-
-import { CompositionsMain } from './compositions.main.runtime';
-
-export function compositionsSchema(compositions: CompositionsMain): Schema {
-  return {
-    typeDefs: gql`
-      extend type Component {
-        compositions: [Composition]
-      }
-
-      type Subscription {
-        compositionAdded: Composition
-      }
-
-      type Composition {
-        filepath: String
-        identifier: String
-        displayName: String
-      }
-    `,
-    resolvers: {
-      Component: {
-        compositions: (component: Component) => {
-          return compositions.getCompositions(component);
-        },
-      },
-    },
-  };
-}

package/compositions.main.runtime.ts

@@ -1,164 +0,0 @@
-import { join } from 'path';
-import { MainRuntime } from '@teambit/cli';
-import { Component, ComponentAspect, ComponentMap, AspectData } from '@teambit/component';
-import { GraphqlAspect, GraphqlMain } from '@teambit/graphql';
-import { PreviewAspect, PreviewMain } from '@teambit/preview';
-import { SchemaAspect, SchemaMain } from '@teambit/schema';
-import { Workspace, WorkspaceAspect } from '@teambit/workspace';
-import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
-import { flatten } from '@teambit/legacy/dist/utils';
-import { DevFilesAspect, DevFilesMain } from '@teambit/dev-files';
-import { Composition } from './composition';
-import { CompositionsAspect } from './compositions.aspect';
-import { compositionsSchema } from './compositions.graphql';
-import { CompositionPreviewDefinition } from './compositions.preview-definition';
-
-export type CompositionsConfig = {
-  /**
-   * glob pattern to detect composition files. This includes all related files, like styles and jsons.
-   * @example ['/*.composition?(s).*']
-   */
-  compositionFilePattern: string[];
-  /**
-   * glob pattern to select Preview files. this will only include files matched by compositionFilePattern.
-   * @example ['*.{t,j}s', '*.{t,j}sx']
-   */
-  compositionPreviewFilePattern: string[];
-};
-
-/**
- * the component documentation extension.
- */
-export class CompositionsMain {
-  constructor(
-    /**
-     * Glob pattern to select all composition files
-     */
-    private compositionFilePattern: string[],
-
-    /**
-     * Glob pattern to select composition preview files
-     */
-    private previewFilePattern: string[],
-
-    /**
-     * envs extension.
-     */
-    private preview: PreviewMain,
-
-    /**
-     * workspace extension.
-     */
-    private workspace: Workspace,
-
-    /**
-     * schema extension.
-     */
-    private schema: SchemaMain,
-
-    private devFiles: DevFilesMain
-  ) {}
-
-  /**
-   * returns an array of doc file paths for a set of components.
-   */
-  getPreviewFiles(components: Component[]): ComponentMap<AbstractVinyl[]> {
-    return ComponentMap.as<AbstractVinyl[]>(components, (component) => {
-      // this includes non executables, like `button.compositions.module.scss` or `presets.compositions.json`
-      const compositionFiles = component.state.filesystem.byGlob(this.compositionFilePattern);
-
-      // select only relevant preview files (.tsx, etc)
-      const previewFiles = new Set(
-        component.state.filesystem.byGlob(this.previewFilePattern).map((file) => file.relative)
-      );
-      const files = compositionFiles.filter((file) => previewFiles.has(file.relative));
-
-      return files;
-    });
-  }
-
-  /**
-   * get component compositions.
-   */
-  getCompositions(component: Component): Composition[] {
-    const entry = component.state.aspects.get(CompositionsAspect.id);
-    if (!entry) return [];
-    const compositions = entry.data.compositions;
-    if (!compositions) return [];
-
-    return Composition.fromArray(compositions);
-  }
-
-  /**
-   * read composition from the component source code.
-   */
-  readCompositions(component: Component): Composition[] {
-    const maybeFiles = this.getPreviewFiles([component]).byComponent(component);
-
-    if (!maybeFiles) return [];
-    const [, files] = maybeFiles;
-    return flatten(
-      files.map((file) => {
-        return this.computeCompositions(component, file);
-      })
-    );
-  }
-
-  async onComponentLoad(component: Component): Promise<AspectData> {
-    const compositions = this.readCompositions(component);
-    return {
-      compositions: compositions.map((composition) => composition.toObject()),
-    };
-  }
-
-  private computeCompositions(component: Component, file: AbstractVinyl): Composition[] {
-    // :TODO hacked for a specific file extension now until david will take care in the compiler.
-    const pathArray = file.path.split('.');
-    pathArray[pathArray.length - 1] = 'js';
-
-    const module = this.schema.parseModule(join(this.workspace.componentDir(component.id), file.relative));
-    return module.exports.map((exportModel) => {
-      const displayName = exportModel.staticProperties?.get('compositionName');
-
-      return new Composition(
-        exportModel.identifier,
-        file.relative,
-        typeof displayName === 'string' ? displayName : undefined
-      );
-    });
-  }
-
-  static defaultConfig: CompositionsConfig = {
-    compositionFilePattern: ['**/*.composition?(s).*'],
-    compositionPreviewFilePattern: ['**/*.{t,j}s?(x)'],
-  };
-
-  static runtime = MainRuntime;
-  static dependencies = [PreviewAspect, GraphqlAspect, WorkspaceAspect, SchemaAspect, DevFilesAspect, ComponentAspect];
-
-  static async provider(
-    [preview, graphql, workspace, schema, devFiles]: [PreviewMain, GraphqlMain, Workspace, SchemaMain, DevFilesMain],
-    config: CompositionsConfig
-  ) {
-    const compositions = new CompositionsMain(
-      config.compositionFilePattern,
-      config.compositionPreviewFilePattern,
-      preview,
-      workspace,
-      schema,
-      devFiles
-    );
-    devFiles.registerDevPattern(config.compositionFilePattern);
-
-    graphql.register(compositionsSchema(compositions));
-    preview.registerDefinition(new CompositionPreviewDefinition(compositions));
-
-    if (workspace) {
-      workspace.onComponentLoad(compositions.onComponentLoad.bind(compositions));
-    }
-
-    return compositions;
-  }
-}
-
-CompositionsAspect.addRuntime(CompositionsMain);

package/compositions.preview-definition.ts

@@ -1,21 +0,0 @@
-import { Component, ComponentMap } from '@teambit/component';
-import { ExecutionContext } from '@teambit/envs';
-import { PreviewDefinition } from '@teambit/preview';
-import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
-
-import { CompositionsMain } from './compositions.main.runtime';
-
-export class CompositionPreviewDefinition implements PreviewDefinition {
-  readonly prefix = 'compositions';
-
-  constructor(private compositions: CompositionsMain) {}
-
-  async renderTemplatePath(context: ExecutionContext): Promise<string> {
-    return context.env.getMounter();
-  }
-
-  async getModuleMap(components: Component[]): Promise<ComponentMap<AbstractVinyl[]>> {
-    const map = this.compositions.getPreviewFiles(components);
-    return map.filter((value) => value.length !== 0);
-  }
-}

package/compositions.preview.runtime.ts

@@ -1,67 +0,0 @@
-import {
-  PreviewAspect,
-  PreviewPreview,
-  RenderingContext,
-  PreviewRuntime,
-  PreviewModule,
-  ModuleFile,
-} from '@teambit/preview';
-import head from 'lodash.head';
-
-import { CompositionsAspect } from './compositions.aspect';
-
-export class CompositionsPreview {
-  constructor(
-    /**
-     * preview extension.
-     */
-    private preview: PreviewPreview
-  ) {}
-
-  render(componentId: string, modules: PreviewModule, otherPreviewDefs, context: RenderingContext) {
-    if (!modules.componentMap[componentId]) return;
-
-    const compositions = this.selectPreviewModel(componentId, modules);
-    const active = this.getActiveComposition(compositions);
-
-    modules.mainModule.default(active, context);
-  }
-
-  /** gets relevant information for this preview to render */
-  selectPreviewModel(componentId: string, previewModule: PreviewModule) {
-    const files = previewModule.componentMap[componentId] || [];
-
-    // allow compositions to come from many files. It is assumed they will have unique named
-    const combined = Object.assign({}, ...files);
-    return combined;
-  }
-
-  private getActiveComposition(module: ModuleFile) {
-    const chosen = window.location.hash.split('&')[1];
-
-    if (!chosen) {
-      const first = head(Object.values(module));
-      return first;
-    }
-
-    return module[chosen];
-  }
-
-  static runtime = PreviewRuntime;
-
-  static dependencies = [PreviewAspect];
-
-  static async provider([preview]: [PreviewPreview]) {
-    const compPreview = new CompositionsPreview(preview);
-    preview.registerPreview({
-      name: 'compositions',
-      render: compPreview.render.bind(compPreview),
-      selectPreviewModel: compPreview.selectPreviewModel.bind(compPreview),
-      default: true,
-    });
-
-    return compPreview;
-  }
-}
-
-CompositionsAspect.addRuntime(CompositionsPreview);

package/compositions.tsx

@@ -1,185 +0,0 @@
-import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';
-import head from 'lodash.head';
-import queryString from 'query-string';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
-import { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';
-import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';
-import { ComponentContext, ComponentModel } from '@teambit/component';
-import { PropTable } from '@teambit/documenter.ui.property-table';
-import { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';
-import { useDocs } from '@teambit/docs.ui.queries.get-docs';
-import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
-import { EmptyBox } from '@teambit/design.ui.empty-box';
-import { toPreviewUrl } from '@teambit/preview.ui.component-preview';
-import { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';
-import { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';
-import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
-import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
-import { Separator } from '@teambit/design.ui.separator';
-import { H1 } from '@teambit/documenter.ui.heading';
-import { AlertCard } from '@teambit/design.ui.alert-card';
-import { NativeLink } from '@teambit/base-ui.routing.native-link';
-import { OptionButton } from '@teambit/design.ui.input.option-button';
-import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
-import { EmptyStateSlot } from './compositions.ui.runtime';
-import { Composition } from './composition';
-import styles from './compositions.module.scss';
-import { ComponentComposition } from './ui';
-import { CompositionsPanel } from './ui/compositions-panel/compositions-panel';
-import type { CompositionsMenuSlot } from './compositions.ui.runtime';
-
-export type MenuBarWidget = {
-  location: 'start' | 'end';
-  content: ReactNode;
-};
-export type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptyState?: EmptyStateSlot };
-
-export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
-  const component = useContext(ComponentContext);
-  const [selected, selectComposition] = useState(head(component.compositions));
-  const selectedRef = useRef(selected);
-  selectedRef.current = selected;
-
-  const properties = useDocs(component.id);
-
-  // reset selected composition when component changes.
-  // this does trigger renderer, but perf seems to be ok
-  useEffect(() => {
-    const prevId = selectedRef.current?.identifier;
-    const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];
-
-    selectComposition(next);
-  }, [component]);
-  const isMobile = useIsMobile();
-  const showSidebar = !isMobile && component.compositions.length > 0;
-  const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);
-
-  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
-
-  const compositionUrl = toPreviewUrl(component, 'compositions');
-  const currentCompositionUrl = toPreviewUrl(component, 'compositions', selected?.identifier);
-
-  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}>
-            <NativeLink external href={currentCompositionUrl} className={styles.openInNewTab}>
-              <OptionButton icon="open-tab" />
-            </NativeLink>
-          </CompositionsMenuBar>
-          <CompositionContent
-            emptyState={emptyState}
-            component={component}
-            selected={selected}
-            queryParams={queryParams}
-          />
-        </Pane>
-        <HoverSplitter className={styles.splitter}>
-          <Collapser
-            placement="left"
-            isOpen={isSidebarOpen}
-            onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag
-            onClick={() => setSidebarOpenness((x) => !x)}
-            tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side compositions`}
-            className={styles.collapser}
-          />
-        </HoverSplitter>
-        <Pane className={styles.right}>
-          <ThemeContext>
-            <TabContainer className={styles.tabsContainer}>
-              <TabList className={styles.tabs}>
-                <Tab>compositions</Tab>
-                <Tab>properties</Tab>
-              </TabList>
-              <TabPanel className={styles.tabContent}>
-                <CompositionsPanel
-                  onSelectComposition={selectComposition}
-                  url={compositionUrl}
-                  compositions={component.compositions}
-                  active={selected}
-                  className={styles.compost}
-                />
-              </TabPanel>
-              <TabPanel className={styles.tabContent}>
-                {properties && properties.length > 0 ? <PropTable rows={properties} showListView /> : <div />}
-              </TabPanel>
-            </TabContainer>
-          </ThemeContext>
-        </Pane>
-      </SplitPane>
-    </CompositionContextProvider>
-  );
-}
-
-type CompositionContentProps = {
-  component: ComponentModel;
-  selected?: Composition;
-  queryParams?: string | string[];
-  emptyState?: EmptyStateSlot;
-};
-
-function CompositionContent({ component, selected, queryParams, emptyState }: CompositionContentProps) {
-  const env = component.environment?.id;
-  const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;
-
-  if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {
-    return (
-      <div className={styles.noCompositionsPage}>
-        <div>
-          <H1 className={styles.title}>Compositions</H1>
-          <Separator isPresentational className={styles.separator} />
-          <AlertCard
-            level="info"
-            title="There are no
-              compositions for this Component. Learn how to add compositions:"
-          >
-            <MDXLayout>
-              <EmptyStateTemplate />
-            </MDXLayout>
-          </AlertCard>
-        </div>
-      </div>
-    );
-  }
-
-  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
-    return (
-      <StatusMessageCard className={styles.buildStatusMessage} status="PROCESSING" title="component preview pending">
-        this might take some time
-      </StatusMessageCard>
-    );
-  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
-    return (
-      <StatusMessageCard
-        className={styles.buildStatusMessage}
-        status="FAILURE"
-        title="failed to get component preview "
-      ></StatusMessageCard>
-    );
-
-  if (component.compositions.length === 0) {
-    return (
-      <EmptyBox
-        title="There are no compositions for this component."
-        linkText="Learn how to create compositions"
-        link="https://harmony-docs.bit.dev/compositions/overview/"
-      />
-    );
-  }
-
-  return (
-    <ComponentComposition
-      className={styles.compositionsIframe}
-      component={component}
-      composition={selected}
-      queryParams={queryParams}
-    />
-  );
-}

package/compositions.ui.runtime.tsx

@@ -1,53 +0,0 @@
-import type { ReactNode } from 'react';
-import { ComponentType } from 'react';
-import { Slot, SlotRegistry } from '@teambit/harmony';
-import { ComponentAspect, ComponentUI } from '@teambit/component';
-import { UIRuntime } from '@teambit/ui';
-import { CompositionsSection } from './composition.section';
-import { CompositionsAspect } from './compositions.aspect';
-import { MenuBarWidget } from './compositions';
-
-export type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;
-export type EmptyStateSlot = SlotRegistry<ComponentType>;
-
-export class CompositionsUI {
-  constructor(private menuBarWidgetSlot: CompositionsMenuSlot, private emptyStateSlot: EmptyStateSlot) {}
-
-  /**
-   * register a new tester empty state. this allows to register a different empty state from each environment for example.
-   */
-  registerEmptyState(emptyStateComponent: ComponentType) {
-    this.emptyStateSlot.register(emptyStateComponent);
-    return this;
-  }
-
-  registerMenuWidget(...widget: MenuBarWidget[]) {
-    this.menuBarWidgetSlot.register(widget);
-  }
-
-  static dependencies = [ComponentAspect];
-  static runtime = UIRuntime;
-  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>()];
-
-  static async provider(
-    [component]: [ComponentUI],
-    config: {},
-    [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]
-  ) {
-    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot);
-    const section = new CompositionsSection(
-      compositions,
-      { menuBarWidgetSlot: compositions.menuBarWidgetSlot },
-      emptyStateSlot
-    );
-
-    component.registerRoute(section.route);
-    component.registerNavigation(section.navigationLink, section.order);
-
-    return compositions;
-  }
-}
-
-export default CompositionsUI;
-
-CompositionsAspect.addRuntime(CompositionsUI);

package/index.ts

@@ -1,10 +0,0 @@
-import { CompositionsAspect } from './compositions.aspect';
-
-export { CompositionsAspect };
-export type { CompositionsMain } from './compositions.main.runtime';
-export type { CompositionsUI, CompositionsMenuSlot } from './compositions.ui.runtime';
-export { Composition, CompositionProps } from './composition';
-export type { CompositionsPreview } from './compositions.preview.runtime';
-export { CompositionsOverview } from './ui/compositions-overview';
-export { ComponentComposition } from './ui';
-export default CompositionsAspect;

package/types/asset.d.ts

@@ -1,29 +0,0 @@
-declare module '*.png' {
-  const value: any;
-  export = value;
-}
-declare module '*.svg' {
-  import type { FunctionComponent, SVGProps } from 'react';
-
-  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
-  const src: string;
-  export default src;
-}
-
-// @TODO Gilad
-declare module '*.jpg' {
-  const value: any;
-  export = value;
-}
-declare module '*.jpeg' {
-  const value: any;
-  export = value;
-}
-declare module '*.gif' {
-  const value: any;
-  export = value;
-}
-declare module '*.bmp' {
-  const value: any;
-  export = value;
-}

package/types/style.d.ts

@@ -1,42 +0,0 @@
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.mdx' {
-  const component: any;
-  export default component;
-}

package/ui/composition-preview.tsx

@@ -1,60 +0,0 @@
-import React, { useMemo } from 'react';
-import { ComponentModel } from '@teambit/component';
-import { ComponentPreview } from '@teambit/preview.ui.component-preview';
-
-import { Composition } from '../composition';
-
-export type ComponentCompositionProps = {
-  /**
-   * HTML class
-   */
-  className?: string;
-
-  /**
-   * component to render.
-   */
-  component: ComponentModel;
-
-  /**
-   * composition to use for component rendering.
-   */
-  composition?: Composition;
-
-  /**
-   * Additional query params to append at the end of the *hash*. Changing this property will not reload the composition.
-   */
-  queryParams?: string | string[];
-
-  /**
-   * skip hot reload
-   */
-  hotReload?: boolean;
-};
-
-export function ComponentComposition({
-  component,
-  composition,
-  hotReload,
-  className,
-  queryParams = [],
-}: ComponentCompositionProps) {
-  const compositionParams = useMemo(() => (composition ? [composition.identifier] : []).concat(queryParams), [
-    composition?.identifier,
-    queryParams,
-  ]);
-
-  return (
-    <ComponentPreview
-      className={className}
-      component={component}
-      style={{ width: '100%', height: '100%' }}
-      previewName="compositions"
-      queryParams={compositionParams}
-      hotReload={hotReload}
-    />
-  );
-}
-
-ComponentComposition.defaultProps = {
-  skipHotReload: true,
-};

package/ui/compositions-overview/compositions-overview.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { CompositionCard } from '@teambit/compositions.ui.composition-card';
-import { CompositionsModule } from '@teambit/compositions.model.composition-type';
-
-import styles from './compositions-overview.module.scss';
-
-export type CompositionsOverviewProps = {
-  compositions?: CompositionsModule;
-  compositionCardClass?: string;
-};
-
-export function CompositionsOverview({ compositions, compositionCardClass }: CompositionsOverviewProps) {
-  return (
-    <div className={styles.background}>
-      {compositions &&
-        Object.entries(compositions).map(([key, composition]) => (
-          <CompositionCard key={key} Composition={composition} name={key} className={compositionCardClass} />
-        ))}
-    </div>
-  );
-}

package/ui/compositions-overview/index.ts

@@ -1 +0,0 @@
-export * from './compositions-overview';

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

@@ -1,58 +0,0 @@
-import { Icon } from '@teambit/evangelist.elements.icon';
-import classNames from 'classnames';
-import React, { useCallback } from 'react';
-
-import { Composition } from '../../composition';
-import styles from './compositions-panel.module.scss';
-
-export type CompositionsPanelProps = {
-  compositions: Composition[];
-  onSelectComposition: (composition: Composition) => void;
-  active?: Composition;
-  url: string;
-} & React.HTMLAttributes<HTMLUListElement>;
-
-export function CompositionsPanel({
-  url,
-  compositions,
-  onSelectComposition: onSelect,
-  active,
-  className,
-  ...rest
-}: CompositionsPanelProps) {
-  const handleSelect = useCallback(
-    (selected: Composition) => {
-      onSelect && onSelect(selected);
-    },
-    [onSelect]
-  );
-
-  return (
-    <ul {...rest} className={classNames(className)}>
-      {compositions.map((composition) => {
-        // TODO - move to composition panel node
-        return (
-          <li
-            key={composition.identifier}
-            className={classNames(styles.linkWrapper, composition === active && styles.active)}
-          >
-            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>
-              <span className={styles.box}></span>
-              <span className={styles.name}>{composition.displayName}</span>
-            </a>
-            <div className={styles.right}>
-              <a
-                className={styles.panelLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                href={`${url}&${composition.identifier}`}
-              >
-                <Icon className={styles.icon} of="open-tab" />
-              </a>
-            </div>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}

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

@@ -1,22 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import styles from './compositions-panel-node.module.scss';
-
-export type CompositionsPanelNodeProps = {
-  name: string;
-  onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-  isActive: boolean;
-} & React.HTMLAttributes<HTMLLIElement>;
-
-export function CompositionsPanelNode({ name, onClick, isActive, ...rest }: CompositionsPanelNodeProps) {
-  return (
-    <li {...rest}>
-      <div className={classNames(styles.linkWrapper, { [styles.active]: isActive })}>
-        <a className={styles.panelLink} onClick={onClick}>
-          {name}
-        </a>
-      </div>
-    </li>
-  );
-}

package/ui/compositions-panel-node/index.ts

@@ -1 +0,0 @@
-export * from './compositions-panel-node';

package/ui/index.ts

@@ -1 +0,0 @@
-export { ComponentComposition } from './composition-preview';

package/ui/use-compositions.tsx

@@ -1,14 +0,0 @@
-// import gql from 'graphql-tag';
-// import { ComponentModel } from '../../component';
-// import { Composition } from '../composition';
-// import { useDataQuery } from '../../ui';
-
-// const GET_COMPOSITIONS = gql`
-//   compositions: {
-
-//   }
-// `;
-
-// export function useCompositions(component: ComponentModel): Composition[] | [] {
-//   useDataQuery();
-// }