@upstart.gg/sdk 0.0.130 → 0.0.132

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

@@ -0,0 +1,112 @@
+import { typedRef } from "~/shared/utils/typed-ref";
+import { type ObjectOptions, Type, type Static } from "@sinclair/typebox";
+import { queryFilter } from "~/shared/datasources/types";
+import { over } from "lodash-es";
+
+export function queryUse() {
+  return Type.Object(
+    {
+      queryId: Type.String({
+        description: "The Site Query ID to use.",
+      }),
+      alias: Type.String({
+        title: "Alias",
+        minLength: 1,
+        maxLength: 100,
+        pattern: "^[a-zA-Z0-9_]+$",
+        description:
+          "Alias for the query results, used in dynamic content. Use a simple keyword without spaces or special characters. Aliases are unique across the page.",
+        "ai:instructions":
+          "Use a simple keyword without spaces or special characters. Aliases are unique across the page. You can use the same query several times with different aliases in order to, for example, apply different parameters to the same query.",
+      }),
+      params: Type.Optional(
+        Type.Array(queryFilter, {
+          description:
+            "Additional query parameters/filters to apply to the query. One can use placeholders in values like ':slug' to reference URL parameters.",
+          title: "Query Parameters",
+          default: [],
+        }),
+      ),
+    },
+    {
+      title: "Query",
+      description:
+        "When set, this brick will loop through the results of the query and render the content for each item.",
+      // $id: "content:queryUse",
+      "ui:field": "query",
+      metadata: {
+        category: "content",
+      },
+      examples: [
+        { queryId: "get-latest-posts", alias: "latestPosts" },
+        {
+          queryId: "get-user-profile",
+          alias: "userProfile",
+          params: [{ field: "userId", op: "eq", value: ":slug" }],
+        },
+        {
+          queryId: "get-posts-by-category",
+          alias: "postsByCategory",
+          params: [{ field: "category", op: "eq", value: ":slug" }],
+        },
+      ],
+    },
+  );
+}
+
+export const queryUseSchema = queryUseRef();
+
+export type QueryUseSettings = Static<ReturnType<typeof queryUse>>;
+
+export function queryUseRef(options: ObjectOptions = {}) {
+  return typedRef("content:queryUse", options);
+}
+
+export function loop(options: ObjectOptions = {}) {
+  return Type.Object(
+    {
+      over: Type.String({
+        title: "Over",
+        description: "The query alias to loop over. If not set, the brick will be rendered only once.",
+        "ai:instructions": "Specify the Query Alias to loop over the results.",
+      }),
+      overrideLimit: Type.Optional(
+        Type.Number({
+          minimum: 1,
+          description:
+            "Override the limit of items to loop through. If not set, it will use the default limit of the query. If set to 1, it will not loop and will render only the first item.",
+        }),
+      ),
+    },
+    {
+      // $id: "content:loop",
+      title: "Repeat over",
+      description: "Repeat this brick for each item in the specified query results.",
+      "ui:field": "loop",
+      "ui:hidden-if": "no-page-queries",
+      metadata: {
+        category: "content",
+      },
+      examples: [
+        {
+          over: "latestBlogPosts",
+          overrideLimit: 5,
+        },
+        {
+          over: "featuredProducts",
+          overrideLimit: 3,
+        },
+        {
+          over: "popularProducts",
+        },
+      ],
+      ...options,
+    },
+  );
+}
+
+export type LoopSettings = Static<ReturnType<typeof loop>>;
+
+export function loopRef(options: ObjectOptions = {}) {
+  return typedRef("content:loop", options);
+}

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

