@upstart.gg/sdk 0.0.130 → 0.0.131

package/src/shared/bricks/props/color-preset.ts

@@ -0,0 +1,390 @@
+import { type Static, type ObjectOptions, Type, type StringOptions, TObject } from "@sinclair/typebox";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+type ColorPresetOptions = ObjectOptions & {
+  "ui:presets"?: Record<string, { className: string; label: string }>;
+  "ui:default-gradient-direction"?: string;
+};
+
+export const colorPresets: NonNullable<ColorPresetOptions["ui:presets"]> = {
+  "primary-50": {
+    className: "bg-primary-50 text-primary-50-content",
+    label: "Primary 50",
+  },
+  "primary-100": {
+    className: "bg-primary-100 text-primary-100-content",
+    label: "Primary 100",
+  },
+  "primary-200": {
+    className: "bg-primary-200 text-primary-200-content",
+    label: "Primary 200",
+  },
+  "primary-300": {
+    className: "bg-primary-300 text-primary-300-content",
+    label: "Primary 300",
+  },
+  "primary-400": {
+    className: "bg-primary-400 text-primary-400-content",
+    label: "Primary 400",
+  },
+  "primary-500": {
+    className: "bg-primary-500 text-primary-500-content",
+    label: "Primary 500",
+  },
+  "primary-600": {
+    className: "bg-primary-600 text-primary-600-content",
+    label: "Primary 600",
+  },
+  "primary-700": {
+    className: "bg-primary-700 text-primary-700-content",
+    label: "Primary 700",
+  },
+  "primary-800": {
+    className: "bg-primary-800 text-primary-800-content",
+    label: "Primary 800",
+  },
+  "primary-900": {
+    className: "bg-primary-900 text-primary-900-content",
+    label: "Primary 900",
+  },
+  "secondary-50": {
+    className: "bg-secondary-50 text-secondary-50-content",
+    label: "Secondary 50",
+  },
+  "secondary-100": {
+    className: "bg-secondary-100 text-secondary-100-content",
+    label: "Secondary 100",
+  },
+  "secondary-200": {
+    className: "bg-secondary-200 text-secondary-200-content",
+    label: "Secondary 200",
+  },
+  "secondary-300": {
+    className: "bg-secondary-300 text-secondary-300-content",
+    label: "Secondary 300",
+  },
+  "secondary-400": {
+    className: "bg-secondary-400 text-secondary-400-content",
+    label: "Secondary 400",
+  },
+  "secondary-500": {
+    className: "bg-secondary-500 text-secondary-500-content",
+    label: "Secondary 500",
+  },
+  "secondary-600": {
+    className: "bg-secondary-600 text-secondary-600-content",
+    label: "Secondary 600",
+  },
+  "secondary-700": {
+    className: "bg-secondary-700 text-secondary-700-content",
+    label: "Secondary 700",
+  },
+  "secondary-800": {
+    className: "bg-secondary-800 text-secondary-800-content",
+    label: "Secondary 800",
+  },
+  "secondary-900": {
+    className: "bg-secondary-900 text-secondary-900-content",
+    label: "Secondary 900",
+  },
+  "accent-50": {
+    className: "bg-accent-50 text-accent-50-content",
+    label: "Accent 50",
+  },
+  "accent-100": {
+    className: "bg-accent-100 text-accent-100-content",
+    label: "Accent 100",
+  },
+  "accent-200": {
+    className: "bg-accent-200 text-accent-200-content",
+    label: "Accent 200",
+  },
+  "accent-300": {
+    className: "bg-accent-300 text-accent-300-content",
+    label: "Accent 300",
+  },
+  "accent-400": {
+    className: "bg-accent-400 text-accent-400-content",
+    label: "Accent 400",
+  },
+  "accent-500": {
+    className: "bg-accent-500 text-accent-500-content",
+    label: "Accent 500",
+  },
+  "accent-600": {
+    className: "bg-accent-600 text-accent-600-content",
+    label: "Accent 600",
+  },
+  "accent-700": {
+    className: "bg-accent-700 text-accent-700-content",
+    label: "Accent 700",
+  },
+  "accent-800": {
+    className: "bg-accent-800 text-accent-800-content",
+    label: "Accent 800",
+  },
+  "accent-900": {
+    className: "bg-accent-900 text-accent-900-content",
+    label: "Accent 900",
+  },
+  "neutral-50": {
+    className: "bg-neutral-50 text-neutral-50-content",
+    label: "Neutral 50",
+  },
+  "neutral-100": {
+    className: "bg-neutral-100 text-neutral-100-content",
+    label: "Neutral 100",
+  },
+  "neutral-200": {
+    className: "bg-neutral-200 text-neutral-200-content",
+    label: "Neutral 200",
+  },
+  "neutral-300": {
+    className: "bg-neutral-300 text-neutral-300-content",
+    label: "Neutral 300",
+  },
+  "neutral-400": {
+    className: "bg-neutral-400 text-neutral-400-content",
+    label: "Neutral 400",
+  },
+  "neutral-500": {
+    className: "bg-neutral-500 text-neutral-500-content",
+    label: "Neutral 500",
+  },
+  "neutral-600": {
+    className: "bg-neutral-600 text-neutral-600-content",
+    label: "Neutral 600",
+  },
+  "neutral-700": {
+    className: "bg-neutral-700 text-neutral-700-content",
+    label: "Neutral 700",
+  },
+  "neutral-800": {
+    className: "bg-neutral-800 text-neutral-800-content",
+    label: "Neutral 800",
+  },
+  "neutral-900": {
+    className: "bg-neutral-900 text-neutral-900-content",
+    label: "Neutral 900",
+  },
+  "base-100": {
+    className: "bg-base-100 text-base-100-content",
+    label: "Base 100",
+  },
+  "base-200": {
+    className: "bg-base-200 text-base-200-content",
+    label: "Base 200",
+  },
+  "base-300": {
+    className: "bg-base-300 text-base-300-content",
+    label: "Base 300",
+  },
+  "primary-gradient-100": {
+    className: "from-primary-100 to-primary-200 text-primary-100-content",
+    label: "Primary gradient 1",
+  },
+  "primary-gradient-200": {
+    className: "from-primary-200 to-primary-300 text-primary-200-content",
+    label: "Primary gradient 2",
+  },
+  "primary-gradient-300": {
+    className: "from-primary-300 to-primary-400 text-primary-300-content",
+    label: "Primary gradient 3",
+  },
+  "primary-gradient-400": {
+    className: "from-primary-400 to-primary-500 text-primary-400-content",
+    label: "Primary gradient 4",
+  },
+  "primary-gradient-500": {
+    className: "from-primary-500 to-primary-600 text-primary-500-content",
+    label: "Primary gradient 5",
+  },
+  "primary-gradient-600": {
+    className: "from-primary-600 to-primary-700 text-primary-600-content",
+    label: "Primary gradient 6",
+  },
+  "primary-gradient-700": {
+    className: "from-primary-700 to-primary-800 text-primary-700-content",
+    label: "Primary gradient 7",
+  },
+  "primary-gradient-800": {
+    className: "from-primary-800 to-primary-900 text-primary-800-content",
+    label: "Primary gradient 8",
+  },
+  "secondary-gradient-100": {
+    className: "from-secondary-100 to-secondary-200 text-secondary-100-content",
+    label: "Secondary gradient 1",
+  },
+  "secondary-gradient-200": {
+    className: "from-secondary-200 to-secondary-300 text-secondary-200-content",
+    label: "Secondary gradient 2",
+  },
+  "secondary-gradient-300": {
+    className: "from-secondary-300 to-secondary-400 text-secondary-300-content",
+    label: "Secondary gradient 3",
+  },
+  "secondary-gradient-400": {
+    className: "from-secondary-400 to-secondary-500 text-secondary-400-content",
+    label: "Secondary gradient 4",
+  },
+  "secondary-gradient-500": {
+    className: "from-secondary-500 to-secondary-600 text-secondary-500-content",
+    label: "Secondary gradient 5",
+  },
+  "secondary-gradient-600": {
+    className: "from-secondary-600 to-secondary-700 text-secondary-600-content",
+    label: "Secondary gradient 6",
+  },
+  "secondary-gradient-700": {
+    className: "from-secondary-700 to-secondary-800 text-secondary-700-content",
+    label: "Secondary gradient 7",
+  },
+  "secondary-gradient-800": {
+    className: "from-secondary-800 to-secondary-900 text-secondary-800-content",
+    label: "Secondary gradient 8",
+  },
+  "accent-gradient-100": {
+    className: "from-accent-100 to-accent-200 text-accent-100-content",
+    label: "Accent gradient 1",
+  },
+  "accent-gradient-200": {
+    className: "from-accent-200 to-accent-300 text-accent-200-content",
+    label: "Accent gradient 2",
+  },
+  "accent-gradient-300": {
+    className: "from-accent-300 to-accent-400 text-accent-300-content",
+    label: "Accent gradient 3",
+  },
+  "accent-gradient-400": {
+    className: "from-accent-400 to-accent-500 text-accent-400-content",
+    label: "Accent gradient 4",
+  },
+  "accent-gradient-500": {
+    className: "from-accent-500 to-accent-600 text-accent-500-content",
+    label: "Accent gradient 5",
+  },
+  "accent-gradient-600": {
+    className: "from-accent-600 to-accent-700 text-accent-600-content",
+    label: "Accent gradient 6",
+  },
+  "accent-gradient-700": {
+    className: "from-accent-700 to-accent-800 text-accent-700-content",
+    label: "Accent gradient 7",
+  },
+  "accent-gradient-800": {
+    className: "from-accent-800 to-accent-900 text-accent-800-content",
+    label: "Accent gradient 8",
+  },
+  "neutral-gradient-100": {
+    className: "from-neutral-100 to-neutral-200 text-neutral-100-content",
+    label: "Neutral gradient 1",
+  },
+  "neutral-gradient-200": {
+    className: "from-neutral-200 to-neutral-300 text-neutral-200-content",
+    label: "Neutral gradient 2",
+  },
+  "neutral-gradient-300": {
+    className: "from-neutral-300 to-neutral-400 text-neutral-300-content",
+    label: "Neutral gradient 3",
+  },
+  "neutral-gradient-400": {
+    className: "from-neutral-400 to-neutral-500 text-neutral-400-content",
+    label: "Neutral gradient 4",
+  },
+  "neutral-gradient-500": {
+    className: "from-neutral-500 to-neutral-600 text-neutral-500-content",
+    label: "Neutral gradient 5",
+  },
+  "neutral-gradient-600": {
+    className: "from-neutral-600 to-neutral-700 text-neutral-600-content",
+    label: "Neutral gradient 6",
+  },
+  "neutral-gradient-700": {
+    className: "from-neutral-700 to-neutral-800 text-neutral-700-content",
+    label: "Neutral gradient 7",
+  },
+  "neutral-gradient-800": {
+    className: "from-neutral-800 to-neutral-900 text-neutral-800-content",
+    label: "Neutral gradient 8",
+  },
+  "base-gradient-100": {
+    className: "from-base-100 to-base-200 text-base-100-content",
+    label: "Base gradient 1",
+  },
+  "base-gradient-200": {
+    className: "from-base-200 to-base-300 text-base-200-content",
+    label: "Base gradient 2",
+  },
+  none: {
+    className: "",
+    label: "None",
+  },
+};
+
+export function colorPreset(options: ColorPresetOptions = {}) {
+  return Type.Object(
+    {
+      color: StringEnum(Object.keys(colorPresets), {
+        title: "Color preset",
+        description: "Color preset to apply to background and text",
+        enumNames: Object.keys(colorPresets).map((key) => colorPresets[key].label),
+        "ai:instructions": `Presets are predefined color combinations of background and text colors that can be applied to elements. They include various shades of primary, secondary, accent, and neutral colors, as well as gradients. You can also select 'none' to remove any preset.`,
+        "ui:styleId": "presets:color",
+        "ui:responsive": true,
+        default: options.default?.color,
+      }),
+      gradientDirection: Type.Optional(gradientDirection(options)),
+    },
+    {
+      "ui:field": "color-preset",
+      // $id: "presets:color",
+      title: "Color preset",
+      "ui:presets": colorPresets,
+      default: options.default,
+      examples: [
+        { color: "primary-500" },
+        { color: "secondary-500" },
+        { color: "accent-800", gradientDirection: "bg-gradient-to-t" },
+      ],
+      "ui:default-gradient-direction": options["ui:default-gradient-direction"] ?? "bg-gradient-to-br",
+    },
+  );
+}
+
+export type ColorPresetSettings = Static<ReturnType<typeof colorPreset>>;
+
+export function colorPresetRef(options: ColorPresetOptions = {}) {
+  return typedRef("presets:color", options);
+}
+
+function gradientDirection(options: StringOptions = {}) {
+  return StringEnum(
+    [
+      "bg-gradient-to-t",
+      "bg-gradient-to-r",
+      "bg-gradient-to-b",
+      "bg-gradient-to-l",
+      "bg-gradient-to-tl",
+      "bg-gradient-to-tr",
+      "bg-gradient-to-br",
+      "bg-gradient-to-bl",
+    ],
+    {
+      title: "Gradient direction",
+      description: "The direction of the gradient. Only applies when color preset is a gradient.",
+      enumNames: ["Top", "Right", "Bottom", "Left", "Top left", "Top right", "Bottom right", "Bottom left"],
+      default: "bg-gradient-to-br",
+      "ui:responsive": "desktop",
+      "ui:styleId": "styles:gradientDirection",
+      // metadata: {
+      //   filter: (manifestProps: TObject, formData: Static<BrickManifest["props"]>) => {
+      //     return (formData[colorPropKey] as string)?.includes("gradient") === true;
+      //   },
+      // },
+      ...options,
+    },
+  );
+}
+
+export type GradientDirectionSettings = Static<ReturnType<typeof gradientDirection>>;

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

