@cntrl-site/sdk 1.2.3 → 1.3.0

package/src/schemas/article/ItemState.schema.ts

@@ -0,0 +1,62 @@
+import { z, ZodType } from 'zod';
+import {
+  CustomHoverStateParams, EmbedHoverStateParams,
+  MediaHoverStateParams,
+  RectangleHoverStateParams, RichTextHoverStateParams
+} from '../../types/article/ItemState';
+
+export const getHoverParamsSchema = <T extends z.ZodTypeAny>(schema: T) => {
+  return z.object({
+    timing: z.string(),
+    duration: z.number(),
+    delay: z.number(),
+    value: schema
+  }).optional();
+};
+
+export const ItemHoverStateBaseSchema = z.object({
+  width: getHoverParamsSchema(z.number()),
+  height: getHoverParamsSchema(z.number()),
+  angle: getHoverParamsSchema(z.number()),
+  top: getHoverParamsSchema(z.number()),
+  left: getHoverParamsSchema(z.number()),
+  scale: getHoverParamsSchema(z.number()),
+  blur: getHoverParamsSchema(z.number())
+});
+
+export const MediaHoverStateParamsSchema =
+  z.object({
+    opacity: getHoverParamsSchema(z.number()),
+    radius: getHoverParamsSchema(z.number()),
+    strokeWidth: getHoverParamsSchema(z.number()),
+    strokeColor: getHoverParamsSchema(z.string())
+  })
+    .merge(ItemHoverStateBaseSchema) satisfies ZodType<MediaHoverStateParams>;
+
+export const RectangleHoverStateParamsSchema = z.object({
+  strokeWidth: getHoverParamsSchema(z.number()),
+  radius: getHoverParamsSchema(z.number()),
+  fillColor: getHoverParamsSchema(z.string()),
+  strokeColor: getHoverParamsSchema(z.string()),
+  backdropBlur: getHoverParamsSchema(z.number())
+}).merge(ItemHoverStateBaseSchema) satisfies ZodType<RectangleHoverStateParams>;
+
+export const CustomItemHoverStateParamsSchema = ItemHoverStateBaseSchema satisfies ZodType<CustomHoverStateParams>;
+
+export const EmbedHoverStateParamsSchema = z.object({
+  radius: getHoverParamsSchema(z.number())
+}).merge(ItemHoverStateBaseSchema) satisfies ZodType<EmbedHoverStateParams>;
+
+export const RichTextHoverStateParamsSchema = z.object({
+  color: getHoverParamsSchema(z.string()),
+  letterSpacing: getHoverParamsSchema(z.number()),
+  wordSpacing: getHoverParamsSchema(z.number())
+}).merge(ItemHoverStateBaseSchema) satisfies ZodType<RichTextHoverStateParams>;
+
+export const ItemHoverStateParamsSchema = z.union([
+  EmbedHoverStateParamsSchema,
+  MediaHoverStateParamsSchema,
+  RectangleHoverStateParamsSchema,
+  RichTextHoverStateParamsSchema,
+  CustomItemHoverStateParamsSchema
+]);

package/src/schemas/article/RichTextItem.schema.ts

