@animaapp/anima-sdk-react 0.2.8 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animaapp/anima-sdk-react",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "type": "module",
   "description": "Anima's JavaScript utilities library",
   "author": "Anima App, Inc.",
@@ -20,8 +20,9 @@
   },
   "scripts": {
     "build": "vite build",
-    "tests": "vitest run --dir ./tests",
-    "prepack": "yarn build"
+    "test": "test-storybook",
+    "prepack": "yarn build",
+    "dev": "storybook dev -p 6006"
   },
   "dependencies": {
     "eventsource": "^3.0.5",
@@ -35,9 +36,21 @@
   },
   "devDependencies": {
     "@animaapp/anima-sdk": "workspace:*",
+    "@chromatic-com/storybook": "^3",
+    "@storybook/addon-essentials": "^8.6.6",
+    "@storybook/addon-interactions": "^8.6.6",
+    "@storybook/addon-onboarding": "^8.6.6",
+    "@storybook/blocks": "^8.6.6",
+    "@storybook/react": "^8.6.6",
+    "@storybook/react-vite": "^8.6.6",
+    "@storybook/test": "^8.6.6",
+    "@storybook/test-runner": "^0.22.0",
+    "@types/prop-types": "^15",
+    "@types/react": "^19.0.10",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.6.6",
     "vite": "^6.0.11",
     "vite-plugin-dts": "^4.5.0",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.5"
+    "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}

package/src/stories/useAnimaCodegen.stories.tsx

@@ -0,0 +1,222 @@
+import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+import { AnimaSDKResult, CodegenError } from "@animaapp/anima-sdk";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useAnimaCodegen, UseAnimaParams } from "..";
+
+type Props = {
+  payload: UseAnimaParams;
+};
+
+const DummyComponent = ({ payload }: Props) => {
+  const [result, setResult] = useState<AnimaSDKResult | null>(null);
+  const [error, setError] = useState<CodegenError | null>(null);
+
+  const animaCodegen = useAnimaCodegen({
+    url: "http://localhost:3000",
+  });
+
+  const handleClick = async () => {
+    const { result, error } = await animaCodegen.getCode(payload);
+
+    setResult(result);
+    setError(error);
+  };
+
+  return (
+    <div>
+      <button data-testid="run-button" onClick={handleClick}>
+        Run request
+      </button>
+
+      {result && (
+        <div>
+          <h3>Success result</h3>
+
+          <pre data-testid="request-result" data-status="success">
+            {JSON.stringify(result, null, 2)}
+          </pre>
+        </div>
+      )}
+
+      {error && (
+        <div>
+          <h3>Error result</h3>
+
+          <pre data-testid="request-result" data-status="error">
+            {JSON.stringify(
+              {
+                name: error.name,
+                message: error.message,
+                status: error.status,
+                detail: error.detail,
+              },
+              null,
+              2
+            )}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const meta = {
+  title: "Hooks/useAnimaCodegen",
+  component: DummyComponent,
+} satisfies Meta<typeof DummyComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const run = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  const result: { result: AnimaSDKResult | null; error: CodegenError | null } =
+    { result: null, error: null };
+
+  const canvas = within(canvasElement);
+
+  const runButton = canvas.getByTestId("run-button");
+  await userEvent.click(runButton);
+
+  const requestResult = await waitFor(
+    () => canvas.findByTestId("request-result"),
+    { timeout: 10_000 }
+  );
+
+  if (!requestResult.textContent) {
+    return result;
+  }
+
+  const resultStatus = requestResult.dataset.status;
+
+  if (resultStatus === "success") {
+    result.result = JSON.parse(requestResult.textContent);
+  } else {
+    result.error = JSON.parse(requestResult.textContent);
+  }
+
+  return result;
+};
+
+export const Success: Story = {
+  play: async (context) => {
+    const { result } = await run(context);
+
+    expect(result).toMatchObject({
+      sessionId: expect.anything(),
+      figmaFileName: "Anima SDK - Test File",
+      figmaSelectedFrameName: "MyFrame",
+      files: expect.anything(),
+      tokenUsage: expect.anything(),
+    });
+  },
+
+  args: {
+    payload: {
+      fileKey: "5d0u9PmD4GtB5fdX57pTtK",
+      nodesId: ["1:2"],
+      settings: {
+        framework: "react",
+        styling: "plain_css",
+      },
+    },
+  },
+};
+
+export const InvalidBody: Story = {
+  play: async (context) => {
+    const { error } = await run(context);
+
+    expect(error).toMatchObject({
+      name: "HTTP error from Anima API",
+      message: "Invalid body payload",
+      status: 400,
+      detail: [
+        {
+          code: "invalid_type",
+          expected: "string",
+          received: "null",
+          path: ["fileKey"],
+          message: "Expected string, received null",
+        },
+      ],
+    });
+  },
+
+  args: {
+    payload: {
+      // @ts-expect-error: Testing invalid body payload
+      fileKey: null,
+      nodesId: ["1:2"],
+      settings: {
+        framework: "react",
+        styling: "plain_css",
+      },
+    },
+  },
+};
+
+export const NotFoundFile: Story = {
+  play: async (context) => {
+    const { error } = await run(context);
+
+    expect(error).toMatchObject({
+      name: "Task Crashed",
+      message: "Figma file not found",
+    });
+  },
+
+  args: {
+    payload: {
+      fileKey: "invalid-file-key",
+      nodesId: ["1:2"],
+      settings: {
+        framework: "react",
+        styling: "plain_css",
+      },
+    },
+  },
+};
+
+export const NotSupportedNode: Story = {
+  play: async (context) => {
+    const { error } = await run(context);
+
+    expect(error).toMatchObject({
+      name: "Task Crashed",
+      message: "Selected node type is not supported",
+    });
+  },
+
+  args: {
+    payload: {
+      fileKey: "5d0u9PmD4GtB5fdX57pTtK",
+      nodesId: ["14:5"],
+      settings: {
+        framework: "react",
+        styling: "plain_css",
+      },
+    },
+  },
+};
+
+export const InvisibleGroupNode: Story = {
+  play: async (context) => {
+    const { error } = await run(context);
+
+    expect(error).toMatchObject({
+      name: "Task Crashed",
+      message: "Invisible group nodes are unsupported",
+    });
+  },
+  args: {
+    payload: {
+      fileKey: "5d0u9PmD4GtB5fdX57pTtK",
+      nodesId: ["134:14"],
+      settings: {
+        framework: "react",
+        styling: "plain_css",
+      },
+    },
+  },
+};

package/src/useAnimaCodegen.ts

@@ -4,6 +4,7 @@ import type {
   GetCodeParams,
   StreamCodgenMessage,
 } from "@animaapp/anima-sdk";
+import { CodegenError } from "@animaapp/anima-sdk";
 import { EventSource } from "eventsource";
 import { useImmer } from "use-immer";
 
@@ -21,7 +22,7 @@ type TaskStatus = "pending" | "running" | "finished";
 
 type CodegenStatus = {
   status: Status;
-  error: Error | null;
+  error: CodegenError | null;
   result: AnimaSDKResult | null;
   tasks: {
     fetchDesign: { status: TaskStatus };
@@ -98,18 +99,26 @@ export const useAnimaCodegen = ({
       };
     }
 
+    // TODO: We have two workarounds here because of limitations on the `eventsource` package:
+    // 1. We need to use the `fetch` function from the `EventSource` constructor to send the request with the correct method and body (https://github.com/EventSource/eventsource/issues/316#issuecomment-2525315835).
+    // 2. We need to store the last fetch response to handle errors to read its body response, since it isn't expoted by the package (https://github.com/EventSource/eventsource/blob/8aa7057bccd7fb819372a3b2c1292e7b53424d52/src/EventSource.ts#L348-L376)
+    // We might need to use other library, or do it from our self, to improve the code quality.
+    let lastFetchResponse: ReturnType<typeof fetch>;
     const es = new EventSource(url, {
-      fetch: (url, init) =>
-        fetch(url, {
+      fetch: (url, init) => {
+        lastFetchResponse = fetch(url, {
           ...init,
           method,
           body: JSON.stringify(params),
-        }),
+        });
+
+        return lastFetchResponse;
+      },
     });
 
     const promise = new Promise<{
       result: AnimaSDKResult | null;
-      error: Error | null;
+      error: CodegenError | null;
     }>((resolve) => {
       const result: Partial<AnimaSDKResult> = {};
 
@@ -145,12 +154,16 @@ export const useAnimaCodegen = ({
       });
 
       es.addEventListener("aborted", () => {
+        const error = new CodegenError({ name: "Aborted", reason: "Unknown" });
+
         updateStatus((draft) => {
           draft.status = "aborted";
+          (draft.result = null), (draft.error = error);
         });
+
         resolve({
           result: null,
-          error: new Error("The request was aborted"),
+          error,
         });
       });
 
@@ -189,35 +202,34 @@ export const useAnimaCodegen = ({
       });
 
       // TODO: For some reason, we receive errors even after the `done` event is triggered.
-      es.addEventListener("error", (error: ErrorEvent | MessageEvent) => {
-        // Differentiate between an error message from the server and an error event from the EventSource
-        if (error instanceof MessageEvent) {
-          const message = JSON.parse(
-            error.data
-          ) as StreamMessageByType<"error">;
-          updateStatus((draft) => {
-            draft.status = "error";
-            draft.error = new Error(message.payload.message);
-          });
+      es.addEventListener("error", async (error: ErrorEvent | MessageEvent) => {
+        let errorPayload: StreamMessageByType<"error"> | undefined;
+
+        try {
+          if (error instanceof MessageEvent) {
+            errorPayload = JSON.parse(error.data);
+          } else {
+            const response = await lastFetchResponse;
+            errorPayload = await response.json();
+          }
+        } catch {}
 
-          resolve({
-            result: null,
-            error: new Error(message.payload.message),
-          });
-        } else {
-          // It's an EventSource error (e.g. HTTP error)
-          console.error("EventSource error:", error);
+        const codegenError = new CodegenError({
+          name: errorPayload?.payload.name ?? "Unknown error",
+          reason: errorPayload?.payload.message ?? "Unknown",
+          status: errorPayload?.payload.status,
+          detail: errorPayload?.payload.detail,
+        });
 
-          updateStatus((draft) => {
-            draft.status = "error";
-            draft.error = new Error("HTTP error: " + error.message);
-          });
+        updateStatus((draft) => {
+          draft.status = "error";
+          draft.error = codegenError;
+        });
 
-          resolve({
-            result: null,
-            error: new Error("HTTP error: " + error.message),
-          });
-        }
+        resolve({
+          result: null,
+          error: codegenError,
+        });
       });
 
       es.addEventListener("done", (event) => {
@@ -278,13 +290,6 @@ export const useAnimaCodegen = ({
         return { result: null, error };
       }
 
-      if (Object.keys(result?.files ?? {}).length === 0) {
-        return {
-          result: null,
-          error: new Error("No files received"),
-        };
-      }
-
       return { result, error };
     } finally {
       es.close();