@teambit/workspace 1.0.1007 → 1.0.1008

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

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
+import { HopeAiIcon } from './hope-ai-icon';
+import styles from './workspace-blank-state.module.scss';
+
+const DISCORD_URL = 'https://discord.bit.cloud/';
+
+/**
+ * Empty workspace state, shown when the workspace has no components.
+ * Replaces the legacy `@teambit/workspace.ui.empty-workspace` for the Hope flow.
+ *
+ * The default state guides the user through the Bit CLI in their terminal. In
+ * minimal mode (the embedded Hope experience) we additionally surface the
+ * "prompt Hope in the chat" CTA.
+ */
+export function WorkspaceBlankState() {
+  const { isMinimal } = useWorkspaceMode();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.vignette} aria-hidden />
+
+      <div className={styles.body}>
+        <h1 className={styles.headline}>
+          Your workspace is <em>ready</em> for its first component.
+        </h1>
+
+        <p className={styles.sub}>Components will appear here as they're built.</p>
+
+        {/* Primary — prompt Hope in the chat (minimal mode only) */}
+        {isMinimal && (
+          <>
+            <div className={styles.hopeCallout}>
+              <HopeAiIcon size={32} className={styles.hopeIcon} />
+              <div className={styles.hopeText}>
+                <div className={styles.hopeTitle}>Prompt Hope in the chat</div>
+                <div className={styles.hopeHelp}>
+                  Describe what you want to build, from one prompt to a whole company.
+                </div>
+              </div>
+            </div>
+
+            {/* OR separator */}
+            <div className={styles.sep}>
+              <div className={styles.sepLine} />
+              <span className={styles.sepLabel}>or do it yourself</span>
+              <div className={styles.sepLine} />
+            </div>
+          </>
+        )}
+
+        {/* DIY CLI options */}
+        <div className={styles.diyGrid}>
+          <DiyRow title="Create" body="Scaffold a new component." cmd="bit create react button" />
+          <DiyRow title="Import" body="Bring one from another scope." cmd="bit import org.scope/comp" />
+        </div>
+
+        <div className={styles.docsLinks}>
+          <a href="https://bit.dev/docs" className={styles.link} target="_blank" rel="noopener noreferrer">
+            CLI docs ↗
+          </a>
+          <a href="https://bit.cloud/docs" className={styles.link} target="_blank" rel="noopener noreferrer">
+            Cloud docs ↗
+          </a>
+        </div>
+      </div>
+
+      <div className={styles.bottom}>
+        <IconLink
+          href="https://github.com/teambit/bit"
+          src="https://static.bit.dev/harmony/github.svg"
+          label="Bit on GitHub"
+        />
+        <a
+          href={DISCORD_URL}
+          className={styles.iconLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Bit community on Discord"
+        >
+          <Icon of="discord" className={styles.discordIcon} />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function IconLink({ href, src, label }: { href: string; src: string; label: string }) {
+  return (
+    <a href={href} className={styles.iconLink} target="_blank" rel="noopener noreferrer" aria-label={label}>
+      <img src={src} alt={label} className={styles.logo} />
+    </a>
+  );
+}
+
+function DiyRow({ title, body, cmd }: { title: string; body: string; cmd: string }) {
+  const [copied, setCopied] = useState(false);
+  const onCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      navigator.clipboard.writeText(cmd).catch(() => undefined);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1400);
+  };
+  return (
+    <div className={styles.diyRow}>
+      <div>
+        <div className={styles.diyTitle}>{title}</div>
+        <div className={styles.diyBody}>{body}</div>
+      </div>
+      <div className={styles.diyCmdRow}>
+        <div className={styles.diyCmd}>
+          <span className={styles.diyPrompt}>$</span>
+          <span className={styles.diyCmdText}>{cmd}</span>
+        </div>
+        <button type="button" onClick={onCopy} className={styles.diyCopy}>
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
+// Legacy empty state — kept around as a fallback while the new blank state rolls out.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';
 import compact from 'lodash.compact';
 import { ScopeID } from '@teambit/scopes.scope-id';
@@ -12,14 +14,13 @@ import { NamespaceHeader } from './namespace-header';
 import { HopeComponentCard } from './hope-component-card';
 import type { AggregationType } from './workspace-overview.types';
 import { WorkspaceFilterPanel } from './workspace-filter-panel';
+import { WorkspaceBlankState } from './workspace-blank-state';
 import styles from './workspace-overview.module.scss';
 
 export function WorkspaceOverview() {
   const workspace = useContext(WorkspaceContext);
   const { components, componentDescriptors } = workspace;
 
-  if (!components.length) return <EmptyWorkspace name={workspace.name} />;
-
   const { isMinimal } = useWorkspaceMode();
   const uniqueScopes = [...new Set(components.map((c) => c.id.scope))];
   const { cloudScopes } = useCloudScopes(uniqueScopes);
@@ -65,6 +66,8 @@ export function WorkspaceOverview() {
     filters
   );
 
+  if (!components.length) return <WorkspaceBlankState />;
+
   return (
     <div className={styles.container}>
       <WorkspaceFilterPanel
@@ -79,7 +82,7 @@ export function WorkspaceOverview() {
       />
 
       <div className={styles.content}>
-        {filteredCount === 0 && <EmptyWorkspace name={workspace.name} />}
+        {filteredCount === 0 && <WorkspaceBlankState />}
 
         {groups.map((group) => (
           <section key={group.name} className={styles.section}>