@supernova-studio/client 0.58.15 → 0.58.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supernova-studio/client",
-  "version": "0.58.15",
+  "version": "0.58.17",
   "description": "Supernova Data Models",
   "source": "src/index.ts",
   "main": "dist/index.js",

package/src/api/dto/elements/figma-nodes/figma-node.ts

@@ -52,7 +52,26 @@ export type DTOFigmaNode = z.infer<typeof DTOFigmaNode>;
 // Write
 //
 
-export const DTOFigmaNodeRenderInput = z.object({
+/**
+ * Properties that are available on all types of Figma node render requests
+ */
+const DTOFigmaNodeRenderInputBase = z.object({
+  /**
+   * Format in which the node must be rendered, png by default.
+   */
+  format: FigmaNodeRenderFormat.default("Png"),
+});
+
+/**
+ * Figma node render request that uses source ID + node ID to identify the requested
+ * node to render. The node ID can be obtained from the source's Figma node structure.
+ */
+const DTOFigmaNodeRenderIdInput = DTOFigmaNodeRenderInputBase.extend({
+  inputType: z
+    .literal("NodeId")
+    .optional()
+    .transform(v => v ?? "NodeId"),
+
   /**
    * Id of a design system's data source representing a linked Figma file
    */
@@ -62,11 +81,26 @@ export const DTOFigmaNodeRenderInput = z.object({
    * Id of a node within the Figma file
    */
   figmaFileNodeId: z.string(),
+});
+
+/**
+ * Figma node render request that uses Figma URL to identify the requested
+ * node to render. The URL can be obtained by the user directly from the Figma app.
+ */
+const DTOFigmaNodeRenderUrlInput = DTOFigmaNodeRenderInputBase.extend({
+  inputType: z.literal("URL"),
 
   /**
-   * Format in which the node must be rendered, png by default.
+   * Id of a design system's data source representing a linked Figma file
    */
-  format: FigmaNodeRenderFormat.default("Png"),
+  figmaNodeUrl: z.string(),
 });
 
+export const DTOFigmaNodeRenderInput = z.discriminatedUnion("inputType", [
+  DTOFigmaNodeRenderIdInput,
+  DTOFigmaNodeRenderUrlInput,
+]);
+
+export type DTOFigmaNodeRenderIdInput = z.infer<typeof DTOFigmaNodeRenderIdInput>;
+export type DTOFigmaNodeRenderUrlInput = z.infer<typeof DTOFigmaNodeRenderUrlInput>;
 export type DTOFigmaNodeRenderInput = z.infer<typeof DTOFigmaNodeRenderInput>;

package/src/utils/figma.ts

@@ -0,0 +1,53 @@
+const figmaFileIdRegex = /^[0-9a-zA-Z]{22,128}$/;
+const nodeIdRegex = /^d+-d+$/;
+const nodeTypeRegex = /^[0-9a-zA-Z]^/;
+
+type ParsedFigmaFileURL = {
+  fileId: string;
+  fileName: string | null;
+  nodeId: string | null;
+  nodeType: string | null;
+};
+
+export const FigmaUtils = {
+  tryParseFigmaFileURL(urlString: string): ParsedFigmaFileURL | null {
+    if (!URL.canParse(urlString)) return null;
+
+    // Validate that this is a Figma URL
+    const url = new URL(urlString);
+    if (!url.hostname.endsWith("figma.com")) return null;
+
+    // Validate that the URL type is the correct one (pointing to a design file)
+    const pathSegments = url.pathname.split("/");
+    if (pathSegments[0] !== "design" && pathSegments[0] !== "file") return null;
+
+    // Validate Figma file ID
+    const fileId = pathSegments[1];
+    if (!fileId || !fileId.match(figmaFileIdRegex)) return null;
+
+    // Parse Figma file name
+    let fileName: string | null = null;
+    const rawFileName = pathSegments[2];
+    if (rawFileName) {
+      fileName = rawFileName.replaceAll("-", " ");
+    }
+
+    // Parse node id
+    let nodeId: string | null = null;
+    const nodeIdRaw = url.searchParams.get("node-id");
+    if (nodeIdRaw && nodeIdRaw.match(nodeIdRegex)) {
+      nodeId = nodeIdRaw.replace("-", ":");
+    }
+
+    // Parse node type
+    let nodeType: string | null = null;
+    const nodeTypeRaw = url.searchParams.get("node-type");
+    if (nodeTypeRaw && nodeTypeRaw.match(nodeTypeRegex)) {
+      nodeType = nodeTypeRaw;
+    }
+
+    return { fileId, fileName, nodeId, nodeType };
+  },
+};
+
+// https://www.figma.com/design/U3Mg3I8WbvqF6CcZtRJM7w?node-id=2-3&t=9Qev2vhsldyFMhuE-1

package/src/utils/index.ts

@@ -1,2 +1,3 @@
+export * from "./figma";
 export * from "./hash";
 export * from "./query";