@lilaquadrat/design-core 0.1.0

package/src/views/editor.view.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import useEditorStore from '../stores/editor.store';
+import { hardCopy, prepareContent } from '@lilaquadrat/studio/lib/esm/frontend';
+import { getCurrentInstance, nextTick, onMounted, ref } from 'vue';
+import { type Content, type ContentWithPositions, type EditorActiveModule, type StudioIframeMessage } from '@lilaquadrat/interfaces';
+import { onBeforeUnmount } from 'vue';
+import { watch } from 'vue';
+import type { AppEditorConfiguration } from '@lilaquadrat/interfaces';
+import { loadViaDeclarationSync } from '../mixins/loadComponents';
+import useContentStore from '../stores/content.store';
+import useMainStore from '../stores/main.store';
+import { useEvents } from '../plugins/events';
+import { scrollToSelector } from '../mixins/scroll';
+
+const { eventDeclarations} = useEvents();
+const currentInstance = getCurrentInstance();
+const editorStore = useEditorStore();
+const contentStore = useContentStore();
+const content = ref<ContentWithPositions>({ settings: {}, top: [], content: [], bottom: [], additional: {} });
+const siteSettings = ref<Omit<Content, 'modules'|'genericData'|'childData'>>();
+const live = ref<boolean>(false);
+// const parentUrl = ref<string>(`${window.location.protocol}//${window.location.host}/editor`);
+const contentCache = ref<Content['modules']>();
+const settingsCache = ref<AppEditorConfiguration>();
+const active = ref<EditorActiveModule>();
+const mainStore = useMainStore();
+const init = ref<boolean>(false);
+
+watch(siteSettings, () => {
+
+  /**
+  * if the target type changes we need to update the available modules
+  */
+  const useTarget = siteSettings.value?.target || 'browser';
+
+  if(useTarget !== mainStore.target) {
+
+    const target = siteSettings.value?.target === 'browser' || !siteSettings.value?.target 
+      ? 'browser' 
+      : siteSettings.value?.target
+
+    mainStore.target = useTarget;
+
+    postModules();
+    postCustomModules();
+    
+    if (currentInstance) {
+
+      loadViaDeclarationSync(target === 'browser' ? editorStore.modulesBrowser : editorStore.modulesMail, 'lila', 'module', currentInstance.appContext.app);
+      loadViaDeclarationSync(target === 'browser' ? editorStore.partialsBrowser : editorStore.partialsMail, 'lila', 'partial', currentInstance.appContext.app);
+
+    }
+
+  }
+    
+})
+
+function messageHandler (message: StudioIframeMessage) {
+
+  if (message.data.type === 'studio-content') {
+    console.groupCollapsed('MESSAGE_STUDIO_CONTENT');
+    console.debug(message.data.data);
+    console.groupEnd();
+
+    contentCache.value = message.data.data;
+    updateContent();
+  }
+
+  //editor main configuration
+  if (message.data.type === 'studio-settings') {
+    console.groupCollapsed('MESSAGE_STUDIO_SETTINGS');
+    console.debug(message.data.data);
+    console.groupEnd();
+
+    settingsCache.value = message.data.data;
+    mainStore.configuration = message.data.data;
+    updateContent();
+  }
+
+  if (message.data.type === 'studio-editor-settings') {
+    console.groupCollapsed('MESSAGE_STUDIO_EDITOR_SETTINGS');
+    console.debug(message.data.data);
+    console.groupEnd();
+
+    siteSettings.value = message.data.data;
+
+    if(!init.value) {
+
+      postModules();
+      postCustomModules();
+      postEvents();
+      init.value = true;
+
+    }
+
+    updateContent();
+    updateContext();
+
+  }
+
+  if (message.data.type === 'studio-active') {
+    console.groupCollapsed('MESSAGE_STUDIO_ACTIVE');
+    console.debug(message.data.data);
+    console.groupEnd();
+
+    active.value = message.data.data;
+
+    if (active.value) {
+
+      scrollToModule(active.value);
+
+    }
+  }
+
+  if (message.data.type === 'studio-cookie-reset') {
+    console.groupCollapsed('MESSAGE_STUDIO_COOKIE_RESET');
+    console.debug(message.data.data);
+    console.groupEnd();
+
+    resetCookies();
+  }
+}
+
+onMounted(() => {
+
+  if (window.origin === 'null') {
+    live.value = true;
+  }
+
+  if (live.value) return;
+
+  removeListeners()
+  addListeners();
+
+  window.parent.postMessage('studio-design-settings', '*');
+  window.parent.postMessage('studio-design-ready', '*');
+});
+
+onBeforeUnmount(() => removeListeners());
+
+function removeListeners () {
+  window.removeEventListener('message', messageHandler, false);
+}
+
+function addListeners () {
+  window.addEventListener('message', messageHandler, false);
+}
+
+function updateContent () {
+  content.value = prepareContent({ modules: contentCache.value, ...siteSettings.value });
+}
+
+function postModules () {
+
+  console.log('POST MODULES', mainStore.target);
+
+  const modules = mainStore.target === 'browser'
+    ? editorStore.availableModulesWithRevision 
+    : editorStore.availableModulesWithRevisionMail
+
+  window.parent.postMessage(
+    {
+      type: 'studio-design-modules-with-revision',
+      data: hardCopy(modules),
+    },
+    '*',
+  );
+
+}
+
+function postCustomModules () {
+
+  const modules = mainStore.target === 'browser'
+    ? mainStore.customModulesBrowser 
+    : mainStore.customModulesMail
+
+  if (!modules) return;
+
+  window.parent.postMessage(
+    {
+      type: 'studio-design-custom-modules',
+      data: hardCopy(modules),
+    },
+    '*',
+  );
+
+}
+
+function postEvents () {
+
+  window.parent.postMessage(
+    {
+      type: 'studio-design-events',
+      data: eventDeclarations,
+    },
+    '*',
+  );
+
+}
+
+/**
+ * sets sitetitle and description
+ */
+function updateContext () {
+
+  contentStore.setContext({
+    sitetitle  : siteSettings?.value?.settings?.title,
+    description: siteSettings?.value?.settings?.description,
+  })
+
+}
+
+function resetCookies () {
+  const cookies = document.cookie.split(';').filter((single) => single);
+
+  cookies.forEach((single) => {
+    const name = single.split('=');
+
+    document.cookie = `${name[0].trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=None;`;
+  });
+}
+
+function scrollToModule (active: EditorActiveModule): void {
+
+  nextTick().then(() => {
+    const baseModule = contentCache.value?.find((single) => single.uuid === active.uuid);
+    const containerSelector = baseModule?.position === 'content' || !baseModule?.position ? '.lila-content-module .container:not(.top, .bottom)' : `.lila-content-module .container.${baseModule.position}`;
+    const contentPosition: Content['modules'] = baseModule?.position === 'content' || !baseModule?.position ? content.value.content : content.value[baseModule.position];
+    const index = contentPosition?.findIndex((single) => single.uuid === active.uuid);
+
+    if (!index && index !== 0) return;
+
+    scrollToSelector(`${containerSelector} .lila-module:nth-child(${index + 1}), ${containerSelector} .partial-container:nth-child(${index + 1})`,)
+
+  });
+
+}
+</script>
+<template>
+  <article class="editor-screen screen">
+    <lila-content-module :content="content" />
+  </article>
+</template>

