@vue-skuilder/cli 0.1.9 → 0.1.10

package/dist/standalone-ui-template/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@vue-skuilder/standalone-ui",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.10",
+  "type": "module",
+  "main": "./dist-lib/questions.cjs.js",
+  "module": "./dist-lib/questions.mjs",
+  "types": "./dist-lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist-lib/index.d.ts",
+      "import": "./dist-lib/questions.mjs",
+      "require": "./dist-lib/questions.cjs.js"
+    },
+    "./questions": {
+      "types": "./dist-lib/index.d.ts",
+      "import": "./dist-lib/questions.mjs",
+      "require": "./dist-lib/questions.cjs.js"
+    },
+    "./style": "./dist-lib/assets/index.css"
+  },
+  "files": [
+    "dist/",
+    "dist-lib/"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:webapp && npm run build:lib",
+    "build:webapp": "vite build",
+    "build:lib": "BUILD_MODE=library vite build",
+    "preview": "vite preview",
+    "test:e2e": "cypress open",
+    "test:e2e:headless": "cypress run",
+    "ci:e2e": "vite dev & wait-on http://localhost:6173 && cypress run"
+  },
+  "dependencies": {
+    "@mdi/font": "^7.3.67",
+    "@vue-skuilder/common-ui": "workspace:*",
+    "@vue-skuilder/courseware": "workspace:*",
+    "@vue-skuilder/db": "workspace:*",
+    "events": "^3.3.0",
+    "pinia": "^2.3.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.2.0",
+    "vuetify": "^3.7.0"
+  },
+  "devDependencies": {
+    "@types/cypress": "1.1.6",
+    "@types/events": "^3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "cypress": "14.1.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.9",
+    "vite-plugin-dts": "^4.3.0",
+    "vue-tsc": "^1.8.0",
+    "wait-on": "8.0.2"
+  },
+  "stableVersion": "0.1.10"
+}

package/dist/standalone-ui-template/src/App.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-app>
+    <course-header :title="courseConfig.title" :logo="courseConfig.logo" />
+
+    <v-main>
+      <router-view />
+    </v-main>
+
+    <!-- <course-footer :links="courseConfig.links" :copyright="courseConfig.copyright" /> -->
+    <SkMouseTrap />
+    
+    <v-footer app class="pa-0" color="transparent">
+      <v-card flat width="100%" class="text-center">
+        <v-card-text class="text-body-2 text-medium-emphasis">
+          <v-icon small class="me-1">mdi-keyboard</v-icon>
+          Tip: Hold <kbd>Ctrl</kbd> to see keyboard shortcuts or press <kbd>?</kbd> to view all shortcuts
+        </v-card-text>
+      </v-card>
+    </v-footer>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+import { useTheme } from 'vuetify';
+import { useCourseConfig } from './composables/useCourseConfig';
+import CourseHeader from './components/CourseHeader.vue';
+import CourseFooter from './components/CourseFooter.vue';
+import { SkMouseTrap, SkldrMouseTrap, useConfigStore } from '@vue-skuilder/common-ui';
+
+const { courseConfig } = useCourseConfig();
+const configStore = useConfigStore();
+const theme = useTheme();
+
+// Use the configStore dark mode instead of courseConfig
+const dark = computed(() => {
+  return configStore.config.darkMode;
+});
+
+// Watch for dark mode changes and update Vuetify theme
+watch(
+  dark,
+  (newVal) => {
+    theme.global.name.value = newVal ? 'dark' : 'light';
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  // Add a global shortcut to show the keyboard shortcuts dialog
+  SkldrMouseTrap.addBinding({
+    hotkey: '?',
+    command: 'Show keyboard shortcuts',
+    callback: () => {
+      const keyboardButton = document.querySelector('.mdi-keyboard');
+      if (keyboardButton) {
+        (keyboardButton as HTMLElement).click();
+      }
+    }
+  });
+});
+</script>

package/dist/standalone-ui-template/src/ENVIRONMENT_VARS.ts

