@tpitre/story-ui 3.10.5 → 3.10.6

package/dist/story-generator/framework-adapters/angular-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,cAAe,SAAQ,oBAAoB;IACtD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAa;IACzC,QAAQ,CAAC,IAAI,aAAa;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAkIT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAgK/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA4B1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAkBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA2BrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}
+{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,cAAe,SAAQ,oBAAoB;IACtD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAa;IACzC,QAAQ,CAAC,IAAI,aAAa;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAsJT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAmL/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA4B1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAkBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA+CrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}

package/dist/story-generator/framework-adapters/angular-adapter.js

@@ -45,6 +45,26 @@ CRITICAL RULES:
 - Use Angular template syntax in render functions
 - Event bindings use (event) syntax
 
+TYPESCRIPT STRICT MODE COMPATIBILITY (CRITICAL):
+- NEVER use "this.property" syntax in render functions or templates
+- NEVER try to manage state with "this.isEnabled", "this.clickCount++", etc.
+- Angular Storybook stories should be STATELESS - show component states via args
+- For interactive demos, use argTypes with action: 'actionName' for event logging
+- The args object has an index signature - direct property access causes TS4111 errors
+
+CORRECT PATTERNS FOR INTERACTIVITY:
+1. For events - use argTypes actions, NOT state management:
+   argTypes: { onChange: { action: 'changed' } }
+
+2. For showing states - create separate stories:
+   export const Enabled: Story = { args: { checked: true } };
+   export const Disabled: Story = { args: { checked: false } };
+
+3. NEVER generate code like:
+   - this.isEnabled = event.checked; // TS4111 ERROR
+   - this.clickCount++; // TS4111 ERROR
+   - props.someValue = newValue; // Will not work
+
 Example structure (Standalone Components):
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/angular';
@@ -231,7 +251,7 @@ export const ProductCard: Story = {
 };
 \`\`\`
 
-### With Event Handling
+### With Event Handling (STATELESS - CORRECT PATTERN)
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/angular';
 import { applicationConfig } from '@storybook/angular';
@@ -246,14 +266,16 @@ const meta: Meta<ButtonComponent> = {
     }),
   ],
   argTypes: {
-    // Use argTypes with action for event logging instead of addon-actions
+    // Use argTypes with action for event logging - DO NOT manage state
     onClick: { action: 'clicked' },
+    onToggle: { action: 'toggled' },
   },
 };
 
 export default meta;
 type Story = StoryObj<ButtonComponent>;
 
+// CORRECT: Events logged via argTypes actions
 export const WithClick: Story = {
   render: (args) => ({
     props: args,
@@ -264,6 +286,23 @@ export const WithClick: Story = {
     \`,
   }),
 };
+
+// CORRECT: Show different states via separate stories
+export const EnabledState: Story = {
+  args: { disabled: false },
+};
+
+export const DisabledState: Story = {
+  args: { disabled: true },
+};
+
+// WRONG - DO NOT DO THIS (causes TS4111 error):
+// export const Interactive: Story = {
+//   render: (args) => ({
+//     props: { ...args, isEnabled: false },
+//     template: \`<mat-slide-toggle (change)="this.isEnabled = $event.checked">\`,
+//   }),
+// };
 \`\`\`
 
 ### With Forms
@@ -422,6 +461,22 @@ export const Default: Story = {
             !storyContent.includes('component:')) {
             errors.push('Missing moduleMetadata or applicationConfig decorator');
         }
+        // Check for TS4111-causing patterns (noPropertyAccessFromIndexSignature)
+        // These patterns cause errors when strict TypeScript is enabled
+        const ts4111Patterns = [
+            /this\.\w+\s*=\s*\w+/g, // this.property = value
+            /this\.\w+\+\+/g, // this.property++
+            /this\.\w+--/g, // this.property--
+            /\+\+this\.\w+/g, // ++this.property
+            /--this\.\w+/g, // --this.property
+        ];
+        for (const pattern of ts4111Patterns) {
+            if (pattern.test(storyContent)) {
+                errors.push('Angular stories should not use "this.property" state management. ' +
+                    'Use args-based patterns instead. This causes TS4111 errors with strict TypeScript.');
+                break;
+            }
+        }
         return {
             valid: errors.length === 0,
             errors,

package/dist/story-generator/storyValidator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storyValidator.d.ts","sourceRoot":"","sources":["../../story-generator/storyValidator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM,GAAG,eAAe,EAAE,CA+CrE"}
+{"version":3,"file":"storyValidator.d.ts","sourceRoot":"","sources":["../../story-generator/storyValidator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM,GAAG,eAAe,EAAE,CAmDrE"}

package/dist/story-generator/storyValidator.js

@@ -13,6 +13,10 @@ export function validateStory(storyContent) {
         { pattern: /slot:\s*['"][^'"]+['"]/i, message: 'The slot property in render functions does not work in Svelte Storybook. Use simple args-based stories instead.' },
         // Catch abbreviated Material icon names that will render as text instead of icons
         { pattern: /<mat-icon>\s*(fav|ho|de|se|sta|che|add|rem|edi|sav|can|men|clo|sea)\s*<\/mat-icon>/i, message: 'Material icon name appears to be abbreviated. Use full icon names: "favorite" (not "fav"), "home" (not "ho"), "delete" (not "de"), "settings" (not "se"), etc.' },
+        // Catch Angular TS4111 patterns - "this.property" state management in render functions
+        { pattern: /this\.\w+\s*=\s*\$?event\./i, message: 'Do not use "this.property = event.value" in Angular stories. This causes TS4111 errors. Use argTypes with action property for events and create separate stories for different states.' },
+        { pattern: /this\.\w+\+\+/i, message: 'Do not use "this.property++" in Angular stories. This causes TS4111 errors. Use argTypes with action property for events instead of managing state.' },
+        { pattern: /this\.\w+--/i, message: 'Do not use "this.property--" in Angular stories. This causes TS4111 errors. Use argTypes with action property for events instead of managing state.' },
     ];
     lines.forEach((line, index) => {
         for (const { pattern, message } of forbiddenPatterns) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "3.10.5",
+  "version": "3.10.6",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",