@@ -0,0 +1,40 @@
+import { type SchemaOptions, type Static, type StringOptions, type TObject, Type } from "@sinclair/typebox";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function color(defaultValue?: string, title = "Text color") {
+  return Type.String({
+    title,
+    // $id: "styles:color",
+    "ai:instructions":
+      "hex/rgb/rgba color or classes like `text-<variant>-<shade>`, variants being `primary`, `secondary`, `accent` and `neutral`, and shades between 50 and 900",
+    default: defaultValue,
+    "ui:styleId": "styles:color",
+    "ui:field": "color",
+    "ui:color-type": "text",
+  });
+}
+
+export type ColorSettings = Static<ReturnType<typeof color>>;
+
+export function colorRef(options: SchemaOptions = {}) {
+  return typedRef("styles:color", { ...options, "ui:styleId": "styles:color" });
+}
+
+export function borderColor(defaultValue?: string, title = "Border color") {
+  return Type.String({
+    title,
+    // $id: "styles:borderColor",
+    "ai:instructions":
+      "hex/rgb/rgba color or classes like `border-<variant>-<shade>`, variants being `primary`, `secondary`, `accent` and `neutral`, and shades between 50 and 900",
+    default: defaultValue,
+    "ui:styleId": "styles:borderColor",
+    "ui:field": "color",
+    "ui:color-type": "border",
+  });
+}
+
+export type BorderColorSettings = Static<ReturnType<typeof borderColor>>;
+
+export function borderColorRef(options: SchemaOptions = {}) {
+  return typedRef("styles:borderColor", { ...options, "ui:styleId": "styles:borderColor" });
+}

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

