sunpeak 0.6.5 → 0.6.7

package/template/src/components/map/place-carousel.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { PlaceCarousel } from './place-carousel';
+import type { Place } from '../../simulations/map-simulation';
+
+describe('PlaceCarousel', () => {
+  const mockPlaces: Place[] = [
+    {
+      id: 'place-1',
+      name: 'First Place',
+      coords: [-122.4194, 37.7749],
+      description: 'First test place',
+      city: 'San Francisco',
+      rating: 4.5,
+      price: '$$',
+      thumbnail: 'https://example.com/1.jpg',
+    },
+    {
+      id: 'place-2',
+      name: 'Second Place',
+      coords: [-122.4094, 37.7849],
+      description: 'Second test place',
+      city: 'Oakland',
+      rating: 4.2,
+      price: '$',
+      thumbnail: 'https://example.com/2.jpg',
+    },
+  ];
+
+  it('renders all places in the carousel', () => {
+    render(<PlaceCarousel places={mockPlaces} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.getByText('First Place')).toBeInTheDocument();
+    expect(screen.getByText('Second Place')).toBeInTheDocument();
+  });
+
+  it('calls onSelect with correct place when a place is clicked', () => {
+    const onSelect = vi.fn();
+    render(<PlaceCarousel places={mockPlaces} selectedId={null} onSelect={onSelect} />);
+
+    const firstPlace = screen.getByText('First Place');
+    fireEvent.click(firstPlace);
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(mockPlaces[0]);
+  });
+
+  it('highlights selected place', () => {
+    const { rerender } = render(
+      <PlaceCarousel places={mockPlaces} selectedId={null} onSelect={vi.fn()} />
+    );
+
+    rerender(<PlaceCarousel places={mockPlaces} selectedId="place-1" onSelect={vi.fn()} />);
+
+    const firstPlace = screen.getByText('First Place');
+    const card = firstPlace.closest('div[class*="rounded-2xl"]');
+    expect(card?.className).toContain('bg-black/5');
+  });
+
+  it('renders empty carousel when no places provided', () => {
+    render(<PlaceCarousel places={[]} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.queryByText('First Place')).not.toBeInTheDocument();
+  });
+
+  it('renders each place card with shadow and ring styles', () => {
+    const { container } = render(
+      <PlaceCarousel places={mockPlaces} selectedId={null} onSelect={vi.fn()} />
+    );
+
+    const cards = container.querySelectorAll('div[class*="shadow-xl"]');
+    expect(cards.length).toBe(mockPlaces.length);
+  });
+
+  it('renders carousel at bottom of viewport with correct positioning', () => {
+    const { container } = render(
+      <PlaceCarousel places={mockPlaces} selectedId={null} onSelect={vi.fn()} />
+    );
+
+    const carousel = container.firstChild as HTMLElement;
+    expect(carousel.className).toContain('absolute');
+    expect(carousel.className).toContain('bottom-0');
+  });
+});

package/template/src/components/{pizzaz → map}/place-carousel.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
 import { cn } from '../../lib/index';
 import { PlaceCard } from './place-card';
-import type { Place } from '../../simulations/pizzaz-simulation';
+import type { Place } from '../../simulations/map-simulation';
 
 export type PlaceCarouselProps = {
   places: Place[];

package/template/src/components/map/place-inspector.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { PlaceInspector } from './place-inspector';
+import type { Place } from '../../simulations/map-simulation';
+
+describe('PlaceInspector', () => {
+  const mockPlace: Place = {
+    id: 'test-place',
+    name: 'Test Pizza Place',
+    coords: [-122.4194, 37.7749],
+    description: 'Delicious test pizza',
+    city: 'San Francisco',
+    rating: 4.5,
+    price: '$$',
+    thumbnail: 'https://example.com/test.jpg',
+  };
+
+  it('renders place details correctly', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(screen.getByText('Test Pizza Place')).toBeInTheDocument();
+    expect(screen.getByText('4.5')).toBeInTheDocument();
+    expect(screen.getByText('$$', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText('San Francisco', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders place thumbnail with correct attributes', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    const image = screen.getByRole('img', { name: 'Test Pizza Place' });
+    expect(image).toHaveAttribute('src', 'https://example.com/test.jpg');
+    expect(image).toHaveAttribute('alt', 'Test Pizza Place');
+    expect(image).toHaveAttribute('loading', 'lazy');
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    const onClose = vi.fn();
+    render(<PlaceInspector place={mockPlace} onClose={onClose} />);
+
+    const closeButton = screen.getByLabelText('Close details');
+    fireEvent.click(closeButton);
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders action buttons', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(screen.getByText('Add to favorites')).toBeInTheDocument();
+    expect(screen.getByText('Contact')).toBeInTheDocument();
+  });
+
+  it('renders reviews section with multiple reviews', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(screen.getByText('Reviews')).toBeInTheDocument();
+    expect(screen.getByText('Leo M.')).toBeInTheDocument();
+    expect(screen.getByText('Priya S.')).toBeInTheDocument();
+    expect(screen.getByText('Maya R.')).toBeInTheDocument();
+  });
+
+  it('renders review content correctly', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(
+      screen.getByText('Fantastic crust and balanced toppings. The marinara is spot on!')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Cozy vibe and friendly staff. Quick service on a Friday night.')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Great for sharing. Will definitely come back with friends.')
+    ).toBeInTheDocument();
+  });
+
+  it('renders extended description', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(
+      screen.getByText(/Enjoy a slice at one of SF's favorites/, { exact: false })
+    ).toBeInTheDocument();
+  });
+
+  it('formats rating to one decimal place', () => {
+    const placeWithRating = { ...mockPlace, rating: 4.789 };
+    render(<PlaceInspector place={placeWithRating} onClose={vi.fn()} />);
+
+    expect(screen.getByText('4.8')).toBeInTheDocument();
+    expect(screen.queryByText('4.789')).not.toBeInTheDocument();
+  });
+});

