@chromatic-com/storybook 5.2.0-next.0 → 5.2.0-next.2
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/README.md +3 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/dist/index.mjs +3 -3
- package/dist/manager.mjs +40 -40
- package/dist/preset.js +7 -5
- package/dist/preview.mjs +3 -3
- package/package.json +7 -7
package/dist/preset.js
CHANGED
|
@@ -8,13 +8,15 @@ var node = require('chromatic/node');
|
|
|
8
8
|
var coreServer = require('storybook/internal/core-server');
|
|
9
9
|
var telemetry = require('storybook/internal/telemetry');
|
|
10
10
|
var filesize = require('filesize');
|
|
11
|
+
var crypto$1 = require('crypto');
|
|
11
12
|
var jsonfile = require('jsonfile');
|
|
12
13
|
|
|
13
14
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
14
|
-
var
|
|
15
|
-
${
|
|
15
|
+
var $="@chromatic-com/storybook";var a="chromaui/addon-visual-tests",H=`${a}/test-provider`,j=`${a}/configInfo`,M=`${a}/gitInfo`,V=`${a}/gitInfoError`,K=`${a}/projectInfo`,Y=`${a}/startBuild`,z=`${a}/stopBuild`,J=`${a}/localBuildProgress`,W=`${a}/startShare`,q=`${a}/cancelShare`,Q=`${a}/shareProgress`,X=`${a}/telemetry`,Z=`${a}/removeAddon`;var ee=`${a}/ChannelFetch/aborted`,te=`${a}ChannelFetch/request`,N=`${a}ChannelFetch/response`,D={autoAcceptChanges:!1,exitOnceUploaded:!1,exitZeroOnChanges:!0,forceRebuild:!0,fromCI:!1,interactive:!1,isLocalBuild:!0,logPrefix:"\x1B[38;5;202mChromatic\x1B[0m:",skip:!1,skipUpdateCheck:!0,storybookBuildDir:void 0};var {CHROMATIC_INDEX_URL:_e,CHROMATIC_BASE_URL:v=_e||"https://www.chromatic.com",CHROMATIC_API_URL:it=`${v}/api`}=process.env;var R=e=>I.includes(e),oe=e=>["upload","snapshot"].includes(e),I=["initialize","build","upload","verify","snapshot"],w={initialize:{key:"initialize",emoji:"\u{1F680}",renderName:()=>"Initialize build",renderProgress:()=>"Initializing build...",renderComplete:()=>"Initialized",estimateDuration:2e3},build:{key:"build",emoji:"\u{1F3D7}",renderName:()=>"Build Storybook",renderProgress:()=>"Building your Storybook...",renderComplete:()=>"Storybook built",estimateDuration:2e4},upload:{key:"upload",emoji:"\u{1F4E1}",renderName:()=>"Publish your Storybook",renderProgress:({stepProgress:e})=>{let{numerator:r,denominator:t}=e.upload;if(!t||!r)return "Uploading files...";let{value:o,exponent:n}=filesize.filesize(t,{output:"object",round:1}),{value:s,symbol:i}=filesize.filesize(r,{exponent:n,output:"object",round:1});return `Uploading files... ${s}/${o} ${i}`},renderComplete:()=>"Publish complete",estimateDuration:2e4},verify:{key:"verify",emoji:"\u{1F50D}",renderName:()=>"Verify your Storybook",renderProgress:()=>"Verifying contents...",renderComplete:()=>"Storybook verified",estimateDuration:2e4},snapshot:{key:"snapshot",emoji:"\u{1F4F8}",renderName:()=>"Run visual tests",renderProgress:({stepProgress:e})=>{let{numerator:r,denominator:t}=e.snapshot;return t?`Running visual tests... ${r}/${t}`:"Running visual tests..."},renderComplete:()=>"Tested your stories",estimateDuration:9e4},aborted:{key:"aborted",emoji:"\u270B",renderName:()=>"Build canceled",renderProgress:()=>"Build canceled",renderComplete:()=>"Build canceled",estimateDuration:0},complete:{key:"complete",emoji:"\u{1F389}",renderName:()=>"Visual tests completed!",renderProgress:()=>"Visual tests completed!",renderComplete:()=>"Visual tests completed!",estimateDuration:0},error:{key:"error",emoji:"\u{1F6A8}",renderName:()=>"Build failed",renderProgress:()=>"Build failed",renderComplete:()=>"Build failed",estimateDuration:0},limited:{key:"error",emoji:"\u{1F6A8}",renderName:()=>"Build limited",renderProgress:()=>"Build limited",renderComplete:()=>"Build limited",estimateDuration:0}},be={buildProgressPercentage:0,currentStep:I[0],stepProgress:Object.fromEntries(I.map(e=>[e,{}]))},ne=JSON.stringify(be);var se=2e3,P,Oe=(e,r)=>{if(!R(e))throw new Error(`Unknown step: ${e}`);let t=I.map(d=>{let{startedAt:m,completedAt:f}=r?.[d]||{};return m&&f?f-m:w[d].estimateDuration}),o=t.reduce((d,m)=>d+m,0),n=I.indexOf(e),s=t.slice(0,n).reduce((d,m)=>d+m,0),i=s+t[n],l=s/o*100,u=i/o*100;return {...w[e],startPercentage:l,endPercentage:u,stepPercentage:u-l}},B=(e,r)=>(t,{progress:o,total:n}={})=>{if(clearTimeout(r),!R(t.task))return;if(!e.value)throw new Error("Unexpected missing value for localBuildProgress");let{buildProgressPercentage:s,stepProgress:i,previousBuildProgress:l}=e.value;if(i[t.task]?.completedAt)return;let{startPercentage:u,endPercentage:d,stepPercentage:m}=Oe(t.task,l),f=u;if(o&&n&&(f+=m*(o/n)),!oe(t.task)){let{estimateDuration:S}=w[t.task],E=I.indexOf(t.task);f=Math.max(f,s)+se/S*m,r=setTimeout(()=>{if(!e.value)throw new Error("Unexpected missing value for localBuildProgress");let{currentStep:b}=e.value;R(b)&&I.indexOf(b)<=E&&B(e,r)(t);},se);}i[t.task]={startedAt:Date.now(),...i[t.task],...o&&n&&{numerator:o,denominator:n}},e.value={buildId:t.announcedBuild?.id,branch:t.git?.branch,commit:t.git?.commit,uncommittedHash:t.git?.uncommittedHash,buildProgressPercentage:Math.min(f,d),currentStep:t.task,stepProgress:i};},ie=(e,r)=>(t,o)=>{if(clearTimeout(r),!e.value)throw new Error("Unexpected missing value for localBuildProgress");let{buildProgressPercentage:n,stepProgress:s}=e.value,i={buildId:t.announcedBuild?.id,branch:t.git?.branch,buildProgressPercentage:n,stepProgress:s,previousBuildProgress:s};if(o){e.value={...i,currentStep:P?.signal.aborted?"aborted":"error",formattedError:o.formattedError,originalError:o.originalError};return}t.task&&R(t.task)&&(s[t.task]={...s[t.task],completedAt:Date.now()}),t.task==="verify"&&t.build?.wasLimited&&(e.value={...i,currentStep:"limited",stepProgress:s,errorDetailsUrl:t.build?.app.account?.billingUrl}),t.build&&t.task==="snapshot"&&(e.value={...i,buildProgressPercentage:100,currentStep:"complete",stepProgress:s,changeCount:t.build.changeCount,errorCount:t.build.errorCount});},ae=async(e,r)=>{if(!r.projectId)throw new Error("Missing projectId");if(!r.userToken)throw new Error("Missing userToken");e.value=JSON.parse(ne);let t;P?.abort(),P=new AbortController,process.env.SB_TESTBUILD="true",await node.run({flags:{interactive:!1},options:{...r,...D,experimental_onTaskStart:B(e,t),experimental_onTaskProgress:B(e,t),experimental_onTaskComplete:ie(e,t),experimental_onTaskError:ie(e,t),experimental_abortSignal:P?.signal}});},le=()=>{P?.abort(new Error("Build canceled from Storybook"));};var U=new Map,_=class{constructor(r,t=fetch){this.channel=r,this.abortControllers=new Map,this.channel.on(ee,({requestId:o})=>{this.abortControllers.get(o)?.abort(),this.abortControllers.delete(o);}),this.channel.on(te,async({requestId:o,input:n,init:s})=>{let i=new AbortController;this.abortControllers.set(o,i);try{let l=await t(n,{...s,signal:i.signal}),u=await l.text(),d=Array.from(l.headers),m={body:u,headers:d,status:l.status,statusText:l.statusText};this.channel.emit(N,{requestId:o,response:m});}catch(l){let u=l instanceof Error?l.message:String(l);this.channel.emit(N,{requestId:o,error:u});}finally{this.abortControllers.delete(o);}});}static subscribe(r,t,o=fetch){let n=U.get(r)||new _(t,o);return U.has(r)||U.set(r,n),n}};var De=e=>{let o=e.trim().replace(/#.*$/,"").replace(/^.*@/,"").replace(/^.*\/\//,"");return (o.endsWith(".git")?o:`${o}.git`).replace(":","/")},ve=e=>e.replace(/\\/g,"/"),we=(e,r)=>{if(!e)return null;let t=`${De(e)}${ve(r)}`;return crypto$1.createHash("sha256").update("chromatic-storybook-id-salt").update(t).digest("hex")},ce=async()=>{try{let{executeCommandSync:e,getProjectRoot:r}=await import('storybook/internal/common'),t=path.relative(r(),process.cwd()),o=e({command:"git",args:["config","--get","remote.origin.url"],timeout:1e3});return we(o,t)}catch{return null}};var ue="experimental_useSharedState_getValue",A="experimental_useSharedState_setValue",F=new Map,g=class{constructor(r){this.channel=r,this.listeners=[],this.state={},this.channel.on(A,(t,o,n)=>{this.state?.[t]?.index>=n||(this.state[t]={index:n,value:o});}),this.channel.on(ue,t=>{let o=this.state[t]?.index??0,n=this.state[t]?.value;this.channel.emit(A,t,n,o);});}get(r){return this.state[r]||this.channel.emit(ue,r),this.state[r]?.value}set(r,t){let o=(this.state[r]?.index??0)+1;this.state[r]={index:o,value:t},this.channel.emit(A,r,t,o);}static subscribe(r,t){let o=F.get(r)||new g(t);return F.has(r)||(F.set(r,o),o.channel.on(A,(n,s)=>{n===r&&o.listeners.forEach(i=>i(s));})),{get value(){return o.get(r)},set value(n){o.set(r,n);},on(n,s){if(n!=="change")throw new Error("unsupported event");o.listeners.push(s);},off(n,s){if(n!=="change")throw new Error("unsupported event");let i=o.listeners.indexOf(s);i>=0&&o.listeners.splice(i,1);}}}};async function de(e,r){let t=Object.entries(r).sort((o,n)=>o[0].localeCompare(n[0])).reduce((o,[n,s])=>s===null?o:Object.assign(o,{[n]:s}),{});await jsonfile.writeFile(e,t,{spaces:2});}var k=module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('out.js', document.baseURI).href))),he=node.createLogger(void 0,D);function He(e=[]){return [...e,k.resolve("./manager.mjs")]}function je(e=[]){return [...e,k.resolve("./preview.mjs")]}var Ie=async()=>{let e=(async()=>{try{let r=k.resolve("@chromatic-com/storybook/package.json"),t=await promises.readFile(r,"utf-8");return JSON.parse(t).version||null}catch{return null}})();return Ie=()=>e,e},me=(e,r,t)=>Object.fromEntries(Object.entries(t).map(([o,n])=>[o,n===r[o]?null:n]).filter(([o,n])=>n!==null||e[o]!==void 0)),fe=async(e,r)=>{let t={storybookBaseDir:".",storybookConfigDir:".storybook"},o={},n={},{repositoryRootDir:s}=await node.getGitInfo({log:he}),i=s&&path.normalize(path.relative(s,process.cwd()));i!==path.normalize(e.storybookBaseDir??"")&&(o.storybookBaseDir=i);let l=path.normalize(path.relative(process.cwd(),r.configDir));return l!==path.normalize(e.storybookConfigDir??"")&&(o.storybookConfigDir=l),e.onlyChanged===void 0&&(n.onlyChanged=!0),e.zip===void 0&&(n.zip=!0),{configuration:e,problems:me(e,t,o),suggestions:me(e,t,n)}},Me=(e,r,t,o)=>{let n,s,i,l=async()=>{try{let u=await node.getGitInfo({log:he});Object.entries(u).some(([d,m])=>n?.[d]!==m)&&r(u,n),n=u,s=void 0,i=setTimeout(l,e);}catch(u){t(u),o&&s?.message!==u.message&&(console.error(`Failed to fetch git info, with error:
|
|
16
|
+
${u}`),n=void 0,s=u),i=setTimeout(l,e);}};return l(),{cancel:()=>clearTimeout(i)}},Ve=async(e,r)=>{let t=await node.getConfiguration(e);await r(t),t.configFile&&fs.watch(t.configFile,async(o,n)=>{n&&await r(await node.getConfiguration(n));});};async function Ke(e,r){let{configFile:t,presets:o}=r;_.subscribe(a,e);let n=o.apply("experimental_serverAPI"),s=o.apply("core"),{projectId:i}=await node.getConfiguration(t),l=g.subscribe(K,e);l.value=i?{projectId:i}:{};let u=coreServer.experimental_getTestProviderStore(H),d=i;l.on("change",async({projectId:c}={})=>{if(!c||c===d)return;d=c;let h=t;try{let{configFile:p,...C}=await node.getConfiguration(h),T=p||h||"chromatic.config.json",{problems:y,suggestions:O}=await fe(C,r);await de(T,{...C,...y,...O,projectId:c}),l.value={...l.value,written:!0,dismissed:!1,configFile:T};}catch(p){console.warn(`Failed to update your main configuration:
|
|
16
17
|
|
|
17
|
-
${
|
|
18
|
-
${
|
|
18
|
+
${p}`),l.value={...l.value,written:!1,dismissed:!1,configFile:h};}});let m=g.subscribe(J,e);e.on(Y,async({accessToken:c})=>{let{projectId:h}=l.value||{};u.runWithState(async()=>{try{await ae(m,{configFile:t,projectId:h,userToken:c});}catch(p){throw console.error(`Failed to run Chromatic build, with error:
|
|
19
|
+
${p}`),p}});}),e.on(z,()=>{u.setState("test-provider-state:succeeded"),le();});let f=g.subscribe(Q,e),S=null,E=null,b=null;e.on(W,async({accessToken:c,shareRequestId:h})=>{if(E||h&&h===b)return;let p=h??crypto.randomUUID();E=p;let C=new AbortController;S=C;let T=!1;f.value={status:"pending",shareRequestId:p};try{let y=await node.share({userToken:c,abortSignal:C.signal,onUrl:O=>{f.value={status:"uploading",shareUrl:O,shareRequestId:p};},onError:O=>{T=!0,f.value={status:"error",error:O.message,shareRequestId:p};}});C.signal.aborted?f.value={status:"error",error:"canceled",canceled:!0,shareRequestId:p}:T||(f.value={status:"complete",shareUrl:y.shareUrl,daysToExpire:y.daysToExpire,shareRequestId:p},b=p);}catch(y){C.signal.aborted?f.value={status:"error",error:"canceled",canceled:!0,shareRequestId:p}:f.value={status:"error",error:y?.message||"Share failed",shareRequestId:p};}finally{S=null,E=null;}}),e.on(q,({shareRequestId:c}={})=>{c&&E&&c!==E||S?.abort();}),e.on(X,async c=>{(await s).disableTelemetry||telemetry.telemetry("addon-visual-tests",{...c,addonVersion:await Ie()});});let Ee=g.subscribe(j,e),Ce=g.subscribe(M,e),G=g.subscribe(V,e),ye=Me(5e3,c=>{G.value=void 0,Ce.value=c;},c=>{G.value=c;});return Ve(t,async c=>{d&&(Ee.value=await fe(c,r));}),e.on(Z,()=>{n.then(c=>c.removeAddon($)).catch(c=>console.error(c)),ye.cancel();}),e}async function Ye(e){let r=await ce();return r?`${e}
|
|
20
|
+
<script>window.__CHROMATIC_STORYBOOK_ID__ = ${JSON.stringify(r)};</script>`:e}var ze={managerEntries:He,managerHead:Ye,previewAnnotations:je,experimental_serverChannel:Ke,staticDirs:async e=>[...e,{from:path.join(path.dirname(k.resolve("@chromatic-com/storybook/package.json")),"assets"),to:"addon-visual-tests-assets"}],env:async(e,{configType:r})=>r==="PRODUCTION"?e:{...e,CHROMATIC_BASE_URL:v}},Ut=ze;
|
|
19
21
|
|
|
20
|
-
module.exports =
|
|
22
|
+
module.exports = Ut;
|
package/dist/preview.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { REMOVE_HIGHLIGHT, HIGHLIGHT } from 'storybook/highlight';
|
|
2
2
|
import { useChannel, useEffect } from 'storybook/preview-api';
|
|
3
3
|
|
|
4
|
-
var t="chromaui/addon-visual-tests";var
|
|
5
|
-
`)??"";return useEffect(()=>{if(r(REMOVE_HIGHLIGHT,s),!n?.selectors.length){r(h,0);return}c&&r(HIGHLIGHT,n);let
|
|
4
|
+
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(`
|
|
5
|
+
`)??"";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};
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { st as decorators, it as initialGlobals };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chromatic-com/storybook",
|
|
3
|
-
"version": "5.2.0-next.
|
|
3
|
+
"version": "5.2.0-next.2",
|
|
4
4
|
"description": "Catch unexpected visual changes & UI bugs in your stories",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook-addons",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@neoconfetti/react": "^1.0.0",
|
|
57
|
-
"chromatic": "
|
|
57
|
+
"chromatic": "16.10.0",
|
|
58
58
|
"filesize": "^10.0.12",
|
|
59
59
|
"jsonfile": "^6.1.0",
|
|
60
60
|
"strip-ansi": "^7.1.0"
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"@graphql-typed-document-node/core": "^3.2.0",
|
|
68
68
|
"@parcel/watcher": "^2.4.1",
|
|
69
69
|
"@storybook/addon-designs": "^11.1.1",
|
|
70
|
-
"@storybook/addon-docs": "^10.
|
|
71
|
-
"@storybook/icons": "^2.0.
|
|
72
|
-
"@storybook/react-vite": "^10.
|
|
70
|
+
"@storybook/addon-docs": "^10.3.0",
|
|
71
|
+
"@storybook/icons": "^2.0.2",
|
|
72
|
+
"@storybook/react-vite": "^10.3.0",
|
|
73
73
|
"@types/jsonfile": "^6.1.1",
|
|
74
74
|
"@types/node": "^22.13.5",
|
|
75
75
|
"@types/pluralize": "^0.0.29",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"eslint-plugin-prettier": "^5.2.3",
|
|
91
91
|
"eslint-plugin-react-hooks": "^5.0.0",
|
|
92
92
|
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
93
|
-
"eslint-plugin-storybook": "^10.
|
|
93
|
+
"eslint-plugin-storybook": "^10.3.0",
|
|
94
94
|
"graphql": "^16.8.1",
|
|
95
95
|
"msw": "^2.0.0",
|
|
96
96
|
"msw-storybook-addon": "^2.0.6",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"react-dom": "^18.3.1",
|
|
105
105
|
"react-joyride": "^2.7.2",
|
|
106
106
|
"rimraf": "^3.0.2",
|
|
107
|
-
"storybook": "^10.
|
|
107
|
+
"storybook": "^10.3.0",
|
|
108
108
|
"ts-dedent": "^2.2.0",
|
|
109
109
|
"tsup": "^6.6.3",
|
|
110
110
|
"typescript": "^5.7.3",
|