@aurelia/storybook 1.0.0 → 1.0.2

package/README.md

@@ -2,13 +2,13 @@
 
 > **Note:** Storybook support is currently in an early stage, and there may be bugs, issues, or unsupported features in this plugin. The intention is to make this plugin more production-ready when Aurelia 2 reaches stable release.
 
-This package provides an integration between Aurelia 2 and Storybook 8 using Vite or Webpack. It lets you write and render Aurelia 2 components as Storybook stories with full support for Storybook controls, actions, and interactive testing.
+This package provides an integration between Aurelia 2 and Storybook 9 using Vite or Webpack. It lets you write and render Aurelia 2 components as Storybook stories with full support for Storybook controls, actions, and interactive testing.
 
 ## Features
 
 - **Vite & Webpack Support**: Works with both Vite (via `@storybook/builder-vite`) and Webpack 5 (via `@storybook/builder-webpack5`).
 - **Aurelia Enhancement**: Renders Aurelia 2 components using Aurelia's `enhance()` API.
-- **Storybook 8 Compatibility**: Fully compatible with Storybook 8's new rendering API.
+- **Storybook 9 Compatibility**: Fully compatible with Storybook 9's new rendering API.
 - **Arg & Action Support**: Use story args and actions as you would with any Storybook story.
 
 ## Installation
@@ -22,7 +22,13 @@ npm install --save-dev @aurelia/storybook
 Also, make sure to have the required dependencies installed in your project:
 
 ```bash
-npm install --save-dev @storybook/addons @storybook/core-events @storybook/builder-vite @storybook/core-common @storybook/preview-api @storybook/types
+npm install --save-dev storybook @storybook/builder-vite
+```
+
+For testing functionality, you may also want to install:
+
+```bash
+npm install --save-dev @storybook/test @storybook/addon-actions
 ```
 
 > **Tip:** Check your existing Aurelia 2 app for already installed versions. The peer dependencies are expected to be compatible with Aurelia 2 beta releases (see `package.json` for version details).
@@ -43,16 +49,14 @@ To integrate Aurelia 2 with your Storybook instance, follow these steps:
         Create or update your `.storybook/main.ts` file with the following contents:
 
         ```typescript
-        import type { StorybookConfig } from '@storybook/core-common';
-        import { mergeConfig } from 'vite';
+        import type { StorybookConfig } from 'storybook/internal/types';
+        import { mergeConfig, type InlineConfig } from 'vite';
 
-        const config: StorybookConfig & { viteFinal?: (config: any, options: any) => any } = {
+        const config: StorybookConfig & { viteFinal?: (config: InlineConfig, options: { configType: string }) => InlineConfig | Promise<InlineConfig> } = {
           stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
           addons: [
-              // Addons like:
-              // '@storybook/addon-links',
-              // '@storybook/addon-essentials',
-              // '@storybook/addon-interactions'
+              // Additional addons (essentials are now built into Storybook 9 core):
+              '@storybook/addon-links'
           ],
           framework: {
             name: '@aurelia/storybook',
@@ -73,7 +77,7 @@ To integrate Aurelia 2 with your Storybook instance, follow these steps:
           },
         };
 
-        export default config as any;
+        export default config;
         ```
 
     -   **.storybook/preview.ts**
@@ -85,21 +89,19 @@ To integrate Aurelia 2 with your Storybook instance, follow these steps:
         export { render, renderToCanvas } from '@aurelia/storybook';
         ```
 
-    > **Note:** Addons such as `@storybook/addon-links`, `@storybook/addon-essentials`, and `@storybook/addon-interactions` are supported by installing them and adding them to the `addons` array in your configuration.
+    > **Note:** Essential features like actions, controls, backgrounds, and viewport are now built into Storybook 9 core and don't need to be installed separately. However, if you need to use the `action()` function in your stories (for programmatic actions), you may still need to install `@storybook/addon-actions`. Additional addons like `@storybook/addon-links` can be installed and added to the `addons` array in your configuration.
 
     ### Using with Webpack
 
     If you prefer to use Webpack instead of Vite, update your `.storybook/main.ts` configuration:
 
     ```typescript
