sunpeak 0.3.4 → 0.3.5

package/README.md

@@ -39,6 +39,13 @@ Requirements: React (18+), Tailwind 4
 pnpm add sunpeak
 ```
 
+When using `ChatGPTSimulator`, import the styles in your entry file:
+
+```tsx
+import 'sunpeak/style.css';
+import { ChatGPTSimulator } from 'sunpeak';
+```
+
 ## Key Features
 - 📺 ChatGPT simulator for local UI component development.
 - 📚 Pre-built component library built on [openai/apps-sdk-ui](https://github.com/openai/apps-sdk-ui).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "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",

package/template/dev/main.tsx

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

package/template/src/App.tsx

@@ -1,4 +1,4 @@
-import '@/styles/globals.css';
+import './styles/globals.css';
 
 import { useWidgetProps } from 'sunpeak';
 import { OpenAICarousel, OpenAICard } from './components';

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { Button } from "@openai/apps-sdk-ui/components/Button"
-import { cn } from "@/lib/index"
+import { cn } from "../lib/index"
 
 export interface OpenAIButtonProps {
   isPrimary?: boolean

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

@@ -4,7 +4,7 @@ import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
 import { ArrowLeft, ArrowRight } from "@openai/apps-sdk-ui/components/Icon"
 import { useWidgetState, useDisplayMode } from "sunpeak"
 import { Button } from "@openai/apps-sdk-ui/components/Button"
-import { cn } from "@/lib/index"
+import { cn } from "../lib/index"
 
 export interface OpenAICarouselState extends Record<string, unknown> {
   currentIndex?: number

package/template/src/styles/globals.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "@openai/apps-sdk-ui/css";
+@import "sunpeak/style.css";
 
 /* Required for Tailwind to find class references in Apps SDK UI components. */
 @source "../node_modules/@openai/apps-sdk-ui";

package/template/tsconfig.json

@@ -24,7 +24,9 @@
 
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "sunpeak": ["../src/index.ts"],
+      "sunpeak/*": ["../src/*"],
+      "~/*": ["../src/*"]
     }
   },
   "include": ["src", "dev"],

package/template/vite.config.build.ts

@@ -35,7 +35,8 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      'sunpeak': path.resolve(__dirname, '../src'),
+      '~': path.resolve(__dirname, '../src'),
     },
     conditions: ['style', 'import', 'module', 'browser', 'default'],
   },

package/template/vite.config.ts

@@ -11,7 +11,6 @@ export default defineConfig({
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
       // In workspace dev mode, use local sunpeak source
       ...(isTemplate && {
         'sunpeak': parentSrc,

package/template/vitest.config.ts

@@ -9,7 +9,8 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      'sunpeak': path.resolve(__dirname, '../src'),
+      '~': path.resolve(__dirname, '../src'),
     },
   },
 });