@vue-skuilder/platform-ui 0.1.1

package/src/main.ts

@@ -0,0 +1,45 @@
+import ENV from './ENVIRONMENT_VARS';
+
+import 'roboto-fontface/css/roboto/roboto-fontface.css';
+import { createApp } from 'vue';
+import App from './App.vue';
+import './registerServiceWorker';
+import router from './router';
+import { createPinia } from 'pinia';
+import vuetify from './plugins/vuetify';
+// `courses` imports - keep style import for initial page rendering
+import '@vue-skuilder/courses/style';
+// `db` import and initialization
+import { initializeDataLayer } from '@vue-skuilder/db';
+
+(async () => {
+  await initializeDataLayer({
+    type: 'pouch',
+    options: {
+      COUCHDB_SERVER_PROTOCOL: ENV.COUCHDB_SERVER_PROTOCOL,
+      COUCHDB_SERVER_URL: ENV.COUCHDB_SERVER_URL,
+    },
+  });
+
+  const pinia = createPinia();
+  const app = createApp(App);
+
+  // Dynamically import { allCourses }
+  const { allCourses: Courses } = await import('@vue-skuilder/courses');
+
+  // Register all view components globally
+  const viewComponents = Courses.allViewsRaw();
+  Object.entries(viewComponents).forEach(([name, component]) => {
+    app.component(name, component);
+  });
+
+  app.use(router);
+  app.use(vuetify);
+  app.use(pinia);
+
+  // Dynamically import piniaPlugin
+  const { piniaPlugin } = await import('@vue-skuilder/common-ui');
+  app.use(piniaPlugin, { pinia });
+
+  app.mount('#app');
+})();

package/src/plugins/vuetify.ts

@@ -0,0 +1,41 @@
+// src/plugins/vuetify.ts
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+
+export default createVuetify({
+  components,
+  directives,
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      light: {
+        colors: {
+          primary: '#1976D2',
+          secondary: '#424242',
+          accent: '#82B1FF',
+          error: '#FF5252',
+          info: '#2196F3',
+          success: '#4CAF50',
+          warning: '#FFC107',
+        },
+      },
+      dark: {
+        colors: {
+          primary: '#2196F3',
+          secondary: '#424242',
+          accent: '#FF4081',
+          error: '#FF5252',
+          info: '#2196F3',
+          success: '#4CAF50',
+          warning: '#FFC107',
+        },
+      },
+    },
+  },
+  icons: {
+    defaultSet: 'mdi',
+  },
+});

package/src/registerServiceWorker.ts

@@ -0,0 +1,18 @@
+import { registerSW } from 'virtual:pwa-register';
+
+if (import.meta.env.PROD) {
+  registerSW({
+    onNeedRefresh() {
+      console.log('New content is available; please refresh.');
+    },
+    onOfflineReady() {
+      console.log('Content has been cached for offline use.');
+    },
+    onRegistered() {
+      console.log('Service worker has been registered.');
+    },
+    onRegisterError(error) {
+      console.error('Error during service worker registration:', error);
+    },
+  });
+}

package/src/router.ts

