@teambit/workspace 1.0.1079 → 1.0.1081

package/ui/workspace/workspace-overview/use-workspace-aggregation.ts

@@ -1,79 +0,0 @@
-import { useMemo } from 'react';
-import { sortNamespacesAdvanced, sortItemsByNamespace } from './namespace-sort';
-import { filterItems, type ActiveFilters } from './filter-utils';
-import type { WorkspaceItem, AggregationType, AggregationGroup, AggregationResult } from './workspace-overview.types';
-
-export function useWorkspaceAggregation(
-  items: WorkspaceItem[],
-  aggregation: AggregationType,
-  filters: ActiveFilters
-): AggregationResult {
-  const filtered = useMemo(() => filterItems(items, filters), [items, filters]);
-
-  if (aggregation === 'none') {
-    return {
-      groups: [
-        {
-          name: 'all',
-          displayName: '',
-          items: sortItemsByNamespace(filtered),
-        },
-      ],
-      groupType: 'none',
-      availableAggregations: ['namespaces', 'scopes', 'none'],
-      filteredCount: filtered.length,
-    };
-  }
-
-  if (aggregation === 'namespaces') {
-    const map = new Map<string, WorkspaceItem[]>();
-    for (const item of filtered) {
-      const ns = item.component.id.namespace || '/';
-      if (!map.has(ns)) map.set(ns, []);
-      map.get(ns)!.push(item);
-    }
-
-    const sortedKeys = sortNamespacesAdvanced([...map.keys()]);
-
-    const groups: AggregationGroup[] = sortedKeys.map((ns) => ({
-      name: ns,
-      displayName: ns,
-      items: sortItemsByNamespace(map.get(ns)!),
-    }));
-
-    return {
-      groups,
-      groupType: 'namespaces',
-      availableAggregations: ['namespaces', 'scopes', 'none'],
-      filteredCount: filtered.length,
-    };
-  }
-
-  const map = new Map<string, WorkspaceItem[]>();
-  for (const item of filtered) {
-    const scope = item.component.id.scope;
-    if (!map.has(scope)) map.set(scope, []);
-    map.get(scope)!.push(item);
-  }
-
-  const sortedScopes = [...map.keys()].sort();
-
-  const groups: AggregationGroup[] = sortedScopes.map((sc) => {
-    const groupItems = map.get(sc)!;
-    const sampleScope = groupItems.find((i) => i.scope?.icon)?.scope;
-    return {
-      name: sc,
-      displayName: sc,
-      items: sortItemsByNamespace(groupItems),
-      scopeIcon: sampleScope?.icon,
-      scopeIconColor: sampleScope?.backgroundIconColor,
-    };
-  });
-
-  return {
-    groups,
-    groupType: 'scopes',
-    availableAggregations: ['namespaces', 'scopes', 'none'],
-    filteredCount: filtered.length,
-  };
-}

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