@@ -0,0 +1,76 @@
+// vue-skuilder/packages/standalone-ui/src/ENVIRONMENT_VARS.ts
+type ProtocolString = 'http' | 'https';
+
+import config from '../skuilder.config.json';
+
+export interface Environment {
+  /**
+   * URL to the remote couchDB instance that the app connects to.
+   * Loaded from VITE_COUCHDB_SERVER_URL environment variable.
+   */
+  COUCHDB_SERVER_URL: string;
+
+  /**
+   * Protocol for the CouchDB server.
+   * Loaded from VITE_COUCHDB_SERVER_PROTOCOL environment variable.
+   */
+  COUCHDB_SERVER_PROTOCOL: ProtocolString;
+
+  /**
+   * Static course IDs to load.
+   * Loaded from VITE_STATIC_COURSE_IDS environment variable (comma-separated string).
+   */
+  STATIC_COURSE_ID: string;
+
+  /**
+   * Type of data layer to use - couchdb live backend or
+   * statically built and served from the app.
+   */
+  DATALAYER_TYPE: 'couch' | 'static';
+
+  /**
+   * A global flag to enable debug messaging mode.
+   * Loaded from VITE_DEBUG environment variable ('true' or 'false').
+   */
+  DEBUG: boolean;
+}
+
+// Default fallback values if environment variables are not set
+const defaultEnv: Environment = {
+  COUCHDB_SERVER_URL: 'localhost:5984/', // Sensible default for local dev
+  COUCHDB_SERVER_PROTOCOL: 'http',
+  STATIC_COURSE_ID: 'not_set',
+  DATALAYER_TYPE: 'couch',
+  DEBUG: false, // Default to false if VITE_DEBUG is not 'true'
+};
+
+// --- Read Environment Variables using Vite's import.meta.env ---
+// Vite replaces these variables at build time with the values from your .env files.
+
+if (config.dataLayerType !== 'couch' && config.dataLayerType !== 'static') {
+  throw new Error('Invalid data layer type');
+}
+
+const ENV: Environment = {
+  // Use the value from import.meta.env if available, otherwise use the default
+  COUCHDB_SERVER_URL: import.meta.env.VITE_COUCHDB_SERVER || defaultEnv.COUCHDB_SERVER_URL,
+
+  // Ensure the protocol is one of the allowed types
+  COUCHDB_SERVER_PROTOCOL: (import.meta.env.VITE_COUCHDB_PROTOCOL === 'https'
+    ? 'https'
+    : 'http') as ProtocolString,
+
+  STATIC_COURSE_ID: config.course,
+
+  DATALAYER_TYPE: config.dataLayerType,
+
+  // Environment variables are always strings, so compare VITE_DEBUG to 'true'
+  DEBUG: import.meta.env.VITE_DEBUG === 'true',
+};
+
+// Optional: Log the resolved environment in development mode for debugging
+if (import.meta.env.DEV) {
+  console.log('Resolved Environment Variables:', ENV);
+}
+
+export default ENV;

package/dist/standalone-ui-template/src/components/CourseFooter.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-footer app padless>
+    <v-container fluid>
+      <v-row justify="center" align="center">
+        <v-col cols="12" sm="8" class="text-center">
+          <div v-if="links && links.length" class="d-flex justify-center mb-2">
+            <v-btn
+              v-for="link in links"
+              :key="link.text"
+              :href="link.url"
+              text
+              variant="plain"
+              size="small"
+              class="mx-1"
+            >
+              {{ link.text }}
+            </v-btn>
+          </div>
+          <div class="text-body-2 text-medium-emphasis">
+            {{ copyright }}
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  links?: Array<{ text: string; url: string }>;
+  copyright?: string;
+}>();
+</script>

package/dist/standalone-ui-template/src/components/CourseHeader.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <v-app-bar>
+      <v-app-bar-nav-icon v-if="isMobile" @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+      <v-toolbar-title class="d-flex align-center">
+        <img v-if="logo" :src="logo" alt="Course Logo" height="32" class="mr-2" />
+        {{ title }}
+      </v-toolbar-title>
+
+      <v-spacer></v-spacer>
+
+      <div v-if="!isMobile" class="d-flex">
+        <v-btn v-for="item in menuItems" :key="item.text" :to="item.path" text>
+          {{ item.text }}
+        </v-btn>
+      </div>
+
+      <v-divider vertical class="mx-2"></v-divider>
+
+      <UserLoginAndRegistrationContainer :show-login-button="true" redirect-to-path="/study" />
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" temporary v-if="isMobile">
+      <v-list>
+        <v-list-item v-for="item in menuItems" :key="item.text" :to="item.path" @click="drawer = false">
+          <v-list-item-title>{{ item.text }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useDisplay } from 'vuetify';
+import { UserLoginAndRegistrationContainer } from '@vue-skuilder/common-ui';
+
+// Define props
+defineProps<{
+  title?: string;
+  logo?: string;
+}>();
+
+const { mobile } = useDisplay();
+const isMobile = computed(() => mobile.value);
+const drawer = ref(false);
+
+const menuItems = ref([
+  { text: 'Home', path: '/' },
+  { text: 'Study', path: '/study' },
+  { text: 'Browse', path: '/browse' },
+  // Progress view not implemented - will be accessible via UserChip->Stats
+]);
+</script>

