@lilaquadrat/design-core 0.1.0

package/tooling/cypress/support/commands.ts

@@ -0,0 +1,436 @@
+/// <reference types="cypress" />
+/* eslint-disable no-unused-vars */
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      getModuleVariantKeysFromString(moduleName: string): Chainable<string[]>
+      captureScreenSizes(module: string, variant: string, ...args: string[]): Chainable<void>
+      updateVariant(variant: string): Chainable<void>
+      updateTextEl(selector: string, textSize: string, parentElement?: string): Chainable<void>
+      updateTextblock(textSize: string, parentClassname?: string | null): Chainable<void>
+      updateListLinks(textSize: string, parentElement?: string): Chainable<void>
+      updatePictureSrc(src: string): Chainable<void>
+      updateGalleryImage(index: number, src: string): Chainable<void>
+      navigateGallery(direction: 'next' | 'prev'): Chainable<void>
+      updateButton(text: string, className?: string): Chainable<void>
+      updateAllTextblocks(textSize: string, parentElement?: string): Chainable<void>
+    }
+  }
+}
+
+/* eslint-enable no-unused-vars */
+
+Cypress.Commands.add('captureScreenSizes', (module: string, variant: string, ...args: string[]) => {
+  const viewports = [
+    { width: 375, height: 667, viewport: 'iphone-6' }, 
+    { width: 768, height: 1024, viewport: 'tablet' }, 
+    { width: 1366, height: 768, viewport: 'laptop' },
+    { width: 1920, height: 1080, viewport: 'desktop' }, 
+  ];
+    
+  viewports.forEach(viewport => {
+    cy.viewport(viewport.width, viewport.height);
+    cy.wait(200);
+
+    cy.document().then((doc) => {
+      const fullHeight = Math.max(
+        doc.body.scrollHeight,
+        doc.body.offsetHeight,
+        doc.documentElement.scrollHeight,
+        doc.documentElement.offsetHeight
+      );
+
+      if (fullHeight > viewport.height) {
+        cy.viewport(viewport.width, fullHeight);
+        cy.wait(200);
+      }
+    });
+    
+    const variantLabel = `variant=${variant || 'default'}`;
+    const contentLabel = `content=${args.join('_')}`;
+    const screenLabel = `screen=${viewport.viewport}-${viewport.width}x${viewport.height}`;
+
+    cy.screenshot(`${module}/${variantLabel}--${contentLabel}--${screenLabel}`, { capture: 'fullPage', overwrite: true });
+ 
+  });
+});
+
+Cypress.Commands.add('getModuleVariantKeysFromString', (moduleName: string) => {
+  cy.readFile('src/modules.browser.ts').then((content) => {
+
+    const moduleRegex = new RegExp(
+      `{\\s*name\\s*:\\s*['"]${moduleName}['"][\\s\\S]*?variants\\s*:\\s*\\[([\\s\\S]*?)\\]`,
+      'm'
+    );   
+    const match = content.match(moduleRegex);
+
+    if (!match) {
+      return cy.wrap([]);
+    }
+
+    const variantsBlock = match[1]; 
+    const variantRegex = /{[\s\S]*?key\s*:\s*['"]([^'"]+)['"][\s\S]*?}/g;
+    const keys: string[] = [];
+    let variantMatch;
+
+    while ((variantMatch = variantRegex.exec(variantsBlock)) !== null) {
+      const variantChunk = variantMatch[0];
+      const key = variantMatch[1];
+      const hasGroup = /group\s*:/.test(variantChunk);
+
+      if (hasGroup || key.startsWith('pdf-')) {
+        continue;
+      }
+
+      keys.push(key);
+    }
+
+    return cy.wrap(keys);
+  });
+});
+
+Cypress.Commands.add('updateVariant', (variant: string) => {
+  cy.get('.presentation')
+    .first()
+    .children()
+    .first()
+    .then(($module) => {
+      const prev = $module.data('activeVariant');
+
+      if (prev) $module.removeClass(prev);
+      if (variant) $module.addClass(variant);
+      $module.data('activeVariant', variant || '');
+
+      const $defaultEls = $module.find('.default');
+
+      $defaultEls.each((_, el) => {
+        const $el = Cypress.$(el);
+        const prevElVariant = $el.data('activeVariant');
+
+        if (prevElVariant) $el.removeClass(prevElVariant);
+        if (variant) $el.addClass(variant);
+        $el.data('activeVariant', variant || '');
+      });
+    });
+});
+
+// todo:
+// - fix updating list items
+// parameter sample ('h1', 'short', 'intro-container') or ('h1', 'short')
+Cypress.Commands.add('updateTextEl', (selector: string, textSize: string, parentElement?: string) => {
+  cy.fixture('textblock-inputs').then((data) => {
+    const sizeOptions = ['short', 'medium', 'long'] as const;
+    let resolvedTextSize: string;
+    let pool: string[];
+
+    if (textSize === 'number') {
+      pool = data.number;
+    } else if (textSize === 'button') {
+      pool = data.button;
+    } else {
+      resolvedTextSize = textSize === 'random' 
+        ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
+        : textSize;
+
+      pool = data.list[resolvedTextSize];
+    }
+
+    const randomText = pool ? pool[Math.floor(Math.random() * pool.length)] : '';
+
+    if (!parentElement) {
+      cy.get('body').then(($body) => {
+        if (!$body.find(selector).length) return;
+
+        cy.get(selector).then($els => {
+          $els.each((_, el) => {
+            Cypress.$(el).text(randomText);
+          });
+        });
+      });
+    } else {
+      cy.get('body').then(($body) => {
+        if (!$body.find(`.${parentElement}`).length) return;
+
+        cy.get(`.${parentElement}`)
+          .first().then($el => {
+            const $selected = $el.find(selector);
+
+            if (!$selected.length) return;
+
+            $selected.each((_, el) => {
+              Cypress.$(el).text(randomText);
+            });
+          });
+      });
+    }
+  });
+});
+
+// parameter sample ('short', 'intro-container') or ('short')
+Cypress.Commands.add('updateTextblock', (textSize: string, parentClassname?: string | null) => {
+  const tags = ['h1', 'h2', 'h3', 'p'] as const;
+  const sizeOptions = ['short', 'medium', 'long'] as const;
+  const listTypes = ['list', 'links'] as const;
+  const tagToDataKey = {
+    h1: 'headline',
+    h2: 'subline',
+    h3: 'intro',
+    p : 'paragraph',
+  } as const;
+  const selector = parentClassname
+    ? `.lila-textblock.${parentClassname}`
+    : '.lila-textblock';
+
+  cy.fixture('textblock-inputs').then((data) => {
+    cy.get('body').then(($body) => {
+      if (!$body.find(selector).length) return;
+
+      cy.get(selector)
+        .first()
+        .then(($block) => {
+          tags.forEach((tag) => {
+            const dataKey = tagToDataKey[tag];
+            const $tag = $block.find(tag).first();
+
+            if (!$tag.length) return;
+
+            const currentSize =
+              textSize === 'random'
+                ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
+                : textSize;
+            const pool = data[dataKey]?.[currentSize];
+
+            if (!pool?.length) return;
+
+            const randomText = pool[Math.floor(Math.random() * pool.length)];
+
+            cy.wrap($tag).invoke('text', randomText);
+          });
+        });
+
+      listTypes.forEach((listType) => {
+        if (!$body.find(`.${listType}`).length) return;
+
+        const currentSize = textSize === 'random'
+          ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)]
+          : textSize;
+
+        cy.get(`.${listType}`).first().then(($block) => {
+          cy.get(`.${listType}`).first().then(($parent) => {
+            if (!$parent.find('h4').length) return;
+
+            cy.wrap($parent.find('h4').first()).invoke(
+              'text',
+              data.list[currentSize][Math.floor(Math.random() * data.list[currentSize].length)]
+            );
+          });
+
+          const items = $block.find('li');
+
+          items.each((index, item) => {
+            const text = data.list[currentSize][index % data.list[currentSize].length];
+
+            cy.wrap(item).then(($li) => {
+              if (listType === 'links') {
+                const $link = $li.find('a:first');
+
+                if ($link.length) {
+                  $link.text(text);
+                }
+              } else {
+                const li = $li[0];
+
+                if (li.lastChild && li.lastChild.nodeType === Node.TEXT_NODE) {
+                  li.lastChild.nodeValue = text;
+                }
+              }
+            });
+          });
+        });
+      });
+    });
+  });
+});
+
+Cypress.Commands.add('updateListLinks', (textSize: string, parentElement?: string) => {
+  const target = parentElement ? `.${parentElement} .lila-list-links` : '.lila-list-links';
+
+  cy.fixture('textblock-inputs').then((data) => {
+    const sizeOptions = ['short', 'medium', 'long'] as const;
+    const resolvedTextSize = textSize === 'random' ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)] : textSize;
+    const pool = data.list[resolvedTextSize];
+
+    if (!pool?.length) return;
+
+    cy.get('body').then(($body) => {
+      if (!$body.find(target).length) return;
+
+      cy.get(target).each(($list) => {
+        const $h4 = $list.find('h4');
+
+        if ($h4.length) {
+          $h4.text(pool[Math.floor(Math.random() * pool.length)]);
+        }
+
+        $list.find('li').each((index, item) => {
+          const text = pool[index % pool.length];
+          const $a = Cypress.$(item).find('a:first');
+
+          if ($a.length) {
+            $a.text(text);
+          } else if (item.lastChild && item.lastChild.nodeType === Node.TEXT_NODE) {
+            item.lastChild.nodeValue = text;
+          }
+        });
+      });
+    });
+  });
+});
+
+Cypress.Commands.add('updatePictureSrc', (data: { src: string; alt?: string; caption?: string } | string) => {
+  // Define tag selectors at the top
+  const selectors = {
+    img    : 'picture img',
+    caption: 'figcaption',
+  };
+  const applyImageData = (imageData: { src: string; alt?: string; caption?: string }) => {
+    cy.get('body').then(($body) => {
+      if ($body.find(selectors.img).length) {
+        cy.get(selectors.img).invoke('attr', 'src', imageData.src);
+
+        if (imageData.alt) {
+          cy.get(selectors.img).invoke('attr', 'alt', imageData.alt);
+        }
+      }
+
+      if (imageData.caption && $body.find(selectors.caption).length) {
+        cy.get(selectors.caption).invoke('text', imageData.caption);
+      }
+    });
+  };
+
+  if (typeof data === 'string') {
+    // Resolve string like 'horizontal-0' or 'horizontal-0.jpg' to fixture object
+    const key = data.replace(/\.[^/.]+$/, ''); // strip extension
+    const match = key.match(/^(.+)-(\d+)$/);
+
+    if (match) {
+      const [, category, indexStr] = match;
+      const index = parseInt(indexStr, 10);
+
+      cy.fixture('image-inputs').then((fixtureData) => {
+        const resolved = fixtureData[category]?.[index];
+
+        if (resolved) {
+          applyImageData(resolved);
+        } else {
+          applyImageData({ src: data });
+        }
+      });
+    } else {
+      applyImageData({ src: data });
+    }
+  } else {
+    applyImageData(data);
+  }
+});
+
+Cypress.Commands.add('updateGalleryImage', (index: number, data: { src: string; alt?: string; caption?: string } | string) => {
+  const imageData = typeof data === 'string' ? { src: data } : data;
+
+  cy.get('body').then(($body) => {
+    const $elements = $body.find('.gallery-module .element');
+
+    if (!$elements.length || !$elements.eq(index).length) return;
+
+    const $img = $elements.eq(index).find('picture img');
+
+    if ($img.length) {
+      cy.get('.gallery-module .element').eq(index).find('picture img').invoke('attr', 'src', imageData.src);
+
+      if (imageData.alt) {
+        cy.get('.gallery-module .element').eq(index).find('picture img').invoke('attr', 'alt', imageData.alt);
+      }
+    }
+
+    if (imageData.caption) {
+      const $caption = $elements.eq(index).find('figcaption');
+
+      if ($caption.length) {
+        cy.get('.gallery-module .element').eq(index).find('figcaption').invoke('text', imageData.caption);
+      }
+    }
+  });
+});
+
+Cypress.Commands.add('navigateGallery', (direction: 'next' | 'prev') => {
+  const selector = direction === 'next' ? '.gallery-controls button:last-child' : '.gallery-controls button:first-child';
+
+  cy.get('body').then(($body) => {
+    if ($body.find(selector).length) {
+      cy.get(selector).click();
+      cy.wait(500);
+    }
+  });
+});
+
+Cypress.Commands.add('updateButton', (text: string, className?: string) => {
+  cy.get('body').then(($body) => {
+    if (!$body.find('.lila-button, .button').length) return;
+
+    cy.get('.lila-button, .button').each(($btn) => {
+      if (text === 'random') {
+        cy.fixture('textblock-inputs').then((data) => {
+          const pool = data.button;
+          const randomText = pool[Math.floor(Math.random() * pool.length)];
+
+          cy.wrap($btn).invoke('text', randomText);
+        });
+      } else {
+        cy.wrap($btn).invoke('text', text);
+      }
+
+      if (className) {
+        cy.wrap($btn).invoke('addClass', className);
+      }
+    });
+  });
+});
+
+Cypress.Commands.add('updateAllTextblocks', (textSize: string, parentElement?: string) => {
+  const tags = ['h1', 'h2', 'h3', 'p'] as const;
+  const sizeOptions = ['short', 'medium', 'long'] as const;
+  const tagToDataKey = {
+    h1: 'headline',
+    h2: 'subline',
+    h3: 'intro',
+    p : 'paragraph',
+  } as const;
+  const selector = parentElement ? `.${parentElement} .lila-textblock` : '.lila-textblock';
+
+  cy.fixture('textblock-inputs').then((data) => {
+    cy.get('body').then(($body) => {
+      if (!$body.find(selector).length) return;
+
+      cy.get(selector).each(($block) => {
+        tags.forEach((tag) => {
+          const dataKey = tagToDataKey[tag];
+          const $tag = $block.find(tag).first();
+
+          if (!$tag.length) return;
+
+          const currentSize = textSize === 'random' ? sizeOptions[Math.floor(Math.random() * sizeOptions.length)] : textSize as typeof sizeOptions[number];
+          const pool = data[dataKey]?.[currentSize];
+
+          if (!pool?.length) return;
+
+          const randomText = pool[Math.floor(Math.random() * pool.length)];
+
+          cy.wrap($tag).invoke('text', randomText);
+        });
+      });
+    });
+  });
+});
+
+export {}

