storybooker 0.19.4 → 0.22.0-canary.0

package/src/handlers/handle-process-zip.ts

@@ -0,0 +1,117 @@
+import decompress from "decompress";
+import { Buffer } from "node:buffer";
+import fs from "node:fs";
+import fsp from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import type { StoryBookerFile } from "../adapters/_internal/storage.ts";
+import { BuildsModel } from "../models/builds-model.ts";
+import type { BuildUploadVariant } from "../models/builds-schema.ts";
+import { generateStorageContainerId } from "../utils/adapter-utils.ts";
+import { writeStreamToFile } from "../utils/file-utils.ts";
+import { getMimeType } from "../utils/mime-utils.ts";
+import { getStore } from "../utils/store.ts";
+
+export async function handleProcessZip(
+  projectId: string,
+  buildId: string,
+  variant: BuildUploadVariant,
+): Promise<void> {
+  const { abortSignal, logger, storage } = getStore();
+  const debugLog = (...args: unknown[]): void => {
+    logger.log(`(${projectId}-${buildId}-${variant})`, ...args);
+  };
+
+  debugLog("Creating temp dir");
+  const localDirpath = fs.mkdtempSync(
+    path.join(os.tmpdir(), `storybooker-${projectId}-${buildId}-`),
+  );
+  const localZipFilePath = path.join(localDirpath, `${variant}.zip`);
+  const outputDirpath = path.join(localDirpath, variant);
+
+  const containerId = generateStorageContainerId(projectId);
+  const buildIdModel = new BuildsModel(projectId).id(buildId);
+
+  try {
+    await buildIdModel.update({ [variant]: "processing" });
+
+    debugLog("Downloading zip file");
+    const file = await storage.downloadFile(containerId, `${buildId}/${variant}.zip`, {
+      abortSignal,
+      logger,
+    });
+
+    if (!file.content) {
+      throw new Error("No file content found.");
+    }
+
+    if (typeof file.content === "string") {
+      await fsp.writeFile(localZipFilePath, file.content);
+    } else if (file.content instanceof Blob) {
+      const arrayBuffer = await file.content.arrayBuffer();
+      await fsp.writeFile(localZipFilePath, Buffer.from(arrayBuffer));
+    } else {
+      await writeStreamToFile(localZipFilePath, file.content);
+    }
+
+    debugLog("Decompress zip file");
+    await decompress(localZipFilePath, outputDirpath);
+
+    debugLog("Upload uncompressed dir");
+    await storage.uploadFiles(
+      containerId,
+      await dirpathToFiles(outputDirpath, `${buildId}/${variant}`),
+      { abortSignal, logger },
+    );
+
+    await buildIdModel.update({ [variant]: "ready" });
+  } finally {
+    debugLog("Cleaning up temp dir");
+    await fsp.rm(localDirpath, { force: true, recursive: true }).catch(logger.error);
+  }
+}
+
+async function dirpathToFiles(dirpath: string, prefix: string): Promise<StoryBookerFile[]> {
+  const allEntriesInDir = await fsp.readdir(dirpath, {
+    encoding: "utf8",
+    recursive: true,
+    withFileTypes: true,
+  });
+  const allFilesInDir = allEntriesInDir
+    .filter((file) => file.isFile() && !file.name.startsWith("."))
+    .map((file) => path.join(file.parentPath, file.name));
+
+  return allFilesInDir.map((filepath): StoryBookerFile => {
+    const relativePath = filepath.replace(`${dirpath}/`, "");
+    const content = createWebReadableStream(filepath);
+
+    return {
+      content,
+      mimeType: getMimeType(filepath),
+      path: path.posix.join(prefix, relativePath),
+    };
+  });
+}
+
+function createWebReadableStream(filepath: string): ReadableStream {
+  const readStream = fs.createReadStream(filepath);
+
+  return new ReadableStream({
+    cancel() {
+      readStream.destroy();
+    },
+    start(controller) {
+      readStream.on("data", (chunk) => {
+        controller.enqueue(chunk);
+      });
+
+      readStream.on("end", () => {
+        controller.close();
+      });
+
+      readStream.on("error", (error) => {
+        controller.error(error);
+      });
+    },
+  });
+}

package/src/handlers/handle-purge.ts