package/dist/standalone-ui-template/src/composables/useCourseConfig.ts

@@ -0,0 +1,33 @@
+import { ref, readonly } from 'vue';
+import config from '../../skuilder.config.json';
+
+// This would be replaced by actual course configuration in a real implementation
+const defaultConfig = {
+  title: config.title ? config.title : '[UNSET] Course Title',
+  description: 'This is the devenv test course setup.',
+  logo: '',
+  darkMode: false,
+  links: [
+    { text: 'About', url: '/about' },
+    { text: 'Help', url: '/help' },
+  ],
+  copyright: '',
+};
+
+export function useCourseConfig() {
+  const courseConfig = ref(defaultConfig);
+
+  // Later this would load from a configuration file or API
+  const loadConfig = async () => {
+    // In a real implementation, this would load configuration
+    // courseConfig.value = await loadCourseConfig();
+  };
+
+  // Initialize
+  loadConfig();
+
+  return {
+    courseConfig: readonly(courseConfig),
+    loadConfig,
+  };
+}

package/dist/standalone-ui-template/src/main.ts

@@ -0,0 +1,201 @@
+import ENV from './ENVIRONMENT_VARS';
+import '@mdi/font/css/materialdesignicons.css';
+
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import router from './router';
+
+// Vuetify
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import { aliases, mdi } from 'vuetify/iconsets/mdi';
+
+// data layer
+import { initializeDataLayer, getDataLayer } from '@vue-skuilder/db';
+
+// auth store
+import { useAuthStore } from '@vue-skuilder/common-ui';
+
+// styles from component library packages
+import '@vue-skuilder/courseware/style';
+import '@vue-skuilder/common-ui/style';
+
+// Import allCourseWare singleton and exampleCourse
+import { allCourseWare } from '@vue-skuilder/courseware';
+import { exampleCourse } from './questions/exampleCourse';
+
+// Add the example course to the allCourseWare singleton
+allCourseWare.courses.push(exampleCourse);
+
+// theme configuration
+import config from '../skuilder.config.json';
+
+(async () => {
+  // For static data layer, load manifest
+  let dataLayerOptions: any = {
+    COUCHDB_SERVER_URL: ENV.COUCHDB_SERVER_URL,
+    COUCHDB_SERVER_PROTOCOL: ENV.COUCHDB_SERVER_PROTOCOL,
+    COURSE_IDS: [config.course ? config.course : 'default-course'],
+  };
+
+  if (config.dataLayerType === 'static') {
+    // Load manifest for static mode
+    const courseId = config.course;
+    if (!courseId) {
+      throw new Error('Course ID required for static data layer');
+    }
+
+    try {
+      const manifestResponse = await fetch(`/static-courses/${courseId}/manifest.json`);
+      if (!manifestResponse.ok) {
+        throw new Error(
+          `Failed to load manifest: ${manifestResponse.status} ${manifestResponse.statusText}`
+        );
+      }
+      const manifest = await manifestResponse.json();
+      console.log(`Loaded manifest for course ${courseId}`);
+      console.log(JSON.stringify(manifest));
+
+      dataLayerOptions = {
+        staticContentPath: '/static-courses',
+        manifests: {
+          [courseId]: manifest,
+        },
+      };
+    } catch (error) {
+      console.error('[DEBUG] Failed to load course manifest:', error);
+      throw new Error(`Could not load course manifest for ${courseId}: ${error}`);
+    }
+  }
+
+  try {
+    await initializeDataLayer({
+      type: (config.dataLayerType || 'couch') as 'couch' | 'static',
+      options: dataLayerOptions,
+    });
+    console.log('[DEBUG] Data layer initialized successfully');
+  } catch (error) {
+    console.error('[DEBUG] Data layer initialization failed:', error);
+    throw error;
+  }
+  const pinia = createPinia();
+
+  // Apply theme configuration from skuilder.config.json
+  const themeConfig = config.theme
+    ? {
+        defaultTheme: config.theme.defaultMode || 'light',
+        themes: {
+          light: config.theme.light,
+          dark: config.theme.dark,
+        },
+      }
+    : {
+        defaultTheme: 'light',
+        themes: {
+          light: {
+            dark: false,
+            colors: {
+              primary: '#1976D2',
+              secondary: '#424242',
+              accent: '#82B1FF',
+              error: '#F44336',
+              info: '#2196F3',
+              success: '#4CAF50',
+              warning: '#FF9800',
+              background: '#FFFFFF',
+              surface: '#FFFFFF',
+              'surface-bright': '#FFFFFF',
+              'surface-light': '#EEEEEE',
+              'surface-variant': '#E3F2FD',
+              'on-surface-variant': '#1976D2',
+              'primary-darken-1': '#1565C0',
+              'secondary-darken-1': '#212121',
+              'on-primary': '#FFFFFF',
+              'on-secondary': '#FFFFFF',
+              'on-background': '#212121',
+              'on-surface': '#212121',
+            },
+          },
+          dark: {
+            dark: true,
+            colors: {
+              primary: '#2196F3',
+              secondary: '#90A4AE',
+              accent: '#82B1FF',
+              error: '#FF5252',
+              info: '#2196F3',
+              success: '#4CAF50',
+              warning: '#FFC107',
+              background: '#121212',
+              surface: '#1E1E1E',
+              'surface-bright': '#2C2C2C',
+              'surface-light': '#2C2C2C',
+              'surface-variant': '#1A237E',
+              'on-surface-variant': '#82B1FF',
+              'primary-darken-1': '#1976D2',
+              'secondary-darken-1': '#546E7A',
+              'on-primary': '#000000',
+              'on-secondary': '#000000',
+              'on-background': '#FFFFFF',
+              'on-surface': '#FFFFFF',
+            },
+          },
+        },
+      };
+
+  const vuetify = createVuetify({
+    components,
+    directives,
+    theme: themeConfig,
+    icons: {
+      defaultSet: 'mdi',
+      aliases,
+      sets: {
+        mdi,
+      },
+    },
+  });
+
+  const app = createApp(App);
+
+  app.use(router);
+  app.use(vuetify);
+  app.use(pinia);
+
+  const { piniaPlugin } = await import('@vue-skuilder/common-ui');
+  app.use(piniaPlugin, { pinia });
+
+  await useAuthStore().init();
+  
+  // Initialize config store to load user settings (including dark mode)
+  const { useConfigStore } = await import('@vue-skuilder/common-ui');
+  await useConfigStore().init();
+
+  // Auto-register user for the course in standalone mode
+  if (config.course) {
+    try {
+      const authStore = useAuthStore();
+      const user = getDataLayer().getUserDB();
+      
+      // Check if user is already registered for the course
+      const courseRegistrations = await user.getCourseRegistrationsDoc();
+      const isRegistered = courseRegistrations.courses.some(c => c.courseID === config.course);
+      
+      if (!isRegistered) {
+        console.log(`[Standalone] Auto-registering user for course: ${config.course}`);
+        await user.registerForCourse(config.course, false); // non-preview mode
+        console.log(`[Standalone] Auto-registration completed for course: ${config.course}`);
+      } else {
+        console.log(`[Standalone] User already registered for course: ${config.course}`);
+      }
+    } catch (error) {
+      console.warn(`[Standalone] Failed to auto-register for course ${config.course}:`, error);
+      // Don't block app startup on registration failure
+    }
+  }
+
+  app.mount('#app');
+})();

