sunpeak 0.3.8 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +5 -5
  2. package/dist/chatgpt/chatgpt-simulator.d.ts +13 -3
  3. package/dist/chatgpt/index.d.ts +1 -0
  4. package/dist/index.cjs +24 -6
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.js +24 -6
  7. package/dist/index.js.map +1 -1
  8. package/dist/style.css +179 -7
  9. package/package.json +1 -1
  10. package/template/data/albums.json +112 -0
  11. package/template/data/places.json +49 -0
  12. package/template/dev/main.tsx +2 -59
  13. package/template/index.html +1 -1
  14. package/template/mcp/server.ts +4 -50
  15. package/template/src/App.tsx +86 -37
  16. package/template/src/components/album/album-card.tsx +45 -0
  17. package/template/src/components/album/albums.tsx +77 -0
  18. package/template/src/components/album/film-strip.tsx +50 -0
  19. package/template/src/components/album/fullscreen-viewer.tsx +60 -0
  20. package/template/src/components/album/index.ts +4 -0
  21. package/template/src/components/{openai-card.test.tsx → card/card.test.tsx} +12 -12
  22. package/template/src/components/{openai-card.tsx → card/card.tsx} +8 -8
  23. package/template/src/components/card/index.ts +1 -0
  24. package/template/src/components/{openai-carousel.test.tsx → carousel/carousel.test.tsx} +10 -10
  25. package/template/src/components/{openai-carousel.tsx → carousel/carousel.tsx} +7 -7
  26. package/template/src/components/carousel/index.ts +1 -0
  27. package/template/src/components/index.ts +4 -2
  28. package/template/src/components/simulations/albums-simulation.tsx +20 -0
  29. package/template/src/components/simulations/app-simulation.tsx +13 -0
  30. package/template/src/components/simulations/carousel-simulation.tsx +63 -0
  31. package/template/src/components/simulations/index.tsx +14 -0
package/README.md CHANGED
@@ -50,13 +50,13 @@ To add sunpeak to an existing project, refer to the [documentation](https://docs
50
50
 
51
51
  ## Example Component
52
52
  ```tsx
53
- import '@/styles/globals.css';
54
- import { OpenAICard } from "@/components";
53
+ import "./styles/globals.css";
54
+ import { Card } from "./components/card";
55
55
 
56
56
  export default function App() {
57
57
  return (
58
- <OpenAICard
59
- image="https://example.com/photo.jpg"
58
+ <Card
59
+ image="https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop"
60
60
  imageAlt="Lady Bird Lake"
61
61
  header="Lady Bird Lake"
62
62
  metadata="⭐ 4.5 • Austin, TX"
@@ -64,7 +64,7 @@ export default function App() {
64
64
  button2={{ children: "Learn More", onClick: () => {} }}
65
65
  >
66
66
  Scenic lake perfect for kayaking, paddleboarding, and trails.
67
- </OpenAICard>
67
+ </Card>
68
68
  );
69
69
  }
70
70
  ```
@@ -1,11 +1,21 @@
1
1
  import * as React from 'react';
2
- interface ChatGPTSimulatorProps {
3
- children: React.ReactNode;
2
+ /**
3
+ * A simulation packages a component with its example data and metadata.
4
+ * Each simulation represents a complete app experience in the simulator.
5
+ */
6
+ export interface Simulation {
7
+ value: string;
8
+ label: string;
9
+ component: React.ComponentType;
4
10
  appName?: string;
5
11
  appIcon?: string;
6
12
  userMessage?: string;
7
13
  toolOutput?: Record<string, unknown> | null;
8
14
  widgetState?: Record<string, unknown> | null;
9
15
  }
10
- export declare function ChatGPTSimulator({ children, appName, appIcon, userMessage, toolOutput, widgetState, }: ChatGPTSimulatorProps): import("react/jsx-runtime").JSX.Element;
16
+ interface ChatGPTSimulatorProps {
17
+ children?: React.ReactNode;
18
+ simulations?: Simulation[];
19
+ }
20
+ export declare function ChatGPTSimulator({ children, simulations, }: ChatGPTSimulatorProps): import("react/jsx-runtime").JSX.Element;
11
21
  export {};
@@ -1,3 +1,4 @@
1
1
  export { ChatGPTSimulator } from './chatgpt-simulator';
2
+ export type { Simulation } from './chatgpt-simulator';
2
3
  export { initMockOpenAI } from './mock-openai';
3
4
  export * from './theme-provider';
package/dist/index.cjs CHANGED
@@ -3626,13 +3626,18 @@ const DEFAULT_THEME = "dark";
3626
3626
  const DEFAULT_DISPLAY_MODE = "inline";
3627
3627
  function ChatGPTSimulator({
3628
3628
  children,
3629
- appName,
3630
- appIcon,
3631
- userMessage,
3632
- toolOutput = null,
3633
- widgetState = null
3629
+ simulations = []
3634
3630
  }) {
3635
3631
  const [screenWidth, setScreenWidth] = React__namespace.useState("full");
3632
+ const [selectedKey, setSelectedKey] = React__namespace.useState(
3633
+ simulations.length > 0 ? simulations[0].value : ""
3634
+ );
3635
+ const selectedSim = simulations.find((sim) => sim.value === selectedKey);
3636
+ const appName = selectedSim == null ? void 0 : selectedSim.appName;
3637
+ const appIcon = selectedSim == null ? void 0 : selectedSim.appIcon;
3638
+ const userMessage = selectedSim == null ? void 0 : selectedSim.userMessage;
3639
+ const toolOutput = (selectedSim == null ? void 0 : selectedSim.toolOutput) ?? null;
3640
+ const widgetState = (selectedSim == null ? void 0 : selectedSim.widgetState) ?? null;
3636
3641
  const mock = React.useMemo(
3637
3642
  () => initMockOpenAI({
3638
3643
  theme: DEFAULT_THEME,
@@ -3660,10 +3665,23 @@ function ChatGPTSimulator({
3660
3665
  }
3661
3666
  };
3662
3667
  }, []);
3668
+ const SelectedComponent = selectedSim == null ? void 0 : selectedSim.component;
3669
+ const content = SelectedComponent ? /* @__PURE__ */ jsxRuntime.jsx(SelectedComponent, {}) : children;
3663
3670
  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(
3664
3671
  SimpleSidebar,
3665
3672
  {
3666
3673
  controls: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
3674
+ simulations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Simulation", children: /* @__PURE__ */ jsxRuntime.jsx(
3675
+ SidebarSelect,
3676
+ {
3677
+ value: selectedKey,
3678
+ onChange: (value) => setSelectedKey(value),
3679
+ options: simulations.map((sim) => ({
3680
+ value: sim.value,
3681
+ label: sim.label
3682
+ }))
3683
+ }
3684
+ ) }),
3667
3685
  /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Theme", children: /* @__PURE__ */ jsxRuntime.jsx(
3668
3686
  SidebarSelect,
3669
3687
  {
@@ -3708,7 +3726,7 @@ function ChatGPTSimulator({
3708
3726
  appName,
3709
3727
  appIcon,
3710
3728
  userMessage,
3711
- children
3729
+ children: content
3712
3730
  }
3713
3731
  )
3714
3732
  }