bb-relay 0.0.1

package/src/load-virtual-editor/app/css.ts

@@ -0,0 +1,154 @@
+const css = `@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.44 0.07 188);
+  --secondary-foreground: oklch(0.99 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+body {
+  scrollbar-color: var(--muted-foreground);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, var(--primary), var(--secondary));
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to bottom, var(--muted-foreground), var(--secondary));
+}
+
+@font-face {
+  font-family: "codicon";
+  src: url("./codicon.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+`;
+
+export default css;

package/src/load-virtual-editor/app/store.ts

@@ -0,0 +1,25 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import css from "./css";
+import { StatusState } from "./StatusState";
+
+const appStore = create<StatusState>()(
+  persist(
+    (set) => ({
+      language:
+        navigator.language ||
+        (navigator as unknown as { userLanguage: string }).userLanguage,
+      mode: "dark",
+      css,
+      toggleMode: () =>
+        set((state) => ({
+          mode: state.mode === "dark" ? "light" : "dark",
+        })),
+    }),
+    {
+      name: "status-storage",
+    }
+  )
+);
+
+export default appStore;

package/src/load-virtual-editor/events/handle-dir-update.ts

@@ -0,0 +1,23 @@
+import EventReturn from "@/types/EventReturn";
+import postResponse from "../postResponse";
+import { watch } from "../node/watch";
+
+export default function handleDirUpdate({
+  sidebar,
+  main,
+}: {
+  sidebar: HTMLIFrameElement | null;
+  main: HTMLIFrameElement | null;
+}) {
+  watch((data) => {
+    if (data.dir !== null) {
+      const curr: EventReturn<"dir-updated"> = {
+        type: "dir-updated",
+        response: data.dir,
+        responseId: crypto.randomUUID(),
+      };
+      postResponse(sidebar, curr);
+      postResponse(main, curr);
+    }
+  });
+}

package/src/load-virtual-editor/events/handle-file-update.ts

@@ -0,0 +1,23 @@
+import EventReturn from "@/types/EventReturn";
+import postResponse from "../postResponse";
+import { watch } from "../node/watch";
+
+export default function handleFileUpdate({
+  sidebar,
+  main,
+}: {
+  sidebar: HTMLIFrameElement | null;
+  main: HTMLIFrameElement | null;
+}) {
+  watch((data) => {
+    if (data.file !== null) {
+      const curr: EventReturn<"file-updated"> = {
+        type: "file-updated",
+        response: data.file,
+        responseId: crypto.randomUUID(),
+      };
+      postResponse(sidebar, curr);
+      postResponse(main, curr);
+    }
+  });
+}

package/src/load-virtual-editor/events/handle-load.ts

@@ -0,0 +1,39 @@
+import EventReturn from "@/types/EventReturn";
+import appStore from "../app/store";
+import postResponse from "../postResponse";
+
+export default function handleLoad({
+  sidebar,
+  main,
+}: {
+  sidebar: HTMLIFrameElement | null;
+  main: HTMLIFrameElement | null;
+}) {
+  const value = appStore.getState();
+  const { mode, css, language } = value;
+  const curr: EventReturn<"load"> = {
+    type: "load",
+    response: {
+      mode,
+      css,
+      language,
+    },
+    responseId: crypto.randomUUID(),
+  };
+  postResponse(sidebar, curr);
+  postResponse(main, curr);
+  appStore.subscribe((state) => {
+    const { mode, css, language } = state;
+    const curr: EventReturn<"load"> = {
+      type: "load",
+      response: {
+        mode,
+        css,
+        language,
+      },
+      responseId: crypto.randomUUID(),
+    };
+    postResponse(sidebar, curr);
+    postResponse(main, curr);
+  });
+}

package/src/load-virtual-editor/events/handle-selected.ts

