@upstart.gg/sdk 0.0.96 → 0.0.97

package/src/shared/bricks/props/tests/helpers.test.ts

@@ -0,0 +1,133 @@
+import { describe, it, expect } from "vitest";
+import { Type } from "@sinclair/typebox";
+import { prop, group, defineProps, getGroupInfo, getStyleProperties } from "../helpers";
+import { manifest as sampleManifest } from "../../manifests/navbar.manifest";
+
+describe("Props helpers test suite", () => {
+  describe("prop", () => {
+    it("should create a schema with the correct title", () => {
+      const schema = Type.String();
+      const result = prop({ title: "Test Title", schema });
+      expect(result.title).toBe("Test Title");
+    });
+
+    it("should add description when provided", () => {
+      const schema = Type.String();
+      const result = prop({ title: "Test", schema, description: "Test description" });
+      expect(result.description).toBe("Test description");
+    });
+
+    it("should add $id when provided", () => {
+      const schema = Type.String();
+      const result = prop({ title: "Test", schema, $id: "testId" });
+      expect(result.$id).toBe("testId");
+    });
+  });
+
+  describe("group", () => {
+    it("should create a group object with the correct title", () => {
+      const children = {
+        test: Type.String({ title: "Test String" }),
+      };
+      const result = group({ title: "Test Group", children });
+      expect(result.title).toBe("Test Group");
+    });
+
+    it("should have the correct default tab", () => {
+      const children = { test: Type.String() };
+      const result = group({ title: "Test Group", children });
+      const info = getGroupInfo(result);
+      expect(info.tab).toBe("common");
+    });
+
+    it("should use the provided tab", () => {
+      const children = { test: Type.String() };
+      const result = group({ title: "Test Group", children });
+      const info = getGroupInfo(result);
+      expect(info.tab).toBe("common");
+    });
+
+    it("should create a proper group ID from the title", () => {
+      const children = { test: Type.String() };
+      const result = group({ title: "Test Group Name", children });
+      const info = getGroupInfo(result);
+      expect(info.meta.group).toBe(true);
+    });
+
+    it("should contain the correct children", () => {
+      const children = {
+        stringProp: Type.String({ title: "String Prop" }),
+        numberProp: Type.Number({ title: "Number Prop" }),
+      };
+      const result = group({ title: "Test Group", children });
+
+      expect(result.properties.stringProp).toBeDefined();
+      expect(result.properties.stringProp.title).toBe("String Prop");
+      expect(result.properties.numberProp).toBeDefined();
+      expect(result.properties.numberProp.title).toBe("Number Prop");
+    });
+  });
+
+  describe("defineProps", () => {
+    it("should combine props into a single object schema", () => {
+      const props = {
+        stringProp: Type.String({ title: "String Prop" }),
+        groupProp: group({
+          title: "Group Prop",
+          children: {
+            nestedProp: Type.Number({ title: "Nested Prop" }),
+          },
+        }),
+      };
+
+      const result = defineProps(props);
+
+      expect(result.type).toBe("object");
+      expect(result.properties.stringProp).toBeDefined();
+      expect(result.properties.groupProp).toBeDefined();
+      expect(result.properties.groupProp.properties.nestedProp).toBeDefined();
+    });
+
+    it("should include common props", () => {
+      const props = {
+        stringProp: Type.String({ title: "String Prop" }),
+      };
+
+      const result = defineProps(props);
+
+      // Check for common props (this assumes the structure of commonProps)
+      // You may need to adjust this expectation based on the actual structure
+      expect(result.properties).toHaveProperty("stringProp");
+    });
+  });
+
+  describe("getGroupInfo", () => {
+    it("should use 'common' as default tab when not specified", () => {
+      const schema = Type.Object(
+        {},
+        {
+          title: "Test",
+          metadata: { group: "test" },
+        },
+      );
+
+      const info = getGroupInfo(schema);
+
+      expect(info.tab).toBe("common");
+    });
+  });
+
+  describe("getStyleProperties", () => {
+    it("should extract style properties from a schema", () => {
+      const styles = getStyleProperties(sampleManifest.props);
+      expect(styles).toMatchObject({
+        "brand.color": "#styles:color",
+        "container.backgroundColor": "#styles:backgroundColor",
+        "container.border": "#styles:border",
+        "container.fixedPositioned": "#styles:fixedPositioned",
+        "container.shadow": "#styles:shadow",
+        "navigation.color": "#styles:color",
+      });
+    });
+  });
+});

