storybook-addon-vis 2.1.3 → 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 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';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var E=memo(function({active:s,snapshotResults:r=[],onRefresh:S}){let n=r.reduce((a,e)=>{let R=`(${e.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length+1)}) ${e.fileName}`;return a[R]=[...a[R]??[],e],a},{});return jsx(AddonPanel,{active:s,children:r.length>0?jsx(ScrollArea,{vertical:true,children:Object.entries(n).map(([a,e])=>jsx("div",{children:e.some(i=>i.type==="diff")?jsxs(Fragment,{children:[jsx(g,{failed:true,children:a}),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:a}),jsx(IconButton,{onClick:()=>S(),children:jsx(RefreshIcon,{})})]}),jsx("img",{src:`data:image/png;base64,${e[0].base64}`,alt:e[0].fileName},e[0].filePath)]})},a))}):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",h=`${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=>{globalThis.CONFIG_TYPE==="DEVELOPMENT"&&addons.add(h,{type:types.PANEL,title:"Vis",match:({tabId:s,viewMode:r})=>!s&&r==="story",render({active:s}){let[r,S]=useState([]),n=t.getCurrentStoryData();return useEffect(()=>{let a=[t.on(p,e=>{e.name===n.name&&e.importPath===n.importPath&&e.type===d&&S(e.results);})];return t.emit(p,l(n)),()=>a.forEach(e=>{e();})},[n]),s?jsx(E,{active:s,snapshotResults:r,onRefresh:()=>{t.emit(p,l(n));}}):null}});});//# sourceMappingURL=manager.js.map
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
@@ -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","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\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"]}
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":"yVAaO,IAAMA,EAAWC,IAAAA,CAAK,SAAkB,CAAE,MAAA,CAAAC,CAAAA,CAAQ,eAAA,CAAAC,CAAAA,CAAkB,EAAC,CAAG,UAAAC,CAAU,CAAA,CAAe,CACvG,IAAMC,CAAAA,CAAiBF,EAAgB,MAAA,CACtC,CAACG,CAAAA,CAAKC,CAAAA,GAAW,CAEhB,IAAMC,EAAM,CAAA,CAAA,EADMD,CAAAA,CAAO,gBAAgB,KAAA,CAAME,iBAAAA,CAAkB,OAAS,CAAC,CAClD,CAAA,EAAA,EAAKF,CAAAA,CAAO,QAAQ,CAAA,CAAA,CAC7C,OAAAD,CAAAA,CAAIE,CAAG,EAAI,CAAC,GAAIF,EAAIE,CAAG,CAAA,EAAK,EAAC,CAAID,CAAM,CAAA,CAChCD,CACR,CAAA,CACA,EACD,CAAA,CACA,OACCI,CAAAA,CAAA,cAACC,UAAAA,CAAA,CAAW,MAAA,CAAQT,CAAAA,CAAAA,CAClBC,CAAAA,CAAgB,MAAA,CAAS,EACzBO,CAAAA,CAAA,aAAA,CAACE,WAAA,CAAW,QAAA,CAAQ,MAClB,MAAA,CAAO,OAAA,CAAQP,CAAc,CAAA,CAAE,GAAA,CAAI,CAAC,CAACG,CAAAA,CAAKK,CAAO,IACjDH,CAAAA,CAAA,aAAA,CAAC,OAAI,GAAA,CAAKF,CAAAA,CAAAA,CACRK,CAAAA,CAAQ,IAAA,CAAMN,CAAAA,EAAWA,CAAAA,CAAO,OAAS,MAAM,CAAA,CAC/CG,EAAA,aAAA,CAAAA,CAAAA,CAAA,cACCA,CAAAA,CAAA,aAAA,CAACI,CAAAA,CAAA,CAAY,MAAA,CAAM,IAAA,CAAA,CAAEN,CAAI,CAAA,CACxBK,CAAAA,CAAQ,IAAKN,CAAAA,EACbG,CAAAA,CAAA,cAAC,KAAA,CAAA,CAAI,GAAA,CAAKH,CAAAA,CAAO,QAAA,CAAU,GAAA,CAAK,CAAA,sBAAA,EAAyBA,EAAO,MAAM,CAAA,CAAA,CAAI,IAAKA,CAAAA,CAAO,QAAA,CAAU,CAChG,CACF,CAAA,CAEAG,CAAAA,CAAA,aAAA,CAAAA,CAAAA,CAAA,QAAA,CAAA,IAAA,CACCA,EAAA,aAAA,CAACI,CAAAA,CAAA,KACAJ,CAAAA,CAAA,aAAA,CAAC,YAAMF,CAAI,CAAA,CACXE,CAAAA,CAAA,aAAA,CAACK,UAAAA,CAAA,CAAW,QAAS,IAAMX,CAAAA,IAC1BM,CAAAA,CAAA,aAAA,CAACM,YAAA,IAAY,CACd,CACD,CAAA,CACAN,CAAAA,CAAA,aAAA,CAAC,OACA,GAAA,CAAKG,CAAAA,CAAQ,CAAC,CAAA,CAAE,QAAA,CAChB,GAAA,CAAK,yBAAyBA,CAAAA,CAAQ,CAAC,CAAA,CAAE,MAAM,CAAA,CAAA,CAC/C,GAAA,CAAKA,EAAQ,CAAC,CAAA,CAAE,SACjB,CACD,CAEF,CACA,CACF,CAAA,CAEAH,CAAAA,CAAA,aAAA,CAACO,WAAAA,CAAA,IAAA,CAAY,sCAAoC,CAEnD,CAEF,CAAC,CAAA,CAEKH,CAAAA,CAAcI,OAAO,GAAA,CAA0B,CAAC,CAAE,KAAA,CAAAC,CAAAA,CAAO,MAAA,CAAAC,CAAO,CAAA,IAAO,CAC5E,QAAS,MAAA,CACT,UAAA,CAAY,SACZ,GAAA,CAAK,QAAA,CACL,YAAA,CAAc,QAAA,CACd,aAAA,CAAe,QAAA,CACf,gBAAiBA,CAAAA,CAASD,CAAAA,CAAM,WAAW,QAAA,CAAWA,CAAAA,CAAM,WAAW,QAAA,CACvE,KAAA,CAAOA,CAAAA,CAAM,YACd,CAAA,CAAE,CAAA,CCrEK,IAAME,CAAAA,CAAO,qBAAA,CACPC,EAAe,CAAA,EAAGD,CAAI,aCC5B,IAAME,CAAAA,CAAiC,gCAAA,CACjCC,CAAAA,CAAkC,iCAAA,CAExC,SAASC,EAA4B,CAAE,IAAA,CAAAC,EAAM,UAAA,CAAAC,CAAW,EAAyC,CACvG,OAAO,CACN,IAAA,CAAMJ,CAAAA,CACN,IAAA,CAAAG,EACA,UAAA,CAAAC,CACD,CACD,CCCAC,MAAAA,CAAO,SAASP,CAAAA,CAAOQ,CAAAA,EAAQ,CAEzB,UAAA,CAAmB,WAAA,GAAgB,aAAA,EACvCD,OAAO,GAAA,CAAIN,CAAAA,CAAc,CACxB,IAAA,CAAMQ,KAAAA,CAAM,KAAA,CACZ,MAAO,KAAA,CACP,KAAA,CAAO,CAAC,CAAE,KAAA,CAAAC,CAAAA,CAAO,SAAAC,CAAS,CAAA,GAAM,CAACD,CAAAA,EAASC,CAAAA,GAAa,QACvD,MAAA,CAAO,CAAE,MAAA,CAAA9B,CAAO,CAAA,CAAG,CAClB,GAAM,CAACC,CAAAA,CAAiB8B,CAAkB,CAAA,CAAIC,QAAAA,CAAiC,EAAE,CAAA,CAE3EC,CAAAA,CAAYN,CAAAA,CAAI,mBAAA,EAAoB,CAuB1C,OArBAO,SAAAA,CAAU,IAAM,CACf,IAAMC,CAAAA,CAAW,CAChBR,CAAAA,CAAI,EAAA,CAAGR,CAAAA,CAAOiB,CAAAA,EAAoB,CAC7BA,CAAAA,CAAM,OAASH,CAAAA,CAAU,IAAA,EACzBG,EAAM,UAAA,GAAeH,CAAAA,CAAU,YAE/BG,CAAAA,CAAM,IAAA,GAASd,CAAAA,EAClBS,CAAAA,CAAmBK,CAAAA,CAAM,OAAO,EAElC,CAAC,CAIF,EACA,OAAAT,CAAAA,CAAI,KAAKR,CAAAA,CAAMI,CAAAA,CAA4BU,CAAS,CAAC,CAAA,CAC9C,IACNE,EAAS,OAAA,CAASE,CAAAA,EAAY,CAC7BA,CAAAA,GACD,CAAC,CACH,CAAA,CAAG,CAACJ,CAAS,CAAC,CAAA,CAETjC,EAGJQ,CAAAA,CAAA,aAAA,CAACV,EAAA,CACA,MAAA,CAAQE,EACR,eAAA,CAAiBC,CAAAA,CACjB,SAAA,CAAW,IAAM,CAChB0B,CAAAA,CAAI,KAAKR,CAAAA,CAAMI,CAAAA,CAA4BU,CAAS,CAAC,EACtD,CAAA,CACD,EATmB,IAWrB,CACD,CAAC,EAEH,CAAC,CAAA","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",
3
+ "version": "2.1.5",
4
4
  "description": "Storybook Vitest visual testing addon",
