@netlify/spark-ui 1.25.0-alpha.0 → 1.26.0-alpha.1

package/packages/components/index.ts

@@ -6,4 +6,20 @@ export { default as SearchLink } from './preact/SearchModal/components/SearchLin
 export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
+export { default as DropZone } from './preact/DropZone/DropZone';
+export {
+  AnonymousDropClient,
+  deployFiles,
+  readDataTransfer,
+  readFileList,
+} from './preact/DropZone/drop-core';
+export type {
+  DropClient,
+  Deploy,
+  Digest,
+  DeployResult,
+  DeployProgress,
+  DeployPhase,
+  ProcessedFile,
+} from './preact/DropZone/drop-core';
 export { type IconName } from './preact/Icon';

package/packages/components/preact/DropZone/DropZone.css

@@ -0,0 +1,340 @@
+@import url('../../../styles/animations.css');
+
+/* ----------------------------- */
+/* Container                     */
+/* ----------------------------- */
+.n-dropzone {
+  --n-dropzone-accent: var(--color-brand-primary, #0e7fe1);
+  --n-dropzone-radius: var(--radius-2xl, 1rem);
+
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-s);
+  width: 100%;
+  height: 100%;
+  min-height: 18rem;
+  padding: var(--space-2xl, 2.5rem) var(--space-l, 1.5rem);
+  text-align: center;
+  color: var(--color-text-default, #14161a);
+  background: var(--color-bg, #fff);
+  border: 2px dashed var(--color-border-default, rgba(0, 0, 0, 0.15));
+  border-radius: var(--n-dropzone-radius);
+  transition:
+    border-color 200ms ease-out,
+    background-color 200ms ease-out,
+    box-shadow 200ms ease-out;
+}
+
+/* Drag-over: the target glows without resizing. */
+.n-dropzone.is-active {
+  border-color: var(--n-dropzone-accent);
+  background: var(--color-bg-2, #f6f8fa);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--n-dropzone-accent) 18%, transparent);
+}
+
+.n-dropzone.is-busy {
+  border-style: solid;
+  border-color: var(--color-border-subtle, rgba(0, 0, 0, 0.08));
+}
+
+/* A soft accent wash that fades in while dragging. */
+.n-dropzone::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    120% 120% at 50% 0%,
+    color-mix(in srgb, var(--n-dropzone-accent) 8%, transparent),
+    transparent 60%
+  );
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+  pointer-events: none;
+}
+
+.n-dropzone.is-active::before {
+  opacity: 1;
+}
+
+/* ----------------------------- */
+/* State panel (keyed → replays) */
+/* ----------------------------- */
+.n-dropzone-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-xs, 0.75rem);
+  width: 100%;
+  animation: dropPanelIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes dropPanelIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.n-dropzone-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-semibold, 600);
+  line-height: var(--line-height-snug, 1.3);
+}
+
+.n-dropzone-title--error {
+  color: var(--color-invalid-text, #d00);
+}
+
+.n-dropzone-subtitle {
+  margin: 0;
+  max-width: 30rem;
+  font-size: 0.9375rem;
+  color: var(--color-text-weak, #5c6570);
+  line-height: var(--line-height-text, 1.5);
+}
+
+/* ----------------------------- */
+/* Idle upload glyph             */
+/* ----------------------------- */
+.n-dropzone-glyph {
+  display: grid;
+  place-items: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  color: var(--n-dropzone-accent);
+}
+
+.n-dropzone-glyph svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* The arrow gently bobs to invite a drop; the tray stays put. */
+.n-dropzone-glyph-arrow {
+  animation: dropArrowBob 2.4s ease-in-out infinite;
+}
+
+.n-dropzone.is-active .n-dropzone-glyph-arrow {
+  animation-duration: 0.9s;
+}
+
+@keyframes dropArrowBob {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+/* ----------------------------- */
+/* Success glyph (draws in)      */
+/* ----------------------------- */
+.n-dropzone-glyph--success {
+  color: var(--color-success-text, #108b46);
+}
+
+.n-dropzone-check-ring {
+  stroke-dasharray: 126;
+  stroke-dashoffset: 126;
+  animation: dropDraw 500ms ease-out 80ms forwards;
+}
+
+.n-dropzone-check-mark {
+  stroke-dasharray: 32;
+  stroke-dashoffset: 32;
+  animation: dropDraw 320ms ease-out 460ms forwards;
+}
+
+@keyframes dropDraw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* ----------------------------- */
+/* Loading / spinner             */
+/* ----------------------------- */
+.n-dropzone-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-s, 1rem);
+}
+
+.n-dropzone-spinner {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--radius-pill, 999px);
+  border: 3px solid color-mix(in srgb, var(--n-dropzone-accent) 22%, transparent);
+  border-top-color: var(--n-dropzone-accent);
+  animation: dropSpin 720ms linear infinite;
+}
+
+@keyframes dropSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.n-dropzone-nudge {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--color-text-weaker, #8a929c);
+}
+
+/* ----------------------------- */
+/* Upload progress bar           */
+/* ----------------------------- */
+.n-dropzone-progress {
+  width: min(22rem, 100%);
+  height: 0.5rem;
+  border-radius: var(--radius-pill, 999px);
+  background: var(--color-bg-3, rgba(0, 0, 0, 0.08));
+  overflow: hidden;
+}
+
+.n-dropzone-progress-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--n-dropzone-accent);
+  transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ----------------------------- */
+/* Done state links & actions    */
+/* ----------------------------- */
+.n-dropzone-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3xs, 0.35rem);
+  font-size: 1rem;
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-link, #0e7fe1);
+  text-decoration: none;
+}
+
+.n-dropzone-link:hover {
+  text-decoration: underline;
+}
+
+.n-dropzone-link-icon {
+  width: 0.9em;
+  height: 0.9em;
+}
+
+.n-dropzone-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-s, 1rem);
+  margin-block-start: var(--space-2xs, 0.5rem);
+}
+
+/* ----------------------------- */
+/* Buttons                       */
+/* ----------------------------- */
+.n-dropzone-browse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2xs, 0.5rem) var(--space-m, 1.25rem);
+  border: none;
+  border-radius: var(--radius-pill, 999px);
+  background: var(--n-dropzone-accent);
+  color: var(--neutral-000, #fff);
+  font-size: 0.9375rem;
+  font-weight: var(--font-weight-semibold, 600);
+  line-height: var(--line-height-none, 1);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease-out,
+    transform 120ms ease-out;
+}
+
+.n-dropzone-browse:hover {
+  background: var(--color-brand-primary-hover, #0b6bc0);
+  transform: translateY(-1px);
+}
+
+.n-dropzone-browse:active {
+  transform: translateY(0);
+}
+
+.n-dropzone-reset {
+  padding: var(--space-2xs, 0.5rem) var(--space-m, 1.25rem);
+  border: 1px solid var(--color-border-default, rgba(0, 0, 0, 0.15));
+  border-radius: var(--radius-pill, 999px);
+  background: transparent;
+  color: var(--color-text-default, #14161a);
+  font-size: 0.9375rem;
+  font-weight: var(--font-weight-semibold, 600);
+  cursor: pointer;
+  transition: background-color 150ms ease-out;
+}
+
+.n-dropzone-reset:hover {
+  background: var(--color-bg-2, #f6f8fa);
+}
+
+/* ----------------------------- */
+/* Warning banner                */
+/* ----------------------------- */
+.n-dropzone-warning {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs, 0.5rem);
+  margin: 0;
+  margin-block-start: var(--space-xs, 0.75rem);
+  padding: var(--space-2xs, 0.5rem) var(--space-s, 1rem);
+  max-width: 32rem;
+  border-radius: var(--radius-m, 0.5rem);
+  background: var(--color-warning-bg, #fdf3d7);
+  color: var(--color-warning-text, #7a5b00);
+  font-size: 0.8125rem;
+  text-align: left;
+}
+
+.n-dropzone-warning-icon {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ----------------------------- */
+/* Reduced motion                */
+/* ----------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .n-dropzone,
+  .n-dropzone-panel,
+  .n-dropzone-glyph-arrow,
+  .n-dropzone-spinner,
+  .n-dropzone-progress-bar,
+  .n-dropzone-check-ring,
+  .n-dropzone-check-mark {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .n-dropzone-check-ring,
+  .n-dropzone-check-mark {
+    stroke-dashoffset: 0;
+  }
+
+  .n-dropzone-spinner {
+    border-top-color: var(--n-dropzone-accent);
+  }
+}

package/packages/components/preact/DropZone/DropZone.tsx

@@ -0,0 +1,295 @@
+import { useRef, useState } from 'preact/hooks';
+import Icon from '../Icon';
+import {
+  AnonymousDropClient,
+  deployFiles,
+  getSingleNonIndexHtmlFileName,
+  hasMultipleHtmlFilesWithoutIndex,
+  readDataTransfer,
+  readFileList,
+  type DeployProgress,
+  type DropClient,
+  type ProcessedFile,
+} from './drop-core';
+
+import './DropZone.css';
+
+type Status =
+  | { kind: 'idle' }
+  | { kind: 'reading' }
+  | { kind: 'creating' }
+  | { kind: 'uploading'; uploaded: number; total: number }
+  | { kind: 'processing' }
+  | { kind: 'done'; url: string; token: string; siteName: string; siteId: string }
+  | { kind: 'error'; message: string };
+
+interface Props {
+  /** Override the API base (e.g. for a staging environment). */
+  apiBase?: string;
+  /** Inject a custom client (e.g. for testing). Defaults to AnonymousDropClient. */
+  client?: DropClient;
+  /** Build the "claim this site" URL from the assigned site name (subdomain). */
+  claimUrl?: (siteName: string) => string;
+  /** Called once the deploy is live. */
+  onDeploy?: (result: { url: string; token: string; siteName: string; siteId: string }) => void;
+  className?: string;
+}
+
+const defaultClaimUrl = (siteName: string) => `https://app.netlify.com/drop/${siteName}/claim`;
+
+function progressPhaseToStatus(e: DeployProgress): Status {
+  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' };
+  }
+}
+
+export default function DropZone({
+  apiBase,
+  client,
+  claimUrl = defaultClaimUrl,
+  onDeploy,
+  className,
+}: Props) {
+  const [status, setStatus] = useState<Status>({ kind: 'idle' });
+  const [warning, setWarning] = useState<string | null>(null);
+  const [active, setActive] = useState(false);
+  const dropClient = useRef(client ?? new AnonymousDropClient(apiBase)).current;
+
+  const busy = status.kind !== 'idle' && status.kind !== 'done' && status.kind !== 'error';
+
+  async function run(read: () => Promise<ProcessedFile[]>) {
+    setWarning(null);
+    setStatus({ kind: 'reading' });
+    try {
+      const files = await read();
+      if (!files.length) {
+        setStatus({ kind: 'error', message: 'No files found to deploy.' });
+        return;
+      }
+
+      // Surface index.html warnings without blocking the deploy.
+      const singleNonIndex = getSingleNonIndexHtmlFileName(files);
+      if (singleNonIndex) {
+        setWarning(`No index.html found — "${singleNonIndex}" won’t be served at the site root.`);
+      } else if (hasMultipleHtmlFilesWithoutIndex(files)) {
+        setWarning('No index.html found — your site may not have a landing page.');
+      }
+
+      const { url, token, deploy } = await deployFiles(dropClient, files, {
+        onProgress: e => setStatus(progressPhaseToStatus(e)),
+      });
+
+      // Persist for the claim step after signup (mirrors the dashboard).
+      try {
+        localStorage.setItem('drop-token', token);
+        localStorage.setItem('dropSiteName', deploy.subdomain);
+      } catch {
+        /* private mode / storage disabled — non-fatal */
+      }
+
+      setStatus({ kind: 'done', url, token, siteName: deploy.subdomain, siteId: deploy.id });
+      onDeploy?.({ url, token, siteName: deploy.subdomain, siteId: deploy.id });
+    } catch (err) {
+      setStatus({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
+    }
+  }
+
+  function reset() {
+    setWarning(null);
+    setStatus({ kind: 'idle' });
+  }
+
+  return (
+    <div
+      class={`n-dropzone${active ? ' is-active' : ''}${busy ? ' is-busy' : ''}${className ? ` ${className}` : ''}`}
+      data-state={status.kind}
+      onDragOver={e => {
+        if (busy) return;
+        e.preventDefault();
+        setActive(true);
+      }}
+      onDragLeave={e => {
+        // Ignore drag-leave bubbling from children.
+        if (e.currentTarget === e.target) setActive(false);
+      }}
+      onDrop={e => {
+        e.preventDefault();
+        setActive(false);
+        if (busy) return;
+        const dt = e.dataTransfer;
+        if (!dt) return;
+        // Capture entries synchronously — readDataTransfer reads them before
+        // its first await, so the DataTransfer isn't detached out from under us.
+        run(() => readDataTransfer(dt));
+      }}
+    >
+      {/* keyed so each state change remounts and replays its enter animation */}
+      <div class="n-dropzone-panel" key={status.kind}>
+        <StatusView status={status} claimUrl={claimUrl} onReset={reset} onFiles={run} />
+      </div>
+
+      {warning && status.kind !== 'error' && (
+        <p class="n-dropzone-warning n-fadeIn" role="status">
+          <Icon name="lightbulb" className="n-dropzone-warning-icon" />
+          {warning}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function StatusView({
+  status,
+  claimUrl,
+  onReset,
+  onFiles,
+}: {
+  status: Status;
+  claimUrl: (siteName: string) => string;
+  onReset: () => void;
+  onFiles: (read: () => Promise<ProcessedFile[]>) => void;
+}) {
+  switch (status.kind) {
+    case 'idle':
+      return (
+        <>
+          <UploadGlyph />
+          <p class="n-dropzone-title">Drag &amp; drop your site folder or zip</p>
+          <p class="n-dropzone-subtitle">Deploys instantly to a live URL — no account needed.</p>
+          <label class="n-dropzone-browse">
+            Browse files
+            <input
+              type="file"
+              hidden
+              multiple
+              // @ts-expect-error non-standard directory-picker attributes
+              webkitdirectory=""
+              directory=""
+              onChange={e => {
+                const input = e.currentTarget as HTMLInputElement;
+                if (input.files?.length) onFiles(() => readFileList(input.files!));
+              }}
+            />
+          </label>
+        </>
+      );
+
+    case 'reading':
+      return <Spinner label="Reading files…" />;
+    case 'creating':
+      return <Spinner label="Creating deploy…" />;
+    case 'processing':
+      return <Spinner label="Processing — almost live…" />;
+
+    case 'uploading': {
+      const pct = status.total ? Math.round((status.uploaded / status.total) * 100) : 0;
+      return (
+        <>
+          <Spinner label={`Uploading ${status.uploaded}/${status.total} files…`} />
+          <div class="n-dropzone-progress" role="progressbar" aria-valuenow={pct}>
+            <div class="n-dropzone-progress-bar" style={{ width: `${pct}%` }} />
+          </div>
+        </>
+      );
+    }
+
+    case 'done':
+      return (
+        <>
+          <SuccessGlyph />
+          <p class="n-dropzone-title">Your site is live!</p>
+          <a class="n-dropzone-link" href={status.url} target="_blank" rel="noopener noreferrer">
+            {status.url.replace(/^https?:\/\//, '')}
+            <Icon name="link" className="n-dropzone-link-icon" />
+          </a>
+          <div class="n-dropzone-actions">
+            <a class="n-dropzone-browse" href={claimUrl(status.siteName)}>
+              Claim this site
+            </a>
+            <button type="button" class="n-dropzone-reset" onClick={onReset}>
+              Deploy another
+            </button>
+          </div>
+        </>
+      );
+
+    case 'error':
+      return (
+        <>
+          <p class="n-dropzone-title n-dropzone-title--error">Something went wrong</p>
+          <p class="n-dropzone-subtitle" role="alert">
+            {status.message}
+          </p>
+          <button type="button" class="n-dropzone-browse" onClick={onReset}>
+            Try again
+          </button>
+        </>
+      );
+  }
+}
+
+function Spinner({ label }: { label: string }) {
+  return (
+    <div class="n-dropzone-loading">
+      <span class="n-dropzone-spinner" aria-hidden="true" />
+      <p class="n-dropzone-subtitle" aria-live="polite">
+        {label} <span class="n-dropzone-nudge">Please don’t refresh.</span>
+      </p>
+    </div>
+  );
+}
+
+function UploadGlyph() {
+  return (
+    <span class="n-dropzone-glyph" aria-hidden="true">
+      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          class="n-dropzone-glyph-tray"
+          d="M8 30v6a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4v-6"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <path
+          class="n-dropzone-glyph-arrow"
+          d="M24 32V10m0 0-8 8m8-8 8 8"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  );
+}
+
+function SuccessGlyph() {
+  return (
+    <span class="n-dropzone-glyph n-dropzone-glyph--success" aria-hidden="true">
+      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle
+          class="n-dropzone-check-ring"
+          cx="24"
+          cy="24"
+          r="20"
+          stroke="currentColor"
+          stroke-width="3"
+        />
+        <path
+          class="n-dropzone-check-mark"
+          d="M15 24.5 21 30.5 33 18"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  );
+}

package/packages/components/preact/DropZone/drop-core/client.ts

@@ -0,0 +1,61 @@
+import type { Deploy, Digest } from './types';
+
+export interface DropClient {
+  getToken(): Promise<string>;
+  createDeploy(digest: Digest, token: string): Promise<Deploy>;
+  uploadFile(deployId: string, path: string, content: ArrayBuffer, token: string): Promise<void>;
+  waitUntilReady(deploy: Deploy, token: string): Promise<void>;
+}
+
+const API = 'https://api.netlify.com/api/v1';
+
+/**
+ * Unauthenticated drop client. Authorized server-side by the Referer header,
+ * so it only works from an allowlisted origin (see backend checklist).
+ */
+export class AnonymousDropClient implements DropClient {
+  constructor(private apiBase = API) {}
+
+  async getToken(): Promise<string> {
+    const res = await fetch(`${this.apiBase}/drop/token`, { method: 'POST' });
+    if (!res.ok) throw new Error(`drop/token failed: ${res.status}`);
+    return (await res.json()).token;
+  }
+
+  async createDeploy(files: Digest, token: string): Promise<Deploy> {
+    const res = await fetch(`${this.apiBase}/drop`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ files, token }),
+    });
+    if (!res.ok) throw new Error(`drop failed: ${res.status}`);
+    return res.json();
+  }
+
+  async uploadFile(
+    deployId: string,
+    path: string,
+    content: ArrayBuffer,
+    token: string
+  ): Promise<void> {
+    // PUT (not POST) so paths with "&" etc. work.
+    const res = await fetch(`${this.apiBase}/deploys/${deployId}/files${path}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/octet-stream', Authorization: `Bearer ${token}` },
+      body: content,
+    });
+    if (!res.ok) throw new Error(`upload ${path} failed: ${res.status}`);
+  }
+
+  async waitUntilReady(deploy: Deploy, token: string): Promise<void> {
+    // Poll the deploy with the drop token until ready.
+    for (let i = 0; i < 600; i++) {
+      const res = await fetch(`${this.apiBase}/deploys/${deploy.id}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok && (await res.json()).state === 'ready') return;
+      await new Promise(r => setTimeout(r, 1000));
+    }
+    throw new Error('Deploy did not become ready in time');
+  }
+}