@tpitre/story-ui 1.7.1 → 2.0.1

package/templates/react-import-rule.json

@@ -0,0 +1,36 @@
+{
+  "globalRules": {
+    "reactImportMandatory": {
+      "name": "React Import is Mandatory",
+      "priority": "CRITICAL",
+      "rule": "Every story file MUST include 'import React from 'react';' as the FIRST import. This is non-negotiable for JSX to work.",
+      "enforcement": "automatic",
+      "details": {
+        "why": "JSX syntax requires React to be in scope. Without this import, stories will fail with 'React is not defined' error.",
+        "where": "First line of imports, before any other imports",
+        "format": "import React from 'react';",
+        "examples": {
+          "correct": [
+            "import React from 'react';",
+            "import type { Meta, StoryObj } from '@storybook/react-webpack5';",
+            "import { Button, Card } from 'antd';"
+          ],
+          "incorrect": [
+            "import type { Meta, StoryObj } from '@storybook/react-webpack5';",
+            "import { Button, Card } from 'antd';",
+            "// Missing React import!"
+          ]
+        }
+      },
+      "automaticFix": {
+        "enabled": true,
+        "description": "The system will automatically add 'import React from 'react';' if it detects JSX without React import"
+      }
+    }
+  },
+  "implementation": {
+    "validation": "Story validation will check for React import when JSX is present",
+    "autoFix": "Missing React imports will be automatically added during generation",
+    "promptGuidance": "AI prompts emphasize React import as the first mandatory import"
+  }
+}

package/templates/story-generation-rules.json

@@ -0,0 +1,29 @@
+{
+  "storyGenerationRules": {
+    "navigationStructure": {
+      "name": "Story Navigation Structure",
+      "priority": "HIGH",
+      "rule": "All generated stories MUST be placed under the 'Generated' section in Storybook navigation",
+      "implementation": {
+        "requirement": "Story title must be prefixed with 'Generated/'",
+        "example": "title: 'Generated/My Story Name'",
+        "enforcement": "Automatic via storyPrefix configuration"
+      },
+      "rationale": "Keeps generated stories organized and separate from manually created stories"
+    },
+    "titleFormat": {
+      "name": "Story Title Format",
+      "rule": "Story titles should be human-readable without technical prefixes",
+      "examples": {
+        "good": ["Recipe Card", "User Profile", "Navigation Menu"],
+        "avoid": ["Generate Recipe Card", "Build User Profile", "Create Navigation Menu"]
+      }
+    },
+    "fileNaming": {
+      "name": "Generated File Naming",
+      "rule": "Story files should use kebab-case with a unique hash suffix",
+      "format": "[descriptive-name]-[8-char-hash].stories.tsx",
+      "example": "recipe-card-f7bca0c5.stories.tsx"
+    }
+  }
+}

package/templates/story-ui-considerations.json

