@upstart.gg/sdk 0.0.95 → 0.0.97

package/src/shared/bricks/manifests/button.manifest.ts

@@ -0,0 +1,145 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps, optional, prop } from "../props/helpers";
+import { textContentRef } from "../props/text";
+import { RxButton } from "react-icons/rx";
+import { string, urlOrPageIdRef } from "../props/string";
+import { Type } from "@sinclair/typebox";
+import { StringEnum } from "~/shared/utils/schema";
+import type { BrickProps } from "../props/types";
+
+export const manifest = defineBrickManifest({
+  type: "button",
+  name: "Button",
+  repeatable: true,
+  description: "A button with text and optional icon",
+  icon: RxButton,
+  props: defineProps({
+    /**
+     * @see https://daisyui.com/components/button/?lang=en
+     * @see https://raw.githubusercontent.com/saadeghi/daisyui/refs/heads/master/packages/docs/src/routes/(routes)/components/button/+page.md?plain=1
+     */
+    variants: Type.Array(
+      Type.Union(
+        [
+          Type.Literal("btn-neutral", { title: "Neutral", "ai:variant-type": "color" }),
+          Type.Literal("btn-primary", { title: "Primary", "ai:variant-type": "color" }),
+          Type.Literal("btn-secondary", { title: "Secondary", "ai:variant-type": "color" }),
+          Type.Literal("btn-accent", { title: "Accent", "ai:variant-type": "color" }),
+          Type.Literal("btn-info", { title: "Info", "ai:variant-type": "color" }),
+          Type.Literal("btn-success", { title: "Success", "ai:variant-type": "color" }),
+          Type.Literal("btn-warning", { title: "Warning", "ai:variant-type": "color" }),
+          Type.Literal("btn-error", { title: "Error", "ai:variant-type": "color" }),
+          Type.Literal("btn-outline", { title: "Outline", "ai:variant-type": "style" }),
+          Type.Literal("btn-dash", { title: "Dash", "ai:variant-type": "style" }),
+          Type.Literal("btn-soft", { title: "Soft", "ai:variant-type": "style" }),
+          Type.Literal("btn-ghost", { title: "Ghost", "ai:variant-type": "style" }),
+          Type.Literal("btn-link", { title: "Link", "ai:variant-type": "style" }),
+          Type.Literal("btn-active", { title: "Active", "ai:variant-type": "behavior" }),
+          Type.Literal("btn-disabled", { title: "Disabled", "ai:variant-type": "behavior" }),
+          Type.Literal("btn-icon-left", { title: "Icon left", "ai:variant-type": "icon" }),
+          Type.Literal("btn-icon-right", { title: "Icon right", "ai:variant-type": "icon" }),
+          Type.Literal("btn-xs", { title: "Extra small", "ai:variant-type": "size" }),
+          Type.Literal("btn-sm", { title: "Small", "ai:variant-type": "size" }),
+          Type.Literal("btn-md", { title: "Medium", "ai:variant-type": "size" }),
+          Type.Literal("btn-lg", { title: "Large", "ai:variant-type": "size" }),
+          Type.Literal("btn-xl", { title: "Extra large", "ai:variant-type": "size" }),
+          Type.Literal("btn-wide", { title: "Wide", "ai:variant-type": "modifier" }),
+          Type.Literal("btn-block", { title: "Block", "ai:variant-type": "modifier" }),
+          Type.Literal("btn-square", { title: "Square", "ai:variant-type": "modifier" }),
+          Type.Literal("btn-circle", { title: "Circle", "ai:variant-type": "modifier" }),
+        ],
+        {
+          title: "Variant",
+          description: "Button variants.",
+          "ai:tip": "Those are DaisyUI button variants",
+        },
+      ),
+    ),
+    label: textContentRef({ title: "Label", default: "My button" }),
+    type: optional(
+      prop({
+        title: "Type",
+        schema: StringEnum(["button", "submit", "reset"], {
+          enumNames: ["Button", "Submit", "Reset"],
+          default: "button",
+          description: "The type of the button",
+          "ai:instructions":
+            "Use 'button' for regular buttons, 'submit' for form submission, and 'reset' to reset form fields.",
+        }),
+      }),
+    ),
+    icon: optional(
+      prop({
+        title: "Icon",
+        description: "Icon to display (iconify reference)",
+        schema: string("Icon", undefined, {
+          description: "Icon to display (iconify reference)",
+          "ui:field": "iconify",
+        }),
+      }),
+    ),
+    linkToUrlOrPageId: optional(urlOrPageIdRef({ title: "Link" })),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Primary button, large size, linking to a URL",
+    type: "button",
+    props: {
+      variants: ["btn-primary", "btn-lg"],
+      label: "Click me",
+      linkToUrlOrPageId: "https://example.com",
+    },
+  },
+  {
+    description: "Secondary button, small size, linking to a page",
+    type: "button",
+    props: {
+      variants: ["btn-secondary", "btn-sm"],
+      label: "Go to page",
+      linkToUrlOrPageId: "page-id-123",
+    },
+  },
+  {
+    description: "Disabled button with outline style",
+    type: "button",
+    props: {
+      variants: ["btn-outline", "btn-disabled"],
+      label: "Disabled Button",
+    },
+  },
+  {
+    description: "Ghost button",
+    type: "button",
+    props: {
+      variants: ["btn-ghost"],
+      label: "Ghost Button",
+      linkToUrlOrPageId: "https://example.com/ghost",
+    },
+  },
+  {
+    description: "Submit button in a form",
+    type: "button",
+    props: {
+      variants: ["btn-primary", "btn-md"],
+      label: "Submit form",
+      type: "submit",
+    },
+  },
+  {
+    description: "Button with icon on the right",
+    type: "button",
+    props: {
+      variants: ["btn-primary", "btn-md", "btn-icon-right"],
+      label: "Icon Button",
+      icon: "mdi:check-circle",
+    },
+  },
+];

package/src/shared/bricks/manifests/card.manifest.ts

@@ -0,0 +1,269 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { padding, paddingRef } from "../props/padding";
+import { backgroundColor, backgroundColorRef } from "../props/background";
+import { defineProps, group, optional } from "../props/helpers";
+import { textContent, textContentRef } from "../props/text";
+import { BsCardText } from "react-icons/bs";
+import { image, imageRef } from "../props/image";
+import { Type } from "@sinclair/typebox";
+import type { BrickProps } from "../props/types";
+
+export const manifest = defineBrickManifest({
+  type: "card",
+  name: "Card",
+  description: "A multi-purpose card that can have a title, subtitle, image, and content",
+  repeatable: true,
+  icon: BsCardText,
+  props: defineProps({
+    variants: Type.Array(
+      Type.Union(
+        [
+          Type.Literal("image-first", { title: "Image First" }),
+          Type.Literal("image-last", { title: "Image Last" }),
+          Type.Literal("image-overlay", { title: "Image Overlay" }),
+          Type.Literal("image-left-side", { title: "Image Left Side" }),
+          Type.Literal("image-right-side", { title: "Image Right Side" }),
+          Type.Literal("centered", { title: "Centered" }),
+          Type.Literal("large-padding", { title: "Large padding" }),
+        ],
+        {
+          title: "Variant",
+        },
+      ),
+    ),
+    cardTitle: optional(
+      group({
+        title: "Title",
+        children: {
+          content: textContentRef(),
+          padding: optional(paddingRef),
+          backgroundColor: optional(backgroundColorRef()),
+        },
+      }),
+    ),
+    cardImage: optional(
+      group({
+        title: "Image",
+        children: {
+          image: imageRef(),
+        },
+      }),
+    ),
+    cardBody: optional(
+      group({
+        title: "Body",
+        children: {
+          content: textContentRef(),
+          padding: optional(paddingRef),
+          backgroundColor: optional(backgroundColorRef()),
+        },
+      }),
+    ),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "A simple card with a title and content",
+    type: "card",
+    props: {
+      variants: ["image-first"],
+      preset: "prominent-primary",
+      cardTitle: {
+        content: "Card Title",
+        padding: "p-4",
+      },
+      cardBody: {
+        content: "This is the body of the card.",
+      },
+    },
+  },
+  {
+    description: "Card with image and overlay text",
+    type: "card",
+    props: {
+      variants: ["image-overlay", "centered"],
+      cardImage: {
+        image: {
+          src: "https://via.placeholder.com/400x300",
+          alt: "Placeholder image",
+        },
+      },
+      cardTitle: {
+        content: "Overlay Title",
+        padding: "p-8",
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+      },
+      cardBody: {
+        content: "Beautiful overlay content with semi-transparent background.",
+        padding: "p-4",
+        backgroundColor: "rgba(255, 255, 255, 0.9)",
+      },
+    },
+  },
+  {
+    description: "Product card with image on the left",
+    type: "card",
+    props: {
+      variants: ["image-left-side"],
+      cardImage: {
+        image: {
+          src: "https://via.placeholder.com/200x200",
+          alt: "Product image",
+        },
+      },
+      cardTitle: {
+        content: "Premium Headphones",
+        padding: "p-4",
+      },
+      cardBody: {
+        content: "High-quality wireless headphones with noise cancellation and 30-hour battery life.",
+        padding: "p-4",
+      },
+    },
+  },
+  {
+    description: "Feature card with large padding and background",
+    type: "card",
+    props: {
+      variants: ["large-padding", "centered"],
+      cardTitle: {
+        content: "Key Feature",
+        padding: "p-8",
+        backgroundColor: "#f8f9fa",
+      },
+      cardBody: {
+        content: "This feature provides exceptional value and enhances user experience significantly.",
+        padding: "p-8",
+        backgroundColor: "#ffffff",
+      },
+    },
+  },
+  {
+    description: "Blog post card with image at the bottom",
+    type: "card",
+    props: {
+      variants: ["image-last"],
+      cardTitle: {
+        content: "The Future of Technology",
+        padding: "p-4",
+      },
+      cardBody: {
+        content:
+          "Exploring emerging trends and innovations that will shape our digital landscape in the coming decade.",
+        padding: "p-4",
+      },
+      cardImage: {
+        image: {
+          src: "https://via.placeholder.com/400x200",
+          alt: "Technology concept",
+        },
+      },
+    },
+  },
+  {
+    description: "Testimonial card with right-side image",
+    type: "card",
+    props: {
+      variants: ["image-right-side"],
+      cardTitle: {
+        content: "Customer Review",
+        padding: "p-4",
+        backgroundColor: "#e3f2fd",
+      },
+      cardBody: {
+        content:
+          '"This product exceeded my expectations. The quality is outstanding and the customer service is top-notch!"',
+        padding: "p-4",
+      },
+      cardImage: {
+        image: {
+          src: "https://via.placeholder.com/150x150",
+          alt: "Customer photo",
+        },
+      },
+    },
+  },
+  {
+    description: "Minimal centered card without image",
+    type: "card",
+    props: {
+      variants: ["centered"],
+      cardTitle: {
+        content: "Simple Announcement",
+        padding: "p-4",
+      },
+      cardBody: {
+        content: "Important updates will be posted here regularly.",
+        padding: "p-4",
+      },
+    },
+  },
+  {
+    description: "Event card with multiple variants",
+    type: "card",
+    props: {
+      variants: ["image-first", "large-padding", "centered"],
+      cardImage: {
+        image: {
+          src: "https://via.placeholder.com/400x250",
+          alt: "Event venue",
+        },
+      },
+      cardTitle: {
+        content: "Annual Conference 2025",
+        padding: "p-8",
+        backgroundColor: "#1976d2",
+      },
+      cardBody: {
+        content:
+          "Join us for three days of inspiring talks, networking opportunities, and hands-on workshops.",
+        padding: "p-8",
+      },
+    },
+  },
+  {
+    description: "News article card with compact layout",
+    type: "card",
+    props: {
+      variants: ["image-left-side"],
+      cardImage: {
+        image: {
+          src: "https://via.placeholder.com/120x120",
+          alt: "News thumbnail",
+        },
+      },
+      cardTitle: {
+        content: "Breaking News Update",
+        padding: "p-2",
+      },
+      cardBody: {
+        content: "Latest developments in the ongoing story with expert analysis and community reactions.",
+        padding: "p-2",
+      },
+    },
+  },
+  {
+    description: "Call-to-action card with prominent styling",
+    type: "card",
+    props: {
+      variants: ["centered", "large-padding"],
+      cardTitle: {
+        content: "Get Started Today",
+        padding: "p-8",
+        backgroundColor: "#4caf50",
+      },
+      cardBody: {
+        content: "Transform your workflow with our powerful tools. Sign up now and get 30 days free!",
+        padding: "p-8",
+        backgroundColor: "#f1f8e9",
+      },
+    },
+  },
+];

package/src/shared/bricks/manifests/carousel.manifest.ts

@@ -0,0 +1,106 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps, optional } from "../props/helpers";
+import { TbCarouselHorizontal } from "react-icons/tb";
+import { Type } from "@sinclair/typebox";
+import { makeContainerProps } from "../props/container";
+import type { BrickProps } from "../props/types";
+import { background, backgroundRef } from "../props/background";
+import { border, borderRef } from "../props/border";
+import { padding, paddingRef } from "../props/padding";
+import type { FC } from "react";
+import { shadowRef } from "../props/effects";
+
+export const manifest = defineBrickManifest({
+  type: "carousel",
+  kind: "widget",
+  name: "Carousel",
+  description: "A carousel element",
+  isContainer: true,
+  icon: TbCarouselHorizontal,
+  props: defineProps({
+    variants: Type.Array(
+      Type.Union(
+        [
+          Type.Literal("pager-arrows", { title: "With arrows pager" }),
+          Type.Literal("pager-numbers", { title: "With numbered pager" }),
+          Type.Literal("pager-dots", { title: "With dots pager" }),
+        ],
+        {
+          title: "Variant",
+          description: "Carousel variants.",
+        },
+      ),
+    ),
+    background: optional(backgroundRef()),
+    border: optional(borderRef),
+    padding: optional(paddingRef),
+    shadow: optional(shadowRef()),
+    ...makeContainerProps(),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "An image carousel with pager arrows",
+    type: "carousel",
+    props: {
+      variants: ["pager-arrows"],
+      $children: [
+        {
+          type: "image",
+          props: {
+            src: "https://via.placeholder.com/300x200.png?text=Image+1",
+          },
+        },
+        {
+          type: "image",
+          props: {
+            src: "https://via.placeholder.com/300x200.png?text=Image+2",
+          },
+        },
+        {
+          type: "image",
+          props: {
+            src: "https://via.placeholder.com/300x200.png?text=Image+3",
+          },
+        },
+      ],
+    },
+  },
+  {
+    description: "A carousel of text slides with numbered pager",
+    type: "carousel",
+    props: {
+      variants: ["pager-numbers"],
+      $children: [
+        {
+          type: "text",
+          props: {
+            content: "Slide 1",
+            preset: "prominent-primary",
+          },
+        },
+        {
+          type: "text",
+          props: {
+            content: "Slide 2",
+            preset: "prominent-secondary",
+          },
+        },
+        {
+          type: "text",
+          props: {
+            content: "Slide 3",
+            preset: "prominent-accent",
+          },
+        },
+      ],
+    },
+  },
+];