@@ -0,0 +1,65 @@
+import type { LoggerAdapter } from "../adapters/_internal/logger.ts";
+import { BuildsModel } from "../models/builds-model.ts";
+import { ProjectsModel } from "../models/projects-model.ts";
+import type { ProjectType } from "../models/projects-schema.ts";
+import { TagsModel } from "../models/tags-model.ts";
+import { DEFAULT_PURGE_AFTER_DAYS, ONE_DAY_IN_MS } from "../utils/constants.ts";
+import { getStore } from "../utils/store.ts";
+
+export type HandlePurge = (
+  params: { projectId?: string },
+  options: { abortSignal?: AbortSignal; logger?: LoggerAdapter },
+) => Promise<void>;
+
+export const handlePurge: HandlePurge = async ({ projectId }) => {
+  const projectModel = new ProjectsModel();
+  if (projectId) {
+    const project = await projectModel.get(projectId);
+    await purgeProject(project);
+  } else {
+    const projects = await projectModel.list();
+    const promises = projects.map((project) => purgeProject(project));
+    await Promise.allSettled(promises);
+  }
+};
+
+async function purgeProject(project: ProjectType): Promise<void> {
+  const { locale, logger } = getStore();
+  const {
+    id: projectId,
+    gitHubDefaultBranch,
+    latestBuildId,
+    purgeBuildsAfterDays = DEFAULT_PURGE_AFTER_DAYS,
+  } = project;
+  const expiryTime = new Date(Date.now() - purgeBuildsAfterDays * ONE_DAY_IN_MS);
+  logger.log(
+    `[Project: ${projectId}] Purge builds which were last modified more than ${purgeBuildsAfterDays} days ago - before ${new Date(
+      expiryTime,
+    ).toLocaleString(locale)}`,
+  );
+
+  const buildsModel = new BuildsModel(projectId);
+  const expiredBuilds = await buildsModel.list({
+    filter: (item) => item.id !== latestBuildId && new Date(item.updatedAt) < expiryTime,
+  });
+  for (const build of expiredBuilds) {
+    // oxlint-disable-next-line no-await-in-loop
+    await buildsModel.delete(build.id, true);
+  }
+  logger.log(`[Project: ${projectId}] Purged ${expiredBuilds.length} expired builds.`);
+
+  const tagsModel = new TagsModel(projectId);
+  const emptyTags = await tagsModel.list({
+    filter: (item) => {
+      if (item.type === "branch" && item.value === gitHubDefaultBranch) {
+        return false;
+      }
+      return item.buildsCount === 0;
+    },
+  });
+  for (const tag of emptyTags) {
+    // oxlint-disable-next-line no-await-in-loop
+    await tagsModel.delete(tag.id);
+  }
+  logger.log(`[Project: ${projectId}] Purged ${emptyTags.length} empty tags...`);
+}

package/src/handlers/handle-serve-storybook.ts

