@teambit/workspace 0.0.551 → 0.0.556

package/ui/workspace/workspace-overview/workspace-overview.tsx

@@ -1,21 +0,0 @@
-import React, { useContext } from 'react';
-import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
-import { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';
-import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
-import { WorkspaceContext } from '../workspace-context';
-import styles from './workspace-overview.module.scss';
-
-export function WorkspaceOverview() {
-  const workspace = useContext(WorkspaceContext);
-  const { components } = workspace;
-  if (!components || components.length === 0) return <EmptyWorkspace name={workspace.name} />;
-  return (
-    <div className={styles.container}>
-      <ComponentGrid>
-        {components.map((component, index) => {
-          return <WorkspaceComponentCard key={index} component={component} />;
-        })}
-      </ComponentGrid>
-    </div>
-  );
-}

package/ui/workspace/workspace-provider.tsx

@@ -1,23 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import { WorkspaceContext } from './workspace-context';
-import { Workspace } from './workspace-model';
-
-export type WorkspaceProviderProps = {
-  /**
-   * workspace model.
-   */
-  workspace: Workspace;
-
-  /**
-   * react children.
-   */
-  children: ReactNode;
-};
-
-/**
- * context provider of the workspace
- */
-export function WorkspaceProvider({ workspace, children }: WorkspaceProviderProps) {
-  return <WorkspaceContext.Provider value={workspace}>{children}</WorkspaceContext.Provider>;
-}

package/ui/workspace/workspace.module.scss

@@ -1,40 +0,0 @@
-@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
-
-.emptyContainer {
-  height: 100vh;
-}
-
-.workspaceWrapper {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden; // TODO
-  height: 100vh;
-}
-
-.topbar {
-  flex: none;
-}
-
-.main {
-  flex: 1 1;
-
-  height: 100%;
-  overflow: hidden;
-}
-
-.splitter {
-  position: relative;
-
-  > :first-child {
-    z-index: $nav-z-index + 1;
-    position: absolute;
-  }
-}
-
-.sidebar {
-  min-width: 100px;
-  max-width: 85%;
-  position: relative;
-
-  height: 100%;
-}

package/ui/workspace/workspace.tsx

@@ -1,99 +0,0 @@
-import 'reset-css';
-import pluralize from 'pluralize';
-import React, { useReducer, useMemo } from 'react';
-import { Route } from 'react-router-dom';
-import type { ComponentModel } from '@teambit/component';
-import type { ComponentID } from '@teambit/component-id';
-import { useNotifications } from '@teambit/ui-foundation.ui.notifications.notification-context';
-import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
-import { Corner } from '@teambit/ui-foundation.ui.corner';
-import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
-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 { TopBar } from '@teambit/ui-foundation.ui.top-bar';
-
-import { useWorkspace } from './use-workspace';
-import { WorkspaceOverview } from './workspace-overview';
-import { WorkspaceProvider } from './workspace-provider';
-import styles from './workspace.module.scss';
-import WorkspaceUI from '../../workspace.ui.runtime';
-
-export type WorkspaceProps = {
-  routeSlot: RouteSlot;
-  menuSlot: RouteSlot;
-  sidebar: JSX.Element;
-  workspaceUI: WorkspaceUI;
-  onSidebarTogglerChange: (callback: () => void) => void;
-};
-
-/**
- * main workspace component.
- */
-export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebarTogglerChange }: WorkspaceProps) {
-  const reactions = useComponentNotifications();
-  const { workspace } = useWorkspace(reactions);
-
-  const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, true);
-  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;
-
-  onSidebarTogglerChange(handleSidebarToggle);
-
-  if (!workspace) {
-    return <div className={styles.emptyContainer}></div>;
-  }
-
-  workspaceUI.setComponents(workspace.components);
-
-  return (
-    <WorkspaceProvider workspace={workspace}>
-      <div className={styles.workspaceWrapper}>
-        <TopBar
-          className={styles.topbar}
-          Corner={() => <Corner name={workspace.name} icon={workspace.icon} />}
-          menu={menuSlot}
-        />
-
-        <SplitPane className={styles.main} size={264} layout={sidebarOpenness}>
-          <Pane className={styles.sidebar}>{sidebar}</Pane>
-          <HoverSplitter className={styles.splitter}>
-            <Collapser
-              isOpen={isSidebarOpen}
-              onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag
-              onClick={handleSidebarToggle}
-              tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}
-            />
-          </HoverSplitter>
-          <Pane>
-            <SlotRouter slot={routeSlot} />
-            <Route exact path="/">
-              <WorkspaceOverview />
-            </Route>
-          </Pane>
-        </SplitPane>
-      </div>
-    </WorkspaceProvider>
-  );
-}
-function useComponentNotifications() {
-  const notifications = useNotifications();
-
-  // memo not really needed, but for peace of mind
-  return useMemo(
-    () => ({
-      onComponentAdded: (comps: ComponentModel[]) => {
-        const notificationId = notifications.log(
-          `added ${pluralize('component', comps.length)}: ${comps.map((comp) => comp.id.toString()).join(', ')}`
-        );
-        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);
-      },
-
-      onComponentRemoved: (ids: ComponentID[]) => {
-        const notificationId = notifications.log(
-          `removed ${pluralize('component', ids.length)} ${ids.map((id) => id.toString()).join(', ')}`
-        );
-        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);
-      },
-    }),
-    [notifications]
-  );
-}