package/src/views/login.view.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type AppState from '../interfaces/AppState.interface';
+import { auth } from '../plugins/auth';
+import useMainStore from '../stores/main.store';
+import useUserStore from '../stores/user.store';
+import type { RedirectLoginResult } from '@auth0/auth0-spa-js';
+import StudioSDK from '@lilaquadrat/sdk';
+import { onBeforeMount, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { routeForLock } from '../plugins/signupFlow';
+
+const mainStore = useMainStore();
+const userStore = useUserStore();
+const router = useRouter(); 
+const error = ref<boolean>(false);
+const hint = ref<string>();
+
+onBeforeMount(async () => {
+
+  let loginResult: RedirectLoginResult<AppState>;
+
+  // Attempt to handle the authentication callback.
+  try {
+
+    loginResult = await auth.handleCallback();
+  
+  } catch (e: any) { 
+
+    console.error(e);
+    error.value = true;
+    return;
+
+  }
+
+  await userStore.updateLock();
+  
+  console.log(userStore.locked, loginResult);
+  
+  const sdk = new StudioSDK(mainStore.apiConfig);
+
+  if(userStore.locked === 'user-connect' && loginResult?.appState?.customerId) {
+
+    try {
+
+      // Attempt to connect the user with the provided customerId.
+      await sdk.members.me.connect(loginResult?.appState?.customerId);
+      await userStore.updateLock();
+
+    } catch (e) {
+
+      console.error(e);
+      console.error('CONNECT_ACCOUNT_TO_CUSTOMER_FAILED');
+    
+    }
+
+  }
+
+  if(!userStore.userData?.emailConfirmed && loginResult?.appState?.emailConfirmationCode) {
+
+    try {
+
+      // Attempt to confirm the email address with the provided code
+      await sdk.members.me.confirmEmail(loginResult?.appState?.emailConfirmationCode)
+      await userStore.updateLock();
+
+    } catch (e) {
+
+      console.error(e);
+      console.error('EMAIL_CONFIRMATION_FAILED');
+    
+    }
+
+  }
+
+  router.replace(routeForLock(userStore.locked));
+
+})
+
+</script>
+<template>
+  <lila-error-partial v-if="error" :status="400" :hint="hint" type="members" />
+</template>

package/src/views/signup-account.view.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { auth } from '../plugins/auth';
+import useMainStore from '../stores/main.store';
+import useUserStore from '../stores/user.store';
+import { prepareContent } from '@lilaquadrat/studio/lib/esm/frontend';
+import type { ContentWithPositions } from '@lilaquadrat/interfaces';
+import { computed, onBeforeMount } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const userStore = useUserStore();
+const store = useMainStore();
+
+onBeforeMount(() => {
+
+  if(route.query.customerId) {
+
+    userStore.setCustomer({ _id: route.query.customerId as string });
+
+  }
+
+  if(route.query.emailConfirmationCode) {
+
+    userStore.emailConfirmationCode = route.query.emailConfirmationCode as string;
+
+  }
+
+  if(!auth.isAuth.value) {
+
+    auth.triggerSignup(userStore.customer?._id, userStore.emailConfirmationCode);
+
+  } else {
+
+    router.push({ name: 'members' });
+
+  }
+
+});
+
+const contentMerged = computed(() => {
+
+  const data = store.staticData?.redirect;
+
+  if(data) return prepareContent(data) as unknown as ContentWithPositions;
+  return prepareContent({}) as unknown as ContentWithPositions;
+
+});
+
+</script>
+<template>
+  <section class="signup-account-view">
+    <lila-content-module v-if="contentMerged" :content="contentMerged" />
+  </section>
+</template>
+<style lang="less" scoped>
+  .signup-account-view {
+    display: grid;
+    align-content: center;
+    justify-content: center;
+
+    height: 80vh;
+  }
+</style>

package/tooling/cypress/config.ts

@@ -0,0 +1,80 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'cypress'
+import { rebuildManifest, writeManifest, screenshotToManifestPath } from './manifest-utils.mjs'
+
+type CypressConfig = Parameters<typeof defineConfig>[0];
+
+/**
+ * the screenshot harness: seeds cypress/manifest.js from the existing
+ * screenshots, appends every new one as it is taken and pins the browser window
+ * so a run on another machine produces comparable images.
+ *
+ * pass overrides for anything project specific (baseUrl, viewport, extra
+ * setupNodeEvents).
+ */
+export function createCypressConfig (overrides: CypressConfig = {}) {
+
+  const { e2e: e2eOverrides, ...rest } = overrides;
+
+  return defineConfig({
+    e2e: {
+      baseUrl       : 'http://localhost:5173/test',
+      /**
+       * the shared commands live in the package, so a project does not need a
+       * cypress/support folder of its own
+       */
+      supportFile   : fileURLToPath(new URL('./support/e2e.ts', import.meta.url)),
+      viewportHeight: 1920,
+      viewportWidth : 1080,
+      video         : false,
+      testIsolation : false,
+      ...e2eOverrides,
+      /**
+       * always the framework handler: it chains into an override at the end, so
+       * a project can add its own tasks without losing the manifest wiring
+       */
+      setupNodeEvents (on, config) {
+        const root = process.cwd();
+        const files = rebuildManifest(root);
+
+        console.log(`[manifest] seeded with ${files.length} existing screenshots`);
+
+        on('after:screenshot', (details) => {
+          files.push(screenshotToManifestPath(root, details.path));
+          writeManifest(root, files);
+        });
+
+        on('before:browser:launch', (browser, launchOptions) => {
+          if (browser.name === 'electron') {
+            launchOptions.preferences.width = 1920
+            launchOptions.preferences.height = 3000
+          }
+
+          if (browser.family === 'chromium' && browser.name !== 'electron') {
+            launchOptions.args.push('--window-size=1920,1080');
+          }
+
+          if (browser.name === 'firefox') {
+            launchOptions.args.push('--width=1920')
+            launchOptions.args.push('--height=3000')
+
+            launchOptions.preferences['layout.css.devPixelsPerPx'] = '1.0'
+          }
+
+          if (browser.name === 'chrome' && browser.isHeadless) {
+            launchOptions.args.push('--window-size=1920,3000');
+            launchOptions.args.push('--force-device-scale-factor=1');
+          }
+
+          return launchOptions
+        })
+
+        return e2eOverrides?.setupNodeEvents?.(on, config);
+      },
+    },
+    ...rest,
+  })
+
+}
+
+export default createCypressConfig;

package/tooling/cypress/generate-manifest.js

@@ -0,0 +1,5 @@
+import { rebuildManifest } from './manifest-utils.mjs';
+
+const files = rebuildManifest(process.cwd());
+
+console.log(`[manifest] wrote ${files.length} screenshots`);

package/tooling/cypress/manifest-utils.mjs

@@ -0,0 +1,40 @@
+import { writeFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { resolve, join, relative } from 'path';
+
+export function walkImages (dir, base = dir) {
+  return readdirSync(dir).flatMap((entry) => {
+    const full = join(dir, entry);
+
+    if (statSync(full).isDirectory()) return walkImages(full, base);
+    if (/\.(png|jpe?g)$/i.test(entry)) return [full.slice(base.length + 1).replace(/\\/g, '/')];
+    return [];
+  });
+}
+
+export function writeManifest (root, files) {
+  const content = `window.__SCREENSHOTS__ = ${JSON.stringify(files.slice().sort(), null, 2)};\n`;
+
+  writeFileSync(resolve(root, 'cypress/manifest.js'), content, 'utf-8');
+}
+
+export function scanScreenshots (root) {
+  const screenshotsDir = resolve(root, 'cypress/screenshots');
+
+  if (!existsSync(screenshotsDir)) return [];
+
+  return walkImages(screenshotsDir).map((f) => `screenshots/${f}`);
+}
+
+export function rebuildManifest (root = process.cwd()) {
+  const files = scanScreenshots(root);
+
+  writeManifest(root, files);
+
+  return files;
+}
+
+export function screenshotToManifestPath (root, absolutePath) {
+  const screenshotsDir = resolve(root, 'cypress/screenshots');
+
+  return `screenshots/${relative(screenshotsDir, absolutePath).replace(/\\/g, '/')}`;
+}

package/tooling/cypress/run-parallel.mjs

@@ -0,0 +1,77 @@
+import { spawn } from 'child_process';
+import { readdirSync, existsSync, readFileSync } from 'fs';
+import { resolve } from 'path';
+
+// Measured single-run durations (seconds) for the base design specs. A project
+// with its own spec set overrides or extends these through cypress/durations.json.
+// Measured single-run durations (seconds) — used to bin-pack shards evenly instead
+// of a blind round-robin, since a few specs (picture, picturegroup, timeline, emotion,
+// gallery) run 3-6x longer than the rest and would otherwise dominate one shard.
+// Unlisted specs (new ones added later) fall back to the average below.
+const KNOWN_DURATIONS = {
+  'blog-intro.cy.ts'    : 41,
+  'event.cy.ts'         : 25,
+  'gallery.cy.ts'       : 194,
+  'navigation.cy.ts'    : 64,
+  'prices.cy.ts'        : 19,
+  'contact.cy.ts'       : 94,
+  'facts.cy.ts'         : 103,
+  'location.cy.ts'      : 3,
+  'pictureandtext.cy.ts': 152,
+  'text.cy.ts'          : 29,
+  'compare.cy.ts'       : 39,
+  'eventlist.cy.ts'     : 44,
+  'index.cy.ts'         : 79,
+  'picture.cy.ts'       : 376,
+  'quote.cy.ts'         : 40,
+  'FAQ.cy.ts'           : 95,
+  'emotion.cy.ts'       : 197,
+  'footer.cy.ts'        : 26,
+  'menu.cy.ts'          : 31,
+  'picturegroup.cy.ts'  : 300,
+  'timeline.cy.ts'      : 256,
+};
+const root = process.cwd();
+const durationsFile = resolve(root, 'cypress/durations.json');
+const DURATIONS = existsSync(durationsFile)
+  ? { ...KNOWN_DURATIONS, ...JSON.parse(readFileSync(durationsFile, 'utf-8')) }
+  : KNOWN_DURATIONS;
+const AVG_DURATION = Object.values(DURATIONS).reduce((a, b) => a + b, 0) / Object.keys(DURATIONS).length;
+const cypressBin = resolve(root, 'node_modules/.bin/cypress');
+const specsDir = resolve(root, 'cypress/e2e');
+const specNames = readdirSync(specsDir).filter((f) => f.endsWith('.cy.ts'));
+const shardCount = Math.max(1, Math.min(Number(process.env.CY_SHARDS) || 4, specNames.length));
+const shards = Array.from({ length: shardCount }, () => ({ specs: [], total: 0 }));
+
+// Longest-processing-time-first: sort heaviest specs first, always drop the next
+// spec into whichever shard currently has the least total weight.
+specNames
+  .map((name) => ({ name, duration: DURATIONS[name] ?? AVG_DURATION }))
+  .sort((a, b) => b.duration - a.duration)
+  .forEach(({ name, duration }) => {
+    const lightest = shards.reduce((min, s) => (s.total < min.total ? s : min), shards[0]);
+
+    lightest.specs.push(`cypress/e2e/${name}`);
+    lightest.total += duration;
+  });
+
+console.log(`[parallel] running ${specNames.length} specs across ${shardCount} shards (est. longest shard ~${Math.round(Math.max(...shards.map((s) => s.total)) / 60)}m)`);
+
+// Each shard writes its own partial cypress/manifest.js as it goes (from its own
+// in-process view of the screenshots dir), so the manifest is only trustworthy once
+// every shard has finished — the "cy:parallel" script always follows this up with
+// a single authoritative `generate-manifest.js` rebuild over the full directory.
+const runs = shards.map(({ specs }, i) => new Promise((resolveRun, rejectRun) => {
+  const child = spawn(cypressBin, ['run', '--spec', specs.join(',')], { stdio: 'inherit' });
+
+  child.on('exit', (code) => {
+    if (code === 0) resolveRun();
+    else rejectRun(new Error(`shard ${i} failed (exit code ${code})`));
+  });
+}));
+const results = await Promise.allSettled(runs);
+const failed = results.filter((r) => r.status === 'rejected');
+
+failed.forEach((r) => console.error(`[parallel] ${r.reason.message}`));
+
+if (failed.length > 0) process.exit(1);