chore: setup Loki for visual regression testing

.github/actions/loki/fuselageSnap/.gitignore

@@ -0,0 +1,2 @@
+dump/
+dist/

.github/actions/loki/fuselageSnap/action.yml

@@ -0,0 +1,20 @@
+name: fuselageSnap
+inputs:
+  working_dir:
+    required: true
+    default: .
+  react_uri:
+    required: true
+    default: ./storybook-static
+outputs:
+  fuselage:
+    description: A regex of fuselage components
+  fuselage-toastbar:
+    description: A regex of fuselage-toastbar components
+  layout:
+    description: A regex of layout components
+  onboarding-ui:
+    description: A regex of onboarding-ui components
+runs:
+  using: 'node20'
+  main: dist/index.js

.github/actions/loki/fuselageSnap/index.js

@@ -0,0 +1,125 @@
+import { writeFileSync } from 'fs';
+
+import * as core from '@actions/core';
+import * as github from '@actions/github';
+
+import { getAffectedComponents } from './src/getAffectedComponents.js';
+import { getChangedFile } from './src/git/git.js';
+import { readStatsFile } from './src/stats/readStatsFile.js';
+import { trimStatsFile } from './src/stats/trimStatsFile.js';
+import { copyFiles } from './src/utils/copyFiles.js';
+import { generateRegex } from './src/utils/generateRegex.js';
+
+// yarn build-storybook --stats-json gives project-stats.json which has component titles
+// where as index.json gives the webpack base dependency graph
+// index.js run from the root of the project
+const { context } = github;
+const filesToCopy = [
+  {
+    src: './packages/fuselage/storybook-static/index.json',
+    dest: '.github/actions/loki/fuselageSnap/dist/fuselage-sb.json',
+  },
+  {
+    src: './packages/fuselage-toastbar/storybook-static/index.json',
+    dest: '.github/actions/loki/fuselageSnap/dist/fuselage-toastbar-sb.json',
+  },
+  {
+    src: './packages/onboarding-ui/storybook-static/index.json',
+    dest: '.github/actions/loki/fuselageSnap/dist/onboarding-ui-sb.json',
+  },
+  {
+    src: './packages/layout/storybook-static/index.json',
+    dest: '.github/actions/loki/fuselageSnap/dist/layout-sb.json',
+  },
+  {
+    src: './packages/fuselage/storybook-static/preview-stats.json',
+    dest: '.github/actions/loki/fuselageSnap/dist/fuselage-stats.json',
+  },
+  {
+    src: './packages/fuselage-toastbar/storybook-static/preview-stats.json',
+    dest: '.github/actions/loki/fuselageSnap/dist/fuselage-toastbar-stats.json',
+  },
+  {
+    src: './packages/onboarding-ui/storybook-static/preview-stats.json',
+    dest: '.github/actions/loki/fuselageSnap/dist/onboarding-ui-stats.json',
+  },
+  {
+    src: './packages/layout/storybook-static/preview-stats.json',
+    dest: '.github/actions/loki/fuselageSnap/dist/layout-stats.json',
+  },
+];
+
+writeFileSync(
+  '.github/actions/loki/fuselageSnap/dist/save.json',
+  '{"file_names":[]}',
+  function (err) {
+    if (err) {
+      return console.log(err);
+    }
+    console.log('The file was saved!');
+  },
+);
+writeFileSync(
+  '.github/actions/loki/fuselageSnap/dist/non-storybook-files.json',
+  '{"file_names":[]}',
+  function (err) {
+    if (err) {
+      return console.log(err);
+    }
+    console.log('The file was saved!');
+  },
+);
+
+async function run(context) {
+  // getTrimmedstats
+  const promises = [];
+  for (const { src, dest } of filesToCopy) {
+    copyFiles(src, dest);
+    if (dest.includes('stats')) {
+      const trimmedPath = `.github/actions/loki/fuselageSnap/dist/trimmed-${dest.split('/').slice(-1)}`;
+      promises.push(trimStatsFile(dest, trimmedPath));
+    }
+  }
+
+  await Promise.all(promises);
+  if (context.eventName === 'pull_request') {
+    const changedFiles = await getChangedFile(context);
+    const data = await getAffectedComponents(changedFiles);
+    const regex = generateRegex(data);
+    const nonStatsFileName = await readStatsFile(
+      '.github/actions/loki/fuselageSnap/dist/save.json',
+    );
+    const nonStryBkFiles = await readStatsFile(
+      '.github/actions/loki/fuselageSnap/dist/non-storybook-files.json',
+    );
+    core.startGroup('click to see the changed files');
+    console.log(changedFiles);
+    core.endGroup();
+    core.startGroup('click to see files that do not appear in storybook stats');
+    console.log(nonStatsFileName.file_names);
+    core.startGroup('click to see non storybook package files');
+    console.log(nonStryBkFiles.file_names);
+    core.endGroup();
+    if (regex.fuselage.length === 0) {
+      regex.fuselage = 'skip';
+    }
+    if (regex['fuselage-toastbar'].length === 0) {
+      regex['fuselage-toastbar'] = 'skip';
+    }
+    if (regex.layout.length === 0) {
+      regex.layout = 'skip';
+    }
+    if (regex['onboarding-ui'].length === 0) {
+      regex['onboarding-ui'] = 'skip';
+    }
+    core.setOutput('fuselage', regex.fuselage);
+    core.setOutput('fuselage-toastbar', regex['fuselage-toastbar']);
+    core.setOutput('layout', regex.layout);
+    core.setOutput('onboarding-ui', regex['onboarding-ui']);
+  } else {
+    core.error(
+      'To use Loki fuselagesnap please use trigger events like pull request or push',
+    );
+  }
+}
+run(context);

