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

Display Storybook tags as badges in the sidebar and toolbar.

import p,{useMemo,Fragment}from'react';import {addons,types,useStorybookApi}from'@storybook/manager-api';import {WithTooltip,TooltipMessage}from'@storybook/components';import {styled,useTheme}from'@storybook/theming';var y="storybook/addon-tag-badges",g=`${y}/tool`,l="tagBadges";function d(t){let[e,...r]=t.split(":");return {prefix:e,suffix:r.join(":")||null}}function x(t){return d(t).prefix}function T(t){return d(t).suffix}function N(t,e){let r=[e].flat();for(let o of r)if(o instanceof RegExp){if(t.match(o))return  true}else if(typeof o=="string"){if(t===o)return  true}else {let{prefix:s,suffix:a}=d(t),i=o.prefix??"[^:]+",n=o.suffix??".+";if(s.match(i)&&(a&&n||!a&&!n)&&a?.match(n))return  true}return  false}function P(t,e){return t.filter(r=>N(r,e))}var $=styled(WithTooltip)`
  line-height: 1px;
`,D=styled.div(({as:t,bgColor:e,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:t==="button"?"help":s==="sidebar"?"cursor":"initial",borderRadius:"3em",fontWeight:a.typography.weight.bold,background:e??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})),K=styled.div(({theme:t})=>({padding:"8px 12px",boxSizing:"border-box",color:t.color.defaultText,lineHeight:"1.125rem"})),U=({context:t,text:e,tooltip:r,...o})=>{let s=useTheme();return p.createElement(Fragment,null,!r||t=="sidebar"?p.createElement(D,{...o,context:t,theme:s},e):p.createElement($,{closeOnOutsideClick:true,placement:"bottom",tooltip:typeof r=="string"?p.createElement(K,null,r):p.createElement(TooltipMessage,{...r})},p.createElement(D,{as:"button",...o,context:t,theme:s},e)))};function Y(t,e,r){return typeof t=="function"?t({entry:e,getTagParts:d,getTagPrefix:x,getTagSuffix:T,tag:r}):t}var f=({config:t,entry:e,tag:r,...o})=>{let s=Y(t,e,r);return p.createElement(U,{...s,...o})};var B={sidebar:[{skipInherited:true},{type:"component",skipInherited:false},{type:"group",skipInherited:false}],toolbar:[{type:"docs"},{type:"story"}]};function E(t,e){return t===undefined?[...e]:(Array.isArray(t)?t:[t]).map(o=>typeof o=="boolean"?o?[{skipInherited:false}]:[]:typeof o=="string"?[{type:o}]:o).flat()}function v(t){return {sidebar:E(t?.sidebar,B.sidebar),toolbar:E(t?.toolbar,B.toolbar)}}function I({config:t,context:e,type:r}){if(r==="root")return "never";let o=v(t.display)[e],s="never";for(let a of o)if(!(a.type!==undefined&&a.type!==r)){if(e!=="toolbar"&&a.skipInherited!==false){s="skip-inherited";continue}s="always";break}return s}function m({context:t,parameters:e,parentTags:r,tags:o,type:s}){return useMemo(()=>!o||!s?[]:(e||[]).map(a=>({...a,displayOutcome:I({context:t,config:a,type:s})})).filter(({displayOutcome:a})=>a!=="never").flatMap(a=>P(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:n})=>n!==i.tag)&&a.push(i),a),[]),[e,r,o,s])}var V=styled.div`
  content: ' ';
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 2px;
  margin-right: 2px;
  display: inline-block;
`,M=styled.div`
  display: flex;
  align-items: center;
  gap: 6px;

  &:last-child div:last-child {
    display: none;
  }
`,C=function({api:e}){let{[l]:r}=addons.getConfig(),o=e.getCurrentStoryData(),{tags:s,type:a}=o??{},i=m({context:"toolbar",parameters:r,tags:s,type:a});return i.length?p.createElement(M,{key:g},i.map(({badge:n,tag:h})=>p.createElement(f,{config:n,context:"toolbar",entry:o,key:h,tag:h})),p.createElement(V,null)):""};var A=[{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:t})=>({text:t==="rc"?"Release candidate":(r=>r[0].toUpperCase()+r.slice(1))(t),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:t,tag:e})=>{let r=t(e),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 q=styled.div`
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin-right: 32px;
`,S=({children:t,item:e})=>{let{[l]:r}=addons.getConfig(),o=useStorybookApi();if(e.type!=="component"&&e.type!=="group"&&e.type!=="docs"&&e.type!=="story")return t;let s;if(e.parent){let i=o.resolveStory(e.parent);i&&i.type!=="root"&&(s=i.tags);}let a=m({context:"sidebar",parameters:r,parentTags:s,tags:e.tags,type:e.type});return p.createElement(q,null,t,a.length?p.createElement(f,{config:a[0].badge,context:"sidebar",entry:e,tag:a[0].tag}):"")};function _(t){if(!(t.type!=="story"&&t.type!=="group"&&t.type!=="docs"&&t.type!=="component"))return p.createElement(S,{item:t},t.name)}addons.register(y,t=>{addons.add(g,{type:types.TOOL,title:"Tag Badges",render:()=>p.createElement(C,{api:t})});});addons.setConfig({[l]:A,sidebar:{renderLabel:_}});//# sourceMappingURL=manager.js.map
//# sourceMappingURL=manager.js.map