@@ -0,0 +1,64 @@
+import { type Static, type TString, Type } from "@sinclair/typebox";
+import { typedRef } from "~/shared/utils/typed-ref";
+import { cssLengthRef } from "./css-length";
+import { alignSelfRef } from "./align";
+
+export function hidden() {
+  return Type.Object(
+    {
+      desktop: Type.Optional(Type.Boolean()),
+      mobile: Type.Optional(Type.Boolean()),
+    },
+    {
+      // $id: "styles:hidden",
+      title: "Hidden",
+      description: "Used to hide the brick on desktop or mobile.",
+      "ui:field": "hidden",
+    },
+  );
+}
+
+export const commonProps = {
+  lastTouched: Type.Optional(
+    Type.Number({
+      "ui:field": "hidden",
+      "ai:hidden": true,
+    }),
+  ),
+  hidden: Type.Optional(typedRef("styles:hidden")),
+  editable: Type.Optional(
+    Type.Boolean({
+      "ui:field": "hidden",
+      "ai:hidden": true,
+    }),
+  ),
+  width: Type.Optional(
+    cssLengthRef({
+      title: "Fixed Width",
+      description:
+        "Set a fixed width for the brick. If not set, the brick will be responsive and will follow the flex layout of its parent section.",
+      "ai:instructions": "Use percentage values to make the width responsive, like '50%'",
+      "ui:field": "hidden",
+    }) as TString,
+  ),
+  height: Type.Optional(
+    cssLengthRef({
+      title: "Fixed height",
+      description:
+        "Set a fixed height for the brick. If not set, the brick will be responsive and will follow the flex layout of its parent section.",
+      "ui:field": "hidden",
+    }),
+  ),
+  grow: Type.Optional(
+    Type.Boolean({
+      title: "Auto expand",
+      description: "If set, the brick will grow to fill the available space of its parent section or box.",
+      "ui:styleId": "styles:grow",
+      "ui:responsive": true,
+    }),
+  ),
+  alignSelf: Type.Optional(alignSelfRef()),
+};
+
+const commonPropsSchema = Type.Object(commonProps);
+export type CommonBrickProps = Static<typeof commonPropsSchema>;