package/template/src/components/{pizzaz → map}/place-inspector.tsx

@@ -3,7 +3,7 @@ import { Button } from '@openai/apps-sdk-ui/components/Button';
 import { Avatar } from '@openai/apps-sdk-ui/components/Avatar';
 import { X, Star } from '@openai/apps-sdk-ui/components/Icon';
 import { cn } from '../../lib/index';
-import type { Place } from '../../simulations/pizzaz-simulation';
+import type { Place } from '../../simulations/map-simulation';
 
 export type PlaceInspectorProps = {
   place: Place;
@@ -37,7 +37,7 @@ export const PlaceInspector = React.forwardRef<HTMLDivElement, PlaceInspectorPro
       <div
         ref={ref}
         className={cn(
-          'pizzaz-inspector absolute z-30 top-0 bottom-4 left-0 right-auto xl:left-auto xl:right-6 md:z-20 w-[340px] xl:w-[360px] xl:top-6 xl:bottom-8 pointer-events-auto',
+          'map-inspector absolute z-30 top-0 bottom-4 left-0 right-auto xl:left-auto xl:right-6 md:z-20 w-[340px] xl:w-[360px] xl:top-6 xl:bottom-8 pointer-events-auto',
           'animate-in fade-in slide-in-from-left-2 xl:slide-in-from-right-2 duration-200',
           className
         )}

package/template/src/components/map/place-list.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { PlaceList } from './place-list';
+import type { Place } from '../../simulations/map-simulation';
+
+describe('PlaceList', () => {
+  const mockPlaces: Place[] = [
+    {
+      id: 'place-1',
+      name: 'First Place',
+      coords: [-122.4194, 37.7749],
+      description: 'First test place',
+      city: 'San Francisco',
+      rating: 4.5,
+      price: '$$',
+      thumbnail: 'https://example.com/1.jpg',
+    },
+    {
+      id: 'place-2',
+      name: 'Second Place',
+      coords: [-122.4094, 37.7849],
+      description: 'Second test place',
+      city: 'Oakland',
+      rating: 4.2,
+      price: '$',
+      thumbnail: 'https://example.com/2.jpg',
+    },
+    {
+      id: 'place-3',
+      name: 'Third Place',
+      coords: [-122.4294, 37.7649],
+      description: 'Third test place',
+      city: 'Berkeley',
+      rating: 4.8,
+      price: '$$$',
+      thumbnail: 'https://example.com/3.jpg',
+    },
+  ];
+
+  it('renders all places in the list', () => {
+    render(<PlaceList places={mockPlaces} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.getByText('First Place')).toBeInTheDocument();
+    expect(screen.getByText('Second Place')).toBeInTheDocument();
+    expect(screen.getByText('Third Place')).toBeInTheDocument();
+  });
+
+  it('displays correct number of results in header', () => {
+    render(<PlaceList places={mockPlaces} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.getByText('3 results')).toBeInTheDocument();
+  });
+
+  it('calls onSelect with correct place when a place is clicked', () => {
+    const onSelect = vi.fn();
+    render(<PlaceList places={mockPlaces} selectedId={null} onSelect={onSelect} />);
+
+    const firstPlace = screen.getByText('First Place');
+    fireEvent.click(firstPlace);
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(mockPlaces[0]);
+  });
+
+  it('highlights selected place', () => {
+    const { rerender } = render(
+      <PlaceList places={mockPlaces} selectedId={null} onSelect={vi.fn()} />
+    );
+
+    rerender(<PlaceList places={mockPlaces} selectedId="place-2" onSelect={vi.fn()} />);
+
+    const secondPlace = screen.getByText('Second Place');
+    const card = secondPlace.closest('div[class*="rounded-2xl"]');
+    expect(card?.className).toContain('bg-black/5');
+  });
+
+  it('renders empty list when no places provided', () => {
+    render(<PlaceList places={[]} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.getByText('0 results')).toBeInTheDocument();
+    expect(screen.queryByText('First Place')).not.toBeInTheDocument();
+  });
+
+  it('maintains selection when places update', () => {
+    const onSelect = vi.fn();
+    const { rerender } = render(
+      <PlaceList places={mockPlaces} selectedId="place-2" onSelect={onSelect} />
+    );
+
+    const updatedPlaces = [...mockPlaces].reverse();
+    rerender(<PlaceList places={updatedPlaces} selectedId="place-2" onSelect={onSelect} />);
+
+    const secondPlace = screen.getByText('Second Place');
+    const card = secondPlace.closest('div[class*="rounded-2xl"]');
+    expect(card?.className).toContain('bg-black/5');
+  });
+});

package/template/src/components/{pizzaz → map}/place-list.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Settings } from '@openai/apps-sdk-ui/components/Icon';
 import { cn } from '../../lib/index';
 import { PlaceCard } from './place-card';
