@tpitre/story-ui 2.1.5 → 2.3.0

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

@@ -0,0 +1,316 @@
+/**
+ * React Framework Adapter
+ *
+ * Generates Storybook stories for React components.
+ * Supports CSF 3.0 format with TypeScript.
+ */
+import { BaseFrameworkAdapter } from './base-adapter.js';
+export class ReactAdapter extends BaseFrameworkAdapter {
+    constructor() {
+        super(...arguments);
+        this.type = 'react';
+        this.name = 'React';
+        this.supportedStoryFrameworks = [
+            'storybook-react',
+            'ladle',
+            'chromatic',
+        ];
+        this.defaultExtension = '.stories.tsx';
+    }
+    generateSystemPrompt(config, options) {
+        if (config.systemPrompt) {
+            return config.systemPrompt;
+        }
+        const componentSystemName = config.componentPrefix
+            ? `${config.componentPrefix.replace(/^[A-Z]+/, '')} design system`
+            : 'component library';
+        const typescript = options?.typescript !== false;
+        // FIX #2: Auto-detect Chakra UI v3 for provider requirements
+        const isChakraUI = this.isChakraUIProject(config);
+        let chakraInstructions = '';
+        if (isChakraUI) {
+            chakraInstructions = `
+
+CHAKRA UI v3 CONFIGURATION (CRITICAL):
+Chakra UI v3 requires ChakraProvider for proper theming and styling.
+
+OPTION 1 (Recommended): Configure in .storybook/preview.tsx (project-wide):
+\`\`\`tsx
+// .storybook/preview.tsx
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+
+export const decorators = [
+  (Story) => (
+    <ChakraProvider value={defaultSystem}>
+      <Story />
+    </ChakraProvider>
+  ),
+];
+\`\`\`
+
+OPTION 2: Wrap individual stories (if preview.tsx not configured):
+\`\`\`tsx
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+
+export const MyStory: Story = {
+  decorators: [
+    (Story) => (
+      <ChakraProvider value={defaultSystem}>
+        <Story />
+      </ChakraProvider>
+    ),
+  ],
+};
+\`\`\`
+
+IMPORTANT: Without ChakraProvider, you will see "useContext returned undefined" errors.
+`;
+        }
+        return `You are an expert React developer creating Storybook stories using CSF 3.0 format.
+Use ONLY the React components from the ${componentSystemName} listed below.
+
+MANDATORY IMPORTS - First lines of every story file:
+1. import React from 'react';
+2. import type { Meta, StoryObj } from '@storybook/react';
+3. import { ComponentName } from '${config.importPath || 'your-library'}';
+
+${typescript ? 'Use TypeScript with proper type annotations.' : 'Use JavaScript.'}
+${chakraInstructions}
+COMPONENT IMPORT RULES:
+- ONLY import components listed in the "Available Components" section
+- Use the EXACT import path shown after each component name
+- Components not in the list DO NOT EXIST
+
+STORY STRUCTURE (CSF 3.0):
+- Use ES modules: export default meta; NOT module.exports
+- Define Meta object with component, title, and parameters
+- Export named stories as StoryObj<typeof ComponentName>
+
+CRITICAL RULES:
+- NEVER pass children through args - use render functions instead
+- For layouts with multiple components, omit component from meta
+- Use render: (args) => <Component {...args} /> for custom rendering
+
+Example structure:
+\`\`\`tsx
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '${config.importPath || 'your-library'}';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: { variant: 'primary', children: 'Click me' },
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <Button variant="primary">
+      <Icon /> Click me
+    </Button>
+  ),
+};
+\`\`\`
+
+${this.getCommonRules()}`;
+    }
+    /**
+     * FIX #2: Detect if the project uses Chakra UI v3
+     */
+    isChakraUIProject(config) {
+        const importPath = config.importPath || '';
+        return (importPath.includes('@chakra-ui') ||
+            importPath === 'chakra-ui' ||
+            config.componentPrefix === 'Chakra');
+    }
+    generateExamples(config) {
+        const lib = config.importPath || 'your-library';
+        return `
+## Example Stories
+
+### Single Component Story
+\`\`\`tsx
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '${lib}';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: 'Button' },
+};
+
+export const Primary: Story = {
+  args: { variant: 'primary', children: 'Primary Button' },
+};
+\`\`\`
+
+### Layout Story (Multiple Components)
+\`\`\`tsx
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, Button, Text } from '${lib}';
+
+const meta: Meta = {
+  title: 'Examples/Card Layout',
+  parameters: { layout: 'padded' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const ProductCard: Story = {
+  render: () => (
+    <Card style={{ width: 300 }}>
+      <img src="https://picsum.photos/300/200" alt="Product" />
+      <Text variant="heading">Product Name</Text>
+      <Text>$99.00</Text>
+      <Button variant="primary">Add to Cart</Button>
+    </Card>
+  ),
+};
+\`\`\`
+`;
+    }
+    generateSampleStory(config, components) {
+        const lib = config.importPath || 'your-library';
+        const firstComponent = components[0];
+        if (!firstComponent) {
+            return `
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Examples/Sample',
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => <div>Sample story content</div>,
+};
+`;
+        }
+        return `
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ${firstComponent.name} } from '${lib}';
+
+const meta: Meta<typeof ${firstComponent.name}> = {
+  title: 'Components/${firstComponent.name}',
+  component: ${firstComponent.name},
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+`;
+    }
+    getStoryTemplate(options) {
+        const typescript = options?.typescript !== false;
+        const ext = typescript ? 'tsx' : 'jsx';
+        return `
+// {{componentName}}.stories.${ext}
+import React from 'react';
+${typescript ? "import type { Meta, StoryObj } from '@storybook/react';" : ''}
+import { {{componentName}} } from '{{importPath}}';
+
+const meta${typescript ? ': Meta<typeof {{componentName}}>' : ''} = {
+  title: '{{category}}/{{componentName}}',
+  component: {{componentName}},
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+${typescript ? 'type Story = StoryObj<typeof meta>;' : ''}
+
+export const Default${typescript ? ': Story' : ''} = {
+  args: {},
+};
+`;
+    }
+    /**
+     * Post-process React stories
+     */
+    postProcess(storyContent) {
+        let processed = super.postProcess(storyContent);
+        // Ensure React import is first
+        if (!processed.startsWith("import React from 'react'")) {
+            const lines = processed.split('\n');
+            const reactImportIndex = lines.findIndex(line => line.includes("import React from 'react'"));
+            if (reactImportIndex > 0) {
+                const reactImport = lines.splice(reactImportIndex, 1)[0];
+                lines.unshift(reactImport);
+                processed = lines.join('\n');
+            }
+        }
+        // Fix common issues
+        processed = processed
+            // Remove only EMPTY children in args (children: '' or children: "")
+            // The regex must require matching quotes to avoid removing valid children like children: 'Button'
+            .replace(/children:\s*['"]['"],?\s*/g, '')
+            // Fix double quotes in JSX
+            .replace(/class=/g, 'className=');
+        return processed;
+    }
+    /**
+     * Validate React story
+     */
+    validate(storyContent) {
+        const baseValidation = super.validate(storyContent);
+        const errors = [...baseValidation.errors];
+        // React-specific validations
+        if (!storyContent.includes("import React from 'react'")) {
+            errors.push("Missing 'import React from 'react'' statement");
+        }
+        if (!storyContent.includes('export default')) {
+            errors.push('Missing default export');
+        }
+        if (storyContent.includes('module.exports')) {
+            errors.push('Using CommonJS exports instead of ES modules');
+        }
+        // Check for children in args (common mistake)
+        if (/args:\s*{[^}]*children:\s*</.test(storyContent)) {
+            errors.push('JSX children should not be in args - use render function instead');
+        }
+        return {
+            valid: errors.length === 0,
+            errors,
+        };
+    }
+}
+/**
+ * Factory function
+ */
+export function createReactAdapter() {
+    return new ReactAdapter();
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Svelte Framework Adapter
+ *
+ * Generates Storybook stories for Svelte components.
+ * Supports both Svelte 4 and Svelte 5 (runes).
+ */
+import { FrameworkType, StoryFramework, StoryGenerationOptions } from './types.js';
+import { BaseFrameworkAdapter } from './base-adapter.js';
+import { StoryUIConfig } from '../../story-ui.config.js';
+import { DiscoveredComponent } from '../componentDiscovery.js';
+export declare class SvelteAdapter extends BaseFrameworkAdapter {
+    readonly type: FrameworkType;
+    readonly name = "Svelte";
+    readonly supportedStoryFrameworks: StoryFramework[];
+    readonly defaultExtension = ".stories.ts";
+    generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
+    generateExamples(config: StoryUIConfig): string;
+    generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;
+    getStoryTemplate(options?: StoryGenerationOptions): string;
+    /**
+     * Post-process Svelte stories
+     */
+    postProcess(storyContent: string): string;
+    /**
+     * Validate Svelte story
+     */
+    validate(storyContent: string): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Generate imports for Svelte components
+     */
+    generateImports(components: DiscoveredComponent[], config: StoryUIConfig): string;
+}
+/**
+ * Factory function
+ */
+export declare function createSvelteAdapter(): SvelteAdapter;
+//# sourceMappingURL=svelte-adapter.d.ts.map

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

@@ -0,0 +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;IAqGT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA0I/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;IAkBzC;;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"}