sunpeak 0.2.6 → 0.3.2

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../chatgpt/openai-types';
+export * from '../chatgpt/chatgpt-simulator-types';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunpeak",
-  "version": "0.2.6",
-  "description": "The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with approved shadcn React components.",
+  "version": "0.3.2",
+  "description": "The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui components.",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -13,7 +13,7 @@
         "default": "./dist/index.js"
       },
       "require": {
-        "types": "./dist/index.d.cts",
+        "types": "./dist/index.d.ts",
         "default": "./dist/index.cjs"
       }
     },
@@ -23,8 +23,6 @@
         "default": "./dist/mcp/index.js"
       }
     },
-    "./styles/globals.css": "./dist/styles/globals.css",
-    "./styles/chatgpt": "./dist/styles/chatgpt/index.css",
     "./package.json": "./package.json"
   },
   "bin": {
@@ -38,15 +36,17 @@
   ],
   "sideEffects": false,
   "keywords": [
+    "openai-apps-sdk-ui",
     "openai-app",
+    "chatgpt-apps-sdk",
     "chatgpt-app",
+    "mcp-ui",
+    "mcp",
     "chatgpt-simulator",
     "testing",
     "multi-platform",
     "react",
-    "components",
-    "shadcn-ui",
-    "tailwindcss",
+    "tailwind",
     "sunpeak"
   ],
   "author": "Sunpeak AI",
@@ -57,17 +57,9 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^0.5.0",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "class-variance-authority": "^0.7.1",
+    "@openai/apps-sdk-ui": "^0.2.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.554.0",
     "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -91,10 +83,10 @@
     "react-dom": "^18.3.1",
     "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