5
5
  "keywords": [
6
6
  "image-snapshot",
@@ -45,7 +45,7 @@
45
45
  "require": "./dist/vitest-setup.cjs"
46
46
  },
47
47
  "./vitest-plugin": {
48
- "types": "./vitest-plugin.d.ts",
48
+ "types": "./dist/vitest-plugin.d.ts",
49
49
  "import": "./dist/vitest-plugin.js"
50
50
  },
51
51
  "./package.json": "./package.json"
@@ -59,29 +59,29 @@
59
59
  "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,stories,study}.*"
60
60
  ],
61
61
  "dependencies": {
62
- "@storybook/icons": "^1.6.0",
63
- "glob": "^11.0.2",
62
+ "@storybook/icons": "^2.0.0",
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.0"
68
+ "vitest-plugin-vis": "^3.5.1"
69
69
  },
70
70
  "devDependencies": {
71
- "@repobuddy/storybook": "^1.0.1",
72
- "@storybook-community/storybook-dark-mode": "^6.0.7",
73
- "@storybook/addon-docs": "^9.1.10",
74
- "@storybook/addon-vitest": "9.1.10",
75
- "@storybook/react-vite": "^9.1.10",
71
+ "@repobuddy/storybook": "^2.0.0",
72
+ "@storybook-community/storybook-dark-mode": "^6.0.8",
73
+ "@storybook/addon-docs": "^9.1.16",
74
+ "@storybook/addon-vitest": "9.1.16",
75
+ "@storybook/react-vite": "^9.1.16",
76
76
  "@tailwindcss/cli": "^4.1.7",
77
- "@tailwindcss/vite": "^4.1.7",
77
+ "@tailwindcss/vite": "^4.1.14",
78
78
  "@testing-library/react": "^16.0.1",
79
- "@types/react": "^19.0.0",
80
- "@types/react-dom": "^19.0.0",
79
+ "@types/react": "^19.2.2",
80
+ "@types/react-dom": "^19.2.1",
81
81
  "@vitejs/plugin-react": "^5.0.0",
82
82
  "@vitest/browser": "^3.2.4",
83
- "@vitest/coverage-istanbul": "^3.2.4",
84
- "@vitest/expect": "^3.2.4",
83
+ "@vitest/coverage-istanbul": "^4.0.3",
84
+ "@vitest/expect": "^4.0.6",
85
85
  "boxen": "^8.0.1",
86
86
  "cross-env": "^10.0.0",
87
87
  "dedent": "^1.5.1",
@@ -89,12 +89,12 @@
89
89
  "playwright": "latest",
90
90
  "react": "^19.0.0",
91
91
  "react-dom": "^19.0.0",
92
- "storybook": "^9.1.10",
93
- "storybook-addon-tag-badges": "^2.0.2",
92
+ "storybook": "^9.1.16",
93
+ "storybook-addon-tag-badges": "^3.0.0",
94
94
  "tailwindcss": "^4.1.14",
95
95
  "tsup": "^8.3.5",
96
- "typescript": "^5.7.2",
97
- "vite": "^7.1.9",
96
+ "typescript": "^5.9.3",
97
+ "vite": "^7.1.12",
98
98
  "vitest": "^3.2.4",
99
99
  "vitest-browser-react": "^1.0.0",
100
100
  "webdriverio": "latest",
@@ -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'