@@ -0,0 +1,30 @@
+import EventReturn from "@/types/EventReturn";
+import postResponse from "../postResponse";
+import selectedStore from "../selected/store";
+import watch from "../selected/watch";
+
+export default function handleSelected({
+  sidebar,
+  main,
+}: {
+  sidebar: HTMLIFrameElement | null;
+  main: HTMLIFrameElement | null;
+}) {
+  const data = selectedStore.getState().selectedPath;
+  const curr: EventReturn<"selected"> = {
+    type: "selected",
+    response: data,
+    responseId: crypto.randomUUID(),
+  };
+  postResponse(sidebar, curr);
+  postResponse(main, curr);
+  watch((data) => {
+    const curr: EventReturn<"selected"> = {
+      type: "selected",
+      response: data,
+      responseId: crypto.randomUUID(),
+    };
+    postResponse(sidebar, curr);
+    postResponse(main, curr);
+  });
+}

package/src/load-virtual-editor/index.ts

@@ -0,0 +1,52 @@
+import BBEvent from "@/types/BBEvent";
+import BBRequest from "@/types/BBRequest";
+import handleLoad from "./events/handle-load";
+import requestFS from "./request/requestFS";
+import handleFileUpdate from "./events/handle-file-update";
+import handleDirUpdate from "./events/handle-dir-update";
+import requestSelected from "./request/requestSelected";
+import handleSelected from "./events/handle-selected";
+
+type Request<K extends keyof BBRequest> = {
+  id: string;
+  type: K;
+  arg: BBRequest[K]["args"];
+  source: "request";
+};
+
+type Event<K extends keyof BBEvent> = {
+  type: K;
+  source: "event";
+};
+export default function loadVirtualEditor({
+  sidebar,
+  main,
+}: {
+  sidebar: HTMLIFrameElement | null;
+  main: HTMLIFrameElement | null;
+}) {
+  window.addEventListener("message", (event) => {
+    const data = event.data as Request<keyof BBRequest> | Event<keyof BBEvent>;
+
+    if (!data.type) return;
+
+    if (data.source === "event") {
+      if (data.type === "load") {
+        handleLoad({ sidebar, main });
+      }
+      if (data.type === "dir-updated") {
+        handleDirUpdate({ sidebar, main });
+      }
+      if (data.type === "file-updated") {
+        handleFileUpdate({ sidebar, main });
+      }
+      if (data.type === "selected") {
+        handleSelected({ sidebar, main });
+      }
+    }
+    if (data.source === "request") {
+      requestFS({ sidebar, main, request: data });
+      requestSelected({ sidebar, main, request: data });
+    }
+  });
+}

package/src/load-virtual-editor/lib/indexedStorage.ts

@@ -0,0 +1,28 @@
+import { openDB } from "idb";
+import type { StateStorage } from "zustand/middleware";
+
+const DB_NAME = "zustand-db";
+const STORE_NAME = "store";
+
+async function getDB() {
+  return openDB(DB_NAME, 1, {
+    upgrade(db) {
+      db.createObjectStore(STORE_NAME);
+    },
+  });
+}
+
+export const indexedStorage: StateStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    const db = await getDB();
+    return (await db.get(STORE_NAME, name)) ?? null;
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    const db = await getDB();
+    await db.put(STORE_NAME, value, name);
+  },
+  removeItem: async (name: string): Promise<void> => {
+    const db = await getDB();
+    await db.delete(STORE_NAME, name);
+  },
+};

package/src/load-virtual-editor/mocks/generate-files.ts

@@ -0,0 +1,25 @@
+import { faker } from "@faker-js/faker";
+import nodeStore from "../node/store";
+const generateFiles = ({
+  length = 100,
+  content,
+}: { length?: number; content?: boolean | string } = {}) => {
+  nodeStore.getState().reset();
+  const files: {
+    path: string;
+    content?: string;
+  }[] = [];
+  for (let i = 0; i < length; i++) {
+    files.push({
+      path: faker.system.filePath(),
+      content: content
+        ? typeof content === "string"
+          ? content
+          : faker.lorem.paragraph()
+        : undefined,
+    });
+  }
+  nodeStore.getState().addFiles(files);
+};
+
+export default generateFiles;

package/src/load-virtual-editor/node/NodeState.ts

