@autobe/ui 0.19.1 → 0.20.0

package/src/events/AutoBeCompleteEventMovie.tsx

@@ -0,0 +1,402 @@
+import {
+  AutoBeAnalyzeCompleteEvent,
+  AutoBeInterfaceCompleteEvent,
+  AutoBePrismaCompleteEvent,
+  AutoBeRealizeCompleteEvent,
+  AutoBeTestCompleteEvent,
+  IAutoBeGetFilesOptions,
+} from "@autobe/interface";
+import StackBlitzSDK from "@stackblitz/sdk";
+import JsZip from "jszip";
+import { useState } from "react";
+import { VariadicSingleton } from "tstl";
+
+import { EventCard, EventContent, EventHeader } from "./common";
+
+export interface IAutoBeCompleteEventMovieProps {
+  getFiles: (
+    options?: Partial<IAutoBeGetFilesOptions>,
+  ) => Promise<Record<string, string>>;
+  event:
+    | AutoBeAnalyzeCompleteEvent
+    | AutoBePrismaCompleteEvent
+    | AutoBeInterfaceCompleteEvent
+    | AutoBeTestCompleteEvent
+    | AutoBeRealizeCompleteEvent;
+}
+
+export const AutoBeCompleteEventMovie = (
+  props: IAutoBeCompleteEventMovieProps,
+) => {
+  const stage = getStage(props.event);
+  const [size, setSize] = useState<number | null>(null);
+  const [downloading, setDownloading] = useState(false);
+
+  const getFiles = async (dbms: "postgres" | "sqlite") => {
+    setDownloading(true);
+    try {
+      const result = await props.getFiles({
+        dbms,
+        stage,
+      });
+      return result;
+    } catch (error) {
+      throw error;
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  const openStackBlitz = async () => {
+    const files: Record<string, string> = Object.fromEntries(
+      Object.entries(await getFiles("sqlite")).filter(
+        ([key, value]) =>
+          key.startsWith("autobe/") === false &&
+          new TextEncoder().encode(value).length < 512 * 1024, // 512 KB
+      ),
+    );
+    const size: number = Object.values(files)
+      .map((str) => new TextEncoder().encode(str).length)
+      .reduce((a, b) => a + b, 0);
+    setSize(size);
+    StackBlitzSDK.openProject(
+      {
+        title: `AutoBE Generated Backend Server (${props.event.type})`,
+        template: "node",
+        files,
+      },
+      {
+        newWindow: true,
+      },
+    );
+  };
+
+  const download = async (dbms: "postgres" | "sqlite") => {
+    const zip: JsZip = new JsZip();
+    const directory = new VariadicSingleton((location: string): JsZip => {
+      const separated: string[] = location.split("/");
+      if (separated.length === 1) return zip.folder(separated[0])!;
+      const parent: JsZip = directory.get(separated.slice(0, -1).join("/"));
+      return parent.folder(separated.at(-1)!)!;
+    });
+    for (const [file, content] of Object.entries(await getFiles(dbms))) {
+      const separated: string[] = file.split("/");
+      if (separated.length === 1) zip.file(file, content);
+      else {
+        const folder: JsZip = directory.get(separated.slice(0, -1).join("/"));
+        folder.file(separated.at(-1)!, content);
+      }
+    }
+    const data: Blob = await zip.generateAsync({ type: "blob" });
+
+    const url: string = URL.createObjectURL(data);
+    const a: HTMLAnchorElement = document.createElement("a");
+    a.href = url;
+    a.download = `AutoBE.${props.event.type}.zip`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const title: string | null = getTitle(props.event);
+  if (title === null) return null;
+
+  return (
+    <EventCard variant="success">
+      <EventHeader
+        title={`${title} Completed`}
+        timestamp={props.event.created_at}
+        iconType="success"
+      />
+      <EventContent>
+        <div style={{ marginBottom: "1rem" }}>
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              padding: "6px 12px",
+              border: "1px solid #4caf50",
+              borderRadius: "16px",
+              backgroundColor: "transparent",
+              color: "#4caf50",
+              fontSize: "14px",
+              fontWeight: 500,
+              gap: "6px",
+              marginBottom: "1rem",
+            }}
+          >
+            ✅ {title} Completed
+          </div>
+          <br />
+          <br />
+          {title} has been completed.
+          {getMessage(openStackBlitz, props.event)}
+          <br />
+          <br />
+          Please check the result in the file explorer.
+          {size !== null && size >= LIMIT && (
+            <div
+              style={{
+                backgroundColor: "#fffbeb",
+                border: "1px solid #fed7aa",
+                borderRadius: "0.5rem",
+                padding: "1rem",
+                marginTop: "1rem",
+                color: "#92400e",
+              }}
+            >
+              <strong>⚠️ Warning:</strong> This project is too large (
+              {(size / 1024 / 1024).toFixed(1)} MB) for StackBlitz.
+              <br />
+              <br />
+              Try downloading it directly instead!
+            </div>
+          )}
+        </div>
+
+        {/* Action Buttons */}
+        <div
+          style={{
+            display: "flex",
+            gap: "0.75rem",
+            justifyContent: "flex-end",
+            flexWrap: "wrap",
+          }}
+        >
+          {downloading ? (
+            <button
+              disabled
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                padding: "0.75rem 1rem",
+                backgroundColor: "#f3f4f6",
+                border: "1px solid #d1d5db",
+                borderRadius: "0.5rem",
+                cursor: "not-allowed",
+                fontSize: "0.875rem",
+                color: "#6b7280",
+              }}
+            >
+              ⏳ Downloading Source Codes...
+            </button>
+          ) : props.event.type === "analyzeComplete" ? (
+            <>
+              <ActionButton
+                icon="📥"
+                text="Zip (SQLite)"
+                onClick={() => download("sqlite")}
+                title={
+                  stage !== "analyze"
+                    ? "Download SQLite-based backend application (ideal for local development and testing)"
+                    : "Download requirement analysis report"
+                }
+              />
+              <ActionButton
+                icon="🚀"
+                text="StackBlitz"
+                onClick={() => openStackBlitz()}
+                variant={size !== null && size >= LIMIT ? "warning" : "primary"}
+                title="Open project in StackBlitz for instant online development and testing"
+              />
+            </>
+          ) : (
+            <>
+              <ActionButton
+                icon="☁️"
+                text="Zip (Postgres)"
+                onClick={() => download("postgres")}
+                title="Download PostgreSQL-based backend application (optimized for production deployment)"
+              />
+              <ActionButton
+                icon="📥"
+                text="Zip (SQLite)"
+                onClick={() => download("sqlite")}
+                title="Download SQLite-based backend application (ideal for local development and testing)"
+              />
+              <ActionButton
+                icon="🚀"
+                text="StackBlitz"
+                onClick={() => openStackBlitz()}
+                variant={size !== null && size >= LIMIT ? "warning" : "primary"}
+                title="Open project in StackBlitz for instant online development and testing"
+              />
+            </>
+          )}
+        </div>
+      </EventContent>
+    </EventCard>
+  );
+};
+
+interface IActionButtonProps {
+  icon: string;
+  text: string;
+  onClick: () => void;
+  title?: string;
+  variant?: "primary" | "warning";
+}
+
+const ActionButton = (props: IActionButtonProps) => {
+  const { icon, text, onClick, title, variant = "primary" } = props;
+
+  const getButtonStyles = () => {
+    const baseStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem",
+      padding: "0.75rem 1rem",
+      borderRadius: "0.5rem",
+      cursor: "pointer",
+      fontSize: "0.875rem",
+      fontWeight: 500,
+      border: "1px solid",
+      transition: "all 0.2s ease",
+    };
+
+    if (variant === "warning") {
+      return {
+        ...baseStyles,
+        backgroundColor: "#fffbeb",
+        borderColor: "#f59e0b",
+        color: "#92400e",
+      };
+    }
+
+    return {
+      ...baseStyles,
+      backgroundColor: "#3b82f6",
+      borderColor: "#3b82f6",
+      color: "#ffffff",
+    };
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      style={getButtonStyles()}
+      onMouseEnter={(e) => {
+        if (variant === "warning") {
+          e.currentTarget.style.backgroundColor = "#fef3c7";
+        } else {
+          e.currentTarget.style.backgroundColor = "#2563eb";
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (variant === "warning") {
+          e.currentTarget.style.backgroundColor = "#fffbeb";
+        } else {
+          e.currentTarget.style.backgroundColor = "#3b82f6";
+        }
+      }}
+    >
+      <span>{icon}</span>
+      <span>{text}</span>
+    </button>
+  );
+};
+
+// Helper functions
+
+function getTitle(
+  event: IAutoBeCompleteEventMovieProps["event"],
+): string | null {
+  switch (event.type) {
+    case "analyzeComplete":
+      return "Analyze";
+    case "prismaComplete":
+      if (event.compiled.type !== "success") return "Prisma (Error)";
+      return "Prisma";
+    case "interfaceComplete":
+      return "Interface";
+    case "testComplete":
+      return "Test";
+    case "realizeComplete":
+      return "Realize";
+    default:
+      event satisfies never;
+      throw new Error("Unknown event type");
+  }
+}
+
+const getMessage = (
+  openStackBlitz: () => void,
+  event: IAutoBeCompleteEventMovieProps["event"],
+) => {
+  if (event.type === "prismaComplete" && event.compiled.type === "failure")
+    return (
+      <>
+        <br />
+        <br />
+        Succeeded to compose <code>AutoBePrisma.IApplication</code> typed AST
+        (Abstract Syntax Tree) data, but failed to generate Prisma schema files
+        from it. This is a bug of <code>@autobe</code>. Please{" "}
+        <a
+          href="https://github.com/wrtnlabs/autobe/issues"
+          target="_blank"
+          style={{ color: "#3b82f6", textDecoration: "underline" }}
+        >
+          write a bug report to our repository
+        </a>{" "}
+        with the{" "}
+        <a
+          href="#"
+          onClick={() => openStackBlitz()}
+          style={{ color: "#3b82f6", textDecoration: "underline" }}
+        >
+          <code>autobe/histories.json</code>
+        </a>{" "}
+        file.
+      </>
+    );
+  else if (
+    (event.type === "testComplete" || event.type === "realizeComplete") &&
+    event.compiled.type !== "success"
+  )
+    return (
+      <>
+        <br />
+        <br />
+        Succeeded to compose{" "}
+        {event.type === "testComplete" ? "test functions" : "realize functions"}
+        , but failed to pass the TypeScript compilation. This is a bug of{" "}
+        <code>@autobe</code>. Please{" "}
+        <a
+          href="https://github.com/wrtnlabs/autobe/issues"
+          target="_blank"
+          style={{ color: "#3b82f6", textDecoration: "underline" }}
+        >
+          write a bug report to our repository
+        </a>{" "}
+        with the{" "}
+        <a
+          href="#"
+          onClick={() => openStackBlitz()}
+          style={{ color: "#3b82f6", textDecoration: "underline" }}
+        >
+          <code>autobe/histories.json</code>
+        </a>{" "}
+        file.
+      </>
+    );
+  return null;
+};
+
+const getStage = (event: IAutoBeCompleteEventMovieProps["event"]) => {
+  if (event.type === "analyzeComplete") return "analyze";
+  else if (event.type === "prismaComplete") return "prisma";
+  else if (event.type === "interfaceComplete") return "interface";
+  else if (event.type === "testComplete") return "test";
+  else if (event.type === "realizeComplete") return "realize";
+  else {
+    event satisfies never;
+    return undefined;
+  }
+};
+
+const LIMIT = 3 * 1024 * 1024;
+
+export default AutoBeCompleteEventMovie;