-import type { Place } from '../../simulations/pizzaz-simulation';
+import type { Place } from '../../simulations/map-simulation';
 
 export type PlaceListProps = {
   places: Place[];

package/template/src/resources/index.ts

@@ -1,4 +1,4 @@
 export { CounterResource } from './counter-resource';
 export { AlbumsResource } from './albums-resource';
 export { CarouselResource } from './carousel-resource';
-export { PizzazResource } from './pizzaz-resource';
+export { MapResource } from './map-resource';

package/template/src/resources/{pizzaz-resource.tsx → map-resource.tsx}

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { useSafeArea, useMaxHeight } from 'sunpeak';
-import { Pizzaz } from '../components/pizzaz/pizzaz';
+import { Map } from '../components/map/map';
 
 /**
- * Production-ready Pizzaz Resource
+ * Production-ready Map Resource
  *
  * This resource displays a pizza restaurant finder with an interactive map,
  * place listings, and detailed inspector view.
  * Can be dropped into any production environment without changes.
  */
-export const PizzazResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
+export const MapResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
   const safeArea = useSafeArea();
   const maxHeight = useMaxHeight();
 
@@ -25,8 +25,8 @@ export const PizzazResource = React.forwardRef<HTMLDivElement>((_props, ref) =>
         maxHeight: maxHeight ?? undefined,
       }}
     >
-      <Pizzaz />
+      <Map />
     </div>
   );
 });
-PizzazResource.displayName = 'PizzazResource';
+MapResource.displayName = 'MapResource';

package/template/src/simulations/index.ts

@@ -8,11 +8,11 @@
 import { counterSimulation } from './counter-simulation.js';
 import { albumsSimulation } from './albums-simulation.js';
 import { carouselSimulation } from './carousel-simulation.js';
-import { pizzazSimulation } from './pizzaz-simulation.js';
+import { mapSimulation } from './map-simulation.js';
 
 export const SIMULATIONS = {
   counter: counterSimulation,
   albums: albumsSimulation,
   carousel: carouselSimulation,
-  pizzaz: pizzazSimulation,
+  map: mapSimulation,
 } as const;

package/template/src/simulations/{pizzaz-simulation.ts → map-simulation.ts}

@@ -1,5 +1,5 @@
 /**
- * Server-safe configuration for the pizzaz simulation.
+ * Server-safe configuration for the map simulation.
  * This file contains only metadata and doesn't import React components or CSS.
  */
 
@@ -16,11 +16,11 @@ export interface Place {
   thumbnail: string;
 }
 
-export interface PizzazData extends Record<string, unknown> {
+export interface MapData extends Record<string, unknown> {
   places: Place[];
 }
 
-const pizzazData: PizzazData = {
+const mapData: MapData = {
   places: [
     {
       id: 'nova-slice-lab',
@@ -125,7 +125,7 @@ const pizzazData: PizzazData = {
   ],
 };
 
-export const pizzazSimulation = {
+export const mapSimulation = {
   userMessage: 'Find pizza near me',
 
   // MCP Tool protocol - official Tool type from MCP SDK used in ListTools response
@@ -136,7 +136,7 @@ export const pizzazSimulation = {
     title: 'Find Pizza',
     annotations: { readOnlyHint: true },
     _meta: {
-      'openai/outputTemplate': 'ui://PizzazResource',
+      'openai/outputTemplate': 'ui://MapResource',
       'openai/toolInvocation/invoking': 'Finding pizza places',
       'openai/toolInvocation/invoked': 'Found pizza places',
       'openai/widgetAccessible': true,
@@ -148,9 +148,9 @@ export const pizzazSimulation = {
   // resource.name is used as the simulation identifier
   // resource.title is used as the simulation display label
   resource: {
-    uri: 'ui://PizzazResource',
-    name: 'pizzaz',
-    title: 'Pizzaz',
+    uri: 'ui://MapResource',
+    name: 'map',
+    title: 'Map',
     description: 'Pizza restaurant finder widget',
     mimeType: 'text/html+skybridge',
     _meta: {
@@ -171,7 +171,7 @@ export const pizzazSimulation = {
 
   // MCP CallTool protocol - data for CallTool response
   toolCall: {
-    structuredContent: pizzazData,
+    structuredContent: mapData,
     _meta: {},
   },
 } as const;