@@ -0,0 +1,23 @@
+export type NodeState = {
+  directories: string[];
+  files: {
+    name: string;
+    directory: string;
+    content: string;
+    createdAt: string;
+    modifiedAt: string;
+  }[];
+  addDir: (path: string) => void;
+  addFile: (arg: { path: string; content?: string }) => void;
+  removeDir: (path: string) => void;
+  removeFile: (path: string) => void;
+  copyDir: (source: string, destination: string) => void;
+  copyFile: (source: string, destination: string) => void;
+  writeFile: (arg: { path: string; content: string }) => void;
+  record: {
+    file: string | null;
+    dir: string | null;
+  };
+  addFiles: (files: { path: string; content?: string }[]) => void;
+  reset: () => void;
+};

package/src/load-virtual-editor/node/copyDir.ts

@@ -0,0 +1,14 @@
+import { nodeStore } from "./store";
+
+export function copyDir(
+  source: string,
+  destination: string,
+  callback: (err: Error | null) => void
+) {
+  try {
+    nodeStore.getState().copyDir(source, destination);
+    callback(null);
+  } catch (err) {
+    callback(err as Error);
+  }
+}

package/src/load-virtual-editor/node/copyFile.ts

@@ -0,0 +1,14 @@
+import { nodeStore } from "./store";
+
+export function copyFile(
+  source: string,
+  destination: string,
+  callback: (err: Error | null) => void
+) {
+  try {
+    nodeStore.getState().copyFile(source, destination);
+    callback(null);
+  } catch (err) {
+    callback(err as Error);
+  }
+}

package/src/load-virtual-editor/node/createDir.ts

@@ -0,0 +1,10 @@
+import { nodeStore } from "./store";
+
+export function createDir(path: string, callback: (err: Error | null) => void) {
+  try {
+    nodeStore.getState().addDir(path);
+    callback(null);
+  } catch (err) {
+    callback(err as Error);
+  }
+}

package/src/load-virtual-editor/node/createFile.ts

@@ -0,0 +1,13 @@
+import { nodeStore } from "./store";
+
+export function createFile(
+  arg: { path: string; content?: string },
+  callback: (err: Error | null) => void
+) {
+  try {
+    nodeStore.getState().addFile(arg);
+    callback(null);
+  } catch (err) {
+    callback(err as Error);
+  }
+}

package/src/load-virtual-editor/node/deleteDir.ts

@@ -0,0 +1,10 @@
+import { nodeStore } from "./store";
+
+export function deleteDir(path: string, callback: (err: Error | null) => void) {
+  try {
+    nodeStore.getState().removeDir(path);
+    callback(null);
+  } catch (err) {
+    callback(err as Error);
+  }
+}

package/src/load-virtual-editor/node/deleteFile.ts

@@ -0,0 +1,13 @@
+import { nodeStore } from "./store";
+
+export function deleteFile(
+  path: string,
+  callback: (err: Error | null) => void
+) {
+  try {
+    nodeStore.getState().removeFile(path);
+    callback(null);
+  } catch (err) {
+    callback(err as Error);
+  }
+}

package/src/load-virtual-editor/node/formatPath.ts

@@ -0,0 +1,13 @@
+const removeSurroundingSlash = (path: string) => {
+  const trimmedPath = path.trim();
+  if (trimmedPath.endsWith("/")) {
+    return removeSurroundingSlash(trimmedPath.slice(0, -1));
+  } else if (trimmedPath.startsWith("/")) {
+    return removeSurroundingSlash(trimmedPath.slice(1));
+  }
+  return path;
+};
+
+export default function formatPath(path: string) {
+  return removeSurroundingSlash(path);
+}

package/src/load-virtual-editor/node/formatText.ts

@@ -0,0 +1,19 @@
+export function binaryToString(binary: Uint8Array): string {
+  let binaryString = "";
+  const chunkSize = 0x8000;
+  for (let i = 0; i < binary.length; i += chunkSize) {
+    const chunk = binary.subarray(i, i + chunkSize);
+    binaryString += String.fromCharCode.apply(null, Array.from(chunk));
+  }
+  return binaryString;
+}
+
+export function stringToBinary(base64: string): Uint8Array<ArrayBuffer> {
+  const binaryString = base64;
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes;
+}

package/src/load-virtual-editor/node/generateDirs.ts