package/src/events/AutoBeProgressEventMovie.tsx

@@ -1,6 +1,6 @@
 import { AutoBeEvent, AutoBeProgressEventBase } from "@autobe/interface";
 
-import { formatTime } from "../utils/time";
+import { EventCard, EventContent, EventHeader, ProgressBar } from "./common";
 
 export function AutoBeProgressEventMovie(
   props: AutoBeProgressEventMovie.IProps,
@@ -8,130 +8,17 @@ export function AutoBeProgressEventMovie(
   const state: IState = getState(props.event);
 
   return (
-    <div
-      style={{
-        backgroundColor: "#f8fafc",
-        border: "1px solid #e2e8f0",
-        borderRadius: "0.75rem",
-        padding: "1.5rem",
-        marginBottom: "1rem",
-        boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
-      }}
-    >
-      {/* Header */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBottom: "1rem",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "0.75rem",
-          }}
-        >
-          {/* Status Icon */}
-          <div
-            style={{
-              width: "2rem",
-              height: "2rem",
-              backgroundColor: "#4caf50",
-              borderRadius: "50%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              style={{ color: "#ffffff" }}
-            >
-              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-            </svg>
-          </div>
-
-          {/* Title */}
-          <div>
-            <h3
-              style={{
-                fontSize: "1.125rem",
-                fontWeight: "600",
-                color: "#1e293b",
-                margin: 0,
-                marginBottom: "0.25rem",
-              }}
-            >
-              {state.title}
-            </h3>
-          </div>
-        </div>
-
-        {/* Timestamp */}
-        <div
-          style={{
-            fontSize: "0.75rem",
-            color: "#64748b",
-            textAlign: "right",
-          }}
-        >
-          {formatTime(props.event.created_at)}
-        </div>
-      </div>
-
-      {/* Content */}
-      <div
-        style={{
-          fontSize: "0.875rem",
-          lineHeight: "1.5",
-          color: "#475569",
-          backgroundColor: "#ffffff",
-          padding: "1rem",
-          borderRadius: "0.5rem",
-          border: "1px solid #e2e8f0",
-        }}
-      >
-        <div style={{ marginBottom: "1rem" }}>{state.description}</div>
-
-        {/* Progress Bar */}
-        <div
-          style={{
-            width: "100%",
-            height: "10px",
-            backgroundColor: "#e2e8f0",
-            borderRadius: "10px",
-            overflow: "hidden",
-            marginBottom: "0.5rem",
-          }}
-        >
-          <div
-            style={{
-              width: `${Math.round((state.completed / state.total) * 100)}%`,
-              height: "100%",
-              backgroundColor: "#4caf50",
-              borderRadius: "10px",
-              transition: "width 0.3s ease",
-            }}
-          />
-        </div>
-
-        <div
-          style={{
-            fontSize: "0.75rem",
-            color: "#64748b",
-            textAlign: "center",
-          }}
-        >
-          {state.completed} / {state.total} completed
-        </div>
-      </div>
-    </div>
+    <EventCard>
+      <EventHeader
+        title={state.title}
+        timestamp={props.event.created_at}
+        iconType="progress"
+      />
+      <EventContent>
+        <div style={{ marginBottom: 0 }}>{state.description}</div>
+        <ProgressBar current={state.completed} total={state.total} />
+      </EventContent>
+    </EventCard>
   );
 }
 type ExtractType<T, U> = T extends U ? T : never;

package/src/events/AutoBeScenarioEventMovie.tsx

@@ -6,7 +6,7 @@ import {
 } from "@autobe/interface";
 import { JSX } from "react";
 
-import { formatTime } from "../utils/time";
+import { EventCard, EventContent, EventHeader } from "./common";
 
 export interface IAutoBeScenarioEventMovieProps {
   event:
@@ -22,98 +22,10 @@ export const AutoBeScenarioEventMovie = (
   const { title, description } = getState(event);
 
   return (
-    <div
-      style={{
-        backgroundColor: "#f8fafc",
-        border: "1px solid #e2e8f0",
-        borderRadius: "0.75rem",
-        padding: "1.5rem",
-        marginBottom: "1rem",
-        boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
-      }}
-    >
-      {/* Header */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBottom: "1rem",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "0.75rem",
-          }}
-        >
-          {/* Status Icon */}
-          <div
-            style={{
-              width: "2rem",
-              height: "2rem",
-              backgroundColor: "#3b82f6",
-              borderRadius: "50%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              style={{ color: "#ffffff" }}
-            >
-              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-            </svg>
-          </div>
-
-          {/* Title and Step */}
-          <div>
-            <h3
-              style={{
-                fontSize: "1.125rem",
-                fontWeight: "600",
-                color: "#1e293b",
-                margin: 0,
-                marginBottom: "0.25rem",
-              }}
-            >
-              {title}
-            </h3>
-          </div>
-        </div>
-
-        {/* Timestamp */}
-        <div
-          style={{
-            fontSize: "0.75rem",
-            color: "#64748b",
-            textAlign: "right",
-          }}
-        >
-          {formatTime(event.created_at)}
-        </div>
-      </div>
-
-      {/* Description */}
-      <div
-        style={{
-          fontSize: "0.875rem",
-          lineHeight: "1.5",
-          color: "#475569",
-          backgroundColor: "#ffffff",
-          padding: "1rem",
-          borderRadius: "0.5rem",
-          border: "1px solid #e2e8f0",
-        }}
-      >
-        {description}
-      </div>
-    </div>
+    <EventCard>
+      <EventHeader title={title} timestamp={event.created_at} iconType="info" />
+      <EventContent>{description}</EventContent>
+    </EventCard>
   );
 };
 export default AutoBeScenarioEventMovie;