storybook-addon-data-theme-switcher
Version:
A Storybook addon to switch the data-theme attribute on the html element
2 lines • 6.45 kB
JavaScript
import {addons,types}from'storybook/internal/manager-api';import v,{useState,useEffect,useCallback,useMemo}from'react';import {useGlobals}from'storybook/manager-api';import {WithTooltip,TooltipLinkList,IconButton}from'storybook/internal/components';import*as ie from'@storybook/icons';import {styled}from'storybook/theming';var U=Object.create;var M=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var I=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,f)=>(typeof require<"u"?require:t)[f]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var P=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var W=(e,t,f,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of H(t))!$.call(e,s)&&s!==f&&M(e,s,{get:()=>t[s],enumerable:!(o=F(t,s))||o.enumerable});return e};var j=(e,t,f)=>(f=e!=null?U(Y(e)):{},W(M(f,"default",{value:e,enumerable:true}),e));var z=P((A,k)=>{(function(e){if(typeof A=="object"&&typeof k<"u")k.exports=e();else if(typeof define=="function"&&define.amd)define([],e);else {var t;typeof window<"u"?t=window:typeof global<"u"?t=global:typeof self<"u"?t=self:t=this,t.memoizerific=e();}})(function(){return function o(s,d,l){function i(r,c){if(!d[r]){if(!s[r]){var m=typeof I=="function"&&I;if(!c&&m)return m(r,true);if(n)return n(r,true);var p=new Error("Cannot find module '"+r+"'");throw p.code="MODULE_NOT_FOUND",p}var a=d[r]={exports:{}};s[r][0].call(a.exports,function(h){var g=s[r][1][h];return i(g||h)},a,a.exports,o,s,d,l);}return d[r].exports}for(var n=typeof I=="function"&&I,u=0;u<l.length;u++)i(l[u]);return i}({1:[function(o,s,d){s.exports=function(l){if(typeof Map!="function"||l){var i=o("./similar");return new i}else return new Map};},{"./similar":2}],2:[function(o,s,d){function l(){return this.list=[],this.lastItem=void 0,this.size=0,this}l.prototype.get=function(i){var n;if(this.lastItem&&this.isEqual(this.lastItem.key,i))return this.lastItem.val;if(n=this.indexOf(i),n>=0)return this.lastItem=this.list[n],this.list[n].val},l.prototype.set=function(i,n){var u;return this.lastItem&&this.isEqual(this.lastItem.key,i)?(this.lastItem.val=n,this):(u=this.indexOf(i),u>=0?(this.lastItem=this.list[u],this.list[u].val=n,this):(this.lastItem={key:i,val:n},this.list.push(this.lastItem),this.size++,this))},l.prototype.delete=function(i){var n;if(this.lastItem&&this.isEqual(this.lastItem.key,i)&&(this.lastItem=void 0),n=this.indexOf(i),n>=0)return this.size--,this.list.splice(n,1)[0]},l.prototype.has=function(i){var n;return this.lastItem&&this.isEqual(this.lastItem.key,i)?true:(n=this.indexOf(i),n>=0?(this.lastItem=this.list[n],true):false)},l.prototype.forEach=function(i,n){var u;for(u=0;u<this.size;u++)i.call(n||this,this.list[u].val,this.list[u].key,this);},l.prototype.indexOf=function(i){var n;for(n=0;n<this.size;n++)if(this.isEqual(this.list[n].key,i))return n;return -1},l.prototype.isEqual=function(i,n){return i===n||i!==i&&n!==n},s.exports=l;},{}],3:[function(o,s,d){var l=o("map-or-similar");s.exports=function(r){var c=new l(false),m=[];return function(p){var a=function(){var h=c,g,C,T=arguments.length-1,E=Array(T+1),y=true,x;if((a.numArgs||a.numArgs===0)&&a.numArgs!==T+1)throw new Error("Memoizerific functions should always be called with the same number of arguments");for(x=0;x<T;x++){if(E[x]={cacheItem:h,arg:arguments[x]},h.has(arguments[x])){h=h.get(arguments[x]);continue}y=false,g=new l(false),h.set(arguments[x],g),h=g;}return y&&(h.has(arguments[T])?C=h.get(arguments[T]):y=false),y||(C=p.apply(null,arguments),h.set(arguments[T],C)),r>0&&(E[T]={cacheItem:h,arg:arguments[T]},y?i(m,E):m.push(E),m.length>r&&n(m.shift())),a.wasMemoized=y,a.numArgs=T+1,C};return a.limit=r,a.wasMemoized=false,a.cache=c,a.lru=m,a}};function i(r,c){var m=r.length,p=c.length,a,h,g;for(h=0;h<m;h++){for(a=true,g=0;g<p;g++)if(!u(r[h][g].arg,c[g].arg)){a=false;break}if(a)break}r.push(r.splice(h,1)[0]);}function n(r){var c=r.length,m=r[c-1],p,a;for(m.cacheItem.delete(m.arg),a=c-2;a>=0&&(m=r[a],p=m.cacheItem.get(m.arg),!p||!p.size);a--)m.cacheItem.delete(m.arg);}function u(r,c){return r===c||r!==r&&c!==c}},{"map-or-similar":1}]},{},[3])(3)});});var O="storybook/addon-data-theme-switcher",b=`${O}/tool`,_="dataTheme";var S=j(z());var J={clearable:true,list:[]};function w(e){let t=e instanceof Array?{list:e}:e;return {...J,...t}}function q(e,t,f){return e.length?f==="none"||f&&e.find(o=>o.name===f)?f:t&&e.find(o=>o.dataTheme===t)?e.find(o=>o.dataTheme===t)?.name??"none":t||(e.find(o=>o.default)?e.find(o=>o.default)?.name??"none":"none"):"none"}function D(e,t){return e.find(({name:f})=>f===t)}var L=styled.span(({background:e})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background:e}),({theme:e})=>({boxShadow:`${e.appBorderColor} 0 0 0 1px inset`}));var G=(0, S.default)(1e3)((e,t,f,o,s,d)=>({id:e,title:t,onClick:()=>{s({selected:e,expanded:false});},value:e,right:o?v.createElement(L,{background:f}):void 0,active:d})),re=(0, S.default)(10)((e,t,f)=>{let{clearable:o,list:s,default:d}=w(e),l=q(s,d,t.selected),i=[],n;return l!=="none"&&o&&i.push(G("none","Clear data-theme","transparent",false,f,false)),s.length&&(i=[...i,...s.map(({dataTheme:u,color:r,name:c})=>G(c??u,c??u,r??"transparent",true,f,c===l))],n=D(s,l)),{items:i,selectedTheme:n}}),B=()=>{let[e,t]=useState({list:[]}),[f,o]=useState({selected:void 0,expanded:false}),[{dataTheme:s,dataThemes:d},l]=useGlobals();useEffect(()=>{t({default:s,...d});},[s,d,t]);let i=useCallback(m=>{o(m);let{list:p}=w(e),a=D(p,m.selected);l({[_]:a?.dataTheme??"none"});let{onChange:h}=w(e);typeof h=="function"&&h(a);},[e,l]),{items:n,selectedTheme:u}=useMemo(()=>re(e,f,i),[e,f,i]),r=e.toolbar?.icon??"PaintBrushIcon",c=ie[r];return e.list&&e.list.length>0?v.createElement(WithTooltip,{key:b,placement:"top",trigger:"click",visible:f.expanded,tooltip:v.createElement(TooltipLinkList,{links:n})},v.createElement(IconButton,{active:u!==void 0,key:b,title:e.toolbar?.title??"Change data-theme attribute",onClick:()=>o(m=>({...m,expanded:!m.expanded}))},v.createElement(c,null))):null};addons.register(O,()=>{addons.add(b,{title:"Data Theme Switcher",type:types.TOOL,match:({viewMode:e})=>!!e?.match(/^(story|docs)$/),render:B});});//# sourceMappingURL=manager.js.map
//# sourceMappingURL=manager.js.map