@lilaquadrat/design-core 0.1.0

package/src/plugins/signupFlow.ts

@@ -0,0 +1,89 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import useUserStore from '../stores/user.store';
+import { auth } from './auth';
+
+export type SignupStepKey = 'register' | 'account' | 'connect' | 'verify';
+export type StepStatus = 'done' | 'current' | 'upcoming';
+
+export interface SignupStep {
+  key: SignupStepKey
+  label: string
+  status: StepStatus
+}
+
+const STEP_ORDER: SignupStepKey[] = ['register', 'account', 'connect', 'verify'];
+
+/**
+ * maps a lock state to the route the user has to complete next.
+ * keep this the single place that knows about the lock string values.
+ */
+function routeForLock (locked?: string): { name: string } {
+
+  if (locked === 'user-connect') return { name: 'signup-connect' };
+  if (locked === 'email-verified') return { name: 'signup-verify' };
+
+  return { name: 'members' };
+
+}
+
+function useSignupFlow () {
+
+  const userStore = useUserStore();
+  const route = useRoute();
+  // DEBUG: ?step=<1|2|3|4> forces the active step (dev only)
+  const debugStep = computed<SignupStepKey | undefined>(() => {
+
+    const step = route?.query?.step;
+
+    if (import.meta.env.DEV && typeof step === 'string') {
+
+      const index = Number(step) - 1;
+
+      if (index >= 0 && index < STEP_ORDER.length) return STEP_ORDER[index];
+
+    }
+
+    return undefined;
+
+  });
+  // the furthest step the user has reached, derived from auth + lock state.
+  // being authenticated implies register + account are done, even when there
+  // is no local customer (e.g. connecting from a different browser).
+  const currentKey = computed<SignupStepKey>(() => {
+
+    if (debugStep.value) return debugStep.value;
+
+    if (!auth.isAuth.value) {
+      return (userStore.customer || userStore.userData) ? 'account' : 'register';
+    }
+
+    if (userStore.locked === 'user-connect') return 'connect';
+    if (userStore.locked === 'email-verified') return 'verify';
+
+    return 'verify';
+
+  });
+  const isComplete = computed(() => !debugStep.value && auth.isAuth.value && !userStore.locked);
+  // steps are monotonic: everything before the current step counts as done
+  const steps = computed<SignupStep[]>(() => {
+
+    const currentIndex = STEP_ORDER.indexOf(currentKey.value);
+
+    return STEP_ORDER.map((key, index) => ({
+      key,
+      label : `signup-step-${key}`,
+      status: isComplete.value || index < currentIndex
+        ? 'done'
+        : index === currentIndex
+          ? 'current'
+          : 'upcoming',
+    }));
+
+  });
+
+  return { steps, currentKey, isComplete, routeForLock };
+
+}
+
+export { useSignupFlow, routeForLock };

package/src/plugins/traceable.ts

@@ -0,0 +1,53 @@
+import logger from '../mixins/logger';
+import useCallStore from '../stores/calls.store';
+import type { Ref } from 'vue';
+
+const plugin = {
+  install: (): void => {
+    logger.plugins('traceable installed')
+  },
+};
+const useTraceable = () => {
+
+  const { addCall, updateCall } = useCallStore();
+
+  async function traceable<T> (promise: Promise<T>, traceId?: Ref<string|undefined>, options: {time: number} = {time: 3000}) {
+
+    // add the new call to vuex and fetch the id
+    const id = addCall();
+
+    if(traceId) traceId.value = id;
+
+    const minimum = new Promise<void>((resolve) => {
+    
+      setTimeout(() => resolve(), options.time);
+    
+    });
+    // the minimum promise will hold the execution of allsettled
+    const results = await Promise.allSettled([minimum, promise]);
+    
+    // no error will be thrown, we need to check the result of the given promise
+    if (results[1].status === 'rejected') {
+    
+      updateCall(id, 'rejected');
+      throw results[1].reason;
+    
+    } else {
+    
+      updateCall(id, 'resolved');
+      return results[1].value;
+    
+    }
+    
+  }
+  
+  return {
+    traceable
+  }
+  
+};
+
+export default plugin;
+export {
+  useTraceable
+}

package/src/plugins/translations.ts

@@ -0,0 +1,29 @@
+import { createI18n } from 'vue-i18n';
+import de from '../translations/de';
+
+const i18n = createI18n({
+  legacy        : false,
+  locale        : 'de',
+  fallbackLocale: 'de',
+  missingWarn   : false,
+  fallbackWarn  : false,
+  missing       : (_locale, key) => key,
+  messages      : { de },
+});
+const { t } = i18n.global;
+
+/**
+ * merges project owned messages on top of the framework base.
+ *
+ * the design ships the wording for its own modules, the package only carries
+ * the strings it renders itself - so a project calls this once at startup with
+ * its own translation file.
+ */
+function addMessages (locale: string, messages: Record<string, unknown>) {
+
+  i18n.global.mergeLocaleMessage(locale, messages);
+
+}
+
+export default i18n;
+export { t, addMessages };

