@teambit/workspace 0.0.743 → 0.0.744

package/dist/ui/workspace/workspace.js

@@ -207,10 +207,10 @@ function Workspace({
     tooltipContent: `${isSidebarOpen ? 'Hide' : 'Show'} side panel`
   })), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, null, /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
     slot: routeSlot
-  }), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
-    exact: true,
-    path: "/"
-  }, /*#__PURE__*/_react().default.createElement(_workspaceOverview().WorkspaceOverview, null))))));
+  }, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
+    index: true,
+    element: /*#__PURE__*/_react().default.createElement(_workspaceOverview().WorkspaceOverview, null)
+  }))))));
 }
 
 function useComponentNotifications() {

package/dist/ui/workspace/workspace.js.map

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

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

@@ -73,9 +73,7 @@ export declare class WorkspaceUI {
     private menuItems;
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
-    static slots: (((registerFn: () => string) => SlotRegistry<ComponentTreeNode>) | ((registerFn: () => string) => SlotRegistry<RouteProps<string, {
-        [x: string]: string | undefined;
-    }>>) | ((registerFn: () => string) => SlotRegistry<DrawerWidgetSlot>))[];
+    static slots: (((registerFn: () => string) => SlotRegistry<ComponentTreeNode>) | ((registerFn: () => string) => SlotRegistry<RouteProps>) | ((registerFn: () => string) => SlotRegistry<DrawerWidgetSlot>))[];
     static provider([ui, componentUi, sidebar, componentTree, commandBarUI, graphUI]: [
         UiUI,
         ComponentUI,

package/dist/workspace.ui.runtime.js

@@ -284,8 +284,8 @@ class WorkspaceUI {
     this.setKeyBindHandler = setKeyBindHandler;
     return {
       routes: [{
-        path: '/',
-        children: /*#__PURE__*/_react().default.createElement(_ui2().Workspace, {
+        path: '/*',
+        element: /*#__PURE__*/_react().default.createElement(_ui2().Workspace, {
           menuSlot: this.menuSlot,
           routeSlot: this.routeSlot,
           sidebar: /*#__PURE__*/_react().default.createElement(this.sidebar.render, {
@@ -317,18 +317,17 @@ class WorkspaceUI {
       icon: "comps"
     }, "Gallery"));
     workspaceUI.registerMenuRoutes([{
-      exact: true,
       path: '/',
-      children: /*#__PURE__*/_react().default.createElement(_uiFoundationUi().Menu, {
+      element: /*#__PURE__*/_react().default.createElement(_uiFoundationUi().Menu, {
         menuItemSlot: workspaceUI.menuItemSlot
       })
     }, {
       path: workspaceUI.componentUi.routePath,
-      children: workspaceUI.componentUi.getMenu(_workspace().WorkspaceAspect.id)
+      element: workspaceUI.componentUi.getMenu(_workspace().WorkspaceAspect.id)
     }]);
     workspaceUI.registerRoutes([{
       path: workspaceUI.componentUi.routePath,
-      children: workspaceUI.componentUi.getComponentUI(_workspace().WorkspaceAspect.id)
+      element: workspaceUI.componentUi.getComponentUI(_workspace().WorkspaceAspect.id)
     }]);
     return workspaceUI;
   }

package/dist/workspace.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["WorkspaceUI","constructor","routeSlot","componentUi","menuSlot","menuItemSlot","sidebar","sidebarSlot","sidebarItemSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","commandBarUI","menuItems","register","routes","components","updateComponents","links","filters","widgets","category","title","keyChar","handler","run","registerRoutes","registerDrawers","drawers","registerDrawer","registerSidebarWidget","componentTreeNode","uiRoot","workspaceDrawer","treeWidgets","filtersSlot","setKeyBindHandler","addCommand","id","action","displayName","keybinding","path","children","provider","ui","componentTree","graphUI","config","registerTreeNode","ComponentTreeWidget","registerComponentWidget","widget","workspaceUI","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","registerDrawerWidgets","registerRoot","bind","registerMenuItem","registerSidebarLink","registerMenuRoutes","exact","routePath","getMenu","WorkspaceAspect","getComponentUI","UIAspect","ComponentAspect","SidebarAspect","ComponentTreeAspect","CommandBarAspect","GraphAspect","UIRuntime","Slot","withType","addRuntime"],"sources":["workspace.ui.runtime.tsx"],"sourcesContent":["import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';\nimport { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Menu } from '@teambit/ui-foundation.ui.menu';\nimport SidebarAspect, { SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport { GraphAspect, GraphUI } from '@teambit/graph';\nimport React, { ReactNode } from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport CommandBarAspect, { CommandBarUI, CommandHandler } from '@teambit/command-bar';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { ComponentFilters, DeprecateFilter, EnvsFilter } from '@teambit/component.ui.component-filters';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentTreeWidget } from './component-tree.widget';\nimport { Workspace } from './ui';\nimport { WorkspaceAspect } from './workspace.aspect';\nimport { workspaceDrawer } from './workspace.ui.drawer';\n\nexport type SidebarWidgetSlot = SlotRegistry<ComponentTreeNode>;\n\nexport class WorkspaceUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    private drawerWidgetSlot: DrawerWidgetSlot,\n\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot,\n\n    private commandBarUI: CommandBarUI\n  ) {}\n\n  private setKeyBindHandler: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a route to the workspace.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerDrawers(...drawers: DrawerType[]) {\n    this.sidebar.registerDrawer(...drawers);\n    return this;\n  }\n\n  registerSidebarWidget(componentTreeNode: ComponentTreeNode) {\n    this.sidebarSlot.register(componentTreeNode);\n    return this;\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  setComponents = (components: ComponentModel[]) => {\n    this.componentUi.updateComponents(components);\n  };\n\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  uiRoot(): UIRoot {\n    this.registerDrawers(\n      workspaceDrawer({\n        treeWidgets: this.sidebarSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n      })\n    );\n\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      action: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setKeyBindHandler = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/',\n          children: (\n            <Workspace\n              menuSlot={this.menuSlot}\n              routeSlot={this.routeSlot}\n              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n              workspaceUI={this}\n              onSidebarTogglerChange={this.setKeyBindHandler}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, ComponentTreeAspect, CommandBarAspect, GraphAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, componentTree, commandBarUI, graphUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      ComponentTreeUI,\n      CommandBarUI,\n      GraphUI\n    ],\n    config,\n    [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot]: [\n      RouteSlot,\n      RouteSlot,\n      MenuItemSlot,\n      SidebarWidgetSlot,\n      SidebarItemSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot\n    ]\n  ) {\n    componentTree.registerTreeNode(new ComponentTreeWidget());\n    sidebarSlot.register(new ComponentTreeWidget());\n    graphUI.registerComponentWidget(new ComponentTreeWidget().widget);\n\n    const workspaceUI = new WorkspaceUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      menuItemSlot,\n      sidebar,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      commandBarUI\n    );\n\n    workspaceUI.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter]);\n    workspaceUI.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    ui.registerRoot(workspaceUI.uiRoot.bind(workspaceUI));\n    workspaceUI.registerMenuItem(workspaceUI.menuItems);\n\n    workspaceUI.registerSidebarLink(() => (\n      <MenuLinkItem exact href=\"/\" icon=\"comps\">\n        Gallery\n      </MenuLinkItem>\n    ));\n\n    workspaceUI.registerMenuRoutes([\n      {\n        exact: true,\n        path: '/',\n        children: <Menu menuItemSlot={workspaceUI.menuItemSlot} />,\n      },\n      {\n        path: workspaceUI.componentUi.routePath,\n        children: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),\n      },\n    ]);\n\n    workspaceUI.registerRoutes([\n      {\n        path: workspaceUI.componentUi.routePath,\n        children: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),\n      },\n    ]);\n\n    return workspaceUI;\n  }\n}\n\nexport default WorkspaceUI;\n\nWorkspaceAspect.addRuntime(WorkspaceUI);\n"],"mappings":"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"}
+{"version":3,"names":["WorkspaceUI","constructor","routeSlot","componentUi","menuSlot","menuItemSlot","sidebar","sidebarSlot","sidebarItemSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","commandBarUI","menuItems","register","routes","components","updateComponents","links","filters","widgets","category","title","keyChar","handler","run","registerRoutes","registerDrawers","drawers","registerDrawer","registerSidebarWidget","componentTreeNode","uiRoot","workspaceDrawer","treeWidgets","filtersSlot","setKeyBindHandler","addCommand","id","action","displayName","keybinding","path","element","provider","ui","componentTree","graphUI","config","registerTreeNode","ComponentTreeWidget","registerComponentWidget","widget","workspaceUI","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","registerDrawerWidgets","registerRoot","bind","registerMenuItem","registerSidebarLink","registerMenuRoutes","routePath","getMenu","WorkspaceAspect","getComponentUI","UIAspect","ComponentAspect","SidebarAspect","ComponentTreeAspect","CommandBarAspect","GraphAspect","UIRuntime","Slot","withType","addRuntime"],"sources":["workspace.ui.runtime.tsx"],"sourcesContent":["import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';\nimport { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Menu } from '@teambit/ui-foundation.ui.menu';\nimport SidebarAspect, { SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport { GraphAspect, GraphUI } from '@teambit/graph';\nimport React, { ReactNode } from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport CommandBarAspect, { CommandBarUI, CommandHandler } from '@teambit/command-bar';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { ComponentFilters, DeprecateFilter, EnvsFilter } from '@teambit/component.ui.component-filters';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentTreeWidget } from './component-tree.widget';\nimport { Workspace } from './ui';\nimport { WorkspaceAspect } from './workspace.aspect';\nimport { workspaceDrawer } from './workspace.ui.drawer';\n\nexport type SidebarWidgetSlot = SlotRegistry<ComponentTreeNode>;\n\nexport class WorkspaceUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    private drawerWidgetSlot: DrawerWidgetSlot,\n\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot,\n\n    private commandBarUI: CommandBarUI\n  ) {}\n\n  private setKeyBindHandler: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a route to the workspace.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerDrawers(...drawers: DrawerType[]) {\n    this.sidebar.registerDrawer(...drawers);\n    return this;\n  }\n\n  registerSidebarWidget(componentTreeNode: ComponentTreeNode) {\n    this.sidebarSlot.register(componentTreeNode);\n    return this;\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  setComponents = (components: ComponentModel[]) => {\n    this.componentUi.updateComponents(components);\n  };\n\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  uiRoot(): UIRoot {\n    this.registerDrawers(\n      workspaceDrawer({\n        treeWidgets: this.sidebarSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n      })\n    );\n\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      action: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setKeyBindHandler = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/*',\n          element: (\n            <Workspace\n              menuSlot={this.menuSlot}\n              routeSlot={this.routeSlot}\n              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n              workspaceUI={this}\n              onSidebarTogglerChange={this.setKeyBindHandler}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, ComponentTreeAspect, CommandBarAspect, GraphAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, componentTree, commandBarUI, graphUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      ComponentTreeUI,\n      CommandBarUI,\n      GraphUI\n    ],\n    config,\n    [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot]: [\n      RouteSlot,\n      RouteSlot,\n      MenuItemSlot,\n      SidebarWidgetSlot,\n      SidebarItemSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot\n    ]\n  ) {\n    componentTree.registerTreeNode(new ComponentTreeWidget());\n    sidebarSlot.register(new ComponentTreeWidget());\n    graphUI.registerComponentWidget(new ComponentTreeWidget().widget);\n\n    const workspaceUI = new WorkspaceUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      menuItemSlot,\n      sidebar,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      commandBarUI\n    );\n\n    workspaceUI.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter]);\n    workspaceUI.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    ui.registerRoot(workspaceUI.uiRoot.bind(workspaceUI));\n    workspaceUI.registerMenuItem(workspaceUI.menuItems);\n\n    workspaceUI.registerSidebarLink(() => (\n      <MenuLinkItem exact href=\"/\" icon=\"comps\">\n        Gallery\n      </MenuLinkItem>\n    ));\n\n    workspaceUI.registerMenuRoutes([\n      {\n        path: '/',\n        element: <Menu menuItemSlot={workspaceUI.menuItemSlot} />,\n      },\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),\n      },\n    ]);\n\n    workspaceUI.registerRoutes([\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),\n      },\n    ]);\n\n    return workspaceUI;\n  }\n}\n\nexport default WorkspaceUI;\n\nWorkspaceAspect.addRuntime(WorkspaceUI);\n"],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "0.0.743",
+  "version": "0.0.744",
   "homepage": "https://bit.dev/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "0.0.743"
+    "version": "0.0.744"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -22,7 +22,6 @@
     "fs-extra": "10.0.0",
     "memoizee": "0.4.15",
     "multimatch": "5.0.0",
-    "react-router-dom": "5.2.0",
     "detect-indent": "5.0.0",
     "detect-newline": "3.1.0",
     "stringify-package": "1.0.1",
@@ -40,54 +39,54 @@
     "@teambit/bit-error": "0.0.394",
     "@teambit/component-id": "0.0.402",
     "@teambit/legacy-bit-id": "0.0.399",
-    "@teambit/logger": "0.0.585",
-    "@teambit/scope": "0.0.743",
+    "@teambit/logger": "0.0.586",
+    "@teambit/scope": "0.0.744",
     "@teambit/cli": "0.0.493",
-    "@teambit/isolator": "0.0.743",
-    "@teambit/component-tree": "0.0.531",
+    "@teambit/isolator": "0.0.744",
+    "@teambit/component-tree": "0.0.532",
     "@teambit/component.ui.component-status-resolver": "0.0.492",
-    "@teambit/lanes.ui.lanes": "0.0.59",
+    "@teambit/lanes.ui.lanes": "0.0.60",
     "@teambit/harmony.modules.resolved-component": "0.0.484",
-    "@teambit/dependency-resolver": "0.0.743",
-    "@teambit/compiler": "0.0.743",
-    "@teambit/component": "0.0.743",
-    "@teambit/graphql": "0.0.743",
-    "@teambit/aspect-loader": "0.0.743",
-    "@teambit/bundler": "0.0.743",
+    "@teambit/dependency-resolver": "0.0.744",
+    "@teambit/compiler": "0.0.744",
+    "@teambit/component": "0.0.744",
+    "@teambit/graphql": "0.0.744",
+    "@teambit/aspect-loader": "0.0.744",
+    "@teambit/bundler": "0.0.744",
     "@teambit/community": "0.0.41",
-    "@teambit/envs": "0.0.743",
-    "@teambit/pubsub": "0.0.743",
-    "@teambit/ui": "0.0.743",
+    "@teambit/envs": "0.0.744",
+    "@teambit/pubsub": "0.0.744",
+    "@teambit/ui": "0.0.744",
     "@teambit/variants": "0.0.589",
     "@teambit/component-issues": "0.0.53",
     "@teambit/config": "0.0.506",
     "@teambit/harmony.modules.requireable-component": "0.0.484",
-    "@teambit/importer": "0.0.172",
+    "@teambit/importer": "0.0.173",
     "@teambit/lane-id": "0.0.12",
     "@teambit/workspace.modules.match-pattern": "0.0.489",
-    "@teambit/component.ui.component-drawer": "0.0.38",
+    "@teambit/component.ui.component-drawer": "0.0.39",
     "@teambit/design.ui.tree": "0.0.5",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.556",
-    "@teambit/command-bar": "0.0.743",
-    "@teambit/component.ui.component-filters": "0.0.4",
-    "@teambit/graph": "0.0.743",
-    "@teambit/sidebar": "0.0.743",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.557",
+    "@teambit/command-bar": "0.0.744",
+    "@teambit/component.ui.component-filters": "0.0.5",
+    "@teambit/graph": "0.0.744",
+    "@teambit/sidebar": "0.0.744",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.487",
     "@teambit/ui-foundation.ui.menu": "0.0.487",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.489",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.490",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.499",
     "@teambit/toolbox.time.time-format": "0.0.483",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
     "@teambit/component-descriptor": "0.0.55",
-    "@teambit/deprecation": "0.0.743",
+    "@teambit/deprecation": "0.0.744",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.194",
-    "@teambit/ui-foundation.ui.corner": "0.0.497",
+    "@teambit/ui-foundation.ui.corner": "0.0.498",
     "@teambit/ui-foundation.ui.notifications.notification-context": "0.0.487",
-    "@teambit/ui-foundation.ui.top-bar": "0.0.491",
+    "@teambit/ui-foundation.ui.top-bar": "0.0.492",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.486",
-    "@teambit/workspace.ui.empty-workspace": "0.0.491",
-    "@teambit/workspace.ui.workspace-component-card": "0.0.496"
+    "@teambit/workspace.ui.empty-workspace": "0.0.492",
+    "@teambit/workspace.ui.workspace-component-card": "0.0.497"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -95,7 +94,6 @@
     "@types/react": "^17.0.8",
     "@types/fs-extra": "9.0.7",
     "@types/memoizee": "0.4.5",
-    "@types/react-router-dom": "5.1.7",
     "@types/pluralize": "0.0.29",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
@@ -105,6 +103,7 @@
     "@teambit/workspace.content.workspace-overview": "1.95.0"
   },
   "peerDependencies": {
+    "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.0.0",
     "@teambit/legacy": "1.0.273",
     "react-dom": "^16.8.0 || ^17.0.0",

package/{preview-1653708349111.js → preview-1653827208409.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.workspace_workspace@0.0.743/dist/workspace.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.workspace_workspace@0.0.743/dist/workspace.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.workspace_workspace@0.0.744/dist/workspace.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.workspace_workspace@0.0.744/dist/workspace.docs.mdx')]

package/ui/workspace/workspace.tsx

@@ -64,10 +64,9 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
             />
           </HoverSplitter>
           <Pane>
-            <SlotRouter slot={routeSlot} />
-            <Route exact path="/">
-              <WorkspaceOverview />
-            </Route>
+            <SlotRouter slot={routeSlot}>
+              <Route index element={<WorkspaceOverview />} />
+            </SlotRouter>
           </Pane>
         </SplitPane>
       </div>

package/workspace.ui.runtime.tsx

@@ -129,8 +129,8 @@ export class WorkspaceUI {
     return {
       routes: [
         {
-          path: '/',
-          children: (
+          path: '/*',
+          element: (
             <Workspace
               menuSlot={this.menuSlot}
               routeSlot={this.routeSlot}
@@ -226,20 +226,19 @@ export class WorkspaceUI {
 
     workspaceUI.registerMenuRoutes([
       {
-        exact: true,
         path: '/',
-        children: <Menu menuItemSlot={workspaceUI.menuItemSlot} />,
+        element: <Menu menuItemSlot={workspaceUI.menuItemSlot} />,
       },
       {
         path: workspaceUI.componentUi.routePath,
-        children: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),
+        element: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),
       },
     ]);
 
     workspaceUI.registerRoutes([
       {
         path: workspaceUI.componentUi.routePath,
-        children: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),
+        element: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),
       },
     ]);