@teambit/workspace 0.0.568 → 0.0.569

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "0.0.568"
+    "version": "0.0.569"
   },
   "dependencies": {
     "lodash.compact": "3.0.1",
@@ -14,6 +14,10 @@
     "p-map-series": "2.1.0",
     "chalk": "2.4.2",
     "ink": "3.0.8",
+    "@pnpm/colorize-semver-diff": "1.0.1",
+    "@pnpm/semver-diff": "1.1.0",
+    "enquirer": "2.3.6",
+    "table": "5.4.6",
     "semver": "7.3.4",
     "@teambit/harmony": "0.2.11",
     "graphql-tag": "2.12.1",
@@ -34,55 +38,55 @@
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
     "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
-    "@teambit/bit-error": "0.0.380",
-    "@teambit/legacy-bit-id": "0.0.383",
-    "@teambit/logger": "0.0.480",
-    "@teambit/scope": "0.0.568",
-    "@teambit/cli": "0.0.394",
-    "@teambit/isolator": "0.0.568",
-    "@teambit/component-tree": "0.0.380",
-    "@teambit/component.ui.component-status-resolver": "0.0.475",
-    "@teambit/harmony.modules.resolved-component": "0.0.469",
-    "@teambit/dependency-resolver": "0.0.568",
-    "@teambit/compiler": "0.0.568",
-    "@teambit/component": "0.0.568",
-    "@teambit/graphql": "0.0.568",
-    "@teambit/aspect-loader": "0.0.568",
-    "@teambit/bundler": "0.0.568",
-    "@teambit/envs": "0.0.568",
-    "@teambit/pubsub": "0.0.568",
-    "@teambit/ui": "0.0.568",
-    "@teambit/variants": "0.0.482",
-    "@teambit/component-issues": "0.0.29",
-    "@teambit/config": "0.0.406",
-    "@teambit/harmony.modules.requireable-component": "0.0.469",
-    "@teambit/importer": "0.0.21",
-    "@teambit/workspace.modules.match-pattern": "0.0.473",
-    "@teambit/command-bar": "0.0.568",
+    "@teambit/bit-error": "0.0.381",
+    "@teambit/legacy-bit-id": "0.0.384",
+    "@teambit/logger": "0.0.481",
+    "@teambit/scope": "0.0.569",
+    "@teambit/cli": "0.0.395",
+    "@teambit/isolator": "0.0.569",
+    "@teambit/component-tree": "0.0.381",
+    "@teambit/component.ui.component-status-resolver": "0.0.476",
+    "@teambit/harmony.modules.resolved-component": "0.0.470",
+    "@teambit/dependency-resolver": "0.0.569",
+    "@teambit/compiler": "0.0.569",
+    "@teambit/component": "0.0.569",
+    "@teambit/graphql": "0.0.569",
+    "@teambit/aspect-loader": "0.0.569",
+    "@teambit/bundler": "0.0.569",
+    "@teambit/envs": "0.0.569",
+    "@teambit/pubsub": "0.0.569",
+    "@teambit/ui": "0.0.569",
+    "@teambit/variants": "0.0.483",
+    "@teambit/component-issues": "0.0.30",
+    "@teambit/config": "0.0.407",
+    "@teambit/harmony.modules.requireable-component": "0.0.470",
+    "@teambit/importer": "0.0.22",
+    "@teambit/workspace.modules.match-pattern": "0.0.474",
+    "@teambit/command-bar": "0.0.569",
     "@teambit/design.ui.surfaces.menu.link-item": "0.0.374",
-    "@teambit/graph": "0.0.568",
-    "@teambit/react-router": "0.0.568",
-    "@teambit/sidebar": "0.0.568",
-    "@teambit/ui-foundation.ui.main-dropdown": "0.0.471",
-    "@teambit/ui-foundation.ui.menu": "0.0.471",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.473",
-    "@teambit/toolbox.time.time-format": "0.0.468",
-    "@teambit/component-id": "0.0.384",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.472",
-    "@teambit/deprecation": "0.0.568",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.472",
-    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.177",
-    "@teambit/ui-foundation.ui.corner": "0.0.478",
-    "@teambit/ui-foundation.ui.notifications.notification-context": "0.0.472",
-    "@teambit/ui-foundation.ui.top-bar": "0.0.474",
+    "@teambit/graph": "0.0.569",
+    "@teambit/react-router": "0.0.569",
+    "@teambit/sidebar": "0.0.569",
+    "@teambit/ui-foundation.ui.main-dropdown": "0.0.472",
+    "@teambit/ui-foundation.ui.menu": "0.0.472",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.474",
+    "@teambit/toolbox.time.time-format": "0.0.469",
+    "@teambit/component-id": "0.0.385",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.473",
+    "@teambit/deprecation": "0.0.569",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.473",
+    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.178",
+    "@teambit/ui-foundation.ui.corner": "0.0.479",
+    "@teambit/ui-foundation.ui.notifications.notification-context": "0.0.473",
+    "@teambit/ui-foundation.ui.top-bar": "0.0.475",
     "@teambit/design.ui.styles.ellipsis": "0.0.346",
     "@teambit/design.ui.styles.muted-italic": "0.0.35",
-    "@teambit/ui-foundation.ui.full-loader": "0.0.471",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.477",
-    "@teambit/ui-foundation.ui.tree.drawer": "0.0.471",
-    "@teambit/explorer.ui.gallery.component-grid": "0.0.471",
-    "@teambit/workspace.ui.empty-workspace": "0.0.473",
-    "@teambit/workspace.ui.workspace-component-card": "0.0.475"
+    "@teambit/ui-foundation.ui.full-loader": "0.0.472",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.478",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.472",
+    "@teambit/explorer.ui.gallery.component-grid": "0.0.472",
+    "@teambit/workspace.ui.empty-workspace": "0.0.474",
+    "@teambit/workspace.ui.workspace-component-card": "0.0.476"
   },
   "devDependencies": {
     "@types/lodash.compact": "3.0.6",
@@ -102,7 +106,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -130,27 +134,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@teambit/legacy": "1.0.181",
         "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/types/asset.d.ts

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,42 @@
+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/index.ts

@@ -0,0 +1 @@
+export { Workspace } from './workspace';

package/ui/workspace/default-component.ts

@@ -0,0 +1,7 @@
+export const defaultComponent = {
+  id: '',
+  server: {
+    url: '',
+    env: '',
+  },
+};

package/ui/workspace/index.ts

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

package/ui/workspace/use-workspace.ts

@@ -0,0 +1,193 @@
+import { useEffect, useMemo } from 'react';
+import { ComponentModel } from '@teambit/component';
+import useLatest from '@react-hook/latest';
+import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { gql } from '@apollo/client';
+import { ComponentID, ComponentIdObj } from '@teambit/component-id';
+
+import { Workspace } from './workspace-model';
+
+type UseWorkspaceOptions = {
+  onComponentAdded?: (component: ComponentModel[]) => void;
+  onComponentUpdated?: (component: ComponentModel[]) => void;
+  onComponentRemoved?: (compId: ComponentID[]) => void;
+};
+type RawComponent = { id: ComponentIdObj };
+
+const wcComponentFields = gql`
+  fragment wcComponentFields on Component {
+    id {
+      name
+      version
+      scope
+    }
+    compositions {
+      identifier
+    }
+    description
+    issuesCount
+    status {
+      isOutdated
+      isNew
+      isInScope
+      isStaged
+      modifyInfo {
+        hasModifiedFiles
+        hasModifiedDependencies
+      }
+      isDeleted
+    }
+    deprecation {
+      isDeprecate
+    }
+    server {
+      env
+      url
+    }
+    env {
+      id
+      icon
+    }
+  }
+`;
+
+const WORKSPACE = gql`
+  query workspace {
+    workspace {
+      name
+      path
+      icon
+      components {
+        ...wcComponentFields
+      }
+    }
+  }
+  ${wcComponentFields}
+`;
+
+const COMPONENT_SUBSCRIPTION_ADDED = gql`
+  subscription OnComponentAdded {
+    componentAdded {
+      component {
+        ...wcComponentFields
+      }
+    }
+  }
+  ${wcComponentFields}
+`;
+
+const COMPONENT_SUBSCRIPTION_CHANGED = gql`
+  subscription OnComponentChanged {
+    componentChanged {
+      component {
+        ...wcComponentFields
+      }
+    }
+  }
+  ${wcComponentFields}
+`;
+
+const COMPONENT_SUBSCRIPTION_REMOVED = gql`
+  subscription OnComponentRemoved {
+    componentRemoved {
+      componentIds {
+        name
+        version
+        scope
+      }
+    }
+  }
+`;
+
+export function useWorkspace(options: UseWorkspaceOptions = {}) {
+  const { data, subscribeToMore, ...rest } = useDataQuery(WORKSPACE);
+  const optionsRef = useLatest(options);
+
+  useEffect(() => {
+    const unSubCompAddition = subscribeToMore({
+      document: COMPONENT_SUBSCRIPTION_ADDED,
+      updateQuery: (prev, { subscriptionData }) => {
+        const update = subscriptionData.data;
+        const addedComponent = update?.componentAdded?.component;
+        if (!addedComponent) return prev;
+
+        const componentExists = prev.workspace.components.find((component: any) =>
+          ComponentID.isEqualObj(component.id, addedComponent.id, { ignoreVersion: true })
+        );
+        if (componentExists) return prev;
+
+        // side effect - trigger observers
+        setTimeout(() => optionsRef.current.onComponentAdded?.([ComponentModel.from(addedComponent)]));
+
+        return {
+          ...prev,
+          workspace: {
+            ...prev.workspace,
+            components: [...prev.workspace.components, addedComponent],
+          },
+        };
+      },
+    });
+
+    const unSubCompChange = subscribeToMore({
+      document: COMPONENT_SUBSCRIPTION_CHANGED,
+      updateQuery: (prev, { subscriptionData }) => {
+        const update = subscriptionData.data;
+        if (!update) return prev;
+
+        const updatedComponent = update.componentChanged.component;
+        // side effect - trigger observers
+        setTimeout(() => optionsRef.current.onComponentUpdated?.([ComponentModel.from(updatedComponent)]));
+
+        return {
+          ...prev,
+          workspace: {
+            ...prev.workspace,
+            components: prev.workspace.components.map((component) =>
+              component.id.name === updatedComponent.id.name ? updatedComponent : component
+            ),
+          },
+        };
+      },
+    });
+
+    const unSubCompRemoved = subscribeToMore({
+      document: COMPONENT_SUBSCRIPTION_REMOVED,
+      updateQuery: (prev, { subscriptionData }) => {
+        const idsToRemove: ComponentIdObj[] | undefined = subscriptionData.data?.componentRemoved?.componentIds;
+        if (!idsToRemove || idsToRemove.length === 0) return prev;
+
+        // side effect - trigger observers
+        setTimeout(() => optionsRef.current.onComponentRemoved?.(idsToRemove.map((id) => ComponentID.fromObject(id))));
+
+        return {
+          ...prev,
+          workspace: {
+            ...prev.workspace,
+            components: prev.workspace.components.filter((component: RawComponent) =>
+              idsToRemove.every((id) => !ComponentID.isEqualObj(id, component.id))
+            ),
+          },
+        };
+      },
+    });
+
+    // TODO - sub to component removal
+
+    return () => {
+      unSubCompAddition();
+      unSubCompChange();
+      unSubCompRemoved();
+    };
+  }, [optionsRef]);
+
+  const workspace = useMemo(() => {
+    return data?.workspace ? Workspace.from(data?.workspace) : undefined;
+  }, [data?.workspace]);
+
+  return {
+    workspace,
+    subscribeToMore,
+    ...rest,
+  };
+}

package/ui/workspace/workspace-context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { Workspace as WorkspaceModel } from './workspace-model';
+
+export const WorkspaceContext: React.Context<WorkspaceModel> = createContext<WorkspaceModel>(WorkspaceModel.empty());

package/ui/workspace/workspace-model.ts

@@ -0,0 +1,66 @@
+// import { ComponentMeta } from '@teambit/component';
+import { ComponentID, ComponentModel, ComponentModelProps } from '@teambit/component';
+import { DeprecationInfo } from '@teambit/deprecation';
+import { Descriptor } from '@teambit/envs';
+
+import { ComponentStatus } from '../../workspace-component/component-status';
+
+export type WorkspaceModelComponent = {
+  id: ComponentID;
+  status: ComponentStatus;
+  deprecation: DeprecationInfo;
+  env: Descriptor;
+};
+
+export type WorkspaceProps = {
+  name: string;
+  path: string;
+  components: ComponentModelProps[];
+  icon: string;
+};
+
+export class Workspace {
+  constructor(
+    /**
+     * name of the workspace.
+     */
+    readonly name: string,
+
+    /**
+     * absolute path of the workspace.
+     */
+    readonly path: string,
+
+    /**
+     * icon of the workspace.
+     */
+    readonly icon: string,
+
+    /**
+     * components container in the workspace.
+     */
+    readonly components: ComponentModel[]
+  ) {}
+
+  /**
+   * return a component from the workspace.
+   */
+  getComponent(id: ComponentID) {
+    return this.components.find((component) => component.id.fullName === id.fullName);
+  }
+
+  static from({ name, path, components, icon }: WorkspaceProps) {
+    return new Workspace(
+      name,
+      path,
+      icon,
+      components.map((value) => {
+        return ComponentModel.from(value);
+      })
+    );
+  }
+
+  static empty() {
+    return new Workspace('', '', '', []);
+  }
+}

package/ui/workspace/workspace-overview/index.ts

@@ -0,0 +1 @@
+export { WorkspaceOverview } from './workspace-overview';

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,23 @@
+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.tsx

@@ -0,0 +1,99 @@
+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

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