test/frontend/storybook/.storybook/main.ts

import { defineMain } from "storybook-solidjs-vite";
import tailwindcss from "@tailwindcss/vite";
import type { Plugin } from "vite";

function stubVirtualEnvConfig(): Plugin {
  const id = "virtual:env-config";
  const resolved = "\0" + id;
  return {
    name: "stub-virtual-env-config",
    resolveId(source) {
      if (source === id) return resolved;
    },
    load(loadId) {
      if (loadId === resolved) {
        return `export const envConfig = ${JSON.stringify({
          isDevelopment: true,
          backendUrl: "http://localhost:5005",
          clientVersion: "storybook",
          recaptchaSiteKey: "",
          quickLoginEmail: undefined,
          quickLoginPassword: undefined,
        })};`;
      }
    },
  };
}

function patchQsrToNotThrow(): Plugin {
  return {
    name: "patch-qsr-not-throw",
    enforce: "pre",
    transform(code, id) {
      if (!id.includes("utils/dom")) return;
      // Replace the throw in qsr with creating a dummy element
      return code.replaceAll(
        `throw new Error(\`Required element not found: \${selector}\`);`,
        `console.warn(\`[storybook] qsr: element not found: \${selector}, returning dummy\`);
    return new ElementWithUtils(document.createElement("div") as T);`,
      );
    },
  };
}

function patchAnimatedModalToNotThrow(): Plugin {
  return {
    name: "patch-animated-modal-not-throw",
    enforce: "pre",
    transform(code, id) {
      if (!id.includes("utils/animated-modal")) return;
      return code
        .replaceAll(
          `throw new Error(
        \`Dialog element with id \${constructorParams.dialogId} not found\`,
      );`,
          `console.warn(\`[storybook] AnimatedModal: dialog #\${constructorParams.dialogId} not found\`); return;`,
        )
        .replace(
          `throw new Error("Animated dialog must be an HTMLDialogElement");`,
          `console.warn("[storybook] AnimatedModal: element is not a dialog"); return;`,
        );
    },
  };
}

function stubChartController(): Plugin {
  const stubId = "\0stub-chart-controller";
  const stubCode = `
    const noop = () => {};
    const fakeScale = new Proxy({}, { get: () => "" , set: () => true });
    const fakeDataset = new Proxy({}, { get: () => [], set: () => true });
    const fakeChart = {
      data: { labels: [] },
      options: { plugins: {} },
      getDataset: () => fakeDataset,
      getScale: () => fakeScale,
      update: noop,
      resize: noop,
    };
    export class ChartWithUpdateColors {}
    export const result = fakeChart;
    export const accountHistory = fakeChart;
    export const accountActivity = fakeChart;
    export const accountHistogram = fakeChart;
    export const miniResult = fakeChart;
    export let accountHistoryActiveIndex = 0;
    export function updateAccountChartButtons() {}
  `;
  return {
    name: "stub-chart-controller",
    enforce: "pre",
    resolveId(source, _importer) {
      if (
        source.endsWith("controllers/chart-controller") ||
        source.endsWith("controllers/chart-controller.ts")
      ) {
        return stubId;
      }
    },
    load(id) {
      if (id === stubId) return stubCode;
      if (id.includes("controllers/chart-controller")) return stubCode;
    },
  };
}

function stubVirtualLanguageHashes(): Plugin {
  const id = "virtual:language-hashes";
  const resolved = "\0" + id;
  return {
    name: "stub-virtual-language-hashes",
    resolveId(source) {
      if (source === id) return resolved;
    },
    load(loadId) {
      if (loadId === resolved) {
        return `export const languageHashes = {};`;
      }
    },
  };
}

export default defineMain({
  staticDirs: ["../../static"],
  framework: {
    name: "storybook-solidjs-vite",
    options: {
      // docgen: {
      // Enabled by default, but you can configure or disable it:
      //  see https://github.com/styleguidist/react-docgen-typescript#options
      // },
    },
  },
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-a11y",
    "@storybook/addon-links",
    "@storybook/addon-vitest",
  ],
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  viteFinal(config) {
    config.plugins ??= [];
    config.plugins.push(tailwindcss());
    config.plugins.push(stubVirtualEnvConfig());
    config.plugins.push(stubVirtualLanguageHashes());
    config.plugins.push(patchQsrToNotThrow());
    config.plugins.push(patchAnimatedModalToNotThrow());
    config.plugins.push(stubChartController());
    return config;
  },
});