package/src/shared/bricks/props/css-length.ts

@@ -0,0 +1,32 @@
+import { type Static, Type, type StringOptions } from "@sinclair/typebox";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export const cssUnits = ["px", "%", "em", "rem", "vh", "vw", "dvh", "dvw", "rlh", "lh", "cqh", "cqw"];
+
+export function cssLength(options: StringOptions = {}) {
+  return Type.String({
+    title: "Length",
+    // $id: "styles:cssLength",
+    description: `A CSS length value. Must be a number with a unit (e.g. "10px", "50%"). The unit can be one of the following: ${cssUnits?.join(", ")}.`,
+    default: options.default,
+    "ui:field": "css-length",
+    "ui:css-units": cssUnits,
+    examples: ["100px", "50%", "2em", "1.5rem"],
+    ...options,
+  });
+}
+
+export type CssLength = Static<ReturnType<typeof cssLength>>;
+
+export function cssLengthRef(options: StringOptions = {}) {
+  return typedRef("styles:cssLength", options);
+}
+
+export function isCssLength(value: string | number | undefined): boolean {
+  if (typeof value !== "string") {
+    return false;
+  }
+  // Check if the value is something like a number + a css unit (e.g., "20px", "50%")
+  const cssLengthPattern = new RegExp(`^-?\\d+(?:\\.\\d+)?\\s*(${cssUnits.join("|")})$`);
+  return cssLengthPattern.test(value);
+}

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

