@supernova-studio/model 0.0.4

package/src/dsm/documentation/index.ts

@@ -0,0 +1,3 @@
+export * from "./block-definitions";
+export * from "./group";
+export * from "./page";

package/src/dsm/documentation/page.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+export const DocumentationPage = z.object({
+  type: z.literal("DocumentationPage"),
+  id: z.string(),
+  persistentId: z.string(),
+  shortPersistentId: z.string(),
+  designSystemVersionId: z.string(),
+  parentPersistentId: z.string().nullish(),
+  sortOrder: z.number(),
+  title: z.string(),
+  slug: z.string(),
+  userSlug: z.string().nullish(),
+  createdAt: z.date(),
+  updatedAt: z.date(),
+});
+
+export type DocumentationPage = z.infer<typeof DocumentationPage>;

package/src/dsm/elements/base.ts

@@ -0,0 +1,49 @@
+import { z } from "zod";
+import { ObjectMeta } from "../../common";
+
+export const DesignElementOrigin = z.object({
+  id: z.string(),
+  sourceId: z.string(),
+  name: z.string(),
+});
+
+export const DesignElementBase = z.object({
+  id: z.string(),
+  persistentId: z.string(),
+  meta: ObjectMeta,
+  designSystemVersionId: z.string(),
+  createdAt: z.date(),
+  updatedAt: z.date(),
+});
+
+export const DesignElementImportedBase = DesignElementBase.extend({
+  origin: DesignElementOrigin,
+});
+
+export const DesignElementGroupablePart = z.object({
+  parentPersistentId: z.string().optional(),
+  sortOrder: z.number(),
+});
+
+export const DesignElementGroupableBase = DesignElementBase.extend(DesignElementGroupablePart.shape);
+
+export const DesignElementGroupableRequiredPart = DesignElementGroupablePart.extend({
+  parentPersistentId: z.string(),
+});
+
+export const DesignElementBrandedPart = z.object({
+  brandPersistentId: z.string(),
+});
+
+export const DesignElementSlugPart = z.object({
+  slug: z.string().optional(),
+  userSlug: z.string().optional(),
+});
+
+export type DesignElementOrigin = z.infer<typeof DesignElementOrigin>;
+export type DesignElementBase = z.infer<typeof DesignElementBase>;
+export type DesignElementGroupablePart = z.infer<typeof DesignElementGroupablePart>;
+export type DesignElementGroupableBase = z.infer<typeof DesignElementGroupableBase>;
+export type DesignElementGroupableRequiredPart = z.infer<typeof DesignElementGroupableRequiredPart>;
+export type DesignElementBrandedPart = z.infer<typeof DesignElementBrandedPart>;
+export type DesignElementSlugPart = z.infer<typeof DesignElementSlugPart>;

package/src/dsm/elements/component.ts