package/dist/standalone-ui-template/src/questions/MultipleChoiceQuestion.ts

@@ -0,0 +1,46 @@
+import { ViewData, Answer, Question } from '@vue-skuilder/courseware';
+import { FieldType, DataShape, DataShapeName } from '@vue-skuilder/common';
+import MultipleChoiceQuestionView from './MultipleChoiceQuestionView.vue';
+
+export class MultipleChoiceQuestion extends Question {
+  public static dataShapes: DataShape[] = [
+    {
+      name: 'MultipleChoiceQuestion' as DataShapeName,
+      fields: [
+        { name: 'questionText', type: FieldType.STRING },
+        { name: 'options', type: FieldType.STRING }, // Comma-separated string of options
+        { name: 'correctAnswer', type: FieldType.STRING },
+      ],
+    },
+  ];
+
+  public static views = [
+    { name: 'MultipleChoiceQuestionView', component: MultipleChoiceQuestionView },
+  ];
+
+  // @ts-expect-error TS6133: Used in Vue template
+  private _questionText: string;
+  // @ts-expect-error TS6133: Used in Vue template
+  private options: string[];
+  private correctAnswer: string;
+
+  constructor(data: ViewData[]) {
+    super(data);
+    this._questionText = data[0].questionText as string;
+    this.options = (data[0].options as string).split(',').map((s) => s.trim());
+    this.correctAnswer = data[0].correctAnswer as string;
+  }
+
+  public dataShapes(): DataShape[] {
+    return MultipleChoiceQuestion.dataShapes;
+  }
+
+  public views() {
+    // This will be dynamically populated or imported
+    return MultipleChoiceQuestion.views;
+  }
+
+  protected isCorrect(answer: Answer): boolean {
+    return (answer.response as string) === this.correctAnswer;
+  }
+}

