@knapsack/app
Version:
Build Design Systems on top of knapsack, by Basalt
2 lines • 38.4 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([["custom-page-KXWAf~pattern-view-page-WE7TE~21833f8f"],{"./src/client/components/function-field.scss":function(e,t,a){},"./src/client/components/inline-edit.scss":function(e,t,a){},"./src/client/components/inline-edit.tsx":function(e,t,a){a.d(t,"a",(function(){return InlineEditText}));var n=a("../node_modules/@babel/runtime/helpers/esm/extends.js"),s=a("react"),r=a.n(s),l=a("../design-system/dist/ks-design-system.js"),c=a("../node_modules/classnames/index.js"),o=a.n(c),i=(a("./src/client/components/inline-edit.scss"),a("./src/client/store/index.ts")),InlineEditTextBase=e=>{var{text:t,isHeading:a,showControls:n=!1,handleSave:c,canEdit:i,noWrap:d=!1}=e,[m,p]=Object(s.useState)(!1),u=Object(s.useRef)();if(!i)return r.a.createElement("span",null,t);var handleTargetFocus=()=>{m?(p(!1),u.current.textContent=t,setTimeout(()=>{window.getSelection().removeAllRanges()},0)):(p(!0),setTimeout(()=>{u.current.focus();var e=document.createRange();e.selectNodeContents(u.current);var t=window.getSelection();t.removeAllRanges(),t.addRange(e)},0))},handleControlTrigger=()=>{m&&c(u.current.textContent),handleTargetFocus()},v=o()({"ks-inline-edit":!0,"ks-inline-edit--visible":n,"ks-inline-edit--editing":m,"ks-inline-edit--no-wrap":d}),h=m?"save":"edit-text";return r.a.createElement("span",{className:v},r.a.createElement("span",{className:"ks-inline-edit__text",ref:u,contentEditable:m,suppressContentEditableWarning:m,role:"textbox",onKeyDown:e=>{13===e.which&&handleControlTrigger(),27===e.which&&handleTargetFocus()}},t),n&&r.a.createElement("span",{className:"ks-inline-edit__controls"},"save"===h&&r.a.createElement(l.l,{size:a?"m":"s",icon:"close",kind:"icon",flush:!0,emphasis:"danger",handleTrigger:handleTargetFocus},"close"),r.a.createElement(l.l,{size:a?"m":"s",icon:h,kind:"icon",flush:!0,handleTrigger:handleControlTrigger},h)))},InlineEditText=e=>{var t=Object(i.useSelector)(e=>e.userState.canEdit);return r.a.createElement(InlineEditTextBase,Object(n.a)({},e,{canEdit:t,showControls:t}))}},"./src/client/components/md-block.scss":function(e,t,a){},"./src/client/components/page-header.scss":function(e,t,a){},"./src/client/components/page-header.tsx":function(e,t,a){a.d(t,"a",(function(){return d}));var n=a("react"),s=a.n(n),r=a("../node_modules/classnames/index.js"),l=a.n(r),c=a("../design-system/dist/ks-design-system.js"),o=a("./src/client/store/index.ts"),i=a("./src/client/components/inline-edit.tsx"),d=(a("./src/client/components/page-header.scss"),e=>{var{section:t,title:a,handleEditTitle:n,description:r,handleEditDescription:d,constrained:m=!1,flush:p=!1}=e,u=Object(o.useSelector)(e=>e.ui.status),v=Object(o.useDispatch)();if(!t&&!a)return null;var h=l()("ks-page-header",{"ks-page-header--constrained":m,"ks-page-header--flush":p});return s.a.createElement("header",{className:h},s.a.createElement("div",{className:"ks-page-header__content-wrap"},t&&s.a.createElement("p",{className:"ks-page-header__section"},t),s.a.createElement("h2",{className:"ks-page-header__title"},n?s.a.createElement(i.a,{text:a,isHeading:!0,handleSave:n}):s.a.createElement("span",null,a)),d&&s.a.createElement("p",{className:"ks-page-header__description"},s.a.createElement(i.a,{text:r,handleSave:d})),r&&!d?s.a.createElement("p",{className:"ks-page-header__description"},r):"",u&&s.a.createElement("div",{className:"ks-page-header__status"},s.a.createElement(c.C,{type:u.type,message:u.message,handleClose:()=>v(Object(o.removeStatus)())}))))})},"./src/client/components/suspense-loader.tsx":function(e,t,a){a.d(t,"a",(function(){return SuspenseLoader}));var n=a("react"),s=a.n(n),r=a("../design-system/dist/ks-design-system.js"),SuspenseLoader=e=>{var{delay:t=200,children:a}=e,[l,c]=Object(n.useState)(!1);return Object(n.useEffect)(()=>{setTimeout(()=>{c(!0)},t)},[t]),s.a.createElement(n.Suspense,{fallback:l&&s.a.createElement(r.e,null)},a)}},"./src/client/components/template-thumbnail.scss":function(e,t,a){},"./src/client/components/template-thumbnail.tsx":function(e,t,a){a.d(t,"a",(function(){return i}));var n=a("../node_modules/@babel/runtime/helpers/esm/extends.js"),s=a("../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),r=a("react"),l=a.n(r),c=a("./src/client/components/template.tsx"),o=a("./src/client/store/index.ts"),i=(a("./src/client/components/template-thumbnail.scss"),e=>{var t,a,r,{handleSelection:i=(()=>{}),patternWidth:d,templateId:m,thumbnailSize:p=120}=e,u=Object(s.a)(e,["handleSelection","patternWidth","templateId","thumbnailSize"]),v=Object(o.useSelector)(e=>e.patternsState.patterns[u.patternId]),{currentTemplateRenderer:h}=Object(o.useSelector)(e=>e.ui),b=null==v?void 0:null===(t=v.templates)||void 0===t?void 0:t.find(e=>m?e.id===m:e.templateLanguageId===h);if(!b)return l.a.createElement("div",{className:"ks-template-thumbnail ks-template-thumbnail--empty",style:{width:"".concat(p,"px"),height:"".concat(p,"px")}},"No ",h," template available for ",v.id);var g=null!==(a=u.demo)&&void 0!==a?a:null==b?void 0:b.demosById[null==b?void 0:b.demos[0]],f=(null!=d?d:Array.isArray(v.demoWidths)&&v.demoWidths.length>0)?null==v?void 0:null===(r=v.demoWidths[0])||void 0===r?void 0:r.width:400;return l.a.createElement("div",{className:"ks-template-thumbnail",style:{width:"".concat(p,"px"),height:"".concat(p,"px")}},l.a.createElement("div",{className:"ks-template-thumbnail__template",style:{width:"".concat(f,"px"),transform:p/f<1?"".concat("translate(-50%, -50%)"," scale(").concat(p/f,")"):"translate(-50%, -50%)"}},l.a.createElement(c.a,Object(n.a)({},u,{templateId:b.id,demo:g,isResizable:!1}))),l.a.createElement("div",{className:"ks-template-thumbnail__overlay",onKeyPress:()=>i(),onClick:()=>i()}))})},"./src/client/components/template.scss":function(e,t,a){},"./src/client/components/template.tsx":function(e,t,a){var n,s=a("../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),r=a("react"),l=a.n(r),c=a("../design-system/dist/ks-design-system.js"),o=a("../node_modules/iframe-resizer/js/iframeResizer.js"),i=a.n(o),d=a("../node_modules/shortid/index.js"),m=a.n(d),p=a("./src/client/data.ts"),u=a("./src/lib/constants.ts"),{PATTERN_TEMPLATE_CHANGED:v,PATTERN_ASSET_CHANGED:h}=u.b,b={[v]:v,[h]:h};!function(e){e.ready="ready"}(n||(n={}));a("./src/client/components/template.scss");var g=a("./src/client/store/index.ts"),f=a("./src/client/hooks.ts"),E=a("./src/client/utils/error-catcher.jsx");t.a=e=>{var{templateId:t,patternId:a,demo:o,assetSetId:d,isResizable:u=!0,handleCodeUsage:v=(()=>{}),handleExternalUrl:h=(()=>{}),handleRenderedHtml:j=(()=>{})}=e,makeId=()=>"".concat(a,"-").concat(t,"-").concat(m.a.generate()),[O,_]=Object(r.useState)(makeId()),[y,S]=Object(r.useState)(""),[w,k]=Object(r.useState)(null),[I,x]=Object(r.useState)(!1),T=Object(r.useRef)(null),N=Object(r.useRef)(null),D=Object(r.useRef)(),P=Object(g.useSelector)(e=>e.userState.features.templatePush),{socket:C}=Object(f.b)(P),A=null!=o?o:{},{title:z,description:R}=A,W=Object(s.a)(A,["title","description"]),H=JSON.stringify(W);C&&P&&C.addEventListener("message",e=>{var t;try{t=JSON.parse(e.data)}catch(t){console.warn("Tried to parse JSON string from WebSocket message so Template can re-fetch new data.",{messageEvent:e,error:t})}if(t)switch(t.event){case b.PATTERN_TEMPLATE_CHANGED:case b.PATTERN_ASSET_CHANGED:_(makeId());break;default:console.log("ws default")}}),Object(r.useEffect)(()=>{var e=i()({log:!1,checkOrigin:[window.location.origin],autoResize:!0,resizeFrom:"child",onResized:e=>{var{width:t}=e;k(t)},onMessage(e){var{message:t}=e;if("event"===(null==t?void 0:t.type)&&(null==t?void 0:t.event)===n.ready){if(x(!0),!j)return;setTimeout(()=>{var e,t;if(T.current){var a=null===(e=T.current)||void 0===e?void 0:null===(t=e.contentDocument)||void 0===t?void 0:t.querySelectorAll(".knapsack-pattern-direct-parent");if(a){var[n]=Array.from(a).reverse();if(n){var s=n.innerHTML;j(s)}}}},100)}}},T.current),[t]=e;if(!t)return()=>{};k(T.current.offsetWidth);var a=t.iFrameResizer;return T.current.onload=()=>{a.resize()},()=>{a&&"function"==typeof a.close&&a.close()}},[]),Object(r.useEffect)(()=>{var e=!0,n=setTimeout(()=>{var n;x(!1),Object(p.f)({patternId:a,templateId:t,demo:o,assetSetId:null!==(n=null==o?void 0:o.assetSetId)&&void 0!==n?n:d,cacheBuster:O}).then(n=>{var s,{dataId:r}=n;if((null==n?void 0:null===(s=n.urls)||void 0===s?void 0:s.iframeSrc)!==y||I){if(e){var l,c;if(D.current=r,S(null==n?void 0:null===(l=n.urls)||void 0===l?void 0:l.iframeSrc),h(n.urls.external),!v)return;Object(p.h)({patternId:a,templateId:t,dataId:r,assetSetId:null!==(c=null==o?void 0:o.assetSetId)&&void 0!==c?c:d,isInIframe:!1,wrapHtml:!1}).then(e=>{var{usage:t,templateLanguage:a}=e;v({code:t,language:a})})}}else x(!0)}).catch(console.log.bind(console))},175);return()=>{e=!1,clearTimeout(n)}},[a,t,H,d,O]);var K=l.a.createElement(E.a,null,l.a.createElement("iframe",{className:"ks-template__iframe",title:O,ref:T,src:y}));return u&&(K=l.a.createElement("div",{className:"ks-template__iframe-wrapper",ref:N},l.a.createElement("div",{className:"ks-template__resizable"},K,w&&l.a.createElement("div",{className:"ks-template__resizable__size-reading"},w,"px")))),l.a.createElement("div",{className:"ks-template ks-template--".concat(I?"ready":"not-ready")},!I&&l.a.createElement("div",{className:"ks-template__spinner"},l.a.createElement(c.e,{size:"2em"})),K)}},"./src/client/hooks.ts":function(e,t,a){a.d(t,"b",(function(){return useWebsocket})),a.d(t,"a",(function(){return useKsDragDrop}));var n=a("react"),s=a("../node_modules/react-dnd/dist/esm/hooks/useDrop.js"),r=a("../node_modules/react-dnd/dist/esm/hooks/useDrag.js"),l=a("./src/client/store/index.ts");a("../design-system/dist/ks-design-system.js");function useWebsocket(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=Object(l.useSelector)(e=>e.metaState.meta.websocketsPort),[a,s]=Object(n.useState)({socket:null,sendMsg:()=>{}});return Object(n.useEffect)(()=>{if(e){var a="https:"===window.location.protocol?"wss":"ws",n=new window.WebSocket("".concat(a,"://localhost:").concat(t));return n.onopen=()=>{s({socket:n,sendMsg:e=>{n.send(JSON.stringify(e))}})},()=>{n.close(1e3,"unmounting")}}},[e]),a}function useKsDragDrop(e){var{dragTypeId:t,index:a,handleDrop:n,ref:l,canDrag:c=!0}=e,[o,i]=Object(s.a)({accept:t,hover(e,t){if(l.current){var s=e.index,r=a;if(s!==r){var c=l.current.getBoundingClientRect();c.bottom,c.top,t.getClientOffset().y,c.top;n({dragIndex:s}),e.index=r}}}}),[{isDragging:d},m]=Object(r.a)({canDrag:()=>c,item:{type:t,index:a},collect:e=>({isDragging:e.isDragging()})});return m(i(l)),{isDragging:d}}},"./src/client/pages/pattern-view/components/demo-stage.scss":function(e,t,a){},"./src/client/pages/pattern-view/components/edit-template-demo.scss":function(e,t,a){},"./src/client/pages/pattern-view/components/edit-template-demo.tsx":function(e,t,a){a.d(t,"a",(function(){return EditTemplateDemo}));var n=a("../node_modules/@babel/runtime/helpers/esm/defineProperty.js"),s=a("react"),r=a.n(s),l=a("../design-system/dist/ks-design-system.js"),c=a("../node_modules/classnames/index.js"),o=a.n(c),i=a("./src/client/store/index.ts"),d=a("./src/client/data.ts"),m=(a("./src/client/pages/pattern-view/components/edit-template-demo.scss"),a("../node_modules/react-copy-to-clipboard/lib/index.js")),KsFileButtons=e=>{var{filePath:t}=e,[a,n]=Object(s.useState)("");Object(s.useEffect)(()=>{Object(d.b)({type:d.a.ACTIONS.verify,payload:{path:t}}).then(e=>{e.type===d.a.ACTIONS.verify&&e.payload.exists&&n(e.payload.absolutePath)})},[t]);var c=!a;return r.a.createElement("div",{className:"ks-file-buttons"},r.a.createElement(l.m,null,r.a.createElement(l.l,{disabled:c,handleTrigger:()=>{Object(d.b)({type:d.a.ACTIONS.openFile,payload:{filePath:a}})},size:"s"},r.a.createElement(l.t,{content:r.a.createElement("p",null,"Open in external editor; passes ",r.a.createElement("br",null),"absolute path to ",r.a.createElement("code",null,"open")," command."),trigger:"hover"},r.a.createElement("div",null,"Open in Editor"))),r.a.createElement(l.l,{disabled:c,size:"s"},r.a.createElement(l.t,{maxWidth:310,content:r.a.createElement("p",null,"Copy absolute file path to clipboard.",r.a.createElement("br",null),r.a.createElement("code",{style:{wordBreak:"break-word",fontSize:"var(--font-size-s)"}},a)),trigger:"hover"},r.a.createElement(m.CopyToClipboard,{text:a},r.a.createElement("span",null,"Copy Path"))))))};function ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}var EditTemplateDemo=e=>{var{handleSubmit:t,maxWidth:a,data:c,btnSize:m="m",handleDelete:p}=e,[u,v]=Object(s.useState)(c),[h,b]=Object(s.useState)([]),g=Object(i.useSelector)(e=>e.ui.currentTemplateRenderer),f=Object(i.useSelector)(e=>e.patternsState.renderers[g]),E=Object(i.useSelector)(e=>e.userState.isLocalDev);if(!f)return null;if(!E)return null;var j=!(null==c?void 0:c.path),{title:O,aliasUse:_,aliasDescription:y,aliasTitle:S="Alias",iconSvg:w}=null==f?void 0:f.meta,k=o()({"ks-edit-template-demo":!0}),I={type:"object",required:["path"],properties:{path:{type:"string",title:"Path",description:"The file path to the template can be a full absolute path, a relative path from the data directory, or a string that `require.resolve()` can handle."}}};return"off"!==_&&(I.properties.alias={type:"string",title:S,description:y},"required"===_&&I.required.push("alias")),"string"==typeof(null==u?void 0:u.title)&&(I.required.push("title"),I.properties.title={type:"string",title:"Title",description:"A new demo"}),"string"==typeof(null==u?void 0:u.description)&&(I.properties.description={type:"string",title:"Description",description:""}),r.a.createElement("div",{className:k,style:{maxWidth:a?"".concat(a,"px"):"100%"}},r.a.createElement("div",{className:"ks-edit-template-demo__content"},r.a.createElement("div",{className:"ks-edit-template-demo__title"},r.a.createElement("h5",null,r.a.createElement(l.v,{svg:w,className:"ks-edit-template-demo__logo"}),r.a.createElement("span",null,O," Template")),!j&&p&&r.a.createElement(l.o,{confirmationMessage:"Are you sure you want to delete this ".concat(O," template?"),handleTrigger:p,size:"s",flush:!0})),(null==u?void 0:u.path)&&E&&r.a.createElement(KsFileButtons,{filePath:null==u?void 0:u.path}),h.length>0&&r.a.createElement("div",{className:"ks-rjsf"},r.a.createElement("div",{className:"panel panel-danger"},r.a.createElement("h3",{className:"panel-title"},"Errors"),r.a.createElement("ul",null,h.map(e=>r.a.createElement("li",{key:e.msg,className:"text-danger"},e.msg))))),r.a.createElement("div",{className:"ks-edit-template-demo__form"},r.a.createElement(l.y,{formData:u,schema:I,onChange:e=>{v(e.formData)},liveValidate:!1,validate:(e,t)=>t,showErrorList:!0,onSubmit:e=>{var{formData:a}=e,{path:s,alias:r}=a;b([]),Object(d.b)({type:d.a.ACTIONS.verify,payload:{path:s}}).then(e=>{if(e.type===d.a.ACTIONS.verify){var{relativePath:r,exists:l,type:c}=e.payload;if(l){var o=function _objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({},a,{path:"package"===c?s:r});t(o),v(o)}else b([{msg:"Path: does not exist. Please create the file first."}]),console.error("does not exist!")}})}},r.a.createElement(l.l,{size:m,type:"submit",kind:"primary"},j?"Add":"Update")))))}},"./src/client/pages/pattern-view/components/index.ts":function(e,t,a){a.d(t,"a",(function(){return n.a})),a.d(t,"b",(function(){return KsDemoStage})),a.d(t,"c",(function(){return k}));var n=a("./src/client/pages/pattern-view/components/edit-template-demo.tsx"),s=a("../node_modules/@babel/runtime/helpers/esm/defineProperty.js"),r=a("react"),l=a.n(r),c=a("../node_modules/classnames/index.js"),o=a.n(c),i=a("../design-system/dist/ks-design-system.js"),d=a("./src/client/components/template.tsx"),m=a("../node_modules/react-view/dist/es/use-view.js"),p=a("../node_modules/react-view/dist/es/const.js"),u=a("../node_modules/react-view/dist/es/ui/knobs.js"),v=(a("./src/client/components/function-field.scss"),e=>{var t,a,n,s,c,o,i=Object(r.useRef)(null);i.current&&clearTimeout(i.current);var d=null==e?void 0:null===(t=e.schema)||void 0===t?void 0:t.tsType,v=Object(m.a)({props:{[e.name]:{value:e.formData,type:p.b.Function,description:e.schema.description?"".concat(d,"\n").concat(e.schema.description):d}}}),h=(null===(a=v.knobProps)||void 0===a?void 0:null===(n=a.error)||void 0===n?void 0:n.where)===e.name,b=null===(s=v.knobProps)||void 0===s?void 0:null===(c=s.state)||void 0===c?void 0:null===(o=c[e.name])||void 0===o?void 0:o.value;return h?clearTimeout(i.current):i.current=setTimeout(()=>{b!==e.formData&&e.onChange(b),i.current=null},10),l.a.createElement("div",{className:"ks-rjsf__function-field ks-rjsf__function-field--".concat(e.name)},l.a.createElement(u.a,v.knobProps))}),h=a("./src/client/pages/pattern-view/current-template-context.tsx"),b=a("./src/schemas/patterns.ts"),g=a("./src/client/components/inline-edit.tsx"),f=a("./src/client/store/index.ts"),E=a("../node_modules/react-router-dom/esm/react-router-dom.js"),j=a("../node_modules/deep-equal/index.js"),O=a.n(j),_=a("../node_modules/formik/dist/formik.esm.js"),y=(a("./src/client/pages/pattern-view/components/slots-form.scss"),a("./src/lib/constants.ts")),validateSimpleString=e=>{if("string"==typeof e&&0===e.length)return"Cannot be empty"},KsSlotsForm=e=>{var{slotsSpec:t,slotsData:a={},handleData:n=(()=>{}),templateLanguageId:s}=e,r=Object(f.useSelector)(e=>{var{patternsState:t}=e;return Object.values(t.patterns||{}).map(e=>{var t,{id:a,title:n,templates:r}=e;return{id:a,title:n,label:n,value:a,templates:null===(t=r.filter(e=>e.templateLanguageId===s))||void 0===t?void 0:t.map(e=>{var t;return{id:e.id,value:e.id,title:e.title,label:e.title,demos:null===(t=e.demos)||void 0===t?void 0:t.map(t=>{var a=e.demosById[t];return{id:t,value:t,title:a.title,label:a.title}})}})}})});if(!t)return null;var c=o()({"k-slots-form":!0}),validateForm=e=>{var t={};return Object.keys(e).forEach(a=>{e[a].forEach((e,n)=>{if(Object(b.c)(e)&&(e||(t[a+n]="Need non-empty strings")),Object(b.b)(e)){var{patternId:s,templateId:r,demoId:l}=e;s&&r&&l||(t[a+n]="Need more info")}})}),t};return l.a.createElement("div",{className:c},l.a.createElement(_.d,{initialValues:a,onSubmit:e=>{var{values:t,actions:a}=e;console.log("formik submit",{values:t,actions:a})},validateOnBlur:!0,validateOnChange:!0,validate:validateForm},e=>{var{values:s,setFieldValue:c}=e;return(e=>{var t=validateForm(e);0!==Object.keys(t).length||O()(e,a)||n(e)})(s),l.a.createElement(_.c,null,Object.keys(t||{}).map(e=>{var a=t[e],{allowedPatternIds:n,disallowText:o}=a;return l.a.createElement("div",{key:e,className:"ks-slots-form__slot"},l.a.createElement("p",{className:"ks-slots-form__slot__slot-name"},"Slot Name: ",l.a.createElement("code",null,e)),l.a.createElement(_.b,{name:e},t=>{var a=s[e],d=Array.isArray(n)?r.filter(e=>{var{id:t}=e;return n.includes(t)}):r,m=0!==d.length,p=!o,u=l.a.createElement("div",{className:"ks-slots-form__add-buttons"},l.a.createElement(i.m,null,m&&l.a.createElement(i.l,{icon:"add",size:"s",handleTrigger:()=>t.push({patternId:"",templateId:"",demoId:""})},"Pattern Demo"),p&&l.a.createElement(i.l,{icon:"add",size:"s",handleTrigger:()=>t.push("Text")},"Add Text")));return a?l.a.createElement("div",null,a.map((n,s)=>{var r=s,o=l.a.createElement("div",{className:"ks-slots-form__slot-controls"},0!==s&&l.a.createElement(i.l,{size:"s",handleTrigger:()=>t.move(s,s-1)},"Move Up"),s!==a.length-1&&l.a.createElement(i.l,{size:"s",handleTrigger:()=>t.move(s,s+1)},"Move Down"),l.a.createElement(i.o,{size:"s",flush:!0,handleTrigger:()=>t.remove(s)}));if("string"==typeof n)return l.a.createElement("div",{key:r,className:"ks-slots-form__slot-item"},o,l.a.createElement(_.a,{name:"".concat(e,".").concat(s),validate:validateSimpleString},e=>{var{field:t,form:a,meta:n}=e;return l.a.createElement(i.w,{label:"Text",inputProps:t,error:n.error,flush:!0})}));var{patternId:m,templateId:p,demoId:u}=n,v=m?d.find(e=>e.id===m).templates:[],h=v.map(e=>({label:e.title,value:e.value})),b=p&&v?v.find(e=>e.id===p).demos:[],g=b.map(e=>({label:e.title,value:e.value}));return l.a.createElement("div",{key:r,className:"ks-slots-form__slot-item"},o,l.a.createElement(_.a,{name:"".concat(e,".").concat(s,".patternId"),validate:validateSimpleString},t=>{var a,{field:{name:n,value:r}}=t;return l.a.createElement(i.u,{label:"Pattern",options:[{value:"",label:""},...d],value:null!==(a=d.find(e=>e.value===r))&&void 0!==a?a:{value:"",label:""},handleChange:t=>{var[a]=d.find(e=>e.id===t.value).templates,[n]=a.demos;c("".concat(e,".").concat(s),{patternId:t.value,templateId:a.id,demoId:n.id})}})}),v&&v.length>1&&l.a.createElement(_.a,{name:"".concat(e,".").concat(s,".templateId"),validate:validateSimpleString},t=>{var{field:{name:a,value:n}}=t;return l.a.createElement(i.u,{label:"Template",value:h.find(e=>e.value===n),handleChange:t=>{var[a]=d.find(e=>e.id===m).templates.find(e=>e.id===t.value).demos;c("".concat(e,".").concat(s),{patternId:m,templateId:t.value,demoId:a.id})},options:h})}),b&&b.length>1&&l.a.createElement(_.a,{name:"".concat(e,".").concat(s,".demoId"),validate:validateSimpleString},e=>{var{field:{name:t,value:a}}=e;return l.a.createElement(i.u,{label:"Demo",value:g.find(e=>e.value===a),handleChange:e=>{c(t,e.value)},options:g})}),m&&p&&u&&l.a.createElement("span",{className:"ks-slots-form__pattern-link"},l.a.createElement(E.b,{to:"".concat(y.a.PATTERN,"/").concat(m,"/").concat(p,"/").concat(u)},"View Pattern")))}),u):u}))}))}))},S=(a("./src/client/pages/pattern-view/components/demo-stage.scss"),a("./src/client/utils/error-catcher.jsx"));function ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(a),!0).forEach((function(t){Object(s.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}var calculateDemoStageWidth=e=>{switch(e){case"s":return"33%";case"m":return"50%";case"l":return"67%";default:return"100%"}},calculateSchemaFormWidth=e=>{switch(e){case"s":return"67%";case"m":return"50%";case"l":return"33%";default:return"100%"}},KsDemoStage=e=>{var t,a,{demoSize:n,isFormVisible:s=!0,handlePropsChange:c,handleSlotsChange:m,handleDemoReset:p,handleCodeUsage:u,handleRenderedHtml:E,codeBlock:j}=e,{template:O,hasSchema:_,spec:y,demo:w,patternId:k,templateId:I,assetSetId:x,demos:T,canEdit:N}=Object(r.useContext)(h.a),D=Object(f.useDispatch)(),[P,C]=Object(r.useState)(""),[A,z]=Object(i.H)(Object(b.a)(w)&&null!==(t=null==w?void 0:null===(a=w.data)||void 0===a?void 0:a.props)&&void 0!==t?t:null,c),R=Object.keys((null==y?void 0:y.slots)||{}).length>0,W=o()("ks-demo-stage","full"===(s?n:"full")?"ks-demo-stage--full":"",T&&T.length>1||N?"ks-demo-stage--has-demos":"");return l.a.createElement("div",{className:W},l.a.createElement("div",{className:"ks-demo-stage__stage",style:{width:calculateDemoStageWidth(s?n:"full")}},l.a.createElement("span",{className:"ks-demo-stage__stage__open-btn"},P&&l.a.createElement(i.l,{kind:"icon",icon:"external-link",flush:!0,handleTrigger:()=>{window.open(P,"_blank")}},"Open in New Window")),l.a.createElement(d.a,{patternId:k,templateId:I,assetSetId:x,demo:w,isResizable:!0,handleCodeUsage:u,handleExternalUrl:C,handleRenderedHtml:E})),Object(b.d)(w)&&j&&l.a.createElement("div",{className:"ks-demo-stage__form",style:{width:calculateSchemaFormWidth(n)}},j),_&&s&&Object(b.a)(w)&&l.a.createElement("div",{className:"ks-demo-stage__form",style:{width:calculateSchemaFormWidth(n)}},l.a.createElement("div",{className:"ks-demo-stage__form__inner"},l.a.createElement("header",{className:"ks-demo-stage__form__header"},l.a.createElement("div",{className:"ks-demo-stage__form__header__title"},l.a.createElement("h3",null,l.a.createElement(g.a,{text:w.title,isHeading:!0,handleSave:e=>{D(Object(f.updateTemplateDemo)({patternId:k,templateId:I,demo:_objectSpread({},w,{title:e})}))}}))),l.a.createElement("p",null,l.a.createElement(g.a,{text:w.description,handleSave:e=>{D(Object(f.updateTemplateDemo)({patternId:k,templateId:I,demo:_objectSpread({},w,{description:e})}))}}))),l.a.createElement("div",{className:"ks-demo-stage__form__content"},l.a.createElement(S.a,null,l.a.createElement("h4",null,"Props"),l.a.createElement(i.y,{schema:y.props,formData:null!=A?A:{},onChange:e=>{var{formData:t}=e;z(t)},customFields:{FunctionField:v}})),R&&l.a.createElement(S.a,null,l.a.createElement("h4",null,"Slots"),l.a.createElement(KsSlotsForm,{slotsData:w.data.slots,slotsSpec:y.slots,templateLanguageId:O.templateLanguageId,handleData:e=>{m(e)}}))),l.a.createElement("footer",{className:"ks-demo-stage__footer ks-u-margin-top--m"},l.a.createElement(i.l,{size:"s",handleTrigger:p,emphasis:"danger"},"Reset Demo")))))},w=a("../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),k=(a("./src/client/pages/pattern-view/components/template-header.scss"),e=>{var{assetSets:t=[],assetSetId:a,status:n,handleAssetSetChange:s,handleStatusChange:c,isTitleShown:o=!1}=e,d=Object(w.a)(e,["assetSets","assetSetId","status","handleAssetSetChange","handleStatusChange","isTitleShown"]),m=Object(f.useSelector)(e=>e.patternsState.templateStatuses),{title:p=d.title,canEdit:u,demo:v}=Object(r.useContext)(h.a),b=!!(null==v?void 0:v.assetSetId),select=()=>{var e=a?t.find(e=>e.id===a):null;return l.a.createElement(i.u,{options:t.map(e=>({label:e.title,value:e.id})),handleChange:s,value:{label:e?e.title:"",value:e?e.id:""},label:"Asset Sets",disabled:b})};return l.a.createElement("header",{className:"ks-template-header ks-template-view__flex-wrapper"},o&&l.a.createElement("h3",{className:"ks-template-header__title"},p),n&&!u&&l.a.createElement("p",null,"Status:",l.a.createElement(i.x,{color:n.color,title:n.title})," ",n.title),l.a.createElement("div",{className:"ks-template-header__controls"},t&&t.length>1&&l.a.createElement(l.a.Fragment,null,!b&&select,b&&l.a.createElement(i.t,{trigger:"hover",content:l.a.createElement("p",null,"Disabled due to current demo having a specific ",l.a.createElement("br",null),"asset set used currently. Switch demo to regain control.")},l.a.createElement(l.a.Fragment,null,select)))),u&&l.a.createElement("span",{className:"ks-template-header__status-select"},l.a.createElement(i.u,{label:"Status",isLabelInline:!0,value:n?{value:n.id,label:n.title}:{value:"error",label:"Error: No Status Assigned."},handleChange:c,options:[...m.map(e=>({value:e.id,label:e.title,color:e.color,icon:l.a.createElement(i.B,{status:e})}))]})))})},"./src/client/pages/pattern-view/components/slots-form.scss":function(e,t,a){},"./src/client/pages/pattern-view/components/template-demos.scss":function(e,t,a){},"./src/client/pages/pattern-view/components/template-header.scss":function(e,t,a){},"./src/client/pages/pattern-view/current-template-context.tsx":function(e,t,a){a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return useCurrentTemplateContext}));var n=a("react"),s=Object(n.createContext)({}),useCurrentTemplateContext=()=>Object(n.useContext)(s)},"./src/client/pages/pattern-view/shared/demo-grid-controls.scss":function(e,t,a){},"./src/client/pages/pattern-view/template-view.scss":function(e,t,a){},"./src/client/pages/pattern-view/template-view.tsx":function(e,t,a){var n=a("../node_modules/@babel/runtime/helpers/esm/defineProperty.js"),s=a("react"),r=a.n(s),l=a("../design-system/dist/ks-design-system.js"),c=a("../node_modules/react-router/esm/react-router.js"),o=a("./src/client/store/index.ts"),i=(a("../node_modules/react-markdown/lib/react-markdown.js"),a("./src/client/components/suspense-loader.tsx"),a("./src/client/components/md-block.scss"),a("../node_modules/easymde/dist/easymde.min.css"),r.a.lazy(()=>Promise.all([a.e("vendors~react-simplemde-editor-8Hy4D~ffdf5190"),a.e("vendors~react-simplemde-editor-8Hy4D~ecf1b8c5"),a.e("react-simplemde-editor-8Hy4D~8572da40")]).then(a.t.bind(null,"../node_modules/react-simplemde-editor/lib/index.js",7))),a("./src/client/pages/pattern-view/template-view.scss"),a("./src/client/pages/pattern-view/shared/demo-grid-controls.scss"),a("./src/schemas/patterns.ts")),d=a("./src/lib/constants.ts"),m=a("../node_modules/prettier/standalone.js"),p=a.n(m),u=a("../node_modules/prettier/parser-html.js"),v=a.n(u);function formatHtmlCode(e){if(!e)return e;try{return p.a.format(null==e?void 0:e.trim(),{parser:"html",plugins:[v.a]})}catch(t){return console.error(t),e}}var h=a("./src/client/pages/pattern-view/current-template-context.tsx"),b=a("./src/client/pages/pattern-view/components/index.ts"),g=a("../node_modules/classnames/index.js"),f=a.n(g),E=a("../node_modules/shortid/index.js"),j=a.n(E),O=a("../node_modules/array-move/index.js"),_=a.n(O),y=(a("./src/client/pages/pattern-view/components/template-demos.scss"),a("./src/client/components/template-thumbnail.tsx")),S=a("./src/client/pages/pattern-view/components/edit-template-demo.tsx"),w=a("./src/client/hooks.ts");function ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}var KsTemplateDemo=e=>{var t,a,n,{index:m,demo:p}=e,{demos:u,demo:v,assetSetId:b,patternId:g,templateId:E,canEdit:O,isLocalDev:k,template:I}=Object(s.useContext)(h.a),x=Object(o.useDispatch)(),T=Object(c.g)(),N=Object(s.useRef)(null),{isDragging:D}=Object(w.a)({dragTypeId:"demo",index:m,ref:N,handleDrop:e=>{var{dragIndex:t}=e;x(Object(o.updateTemplateInfo)({patternId:g,templateId:E,template:{demos:_()(I.demos,t,m)}}))}}),P=D?0:1;return r.a.createElement("figure",{ref:N,className:f()("ks-template-demos__item",{"ks-template-demos__item--active":(null==v?void 0:v.id)===p.id}),style:{opacity:P}},r.a.createElement("div",{className:"ks-template-demos__item__actions"},p.description&&r.a.createElement(l.t,{trigger:"hover",content:r.a.createElement("p",{style:{maxWidth:"200px"}},p.description)},r.a.createElement(l.k,{symbol:"info",size:"s"})),k&&Object(i.d)(p)&&r.a.createElement(l.t,{content:r.a.createElement(S.a,{data:{title:null==p?void 0:p.title,description:null!==(t=null==p?void 0:p.description)&&void 0!==t?t:"",path:null==p?void 0:null===(a=p.templateInfo)||void 0===a?void 0:a.path,alias:null==p?void 0:null===(n=p.templateInfo)||void 0===n?void 0:n.alias},maxWidth:360,handleSubmit:e=>{var{path:t,alias:a,title:n,description:s}=e;x(Object(o.updateTemplateDemo)({patternId:g,templateId:E,demo:_objectSpread({},p,{title:n,description:s,templateInfo:_objectSpread({},p.templateInfo,{path:t,alias:a})})}))}}),trigger:"click"},r.a.createElement(l.l,{kind:"icon",icon:"edit",size:"s",flush:!0},"Edit")),O&&r.a.createElement(l.t,{content:r.a.createElement("p",null,"Duplicate"),trigger:"hover"},r.a.createElement(l.l,{size:"s",kind:"icon",icon:"duplicate",flush:!0,handleTrigger:()=>{var e=j.a.generate();x(Object(o.duplicateDemo)({patternId:g,templateId:E,demoId:p.id,newDemoId:e})),setTimeout(()=>{T.push("".concat(d.a.PATTERN,"/").concat(g,"/").concat(E,"/").concat(e))},250)}},"Duplicate Demo")),O&&r.a.createElement(l.o,{confirmationMessage:"Are you sure you want to delete this pattern demo?",size:"s",flush:!0,handleTrigger:()=>{if(x(Object(o.removeTemplateDemo)({patternId:g,templateId:E,demoId:p.id})),v.id===p.id){var[e]=u.filter(e=>e.id!==p.id);T.push("".concat(d.a.PATTERN,"/").concat(g,"/").concat(E,"/").concat(e.id))}}})),r.a.createElement("div",{className:"ks-template-demos__item__thumbnail-wrap"},r.a.createElement(y.a,{patternId:g,templateId:E,assetSetId:b,demo:p,handleSelection:()=>{T.push("".concat(d.a.PATTERN,"/").concat(g,"/").concat(E,"/").concat(p.id))}})),r.a.createElement("figcaption",null,p.title))},KsTemplateDemos=()=>{var{demos:e,patternId:t,templateId:a,isLocalDev:n}=Object(s.useContext)(h.a),i=Object(o.useDispatch)(),m=Object(c.g)(),p=f()({"ks-template-demos":!0});return r.a.createElement("nav",{className:p},r.a.createElement("div",{className:"ks-template-demos__items"},e.map((e,t)=>r.a.createElement(KsTemplateDemo,{index:t,demo:e,key:e.id})),r.a.createElement("div",{className:"ks-template-demos__item ks-template-demos__item--btns"},n&&r.a.createElement(l.t,{content:r.a.createElement(S.a,{maxWidth:360,handleSubmit:e=>{var{path:n,alias:s}=e;i(Object(o.addTemplateTemplateDemo)({alias:s,path:n,patternId:t,templateId:a}))}}),trigger:"click"},r.a.createElement(l.l,{kind:"standard",icon:"add",size:"s"},"Template Demo")),r.a.createElement(l.l,{size:"s",kind:"standard",icon:"add",handleTrigger:()=>{var e=j.a.generate();i(Object(o.addTemplateDataDemo)({patternId:t,templateId:a,demoId:e})),setTimeout(()=>{m.push("".concat(d.a.PATTERN,"/").concat(t,"/").concat(a,"/").concat(e))},100)}},"Data Demo"))))};function template_view_ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function template_view_objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?template_view_ownKeys(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):template_view_ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}var k=Object(s.lazy)(()=>a.e("spec-docs-gTRCv~2881395f").then(a.bind(null,"./src/client/pages/pattern-view/components/spec-docs.tsx")));t.a=e=>{var t,a,{isVerbose:n=!0,demoSize:m,isReadmeShown:p=!0,isTitleShown:u=!0,isSchemaFormShown:v=!0,isCodeBlockShown:g=!1,id:f,templateId:E,demoId:j}=e,O=f,_=(Object(o.useSelector)(e=>e.userState.role.permissions),Object(o.useSelector)(e=>e.userState.canEdit)),y=Object(o.useSelector)(e=>e.userState.isLocalDev),S=Object(o.useSelector)(e=>{var{patternsState:t}=e;return Object.values(t.patterns)}),w=Object(o.useSelector)(e=>{var{patternsState:t}=e;return t.patterns[f]});if(!w){var I=S.map(e=>e.id).join(", "),x='The pattern "'.concat(f,'" was not found, these are the available ids: "').concat(I,'".');throw console.error(x),new Error(x)}var T=Object(c.g)(),N=Object(o.useSelector)(e=>e.patternsState.templateStatuses),{allAssetSets:D,globalAssetSetIds:P}=Object(o.useSelector)(e=>{var{assetSetsState:t}=e;return{allAssetSets:t.allAssetSets,globalAssetSetIds:t.globalAssetSetIds}}),[C,A]=Object(s.useState)(""),[z,R]=Object(s.useState)(),W=Object(o.useDispatch)(),{templates:H}=w,K=H.find(e=>e.id===E),{spec:L={},title:B,assetSetIds:F,demosById:M,statusId:U}=K,q=Object(s.useRef)(M),{props:V}=L,J=N.find(e=>e.id===U),G=!!(Object.keys((null==V?void 0:V.properties)||{}).length>0),X=null!==(t=null==K?void 0:null===(a=K.demos)||void 0===a?void 0:a.map(e=>M[e]))&&void 0!==t?t:[],[Q]=X,Y=M&&j?M[j]:null!=Q?Q:{type:"data",id:"blank",description:"",title:"Blank",data:{props:{},slots:{}}};j&&!M[j]&&T.replace("".concat(d.a.PATTERN,"/").concat(O,"/").concat(E));Y&&Object(i.d)(Y);var Z=(null!=F?F:P).map(e=>template_view_objectSpread({id:e},D[e])),[$,ee]=Object(s.useState)(Z[0]?Z[0].id:""),te=v&&G,ae={patternId:O,pattern:w,templateId:E,template:K,demo:Y,demos:X,spec:L,canEdit:_,isLocalDev:y,title:B,hasSchema:G,assetSetId:$},ne=r.a.createElement("div",{className:"ks-template-view__code-block-wrapper"},r.a.createElement(l.f,{items:[(null==z?void 0:z.code)?{id:"usage",name:"Usage",code:z.code,language:z.language,isEditable:!1}:null,C?{id:"html",name:"HTML",language:"html",code:formatHtmlCode(C)}:null].filter(Boolean)}));return r.a.createElement(h.a.Provider,{value:ae},r.a.createElement("article",{className:"ks-template-view"},r.a.createElement("div",{className:"ks-template-view__overview-wrapper"},n&&r.a.createElement(b.c,{assetSets:Z,status:J,isTitleShown:!n&&u,handleAssetSetChange:e=>{ee(e.value)},handleStatusChange:e=>{W(Object(o.updateTemplateInfo)({templateId:E,patternId:O,template:{statusId:e.value}}))}}),n&&r.a.createElement(KsTemplateDemos,null),r.a.createElement(b.b,{demoSize:m,isFormVisible:te&&Object(i.a)(Y),key:null==Y?void 0:Y.id,handleCodeUsage:R,handleRenderedHtml:A,handlePropsChange:e=>{Object(i.a)(Y)&&W(Object(o.updateTemplateDemo)({patternId:O,templateId:E,demo:template_view_objectSpread({},Y,{data:template_view_objectSpread({},Y.data,{props:e})})}))},handleSlotsChange:e=>{Object(i.a)(Y)&&W(Object(o.updateTemplateDemo)({patternId:O,templateId:E,demo:template_view_objectSpread({},Y,{data:template_view_objectSpread({},Y.data,{slots:e})})}))},handleDemoReset:()=>{var e,t=null!==(e=q.current[null==Y?void 0:Y.id])&&void 0!==e?e:template_view_objectSpread({},Y,{data:{props:{},slots:{}}});W(Object(o.updateTemplateDemo)({patternId:O,templateId:E,demo:t}))}})),g&&ne,p&&"",n&&r.a.createElement(s.Suspense,{fallback:r.a.createElement(l.e,null)},r.a.createElement(k,null))))}},"./src/client/utils/index.ts":function(e,t,a){function getBreadcrumb(e){for(var{navItem:t,navItems:a,rootKey:n="root"}=e,s=[],getParentItem=e=>a.find(t=>{var{id:a}=t;return e===a}),{parentId:r}=t;r!==n;){var l=getParentItem(r);s.push(l.name),r=l.parentId}return s.reverse()}a.d(t,"a",(function(){return getBreadcrumb}))}}]);
//# sourceMappingURL=custom-page-KXWAf~pattern-view-page-WE7TE~21833f8f.chunk.eaa5497fb7f7db0479e3.js.map