sunpeak 0.5.8 → 0.5.9

package/template/scripts/build-all.mjs

@@ -23,24 +23,33 @@ mkdirSync(tempDir, { recursive: true });
 
 // Auto-discover all resources
 const resourceFiles = readdirSync(resourcesDir)
-  .filter(file => file.endsWith('Resource.tsx'))
+  .filter(file => file.endsWith('-resource.tsx'))
   .map(file => {
-    const resourceName = file.replace('Resource.tsx', '');
+    // Extract kebab-case name: 'counter-resource.tsx' -> 'counter'
+    const kebabName = file.replace('-resource.tsx', '');
+
+    // Convert kebab-case to PascalCase: 'counter' -> 'Counter', 'my-widget' -> 'MyWidget'
+    const pascalName = kebabName
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+
     return {
-      componentName: `${resourceName}Resource`,
-      entry: `.tmp/index-${resourceName.toLowerCase()}.tsx`,
-      output: `${resourceName.toLowerCase()}.js`,
-      buildOutDir: path.join(buildDir, resourceName.toLowerCase()),
+      componentName: `${pascalName}Resource`,
+      componentFile: file.replace('.tsx', ''),
+      entry: `.tmp/index-${kebabName}.tsx`,
+      output: `${kebabName}.js`,
+      buildOutDir: path.join(buildDir, kebabName),
     };
   });
 
-console.log('Building all tools...\n');
+console.log('Building all resources...\n');
 
 // Read the template
 const template = readFileSync(templateFile, 'utf-8');
 
 // Build all resources (but don't copy yet)
