@lilaquadrat/design-core 0.1.0

package/README.md

@@ -0,0 +1,236 @@
+[![lilaquadrat STUDIO](https://cdn3.lilaquadrat.de/lilaquadrat/homepage/untouched_bannerlinkedin2.png)](https://lilaquadrat.de)
+
+# @lilaquadrat/design-core
+
+The framework half of a STUDIO design.
+
+A design repository used to carry two things at once: the design (modules,
+partials, less, gallery fixtures) and the machinery that makes it an app
+(bootstrap, router, stores, plugins, models, build tooling). Only the first half
+differs between projects. This package is the second half, so a design update no
+longer means porting framework changes by hand into every project.
+
+**The design stays in the project. Everything else lives here.**
+
+## What is in here
+
+| path | what |
+| --- | --- |
+| `main`, `client-entry`, `server-entry` | app bootstrap for browser, hydration and SSR |
+| `routes`, `mixins/getRoutes`, `mixins/createRouter`, `mixins/hooks` | routing, the auth and signup gate, scroll behaviour |
+| `mixins/loadComponents` | module and partial registration, editor module list |
+| `stores/*` | main, user, content, editor, files, cart, calls |
+| `plugins/*` | auth, currency, events, filters, inview, replacer, resize, signupFlow, traceable, translations, youtube |
+| `libs/*` | `Models.class`, `ActionNotice` |
+| `functions/*` | payment provider factory, shopify and stripe providers, dom helpers |
+| `models/*` | Address and Contact declarations |
+| `mixins/*` | date, formatSize, getAnchor, hasSlotContent, replaceVariables, createCookieString, logger |
+| `views/*` | content, editor, login, signup-account, download |
+| `partials/*` | client-only, main-components, error, qrcode, action, mediadetection |
+| `translations/de` | framework wording only - validation, lists, files, signup, order |
+| `vite`, `eslint`, `stylelint`, `cypress` | build and test tooling |
+
+## What is NOT in here, on purpose
+
+Modules, partials, `assets/less` (variables, mixins, fonts, theme), the gallery
+(`preview.view.vue`, `viewData/*`, `preview-controls`, `preview-colors`,
+`previewTheme`, `paletteDerive`), the contrast audit, the module registries
+(`modules.browser.ts`, `partials.browser.ts` and the mail pair), `config.ts`,
+`staticData.ts` and every module-shape interface.
+
+Those are the design. They change per project, and a package version has no
+business deciding what they look like.
+
+## Source, not a build
+
+The package exports `.ts` and `.vue` **source**. Two of the views carry scoped
+less that uses the project's own variables and mixins, injected by vite's
+`globalVars`. A prebuilt stylesheet would bake this repo's palette into every
+project, so the consumer compiles the source instead:
+
+```ts
+optimizeDeps: { exclude: ['@lilaquadrat/studio', '@lilaquadrat/design-core'] }
+```
+
+`createViteConfig` already sets that.
+
+## Using it in a design
+
+### vite
+
+```ts
+// vite.config.ts
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vite';
+import { createViteConfig } from '@lilaquadrat/design-core/vite';
+import config from './config.ts';
+
+export default defineConfig(createViteConfig({
+  config,
+  root   : fileURLToPath(new URL('.', import.meta.url)),
+  lessDir: './src/assets/less',
+}));
+```
+
+### entry
+
+The project owns `App.vue` (global styles, editor wiring) and the module
+registries, so it hands them to the package:
+
+```ts
+// src/client-entry.ts
+import { createClientEntry } from '@lilaquadrat/design-core/client-entry';
+import { dynamicRoutes, editorRoutes, createPreviewRoutes } from '@lilaquadrat/design-core/routes';
+import App from './App.vue';
+import PreviewView from '@/views/preview.view.vue';
+import TestView from '@/views/test.view.vue';
+import modules from './modules.browser';
+import partials from './partials.browser';
+import modulesMail from './modules.mail';
+import partialsMail from './partials.mail';
+
+createClientEntry({
+  components: {
+    root        : App,
+    modules     : modules.modules,
+    partials,
+    modulesMail : modulesMail.modules,
+    partialsMail,
+  },
+  routes: {
+    dynamicRoutes,
+    editorRoutes,
+    previewRoutes: createPreviewRoutes(PreviewView, TestView),
+  },
+});
+```
+
+`render` from `@lilaquadrat/design-core/server-entry` takes the same
+`components` object through its options argument.
+
+### translations
+
+The package ships the strings it renders itself. Module wording belongs to the
+design and is merged on top:
+
+```ts
+import { addMessages } from '@lilaquadrat/design-core/plugins/translations';
+import de from '@/translations/de';
+
+addMessages('de', de);
+```
+
+### eslint, stylelint, cypress
+
+```js
+// eslint.config.js
+export { default } from '@lilaquadrat/design-core/eslint';
+```
+
+```ts
+// cypress.config.ts
+import { createCypressConfig } from '@lilaquadrat/design-core/cypress';
+
+export default createCypressConfig();
+```
+
+`cy:parallel` bin-packs specs by measured runtime. A project with its own spec
+set overrides the table in `cypress/durations.json`.
+
+## SSR preflight
+
+`tooling/ssr-test` renders a whole design through the **real** ssr build and
+fails if anything in it throws, warns or comes back empty. It is the gate before
+publishing.
+
+It exists because the production renderer is forgiving in the worst way:
+`RenderClass.renderSingle` collects renders with `Promise.allSettled` and only
+`console.error`s a rejected one, so a page that blows up during SSR is published
+as an empty shell and nobody notices.
+
+Offline by construction - the two build artifacts are the only input, nothing
+talks to an api:
+
+```
+dist/server      the published ssr build   (yarn build-ssr)
+dist/ssr-test    the design's fixtures     (yarn build:ssr-fixtures)
+```
+
+```ts
+// src/ssr-test.fixtures.ts - built with: vite build --ssr --mode ssr-test
+import type { Content } from '@lilaquadrat/interfaces';
+import modulesBrowser from './modules.browser';
+import text from './views/viewData/text';
+
+export const viewData: Record<string, Content> = { text };
+export const modules = modulesBrowser.modules.map((single) => ({
+  name    : single.name,
+  variants: (single.variants ?? []).map((variant) => ({ key: variant.key })),
+}));
+```
+
+```js
+// test/ssr.test.mjs - run with: node --test test/*.test.mjs
+import { runSsrSuite } from '@lilaquadrat/design-core/ssr-test';
+
+const fixtures = await import('../dist/ssr-test/ssr-test.fixtures.js');
+
+await runSsrSuite({ fixtures });
+```
+
+Three passes:
+
+| pass | what it renders |
+| --- | --- |
+| viewData | every gallery fixture as its own site, at its own url |
+| empty modules | every registered module with nothing but a type and a uuid, then once per registered variant |
+| empty mail modules | the same for the mail registry, rendered at the `mail` url |
+
+Every render is asserted to resolve, to log no `console.error` and no
+`[Vue warn]`, to produce the content module, to return parseable `initialState`,
+and to fill in the html template's placeholders. The context it passes is the
+one `RenderClass.createGenericContext` builds, so what the suite exercises is
+the contract the renderer actually uses.
+
+Options:
+
+- `allowedConsole` - regexes for output the project expects offline (a module
+  that needs a structure declaration or a payment provider from the backend).
+  Reported as a diagnostic instead of failing.
+- `markers` - root class overrides for modules whose class does not follow from
+  their type.
+- `variants: false` - render each module once instead of once per variant.
+- `paths` - where the build output lives, if not the defaults above.
+
+A module that renders nothing for empty data is fine and is reported, not
+failed. A module that *throws* on empty data is the thing this suite is for.
+
+## Migrating an existing design
+
+Keep the old import paths working with a one line shim per file, then delete the
+shims per project whenever convenient:
+
+```ts
+// src/stores/main.store.ts
+export * from '@lilaquadrat/design-core/stores/main.store';
+export { default } from '@lilaquadrat/design-core/stores/main.store';
+```
+
+The subpaths mirror the layout a design already had, so the shim is always the
+same two lines and no component import has to change.
+
+### The one seam that matters
+
+The package never imports a design component. `main-components.partial.vue` and
+`error.partial.vue` render `lila-content-module` by its **global component
+name**, resolved at runtime from the registry the project passed in. That keeps
+the dependency one-directional: design depends on core, core never on design.
+
+## Known state
+
+`yarn type-check` reports the errors this code already had inside the design
+repo - `Models.class`, `main.store`, `action.partial`, the shopify provider and
+`Contact.model`. They were not introduced by the extraction and are unchanged
+from their origin. One extra error in `user.store` is an artifact of this
+repository's own dev tree carrying two copies of `@lilaquadrat/interfaces`; a
+consuming project with a single hoisted copy does not see it.

package/html/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="./src/assets/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./src/assets/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./src/assets/favicon-16x16.png">
+  <link rel="manifest" href="./src/assets/site.webmanifest">
+  <link rel="mask-icon" href="./src/assets/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="lilaquadrat STUDIO design">
+  <title>lilaquadrat STUDIO design</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/client-entry.ts"></script>
+</body>
+
+</html>

package/html/index.mail.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="<!--description-->">
+  <title><!--sitetitle--></title>
+</head>
+
+<body>
+  <div id="app"><!--ssr-outlet--></div>
+</body>
+
+</html>

package/html/index.server.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="<!--cdn-->/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="<!--cdn-->/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="<!--cdn-->/favicon-16x16.png">
+  <link rel="manifest" href="<!--cdn-->/site.webmanifest">
+  <link rel="mask-icon" href="<!--cdn-->/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="<!--description-->">
+  <title><!--sitetitle--></title>
+  <link rel="preconnect" href="<!--cdn-->">
+  <link rel="stylesheet" href="<!--style-->">
+  <!--preload-links-->
+  <script type="module" src="<!--script-->"></script>
+</head>
+
+<body>
+  <div id="app"><!--ssr-outlet--></div>
+  <!--pinia-state-->
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,148 @@
+{
+  "name": "@lilaquadrat/design-core",
+  "version": "0.1.0",
+  "description": "framework layer shared by every lilaquadrat STUDIO design: app bootstrap, router, stores, plugins and build tooling",
+  "type": "module",
+  "license": "MIT",
+  "author": {
+    "email": "m.schuebel@lila2.de",
+    "name": "Mathias Schübel",
+    "url": "https://lilaquadrat.de"
+  },
+  "homepage": "https://lilaquadrat.de",
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src/**/*",
+    "tooling/**/*",
+    "html/**/*",
+    "README.md"
+  ],
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./main": "./src/main.ts",
+    "./routes": "./src/routes.ts",
+    "./client-entry": "./src/client-entry.ts",
+    "./server-entry": "./src/server-entry.ts",
+    "./models": "./src/models.ts",
+    "./customs": "./src/customs.ts",
+    "./globals": "./src/globals.d.ts",
+    "./mixins/*": "./src/mixins/*.ts",
+    "./plugins/*": "./src/plugins/*.ts",
+    "./stores/*": "./src/stores/*.ts",
+    "./libs/*": "./src/libs/*.ts",
+    "./functions/*": "./src/functions/*.ts",
+    "./models/*": "./src/models/*.ts",
+    "./interfaces/*": "./src/interfaces/*.ts",
+    "./translations/*": "./src/translations/*.ts",
+    "./views/*": "./src/views/*",
+    "./partials/*": "./src/components/partials/*",
+    "./html/*": "./html/*",
+    "./vite": "./tooling/vite.ts",
+    "./eslint": "./tooling/eslint.config.js",
+    "./stylelint": "./tooling/stylelint.config.mjs",
+    "./cypress": "./tooling/cypress/config.ts",
+    "./ssr-test": "./tooling/ssr-test/index.mjs",
+    "./cypress/*": "./tooling/cypress/*"
+  },
+  "scripts": {
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --fix",
+    "release": "standard-version"
+  },
+  "peerDependencies": {
+    "@auth0/auth0-spa-js": "^2.1.3",
+    "@lilaquadrat/interfaces": ">=1.31.0",
+    "@lilaquadrat/sdk": "^0.1.2",
+    "@lilaquadrat/studio": "^9.14.3",
+    "axios": "^1.9.0",
+    "cypress": "^15.0.0",
+    "dayjs": "^1.11.13",
+    "eslint": "^9.25.1",
+    "less": "^4.3.0",
+    "object-path": "^0.11.8",
+    "pinia": "^3.0.2",
+    "qrcode": "^1.5.4",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "stylelint": "^16.19.1",
+    "uuid": "^11.1.0",
+    "vite": "^8.0.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.4.4",
+    "vue-router": "^4.5.1"
+  },
+  "peerDependenciesMeta": {
+    "cypress": {
+      "optional": true
+    },
+    "eslint": {
+      "optional": true
+    },
+    "less": {
+      "optional": true
+    },
+    "rollup-plugin-visualizer": {
+      "optional": true
+    },
+    "stylelint": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@auth0/auth0-spa-js": "2.1.3",
+    "@eslint/js": "^9.25.1",
+    "@lilaquadrat/interfaces": "1.31.0",
+    "@lilaquadrat/sdk": "^0.1.2",
+    "@lilaquadrat/studio": "9.15.4",
+    "@types/node": "^22.15.3",
+    "@types/object-path": "^0.11.4",
+    "@types/qrcode": "^1.5.5",
+    "@types/uuid": "^10.0.0",
+    "@types/youtube": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "axios": "^1.9.0",
+    "commitizen": "^4.3.1",
+    "cypress": "^15.10.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "dayjs": "^1.11.13",
+    "eslint": "^9.25.1",
+    "eslint-plugin-vue": "^10.1.0",
+    "globals": "^16.0.0",
+    "less": "^4.3.0",
+    "object-path": "^0.11.8",
+    "pinia": "^3.0.2",
+    "qrcode": "^1.5.4",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "standard-version": "^9.5.0",
+    "stylelint": "^16.19.1",
+    "typescript": "~5.8.3",
+    "uuid": "^11.1.0",
+    "vite": "^8.0.15",
+    "vue": "^3.5.13",
+    "vue-eslint-parser": "^10.1.3",
+    "vue-i18n": "^11.4.4",
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^2.2.10"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "resolutions": {
+    "@lilaquadrat/sdk/@lilaquadrat/interfaces": "1.31.0",
+    "@lilaquadrat/studio/@lilaquadrat/interfaces": "1.31.0"
+  }
+}