package/src/shared/bricks/props/tests/image.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { image } from "../image";
+
+describe("Image prop test suite", () => {
+  describe("image", () => {
+    it("should have the correct title", () => {
+      const imageProp = image();
+      expect(imageProp.title).toBe("Image");
+    });
+
+    it("should have a custom title when provided", () => {
+      const imageProp = image("Custom Image");
+      expect(imageProp.title).toBe("Custom Image");
+    });
+
+    it("should have the correct UI field type", () => {
+      const imageProp = image();
+      expect(imageProp["ui:field"]).toBe("image");
+    });
+
+    it("should accept image files", () => {
+      const imageProp = image();
+      expect(imageProp["ui:accept"]).toBe("image/*");
+    });
+
+    it("should not show image search by default", () => {
+      const imageProp = image();
+      expect(imageProp["ui:show-img-search"]).toBe(false);
+    });
+
+    it("should show image search when specified", () => {
+      const imageProp = image("Image", { showImgSearch: true });
+      expect(imageProp["ui:show-img-search"]).toBe(true);
+    });
+
+    describe("src property", () => {
+      it("should have correct src title", () => {
+        const imageProp = image("Custom Image");
+        expect(imageProp.properties?.src.title).toBe("Custom Image");
+      });
+
+      it("should have default image URL when specified", () => {
+        const defaultUrl = "https://example.com/image.jpg";
+        const imageProp = image("Image", { defaultImageUrl: defaultUrl });
+        expect(imageProp.properties?.src.default).toBe(defaultUrl);
+      });
+    });
+
+    describe("alt property", () => {
+      it("should have the correct title", () => {
+        const imageProp = image();
+        expect(imageProp.properties?.alt.title).toBe("Alternate Text");
+      });
+
+      it("should have a description", () => {
+        const imageProp = image();
+        expect(imageProp.properties?.alt.description).toContain("screen readers and SEO");
+      });
+
+      it("should have a placeholder", () => {
+        const imageProp = image();
+        expect(imageProp.properties?.alt["ui:placeholder"]).toBe("Your image description");
+      });
+
+      it("should be optional", () => {
+        const imageProp = image();
+        expect(imageProp.properties?.alt.required).toBeUndefined();
+      });
+    });
+  });
+});

package/src/shared/bricks/props/tests/padding.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { padding } from "../padding";
+
+describe("Padding props test suite", () => {
+  describe("padding", () => {
+    it("should have correct title and group metadata", () => {
+      const prop = padding();
+      expect(prop.title).toBe("Padding");
+      expect(prop["ui:group"]).toBe("spacing");
+    });
+  });
+});

package/src/shared/bricks/props/tests/string.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect } from "vitest";
+import { string, url, urlOrPageId } from "../string";
+
+describe("String prop test suite", () => {
+  describe("string", () => {
+    it("should have the correct title", () => {
+      const stringProp = string("Test String");
+      expect(stringProp.title).toBe("Test String");
+    });
+
+    it("should have the correct default value when provided", () => {
+      const stringProp = string("Test String", "Default value");
+      expect(stringProp.default).toBe("Default value");
+    });
+
+    it("should apply additional options when provided", () => {
+      const stringProp = string("Test String", undefined, { minLength: 5, maxLength: 10 });
+      expect(stringProp.minLength).toBe(5);
+      expect(stringProp.maxLength).toBe(10);
+    });
+
+    it("should apply UI field options when provided", () => {
+      const stringProp = string("Test String", undefined, { "ui:field": "textarea" });
+      expect(stringProp["ui:field"]).toBe("textarea");
+    });
+  });
+
+  describe("url", () => {
+    it("should have the correct title", () => {
+      const urlProp = url();
+      expect(urlProp.title).toBe("URL");
+    });
+
+    it("should have custom title when provided", () => {
+      const urlProp = url("Custom URL");
+      expect(urlProp.title).toBe("Custom URL");
+    });
+
+    it("should have the correct format", () => {
+      const urlProp = url();
+      expect(urlProp.format).toBe("uri");
+    });
+
+    it("should use the correct UI field", () => {
+      const urlProp = url();
+      expect(urlProp["ui:field"]).toBe("url");
+    });
+  });
+
+  describe("urlOrPageId", () => {
+    it("should have the correct title", () => {
+      const prop = urlOrPageId();
+      expect(prop.title).toBe("URL or Page ID");
+    });
+
+    it("should have custom title when provided", () => {
+      const prop = urlOrPageId("Custom Link");
+      expect(prop.title).toBe("Custom Link");
+    });
+
+    it("should be a union type", () => {
+      const prop = urlOrPageId();
+      expect(prop.anyOf).toBeDefined();
+      expect(prop.anyOf?.length).toBe(2);
+    });
+
+    it("should contain URL and page-id options", () => {
+      const prop = urlOrPageId();
+
+      // First option should be URL
+      const urlOption = prop.anyOf?.[0];
+      expect(urlOption?.format).toBe("uri");
+
+      // Second option should be page-id
+      const pageIdOption = prop.anyOf?.[1];
+      expect(pageIdOption?.["ui:field"]).toBe("page-id");
+    });
+  });
+});