-    "tsup": "^8.3.5",
     "tsx": "^4.20.6",
     "typescript": "^5.6.3",
     "vite": "^5.4.21",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.12"
   },
   "repository": {
@@ -106,7 +98,7 @@
   },
   "homepage": "https://sunpeak.ai/",
   "scripts": {
-    "build": "tsup",
+    "build": "vite build",
     "dev": "pnpm --filter my-sunpeak-app dev",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",

package/template/README.md

@@ -4,8 +4,6 @@ A ChatGPT App UI built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
 
 ## Quickstart
 
-Requirements: Node (20+), pnpm (10+)
-
 ```bash
 pnpm dev
 ```
@@ -19,7 +17,7 @@ Edit [src/App.tsx](./src/App.tsx) to build your app UI.
 ```
 src/
 ├── App.tsx          # Your main app component
-└── components/      # Your shadcn/ui React components
+└── components/      # Your React components
 
 mcp/
 └── server.ts        # MCP server for testing in ChatGPT
@@ -57,9 +55,9 @@ pnpm mcp
 ngrok http 6766
 ```
 
-The server will run on `http://localhost:6766` and serve your App component with dummy data from `mcp/server.ts`.
+You can then connect to the tunnel forwarding URL at the `/mcp` path from ChatGPT **in developer mode** to see your UI in action: `User > Settings > Apps & Connectors > Create`
 
-You can then connect to the tunnel `/mcp` path from ChatGPT in developer mode to see your UI in action.
+Once your app is connected, send `show app` to ChatGPT. Many changes require you to Refresh your app on the same settings modal.
 
 ## Build & Deploy
 
@@ -80,4 +78,3 @@ This creates optimized builds in the `dist/` directory:
 - [ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
 - [ChatGPT Apps SDK UI Documentation](https://developers.openai.com/apps-sdk/build/chatgpt-ui)
 - [ChatGPT Apps SDK Examples](https://github.com/openai/openai-apps-sdk-examples)
-- [shadcn/ui](https://ui.shadcn.com/)

package/template/dev/main.tsx

@@ -2,7 +2,6 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ChatGPTSimulator } from 'sunpeak';
 import { App } from '@/App';
-import './styles.css';
 
 const toolOutput = {
   places: [

package/template/mcp/server.ts

@@ -58,7 +58,7 @@ const toolOutput = {
 runMCPServer({
   name: 'my-sunpeak-app',
   version: '0.1.0',
-  distPath: path.resolve(__dirname, '../dist/chatgpt/index.global.js'),
+  distPath: path.resolve(__dirname, '../dist/chatgpt/index.js'),
   toolName: 'show-places',
   toolDescription: 'Show popular places in Austin',
   dummyData: toolOutput,

package/template/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "tsup",
+    "build": "vite build --config vite.config.build.ts",
     "dev": "vite",
     "mcp": "tsx mcp/server.ts",
     "lint": "eslint . --ext .ts,.tsx --fix",
@@ -12,25 +12,15 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "class-variance-authority": "^0.7.1",
+    "@openai/apps-sdk-ui": "^0.2.0",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "lucide-react": "^0.554.0",
     "sunpeak": "workspace:*",
-    "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0"
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
-    "postcss": "^8.4.49",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -45,12 +35,12 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "jsdom": "^27.2.0",
+    "postcss": "^8.4.49",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
-    "tsup": "^8.3.5",
     "tsx": "^4.20.6",
     "typescript": "^5.6.3",
     "vite": "^5.4.21",

package/template/src/App.tsx

@@ -1,8 +1,7 @@
-import { useWidgetProps } from 'sunpeak';
-import { SunpeakCarousel, SunpeakCard } from './components';
-import 'tw-animate-css';
 import '@/styles/globals.css';
-import '@/styles/chatgpt.css';
+
+import { useWidgetProps } from 'sunpeak';
+import { OpenAICarousel, OpenAICard } from './components';
 
 export interface Place {
   id: string;
@@ -22,9 +21,9 @@ export function App() {
   const data = useWidgetProps<AppData>(() => ({ places: [] }));
 
   return (
-    <SunpeakCarousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={220}>
+    <OpenAICarousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={220}>
       {data.places.map((place) => (
-        <SunpeakCard
+        <OpenAICard
           key={place.id}
           image={place.image}
           imageAlt={place.name}
@@ -42,8 +41,8 @@ export function App() {
           }}
         >
           {place.description}
-        </SunpeakCard>
+        </OpenAICard>
       ))}
-    </SunpeakCarousel>
+    </OpenAICarousel>
   );
 }

package/template/src/components/index.ts

@@ -1,2 +1,2 @@
-export * from './sunpeak-carousel';
-export * from './sunpeak-card';
+export * from './openai-carousel';
+export * from './openai-card';

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

@@ -0,0 +1,73 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { OpenAICard } from './openai-card';
+
+describe('OpenAICard', () => {
+  it('renders correct variant classes', () => {
+    const { container, rerender } = render(
+      <OpenAICard variant="default" data-testid="card">
+        Content
+      </OpenAICard>
+    );
+
+    const card = container.firstChild as HTMLElement;
+    expect(card.className).toContain('border border-subtle bg-surface');
+
+    rerender(
+      <OpenAICard variant="bordered" data-testid="card">
+        Content
+      </OpenAICard>
+    );
+    expect(card.className).toContain('border-2 border-default bg-surface');
+
+    rerender(
+      <OpenAICard variant="elevated" data-testid="card">
+        Content
+      </OpenAICard>
+    );
+    expect(card.className).toContain('shadow-lg');
+  });
+
+  it('button clicks stop propagation and do not trigger card onClick', () => {
+    const cardOnClick = vi.fn();
+    const button1OnClick = vi.fn();
+
+    render(
+      <OpenAICard
+        onClick={cardOnClick}
+        button1={{ onClick: button1OnClick, children: 'Click Me' }}
+      >
+        Content
+      </OpenAICard>
+    );
+
+    const button = screen.getByText('Click Me');
+    fireEvent.click(button);
+
+    expect(button1OnClick).toHaveBeenCalledTimes(1);
+    expect(cardOnClick).not.toHaveBeenCalled();
+  });
+
+  it('calls button onClick handlers when buttons are clicked', () => {
+    const button1OnClick = vi.fn();
+    const button2OnClick = vi.fn();
+
+    render(
+      <OpenAICard
+        button1={{ onClick: button1OnClick, children: 'Button 1', isPrimary: true }}
+        button2={{ onClick: button2OnClick, children: 'Button 2' }}
+      >
+        Content
+      </OpenAICard>
+    );
+
+    const button1 = screen.getByText('Button 1');
+    const button2 = screen.getByText('Button 2');
+
+    fireEvent.click(button1);
+    expect(button1OnClick).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(button2);
+    expect(button2OnClick).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,126 @@
+import * as React from "react"
+import { Button } from "@openai/apps-sdk-ui/components/Button"
+import { cn } from "@/lib/index"
+
+export interface OpenAIButtonProps {
+  isPrimary?: boolean
+  onClick: () => void
+  children: React.ReactNode
+}
+
+export interface OpenAICardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  image?: string
+  imageAlt?: string
+  imageMaxWidth?: number
+  imageMaxHeight?: number
+  header?: React.ReactNode
+  metadata?: React.ReactNode
+  button1?: OpenAIButtonProps
+  button2?: OpenAIButtonProps
+  variant?: "default" | "bordered" | "elevated"
+}
+
+export const OpenAICard = React.forwardRef<HTMLDivElement, OpenAICardProps>(
+  (
+    {
+      children,
+      image,
+      imageAlt,
+      imageMaxWidth = 400,
+      imageMaxHeight = 400,
+      header,
+      metadata,
+      button1,
+      button2,
+      variant = "default",
+      className,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const variantClasses = {
+      default: "border border-subtle bg-surface",
+      bordered: "border-2 border-default bg-surface",
+      elevated: "border border-subtle bg-surface shadow-lg",
+    }
+
+    const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      onClick?.(e)
+    }
+
+    const renderButton = (buttonProps: OpenAIButtonProps) => {
+      const { isPrimary = false, onClick: buttonOnClick, children } = buttonProps
+
+      const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation()
+        buttonOnClick()
+      }
+
+      return (
+        <Button
+          color={isPrimary ? "primary" : "secondary"}
+          variant={isPrimary ? "solid" : "soft"}
+          onClick={handleClick}
+        >
+          {children}
+        </Button>
+      )
+    }
+
+    const hasButtons = button1 || button2
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "overflow-hidden rounded-2xl cursor-pointer select-none",
+          variantClasses[variant],
+          className
+        )}
+        onClick={handleCardClick}
+        {...props}
+      >
+        {image && (
+          <div className="w-full overflow-hidden">
+            <img
+              src={image}
+              alt={imageAlt}
+              loading="lazy"
+              className="w-full h-auto aspect-square object-cover"
+              style={{
+                maxWidth: `${imageMaxWidth}px`,
+                maxHeight: `${imageMaxHeight}px`,
+              }}
+            />
+          </div>
+        )}
+        <div className="flex flex-col flex-1 p-4">
+          {header && (
+            <h2 className="font-medium text-base leading-tight overflow-hidden text-ellipsis whitespace-nowrap mb-2">
+              {header}
+            </h2>
+          )}
+          {metadata && (
+            <p className="text-secondary text-xs mb-1">
+              {metadata}
+            </p>
+          )}
+          {children && (
+            <div className="text-sm leading-normal line-clamp-2 mb-3">
+              {children}
+            </div>
+          )}
+          {hasButtons && (
+            <div className="flex gap-2 flex-wrap mt-auto">
+              {button1 && renderButton(button1)}
+              {button2 && renderButton(button2)}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+OpenAICard.displayName = "OpenAICard"

package/template/src/components/openai-carousel.test.tsx

@@ -0,0 +1,84 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { OpenAICarousel } from './openai-carousel';
+
+const mockUseDisplayMode = vi.fn(() => 'inline');
+
+// Mock sunpeak hooks
+vi.mock('sunpeak', () => ({
+  useWidgetState: vi.fn(() => [{ currentIndex: 0 }, vi.fn()]),
+  useDisplayMode: () => mockUseDisplayMode(),
+}));
+
+// Mock embla-carousel-react
+vi.mock('embla-carousel-react', () => ({
+  default: vi.fn(() => [vi.fn(), null]),
+}));
+
+// Mock embla-carousel-wheel-gestures
+vi.mock('embla-carousel-wheel-gestures', () => ({
+  WheelGesturesPlugin: vi.fn(() => ({})),
+}));
+
+describe('OpenAICarousel', () => {
+  beforeEach(() => {
+    mockUseDisplayMode.mockReturnValue('inline');
+  });
+
+  it('renders all children with correct card width', () => {
+    const { container } = render(
+      <OpenAICarousel cardWidth={300}>
+        <div>Card 1</div>
+        <div>Card 2</div>
+        <div>Card 3</div>
+      </OpenAICarousel>
+    );
+
+    const cardContainers = container.querySelectorAll('.flex-none');
+    expect(cardContainers).toHaveLength(3);
+
+    cardContainers.forEach((cardContainer) => {
+      const element = cardContainer as HTMLElement;
+      expect(element.style.minWidth).toBe('300px');
+      expect(element.style.maxWidth).toBe('300px');
+    });
+  });
+
+  it('handles cardWidth object with inline/fullscreen modes', () => {
+    // Test inline mode
+    mockUseDisplayMode.mockReturnValue('inline');
+    const { container: inlineContainer } = render(
+      <OpenAICarousel cardWidth={{ inline: 250, fullscreen: 400 }}>
+        <div>Card 1</div>
+      </OpenAICarousel>
+    );
+
+    let cardContainer = inlineContainer.querySelector('.flex-none') as HTMLElement;
+    expect(cardContainer.style.minWidth).toBe('250px');
+
+    // Test fullscreen mode
+    mockUseDisplayMode.mockReturnValue('fullscreen');
+    const { container: fullscreenContainer } = render(
+      <OpenAICarousel cardWidth={{ inline: 250, fullscreen: 400 }}>
+        <div>Card 1</div>
+      </OpenAICarousel>
+    );
+
+    cardContainer = fullscreenContainer.querySelector('.flex-none') as HTMLElement;
+    expect(cardContainer.style.minWidth).toBe('400px');
+  });
+
+  it('applies custom gap between cards', () => {
+    const { container } = render(
+      <OpenAICarousel gap={24}>
+        <div>Card 1</div>
+        <div>Card 2</div>
+      </OpenAICarousel>
+    );
+
+    const carouselTrack = container.querySelector('.flex.touch-pan-y') as HTMLElement;
+    expect(carouselTrack.style.gap).toBe('24px');
+    expect(carouselTrack.style.marginLeft).toBe('-24px');
+    expect(carouselTrack.style.paddingLeft).toBe('24px');
+  });
+});