@@ -0,0 +1,71 @@
+import { type SchemaOptions, Type, type Static } from "@sinclair/typebox";
+import { typedRef } from "~/shared/utils/typed-ref";
+import { StringEnum, type StringEnumOptions } from "~/shared/utils/string-enum";
+
+export function shadow(options: StringEnumOptions = {}) {
+  return StringEnum(["shadow-none", "shadow-sm", "shadow-md", "shadow-lg", "shadow-xl", "shadow-2xl"], {
+    // $id: "styles:shadow",
+    title: "Shadow",
+    description: "Box shadow around the brick",
+    enumNames: ["None", "Small", "Medium", "Large", "XL", "2XL"],
+    "ui:placeholder": "Not specified",
+    "ui:field": "enum",
+    "ui:display": "select",
+    "ui:responsive": "desktop",
+    "ui:styleId": "styles:shadow",
+    ...options,
+  });
+}
+
+export type ShadowSettings = Static<ReturnType<typeof shadow>>;
+
+export function shadowRef(options: StringEnumOptions = {}) {
+  return typedRef("styles:shadow", options);
+}
+
+/**
+ * This function is used in ajv and type ref translations, but should not be used directly in bricks
+ */
+export function textShadow(options: StringEnumOptions = {}) {
+  return StringEnum(
+    ["text-shadow-none", "text-shadow-sm", "text-shadow-md", "text-shadow-lg", "text-shadow-xl"],
+    {
+      // $id: "styles:textShadow",
+      title: "Text shadow",
+      enumNames: ["None", "S", "M", "L", "XL"],
+      "ui:display": "button-group",
+      "ui:placeholder": "Not specified",
+      "ui:field": "enum",
+      "ui:styleId": "styles:textShadow",
+      examples: ["text-shadow-sm", "text-shadow-md", "text-shadow-lg"],
+      ...options,
+    },
+  );
+}
+
+export function textShadowRef(options: SchemaOptions = {}) {
+  return typedRef("styles:textShadow", options);
+}
+
+export type TextShadowSettings = Static<ReturnType<typeof textShadow>>;
+
+type OpacityOptions = {
+  title?: string;
+  defaultValue?: number;
+};
+
+export function opacity({ defaultValue = 1, title = "Opacity" }: OpacityOptions = {}) {
+  return Type.Number({
+    title,
+    minimum: 0.1,
+    maximum: 1,
+    default: defaultValue,
+    multipleOf: 0.1,
+    "ui:field": "slider",
+    "ui:unit": "%",
+    "ui:multiplier": 100,
+    examples: [0.5, 0.75, 1],
+  });
+}
+
+export type OpacitySettings = Static<ReturnType<typeof opacity>>;

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

@@ -0,0 +1,38 @@
+import { type SchemaOptions, Type } from "@sinclair/typebox";
+
+type EnumOption = {
+  title?: string;
+  description?: string;
+  value: string;
+  icon?: string;
+};
+
+export function enumProp(
+  title: string,
+  defaultValue: string,
+  opts: Omit<SchemaOptions, "title" | "default"> & {
+    options: EnumOption[] | string[];
+    displayAs?: "radio" | "select" | "button-group" | "icon-group";
+  },
+) {
+  const defaultOpts = {
+    "ui:field": "enum",
+    "ui:display": opts.displayAs || "select",
+  };
+  const { options, displayAs, ...commonOpts } = opts;
+
+  return Type.Union(
+    options.map((opt) =>
+      Type.Literal(typeof opt === "string" ? opt : opt.value, {
+        title: typeof opt === "string" ? opt : opt.title,
+        "ui:icon": typeof opt === "string" ? undefined : opt.icon,
+      }),
+    ),
+    {
+      title,
+      default: defaultValue,
+      ...defaultOpts,
+      ...commonOpts,
+    },
+  );
+}

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

@@ -0,0 +1,10 @@
+import { Type } from "@sinclair/typebox";
+
+export function file(title = "File") {
+  return Type.String({
+    title,
+    format: "file-url",
+    "ui:field": "file",
+    examples: ["https://example.com/file.pdf"],
+  });
+}

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