package/src/shared/bricks/props/text.ts

@@ -0,0 +1,66 @@
+import { type StringOptions, Type, type Static } from "@sinclair/typebox";
+import { prop } from "./helpers";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function fontSize(defaultValue = "inherit", title = "Font size") {
+  return prop({
+    title,
+    schema: Type.Union(
+      [
+        Type.Literal("inherit", { title: "Inherit from parent" }),
+        Type.Literal("text-xs", { title: "Extra small" }),
+        Type.Literal("text-sm", { title: "Small" }),
+        Type.Literal("text-base", { title: "Base size" }),
+        Type.Literal("text-lg", { title: "Large" }),
+        Type.Literal("text-xl", { title: "Extra large" }),
+        Type.Literal("text-2xl", { title: "Extra large (2x)" }),
+        Type.Literal("text-3xl", { title: "Extra large (3x)" }),
+        Type.Literal("text-4xl", { title: "Extra large (4x)" }),
+        Type.Literal("text-5xl", { title: "Extra large (5x)" }),
+        Type.Literal("text-6xl", { title: "Extra large (6x)" }),
+        Type.Literal("text-7xl", { title: "Extra large (7x)" }),
+      ],
+      {
+        default: defaultValue,
+        "ui:styleId": "#styles:fontSize",
+        "ui:field": "enum",
+        "ui:display": "select",
+      },
+    ),
+  });
+}
+
+export type FontSizeSettings = Static<ReturnType<typeof fontSize>>;
+
+type TextContentOptions = {
+  showInSettings?: boolean;
+  disableSizing?: boolean;
+  disableAlignment?: boolean;
+};
+
+export function textContent({
+  title = "Text",
+  default: defaults,
+  showInSettings,
+  disableSizing = false,
+  disableAlignment = false,
+}: TextContentOptions & StringOptions = {}) {
+  return prop({
+    title,
+    description:
+      "Text content. Can contain basic HTML tags like `<strong>`, `<em>`, `<br>` and `<a>` as well as `<p>` and `<span>` and lists <ul> <ol> <li>.",
+    schema: Type.String({
+      $id: "content:text",
+      default: defaults ?? "My text",
+      "ui:disable-sizing": disableSizing,
+      "ui:disable-alignment": disableAlignment,
+      "ui:field": showInSettings ? "string" : "hidden",
+    }),
+  });
+}
+
+export type TextContentSettings = Static<ReturnType<typeof textContent>>;
+
+export function textContentRef(options: TextContentOptions & StringOptions = {}) {
+  return typedRef("content:text", options);
+}

package/src/shared/bricks/props/types.ts

@@ -0,0 +1,57 @@
+import type { Static, TObject, TProperties, TSchema } from "@sinclair/typebox";
+import type { BrickManifest } from "~/shared/brick-manifest";
+import type { Brick } from "~/shared/bricks";
+
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export type BrickProps<T extends BrickManifest> = {
+  brick: Omit<Brick, "props" | "mobileProps"> & {
+    props: Static<T["props"]>;
+    mobileProps?: Partial<Static<T["props"]>>;
+  };
+  editable?: boolean;
+  selected?: boolean;
+  isContainerChild?: boolean;
+};
+
+export type BrickPropCategory = "settings" | "presets" | "content";
+
+// Export the TSchema type for use in other files
+export type { TSchema };
+
+type CommonMetadata = {
+  "ui:responsive"?: boolean | "mobile" | "mobile-only";
+  "ui:hidden"?: boolean | "if-empty";
+  "ui:scope"?: "site" | "page";
+};
+
+export type FieldMetadata = CommonMetadata & {
+  "ui:field"?: string;
+  [key: string]: string | number | boolean | undefined;
+};
+
+export type GroupMetadata = CommonMetadata & {
+  group?: string;
+  groupTab?: string;
+  [key: string]: string | number | boolean | undefined;
+};
+
+export interface PropSchema extends TSchema {
+  title: string;
+}
+
+export type Prop<T = TSchema> = {
+  title: string;
+  description?: string;
+  schema: T;
+  [key: string]: unknown;
+};
+
+export type PropGroup<T extends TProperties = TProperties> = {
+  title: string;
+  category: BrickPropCategory;
+  children: T | TObject<T>;
+  metadata?: GroupMetadata;
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  options?: Record<string, any>;
+};

