@chromatic-com/storybook 5.0.2 → 5.1.0-next.0

package/dist/index.d.ts

@@ -105,8 +105,12 @@ interface ChromaticParameters {
         viewports?: number[];
     };
 }
+interface ChromaticGlobals {
+    ignoredRegions?: boolean;
+}
 interface ChromaticTypes {
     parameters: ChromaticParameters;
+    globals: ChromaticGlobals;
 }
 
 declare const _default: () => storybook_internal_csf.PreviewAddon<ChromaticTypes>;

package/dist/index.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var csf = require('storybook/internal/csf');
+var highlight = require('storybook/highlight');
+var previewApi = require('storybook/preview-api');
 
-var r=()=>csf.definePreviewAddon({});
+var T=Object.defineProperty;var x=(o,n)=>{for(var r in n)T(o,r,{get:n[r],enumerable:!0});};var h={};x(h,{decorators:()=>b,initialGlobals:()=>F});process.env;var t="chromaui/addon-visual-tests";var p="highlightIgnored",c=`${t}/highlightIgnored`,d=`${t}/highlightIgnored/count`,_=`${t}/highlightIgnored/select`,E=['[data-chromatic="ignore"]','[class~="chromatic-ignore"]'];var G={backgroundColor:"rgba(255, 173, 51, 0.2)",outline:"1px solid rgba(255, 173, 51, 0.7)",outlineOffset:"-1px"},R={backgroundColor:"rgba(255, 173, 51, 0.1)",outlineWidth:"2px"},S={backgroundColor:"transparent",outlineWidth:"2px"},L=o=>{if(!o)return !1;if(typeof document>"u")return !0;try{return document.createDocumentFragment().querySelector(o),!0}catch{return console.warn(`Invalid ignoreSelector: ${o}`),!1}},u=o=>{let n=o?.ignoreSelectors??[],r=Array.from(new Set(E.concat(n.filter(L))));return {id:c,selectors:r,styles:G,hoverStyles:R,focusStyles:S,menu:r.map(e=>{let l=E.includes(e);return [{id:`${e}-info`,title:"Element ignored in visual tests",description:l?`${e} will be ignored by Chromatic`:`${e} matches an ignored selector`,selectors:[e]},{id:`${e}-link`,iconLeft:"info",iconRight:"shareAlt",title:"Learn how to configure ignored elements",clickEvent:_,selectors:[e]}]})}};var N=(o,{globals:n,parameters:r,id:e})=>{let l=!!n[p],s=previewApi.useChannel({}),i=u(r.chromatic),O=i?.selectors.join(`
+`)??"";return previewApi.useEffect(()=>{if(s(highlight.REMOVE_HIGHLIGHT,c),!i?.selectors.length){s(d,0);return}l&&s(highlight.HIGHLIGHT,i);let H=document.getElementById("storybook-root"),C=i.selectors.reduce((a,g)=>(document.querySelectorAll(`:is(${g}):not([id^="storybook-"], [id^="storybook-"] *, [class^="sb-"], [class^="sb-"] *)`).forEach(I=>a.add(I)),(H?.querySelectorAll(g)??[]).forEach(I=>a.add(I)),a),new Set);return s(d,C.size),()=>s(highlight.REMOVE_HIGHLIGHT,c)},[s,i,e,O,l]),o()},b=[N],F={[p]:!1};var gt=()=>csf.definePreviewAddon(h);
 
-module.exports = r;
+module.exports = gt;

package/dist/index.mjs

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