@@ -0,0 +1,101 @@
+import { SuperHeaders } from "@remix-run/headers";
+import { HTTPException } from "hono/http-exception";
+import path from "node:path";
+import { urlBuilder } from "../urls.ts";
+import { generateStorageContainerId } from "../utils/adapter-utils.ts";
+import { authenticateOrThrow } from "../utils/auth.ts";
+import { CACHE_CONTROL_PUBLIC_YEAR, SERVICE_NAME } from "../utils/constants.ts";
+import { getMimeType } from "../utils/mime-utils.ts";
+import { getStore } from "../utils/store.ts";
+
+export async function handleServeStoryBook({
+  buildId,
+  filepath,
+  projectId,
+}: {
+  buildId: string;
+  projectId: string;
+  filepath: string;
+}): Promise<Response> {
+  const { abortSignal, logger, storage } = getStore();
+  const storageFilepath = path.posix.join(buildId, filepath);
+  authenticateOrThrow({ action: "read", projectId, resource: "build" });
+
+  try {
+    const { content, mimeType } = await storage.downloadFile(
+      generateStorageContainerId(projectId),
+      storageFilepath,
+      { abortSignal, logger },
+    );
+
+    if (!content) {
+      throw new HTTPException(404, { message: "File does not contain any content" });
+    }
+
+    const headers = new SuperHeaders();
+    headers.contentType = mimeType ?? getMimeType(filepath);
+    headers.cacheControl = CACHE_CONTROL_PUBLIC_YEAR;
+
+    if (filepath.endsWith("index.html")) {
+      // Appending custom UI to index.html
+      const data = typeof content === "string" ? content : await new Response(content).text();
+      const bodyWithBackButton = data.replace(
+        `</body>`,
+        `
+  <div><a id="view-all" href="${urlBuilder.buildsList(projectId)}"
+  style="position: fixed; bottom: 0.5rem; left: 0.5rem; z-index: 9999; padding: 0.25rem 0.5rem; background-color: black; color: white; border-radius: 0.25rem; text-decoration: none; font-size: 1rem; font-face: sans-serif; font-weight: 400;">
+  ← ${SERVICE_NAME}
+  </a></div>
+  
+  ${relativeHrefScripts}
+</body>`,
+      );
+
+      return new Response(bodyWithBackButton, { headers, status: 200 });
+    }
+
+    if (filepath.endsWith("iframe.html")) {
+      // Appending custom UI to index.html
+      const data = typeof content === "string" ? content : await new Response(content).text();
+      const bodyWithBackButton = data.replace(
+        `</body>`,
+        `
+${relativeHrefScripts}
+</body>`,
+      );
+
+      return new Response(bodyWithBackButton, { headers, status: 200 });
+    }
+
+    if (content instanceof ReadableStream) {
+      const body = await new Response(content).arrayBuffer();
+      return new Response(body, { headers, status: 200 });
+    }
+
+    return new Response(content, { headers, status: 200 });
+  } catch (error) {
+    throw new HTTPException(404, { message: "File not found", cause: error });
+  }
+}
+
+const relativeHrefScripts = `
+<script defer>
+// script to replace absolute links with relative links 
+window.addEventListener('load', () => {
+  const linkElements = document.querySelectorAll("[href^='/']");
+  linkElements.forEach((el) => {
+    const href = typeof el.href === "string" ? el.href : el.href.baseVal;
+    const newHref = "." + href.replace(origin, "");
+    el.setAttribute("href", newHref);
+  });
+  const mediaElements = document.querySelectorAll("[src^='/']");
+  mediaElements.forEach((el) => {    
+    const newSrc = el.src.replace(origin, ".");
+    el.setAttribute("src", newSrc);
+    if (el.hasAttribute("srcset")) {
+      const newSrcset = el.srcset.replaceAll(origin, ".");
+      el.setAttribute("srcset", newSrcset);
+    }
+  });
+}, { once: true });
+</script>`;

package/src/index.ts

@@ -1,17 +1,82 @@
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-import { name, version } from "../package.json" with { type: "json" };
-import { createCommandModule } from "./commands/create";
-import { purgeCommandModule } from "./commands/purge";
-import { testCommandModule } from "./commands/test";
+import { SuperHeaders } from "@remix-run/headers";
+import { Hono } from "hono";
+import { logger as loggerMiddleware } from "hono/logger";
+import type { TimingVariables } from "hono/timing";
+import { createConsoleLoggerAdapter, type StoryBookerUser } from "./adapters/_internal/index.ts";
+import { handlePurge, type HandlePurge } from "./handlers/handle-purge.ts";
+import { appRouter } from "./routers/_app-router.ts";
+import type { PurgeHandlerOptions, RouterOptions } from "./types.ts";
+import { DEFAULT_LOCALE } from "./utils/constants.ts";
+import {
+  onUnhandledErrorHandler,
+  parseErrorMessage,
+  prettifyZodValidationErrorMiddleware,
+} from "./utils/error.ts";
+import { htmxRedirectResponse } from "./utils/response.ts";
+import { localStore, setupStore } from "./utils/store.ts";
 
