@animaapp/anima-sdk 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animaapp/anima-sdk",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "Anima's JavaScript utilities library",
   "author": "Anima App, Inc.",

package/src/anima.ts

@@ -1,4 +1,3 @@
-import { convertCodegenFilesToAnimaFiles } from "./codegenToAnimaFiles";
 import { CodegenError } from "./errors";
 import { validateSettings } from "./settings";
 import {
@@ -10,7 +9,7 @@ import {
 
 export type Auth =
   | { token: string; teamId: string } // for Anima user, it's mandatory to have an associated team
-  | { token: string; userId?: string }; // for users from a 3rd-party client (e.g., Bolt) they may have optionally a user id
+  | { token: string; userId?: string }; // for users from a 3rd-party integrations, they may have optionally a user id
 
 export class Anima {
   #auth?: Auth;
@@ -85,6 +84,7 @@ export class Anima {
         uiLibrary: settings.uiLibrary,
         enableTranslation: settings.enableTranslation,
         enableUILibraryTheming: settings.enableUILibraryTheming,
+        enableCompactStructure: settings.enableCompactStructure,
       }),
     });
 
@@ -188,15 +188,8 @@ export class Anima {
               }
 
               case "generating_code": {
-                const codegenFiles = data.payload.files as Record<
-                  string,
-                  { code: string; type: "code" }
-                >;
-
-                const files = convertCodegenFilesToAnimaFiles(codegenFiles);
-
                 if (data.payload.status === "success") {
-                  result.files = files;
+                  result.files = data.payload.files;
                 }
 
                 typeof handler === "function"
@@ -204,7 +197,7 @@ export class Anima {
                   : handler.onGeneratingCode?.({
                       status: data.payload.status,
                       progress: data.payload.progress,
-                      files,
+                      files: data.payload.files,
                     });
                 break;
               }
@@ -233,6 +226,7 @@ export class Anima {
                     reason: "No files found",
                   });
                 }
+                result.tokenUsage = data.payload.tokenUsage;
                 return result as AnimaSDKResult;
               }
             }

package/src/dataStream.ts

@@ -37,8 +37,13 @@ export const createCodegenStream = (
             controller.close();
           }
         })
