@supernova-studio/client 0.25.1 → 0.27.0

package/package.json

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

package/src/api/dto/elements/documentation/group-action.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import {
   DTOCreateDocumentationGroupInput,
-  DTOCreateDocumentationTabGroupInput,
+  DTOCreateDocumentationTabInput,
   DTODeleteDocumentationGroupInput,
   DTODeleteDocumentationTabGroupInput,
   DTODuplicateDocumentationGroupInput,
@@ -22,8 +22,8 @@ export const DTODocumentationGroupCreateActionOutputV2 = z.object({
   output: SuccessPayload,
 });
 
-export const DTODocumentationTabGroupCreateActionOutputV2 = z.object({
-  type: z.literal("DocumentationTabGroupCreate"),
+export const DTODocumentationTabCreateActionOutputV2 = z.object({
+  type: z.literal("DocumentationTabCreate"),
   output: SuccessPayload,
 });
 
@@ -53,7 +53,7 @@ export const DTODocumentationTabGroupDeleteActionOutputV2 = z.object({
 });
 
 export type DTODocumentationGroupCreateActionOutputV2 = z.infer<typeof DTODocumentationGroupCreateActionOutputV2>;
-export type DTODocumentationTabGroupCreateActionOutputV2 = z.infer<typeof DTODocumentationTabGroupCreateActionOutputV2>;
+export type DTODocumentationTabCreateActionOutputV2 = z.infer<typeof DTODocumentationTabCreateActionOutputV2>;
 export type DTODocumentationGroupUpdateActionOutputV2 = z.infer<typeof DTODocumentationGroupUpdateActionOutputV2>;
 export type DTODocumentationGroupMoveActionOutputV2 = z.infer<typeof DTODocumentationGroupMoveActionOutputV2>;
 export type DTODocumentationGroupDuplicateActionOutputV2 = z.infer<typeof DTODocumentationGroupDuplicateActionOutputV2>;
@@ -69,9 +69,9 @@ export const DTODocumentationGroupCreateActionInputV2 = z.object({
   input: DTOCreateDocumentationGroupInput,
 });
 
-export const DTODocumentationTabGroupCreateActionInputV2 = z.object({
-  type: z.literal("DocumentationTabGroupCreate"),
-  input: DTOCreateDocumentationTabGroupInput,
+export const DTODocumentationTabCreateActionInputV2 = z.object({
+  type: z.literal("DocumentationTabCreate"),
+  input: DTOCreateDocumentationTabInput,
 });
 
 export const DTODocumentationGroupUpdateActionInputV2 = z.object({
@@ -100,7 +100,7 @@ export const DTODocumentationTabGroupDeleteActionInputV2 = z.object({
 });
 
 export type DTODocumentationGroupCreateActionInputV2 = z.infer<typeof DTODocumentationGroupCreateActionInputV2>;
-export type DTODocumentationTabGroupCreateActionInputV2 = z.infer<typeof DTODocumentationTabGroupCreateActionInputV2>;
+export type DTODocumentationTabGroupCreateActionInputV2 = z.infer<typeof DTODocumentationTabCreateActionInputV2>;
 export type DTODocumentationGroupUpdateActionInputV2 = z.infer<typeof DTODocumentationGroupUpdateActionInputV2>;
 export type DTODocumentationGroupMoveActionInputV2 = z.infer<typeof DTODocumentationGroupMoveActionInputV2>;
 export type DTODocumentationGroupDuplicateActionInputV2 = z.infer<typeof DTODocumentationGroupDuplicateActionInputV2>;

package/src/api/dto/elements/documentation/group.ts

@@ -80,12 +80,12 @@ export const DTODuplicateDocumentationGroupInput = z.object({
   parentPersistentId: z.string().uuid(),
 });
 
-export const DTOCreateDocumentationTabGroupInput = z.object({
+export const DTOCreateDocumentationTabInput = z.object({
   // New group persistent id
   persistentId: z.string().uuid(),
 
   // Page that will become first tab of the tab group
-  fromPageId: z.string(),
+  fromPagePersistentId: z.string(),
   tabName: z.string(),
 });
 
@@ -106,6 +106,6 @@ export type DTOCreateDocumentationGroupInput = z.infer<typeof DTOCreateDocumenta
 export type DTOUpdateDocumentationGroupInput = z.infer<typeof DTOUpdateDocumentationGroupInput>;
 export type DTOMoveDocumentationGroupInput = z.infer<typeof DTOMoveDocumentationGroupInput>;
 export type DTODuplicateDocumentationGroupInput = z.infer<typeof DTODuplicateDocumentationGroupInput>;
-export type DTOCreateDocumentationTabGroupInput = z.infer<typeof DTOCreateDocumentationTabGroupInput>;
+export type DTOCreateDocumentationTabInput = z.infer<typeof DTOCreateDocumentationTabInput>;
 export type DTODeleteDocumentationTabGroupInput = z.infer<typeof DTODeleteDocumentationTabGroupInput>;
 export type DTODeleteDocumentationGroupInput = z.infer<typeof DTODeleteDocumentationGroupInput>;

package/src/api/dto/elements/elements-action-v2.ts

@@ -22,8 +22,8 @@ import {
   DTODocumentationGroupMoveActionOutputV2,
   DTODocumentationGroupUpdateActionInputV2,
   DTODocumentationGroupUpdateActionOutputV2,
-  DTODocumentationTabGroupCreateActionInputV2,
-  DTODocumentationTabGroupCreateActionOutputV2,
+  DTODocumentationTabCreateActionInputV2,
+  DTODocumentationTabCreateActionOutputV2,
   DTODocumentationTabGroupDeleteActionInputV2,
   DTODocumentationTabGroupDeleteActionOutputV2,
 } from "./documentation/group-action";
@@ -43,7 +43,7 @@ export const DTOElementActionOutput = z.discriminatedUnion("type", [
 
   // Documentation groups
   DTODocumentationGroupCreateActionOutputV2,
-  DTODocumentationTabGroupCreateActionOutputV2,
+  DTODocumentationTabCreateActionOutputV2,
   DTODocumentationGroupUpdateActionOutputV2,
   DTODocumentationGroupMoveActionOutputV2,
   DTODocumentationGroupDuplicateActionOutputV2,
@@ -70,7 +70,7 @@ export const DTOElementActionInput = z.discriminatedUnion("type", [
 
   // Documentation groups
   DTODocumentationGroupCreateActionInputV2,
-  DTODocumentationTabGroupCreateActionInputV2,
+  DTODocumentationTabCreateActionInputV2,
   DTODocumentationGroupUpdateActionInputV2,
   DTODocumentationGroupMoveActionInputV2,
   DTODocumentationGroupDuplicateActionInputV2,

package/src/yjs/docs-editor/blocks-to-prosemirror.ts

@@ -16,8 +16,12 @@ import {
   PageBlockDefinitionRichTextOptions,
   PageBlockDefinitionMutiRichTextOptions,
   PageBlockItemImageValue,
+  SupernovaException,
+  PageSectionItemV2,
+  PageSectionColumnV2,
+  mapByUnique,
 } from "@supernova-studio/model";
-import { PageBlockEditorModel } from "./model/block";
+import { PageBlockEditorModel, PageSectionEditorModel } from "./model/block";
 import { ProsemirrorNode, ProsemirrorMark } from "./prosemirror/types";
 import { BlockDefinitionUtils, BlockParsingUtils } from "./utils";
 import { DocumentationPageEditorModel } from "./model";
@@ -62,12 +66,18 @@ export function pageToProsemirrorDoc(
   page: DocumentationPageEditorModel,
   definitions: PageBlockDefinition[]
 ): ProsemirrorNode {
+  const definitionsMap = mapByUnique(definitions, d => d.id);
+
   return {
     type: "doc",
     content: page.blocks
       .map(b => {
-        const definition = blockDefinitionForBlock(b, definitions);
-        return blockToProsemirrorNode(b, definition);
+        switch (b.type) {
+          case "Block":
+            return blockToProsemirrorNode(b, blockDefinitionForBlock(b, definitions));
+          case "Section":
+            return internalSectionToProsemirrorNode(b, definitionsMap);
+        }
       })
       .filter(nonNullFilter),
   };
@@ -82,6 +92,88 @@ export function blockDefinitionForBlock(block: PageBlockEditorModel, definitions
   return definition;
 }
 
+//
+// Sections
+//
+
+export function sectionToProsemirrorNode(
+  section: PageSectionEditorModel,
+  definitions: PageBlockDefinition[]
+): ProsemirrorNode {
+  const definitionsMap = mapByUnique(definitions, d => d.id);
+  return internalSectionToProsemirrorNode(section, definitionsMap);
+}
+
+function internalSectionToProsemirrorNode(
+  section: PageSectionEditorModel,
+  definitionsMap: Map<string, PageBlockDefinition>
+): ProsemirrorNode {
+  return {
+    type: "tabsSection",
+    attrs: {
+      id: section.id,
+      ...(section.variantId && { variantId: section.variantId }),
+    },
+    content: section.items.map(item => sectionItemToProsemirrorNode(item, definitionsMap)),
+  };
+}
+
+function sectionItemToProsemirrorNode(
+  sectionItem: PageSectionItemV2,
+  definitionsMap: Map<string, PageBlockDefinition>
+): ProsemirrorNode {
+  return {
+    type: "sectionItem",
+    attrs: {
+      id: sectionItem.id,
+      title: sectionItem.title,
+    },
+    content: sectionItem.columns.map(column => sectionColumnToProsemirrorNode(column, definitionsMap)),
+  };
+}
+
+function sectionColumnToProsemirrorNode(
+  sectionColumn: PageSectionColumnV2,
+  definitionsMap: Map<string, PageBlockDefinition>
+): ProsemirrorNode {
+  const blocks = sectionColumn.blocks
+    .map(block => {
+      return internalBlockToProsemirrorNode(block, definitionsMap);
+    })
+    .filter(nonNullFilter);
+
+  if (!blocks.length) {
+    blocks.push({
+      type: "paragraph",
+      attrs: {
+        id: "id",
+        definitionId: "io.supernova.block.rich-text",
+      },
+    });
+  }
+
+  return {
+    type: "sectionItemColumn",
+    attrs: {
+      id: sectionColumn.id,
+    },
+    content: blocks,
+  };
+}
+
+//
+// Blocks
+//
+
+function internalBlockToProsemirrorNode(block: PageBlockEditorModel, definitionsMap: Map<string, PageBlockDefinition>) {
+  const definition = definitionsMap.get(block.data.packageId);
+  if (!definition) {
+    throw SupernovaException.shouldNotHappen(`Could not find definition for ${block.id} (${block.data.packageId})`);
+  }
+
+  return blockToProsemirrorNode(block, definition);
+}
+
 export function blockToProsemirrorNode(
   block: PageBlockEditorModel,
   definition: PageBlockDefinition
@@ -532,6 +624,7 @@ export function serializeAsCustomBlock(block: PageBlockEditorModel, definition:
       ...(block.data.variantId && { variantId: block.data.variantId }),
       items: JSON.stringify(items),
 
+      ...(block.data.appearance && { appearance: JSON.stringify(block.data.appearance) }),
       ...(columns && { columns: columns }),
     },
   };

package/src/yjs/docs-editor/model/block.ts

@@ -1,5 +1,8 @@
-import { PageBlockEditorModel as ModelPageBlockEditorModel } from "@supernova-studio/model";
+import { PageBlockEditorModelV2, PageSectionEditorModelV2 } from "@supernova-studio/model";
 import { z } from "zod";
 
-export const PageBlockEditorModel = ModelPageBlockEditorModel;
+export const PageBlockEditorModel = PageBlockEditorModelV2;
 export type PageBlockEditorModel = z.infer<typeof PageBlockEditorModel>;
+
+export const PageSectionEditorModel = PageSectionEditorModelV2;
+export type PageSectionEditorModel = z.infer<typeof PageSectionEditorModel>;

package/src/yjs/docs-editor/model/page.ts

@@ -1,8 +1,8 @@
 import { z } from "zod";
-import { PageBlockEditorModel } from "./block";
+import { PageBlockEditorModel, PageSectionEditorModel } from "./block";
 
 export const DocumentationPageEditorModel = z.object({
-  blocks: z.array(PageBlockEditorModel),
+  blocks: z.array(PageBlockEditorModel.or(PageSectionEditorModel)),
 });
 
 export type DocumentationPageEditorModel = z.infer<typeof DocumentationPageEditorModel>;

package/src/yjs/docs-editor/prosemirror-to-blocks.ts

@@ -38,17 +38,17 @@ import {
   PageBlockItemTableCell,
   PageBlockTableCellAlignment,
   PageBlockAppearanceV2,
-  ColorValue,
   nullishToOptional,
   PageBlockItemFigmaNodeValue,
   PageBlockColorV2,
+  PageSectionItemV2,
+  PageSectionColumnV2,
 } from "@supernova-studio/model";
-import { PageBlockEditorModel } from "./model/block";
+import { PageBlockEditorModel, PageSectionEditorModel } from "./model/block";
 import { DocumentationPageEditorModel } from "./model/page";
 import { BlockDefinitionUtils } from "./utils";
 import { yXmlFragmentToProsemirrorJSON } from "y-prosemirror";
-import { ZodAnyDef, ZodSchema, ZodTypeDef, z } from "zod";
-import { o } from "vitest/dist/types-198fd1d9";
+import { ZodSchema, ZodTypeDef, z } from "zod";
 
 export function yDocToPage(yDoc: Y.Doc, definitions: PageBlockDefinition[]): DocumentationPageEditorModel {
   return yXmlFragmentToPage(yDoc.getXmlFragment("default"), definitions);
@@ -69,32 +69,133 @@ export function prosemirrorDocToPage(
   const definitionsById = mapByUnique(definitions, d => d.id);
 
   return {
-    blocks: (prosemirrorDoc.content ?? [])
-      .map(prosemirrorNode => {
-        const definitionId = getProsemirrorAttribute(prosemirrorNode, "definitionId", z.string());
-        if (!definitionId) {
-          console.warn(
-            `definitionId on ${prosemirrorNode.type} is required to be interpreted as a block, skipping node`
-          );
-
-          return null;
-        }
-
-        const definition = definitionsById.get(definitionId);
-        if (!definition) {
-          console.warn(
-            `Block definitionId "${definitionId}" (prosemirror node ${prosemirrorNode.type}) is not among available definitions`
-          );
-          console.warn(prosemirrorNode);
-          return null;
-        }
-
-        return prosemirrorNodeToBlock(prosemirrorNode, definition);
-      })
+    blocks: internalProsemirrorNodesToPageItems(prosemirrorDoc.content ?? [], definitionsById),
+  };
+}
+
+//
+// Sections
+//
+
+export function prosemirrorNodeToSection(
+  prosemirrorNode: ProsemirrorNode,
+  definitions: PageBlockDefinition[]
+): PageSectionEditorModel | null {
+  const definitionsById = mapByUnique(definitions, d => d.id);
+  return internalProsemirrorNodeToSection(prosemirrorNode, definitionsById);
+}
+
+function internalProsemirrorNodeToSection(
+  prosemirrorNode: ProsemirrorNode,
+  definitionsMap: Map<string, PageBlockDefinition>
+): PageSectionEditorModel | null {
+  const id = getProsemirrorBlockId(prosemirrorNode);
+  if (!id) return null;
+
+  return {
+    id: id,
+    type: "Section",
+    variantId: getProsemirrorBlockVariantId(prosemirrorNode),
+    sectionType: "Tabs",
+    appearance: {
+      contentExpandToEdges: true,
+      expandToEdges: true,
+    },
+    items: (prosemirrorNode.content ?? [])
+      .filter(c => c.type === "sectionItem")
+      .map(c => prosemirrorNodeToSectionItem(c, definitionsMap))
       .filter(nonNullFilter),
   };
 }
 
+function prosemirrorNodeToSectionItem(
+  prosemirrorNode: ProsemirrorNode,
+  definitionsMap: Map<string, PageBlockDefinition>
+): PageSectionItemV2 | null {
+  const id = getProsemirrorBlockId(prosemirrorNode);
+  if (!id) return null;
+
+  return {
+    id: id,
+    title: getProsemirrorAttribute(prosemirrorNode, "title", z.string()) ?? "",
+    columns: (prosemirrorNode.content ?? [])
+      .filter(c => c.type === "sectionItemColumn")
+      .map(c => prosemirrorNodeToSectionColumns(c, definitionsMap))
+      .filter(nonNullFilter),
+  };
+}
+
+function prosemirrorNodeToSectionColumns(
+  prosemirrorNode: ProsemirrorNode,
+  definitionsMap: Map<string, PageBlockDefinition>
+): PageSectionColumnV2 | null {
+  const id = getProsemirrorBlockId(prosemirrorNode);
+  if (!id) return null;
+
+  return {
+    id: id,
+    blocks: internalProsemirrorNodesToBlocks(prosemirrorNode.content ?? [], definitionsMap),
+  };
+}
+
+//
+// Blocks
+//
+
+export function prosemirrorNodesToBlocks(prosemirrorNodes: ProsemirrorNode[], definitions: PageBlockDefinition[]) {
+  const definitionsById = mapByUnique(definitions, d => d.id);
+  return internalProsemirrorNodesToBlocks(prosemirrorNodes, definitionsById);
+}
+
+function internalProsemirrorNodesToPageItems(
+  prosemirrorNodes: ProsemirrorNode[],
+  definitionsMap: Map<string, PageBlockDefinition>
+): (PageBlockEditorModel | PageSectionEditorModel)[] {
+  return prosemirrorNodes
+    .map(prosemirrorNode => {
+      if (prosemirrorNode.type === "tabsSection") {
+        return prosemirrorNodeToSection(prosemirrorNode, Array.from(definitionsMap.values()));
+      } else {
+        return internalProsemirrorNodeToBlock(prosemirrorNode, definitionsMap);
+      }
+    })
+    .filter(nonNullFilter);
+}
+
+function internalProsemirrorNodesToBlocks(
+  prosemirrorNodes: ProsemirrorNode[],
+  definitionsMap: Map<string, PageBlockDefinition>
+): PageBlockEditorModel[] {
+  return prosemirrorNodes
+    .map(prosemirrorNode => {
+      return internalProsemirrorNodeToBlock(prosemirrorNode, definitionsMap);
+    })
+    .filter(nonNullFilter);
+}
+
+function internalProsemirrorNodeToBlock(
+  prosemirrorNode: ProsemirrorNode,
+  definitionsMap: Map<string, PageBlockDefinition>
+) {
+  const definitionId = getProsemirrorAttribute(prosemirrorNode, "definitionId", z.string());
+  if (!definitionId) {
+    console.warn(`definitionId on ${prosemirrorNode.type} is required to be interpreted as a block, skipping node`);
+
+    return null;
+  }
+
+  const definition = definitionsMap.get(definitionId);
+  if (!definition) {
+    console.warn(
+      `Block definitionId "${definitionId}" (prosemirror node ${prosemirrorNode.type}) is not among available definitions`
+    );
+    console.warn(prosemirrorNode);
+    return null;
+  }
+
+  return prosemirrorNodeToBlock(prosemirrorNode, definition);
+}
+
 export function prosemirrorNodeToBlock(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition
@@ -139,6 +240,7 @@ function parseAsRichText(
   return {
     // TODO Artem: indent
     id: id,
+    type: "Block",
 
     ...(variantId && { variantId: variantId }),
 
@@ -197,6 +299,7 @@ function parseAsMultiRichText(
   return {
     // TODO Artem: indent
     id: id,
+    type: "Block",
     data: {
       packageId: definition.id,
       indentLevel: 0,
@@ -321,6 +424,7 @@ function parseAsTable(
 
   return {
     id: id,
+    type: "Block",
     data: {
       packageId: "io.supernova.block.table",
       indentLevel: 0,
@@ -438,6 +542,7 @@ function emptyTable(id: string, variantId?: string, indentLevel?: number): PageB
 
   return {
     id: id,
+    type: "Block",
     data: {
       packageId: "io.supernova.block.table",
       indentLevel: indentLevel ?? 0,
@@ -479,6 +584,7 @@ function parseAsDivider(
 
   return {
     id: id,
+    type: "Block",
     data: {
       packageId: definition.id,
       indentLevel: 0,
@@ -509,6 +615,7 @@ function parseAsCustomBlock(
 
   return {
     id: id,
+    type: "Block",
     data: {
       packageId: definition.id,
       indentLevel: 0,
@@ -535,7 +642,15 @@ function parseBlockItems(prosemirrorNode: ProsemirrorNode, definition: PageBlock
 }
 
 function parseAppearance(prosemirrorNode: ProsemirrorNode): PageBlockAppearanceV2 | undefined {
-  const appearance: PageBlockAppearanceV2 = {};
+  let appearance: PageBlockAppearanceV2 = {};
+
+  const rawAppearanceString = getProsemirrorAttribute(prosemirrorNode, "appearance", z.string().optional());
+  if (rawAppearanceString) {
+    const parsedAppearance = PageBlockAppearanceV2.safeParse(JSON.parse(rawAppearanceString));
+    if (parsedAppearance.success) {
+      appearance = parsedAppearance.data;
+    }
+  }
 
   const columns = getProsemirrorAttribute(prosemirrorNode, "columns", z.number().optional());
   if (columns) {