sunpeak 0.3.8 → 0.4.2

package/template/src/components/simulations/albums-simulation.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import type { Simulation } from "sunpeak"
+import { OpenAIAlbums } from ".."
+import albumsData from "../../../data/albums.json"
+
+const AlbumsComponent = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  return <OpenAIAlbums ref={ref} />
+})
+AlbumsComponent.displayName = "AlbumsComponent"
+
+export const albumsSimulation: Simulation = {
+  value: 'albums',
+  label: 'Albums',
+  component: AlbumsComponent,
+  appName: 'Pizzaz',
+  appIcon: '🍕',
+  userMessage: 'Pizza time',
+  toolOutput: albumsData,
+  widgetState: null,
+}

package/template/src/components/simulations/app-simulation.tsx

@@ -0,0 +1,13 @@
+import type { Simulation } from "sunpeak"
+import { App } from "../../App"
+
+export const appSimulation: Simulation = {
+  value: 'app',
+  label: 'My App',
+  component: App,
+  appName: 'sunpeak',
+  appIcon: '🏗️',
+  userMessage: 'What do you have for me today?',
+  toolOutput: null,
+  widgetState: null,
+}

package/template/src/components/simulations/carousel-simulation.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import type { Simulation } from "sunpeak"
+import { useWidgetProps } from "sunpeak"
+import { Carousel, Card } from ".."
+import placesData from "../../../data/places.json"
+
+export interface Place {
+  id: string
+  name: string
+  rating: number
+  category: string
+  location: string
+  image: string
+  description: string
+}
+
+export interface CarouselSimulationData extends Record<string, unknown> {
+  places: Place[]
+}
+
+const CarouselComponent = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  const data = useWidgetProps<CarouselSimulationData>(() => ({ places: [] }))
+
+  return (
+    <div ref={ref}>
+      <Carousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={220}>
+        {(data.places || []).map((place) => (
+          <Card
+            key={place.id}
+            image={place.image}
+            imageAlt={place.name}
+            header={place.name}
+            metadata={`⭐ ${place.rating} • ${place.category} • ${place.location}`}
+            button1={{
+              isPrimary: true,
+              onClick: () => console.log(`Visit ${place.name}`),
+              children: "Visit",
+            }}
+            button2={{
+              isPrimary: false,
+              onClick: () => console.log(`Learn more about ${place.name}`),
+              children: "Learn More",
+            }}
+          >
+            {place.description}
+          </Card>
+        ))}
+      </Carousel>
+    </div>
+  )
+})
+CarouselComponent.displayName = "CarouselComponent"
+
+export const carouselSimulation: Simulation = {
+  value: 'carousel',
+  label: 'Carousel',
+  component: CarouselComponent,
+  appName: 'Splorin',
+  appIcon: '✈️',
+  userMessage: 'Show me popular places to visit in Austin Texas',
+  toolOutput: placesData,
+  widgetState: null,
+}

package/template/src/components/simulations/index.tsx

@@ -0,0 +1,14 @@
+export * from "./app-simulation"
+export * from "./carousel-simulation"
+export * from "./albums-simulation"
+
+// Export all simulations as an array for convenience
+import { appSimulation } from "./app-simulation"
+import { carouselSimulation } from "./carousel-simulation"
+import { albumsSimulation } from "./albums-simulation"
+
+export const simulations = [
+  appSimulation,
+  carouselSimulation,
+  albumsSimulation,
+]

package/template/src/styles/globals.css

@@ -6,3 +6,5 @@
 
 /* Configure dark mode to use data-theme attribute (OpenAI SDK standard) */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@import 'sunpeak/style.css';