@vue-skuilder/cli 0.1.7 → 0.1.8-0

package/dist/studio-ui-src/main.ts

@@ -0,0 +1,148 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+
+// Vuetify
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import '@mdi/font/css/materialdesignicons.css';
+
+// Component library styles
+import '@vue-skuilder/courses/style';
+import '@vue-skuilder/common-ui/style';
+import '@vue-skuilder/edit-ui/style';
+
+// Data layer initialization
+import { initializeDataLayer } from '@vue-skuilder/db';
+
+import App from './App.vue';
+import router from './router';
+import { getStudioConfig, getConfigErrorMessage } from './config/development';
+
+// Initialize Vuetify with all components and directives
+const vuetify = createVuetify({
+  components,
+  directives,
+  theme: {
+    defaultTheme: 'light',
+  },
+});
+
+(async () => {
+  // Get studio configuration (CLI-injected or environment variables)
+  const studioConfig = getStudioConfig();
+
+  if (!studioConfig) {
+    throw new Error(getConfigErrorMessage());
+  }
+
+  // Parse the CLI-provided CouchDB URL (format: http://localhost:5985)
+  const couchUrl = new URL(studioConfig.couchdb.url);
+  const serverUrl = `${couchUrl.hostname}:${couchUrl.port}/`;
+
+  console.log('🎨 Studio Mode: Initializing data layer with CLI-provided CouchDB connection');
+  console.log(`   Server: ${couchUrl.protocol}//${serverUrl}`);
+  console.log(`   Username: ${studioConfig.couchdb.username}`);
+
+  await initializeDataLayer({
+    type: 'couch',
+    options: {
+      COUCHDB_SERVER_PROTOCOL: couchUrl.protocol.replace(':', ''),
+      COUCHDB_SERVER_URL: serverUrl,
+      COUCHDB_USERNAME: studioConfig.couchdb.username,
+      COUCHDB_PASSWORD: studioConfig.couchdb.password,
+    },
+  });
+
+  const pinia = createPinia();
+  const app = createApp(App);
+
+  // Register all course view components globally (like platform-ui)
+  console.log('🎨 Studio Mode: Importing course view components');
+  const { allCourses: Courses } = await import('@vue-skuilder/courses');
+  console.log('   ✅ Course components imported successfully');
+
+  // Check for custom questions configuration and import if available
+  console.log('🎨 Studio Mode: Checking for custom questions configuration');
+  let customQuestions = null;
+  try {
+    console.log('   📁 Fetching custom-questions-config.json');
+    const configResponse = await fetch('/custom-questions-config.json');
+    if (configResponse.ok) {
+      console.log('   ✅ Custom questions config file found');
+      const customConfig = await configResponse.json();
+      console.log('   📋 Custom config parsed:', customConfig);
+      if (customConfig.hasCustomQuestions && customConfig.importPath) {
+        console.log(`🎨 Studio Mode: Loading custom questions from ${customConfig.packageName}`);
+        console.log(`   📦 Import path: ${customConfig.importPath}`);
+        try {
+          const customModule = await import(customConfig.importPath);
+          console.log('   ✅ Custom module imported successfully');
+          customQuestions = customModule.allCustomQuestions?.();
+          if (customQuestions) {
+            console.log(
+              `   ✅ Loaded custom questions: ${customQuestions.questionClasses?.length || 0} types`
+            );
+            console.log('   📊 Custom questions object:', customQuestions);
+          } else {
+            console.log('   ⚠️  Custom module did not return questions data');
+          }
+        } catch (importError) {
+          console.warn(
+            `   ⚠️  Failed to import custom questions: ${importError instanceof Error ? importError.message : String(importError)}`
+          );
+        }
+      } else {
+        console.log(
+          '   ℹ️  Custom config exists but hasCustomQuestions is false or importPath is missing'
+        );
+      }
+    } else {
+      console.log('   ℹ️  Custom questions config file not found (this is normal)');
+    }
+  } catch (configError) {
+    // No custom questions config - this is normal for default studio mode
+    console.log('   ℹ️  No custom questions config available (default studio mode)');
+  }
+
+
+  console.log('🎨 Studio Mode: Collecting view components');
+  const viewComponents = Courses.allViewsRaw();
+  console.log(`   ✅ Collected ${Object.keys(viewComponents).length} base view components`);
+
+  // Add custom question view components if available
+  if (customQuestions?.views) {
+    console.log(`   📦 Adding ${customQuestions.views.length} custom question view components`);
+    customQuestions.views.forEach((view: any) => {
+      if (view.name && view.component) {
+        console.log(`   ➕ Registering custom view component: ${view.name}`);
+        viewComponents[view.name] = view.component;
+      } else {
+        console.warn(`   ⚠️  Skipping invalid custom view (missing name or component):`, view);
+      }
+    });
+    console.log(
+      `   ✅ Total view components after custom additions: ${Object.keys(viewComponents).length}`
+    );
+  } else {
+    console.log('   ℹ️  No custom question views to add');
+  }
+
+  Object.entries(viewComponents).forEach(([name, component]) => {
+    app.component(name, component);
+  });
+
+  app.use(pinia);
+  app.use(vuetify);
+  app.use(router);
+
+  // Dynamically import piniaPlugin (like platform-ui)
+  const { piniaPlugin, useAuthStore } = await import('@vue-skuilder/common-ui');
+  app.use(piniaPlugin, { pinia });
+
+  // Initialize auth store like standalone-ui does
+  await useAuthStore().init();
+
+  app.mount('#app');
+})();