@@ -0,0 +1,156 @@
+{
+  "libraryName": "Your Component Library",
+  "importPath": "your-import-path",
+  "description": "Brief description of your component library and its design philosophy",
+
+  "corePrinciples": [
+    "Add fundamental principles of your design system",
+    "E.g., 'Always use design tokens for spacing'",
+    "E.g., 'Prefer composition over complex components'"
+  ],
+
+  "componentRules": {
+    "layout": {
+      "description": "How layouts should be structured",
+      "rules": [
+        "Use Grid component for multi-column layouts",
+        "Wrap content in Container for consistent padding"
+      ],
+      "examples": {
+        "twoColumn": "<Grid cols={2}><GridItem>...</GridItem><GridItem>...</GridItem></Grid>",
+        "responsive": "<Grid cols={{ base: 1, md: 2, lg: 3 }}>...</Grid>"
+      }
+    },
+    "spacing": {
+      "description": "Spacing and sizing system",
+      "rules": [
+        "Use spacing tokens (space-1, space-2, etc.)",
+        "Never use raw pixel values"
+      ],
+      "validValues": ["space-1", "space-2", "space-4", "space-8", "space-16"]
+    },
+    "colors": {
+      "description": "Color system usage",
+      "rules": [
+        "Use semantic color tokens (primary, secondary, etc.)",
+        "Avoid hex codes or rgb values"
+      ],
+      "validValues": ["primary", "secondary", "success", "warning", "error"]
+    },
+    "typography": {
+      "description": "Typography rules",
+      "rules": [
+        "Use Text component for all text",
+        "Use semantic size props (sm, md, lg)"
+      ]
+    }
+  },
+
+  "imports": {
+    "primary": {
+      "path": "main-package",
+      "components": ["Component1", "Component2", "Component3"],
+      "description": "Main components imported from the primary package"
+    },
+    "secondary": [
+      {
+        "path": "icons-package",
+        "components": ["Icon1", "Icon2"],
+        "when": "Only when using icons",
+        "example": "import { Icon1 } from 'icons-package';"
+      },
+      {
+        "path": "utils-package",
+        "components": ["util1", "util2"],
+        "when": "For specific utilities",
+        "example": "import { util1 } from 'utils-package';"
+      }
+    ]
+  },
+
+  "patterns": {
+    "card": {
+      "description": "Standard card pattern",
+      "correct": "<Card><CardHeader>Title</CardHeader><CardBody>Content</CardBody></Card>",
+      "incorrect": "<div className='card'>...</div>",
+      "notes": "Always use Card components, never divs with classes"
+    },
+    "form": {
+      "description": "Form layout pattern",
+      "correct": "<Form><FormField label='Name'><Input /></FormField></Form>",
+      "incorrect": "<form><label>Name</label><input /></form>",
+      "notes": "Use Form components for proper validation and styling"
+    },
+    "grid": {
+      "description": "Grid layout pattern",
+      "correct": "<Grid cols={3} gap='space-4'>...</Grid>",
+      "incorrect": "<div style={{display: 'grid'}}>...</div>",
+      "notes": "Use Grid component with tokens for gaps"
+    }
+  },
+
+  "dos": [
+    "Use design tokens for all spacing, colors, and sizes",
+    "Import components from the official package",
+    "Follow composition patterns",
+    "Use semantic props (size='lg' not style={{fontSize: '24px'}})"
+  ],
+
+  "donts": [
+    "Don't use raw HTML elements when components exist",
+    "Don't use inline styles with pixel values",
+    "Don't import from internal/private paths",
+    "Don't mix different component libraries"
+  ],
+
+  "specialConsiderations": [
+    "Component X requires prop Y to be set when using feature Z",
+    "Always wrap Component A in Provider B",
+    "Theme must be configured before using color props"
+  ],
+
+  "commonMistakes": [
+    {
+      "issue": "Using HTML div instead of View/Box component",
+      "wrong": "<div>Content</div>",
+      "correct": "<View>Content</View>",
+      "explanation": "Native HTML elements don't respect the design system"
+    },
+    {
+      "issue": "Raw pixel values in spacing",
+      "wrong": "margin: '10px'",
+      "correct": "margin='space-2'",
+      "explanation": "Design tokens ensure consistent spacing"
+    }
+  ],
+
+  "aiInstructions": {
+    "general": [
+      "Always prefer composition over creating complex single components",
+      "Use the design system's patterns, don't create custom solutions",
+      "When unsure, check the examples in this file"
+    ],
+    "codeGeneration": [
+      "Start with imports from the main package",
+      "Use proper TypeScript types when available",
+      "Include accessibility props (aria-labels, etc.)"
+    ],
+    "testing": [
+      "Generated components should be testable",
+      "Include data-testid props where appropriate"
+    ]
+  },
+
+  "examplePrompts": {
+    "good": [
+      "Create a card with title and description",
+      "Build a two-column layout with cards",
+      "Make a form with name and email fields"
+    ],
+    "clarificationNeeded": [
+      "Make it pretty -> Specify which components and layout",
+      "Add some buttons -> Specify button types and actions",
+      "Create a dashboard -> Break down into specific components"
+    ]
+  }
+}