@@ -0,0 +1,36 @@
+import { type ObjectOptions, Type, type Static } from "@sinclair/typebox";
+import { number } from "./number";
+import { string } from "./string";
+
+export function geolocation(opts: ObjectOptions & { defaultZoom?: number } = {}) {
+  const { title = "Location", defaultZoom } = opts;
+  return Type.Object(
+    {
+      lat: number("Latitude", { "ui:field": "hidden" }),
+      lng: number("Longitude", { "ui:field": "hidden" }),
+      address: string("Address", {
+        "ui:field": "geoaddress",
+      }),
+      tooltip: Type.Optional(string("Tooltip", {})),
+      zoom: Type.Optional(
+        number("Zoom", {
+          description: "Zoom level for the map",
+          "ui:instructions": "The zoom level should be between 0 (world view) and 21 (street view).",
+          "ui:field": "slider",
+          minimum: 12,
+          maximum: 18,
+          default: defaultZoom,
+        }),
+      ),
+    },
+    {
+      title,
+      metadata: {
+        category: "content",
+      },
+      ...opts,
+    },
+  );
+}
+
+export type GeolocationSettings = Static<ReturnType<typeof geolocation>>;

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

@@ -0,0 +1,73 @@
+/**
+ * Helper functions for defining and working with props and groups of props
+ */
+import { type TProperties, Type, type TSchema, type TObject, type ObjectOptions } from "@sinclair/typebox";
+import { commonProps } from "./common";
+import type { PartialBy, PropGroup, GroupMetadata } from "./types";
+
+function isTObject(schema: TSchema | TProperties): schema is TObject {
+  return schema.type === "object";
+}
+
+export function group<T extends TProperties>({
+  title,
+  children,
+  category = "settings",
+  metadata,
+  options,
+}: PartialBy<PropGroup<T>, "category">) {
+  // check if children is already a TObject
+  if (isTObject(children)) {
+    const generated = Type.Composite([Type.Object({}), children], {
+      title,
+      metadata: {
+        category,
+        group: true,
+        ...metadata,
+      },
+      ...options,
+    });
+    return generated;
+  }
+
+  // Create the TypeBox schema with title as a standard property and group-specific info in metadata
+  return Type.Object(children, {
+    title,
+    ...options,
+    metadata: {
+      category,
+      group: true,
+      ...metadata,
+    },
+  });
+}
+
+// Functions to extract metadata from schemas
+export function getGroupInfo(schema: TSchema) {
+  const meta = schema.metadata as GroupMetadata;
+  return {
+    title: (schema.title ?? schema.metadata?.title) as string | undefined,
+    meta,
+    tab: meta.groupTab || "common",
+  };
+}
+
+export function defineProps<P extends TProperties>(
+  props: P,
+  options?: ObjectOptions & {
+    noGrow?: boolean;
+    noAlignSelf?: boolean;
+  },
+) {
+  const allProps = { ...commonProps, ...props };
+  const { alignSelf, grow, ...rest } = allProps;
+  const finalProps = {
+    ...rest,
+    ...(options?.noAlignSelf ? {} : { alignSelf }),
+    ...(options?.noGrow ? {} : { grow }),
+  } as typeof allProps;
+  return Type.Object(finalProps, { ...options, additionalProperties: false });
+}
+
+// export const optional = Type.Optional;
+export const array = Type.Array;

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