@@ -0,0 +1,68 @@
+import { z, ZodType } from 'zod';
+import { RichTextBlock, TextAlign, TextDecoration, TextTransform, VerticalAlign } from '../../types/article/RichText';
+import { ItemBaseSchema } from './ItemBase.schema';
+import { ArticleItemType } from '../../types/article/ArticleItemType';
+import { RichTextHoverStateParamsSchema } from './ItemState.schema';
+import { RichTextItem } from '../../types/article/Item';
+
+export const RichTextEntitySchema = z.object({
+  start: z.number().nonnegative(),
+  end: z.number().nonnegative(),
+  type: z.string(),
+  data: z.any().optional()
+});
+
+export const RichTextStyleSchema = z.object({
+  start: z.number().nonnegative(),
+  end: z.number().nonnegative(),
+  style: z.string().min(1),
+  value: z.string().optional()
+});
+
+export const RichTextBlockSchema: z.Schema<RichTextBlock> = z.lazy(() => (
+  z.object({
+    start: z.number().nonnegative(),
+    end: z.number().nonnegative(),
+    type: z.string().min(1),
+    entities: z.array(RichTextEntitySchema).optional(),
+    children: z.array(RichTextBlockSchema).optional(),
+    data: z.any().optional()
+  })
+));
+
+export const RichTextItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.RichText),
+  commonParams: z.object({
+    text: z.string(),
+    blocks: z.array(RichTextBlockSchema).optional()
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable(),
+  ),
+  layoutParams: z.record(
+    z.object({
+      rangeStyles: z.array(RichTextStyleSchema).optional(),
+      textAlign: z.nativeEnum(TextAlign),
+      sizing: z.string(),
+      blur: z.number(),
+      fontSize: z.number(),
+      lineHeight: z.number(),
+      letterSpacing: z.number(),
+      wordSpacing: z.number(),
+      textTransform: z.nativeEnum(TextTransform),
+      verticalAlign: z.nativeEnum(VerticalAlign),
+      color: z.string(),
+      typeFace: z.string(),
+      fontStyle: z.string(),
+      fontWeight: z.number(),
+      fontVariant: z.string(),
+      textDecoration: z.nativeEnum(TextDecoration),
+    })
+  ),
+  state: z.object({
+    hover: z.record(RichTextHoverStateParamsSchema)
+  })
+}) satisfies ZodType<RichTextItem>;

package/src/schemas/article/Section.schema.ts

@@ -0,0 +1,19 @@
+import { SectionHeightMode } from '../../types/article/Section';
+import { z } from 'zod';
+import { ItemSchema } from './Item.schema';
+
+export const SectionHeightSchema = z.object({
+  mode: z.nativeEnum(SectionHeightMode),
+  units: z.number().nonnegative(),
+  vhUnits: z.number().nonnegative().optional()
+})
+
+export const SectionSchema = z.object({
+  id: z.string().min(1),
+  items: z.array(ItemSchema),
+  name: z.string().optional(),
+  height: z.record(SectionHeightSchema),
+  position: z.record(z.number()),
+  hidden: z.record(z.boolean()),
+  color: z.record(z.nullable(z.string()))
+});

package/src/schemas/keyframe/Keyframes.schema.ts

@@ -0,0 +1,128 @@
+import { KeyframeType } from '../../types/keyframe/Keyframe';
+import { z } from 'zod';
+
+const KeyframesBaseSchema = z.object({
+  id: z.string().min(1),
+  layoutId: z.string().min(1),
+  itemId: z.string().min(1),
+  position: z.number()
+});
+
+const DimensionsKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Dimensions),
+  value: z.object({
+    width: z.number().nonnegative(),
+    height: z.number().nonnegative()
+  })
+});
+
+const PositionKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Position),
+  value: z.object({
+    top: z.number(),
+    left: z.number()
+  })
+});
+
+const RotationKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Rotation),
+  value: z.object({
+    angle: z.number()
+  })
+});
+
+const BorderRadiusKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.BorderRadius),
+  value: z.object({
+    radius: z.number().nonnegative()
+  })
+});
+
+const BorderWidthKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.BorderWidth),
+  value: z.object({
+    borderWidth: z.number().nonnegative()
+  })
+});
+
+const ColorKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Color),
+  value: z.object({
+    color: z.string()
+  })
+});
+
+const BorderColorKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.BorderColor),
+  value: z.object({
+    color: z.string()
+  })
+});
+
+const OpacityKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Opacity),
+  value: z.object({
+    opacity: z.number().nonnegative()
+  })
+});
+
+const ScaleKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Scale),
+  value: z.object({
+    scale: z.number().nonnegative()
+  })
+});
+
+const BlurKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Blur),
+  value: z.object({
+    blur: z.number()
+  })
+});
+
+const BackdropBlurKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.BackdropBlur),
+  value: z.object({
+    backdropBlur: z.number()
+  })
+});
+
+const TextColorKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.TextColor),
+  value: z.object({
+    color: z.string()
+  })
+});
+
+const LetterSpacingKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.LetterSpacing),
+  value: z.object({
+    letterSpacing: z.number()
+  })
+});
+
+const WordSpacingKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.WordSpacing),
+  value: z.object({
+    wordSpacing: z.number()
+  })
+});
+
+export const KeyframeSchema = z.discriminatedUnion('type', [
+  DimensionsKeyframeSchema,
+  PositionKeyframeSchema,
+  RotationKeyframeSchema,
+  BorderRadiusKeyframeSchema,
+  BorderWidthKeyframeSchema,
+  ColorKeyframeSchema,
+  BorderColorKeyframeSchema,
+  OpacityKeyframeSchema,
+  ScaleKeyframeSchema,
+  BlurKeyframeSchema,
+  BackdropBlurKeyframeSchema,
+  TextColorKeyframeSchema,
+  LetterSpacingKeyframeSchema,
+  WordSpacingKeyframeSchema
+]);
+
+export const KeyframesSchema = z.array(KeyframeSchema);