package/src/shared/bricks.ts

@@ -0,0 +1,232 @@
+import { Type, type Static } from "@sinclair/typebox";
+import { customAlphabet } from "nanoid";
+import { defaultProps } from "./bricks/manifests/all-manifests";
+import { backgroundRef } from "./bricks/props/background";
+import { border, borderRef } from "./bricks/props/border";
+import { preset, presetRef } from "./bricks/props/preset";
+import { merge } from "lodash-es";
+import { cssLength, cssLengthRef } from "./bricks/props/css-length";
+import { enumProp } from "./bricks/props/enum";
+import { containerLayoutRef } from "./bricks/props/container";
+import { StringEnum } from "./utils/schema";
+
+/**
+ * Generates a unique identifier for bricks.
+ */
+export const generateId = customAlphabet("1234567890azertyuiopqsdfghjklmwxcvbnAZERTYUIOPQSDFGHJKLMWXCVBN", 7);
+
+const brickAbsolutePositionSchema = Type.Object({
+  left: Type.Optional(
+    Type.String({
+      title: "top",
+      description: "The left position in css unit.",
+    }),
+  ),
+  top: Type.Optional(
+    Type.String({
+      title: "top",
+      description: "The top position in css unit.",
+    }),
+  ),
+  right: Type.Optional(
+    Type.String({
+      title: "right",
+      description: "The right position in css unit.",
+    }),
+  ),
+  bottom: Type.Optional(
+    Type.String({
+      title: "bottom",
+      description: "The bottom position in css unit.",
+    }),
+  ),
+  inset: Type.Optional(
+    Type.String({
+      title: "inset",
+      description: "The inset position in css unit.",
+    }),
+  ),
+  translateX: Type.Optional(
+    Type.String({
+      title: "translateX",
+      description: "The translateX position in css unit.",
+    }),
+  ),
+  translateY: Type.Optional(
+    Type.String({
+      title: "translateY",
+      description: "The translateY position in css unit.",
+    }),
+  ),
+  rotate: Type.Optional(
+    Type.String({
+      title: "rotate",
+      description: "The rotate position in css unit.",
+    }),
+  ),
+});
+
+export type BrickAbsolutePosition = Static<typeof brickAbsolutePositionSchema>;
+
+export const brickTypeSchema = StringEnum(Object.keys(defaultProps), {
+  title: "Brick type",
+});
+
+export const brickSchema = Type.Object(
+  {
+    id: Type.String({
+      title: "ID",
+      description: "A unique identifier for the brick.",
+    }),
+    type: brickTypeSchema,
+    props: Type.Any({
+      title: "Props",
+      description: "The props of the brick. The available props depends on the brick type.",
+    }),
+    // props: Type.Object({
+    //   ...commonProps,
+    //   $children: Type.Optional(
+    //     Type.Array(Type.Ref("brick"), {
+    //       title: "Children",
+    //       description: "The children of the brick. Only used when the brick is a container.",
+    //     }),
+    //   ),
+    // }),
+    mobileProps: Type.Optional(
+      Type.Object(
+        {},
+        { additionalProperties: true, description: "The props for mobile, merged with the default props" },
+      ),
+    ),
+    // props: Type.Record(Type.String(), Type.Any(), {
+    //   description: "The available props depends on the brick type.",
+    // }),
+    // mobileProps: Type.Optional(
+    //   Type.Record(Type.String(), Type.Any(), {
+    //     description: "The props for mobile, merged with the default props",
+    //   }),
+    // ),
+
+    // absolutePosition: Type.Optional(
+    //   Type.Object(
+    //     {
+    //       mobile: brickAbsolutePositionSchema,
+    //       desktop: brickAbsolutePositionSchema,
+    //     },
+    //     {
+    //       title: "Position",
+    //       description:
+    //         "The position of the brick in the layout. Optional when the brick is a container child",
+    //       additionalProperties: false,
+    //     },
+    //   ),
+    // ),
+  },
+  { $id: "brick", additionalProperties: true },
+);
+
+export type Brick = Static<typeof brickSchema>;
+
+export const sectionProps = Type.Object(
+  {
+    layout: Type.Optional(
+      containerLayoutRef({
+        options: { disableGrid: true },
+        defaults: {
+          gap: "gap-4",
+          wrap: true,
+          fillSpace: false,
+          alignItems: "items-stretch",
+          justifyContent: "justify-stretch",
+        },
+      }),
+    ),
+    background: Type.Optional(backgroundRef()),
+    preset: Type.Optional(presetRef),
+    border: Type.Optional(borderRef),
+    minHeight: Type.Optional(
+      cssLengthRef({ title: "Minimum height", default: "0px", description: "The min height of the section" }),
+    ),
+    maxWidth: Type.Optional(
+      enumProp("Maximum width", "max-w-full", {
+        options: [
+          {
+            value: "max-w-screen-lg",
+            title: "Medium",
+            description: "Common for text-heavy content/blog posts",
+          },
+          { value: "max-w-screen-xl", title: "Large", description: "Usefull or some landing pages" },
+          { value: "max-w-screen-2xl", title: "Extra large", description: "Common width" },
+          { value: "max-w-full", title: "Full width", description: "Takes the entire space" },
+        ],
+        description: "The maximum width of the section. Desktop only",
+        displayAs: "select",
+      }),
+    ),
+    horizontalPadding: Type.Optional(
+      cssLengthRef({
+        title: "Horizontal padding",
+        default: "20px",
+        description: "Horizontal padding. Desktop only",
+      }),
+    ),
+    verticalPadding: Type.Optional(
+      cssLengthRef({ title: "Vertical padding", default: "20px", description: "Vertical padding." }),
+    ),
+    lastTouched: Type.Optional(
+      Type.Number({
+        description: "Do not use this field. It is used internally by the editor.",
+        "ui:field": "hidden",
+      }),
+    ),
+  },
+  { additionalProperties: true, "ai:instructions": "Do not use the border prop" },
+);
+
+export const sectionSchema = Type.Object(
+  {
+    id: Type.String({ description: "The unique ID of the section. Use a human readable url-safe slug" }),
+    label: Type.Optional(
+      Type.String({
+        description: "The label (name) of the section. Used for editor purposes only.",
+      }),
+    ),
+    order: Type.Number({
+      description: "Determines section order in the page (lower numbers appear first). 0-based",
+    }),
+    props: sectionProps,
+    mobileProps: Type.Optional(Type.Partial(sectionProps, { additionalProperties: false })),
+    bricks: Type.Array(brickSchema),
+  },
+  {
+    $id: "section",
+    description:
+      "Sections are direct children of the page that are stacked vertically, but they always align their children horizontally (flex-row).",
+  },
+);
+
+export type Section = Static<typeof sectionSchema>;
+
+export function processSections(sections: Section[]) {
+  return sections.map((section) => {
+    return {
+      ...section,
+      bricks: section.bricks.map(processBrick),
+    } as const;
+  });
+}
+
+/**
+ *  process a brick and add default props
+ */
+export function processBrick<T extends Brick>(brick: T): T {
+  const defProps = defaultProps[brick.type];
+  const result = {
+    ...brick,
+    props: merge({}, defProps.props, {
+      ...brick.props,
+      ...(brick.props.$children ? { $children: (brick.props.$children as T[]).map(processBrick) } : {}),
+    }),
+  };
+  return result;
+}

package/src/shared/context.ts

@@ -0,0 +1,39 @@
+import type { GenericPageConfig } from "./page";
+import type { Site } from "./site";
+import type { Sitemap } from "./sitemap";
+
+export type GenerationState = {
+  isReady: boolean;
+  hasSitemap: boolean;
+  hasThemesGenerated: boolean;
+  pages: GenericPageConfig[];
+  sitemap: Sitemap;
+};
+
+export type CallContextProps = {
+  /**
+   * The site object
+   */
+  site: Site;
+  /**
+   * All pages in the site.
+   */
+  pages: GenericPageConfig[];
+  /**
+   * Current page ID. Undefined if flow is "setup" and no paage has been created yet.
+   */
+  currentPageId?: string;
+  /**
+   * When generating a new site, the flow should be "setup".
+   * Otherwise, it should be "edit".
+   */
+  flow: "setup" | "edit";
+  /**
+   * The current generation state of the site. Only used when flow is "setup".
+   */
+  generationState?: GenerationState;
+  /**
+   * The user language guessed from the sitePrompt, if available.
+   */
+  userLanguage?: string;
+};