-await yargs(hideBin(process.argv))
-  .scriptName(name)
-  .usage(`npx -y $0 [command] (options)`)
-  .version(version)
-  .command(createCommandModule)
-  .command(purgeCommandModule)
-  .command(testCommandModule)
-  .alias("h", "help")
-  .alias("v", "version")
-  .parse();
+if ("setEncoding" in process.stdout) {
+  process.stdout.setEncoding("utf8");
+}
+export { appRouter, openapiConfig } from "./routers/_app-router.ts";
+
+/**
+ * Callback to create a Hono App based on provided options.
+ * @param options Options for creating a request handler.
+ * @returns The Hono App which can be used wherever Hono is supported.
+ */
+export function createHonoRouter<User extends StoryBookerUser>(
+  options: RouterOptions<User>,
+): Hono<{ Variables: TimingVariables }> {
+  const logger = options.logger ?? createConsoleLoggerAdapter();
+  const middlewares = options.config?.middlewares ?? [];
+  const initPromises = Promise.allSettled([
+    options.auth?.init?.({ logger }).catch(logger.error),
+    options.database.init?.({ logger }).catch(logger.error),
+    options.storage.init?.({ logger }).catch(logger.error),
+  ]);
+
+  return new Hono<{ Variables: TimingVariables }>({ strict: false })
+    .use(
+      loggerMiddleware(logger.log),
+      prettifyZodValidationErrorMiddleware(logger),
+      ...middlewares,
+      setupStore<User>(options, initPromises),
+      htmxRedirectResponse(),
+    )
+    .route("/", appRouter)
+    .onError(onUnhandledErrorHandler<User>(options));
+}
+
+/**
+ * Callback to create a purge-handler based on provided options.
+ * Purging deletes all builds older than certain days based on Project's configuration.
+ *
+ * Note: The latest build on project's default branch is not deleted.
+ */
+export function createPurgeHandler(options: PurgeHandlerOptions): HandlePurge {
+  const logger = options.logger ?? createConsoleLoggerAdapter();
+
+  return async (...params: Parameters<HandlePurge>): Promise<void> => {
+    const dummyRequest = new Request("http://0.0.0.0/");
+    localStore.enterWith({
+      abortSignal: params[1].abortSignal,
+      database: options.database,
+      errorParser: options.errorParser,
+      headers: new SuperHeaders(),
+      locale: DEFAULT_LOCALE,
+      logger: params[1]?.logger ?? logger,
+      prefix: "/",
+      request: dummyRequest,
+      storage: options.storage,
+      url: dummyRequest.url,
+      user: null,
+    });
+
+    try {
+      await handlePurge(...params);
+    } catch (error) {
+      logger.error("PurgeError", parseErrorMessage(error, options.errorParser).errorMessage);
+    }
+  };
+}

package/src/mocks/mock-auth-service.ts

@@ -0,0 +1,51 @@
+// oxlint-disable require-await
+
+import {
+  StoryBookerPermissionsAllEnabled,
+  type AuthAdapter,
+  type StoryBookerUser,
+} from "../adapters/_internal/auth.ts";
+
+export const mockUser: StoryBookerUser = {
+  displayName: "Test User",
+  id: "test-user-id",
+  imageUrl: "https://example.com/avatar.png",
+  title: "Tester",
+  permissions: StoryBookerPermissionsAllEnabled,
+};
+
+export function mockAuthService(
+  permissions: Partial<StoryBookerUser["permissions"]> = {},
+): AuthAdapter {
+  const user = {
+    ...mockUser,
+    permissions: {
+      ...mockUser.permissions,
+      ...permissions,
+    },
+  };
+
+  return {
+    metadata: { name: "MockAuthService" },
+
+    init: async (_options): Promise<void> => {
+      // Mock init logic if needed
+    },
+    getUserDetails: async (_options) => {
+      // Always return the mock user
+      return user;
+    },
+    login: async (_options) => {
+      // Return a mock Response
+      return new Response("Logged in", { status: 200 });
+    },
+    logout: async (_user, _options) => {
+      // Return a mock Response
+      return new Response("Logged out", { status: 200 });
+    },
+    renderAccountDetails: async (_user, _options) => {
+      // Return mock HTML
+      return "<div>Mock Account Details</div>";
+    },
+  };
+}

package/src/mocks/mock-store.ts

@@ -0,0 +1,26 @@
+// oxlint-disable sort-keys
+
+import { SuperHeaders } from "@remix-run/headers";
+import { vi } from "vitest";
+import type { DatabaseAdapter, StorageAdapter } from "../adapters/_internal/index.ts";
+import type { Store } from "../utils/store.ts";
+import { mockAuthService, mockUser } from "./mock-auth-service";
+
+export const mockStore: Store = {
+  abortSignal: undefined,
+  auth: mockAuthService(),
+  headers: new SuperHeaders(),
+  logger: {
+    metadata: { name: "Mock Logger" },
+    debug: vi.fn(),
+    error: vi.fn(),
+    log: vi.fn(),
+  },
+  request: {} as Request,
+  database: {} as DatabaseAdapter,
+  locale: "en",
+  prefix: "/",
+  storage: {} as StorageAdapter,
+  url: "http://localhost/",
+  user: mockUser,
+};