.github/actions/loki/fuselageSnap/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "fuselagesnap",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "build": "rollup index.js --file dist/index.js",
+    "lint": "lint",
+    "lint-and-fix": "lint-and-fix",
+    "prettier-format": "prettier 'src/**/*.{ts,tsx,js,jsx}' --write"
+  },
+  "dependencies": {
+    "@actions/core": "~1.11.1",
+    "@actions/github": "~6.0.1",
+    "@discoveryjs/json-ext": "~0.6.3",
+    "eslint": "~9.29.0",
+    "execa": "~9.6.0",
+    "lint-all": "workspace:~",
+    "prettier": "~3.5.3",
+    "rollup": "~4.44.2"
+  }
+}

.github/actions/loki/fuselageSnap/src/getAffectedComponents.js

@@ -0,0 +1,175 @@
+import { getDirectDependencies } from './getDirectDependencies.js';
+import { getIndirectDps } from './getIndirectDependency.js';
+import { getNonStatsFile } from './getNonStatsFile.js';
+
+const mapPackagesToFilePath = (changedFiles) => {
+  const packageToFileMap = {};
+  for (const filePath of changedFiles) {
+    if (filePath.split('/').length !== 1) {
+      try {
+        const match = filePath.match(/^packages\/([^/]+)/);
+        const packageName = match[1];
+        if (match) {
+          if (!packageToFileMap[packageName]) {
+            packageToFileMap[packageName] = [];
+          }
+          packageToFileMap[packageName].push(filePath);
+        }
+      } catch (error) {
+        console.log('Ensure file path contains packages ');
+        console.log(error.message);
+      }
+    }
+  }
+  return packageToFileMap;
+};
+
+/**
+ * @param {Array<Object<string, set<string>>>} saveDirectDps - list of dependent components within the changed package
+ * @param {Array<Array<Object<string, Set<string>>>>} saveIndirectDps - list of dependent component within dependent packages
+ * @param {Object<string, string[]>} pkgToFileMap - Mapping of package name to array of changed files.
+ * @returns {Promise<Object<string, Set<string>>>} - Merged map of package names to their affected component titles.
+ */
+async function mergeCmpDeps(saveDirectDps, saveIndirectDps, pkgToFileMap) {
+  const fuselage = new Set();
+  const fuselageToastbar = new Set();
+  const onboardingUi = new Set();
+  const layout = new Set();
+  for (const parentObj of saveIndirectDps) {
+    for (const childObj of parentObj) {
+      const [key, valueSet] = Object.entries(childObj)[0];
+      if (key === 'fuselage') {
+        for (const item of valueSet) fuselage.add(item);
+      } else if (key === 'fuselage-toastbar') {
+        for (const item of valueSet) fuselageToastbar.add(item);
+      } else if (key === 'onboarding-ui') {
+        for (const item of valueSet) onboardingUi.add(item);
+      } else if (key === 'layout') {
+        for (const item of valueSet) layout.add(item);
+      }
+    }
+  }
+  for (const parentObj of saveDirectDps) {
+    const [key, value] = Object.entries(parentObj)[0];
+    if (value !== null) {
+      if (key === 'fuselage') {
+        for (const cmp of value) fuselage.add(cmp);
+      } else if (key === 'fuselage-toastbar') {
+        for (const cmp of value) fuselageToastbar.add(cmp);
+      } else if (key === 'onboarding-ui') {
+        for (const cmp of value) onboardingUi.add(cmp);
+      } else if (key === 'layout') {
+        for (const cmp of value) layout.add(cmp);
+      }
+    }
+  }
+  for (const pkg in pkgToFileMap) {
+    if (Object.prototype.hasOwnProperty.call(pkgToFileMap, pkg)) {
+      for (const file of pkgToFileMap[pkg]) {
+        if (file.includes('package.json') || file.includes('.storybook')) {
+          if (pkg === 'fuselage') {
+            fuselage.clear();
+            fuselage.add('full test');
+          } else if (pkg === 'fuselage-toastbar') {
+            fuselageToastbar.clear();
+            fuselageToastbar.add('full test');
+          } else if (pkg === 'onboarding-ui') {
+            onboardingUi.clear();
+            onboardingUi.add('full test');
+          } else if (pkg === 'layout') {
+            layout.clear();
+            layout.add('full test');
+          } else {
+            console.log('package does not contain storybook');
+          }
+        }
+      }
+    }
+  }
+  return {
+    fuselage,
+    'fuselage-toastbar': fuselageToastbar,
+    'onboarding-ui': onboardingUi,
+    layout,
+  };
+}
+
+function potentialFullTest(changedFiles) {
+  for (const file of changedFiles) {
+    if (file.includes('yarn.lock')) {
+      return true;
+    }
+    const pkg = file.split('/')[0];
+    if (pkg.includes('package.json')) {
+      return true;
+    }
+  }
+  return false;
+}
+export const getAffectedComponents = async (changedFiles) => {
+  if (potentialFullTest(changedFiles)) {
+    const fuselage = new Set();
+    const fuselageToastbar = new Set();
+    const onboardingUi = new Set();
+    const layout = new Set();
+    fuselage.add('full test');
+    fuselageToastbar.add('full test');
+    onboardingUi.add('full test');
+    layout.add('full test');
+    return {
+      fuselage,
+      'fuselage-toastbar': fuselageToastbar,
+      'onboarding-ui': onboardingUi,
+      layout,
+    };
+  }
+
+  const filterChangedFiles = [];
+  const unfilteredChangedFiles = [];
+  for (const file of changedFiles) {
+    if (file.includes('packages')) {
+      // SCSS files are not included in the webpack dependency graph.
+      // If a changed file is a `*.styles.scss` inside `components/`,
+      // map it to its parent component’s `.tsx` file.
+      // Example: `Button.styles.scss` → `Button.tsx`
+      if (file.includes('styles.scss') && file.includes('components')) {
+        const part = file.split('/');
+        const replace = part[part.length - 2];
+        part[part.length - 1] = `${replace}.tsx`;
+        filterChangedFiles.push(part.join('/'));
+      } else {
+        filterChangedFiles.push(file);
+      }
+    } else {
+      unfilteredChangedFiles.push(file);
+    }
+  }
+  const promises = [];
+  for (const file of unfilteredChangedFiles) {
+    promises.push(
+      getNonStatsFile(
+        file,
+        '.github/actions/loki/fuselageSnap/dist/non-storybook-files',
+      ),
+    );
+  }
+  await Promise.all(promises);
+  const map = mapPackagesToFilePath(filterChangedFiles);
+  const directDepsPromises = [];
+  const indirectDepsPromises = [];
+  const pkgNames = [];
+
+  for (const pkgName in map) {
+    if (Object.prototype.hasOwnProperty.call(map, pkgName)) {
+      pkgNames.push(pkgName);
+      directDepsPromises.push(getDirectDependencies(map[pkgName], pkgName));
+      indirectDepsPromises.push(getIndirectDps(pkgName));
+    }
+  }
+
+  const saveDirectDps = await Promise.all(directDepsPromises);
+  const saveIndirectDps = await Promise.all(indirectDepsPromises);
+
+  const result = await mergeCmpDeps(saveDirectDps, saveIndirectDps, map);
+  return result;
+};