package/src/schemas/project/Layout.schema.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+export const LayoutSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  startsWith: z.number().nonnegative(),
+  exemplary: z.number().positive()
+});

package/src/schemas/project/Project.schema.ts

@@ -0,0 +1,48 @@
+import { z } from 'zod';
+import { LayoutSchema } from './Layout.schema';
+import { FontFileTypes } from '../../types/project/Fonts';
+
+export const ProjectSchema = z.object({
+  id: z.string().min(1),
+  html: z.object({
+    head: z.string(),
+    afterBodyOpen: z.string(),
+    beforeBodyClose: z.string()
+  }),
+  meta: z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    opengraphThumbnail: z.string().optional(),
+    keywords: z.string().optional(),
+    favicon: z.string().optional()
+  }),
+  layouts: z.array(LayoutSchema),
+  pages: z.array(z.object({
+    title: z.string(),
+    articleId: z.string().min(1),
+    slug: z.string(),
+    meta: z.object({
+      title: z.string().optional(),
+      description: z.string().optional(),
+      opengraphThumbnail: z.string().optional(),
+      keywords: z.string().optional(),
+      enabled: z.boolean()
+    }).optional(),
+    id: z.string().min(1)
+  })),
+  fonts: z.object({
+    google: z.string(),
+    adobe: z.string(),
+    custom: z.array(z.object({
+      name: z.string().min(1),
+      style: z.string().min(1),
+      weight: z.number(),
+      files: z.array(
+        z.object({
+          type: z.nativeEnum(FontFileTypes),
+          url: z.string().url()
+        })
+      )
+    }))
+  })
+});

package/src/types/article/Article.ts

@@ -0,0 +1,6 @@
+import { Section } from './Section';
+
+export interface Article {
+  id: string;
+  sections: Section[];
+}

package/src/types/article/ArticleItemType.ts

@@ -0,0 +1,9 @@
+export enum ArticleItemType {
+  Image = 'image',
+  RichText = 'richtext',
+  Video = 'video',
+  Rectangle = 'rectangle',
+  VimeoEmbed = 'vimeo-embed',
+  YoutubeEmbed = 'youtube-embed',
+  Custom = 'custom'
+}

package/src/types/article/Item.ts

