Skip to main content

📦 MIGRATION PLAN: Digital Downloads to Main Web App

🎯 Objective​

Move the LCARS Digital Product Upload UX from apps/6d-dashboard to the main web app under the LCARS dashboard.

📋 COMPONENTS TO MIGRATE​

1. Component Source​

  • File: apps/6d-dashboard/src/components/lcars/LcarsDigitalProductUploader.tsx
  • Size: 456 lines
  • Type: React FC

2. Styles Source​

  • File: apps/6d-dashboard/src/components/lcars/LcarsDigitalProductUploader.css
  • Size: 579 lines
  • Type: PostCSS

3. Route Source​

  • File: apps/6d-dashboard/src/app/routes/digital-products/index.tsx
  • Type: Page component using LcarsFrame

📂 DESTINATION STRUCTURE​

Main Web App Paths​

web/typescript/valkyr_labs_com/
├── src/
│   ├── components/
│   │   └── digital/                          ← NEW
│   │       ├── DigitalProductUploader.tsx    ← Migrated
│   │       └── DigitalProductUploader.css    ← Migrated styles
│   ├── routes/                               ← Depends on routing setup
│   │   └── digital-products/
│   │       └── index.tsx                     ← New page route
│   └── views/                                ← Alternative if using views
│       └── DigitalProductsPage.tsx

🔄 MIGRATION STEPS​

Step 1: Copy Components​

# Copy component
cp apps/6d-dashboard/src/components/lcars/LcarsDigitalProductUploader.tsx \
   web/typescript/valkyr_labs_com/src/components/digital/DigitalProductUploader.tsx

# Copy styles
cp apps/6d-dashboard/src/components/lcars/LcarsDigitalProductUploader.css \
   web/typescript/valkyr_labs_com/src/components/digital/DigitalProductUploader.css

Step 2: Create Index Export​

File: web/typescript/valkyr_labs_com/src/components/digital/index.ts

export { DigitalProductUploader } from "./DigitalProductUploader";

Step 3: Update Import Paths​

In the migrated component:

  • Change: import '@/theme/lcars-layout.css';
  • To: import '@/styles/lcars-layout.css'; (or wherever Aurora theme lives)

Step 4: Create Page Component​

File: web/typescript/valkyr_labs_com/src/routes/DigitalProductsPage.tsx

import React from "react";
import { DigitalProductUploader } from "@/components/digital";
import { LcarsFrame } from "@/components/lcars";

export const DigitalProductsPage: React.FC = () => {
  return (
    <LcarsFrame>
      <DigitalProductUploader />
    </LcarsFrame>
  );
};

Step 5: Register Route​

Update main router (likely src/App.tsx or src/router.ts):

{
    path: '/digital-products',
    element: <DigitalProductsPage />,
    label: '📦 Digital Products'
}

Step 6: Add to LCARS Launcher​

If using LcarsFrame with launcher:

const launcherItems = [
  // ... existing items
  {
    icon: "📦",
    label: "Digital Products",
    badge: "NEW",
    action: () => navigate("/digital-products"),
  },
];

🔧 ADJUSTMENTS NEEDED​

Dependency Updates​

  • Verify Aurora CSS variables are available
  • Check if LcarsFrame component exists in web app
  • Ensure all imports resolve correctly

CSS Variables to Check​

The component uses:

--aurora-bg-0
--aurora-fg-0
--aurora-accent-1
--aurora-accent-2
--aurora-surface-1
--aurora-border-dim
--aurora-muted
--font-sans
--spacing-*
--radius-*
--transition-*

Ensure these are defined in the web app's theme/CSS variables.

API Integration​

Current component simulates uploads. To connect real APIs:

  1. Find handleUpload() function in component
  2. Replace simulation logic with actual API calls
  3. Wire to backend upload endpoint

📝 CHECKLIST​

  • Create /web/typescript/valkyr_labs_com/src/components/digital/ directory
  • Copy LcarsDigitalProductUploader.tsx
  • Copy LcarsDigitalProductUploader.css
  • Rename component to DigitalProductUploader
  • Update import paths in component
  • Create index.ts export file
  • Create page component in routes
  • Register route in main router
  • Add launcher item to LCARS sidebar
  • Test component rendering
  • Verify CSS styling
  • Test drag-and-drop functionality
  • Connect API endpoints (optional)
  • Add navigation back/forward between pages

🧪 TESTING​

Visual Testing​

  1. Navigate to /digital-products
  2. Verify LCARS styling loads
  3. Test drag-and-drop zone
  4. Verify file preview
  5. Test form inputs
  6. Check upload progress animation
  7. Verify success state

Functional Testing​

  1. Drag file to upload zone
  2. Fill in product details
  3. Click "Upload Product"
  4. Verify progress animation
  5. Click "Upload Another"
  6. Verify reset works

📊 DEPENDENCIES​

Component requires:

  • React 18+
  • Aurora CSS theme/variables
  • LcarsFrame component (if using)
  • Modern browser (File API, Drag & Drop)

No external packages - component is standalone.

🎯 OPTIONAL ENHANCEMENTS​

Once migrated, consider:

  1. Real API Integration - Connect to backend upload service
  2. Image Previews - Show thumbnail for image files
  3. Batch Uploads - Allow multiple files
  4. Download History - Show uploaded products list
  5. Analytics - Track upload metrics
  6. Notifications - Toast notifications on success/error

📞 REFERENCES​

  • Source 6D Dashboard: apps/6d-dashboard/src/components/lcars/LcarsDigitalProductUploader.tsx
  • Source Page: apps/6d-dashboard/src/app/routes/digital-products/index.tsx
  • Target Web App: web/typescript/valkyr_labs_com/src/

Status: 🟢 READY TO MIGRATE
Complexity: ⚡ LOW - Standalone component, minimal dependencies
Estimated Time: 15-20 minutes