package/tooling/cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

package/tooling/eslint.config.js

@@ -0,0 +1,223 @@
+import eslint from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import pluginVue from 'eslint-plugin-vue'
+import typescriptParser from '@typescript-eslint/parser';
+import vueParser from 'vue-eslint-parser';
+import globals from 'globals';
+
+export default [
+  // Default ignores - including all patterns from .eslintignore
+  { 
+    ignores: [
+      // Project specific ignores
+      'src/views/viewData/*',
+      'config.ts',
+      'stats.html',
+      
+      // Build outputs
+      'dist/**',
+      'dist-ssr/**',
+      'coverage/**',
+      '*.local',
+      
+      // Logs
+      'logs/**',
+      '*.log',
+      'npm-debug.log*',
+      'yarn-debug.log*',
+      'yarn-error.log*',
+      'pnpm-debug.log*',
+      'lerna-debug.log*',
+      
+      // Dependencies
+      'node_modules/**',
+      '.yarn/**',
+      '*.tsbuildinfo',
+      '.lila/**',
+      
+      // System files
+      '.DS_Store',
+      
+      // Editor directories and files
+      '.vscode/**',
+      '!.vscode/extensions.json',
+      '.idea/**',
+      '*.suo',
+      '*.ntvs*',
+      '*.njsproj',
+      '*.sln',
+      '*.sw?',
+      
+      // Test files
+      '/cypress/videos/',
+      '/cypress/screenshots/',
+    ] 
+  },
+
+  // Cypress test files
+  {
+    files          : ['cypress/**/*.{cy,spec}.{js,jsx,ts,tsx}', 'cypress/support/**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parser : typescriptParser,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.mocha,
+        cy     : 'readonly',
+        Cypress: 'readonly',
+        expect : 'readonly',
+        assert : 'readonly',
+      }
+    }
+  },
+
+  // Base eslint recommended config
+  eslint.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+
+  // Common environment settings for all files
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      globals    : {
+        ...globals.browser, 
+        // Browser globals
+        console  : 'readonly',
+        document : 'readonly',
+        window   : 'readonly',
+        navigator: 'readonly',
+        
+        // Timer functions
+        setTimeout   : 'readonly',
+        clearTimeout : 'readonly',
+        setInterval  : 'readonly',
+        clearInterval: 'readonly',
+        
+        // JS objects
+        Promise: 'readonly',
+        
+        // DOM elements and types
+        HTMLElement     : 'readonly',
+        HTMLInputElement: 'readonly',
+        Element         : 'readonly',
+        Node            : 'readonly',
+        NodeList        : 'readonly',
+        Event           : 'readonly',
+        MouseEvent      : 'readonly',
+        KeyboardEvent   : 'readonly',
+        CustomEvent     : 'readonly',
+        DOMParser       : 'readonly',
+        
+        // Web APIs
+        localStorage  : 'readonly',
+        sessionStorage: 'readonly',
+        fetch         : 'readonly',
+        XMLHttpRequest: 'readonly',
+
+        // compile time defines, injected by vite.config.ts
+        __FRONTEND_CONFIG__: 'readonly',
+        __TARGET__         : 'readonly',
+        __PREVIEW__        : 'readonly'
+      }
+    }
+  },
+
+  // the build config runs in node, not in the browser
+  {
+    files          : ['vite.config.ts', 'build/**/*.ts', 'build/**/*.mjs'],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    }
+  },
+
+  // Vue plugin config
+  {
+    files          : ['**/*.vue'],
+    languageOptions: {
+      parser       : vueParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        parser     : typescriptParser,
+      },
+    },
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'vue/max-len'                   : ['warn', {
+        code                     : 250,
+        template                 : 350,
+        tabWidth                 : 2,
+        ignoreComments           : true,
+        ignoreUrls               : true,
+        ignoreStrings            : true,
+        ignoreTemplateLiterals   : true,
+        ignoreRegExpLiterals     : true,
+        ignoreHTMLAttributeValues: false,
+        ignoreHTMLTextContents   : false,
+      }],
+      'vue/max-attributes-per-line'     : 'off',
+      'vue/first-attribute-linebreak'   : 'off',
+      'vue/html-closing-bracket-newline': 'off',
+      'vue/require-default-prop'        : 'off',
+      'vue/html-indent'                 : ['error', 4],
+    }
+  },
+
+  // TypeScript files
+  {
+    files  : ['**/*.ts', '**/*.tsx'],
+    plugins: {
+      '@typescript-eslint': tseslint,
+    },
+    languageOptions: {
+      parser       : typescriptParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+      }
+    },
+  },
+
+  // Common config for all files
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+    },
+    rules: {
+      semi               : 'off',
+      'brace-style'      : ['error', '1tbs', { allowSingleLine: true }],
+      'multiline-ternary': ['error', 'always-multiline'],
+      'no-param-reassign': ['error', { props: false }],
+      'import/no-cycle'  : 'off',
+      'max-len'          : [
+        'warn',
+        {
+          code: 250, // Updated this from 240 to 250 for consistency
+        },
+      ],
+      curly                        : [2, 'multi-line'],
+      'prefer-destructuring'       : 'off',
+      'no-multiple-empty-lines'    : [1, { max: 1 }],
+      'no-multi-spaces'            : ['error', { ignoreEOLComments: false }],
+      'arrow-spacing'              : ['error', { 'before': true, 'after': true }],
+      'space-before-function-paren': ['error', {
+        'anonymous' : 'never',
+        'named'     : 'never',
+        'asyncArrow': 'always'
+      }],
+      'one-var'                        : ['error', 'never'],
+      'comma-spacing'                  : ['error', { 'before': false, 'after': true }],
+      'key-spacing'                    : ['error', { 'afterColon': true }],
+      'indent'                         : ['error', 4],
+      quotes            : ['error', 'single'],
+      'arrow-body-style': ['error', 'as-needed'],
+      'prefer-const'    : 'error'
+    },
+  },
+
+  // Fully disable eslint-plugin-vue (template/html linting) - script rules above still apply
+  {
+    files: ['**/*.vue'],
+    rules: Object.fromEntries(Object.keys(pluginVue.rules).map(name => [`vue/${name}`, 'off'])),
+  },
+];