@upstart.gg/sdk 0.0.104 → 0.0.106

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

@@ -1,352 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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),
-};