@teambit/workspace 1.0.844 → 1.0.846

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

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { ToggleButton } from '@teambit/design.inputs.toggle-button';
+import { BaseFilter } from '@teambit/component.filters.base-filter';
+import type { WorkspaceItem, AggregationType } from './workspace-overview.types';
+import styles from './workspace-overview.module.scss';
+
+export interface WorkspaceFilterPanelProps {
+  aggregation: AggregationType;
+  availableAggregations: AggregationType[];
+  items: WorkspaceItem[];
+}
+
+const LABELS: Record<AggregationType, string> = {
+  namespaces: 'Namespaces',
+  scopes: 'Scopes',
+  none: 'None',
+};
+
+export function WorkspaceFilterPanel({ aggregation, availableAggregations, items }: WorkspaceFilterPanelProps) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const namespaceOptions = useMemo(
+    () =>
+      [...new Set(items.map((i) => i.component.id.namespace || '/'))].map((v) => ({
+        value: v,
+      })),
+    [items]
+  );
+
+  const scopeOptions = useMemo(
+    () =>
+      [...new Set(items.map((i) => i.component.id.scope))].map((v) => ({
+        value: v,
+      })),
+    [items]
+  );
+
+  const activeNamespaces = (searchParams.get('ns') || '')
+    .split(',')
+    .filter(Boolean)
+    .map((v) => ({ value: v }));
+
+  const activeScopes = (searchParams.get('scopes') || '')
+    .split(',')
+    .filter(Boolean)
+    .map((v) => ({ value: v }));
+
+  const applyNs = (opts) => {
+    const list = opts.map((o) => o.value).filter((v): v is string => typeof v === 'string');
+
+    if (list.length) searchParams.set('ns', list.join(','));
+    else searchParams.delete('ns');
+
+    setSearchParams(searchParams);
+  };
+
+  const applyScopes = (opts) => {
+    const list = opts.map((o) => o.value).filter((v): v is string => typeof v === 'string');
+
+    if (list.length) searchParams.set('scopes', list.join(','));
+    else searchParams.delete('scopes');
+
+    setSearchParams(searchParams);
+  };
+
+  const currentIndex = Math.max(
+    0,
+    availableAggregations.findIndex((a) => a === aggregation)
+  );
+
+  const applyAgg = (i: number) => {
+    const agg = availableAggregations[i];
+    searchParams.set('aggregation', agg);
+    setSearchParams(searchParams);
+  };
+
+  return (
+    <div className={styles.filterPanel}>
+      <div className={styles.leftFilters}>
+        <BaseFilter
+          id="namespaces"
+          placeholder="Namespaces"
+          options={namespaceOptions}
+          activeOptions={activeNamespaces}
+          onChange={applyNs}
+          isSearchable
+        />
+
+        <BaseFilter
+          id="scopes"
+          placeholder="Scopes"
+          options={scopeOptions}
+          activeOptions={activeScopes}
+          onChange={applyScopes}
+          isSearchable
+        />
+      </div>
+
+      <div className={styles.rightAggToggle}>
+        <ToggleButton
+          defaultIndex={currentIndex}
+          onOptionSelect={(idx) => applyAgg(idx)}
+          options={availableAggregations.map((agg) => ({
+            value: agg,
+            element: LABELS[agg],
+          }))}
+        />
+      </div>
+    </div>
+  );
+}

package/ui/workspace/workspace-overview/workspace-overview.module.scss

@@ -3,15 +3,11 @@
   overflow-y: auto;
   height: 100%;
   box-sizing: border-box;