-        .then((result) => {
-          controller.enqueue({ type: "done" });
+        .then((_result) => {
+          controller.enqueue({
+            type: "done", payload: {
+              tokenUsage: _result.tokenUsage,
+              sessionId: _result.sessionId,
+            }
+          });
           controller.close();
         })
         .catch((error) => {

package/src/figma/figmaError.ts

@@ -71,13 +71,18 @@ export const isFigmaTokenIssue = (error: Error) => {
   );
 };
 
-export const handleFigmaApiError = (error: any, fileKey: string) => {
+export type FigmaApiError = {
+  cause?: { body?: { status?: number; reason?: string } };
+  body?: { status?: number; reason?: string };
+};
+
+export const handleFigmaApiError = (error: FigmaApiError, fileKey: string) => {
   const err = error?.cause?.body || error.body;
 
   if (err?.status === 403) {
     throw new FigmaTokenIssue({
       fileKey,
-      reason: error?.cause?.body || error.body,
+      reason: (error?.cause?.body?.reason || error.body?.reason || "Access denied").toString(),
     });
   }
 

package/src/figma/utils.ts

@@ -1,6 +1,6 @@
 import type { GetFileResponse, Node } from '@figma/rest-api-spec';
 import { FigmaRestApi } from '@animaapp/http-client-figma';
-import { handleFigmaApiError } from './figmaError';
+import { handleFigmaApiError, type FigmaApiError } from './figmaError';
 
 export type FigmaNode = Node;
 export type GetFileParams = { fileKey: string; authToken?: string; figmaRestApi?: FigmaRestApi };
@@ -10,7 +10,7 @@ export type GetFilePagesParams = {
   fileKey: string;
   authToken?: string;
   figmaRestApi?: FigmaRestApi;
-  params?: Record<string, any>;
+  params?: Record<string, string | number | undefined>;
 };
 export type GetFilePagesResult = FigmaPage[] | undefined;
 export type GetFileNodesParams = {
@@ -18,7 +18,7 @@ export type GetFileNodesParams = {
   authToken?: string;
   nodeIds: string[];
   figmaRestApi?: FigmaRestApi;
-  params?: Record<string, any>;
+  params?: Record<string, string | number>;
 };
 
 export type GetFigmaFileResult = GetFileResponse | undefined;
@@ -68,6 +68,6 @@ export const getFileNodes = async ({
 
     return data.nodes;
   } catch (error) {
-    return handleFigmaApiError(error, fileKey);
+    return handleFigmaApiError(error as FigmaApiError, fileKey);
   }
 };

package/src/index.ts

@@ -5,4 +5,3 @@ export * from "./utils";
 export * from "./figma";
 export * from "./settings";
 export * from "./dataStream";
-export * from "./codegenToAnimaFiles";

package/src/settings.ts

@@ -20,6 +20,7 @@ const CodegenSettingsSchema = z
         ]),
         uiLibrary: z.enum(["mui", "antd", "radix", "shadcn"]).optional(),
         enableUILibraryTheming: z.boolean().optional(),
+        enableCompactStructure: z.boolean().optional(),
       }),
       z.object({
         framework: z.literal("html"),
@@ -32,7 +33,7 @@ const CodegenSettingsSchema = z
 // We don't use the z.infer method here because the types returned by zod aren't ergonic
 export type CodegenSettings = {
   language?: "typescript" | "javascript";
-  model?: string,
+  model?: string;
   framework: "react" | "html";
   styling:
     | "plain_css"
@@ -41,10 +42,11 @@ export type CodegenSettings = {
     | "tailwind"
     | "sass"
     | "scss"
-    | "inline_styles"
+    | "inline_styles";
   uiLibrary?: "mui" | "antd" | "radix" | "shadcn";
   enableTranslation?: boolean;
   enableUILibraryTheming?: boolean;
+  enableCompactStructure?: boolean;
 };
 
 export const validateSettings = (obj: unknown): CodegenSettings => {

package/src/types.ts

@@ -13,6 +13,7 @@ export type BaseResult = {
   sessionId: string;
   figmaFileName: string;
   figmaSelectedFrameName: string;
+  tokenUsage: number;
 };
 
 export type AnimaSDKResult = BaseResult & {
@@ -30,7 +31,7 @@ export type AssetsStorage =
 
 export type GetCodeParams = {
   fileKey: string;
-  figmaToken: string;
+  figmaToken?: string;
   nodesId: string[];
   assetsStorage?: AssetsStorage;
   settings: CodegenSettings;
@@ -39,52 +40,58 @@ export type GetCodeParams = {
 export type GetCodeHandler =
   | ((message: SSECodgenMessage) => void)
   | {
-      onStart?: ({ sessionId }: { sessionId: string }) => void;
-      onPreCodegen?: ({ message }: { message: string }) => void;
-      onAssetsUploaded?: () => void;
-      onAssetsList?: ({
-        assets,
-      }: {
-        assets: Array<{ name: string; url: string }>;
-      }) => void;
-      onFigmaMetadata?: ({
-        figmaFileName,
-        figmaSelectedFrameName,
-      }: {
-        figmaFileName: string;
-        figmaSelectedFrameName: string;
-      }) => void;
-      onGeneratingCode?: ({
-        status,
-        progress,
-        files,
-      }: {
-        status: "success" | "running" | "failure";
-        progress: number;
-        files: AnimaFiles;
-      }) => void;
-      onCodegenCompleted?: () => void;
-    };
+    onStart?: ({ sessionId }: { sessionId: string }) => void;
+    onPreCodegen?: ({ message }: { message: string }) => void;
+    onAssetsUploaded?: () => void;
+    onAssetsList?: ({
+      assets,
+    }: {
+      assets: Array<{ name: string; url: string }>;
+    }) => void;
+    onFigmaMetadata?: ({
+      figmaFileName,
+      figmaSelectedFrameName,
+    }: {
+      figmaFileName: string;
+      figmaSelectedFrameName: string;
+    }) => void;
+    onGeneratingCode?: ({
+      status,
+      progress,
+      files,
+    }: {
+      status: "success" | "running" | "failure";
+      progress: number;
+      files: AnimaFiles;
+    }) => void;
+    onCodegenCompleted?: () => void;
+  };
+
+export type GeneratingCodePayload = {
+  status: "success" | "running" | "failure";
+  progress: number;
+  files: AnimaFiles;
+};
 
 // TODO: `SSECodgenMessage` and `SSECodgenMessageErrorPayload` should be imported from `anima-public-api`
 export type SSECodgenMessage =
   | { type: "start"; sessionId: string }
   | { type: "pre_codegen"; message: string }
   | {
-      type: "figma_metadata";
-      figmaFileName: string;
-      figmaSelectedFrameName: string;
-    }
-  | { type: "generating_code"; payload: any }
+    type: "figma_metadata";
+    figmaFileName: string;
+    figmaSelectedFrameName: string;
+  }
+  | { type: "generating_code"; payload: GeneratingCodePayload }
   | { type: "codegen_completed" }
   | { type: "assets_uploaded" }
   | {
-      type: "assets_list";
-      payload: { assets: Array<{ name: string; url: string }> };
-    }
+    type: "assets_list";
+    payload: { assets: Array<{ name: string; url: string }> };
+  }
   | { type: "aborted" }
   | { type: "error"; payload: SSECodgenMessageErrorPayload }
-  | { type: "done" };
+  | { type: "done", payload: { sessionId: string, tokenUsage: number } };
 export type SSECodgenMessageErrorPayload = {
   errorName: string;
   task?: string;

package/src/{utils.ts → utils/figma.ts}

@@ -43,7 +43,7 @@ export const formatToFigmaLink = ({
   return url;
 };
 
-class ResponseError extends Error {
+export class ResponseError extends Error {
   response: Response;
 
   constructor(message: string, res: Response) {

package/src/utils/files.ts

@@ -0,0 +1,95 @@
+import { AnimaFiles } from "../types";
+
+export const getRelatedScreenFiles = ({
+  files,
+  screenPath = "src/screens",
+}: {
+  files: AnimaFiles;
+  screenPath?: string;
+}) => {
+  const result: AnimaFiles = {};
+  const processed = new Set<string>();
+
+  function processFile(filePath: string) {
+    if (processed.has(filePath) || !files[filePath]) {
+      return;
+    }
+
+    processed.add(filePath);
+    result[filePath] = files[filePath];
+
+    const imports = parseImports(files[filePath].content);
+
+    imports.forEach((importPath) => {
+      try {
+        const resolvedPath = resolveImportPath(filePath, importPath);
+
+        if (resolvedPath.startsWith("src/")) {
+          const importDir = resolvedPath.split("/").slice(0, -1).join("/");
+          const dirFiles = getAllFilesInDirectory(files, importDir);
+          dirFiles.forEach((file) => {
+            if (!processed.has(file)) {
+              processFile(file);
+            }
+          });
+        }
+      } catch (error) {
+        console.warn(
+          `Failed to resolve import ${importPath} in ${filePath}:`,
+          error
+        );
+      }
+    });
+  }
+
+  Object.entries(files).forEach(([key, value]) => {
+    if (key.startsWith(screenPath)) {
+      processFile(key);
+    } else if (!key.startsWith("src/")) {
+      result[key] = value;
+    }
+  });
+
+  return result;
+};
+
+function parseImports(content: string): string[] {
+  const importRegex = /import.*?["']([^"']+)["']/g;
+  const exports = /export.*from\s+["']([^"']+)["']/g;
+  const imports: string[] = [];
+  let match;
+
+  while ((match = importRegex.exec(content)) !== null) {
+    imports.push(match[1]);
+  }
+
+  while ((match = exports.exec(content)) !== null) {
+    imports.push(match[1]);
+  }
+
+  return [...new Set(imports)];
+}
+
+function resolveImportPath(basePath: string, importPath: string): string {
+  if (!importPath.startsWith(".")) {
+    return importPath;
+  }
+
+  const baseDir = basePath.split("/").slice(0, -1);
+  const importParts = importPath.split("/");
+  const resolvedParts: string[] = [...baseDir];
+
+  for (const part of importParts) {
+    if (part === "..") {
+      resolvedParts.pop();
+    } else if (part !== ".") {
+      resolvedParts.push(part);
+    }
+  }
+
+  return resolvedParts.join("/");
+}
+
+function getAllFilesInDirectory(files: AnimaFiles, dirPath: string): string[] {
+  return Object.keys(files).filter((file) => file.startsWith(dirPath));
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./figma";
+export * from "./files";

package/src/codegenToAnimaFiles.ts

@@ -1,13 +0,0 @@
-import { AnimaFiles } from "./types";
-
-export const convertCodegenFilesToAnimaFiles = (
-  codegenFiles: Record<string, { code: string; type: "code" }>
-): AnimaFiles => {
-  return Object.entries(codegenFiles).reduce(
-    (acc, [fileName, file]) => {
-      acc[fileName] = { content: file.code, isBinary: false };
-      return acc;
-    },
-    {} as AnimaFiles
-  );
-};