sunpeak 0.2.2 → 0.2.4

package/README.md

@@ -15,24 +15,41 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.6-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-blue?style=flat-square&logo=react)](https://reactjs.org/)
 
-The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with approved shadcn React components.
+The ChatGPT Apps UI SDK.
+
+Build and test your ChatGPT App UI locally with approved React components.
 
 ![ChatGPT Simulator](https://sunpeak.ai/images/chatgpt-simulator.png)
 
-**Key Features:**
+## Quickstart
+
+Requirements: Node (20+), pnpm (10+)
+
+```bash
+pnpm dlx sunpeak init
+```
+
+## Key Features
 - 📺 ChatGPT simulator for rapid UI component development.
-- 📚 React component library built with [shadcn/ui](https://ui.shadcn.com/) and [Tailwind](https://tailwindcss.com/).
+- 📚 React component library built on [shadcn](https://ui.shadcn.com/).
 - 📱 Interface for custom components that work across genAI platforms.
 - 🤝 Styles that fit the [OpenAI design system](https://developers.openai.com/apps-sdk/build/chatgpt-ui).
 - 🧪 Testing framework that replicates advanced ChatGPT behavior locally.
 
-## Quickstart
-
-Requirements: Node (20+), pnpm (10+)
+## Example Component
+```tsx
+import { SunpeakCard } from "sunpeak";
 
-```bash
-pnpm dlx sunpeak init my-app
-cd my-app && pnpm dev
+export default function App() {
+  return (
+    <SunpeakCard
+      image="/photo.jpg"
+      imageAlt="Product"
+      header="Summer Collection"
+      button1={{ children: "Shop Now", onClick: () => console.log("Howdy!") }}
+    />
+  );
+}
 ```
 
 ## Supported Platforms

package/bin/sunpeak.js

@@ -25,6 +25,11 @@ async function init(projectName) {
     }
   }
 
+  if (projectName === 'template') {
+    console.error('Error: "template" is a reserved name. Please choose another name.');
+    process.exit(1);
+  }
+
   const targetDir = join(process.cwd(), projectName);
 
   if (existsSync(targetDir)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with approved shadcn React components.",
   "type": "module",
   "main": "./dist/index.cjs",

package/template/dev/styles.css

@@ -3,3 +3,4 @@
 
 /* Scan sunpeak source for Tailwind classes (only works in workspace, ignored otherwise) */
 @source "../../src/**/*.{ts,tsx}";
+@source "../node_modules/sunpeak/**/*.{ts,tsx}"

package/template/src/App.tsx

@@ -18,7 +18,7 @@ export interface AppProps {
 
 export function App({ data }: AppProps) {
   return (
-    <SunpeakCarousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={280}>
+    <SunpeakCarousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={220}>
       {data.map((place) => (
         <SunpeakCard
           key={place.id}

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

@@ -105,9 +105,9 @@ export const SunpeakCard = React.forwardRef<HTMLDivElement, SunpeakCardProps>(
         )}
         <div className="flex flex-col flex-1">
           {(header || metadata) && (
-            <CardHeader className={cn(image && "pt-3")}>
+            <CardHeader className={cn("p-3", image && "pt-2")}>
               {header && (
-                <CardTitle className="text-base font-medium leading-tight overflow-hidden text-ellipsis whitespace-nowrap">
+                <CardTitle className="text-sm font-medium leading-tight overflow-hidden text-ellipsis whitespace-nowrap">
                   {header}
                 </CardTitle>
               )}
@@ -120,14 +120,14 @@ export const SunpeakCard = React.forwardRef<HTMLDivElement, SunpeakCardProps>(
           )}
           {children && (
             <CardContent className={cn(
-              "text-sm leading-normal",
-              (header || metadata) && "pt-1"
+              "px-3 pb-3 text-sm leading-normal",
+              (header || metadata) ? "pt-0" : "pt-3"
             )}>
               <div className="line-clamp-2">{children}</div>
             </CardContent>
           )}
           {hasButtons && (
-            <CardFooter className="flex gap-2 flex-wrap">
+            <CardFooter className="flex gap-2 flex-wrap px-3 pb-3 pt-0">
               {button1 && renderButton(button1)}
               {button2 && renderButton(button2)}
             </CardFooter>

package/template/vite.config.ts

@@ -2,19 +2,10 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
 import path from 'path';
-import fs from 'fs';
 
-// Check if we're in the sunpeak workspace
-const parentPkgPath = path.resolve(__dirname, '../package.json');
+// Check if we're in the sunpeak workspace (directory is named "template")
+const isTemplate = path.basename(__dirname) === 'template';
 const parentSrc = path.resolve(__dirname, '../src');
-let isSunpeakWorkspace = false;
-
-if (fs.existsSync(parentPkgPath) && fs.existsSync(parentSrc)) {
-  try {
-    const parentPkg = JSON.parse(fs.readFileSync(parentPkgPath, 'utf-8'));
-    isSunpeakWorkspace = parentPkg.name === 'sunpeak';
-  } catch {}
-}
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
@@ -22,7 +13,7 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src'),
       // In workspace dev mode, use local sunpeak source
-      ...(isSunpeakWorkspace && {
+      ...(isTemplate && {
         'sunpeak': parentSrc,
         '~': parentSrc,
       }),