@supernova-studio/client 0.28.0 → 0.29.0

package/package.json

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

package/src/api/conversion/documentation/documentation-page-to-dto-utils.ts

@@ -1,6 +1,11 @@
 import { DocumentationPageV1, DocumentationPageV2, ElementGroup, slugify } from "@supernova-studio/model";
 import { mapByUnique } from "@supernova-studio/model";
 
+type GroupLike = {
+  persistentId: string;
+  parentPersistentId?: string;
+};
+
 // The fact that DTO conversion is located here instead of main backend code is due to the fact
 // that we store page and group data in YJS documents in the same way as they are stored in the database.
 // Therefore, we need to expose this conversion to the client so that it can consume data from YJS documents.
@@ -36,11 +41,11 @@ export function buildDocPagePublishPaths(
   return result;
 }
 
-export function calculateElementParentChain(
+export function calculateElementParentChain<T extends GroupLike>(
   elementParentPersistentId: string,
-  groupPersistentIdToGroupMap: Map<string, ElementGroup>
-): ElementGroup[] {
-  const result: ElementGroup[] = [];
+  groupPersistentIdToGroupMap: Map<string, T>
+): T[] {
+  const result: T[] = [];
 
   let parentId: string | undefined = elementParentPersistentId;
   while (parentId) {

package/src/api/dto/documentation/index.ts

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

package/src/api/dto/documentation/link-preview.ts

@@ -0,0 +1,23 @@
+import { DocumentationLinkPreview } from "@supernova-studio/model";
+import { z } from "zod";
+
+//
+// Read
+//
+
+export const DTODocumentationLinkPreviewResponse = z.object({
+  linkPreview: DocumentationLinkPreview,
+});
+
+export type DTODocumentationLinkPreviewResponse = z.infer<typeof DTODocumentationLinkPreviewResponse>;
+
+//
+// Write
+//
+
+export const DTODocumentationLinkPreviewRequest = z.object({
+  url: z.string().optional(),
+  documentationItemPersistentId: z.string().optional(),
+});
+
+export type DTODocumentationLinkPreviewRequest = z.infer<typeof DTODocumentationLinkPreviewRequest>;

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

@@ -50,7 +50,7 @@ export const DTOElementActionOutput = z.discriminatedUnion("type", [
   DTODocumentationGroupDeleteActionOutputV2,
   DTODocumentationTabGroupDeleteActionOutputV2,
 
-  // // Figma frames
+  // Figma frames
   DTOFigmaNodeRenderActionOutput,
 ]);
 

package/src/api/payloads/index.ts

@@ -1,2 +1,3 @@
 export * from "./documentation";
 export * from "./liveblocks";
+export * from "./workspaces";

package/src/api/payloads/workspaces/index.ts

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

package/src/api/payloads/workspaces/workspace-configuration.ts

@@ -0,0 +1,50 @@
+import { z } from "zod";
+import { SsoProvider, WorkspaceIpSettings, WorkspaceProfile } from "@supernova-studio/model";
+
+const prohibitedSsoKeys = ["providerId", "metadataXml", "emailDomains"];
+
+export function validateSsoPayload(ssoPayload: Partial<SsoProvider> | undefined) {
+  const keys = [];
+  let valid = true;
+  if (!ssoPayload) {
+    valid = true;
+    return {
+      valid,
+      keys: [],
+    };
+  }
+  for (const key of Object.keys(ssoPayload)) {
+    if (prohibitedSsoKeys.includes(key)) {
+      keys.push(key);
+      valid = false;
+    }
+  }
+  return {
+    valid,
+    keys,
+  };
+}
+
+export const NpmRegistryInput = z.object({
+  enabledScopes: z.array(z.string()),
+  customRegistryUrl: z.string().optional(),
+  bypassProxy: z.boolean().optional(),
+  npmProxyRegistryConfigId: z.string().optional(),
+  npmProxyVersion: z.number().optional(),
+  registryType: z.string(),
+  authType: z.string(),
+  authHeaderName: z.string(),
+  authHeaderValue: z.string(),
+  accessToken: z.string(),
+  username: z.string(),
+  password: z.string(),
+});
+
+export const WorkspaceConfigurationPayload = z.object({
+  ipWhitelist: WorkspaceIpSettings.partial().optional(),
+  sso: SsoProvider.partial().optional(),
+  npmRegistrySettings: NpmRegistryInput.partial().optional(),
+  profile: WorkspaceProfile.partial().optional(),
+});
+
+export type WorkspaceConfigurationPayload = z.infer<typeof WorkspaceConfigurationPayload>;

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

@@ -592,19 +592,28 @@ function serializeTextSpanAttribute(spanAttribute: PageBlockTextSpanAttribute):
     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,
-        },
-      };
+      if (spanAttribute.link) {
+        return serializeLinkMark(spanAttribute.link, spanAttribute.openInNewWindow ?? false);
+      } else if (spanAttribute.documentationItemId) {
+        return serializeLinkMark(`@page:${spanAttribute.documentationItemId}`, spanAttribute.openInNewWindow ?? false);
+      } else {
+        return serializeLinkMark("about:blank", spanAttribute.openInNewWindow ?? false);
+      }
   }
 }
 