@@ -0,0 +1,184 @@
+import { MarkdownRenderer } from '@vue-skuilder/common-ui';
+import { createRouter, createWebHistory } from 'vue-router';
+import ClassroomCtrlPanel from './components/Classrooms/ClassroomCtrlPanel.vue';
+import JoinCode from './components/Classrooms/JoinCode.vue';
+import CourseRouter from './components/Courses/CourseRouter.vue';
+import ELOModerator from './components/Courses/EloModeration.vue';
+import TagInformation from './components/Courses/TagInformation.vue';
+import CourseEditor from './components/Edit/CourseEditor.vue';
+import Stats from './components/User/UserStats.vue';
+import About from './views/About.vue';
+import Admin from './views/Admin.vue';
+import Classrooms from './views/Classrooms.vue';
+import Courses from './views/Courses.vue';
+import Home from './views/Home.vue';
+import Login from './views/Login.vue';
+import ReleaseNotes from './views/ReleaseNotes.vue';
+import SignUp from './views/SignUp.vue';
+import Study from './views/Study.vue';
+import User from './views/User.vue';
+import DataInputFormTester from './dev/DataInputFormTester.vue';
+
+const router = createRouter({
+  history: createWebHistory(),
+  // mode: 'history', // deprecated in Vue 3 / Vue Router 4
+
+  routes: [
+    // {
+    //   path: '/debug/:component',
+    //   name: 'componentPreviews',
+    //   component: components[component]
+    // }
+    // todo:
+    //
+    // beforeEnter: () => authenticateAdmin ?
+    //
+    // const components: Component[] = [];
+    {
+      path: '/dif/:pathMatch(.*)',
+      name: 'testThePathComponent',
+      component: DataInputFormTester,
+      props: true,
+    },
+    {
+      path: '/md',
+      component: MarkdownRenderer,
+    },
+    {
+      path: '/',
+      alias: ['/home'],
+      name: 'home',
+      component: Home,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: About,
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login,
+    },
+    {
+      path: '/signup',
+      name: 'signup',
+      component: SignUp,
+    },
+    {
+      path: '/notes',
+      component: ReleaseNotes,
+    },
+    {
+      path: '/edit/:course',
+      props: true,
+      component: CourseEditor,
+    },
+    {
+      path: '/study',
+      name: 'study',
+      component: Study,
+    },
+    {
+      path: '/study/:focusCourseID',
+      component: Study,
+      props: true,
+    },
+    {
+      path: '/random',
+      name: 'random',
+      alias: ['/r'],
+      props: {
+        randomPreview: true,
+      },
+      component: Study,
+    },
+    {
+      path: '/classrooms',
+      name: 'classrooms',
+      component: Classrooms,
+    },
+    {
+      path: '/classrooms/:classroomId',
+      props: true,
+      alias: '/c/:classroomId',
+      component: ClassroomCtrlPanel,
+    },
+    {
+      path: '/classrooms/:classroomId/code',
+      props: true,
+      alias: '/c/:classroomId',
+      component: JoinCode,
+    },
+    {
+      path: '/courses',
+      alias: ['/quilts', '/q'],
+      component: Courses,
+    },
+    {
+      path: '/courses/:query',
+      props: true,
+      alias: ['/quilts/:query', '/q/:query'],
+      component: CourseRouter,
+    },
+    {
+      path: '/courses/:courseId/elo',
+      props: true,
+      alias: ['/quilts/:courseId/elo', '/q/:courseId/elo'],
+      component: ELOModerator,
+    },
+    {
+      path: '/courses/:courseId/tags/:tagId',
+      props: true,
+      alias: ['/quilts/:courseId/tags/:tagId', '/q/:courseId/tags/:tagId'],
+      component: TagInformation,
+    },
+    {
+      path: '/courses/:previewCourseID/preview',
+      props: true,
+      alias: ['/quilts/:previewCourseID/preview', '/q/:previewCourseID/preview'],
+      component: Study,
+    },
+    {
+      path: '/admin',
+      component: Admin,
+    },
+    {
+      path: '/user/:username',
+      alias: '/u/:username',
+      props: true,
+      component: User,
+      children: [
+        {
+          path: 'new',
+          component: User,
+        }, //,
+        // {
+        //   path: '/stats',
+        //   component: Stats,
+        // },
+      ],
+    },
+    {
+      path: '/user/:_id/stats',
+      props: true,
+      alias: ['/u/:_id/stats'],
+      component: Stats,
+    },
+  ],
+});
+
+router.beforeEach((to, from, next) => {
+  // paths that should be handled by the server, not the SPA
+  const apiPaths = ['/express', '/couch'];
+
+  if (apiPaths.some((path) => to.path.startsWith(path))) {
+    // Return false to cancel navigation and let the browser handle the request
+    return false;
+  }
+
+  // Continue with navigation for all other routes
+  next();
+});
+
+export default router;

package/src/server/index.spec.ts