package/dist/studio-ui-src/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vue-skuilder/studio-ui",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.8-0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint ."
+  },
+  "dependencies": {
+    "@mdi/font": "^7.3.67",
+    "@vue-skuilder/common": "workspace:*",
+    "@vue-skuilder/common-ui": "workspace:*",
+    "@vue-skuilder/courses": "workspace:*",
+    "@vue-skuilder/db": "workspace:*",
+    "@vue-skuilder/edit-ui": "workspace:*",
+    "pinia": "^2.3.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.2.0",
+    "vuetify": "^3.7.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^9.30.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.9",
+    "vue-tsc": "^1.8.0"
+  },
+  "stableVersion": "0.1.7"
+}

package/dist/studio-ui-src/router/index.ts

@@ -0,0 +1,32 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'browse',
+    component: () => import('../views/BrowseView.vue'),
+  },
+  {
+    path: '/course-editor',
+    name: 'course-editor',
+    component: () => import('../views/CourseEditorView.vue'),
+  },
+  {
+    path: '/bulk-import',
+    name: 'bulk-import',
+    component: () => import('../views/BulkImportView.vue'),
+  },
+  {
+    path: '/create-card',
+    name: 'create-card',
+    component: () => import('../views/CreateCardView.vue'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

package/dist/studio-ui-src/stores/useAuthStore.ts

@@ -0,0 +1,3 @@
+// Studio-ui uses the common-ui auth store directly
+// This file can be removed once we confirm the integration works
+export { useAuthStore, getCurrentUser } from '@vue-skuilder/common-ui';

package/dist/studio-ui-src/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    
+    /* Node config (for vite.config.ts) */
+    "composite": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.ts"]
+}

package/dist/studio-ui-src/views/BrowseView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="browse-view">
+    <div v-if="loading" class="text-center pa-4">
+      <v-progress-circular indeterminate />
+      <p class="mt-2">Loading course...</p>
+    </div>
+
+    <div v-else-if="error" class="text-center pa-4">
+      <v-icon color="error" size="48">mdi-alert-circle</v-icon>
+      <h2 class="mt-2">Browse Error</h2>
+      <p>{{ error }}</p>
+    </div>
+
+    <div v-else-if="courseId">
+      <course-information :course-id="courseId" :view-lookup-function="viewLookupFunction" :edit-mode="'full'">
+        <template #actions>&nbsp;</template>
+      </course-information>
+    </div>
+
+    <div v-else class="text-center pa-4">
+      <v-icon size="48">mdi-school</v-icon>
+      <h2 class="mt-2">No Course Loaded</h2>
+      <p>Please load a course to start browsing.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { CourseInformation } from '@vue-skuilder/common-ui';
+import { allCourses } from '@vue-skuilder/courses';
+import { getStudioConfig, getConfigErrorMessage } from '../config/development';
+
+// Browse view state
+const loading = ref(true);
+const error = ref<string | null>(null);
+const courseId = ref<string | null>(null);
+
+// View lookup function with proper context binding
+const viewLookupFunction = (viewDescription: any) => {
+  return allCourses.getView(viewDescription);
+};
+
+// Initialize browse view
+onMounted(async () => {
+  try {
+    // Get studio configuration (CLI-injected or environment variables)
+    const studioConfig = getStudioConfig();
+
+    if (!studioConfig) {
+      throw new Error(getConfigErrorMessage());
+    }
+
+    courseId.value = studioConfig.database.name;
+    loading.value = false;
+  } catch (err) {
+    console.error('Browse view initialization error:', err);
+    error.value = err instanceof Error ? err.message : 'Unknown error';
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.browse-view {
+  height: 100%;
+}
+
+.studio-header {
+  padding: 16px 0;
+}
+
+.studio-header h1 {
+  color: rgb(var(--v-theme-primary));
+  font-weight: 500;
+}
+
+.studio-header p {
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin: 0;
+}
+</style>

package/dist/studio-ui-src/views/BulkImportView.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="bulk-import-view">
+    <v-card>
+      <v-card-title>
+        <v-icon start>mdi-file-import</v-icon>
+        Bulk Import Cards
+      </v-card-title>
+      
+      <v-card-text>
+        <div v-if="loading" class="text-center pa-4">
+          <v-progress-circular indeterminate />
+          <p class="mt-2">Loading bulk import tool...</p>
+        </div>
+
+        <div v-else-if="error" class="text-center pa-4">
+          <v-icon color="error" size="24">mdi-alert-circle</v-icon>
+          <p class="mt-2 text-error">{{ error }}</p>
+        </div>
+
+        <div v-else-if="courseId && courseConfig">
+          <!-- Bulk Import View from edit-ui package -->
+          <bulk-import-view 
+            :course-cfg="courseConfig"
+            :view-lookup-function="allCourses.getView"
+            @import-completed="onImportCompleted"
+          />
+        </div>
+
+        <div v-else>
+          <p class="text-center">No course loaded</p>
+        </div>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { BulkImportView } from '@vue-skuilder/edit-ui';
+import { allCourses } from '@vue-skuilder/courses';
+import { getStudioConfig, getConfigErrorMessage } from '../config/development';
+import { getDataLayer } from '@vue-skuilder/db';
+import type { CourseConfig } from '@vue-skuilder/common';
+
+// Bulk import state
+const loading = ref(true);
+const error = ref<string | null>(null);
+const courseId = ref<string | null>(null);
+const courseConfig = ref<CourseConfig | null>(null);
+
+// Initialize bulk import view
+onMounted(async () => {
+  try {
+    // Get studio configuration (CLI-injected or environment variables)
+    const studioConfig = getStudioConfig();
+
+    if (!studioConfig) {
+      throw new Error(getConfigErrorMessage());
+    }
+
+    courseId.value = studioConfig.database.name;
+
+    // Load course configuration
+    const dataLayer = getDataLayer();
+    const courseDB = dataLayer.getCourseDB(courseId.value);
+    courseConfig.value = await courseDB.getCourseConfig();
+
+    loading.value = false;
+  } catch (err) {
+    console.error('Bulk import initialization error:', err);
+    error.value = err instanceof Error ? err.message : 'Unknown error';
+    loading.value = false;
+  }
+});
+
+// Handle import completion
+const onImportCompleted = (result: unknown) => {
+  console.log('Import completed:', result);
+  // Could add success notification here
+};
+</script>
+
+<style scoped>
+.bulk-import-view {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 16px;
+}
+</style>

package/dist/studio-ui-src/views/CourseEditorView.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="course-editor-view">
+    <div v-if="loading" class="text-center pa-4">
+      <v-progress-circular indeterminate />
+      <p class="mt-2">Loading course editor...</p>
+    </div>
+
+    <div v-else-if="error" class="text-center pa-4">
+      <v-icon color="error" size="48">mdi-alert-circle</v-icon>
+      <h2 class="mt-2">Editor Error</h2>
+      <p>{{ error }}</p>
+    </div>
+
+    <div v-else-if="courseId">
+      <!-- Course Editor from edit-ui package -->
+      <course-editor :course="courseId" :view-lookup-function="allCourses.getView" />
+    </div>
+
+    <div v-else class="text-center pa-4">
+      <v-icon size="48">mdi-school</v-icon>
+      <h2 class="mt-2">No Course Loaded</h2>
+      <p>Please load a course to start editing.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { CourseEditor } from '@vue-skuilder/edit-ui';
+import { allCourses } from '@vue-skuilder/courses';
+import { getStudioConfig, getConfigErrorMessage } from '../config/development';
+
+// Course editor state
+const loading = ref(true);
+const error = ref<string | null>(null);
+const courseId = ref<string | null>(null);
+
+// Initialize course editor
+onMounted(async () => {
+  try {
+    // Get studio configuration (CLI-injected or environment variables)
+    const studioConfig = getStudioConfig();
+
+    if (!studioConfig) {
+      throw new Error(getConfigErrorMessage());
+    }
+
+    courseId.value = studioConfig.database.name;
+    loading.value = false;
+  } catch (err) {
+    console.error('Course editor initialization error:', err);
+    error.value = err instanceof Error ? err.message : 'Unknown error';
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.course-editor-view {
+  height: 100%;
+}
+</style>

package/dist/studio-ui-src/views/CreateCardView.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="create-card-view">
+    <v-card>
+      <v-card-title>
+        <v-icon start>mdi-card-plus</v-icon>
+        Create New Card
+      </v-card-title>
+
+      <v-card-text>
+        <div v-if="loading" class="text-center pa-4">
+          <v-progress-circular indeterminate />
+          <p class="mt-2">Loading card creation form...</p>
+        </div>
+
+        <div v-else-if="error" class="text-center pa-4">
+          <v-icon color="error" size="24">mdi-alert-circle</v-icon>
+          <p class="mt-2 text-error">{{ error }}</p>
+        </div>
+
+        <div v-else-if="courseId && courseConfig">
+          <!-- Card type selector -->
+          <v-select
+            v-if="availableDataShapes.length > 1"
+            v-model="selectedDataShapeIndex"
+            :items="
+              availableDataShapes.map((shape, index) => ({
+                title: shape.name.replace(/^.*\./, ''),
+                value: index,
+              }))
+            "
+            label="Card Type"
+            class="mb-4"
+          />
+
+          <!-- Data Input Form from edit-ui package -->
+          <data-input-form
+            v-if="selectedDataShape"
+            :course-id="courseId"
+            :course-cfg="courseConfig"
+            :data-shape="selectedDataShape"
+            :view-lookup-function="allCourses.getView"
+            @card-created="onCardCreated"
+          />
+
+          <div v-else-if="availableDataShapes.length === 0" class="text-center pa-4">
+            <v-icon color="warning" size="24">mdi-alert</v-icon>
+            <p class="mt-2">No card types available in this course</p>
+          </div>
+        </div>
+
+        <div v-else>
+          <p class="text-center">No course loaded</p>
+        </div>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { DataInputForm } from '@vue-skuilder/edit-ui';
+import { allCourses } from '@vue-skuilder/courses';
+import { getStudioConfig, getConfigErrorMessage } from '../config/development';
+import { getDataLayer } from '@vue-skuilder/db';
+import type { CourseConfig, DataShape } from '@vue-skuilder/common';
+
+// Create card state
+const loading = ref(true);
+const error = ref<string | null>(null);
+const courseId = ref<string | null>(null);
+const courseConfig = ref<CourseConfig | null>(null);
+const selectedDataShapeIndex = ref<number>(0);
+
+// Get available data shapes
+const availableDataShapes = computed(() => {
+  if (!courseConfig.value?.dataShapes) return [];
+  return courseConfig.value.dataShapes;
+});
+
+// Get currently selected data shape
+const selectedDataShape = computed((): DataShape | null => {
+  const shapes = availableDataShapes.value;
+  if (shapes.length === 0) return null;
+
+  // Find the corresponding DataShape from allCourses
+  const shapeName = shapes[selectedDataShapeIndex.value]?.name;
+  if (!shapeName) return null;
+
+  // Search through all courses to find the DataShape
+  for (const course of allCourses.courses) {
+    for (const question of course.questions) {
+      for (const dataShape of question.dataShapes) {
+        if (dataShape.name === shapeName.split('.').pop()) {
+          return dataShape;
+        }
+      }
+    }
+  }
+  return null;
+});
+
+// Initialize create card view
+onMounted(async () => {
+  try {
+    // Get studio configuration (CLI-injected or environment variables)
+    const studioConfig = getStudioConfig();
+
+    if (!studioConfig) {
+      throw new Error(getConfigErrorMessage());
+    }
+
+    courseId.value = studioConfig.database.name;
+
+    // Load course configuration
+    const dataLayer = getDataLayer();
+    const courseDB = dataLayer.getCourseDB(courseId.value);
+    courseConfig.value = await courseDB.getCourseConfig();
+
+    loading.value = false;
+  } catch (err) {
+    console.error('Create card initialization error:', err);
+    error.value = err instanceof Error ? err.message : 'Unknown error';
+    loading.value = false;
+  }
+});
+
+// Handle card creation
+const onCardCreated = (cardData: unknown) => {
+  console.log('Card created:', cardData);
+  // Could add success notification or redirect here
+};
+</script>
+
+<style scoped>
+.create-card-view {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 16px;
+}
+</style>