@netlify/spark-ui 1.26.0-alpha.5 → 1.26.0-alpha.7

package/packages/components/preact/DropZone/useDropDeploy.ts

@@ -0,0 +1,149 @@
+import { useRef, useState } from 'preact/hooks';
+import {
+  AnonymousDropClient,
+  deployFiles,
+  getSingleNonIndexHtmlFileName,
+  hasMultipleHtmlFilesWithoutIndex,
+  type DeployProgress,
+  type DropClient,
+  type ProcessedFile,
+} from './drop-core';
+
+/** How the files reached the zone — carried through to analytics. */
+export type DeploySource = 'drag' | 'browse';
+
+/** The live site handed back once a deploy succeeds. */
+export interface DeployedSite {
+  url: string;
+  token: string;
+  siteName: string;
+  siteId: string;
+}
+
+/** Finite states of a single deploy attempt. */
+export type DeployStatus =
+  | { kind: 'idle' }
+  | { kind: 'reading' }
+  | { kind: 'creating' }
+  | { kind: 'uploading'; uploaded: number; total: number }
+  | { kind: 'processing' }
+  | { kind: 'redirecting' }
+  | { kind: 'error'; message: string };
+
+/** Provider-agnostic analytics sink. */
+export type TrackFn = (event: string, properties?: Record<string, unknown>) => void;
+
+interface UseDropDeployOptions {
+  apiBase?: string;
+  client?: DropClient;
+  claimUrl: (siteName: string) => string;
+  onDeploy?: (site: DeployedSite) => void;
+  track: TrackFn;
+}
+
+/** Map a low-level deploy progress event onto our UI status. */
+function progressToStatus(e: DeployProgress): DeployStatus {
+  switch (e.phase) {
+    case 'creating':
+      return { kind: 'creating' };
+    case 'uploading':
+      return { kind: 'uploading', uploaded: e.uploaded ?? 0, total: e.total ?? 0 };
+    case 'processing':
+    case 'ready':
+      return { kind: 'processing' };
+  }
+}
+
+/** Inspect the file set and return a non-blocking index.html warning, if any. */
+function indexHtmlWarning(files: ProcessedFile[]): string | null {
+  const singleNonIndex = getSingleNonIndexHtmlFileName(files);
+  if (singleNonIndex) {
+    return `No index.html found — "${singleNonIndex}" won’t be served at the site root.`;
+  }
+  if (hasMultipleHtmlFilesWithoutIndex(files)) {
+    return 'No index.html found — your site may not have a landing page.';
+  }
+  return null;
+}
+
+/**
+ * Owns the deploy state machine and its side effects (upload, local persistence,
+ * analytics, redirect), keeping DropZone a thin view over the returned `status`.
+ */
+export function useDropDeploy({
+  apiBase,
+  client,
+  claimUrl,
+  onDeploy,
+  track,
+}: UseDropDeployOptions) {
+  const [status, setStatus] = useState<DeployStatus>({ kind: 'idle' });
+  const [warning, setWarning] = useState<string | null>(null);
+  const dropClient = useRef(client ?? new AnonymousDropClient(apiBase)).current;
+
+  const busy = status.kind !== 'idle' && status.kind !== 'error';
+
+  async function deploy(read: () => Promise<ProcessedFile[]>, source: DeploySource) {
+    setWarning(null);
+    setStatus({ kind: 'reading' });
+    try {
+      const files = await read();
+      if (!files.length) {
+        setStatus({ kind: 'error', message: 'No files found to deploy.' });
+        return;
+      }
+
+      // A drop is the "user provided files" signal; the browse path is already
+      // tracked when the picker opens.
+      if (source === 'drag') {
+        track('dropzone_files_dropped', { method: source, file_count: files.length });
+      }
+
+      setWarning(indexHtmlWarning(files));
+
+      const {
+        url,
+        token,
+        deploy: result,
+      } = await deployFiles(dropClient, files, {
+        onProgress: e => setStatus(progressToStatus(e)),
+      });
+
+      // Best-effort local persistence. Note this does NOT reach the dashboard:
+      // localStorage is per-origin, so a token written here (e.g. www.netlify.com)
+      // is invisible to app.netlify.com. The cross-origin handoff is the URL
+      // fragment below; this only helps if the drop and claim share an origin.
+      try {
+        localStorage.setItem('drop-token', token);
+        localStorage.setItem('dropSiteName', result.subdomain);
+      } catch {
+        /* private mode / storage disabled — non-fatal */
+      }
+
+      setStatus({ kind: 'redirecting' });
+      // Fired before the redirect below. Note: the navigation can cut a
+      // fire-and-forget analytics request short — see the docs for delivery
+      // hardening (sendBeacon / deferring the redirect).
+      track('dropzone_deploy_succeeded', {
+        method: source,
+        site_name: result.subdomain,
+        file_count: files.length,
+      });
+      onDeploy?.({ url, token, siteName: result.subdomain, siteId: result.id });
+
+      // Hand the drop token to the dashboard via the URL fragment — localStorage
+      // does not cross origins. The dashboard's /drop/:name page reads
+      // `#drop_token=` and persists it for the claim + post-signup steps.
+      window.location.assign(`${claimUrl(result.subdomain)}#drop_token=${token}`);
+    } catch (err) {
+      setStatus({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
+    }
+  }
+
+  function reset() {
+    setWarning(null);
+    setStatus({ kind: 'idle' });
+  }
+
+  return { status, warning, busy, deploy, reset };
+}

package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css

@@ -109,3 +109,8 @@
   --n-search-link-badge-text-color: var(--color-highlight-text);
   --n-search-link-badge-border: var(--color-highlight-border);
 }
+.n-search-link-badge[data-resource='knowledge-base'] {
+  --n-search-link-badge-color: var(--color-success-bg);
+  --n-search-link-badge-text-color: var(--color-success-text);
+  --n-search-link-badge-border: var(--color-success-border);
+}

package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.tsx

@@ -36,7 +36,7 @@ const SearchLink = ({
           {children && <span className="n-search-link-label">{children}</span>}
           {resource && (
             <span className="n-search-link-badge" data-resource={resource}>
-              {resource}
+              {resource.replace(/-/g, ' ')}
             </span>
           )}
         </p>

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -5,7 +5,7 @@ export interface SearchLinkProps {
   as?: any;
   icon?: IconName;
   label?: string;
-  resource?: 'blog' | 'changelog' | 'docs' | 'guide';
+  resource?: 'blog' | 'changelog' | 'docs' | 'guide' | 'knowledge-base';
   url?: string;
   excerpt?: string;
   children?: ComponentChildren;