@@ -0,0 +1,192 @@
+import { vi, describe, test, expect, beforeEach } from 'vitest';
+import serverRequest from './index';
+import { ServerRequestType, Status, CreateClassroom } from '@vue-skuilder/common';
+
+// Instead of extending ServerRequest, directly use the CreateClassroom type
+describe('serverRequest', () => {
+  let mockXHR: {
+    open: ReturnType<typeof vi.fn>;
+    send: ReturnType<typeof vi.fn>;
+    setRequestHeader: ReturnType<typeof vi.fn>;
+    withCredentials: boolean;
+    timeout: number;
+    onload?: () => void;
+    ontimeout?: () => void;
+    onerror?: () => void;
+    readyState?: number;
+    status?: number;
+    responseText?: string;
+  };
+
+  // Create a base test request that matches CreateClassroom exactly
+  const baseTestRequest: CreateClassroom = {
+    type: ServerRequestType.CREATE_CLASSROOM,
+    user: 'testuser',
+    data: {
+      students: [],
+      teachers: ['testuser'],
+      name: 'Test Classroom',
+      classMeetingSchedule: 'Never',
+      peerAssist: false,
+      joinCode: 'TEST123',
+    },
+    response: null,
+  };
+
+  beforeEach(() => {
+    mockXHR = {
+      open: vi.fn(),
+      send: vi.fn(),
+      setRequestHeader: vi.fn(),
+      withCredentials: false,
+      timeout: 0,
+    };
+
+    // eslint-disable-next-line
+    global.XMLHttpRequest = vi.fn(() => mockXHR) as any;
+  });
+
+  test('configures XMLHttpRequest correctly', async () => {
+    // Create a valid request with a timeout
+    const testRequest: CreateClassroom = {
+      ...baseTestRequest,
+      timeout: 7000,
+    };
+
+    // Start the request
+    const requestPromise = serverRequest(testRequest);
+
+    // Check that XMLHttpRequest was configured correctly
+    expect(mockXHR.open).toHaveBeenCalledWith('POST', expect.any(String), true);
+    expect(mockXHR.withCredentials).toBe(true);
+    expect(mockXHR.setRequestHeader).toHaveBeenCalledWith('Content-Type', 'application/json');
+    expect(mockXHR.timeout).toBe(7000);
+    expect(mockXHR.send).toHaveBeenCalledWith(JSON.stringify(testRequest));
+
+    // Simulate successful response with the expected format for CreateClassroom
+    mockXHR.responseText = JSON.stringify({
+      status: Status.ok,
+      ok: true,
+      joincode: 'ABC123',
+      uuid: '123-456-789',
+    });
+    if (mockXHR.onload) mockXHR.onload();
+
+    // Wait for the request to complete
+    const result = await requestPromise;
+
+    // Verify the result matches the expected format
+    expect(result.response).toEqual({
+      status: Status.ok,
+      ok: true,
+      joincode: 'ABC123',
+      uuid: '123-456-789',
+    });
+  });
+
+  test('handles successful response', async () => {
+    // Create a promise that will complete when onload is triggered
+    const requestPromise = serverRequest(baseTestRequest);
+
+    // Simulate a successful response that matches the expected structure
+    mockXHR.responseText = JSON.stringify({
+      status: Status.ok,
+      ok: true,
+      joincode: 'TEST123',
+      uuid: '123-456',
+    });
+    if (mockXHR.onload) mockXHR.onload();
+
+    // Wait for the request to complete
+    const result = await requestPromise;
+
+    // Verify the response was processed correctly
+    expect(result.response).toEqual({
+      status: Status.ok,
+      ok: true,
+      joincode: 'TEST123',
+      uuid: '123-456',
+    });
+  });
+
+  test('handles JSON parse error in response', async () => {
+    // Create a promise that will complete when onload is triggered
+    const requestPromise = serverRequest(baseTestRequest);
+
+    // Simulate an invalid JSON response
+    mockXHR.responseText = 'Not valid JSON';
+    if (mockXHR.onload) mockXHR.onload();
+
+    // Wait for the request to complete
+    const result = await requestPromise;
+
+    // Verify error handling
+    expect(result.response).toEqual({
+      status: Status.error,
+      ok: false,
+      errorText: expect.stringContaining('Failed to parse response'),
+    });
+  });
+
+  test('handles request timeout', async () => {
+    // Create a request with custom timeout
+    const testRequest: CreateClassroom = {
+      ...baseTestRequest,
+      timeout: 5000,
+    };
+
+    // Create a promise
+    const requestPromise = serverRequest(testRequest);
+
+    // Verify timeout is set correctly
+    expect(mockXHR.timeout).toBe(5000);
+
+    // Simulate timeout
+    if (mockXHR.ontimeout) mockXHR.ontimeout();
+
+    // Wait for the request to complete
+    const result = await requestPromise;
+
+    // Verify timeout handling
+    expect(result.response).toEqual({
+      status: Status.error,
+      ok: false,
+      errorText: 'Request timed out',
+    });
+  });
+
+  test('handles network error', async () => {
+    // Create a request
+    const requestPromise = serverRequest(baseTestRequest);
+
+    // Simulate network error
+    if (mockXHR.onerror) mockXHR.onerror();
+
+    // Wait for the request to complete
+    const result = await requestPromise;
+
+    // Verify error handling
+    expect(result.response).toEqual({
+      status: Status.error,
+      ok: false,
+      errorText: 'Network error occurred',
+    });
+  });
+
+  test('handles exception during request setup', async () => {
+    // Make XMLHttpRequest.open throw an error
+    mockXHR.open = vi.fn().mockImplementation(() => {
+      throw new Error('Connection refused');
+    });
+
+    // Make the request which should catch the error
+    const result = await serverRequest(baseTestRequest);
+
+    // Verify error is caught and handled
+    expect(result.response).toEqual({
+      status: Status.error,
+      ok: false,
+      errorText: 'Connection refused',
+    });
+  });
+});

