storybook-addon-vis 2.1.4 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/manager.js +1 -1
- package/dist/manager.js.map +1 -1
- package/package.json +7 -7
- package/src/components/vis_panel.tsx +1 -1
- package/src/manager.tsx +1 -1
package/dist/manager.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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';
|
|
1
|
+
import t,{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';var f=memo(function({active:o,snapshotResults:a=[],onRefresh:m}){let r=a.reduce((n,e)=>{let l=`(${e.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length+1)}) ${e.fileName}`;return n[l]=[...n[l]??[],e],n},{});return t.createElement(AddonPanel,{active:o},a.length>0?t.createElement(ScrollArea,{vertical:true},Object.entries(r).map(([n,e])=>t.createElement("div",{key:n},e.some(i=>i.type==="diff")?t.createElement(t.Fragment,null,t.createElement(g,{failed:true},n),e.map(i=>t.createElement("img",{key:i.filePath,src:`data:image/png;base64,${i.base64}`,alt:i.fileName}))):t.createElement(t.Fragment,null,t.createElement(g,null,t.createElement("span",null,n),t.createElement(IconButton,{onClick:()=>m()},t.createElement(RefreshIcon,null))),t.createElement("img",{key:e[0].filePath,src:`data:image/png;base64,${e[0].base64}`,alt:e[0].fileName}))))):t.createElement(Placeholder,null,"There is no snapshots for this story"))}),g=styled.div(({theme:s,failed:o})=>({display:"flex",alignItems:"center",gap:"0.5rem",paddingBlock:"0.5rem",paddingInline:"0.2rem",backgroundColor:o?s.background.negative:s.background.positive,color:s.barTextColor}));var p="storybook-addon-vis",E=`${p}/vis_panel`;var T="IMAGE_SNAPSHOT_RESULTS_REQUEST",h="IMAGE_SNAPSHOT_RESULTS_RESPONSE";function S({name:s,importPath:o}){return {type:T,name:s,importPath:o}}addons.register(p,s=>{globalThis.CONFIG_TYPE==="DEVELOPMENT"&&addons.add(E,{type:types.PANEL,title:"Vis",match:({tabId:o,viewMode:a})=>!o&&a==="story",render({active:o}){let[a,m]=useState([]),r=s.getCurrentStoryData();return useEffect(()=>{let n=[s.on(p,e=>{e.name===r.name&&e.importPath===r.importPath&&e.type===h&&m(e.results);})];return s.emit(p,S(r)),()=>n.forEach(e=>{e();})},[r]),o?t.createElement(f,{active:o,snapshotResults:a,onRefresh:()=>{s.emit(p,S(r));}}):null}});});//# sourceMappingURL=manager.js.map
|
|
2
2
|
//# sourceMappingURL=manager.js.map
|
package/dist/manager.js.map
CHANGED
|
@@ -1 +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","onRefresh","groupedResults","acc","result","key","SNAPSHOT_ROOT_DIR","
|
|
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","onRefresh","groupedResults","acc","result","key","SNAPSHOT_ROOT_DIR","React","AddonPanel","ScrollArea","results","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 React, { 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 React, { 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\tif ((globalThis as any).CONFIG_TYPE === 'DEVELOPMENT') {\n\t\taddons.add(VIS_PANEL_ID, {\n\t\t\ttype: types.PANEL,\n\t\t\ttitle: 'Vis',\n\t\t\tmatch: ({ tabId, viewMode }) => !tabId && viewMode === 'story',\n\t\t\trender({ active }) {\n\t\t\t\tconst [snapshotResults, setSnapshotResults] = useState<ImageSnapshotResults[]>([])\n\n\t\t\t\tconst storyData = api.getCurrentStoryData()\n\n\t\t\t\tuseEffect(() => {\n\t\t\t\t\tconst disposes = [\n\t\t\t\t\t\tapi.on(NAME, (event: VisEvent) => {\n\t\t\t\t\t\t\tif (event.name !== storyData.name) return\n\t\t\t\t\t\t\tif (event.importPath !== storyData.importPath) return\n\n\t\t\t\t\t\t\tif (event.type === IMAGE_SNAPSHOT_RESULTS_RESPONSE) {\n\t\t\t\t\t\t\t\tsetSnapshotResults(event.results)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}),\n\t\t\t\t\t\t// api.on('UNIVERSAL_STORE:storybook/test', (event) => {\n\t\t\t\t\t\t// \tconsole.log('storybook/test', event)\n\t\t\t\t\t\t// }),\n\t\t\t\t\t]\n\t\t\t\t\tapi.emit(NAME, requestImageSnapshotResults(storyData))\n\t\t\t\t\treturn () =>\n\t\t\t\t\t\tdisposes.forEach((dispose) => {\n\t\t\t\t\t\t\tdispose()\n\t\t\t\t\t\t})\n\t\t\t\t}, [storyData])\n\n\t\t\t\tif (!active) return null\n\n\t\t\t\treturn (\n\t\t\t\t\t<VisPanel\n\t\t\t\t\t\tactive={active}\n\t\t\t\t\t\tsnapshotResults={snapshotResults}\n\t\t\t\t\t\tonRefresh={() => {\n\t\t\t\t\t\t\tapi.emit(NAME, requestImageSnapshotResults(storyData))\n\t\t\t\t\t\t}}\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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "storybook-addon-vis",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.5",
|
|
4
4
|
"description": "Storybook Vitest visual testing addon",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"image-snapshot",
|
|
@@ -60,19 +60,19 @@
|
|
|
60
60
|
],
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"@storybook/icons": "^2.0.0",
|
|
63
|
-
"glob": "^
|
|
63
|
+
"glob": "^13.0.0",
|
|
64
64
|
"is-ci": "^4.1.0",
|
|
65
65
|
"memoize": "^10.1.0",
|
|
66
66
|
"pathe": "^2.0.3",
|
|
67
67
|
"type-plus": "8.0.0-beta.7",
|
|
68
|
-
"vitest-plugin-vis": "^3.5.
|
|
68
|
+
"vitest-plugin-vis": "^3.5.1"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
|
-
"@repobuddy/storybook": "^
|
|
71
|
+
"@repobuddy/storybook": "^2.0.0",
|
|
72
72
|
"@storybook-community/storybook-dark-mode": "^6.0.8",
|
|
73
|
-
"@storybook/addon-docs": "^
|
|
73
|
+
"@storybook/addon-docs": "^9.1.16",
|
|
74
74
|
"@storybook/addon-vitest": "9.1.16",
|
|
75
|
-
"@storybook/react-vite": "^9.1.
|
|
75
|
+
"@storybook/react-vite": "^9.1.16",
|
|
76
76
|
"@tailwindcss/cli": "^4.1.7",
|
|
77
77
|
"@tailwindcss/vite": "^4.1.14",
|
|
78
78
|
"@testing-library/react": "^16.0.1",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"playwright": "latest",
|
|
90
90
|
"react": "^19.0.0",
|
|
91
91
|
"react-dom": "^19.0.0",
|
|
92
|
-
"storybook": "^9.1.
|
|
92
|
+
"storybook": "^9.1.16",
|
|
93
93
|
"storybook-addon-tag-badges": "^3.0.0",
|
|
94
94
|
"tailwindcss": "^4.1.14",
|
|
95
95
|
"tsup": "^8.3.5",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { RefreshIcon } from '@storybook/icons'
|
|
2
|
-
import { memo } from 'react'
|
|
2
|
+
import React, { memo } from 'react'
|
|
3
3
|
import { AddonPanel, IconButton, Placeholder, ScrollArea } from 'storybook/internal/components'
|
|
4
4
|
import { styled } from 'storybook/internal/theming'
|
|
5
5
|
import { SNAPSHOT_ROOT_DIR } from 'vitest-plugin-vis/client-api'
|
package/src/manager.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react'
|
|
1
|
+
import React, { useEffect, useState } from 'react'
|
|
2
2
|
import { addons, types } from 'storybook/internal/manager-api'
|
|
3
3
|
import { VisPanel } from './components/vis_panel.tsx'
|
|
4
4
|
import { NAME, VIS_PANEL_ID } from './shared/contants.ts'
|