@teambit/workspace 1.0.1079 → 1.0.1081

package/ui/workspace/workspace-overview/hope-component-card.module.scss

@@ -1,169 +0,0 @@
-.card {
-  position: relative;
-  border-radius: 10px;
-  overflow: hidden;
-  background: var(--surface-color);
-  border: 1px solid var(--border-medium-color);
-  cursor: pointer;
-  transition:
-    box-shadow 0.15s ease,
-    border-color 0.15s ease;
-
-  &:hover {
-    box-shadow: 0 4px 14px rgba(20, 0, 104, 0.06);
-  }
-}
-
-.cardBuilding {
-  composes: card;
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-.linkWrapper {
-  text-decoration: none;
-  color: inherit;
-  display: block;
-}
-
-/* ---- Preview ---- */
-
-.preview {
-  height: 180px;
-  position: relative;
-  overflow: hidden;
-  background: var(--surface-color);
-  border-bottom: 1px solid var(--border-medium-color);
-}
-
-.previewQueued {
-  composes: preview;
-  background: var(--surface01-color);
-}
-
-.previewInner {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-}
-
-/* ---- Env badge ---- */
-
-.envBadge {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  background: var(--surface-color);
-  padding: 4px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  z-index: 3;
-}
-
-.envIcon {
-  height: 14px;
-  display: block;
-}
-
-/* ---- Status corner ---- */
-
-.statusCorner {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 2;
-}
-
-/* ---- Footer ---- */
-
-.footer {
-  padding: 8px 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.name {
-  flex: 1;
-  min-width: 0;
-  font-size: 12.5px;
-  font-weight: 500;
-  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
-  color: var(--on-background-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  letter-spacing: -0.01em;
-}
-
-.nameQueued {
-  composes: name;
-  color: var(--on-background-medium-color);
-}
-
-.hash {
-  font-size: 10.5px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  background: var(--surface01-color);
-  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
-  color: var(--on-background-low-color);
-  flex-shrink: 0;
-}
-
-.scopeBadge {
-  width: 20px;
-  height: 20px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
-.scopeBadgeIcon {
-  width: 12px;
-  height: 12px;
-  object-fit: contain;
-  filter: brightness(0) invert(1);
-}
-
-.scopeBadgeInitial {
-  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
-  font-size: 10px;
-  font-weight: 700;
-  color: white;
-  line-height: 1;
-}
-
-.buildingLabel {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  flex-shrink: 0;
-}
-
-/* ---- Load preview button ---- */
-
-.loadPreview {
-  position: absolute;
-  right: 4px !important;
-  left: unset !important;
-  z-index: 4;
-  background-color: var(--surface01-color) !important;
-  color: var(--on-surface-color) !important;
-  border: 1px solid var(--border-medium-color);
-
-  &:hover {
-    background-color: var(--surface-hover-color) !important;
-  }
-}

package/ui/workspace/workspace-overview/hope-component-card.tsx

@@ -1,152 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Link } from '@teambit/base-react.navigation.link';
-import { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';
-import { Tooltip } from '@teambit/design.ui.tooltip';
-import { LoadPreview } from '@teambit/workspace.ui.load-preview';
-import { ComponentID } from '@teambit/component-id';
-import type { ComponentModel } from '@teambit/component';
-import type { ComponentDescriptor } from '@teambit/component-descriptor';
-import type { ScopeID } from '@teambit/scopes.scope-id';
-import { getComponentStatus } from './filter-utils';
-import { ChangedPill, BuildSpinner, BuildingPreview } from './card-overlays';
-import styles from './hope-component-card.module.scss';
-
-export type HopeComponentCardProps = {
-  component: ComponentModel;
-  componentDescriptor: ComponentDescriptor;
-  scope?: { id: ScopeID; icon?: string; backgroundIconColor?: string };
-  showPreview?: boolean;
-};
-
-export function HopeComponentCard({
-  component,
-  componentDescriptor,
-  scope,
-  showPreview: showPreviewProp,
-}: HopeComponentCardProps) {
-  const [shouldShowPreview, setShouldShowPreview] = useState(Boolean(showPreviewProp));
-  const prevServerUrlRef = useRef(component.server?.url);
-
-  useEffect(() => {
-    if (prevServerUrlRef.current !== component.server?.url && shouldShowPreview) {
-      setShouldShowPreview(false);
-      setTimeout(() => setShouldShowPreview(true), 50);
-    }
-    prevServerUrlRef.current = component.server?.url;
-  }, [component.server?.url]);
-
-  useEffect(() => {
-    setShouldShowPreview(Boolean(showPreviewProp));
-  }, [showPreviewProp]);
-
-  const item = { component } as any;
-  const status = getComponentStatus(item);
-  const accent = 'var(--bit-accent-color, #6c5ce7)';
-
-  const isBuilding = status === 'building';
-  const isQueued = status === 'queued';
-  const isChanged = status === 'changed';
-
-  const href = `${component.id.fullName}?scope=${component.id.scope}`;
-
-  const loadPreviewVisible = component.compositions.length > 0 && !isBuilding && !shouldShowPreview;
-
-  const showPreviewClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setShouldShowPreview(true);
-  };
-
-  const envAspect = componentDescriptor.get<any>('teambit.envs/envs');
-  const env = envAspect?.data || envAspect;
-  const envComponentId = env?.id ? ComponentID.fromString(env.id) : undefined;
-
-  const cardClass = isBuilding ? styles.cardBuilding : styles.card;
-  const buildingBorderStyle = isBuilding
-    ? {
-        borderColor: accent,
-        boxShadow: `0 0 0 3px color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 10%, transparent)`,
-      }
-    : undefined;
-
-  const nameLabel = component.id.namespace ? `${component.id.namespace}/${component.id.name}` : component.id.name;
-
-  const shortHash = component.id.version?.slice(0, 7);
-
-  const scopeInitial = component.id.scope?.split('.').pop()?.charAt(0).toUpperCase();
-
-  return (
-    <div className={cardClass} style={buildingBorderStyle}>
-      {loadPreviewVisible && <LoadPreview className={styles.loadPreview} onClick={showPreviewClick} />}
-
-      <Link href={href} className={styles.linkWrapper}>
-        <div className={styles.preview}>
-          <div className={styles.previewInner}>
-            <CardPreview
-              component={component}
-              componentDescriptor={componentDescriptor}
-              status={status}
-              shouldShowPreview={shouldShowPreview}
-            />
-          </div>
-
-          {!isQueued && env?.icon && (
-            <div className={styles.envBadge}>
-              <Tooltip delay={300} content={envComponentId?.name}>
-                <img src={env.icon} className={styles.envIcon} alt="" />
-              </Tooltip>
-            </div>
-          )}
-
-          {(isChanged || isBuilding) && (
-            <div className={styles.statusCorner}>
-              {isChanged && <ChangedPill />}
-              {isBuilding && <BuildSpinner />}
-            </div>
-          )}
-        </div>
-
-        <div className={styles.footer}>
-          <Tooltip delay={300} content={component.id.scope}>
-            <div className={styles.scopeBadge} style={{ background: scope?.backgroundIconColor || accent }}>
-              {scope?.icon ? (
-                <img src={scope.icon} className={styles.scopeBadgeIcon} alt="" />
-              ) : (
-                <span className={styles.scopeBadgeInitial}>{scopeInitial}</span>
-              )}
-            </div>
-          </Tooltip>
-          <span className={styles.name}>{nameLabel}</span>
-          {!isBuilding && !isQueued && shortHash && <span className={styles.hash}>{shortHash}</span>}
-          {isBuilding && (
-            <span className={styles.buildingLabel} style={{ color: accent }}>
-              BUILDING
-            </span>
-          )}
-        </div>
-      </Link>
-    </div>
-  );
-}
-
-function CardPreview({
-  component,
-  componentDescriptor,
-  status,
-  shouldShowPreview,
-}: {
-  component: ComponentModel;
-  componentDescriptor: ComponentDescriptor;
-  status: string;
-  shouldShowPreview: boolean;
-}) {
-  if (status === 'building') return <BuildingPreview />;
-
-  return (
-    <PreviewPlaceholder
-      component={component}
-      componentDescriptor={componentDescriptor}
-      shouldShowPreview={shouldShowPreview}
-    />
-  );
-}

package/ui/workspace/workspace-overview/link-plugin.ts

@@ -1,5 +0,0 @@
-export class LinkPlugin {
-  link(id) {
-    return `${id.fullName}?scope=${id.scope}`;
-  }
-}

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

@@ -1,88 +0,0 @@
-.header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-
-.name {
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  color: var(--on-background-color);
-  flex-shrink: 0;
-}
-
-.count {
-  font-size: 12px;
-  color: var(--on-background-low-color);
-  flex-shrink: 0;
-}
-
-.buildingPill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 10.5px;
-  font-weight: 500;
-  padding: 1px 8px;
-  border-radius: 999px;
-  margin-left: 4px;
-  flex-shrink: 0;
-}
-
-.buildingDot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  animation: pulse 1.4s ease-in-out infinite;
-}
-
-.scopeIconBadge {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
-.scopeIconImg {
-  width: 14px;
-  height: 14px;
-  object-fit: contain;
-  filter: brightness(0) invert(1);
-}
-
-.scopeInitial {
-  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
-  font-size: 11px;
-  font-weight: 700;
-  color: white;
-  line-height: 1;
-}
-
-.divider {
-  flex: 1;
-  height: 1px;
-  background: var(--border-medium-color);
-  margin-left: 4px;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.55;
-  }
-}

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

@@ -1,72 +0,0 @@
-import React from 'react';
-import { getComponentStatus } from './filter-utils';
-import type { WorkspaceItem } from './workspace-overview.types';
-import styles from './namespace-header.module.scss';
-
-export interface NamespaceHeaderProps {
-  namespace: string;
-  items: WorkspaceItem[];
-  scopeIcon?: string;
-  scopeIconColor?: string;
-}
-
-export function NamespaceHeader({ namespace, items, scopeIcon, scopeIconColor }: NamespaceHeaderProps) {
-  const accent = 'var(--bit-accent-color, #6c5ce7)';
-  const tint = 'color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 12%, transparent)';
-
-  let buildingCount = 0;
-  let readyCount = 0;
-  for (const item of items) {
-    const s = getComponentStatus(item);
-    if (s === 'building') buildingCount++;
-    if (s === 'built' || s === 'changed') readyCount++;
-  }
-
-  return (
-    <header className={styles.header}>
-      <HeaderIcon scopeIcon={scopeIcon} scopeIconColor={scopeIconColor} namespace={namespace} accent={accent} />
-      <span className={styles.name}>{namespace}</span>
-      <span className={styles.count}>
-        {readyCount}/{items.length}
-      </span>
-      {buildingCount > 0 && (
-        <span className={styles.buildingPill} style={{ color: accent, background: tint }}>
-          <span className={styles.buildingDot} style={{ background: accent }} />
-          building
-        </span>
-      )}
-      <div className={styles.divider} />
-    </header>
-  );
-}
-
-function HeaderIcon({
-  scopeIcon,
-  scopeIconColor,
-  namespace,
-  accent,
-}: {
-  scopeIcon?: string;
-  scopeIconColor?: string;
-  namespace: string;
-  accent: string;
-}) {
-  if (scopeIcon) {
-    return (
-      <div className={styles.scopeIconBadge} style={{ background: scopeIconColor || accent }}>
-        <img src={scopeIcon} className={styles.scopeIconImg} alt="" />
-      </div>
-    );
-  }
-
-  if (scopeIconColor) {
-    const initial = namespace.split(/[./]/).pop()?.charAt(0).toUpperCase() || '?';
-    return (
-      <div className={styles.scopeIconBadge} style={{ background: scopeIconColor }}>
-        <span className={styles.scopeInitial}>{initial}</span>
-      </div>
-    );
-  }
-
-  return <span className={styles.dot} style={{ background: accent }} />;
-}

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

@@ -1,44 +0,0 @@
-import type { WorkspaceItem } from './workspace-overview.types';
-
-export const PRIORITY_HIGH = ['ui', 'pages'] as string[];
-export const PRIORITY_MED = ['design'] as string[];
-export const PRIORITY_LOW = ['entities', 'provider', 'hooks', 'icons'] as string[];
-
-export function getRootNamespace(ns: string): string {
-  if (!ns) return '';
-  return ns.split('/')[0]!;
-}
-
-export function namespacePriority(ns: string): number {
-  const root = getRootNamespace(ns);
-
-  // internal namespaces (starting with _) go last
-  if (root.startsWith('_')) return 4;
-
-  if (PRIORITY_HIGH.includes(root)) return 0;
-  if (PRIORITY_MED.includes(root)) return 1;
-  if (PRIORITY_LOW.includes(root)) return 3;
-  return 2;
-}
-
-export function sortNamespacesAdvanced(list: string[]): string[] {
-  return [...list].sort((a, b) => {
-    const pa = namespacePriority(a);
-    const pb = namespacePriority(b);
-    if (pa !== pb) return pa - pb;
-    return a.localeCompare(b);
-  });
-}
-
-export function sortItemsByNamespace(items: WorkspaceItem[]): WorkspaceItem[] {
-  return [...items].sort((a, b) => {
-    const na = a.component.id.namespace || '/';
-    const nb = b.component.id.namespace || '/';
-
-    const pa = namespacePriority(na);
-    const pb = namespacePriority(nb);
-    if (pa !== pb) return pa - pb;
-
-    return a.component.id.name.localeCompare(b.component.id.name);
-  });
-}

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

@@ -1,9 +0,0 @@
-export function sortScopes(scopes: string[]) {
-  const designPrefix = 'design';
-
-  const nonDesign = scopes.filter((s) => !s.includes(designPrefix)).sort((a, b) => a.localeCompare(b));
-
-  const design = scopes.filter((s) => s.includes(designPrefix)).sort((a, b) => a.localeCompare(b));
-
-  return [...nonDesign, ...design];
-}

package/ui/workspace/workspace-overview/use-query-param-with-default.ts

@@ -1,115 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
-
-const STORAGE_KEY_PREFIX = 'workspace-overview:';
-
-export interface QueryParamOptions {
-  /** persist value to localStorage across sessions. Default: true */
-  persist?: boolean;
-}
-
-export function useQueryParamWithDefault<T extends string>(
-  paramName: string,
-  fallback: T,
-  options: QueryParamOptions = {}
-): [T, (value: T | null) => void] {
-  const { persist = true } = options;
-  const [searchParams, setSearchParams] = useSearchParams();
-  const storageKey = STORAGE_KEY_PREFIX + paramName;
-
-  const value = useMemo((): T => {
-    const urlValue = searchParams.get(paramName);
-    if (urlValue) return urlValue as T;
-
-    if (persist) {
-      const stored = safeGetItem(storageKey);
-      if (stored) return stored as T;
-    }
-
-    return fallback;
-  }, [searchParams, paramName, storageKey, fallback, persist]);
-
-  const setValue = useCallback(
-    (newValue: T | null) => {
-      const newParams = new URLSearchParams(searchParams);
-
-      if (newValue === null) {
-        newParams.delete(paramName);
-        if (persist) safeRemoveItem(storageKey);
-      } else {
-        newParams.set(paramName, newValue);
-        if (persist) safeSetItem(storageKey, newValue);
-      }
-
-      setSearchParams(newParams);
-    },
-    [searchParams, setSearchParams, paramName, storageKey, persist]
-  );
-
-  return [value, setValue];
-}
-
-export function useListParamWithDefault(
-  paramName: string,
-  options: QueryParamOptions = {}
-): [string[], (values: string[]) => void] {
-  const { persist = false } = options;
-  const [searchParams, setSearchParams] = useSearchParams();
-  const storageKey = STORAGE_KEY_PREFIX + paramName;
-
-  const values = useMemo((): string[] => {
-    const urlValue = searchParams.get(paramName);
-    if (urlValue) return urlValue.split(',').filter(Boolean);
-
-    if (persist) {
-      const stored = safeGetItem(storageKey);
-      if (stored) return stored.split(',').filter(Boolean);
-    }
-
-    return [];
-  }, [searchParams, paramName, storageKey, persist]);
-
-  const setValues = useCallback(
-    (newValues: string[]) => {
-      const newParams = new URLSearchParams(searchParams);
-      const joined = newValues.filter(Boolean).join(',');
-
-      if (joined) {
-        newParams.set(paramName, joined);
-        if (persist) safeSetItem(storageKey, joined);
-      } else {
-        newParams.delete(paramName);
-        if (persist) safeRemoveItem(storageKey);
-      }
-
-      setSearchParams(newParams);
-    },
-    [searchParams, setSearchParams, paramName, storageKey, persist]
-  );
-
-  return [values, setValues];
-}
-
-function safeGetItem(key: string): string | null {
-  try {
-    return localStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-
-function safeSetItem(key: string, value: string): void {
-  try {
-    localStorage.setItem(key, value);
-  } catch {
-    // ignore storage errors
-  }
-}
-
-function safeRemoveItem(key: string): void {
-  try {
-    localStorage.removeItem(key);
-  } catch {
-    // ignore storage errors
-  }
-}