@upstart.gg/sdk 0.0.96 → 0.0.97

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

@@ -0,0 +1,132 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps, group, optional } from "../props/helpers";
+import { basicAlign, basicAlignRef } from "../props/align";
+import { background, backgroundRef } from "../props/background";
+import { border, borderRef } from "../props/border";
+import { textContent, textContentRef } from "../props/text";
+import { padding, paddingRef } from "../props/padding";
+import { BsAlphabetUppercase } from "react-icons/bs";
+import { preset } from "../props/preset";
+import type { BrickProps } from "../props/types";
+import { colorRef } from "../props/color";
+import type { FC } from "react";
+import type { Type } from "@sinclair/typebox";
+import { shadowRef } from "../props/effects";
+
+export const manifest = defineBrickManifest({
+  type: "hero",
+  name: "Hero",
+  kind: "brick",
+  description: "A big textual element for home pages",
+  aiInstructions: `
+This hero element is a large text element that can be used to display a title and an optional tagline.
+It is typically used on home pages to grab the user's attention.
+  `.trim(),
+  icon: BsAlphabetUppercase,
+
+  defaultHeight: { desktop: 5, mobile: 5 },
+  defaultWidth: { desktop: 12, mobile: 12 },
+
+  props: defineProps(
+    {
+      content: textContentRef({ title: "Hero title", default: "I'm a big text" }),
+      tagline: optional(textContentRef({ title: "Hero tagline", default: "I'm a tagline" })),
+      background: optional(backgroundRef()),
+      color: optional(colorRef()),
+      shadow: optional(shadowRef()),
+      align: optional(basicAlignRef()),
+      padding: optional(paddingRef),
+      border: optional(borderRef),
+    },
+    {
+      default: {
+        padding: "p-4",
+      },
+    },
+  ),
+});
+
+export type Manifest = typeof manifest;
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Simple welcome hero with blue background",
+    type: "hero",
+    props: {
+      preset: "prominent-primary",
+      content: "Welcome to Our Platform",
+      tagline: "The future of productivity starts here",
+      align: {
+        horizontal: "justify-center",
+      },
+      padding: "p-8",
+    },
+  },
+  {
+    description: "Startup hero with gradient background",
+    type: "hero",
+    props: {
+      preset: "prominent-secondary",
+      content: "Build Something Amazing",
+      tagline: "Turn your ideas into reality with our cutting-edge tools",
+      align: {
+        horizontal: "justify-center",
+      },
+      padding: "p-16",
+    },
+  },
+  {
+    description: "Construction company hero with bold presence",
+    type: "hero",
+    props: {
+      preset: "prominent-primary",
+      content: "Building Tomorrow Today",
+      tagline: "Quality construction services for residential and commercial projects",
+      padding: "p-16",
+    },
+  },
+  {
+    description: "Fashion brand hero with modern appeal",
+    type: "hero",
+    props: {
+      preset: "prominent-accent",
+      content: "Express Your Style",
+      tagline: "Contemporary fashion that speaks to your individuality",
+      align: {
+        horizontal: "justify-center",
+        vertical: "items-start",
+      },
+      padding: "p-16",
+    },
+  },
+  {
+    description: "Law firm hero with authoritative tone",
+    type: "hero",
+    props: {
+      preset: "prominent-secondary",
+      content: "Justice You Can Trust",
+      tagline: "Experienced legal representation for individuals and businesses",
+      padding: "p-8",
+      border: {
+        width: "border-2",
+        color: "border-gray-800",
+        rounding: "rounded-lg",
+      },
+    },
+  },
+  {
+    description: "Photography studio hero with artistic flair",
+    type: "hero",
+    props: {
+      preset: "surface-1",
+      content: "Capturing Life's Moments",
+      tagline: "Professional photography services for weddings, portraits, and events",
+      border: {
+        rounding: "rounded-lg",
+      },
+    },
+  },
+];

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

