@upstart.gg/sdk 0.0.137 → 0.0.139

package/dist/shared/bricks/manifests/images-gallery.manifest.js

@@ -1,26 +1,600 @@
-/*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
+import { defineBrickManifest } from "../../brick-manifest.js";
+import { cssLength } from "../props/css-length.js";
+import { grow } from "../props/grow.js";
+import { defineProps } from "../props/helpers.js";
+import { image } from "../props/image.js";
+import { colorPreset } from "../props/color-preset.js";
+import { loop } from "../props/dynamic.js";
+import { border, rounding } from "../props/border.js";
+import { Type } from "@sinclair/typebox";
+import { IoGridOutline } from "react-icons/io5";
 
-import {
-  examples,
-  manifest
-} from "../../chunk-PF75LW33.js";
-import "../../chunk-SRYBJ6NQ.js";
-import "../../chunk-JSDKK5QN.js";
-import "../../chunk-VTCHJT4O.js";
-import "../../chunk-DRQKKPTX.js";
-import "../../chunk-XXPSM6UA.js";
-import "../../chunk-OJ6KL7FU.js";
-import "../../chunk-XFZQGRRL.js";
-import "../../chunk-ZRBTAC3G.js";
-import "../../chunk-IEMCCHM4.js";
-import "../../chunk-EMF5TCPX.js";
-import "../../chunk-MO6CRLQA.js";
-import "../../chunk-J45LSQT6.js";
-import "../../chunk-HY7JOP3J.js";
-import "../../chunk-GDYCCB3B.js";
-import "../../chunk-ZGQ3AQBG.js";
-export {
-  examples,
-  manifest
-};
+//#region src/shared/bricks/manifests/images-gallery.manifest.ts
+const manifest = defineBrickManifest({
+	type: "images-gallery",
+	name: "Gallery",
+	category: "media",
+	description: "Displays an images collection.",
+	aiInstructions: "This brick should mostly be used for image galleries. Prefer using card bricks for product showcases, articles lists with images, or other collections.",
+	consumesMultipleQueryRows: true,
+	defaultInspectorTab: "content",
+	isContainer: false,
+	minHeight: { desktop: 200 },
+	minWidth: { desktop: 300 },
+	defaultWidth: {
+		desktop: "400px",
+		mobile: "100%"
+	},
+	icon: IoGridOutline,
+	props: defineProps({
+		colorPreset: Type.Optional(colorPreset({ title: "Color" })),
+		loop: Type.Optional(loop()),
+		images: Type.Array(Type.Object({
+			image: image({
+				"ui:responsive": "desktop",
+				"ui:no-alt-text": true,
+				"ui:no-object-options": true,
+				"ui:placeholder": "https://example.com/image.jpg"
+			}),
+			legend: Type.Optional(Type.String({ title: "Legend" }))
+		}), {
+			title: "Images",
+			default: [],
+			maxItems: 12,
+			metadata: {
+				category: "content",
+				consumeQuery: true
+			},
+			examples: [
+				{
+					image: { src: "https://via.placeholder.com/300x200.png?text=Image+1" },
+					legend: "Image 1"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x200.png?text=Image+2" },
+					legend: "Image 2"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x200.png?text=Image+3" },
+					legend: "Image 3"
+				}
+			]
+		}),
+		columns: Type.Optional(Type.Number({
+			title: "Columns",
+			description: "Number of columns. Only applies to desktop screens. On mobile, it will always display 1 column.",
+			minimum: 1,
+			maximum: 6,
+			default: 3,
+			"ui:field": "slider",
+			"ui:responsive": "desktop"
+		})),
+		gap: Type.Optional(cssLength({
+			title: "Gap",
+			description: "The gap between the images.",
+			default: "1rem",
+			"ui:styleId": "styles:gap"
+		})),
+		padding: Type.Optional(cssLength({
+			default: "3rem",
+			description: "Padding inside the gallery.",
+			"ai:instructions": "Use only a single value like '1rem' or '10px'",
+			title: "Padding",
+			"ui:responsive": true,
+			"ui:placeholder": "Not specified",
+			"ui:styleId": "styles:padding"
+		})),
+		rounding: rounding(),
+		border: Type.Optional(border()),
+		grow: Type.Optional(grow({ default: true }))
+	})
+});
+const examples = [
+	{
+		description: "Product portfolio gallery (3-column grid)",
+		type: "images-gallery",
+		props: {
+			columns: 3,
+			gap: "2.5rem",
+			padding: "p-4",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/400x400.png?text=Product+1" },
+					legend: "Premium wireless headphones"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x400.png?text=Product+2" },
+					legend: "Bluetooth speaker"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x400.png?text=Product+3" },
+					legend: "Smart fitness tracker"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x400.png?text=Product+4" },
+					legend: "Wireless charging pad"
+				}
+			]
+		}
+	},
+	{
+		description: "Team photos gallery (4-column grid), light neutral background",
+		type: "images-gallery",
+		props: {
+			columns: 4,
+			gap: "1rem",
+			padding: "p-6",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=CEO" },
+					legend: "Sarah Johnson - Chief Executive Officer"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=CTO" },
+					legend: "Mike Chen - Chief Technology Officer"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Design" },
+					legend: "Emily Rodriguez - Head of Design"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Marketing" },
+					legend: "David Park - Marketing Director"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Sales" },
+					legend: "Lisa Wong - Sales Manager"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Support" },
+					legend: "Alex Thompson - Customer Support Lead"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Dev" },
+					legend: "Carlos Martinez - Senior Developer"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=HR" },
+					legend: "Jennifer Adams - HR Specialist"
+				}
+			],
+			colorPreset: { color: "neutral-100" }
+		}
+	},
+	{
+		description: "Project showcase (2-column grid with larger spacing)",
+		type: "images-gallery",
+		props: {
+			columns: 2,
+			gap: "1rem",
+			padding: "p-6",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/600x400.png?text=Website+Redesign" },
+					legend: "Modern e-commerce website redesign project"
+				},
+				{
+					image: { src: "https://via.placeholder.com/600x400.png?text=Mobile+App" },
+					legend: "iOS and Android mobile application"
+				},
+				{
+					image: { src: "https://via.placeholder.com/600x400.png?text=Brand+Identity" },
+					legend: "Complete brand identity design package"
+				},
+				{
+					image: { src: "https://via.placeholder.com/600x400.png?text=Dashboard+UI" },
+					legend: "Analytics dashboard user interface"
+				}
+			]
+		}
+	},
+	{
+		description: "Event photos gallery with tight spacing and minimal padding",
+		type: "images-gallery",
+		props: {
+			columns: 4,
+			gap: "1rem",
+			padding: "p-6",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/250x180.png?text=Opening" },
+					legend: "Conference opening ceremony"
+				},
+				{
+					image: { src: "https://via.placeholder.com/250x180.png?text=Keynote" },
+					legend: "Keynote presentation"
+				},
+				{
+					image: { src: "https://via.placeholder.com/250x180.png?text=Workshop" },
+					legend: "Technical workshop session"
+				},
+				{
+					image: { src: "https://via.placeholder.com/250x180.png?text=Networking" },
+					legend: "Networking lunch break"
+				},
+				{
+					image: { src: "https://via.placeholder.com/250x180.png?text=Panel" },
+					legend: "Expert panel discussion"
+				},
+				{
+					image: { src: "https://via.placeholder.com/250x180.png?text=Awards" },
+					legend: "Awards ceremony"
+				}
+			]
+		}
+	},
+	{
+		description: "Photography portfolio with single column layout and primary background",
+		type: "images-gallery",
+		props: {
+			columns: 1,
+			gap: "3rem",
+			padding: "4rem",
+			colorPreset: { color: "primary-50" },
+			rounding: "rounded-lg",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/800x600.png?text=Landscape+1" },
+					legend: "Mountain sunrise landscape photography"
+				},
+				{
+					image: { src: "https://via.placeholder.com/800x600.png?text=Portrait+1" },
+					legend: "Professional business portrait session"
+				},
+				{
+					image: { src: "https://via.placeholder.com/800x600.png?text=Architecture+1" },
+					legend: "Modern architectural photography"
+				}
+			]
+		}
+	},
+	{
+		description: "Real estate property gallery with secondary colors and borders",
+		type: "images-gallery",
+		props: {
+			columns: 3,
+			gap: "1.5rem",
+			padding: "2rem",
+			colorPreset: { color: "secondary-100" },
+			border: {
+				width: "border",
+				color: "border-secondary-300"
+			},
+			rounding: "rounded-xl",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/400x300.png?text=Living+Room" },
+					legend: "Spacious living room with natural light"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x300.png?text=Kitchen" },
+					legend: "Modern kitchen with granite countertops"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x300.png?text=Master+Bedroom" },
+					legend: "Master bedroom with walk-in closet"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x300.png?text=Bathroom" },
+					legend: "Luxury bathroom with marble finishes"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x300.png?text=Backyard" },
+					legend: "Private backyard with pool"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x300.png?text=Garage" },
+					legend: "Two-car garage with storage"
+				}
+			]
+		}
+	},
+	{
+		description: "Restaurant food gallery with 5-column grid and accent colors",
+		type: "images-gallery",
+		props: {
+			columns: 5,
+			gap: "0.75rem",
+			padding: "1.5rem",
+			colorPreset: { color: "accent-200" },
+			rounding: "rounded-md",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Appetizer" },
+					legend: "Bruschetta with fresh tomatoes"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Soup" },
+					legend: "Creamy mushroom bisque"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Salad" },
+					legend: "Mediterranean quinoa salad"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Main+Course" },
+					legend: "Grilled salmon with herbs"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Dessert" },
+					legend: "Chocolate lava cake"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Beverage" },
+					legend: "Artisan coffee selection"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Pasta" },
+					legend: "Homemade fettuccine alfredo"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Pizza" },
+					legend: "Wood-fired margherita pizza"
+				}
+			]
+		}
+	},
+	{
+		description: "Art gallery exhibition with 6-column grid and minimal styling",
+		type: "images-gallery",
+		props: {
+			columns: 6,
+			gap: "0.5rem",
+			padding: "1rem",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Abstract+1" },
+					legend: "Abstract composition #1"
+				},
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Portrait+Art" },
+					legend: "Contemporary portrait"
+				},
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Landscape+Art" },
+					legend: "Impressionist landscape"
+				},
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Still+Life" },
+					legend: "Modern still life"
+				},
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Sculpture" },
+					legend: "Bronze sculpture piece"
+				},
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Digital+Art" },
+					legend: "Digital artwork collection"
+				},
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Mixed+Media" },
+					legend: "Mixed media installation"
+				},
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Photography" },
+					legend: "Fine art photography"
+				},
+				{
+					image: { src: "https://via.placeholder.com/200x250.png?text=Watercolor" },
+					legend: "Watercolor painting"
+				}
+			]
+		}
+	},
+	{
+		description: "Fashion lookbook with 2-column layout and neutral dark theme",
+		type: "images-gallery",
+		props: {
+			columns: 2,
+			gap: "2rem",
+			padding: "3rem",
+			colorPreset: { color: "neutral-800" },
+			border: {
+				width: "border-2",
+				color: "border-neutral-600"
+			},
+			rounding: "rounded-2xl",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/400x600.png?text=Spring+Look" },
+					legend: "Spring casual collection 2024"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x600.png?text=Summer+Look" },
+					legend: "Summer evening wear"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x600.png?text=Business+Look" },
+					legend: "Professional business attire"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x600.png?text=Weekend+Look" },
+					legend: "Weekend comfort style"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x600.png?text=Formal+Look" },
+					legend: "Formal evening collection"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x600.png?text=Street+Style" },
+					legend: "Urban street fashion"
+				}
+			]
+		}
+	},
+	{
+		description: "Travel destinations gallery with 3-column grid and no legends",
+		type: "images-gallery",
+		props: {
+			columns: 3,
+			gap: "1.25rem",
+			padding: "2.5rem",
+			colorPreset: { color: "primary-100" },
+			rounding: "rounded-lg",
+			border: {
+				width: "border",
+				color: "border-primary-200"
+			},
+			images: [
+				{ image: { src: "https://via.placeholder.com/350x250.png?text=Paris" } },
+				{ image: { src: "https://via.placeholder.com/350x250.png?text=Tokyo" } },
+				{ image: { src: "https://via.placeholder.com/350x250.png?text=New+York" } },
+				{ image: { src: "https://via.placeholder.com/350x250.png?text=London" } },
+				{ image: { src: "https://via.placeholder.com/350x250.png?text=Rome" } },
+				{ image: { src: "https://via.placeholder.com/350x250.png?text=Barcelona" } }
+			]
+		}
+	},
+	{
+		description: "Technical equipment gallery with 4-column grid and accent styling",
+		type: "images-gallery",
+		props: {
+			columns: 4,
+			gap: "1rem",
+			padding: "2rem",
+			colorPreset: { color: "accent-100" },
+			border: {
+				width: "border-4",
+				color: "border-accent-400"
+			},
+			rounding: "rounded-xl",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Camera" },
+					legend: "Professional DSLR camera"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Laptop" },
+					legend: "High-performance laptop"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Microphone" },
+					legend: "Studio recording microphone"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Monitor" },
+					legend: "4K professional monitor"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Tablet" },
+					legend: "Digital drawing tablet"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Speakers" },
+					legend: "Studio monitor speakers"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Keyboard" },
+					legend: "Mechanical keyboard"
+				},
+				{
+					image: { src: "https://via.placeholder.com/300x300.png?text=Mouse" },
+					legend: "Precision gaming mouse"
+				}
+			]
+		}
+	},
+	{
+		description: "Minimal product showcase with large gaps and no padding",
+		type: "images-gallery",
+		props: {
+			columns: 3,
+			gap: "4rem",
+			padding: "0rem",
+			images: [
+				{
+					image: { src: "https://via.placeholder.com/400x400.png?text=Watch" },
+					legend: "Luxury Swiss timepiece"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x400.png?text=Jewelry" },
+					legend: "Handcrafted gold necklace"
+				},
+				{
+					image: { src: "https://via.placeholder.com/400x400.png?text=Sunglasses" },
+					legend: "Designer sunglasses collection"
+				}
+			]
+		}
+	},
+	{
+		description: "Dynamic product gallery using products query with loop",
+		type: "images-gallery",
+		props: {
+			columns: 4,
+			gap: "1.5rem",
+			padding: "2rem",
+			colorPreset: { color: "primary-50" },
+			rounding: "rounded-lg",
+			border: {
+				width: "border",
+				color: "border-primary-200"
+			},
+			images: [{
+				image: { src: "{{products.image}}" },
+				legend: "{{products.name}} - ${{products.price}}"
+			}],
+			loop: { over: "products" }
+		}
+	},
+	{
+		description: "Portfolio showcase using portfolioProjects query with loop",
+		type: "images-gallery",
+		props: {
+			columns: 3,
+			gap: "2rem",
+			padding: "3rem",
+			colorPreset: { color: "secondary-100" },
+			rounding: "rounded-xl",
+			images: [{
+				image: { src: "{{portfolioProjects.thumbnail}}" },
+				legend: "{{portfolioProjects.projectName}} - {{portfolioProjects.clientName}} ({{portfolioProjects.year}})"
+			}],
+			loop: { over: "portfolioProjects" }
+		}
+	},
+	{
+		description: "Event photo gallery using eventPhotos query with loop",
+		type: "images-gallery",
+		props: {
+			columns: 5,
+			gap: "1rem",
+			padding: "1.5rem",
+			colorPreset: { color: "accent-50" },
+			border: {
+				width: "border-2",
+				color: "border-accent-300"
+			},
+			rounding: "rounded-md",
+			images: [{
+				image: { src: "{{eventPhotos.imageUrl}}" },
+				legend: "{{eventPhotos.caption}} - {{eventPhotos.eventDate}}"
+			}],
+			loop: { over: "eventPhotos" }
+		}
+	},
+	{
+		description: "Team member gallery using teamMembers query with loop",
+		type: "images-gallery",
+		props: {
+			columns: 6,
+			gap: "0.75rem",
+			padding: "2.5rem",
+			colorPreset: { color: "neutral-100" },
+			rounding: "rounded-lg",
+			border: {
+				width: "border",
+				color: "border-neutral-300"
+			},
+			images: [{
+				image: { src: "{{teamMembers.profilePhoto}}" },
+				legend: "{{teamMembers.fullName}} - {{teamMembers.position}}"
+			}],
+			loop: { over: "teamMembers" }
+		}
+	}
+];
+
+//#endregion
+export { examples, manifest };
 //# sourceMappingURL=images-gallery.manifest.js.map