@chromatic-com/storybook/dist/preview.mjs

Catch unexpected visual changes & UI bugs in your stories

import { REMOVE_HIGHLIGHT, HIGHLIGHT } from 'storybook/highlight';
import { useChannel, useEffect } from 'storybook/preview-api';

var t="chromaui/addon-visual-tests";var E="highlightIgnored",s=`${t}/highlightIgnored`,h=`${t}/highlightIgnored/count`,g=`${t}/highlightIgnored/select`,p=['[data-chromatic="ignore"]','[class~="chromatic-ignore"]'];var O={backgroundColor:"rgba(255, 173, 51, 0.2)",outline:"1px solid rgba(255, 173, 51, 0.7)",outlineOffset:"-1px"},S={backgroundColor:"rgba(255, 173, 51, 0.1)",outlineWidth:"2px"},x={backgroundColor:"transparent",outlineWidth:"2px"},G=e=>{if(!e)return !1;if(typeof document>"u")return !0;try{return document.createDocumentFragment().querySelector(e),!0}catch{return console.warn(`Invalid ignoreSelector: ${e}`),!1}},u=e=>{let l=e?.ignoreSelectors??[],i=Array.from(new Set(p.concat(l.filter(G))));return {id:s,selectors:i,styles:O,hoverStyles:S,focusStyles:x,menu:i.map(o=>{let c=p.includes(o);return [{id:`${o}-info`,title:"Element ignored in visual tests",description:c?`${o} will be ignored by Chromatic`:`${o} matches an ignored selector`,selectors:[o]},{id:`${o}-link`,iconLeft:"info",iconRight:"shareAlt",title:"Learn how to configure ignored elements",clickEvent:g,selectors:[o]}]})}};var C=(e,{globals:l,parameters:i,id:o})=>{let c=!!l[E],r=useChannel({}),n=u(i.chromatic),m=n?.selectors.join(`
`)??"";return useEffect(()=>{if(r(REMOVE_HIGHLIGHT,s),!n?.selectors.length){r(h,0);return}c&&r(HIGHLIGHT,n);let H=document.getElementById("storybook-root"),f=n.selectors.reduce((a,d)=>(document.querySelectorAll(`:is(${d}):not([id^="storybook-"], [id^="storybook-"] *, [class^="sb-"], [class^="sb-"] *)`).forEach(I=>a.add(I)),(H?.querySelectorAll(d)??[]).forEach(I=>a.add(I)),a),new Set);return r(h,f.size),()=>r(REMOVE_HIGHLIGHT,s)},[r,n,o,m,c]),e()},st=[C],it={[E]:!1};

export { st as decorators, it as initialGlobals };