storybook-addon-vis 1.0.0 → 1.0.2

package/dist/manager.js

@@ -1,2 +1,2 @@
-import {memo,useState,useEffect}from'react';import {addons,types}from'storybook/internal/manager-api';import {AddonPanel,ScrollArea,Placeholder}from'storybook/internal/components';import {styled}from'storybook/internal/theming';import {SNAPSHOT_ROOT_DIR}from'vitest-plugin-vis/client-api';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var g=memo(function({active:a,snapshotResults:r=[]}){let p=r.reduce((t,e)=>{let S=`(${e.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length+1)}) ${e.fileName}`;return t[S]=[...t[S]??[],e],t},{});return jsx(AddonPanel,{active:a,children:r.length>0?jsx(ScrollArea,{vertical:true,children:Object.entries(p).map(([t,e])=>jsx("div",{children:e.some(s=>s.type==="diff")?jsxs(Fragment,{children:[jsx(m,{failed:true,children:t}),e.map(s=>jsx("img",{src:`data:image/png;base64,${s.base64}`,alt:s.fileName},s.filePath))]}):jsxs(Fragment,{children:[jsx(m,{children:t}),jsx("img",{src:`data:image/png;base64,${e[0].base64}`,alt:e[0].fileName},e[0].filePath)]})},t))}):jsx(Placeholder,{children:"There is no snapshots for this story"})})}),m=styled.div(({theme:o,failed:a})=>({paddingBlock:"0.5rem",paddingInline:"0.2rem",backgroundColor:a?o.background.negative:o.background.positive,color:o.barTextColor}));var i="storybook-addon-vis",E=`${i}/vis_panel`;var A="IMAGE_SNAPSHOT_RESULTS_REQUEST",h="IMAGE_SNAPSHOT_RESULTS_RESPONSE";function u({name:o,importPath:a}){return {type:A,name:o,importPath:a}}addons.register(i,o=>{addons.add(E,{type:types.PANEL,title:"Vis",match:({tabId:a,viewMode:r})=>!a&&r==="story",render({active:a}){if(!a)return null;let[r,p]=useState([]),t=o.getCurrentStoryData();return useEffect(()=>{let e=o.on(i,s=>{s.name===t.name&&s.importPath===t.importPath&&s.type===h&&p(s.results);});return o.emit(i,u(t)),e},[t]),jsx(g,{active:a,snapshotResults:r})}});});//# sourceMappingURL=manager.js.map
+import {memo,useState,useEffect}from'react';import {addons,types}from'storybook/internal/manager-api';import {RefreshIcon}from'@storybook/icons';import {AddonPanel,ScrollArea,IconButton,Placeholder}from'storybook/internal/components';import {styled}from'storybook/internal/theming';import {SNAPSHOT_ROOT_DIR}from'vitest-plugin-vis/client-api';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var h=memo(function({active:s,snapshotResults:r=[],onRefresh:S}){let a=r.reduce((n,e)=>{let R=`(${e.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length+1)}) ${e.fileName}`;return n[R]=[...n[R]??[],e],n},{});return jsx(AddonPanel,{active:s,children:r.length>0?jsx(ScrollArea,{vertical:true,children:Object.entries(a).map(([n,e])=>jsx("div",{children:e.some(i=>i.type==="diff")?jsxs(Fragment,{children:[jsx(g,{failed:true,children:n}),e.map(i=>jsx("img",{src:`data:image/png;base64,${i.base64}`,alt:i.fileName},i.filePath))]}):jsxs(Fragment,{children:[jsxs(g,{children:[jsx("span",{children:n}),jsx(IconButton,{onClick:()=>S(),children:jsx(RefreshIcon,{})})]}),jsx("img",{src:`data:image/png;base64,${e[0].base64}`,alt:e[0].fileName},e[0].filePath)]})},n))}):jsx(Placeholder,{children:"There is no snapshots for this story"})})}),g=styled.div(({theme:t,failed:s})=>({display:"flex",alignItems:"center",gap:"0.5rem",paddingBlock:"0.5rem",paddingInline:"0.2rem",backgroundColor:s?t.background.negative:t.background.positive,color:t.barTextColor}));var p="storybook-addon-vis",E=`${p}/vis_panel`;var O="IMAGE_SNAPSHOT_RESULTS_REQUEST",d="IMAGE_SNAPSHOT_RESULTS_RESPONSE";function l({name:t,importPath:s}){return {type:O,name:t,importPath:s}}addons.register(p,t=>{addons.add(E,{type:types.PANEL,title:"Vis",match:({tabId:s,viewMode:r})=>!s&&r==="story",render({active:s}){if(!s)return null;let[r,S]=useState([]),a=t.getCurrentStoryData();return useEffect(()=>{let n=[t.on(p,e=>{e.name===a.name&&e.importPath===a.importPath&&e.type===d&&S(e.results);})];return t.emit(p,l(a)),()=>n.forEach(e=>e())},[a]),jsx(h,{active:s,snapshotResults:r,onRefresh:()=>{t.emit(p,l(a));}})}});});//# sourceMappingURL=manager.js.map
 //# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/vis_panel.tsx","../src/shared/contants.ts","../src/shared/events.ts","../src/manager.tsx"],"names":["VisPanel","memo","active","snapshotResults","groupedResults","acc","result","key","SNAPSHOT_ROOT_DIR","jsx","AddonPanel","ScrollArea","results","jsxs","Fragment","SnapshotRow","Placeholder","styled","theme","failed","NAME","VIS_PANEL_ID","IMAGE_SNAPSHOT_RESULTS_REQUEST","IMAGE_SNAPSHOT_RESULTS_RESPONSE","requestImageSnapshotResults","name","importPath","addons","api","types","tabId","viewMode","setSnapshotResults","useState","storyData","useEffect","dispose","event"],"mappings":"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","file":"manager.js","sourcesContent":["import { memo } from 'react'\nimport { AddonPanel, Placeholder, ScrollArea } from 'storybook/internal/components'\nimport { styled } from 'storybook/internal/theming'\nimport { SNAPSHOT_ROOT_DIR } from 'vitest-plugin-vis/client-api'\nimport type { ImageSnapshotResults } from '../shared/events.ts'\n\ninterface PanelProps {\n\tactive: boolean\n\tsnapshotResults: ImageSnapshotResults[]\n}\n\nexport const VisPanel = memo(function VisResultsPanel({ active, snapshotResults = [] }: PanelProps) {\n\tconst groupedResults = snapshotResults.reduce(\n\t\t(acc, result) => {\n\t\t\tconst suiteName = result.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length + 1)\n\t\t\tconst key = `(${suiteName}) ${result.fileName}`\n\t\t\tacc[key] = [...(acc[key] ?? []), result]\n\t\t\treturn acc\n\t\t},\n\t\t{} as Record<string, ImageSnapshotResults[]>,\n\t)\n\treturn (\n\t\t<AddonPanel active={active}>\n\t\t\t{snapshotResults.length > 0 ? (\n\t\t\t\t<ScrollArea vertical>\n\t\t\t\t\t{Object.entries(groupedResults).map(([key, results]) => (\n\t\t\t\t\t\t<div key={key}>\n\t\t\t\t\t\t\t{results.some((result) => result.type === 'diff') ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SnapshotRow failed>{key}</SnapshotRow>\n\t\t\t\t\t\t\t\t\t{results.map((result) => (\n\t\t\t\t\t\t\t\t\t\t<img key={result.filePath} src={`data:image/png;base64,${result.base64}`} alt={result.fileName} />\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SnapshotRow>{key}</SnapshotRow>\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tkey={results[0].filePath}\n\t\t\t\t\t\t\t\t\t\tsrc={`data:image/png;base64,${results[0].base64}`}\n\t\t\t\t\t\t\t\t\t\talt={results[0].fileName}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</ScrollArea>\n\t\t\t) : (\n\t\t\t\t<Placeholder>There is no snapshots for this story</Placeholder>\n\t\t\t)}\n\t\t</AddonPanel>\n\t)\n})\n\nconst SnapshotRow = styled.div<{ failed?: boolean }>(({ theme, failed }) => ({\n\tpaddingBlock: '0.5rem',\n\tpaddingInline: '0.2rem',\n\tbackgroundColor: failed ? theme.background.negative : theme.background.positive,\n\tcolor: theme.barTextColor,\n}))\n","export const NAME = 'storybook-addon-vis'\nexport const VIS_PANEL_ID = `${NAME}/vis_panel`\n","export type VisEvent = ImageSnapshotResultsRequest | ImageSnapshotResultsResponse\n\nexport const IMAGE_SNAPSHOT_RESULTS_REQUEST = 'IMAGE_SNAPSHOT_RESULTS_REQUEST'\nexport const IMAGE_SNAPSHOT_RESULTS_RESPONSE = 'IMAGE_SNAPSHOT_RESULTS_RESPONSE'\n\nexport function requestImageSnapshotResults({ name, importPath }: { name: string; importPath: string }) {\n\treturn {\n\t\ttype: IMAGE_SNAPSHOT_RESULTS_REQUEST,\n\t\tname,\n\t\timportPath,\n\t}\n}\n\nexport type ImageSnapshotResultsRequest = {\n\ttype: typeof IMAGE_SNAPSHOT_RESULTS_REQUEST\n\tname: string\n\timportPath: string\n}\n\nexport type ImageSnapshotResultsResponse = {\n\ttype: typeof IMAGE_SNAPSHOT_RESULTS_RESPONSE\n\tname: string\n\timportPath: string\n\tresults: ImageSnapshotResults[]\n}\n\nexport type ImageSnapshotResults = {\n\tfilePath: string\n\tfileName: string\n\tsnapshotRootDir: string\n\ttype: 'baseline' | 'diff' | 'result'\n\tbase64: string\n}\n","import { useEffect, useState } from 'react'\nimport { addons, types } from 'storybook/internal/manager-api'\nimport { VisPanel } from './components/vis_panel.tsx'\nimport { NAME, VIS_PANEL_ID } from './shared/contants.ts'\nimport {\n\tIMAGE_SNAPSHOT_RESULTS_RESPONSE,\n\trequestImageSnapshotResults,\n\ttype ImageSnapshotResults,\n\ttype VisEvent,\n} from './shared/events.ts'\n\n// Register the addon\naddons.register(NAME, (api) => {\n\t// Register the tool\n\taddons.add(VIS_PANEL_ID, {\n\t\ttype: types.PANEL,\n\t\ttitle: 'Vis',\n\t\tmatch: ({ tabId, viewMode }) => !tabId && viewMode === 'story',\n\t\trender({ active }) {\n\t\t\tif (!active) return null\n\t\t\tconst [snapshotResults, setSnapshotResults] = useState<ImageSnapshotResults[]>([])\n\n\t\t\tconst storyData = api.getCurrentStoryData()\n\n\t\t\tuseEffect(() => {\n\t\t\t\tconst dispose = api.on(NAME, (event: VisEvent) => {\n\t\t\t\t\tif (event.name !== storyData.name) return\n\t\t\t\t\tif (event.importPath !== storyData.importPath) return\n\n\t\t\t\t\tif (event.type === IMAGE_SNAPSHOT_RESULTS_RESPONSE) {\n\t\t\t\t\t\tsetSnapshotResults(event.results)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\tapi.emit(NAME, requestImageSnapshotResults(storyData))\n\t\t\t\treturn dispose\n\t\t\t}, [storyData])\n\t\t\treturn <VisPanel active={active} snapshotResults={snapshotResults} />\n\t\t},\n\t})\n})\n"]}