package/templates/story-ui-considerations.md

@@ -0,0 +1,109 @@
+# Story UI AI Considerations
+
+This file contains specific instructions and considerations for the AI when generating stories for your component library. You can customize this file to match your design system's requirements.
+
+## Component Library Details
+
+**Library Name**: [Your Component Library]
+**Import Path**: `[your-import-path]`
+
+## Core Principles
+
+<!-- Add the fundamental principles of your design system -->
+-
+-
+-
+
+## Component Usage Rules
+
+### Layout Components
+<!-- Describe how layouts should be structured -->
+-
+-
+-
+
+### Spacing and Sizing
+<!-- Explain your spacing/sizing system -->
+-
+-
+-
+
+### Color System
+<!-- Describe how colors should be used -->
+-
+-
+-
+
+## Import Guidelines
+
+### Primary Imports
+<!-- List components that should be imported from the main package -->
+```javascript
+import { Component1, Component2 } from 'main-package';
+```
+
+### Secondary Imports
+<!-- List any additional packages and when to use them -->
+```javascript
+// Only for specific use cases:
+import { SpecialUtil } from 'secondary-package';
+```
+
+## Common Patterns
+
+### Card Layouts
+```jsx
+// Example of proper card structure
+```
+
+### Form Layouts
+```jsx
+// Example of proper form structure
+```
+
+### Grid Layouts
+```jsx
+// Example of proper grid structure
+```
+
+## Do's and Don'ts
+
+### ✅ DO
+-
+-
+-
+
+### ❌ DON'T
+-
+-
+-
+
+## Special Considerations
+
+<!-- Add any library-specific quirks or important notes -->
+-
+-
+-
+
+## Examples of Correct Usage
+
+### Example 1: [Component Name]
+```jsx
+// Show a complete, correct example
+```
+
+### Example 2: [Component Name]
+```jsx
+// Show another complete, correct example
+```
+
+## Error Patterns to Avoid
+
+<!-- List common mistakes and how to avoid them -->
+1. **Wrong**: `<div>...</div>`
+   **Right**: `<View>...</View>`
+   **Why**: [Explanation]
+
+2. **Wrong**: `style={{margin: '10px'}}`
+   **Right**: `margin="size-100"`
+   **Why**: [Explanation]

package/templates/story-ui-docs-README.md

@@ -0,0 +1,55 @@
+# Design System Documentation
+
+This directory is automatically discovered by Story UI to enhance AI-generated stories with your design system's specific guidelines, tokens, and patterns.
+
+## Directory Structure
+
+Organize your documentation into these categories:
+
+### `guidelines/`
+Design principles, accessibility rules, brand guidelines
+- `accessibility.md` - WCAG compliance, screen reader support
+- `brand-guidelines.md` - Logo usage, voice, tone
+- `responsive-design.md` - Breakpoints, mobile-first rules
+
+### `tokens/`
+Design tokens in JSON or Markdown format
+- `colors.json` - Color palette, semantic colors
+- `spacing.md` - Spacing scale, grid system
+- `typography.json` - Font families, sizes, line heights
+- `shadows.json` - Elevation, shadow tokens
+
+### `components/`
+Component-specific documentation
+- `button.md` - Button variants, usage, examples
+- `forms.md` - Form components, validation patterns
+- `navigation.md` - Menu, breadcrumb patterns
+
+### `patterns/`
+Layout and interaction patterns
+- `forms.md` - Form layout best practices
+- `cards.md` - Card designs and usage
+- `data-tables.md` - Table patterns, sorting, filtering
+
+## Supported Formats
+
+- **Markdown** (`.md`) - Rich documentation with examples
+- **JSON** (`.json`) - Structured data like design tokens
+- **HTML** (`.html`) - Complex documentation
+- **Text** (`.txt`) - Simple notes and guidelines
+
+## Usage
+
+1. Add documentation files to the appropriate subdirectories
+2. Story UI automatically discovers and loads all files
+3. Documentation content enhances AI story generation
+4. Files are categorized based on their directory location
+
+## Tips
+
+- Use clear, descriptive filenames
+- Include examples and code snippets in Markdown files
+- Structure JSON files with consistent naming conventions
+- Keep documentation up-to-date with your design system
+
+When you prompt Story UI to generate stories, this documentation will be automatically included in the AI context to create more accurate, design-system-compliant components.

