npm - @package-uploader/ui - Versions diffs - 1.0.14 → 1.1.1 - Mend

@package-uploader/ui 1.0.14 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/assets/index-C19M6liw.css +1 -0
package/dist/assets/index-Ca5beg0c.js +71 -0
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/api/client.ts +129 -3
package/src/components/CourseStructureStep.tsx +211 -0
package/src/components/UploadModal.tsx +286 -101
package/src/index.css +352 -1
package/src/main.tsx +28 -1
package/dist/assets/index-8HHKr2PX.css +0 -1
package/dist/assets/index-Cur4iArP.js +0 -71

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Package Uploader</title>
-    <script type="module" crossorigin src="/assets/index-Cur4iArP.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-8HHKr2PX.css">
+    <script type="module" crossorigin src="/assets/index-Ca5beg0c.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C19M6liw.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@package-uploader/ui",
-  "version": "1.0.14",
+  "version": "1.1.1",
   "description": "React UI for uploading and browsing courses on LMS platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/api/client.ts CHANGED Viewed

@@ -1,6 +1,33 @@
 // API client for communicating with the backend
-// Use VITE_API_URL env var for separate backend domain, or default to same-origin /api
-const API_BASE = import.meta.env.VITE_API_URL || '/api';
+// Detects API URL at runtime based on where the app is mounted
+function detectApiBase(): string {
+  // If explicitly set via env var at build time, use that
+  if (import.meta.env.VITE_API_URL) {
+    return import.meta.env.VITE_API_URL;
+  }
+  // Otherwise detect from the script location or current path
+  const scripts = document.querySelectorAll('script[src*="assets/index"]');
+  if (scripts.length > 0) {
+    const src = (scripts[0] as HTMLScriptElement).src;
+    const url = new URL(src);
+    const assetsIndex = url.pathname.indexOf('/assets/');
+    if (assetsIndex > 0) {
+      return url.pathname.substring(0, assetsIndex) + '/api';
+    }
+  }
+  // Fallback: detect from current path
+  const path = window.location.pathname;
+  if (path.endsWith('/')) {
+    return path.slice(0, -1) + '/api';
+  }
+  const lastSlash = path.lastIndexOf('/');
+  return (lastSlash > 0 ? path.substring(0, lastSlash) : '') + '/api';
+}
+const API_BASE = detectApiBase();
 export interface Folder {
   id: number;
@@ -93,6 +120,12 @@ export interface AppConfig {
   user: UserProfile | null;
 }
+export interface CourseClassMappings {
+  course?: string;
+  lessons?: Record<string, string>;
+  blocks?: Record<string, string>;
+}
 async function request<T>(
   method: string,
   path: string,
@@ -174,15 +207,72 @@ export const api = {
   getDocumentVersions: (documentId: number) =>
     request<DocumentVersion[]>('GET', `/documents/${documentId}/versions`),
+  // Parse course structure (for customization step)
+  parseCourseStructure: async (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    try {
+      const result = await request<any>('POST', '/parse-structure', formData);
+      if (result.error || result.isRise === false) return null;
+      return result;
+    } catch {
+      return null;
+    }
+  },
   // Upload
-  uploadCourse: (file: File, folderId: number, options?: { title?: string }) => {
+  uploadCourse: (file: File, folderId: number, options?: { title?: string; skin?: string; classMappings?: CourseClassMappings }) => {
     const formData = new FormData();
     formData.append('file', file);
     formData.append('folderId', String(folderId));
     if (options?.title) formData.append('title', options.title);
+    if (options?.skin) formData.append('skin', options.skin);
+    if (options?.classMappings) formData.append('classMappings', JSON.stringify(options.classMappings));
     return request<UploadResult>('POST', '/upload', formData);
   },
+  // Upload with progress tracking (uses XMLHttpRequest for onprogress events)
+  uploadCourseWithProgress: (
+    file: File,
+    folderId: number,
+    options: { title?: string } | undefined,
+    onProgress: (percent: number) => void
+  ): Promise<UploadResult> => {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('folderId', String(folderId));
+      if (options?.title) formData.append('title', options.title);
+      xhr.upload.onprogress = (event) => {
+        if (event.lengthComputable) {
+          const percent = Math.round((event.loaded / event.total) * 100);
+          onProgress(percent);
+        }
+      };
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          try {
+            resolve(JSON.parse(xhr.responseText));
+          } catch {
+            reject(new Error('Invalid JSON response'));
+          }
+        } else {
+          reject(new Error(xhr.statusText || `Upload failed: ${xhr.status}`));
+        }
+      };
+      xhr.onerror = () => reject(new Error('Network error during upload'));
+      xhr.onabort = () => reject(new Error('Upload aborted'));
+      xhr.open('POST', `${API_BASE}/upload`);
+      xhr.withCredentials = true; // Send cookies for cross-origin
+      xhr.send(formData);
+    });
+  },
   uploadVersion: (file: File, documentId: number, note?: string) => {
     const formData = new FormData();
     formData.append('file', file);
@@ -194,4 +284,40 @@ export const api = {
   // Launch
   getLaunchUrl: (documentId: number) =>
     request<{ url: string }>('GET', `/documents/${documentId}/launch`),
+  // Wrap & Download (PA-Patcher wrapping without CDS upload)
+  wrapAndDownload: async (file: File, options?: { skin?: string; classMappings?: CourseClassMappings }): Promise<void> => {
+    const formData = new FormData();
+    formData.append('file', file);
+    if (options?.skin) formData.append('skin', options.skin);
+    if (options?.classMappings) formData.append('classMappings', JSON.stringify(options.classMappings));
+    const response = await fetch(`${API_BASE}/wrap`, {
+      method: 'POST',
+      body: formData,
+      credentials: 'include',
+    });
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(error || `Wrap failed: ${response.status}`);
+    }
+    const blob = await response.blob();
+    // Extract filename from Content-Disposition header or generate one
+    const disposition = response.headers.get('Content-Disposition');
+    const filenameMatch = disposition?.match(/filename="(.+)"/);
+    const filename = filenameMatch?.[1] || file.name.replace(/\.zip$/i, '-wrapped.zip');
+    // Trigger browser download
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  },
 };

