storybook-addon-aem-style-system/dist/manager.js

aem pull style from policy

import l,{memo,useEffect,useCallback,useState}from'react';import {useAddonState,useChannel,useParameter,useGlobals,addons,types}from'storybook/internal/manager-api';import {Button,AddonPanel,IconButton}from'storybook/internal/components';import {styled as styled$1}from'storybook/internal/theming';import {styled}from'@storybook/theming';import {LightningIcon}from'@storybook/icons';var r="storybook/aem-style-system",h=`${r}/tool`,C=`${r}/panel`,b=`${r}/tab`,u="aemStyles",p={RESULT:`${r}/result`,REQUEST:`${r}/request`,CLEAR:`${r}/clear`,CHANGE:`${r}/change`};var B=styled.div`
  padding: 10px;
`;styled.select`
  padding: 5px;
  margin-right: 10px;
`;var L={margin:"7px 7px",flex:"50%",padding:"10px",border:"1px solid #ddd",borderRadius:"7px",backgroundColor:"#f9f9f9",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)"},_={fontSize:"1rem",fontWeight:"600",color:"#333",marginBottom:"10px",borderBottom:"1px solid #ccc",paddingBottom:"5px"},$={display:"inline-flex",alignItems:"center",cursor:"pointer",marginBottom:"8px",fontSize:"1rem",color:"#555"},M={marginRight:"10px",transform:"scale(1.2)",accentColor:"#007bff"},j=a=>{let s=Object.keys(a?.aemJsonData).find(t=>t.startsWith("policy_")),o=a?.aemJsonData[s]?.["cq:styleGroups"];if(!o)return l.createElement("div",null,"No style groups found");let[f,m]=useState({}),d=(t,n)=>{m(e=>{let y=!1;Object.keys(o).map(x=>{o[x]["cq:styleGroupLabel"]===t&&o[x]["cq:styleGroupMultiple"]==="true"&&(y=!0);});let i;return y?e[t]&&e[t].includes(n)?i=e[t].replace(n,"").replaceAll("  "," ").trim():i=`${e[t]?`${e[t]} `:""}${n}`:i=n,console.log("selectedStyles",Object.values({...e,[t]:e[t]===n?null:i}).filter(Boolean)),addons.getChannel().emit(p.CHANGE,{selectedStyles:Object.values({...e,[t]:e[t]===n?null:i}).filter(Boolean)}),{...e,[t]:e[t]===n?null:i}});};return l.createElement("div",{style:{display:"flex",fontFamily:"Arial, sans-serif",maxWidth:"100%",padding:"5px",border:"1px solid #ccc",borderRadius:"8px",backgroundColor:"#fff",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)"}},Object.keys(o).map(t=>{if(t==="jcr:primaryType")return;let n=o[t],e=n["cq:styleGroupLabel"],y=n["cq:styles"],i=!1;return o[t]["cq:styleGroupLabel"]===e&&o[t]["cq:styleGroupMultiple"]==="true"&&(i=!0),l.createElement("div",{key:t,className:"style-group",style:L},l.createElement("h3",{style:_},e),Object.keys(y).map(x=>{if(x==="jcr:primaryType")return;let c=y[x],O=!!f[e]?.includes(c["cq:styleClasses"]),q=i?O:f[e]===c["cq:styleClasses"];return l.createElement("div",{key:c["cq:styleId"],className:"style-option","data-styleclass":c["cq:styleClasses"],style:{marginBottom:"8px",display:"flex",alignItems:"start"}},l.createElement("input",{type:"checkbox",id:c["cq:styleId"],name:e,checked:q,onChange:()=>d(e,c["cq:styleClasses"]),style:M}),l.createElement("label",{htmlFor:c["cq:styleId"],style:$},c["cq:styleLabel"]))}))}))},E=({results:a,fetchData:s,clearData:o})=>l.createElement(l.Fragment,null,l.createElement(B,null,l.createElement(j,{...a})));styled$1(Button)({marginTop:"1rem"});var P=memo(function(s){let[o,f]=useAddonState(r,{aemJsonData:{}}),m=useChannel({[p.RESULT]:t=>f(t)}),d=useParameter(u,"");return useEffect(()=>{if(d){let t=d.policy||{};m(p.RESULT,{aemJsonData:t});}},[d]),l.createElement(AddonPanel,{...s},l.createElement(E,{results:o,fetchData:()=>{m(p.REQUEST);},clearData:()=>{m(p.CLEAR);}}))});var k=memo(function({api:s}){let[o,f,m]=useGlobals(),d=u in m,t=!!o[u],n=useCallback(()=>{f({[u]:!t});},[t]);return useEffect(()=>{s.setAddonShortcut(r,{label:"Toggle Measure [O]",defaultShortcut:["O"],actionName:"outline",showInMenu:!1,action:n});},[n,s]),l.createElement(IconButton,{key:h,active:t,disabled:d,title:"Enable my addon",onClick:n},l.createElement(LightningIcon,null))});addons.register(r,a=>{addons.add(h,{type:types.TOOL,title:"aem-style-system",match:({viewMode:s,tabId:o})=>!!(s&&s.match(/^(story)$/)||o===b),render:()=>l.createElement(k,{api:a})}),addons.add(C,{type:types.PANEL,title:"aem-style-system",match:({viewMode:s})=>s==="story",render:({active:s})=>l.createElement(P,{active:s})});});//# sourceMappingURL=manager.js.map
//# sourceMappingURL=manager.js.map