@etchteam/storybook-addon-status/dist/manager.js

Add component status to the storybook UI

import P from'lodash/startCase';import y from'react';import {addons,types,useStorybookApi,useParameter}from'storybook/manager-api';import {styled,css}from'storybook/theming';var m="#2f2f2f",S="#ffffff";var i={beta:{color:"#ffffff",background:"#ec942c",description:"The interface for this component may change"},deprecated:{color:"#ffffff",background:"#f02c2c",description:"This component will be removed in the next major version"},stable:{color:"#ffffff",background:"#339902",description:"This component is stable"},releaseCandidate:{color:"#ffffff",background:"#a335ee",description:"This component is a release candidate"}};var w=styled.span`
  align-self: center;
  background-color: ${({background:e,type:t})=>e??(i[t]?i[t].background:m)};
  border-radius: 100%;
  height: 6px;
  margin-left: 0.5em;
  user-select: none;
  width: 6px;
`,C=w;var u="status";var B=(e,t)=>t?Array.isArray(t)?[...e,...t]:typeof t=="string"||typeof t=="object"?[...e,t]:[]:e??[],I=e=>{let t=[],a=[];return e.forEach(r=>{let n=typeof r=="string"?r:r.name;if(!a.includes(n)){t.push(r),a.push(n);return}if(r.name){let o=a.indexOf(n);o!==-1&&(t[o]=r);}}),t},b=({tags:e,parameters:t,customConfigs:a})=>{if(!t&&!e?.length)return [];let r=B(e,t?.type),n=I(r),o={...i,...a||t?.statuses||{}},c=n.map(s=>typeof s=="string"?{label:s,status:o[s],url:t?.url}:{label:s.name,status:o[s.name],url:s.url});return c=c.filter(s=>s.status!=null),c};var T=css`
  align-self: center;
  border-radius: 0.25em;
  padding: 0 0.5em;
  text-decoration: none;
  user-select: none;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 20px;
  font-weight: 700;
  padding: 0 0.5em;
`,E=styled.a`
  ${T}
`,M=styled.span`
  ${T}
`,U=()=>{let t=useStorybookApi().getCurrentStoryData()?.tags??[],a=useParameter(u,null),r=addons.getConfig()?.[u]?.statuses,n=b({tags:t,parameters:a,customConfigs:r});return n?.length?y.createElement(y.Fragment,null,n.map(o=>{let{background:c,color:s,description:l}=o.status,d=o.url,f=P(o.label),g={color:s??(i[f]?i[f].color:S),backgroundColor:c??(i[f]?i[f].background:m)};return d?y.createElement(E,{key:o.label,style:g,title:l,href:d},f):y.createElement(M,{key:o.label,style:g,title:l},f)})):null},A=U;addons.register(u,e=>{let t=addons.getConfig(),a=t?.sidebar??{};addons.add(u,{title:"Status",type:types.TOOL,render:()=>y.createElement(A,null)});let r=t?.[u]??{};addons.setConfig({sidebar:{...a,renderLabel:n=>{let{name:o,tags:c}=n,s=["root","group","story"].includes(n.type);try{let l=a?.renderLabel?a.renderLabel(n):o,d=r?.sidebarDots;if(d==="none")return l;let f=e.getParameters(n.id,u);if(!s||c.length===0&&!f?.type)return l;let g=r?.statuses||e.getCurrentStoryData().parameters?.status?.statuses,p=b({tags:c,parameters:f,customConfigs:g});return p.length===0?l:(d!=="multiple"&&(p=[p[0]]),y.createElement(y.Fragment,null,l,p.map(L=>{let{label:x,status:{background:O,description:N}}=L;return y.createElement(C,{key:x,type:x,background:O,title:`${P(x)}: ${N}`})})))}catch{return o}}}});});//# sourceMappingURL=manager.js.map
//# sourceMappingURL=manager.js.map