package/src/client-entry.ts

@@ -0,0 +1,28 @@
+import './models';
+import hooks from './mixins/hooks';
+import getRoutes, { type RouteSets } from './mixins/getRoutes';
+import './plugins/inview';
+import { getAppInstance, type AppComponents } from './main';
+
+/**
+ * boots the browser app. the project passes its own root component, module
+ * registries and route sets - everything else is framework.
+ */
+export function createClientEntry (options: { components: AppComponents, routes: RouteSets, initAuth?: boolean }) {
+
+  const { app, router } = getAppInstance({}, getRoutes(options.routes), !!window.__INITIAL_STATE__, options.components);
+
+  // the static preview has no backend: skip the auth0 init and the customer call
+  hooks(router, { initAuth: options.initAuth ?? !__PREVIEW__ }, 'client');
+
+  router.isReady().then(() => {
+
+    app.mount('#app');
+
+  });
+
+  return { app, router };
+
+}
+
+export default createClientEntry;

package/src/components/partials/action.partial.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type IconsPartial from '../../interfaces/IconsPartial';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  link?: string
+  event?: string
+  text?: string
+  icon?: IconsPartial['type']
+  attributes?: string[]
+  classes?: string[]
+  variant?: string[]
+  callToAction?: boolean
+  additionalData?: string
+  button?: boolean
+  disabled?: boolean
+  mode?: 'internal' | 'external' | 'event'
+  [key: string]: any,
+  colorScheme?: string
+}>();
+
+</script>
+<template>
+  <component :is="event ? 'lila-button-partial' : 'lila-link-partial'" v-if="event || link" v-bind="props">
+    <slot />
+  </component>
+  <slot v-if="!link && !event" />
+</template>
+