@@ -0,0 +1,11 @@
+import { type Static, Type, type StringOptions } from "@sinclair/typebox";
+
+export function datarecord(title = "Database", options?: StringOptions) {
+  return Type.String({
+    "ui:field": "datarecord",
+    title,
+    ...options,
+  });
+}
+
+export type DatarecordSettings = Static<ReturnType<typeof datarecord>>;

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

@@ -0,0 +1,82 @@
+import { Type, type Static } from "@sinclair/typebox";
+import { StringEnum } from "~/shared/utils/string-enum";
+
+export function datasource(title = "Database") {
+  return Type.Object(
+    {
+      id: Type.String({
+        title: "Database",
+      }),
+      offset: Type.Optional(
+        Type.Number({
+          title: "Offset",
+          description: "Offset the records to fetch from the datasource",
+          minimum: 0,
+          default: 0,
+        }),
+      ),
+      limit: Type.Optional(
+        Type.Number({
+          title: "Limit",
+          description:
+            "Limit the number of records to fetch from the datasource. Setting to 1 will fetch and render only one item.",
+          minimum: 1,
+          default: 3,
+        }),
+      ),
+      sortDirection: Type.Optional(
+        StringEnum(["asc", "desc"], {
+          title: "Sort",
+          enumNames: ["Ascending", "Descending"],
+          description: "Direction to sort the records by",
+          default: "desc",
+        }),
+      ),
+      sortField: Type.Optional(
+        Type.String({
+          title: "Sort Field",
+          description: "Select a field to sort by (must be indexed)",
+          default: "$publicationDate",
+        }),
+      ),
+      filters: Type.Optional(
+        Type.Array(
+          Type.Object({
+            field: Type.String(),
+            op: StringEnum([
+              "eq",
+              "ne",
+              "lt",
+              "lte",
+              "gt",
+              "gte",
+              "in",
+              "nin",
+              "contains",
+              "notContains",
+              "startsWith",
+              "notStartsWith",
+              "endsWith",
+              "notEndsWith",
+              "before",
+              "after",
+            ]),
+            value: Type.Union([Type.String(), Type.Number(), Type.Boolean()]),
+          }),
+          {
+            default: [],
+          },
+        ),
+      ),
+    },
+    {
+      "ui:field": "datasource",
+      title,
+      metadata: {
+        category: "content",
+      },
+    },
+  );
+}
+
+export type DatasourceSettings = Static<ReturnType<typeof datasource>>;

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

