@tpitre/story-ui 2.1.5 → 2.3.0

package/templates/StoryUI/index.tsx

@@ -1,2 +1,2 @@
+export { StoryUIPanel } from './StoryUIPanel';
 export { default } from './StoryUIPanel';
-export { default as StoryUIPanel } from './StoryUIPanel';

package/templates/StoryUI/manager.tsx

@@ -0,0 +1,264 @@
+/**
+ * Story UI Storybook Manager Addon
+ *
+ * This addon integrates with Storybook's sidebar to show generated stories.
+ * In Edge mode, it fetches stories from the Edge Worker and adds them to the sidebar.
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { addons, types } from '@storybook/manager-api';
+import { useStorybookApi, useChannel } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { styled } from '@storybook/theming';
+
+// Addon identifier
+const ADDON_ID = 'story-ui';
+const PANEL_ID = `${ADDON_ID}/generated-stories`;
+const TOOL_ID = `${ADDON_ID}/tool`;
+
+// Event channels for communication between panel and manager
+export const EVENTS = {
+  STORY_GENERATED: `${ADDON_ID}/story-generated`,
+  REFRESH_STORIES: `${ADDON_ID}/refresh-stories`,
+  SELECT_GENERATED_STORY: `${ADDON_ID}/select-generated-story`,
+};
+
+// Types
+interface GeneratedStory {
+  id: string;
+  title: string;
+  createdAt: number;
+  framework?: string;
+}
+
+// Styled components
+const SidebarContainer = styled.div`
+  padding: 10px;
+`;
+
+const SectionTitle = styled.div`
+  font-size: 11px;
+  font-weight: 700;
+  color: ${({ theme }) => theme.color.mediumdark};
+  text-transform: uppercase;
+  letter-spacing: 0.35em;
+  padding: 10px 0;
+  border-bottom: 1px solid ${({ theme }) => theme.appBorderColor};
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const StoryList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
+const StoryItem = styled.li<{ isActive?: boolean }>`
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 13px;
+  color: ${({ theme, isActive }) => isActive ? theme.color.secondary : theme.color.defaultText};
+  background: ${({ theme, isActive }) => isActive ? theme.background.hoverable : 'transparent'};
+
+  &:hover {
+    background: ${({ theme }) => theme.background.hoverable};
+  }
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const StoryIcon = styled.span`
+  font-size: 14px;
+`;
+
+const EmptyState = styled.div`
+  padding: 20px;
+  text-align: center;
+  color: ${({ theme }) => theme.color.mediumdark};
+  font-size: 12px;
+`;
+
+const RefreshButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: ${({ theme }) => theme.color.mediumdark};
+  font-size: 14px;
+
+  &:hover {
+    color: ${({ theme }) => theme.color.secondary};
+  }
+`;
+
+/**
+ * Get the Edge URL from environment variable.
+ * This must be configured via VITE_STORY_UI_EDGE_URL environment variable.
+ * No hardcoded URLs - each deployment must configure their own backend.
+ */
+function getEdgeUrl(): string {
+  // Check for Vite env variable - this is the ONLY source for the Edge URL
+  if (typeof import.meta !== 'undefined' && import.meta.env?.VITE_STORY_UI_EDGE_URL) {
+    return import.meta.env.VITE_STORY_UI_EDGE_URL;
+  }
+
+  // No fallback - environment variable must be configured
+  return '';
+}
+
+/**
+ * Check if we're in Edge mode
+ */
+function isEdgeMode(): boolean {
+  const edgeUrl = getEdgeUrl();
+  if (edgeUrl) return true;
+
+  // Check if we're on a production domain
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    return hostname !== 'localhost' && hostname !== '127.0.0.1';
+  }
+
+  return false;
+}
+
+/**
+ * Generated Stories Sidebar Component
+ */
+const GeneratedStoriesSidebar: React.FC = () => {
+  const [stories, setStories] = useState<GeneratedStory[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [activeStoryId, setActiveStoryId] = useState<string | null>(null);
+
+  // Listen for story generation events from the panel
+  useChannel({
+    [EVENTS.STORY_GENERATED]: (data: GeneratedStory) => {
+      setStories(prev => [data, ...prev.filter(s => s.id !== data.id)]);
+    },
+    [EVENTS.REFRESH_STORIES]: () => {
+      fetchStories();
+    },
+  });
+
+  const fetchStories = useCallback(async () => {
+    if (!isEdgeMode()) return;
+
+    setLoading(true);
+    try {
+      const edgeUrl = getEdgeUrl();
+      const response = await fetch(`${edgeUrl}/story-ui/stories`);
+      if (response.ok) {
+        const data = await response.json();
+        setStories(Array.isArray(data) ? data : []);
+      }
+    } catch (error) {
+      console.error('Failed to fetch generated stories:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStories();
+  }, [fetchStories]);
+
+  const handleStoryClick = useCallback((story: GeneratedStory) => {
+    setActiveStoryId(story.id);
+
+    // Emit event for the Story UI panel to display the story
+    const channel = addons.getChannel();
+    channel.emit(EVENTS.SELECT_GENERATED_STORY, story);
+  }, []);
+
+  if (!isEdgeMode()) {
+    return (
+      <SidebarContainer>
+        <EmptyState>
+          Generated stories appear here in Edge mode
+        </EmptyState>
+      </SidebarContainer>
+    );
+  }
+
+  return (
+    <SidebarContainer>
+      <SectionTitle>
+        Generated Stories
+        <RefreshButton onClick={fetchStories} title="Refresh stories">
+          {loading ? '...' : '\u21bb'}
+        </RefreshButton>
+      </SectionTitle>
+
+      {stories.length === 0 ? (
+        <EmptyState>
+          {loading ? 'Loading...' : 'No generated stories yet'}
+        </EmptyState>
+      ) : (
+        <StoryList>
+          {stories.map((story) => (
+            <StoryItem
+              key={story.id}
+              isActive={activeStoryId === story.id}
+              onClick={() => handleStoryClick(story)}
+            >
+              <StoryIcon>&#128214;</StoryIcon>
+              {story.title}
+            </StoryItem>
+          ))}
+        </StoryList>
+      )}
+    </SidebarContainer>
+  );
+};
+
+/**
+ * Toolbar button to toggle generated stories panel
+ */
+const GeneratedStoriesToolbar: React.FC = () => {
+  const api = useStorybookApi();
+
+  if (!isEdgeMode()) return null;
+
+  return (
+    <IconButton
+      key={TOOL_ID}
+      title="Generated Stories"
+      onClick={() => {
+        api.togglePanel(true);
+        api.setSelectedPanel(PANEL_ID);
+      }}
+    >
+      <span style={{ fontSize: '14px' }}>&#10024;</span>
+    </IconButton>
+  );
+};
+
+// Register the addon
+addons.register(ADDON_ID, (api) => {
+  // Only register in Edge mode
+  if (!isEdgeMode()) return;
+
+  // Register the toolbar button
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: 'Generated Stories',
+    match: ({ viewMode }) => viewMode === 'story' || viewMode === 'docs',
+    render: () => <GeneratedStoriesToolbar />,
+  });
+
+  // Register the sidebar panel
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Generated',
+    match: ({ viewMode }) => viewMode === 'story' || viewMode === 'docs',
+    render: ({ active }) => active ? <GeneratedStoriesSidebar /> : null,
+  });
+});
+
+export default {};