package/src/components/partials/client-only.partial.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const isClient = ref<boolean>(false);
+
+onMounted(() => isClient.value = true);
+
+</script>
+<template>
+  <slot v-if="isClient" />
+</template>

package/src/components/partials/error.partial.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import useMainStore from '../../stores/main.store';
+import type { BasicData, Content } from '@lilaquadrat/interfaces';
+import type { SDKResponse } from '@lilaquadrat/sdk';
+import { prepareContent } from '@lilaquadrat/studio/lib/esm/frontend';
+import { watch } from 'vue';
+import { onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+    status: number
+    type?: 'member' | 'public' | 'restricted'
+    hint?: string
+}>();
+const store = useMainStore();
+const data = ref<SDKResponse<BasicData<Content>>>();
+
+watch(props, () => getContent());
+
+function getFilename () {
+
+  if(props.hint) return props.hint;
+
+  const nameArray: string[] = ['error', props.status.toString()];
+
+  if(props.type) nameArray.push(props.type);
+
+  return nameArray.join('-');
+
+}
+
+async function getContent () {
+
+  data.value = await store.getContent({filename: getFilename()}, 'public') as SDKResponse<BasicData<Content>>;
+
+}
+
+onBeforeMount(async () => await getContent());
+
+const useData = computed(() => {
+
+  if(data?.value?.data?.modules) return data.value?.data;
+
+  if(store.staticData) {
+
+    if(props.hint) {
+  
+      return store.staticData[props.hint];
+  
+    }
+  
+    if(props.status > 0) {
+  
+      return store.staticData[props.status];
+  
+    }
+
+  }
+
+  return undefined;
+
+});
+const contentMerged = computed(() => {
+
+  if(useData.value) return prepareContent(useData.value);
+  return prepareContent({})
+
+}); 
+
+</script>
+<template>
+  <lila-content-module v-if="contentMerged" :content="contentMerged" />
+</template>