@teambit/compositions 0.0.551 → 0.0.556

package/dist/composition.d.ts

@@ -4,10 +4,31 @@ export declare type CompositionProps = {
     displayName?: string;
 };
 export declare class Composition {
+    /**
+     * identifier of the composition
+     */
     readonly identifier: string;
+    /**
+     * file path in which the composition is contained.
+     */
     readonly filepath?: string | undefined;
+    /**
+     * set explicit display name
+     */
     private _displayName?;
-    constructor(identifier: string, filepath?: string | undefined, _displayName?: string | undefined);
+    constructor(
+    /**
+     * identifier of the composition
+     */
+    identifier: string, 
+    /**
+     * file path in which the composition is contained.
+     */
+    filepath?: string | undefined, 
+    /**
+     * set explicit display name
+     */
+    _displayName?: string | undefined);
     get displayName(): string;
     toObject(): {
         identifier: string;

package/dist/composition.section.d.ts

@@ -4,10 +4,17 @@ declare type Options = {
     menuBarWidgetSlot: CompositionsMenuSlot;
 };
 export declare class CompositionsSection implements Section {
+    /**
+     * simulations ui extension.
+     */
     private compositions;
     private options;
     private emptyStateSlot;
-    constructor(compositions: CompositionsUI, options: Options, emptyStateSlot: EmptyStateSlot);
+    constructor(
+    /**
+     * simulations ui extension.
+     */
+    compositions: CompositionsUI, options: Options, emptyStateSlot: EmptyStateSlot);
     navigationLink: {
         href: string;
         children: string;

package/dist/compositions.main.runtime.d.ts

@@ -7,19 +7,74 @@ import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
 import { DevFilesMain } from '@teambit/dev-files';
 import { Composition } from './composition';
 export declare 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 declare class CompositionsMain {
+    /**
+     * Glob pattern to select all composition files
+     */
     private compositionFilePattern;
+    /**
+     * Glob pattern to select composition preview files
+     */
     private previewFilePattern;
+    /**
+     * envs extension.
+     */
     private preview;
+    /**
+     * workspace extension.
+     */
     private workspace;
+    /**
+     * schema extension.
+     */
     private schema;
     private devFiles;
-    constructor(compositionFilePattern: string[], previewFilePattern: string[], preview: PreviewMain, workspace: Workspace, schema: SchemaMain, devFiles: DevFilesMain);
+    constructor(
+    /**
+     * Glob pattern to select all composition files
+     */
+    compositionFilePattern: string[], 
+    /**
+     * Glob pattern to select composition preview files
+     */
+    previewFilePattern: string[], 
+    /**
+     * envs extension.
+     */
+    preview: PreviewMain, 
+    /**
+     * workspace extension.
+     */
+    workspace: Workspace, 
+    /**
+     * schema extension.
+     */
+    schema: SchemaMain, devFiles: DevFilesMain);
+    /**
+     * returns an array of doc file paths for a set of components.
+     */
     getPreviewFiles(components: Component[]): ComponentMap<AbstractVinyl[]>;
+    /**
+     * get component compositions.
+     */
     getCompositions(component: Component): Composition[];
+    /**
+     * read composition from the component source code.
+     */
     readCompositions(component: Component): Composition[];
     onComponentLoad(component: Component): Promise<AspectData>;
     private computeCompositions;

package/dist/compositions.preview.runtime.d.ts

@@ -1,8 +1,16 @@
 import { PreviewPreview, RenderingContext, PreviewModule } from '@teambit/preview';
 export declare class CompositionsPreview {
+    /**
+     * preview extension.
+     */
     private preview;
-    constructor(preview: PreviewPreview);
+    constructor(
+    /**
+     * preview extension.
+     */
+    preview: PreviewPreview);
     render(componentId: string, modules: PreviewModule, otherPreviewDefs: any, context: RenderingContext): void;
+    /** gets relevant information for this preview to render */
     selectPreviewModel(componentId: string, previewModule: PreviewModule): any;
     private getActiveComposition;
     static runtime: import("@teambit/harmony").RuntimeDefinition;

package/dist/compositions.ui.runtime.d.ts

@@ -9,6 +9,9 @@ export declare class CompositionsUI {
     private menuBarWidgetSlot;
     private emptyStateSlot;
     constructor(menuBarWidgetSlot: CompositionsMenuSlot, 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;
     registerMenuWidget(...widget: MenuBarWidget[]): void;
     static dependencies: import("@teambit/harmony").Aspect[];

package/dist/ui/composition-preview.d.ts

@@ -1,10 +1,25 @@
 import { ComponentModel } from '@teambit/component';
 import { Composition } from '../composition';
 export declare 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 declare function ComponentComposition({ component, composition, hotReload, className, queryParams, }: ComponentCompositionProps): JSX.Element;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.551",
+  "version": "0.0.556",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.551"
+    "version": "0.0.556"
   },
   "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.551",
-    "@teambit/compositions.model.composition-id": "0.0.459",
-    "@teambit/graphql": "0.0.551",
-    "@teambit/cli": "0.0.382",
-    "@teambit/dev-files": "0.0.551",
-    "@teambit/preview": "0.0.551",
-    "@teambit/schema": "0.0.551",
-    "@teambit/workspace": "0.0.551",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.459",
-    "@teambit/envs": "0.0.551",
-    "@teambit/compositions.ui.compositions-menu-bar": "0.0.136",
-    "@teambit/compositions.ui.hooks.use-composition": "0.0.136",
+    "@teambit/component": "0.0.556",
+    "@teambit/compositions.model.composition-id": "0.0.464",
+    "@teambit/graphql": "0.0.556",
+    "@teambit/cli": "0.0.387",
+    "@teambit/dev-files": "0.0.556",
+    "@teambit/preview": "0.0.556",
+    "@teambit/schema": "0.0.556",
+    "@teambit/workspace": "0.0.556",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.464",
+    "@teambit/envs": "0.0.556",
+    "@teambit/compositions.ui.compositions-menu-bar": "0.0.141",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.141",
     "@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.459",
-    "@teambit/mdx.ui.mdx-layout": "0.0.463",
-    "@teambit/panels": "0.0.382",
-    "@teambit/preview.ui.component-preview": "0.0.459",
-    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.164",
-    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.152",
-    "@teambit/ui": "0.0.551",
-    "@teambit/compositions.model.composition-type": "0.0.460",
-    "@teambit/compositions.ui.composition-card": "0.0.465"
+    "@teambit/docs.ui.queries.get-docs": "0.0.464",
+    "@teambit/mdx.ui.mdx-layout": "0.0.468",
+    "@teambit/panels": "0.0.387",
+    "@teambit/preview.ui.component-preview": "0.0.464",
+    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.169",
+    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.157",
+    "@teambit/ui": "0.0.556",
+    "@teambit/compositions.model.composition-type": "0.0.465",
+    "@teambit/compositions.ui.composition-card": "0.0.470"
   },
   "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.101"
+    "@teambit/compositions.aspect-docs.compositions": "0.0.106"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.169",
+    "@teambit/legacy": "1.0.173",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -90,12 +90,18 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.169",
+        "@teambit/legacy": "1.0.173",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "README.md",
+    "README.mdx"
+  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

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.docs.mdx

@@ -1,8 +0,0 @@
----
-description: Renders component instances as part of different compositions.
-labels: ['ui', 'tests']
----
-
-import { Compositions } from '@teambit/compositions.aspect-docs.compositions';
-
-<Compositions />

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.module.scss

@@ -1,100 +0,0 @@
-@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
-$panelBg: #fafafa;
-
-.compositionsPage {
-  height: 100%;
-  width: 100%;
-}
-
-.compositionPreview {
-  padding-top: 20px;
-  width: 100%;
-}
-
-.left {
-  min-width: 200px;
-
-  //cannot assign max-width directly to right side
-  max-width: calc(100% - 200px);
-
-  display: flex;
-  overflow-y: auto;
-  flex-direction: column;
-}
-
-.right {
-  background: $panelBg;
-  overflow-y: auto;
-  // this is to fix the right panel when it gets too big or too small
-  min-width: 200px;
-  max-width: calc(100% - 200px);
-}
-
-.menuBar {
-  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
-}
-
-.splitter {
-  position: relative;
-
-  > :first-child {
-    z-index: $nav-z-index + 1;
-    position: absolute;
-  }
-}
-
-.collapser {
-  right: 0;
-}
-
-.tabsContainer {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.tabs {
-  flex: none;
-}
-
-.tabContent {
-  flex: 1 1;
-  overflow: auto;
-
-  &:empty {
-    display: none;
-  }
-}
-
-.compositions {
-  padding: 16px 8px 0 8px;
-}
-
-.openInNewTab {
-  text-decoration: none;
-  color: inherit;
-
-  &:active {
-    color: inherit;
-  }
-}
-
-.noCompositionsPage {
-  padding: 50px 40px 100px 40px;
-  width: 100%;
-  box-sizing: border-box;
-  max-width: 1440px;
-  margin: 0 auto;
-
-  .title {
-    margin-bottom: 24px;
-    font-size: var(--bit-h-xs, 26px);
-  }
-  .separator {
-    margin-bottom: 41px;
-  }
-}
-
-.buildStatusMessage {
-  margin: auto;
-}