Save story

.storybook/local-preset.js

@@ -1,3 +1,5 @@
+import distPreset from '../dist/preset.cjs';
+
 /**
  * to load the built addon in this test Storybook
  */
@@ -12,4 +14,5 @@ function managerEntries(entry = []) {
 module.exports = {
 	managerEntries,
 	previewAnnotations,
+	...distPreset,
 };

README.md

@@ -1,13 +1,15 @@
 # Storybook Addon Test Codegen
 
-[![NPM version](https://badge.fury.io/js/storybook-addon-test-codegen.svg)](https://www.npmjs.com/package/storybook-addon-test-codegen)
+[![NPM version](https://img.shields.io/npm/v/storybook-addon-test-codegen)](https://www.npmjs.com/package/storybook-addon-test-codegen)
 [![NPM downloads](https://img.shields.io/npm/dt/storybook-addon-test-codegen)](https://www.npmjs.com/package/storybook-addon-test-codegen)
 [![GitHub license](https://img.shields.io/github/license/igrlk/storybook-addon-test-codegen)](https://github.com/igrlk/storybook-addon-test-codegen/blob/main/LICENSE)
 
 Interact with your Storybook and get test code generated for
 you. To see this live, check out the [demo](https://igrlk.github.io/storybook-addon-test-codegen/).
 
-![Alt Text](/assets/addon.gif)
+<video autoplay loop muted playsinline>
+  <source src="assets/addon.mp4" type="video/mp4">
+</video>
 
 ## Installation
 
@@ -19,7 +21,7 @@ npm install --save-dev storybook-addon-test-codegen
 
 ### Peer Dependency
 
-This addon requires `storybook` version `>=8.2.0` to be installed in your project. Ensure you have a compatible version
+This addon requires `storybook` version `>=8.3.0` to be installed in your project. Ensure you have a compatible version
 by running:
 
 ```sh
@@ -29,6 +31,8 @@ npm install --save-dev storybook@latest
 If you’re not using Storybook already, you can refer to
 the [Storybook Getting Started Guide](https://storybook.js.org/docs) for installation instructions.
 
+For `[email protected].*`, use version `1.0.3` of this addon.
+
 ### Register the Addon
 
 Once installed, register it as an addon in `.storybook/main.js`.
@@ -55,15 +59,17 @@ export default config;
 Enable recording in the Interaction Recorder tab in the Storybook UI. Interact with your components as you normally
 would, and the addon will generate test code for you.
 
-Copy both imports and the generated code to your test file.
+Click on "Save to story" to save the generated code to the story file. Done 🎉
+
+Alternatively, copy both imports and the generated code to your test file like so:
 
 ```jsx
 // MyComponent.stories.tsx
 
 // 👇 Add the generated imports here
 import {userEvent, waitFor, within, expect} from "@storybook/test";
 
-export const MyComponent: Story = {
+export const MyComponent = {
   // ...rest of the story
 
   // 👇 Add the generated test code here

package.json

@@ -32,45 +32,50 @@
 	"files": ["dist/**/*", "README.md", "*.js", "*.d.ts"],
 	"scripts": {
 		"build": "tsup",
-		"build:watch": "concurrently \"npm run build -- --watch\" \"npm run tailwind:watch\"",
+		"build:watch": "tsup --watch",
+		"build-storybook": "storybook build",
 		"check": "biome check --write",
 		"test": "vitest run",
 		"test:watch": "vitest",
-		"start": "concurrently \"pnpm build:watch\" \"pnpm storybook\"",
 		"prerelease": "zx scripts/prepublish-checks.js",
 		"release": "npm run build && auto shipit",
 		"eject-ts": "zx scripts/eject-typescript.js",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
+		"start": "concurrently \"pnpm build:watch\" \"pnpm tailwind:watch\"",
+		"storybook": "storybook dev -p 6006 --no-open",
 		"prepare": "husky",
 		"tailwind": "tailwindcss -i ./src/tailwind.css -o ./.storybook/tailwind.css",
 		"tailwind:watch": "pnpm tailwind -- --watch",
 		"pr:check": "concurrently \"npm run check\" \"npm run test\" \"npm run build\""
 	},
 	"devDependencies": {
+		"@babel/parser": "^7.26.7",
 		"@biomejs/biome": "^1.9.4",
-		"@chromatic-com/storybook": "^3.2.4",
 		"@medv/finder": "^4.0.2",
 		"@playwright/test": "^1.49.1",
-		"@storybook/addon-essentials": "^8.5.3",
-		"@storybook/addon-interactions": "^8.5.3",
-		"@storybook/addon-links": "^8.5.3",
-		"@storybook/addon-themes": "^8.5.3",
-		"@storybook/blocks": "^8.5.3",
+		"@storybook/addon-essentials": "^8.6.3",
+		"@storybook/addon-interactions": "^8.6.3",
+		"@storybook/addon-links": "^8.6.3",
+		"@storybook/addon-themes": "^8.6.3",
+		"@storybook/blocks": "^8.6.3",
+		"@storybook/csf": "^0.1.13",
 		"@storybook/icons": "^1.3.2",
-		"@storybook/react": "^8.5.3",
-		"@storybook/react-vite": "^8.5.3",
-		"@storybook/test": "^8.5.3",
+		"@storybook/react": "^8.6.3",
+		"@storybook/react-vite": "^8.6.3",
+		"@storybook/test": "^8.6.3",
+		"@testing-library/dom": "^10.4.0",
 		"@types/jsdom": "^21.1.7",
 		"@types/node": "^18.15.0",
 		"@types/react": "^18.2.65",
 		"@types/react-dom": "^18.2.21",
 		"@vitejs/plugin-react": "^4.2.1",
 		"auto": "^11.1.1",
 		"boxen": "^7.1.1",
+		"concurrently": "^9.1.0",
 		"dedent": "^1.5.1",
+		"dequal": "^2.0.3",
 		"dom-accessibility-api": "^0.7.0",
 		"globals": "^15.14.0",
+		"happy-dom": "^15.11.7",
 		"husky": "^9.1.7",
 		"jsdom": "^25.0.1",
 		"lint-staged": "^15.2.11",
@@ -79,28 +84,26 @@
 		"prompts": "^2.4.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"storybook": "^8.5.3",
+		"storybook": "^8.6.3",
+		"tailwindcss": "^3.4.17",
 		"tsup": "^8.2.4",
 		"typescript": "^5.5.4",
+		"use-debounce": "^10.0.4",
 		"vite": "^5.3.5",
 		"vitest": "^2.1.8",
-		"zx": "^7.2.3",
-		"@testing-library/dom": "^10.4.0",
-		"concurrently": "^9.1.0",
-		"happy-dom": "^15.11.7",
-		"tailwindcss": "^3.4.17",
-		"use-debounce": "^10.0.4"
+		"zx": "^7.2.3"
 	},
 	"peerDependencies": {
-		"storybook": ">=8.2.0"
+		"storybook": ">=8.3.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
 	"bundler": {
 		"exportEntries": ["src/index.ts"],
 		"managerEntries": ["src/manager.tsx"],
-		"previewEntries": ["src/preview.ts"]
+		"previewEntries": ["src/preview.ts"],
+		"nodeEntries": ["src/preset.ts"]
 	},
 	"storybook": {
 		"displayName": "Test Codegen",