package/dist/scripts/test-validation.js

@@ -1,81 +0,0 @@
-#!/usr/bin/env ts-node
-import { validateStoryCode, extractAndValidateCodeBlock } from '../story-generator/validateStory.js';
-console.log('🧪 Testing Story UI validation improvements...\n');
-// Test 1: Truncated JSX code
-const truncatedJSX = `import React from 'react';
-import { Card, Button, Input } from 'antd';
-
-export default {
-  title: 'Test/Truncated',
-  component: Card,
-};
-
-export const Default = {
-  args: {
-    children: (
-      <div>
-        <Card>
-          <h1>Hello World</h1>
-          <Input placeholder="Enter text" />
-          <Button type="primary">Submit</Button>
-          <div>
-            <span>Nested content that gets`;
-console.log('Test 1: Truncated JSX code');
-const result1 = validateStoryCode(truncatedJSX);
-console.log('Valid:', result1.isValid);
-console.log('Errors:', result1.errors.length);
-if (result1.fixedCode) {
-    console.log('✅ Code was automatically fixed!');
-    console.log('Fixed code ends with:', result1.fixedCode.slice(-100));
-}
-console.log('\n---\n');
-// Test 2: Missing closing braces
-const missingBraces = `import React from 'react';
-import { Card } from 'antd';
-
-export default {
-  title: 'Test/MissingBraces',
-  component: Card,
-};
-
-export const Default = {
-  args: {
-    children: (
-      <Card>
-        <h1>Test</h1>
-      </Card>
-    )
-  }`;
-console.log('Test 2: Missing closing braces');
-const result2 = validateStoryCode(missingBraces);
-console.log('Valid:', result2.isValid);
-console.log('Errors:', result2.errors.length);
-if (result2.fixedCode) {
-    console.log('✅ Code was automatically fixed!');
-}
-console.log('\n---\n');
-// Test 3: AI response with code block
-const aiResponse = `\`\`\`typescript
-import React from 'react';
-import { Card, Table } from 'antd';
-
-export default {
-  title: 'Test/Dashboard',
-  component: Card,
-};
-
-export const Default = {
-  args: {
-    children: (
-      <div>
-        <Card title="Dashboard">
-          <Table dataSource={[]} columns={[]} />
-\`\`\``;
-console.log('Test 3: AI response extraction and validation');
-const result3 = extractAndValidateCodeBlock(aiResponse);
-console.log('Valid:', result3.isValid);
-console.log('Errors:', result3.errors.length);
-if (result3.fixedCode) {
-    console.log('✅ Code was automatically fixed!');
-}
-console.log('\n✨ Validation testing complete!');

package/dist/test-storybooks/chakra-test/src/components/index.js

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export { Card } from './Card';
-export { Input } from './Input';

package/dist/test-storybooks/custom-design-test/src/components/index.js

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export { Card } from './Card';
-export { Input } from './Input';

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../index.ts","../story-ui.config.loader.ts","../story-ui.config.ts","../cli/index.ts","../cli/setup.ts","../mcp-server/index.ts","../mcp-server/routes/claude.ts","../mcp-server/routes/components.ts","../mcp-server/routes/generatestory.ts","../mcp-server/routes/memorystories.ts","../mcp-server/routes/storysync.ts","../story-generator/componentdiscovery.ts","../story-generator/configloader.ts","../story-generator/generatestory.ts","../story-generator/gitignoremanager.ts","../story-generator/inmemorystoryservice.ts","../story-generator/productiongitignoremanager.ts","../story-generator/promptgenerator.ts","../story-generator/storysync.ts"],"version":"5.8.3"}