@tpitre/story-ui 3.10.2 → 3.10.3

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;IA0HT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA+J/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;IA0HT,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"}

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

@@ -227,7 +227,6 @@ export const ProductCard: Story = {
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/angular';
 import { applicationConfig } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
 import { ButtonComponent } from 'your-library';
 
 const meta: Meta<ButtonComponent> = {
@@ -238,16 +237,18 @@ const meta: Meta<ButtonComponent> = {
       providers: [],
     }),
   ],
+  argTypes: {
+    // Use argTypes with action for event logging instead of addon-actions
+    onClick: { action: 'clicked' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<ButtonComponent>;
 
 export const WithClick: Story = {
-  render: () => ({
-    props: {
-      onClick: action('button-click'),
-    },
+  render: (args) => ({
+    props: args,
     template: \`
       <app-button (click)="onClick($event)" variant="primary">
         Click me

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

@@ -1 +1 @@
-{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-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,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,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;IA8GT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAuJ/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAiDzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}
+{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-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,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,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;IAmGT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAyI/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAiDzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}

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

@@ -28,43 +28,40 @@ Use ONLY the Svelte components from the ${componentSystemName} listed below.
 
 MANDATORY IMPORTS - First lines of every story file:
 1. import type { Meta, StoryObj } from '@storybook/svelte';
-2. import ComponentName from '${config.importPath || 'your-library'}/ComponentName.svelte';
+2. import { ComponentName } from '${config.importPath || 'flowbite-svelte'}';
 
-SVELTE STORY FORMAT:
-- Import .svelte files directly
+SVELTE STORY FORMAT (CSF 3.0):
+- Use named imports from flowbite-svelte (NOT default imports from .svelte files)
 - Props are passed via args object
-- Use render function for complex templates
+- Use render function ONLY for multiple components or complex layouts
 
-STORY STRUCTURE (CSF 3.0):
+STORY STRUCTURE:
 - Meta object with component, title, and parameters
-- Stories use args for simple prop passing
-- Use render for component composition
+- Stories use args for prop passing
+- Keep stories simple - avoid complex render functions when possible
 
 CRITICAL RULES:
-- Import Svelte components (default export from .svelte files)
-- For slots, use render with a wrapper component
-- Events use on: directive in Svelte templates
+- Import using named exports: import { Button, Card } from 'flowbite-svelte';
+- DO NOT use 'slot' property in render functions - it does NOT work
+- DO NOT use 'children' in args
+- For components that need text content, use the component's text/label prop if available
+- For button text, most Flowbite components accept text as a prop or the component handles it
 
-CRITICAL - SVELTE SLOT CONTENT:
-- Svelte components use SLOTS for content, NOT children props
-- Always use render function with 'slot' property for text/content
-- Never use 'children' in args - it will cause runtime errors
-
-Example structure:
+SIMPLE EXAMPLE (PREFERRED):
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { Button } from 'your-library';
+import { Button } from 'flowbite-svelte';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  parameters: { layout: 'centered' },
   argTypes: {
-    variant: {
+    color: {
       control: 'select',
-      options: ['primary', 'secondary', 'ghost'],
+      options: ['primary', 'blue', 'alternative', 'dark', 'light', 'green', 'red'],
     },
-    onclick: { action: 'clicked' },
   },
 };
 
@@ -73,201 +70,179 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    variant: 'primary',
+    color: 'primary',
   },
-  render: (args) => ({
+};
+
+export const AllColors: Story = {
+  render: () => ({
     Component: Button,
-    props: args,
-    slot: 'Click me',
+    props: { color: 'blue' },
   }),
 };
 \`\`\`
 
-For stories with slots (using wrapper component):
-\`\`\`svelte
-<!-- ButtonWithIcon.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Button from 'your-library/Button.svelte';
-  import Icon from 'your-library/Icon.svelte';
-
-  export const meta: Meta<Button> = {
-    title: 'Components/Button/WithIcon',
-    component: Button,
-  };
-</script>
-
-<script lang="ts">
-  import { Story } from '@storybook/svelte';
-</script>
-
-<Story name="With Icon">
-  <Button variant="primary">
-    <Icon slot="icon" name="star" />
-    Starred
-  </Button>
-</Story>
+FOR MULTIPLE COMPONENTS (use render with template):
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { ButtonGroup, Button } from 'flowbite-svelte';
+
+const meta: Meta<ButtonGroup> = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// For simple button groups, just show the component
+export const Default: Story = {
+  args: {},
+};
 \`\`\`
 
 SVELTE TEMPLATE SYNTAX:
 - Props: property={value}
-- Events: on:event={handler}
+- Events: onclick={handler} (Svelte 5 syntax, NOT on:click)
 - Two-way binding: bind:value
 - Conditionals: {#if condition}...{/if}
 - Loops: {#each items as item}...{/each}
 
-SLOTS:
-- Default slot: Content between tags
-- Named slots: <span slot="name">content</span>
-- Slot props: let:prop
-
 ${this.getCommonRules()}`;
     }
     generateExamples(config) {
-        const lib = config.importPath || 'your-library';
+        const lib = config.importPath || 'flowbite-svelte';
         return `
-## Example Stories for Svelte
+## Example Stories for Svelte (CSF 3.0 Format)
 
-### TypeScript Stories File
+### Simple Component Story (PREFERRED)
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { Button } from 'your-library';
+import { Button } from '${lib}';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  parameters: { layout: 'centered' },
   argTypes: {
-    variant: {
+    color: {
       control: 'select',
-      options: ['primary', 'secondary', 'ghost'],
+      options: ['primary', 'blue', 'alternative', 'dark', 'light', 'green', 'red'],
     },
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
     },
-    onclick: { action: 'clicked' },
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// IMPORTANT: Use render with slot property for content
-export const Default: Story = {
+export const Primary: Story = {
   args: {
-    variant: 'primary',
-    size: 'medium',
+    color: 'primary',
+    size: 'md',
   },
-  render: (args) => ({
-    Component: Button,
-    props: args,
-    slot: 'Button',
-  }),
 };
 
 export const Disabled: Story = {
   args: {
-    variant: 'primary',
+    color: 'primary',
     disabled: true,
   },
-  render: (args) => ({
+};
+
+export const AllSizes: Story = {
+  render: () => ({
     Component: Button,
-    props: args,
-    slot: 'Disabled',
+    props: { color: 'blue', size: 'lg' },
   }),
 };
 \`\`\`
 
-### Svelte Stories File (for complex templates)
-\`\`\`svelte
-<!-- Card.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Card from '${lib}/Card.svelte';
-  import Button from 'your-library/Button.svelte';
-  import Text from '${lib}/Text.svelte';
-
-  export const meta: Meta<Card> = {
-    title: 'Components/Card',
-    component: Card,
-  };
-</script>
-
-<script lang="ts">
-  import { Story, Template } from '@storybook/svelte';
-</script>
-
-<Story name="Product Card">
-  <Card style="width: 300px">
-    <img
-      slot="media"
-      src="https://picsum.photos/300/200"
-      alt="Product"
-    />
-    <Text slot="title" variant="heading">Product Name</Text>
-    <Text>$99.00</Text>
-    <Button slot="actions" variant="primary">Add to Cart</Button>
-  </Card>
-</Story>
-
-<Story name="Simple Card">
-  <Card>
-    <Text>Simple card content</Text>
-  </Card>
-</Story>
-\`\`\`
+### Card Component Story
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { Card } from '${lib}';
 
-### With Reactive State
-\`\`\`svelte
-<!-- Input.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Input from '${lib}/Input.svelte';
-
-  export const meta: Meta<Input> = {
-    title: 'Components/Input',
-    component: Input,
-  };
-</script>
-
-<script lang="ts">
-  import { Story } from '@storybook/svelte';
-  let value = '';
-</script>
-
-<Story name="Controlled">
-  <div>
-    <Input bind:value placeholder="Type here..." />
-    <p>Value: {value}</p>
-  </div>
-</Story>
+const meta: Meta<Card> = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    class: 'max-w-sm',
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    img: 'https://picsum.photos/300/200',
+    class: 'max-w-sm',
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    horizontal: true,
+    class: 'max-w-xl',
+  },
+};
 \`\`\`
 
-### With Event Handling
+### Alert Component Story
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { action } from '@storybook/addon-actions';
-import { Button } from 'your-library';
+import { Alert } from '${lib}';
 
-const meta: Meta<Button> = {
-  title: 'Components/Button',
-  component: Button,
+const meta: Meta<Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'blue', 'red', 'green', 'yellow', 'dark'],
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const WithClickHandler: Story = {
+export const Info: Story = {
   args: {
-    variant: 'primary',
-    onclick: action('button-clicked'),
+    color: 'blue',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    color: 'green',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    color: 'yellow',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    color: 'red',
   },
-  render: (args) => ({
-    Component: Button,
-    props: args,
-    slot: 'Click me',
-  }),
 };
 \`\`\`
 `;

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,CA2CrE"}
+{"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,CA6CrE"}

package/dist/story-generator/storyValidator.js

@@ -7,8 +7,10 @@ export function validateStory(storyContent) {
         { pattern: /UNSAFE_style\s*=\s*\{/i, message: 'The `UNSAFE_style` prop is strictly forbidden. Do not use it for any reason.' },
         { pattern: /UNSAFE_className\s*=\s*['"]/i, message: 'The `UNSAFE_className` prop is forbidden.' },
         { pattern: /<Text\s+as\s*=\s*["']h[1-6]["']/i, message: 'Text component does not support heading elements (h1-h6) in the "as" prop. Use Heading component instead.' },
-        // Remove overly strict rules - divs, imgs, and inline styles are fine in moderation
-        // Only check for actual syntax errors or patterns that would break Storybook
+        // Catch imports that don't exist in production environments
+        { pattern: /from\s+['"]@storybook\/addon-actions['"]/i, message: 'Do not import from @storybook/addon-actions. Use argTypes with action property instead: argTypes: { onClick: { action: "clicked" } }' },
+        // Catch Svelte slot property which doesn't work in modern Storybook
+        { pattern: /slot:\s*['"][^'"]+['"]/i, message: 'The slot property in render functions does not work in Svelte Storybook. Use simple args-based stories instead.' },
     ];
     lines.forEach((line, index) => {
         for (const { pattern, message } of forbiddenPatterns) {

package/package.json

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