@@ -0,0 +1,150 @@
+import { RichTextBlock, RichTextStyle, TextAlign, TextDecoration, TextTransform, VerticalAlign } from './RichText';
+import { ArticleItemType } from './ArticleItemType';
+import { ItemArea } from './ItemArea';
+import { ItemState } from './ItemState';
+
+export type ItemAny = Item<ArticleItemType>;
+
+export interface Item<T extends ArticleItemType> {
+  id: string;
+  type: T;
+  area: Record<LayoutIdentifier, ItemArea>;
+  hidden: Record<LayoutIdentifier, boolean>;
+  link?: Link;
+  sticky: Record<LayoutIdentifier, StickyParams | null>;
+  commonParams: ItemCommonParamsMap[T];
+  state: ItemState<T>;
+  layoutParams: Record<LayoutIdentifier, ItemLayoutParamsMap[T]>;
+}
+
+export interface ItemCommonParamsMap {
+  [ArticleItemType.Image]: ImageCommonParams;
+  [ArticleItemType.Video]: VideoCommonParams;
+  [ArticleItemType.RichText]: RichTextCommonParams;
+  [ArticleItemType.Rectangle]: RectangleCommonParams;
+  [ArticleItemType.VimeoEmbed]: VimeoEmbedCommonParams;
+  [ArticleItemType.YoutubeEmbed]: YoutubeEmbedCommonParams;
+  [ArticleItemType.Custom]: CustomCommonParams;
+}
+
+export interface ItemLayoutParamsMap {
+  [ArticleItemType.Image]: ImageLayoutParams;
+  [ArticleItemType.Video]: VideoLayoutParams;
+  [ArticleItemType.RichText]: RichTextLayoutParams;
+  [ArticleItemType.Rectangle]: RectangleLayoutParams;
+  [ArticleItemType.VimeoEmbed]: VimeoEmbedLayoutParams;
+  [ArticleItemType.YoutubeEmbed]: YoutubeEmbedLayoutParams;
+  [ArticleItemType.Custom]: CustomLayoutParams;
+}
+
+interface MediaCommonParams {
+  url: string;
+}
+
+interface VideoCommonParams extends MediaCommonParams {}
+
+interface ImageCommonParams extends MediaCommonParams {}
+
+interface RichTextCommonParams {
+  text: string;
+  blocks?: RichTextBlock[];
+}
+
+interface RectangleCommonParams {
+  ratioLock: boolean;
+}
+
+interface CustomCommonParams {
+  name: string;
+}
+
+interface VimeoEmbedCommonParams {
+  play: 'on-hover' | 'on-click' | 'auto';
+  controls: boolean;
+  loop: boolean;
+  muted: boolean;
+  pictureInPicture: boolean;
+  url: string;
+}
+
+interface YoutubeEmbedCommonParams {
+  play: 'on-hover' | 'on-click' | 'auto';
+  controls: boolean;
+  loop: boolean;
+  url: string;
+}
+
+interface MediaLayoutParams {
+  opacity: number;
+  radius: number;
+  strokeWidth: number;
+  strokeColor: string;
+  blur: number;
+}
+
+interface CustomLayoutParams {}
+
+interface VimeoEmbedLayoutParams {
+  radius: number;
+  blur: number;
+}
+
+interface YoutubeEmbedLayoutParams {
+  radius: number;
+  blur: number;
+}
+
+interface ImageLayoutParams extends MediaLayoutParams {}
+
+interface VideoLayoutParams extends MediaLayoutParams {
+  autoplay: boolean;
+}
+
+interface RichTextLayoutParams {
+  rangeStyles?: RichTextStyle[];
+  textAlign: TextAlign;
+  sizing: string;
+  blur: number;
+  fontSize: number;
+  lineHeight: number;
+  letterSpacing: number;
+  wordSpacing: number;
+  textTransform: TextTransform;
+  verticalAlign: VerticalAlign;
+  color: string;
+  typeFace: string;
+  fontStyle: string;
+  fontWeight: number;
+  textDecoration: TextDecoration;
+  fontVariant: string;
+}
+
+interface RectangleLayoutParams {
+  radius: number;
+  strokeWidth: number;
+  fillColor: string;
+  strokeColor: string;
+  blur: number;
+  backdropBlur: number;
+  blurMode: 'default' | 'backdrop';
+}
+
+export interface StickyParams {
+  from: number;
+  to?: number;
+}
+
+export interface Link {
+  url: string;
+  target: string;
+}
+
+type LayoutIdentifier = string;
+
+export type VideoItem = Item<ArticleItemType.Video>;
+export type RectangleItem = Item<ArticleItemType.Rectangle>;
+export type ImageItem = Item<ArticleItemType.Image>;
+export type RichTextItem = Item<ArticleItemType.RichText>;
+export type VimeoEmbedItem = Item<ArticleItemType.VimeoEmbed>;
+export type YoutubeEmbedItem = Item<ArticleItemType.YoutubeEmbed>;
+export type CustomItem = Item<ArticleItemType.Custom>;

package/src/types/article/ItemArea.ts

@@ -0,0 +1,29 @@
+export enum AnchorSide {
+  Top = 'top',
+  Bottom = 'bottom',
+  Center = 'center'
+}
+
+export enum ScaleAnchor {
+  TopLeft = 'top-left',
+  TopCenter = 'top-center',
+  TopRight = 'top-right',
+  MiddleLeft = 'middle-left',
+  MiddleCenter = 'middle-center',
+  MiddleRight = 'middle-right',
+  BottomLeft = 'bottom-left',
+  BottomCenter = 'bottom-center',
+  BottomRight = 'bottom-right'
+}
+
+export interface ItemArea {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  zIndex: number;
+  angle: number;
+  anchorSide?: AnchorSide;
+  scale: number;
+  scaleAnchor: ScaleAnchor;
+}