-resourceFiles.forEach(({ componentName, entry, output, buildOutDir }, index) => {
+resourceFiles.forEach(({ componentName, componentFile, entry, output, buildOutDir }, index) => {
   console.log(`[${index + 1}/${resourceFiles.length}] Building ${output}...`);
 
   try {
@@ -51,7 +60,7 @@ resourceFiles.forEach(({ componentName, entry, output, buildOutDir }, index) =>
 
     // Create entry file from template in temp directory
     const entryContent = template
-      .replace('// RESOURCE_IMPORT', `import { ${componentName} } from '../src/components/resources/${componentName}';`)
+      .replace('// RESOURCE_IMPORT', `import { ${componentName} } from '../src/components/resources/${componentFile}';`)
       .replace('// RESOURCE_MOUNT', `createRoot(root).render(<${componentName} />);`);
 
     const entryPath = path.join(__dirname, '..', entry);
@@ -104,5 +113,5 @@ if (existsSync(buildDir)) {
   rmSync(buildDir, { recursive: true });
 }
 
-console.log('\n✓ All tools built successfully!');
+console.log('\n✓ All resources built successfully!');
 console.log(`\nBuilt files:`, readdirSync(distDir));

package/template/scripts/validate.mjs

@@ -77,6 +77,12 @@ try {
   console.log()
   printSuccess('pnpm install');
 
+  console.log('\nRunning: pnpm format');
+  if (!runCommand('pnpm format', PROJECT_ROOT)) {
+    throw new Error('pnpm format failed');
+  }
+  printSuccess('pnpm format');
+
   console.log('\nRunning: pnpm lint');
   if (!runCommand('pnpm lint', PROJECT_ROOT)) {
     throw new Error('pnpm lint failed');

package/template/src/components/album/album-card.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { AlbumCard } from './album-card';
+import type { Album } from './albums';
+
+describe('AlbumCard', () => {
+  const mockAlbum: Album = {
+    id: 'test-album',
+    title: 'Test Album',
+    cover: 'https://example.com/cover.jpg',
+    photos: [
+      { id: '1', title: 'Photo 1', url: 'https://example.com/1.jpg' },
+      { id: '2', title: 'Photo 2', url: 'https://example.com/2.jpg' },
+    ],
+  };
+
+  it('correctly pluralizes photo count', () => {
+    // Test plural (2 photos)
+    const { rerender } = render(<AlbumCard album={mockAlbum} />);
+    expect(screen.getByText('2 photos')).toBeInTheDocument();
+
+    // Test singular (1 photo)
+    const singlePhotoAlbum: Album = {
+      ...mockAlbum,
+      photos: [{ id: '1', title: 'Photo 1', url: 'https://example.com/1.jpg' }],
+    };
+    rerender(<AlbumCard album={singlePhotoAlbum} />);
+    expect(screen.getByText('1 photo')).toBeInTheDocument();
+
+    // Test zero photos
+    const emptyAlbum: Album = {
+      ...mockAlbum,
+      photos: [],
+    };
+    rerender(<AlbumCard album={emptyAlbum} />);
+    expect(screen.getByText('0 photos')).toBeInTheDocument();
+  });
+
+  it('calls onSelect with correct album when clicked', () => {
+    const onSelect = vi.fn();
+    render(<AlbumCard album={mockAlbum} onSelect={onSelect} />);
+
+    const card = screen.getByRole('button');
+    fireEvent.click(card);
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(mockAlbum);
+  });
+
+  it('renders album title and cover image with correct attributes', () => {
+    render(<AlbumCard album={mockAlbum} />);
+
+    // Check title is displayed
+    expect(screen.getByText('Test Album')).toBeInTheDocument();
+
+    // Check image has correct src and alt
+    const image = screen.getByRole('img');
+    expect(image).toHaveAttribute('src', 'https://example.com/cover.jpg');
+    expect(image).toHaveAttribute('alt', 'Test Album');
+    expect(image).toHaveAttribute('loading', 'lazy');
+  });
+});

package/template/src/components/album/album-card.tsx

@@ -1,13 +1,13 @@
-import * as React from "react"
-import { Button } from "@openai/apps-sdk-ui/components/Button"
-import { cn } from "../../lib/index"
-import type { Album } from "./albums"
+import * as React from 'react';
+import { Button } from '@openai/apps-sdk-ui/components/Button';
+import { cn } from '../../lib/index';
+import type { Album } from './albums';
 
 export type AlbumCardProps = {
-  album: Album
-  onSelect?: (album: Album) => void
-  className?: string
-}
+  album: Album;
+  onSelect?: (album: Album) => void;
+  className?: string;
+};
 
 export const AlbumCard = React.forwardRef<HTMLButtonElement, AlbumCardProps>(
   ({ album, onSelect, className }, ref) => {
@@ -17,7 +17,7 @@ export const AlbumCard = React.forwardRef<HTMLButtonElement, AlbumCardProps>(
         variant="ghost"
         color="secondary"
         className={cn(
-          "rounded-xl flex-shrink-0 w-full h-full p-0 text-left flex flex-col [&:hover]:bg-transparent hover:bg-transparent cursor-pointer",
+          'rounded-xl flex-shrink-0 w-full h-full p-0 text-left flex flex-col [&:hover]:bg-transparent hover:bg-transparent cursor-pointer',
           className
         )}
         onClick={() => onSelect?.(album)}
@@ -31,15 +31,13 @@ export const AlbumCard = React.forwardRef<HTMLButtonElement, AlbumCardProps>(
           />
         </div>
         <div className="flex-shrink-0 w-full p-2">
-          <div className="text-base font-normal text-primary">
-            {album.title}
-          </div>
+          <div className="text-base font-normal text-primary">{album.title}</div>
           <div className="text-sm text-secondary">
-            {album.photos.length} {album.photos.length === 1 ? "photo" : "photos"}
+            {album.photos.length} {album.photos.length === 1 ? 'photo' : 'photos'}
           </div>
         </div>
       </Button>
-    )
+    );
   }
-)
-AlbumCard.displayName = "AlbumCard"
+);
+AlbumCard.displayName = 'AlbumCard';

package/template/src/components/album/albums.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Albums, type AlbumsData } from './albums';
+
+// Mock sunpeak hooks
+const mockSetWidgetState = vi.fn();
+const mockRequestDisplayMode = vi.fn();
+let mockWidgetData: AlbumsData = { albums: [] };
+
+vi.mock('sunpeak', () => ({
+  useWidgetProps: () => mockWidgetData,
+  useWidgetState: () => [{ selectedAlbumId: null }, mockSetWidgetState],
+  useDisplayMode: () => 'default',
+  useWidgetAPI: () => ({ requestDisplayMode: mockRequestDisplayMode }),
+}));
+
+// Mock child components to simplify testing
+vi.mock('./fullscreen-viewer', () => ({
+  FullscreenViewer: ({ album }: { album: { title: string } }) => (
+    <div data-testid="fullscreen-viewer">{album.title}</div>
+  ),
+}));
+
+vi.mock('../carousel', () => ({
+  Carousel: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="carousel">{children}</div>
+  ),
+}));
+
+describe('Albums', () => {
+  const mockAlbums = [
+    {
+      id: 'album-1',
+      title: 'Summer Vacation',
+      cover: 'https://example.com/1.jpg',
+      photos: [{ id: 'p1', title: 'Beach', url: 'https://example.com/p1.jpg' }],
+    },
+    {
+      id: 'album-2',
+      title: 'City Trip',
+      cover: 'https://example.com/2.jpg',
+      photos: [{ id: 'p2', title: 'Downtown', url: 'https://example.com/p2.jpg' }],
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockWidgetData = { albums: mockAlbums };
+  });
+
+  it('renders Carousel with all albums in default mode', () => {
+    render(<Albums />);
+
+    // Should render carousel
+    expect(screen.getByTestId('carousel')).toBeInTheDocument();
+
+    // Should render both album titles
+    expect(screen.getByText('Summer Vacation')).toBeInTheDocument();
+    expect(screen.getByText('City Trip')).toBeInTheDocument();
+  });
+
+  it('calls setWidgetState and requestDisplayMode when album is selected', () => {
+    render(<Albums />);
+
+    // Find and click the first album
+    const firstAlbum = screen.getByText('Summer Vacation').closest('button')!;
+    fireEvent.click(firstAlbum);
+
+    // Should update widget state with selected album ID
+    expect(mockSetWidgetState).toHaveBeenCalledWith({ selectedAlbumId: 'album-1' });
+
+    // Should request fullscreen mode
+    expect(mockRequestDisplayMode).toHaveBeenCalledWith({ mode: 'fullscreen' });
+  });
+
+  it('renders empty carousel when no albums provided', () => {
+    mockWidgetData = { albums: [] };
+
+    const { container } = render(<Albums />);
+
+    // Should render carousel (even if empty)
+    expect(screen.getByTestId('carousel')).toBeInTheDocument();
+
+    // Should not render any album cards
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(0);
+  });
+});

package/template/src/components/album/albums.tsx

@@ -1,77 +1,63 @@
-import * as React from "react"
-import { useWidgetState, useDisplayMode, useWidgetAPI, useWidgetProps } from "sunpeak"
-import { Carousel } from "../carousel"
-import { AlbumCard } from "./album-card"
-import { FullscreenViewer } from "./fullscreen-viewer"
+import * as React from 'react';
+import { useWidgetState, useDisplayMode, useWidgetAPI, useWidgetProps } from 'sunpeak';
+import { Carousel } from '../carousel';
+import { AlbumCard } from './album-card';
+import { FullscreenViewer } from './fullscreen-viewer';
 
 export interface Album {
-  id: string
-  title: string
-  cover: string
+  id: string;
+  title: string;
+  cover: string;
   photos: Array<{
-    id: string
-    title: string
-    url: string
-  }>
+    id: string;
+    title: string;
+    url: string;
+  }>;
 }
 
 export interface AlbumsData extends Record<string, unknown> {
-  albums: Album[]
+  albums: Album[];
 }
 
 export interface AlbumsState extends Record<string, unknown> {
-  selectedAlbumId?: string | null
+  selectedAlbumId?: string | null;
 }
 
 export type AlbumsProps = {
-  className?: string
-}
-
-export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(
-  ({ className }, ref) => {
-    const data = useWidgetProps<AlbumsData>(() => ({ albums: [] }))
-    const [widgetState, setWidgetState] = useWidgetState<AlbumsState>(() => ({
-      selectedAlbumId: null,
-    }))
-    const displayMode = useDisplayMode()
-    const api = useWidgetAPI()
-
-    const albums = data.albums || []
-    const selectedAlbum = albums.find(
-      (album) => album.id === widgetState?.selectedAlbumId
-    )
-
-    const handleSelectAlbum = React.useCallback(
-      (album: Album) => {
-        setWidgetState({ selectedAlbumId: album.id })
-        api?.requestDisplayMode?.({ mode: "fullscreen" })
-      },
-      [setWidgetState, api]
-    )
-
-    if (displayMode === "fullscreen" && selectedAlbum) {
-      return (
-        <FullscreenViewer
-          ref={ref}
-          album={selectedAlbum}
-        />
-      )
-    }
-
-    return (
-      <div ref={ref} className={className}>
-        <Carousel
-          gap={20}
-          showArrows={false}
-          showEdgeGradients={false}
-          cardWidth={272}
-        >
-          {albums.map((album) => (
-            <AlbumCard key={album.id} album={album} onSelect={handleSelectAlbum} />
-          ))}
-        </Carousel>
-      </div>
-    )
+  className?: string;
+};
+
+export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(({ className }, ref) => {
+  const data = useWidgetProps<AlbumsData>(() => ({ albums: [] }));
+  const [widgetState, setWidgetState] = useWidgetState<AlbumsState>(() => ({
+    selectedAlbumId: null,
+  }));
+  const displayMode = useDisplayMode();
+  const api = useWidgetAPI();
+
+  const albums = data.albums || [];
+  const selectedAlbum = albums.find((album) => album.id === widgetState?.selectedAlbumId);
+
+  const handleSelectAlbum = React.useCallback(
+    (album: Album) => {
+      setWidgetState({ selectedAlbumId: album.id });
+      api?.requestDisplayMode?.({ mode: 'fullscreen' });
+    },
+    [setWidgetState, api]
+  );
+
+  if (displayMode === 'fullscreen' && selectedAlbum) {
+    return <FullscreenViewer ref={ref} album={selectedAlbum} />;
   }
-)
-Albums.displayName = "Albums"
+
+  return (
+    <div ref={ref} className={className}>
+      <Carousel gap={20} showArrows={false} showEdgeGradients={false} cardWidth={272}>
+        {albums.map((album) => (
+          <AlbumCard key={album.id} album={album} onSelect={handleSelectAlbum} />
+        ))}
+      </Carousel>
+    </div>
+  );
+});
+Albums.displayName = 'Albums';

package/template/src/components/album/film-strip.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { FilmStrip } from './film-strip';
+import type { Album } from './albums';
+
+describe('FilmStrip', () => {
+  const mockAlbum: Album = {
+    id: 'test-album',
+    title: 'Test Album',
+    cover: 'https://example.com/cover.jpg',
+    photos: [
+      { id: '1', title: 'Sunset', url: 'https://example.com/1.jpg' },
+      { id: '2', title: '', url: 'https://example.com/2.jpg' },
+      { id: '3', title: 'Mountains', url: 'https://example.com/3.jpg' },
+    ],
+  };
+
+  it('applies correct styling to selected photo', () => {
+    const { container } = render(<FilmStrip album={mockAlbum} selectedIndex={1} />);
+
+    const buttons = container.querySelectorAll('button');
+
+    // Selected photo (index 1) should have border-primary
+    expect(buttons[1].className).toContain('border-primary');
+    expect(buttons[1].className).toContain('shadow-md');
+
+    // Non-selected photos should have border-transparent
+    expect(buttons[0].className).toContain('border-transparent');
+    expect(buttons[0].className).toContain('opacity-60');
+    expect(buttons[2].className).toContain('border-transparent');
+  });
+
+  it('calls onSelect with correct index when photo is clicked', () => {
+    const onSelect = vi.fn();
+    render(<FilmStrip album={mockAlbum} selectedIndex={0} onSelect={onSelect} />);
+
+    const images = screen.getAllByRole('img');
+
+    // Click on the second photo (index 1)
+    fireEvent.click(images[1].closest('button')!);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(1);
+
+    // Click on the third photo (index 2)
+    fireEvent.click(images[2].closest('button')!);
+    expect(onSelect).toHaveBeenCalledTimes(2);
+    expect(onSelect).toHaveBeenCalledWith(2);
+  });
+
+  it('renders alt text with fallback for photos without titles', () => {
+    render(<FilmStrip album={mockAlbum} selectedIndex={0} />);
+
+    const images = screen.getAllByRole('img');
+
+    // Photo with title
+    expect(images[0]).toHaveAttribute('alt', 'Sunset');
+
+    // Photo without title should fall back to "Photo N"
+    expect(images[1]).toHaveAttribute('alt', 'Photo 2');
+
+    // Photo with title
+    expect(images[2]).toHaveAttribute('alt', 'Mountains');
+  });
+});

package/template/src/components/album/film-strip.tsx

@@ -1,14 +1,14 @@
-import * as React from "react"
-import { Button } from "@openai/apps-sdk-ui/components/Button"
-import { cn } from "../../lib/index"
-import type { Album } from "./albums"
+import * as React from 'react';
+import { Button } from '@openai/apps-sdk-ui/components/Button';
+import { cn } from '../../lib/index';
+import type { Album } from './albums';
 
 export type FilmStripProps = {
-  album: Album
-  selectedIndex: number
-  onSelect?: (index: number) => void
-  className?: string
-}
+  album: Album;
+  selectedIndex: number;
+  onSelect?: (index: number) => void;
+  className?: string;
+};
 
 export const FilmStrip = React.forwardRef<HTMLDivElement, FilmStripProps>(
   ({ album, selectedIndex, onSelect, className }, ref) => {
@@ -16,7 +16,7 @@ export const FilmStrip = React.forwardRef<HTMLDivElement, FilmStripProps>(
       <div
         ref={ref}
         className={cn(
-          "h-full w-full overflow-auto flex flex-col items-center justify-center p-5 space-y-5",
+          'h-full w-full overflow-auto flex flex-col items-center justify-center p-5 space-y-5',
           className
         )}
       >
@@ -27,10 +27,10 @@ export const FilmStrip = React.forwardRef<HTMLDivElement, FilmStripProps>(
             color="secondary"
             onClick={() => onSelect?.(idx)}
             className={cn(
-              "block w-full h-auto p-[1px] pointer-events-auto rounded-[10px] border transition-all",
+              'block w-full h-auto p-[1px] pointer-events-auto rounded-[10px] border transition-all',
               idx === selectedIndex
-                ? "border-primary shadow-md"
-                : "border-transparent hover:border-primary/30 opacity-60 hover:opacity-100"
+                ? 'border-primary shadow-md'
+                : 'border-transparent hover:border-primary/30 opacity-60 hover:opacity-100'
             )}
           >
             <div className="aspect-[5/3] rounded-lg overflow-hidden w-full">
@@ -44,7 +44,7 @@ export const FilmStrip = React.forwardRef<HTMLDivElement, FilmStripProps>(
           </Button>
         ))}
       </div>
-    )
+    );
   }
-)
-FilmStrip.displayName = "FilmStrip"
+);
+FilmStrip.displayName = 'FilmStrip';