@@ -0,0 +1,13 @@
+import formatPath from "./formatPath";
+
+export function generateDirs(path: string, allDirs: string[]) {
+  if (allDirs.includes(path)) return allDirs;
+  const dirs = path.split("/").filter((item) => item);
+  let currentPath = "";
+  dirs.forEach((dir) => {
+    currentPath += `/${dir}`;
+    if (!allDirs.includes(formatPath(currentPath)))
+      allDirs.push(formatPath(currentPath));
+  });
+  return allDirs;
+}

package/src/load-virtual-editor/node/getDescendantLevel.ts

@@ -0,0 +1,9 @@
+export function getDescendantLevel(path1: string, path2: string) {
+  const parent = path1.length < path2.length ? path1 : path2;
+  const child = path1.length > path2.length ? path1 : path2;
+  const descendant = child
+    .replace(parent, "")
+    .split("/")
+    .filter((item) => item);
+  return descendant.length;
+}

package/src/load-virtual-editor/node/getDirInfo.ts

@@ -0,0 +1,33 @@
+import DirInfo from "@/types/dir/DirInfo";
+import nodeStore from "./store";
+import formatPath from "./formatPath";
+
+export function getDirInfo(
+  path: string,
+  callback: (err: Error | null, data: DirInfo | null) => void
+) {
+  try {
+    const dirs = nodeStore.getState().directories;
+    const dir = dirs.find((dir) => formatPath(dir) === formatPath(path));
+    if (!dir) throw new Error(`Dir not found: ${path}`);
+    const files = nodeStore.getState().files;
+    const matchedFiles = files.filter(
+      (file) => formatPath(file.directory) === formatPath(path)
+    );
+    const fsCount = matchedFiles.length;
+    const size = matchedFiles.reduce((acc, file) => {
+      return acc + file.content.length;
+    }, 0);
+
+    callback(null, {
+      name: dir.split("/").slice(-1)[0],
+      fullPath: dir,
+      createdAt: new Date().toISOString(),
+      modifiedAt: new Date().toISOString(),
+      fsCount,
+      size,
+    });
+  } catch (err) {
+    callback(err as Error, null);
+  }
+}

package/src/load-virtual-editor/node/getFileInfo.ts

@@ -0,0 +1,31 @@
+import formatPath from "./formatPath";
+import FileInfo from "@/types/files/FileInfo";
+import nodeStore from "./store";
+
+export function getFileInfo(
+  path: string,
+  callback: (err: Error | null, data: FileInfo | null) => void
+) {
+  try {
+    const files = nodeStore.getState().files;
+    const matchedFile = files.find(
+      (file) =>
+        formatPath(`${file.directory}/${file.name}`) === formatPath(path)
+    );
+
+    if (!matchedFile) throw Error("File not found");
+    const fileInfo: FileInfo = {
+      name: matchedFile.name,
+      fullPath: formatPath(`${matchedFile.directory}/${matchedFile.name}`),
+      createdAt: matchedFile.createdAt,
+      modifiedAt: matchedFile.modifiedAt,
+      ext: matchedFile.name,
+      size: matchedFile.content.length,
+      wordCount: matchedFile.content.split(" ").length,
+      summary: matchedFile.content.slice(0, 100),
+    };
+    callback(null, fileInfo);
+  } catch (err) {
+    callback(err as Error, null);
+  }
+}

package/src/load-virtual-editor/node/getFiles.ts

@@ -0,0 +1,17 @@
+import formatPath from "./formatPath";
+import { nodeStore } from "./store";
+
+export function getFiles(
+  path: string,
+  callback: (err: Error | null, data: string[] | null) => void
+) {
+  try {
+    const files = nodeStore.getState().files;
+    const fileList = files
+      .filter((file) => formatPath(file.directory).startsWith(formatPath(path)))
+      .map((file) => formatPath(`${file.directory}/${file.name}`));
+    callback(null, fileList);
+  } catch (err) {
+    callback(err as Error, null);
+  }
+}

package/src/load-virtual-editor/node/getParent.ts

@@ -0,0 +1,11 @@
+import formatPath from "./formatPath";
+
+export function getParent(path: string) {
+  const fullPath = path
+    .trim()
+    .split("/")
+    .filter((item) => item);
+  const dir = fullPath.slice(0, -1);
+  const parentPath = formatPath(dir.join("/"));
+  return parentPath || "";
+}