+  z-index: 1;
 }
 
 .rightPreviewPlugins {
-  // background-color: var(--surface-color);
   display: flex;
-  // box-shadow: 0px 2px 48px rgb(0 0 0 / 89%);
-  // box-shadow: 0px 2px 160px rgb(0 0 0 / 52%);
-  // border-radius: 8px;
-  // padding: 4px;
   align-items: flex-end;
   justify-content: flex-end;
   width: 100%;
@@ -19,10 +15,7 @@
 }
 
 .envIcon {
-  // padding-right: 4px;
-  // height: 24px;
   height: 14px;
-  // padding-top: 2px;
 }
 
 .badge {
@@ -37,12 +30,173 @@
 }
 
 .cardGrid {
-  grid-column-gap: 10px;
-  grid-gap: 32px 24px;
-  -moz-column-gap: 10px;
-  column-gap: 10px;
   display: grid;
   gap: 32px 24px;
   grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
   max-width: 1280px;
+  grid-column-gap: 28px;
+  grid-row-gap: 32px;
+}
+
+.filterPanel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  position: relative;
+  z-index: 100000;
+}
+
+.aggButtons {
+  display: inline-flex;
+  background: var(--surface-1-color);
+  border: 1px solid var(--border-medium-color);
+  border-radius: 8px;
+  padding: 2px;
+  height: 34px;
+}
+
+.aggButton,
+.aggActive {
+  padding: 4px 12px;
+  font-size: 14px;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+}
+
+.aggButton:hover {
+  background: var(--surface-hover-color);
+}
+
+.aggActive {
+  background: var(--brand-primary-color);
+  color: white;
+}
+
+.dropdownList {
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dropdownItem input {
+  width: 16px;
+  height: 16px;
+}
+
+.count {
+  opacity: 0.55;
+}
+
+.agg {
+  margin-bottom: 28px;
+}
+
+.aggregationTitle {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+:global(.componentGrid) {
+  grid-row-gap: 24px !important;
+  grid-column-gap: 16px !important;
+}
+
+.filterPanel :global(.baseFilter) {
+  max-width: 220px;
+  height: 32px;
+}
+
+.filterPanel :global(.control) {
+  border-radius: 8px !important;
+  height: 32px;
+  padding: 0 10px !important;
+}
+
+.filterPanel :global(.menu) {
+  z-index: 200000 !important;
+  border-radius: 8px !important;
+  padding: 8px 0 !important;
+}
+
+.filterDropdown :global(.baseFilter) {
+  height: 32px;
+  max-width: 240px;
+  font-size: 14px;
+}
+
+.filterDropdown :global(.baseFilter .control) {
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+
+.filterDropdown :global(.menu) {
+  margin-top: 10px;
+  padding: 12px 0;
+  min-width: 260px;
+  border-radius: 12px;
+
+  box-shadow: var(--bit-shadow-hover-low, 0 2px 8px rgba(0, 0, 0, 0.1));
+  border: 1px solid var(--border-medium-color, #ededed);
+}
+
+.filterDropdown :global(.checkboxContainer) {
+  padding-left: 14px;
+}
+
+.filterDropdown :global(.checkbox) {
+  margin-right: 12px;
+  accent-color: var(--bit-accent-color, #6c5ce7);
+}
+
+.filterDropdown :global(.buttonsSection) {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-medium-color, #ededed);
+}
+
+.filterDropdown :global(.placeholder > span:not(:first-child)) {
+  margin-left: 8px;
+}
+
+.filterPanel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  gap: 16px;
+}
+
+.leftFilters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.rightAggToggle {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  grid-row-gap: 32px;
+  grid-column-gap: 24px;
+  max-width: 1280px;
 }

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

@@ -0,0 +1,29 @@
+const PRIORITY_HIGH = ['ui', 'pages'];
+const PRIORITY_MED = ['design'];
+const PRIORITY_LOW = ['entities', 'provider', 'hooks', 'icons'];
+
+function root(ns: string) {
+  if (!ns) return '';
+  return ns.split('/')[0];
+}
+
+function priorityOf(ns: string) {
+  const r = root(ns);
+
+  if (PRIORITY_HIGH.includes(r)) return 0;
+  if (PRIORITY_MED.includes(r)) return 1;
+  if (PRIORITY_LOW.includes(r)) return 3;
+
+  return 2;
+}
+
+export function sortNamespacesAdvanced(arr: string[]) {
+  return [...arr].sort((a, b) => {
+    const pa = priorityOf(a);
+    const pb = priorityOf(b);
+
+    if (pa !== pb) return pa - pb;
+
+    return a.localeCompare(b);
+  });
+}

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

@@ -1,66 +1,87 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
 import { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';
 import { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';
 import { Tooltip } from '@teambit/design.ui.tooltip';
 import { ComponentID } from '@teambit/component-id';
 import type { ComponentModel } from '@teambit/component';
-import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
+import compact from 'lodash.compact';
 import { ScopeID } from '@teambit/scopes.scope-id';
-import { compact } from 'lodash';
+import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
+import { useSearchParams } from 'react-router-dom';
 import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
 import type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
 import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
+import { H3 } from '@teambit/design.ui.heading';
 import { WorkspaceContext } from '../workspace-context';
-import styles from './workspace-overview.module.scss';
 import { LinkPlugin } from './link-plugin';
+import { useWorkspaceAggregation } from './use-workspace-aggregation';
+import { WorkspaceFilterPanel } from './workspace-filter-panel';
+import styles from './workspace-overview.module.scss';
 
 export function WorkspaceOverview() {
   const workspace = useContext(WorkspaceContext);
-  const { isMinimal } = useWorkspaceMode();
-  const compModelsById = new Map(workspace.components.map((comp) => [comp.id.toString(), comp]));
   const { components, componentDescriptors } = workspace;
-  const uniqueScopes = new Set(components.map((c) => c.id.scope));
-  const uniqueScopesArr = Array.from(uniqueScopes);
-  const { cloudScopes = [] } = useCloudScopes(uniqueScopesArr);
-  const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));
 
-  const plugins = useCardPlugins({ compModelsById, showPreview: isMinimal });
+  if (!components.length) return <EmptyWorkspace name={workspace.name} />;
 
-  if (!components || components.length === 0) return <EmptyWorkspace name={workspace.name} />;
+  const { isMinimal } = useWorkspaceMode();
+  const compModelsById = useMemo(() => new Map(components.map((c) => [c.id.toString(), c])), [components]);
+
+  const uniqueScopes = [...new Set(components.map((c) => c.id.scope))];
+  const { cloudScopes } = useCloudScopes(uniqueScopes);
+  const cloudMap = new Map((cloudScopes || []).map((s) => [s.id.toString(), s]));
+
+  const compDescriptorMap = new Map(componentDescriptors.map((d) => [d.id.toString(), d]));
 
-  const compDescriptorById = new Map(componentDescriptors.map((comp) => [comp.id.toString(), comp]));
-  const componentsWithDescriptorAndScope = compact(
+  const items = compact(
     components.map((component) => {
       if (component.deprecation?.isDeprecate) return null;
-      const componentDescriptor = compDescriptorById.get(component.id.toString());
-      if (!componentDescriptor) return null;
-      const cloudScope = cloudScopesById.get(component.id.scope);
+
+      const descriptor = compDescriptorMap.get(component.id.toString());
+      if (!descriptor) return null;
+
+      const cloudScope = cloudMap.get(component.id.scope);
       const scope =
         cloudScope ||
         (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
         undefined;
 
-      return { component, componentDescriptor, scope };
+      return { component, componentDescriptor: descriptor, scope: (scope && { id: scope.id }) || undefined };
     })
   );
 
+  const [searchParams] = useSearchParams();
+  const aggregation = (searchParams.get('aggregation') as any) || 'namespaces';
+
+  const { groups, groupType, availableAggregations, filteredCount } = useWorkspaceAggregation(items, aggregation);
+
+  const plugins = useCardPlugins({ compModelsById, showPreview: isMinimal });
+
   return (
     <div className={styles.container}>
-      <ComponentGrid className={styles.cardGrid}>
-        {componentsWithDescriptorAndScope.map(({ component, componentDescriptor, scope }) => {
-          return (
-            <WorkspaceComponentCard
-              key={component.id.toString()}
-              componentDescriptor={componentDescriptor}
-              component={component}
-              plugins={plugins}
-              scope={scope}
-              shouldShowPreviewState={isMinimal}
-            />
-          );
-        })}
-      </ComponentGrid>
+      <WorkspaceFilterPanel aggregation={aggregation} availableAggregations={availableAggregations} items={items} />
+
+      {filteredCount === 0 && <EmptyWorkspace name={workspace.name} />}
+
+      {groups.map((group) => (
+        <section key={group.name} className={styles.agg}>
+          {groupType !== 'none' && <H3 className={styles.aggregationTitle}>{group.displayName}</H3>}
+
+          <ComponentGrid className={styles.cardGrid}>
+            {group.items.map((item) => (
+              <WorkspaceComponentCard
+                key={item.component.id.toString()}
+                component={item.component}
+                componentDescriptor={item.componentDescriptor}
+                scope={item.scope}
+                plugins={plugins}
+                shouldShowPreviewState={isMinimal}
+              />
+            ))}
+          </ComponentGrid>
+        </section>
+      ))}
     </div>
   );
 }

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

@@ -0,0 +1,24 @@
+import type { ComponentModel } from '@teambit/component';
+import type { ComponentDescriptor } from '@teambit/component-descriptor';
+import type { ScopeID } from '@teambit/scopes.scope-id';
+
+export interface WorkspaceItem {
+  component: ComponentModel;
+  componentDescriptor: ComponentDescriptor;
+  scope?: { id: ScopeID };
+}
+
+export type AggregationType = 'namespaces' | 'scopes' | 'none';
+
+export interface AggregationGroup {
+  name: string;
+  displayName: string;
+  items: WorkspaceItem[];
+}
+
+export interface AggregationResult {
+  groups: AggregationGroup[];
+  groupType: AggregationType;
+  availableAggregations: AggregationType[];
+  filteredCount: number;
+}