package/src/plugins/youtube.ts

@@ -0,0 +1,80 @@
+import logger from '../mixins/logger';
+import { ref } from 'vue';
+
+class Youtube {
+
+  youtubeApiState = ref<boolean>(false);
+
+  loadState = ref<boolean>(false);
+
+  loadApi () {
+
+    if(this.loadState.value) return Promise.resolve();
+    
+    return new Promise<void>((resolve) => {
+      
+      const script = document.createElement('script');
+      
+      script.src = 'https://www.youtube.com/iframe_api';
+      
+      script.onload = () => {
+        resolve();
+      };
+      
+      document.body.appendChild(script);
+      this.loadState.value = true;
+            
+    });
+  }
+
+  /**
+   * load the youtube iframe api and changes the youtubeApiState to true when all is ready
+   */
+  addYoutube () {
+
+    if(!this.youtubeApiState.value) {
+
+      this.loadApi()
+
+    }
+  
+  }
+
+}
+
+const youtubePlugin = new Youtube();
+const plugin = {
+  install: (): void => {
+    // this exists only for initialization purposes
+    logger.plugins('youtube installed');
+  },
+};
+
+if(typeof window !== 'undefined') {
+
+  window.onYouTubeIframeAPIReady = () => {
+  
+    youtubePlugin.youtubeApiState.value = true;
+    
+  };
+    
+}
+
+function useYoutube () {
+      
+  return {
+    youtubeApiState: youtubePlugin.youtubeApiState, 
+    /**
+    * loads the youtube iframe api and changes the youtubeApiState to true when all is ready
+    */
+    addYoutube     : () => youtubePlugin.addYoutube()
+  };
+      
+}
+
+export default plugin;
+  
+export {
+  useYoutube
+};
+  

package/src/routes.ts

@@ -0,0 +1,132 @@
+import type { RouteRecordRaw } from 'vue-router';
+import type { Component } from 'vue';
+import ContentView from './views/content.view.vue';
+import EditorView from './views/editor.view.vue';
+import LoginView from './views/login.view.vue';
+import SignupAccountView from './views/signup-account.view.vue';
+import DownloadView from './views/download.view.vue';
+
+const dynamicRoutes: readonly RouteRecordRaw[] = [
+  {
+    path     : '/m/:pathMatch(.*)?',
+    name     : 'members',
+    component: ContentView,
+    meta     : {
+      contentType: 'members'
+    }
+  },
+  {
+    path     : '/login-callback',
+    name     : 'login-callback',
+    component: LoginView
+  },
+  {
+    path     : '/signup/account',
+    name     : 'signup-account',
+    component: SignupAccountView
+  },
+  {
+    path     : '/signup',
+    name     : 'signup',
+    component: ContentView,
+    meta     : {
+      contentType: 'public'
+    }
+  },
+  {
+    path     : '/signup/connect',
+    name     : 'signup-connect',
+    component: ContentView,
+    meta     : {
+      contentType: 'public'
+    }
+  },
+  {
+    path     : '/signup/verify',
+    name     : 'signup-verify',
+    component: ContentView,
+    meta     : {
+      contentType: 'public'
+    }
+  },
+  {
+    path     : '/signup/done',
+    name     : 'signup-done',
+    component: ContentView,
+    meta     : {
+      contentType: 'public'
+    }
+  },
+  {
+    path     : '/download/:app/:filename',
+    name     : 'download',
+    component: DownloadView,
+    meta     : {
+      contentType: 'members'
+    }
+  },
+  {
+    path     : '',
+    name     : 'public-home',
+    component: ContentView,
+    meta     : {
+      contentType: 'public'
+    }
+  },
+  {
+    path     : '/:pathMatch(.*)*',
+    name     : 'public-content',
+    component: ContentView,
+    meta     : {
+      contentType: 'public'
+    }
+  },
+];
+const editorRoutes: readonly RouteRecordRaw[] = [
+  {
+    path     : '/:pathMatch(.*)*',
+    name     : 'editor',
+    component: EditorView
+  },
+];
+
+/**
+ * the module gallery is the design itself, so the project provides the views.
+ * testView is dev only and is left out of a production build.
+ */
+function createPreviewRoutes (previewView: Component, testView?: Component): readonly RouteRecordRaw[] {
+
+  const testRoutes: RouteRecordRaw[] = testView && import.meta.env.DEV
+    ? [
+      {
+        path     : '/test/:name',
+        name     : 'test-view',
+        component: testView,
+        meta     : {
+          testOnly: true,
+        },
+      },
+    ]
+    : [];
+
+  return [
+    ...testRoutes,
+    {
+      path     : '/:pathMatch(.*)*',
+      name     : 'preview',
+      component: previewView
+    },
+    {
+      path     : '',
+      name     : 'preview-home',
+      component: previewView
+    },
+  ];
+
+}
+
+export {
+  dynamicRoutes,
+  editorRoutes,
+  createPreviewRoutes
+};

