sunpeak 0.3.4 → 0.3.6

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.6",
   "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,5 @@
-import '@/styles/globals.css';
+import './styles/globals.css';
+import 'sunpeak/style.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/tsconfig.json

@@ -22,10 +22,7 @@
     "declarationMap": true,
     "sourceMap": true,
 
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "baseUrl": "."
   },
   "include": ["src", "dev"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/template/vite.config.build.ts

@@ -4,6 +4,10 @@ import path from 'path';
 import tailwindcss from '@tailwindcss/vite';
 import { readFileSync, writeFileSync, unlinkSync, existsSync } from 'fs';
 
+// Check if we're in the sunpeak workspace (directory is named "template")
+const isTemplate = path.basename(__dirname) === 'template';
+const parentSrc = path.resolve(__dirname, '../src');
+
 // Plugin to inline CSS into the JS bundle
 function inlineCssPlugin() {
   return {
@@ -35,7 +39,11 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      // In workspace dev mode, use local sunpeak source
+      ...(isTemplate && {
+        'sunpeak': parentSrc,
+        '~': parentSrc,
+      }),
     },
     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

@@ -1,6 +1,10 @@
 import { defineConfig } from 'vitest/config';
 import path from 'path';
 
+// Check if we're in the sunpeak workspace (directory is named "template")
+const isTemplate = path.basename(__dirname) === 'template';
+const parentSrc = path.resolve(__dirname, '../src');
+
 export default defineConfig({
   test: {
     globals: true,
@@ -9,7 +13,11 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      // In workspace dev mode, use local sunpeak source
+      ...(isTemplate && {
+        'sunpeak': parentSrc,
+        '~': parentSrc,
+      }),
     },
   },
 });