@mars-stack/cli 3.0.2 → 4.0.0

package/template/src/features/uploads/components/FileUploader.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import { useCallback, useRef, useState } from 'react';
+import { Badge } from '@mars-stack/ui';
+
+interface UploadingFile {
+  id: string;
+  file: File;
+  progress: number;
+  status: 'uploading' | 'success' | 'error';
+  errorMessage?: string;
+}
+
+interface FileUploaderProps {
+  acceptedTypes?: string;
+  maxSizeBytes?: number;
+  onUploadComplete?: () => void;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function UploadIcon() {
+  return (
+    <svg className="mx-auto h-10 w-10 text-text-muted" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+    </svg>
+  );
+}
+
+export function FileUploader({
+  acceptedTypes,
+  maxSizeBytes = 10 * 1024 * 1024,
+  onUploadComplete,
+}: FileUploaderProps) {
+  const [uploads, setUploads] = useState<UploadingFile[]>([]);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const uploadFile = useCallback(async (file: File) => {
+    const uploadId = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+
+    if (file.size > maxSizeBytes) {
+      setUploads((prev) => [
+        ...prev,
+        {
+          id: uploadId,
+          file,
+          progress: 0,
+          status: 'error',
+          errorMessage: `File exceeds ${formatFileSize(maxSizeBytes)} limit`,
+        },
+      ]);
+      return;
+    }
+
+    setUploads((prev) => [
+      ...prev,
+      { id: uploadId, file, progress: 0, status: 'uploading' },
+    ]);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const xhr = new XMLHttpRequest();
+
+      await new Promise<void>((resolve, reject) => {
+        xhr.upload.addEventListener('progress', (event) => {
+          if (event.lengthComputable) {
+            const pct = Math.round((event.loaded / event.total) * 100);
+            setUploads((prev) =>
+              prev.map((u) => (u.id === uploadId ? { ...u, progress: pct } : u)),
+            );
+          }
+        });
+
+        xhr.addEventListener('load', () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            setUploads((prev) =>
+              prev.map((u) =>
+                u.id === uploadId ? { ...u, progress: 100, status: 'success' } : u,
+              ),
+            );
+            resolve();
+          } else {
+            let errorMsg = 'Upload failed';
+            try {
+              const resp = JSON.parse(xhr.responseText) as { error?: string };
+              if (resp.error) errorMsg = resp.error;
+            } catch { /* use default message */ }
+            reject(new Error(errorMsg));
+          }
+        });
+
+        xhr.addEventListener('error', () => reject(new Error('Network error')));
+        xhr.open('POST', '/api/protected/files/upload');
+        xhr.withCredentials = true;
+        xhr.send(formData);
+      });
+
+      onUploadComplete?.();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Upload failed';
+      setUploads((prev) =>
+        prev.map((u) =>
+          u.id === uploadId ? { ...u, status: 'error', errorMessage: message } : u,
+        ),
+      );
+    }
+  }, [maxSizeBytes, onUploadComplete]);
+
+  const handleFiles = useCallback(
+    (files: FileList | null) => {
+      if (!files) return;
+      Array.from(files).forEach((file) => uploadFile(file));
+    },
+    [uploadFile],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      setIsDragOver(false);
+      handleFiles(event.dataTransfer.files);
+    },
+    [handleFiles],
+  );
+
+  const clearCompleted = useCallback(() => {
+    setUploads((prev) => prev.filter((u) => u.status === 'uploading'));
+  }, []);
+
+  const hasCompleted = uploads.some((u) => u.status !== 'uploading');
+
+  return (
+    <div className="space-y-4">
+      <div
+        role="button"
+        tabIndex={0}
+        onDrop={handleDrop}
+        onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
+        onDragLeave={() => setIsDragOver(false)}
+        onClick={() => inputRef.current?.click()}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click(); }}
+        className={`flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-8 transition-colors ${
+          isDragOver
+            ? 'border-brand-primary bg-brand-primary-muted'
+            : 'border-border-default bg-surface-card hover:border-brand-primary hover:bg-surface-hover'
+        }`}
+      >
+        <UploadIcon />
+        <p className="mt-3 text-sm font-medium text-text-primary">
+          Drop files here or click to browse
+        </p>
+        <p className="mt-1 text-xs text-text-muted">
+          Max {formatFileSize(maxSizeBytes)} per file
+          {acceptedTypes ? ` — ${acceptedTypes}` : ''}
+        </p>
+        <input
+          ref={inputRef}
+          type="file"
+          multiple
+          accept={acceptedTypes}
+          className="hidden"
+          onChange={(e) => handleFiles(e.target.files)}
+        />
+      </div>
+
+      {uploads.length > 0 && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium uppercase tracking-wider text-text-muted">
+              Uploads
+            </span>
+            {hasCompleted && (
+              <button
+                type="button"
+                onClick={clearCompleted}
+                className="text-xs text-text-link hover:text-text-link-hover"
+              >
+                Clear completed
+              </button>
+            )}
+          </div>
+
+          {uploads.map((upload) => (
+            <div
+              key={upload.id}
+              className="flex items-center gap-3 rounded-lg border border-border-default bg-surface-card p-3"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium text-text-primary">
+                  {upload.file.name}
+                </p>
+                <p className="text-xs text-text-muted">{formatFileSize(upload.file.size)}</p>
+              </div>
+
+              {upload.status === 'uploading' && (
+                <div className="flex items-center gap-2">
+                  <div className="h-1.5 w-24 overflow-hidden rounded-full bg-surface-hover">
+                    <div
+                      className="h-full rounded-full bg-brand-primary transition-all duration-300"
+                      style={{ width: `${upload.progress}%` }}
+                    />
+                  </div>
+                  <span className="text-xs text-text-muted">{upload.progress}%</span>
+                </div>
+              )}
+
+              {upload.status === 'success' && <Badge variant="success">Done</Badge>}
+
+              {upload.status === 'error' && (
+                <Badge variant="error">{upload.errorMessage ?? 'Failed'}</Badge>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/template/src/features/uploads/components/index.ts

@@ -0,0 +1,2 @@
+export { FileUploader } from './FileUploader';
+export { FileList } from './FileList';

package/template/src/features/uploads/index.ts

@@ -0,0 +1,2 @@
+export { FileUploader, FileList } from './components';
+export type { FileRecord, CreateFileData, FileListParams } from './types';

package/template/src/proxy.ts

@@ -20,7 +20,7 @@ const csrf = createCSRFProtection({
 
 const authRoutes = [routes.signIn, routes.signUp, routes.forgotPassword, routes.resetPassword];
 
-const protectedRoutes = [routes.dashboard, routes.settings];
+const protectedRoutes = [routes.dashboard, routes.settings, routes.files];
 
 const adminRoutes = [routes.admin];