@@ -0,0 +1,96 @@
+import { type SchemaOptions, Type, type Static, type ObjectOptions } from "@sinclair/typebox";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+type PropImageOptions = {
+  defaultImageUrl?: string;
+  showImgSearch?: boolean;
+  noObjectOptions?: boolean;
+} & ObjectOptions;
+
+export function image(title = "Image", options: PropImageOptions = {}) {
+  const { defaultImageUrl, showImgSearch = false, noObjectOptions = false } = options;
+  const schema = Type.Object(
+    {
+      src: Type.String({
+        default: defaultImageUrl,
+        title,
+        description: "Image URL. Can be a link to an image or a data URI",
+      }),
+      alt: Type.Optional(
+        Type.String({
+          title: "Alternate Text",
+          description: "Alternative text for the image. Recommended for screen readers and SEO",
+          "ui:placeholder": "Your image description",
+        }),
+      ),
+      fit: Type.Optional(
+        StringEnum(["object-none", "object-contain", "object-cover", "object-fill", "object-scale-down"], {
+          enumNames: ["None", "Contain", "Cover", "Fill", "Scale down"],
+          title: "Fit",
+          description: "How the image should be resized to fit its container",
+          default: "object-cover",
+          "ui:field": "enum",
+          "ui:styleId": "styles:objectFit",
+        }),
+      ),
+      position: Type.Optional(
+        StringEnum(
+          [
+            "object-top",
+            "object-center",
+            "object-bottom",
+            "object-left",
+            "object-right",
+            "object-top-left",
+            "object-top-right",
+            "object-bottom-left",
+            "object-bottom-right",
+          ],
+          {
+            enumNames: [
+              "Top",
+              "Center",
+              "Bottom",
+              "Left",
+              "Right",
+              "Top left",
+              "Top right",
+              "Bottom left",
+              "Bottom right",
+            ],
+            "ui:styleId": "styles:objectPosition",
+            title: "Position",
+            description: "The position of the image inside its container",
+            "ui:field": "enum",
+          },
+        ),
+      ),
+    },
+    {
+      // $id: "assets:image",
+      title,
+      "ui:field": "image",
+      "ui:accept": "image/*",
+      "ui:show-img-search": showImgSearch,
+      "ui:no-object-options": noObjectOptions,
+      default: {
+        alt: "Image",
+        fit: "object-cover",
+        position: "object-center",
+      },
+      // "ui:responsive": "desktop",
+      metadata: {
+        category: "content",
+      },
+      ...options,
+    },
+  );
+  return schema;
+}
+
+export function imageRef(options: PropImageOptions & SchemaOptions = {}) {
+  return typedRef("assets:image", options);
+}
+
+export type ImageProps = Static<ReturnType<typeof image>>;

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

@@ -0,0 +1,8 @@
+import { Type, type NumberOptions } from "@sinclair/typebox";
+import type { FieldMetadata } from "./types";
+
+type NumberFieldOptions = NumberOptions & FieldMetadata;
+
+export function number(title: string, options: NumberFieldOptions = {}) {
+  return Type.Number({ title, ...options });
+}

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

@@ -0,0 +1,11 @@
+import { Type, type Static } from "@sinclair/typebox";
+
+export function fixedPositioned(defaultValue = false, title = "Fixed position") {
+  return Type.Boolean({
+    title,
+    default: defaultValue,
+    "ui:styleId": "styles:fixedPositioned",
+  });
+}
+
+export type FixedPositionedSettings = Static<ReturnType<typeof fixedPositioned>>;

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

@@ -0,0 +1,72 @@
+import { type Static, Type, type StringOptions } from "@sinclair/typebox";
+import type { FieldMetadata } from "./types";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+type StrFieldOptions = StringOptions &
+  FieldMetadata & {
+    "ui:multiline"?: boolean;
+  };
+
+export function string(title: string, options: StrFieldOptions = {}) {
+  return Type.String({ title, ...options });
+}
+
+export function url(title = "URL", defaultValue?: string) {
+  return Type.String({
+    title,
+    format: "url",
+    "ui:field": "url",
+    default: defaultValue,
+  });
+}
+
+const pageIdSchema = Type.String({
+  "ui:field": "page-id",
+});
+
+export function urlOrPageId(title = "URL", defaultValue?: string) {
+  return Type.Union(
+    [
+      Type.String({
+        format: "url",
+      }),
+      pageIdSchema,
+    ],
+    {
+      // $id: "content:urlOrPageId",
+      default: defaultValue,
+      title,
+      metadata: {
+        category: "content",
+      },
+      "ui:field": "url-page-id",
+      "ai:instructions":
+        "This field can be a URL or a page ID. Use the page ID when linking to a internal page, and a URL for external links.",
+    },
+  );
+}
+
+export type UrlOrPageIdSettings = Static<ReturnType<typeof urlOrPageId>>;
+
+export function urlOrPageIdRef(options: StrFieldOptions = {}) {
+  return typedRef("content:urlOrPageId", { ...options });
+}
+
+type IconOptions = StrFieldOptions & { "ui:default-icon-collection"?: string };
+
+export function icon(title?: string, options: IconOptions = {}) {
+  return Type.String({
+    title: title ?? "Icon",
+    "ai:instructions": "Use a iconify reference like 'mdi:heart' or 'fa-solid:coffee'.",
+    "ui:field": "iconify",
+    // $id: "assets:icon",
+    metadata: {
+      category: "content",
+    },
+    ...options,
+  });
+}
+
+export function iconRef(options: IconOptions = {}) {
+  return typedRef("assets:icon", options);
+}

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

