@teambit/compositions 0.0.551 → 0.0.556

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/tsconfig.json

@@ -1,35 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "es2019",
-      "DOM",
-      "ES6",
-      "DOM.Iterable",
-      "ScriptHost"
-    ],
-    "target": "es2015",
-    "module": "commonjs",
-    "jsx": "react",
-    "declaration": true,
-    "sourceMap": true,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "outDir": "dist",
-    "composite": true,
-    "emitDeclarationOnly": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
-    "strictPropertyInitialization": false,
-    "strict": true,
-    "noImplicitAny": false,
-    "rootDir": ".",
-    "removeComments": true,
-    "preserveConstEnums": true,
-    "resolveJsonModule": true
-  },
-  "exclude": [
-    "dist"
-  ]
-}

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

@@ -1,16 +0,0 @@
-.background {
-  background: var(--bit-bg-dent, #f6f6f6);
-  padding: 12px;
-  border-radius: 6px;
-  border: 1px solid var(--bit-border-color-lightest, #ededed);
-  display: flex;
-  overflow-x: auto;
-
-  > * {
-    margin-right: 16px;
-  }
-
-  > :last-child {
-    margin: 0;
-  }
-}

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

@@ -1,119 +0,0 @@
-.linkWrapper {
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  font-size: var(--bit-p-xs);
-  transition: all 300ms ease-in-out;
-
-  &:hover {
-    background-color: var(--bit-border-color-lightest, #ededed);
-    // border-radius: 8px;
-    transition: background-color 300ms ease-in-out;
-    .right {
-      visibility: unset;
-      opacity: 1;
-      color: var(--bit-text-color-light, #6c707c);
-      //TODO - fix hover effect and timing of icon
-      transition: visibility 200ms, opacity 100ms ease-in-out;
-      .icon {
-        &:hover {
-          color: var(--bit-text-color-heavy);
-        }
-      }
-    }
-  }
-  &.active {
-    display: flex;
-    align-items: center;
-    background-color: var(--bit-accent-color, #6c5ce7);
-    color: var(--bit-bg-color, #ffffff);
-
-    // overrides
-    &:hover {
-      background-color: #5d4aec;
-    }
-
-    .box {
-      background-color: var(--bit-bg-color, #ffffff);
-    }
-
-    .right {
-      visibility: unset;
-      opacity: 1;
-      color: var(--bit-accent-bg, #eceaff);
-      .icon {
-        &:hover {
-          color: var(--bit-bg-color, #ffffff);
-        }
-      }
-    }
-  }
-  .right {
-    opacity: 0;
-    visibility: hidden;
-    font-size: 13px;
-    transition: visibility 200ms, opacity 100ms ease-in-out;
-  }
-}
-
-.box {
-  width: 10px;
-  height: 10px;
-  flex-shrink: 0;
-  background-color: var(--bit-text-color-heavy);
-  margin-right: 11px;
-  border-radius: 1px;
-}
-.name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 8px;
-}
-.panelLink {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  width: 100%;
-  height: 100%;
-  text-decoration: none;
-  color: inherit;
-  min-width: 0;
-
-  &:active {
-    color: inherit;
-  }
-}
-
-.tabs {
-  display: flex;
-  align-items: center;
-  margin-bottom: 17px;
-  > div {
-    position: relative;
-    padding: 8px;
-    text-transform: uppercase;
-    font-size: 12px;
-    font-weight: bold;
-    &:not(:first-child) {
-      color: #878c9a;
-    }
-
-    &:first-child {
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        background-color: var(--bit-accent-color, #6c5ce7);
-        height: 3px;
-        border-radius: 10px;
-        transition: background-color 300ms, height 300ms;
-      }
-    }
-  }
-}