storybook-addon-tag-badges/dist/index.js

Display Storybook tags as badges in the sidebar and toolbar.

import n,{useMemo,Fragment}from'react';import {addons,useStorybookApi}from'@storybook/manager-api';import {styled,useTheme}from'@storybook/theming';import {WithTooltip,TooltipMessage}from'@storybook/components';function l(e){let[t,...r]=e.split(":");return {prefix:t,suffix:r.join(":")||null}}function y(e){return l(e).prefix}function f(e){return l(e).suffix}function D(e,t){let r=[t].flat();for(let o of r)if(o instanceof RegExp){if(e.match(o))return  true}else if(typeof o=="string"){if(e===o)return  true}else {let{prefix:s,suffix:a}=l(e),i=o.prefix??"[^:]+",p=o.suffix??".+";if(s.match(i)&&(a&&p||!a&&!p)&&a?.match(p))return  true}return  false}function m(e,t){return e.filter(r=>D(r,t))}var E=[{tags:"new",badge:{text:"New",bgColor:"hsl(130, 100%, 74%)",borderColor:"hsl(130, 100%, 34%)",fgColor:"hsl(130, 100%, 6%)"}},{tags:["alpha","beta","rc","experimental"],badge:({tag:e})=>({text:e==="rc"?"Release candidate":(r=>r[0].toUpperCase()+r.slice(1))(e),bgColor:"hsl(257, 100%, 84%)",borderColor:"hsl(257, 100%, 64%)",fgColor:"hsl(257, 100%, 12%)"})},{tags:"deprecated",badge:{text:"Deprecated",bgColor:"hsl(36, 100%, 74%)",borderColor:"hsl(36, 100%, 34%)",fgColor:"hsl(36, 100%, 12%)"}},{tags:"outdated",badge:{text:"Outdated",bgColor:"hsl(12, 100%, 74%)",borderColor:"hsl(12, 100%, 34%)",fgColor:"hsl(12, 100%, 12%)"}},{tags:"danger",badge:{text:"Danger",bgColor:"hsl(0, 100%, 44%)",borderColor:"hsl(0, 100%, 64%)",fgColor:"hsl(0, 100%, 94%)"}},{tags:["code-only"],badge:{text:"Code Only",bgColor:"hsl(84, 0%, 84%)",borderColor:"hsl(84, 0%, 34%)",fgColor:"hsl(84, 0%, 12%)"}},{tags:{prefix:"version"},badge:({getTagSuffix:e,tag:t})=>{let r=e(t),o=r?.startsWith("0"),s=o?66:194;return {text:`${r}`,bgColor:`hsl(${s}, 100%, 74%)`,borderColor:`hsl(${s}, 100%, 34%)`,fgColor:`hsl(${s}, 100%, 12%)`,tooltip:`Version ${r}${o?". Experimental!":""}`}}}];var u="tagBadges";var c={sidebar:[{skipInherited:true},{type:"component",skipInherited:false},{type:"group",skipInherited:false}],toolbar:[{type:"docs"},{type:"story"}]};function b(e,t){return e===undefined?[...t]:(Array.isArray(e)?e:[e]).map(o=>typeof o=="boolean"?o?[{skipInherited:false}]:[]:typeof o=="string"?[{type:o}]:o).flat()}function O(e){return {sidebar:b(e?.sidebar,c.sidebar),toolbar:b(e?.toolbar,c.toolbar)}}function h({config:e,context:t,type:r}){if(r==="root")return "never";let o=O(e.display)[t],s="never";for(let a of o)if(!(a.type!==undefined&&a.type!==r)){if(t!=="toolbar"&&a.skipInherited!==false){s="skip-inherited";continue}s="always";break}return s}function x({context:e,parameters:t,parentTags:r,tags:o,type:s}){return useMemo(()=>!o||!s?[]:(t||[]).map(a=>({...a,displayOutcome:h({context:e,config:a,type:s})})).filter(({displayOutcome:a})=>a!=="never").flatMap(a=>m(o,a.tags).map(i=>({badge:a.badge,displayOutcome:a.displayOutcome,tag:i}))).filter(({displayOutcome:a,tag:i})=>a!=="skip-inherited"||!r?.includes(i)).reduce((a,i)=>(a.every(({tag:p})=>p!==i.tag)&&a.push(i),a),[]),[t,r,o,s])}var k=styled(WithTooltip)`
  line-height: 1px;
`,P=styled.div(({as:e,bgColor:t,borderColor:r,fgColor:o,context:s,theme:a})=>({display:"inline-block",fontSize:11,lineHeight:".75rem",alignSelf:"center",padding:s==="sidebar"?"3px 8px":"4px 12px",border:"none",cursor:e==="button"?"help":s==="sidebar"?"cursor":"initial",borderRadius:"3em",fontWeight:a.typography.weight.bold,background:t??a.color.mediumlight,boxShadow:a.base==="light"?`inset 0 0 0 1px ${r??`color-mix(in oklab, ${o??a.color.dark} 10%, transparent 90%)`}`:`inset 0 0 0 1px ${r??"none"}`,color:o??a.color.dark})),H=styled.div(({theme:e})=>({padding:"8px 12px",boxSizing:"border-box",color:e.color.defaultText,lineHeight:"1.125rem"})),F=({context:e,text:t,tooltip:r,...o})=>{let s=useTheme();return n.createElement(Fragment,null,!r||e=="sidebar"?n.createElement(P,{...o,context:e,theme:s},t):n.createElement(k,{closeOnOutsideClick:true,placement:"bottom",tooltip:typeof r=="string"?n.createElement(H,null,r):n.createElement(TooltipMessage,{...r})},n.createElement(P,{as:"button",...o,context:e,theme:s},t)))};function W(e,t,r){return typeof e=="function"?e({entry:t,getTagParts:l,getTagPrefix:y,getTagSuffix:f,tag:r}):e}var T=({config:e,entry:t,tag:r,...o})=>{let s=W(e,t,r);return n.createElement(F,{...s,...o})};var R=styled.div`
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin-right: 32px;
`,d=({children:e,item:t})=>{let{[u]:r}=addons.getConfig(),o=useStorybookApi();if(t.type!=="component"&&t.type!=="group"&&t.type!=="docs"&&t.type!=="story")return e;let s;if(t.parent){let i=o.resolveStory(t.parent);i&&i.type!=="root"&&(s=i.tags);}let a=x({context:"sidebar",parameters:r,parentTags:s,tags:t.tags,type:t.type});return n.createElement(R,null,e,a.length?n.createElement(T,{config:a[0].badge,context:"sidebar",entry:t,tag:a[0].tag}):"")};function K(e){if(!(e.type!=="story"&&e.type!=="group"&&e.type!=="docs"&&e.type!=="component"))return n.createElement(d,{item:e},e.name)}export{d as Sidebar,E as defaultConfig,l as getTagParts,y as getTagPrefix,f as getTagSuffix,D as matchTag,m as matchTags,K as renderLabel};//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map