package/src/server-entry.ts

@@ -0,0 +1,113 @@
+import { renderToString } from 'vue/server-renderer';
+import { getAppInstance, type AppComponents } from './main';
+
+import { basename } from 'path';
+import type { Content, Customers, List } from '@lilaquadrat/interfaces';
+import type { RouteRecordRaw } from 'vue-router';
+import useContentStore from './stores/content.store';
+import { dynamicRoutes } from './routes';
+import hooks from './mixins/hooks';
+
+export async function render (url: string, context: any, contextData: Content[], recipientData: Customers, list: List, manifest: Record<string, string[]>, options: {cdnUrl: string, components: AppComponents, routes?: readonly RouteRecordRaw[]}) {
+  const { app, router, pinia } = getAppInstance(context, options.routes ?? dynamicRoutes, false, options.components);
+
+  hooks(router, { initAuth: false });
+
+  await router.push(url);
+  await router.isReady();
+
+  const contentStore = useContentStore();
+
+  /**
+  * for pdfs all images must be preloaded
+  * because there will be no hydration
+  */
+  if(context.renderTarget === 'pdf') {
+
+    context.settings.preloadImages = true; 
+
+  }
+
+  if(contextData) contentStore.addMulti(contextData);
+  if(recipientData) contentStore.recipient = recipientData;
+  if(list) contentStore.list = list;
+
+  // passing SSR context object which will be available via useSSRContext()
+  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // itself on ctx.modules. After the render, ctx.modules would contain all the
+  // components that have been instantiated during this render call.
+  const ctx: { modules?: Set<string> } = {};
+  const html = await renderToString(app, ctx);
+  const initialState = JSON.stringify(pinia.state.value).replace(/</g, '\\u003c');
+  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
+  // which we can then use to determine what files need to be preloaded for this
+  // request.
+  const preloadLinks = renderPreloadLinks(ctx.modules as Set<string>, manifest, options);
+
+  return { html, preloadLinks, initialState, url };
+}
+
+function renderPreloadLinks (modulesSet: Set<string>, manifest: Record<string, string[]>, options: {cdnUrl: string}) {
+  let links = '';
+  const seen = new Set();
+
+  modulesSet?.forEach((id) => {
+
+    const files = manifest[id];
+
+    if (files) {
+
+      files.forEach((file: string) => {
+
+        if (!seen.has(file)) {
+          seen.add(file);
+
+          const filename = basename(file);
+
+          if (manifest[filename]) {
+
+            for (const depFile of manifest[filename]) {
+              links += renderPreloadLink(depFile, options.cdnUrl);
+              seen.add(depFile);
+            }
+
+          }
+
+          links += renderPreloadLink(file, options.cdnUrl);
+        }
+
+      });
+    }
+
+  });
+
+  return links;
+
+}
+
+function renderPreloadLink (file: string, base: string) {
+  if (!file) return '';
+  
+  const fileExtMap: Record<string, { rel: string, as?: string, type?: string, crossorigin?: boolean }> = {
+    '.js'   : { rel: 'modulepreload', crossorigin: true },
+    '.css'  : { rel: 'stylesheet' },
+    '.woff' : { rel: 'preload', as: 'font', type: 'font/woff', crossorigin: true },
+    '.woff2': { rel: 'preload', as: 'font', type: 'font/woff2', crossorigin: true },
+    '.gif'  : { rel: 'preload', as: 'image', type: 'image/gif' },
+    '.jpg'  : { rel: 'preload', as: 'image', type: 'image/jpeg' },
+    '.jpeg' : { rel: 'preload', as: 'image', type: 'image/jpeg' },
+    '.png'  : { rel: 'preload', as: 'image', type: 'image/png' }
+  };
+  const ext = Object.keys(fileExtMap).find(ext => file.endsWith(ext));
+
+  if (!ext) return '';
+
+  const { rel, as, type, crossorigin } = fileExtMap[ext];
+  let link = `<link rel="${rel}" href="${base}${file}"`;
+  
+  if (as) link += ` as="${as}"`;
+  if (type) link += ` type="${type}"`;
+  if (crossorigin) link += ' crossorigin';
+  
+  return `${link}>`;
+}

package/src/stores/calls.store.ts

@@ -0,0 +1,33 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { v4 as uuid } from 'uuid';
+
+export const useCallStore = defineStore('calls', () => {
+
+  const calls = ref<Record<string, 'pending' | 'resolved' | 'rejected'>>({});
+
+  function addCall () {
+
+    const id = uuid();
+
+    calls.value[id] = 'pending';
+
+    return id;
+
+  }
+
+  function updateCall (id: string, state: 'pending' | 'resolved' | 'rejected') {
+
+    calls.value[id] = state;
+
+  }
+
+  return { 
+    calls, 
+    addCall,
+    updateCall
+  }
+
+})
+
+export default useCallStore;