@@ -0,0 +1,130 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps, optional, prop } from "../props/helpers";
+import { PiConfetti } from "react-icons/pi";
+import { string, urlOrPageId, urlOrPageIdRef } from "../props/string";
+import type { BrickProps } from "../props/types";
+import type { FC } from "react";
+import type { Type } from "@sinclair/typebox";
+
+export const manifest = defineBrickManifest({
+  type: "icon",
+  name: "Icon",
+  kind: "brick",
+  description: "An icon with optional text",
+  repeatable: true,
+  icon: PiConfetti,
+  props: defineProps({
+    icon: prop({
+      title: "Icon",
+      description: "Icon to display (iconify reference)",
+      schema: string("Icon", undefined, {
+        description: "Icon to display (iconify reference)",
+        "ui:field": "iconify",
+      }),
+    }),
+    size: prop({
+      title: "Size",
+      description: "Size of the icon",
+      schema: string("Size", "1em", {
+        description: "Size of the icon",
+        "ai:instructions": "The size of the icon can be set using 'em' or '%' unit.",
+      }),
+    }),
+    link: optional(urlOrPageIdRef({ title: "Link" })),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Large heart icon",
+    type: "icon",
+    props: {
+      icon: "mdi:heart",
+      size: "2em",
+    },
+  },
+  {
+    description: "Shopping cart icon",
+    type: "icon",
+    props: {
+      icon: "mdi:cart",
+      size: "1.2em",
+    },
+  },
+  {
+    description: "Email/message icon",
+    type: "icon",
+    props: {
+      icon: "mdi:email",
+      size: "1.1em",
+      link: "mailto:john.doe@example.com",
+    },
+  },
+  {
+    description: "Phone contact icon",
+    type: "icon",
+    props: {
+      icon: "mdi:phone",
+      size: "1em",
+      link: "tel:+1234567890",
+    },
+  },
+  {
+    description: "Large download icon",
+    type: "icon",
+    props: {
+      icon: "mdi:download",
+      size: "2.5em",
+      link: "https://example.com/file.zip",
+    },
+  },
+  {
+    description: "Menu hamburger icon",
+    type: "icon",
+    props: {
+      icon: "mdi:menu",
+      size: "1.4em",
+    },
+  },
+  {
+    description: "Close/X icon",
+    type: "icon",
+    props: {
+      icon: "mdi:close",
+      size: "1.2em",
+    },
+  },
+  {
+    description: "Social media Facebook icon",
+    type: "icon",
+    props: {
+      icon: "mdi:facebook",
+      size: "1.4em",
+      link: "https://www.facebook.com/yourprofile",
+    },
+  },
+  {
+    description: "Social media Twitter icon",
+    type: "icon",
+    props: {
+      icon: "mdi:twitter",
+      size: "1.4em",
+      link: "https://twitter.com/yourprofile",
+    },
+  },
+  {
+    description: "Social media Instagram icon",
+    type: "icon",
+    props: {
+      icon: "mdi:instagram",
+      size: "1.4em",
+      link: "https://www.instagram.com/yourprofile",
+    },
+  },
+];

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

@@ -0,0 +1,203 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps, optional } from "../props/helpers";
+import { imageRef } from "../props/image";
+import { backgroundColorRef } from "../props/background";
+import { borderRef } from "../props/border";
+import { shadowRef } from "../props/effects";
+import { paddingRef } from "../props/padding";
+import { RxImage } from "react-icons/rx";
+import { string } from "../props/string";
+import { Type } from "@sinclair/typebox";
+import type { BrickProps } from "../props/types";
+
+export const manifest = defineBrickManifest({
+  type: "image",
+  kind: "brick",
+  name: "Image",
+  description: "An image brick",
+  repeatable: true,
+  defaultHeight: { desktop: 8, mobile: 8 },
+  defaultWidth: { desktop: 3, mobile: 3 },
+  icon: RxImage,
+  props: defineProps({
+    image: imageRef(),
+    backgroundColor: optional(backgroundColorRef()),
+    border: optional(borderRef),
+    padding: optional(paddingRef),
+    shadow: optional(shadowRef()),
+    blurHash: optional(
+      string("Blur Hash", undefined, {
+        "ui:fied": "hidden",
+        description: "A placeholder for the image while it is loading. Use a blur hash string.",
+      }),
+    ),
+    author: optional(
+      Type.Object({
+        name: string("Image Author", undefined, {
+          "ui:field": "hidden",
+          description: "Image author. Use this to give credit to the author",
+        }),
+        url: string("Image Author URL", undefined, {
+          "ui:field": "hidden",
+          description: "Image author URL. Use this to give credit to the author",
+        }),
+      }),
+    ),
+    provider: optional(
+      string("Image Provider", undefined, {
+        "ui:field": "hidden",
+        description: "Image provider. Use this to give credit to the author",
+        "ai:instructions": "The provider of the image, e.g. 'unsplash', 'pexels', etc.",
+      }),
+    ),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Hero landscape image with shadow",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/800x400.png?text=Hero+Landscape",
+        alt: "Beautiful landscape view for hero section",
+      },
+      shadow: "shadow-lg",
+    },
+  },
+  {
+    description: "Team member profile photo",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/300x300.png?text=Profile+Photo",
+        alt: "Team member profile photo",
+      },
+      shadow: "shadow-md",
+      border: {
+        rounding: "rounded-full",
+      },
+    },
+  },
+  {
+    description: "Product showcase image",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/400x400.png?text=Product+Image",
+        alt: "Premium product showcase",
+      },
+      shadow: "shadow-sm",
+    },
+  },
+  {
+    description: "Blog article featured image",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/600x300.png?text=Article+Featured",
+        alt: "Featured image for blog article",
+      },
+      author: {
+        name: "John Photographer",
+        url: "https://example.com/john",
+      },
+      provider: "unsplash",
+    },
+  },
+  {
+    description: "Gallery thumbnail with hover effect",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/250x250.png?text=Gallery+Thumb",
+        alt: "Gallery thumbnail image",
+      },
+
+      shadow: "shadow-md",
+    },
+  },
+  {
+    description: "Logo image with padding",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/200x80.png?text=Company+Logo",
+        alt: "Company logo",
+      },
+      padding: "p-8",
+    },
+  },
+  {
+    description: "Testimonial customer photo",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/120x120.png?text=Customer",
+        alt: "Happy customer testimonial photo",
+      },
+      border: {
+        rounding: "rounded-xl",
+      },
+      shadow: "shadow-lg",
+      padding: "p-2",
+      backgroundColor: "#ffffff",
+    },
+  },
+  {
+    description: "Event banner image",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/800x200.png?text=Event+Banner",
+        alt: "Annual conference event banner",
+      },
+      border: {
+        rounding: "rounded-lg",
+      },
+      shadow: "shadow-xl",
+      author: {
+        name: "Event Photographer",
+        url: "https://example.com/photographer",
+      },
+      provider: "pexels",
+    },
+  },
+  {
+    description: "Illustration with background",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/150x150.png?text=Blabla+Feature",
+        alt: "Feature illustration",
+      },
+      backgroundColor: "#f0f9ff",
+      padding: "p-8",
+      border: {
+        rounding: "rounded-lg",
+      },
+      shadow: "shadow-sm",
+    },
+  },
+  {
+    description: "Image with blurHash",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/300x200.png?text=Card+Image",
+        alt: "My image",
+      },
+      border: {
+        rounding: "rounded-lg",
+      },
+      shadow: "shadow-md",
+      blurHash: "L6PZfSi_.AyE_3t7t7R**0o#DgR4",
+    },
+  },
+];

