@supernova-studio/client 0.4.5 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supernova-studio/client",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "Supernova Data Models",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -32,7 +32,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@supernova-studio/model": "*",
     "prosemirror-model": "^1.19.4",
     "typescript": "^5.0.4",
     "y-prosemirror": "^1.2.2",

package/src/api/dto/documentation-v1.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+import { DocumentationPageV1 } from "@supernova-studio/model";
+
+export const DocumentationPageV1DTO = DocumentationPageV1.omit({
+  data: true,
+  meta: true,
+  parentPersistentId: true,
+  sortOrder: true,
+})
+  .extend(DocumentationPageV1.shape.data.shape)
+  .extend({
+    title: z.string(),
+    path: z.string(),
+  });
+
+export type DocumentationPageV1DTO = z.infer<typeof DocumentationPageV1DTO>;

package/src/api/dto/documentation-v2.ts

@@ -0,0 +1,28 @@
+import { z } from "zod";
+import { DocumentationPageV2 } from "@supernova-studio/model";
+import { DocumentationGroupStructureDTO } from "./documentation";
+
+/**
+ * Structure DTO is element properties minus element data (in other words data required
+ * to display the element in the left panel)
+ */
+export const DocumentationPageStructureV2DTO = DocumentationPageV2.omit({
+  data: true,
+  meta: true,
+  parentPersistentId: true,
+  sortOrder: true,
+}).extend({
+  title: z.string(),
+  path: z.string(),
+});
+
+export const DocumentationPageV2DTO = DocumentationPageStructureV2DTO.extend(DocumentationPageV2.shape.data.shape);
+
+export const DocumentationHierarchyV2DTO = z.object({
+  pages: z.array(DocumentationPageStructureV2DTO),
+  groups: z.array(DocumentationGroupStructureDTO),
+});
+
+export type DocumentationPageV2DTO = z.infer<typeof DocumentationPageV2DTO>;
+export type DocumentationPageStructureV2DTO = z.infer<typeof DocumentationPageStructureV2DTO>;
+export type DocumentationHierarchyV2DTO = z.infer<typeof DocumentationHierarchyV2DTO>;

package/src/api/dto/documentation.ts

@@ -0,0 +1,29 @@
+import { z } from "zod";
+import { DocumentationGroupBehavior, DocumentationItemConfiguration, ElementGroup } from "@supernova-studio/model";
+
+/**
+ * Structure DTO is element properties minus element data (in other words data required
+ * to display the element in the left panel)
+ */
+export const DocumentationGroupStructureDTO = ElementGroup.omit({
+  sortOrder: true,
+  parentPersistentId: true,
+  brandPersistentId: true,
+  meta: true,
+  childType: true,
+  data: true,
+  shortPersistentId: true,
+}).extend({
+  title: z.string(),
+  isRoot: z.boolean(),
+  childrenIds: z.array(z.string()),
+  groupBehavior: DocumentationGroupBehavior,
+  shortPersistentId: z.string(),
+});
+
+export const DocumentationGroupDTO = DocumentationGroupStructureDTO.extend({
+  configuration: DocumentationItemConfiguration,
+});
+
+export type DocumentationGroupStructureDTO = z.infer<typeof DocumentationGroupStructureDTO>;
+export type DocumentationGroupDTO = z.infer<typeof DocumentationGroupDTO>;

package/src/api/dto/index.ts

@@ -0,0 +1,3 @@
+export * from "./documentation-v1";
+export * from "./documentation-v2";
+export * from "./documentation";

package/src/api/index.ts

@@ -1,2 +1,3 @@
+export * from "./dto";
 export * from "./requests";
 export * from "./responses";

package/src/design-system-content/documentation-hierarchy.ts

@@ -0,0 +1,41 @@
+import * as Y from "yjs";
+import { DocumentationHierarchyV2DTO, DocumentationPageStructureV2DTO } from "../api/dto/documentation-v2";
+import { DocumentationGroupStructureDTO } from "../api";
+
+export function documentationHierarchyToYjs(documentationHierarchy: DocumentationHierarchyV2DTO, doc: Y.Doc) {
+  doc.transact(trx => {
+    const pagesMap = trx.doc.getMap("documentationPages");
+    documentationHierarchy.pages.forEach(page => {
+      pagesMap.set(page.persistentId, page);
+    });
+
+    const groupsMap = trx.doc.getMap("documentationGroups");
+    documentationHierarchy.groups.forEach(group => {
+      groupsMap.set(group.persistentId, group);
+    });
+  });
+
+  return doc;
+}
+
+export function yjsToDocumentationHierarchy(doc: Y.Doc): DocumentationHierarchyV2DTO {
+  const pagesMap = doc.getMap("documentationPages");
+  const groupsMap = doc.getMap("documentationGroups");
+
+  const pages: DocumentationPageStructureV2DTO[] = [];
+  pagesMap.forEach(page => {
+    pages.push(DocumentationPageStructureV2DTO.parse(page));
+  });
+
+  const groups: DocumentationGroupStructureDTO[] = [];
+  groupsMap.forEach(group => {
+    groups.push(DocumentationGroupStructureDTO.parse(group));
+  });
+
+  return {
+    pages,
+    groups,
+  };
+}
+
+// TODO Update page and update group

package/src/design-system-content/index.ts

@@ -0,0 +1,2 @@
+export * from "./documentation-hierarchy";
+export * from "./item-configuration";