package/templates/mcp-config-claude.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "story-ui": {
+      "command": "npx",
+      "args": ["@tpitre/story-ui", "mcp"],
+      "env": {
+        "CLAUDE_API_KEY": "your-claude-api-key-here"
+      }
+    }
+  }
+}

package/templates/mcp-example.md

@@ -0,0 +1,76 @@
+# Story UI MCP Example
+
+This example shows how to use Story UI with Claude Desktop via MCP.
+
+## Example Conversation
+
+**You:** Use Story UI to generate a hero section with a gradient background, a main title "Welcome to Our Platform", a subtitle "Build amazing experiences", and two buttons - "Get Started" (primary) and "Learn More" (secondary).
+
+**Claude (using Story UI MCP):** I'll help you create a hero section using Story UI. Let me generate that for you.
+
+*[Claude would then use the generate-story tool]*
+
+The story has been generated successfully! Here's what was created:
+
+**Title:** Hero Section with Gradient Background
+**ID:** hero-gradient-1234
+
+The generated story includes:
+- A hero section with a beautiful gradient background
+- Main title: "Welcome to Our Platform"
+- Subtitle: "Build amazing experiences"
+- Two buttons with proper styling:
+  - "Get Started" button with primary variant
+  - "Learn More" button with secondary variant
+
+You can now see this story in your Storybook instance under the "Generated" category.
+
+**You:** Can you show me what components are available for building layouts?
+
+**Claude:** Let me check what layout components are available in your design system.
+
+*[Claude would use the list-components tool with category filter]*
+
+I found the following layout components available:
+- Grid: Flexible grid system for responsive layouts
+- Container: Page container with max-width constraints
+- Row: Horizontal layout component
+- Column: Vertical layout component
+- Stack: Stacks children vertically or horizontally with spacing
+- Spacer: Adds space between components
+
+**You:** Great! Now modify the hero section to use a Grid with two columns - put the text content on the left and add an illustration placeholder on the right.
+
+**Claude:** I'll help you iterate on the existing hero section to add a two-column layout with the content on the left and space for an illustration on the right.
+
+*[Claude would use generate-story again with the iteration prompt]*
+
+The hero section has been updated! The story now features:
+- A Grid component with two equal columns
+- Left column: Contains the title, subtitle, and buttons
+- Right column: Includes a placeholder for an illustration
+- Responsive design that stacks on mobile devices
+
+The iteration preserved your existing content while restructuring it into the requested layout.
+
+## Common Workflows
+
+### 1. Component Discovery
+"What Button variants are available in my design system?"
+"Show me all form-related components"
+"What props does the Card component accept?"
+
+### 2. Story Generation
+"Create a login form with email, password, and remember me checkbox"
+"Build a pricing card with a featured badge"
+"Generate a navigation bar with logo and menu items"
+
+### 3. Story Management
+"List all stories I've created today"
+"Show me the story with ID abc-123"
+"Delete the old hero section story"
+
+### 4. Iterative Design
+"Add a dark mode variant to the current story"
+"Make the buttons larger and add icons"
+"Change the color scheme to use brand colors"