+function serializeLinkMark(href: string, openInNewWindow: boolean): ProsemirrorMark {
+  return {
+    type: "link",
+    attrs: {
+      href: href,
+      target: openInNewWindow ? "_blank" : "_self",
+      rel: "noopener noreferrer nofollow",
+      class: "tiptap-link",
+    },
+  };
+}
+
 export function serializeAsCustomBlock(block: PageBlockEditorModel, definition: PageBlockDefinition): ProsemirrorNode {
   const items = block.data.items.map(i => {
     return {

package/src/yjs/docs-editor/mock.ts

@@ -1,8 +1,17 @@
 import { PageBlockDefinition } from "@supernova-studio/model";
 
 export function getMockPageBlockDefinitions(): PageBlockDefinition[] {
-  // TODO Blocks
-  return blocks;
+  return blocks.map(block => {
+    return {
+      ...block,
+      item: {
+        ...block.item,
+
+        // Make sure variatns array is copied
+        variants: [...block.item.variants],
+      },
+    };
+  });
 }
 
 const blocks: PageBlockDefinition[] = [
@@ -11,6 +20,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Text",
     description: "Plain text",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/text.svg",
     searchKeywords: ["paragraph", "rich text"],
     item: {
       properties: [
@@ -72,6 +82,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 1",
     description: "Main sections within the page",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-1.svg",
     searchKeywords: ["heading", "h1"],
     item: {
       properties: [
@@ -134,6 +145,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 2",
     description: "Section subheadings",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-2.svg",
     searchKeywords: ["heading", "h2"],
     item: {
       properties: [
@@ -196,6 +208,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 3",
     description: "Further subsections",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-3.svg",
     searchKeywords: ["heading", "h3"],
     item: {
       properties: [
@@ -258,6 +271,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 4",
     description: "Details in subsections",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-4.svg",
     searchKeywords: ["heading", "h4"],
     item: {
       properties: [
@@ -320,6 +334,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 5",
     description: "Nuanced details or sub-points",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-5.svg",
     searchKeywords: ["heading", "h5"],
     item: {
       properties: [
@@ -382,6 +397,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Ordered list",
     description: "A list with numbers",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/list-ordered.svg",
     searchKeywords: ["ol"],
     item: {
       properties: [
@@ -443,6 +459,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Unordered list",
     description: "A list with bullet points",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/list-unordered.svg",
     searchKeywords: ["ul", "bullet points"],
     item: {
       properties: [
@@ -504,6 +521,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Divider",
     description: "A section divider",
     category: "Layout",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/divider.svg",
     searchKeywords: ["hr", "line", "rule", "separator"],
     item: {
       properties: [
@@ -563,6 +581,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Blockquote",
     description: "Display a quotation",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/blockquote.svg",
     searchKeywords: ["cite"],
     item: {
       properties: [
@@ -625,6 +644,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Callout",
     description: "Highlight a section of text",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/callout.svg",
     searchKeywords: ["banner", "alert", "note", "tip", "warning"],
     item: {
       properties: [
@@ -687,6 +707,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Image",
     description: "Display an image or Figma frame",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/image.svg",
     searchKeywords: ["image", "figma", "frame", "picture", "photo"],
     item: {
       properties: [
@@ -749,6 +770,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Shortcut links",
     description: "Link to a page or external URL",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/shortcuts.svg",
     searchKeywords: [],
     item: {
       properties: [
@@ -765,6 +787,9 @@ const blocks: PageBlockDefinition[] = [
               width: "Icon",
               aspectRatio: "Square",
             },
+            imageOnLeft: {
+              width: "Medium",
+            },
             iconOnLeft: {
               width: "Icon",
               aspectRatio: "Square",
@@ -929,6 +954,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Accessibility Color Grid",
     description: "Visualize accessibility of your color tokens.",
     category: "Tokens",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/token-a11y-contrast-grid.svg",
     searchKeywords: ["color", "accessibility", "grid", "contrast", "blind", "impairment"],
     item: {
       properties: [
@@ -992,6 +1018,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Embed",
     description: "Embed a generic URL",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/embed.svg",
     searchKeywords: ["embed", "url", "iframe", "site", "import"],
     item: {
       properties: [
@@ -1057,6 +1084,7 @@ const blocks: PageBlockDefinition[] = [
     name: "YouTube",
     description: "Embed a Youtube video",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/embed-youtube.svg",
     searchKeywords: ["embed", "video", "player", "upload"],
     item: {
       properties: [
@@ -1122,6 +1150,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Lottie animation",
     description: "Preview a Lottie animation",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/lottie.svg",
     searchKeywords: ["embed", "lottie", "animation", "rive", "json"],
     item: {
       properties: [
@@ -1225,6 +1254,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Storybook",
     description: "Embed Storybook canvas",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/storybook.svg",
     searchKeywords: ["storybook", "story", "stories", "example", "preview", "code", "react"],
     item: {
       properties: [
@@ -1288,6 +1318,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Figma embed",
     description: "Embed a Figma canvas or prototype",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/embed-figma.svg",
     searchKeywords: ["embed", "figma", "design", "prototype", "canvas"],
     item: {
       properties: [
@@ -1352,6 +1383,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Markdown",
     description: "Render Markdown URL",
     category: "Other",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/markdown.svg",
     searchKeywords: ["md", "embed", "api", "table", "mdx"],
     item: {
       properties: [
@@ -1453,6 +1485,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Table",
     description: "Display a simple table",
     category: "Layout",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/table.svg",
     searchKeywords: ["grid", "data", "spreadsheet", "api"],
     item: {
       properties: [
@@ -1512,6 +1545,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Token detail",
     description: "Show a single design tokens",
     category: "Tokens",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/token-detail.svg",
     searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme"],
     item: {
       properties: [
@@ -1615,6 +1649,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Token list",
     description: "Show a list of design tokens",
     category: "Tokens",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/token-list.svg",
     searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme"],
     item: {
       properties: [
@@ -1724,6 +1759,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Token group",
     description: "Show a group of design tokens",
     category: "Tokens",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/token-list.svg",
     searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme"],
     item: {
       properties: [
@@ -1832,6 +1868,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Code",
     description: "Code description",
     category: "Code",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/code.svg",
     searchKeywords: ["code"],
     item: {
       properties: [
@@ -1890,6 +1927,7 @@ const blocks: PageBlockDefinition[] = [
     name: "React code",
     description: "Render React code",
     category: "Code",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/code-react.svg",
     searchKeywords: ["code", "react", "snippet", "storybook", "editor", "example"],
     item: {
       properties: [
@@ -2025,6 +2063,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Link",
     description: "Preview of a link",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/shortcut-link.svg",
     searchKeywords: [],
     item: {
       properties: [
@@ -2082,6 +2121,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Assets",
     description: "Display icons or illustrations",
     category: "Assets",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/assets.svg",
     searchKeywords: ["icons", "illustrations", "grid", "svg", "logos", "theme"],
     item: {
       properties: [
@@ -2184,6 +2224,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Figma frames",
     description: "Display Figma frames as images",
     category: "Figma",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/figma-frames.svg",
     searchKeywords: ["figma", "frames", "image"],
     item: {
       properties: [
@@ -2266,6 +2307,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Release notes",
     description: "Show version release notes",
     category: "Other",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/release-notes.svg",
     searchKeywords: ["version", "changelog", "history"],
     item: {
       properties: [],
@@ -2318,6 +2360,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Component checklist",
     description: "Highlight specific features of your components",
     category: "Components",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/component-checklist.svg",
     searchKeywords: ["components", "health", "properties", "overview", "status"],
     item: {
       properties: [
@@ -2397,6 +2440,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Component overview table",
     description: "Show the overview of all your components",
     category: "Components",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/component-overview-table.svg",
     searchKeywords: ["components", "health", "properties", "overview", "status"],
     item: {
       properties: [
@@ -2468,6 +2512,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Component health",
     description: "Show component health and additional attributes",
     category: "Components",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/component-health.svg",
     searchKeywords: ["components", "health", "properties", "overview", "status"],
     item: {
       properties: [

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

@@ -472,56 +472,34 @@ const newSchema = {
       },
     },
     image: {
-      name: "image",
-      spec: {
-        group: "block",
-        inline: false,
-        draggable: true,
-        attrs: {
-          src: {
-            default: null,
-          },
-          alt: {
-            default: null,
-          },
-          title: {
-            default: null,
-          },
-        },
-        parseDOM: [
-          {
-            tag: 'img[src]:not([src^="data:"])',
-          },
-        ],
-      },
-      markSet: [],
-      groups: ["block"],
+      group: "block",
+      atom: true,
+      draggable: true,
       attrs: {
-        src: {
-          hasDefault: true,
+        id: {
           default: null,
         },
-        alt: {
-          hasDefault: true,
+        definitionId: {
           default: null,
         },
-        title: {
-          hasDefault: true,
+        variantId: {
           default: null,
         },
+        appearance: {
+          default: "{}",
+        },
+        columns: {
+          default: 1,
+        },
+        items: {
+          default: "[]",
+        },
       },
-      defaultAttrs: {
-        src: null,
-        alt: null,
-        title: null,
-      },
-      contentMatch: {
-        validEnd: true,
-        wrapCache: [],
-      },
-      inlineContent: false,
-      isBlock: true,
-      isText: false,
+      parseDOM: [
+        {
+          tag: "block-node",
+        },
+      ],
     },
   },
   marks: {

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

@@ -177,13 +177,18 @@ function internalProsemirrorNodeToBlock(
   prosemirrorNode: ProsemirrorNode,
   definitionsMap: Map<string, PageBlockDefinition>
 ) {
-  const definitionId = getProsemirrorAttribute(prosemirrorNode, "definitionId", z.string());
+  let 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;
   }
 
+  // TODO: remove
+  if (definitionId === "io.supernova.block.token-detail") {
+    definitionId = "io.supernova.block.token-list";
+  }
+
   const definition = definitionsMap.get(definitionId);
   if (!definition) {
     console.warn(
@@ -363,20 +368,34 @@ function parseRichTextAttribute(mark: ProsemirrorMark): PageBlockTextSpanAttribu
     case "code":
       return { type: "Code" };
     case "link":
-      const itemId = getProsemirrorAttribute(mark, "itemId", z.string().optional());
-      const href = getProsemirrorAttribute(mark, "href", z.string().optional());
-
-      return {
-        type: "Link",
-        openInNewWindow: mark.attrs?.target !== "_self",
-        documentationItemId: itemId,
-        link: href,
-      };
+      return parseProsemirrorLink(mark);
   }
 
   return null;
 }
 
+function parseProsemirrorLink(mark: ProsemirrorMark): PageBlockTextSpanAttribute | null {
+  const href = getProsemirrorAttribute(mark, "href", z.string().optional());
+  if (!href) return null;
+
+  const target = getProsemirrorAttribute(mark, "target", z.string().optional());
+  const openInNewWindow = target === "_blank";
+
+  if (href.startsWith("@")) {
+    return {
+      type: "Link",
+      openInNewWindow: openInNewWindow,
+      documentationItemId: href.split(":")[1],
+    };
+  } else {
+    return {
+      type: "Link",
+      openInNewWindow: openInNewWindow,
+      link: href,
+    };
+  }
+}
+
 //
 // Embed
 //