package/src/design-system-content/item-configuration.ts

@@ -0,0 +1,57 @@
+import { DocumentationItemConfiguration, DocumentationItemHeader } from "@supernova-studio/model";
+import * as Y from "yjs";
+
+type UpdateDocumentationItemConfiguration = Partial<DocumentationItemConfiguration> & {
+  header?: Partial<DocumentationItemHeader>;
+};
+
+export function itemConfigurationToYjs(item: UpdateDocumentationItemConfiguration, yDoc: Y.Doc) {
+  yDoc.transact(trx => {
+    const header = item.header;
+
+    if (header) {
+      const headerYMap = trx.doc.getMap("itemHeader");
+
+      header.description !== undefined && headerYMap.set("description", header.description);
+      header.alignment !== undefined && headerYMap.set("alignment", header.alignment);
+      header.foregroundColor !== undefined && headerYMap.set("foregroundColor", header.foregroundColor);
+      header.backgroundColor !== undefined && headerYMap.set("backgroundColor", header.backgroundColor);
+      header.backgroundImageAsset !== undefined && headerYMap.set("backgroundImageAsset", header.backgroundImageAsset);
+      header.backgroundImageScaleType !== undefined &&
+        headerYMap.set("backgroundImageScaleType", header.backgroundImageScaleType);
+      header.showBackgroundOverlay !== undefined &&
+        headerYMap.set("showBackgroundOverlay", header.showBackgroundOverlay);
+      header.showCoverText !== undefined && headerYMap.set("showCoverText", header.showCoverText);
+      header.minHeight !== undefined && headerYMap.set("minHeight", header.minHeight);
+    }
+
+    if (item.showSidebar !== undefined) {
+      const configYMap = trx.doc.getMap("itemConfiguration");
+
+      configYMap.set("showSidebar", item.showSidebar);
+    }
+  });
+}
+
+export function yjsToItemConfiguration(yDoc: Y.Doc): DocumentationItemConfiguration {
+  const headerYMap = yDoc.getMap("itemHeader");
+  const rawHeader = {
+    description: headerYMap.get("description"),
+    alignment: headerYMap.get("alignment"),
+    foregroundColor: headerYMap.get("foregroundColor"),
+    backgroundColor: headerYMap.get("backgroundColor"),
+    backgroundImageAsset: headerYMap.get("backgroundImageAsset"),
+    backgroundImageScaleType: headerYMap.get("backgroundImageScaleType"),
+    showBackgroundOverlay: headerYMap.get("showBackgroundOverlay"),
+    showCoverText: headerYMap.get("showCoverText"),
+    minHeight: headerYMap.get("minHeight"),
+  };
+
+  const configYMap = yDoc.getMap("itemConfiguration");
+  const rawConfig = {
+    showSidebar: configYMap.get("showSidebar"),
+    header: rawHeader,
+  };
+
+  return DocumentationItemConfiguration.parse(rawConfig);
+}

package/src/docs-editor/prosemirror/schema.ts

@@ -169,6 +169,9 @@ const newSchema = {
       markSet: [],
       groups: [],
       attrs: {
+        id: {
+          default: null,
+        },
         textAlign: {
           hasDefault: true,
           default: "left",
@@ -187,6 +190,7 @@ const newSchema = {
         },
       },
       defaultAttrs: {
+        id: null,
         textAlign: "left",
         colspan: 1,
         rowspan: 1,
@@ -232,6 +236,9 @@ const newSchema = {
       markSet: [],
       groups: [],
       attrs: {
+        id: {
+          default: null,
+        },
         textAlign: {
           hasDefault: true,
           default: "left",
@@ -250,6 +257,7 @@ const newSchema = {
         },
       },
       defaultAttrs: {
+        id: null,
         textAlign: "left",
         colspan: 1,
         rowspan: 1,
@@ -760,6 +768,7 @@ const newSchema = {
         defining: true,
         attrs: {
           id: {
+            hasDefault: true,
             default: null,
           },
           definitionId: {
@@ -778,6 +787,9 @@ const newSchema = {
       markSet: [],
       groups: ["block"],
       attrs: {
+        id: {
+          default: null,
+        },
         definitionId: {
           hasDefault: true,
           default: "io.supernova.block.blockquote",
@@ -788,6 +800,7 @@ const newSchema = {
         },
       },
       defaultAttrs: {
+        id: null,
         definitionId: "io.supernova.block.blockquote",
         variantId: "default",
       },

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

@@ -37,13 +37,18 @@ import {
   PageBlockItemTableNode,
   PageBlockItemTableCell,
   PageBlockTableCellAlignment,
+  DocumentationItemConfiguration,
 } from "@supernova-studio/model";
 import { PageBlockEditorModel } from "./model/block";
 import { DocumentationPageEditorModel } from "./model/page";
 import { BlockDefinitionUtils } from "./utils";
 import { yXmlFragmentToProsemirrorJSON } from "y-prosemirror";
 
-export function yXmlFragmetToPage(
+export function yDocToPage(yDoc: Y.Doc, definitions: PageBlockDefinition[]): DocumentationPageEditorModel {
+  return yXmlFragmentToPage(yDoc.getXmlFragment("default"), definitions);
+}
+
+export function yXmlFragmentToPage(
   fragment: Y.XmlFragment,
   definitions: PageBlockDefinition[]
 ): DocumentationPageEditorModel {

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./api";
+export * from "./design-system-content";
 export * from "./docs-editor";