.github/actions/loki/fuselageSnap/src/getChangedPackages.js

@@ -0,0 +1,8 @@
+export const getChangedPackages = (filechanged) => {
+  const changedPackages = [];
+  filechanged.forEach((fileName) => {
+    const dismantle = fileName.split('/');
+    changedPackages.push(dismantle[1]);
+  });
+  return changedPackages;
+};

.github/actions/loki/fuselageSnap/src/getComponentTitle.js

@@ -0,0 +1,22 @@
+import { readStatsFile } from './stats/readStatsFile.js';
+
+/**
+ *
+ * @param {string[]} storyNameArray - name or file path from src which includes .stories
+ * @param {string} changedPackage - current pacakge which is changed
+ * @returns {promise<Set<string>>} - A Promise that resolves to a set of component titles.
+ */
+export const getComponentTitle = async (storyNameArray, changedPackage) => {
+  const indexJSON = await readStatsFile(
+    `.github/actions/loki/fuselageSnap/dist/${changedPackage}-sb.json`,
+  );
+  const componentSet = new Set();
+  for (const storyName of storyNameArray) {
+    for (const entry of Object.values(indexJSON.entries)) {
+      if (entry.importPath === storyName) {
+        componentSet.add(entry.title);
+      }
+    }
+  }
+  return componentSet;
+};