package/src/server/index.ts

@@ -0,0 +1,71 @@
+import { Status } from '@vue-skuilder/common';
+import ENV from '@/ENVIRONMENT_VARS';
+import { ServerRequest } from '@vue-skuilder/common';
+
+const SERVER = ENV.EXPRESS_SERVER_PROTOCOL + '://' + ENV.EXPRESS_SERVER_URL;
+
+/**
+* Makes an authenticated request to the express backend and returns the response.
+
+* @param requestData
+* @returns
+*/
+export default async function serverRequest<T extends ServerRequest>(requestData: T): Promise<T> {
+  return new Promise<T>((resolve) => {
+    try {
+      const xml = new XMLHttpRequest();
+      xml.withCredentials = true;
+      xml.open('POST', SERVER, true);
+      xml.setRequestHeader('Content-Type', 'application/json');
+      xml.timeout = requestData.timeout || 7000;
+
+      // Handle the response when it completes
+      xml.onload = function () {
+        try {
+          requestData.response = JSON.parse(xml.responseText);
+          resolve(requestData);
+        } catch (parseError) {
+          requestData.response = {
+            status: Status.error,
+            ok: false,
+            errorText: `Failed to parse response: ${
+              parseError instanceof Error ? parseError.message : JSON.stringify(parseError)
+            }`,
+          };
+          resolve(requestData);
+        }
+      };
+
+      // Handle network errors
+      xml.onerror = function () {
+        requestData.response = {
+          status: Status.error,
+          ok: false,
+          errorText: 'Network error occurred',
+        };
+        resolve(requestData);
+      };
+
+      // Handle timeouts
+      xml.ontimeout = function () {
+        requestData.response = {
+          status: Status.error,
+          ok: false,
+          errorText: 'Request timed out',
+        };
+        resolve(requestData);
+      };
+
+      // Send the request
+      xml.send(JSON.stringify(requestData));
+    } catch (error) {
+      // Handle any errors that occur during setup
+      requestData.response = {
+        status: Status.error,
+        ok: false,
+        errorText: error instanceof Error ? error.message : JSON.stringify(error),
+      };
+      resolve(requestData);
+    }
+  });
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<unknown, unknown, unknown>;
+  export default component;
+}