+{"version":3,"sources":["../src/components/vis_panel.tsx","../src/shared/contants.ts","../src/shared/events.ts","../src/manager.tsx"],"names":["VisPanel","memo","active","snapshotResults","onRefresh","groupedResults","acc","result","key","SNAPSHOT_ROOT_DIR","jsx","AddonPanel","ScrollArea","results","jsxs","Fragment","SnapshotRow","IconButton","RefreshIcon","Placeholder","styled","theme","failed","NAME","VIS_PANEL_ID","IMAGE_SNAPSHOT_RESULTS_REQUEST","IMAGE_SNAPSHOT_RESULTS_RESPONSE","requestImageSnapshotResults","name","importPath","addons","api","types","tabId","viewMode","setSnapshotResults","useState","storyData","useEffect","disposes","event","dispose"],"mappings":"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","file":"manager.js","sourcesContent":["import { RefreshIcon } from '@storybook/icons'\nimport { memo } from 'react'\nimport { AddonPanel, IconButton, Placeholder, ScrollArea } from 'storybook/internal/components'\nimport { styled } from 'storybook/internal/theming'\nimport { SNAPSHOT_ROOT_DIR } from 'vitest-plugin-vis/client-api'\nimport type { ImageSnapshotResults } from '../shared/events.ts'\n\ninterface PanelProps {\n\tactive: boolean\n\tsnapshotResults: ImageSnapshotResults[]\n\tonRefresh: () => void\n}\n\nexport const VisPanel = memo(function VisPanel({ active, snapshotResults = [], onRefresh }: PanelProps) {\n\tconst groupedResults = snapshotResults.reduce(\n\t\t(acc, result) => {\n\t\t\tconst suiteName = result.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length + 1)\n\t\t\tconst key = `(${suiteName}) ${result.fileName}`\n\t\t\tacc[key] = [...(acc[key] ?? []), result]\n\t\t\treturn acc\n\t\t},\n\t\t{} as Record<string, ImageSnapshotResults[]>,\n\t)\n\treturn (\n\t\t<AddonPanel active={active}>\n\t\t\t{snapshotResults.length > 0 ? (\n\t\t\t\t<ScrollArea vertical>\n\t\t\t\t\t{Object.entries(groupedResults).map(([key, results]) => (\n\t\t\t\t\t\t<div key={key}>\n\t\t\t\t\t\t\t{results.some((result) => result.type === 'diff') ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SnapshotRow failed>{key}</SnapshotRow>\n\t\t\t\t\t\t\t\t\t{results.map((result) => (\n\t\t\t\t\t\t\t\t\t\t<img key={result.filePath} src={`data:image/png;base64,${result.base64}`} alt={result.fileName} />\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SnapshotRow>\n\t\t\t\t\t\t\t\t\t\t<span>{key}</span>\n\t\t\t\t\t\t\t\t\t\t<IconButton onClick={() => onRefresh()}>\n\t\t\t\t\t\t\t\t\t\t\t<RefreshIcon />\n\t\t\t\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t\t\t\t</SnapshotRow>\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tkey={results[0].filePath}\n\t\t\t\t\t\t\t\t\t\tsrc={`data:image/png;base64,${results[0].base64}`}\n\t\t\t\t\t\t\t\t\t\talt={results[0].fileName}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</ScrollArea>\n\t\t\t) : (\n\t\t\t\t<Placeholder>There is no snapshots for this story</Placeholder>\n\t\t\t)}\n\t\t</AddonPanel>\n\t)\n})\n\nconst SnapshotRow = styled.div<{ failed?: boolean }>(({ theme, failed }) => ({\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tgap: '0.5rem',\n\tpaddingBlock: '0.5rem',\n\tpaddingInline: '0.2rem',\n\tbackgroundColor: failed ? theme.background.negative : theme.background.positive,\n\tcolor: theme.barTextColor,\n}))\n","export const NAME = 'storybook-addon-vis'\nexport const VIS_PANEL_ID = `${NAME}/vis_panel`\n","export type VisEvent = ImageSnapshotResultsRequest | ImageSnapshotResultsResponse\n\nexport const IMAGE_SNAPSHOT_RESULTS_REQUEST = 'IMAGE_SNAPSHOT_RESULTS_REQUEST'\nexport const IMAGE_SNAPSHOT_RESULTS_RESPONSE = 'IMAGE_SNAPSHOT_RESULTS_RESPONSE'\n\nexport function requestImageSnapshotResults({ name, importPath }: { name: string; importPath: string }) {\n\treturn {\n\t\ttype: IMAGE_SNAPSHOT_RESULTS_REQUEST,\n\t\tname,\n\t\timportPath,\n\t}\n}\n\nexport type ImageSnapshotResultsRequest = {\n\ttype: typeof IMAGE_SNAPSHOT_RESULTS_REQUEST\n\tname: string\n\timportPath: string\n}\n\nexport type ImageSnapshotResultsResponse = {\n\ttype: typeof IMAGE_SNAPSHOT_RESULTS_RESPONSE\n\tname: string\n\timportPath: string\n\tresults: ImageSnapshotResults[]\n}\n\nexport type ImageSnapshotResults = {\n\tfilePath: string\n\tfileName: string\n\tsnapshotRootDir: string\n\ttype: 'baseline' | 'diff' | 'result'\n\tbase64: string\n}\n","import { useEffect, useState } from 'react'\nimport { addons, types } from 'storybook/internal/manager-api'\nimport { VisPanel } from './components/vis_panel.tsx'\nimport { NAME, VIS_PANEL_ID } from './shared/contants.ts'\nimport {\n\tIMAGE_SNAPSHOT_RESULTS_RESPONSE,\n\trequestImageSnapshotResults,\n\ttype ImageSnapshotResults,\n\ttype VisEvent,\n} from './shared/events.ts'\n\n// Register the addon\naddons.register(NAME, (api) => {\n\t// Register the tool\n\taddons.add(VIS_PANEL_ID, {\n\t\ttype: types.PANEL,\n\t\ttitle: 'Vis',\n\t\tmatch: ({ tabId, viewMode }) => !tabId && viewMode === 'story',\n\t\trender({ active }) {\n\t\t\tif (!active) return null\n\t\t\tconst [snapshotResults, setSnapshotResults] = useState<ImageSnapshotResults[]>([])\n\n\t\t\tconst storyData = api.getCurrentStoryData()\n\n\t\t\tuseEffect(() => {\n\t\t\t\tconst disposes = [\n\t\t\t\t\tapi.on(NAME, (event: VisEvent) => {\n\t\t\t\t\t\tif (event.name !== storyData.name) return\n\t\t\t\t\t\tif (event.importPath !== storyData.importPath) return\n\n\t\t\t\t\t\tif (event.type === IMAGE_SNAPSHOT_RESULTS_RESPONSE) {\n\t\t\t\t\t\t\tsetSnapshotResults(event.results)\n\t\t\t\t\t\t}\n\t\t\t\t\t}),\n\t\t\t\t\t// api.on('UNIVERSAL_STORE:storybook/test', (event) => {\n\t\t\t\t\t// \tconsole.log('storybook/test', event)\n\t\t\t\t\t// }),\n\t\t\t\t]\n\t\t\t\tapi.emit(NAME, requestImageSnapshotResults(storyData))\n\t\t\t\treturn () => disposes.forEach((dispose) => dispose())\n\t\t\t}, [storyData])\n\t\t\treturn (\n\t\t\t\t<VisPanel\n\t\t\t\t\tactive={active}\n\t\t\t\t\tsnapshotResults={snapshotResults}\n\t\t\t\t\tonRefresh={() => {\n\t\t\t\t\t\tapi.emit(NAME, requestImageSnapshotResults(storyData))\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)\n\t\t},\n\t})\n})\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-vis",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Storybook Vitest visual testing addon",
   "keywords": [
     "image-snapshot",
@@ -61,15 +61,16 @@
     "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,stories,study}.*"
   ],
   "dependencies": {
+    "@storybook/icons": "^1.4.0",
     "glob": "^11.0.2",
     "is-ci": "^4.1.0",
     "memoize": "^10.1.0",
     "pathe": "^2.0.3",
     "type-plus": "8.0.0-beta.7",
-    "vitest-plugin-vis": "^3.0.0"
+    "vitest-plugin-vis": "^3.0.1"
   },
   "devDependencies": {
-    "@repobuddy/storybook": "^0.12.0",
+    "@repobuddy/storybook": "^0.13.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",
     "@storybook/addon-storysource": "^8.6.14",
@@ -107,7 +108,6 @@
     "zx": "^8.0.0"
   },
   "peerDependencies": {
-    "@types/pixelmatch": "^5.2.6",
     "@vitest/browser": "^2 || ^3",
     "storybook": "^8.3.0",
     "vitest": "^2 || ^3"
@@ -145,7 +145,7 @@
   },
   "scripts": {
     "build": "tsup --tsconfig tsconfig.tsup.json",
-    "build:sb": "storybook build",
+    "build:sb": "cross-env NODE_ENV=production storybook build",
     "clean": "rimraf coverage dist esm --glob *.tsbuildinfo vitest.*.timestamp*",
     "clean:vis:local": "rimraf __vis__/local",
     "cov": "vitest run --coverage",

package/readme.md

@@ -229,7 +229,7 @@ By default, [`storybook-addon-vis`][storybook-addon-vis] removes that folder to
 
 If you place your test files in multiple folders,
 such as in both `tests` and `src` folders,
-you can use `customizeSnapshotSubpath` to customize the snapshot sub-path to avoid conflicts.
+you can use `snapshotSubpath` to customize the snapshot sub-path to avoid conflicts.
 
 ```ts
 // vitest.config.ts
@@ -240,7 +240,7 @@ export default defineConfig({
 	plugins: [
 		storybookVis({
 			// keep the folder structure
-			customizeSnapshotSubpath: (subpath) => subpath
+			snapshotSubpath: (subpath) => subpath
 		})
 	],
 	// ...

package/src/advance_setup.mdx

@@ -0,0 +1,133 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Advance Setup" />
+
+# Advance Setup
+
+[storybook-addon-vis][storybook-addon-vis] is very flexible and provides a lot of options to customize the visual testing.
+
+It is built on top of [vitest-plugin-vis][vitest-plugin-vis],
+so most of the options are the same as [vitest-plugin-vis][vitest-plugin-vis].
+You can check its documentation for those options.
+
+This document will focus on things that are specific to [storybook-addon-vis][storybook-addon-vis].
+
+## Removal of presets
+
+[vitest-plugin-vis][vitest-plugin-vis] provides `auto` or `manual` presets,
+but [storybook-addon-vis][storybook-addon-vis] does not provide any presets.
+
+This is because those presets setup the `vitest.setup.ts` for you,
+but [storybook-addon-vis][storybook-addon-vis] needs to update the `vitest.setup.ts` file you already have from [Storybook Test addon][storybook-test-addon],
+so those presets does not work and we need to customize the file directly.
+
+## Disable Vitest global API
+
+```ts
+// vitest.config.ts
+
+export default defineConfig({
+	test: {
+		globals: false,
+	}
+})
+```
+
+We recommend to set `globals` to `false` (which is the default).
+Setting `globals` to `true` actually works ok during test.
+But they don't exist in the story files:
+
+```tsx
+// some.stories.tsx
+export const Story = {
+	async play() {
+		// does not work
+		expect(true).toBeTruthy()
+	}
+}
+```
+
+This is obvious because the story files are executed on the browser.
+In fact, you need to import the functions from `@storybook/test` instead:
+
+```ts
+// some.test.ts
+import { expect } from 'vitest'
+
+// some.stories.ts
+import { expect } from '@storybook/test'
+```
+
+Setting `globals: true` (and adding `types: ["vitest/globals"]` in your `tsconfig.json`)
+causes inconsistency and confuses both the editor and you.
+
+## Disable auto snapshot for tests
+
+[storybook-addon-vis][storybook-addon-vis] uses the same auto snapshot feature as [vitest-plugin-vis][vitest-plugin-vis].
+
+That means if you set `auto: true` in your `vitest.setup.ts`,
+your render tests will be automatically snapshot tested:
+
+```ts
+// vitest.setup.ts
+
+vis.setup({	auto: true })
+```
+
+When you use it to take snapshots for multiple themes, e.g. light and dark,
+the same will occurs:
+
+```ts
+vis.setup({
+	auto: {
+		async light() { document.body.classList.remove('dark') },
+		async dark() { document.body.classList.add('dark') },
+	}
+})
+```
+
+If this is not what you want, you can disable the auto snapshot for tests by checking for the `snapshot` tag:
+
+```ts
+vis.setup({
+	auto: {
+		async light({ tags }) {
+			if (!tags.includes('snapshot')) return false
+			document.body.classList.remove('dark')
+		},
+		async dark({ tags }) {
+			if (!tags.includes('snapshot')) return false
+			document.body.classList.add('dark')
+		}
+	}
+})
+```
+
+## Taking specific snapshots
+
+Say you want to take snapshots for multiple themes,
+but for certain stories, you want to take skip snapshots for a specific theme.
+
+You can do this by using a custom tag:
+
+```tsx
+// some.stories.tsx
+export const Story = {
+	tags: ['snapshot', 'skip-dark']
+}
+```
+
+```ts
+// vitest.setup.ts
+
+vis.setup({
+	auto: {
+		async dark({ tags }) {
+			if (tags.includes('skip-dark')) return false
+		}
+	}
+})
+```
+
+[storybook-addon-vis]: https://www.npmjs.com/package/storybook-addon-vis
+[vitest-plugin-vis]: https://www.npmjs.com/package/vitest-plugin-vis

package/src/basic_setup.mdx

@@ -0,0 +1,121 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Basic Setup" />
+
+# Basic Setup
+
+The basic setup is pretty straightforward.
+
+
+## Vitest
+
+For [Vitest], you need to add the following to your `vitest.config.ts`:
+
+```ts
+// vitest.config.ts
+
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'
+import { storybookVis } from 'storybook-addon-vis/vitest-plugin'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+	plugins: [
+		storybookTest(),
+		storybookVis() // ADD THIS
+	],
+	test: {
+		// vitest v2
+		browser: {
+			enabled: true,
+			headless: true,
+			provider: 'playwright',
+			name: 'chromium',
+		},
+		// vitest v3
+		browser: {
+			enabled: true,
+			headless: true,
+			provider: 'playwright',
+			instances: [
+				{ browser: 'chromium' }
+			]
+		}
+		// recommend to set to false
+		globals: false,
+		// Needed by both Storybook Test Addon and Storybook Visual Testing
+		setupFiles: ['./vitest.setup.ts'],
+	}
+})
+```
+
+And your `vitest.setup.ts`:
+
+```ts
+// vitest.setup.ts
+
+import { vis, visAnnotations } from 'storybook-addon-vis/vitest-setup'
+import { beforeAll } from 'vitest'
+import * as projectAnnotations from './preview.ts'
+
+const project = setProjectAnnotations([
+	projectAnnotations,
+	visAnnotations // ADD THIS
+])
+
+beforeAll(project.beforeAll)
+
+// ADD THIS to setup visual testing
+vis.setup()
+```
+
+## Storybook
+
+For [Storybook], update your `.storybook/main.ts` to add the addon:
+
+```ts
+// .storybook/main.ts
+
+const config: StorybookConfig = {
+	// ...
+	addons: [
+		// ...
+		'@storybook/experimental-addon-test',
+		'storybook-addon-vis' // ADD THIS
+	]
+}
+```
+
+With this setup, [storybook-addon-vis] is configured to do the following:
+
+- Take snapshots for every story with the `snapshot` tag.
+- Use `pixelmatch` as the comparison algorithm.
+	- Compare snapshots with a failure threshold of `0 pixels`.
+	- Timeout for image comparison is set to `30000 ms`.
+- Local (non-CI) image snapshots are saved in the `<root>/__vis__/local` directory.
+- CI image snapshots are saved in the `<root>/__vis__/<process.platform>` directory.
+- Baseline images are saved in the `<root>/__vis__/*/__baselines__` directory.
+- Current test images are saved in the `<root>/__vis__/*/__results__` directory.
+- Diff images (if any) are saved in the `<root>/__vis__/*/__diffs__` directory.
+- You can review the baseline and diff images in addon `Vis` panel.
+
+## Git (or other version control system)
+
+Since [storybook-addon-vis][storybook-addon-vis] will save snapshot on your file system,
+you need to tell your v2ersion control system to ignore the snapshot directory.
+
+With the basic setup, add this to your `.gitignore` (or your version control system's ignore file):
+
+```ini
+# snapshot images
+__vis__/local
+__vis__/**/__results__
+__vis__/**/__diffs__
+```
+
+Note that the `__vis__/*/__baselines__` should not be ignored,
+as it is used to store the baseline images.
+They should be committed to your repository.
+
+[storybook-addon-vis]: https://www.npmjs.com/package/storybook-addon-vis
+[Vitest]: https://vitest.dev/
+[Storybook]: https://storybook.js.org/

package/src/changelog.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+import changelog from "../CHANGELOG.md?raw";
+import { Markdown } from "@storybook/blocks";
+
+<Meta title="Changelog" />
+
+<Markdown>{changelog}</Markdown>

package/src/components/vis_panel.tsx

@@ -1,5 +1,6 @@
+import { RefreshIcon } from '@storybook/icons'
 import { memo } from 'react'
-import { AddonPanel, Placeholder, ScrollArea } from 'storybook/internal/components'
+import { AddonPanel, IconButton, Placeholder, ScrollArea } from 'storybook/internal/components'
 import { styled } from 'storybook/internal/theming'
 import { SNAPSHOT_ROOT_DIR } from 'vitest-plugin-vis/client-api'
 import type { ImageSnapshotResults } from '../shared/events.ts'
@@ -7,9 +8,10 @@ import type { ImageSnapshotResults } from '../shared/events.ts'
 interface PanelProps {
 	active: boolean
 	snapshotResults: ImageSnapshotResults[]
+	onRefresh: () => void
 }
 
-export const VisPanel = memo(function VisResultsPanel({ active, snapshotResults = [] }: PanelProps) {
+export const VisPanel = memo(function VisPanel({ active, snapshotResults = [], onRefresh }: PanelProps) {
 	const groupedResults = snapshotResults.reduce(
 		(acc, result) => {
 			const suiteName = result.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length + 1)
@@ -34,7 +36,12 @@ export const VisPanel = memo(function VisResultsPanel({ active, snapshotResults
 								</>
 							) : (
 								<>
-									<SnapshotRow>{key}</SnapshotRow>
+									<SnapshotRow>
+										<span>{key}</span>
+										<IconButton onClick={() => onRefresh()}>
+											<RefreshIcon />
+										</IconButton>
+									</SnapshotRow>
 									<img
 										key={results[0].filePath}
 										src={`data:image/png;base64,${results[0].base64}`}
@@ -53,6 +60,9 @@ export const VisPanel = memo(function VisResultsPanel({ active, snapshotResults
 })
 
 const SnapshotRow = styled.div<{ failed?: boolean }>(({ theme, failed }) => ({
+	display: 'flex',
+	alignItems: 'center',
+	gap: '0.5rem',
 	paddingBlock: '0.5rem',
 	paddingInline: '0.2rem',
 	backgroundColor: failed ? theme.background.negative : theme.background.positive,

package/src/installation.mdx

@@ -0,0 +1,27 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Installation" />
+
+# Installation
+
+[storybook-addon-vis][storybook-addon-vis] works with [Storybook Test addon][storybook-test-addon],
+so naturally you need to have it setup first.
+
+After that, you can install [storybook-addon-vis][storybook-addon-vis] with your package manager of choice:
+
+```sh
+npm install --save-dev storybook-addon-vis
+```
+```sh
+pnpm add --save-dev storybook-addon-vis
+```
+```sh
+yarn add --save-dev storybook-addon-vis
+```
+
+Next, you need to setup [storybook-addon-vis][storybook-addon-vis] for both [Storybook] and [Vitest].
+
+[storybook-addon-vis]: https://www.npmjs.com/package/storybook-addon-vis
+[storybook-test-addon]: https://storybook.js.org/docs/writing-tests/test-addon
+[Storybook]: https://storybook.js.org/
+[Vitest]: https://vitest.dev/

package/src/manager.tsx

@@ -23,18 +23,31 @@ addons.register(NAME, (api) => {
 			const storyData = api.getCurrentStoryData()
 
 			useEffect(() => {
-				const dispose = api.on(NAME, (event: VisEvent) => {
-					if (event.name !== storyData.name) return
-					if (event.importPath !== storyData.importPath) return
+				const disposes = [
+					api.on(NAME, (event: VisEvent) => {
+						if (event.name !== storyData.name) return
+						if (event.importPath !== storyData.importPath) return
 
-					if (event.type === IMAGE_SNAPSHOT_RESULTS_RESPONSE) {
-						setSnapshotResults(event.results)
-					}
-				})
+						if (event.type === IMAGE_SNAPSHOT_RESULTS_RESPONSE) {
+							setSnapshotResults(event.results)
+						}
+					}),
+					// api.on('UNIVERSAL_STORE:storybook/test', (event) => {
+					// 	console.log('storybook/test', event)
+					// }),
+				]
 				api.emit(NAME, requestImageSnapshotResults(storyData))
-				return dispose
+				return () => disposes.forEach((dispose) => dispose())
 			}, [storyData])
-			return <VisPanel active={active} snapshotResults={snapshotResults} />
+			return (
+				<VisPanel
+					active={active}
+					snapshotResults={snapshotResults}
+					onRefresh={() => {
+						api.emit(NAME, requestImageSnapshotResults(storyData))
+					}}
+				/>
+			)
 		},
 	})
 })

package/src/overview.mdx

@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Overview" />
+
+# Storybook Visual Testing addon
+
+[storybook-addon-vis][storybook-addon-vis] enables self contained Visual Testing for [Storybook][storybook].
+
+It offers a new unique features:
+
+- You can capture and compare image snapshot both automatically and manually.
+- You can take a snapshot of the whole page or a specific component.
+- You can take snapshots in different environments, platform, browser, screen size and themes.
+- The snapshots are stored locally in the `__vis__` directory.
+- You can enable, disable, and customize how the snapshots are taken and compared.
+
+[storybook-addon-vis]: https://github.com/repobuddy/storybook-addon-vis
+[storybook]: https://storybook.js.org