package/template/src/components/album/fullscreen-viewer.test.tsx

@@ -0,0 +1,77 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { FullscreenViewer } from './fullscreen-viewer';
+import type { Album } from './albums';
+
+// Mock sunpeak hooks
+vi.mock('sunpeak', () => ({
+  useMaxHeight: () => 800,
+}));
+
+describe('FullscreenViewer', () => {
+  const mockAlbum: Album = {
+    id: 'album-1',
+    title: 'Test Album',
+    cover: 'https://example.com/cover.jpg',
+    photos: [
+      { id: '1', title: 'First Photo', url: 'https://example.com/1.jpg' },
+      { id: '2', title: 'Second Photo', url: 'https://example.com/2.jpg' },
+      { id: '3', title: 'Third Photo', url: 'https://example.com/3.jpg' },
+    ],
+  };
+
+  it('resets to first photo when album changes', () => {
+    const { rerender, container } = render(<FullscreenViewer album={mockAlbum} />);
+
+    // Get the main photo area (not the film strip)
+    const mainPhotoArea = container.querySelector('.flex-1.min-w-0');
+    let mainPhoto = mainPhotoArea?.querySelector('img');
+    expect(mainPhoto).toHaveAttribute('alt', 'First Photo');
+    expect(mainPhoto).toHaveAttribute('src', 'https://example.com/1.jpg');
+
+    // Create a different album
+    const differentAlbum: Album = {
+      id: 'album-2',
+      title: 'Different Album',
+      cover: 'https://example.com/cover2.jpg',
+      photos: [
+        { id: '4', title: 'New First Photo', url: 'https://example.com/4.jpg' },
+        { id: '5', title: 'New Second Photo', url: 'https://example.com/5.jpg' },
+      ],
+    };
+
+    // Rerender with different album
+    rerender(<FullscreenViewer album={differentAlbum} />);
+
+    // Should show the first photo of the new album
+    mainPhoto = mainPhotoArea?.querySelector('img');
+    expect(mainPhoto).toHaveAttribute('alt', 'New First Photo');
+    expect(mainPhoto).toHaveAttribute('src', 'https://example.com/4.jpg');
+  });
+
+  it('displays correct photo based on selected index from FilmStrip', () => {
+    const { container } = render(<FullscreenViewer album={mockAlbum} />);
+
+    // Get the main photo (not from film strip)
+    const mainPhotoArea = container.querySelector('.flex-1.min-w-0');
+    const firstPhoto = mainPhotoArea?.querySelector('img');
+
+    expect(firstPhoto).toHaveAttribute('alt', 'First Photo');
+    expect(firstPhoto).toHaveAttribute('src', 'https://example.com/1.jpg');
+  });
+
+  it('handles empty photos array gracefully', () => {
+    const emptyAlbum: Album = {
+      id: 'empty-album',
+      title: 'Empty Album',
+      cover: 'https://example.com/cover.jpg',
+      photos: [],
+    };
+
+    const { container } = render(<FullscreenViewer album={emptyAlbum} />);
+
+    // Should not render any img element in the main photo area
+    const images = container.querySelectorAll('img');
+    expect(images.length).toBe(0);
+  });
+});