package/templates/production-app/.env.example

@@ -0,0 +1,11 @@
+# Story UI Production App Environment Variables
+
+# Backend API URL (required for production)
+# This should point to your Railway-deployed MCP server
+VITE_BACKEND_URL=http://localhost:4001
+
+# Optional: Custom app title
+VITE_APP_TITLE=Story UI
+
+# Note: When deploying to Cloudflare Pages, set these as environment variables
+# in your Cloudflare dashboard or wrangler.toml

package/templates/production-app/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Story UI - AI-powered component generation using your design system" />
+    <meta name="theme-color" content="#0a0a0a" />
+
+    <title>Story UI</title>
+
+    <!-- Preload critical fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <!-- Prevent flash of unstyled content -->
+    <style>
+      html {
+        background-color: #0a0a0a;
+      }
+      body {
+        margin: 0;
+        background-color: #0a0a0a;
+      }
+      #root {
+        min-height: 100vh;
+        background-color: #0a0a0a;
+      }
+      /* Initial loading state */
+      .initial-loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        color: #a1a1a1;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        font-size: 14px;
+      }
+      .initial-loader-spinner {
+        width: 24px;
+        height: 24px;
+        border: 2px solid #27272a;
+        border-top-color: #6366f1;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-right: 12px;
+      }
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <!-- Initial loading state (replaced by React) -->
+      <div class="initial-loader">
+        <div class="initial-loader-spinner"></div>
+        <span>Loading Story UI...</span>
+      </div>
+    </div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/production-app/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "story-ui-production-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Story UI Production App - AI-powered component generation using your design system",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@babel/standalone": "^7.23.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/babel__standalone": "^7.1.7",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/production-app/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="8" fill="#6366f1"/>
+  <path d="M8 10h6v2H10v8h4v2H8V10z" fill="white"/>
+  <path d="M16 10h8v2h-6v2h4v2h-4v4h6v2h-8V10z" fill="white"/>
+</svg>