package/src/types/article/ItemState.ts

@@ -0,0 +1,64 @@
+import { ArticleItemType } from './ArticleItemType';
+
+type LayoutIdentifier = string;
+
+export interface ItemState<T extends ArticleItemType> {
+  hover: Record<LayoutIdentifier, ItemHoverStatesMap[T]>;
+}
+
+export type ItemHoverState = ItemHoverStatesMap[ArticleItemType];
+
+export interface ItemHoverStatesMap {
+  [ArticleItemType.Image]: MediaHoverStateParams;
+  [ArticleItemType.Video]: MediaHoverStateParams;
+  [ArticleItemType.RichText]: RichTextHoverStateParams;
+  [ArticleItemType.Rectangle]: RectangleHoverStateParams;
+  [ArticleItemType.VimeoEmbed]: EmbedHoverStateParams;
+  [ArticleItemType.YoutubeEmbed]: EmbedHoverStateParams;
+  [ArticleItemType.Custom]: CustomHoverStateParams;
+}
+
+export interface HoverParams<T> {
+  timing: string;
+  duration: number;
+  delay: number;
+  value: T;
+}
+
+interface ItemHoversBaseMap {
+  width?: HoverParams<number>;
+  height?: HoverParams<number>;
+  angle?:  HoverParams<number>;
+  top?:  HoverParams<number>;
+  left?:  HoverParams<number>;
+  scale?:  HoverParams<number>;
+  blur?: HoverParams<number>;
+}
+
+export interface MediaHoverStateParams extends ItemHoversBaseMap {
+  opacity?: HoverParams<number>;
+  radius?: HoverParams<number>;
+  strokeWidth?: HoverParams<number>;
+  strokeColor?: HoverParams<string>;
+}
+
+export interface RichTextHoverStateParams extends ItemHoversBaseMap {
+  color?: HoverParams<string>;
+  letterSpacing?: HoverParams<number>;
+  wordSpacing?: HoverParams<number>;
+}
+
+
+export interface RectangleHoverStateParams extends ItemHoversBaseMap {
+  radius?: HoverParams<number>;
+  strokeWidth?: HoverParams<number>;
+  fillColor?: HoverParams<string>;
+  strokeColor?: HoverParams<string>;
+  backdropBlur?: HoverParams<number>;
+}
+
+export interface EmbedHoverStateParams extends ItemHoversBaseMap {
+  radius?: HoverParams<number>;
+}
+
+export interface CustomHoverStateParams extends ItemHoversBaseMap {}

package/src/types/article/RichText.ts

@@ -0,0 +1,46 @@
+export interface RichTextEntity {
+  start: number;
+  end: number;
+  type: string;
+  data?: any;
+}
+
+export interface RichTextStyle {
+  start: number;
+  end: number;
+  style: string;
+  value?: string;
+}
+
+export interface RichTextBlock {
+  start: number;
+  end: number;
+  type: string;
+  entities?: RichTextEntity[];
+  children?: RichTextBlock[];
+  data?: any;
+}
+
+export enum TextAlign {
+  Left = 'left',
+  Right = 'right',
+  Center = 'center',
+  Justify = 'justify'
+}
+
+export enum TextTransform {
+  None = 'none',
+  Uppercase = 'uppercase',
+  Lowercase = 'lowercase'
+}
+
+export enum VerticalAlign {
+  Super = 'super',
+  Sub = 'sub',
+  Unset = 'unset'
+}
+
+export enum TextDecoration {
+  Underline = 'underline',
+  None = 'none'
+}

package/src/types/article/Section.ts

@@ -0,0 +1,22 @@
+import { ItemAny } from './Item';
+
+export enum SectionHeightMode {
+  ControlUnits = 'control-units' ,
+  ViewportHeightUnits = 'viewport-height-units'
+}
+
+export interface SectionHeight {
+  mode: SectionHeightMode;
+  units: number;
+  vhUnits?: number;
+}
+
+export interface Section {
+  id: string;
+  name?: string;
+  height: Record<string, SectionHeight>;
+  hidden: Record<string, boolean>;
+  items: ItemAny[];
+  position: Record<string, number>;
+  color: Record<string, string | null>;
+}