package/ui/workspace-components-drawer/index.ts

@@ -1 +0,0 @@
-export { WorkspaceComponentsDrawer } from './workspace-components.drawer';

package/ui/workspace-components-drawer/workspace-components-drawer.module.scss

@@ -1,4 +0,0 @@
-.emptyWorkspace {
-  padding: 8px 8px 0 28px;
-  display: block;
-}

package/ui/workspace-components-drawer/workspace-components.drawer.tsx

@@ -1,49 +0,0 @@
-import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
-import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
-import {
-  ComponentTree,
-  PayloadType,
-  ComponentView,
-  ScopeTreeNode,
-  NamespaceTreeNode,
-  ScopePayload,
-} from '@teambit/ui-foundation.ui.side-bar';
-
-import type { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
-
-import React, { useCallback, useContext } from 'react';
-import classNames from 'classnames';
-import { ComponentTreeSlot } from '@teambit/component-tree';
-import { mutedItalic } from '@teambit/design.ui.styles.muted-italic';
-import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
-import { WorkspaceContext } from '../workspace/workspace-context';
-import styles from './workspace-components-drawer.module.scss';
-
-export class WorkspaceComponentsDrawer implements DrawerType {
-  constructor(private treeNodeSlot: ComponentTreeSlot) {}
-
-  name = 'COMPONENTS';
-
-  render = () => {
-    const workspace = useContext(WorkspaceContext);
-    const { treeNodeSlot } = this;
-
-    const TreeNodeRenderer = useCallback(
-      function TreeNode(props: TreeNodeProps<PayloadType>) {
-        const children = props.node.children;
-
-        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />;
-
-        if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;
-
-        return <NamespaceTreeNode {...props} />;
-      },
-      [treeNodeSlot]
-    );
-
-    if (!workspace) return <FullLoader />;
-    if (workspace.components.length === 0)
-      return <span className={classNames(mutedItalic, ellipsis, styles.emptyWorkspace)}>Workspace is empty</span>;
-    return <ComponentTree components={workspace.components} TreeNode={TreeNodeRenderer} />;
-  };
-}

package/watch/REFACTOR_GUIDE.md

@@ -1,14 +0,0 @@
-REFACTOR GUIDE FOR WATCHER EXTENSION.
-
-- watcher should accept an array of file and handle watching for file changes.
-- workspace should register a slot which listens to file changes and reload the component.
-- workspace allow extension to register a slot which listens to component changes.
-- workspace graphql should emit an event through subscription (onComponentChange) after reloading all changed components.
-- hook should be exposed from components on load in which extension can register to add data.
-
-
-- more important events
-  - apply onComponentChange
-  - Scope
-    - onComponentChange
-

package/watch/check-types.ts

@@ -1,5 +0,0 @@
-export enum CheckTypes {
-  None, // keep this. it equals zero. this way we can do "if checkTypes() ... "
-  EntireProject,
-  ChangedFile,
-}

package/watch/output-formatter.ts

@@ -1,50 +0,0 @@
-import chalk from 'chalk';
-import { OnComponentEventResult } from '../on-component-events';
-
-const verboseComponentFilesArrayToString = (componentFiles) => {
-  return componentFiles.reduce((outputString, filePath) => `${outputString} \t - ${filePath}\n`, ``);
-};
-
-const resultsForExtensionArrayToString = (resultsForExtension, verbose) => {
-  return resultsForExtension.reduce(
-    (outputString, resultForExtension) =>
-      `${outputString}${chalk.green('√')}SUCCESS\t${resultForExtension.component}\n
-     ${verbose ? resultForExtension.componentFilesAsString : ''}\n`,
-    ''
-  );
-};
-
-export const formatWatchPathsSortByComponent = (trackDirs) => {
-  return Object.keys(trackDirs).reduce(
-    (outputString, watchPath) =>
-      `${outputString}
-    ${chalk.green('√')} SUCCESS\t${trackDirs[watchPath]}\n
-    \t - ${watchPath}\n\n`,
-    ` ${chalk.underline('STATUS\t\tCOMPONENT ID')}\n`
-  );
-};
-
-/**
- * todo: this was implemented incorrectly.
- * the original idea of `SerializableResults` was to have each one of the aspects registered to the slot, the
- * ability to have their own formatting to their results, and then `toString()` method to print them.
- * Here, the printing is specifically to the Compiler aspect. It should move to where it belongs.
- */
-export function formatCompileResults(compileResults: OnComponentEventResult[], verbose: boolean) {
-  if (!compileResults.length || !Array.isArray(compileResults)) return '';
-  return compileResults
-    .filter((compileResult) => compileResult.results?.results && Array.isArray(compileResult.results?.results))
-    .map((compileResult) => ({
-      extensionId: compileResult.extensionId,
-      resultsForExtension: compileResult.results?.results?.map((resultForExtension) => ({
-        component: resultForExtension.component,
-        componentFilesAsString: verboseComponentFilesArrayToString(resultForExtension.buildResults),
-      })),
-    }))
-    .reduce(
-      (outputString, compileResult) =>
-        `${outputString}
-  ${resultsForExtensionArrayToString(compileResult.resultsForExtension, verbose)}`,
-      ` ${chalk.underline('STATUS\tCOMPONENT ID')}`
-    );
-}

package/watch/watch.cmd.tsx

@@ -1,142 +0,0 @@
-import chalk from 'chalk';
-import moment from 'moment';
-import { Command, CommandOptions } from '@teambit/cli';
-import type { Logger } from '@teambit/logger';
-import type { BitBaseEvent, PubsubMain } from '@teambit/pubsub';
-
-// import IDs and events
-import { CompilerAspect, CompilerErrorEvent } from '@teambit/compiler';
-
-import { Watcher, WatchOptions } from './watcher';
-import { formatCompileResults, formatWatchPathsSortByComponent } from './output-formatter';
-import { OnComponentEventResult } from '../on-component-events';
-import { CheckTypes } from './check-types';
-
-export type WatchCmdOpts = {
-  verbose?: boolean;
-  skipPreCompilation?: boolean;
-  checkTypes?: string | boolean;
-};
-
-export class WatchCommand implements Command {
-  msgs = {
-    onAll: (event, path) => this.logger.console(`Event: "${event}". Path: ${path}`),
-    onStart: () => {},
-    onReady: (workspace, watchPathsSortByComponent, verbose) => {
-      clearOutdatedData();
-      if (verbose) {
-        this.logger.console(formatWatchPathsSortByComponent(watchPathsSortByComponent));
-      }
-      this.logger.console(
-        chalk.yellow(
-          `Watching for component changes in workspace ${workspace.config.name} (${moment().format('HH:mm:ss')})...\n`
-        )
-      );
-    },
-    onChange: (filePath: string, buildResults: OnComponentEventResult[], verbose: boolean, duration) => {
-      clearOutdatedData();
-      if (!buildResults.length) {
-        this.logger.console(`The file ${filePath} has been changed, but nothing to compile.\n\n`);
-        return;
-      }
-      this.logger.console(`The file ${filePath} has been changed.\n\n`);
-      this.logger.console(formatCompileResults(buildResults, verbose));
-      this.logger.console(`Finished. (${duration}ms)`);
-      this.logger.console(chalk.yellow(`Watching for component changes (${moment().format('HH:mm:ss')})...`));
-    },
-    onAdd: (filePath: string, buildResults: OnComponentEventResult[], verbose: boolean, duration) => {
-      clearOutdatedData();
-      this.logger.console(`The file ${filePath} has been added.\n\n`);
-      this.logger.console(formatCompileResults(buildResults, verbose));
-      this.logger.console(`Finished. (${duration}ms)`);
-      this.logger.console(chalk.yellow(`Watching for component changes (${moment().format('HH:mm:ss')})...`));
-    },
-    onUnlink: (p) => {
-      this.logger.console(`file ${p} has been removed`);
-    },
-    onError: (err) => {
-      this.logger.console(`Watcher error ${err}`);
-    },
-  };
-
-  name = 'watch';
-  description = 'watch a set of components';
-  alias = '';
-  group = 'development';
-  shortDescription = '';
-  options = [
-    ['v', 'verbose', 'showing npm verbose output for inspection and prints stack trace'],
-    ['', 'skip-pre-compilation', 'skip the compilation step before starting to watch'],
-    [
-      't',
-      'check-types [string]',
-      'EXPERIMENTAL. show errors/warnings for types. options are [file, project] to investigate only changed file or entire project. defaults to project',
-    ],
-  ] as CommandOptions;
-
-  constructor(
-    /**
-     * logger extension.
-     */
-    private pubsub: PubsubMain,
-
-    /**
-     * logger extension.
-     */
-    private logger: Logger,
-
-    /**
-     * watcher extension.
-     */
-    private watcher: Watcher
-  ) {
-    this.registerToEvents();
-  }
-
-  private registerToEvents() {
-    this.pubsub.sub(CompilerAspect.id, this.eventsListener);
-  }
-
-  private eventsListener = (event: BitBaseEvent<any>) => {
-    switch (event.type) {
-      case CompilerErrorEvent.TYPE:
-        this.logger.console(`Watcher error ${event.data.error}, 'error'`);
-        break;
-      default:
-    }
-  };
-
-  async report(cliArgs: [], watchCmdOpts: WatchCmdOpts) {
-    const { verbose, checkTypes } = watchCmdOpts;
-    const getCheckTypesEnum = () => {
-      switch (checkTypes) {
-        case undefined:
-        case false:
-          return CheckTypes.None;
-        case 'project':
-        case true: // project is the default
-          return CheckTypes.EntireProject;
-        case 'file':
-          return CheckTypes.ChangedFile;
-        default:
-          throw new Error(`check-types can be either "file" or "project". got "${checkTypes}"`);
-      }
-    };
-    const watchOpts: WatchOptions = {
-      msgs: this.msgs,
-      verbose,
-      preCompile: !watchCmdOpts.skipPreCompilation,
-      spawnTSServer: Boolean(checkTypes), // if check-types is enabled, it must spawn the tsserver.
-      checkTypes: getCheckTypesEnum(),
-    };
-    await this.watcher.watchAll(watchOpts);
-    return 'watcher terminated';
-  }
-}
-
-/**
- * with console.clear() all history is deleted from the console. this function preserver the history.
- */
-function clearOutdatedData() {
-  process.stdout.write('\x1Bc');
-}