@upstart.gg/sdk 0.0.130 → 0.0.131

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

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { opacity, textShadow } from "../effects";
+
+describe("Effects props test suite", () => {
+  describe("opacity", () => {
+    it("should have correct title and default value", () => {
+      const prop = opacity();
+      expect(prop.title).toBe("Opacity");
+      expect(prop.default).toBe(1);
+    });
+
+    it("should allow for custom default value", () => {
+      const prop = opacity({ defaultValue: 0.5 });
+      expect(prop.default).toBe(0.5);
+    });
+
+    it("should have correct UI metadata", () => {
+      const prop = opacity();
+      expect(prop["ui:field"]).toBe("slider");
+      expect(prop.minimum).toBe(0.1);
+      expect(prop.maximum).toBe(1);
+      expect(prop.multipleOf).toBe(0.1);
+    });
+  });
+
+  describe("textShadow", () => {
+    it("should have correct title", () => {
+      const prop = textShadow();
+      expect(prop.title).toBe("Text shadow");
+    });
+
+    it("should have correct UI metadata", () => {
+      const schema = textShadow();
+      expect(schema["ui:field"]).toBe("enum");
+    });
+  });
+});

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

@@ -0,0 +1,98 @@
+import { describe, it, expect } from "vitest";
+import { Type } from "@sinclair/typebox";
+import { group, defineProps, getGroupInfo } from "../helpers";
+
+describe("Props helpers test suite", () => {
+  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");
+    });
+  });
+});

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/string.test.ts

@@ -0,0 +1,80 @@
+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: "Default value" });
+      expect(stringProp.default).toBe("Default value");
+    });
+
+    it("should apply additional options when provided", () => {
+      const stringProp = string("Test String", { minLength: 5, maxLength: 10 });
+      expect(stringProp.minLength).toBe(5);
+      expect(stringProp.maxLength).toBe(10);
+      expect(stringProp.default).toBeUndefined();
+    });
+
+    it("should apply UI field options when provided", () => {
+      const stringProp = string("Test String", { "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("url");
+    });
+
+    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");
+    });
+
+    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("url");
+
+      // 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,107 @@
+import { type StringOptions, Type, type Static } from "@sinclair/typebox";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+type Options = StringOptions & {
+  "ui:no-extra-large-sizes"?: boolean;
+};
+
+export function fontSize(options: Options = {}) {
+  return StringEnum(["inherit", "text-xs", "text-sm", "text-base", "text-lg", "text-xl"], {
+    enumNames: ["Same as parent", "Extra small", "Small", "Medium", "Large", "Extra large"],
+    default: "inherit",
+    title: "Font size",
+    // $id: "styles:fontSize",
+    "ui:styleId": "styles:fontSize",
+    "ui:field": "enum",
+    "ui:display": "select",
+    ...options,
+  });
+}
+
+export type FontSizeSettings = Static<ReturnType<typeof fontSize>>;
+
+export function fontSizeRef(options: Options = {}) {
+  return typedRef("styles:fontSize", options);
+}
+
+export function fontSizeXL(options: Options = {}) {
+  return StringEnum(
+    [
+      "inherit",
+      "text-xs",
+      "text-sm",
+      "text-base",
+      "text-lg",
+      "text-xl",
+      "text-2xl",
+      "text-3xl",
+      "text-4xl",
+      "text-5xl",
+      "text-6xl",
+      "text-7xl",
+    ],
+    {
+      enumNames: [
+        "Same as parent",
+        "Extra small",
+        "Small",
+        "Medium",
+        "Large",
+        "Extra large",
+        "Extra large (2x)",
+        "Extra large (3x)",
+        "Extra large (4x)",
+        "Extra large (5x)",
+        "Extra large (6x)",
+        "Extra large (7x)",
+      ],
+      default: "inherit",
+      title: "Font size",
+      // $id: "styles:fontSize",
+      "ui:styleId": "styles:fontSize",
+      "ui:field": "enum",
+      "ui:display": "select",
+      ...options,
+    },
+  );
+}
+export function fontSizeXLRef(options: Options = {}) {
+  return typedRef("styles:fontSizeXL", options);
+}
+
+type TextContentOptions = {
+  showInSettings?: boolean;
+  disableSizing?: boolean;
+  disableAlignment?: boolean;
+};
+
+export function textContent({
+  title = "Text",
+  default: defaults,
+  showInSettings,
+  disableSizing = false,
+  disableAlignment = false,
+  ...rest
+}: TextContentOptions & StringOptions = {}) {
+  return Type.String({
+    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>.",
+    // $id: "content:text",
+    default: defaults ?? "My text",
+    "ui:disable-sizing": disableSizing,
+    "ui:disable-alignment": disableAlignment,
+    // metadata: {
+    //   category: "content",
+    // },
+    ...rest,
+    "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,72 @@
+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"]>>;
+  };
+  /**
+   * True if we are in the context of the Editor
+   */
+  editable?: boolean;
+  /**
+   * True if the brick is selected in the Editor
+   */
+  selected?: boolean;
+  /**
+   * True if the brick is a child of a container (e.g. Section, Box)
+   */
+  isContainerChild?: boolean;
+
+  isDynamicPreview?: boolean;
+
+  level?: number; // Nesting level of the brick
+
+  iterationIndex?: number; // Index in a loop or iteration context
+};
+
+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:tab"?: BrickPropCategory;
+};
+
+export type FieldMetadata = CommonMetadata & {
+  "ui:field"?: string;
+  [key: string]: unknown;
+};
+
+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>;
+};