package/src/components/CourseStructureStep.tsx ADDED Viewed

@@ -0,0 +1,211 @@
+import { useState } from 'react';
+/** Block within a lesson */
+interface CourseStructureBlock {
+  id: string;
+  type: string;
+  family?: string;
+  variant?: string;
+  title?: string;
+}
+/** Lesson in the course */
+interface CourseStructureLesson {
+  id: string;
+  title: string;
+  type: string;
+  blocks: CourseStructureBlock[];
+}
+/** Full parsed course structure */
+export interface CourseStructure {
+  courseTitle: string;
+  courseId?: string;
+  lessons: CourseStructureLesson[];
+}
+/** Class assignments at course/lesson/block levels */
+export interface CourseClassMappings {
+  course?: string;
+  lessons?: Record<string, string>;
+  blocks?: Record<string, string>;
+}
+interface CourseStructureStepProps {
+  structure: CourseStructure;
+  classMappings: CourseClassMappings;
+  onChange: (mappings: CourseClassMappings) => void;
+}
+export default function CourseStructureStep({
+  structure,
+  classMappings,
+  onChange,
+}: CourseStructureStepProps) {
+  const [expandedLessons, setExpandedLessons] = useState<Set<string>>(new Set());
+  const toggleLesson = (lessonId: string) => {
+    setExpandedLessons((prev) => {
+      const next = new Set(prev);
+      if (next.has(lessonId)) {
+        next.delete(lessonId);
+      } else {
+        next.add(lessonId);
+      }
+      return next;
+    });
+  };
+  const setCourseClass = (value: string) => {
+    onChange({ ...classMappings, course: value || undefined });
+  };
+  const setLessonClass = (lessonId: string, value: string) => {
+    const lessons = { ...classMappings.lessons };
+    if (value) {
+      lessons[lessonId] = value;
+    } else {
+      delete lessons[lessonId];
+    }
+    onChange({ ...classMappings, lessons: Object.keys(lessons).length > 0 ? lessons : undefined });
+  };
+  const setBlockClass = (blockId: string, value: string) => {
+    const blocks = { ...classMappings.blocks };
+    if (value) {
+      blocks[blockId] = value;
+    } else {
+      delete blocks[blockId];
+    }
+    onChange({ ...classMappings, blocks: Object.keys(blocks).length > 0 ? blocks : undefined });
+  };
+  const clearAll = () => {
+    onChange({});
+  };
+  // Count total assignments
+  const assignmentCount =
+    (classMappings.course ? 1 : 0) +
+    Object.keys(classMappings.lessons || {}).length +
+    Object.keys(classMappings.blocks || {}).length;
+  const blockCount = structure.lessons.reduce((sum, l) => sum + l.blocks.length, 0);
+  const formatBlockLabel = (block: CourseStructureBlock): string => {
+    const parts = [block.type];
+    if (block.variant) parts.push(block.variant);
+    return parts.join(' / ');
+  };
+  return (
+    <div className="course-structure-step">
+      <div className="course-structure-header">
+        <div>
+          <h4>Course Structure</h4>
+          <span className="course-structure-meta">
+            {structure.lessons.length} lessons, {blockCount} blocks
+            {assignmentCount > 0 && (
+              <span className="course-structure-badge">{assignmentCount} class{assignmentCount !== 1 ? 'es' : ''} assigned</span>
+            )}
+          </span>
+        </div>
+        {assignmentCount > 0 && (
+          <button className="btn btn-sm btn-secondary" onClick={clearAll}>
+            Clear All
+          </button>
+        )}
+      </div>
+      {/* Course-level class */}
+      <div className="tree-node tree-course">
+        <div className="tree-node-row">
+          <span className="tree-node-icon">&#x1F4DA;</span>
+          <span className="tree-node-label">{structure.courseTitle}</span>
+        </div>
+        <input
+          type="text"
+          className="tree-class-input"
+          placeholder="Course-level class..."
+          value={classMappings.course || ''}
+          onChange={(e) => setCourseClass(e.target.value)}
+        />
+      </div>
+      {/* Lessons */}
+      <div className="tree-lessons">
+        {structure.lessons.map((lesson, lessonIdx) => {
+          const isExpanded = expandedLessons.has(lesson.id);
+          const lessonHasClass = !!classMappings.lessons?.[lesson.id];
+          const blocksWithClass = lesson.blocks.filter(
+            (b) => !!classMappings.blocks?.[b.id]
+          ).length;
+          return (
+            <div key={lesson.id} className="tree-lesson">
+              <div
+                className="tree-node tree-node-lesson"
+                onClick={() => toggleLesson(lesson.id)}
+              >
+                <div className="tree-node-row">
+                  <span className="tree-expand">{isExpanded ? '\u25BC' : '\u25B6'}</span>
+                  <span className="tree-node-label">
+                    <span className="tree-lesson-num">{lessonIdx + 1}.</span>
+                    {' '}{lesson.title}
+                  </span>
+                  {(lessonHasClass || blocksWithClass > 0) && !isExpanded && (
+                    <span className="tree-node-indicator">
+                      {lessonHasClass && blocksWithClass > 0
+                        ? `lesson + ${blocksWithClass} block${blocksWithClass > 1 ? 's' : ''}`
+                        : lessonHasClass
+                        ? 'lesson'
+                        : `${blocksWithClass} block${blocksWithClass > 1 ? 's' : ''}`}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {isExpanded && (
+                <div className="tree-lesson-content">
+                  <div className="tree-lesson-class">
+                    <input
+                      type="text"
+                      className="tree-class-input"
+                      placeholder="Lesson-level class..."
+                      value={classMappings.lessons?.[lesson.id] || ''}
+                      onChange={(e) => setLessonClass(lesson.id, e.target.value)}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  </div>
+                  {lesson.blocks.map((block) => (
+                    <div key={block.id} className="tree-node tree-node-block">
+                      <div className="tree-node-row">
+                        <span className="tree-block-pipe">|--</span>
+                        <span className="tree-block-type">{formatBlockLabel(block)}</span>
+                        {block.title && (
+                          <span className="tree-block-title" title={block.title}>
+                            {block.title.length > 40
+                              ? block.title.substring(0, 40) + '...'
+                              : block.title}
+                          </span>
+                        )}
+                      </div>
+                      <input
+                        type="text"
+                        className="tree-class-input tree-class-input-sm"
+                        placeholder="class..."
+                        value={classMappings.blocks?.[block.id] || ''}
+                        onChange={(e) => setBlockClass(block.id, e.target.value)}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}