@supernova-studio/client 0.0.2 → 0.0.4

package/index.ts

@@ -0,0 +1 @@
+export * from "./src";

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@supernova-studio/client",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Supernova Data Models",
-  "main": "dist/index.mjs",
-  "types": "dist/index.d.mts",
+  "main": "index.ts",
   "source": "index.ts",
   "files": [
-    "dist"
+    "src"
   ],
   "scripts": {
     "build": "tsc"

package/src/api/index.ts

@@ -0,0 +1 @@
+export * from "./responses";

package/src/api/responses/get-block-definitions.ts

@@ -0,0 +1,8 @@
+import { PageBlockDefinition } from "@supernova-studio/model";
+import { z } from "zod";
+
+export const GetBlockDefinitionsResponse = z.object({
+  definitions: z.array(PageBlockDefinition),
+});
+
+export type GetBlockDefinitionsResponse = z.infer<typeof GetBlockDefinitionsResponse>;

package/src/api/responses/index.ts

@@ -0,0 +1 @@
+export * from "./get-block-definitions";

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

@@ -0,0 +1,372 @@
+import * as Y from "yjs";
+import {
+  PageBlockDefinition,
+  PageBlockDefinitionProperty,
+  PageBlockItemV2,
+  PageBlockText,
+  PageBlockTextSpan,
+  PageBlockTextSpanAttribute,
+  PageBlockDefinitionRichTextPropertyStyle,
+} from "@supernova-studio/model";
+import { PageBlockEditorModel } from "./model/block";
+import {
+  ProsemirrorBlockItem,
+  ProsemirrorBlockItemPropertyValue,
+  ProsemirrorNode,
+  ProsemirrorMark,
+} from "./prosemirror/types";
+import { BlockDefinitionUtils, SDKBlockParsingUtils } from "./utils";
+import { DocumentationPageEditorModel } from "./model";
+import { prosemirrorJSONToYXmlFragment } from "y-prosemirror";
+import { pmSchema } from "./prosemirror";
+
+type Input = {
+  block: PageBlockEditorModel;
+  definition: PageBlockDefinition;
+  richTextProperty: PageBlockDefinitionProperty;
+};
+
+type InputWithValue = Input & {
+  richTextPropertyValue: PageBlockText;
+};
+
+export function pageToYXmlFragment(
+  page: DocumentationPageEditorModel,
+  definitions: PageBlockDefinition[],
+  fragment: Y.XmlFragment
+): Y.XmlFragment {
+  const doc = pageToProsemirrorDoc(page, definitions);
+  return prosemirrorJSONToYXmlFragment(pmSchema, doc, fragment);
+}
+
+export function pageToProsemirrorDoc(
+  page: DocumentationPageEditorModel,
+  definitions: PageBlockDefinition[]
+): ProsemirrorNode {
+  return {
+    type: "doc",
+    content: page.blocks
+      .map(b => {
+        const definition = blockDefinitionForBlock(b, definitions);
+        return blockToProsemirrorNode(b, definition);
+      })
+      .filter(nonNullFilter),
+  };
+}
+
+export function blockDefinitionForBlock(block: PageBlockEditorModel, definitions: PageBlockDefinition[]) {
+  const definition = definitions.find(d => d.id === block.data.packageId);
+  if (!definition) throw new Error(`Could not find definition for ${block.id} (${block.data.packageId})`);
+
+  return definition;
+}
+
+export function blockToProsemirrorNode(
+  block: PageBlockEditorModel,
+  definition: PageBlockDefinition
+): ProsemirrorNode | null {
+  const richTextProperty = BlockDefinitionUtils.firstRichTextProperty(definition);
+
+  if (richTextProperty) {
+    return serializeAsRichTextBlock({
+      block: block,
+      definition: definition,
+      richTextProperty: richTextProperty,
+    });
+  }
+
+  return serializeAsCustomBlock(block, definition);
+}
+
+export function serializeAsRichTextBlock(input: Input): ProsemirrorNode {
+  const { block, definition, richTextProperty } = input;
+
+  const blockItem = SDKBlockParsingUtils.singleBlockItem(block);
+  const textPropertyValue = SDKBlockParsingUtils.richTextPropertyValue(blockItem, richTextProperty.id);
+
+  const enrichedInput: InputWithValue = { ...input, richTextPropertyValue: textPropertyValue };
+
+  const style = richTextProperty.options?.style ?? PageBlockDefinitionRichTextPropertyStyle.default;
+
+  switch (style) {
+    case PageBlockDefinitionRichTextPropertyStyle.callout:
+      return serializeAsCallout(enrichedInput);
+    case PageBlockDefinitionRichTextPropertyStyle.default:
+      return serializeAsParagraph(enrichedInput);
+
+    case PageBlockDefinitionRichTextPropertyStyle.quote:
+      return serializeAsBlockquote(enrichedInput);
+
+    case PageBlockDefinitionRichTextPropertyStyle.title1:
+    case PageBlockDefinitionRichTextPropertyStyle.title2:
+    case PageBlockDefinitionRichTextPropertyStyle.title3:
+    case PageBlockDefinitionRichTextPropertyStyle.title4:
+    case PageBlockDefinitionRichTextPropertyStyle.title5:
+      return serializeAsHeading(enrichedInput);
+
+    // Todo: verify
+    case PageBlockDefinitionRichTextPropertyStyle.ol:
+    case PageBlockDefinitionRichTextPropertyStyle.ul:
+      throw new Error(`Not allowed!`);
+  }
+}
+
+//
+// Blocks
+//
+
+function serializeAsParagraph(input: InputWithValue): ProsemirrorNode {
+  return {
+    type: "paragraph",
+    attrs: serializeBlockNodeAttributes(input),
+    content: serializeRichText(input.richTextPropertyValue),
+  };
+}
+
+function serializeAsHeading(input: InputWithValue): ProsemirrorNode {
+  return {
+    type: "heading",
+    attrs: {
+      ...serializeBlockNodeAttributes(input),
+      level: richTextHeadingLevel(input.richTextProperty),
+    },
+    content: serializeRichText(input.richTextPropertyValue),
+  };
+}
+
+function serializeAsBlockquote(input: InputWithValue): ProsemirrorNode {
+  return {
+    type: "blockquote",
+    attrs: serializeBlockNodeAttributes(input),
+    content: serializeRichText(input.richTextPropertyValue),
+  };
+}
+
+function serializeAsCallout(input: InputWithValue): ProsemirrorNode {
+  return {
+    type: "callout",
+    attrs: {
+      ...serializeBlockNodeAttributes(input),
+
+      // TODO Docs: type
+      type: "neutral",
+    },
+    content: serializeRichText(input.richTextPropertyValue),
+  };
+}
+
+//
+// Attributes
+//
+
+function serializeBlockNodeAttributes(input: InputWithValue) {
+  const { block } = input;
+
+  return {
+    id: block.id,
+    definitionId: block.data.packageId,
+    ...(input.block.data.variantId && { variantId: input.block.data.variantId }),
+  };
+}
+
+function richTextHeadingLevel(property: PageBlockDefinitionProperty): number | undefined {
+  const style = property.options?.style;
+  if (!style) return undefined;
+
+  switch (style) {
+    case PageBlockDefinitionRichTextPropertyStyle.title1:
+      return 1;
+    case PageBlockDefinitionRichTextPropertyStyle.title2:
+      return 2;
+    case PageBlockDefinitionRichTextPropertyStyle.title3:
+      return 3;
+    case PageBlockDefinitionRichTextPropertyStyle.title4:
+      return 4;
+    case PageBlockDefinitionRichTextPropertyStyle.title5:
+      return 5;
+
+    case PageBlockDefinitionRichTextPropertyStyle.ol:
+    case PageBlockDefinitionRichTextPropertyStyle.ul:
+    case PageBlockDefinitionRichTextPropertyStyle.callout:
+    case PageBlockDefinitionRichTextPropertyStyle.default:
+    case PageBlockDefinitionRichTextPropertyStyle.quote:
+      return undefined;
+  }
+}
+
+//
+// Rich text
+//
+
+function serializeRichText(richText: PageBlockText) {
+  return richText.spans.map(serializeTextSpan).flat();
+}
+
+function serializeTextSpan(span: PageBlockTextSpan): ProsemirrorNode[] {
+  const marks = span.attributes.map(serializeTextSpanAttribute);
+
+  const textParts = span.text.split("\n");
+  const interspersed: ProsemirrorNode[] = [
+    {
+      type: "text",
+      text: textParts[0],
+      marks: marks,
+    },
+  ];
+
+  for (let i = 1; i < textParts.length; i++) {
+    interspersed.push(
+      {
+        type: "hardBreak",
+      },
+      {
+        type: "text",
+        text: textParts[i],
+        marks: marks,
+      }
+    );
+  }
+
+  return interspersed;
+}
+
+function serializeTextSpanAttribute(spanAttribute: PageBlockTextSpanAttribute): ProsemirrorMark {
+  switch (spanAttribute.type) {
+    case "Bold":
+      return { type: "bold", attrs: {} };
+    case "Italic":
+      return { type: "italic", attrs: {} };
+    case "Strikethrough":
+      return { type: "strikethrough", attrs: {} };
+    case "Code":
+      return { type: "code", attrs: {} };
+    case "Link":
+      return {
+        type: "link",
+        attrs: {
+          itemId: spanAttribute.documentationItemId,
+          href: spanAttribute.link,
+          target: spanAttribute.openInNewWindow ? "_blank" : "_self",
+          rel: "noopener noreferrer nofollow",
+          class: null,
+        },
+      };
+  }
+}
+
+export function serializeAsCustomBlock(block: PageBlockEditorModel, definition: PageBlockDefinition): ProsemirrorNode {
+  const items = block.data.items.map(i => serializeItem(i, block, definition));
+
+  return {
+    type: "blockNode",
+    attrs: {
+      id: block.id,
+      definitionId: block.data.packageId,
+      variantId: "default",
+      columns: 1,
+      items: JSON.stringify(items),
+
+      // TODO Docs: variant, columns
+    },
+  };
+}
+
+function serializeItem(
+  item: PageBlockItemV2,
+  block: PageBlockEditorModel,
+  definition: PageBlockDefinition
+): ProsemirrorBlockItem {
+  const result: ProsemirrorBlockItem = {
+    properties: [],
+  };
+
+  for (const property of definition.item.properties) {
+    const serializedValue = serializePropertyValue(item, property);
+    serializedValue && result.properties.push(serializedValue);
+  }
+
+  return result;
+}
+
+function serializePropertyValue(
+  item: PageBlockItemV2,
+  property: PageBlockDefinitionProperty
+): ProsemirrorBlockItemPropertyValue | undefined {
+  const value = item.props[property.id] ?? undefined;
+  if (!value) {
+    return undefined;
+  }
+
+  // TODO Docs: actual property serialization
+
+  const result: ProsemirrorBlockItemPropertyValue = {
+    id: property.id,
+    data: {},
+  };
+
+  if (typeof value === "string") {
+    result.data.value = value;
+  }
+
+  return result;
+}
+
+function nonNullFilter<T>(item: T | null): item is T {
+  return !!item;
+}
+
+// function serializePropertyValue(item: SDKBlockItem, property: SDKBlockDefinitionProperty) {
+//   switch (property.type) {
+//     case SDK.DocsBlockItemPropertyType.text: return value as string;
+
+//     case SDK.DocsBlockItemPropertyType.richText: return {}
+
+//     case SDK.DocsBlockItemPropertyType.boolean: return {}
+//     case SDK.DocsBlockItemPropertyType.number: return {}
+//     case SDK.DocsBlockItemPropertyType.singleSelect: return {}
+//     case SDK.DocsBlockItemPropertyType.multiSelect: return {}
+//     case SDK.DocsBlockItemPropertyType.image: return {}
+//     case SDK.DocsBlockItemPropertyType.token: return {}
+//     case SDK.DocsBlockItemPropertyType.tokenType: return {}
+//     case SDK.DocsBlockItemPropertyType.tokenProperty: return {}
+//     case SDK.DocsBlockItemPropertyType.component: return {}
+//     case SDK.DocsBlockItemPropertyType.componentProperty: return {}
+//     case SDK.DocsBlockItemPropertyType.asset: return {}
+//     case SDK.DocsBlockItemPropertyType.assetProperty: return {}
+//     case SDK.DocsBlockItemPropertyType.page: return {}
+//     case SDK.DocsBlockItemPropertyType.pageProperty: return {}
+//     case SDK.DocsBlockItemPropertyType.embedURL: return {}
+//     case SDK.DocsBlockItemPropertyType.embedFrame: return {}
+//     case SDK.DocsBlockItemPropertyType.markdown: return {}
+//     case SDK.DocsBlockItemPropertyType.code: return {}
+//     case SDK.DocsBlockItemPropertyType.codeSandbox: return {}
+//     case SDK.DocsBlockItemPropertyType.table: return {}
+//     case SDK.DocsBlockItemPropertyType.divider: return {}
+//     case SDK.DocsBlockItemPropertyType.storybook: return {}
+//   }
+// }
+
+// richText = "RichText",
+// text = "Text",
+// boolean = "Boolean",
+// number = "Number",
+// singleSelect = "SingleSelect",
+// multiSelect = "MultiSelect",
+// image = "Image",
+// token = "Token",
+// tokenType = "TokenType",
+// tokenProperty = "TokenProperty",
+// component = "Component",
+// componentProperty = "ComponentProperty",
+// asset = "Asset",
+// assetProperty = "AssetProperty",
+// page = "Page",
+// pageProperty = "PageProperty",
+// embedURL = "EmbedURL",
+// embedFrame = "EmbedFrame",
+// markdown = "Markdown",
+// code = "Code",
+// codeSandbox = "CodeSandbox",
+// table = "Table",
+// divider = "Divider",
+// storybook = "Storybook"

package/src/docs-editor/index.ts

@@ -0,0 +1,5 @@
+export * from "./model";
+export * from "./prosemirror";
+export * from "./blocks-to-prosemirror";
+export * from "./prosemirror-to-blocks";
+export * from "./utils";

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

@@ -0,0 +1,9 @@
+import { PageBlockDataV2 } from "@supernova-studio/model";
+import { z } from "zod";
+
+export const PageBlockEditorModel = z.object({
+  id: z.string(),
+  data: PageBlockDataV2,
+});
+
+export type PageBlockEditorModel = z.infer<typeof PageBlockEditorModel>;

package/src/docs-editor/model/index.ts

@@ -0,0 +1,2 @@
+export * from "./block";
+export * from "./page";

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

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

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

@@ -0,0 +1,2 @@
+export * from "./schema";
+export * from "./types";