package/src/store.mock.ts

@@ -0,0 +1,122 @@
+// // src/mock/store.ts
+
+// import Vue from 'vue';
+// import { DataShape } from '@/base-course/Interfaces/DataShape';
+// import { ViewData } from '@/base-course/Interfaces/ViewData';
+// import { CourseConfig } from '@/server/types';
+// import { FieldInputInstance } from '@/components/Edit/ViewableDataInputForm/FieldInput.types';
+// import { User } from '@vue-skuilder/db';
+
+// export const GuestUsername: string = 'Guest';
+
+// interface DataInputForm {
+//   dataShape: DataShape | null;
+//   course: CourseConfig | null;
+//   existingData: ViewData[];
+//   shapeViews: any[];
+//   fields: FieldInputInstance[];
+//   localStore: any;
+//   uploading: boolean;
+// }
+
+// export interface UserConfig {
+//   darkMode: boolean;
+//   likesConfetti: boolean;
+// }
+
+// export interface AppState {
+//   _user?: User;
+//   userLoginAndRegistrationContainer: {
+//     init: boolean;
+//     loggedIn: boolean;
+//     regDialogOpen: boolean;
+//     loginDialogOpen: boolean;
+//   };
+//   cardPreviewMode: boolean;
+//   dataInputForm: DataInputForm;
+//   views: {
+//     study: {
+//       inSession: boolean;
+//       courseList: string[];
+//       sessionTimeLimit: number;
+//     };
+//   };
+//   config: UserConfig;
+//   onLoadComplete: boolean;
+// }
+
+// export const defaultState: AppState = {
+//   _user: undefined,
+//   userLoginAndRegistrationContainer: {
+//     init: false,
+//     loggedIn: false,
+//     regDialogOpen: false,
+//     loginDialogOpen: false,
+//   },
+//   cardPreviewMode: false,
+//   dataInputForm: {
+//     course: null,
+//     dataShape: null,
+//     existingData: [],
+//     fields: [],
+//     localStore: {},
+//     shapeViews: [],
+//     uploading: false,
+//   },
+//   views: {
+//     study: {
+//       inSession: false,
+//       courseList: [],
+//       sessionTimeLimit: 5,
+//     },
+//   },
+//   config: {
+//     darkMode: false,
+//     likesConfetti: false,
+//   },
+//   onLoadComplete: false,
+// };
+
+// const Store = new Vuex.Store<AppState>({
+//   state: defaultState,
+//   mutations: {
+//     setUser(state, user: User) {
+//       state._user = user;
+//     },
+//     setLoggedIn(state, loggedIn: boolean) {
+//       state.userLoginAndRegistrationContainer.loggedIn = loggedIn;
+//     },
+//     setConfig(state, config: UserConfig) {
+//       state.config = config;
+//     },
+//     setOnLoadComplete(state, complete: boolean) {
+//       state.onLoadComplete = complete;
+//     },
+//   },
+//   actions: {
+//     async checkAuth({ commit }) {
+//       // Simulate auth check
+//       const isLoggedIn = Math.random() > 0.5; // 50% chance of being logged in
+//       if (isLoggedIn) {
+//         const mockUser = { username: 'MockUser' } as User;
+//         commit('setUser', mockUser);
+//         commit('setLoggedIn', true);
+//         commit('setConfig', { darkMode: false, likesConfetti: true });
+//       } else {
+//         const guestUser = { username: GuestUsername } as User;
+//         commit('setUser', guestUser);
+//         commit('setLoggedIn', false);
+//       }
+//       commit('setOnLoadComplete', true);
+//     },
+//   },
+// });
+
+// export default Store;
+
+// export function setDefaultState() {
+//   Store.state.config = defaultState.config;
+// }
+
+// // Simulate checking auth on load
+// Store.dispatch('checkAuth');