@@ -0,0 +1,48 @@
+import { DbCreateInputOmit, DbUpdate, OmitStrict } from "../../helpers";
+import { z } from "zod";
+import {
+  DesignElementBase,
+  DesignElementBrandedPart,
+  DesignElementGroupableRequiredPart,
+  DesignElementOrigin,
+} from "./base";
+
+export const ComponentOriginPart = z.object({
+  nodeId: z.string().optional(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+});
+
+const ComponentAsset = z.object({
+  assetId: z.string(),
+  assetPath: z.string(),
+});
+
+export const ComponentOrigin = DesignElementOrigin.extend(ComponentOriginPart.shape);
+
+export const Component = DesignElementBase.extend(DesignElementGroupableRequiredPart.shape)
+  .extend(DesignElementBrandedPart.shape)
+  .extend({
+    origin: ComponentOrigin.optional(),
+    thumbnail: ComponentAsset,
+    svg: ComponentAsset.optional(),
+    isAsset: z.boolean(),
+  });
+
+export type ComponentAsset = z.infer<typeof ComponentAsset>;
+export type Component = z.infer<typeof Component>;
+export type ComponentOrigin = z.infer<typeof ComponentOrigin>;
+export type ImportedComponent = OmitStrict<Component, "origin"> & { origin: ComponentOrigin };
+
+export function isImportedComponent(component: Component): component is ImportedComponent {
+  return !!component.origin;
+}
+
+export type CreateComponent = DbCreateInputOmit<Component>;
+export type UpdateComponent = OmitStrict<DbUpdate<Component>, "brandPersistentId" | "designSystemVersionId">;
+
+export type ComponentDiff = {
+  toCreate: CreateComponent[];
+  toUpdate: UpdateComponent[];
+  toDelete: Component["id"][];
+};

package/src/dsm/elements/data/base.ts

@@ -0,0 +1,18 @@
+import { ZodSchema, z } from "zod";
+
+export const TokenDataAliasSchema = z.object({
+  aliasTo: z
+    .string()
+    .optional()
+    .nullable()
+    .transform(v => v ?? undefined),
+});
+
+export function tokenAliasOrValue<T extends ZodSchema>(value: T) {
+  return TokenDataAliasSchema.extend({
+    value: value
+      .optional()
+      .nullable()
+      .transform(v => (v ?? undefined) as z.output<T> | undefined),
+  });
+}

package/src/dsm/elements/data/blur.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+import { tokenAliasOrValue } from "./base";
+import { DimensionTokenData } from "./dimension";
+
+export const BlurType = z.enum(["Layer", "Background"]);
+
+export const BlurValue = z.object({
+  type: BlurType,
+  radius: DimensionTokenData,
+});
+
+export const BlurTokenData = tokenAliasOrValue(BlurValue);
+
+export type BlurType = z.infer<typeof BlurType>;
+export type BlurValue = z.infer<typeof BlurValue>;
+export type BlurTokenData = z.infer<typeof BlurTokenData>;

package/src/dsm/elements/data/border-radius.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+import { tokenAliasOrValue } from "./base";
+
+export const BorderRadiusUnit = z.enum(["Pixels", "Rem", "Percent"]);
+
+export const BorderRadiusValue = z.object({
+  unit: BorderRadiusUnit,
+  measure: z.number(),
+});
+
+export const BorderRadiusTokenData = tokenAliasOrValue(BorderRadiusValue);
+
+export type BorderRadiusUnit = z.infer<typeof BorderRadiusUnit>;
+export type BorderRadiusValue = z.infer<typeof BorderRadiusValue>;
+export type BorderRadiusTokenData = z.infer<typeof BorderRadiusTokenData>;

package/src/dsm/elements/data/border-width.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+import { tokenAliasOrValue } from "./base";
+
+export const BorderWidthUnit = z.enum(["Pixels"]);
+
+export const BorderWidthValue = z.object({
+  unit: BorderWidthUnit,
+  measure: z.number(),
+});
+
+export const BorderWidthTokenData = tokenAliasOrValue(BorderWidthValue);
+
+export type BorderWidthUnit = z.infer<typeof BorderWidthUnit>;
+export type BorderWidthValue = z.infer<typeof BorderWidthValue>;
+export type BorderWidthTokenData = z.infer<typeof BorderWidthTokenData>;

package/src/dsm/elements/data/border.ts

@@ -0,0 +1,21 @@
+import { z } from "zod";
+import { ColorTokenData } from "./color";
+import { BorderWidthTokenData } from "./border-width";
+import { tokenAliasOrValue } from "./base";
+
+export const BorderPosition = z.enum(["Inside", "Center", "Outside"]);
+export const BorderStyle = z.enum(["Dashed", "Dotted", "Solid", "Groove"]);
+
+export const BorderValue = z.object({
+  color: ColorTokenData,
+  width: BorderWidthTokenData,
+  position: BorderPosition,
+  style: BorderStyle.optional(),
+});
+
+export const BorderTokenData = tokenAliasOrValue(BorderValue);
+
+export type BorderPosition = z.infer<typeof BorderPosition>;
+export type BorderStyle = z.infer<typeof BorderStyle>;
+export type BorderValue = z.infer<typeof BorderValue>;
+export type BorderTokenData = z.infer<typeof BorderTokenData>;

package/src/dsm/elements/data/color.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+import { TokenDataAliasSchema, tokenAliasOrValue } from "./base";
+import { OpacityTokenData } from "./opacity";
+
+export const ColorValue = z.object({
+  opacity: OpacityTokenData,
+  color: z.string().or(TokenDataAliasSchema),
+});
+
+export const ColorTokenData = tokenAliasOrValue(ColorValue);
+
+export type ColorValue = z.infer<typeof ColorValue>;
+export type ColorTokenData = z.infer<typeof ColorTokenData>;

package/src/dsm/elements/data/component.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+
+export const ComponentElementData = z.object({
+  value: z.object({
+    thumbnailImage: z.object({
+      value: z.object({
+        url: z.string(),
+        assetId: z.string(),
+      }),
+    }),
+
+    svg: z
+      .object({
+        value: z.object({
+          url: z.string(),
+          assetId: z.string(),
+        }),
+      })
+      .optional(),
+  }),
+});
+
+export type ComponentElementData = z.infer<typeof ComponentElementData>;

package/src/dsm/elements/data/dimension.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+import { tokenAliasOrValue } from "./base";
+
+export const DimensionUnit = z.enum(["Pixels", "Percent", "Rem", "Ms", "Raw", "Points"]);
+
+export const DimensionValue = z.object({
+  unit: DimensionUnit,
+  measure: z.number(),
+});
+
+export const DimensionTokenData = tokenAliasOrValue(DimensionValue);
+
+export type DimensionUnit = z.infer<typeof DimensionUnit>;
+export type DimensionValue = z.infer<typeof DimensionValue>;
+export type DimensionTokenData = z.infer<typeof DimensionTokenData>;

package/src/dsm/elements/data/documentation-block-v1.ts

@@ -0,0 +1,325 @@
+import { z } from "zod";
+import { DesignTokenType } from "../raw-element";
+import { DimensionTokenData } from "./dimension";
+import { ColorTokenInlineData } from "../../properties";
+import { Size } from "../primitives";
+import { nullishToOptional } from "../../../helpers";
+
+//
+// Enums
+//
+
+export enum PageBlockCalloutType {
+  info = "Info",
+  success = "Success",
+  warning = "Warning",
+  error = "Error",
+}
+
+export const PageBlockCalloutTypeSchema = z.nativeEnum(PageBlockCalloutType);
+
+export const PageBlockTypeV1 = z.enum([
+  "Text",
+  "Heading",
+  "Code",
+  "UnorderedList",
+  "OrderedList",
+  "Quote",
+  "Callout",
+  "Divider",
+  "Image",
+  "Embed",
+  "Link",
+  "Shortcuts",
+  "FigmaEmbed",
+  "YoutubeEmbed",
+  "StorybookEmbed",
+  "Token",
+  "TokenGroup",
+  "TokenList",
+  "Component",
+  "ComponentGroup",
+  "Theme",
+  "ComponentSandbox",
+  "Custom",
+  "FigmaFrames",
+  "ComponentAssets",
+  "RenderCode",
+  "Tabs",
+  "TabItem",
+  "Table",
+  "TableRow",
+  "TableCell",
+]);
+
+export const PageBlockCodeLanguage = z.enum([
+  "Angular",
+  "Bash",
+  "C",
+  "Cpp",
+  "Csharp",
+  "CSS",
+  "Dart",
+  "Handlebars",
+  "HTML",
+  "Java",
+  "Javascript",
+  "JSON",
+  "ReactJSX",
+  "ReactTSX",
+  "Kotlin",
+  "Lua",
+  "Markdown",
+  "ObjectiveC",
+  "PHP",
+  "Plain",
+  "Python",
+  "Ruby",
+  "Rust",
+  "Sass",
+  "SCSS",
+  "Svetle",
+  "Swift",
+  "Twig",
+  "Typescript",
+  "Vue",
+  "XML",
+  "YAML",
+]);
+
+export const PageBlockAlignment = z.enum(["Left", "Center", "Stretch", "Right"]);
+export const PageBlockThemeType = z.enum(["Override", "Comparison"]);
+export const PageBlockAssetType = z.enum(["image", "figmaFrame"]);
+
+export const PageBlockTilesAlignment = z.enum(["Center", "FrameHeight"]);
+
+export const PageBlockTilesLayout = z.enum(["C8", "C7", "C6", "C5", "C4", "C3", "C2", "C1", "C1_75"]);
+
+//
+// Support types
+//
+
+export const PageBlockTheme = z.object({
+  themeIds: z.array(z.string()),
+  type: PageBlockThemeType,
+});
+
+export const PageBlockUrlPreview = z.object({
+  title: nullishToOptional(z.string()),
+  description: nullishToOptional(z.string()),
+  thumbnailUrl: nullishToOptional(z.string()),
+});
+
+export const PageBlockFrameOrigin = z.object({
+  sourceFileName: nullishToOptional(z.string()),
+  title: nullishToOptional(z.string()),
+  previewUrl: nullishToOptional(z.string()),
+  valid: nullishToOptional(z.boolean()),
+  referenceId: nullishToOptional(z.string()),
+  assetId: nullishToOptional(z.string()),
+  assetScale: nullishToOptional(z.number()),
+  width: nullishToOptional(z.number()),
+  height: nullishToOptional(z.number()),
+});
+
+export const PageBlockFrame = z.object({
+  persistentId: z.string(),
+  sourceId: z.string(),
+  sourceFrameId: z.string(),
+  title: nullishToOptional(z.string()),
+  description: nullishToOptional(z.string()),
+  backgroundColor: nullishToOptional(ColorTokenInlineData),
+  origin: nullishToOptional(PageBlockFrameOrigin),
+});
+
+export const PageBlockAsset = z.object({
+  type: PageBlockAssetType,
+  id: nullishToOptional(z.string()),
+  url: nullishToOptional(z.string()),
+  figmaFrame: nullishToOptional(PageBlockFrame),
+});
+
+export const PageBlockLinkPreview = z.object({
+  title: nullishToOptional(z.string()),
+  valid: nullishToOptional(z.boolean()),
+});
+
+export const PageBlockShortcut = z.object({
+  persistentId: z.string(),
+  title: nullishToOptional(z.string()),
+  description: nullishToOptional(z.string()),
+  asset: nullishToOptional(PageBlockAsset),
+  documentationItemId: nullishToOptional(z.string()),
+  url: nullishToOptional(z.string()),
+  urlPreview: nullishToOptional(PageBlockUrlPreview),
+  documentationItemPreview: nullishToOptional(PageBlockLinkPreview),
+});
+
+export const PageBlockCustomBlockPropertyImageValue = z.object({
+  asset: nullishToOptional(PageBlockAsset),
+  assetId: nullishToOptional(z.string()),
+  assetUrl: nullishToOptional(z.string()),
+});
+
+export const PageBlockCustomBlockPropertyValue = z.object({
+  key: z.string(),
+  value: z.any(),
+
+  // TODO Artem: for some reason there are cases when there's an array here in the DB
+  // e.g. element id 67451 in the dev db
+
+  // value: z
+  //   .boolean()
+  //   .or(z.number())
+  //   .or(z.string())
+  //   .or(ColorTokenData)
+  //   .or(TypographyTokenData)
+  //   .or(PageBlockCustomBlockPropertyImageValue),
+});
+
+export const PageBlockFigmaFrameProperties = z.object({
+  alignment: PageBlockTilesAlignment,
+  layout: PageBlockTilesLayout,
+  backgroundColor: nullishToOptional(ColorTokenInlineData),
+  showTitles: z.boolean(),
+});
+
+export const PageBlockRenderCodeProperties = z.object({
+  showCode: z.boolean(),
+});
+
+export const PageBlockAssetComponent = z.object({
+  persistentId: z.string(),
+  componentAssetId: z.string(),
+  title: nullishToOptional(z.string()),
+  description: nullishToOptional(z.string()),
+  backgroundColor: nullishToOptional(ColorTokenInlineData),
+});
+
+export const PageBlockTableColumn = z.object({
+  id: z.string(),
+  width: DimensionTokenData,
+});
+
+export const PageBlockTableProperties = z.object({
+  showBorders: z.boolean(),
+  showHeaderRow: z.boolean(),
+  showHeaderColumn: z.boolean(),
+  columns: z.array(PageBlockTableColumn),
+});
+
+export const PageBlockTextSpanAttributeType = z.enum(["Bold", "Italic", "Link", "Strikethrough", "Code"]);
+
+export const PageBlockTextSpanAttribute = z.object({
+  type: PageBlockTextSpanAttributeType,
+  link: nullishToOptional(z.string()),
+  documentationItemId: nullishToOptional(z.string()),
+  openInNewWindow: nullishToOptional(z.boolean()),
+});
+
+export const PageBlockTextSpan = z.object({
+  text: z.string(),
+  attributes: z.array(PageBlockTextSpanAttribute),
+});
+
+export const PageBlockText = z.object({
+  spans: z.array(PageBlockTextSpan),
+});
+
+export type PageBlockTypeV1 = z.infer<typeof PageBlockTypeV1>;
+export type PageBlockTextSpanAttribute = z.infer<typeof PageBlockTextSpanAttribute>;
+export type PageBlockTextSpan = z.infer<typeof PageBlockTextSpan>;
+export type PageBlockText = z.infer<typeof PageBlockText>;
+export type PageBlockFrame = z.infer<typeof PageBlockFrame>;
+export type PageBlockFrameOrigin = z.infer<typeof PageBlockFrameOrigin>;
+
+//
+// Block
+//
+
+const PageBlockBaseV1 = z.object({
+  persistentId: z.string(),
+  type: PageBlockTypeV1,
+
+  // Element linking
+  designObjectId: nullishToOptional(z.string()),
+  designObjectIds: nullishToOptional(z.array(z.string())),
+  tokenType: nullishToOptional(DesignTokenType.or(z.literal("Font"))),
+  showNestedGroups: nullishToOptional(z.boolean()),
+  brandId: nullishToOptional(z.string()),
+
+  // Rich text
+  text: nullishToOptional(PageBlockText),
+  caption: nullishToOptional(z.string()),
+  headingType: nullishToOptional(z.number().min(1).max(3)),
+  codeLanguage: nullishToOptional(PageBlockCodeLanguage),
+  calloutType: nullishToOptional(PageBlockCalloutTypeSchema),
+  urlInput: nullishToOptional(z.string()),
+  url: nullishToOptional(z.string()),
+  urlPreview: nullishToOptional(PageBlockUrlPreview),
+
+  // Image
+  asset: nullishToOptional(PageBlockAsset),
+  alignment: nullishToOptional(PageBlockAlignment),
+
+  // Shortcuts block
+  shortcuts: nullishToOptional(z.array(PageBlockShortcut)),
+
+  // Custom blocks
+  customBlockKey: nullishToOptional(z.string()),
+  customBlockProperties: nullishToOptional(z.array(PageBlockCustomBlockPropertyValue)),
+  variantKey: nullishToOptional(z.string()),
+
+  // Figma frames
+  figmaFrameProperties: nullishToOptional(PageBlockFigmaFrameProperties),
+  figmaFrames: nullishToOptional(z.array(PageBlockFrame)),
+
+  // Generic
+  size: nullishToOptional(Size),
+  backgroundColor: nullishToOptional(ColorTokenInlineData),
+
+  // Render code
+  renderCodeProperties: nullishToOptional(PageBlockRenderCodeProperties),
+
+  // Component assets
+  componentAssets: nullishToOptional(z.array(PageBlockAssetComponent)),
+
+  // Tables
+  tableProperties: nullishToOptional(PageBlockTableProperties),
+  columnId: nullishToOptional(z.string()),
+
+  // Token spreadsheet
+  theme: nullishToOptional(PageBlockTheme),
+  blacklistedElementProperties: nullishToOptional(z.array(z.string())),
+
+  // Arbitrary
+  userMetadata: nullishToOptional(z.string()),
+});
+
+type PageBlockV1Input = z.input<typeof PageBlockBaseV1> & {
+  children: PageBlockV1Input[] | null | undefined;
+};
+
+export const PageBlockV1: z.ZodType<PageBlockV1, z.ZodTypeDef, PageBlockV1Input> = PageBlockBaseV1.extend({
+  children: z.lazy(
+    () =>
+      PageBlockV1.array()
+        .nullish()
+        .transform(t => t ?? []) as z.ZodType<PageBlockV1[], z.ZodTypeDef, PageBlockV1Input[]>
+  ),
+});
+
+export type PageBlockV1 = z.infer<typeof PageBlockBaseV1> & {
+  children: PageBlockV1[];
+};
+
+//
+// Utility methods
+//
+
+export function traversePageBlocksV1(blocks: PageBlockV1[], action: (block: PageBlockV1) => void) {
+  for (const block of blocks) {
+    action(block);
+    traversePageBlocksV1(block.children, action);
+  }
+}

package/src/dsm/elements/data/documentation-block-v2.ts

@@ -0,0 +1,57 @@
+import { z } from "zod";
+import { ColorValue } from "./color";
+import { PageBlockCalloutTypeSchema } from "./documentation-block-v1";
+
+//
+// Enums
+//
+
+export enum PageBlockLinkType {
+  page = "Page",
+  pageHeading = "pageHeading",
+  group = "Group",
+  url = "url",
+}
+
+export const PageBlockLinkTypeSchema = z.enum(["Page", "PageHeading", "Group", "Url"]);
+
+//
+// Definitions
+//
+
+export const PageBlockAppearanceV2 = z.object({
+  itemBackgroundColor: ColorValue,
+});
+
+export const PageBlockItemPropertyValue = z.object({
+  value: z.any(),
+  calloutType: PageBlockCalloutTypeSchema.optional(),
+});
+
+export const PageBlockLinkV2 = z.object({
+  type: PageBlockLinkTypeSchema,
+  pageId: z.string().optional(),
+  pageHeadingId: z.string().optional(),
+  groupId: z.string().optional(),
+  url: z.string().optional(),
+  openInNewTab: z.boolean().optional(),
+});
+
+export const PageBlockItemV2 = z.object({
+  linksTo: PageBlockLinkV2.optional(),
+  props: z.record(PageBlockItemPropertyValue),
+});
+
+export const PageBlockDataV2 = z.object({
+  packageId: z.string(),
+  variantId: z.string().optional(),
+  indentLevel: z.number(),
+  appearance: PageBlockAppearanceV2.optional(),
+  items: z.array(PageBlockItemV2),
+});
+
+export type PageBlockAppearanceV2 = z.infer<typeof PageBlockAppearanceV2>;
+export type PageBlockItemPropertyValue = z.infer<typeof PageBlockItemPropertyValue>;
+export type PageBlockLinkV2 = z.infer<typeof PageBlockLinkV2>;
+export type PageBlockItemV2 = z.infer<typeof PageBlockItemV2>;
+export type PageBlockDataV2 = z.infer<typeof PageBlockDataV2>;

package/src/dsm/elements/data/documentation-page-v1.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+import { DocumentationItemConfiguration } from "./documentation";
+import { PageBlockV1 } from "./documentation-block-v1";
+import { nullishToOptional } from "../../../helpers";
+
+export const DocumentationPageDataV1 = z.object({
+  blocks: z.array(PageBlockV1),
+  configuration: nullishToOptional(DocumentationItemConfiguration),
+});
+
+export const DocumentationPageElementDataV1 = z.object({
+  value: DocumentationPageDataV1,
+});

package/src/dsm/elements/data/documentation-page-v2.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+import { DocumentationItemConfiguration } from "./documentation";
+import { nullishToOptional } from "../../../helpers";
+
+export const DocumentationPageDataV2 = z.object({
+  configuration: nullishToOptional(DocumentationItemConfiguration),
+});
+
+export const DocumentationPageElementDataV2 = z.object({
+  value: DocumentationPageDataV2,
+});

package/src/dsm/elements/data/documentation.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const DocumentationItemConfiguration = z.object({
+  showSidebar: z.boolean(),
+  header: z.any(),
+});
+
+export type DocumentationItemConfiguration = z.infer<typeof DocumentationItemConfiguration>;