@tpitre/story-ui 3.6.2 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",
@@ -72,10 +72,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
     "@modelcontextprotocol/sdk": "^1.23.0",
-    "@mui/material": "^7.2.0",
     "@types/pg": "^8.15.6",
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
@@ -99,12 +96,15 @@
     "@semantic-release/github": "^10.3.5",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.1",
+    "@tpitre/story-ui": "^3.6.2",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/glob": "^8.1.0",
     "@types/inquirer": "^9.0.0",
     "@types/node": "^20.4.2",
     "@types/node-fetch": "^2.6.12",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "commitizen": "^4.3.1",
     "concurrently": "^8.2.0",
     "cz-conventional-changelog": "^3.3.0",

package/templates/StoryUI/StoryUIPanel.mdx

@@ -0,0 +1,84 @@
+{/*
+  Story UI Panel - MDX Documentation Page
+
+  This MDX file renders the Story UI Panel as a standalone documentation page.
+  Using MDX instead of a .stories.tsx file ensures the React component renders
+  correctly across ALL framework Storybooks (React, Vue, Svelte, Angular, Web Components).
+
+  Why this works:
+  - MDX is processed by @storybook/addon-docs which always uses React
+  - Regular .stories.tsx files render in the Preview iframe using the project's framework
+  - Non-React frameworks cannot render React components in their Preview
+  - MDX pages bypass this limitation by being compiled with React directly
+
+  Port Configuration:
+  - The port is automatically read from VITE_STORY_UI_PORT environment variable
+  - This is set during `npx story-ui init` and stored in .env
+  - URL parameter override: ?mcp-port=XXXX
+
+  Reference: Steve Dodier-Lazaro (Storybook team) recommendation
+*/}
+
+import { Meta } from '@storybook/addon-docs/blocks';
+import { StoryUIPanel } from './StoryUIPanel';
+import { useEffect, useState, useRef } from 'react';
+
+<Meta title="Story UI/Story Generator" />
+
+export const StoryUIPanelWrapper = () => {
+  const [isReady, setIsReady] = useState(false);
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    // Only run once on mount
+    if (hasInitialized.current) return;
+    hasInitialized.current = true;
+
+    if (typeof window !== 'undefined') {
+      // Check for URL parameter override for MCP port
+      const urlParams = new URLSearchParams(window.location.search);
+      const mcpPortParam = urlParams.get('mcp-port');
+
+      if (mcpPortParam) {
+        // URL parameter takes highest priority
+        window.STORY_UI_MCP_PORT = mcpPortParam;
+      }
+      // Otherwise, let StoryUIPanel.tsx's getApiBaseUrl() handle port detection
+      // from VITE_STORY_UI_PORT environment variable (set during story-ui init)
+    }
+
+    setIsReady(true);
+  }, []);
+
+  // Don't render until initialized to prevent hydration issues
+  if (!isReady) {
+    return (
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+        color: '#666'
+      }}>
+        Loading Story UI...
+      </div>
+    );
+  }
+
+  return <StoryUIPanel />;
+};
+
+{/*
+  Full-screen container to match the original story layout.
+  The StoryUIPanel component handles its own internal styling.
+*/}
+<div style={{
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  overflow: 'hidden'
+}}>
+  <StoryUIPanelWrapper />
+</div>