@@ -1,109 +0,0 @@
-import React, { useMemo } from 'react';
-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;
-  onAggregationChange: (agg: AggregationType) => void;
-  availableAggregations: AggregationType[];
-  items: WorkspaceItem[];
-  activeNamespaces: string[];
-  onNamespacesChange: (namespaces: string[]) => void;
-  activeScopes: string[];
-  onScopesChange: (scopes: string[]) => void;
-}
-
-const LABELS: Record<AggregationType, string> = {
-  namespaces: 'Namespaces',
-  scopes: 'Scopes',
-  none: 'None',
-};
-
-export function WorkspaceFilterPanel({
-  aggregation,
-  onAggregationChange,
-  availableAggregations,
-  items,
-  activeNamespaces,
-  onNamespacesChange,
-  activeScopes,
-  onScopesChange,
-}: WorkspaceFilterPanelProps) {
-  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 activeNsOptions = activeNamespaces.map((v) => ({ value: v }));
-  const activeScopeOptions = activeScopes.map((v) => ({ value: v }));
-
-  const applyNs = (opts: readonly { value?: string }[] | { value?: string } | null) => {
-    const arr = Array.isArray(opts) ? opts : opts ? [opts] : [];
-    const list = arr.map((o) => o.value).filter((v): v is string => typeof v === 'string');
-    onNamespacesChange(list);
-  };
-
-  const applyScopes = (opts: readonly { value?: string }[] | { value?: string } | null) => {
-    const arr = Array.isArray(opts) ? opts : opts ? [opts] : [];
-    const list = arr.map((o) => o.value).filter((v): v is string => typeof v === 'string');
-    onScopesChange(list);
-  };
-
-  const currentIndex = Math.max(
-    0,
-    availableAggregations.findIndex((a) => a === aggregation)
-  );
-
-  const applyAgg = (i: number) => {
-    const agg = availableAggregations[i];
-    onAggregationChange(agg);
-  };
-
-  return (
-    <div className={styles.commandBar}>
-      <div className={styles.leftCluster}>
-        <BaseFilter
-          id="namespaces"
-          placeholder="Namespaces"
-          options={namespaceOptions}
-          activeOptions={activeNsOptions}
-          onChange={applyNs}
-          isSearchable
-        />
-        <BaseFilter
-          id="scopes"
-          placeholder="Scopes"
-          options={scopeOptions}
-          activeOptions={activeScopeOptions}
-          onChange={applyScopes}
-          isSearchable
-        />
-      </div>
-
-      <div className={styles.rightCluster}>
-        <ToggleButton
-          className={styles.aggToggle}
-          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

@@ -1,91 +0,0 @@
-@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
-
-.container {
-  overflow-y: auto;
-  height: 100%;
-  box-sizing: border-box;
-  z-index: 1;
-}
-
-.content {
-  padding: 20px 40px 80px;
-}
-
-/* ---- Command bar ---- */
-
-.commandBar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  padding: 12px 40px;
-  background: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 3%, var(--background-color, #fff));
-  border-bottom: 1px solid var(--border-medium-color);
-  position: sticky;
-  top: 0;
-  z-index: $modal-z-index - 1;
-}
-
-.leftCluster {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.rightCluster {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-}
-
-.aggToggle {
-  height: 32px !important;
-  font-size: 12.5px;
-  --surface02-color: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 20%, var(--surface-color, #f5f5f5));
-}
-
-/* ---- Base filter overrides ---- */
-
-.commandBar :global(.baseFilter) {
-  max-width: 220px;
-  height: 32px;
-}
-
-.commandBar :global(.control) {
-  border-radius: 8px !important;
-  height: 32px;
-  padding: 0 10px !important;
-}
-
-.commandBar :global(.menu) {
-  z-index: $modal-z-index - 1 !important;
-  border-radius: 14px !important;
-  padding: 8px 0 !important;
-  width: 260px;
-  box-shadow: 0 24px 60px -12px rgba(20, 0, 104, 0.2);
-}
-
-/* ---- Section ---- */
-
-.section {
-  margin-bottom: 40px;
-}
-
-.sectionHeader {
-  position: sticky;
-  top: 57px;
-  z-index: $nav-z-index;
-  background: var(--background-color);
-  padding: 12px 0 18px;
-}
-
-/* ---- Card grid ---- */
-
-.cardGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 14px;
-}

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

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

@@ -1,30 +0,0 @@
-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; icon?: string; backgroundIconColor?: string };
-}
-
-export type AggregationType = 'namespaces' | 'scopes' | 'none';
-
-export type Density = 'compact' | 'comfy';
-
-export type ComponentStatus = 'built' | 'changed' | 'building' | 'queued';
-
-export interface AggregationGroup {
-  name: string;
-  displayName: string;
-  items: WorkspaceItem[];
-  scopeIcon?: string;
-  scopeIconColor?: string;
-}
-
-export interface AggregationResult {
-  groups: AggregationGroup[];
-  groupType: AggregationType;
-  availableAggregations: AggregationType[];
-  filteredCount: number;
-}