@@ -0,0 +1,21 @@
+import { Type, type StringOptions } from "@sinclair/typebox";
+
+export function date(title = "Date", options?: StringOptions) {
+  return Type.String({
+    title,
+    format: "date",
+    "ui:field": "date",
+    examples: ["2023-03-15"],
+    ...options,
+  });
+}
+
+export function datetime(title = "Date and Time", options?: StringOptions) {
+  return Type.String({
+    title,
+    format: "date-time",
+    "ui:field": "datetime",
+    examples: ["2023-03-15T12:00:00Z"],
+    ...options,
+  });
+}

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

@@ -0,0 +1,21 @@
+import { type SchemaOptions, type Static, type StringOptions, Type } from "@sinclair/typebox";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function direction(options: StringOptions = {}) {
+  return StringEnum(["flex-row", "flex-col"], {
+    title: "Direction",
+    description: "The direction of the layout",
+    enumNames: ["Horizontal", "Vertical"],
+    // $id: "styles:direction",
+    "ui:styleId": "styles:direction",
+    examples: ["flex-row", "flex-col"],
+    ...options,
+  });
+}
+
+export type DirectionSettings = Static<ReturnType<typeof direction>>;
+
+export function directionRef(options: SchemaOptions = {}) {
+  return typedRef("styles:direction", options);
+}