Refactor for Storybook v7

.github/workflows/release.yml

@@ -12,10 +12,10 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

README.md

@@ -32,11 +32,11 @@ yarn add --dev @storybook/testing-angular
 
 ## Setup
 
-### Storybook 6 and Component Story Format
+### Storybook 7 and Component Story Format
 
-This library requires you to be using Storybook version 6, [Component Story Format (CSF)](https://storybook.js.org/docs/angular/api/csf) and [hoisted CSF annotations](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations), which is the recommended way to write stories since Storybook 6.
+This library requires you to be using Storybook version 7, [Component Story Format (CSF)](https://storybook.js.org/docs/angular/api/csf) and [hoisted CSF annotations](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations), which is the recommended way to write stories since Storybook 7.
 
-Essentially, if you use Storybook 6 and your stories look similar to this, you're good to go!
+Essentially, if you use Storybook 7 and your stories look similar to this, you're good to go!
 
 ```ts
 // CSF: default export (meta) + named exports (stories)
@@ -82,27 +82,30 @@ import {
   createMountableStoryComponent,
 } from '@storybook/testing-angular';
 import * as stories from './button.stories'; // import all stories from the stories file
+import Meta from './button.stories';
 
 // Every component that is returned maps 1:1 with the stories, but they already contain all decorators from story level, meta level and global level.
 const { Primary, Secondary } = composeStories(stories);
 
 describe('button', () => {
   it('renders primary button with default args', () => {
-    const { component, ngModule } = createMountableStoryComponent(
-      Primary({}, {} as any)
+    const { component } = createMountableStoryComponent(
+      Primary({}, {} as any),
+      Meta.component,
     );
-    await render(component, { imports: [ngModule] });
+    await render(component);
     const buttonElement = screen.getByText(
       /Text coming from args in stories file!/i
     );
     expect(buttonElement).not.toBeNull();
   });
 
   it('renders primary button with overriden props', () => {
-    const { component, ngModule } = createMountableStoryComponent(
-      Primary({ label: 'Hello world' }, {} as any)
+    const { component } = createMountableStoryComponent(
+      Primary({ label: 'Hello world' }, {} as any),
+      Meta.component,
     ); // you can override props and they will get merged with values from the Story's args
-    await render(component, { imports: [ngModule] });
+    await render(component);
     const buttonElement = screen.getByText(/Hello world/i);
     expect(buttonElement).not.toBeNull();
   });
@@ -126,14 +129,15 @@ const Primary = composeStory(PrimaryStory, Meta);
 
 describe('button', () => {
   it('onclick handler is called', async () => {
-    const onClickSpy = jasmine.createSpyObj('EventEmitter', ['emit']);
-    const { component, ngModule } = createMountableStoryComponent(
-      Primary({ onClick: onClickSpy }, {} as any)
+    const onClickSpy = jasmine.createSpy();
+    const { component } = createMountableStoryComponent(
+      Primary({ onClick: onClickSpy }, {} as any),
+      Meta.component,
     );
-    await render(component, { imports: [ngModule] });
+    await render(component);
     const buttonElement = screen.getByText(Primary.args?.label!);
     buttonElement.click();
-    expect(onClickSpy.emit).toHaveBeenCalled();
+    expect(onClickSpy).toHaveBeenCalled();
   });
 });
 ```
@@ -149,15 +153,17 @@ import {
   createMountableStoryComponent,
 } from '@storybook/testing-angular';
 import * as stories from './button.stories';
+import Meta from './button.stories';
 
 const { Primary } = composeStories(stories);
 
 describe('button', () => {
   it('reuses args from composed story', async () => {
-    const { component, ngModule } = createMountableStoryComponent(
-      Primary({}, {} as any)
+    const { component } = createMountableStoryComponent(
+      Primary({}, {} as any),
+      Meta.component
     );
-    await render(component, { imports: [ngModule] });
+    await render(component);
     expect(screen.getByText(Primary.args?.label!)).not.toBeNull();
   });
 });

example/.gitignore

@@ -1,46 +1,42 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
-
-# profiling files
-chrome-profiler-events*.json
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 
-# misc
-/.sass-cache
+# Miscellaneous
+/.angular/cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
-documentation.json
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db

example/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/angular';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

example/.storybook/preview.ts

@@ -1,19 +1,18 @@
-// @ts-ignore
-// eslint-disable-next-line import/extensions, import/no-unresolved
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-
-// @ts-ignore
-// eslint-disable-next-line import/extensions, import/no-unresolved
-import docJson from "../documentation.json";
+import type { Preview } from '@storybook/angular';
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
 setCompodocJson(docJson);
 
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
   },
-  docs: { inlineStories: true },
-}
+};
+
+export default preview;

example/.storybook/tsconfig.json

@@ -1,20 +1,11 @@
 {
   "extends": "../tsconfig.app.json",
   "compilerOptions": {
-    "types": [
-      "node"
-    ]
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
   },
-  "exclude": [
-    "../src/test.ts",
-    "../src/**/*.spec.ts",
-    "../projects/**/*.spec.ts"
-  ],
-  "include": [
-    "../src/**/*",
-    "../projects/**/*"
-  ],
-  "files": [
-    "./typings.d.ts"
-  ]
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*", "./preview.ts"],
+  "files": ["./typings.d.ts"]
 }

example/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

example/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

example/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

example/README.md

@@ -1,10 +1,10 @@
 # Example
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.5.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.2.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
 ## Code scaffolding