-    import type { StorybookConfig } from '@storybook/core-common';
+    import type { StorybookConfig } from 'storybook/internal/types';
 
     const config: StorybookConfig = {
       stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
       addons: [
-        '@storybook/addon-webpack5-compiler-swc',
-        '@storybook/addon-links',
-        '@storybook/addon-essentials'
+        '@storybook/addon-links'
       ],
       framework: {
         name: '@aurelia/storybook',
@@ -132,14 +134,14 @@ Aurelia 2 stories are written similarly to standard Storybook stories, with a fe
 
 ```typescript
 import { HelloWorld } from '../hello-world';
-import { action } from '@storybook/addon-actions';
-import { userEvent, within } from '@storybook/testing-library';
+import { fn } from '@storybook/test';
+import { userEvent, within } from '@storybook/test';
 
 const meta = {
   title: 'Example/HelloWorld',
   component: HelloWorld,
-  render: (args) => ({
-    template: <hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>,
+  render: () => ({
+    template: `<hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>`,
   }),
   argTypes: {
     message: { control: 'text' },
@@ -152,16 +154,16 @@ export default meta;
 export const DefaultHelloWorld = {
   args: {
     message: "Hello from Storybook!",
-    onIncrement: action('increment')
+    onIncrement: fn()
   }
 };
 
 export const InteractiveHelloWorld = {
   args: {
     message: "Try clicking the button!",
-    onIncrement: action('increment')
+    onIncrement: fn()
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
     // Simulate three button clicks
@@ -173,13 +175,13 @@ export const InteractiveHelloWorld = {
 
 export const NoArgs = {
   render: () => ({
-    template: <hello-world></hello-world>
+    template: `<hello-world></hello-world>`
   })
 };
 
 export const WithCustomTemplate = {
-  render: (args) => ({
-    template: <hello-world message.bind="message">Click me!</hello-world>
+  render: () => ({
+    template: `<hello-world message.bind="message">Click me!</hello-world>`
   }),
   args: {
     message: "This is a custom message"
@@ -214,13 +216,7 @@ If you wish to contribute or modify the integration:
    npm run watch
    ```
 
-3. **Link the package** in your Aurelia project:
-
-   ```bash
-   npm link @aurelia/storybook
-   ```
-
-4. **Run Storybook** in your local Aurelia application to see the integration in action.
+3. **Run Storybook** in your local application to see the integration in action.
 
 ## Contributing
 

package/__tests__/render.test.ts

@@ -1,4 +1,4 @@
-import { STORY_CHANGED } from '@storybook/core-events';
+import { STORY_CHANGED } from 'storybook/internal/core-events';
 import {
   render,
   renderToCanvas,

package/apps/hello-world/.storybook/main.ts

@@ -1,12 +1,10 @@
-import type { StorybookConfig } from '@storybook/core-common';
-import { mergeConfig } from 'vite';
+import type { StorybookConfig } from 'storybook/internal/types';
+import { mergeConfig, type InlineConfig } from 'vite';
 
-const config: StorybookConfig & { viteFinal?: (config: any, options: any) => any } = {
+const config: StorybookConfig & { viteFinal?: (config: InlineConfig, options: { configType: string }) => InlineConfig | Promise<InlineConfig> } = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-links'
   ],
   framework: {
     name: '@aurelia/storybook',
@@ -16,15 +14,37 @@ const config: StorybookConfig & { viteFinal?: (config: any, options: any) => any
     builder: '@storybook/builder-vite',
   },
   viteFinal: async (viteConfig) => {
-    viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
-    viteConfig.optimizeDeps.exclude = viteConfig.optimizeDeps.exclude || [];
-    if (!viteConfig.optimizeDeps.exclude.includes('@aurelia/runtime-html')) {
-      viteConfig.optimizeDeps.exclude.push('@aurelia/runtime-html');
+    // Initialize optimizeDeps and exclude array
+    if (!viteConfig.optimizeDeps) {
+      viteConfig.optimizeDeps = {};
     }
+    if (!viteConfig.optimizeDeps.exclude) {
+      viteConfig.optimizeDeps.exclude = [];
+    }
+    
+    // Exclude Aurelia dependencies from pre-bundling, but allow React for Storybook
+    const excludeList = [
+      '@aurelia/runtime-html'
+    ];
+    
+    excludeList.forEach(dep => {
+      if (viteConfig.optimizeDeps?.exclude && !viteConfig.optimizeDeps.exclude.includes(dep)) {
+        viteConfig.optimizeDeps.exclude.push(dep);
+      }
+    });
+
     return mergeConfig(viteConfig, {
-      // ...any additional Vite configuration
+      define: {
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+      },
+      // Allow React to be bundled for Storybook's theming system
+      resolve: {
+        alias: {
+          // Ensure React is properly resolved
+        }
+      }
     });
   },
 };
 
-export default config as any;
+export default config;