flare-storybook-addon-data-theme-switcher
Version:
A Storybook addon to switch the data-theme attribute on the html element
15 lines (11 loc) • 6.64 kB
JavaScript
;
var managerApi = require('@storybook/manager-api');
var types = require('@storybook/types');
var v = require('react');
var components = require('@storybook/components');
var theming = require('@storybook/theming');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var v__default = /*#__PURE__*/_interopDefault(v);
var F=Object.create;var M=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var y=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,a)=>(typeof require<"u"?require:t)[a]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var W=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var Y=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of $(t))!R.call(e,s)&&s!==a&&M(e,s,{get:()=>t[s],enumerable:!(o=P(t,s))||o.enumerable});return e};var j=(e,t,a)=>(a=e!=null?F(K(e)):{},Y(t||!e||!e.__esModule?M(a,"default",{value:e,enumerable:!0}):a,e));var q=W((A,S)=>{(function(e){if(typeof A=="object"&&typeof S<"u")S.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,c,f){function i(r,u){if(!c[r]){if(!s[r]){var h=typeof y=="function"&&y;if(!u&&h)return h(r,!0);if(n)return n(r,!0);var p=new Error("Cannot find module '"+r+"'");throw p.code="MODULE_NOT_FOUND",p}var l=c[r]={exports:{}};s[r][0].call(l.exports,function(d){var g=s[r][1][d];return i(g||d)},l,l.exports,o,s,c,f);}return c[r].exports}for(var n=typeof y=="function"&&y,m=0;m<f.length;m++)i(f[m]);return i}({1:[function(o,s,c){s.exports=function(f){if(typeof Map!="function"||f){var i=o("./similar");return new i}else return new Map};},{"./similar":2}],2:[function(o,s,c){function f(){return this.list=[],this.lastItem=void 0,this.size=0,this}f.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},f.prototype.set=function(i,n){var m;return this.lastItem&&this.isEqual(this.lastItem.key,i)?(this.lastItem.val=n,this):(m=this.indexOf(i),m>=0?(this.lastItem=this.list[m],this.list[m].val=n,this):(this.lastItem={key:i,val:n},this.list.push(this.lastItem),this.size++,this))},f.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]},f.prototype.has=function(i){var n;return this.lastItem&&this.isEqual(this.lastItem.key,i)?!0:(n=this.indexOf(i),n>=0?(this.lastItem=this.list[n],!0):!1)},f.prototype.forEach=function(i,n){var m;for(m=0;m<this.size;m++)i.call(n||this,this.list[m].val,this.list[m].key,this);},f.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},f.prototype.isEqual=function(i,n){return i===n||i!==i&&n!==n},s.exports=f;},{}],3:[function(o,s,c){var f=o("map-or-similar");s.exports=function(r){var u=new f(!1),h=[];return function(p){var l=function(){var d=u,g,C,T=arguments.length-1,w=Array(T+1),I=!0,x;if((l.numArgs||l.numArgs===0)&&l.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(w[x]={cacheItem:d,arg:arguments[x]},d.has(arguments[x])){d=d.get(arguments[x]);continue}I=!1,g=new f(!1),d.set(arguments[x],g),d=g;}return I&&(d.has(arguments[T])?C=d.get(arguments[T]):I=!1),I||(C=p.apply(null,arguments),d.set(arguments[T],C)),r>0&&(w[T]={cacheItem:d,arg:arguments[T]},I?i(h,w):h.push(w),h.length>r&&n(h.shift())),l.wasMemoized=I,l.numArgs=T+1,C};return l.limit=r,l.wasMemoized=!1,l.cache=u,l.lru=h,l}};function i(r,u){var h=r.length,p=u.length,l,d,g;for(d=0;d<h;d++){for(l=!0,g=0;g<p;g++)if(!m(r[d][g].arg,u[g].arg)){l=!1;break}if(l)break}r.push(r.splice(d,1)[0]);}function n(r){var u=r.length,h=r[u-1],p,l;for(h.cacheItem.delete(h.arg),l=u-2;l>=0&&(h=r[l],p=h.cacheItem.get(h.arg),!p||!p.size);l--)h.cacheItem.delete(h.arg);}function m(r,u){return r===u||r!==r&&u!==u}},{"map-or-similar":1}]},{},[3])(3)});});var k="storybook/addon-data-theme-switcher",b=`${k}/tool`,z="dataTheme";var E=j(q(),1);var H={clearable:!0,list:[]};function O(e){let t=e instanceof Array?{list:e}:e;return {...H,...t}}function L(e,t,a){return e.length?a==="none"||a&&e.find(o=>o.name===a)?a: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:a})=>a===t)}var _=theming.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, E.default)(1e3)((e,t,a,o,s,c)=>({id:e,title:t,onClick:()=>{s({selected:e,expanded:!1});},value:e,right:o?v__default.default.createElement(_,{background:a}):void 0,active:c})),re=(0, E.default)(10)((e,t,a)=>{let{clearable:o,list:s,default:c}=O(e),f=L(s,c,t.selected),i=[],n;return f!=="none"&&o&&i.push(G("none","Clear data-theme","transparent",!1,a,!1)),s.length&&(i=[...i,...s.map(({dataTheme:m,color:r,name:u})=>G(u??m,u??m,r??"transparent",!0,a,u===f))],n=D(s,f)),{items:i,selectedTheme:n}}),U=()=>{let[e,t]=v.useState({list:[]}),[a,o]=v.useState({selected:void 0,expanded:!1}),[{dataTheme:s,dataThemes:c},f]=managerApi.useGlobals();v.useEffect(()=>{t({default:s,...c});},[s,c,t]);let i=v.useCallback(r=>{o(r);let{list:u}=O(e),h=D(u,r.selected);f({[z]:h?.dataTheme??"none"});let{onChange:p}=O(e);typeof p=="function"&&p(h);},[e,f]),{items:n,selectedTheme:m}=v.useMemo(()=>re(e,a,i),[e,a,i]);return e.list&&e.list.length>0?v__default.default.createElement(components.WithTooltip,{key:b,placement:"top",trigger:"click",visible:a.expanded,tooltip:v__default.default.createElement(components.TooltipLinkList,{links:n})},v__default.default.createElement(components.IconButton,{active:m!==void 0,key:b,placeholder:m?.name??"none",title:"Change data-theme attribute",onClick:()=>o(r=>({...r,expanded:!r.expanded}))},v__default.default.createElement(components.Icons,{icon:"paintbrush"}))):null};managerApi.addons.register(k,()=>{managerApi.addons.add(b,{title:"Data Theme Switcher",type:types.Addon_TypesEnum.TOOL,match:({viewMode:e})=>!!e?.match(/^(story|docs)$/),render:U});});
//# sourceMappingURL=out.js.map
//# sourceMappingURL=manager.cjs.map