@@ -0,0 +1,26 @@
+import { type Static, Type, type StringOptions } from "@sinclair/typebox";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function tags(options?: StringOptions) {
+  return Type.Array(
+    Type.String({
+      title: options?.title ?? "Tags",
+      ...options,
+    }),
+    {
+      // $id: "content:tags",
+      "ui:field": "tags",
+      title: options?.title ?? "Tags",
+      metadata: {
+        category: "content",
+      },
+      ...options,
+    },
+  );
+}
+
+export type TagsSettings = Static<ReturnType<typeof tags>>;
+
+export function tagsRef(options: StringOptions = {}) {
+  return typedRef("content:tags", { ...options });
+}

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

@@ -0,0 +1,90 @@
+import { describe, it, expect } from "vitest";
+import { background, backgroundRef, backgroundColor } from "../background";
+
+describe("Background prop test suite", () => {
+  describe("background", () => {
+    it("should have the correct title", () => {
+      expect(background().title).toBe("Background image");
+    });
+
+    it("should have correct schema structure", () => {
+      const schema = background();
+      expect(schema.type).toBe("object");
+      expect(schema).toHaveProperty("properties.image");
+      expect(schema).toHaveProperty("properties.size");
+      expect(schema).toHaveProperty("properties.repeat");
+    });
+
+    it("should have correct UI metadata", () => {
+      const schema = background();
+      expect(schema["ui:field"]).toBe("background");
+    });
+
+    it("should accept custom default values", () => {
+      const customBg = background({
+        default: {
+          size: "cover",
+          repeat: "repeat",
+          image: "https://example.com/image.jpg",
+        },
+      });
+      expect(customBg.default).toEqual({
+        size: "cover",
+        repeat: "repeat",
+        image: "https://example.com/image.jpg",
+      });
+    });
+
+    it("should accept custom title", () => {
+      const customBg = background({ title: "Custom Title" });
+      expect(customBg.title).toBe("Custom Title");
+    });
+
+    describe("image property", () => {
+      it("should have correct metadata", () => {
+        const imageProp = background().properties.image;
+        expect(imageProp.title).toBe("Image");
+        expect(imageProp.type).toBe("string");
+      });
+    });
+
+    describe("size property", () => {
+      it("should have correct metadata", () => {
+        const sizeProp = background().properties.size;
+        expect(sizeProp.default).toBe("auto");
+      });
+    });
+
+    describe("repeat property", () => {
+      it("should have correct metadata", () => {
+        const repeatProp = background().properties.repeat;
+        expect(repeatProp.default).toBe("no-repeat");
+      });
+    });
+  });
+
+  describe("backgroundColor", () => {
+    it("should have the correct title", () => {
+      expect(backgroundColor().title).toBe("Background color");
+    });
+
+    it("should accept custom title", () => {
+      expect(backgroundColor({ title: "Custom Title" }).title).toBe("Custom Title");
+    });
+
+    it("should have correct schema structure", () => {
+      const schema = backgroundColor();
+      expect(schema.type).toBe("string");
+    });
+
+    it("should have correct UI metadata", () => {
+      const schema = backgroundColor();
+      expect(schema["ui:field"]).toBe("color");
+      expect(schema["ui:color-type"]).toBe("background");
+    });
+
+    it("should have correct default value", () => {
+      expect(backgroundColor().default).toBeUndefined();
+    });
+  });
+});

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

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { border } from "../border";
+
+describe("Border prop test suite", () => {
+  const borderSchema = border();
+
+  describe("propBorder", () => {
+    it("should have the correct title", () => {
+      expect(border().title).toBe("Border");
+    });
+  });
+});