@teambit/compositions 0.0.554 → 0.0.558

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;
-}

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.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';