package/dist/standalone-ui-template/src/questions/MultipleChoiceQuestionView.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <p>{{ questionText }}</p>
+    <div v-for="(option, index) in options" :key="index">
+      <input type="radio" :id="`option-${index}`" :value="option" v-model="selectedAnswer" />
+      <label :for="`option-${index}`">{{ option }}</label>
+    </div>
+    <button @click="submitAnswer">Submit</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType } from 'vue';
+import { useViewable, useQuestionView } from '@vue-skuilder/courseware';
+import { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
+import { ViewData } from '@vue-skuilder/common';
+
+const props = defineProps({
+  questionText: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array as () => string[],
+    required: true,
+  },
+  data: {
+    type: Array as PropType<ViewData[]>,
+    required: true,
+  },
+});
+
+const selectedAnswer = ref('');
+
+const viewableUtils = useViewable(props, () => {}, 'MultipleChoiceQuestionView');
+const questionUtils = useQuestionView<MultipleChoiceQuestion>(viewableUtils);
+
+// Initialize question
+questionUtils.question.value = new MultipleChoiceQuestion(props.data);
+
+const submitAnswer = () => {
+  if (selectedAnswer.value) {
+    questionUtils.submitAnswer({ response: selectedAnswer.value });
+  }
+};
+</script>
+
+<style scoped>
+/* Add some basic styling if needed */
+</style>

package/dist/standalone-ui-template/src/questions/NumberRangeQuestion.ts

@@ -0,0 +1,44 @@
+import { ViewData, Answer, Question } from '@vue-skuilder/courseware';
+import { FieldType, DataShape, DataShapeName } from '@vue-skuilder/common';
+import NumberRangeQuestionView from './NumberRangeQuestionView.vue';
+
+export class NumberRangeQuestion extends Question {
+  public static dataShapes: DataShape[] = [
+    {
+      name: 'NumberRangeQuestion' as DataShapeName,
+      fields: [
+        { name: 'questionText', type: FieldType.STRING },
+        { name: 'min', type: FieldType.NUMBER },
+        { name: 'max', type: FieldType.NUMBER },
+      ],
+    },
+  ];
+
+  public static views = [{ name: 'NumberRangeQuestionView', component: NumberRangeQuestionView }];
+
+  // @ts-expect-error TS6133: Used in Vue template
+  private questionText: string;
+  private min: number;
+  private max: number;
+
+  constructor(data: ViewData[]) {
+    super(data);
+    this.questionText = data[0].questionText as string;
+    this.min = data[0].min as number;
+    this.max = data[0].max as number;
+  }
+
+  public dataShapes(): DataShape[] {
+    return NumberRangeQuestion.dataShapes;
+  }
+
+  public views() {
+    // This will be dynamically populated or imported
+    return NumberRangeQuestion.views;
+  }
+
+  protected isCorrect(answer: Answer): boolean {
+    const userAnswer = answer.response as number;
+    return userAnswer >= this.min && userAnswer <= this.max;
+  }
+}