package/src/shared/bricks/manifests/images-gallery.manifest.ts

@@ -0,0 +1,227 @@
+import { Type } from "@sinclair/typebox";
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { canvasDataURI } from "~/shared/utils/canvas-data-uri";
+import { datasourceRef } from "../props/datasource";
+import { defineProps, group, optional, prop } from "../props/helpers";
+import { containerLayout, containerLayoutRef, makeContainerProps } from "../props/container";
+import { IoGridOutline } from "react-icons/io5";
+import type { BrickProps } from "../props/types";
+import { string, url } from "../props/string";
+import type { FC } from "react";
+
+export const datasource = Type.Array(
+  Type.Object({
+    src: Type.String({ format: "uri", title: "Image URL" }),
+    alt: Type.String({ default: "", title: "Alt text" }),
+  }),
+  {
+    default: [
+      {
+        src: canvasDataURI,
+        alt: "my image",
+      },
+      { src: canvasDataURI, alt: "my image" },
+      { src: canvasDataURI, alt: "my image" },
+      { src: canvasDataURI, alt: "my image" },
+      { src: canvasDataURI, alt: "my image" },
+      { src: canvasDataURI, alt: "my image" },
+    ],
+  },
+);
+
+export type Datasource = typeof datasource;
+
+export const manifest = defineBrickManifest({
+  type: "images-gallery",
+  kind: "widget",
+  name: "Gallery",
+  description: "An image collection",
+  aiInstructions: "This brick should mostly be used for image galleries and collections.",
+  defaultInspectorTab: "content",
+  isContainer: false,
+  minWidth: {
+    mobile: 10,
+    desktop: 10,
+  },
+  minHeight: {
+    mobile: 10,
+    desktop: 10,
+  },
+  icon: IoGridOutline,
+  props: defineProps({
+    datasource: optional(datasourceRef()),
+    staticImages: optional(
+      prop({
+        title: "Nav items",
+        schema: Type.Array(Type.Object({ src: url("Image URL"), legend: string("Legend") }), {
+          title: "Images",
+          default: [],
+        }),
+      }),
+    ),
+    styles: group({
+      title: "Styles",
+      children: {
+        layout: containerLayoutRef(),
+      },
+    }),
+  }),
+  datasource,
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Product portfolio gallery (3-column grid)",
+    type: "images-gallery",
+    props: {
+      styles: {
+        layout: {
+          type: "grid",
+          columns: 3,
+          gap: "gap-4",
+        },
+      },
+      staticImages: [
+        {
+          src: "https://via.placeholder.com/400x400.png?text=Product+1",
+          legend: "Premium wireless headphones",
+        },
+        {
+          src: "https://via.placeholder.com/400x400.png?text=Product+2",
+          legend: "Bluetooth speaker",
+        },
+        {
+          src: "https://via.placeholder.com/400x400.png?text=Product+3",
+          legend: "Smart fitness tracker",
+        },
+        {
+          src: "https://via.placeholder.com/400x400.png?text=Product+4",
+          legend: "Wireless charging pad",
+        },
+      ],
+    },
+  },
+  {
+    description: "Team photos gallery (4-column grid)",
+    type: "images-gallery",
+    props: {
+      styles: {
+        layout: {
+          type: "grid",
+          gap: "gap-8",
+        },
+      },
+      staticImages: [
+        {
+          src: "https://via.placeholder.com/300x300.png?text=CEO",
+          legend: "Sarah Johnson - Chief Executive Officer",
+        },
+        {
+          src: "https://via.placeholder.com/300x300.png?text=CTO",
+          legend: "Mike Chen - Chief Technology Officer",
+        },
+        {
+          src: "https://via.placeholder.com/300x300.png?text=Design",
+          legend: "Emily Rodriguez - Head of Design",
+        },
+        {
+          src: "https://via.placeholder.com/300x300.png?text=Marketing",
+          legend: "David Park - Marketing Director",
+        },
+        {
+          src: "https://via.placeholder.com/300x300.png?text=Sales",
+          legend: "Lisa Wong - Sales Manager",
+        },
+        {
+          src: "https://via.placeholder.com/300x300.png?text=Support",
+          legend: "Alex Thompson - Customer Support Lead",
+        },
+        {
+          src: "https://via.placeholder.com/300x300.png?text=Dev",
+          legend: "Carlos Martinez - Senior Developer",
+        },
+        {
+          src: "https://via.placeholder.com/300x300.png?text=HR",
+          legend: "Jennifer Adams - HR Specialist",
+        },
+      ],
+    },
+  },
+  {
+    description: "Project showcase (2-column grid with larger spacing)",
+    type: "images-gallery",
+    props: {
+      styles: {
+        layout: {
+          type: "grid",
+          columns: 2,
+          gap: "gap-8",
+        },
+      },
+      staticImages: [
+        {
+          src: "https://via.placeholder.com/600x400.png?text=Website+Redesign",
+          legend: "Modern e-commerce website redesign project",
+        },
+        {
+          src: "https://via.placeholder.com/600x400.png?text=Mobile+App",
+          legend: "iOS and Android mobile application",
+        },
+        {
+          src: "https://via.placeholder.com/600x400.png?text=Brand+Identity",
+          legend: "Complete brand identity design package",
+        },
+        {
+          src: "https://via.placeholder.com/600x400.png?text=Dashboard+UI",
+          legend: "Analytics dashboard user interface",
+        },
+      ],
+    },
+  },
+  {
+    description: "Event photos (horizontal flex layout)",
+    type: "images-gallery",
+    props: {
+      styles: {
+        layout: {
+          type: "flex",
+          direction: "flex-row",
+          wrap: true,
+          gap: "gap-4",
+        },
+      },
+      staticImages: [
+        {
+          src: "https://via.placeholder.com/250x180.png?text=Opening",
+          legend: "Conference opening ceremony",
+        },
+        {
+          src: "https://via.placeholder.com/250x180.png?text=Keynote",
+          legend: "Keynote presentation",
+        },
+        {
+          src: "https://via.placeholder.com/250x180.png?text=Workshop",
+          legend: "Technical workshop session",
+        },
+        {
+          src: "https://via.placeholder.com/250x180.png?text=Networking",
+          legend: "Networking lunch break",
+        },
+        {
+          src: "https://via.placeholder.com/250x180.png?text=Panel",
+          legend: "Expert panel discussion",
+        },
+        {
+          src: "https://via.placeholder.com/250x180.png?text=Awards",
+          legend: "Awards ceremony",
+        },
+      ],
+    },
+  },
+];