@upstart.gg/sdk 0.0.96 → 0.0.98

package/src/shared/bricks/props/_style-presets.ts

@@ -0,0 +1,352 @@
+import { Type, type Static } from "@sinclair/typebox";
+import type { BorderSettings } from "./border";
+import type { ColorSettings } from "./color";
+import type { BackgroundSettings } from "./background";
+import type { ShadowSettings } from "./effects";
+
+export type StyleProperties = {
+  color?: ColorSettings;
+  background: BackgroundSettings;
+  border?: Partial<BorderSettings>;
+  shadow?: ShadowSettings;
+};
+
+export const stylePreset = Type.Optional(
+  Type.Object(
+    {
+      style: Type.Union([
+        Type.Literal("ghost", {
+          title: "Ghost",
+          description: "Minimal style with transparent background and no border",
+        }),
+        Type.Literal("plain", {
+          title: "Plain",
+          description: "Simple style with solid dark background and basic border",
+        }),
+        Type.Literal("plain2", {
+          title: "Plain 2",
+          description: "Simple style with solid dark background and basic border",
+        }),
+        Type.Literal("plain3", {
+          title: "Plain 3",
+          description: "Simple style with solid dark background and basic border",
+        }),
+        Type.Literal("modern", {
+          title: "Modern",
+          description: "Bold borders with generous spacing and sharp corners",
+        }),
+        Type.Literal("modern2", {
+          title: "Modern 2",
+          description: "Bold borders with generous spacing and sharp corners",
+        }),
+        Type.Literal("soft", {
+          title: "Soft",
+          description: "Gentle curves and muted colors for a comfortable feel",
+        }),
+        Type.Literal("glass", {
+          title: "Glass",
+          description: "Translucent backdrop with blur effect for depth",
+        }),
+        Type.Literal("elevated", {
+          title: "Elevated",
+          description: "Floating appearance with shadow depth and no borders",
+        }),
+        Type.Literal("outlined", {
+          title: "Outlined",
+          description: "Simple outline with hover effect and no background",
+        }),
+        Type.Literal("paper", {
+          title: "Paper",
+          description: "Subtle texture and slight rotation for a paper-like appearance",
+        }),
+        Type.Literal("gradient", {
+          title: "Gradient",
+          description: "Smooth color gradients background with soft edges",
+        }),
+        Type.Literal("gradient2", {
+          title: "Gradient 2",
+          description: "Smooth color gradients background with soft edges",
+        }),
+        Type.Literal("gradient3", {
+          title: "Gradient 3",
+          description: "Smooth color gradients background with soft edges",
+        }),
+        Type.Literal("gradient4", {
+          title: "Gradient 4",
+          description: "Smooth color gradients background with soft edges",
+        }),
+        Type.Literal("gradient5", {
+          title: "Gradient 5",
+          description: "Smooth color gradients background with soft edges",
+        }),
+        Type.Literal("gradient6", {
+          title: "Gradient 6",
+          description: "Smooth color gradients background with soft edges",
+        }),
+        Type.Literal("callout", {
+          title: "Callout",
+          description: "Prominent style for important information or CTAs",
+        }),
+      ]),
+      variant: Type.Union([
+        Type.Literal("primary", {
+          title: "Primary",
+          description: "Uses the theme primary color as the main color",
+        }),
+        Type.Literal("secondary", {
+          title: "Secondary",
+          description: "Uses the theme secondary color as the main color",
+        }),
+        Type.Literal("neutral", {
+          title: "Neutral",
+          description: "Uses the theme neutral color as the main color",
+        }),
+      ]),
+    },
+    {
+      "ui:field": "hidden",
+    },
+  ),
+);
+
+export type StylePreset = Static<typeof stylePreset>;
+
+export function getPresetStyles({ style, variant }: StylePreset): StyleProperties {
+  // Variant-specific color mappings
+  const variantColors = {
+    primary: {
+      bg: "bg-primary-50",
+      border: "border-primary-200",
+      text: "text-primary-900",
+      shadow: "shadow-primary-200/50",
+    },
+    secondary: {
+      bg: "bg-secondary-50",
+      border: "border-secondary-200",
+      text: "text-secondary-900",
+      shadow: "shadow-secondary-200/50",
+    },
+    accent: {
+      bg: "bg-accent-50",
+      border: "border-accent-200",
+      hover: "hover:border-accent-300",
+      text: "text-accent-900",
+      shadow: "shadow-accent-200/50",
+    },
+    neutral: {
+      bg: "bg-neutral-50",
+      border: "border-neutral-200",
+      hover: "hover:border-neutral-300",
+      text: "text-neutral-900",
+      shadow: "shadow-neutral-200/50",
+    },
+  };
+
+  function getOtherVariantColor(variant: StylePreset["variant"], alt = false) {
+    switch (variant) {
+      case "primary":
+        return alt ? "accent" : "secondary";
+      case "secondary":
+        return alt ? "primary" : "accent";
+      case "neutral":
+        return alt ? "primary" : "accent";
+    }
+  }
+
+  const styleProperties: Record<StylePreset["style"], StyleProperties> = {
+    ghost: {
+      background: {
+        color: "transparent",
+      },
+      border: {
+        width: "border-0",
+      },
+      color: `text-${variant}-900`,
+    },
+    plain: {
+      background: {
+        color: `bg-${variant}-600`,
+      },
+      border: {
+        color: `border-${variant}-900`,
+        style: "border-solid",
+        width: "border",
+      },
+      shadow: "shadow-sm",
+      color: variant === "neutral" ? "text-neutral-800" : `text-${variant}-50`,
+    },
+    plain2: {
+      background: {
+        color: `bg-${variant}-400`,
+      },
+      border: {
+        color: `border-${variant}-700`,
+        style: "border-solid",
+        width: "border",
+      },
+      shadow: "shadow-sm",
+      color: variant === "neutral" ? "text-neutral-800" : `text-${variant}-900`,
+    },
+    plain3: {
+      background: {
+        color: `bg-${variant}-200`,
+      },
+      border: {
+        color: `border-${variant}-500`,
+        style: "border-solid",
+        width: "border",
+      },
+      shadow: "shadow-sm",
+      color: variant === "neutral" ? "text-neutral-800" : `text-${variant}-900`,
+    },
+    callout: {
+      background: {
+        color: `bg-${variant}-100`,
+      },
+      border: {
+        color: `border-${variant}-400`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: `text-${variant}-900`,
+    },
+    elevated: {
+      background: {
+        color: `bg-${variant}-100`,
+      },
+      shadow: "shadow-lg",
+      color: `text-${variant}-900`,
+    },
+    glass: {
+      background: {
+        color: `bg-${variant}-50`,
+      },
+      border: {
+        color: variantColors[variant].border,
+        style: "border-solid",
+        width: "border",
+      },
+      shadow: "shadow-sm",
+      color: `text-${variant}-900`,
+    },
+    modern: {
+      background: {
+        color: `bg-${variant}-100`,
+      },
+      border: {
+        color: `border-${variant}-700`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: `text-${variant}-900`,
+    },
+    modern2: {
+      background: {
+        color: `bg-${variant}-300`,
+      },
+      border: {
+        color: `border-${variant}-700`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: `text-${variant}-900`,
+    },
+    soft: {
+      background: {
+        color: `bg-${variant}-50`,
+      },
+      border: {
+        color: `border-${variant}-300`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: `text-${variant}-800`,
+    },
+    gradient: {
+      background: {
+        color: `bg-gradient-to-tr from-${variant}-200 to-${variant}-50`,
+      },
+      border: {
+        color: `border-${variant}-200`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: "text-neutral-900",
+    },
+    gradient2: {
+      background: {
+        color: `bg-gradient-to-tr from-${variant}-200 ${variant === "neutral" ? "to-neutral-100" : `to-${getOtherVariantColor(variant)}-200`}`,
+      },
+      border: {
+        color: `border-${variant}-200`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: "text-neutral-900",
+    },
+    gradient3: {
+      background: {
+        color: `bg-gradient-to-tr from-${variant}-200 ${variant === "neutral" ? "to-neutral-100" : `to-${getOtherVariantColor(variant, true)}-200`}`,
+      },
+      border: {
+        color: `border-${variant}-200`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: "text-neutral-900",
+    },
+    gradient4: {
+      background: {
+        color: `bg-gradient-to-tr from-${variant}-400 to-${variant}-100`,
+      },
+      border: {
+        color: `border-${variant}-200`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: "text-neutral-900",
+    },
+    gradient5: {
+      background: {
+        color: `bg-gradient-to-tr from-${variant}-400 ${variant === "neutral" ? "to-neutral-200" : `to-${getOtherVariantColor(variant)}-400`}`,
+      },
+      border: {
+        color: `border-${variant}-200`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: "text-neutral-900",
+    },
+    gradient6: {
+      background: {
+        color: `bg-gradient-to-tr from-${variant}-400 ${variant === "neutral" ? "to-neutral-200" : `to-${getOtherVariantColor(variant, true)}-400`}`,
+      },
+      border: {
+        color: `border-${variant}-200`,
+        style: "border-solid",
+        width: "border",
+      },
+      color: "text-neutral-900",
+    },
+    paper: {
+      background: {
+        color: `bg-${variant}-50`,
+      },
+      color: `text-${variant}-800`,
+      shadow: "shadow-md",
+    },
+    outlined: {
+      background: {
+        color: "bg-transparent",
+      },
+      border: {
+        color: `border-${variant}-600`,
+        style: "border-solid",
+        width: "border-2",
+      },
+      color: `text-${variant}-800`,
+    },
+  };
+
+  return styleProperties[style];
+}

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

@@ -0,0 +1,59 @@
+import { type SchemaOptions, Type, type Static } from "@sinclair/typebox";
+import { optional, prop } from "./helpers";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+type AlignBasicOptions = {
+  title?: string;
+  defaultValue?: {
+    horizontal: string;
+    vertical: string;
+  };
+};
+
+export function basicAlign(opts: AlignBasicOptions = {}) {
+  const { title = "Align", defaultValue = { horizontal: "justify-start", vertical: "items-center" } } = opts;
+  return prop({
+    title,
+    schema: Type.Object(
+      {
+        horizontal: optional(
+          Type.Union(
+            [
+              Type.Literal("justify-start", { title: "Left" }),
+              Type.Literal("justify-center", { title: "Center" }),
+              Type.Literal("justify-end", { title: "Right" }),
+            ],
+            {
+              title: "Horizontal",
+            },
+          ),
+        ),
+        vertical: optional(
+          Type.Union(
+            [
+              Type.Literal("items-start", { title: "Top" }),
+              Type.Literal("items-center", { title: "Center" }),
+              Type.Literal("items-end", { title: "Bottom" }),
+            ],
+            {
+              title: "Vertical",
+            },
+          ),
+        ),
+      },
+      {
+        $id: "styles:basicAlign",
+        "ui:responsive": true,
+        "ui:field": "align-basic",
+        "ui:styleId": "#styles:basicAlign",
+        default: defaultValue,
+      },
+    ),
+  });
+}
+
+export type AlignBasicSettings = Static<ReturnType<typeof basicAlign>>;
+
+export function basicAlignRef(options: SchemaOptions = {}) {
+  return typedRef("styles:basicAlign", options);
+}

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

@@ -0,0 +1,118 @@
+import { type SchemaOptions, Type, type Static } from "@sinclair/typebox";
+import { prop } from "./helpers";
+import type { ElementColorType } from "~/shared/themes/color-system";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+type BackgroundOptions = {
+  title?: string;
+  defaultValue?: {
+    color?: string;
+    image?: string;
+    size?: string;
+    repeat?: string;
+  };
+  colorType?: ElementColorType;
+};
+
+export function background(opts: BackgroundOptions = {}) {
+  const { title = "Background", defaultValue, colorType = "background" } = opts;
+  return prop({
+    title,
+    schema: Type.Object(
+      {
+        color: Type.Optional(
+          Type.String({
+            default: defaultValue?.color,
+            title: "Color",
+            description:
+              "Use `bg-<variant>-<shade>`, variants being 'primary', 'secondary', 'accent' and 'neutral', and shades between 50 and 900. Can also be a gradient using 'bg-gradient-to-<direction> from-<color> to-<color>'",
+            examples: ["bg-primary", "bg-base-100", "bg-primary-50", "bg-primary-500", "bg-accent-900"],
+          }),
+        ),
+        image: Type.Optional(
+          Type.String({
+            title: "Image",
+            description: "The background image. Can be a URL or a data URI",
+            examples: [
+              "https://example.com/image.png",
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...",
+            ],
+          }),
+        ),
+        size: Type.Optional(
+          Type.Union(
+            [
+              Type.Literal("auto", { title: "Auto" }),
+              Type.Literal("cover", { title: "Cover" }),
+              Type.Literal("contain", { title: "Contain" }),
+            ],
+            {
+              default: defaultValue?.size ?? "auto",
+              "ai:instructions": "Only use this when the image is set.",
+            },
+          ),
+        ),
+        repeat: Type.Optional(
+          Type.Union(
+            [
+              Type.Literal("no-repeat", { title: "No repeat" }),
+              Type.Literal("repeat", { title: "Repeat" }),
+              Type.Literal("repeat-x", { title: "Repeat horizontally" }),
+              Type.Literal("repeat-y", { title: "Repeat vertically" }),
+              Type.Literal("space", { title: "Space" }),
+              Type.Literal("round", { title: "Round" }),
+            ],
+            {
+              default: defaultValue?.repeat ?? "no-repeat",
+              "ai:instructions": "Only use this when the image is set.",
+            },
+          ),
+        ),
+      },
+      {
+        $id: "styles:background",
+        "ui:styleId": "#styles:background",
+        "ui:field": "background",
+        "ui:group": "background",
+        "ui:group:title": "Background",
+        "ui:color-type": colorType,
+        // disable for now
+        // "ui:show-img-search": true,
+        default: defaultValue
+          ? {
+              color: defaultValue.color,
+              size: defaultValue.size,
+              repeat: defaultValue.repeat,
+            }
+          : undefined,
+      },
+    ),
+  });
+}
+
+export type BackgroundSettings = Static<ReturnType<typeof background>>;
+
+export function backgroundRef(options: SchemaOptions = {}) {
+  return typedRef("styles:background", options);
+}
+
+export function backgroundColor(defaultValue?: string, title = "Background color") {
+  return prop({
+    title,
+    schema: Type.String({
+      $id: "styles:backgroundColor",
+      "ai:instructions":
+        "Can be set to transparent, hex/rgb/rgba color, or classes like `bg-<variant>-<shade>`, variants being primary, secondary, accent and neutral, and shades between 100 and 900. Use bg-<variant>-<shade> classes as much as possible.",
+      default: defaultValue,
+      "ui:field": "color",
+      "ui:color-type": "background",
+      "ui:styleId": "#styles:backgroundColor",
+    }),
+  });
+}
+
+export type BackgroundColorSettings = Static<ReturnType<typeof backgroundColor>>;
+
+export function backgroundColorRef(options: SchemaOptions = {}) {
+  return typedRef("styles:backgroundColor", { ...options, "ui:styleId": "#styles:backgroundColor" });
+}

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

@@ -0,0 +1,11 @@
+import { Type } from "@sinclair/typebox";
+import { prop } from "./helpers";
+
+type BooleanOptions = Record<string, unknown>;
+
+export function boolean(title: string, defaultValue?: boolean, options: BooleanOptions = {}) {
+  return prop({
+    title,
+    schema: Type.Boolean({ default: defaultValue ?? false, ...options }),
+  });
+}

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

@@ -0,0 +1,84 @@
+import { Type, type Static } from "@sinclair/typebox";
+import { group, optional, prop } from "./helpers";
+import { StringEnum } from "~/shared/utils/schema";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function border(title = "Border") {
+  return group({
+    title,
+    options: {
+      "ui:styleId": "#styles:border",
+      $id: "styles:border",
+    },
+    children: {
+      rounding: optional(
+        StringEnum(
+          [
+            "rounded-auto",
+            "rounded-none",
+            "rounded-sm",
+            "rounded-md",
+            "rounded-lg",
+            "rounded-xl",
+            "rounded-2xl",
+            "rounded-3xl",
+            "rounded-full",
+          ],
+          {
+            title: "Corner rounding",
+            enumNames: ["Auto", "None", "Small", "Medium", "Large", "Extra large", "2xl", "3xl", "Full"],
+            "ui:placeholder": "Not specified",
+            "ui:field": "enum",
+            "ui:display": "select",
+          },
+        ),
+      ),
+      width: optional(
+        StringEnum(["border-0", "border", "border-2", "border-4", "border-8"], {
+          title: "Width",
+          enumNames: ["None", "S", "M", "L", "XL"],
+          "ai:instructions": "Don't specify width if you want no border.",
+          "ui:field": "enum",
+          "ui:placeholder": "None",
+        }),
+      ),
+      color: Type.Optional(
+        Type.String({
+          // default: defaultValue?.color,
+          title: "Color",
+          "ai:instructions":
+            "Can be set to transparent, hex/rgb/rgba color, or classes like `border-<variant>-<shade>`, variants being primary, secondary, accent and neutral, and shades between 50 and 900",
+          "ui:field": "color",
+          "ui:color-type": "border",
+        }),
+      ),
+      sides: Type.Optional(
+        Type.Array(
+          StringEnum(["border-l", "border-t", "border-r", "border-b"], {
+            title: "Sides",
+            enumNames: ["Left", "Top", "Right", "Bottom"],
+            description:
+              "The specific sides where to apply the border. Not specifying sides will apply the border to all sides.",
+            "ui:field": "border-side",
+            "ai:instructions":
+              "Use this to apply the border to specific sides. Not specifying sides will apply the border to all sides.",
+          }),
+        ),
+      ),
+      style: optional(
+        StringEnum(["border-solid", "border-dashed", "border-dotted"], {
+          title: "Style",
+          description: "The brick border style",
+          enumNames: ["Solid", "Dashed", "Dotted"],
+          "ai:instructions": "Use only when width is different than border-0.",
+          "ui:field": "enum",
+          "ui:display": "button-group",
+        }),
+      ),
+    },
+  });
+}
+
+export const borderRef = typedRef("styles:border", { "ui:styleId": "#styles:border" });
+
+export type BorderSettings = Static<ReturnType<typeof border>>;

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

@@ -0,0 +1,24 @@
+import { type SchemaOptions, type Static, Type } from "@sinclair/typebox";
+import { prop } from "./helpers";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function color(defaultValue?: string, title = "Text color") {
+  return prop({
+    title,
+    schema: Type.String({
+      $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" });
+}

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

@@ -0,0 +1,37 @@
+import { Type } from "@sinclair/typebox";
+import { preset, presetRef } from "./preset";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function hidden() {
+  return Type.Object(
+    {
+      desktop: Type.Boolean(),
+      mobile: 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({
+      default: 0,
+      "ui:field": "hidden",
+      "ai:hidden": true,
+    }),
+  ),
+  hidden: Type.Optional(typedRef("styles:hidden")),
+  editable: Type.Optional(
+    Type.Boolean({
+      description: "Do not use. It is used internally by the editor.",
+      "ui:field": "hidden",
+      "ai:hidden": true,
+    }),
+  ),
+  preset: Type.Optional(presetRef),
+};