@knapsack/app/dist/client/pattern-view-page-WE7TE~d43b3d56.chunk.eaa5497fb7f7db0479e3.js

Build Design Systems on top of knapsack, by Basalt

(window.webpackJsonp=window.webpackJsonp||[]).push([["pattern-view-page-WE7TE~d43b3d56"],{"./src/client/pages/pattern-view/components/pattern-settings/pattern-settings.scss":function(e,t,a){},"./src/client/pages/pattern-view/components/pattern-settings/prop-editor.scss":function(e,t,a){},"./src/client/pages/pattern-view/components/pattern-settings/spec-item.scss":function(e,t,a){},"./src/client/pages/pattern-view/pattern-view-page.scss":function(e,t,a){},"./src/client/pages/pattern-view/pattern-view-page.tsx":function(e,t,a){a.r(t);var r,s=a("../node_modules/@babel/runtime/helpers/esm/extends.js"),n=a("react"),i=a.n(n),l=a("../design-system/dist/ks-design-system.js"),c=a("../node_modules/react-router/esm/react-router.js"),o=a("../node_modules/classnames/index.js"),p=a.n(o),d=a("./src/client/store/index.ts"),m=a("./src/client/utils/error-catcher.jsx"),u=a("./src/lib/constants.ts"),b=a("./src/client/layouts/page-with-sidebar.tsx"),g=a("../node_modules/@babel/runtime/helpers/esm/defineProperty.js"),v=a("../packages/core/types.js"),y=a("../node_modules/immer/dist/immer.module.js"),h=a("../node_modules/shortid/index.js"),O=a.n(h),j=a("../node_modules/array-move/index.js"),f=a.n(j),E=a("./src/lib/utils.ts");!function(e){e.Prop="Prop",e.Slot="Slot"}(r||(r={}));var w=a("../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),S=a("../node_modules/sentence-case/dist.es2015/index.js");a("./src/client/pages/pattern-view/components/pattern-settings/prop-editor.scss");function ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}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(g.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 _=i.a.memo(e=>{var t,{prop:a,handleChange:r}=e,s=Object(d.useSelector)(e=>"react"===e.ui.currentTemplateRenderer),c={type:"object",required:[],properties:{title:{type:"string",title:"Title"},description:{type:"string",title:"Description"},isRequired:{type:"boolean",title:"Required?"},default:{type:"string",title:"Default Value"}}},{data:o}=a,[p,m]=Object(n.useState)({value:a.type,label:Object(S.a)(a.type)}),u=_objectSpread({isRequired:null!==(t=a.isRequired)&&void 0!==t&&t},o);switch(a.type){case v.PropTypeNames.string:break;case v.PropTypeNames.options:c.properties.default.enum=u.enum,a.isRequired,c.properties.enum={type:"array",title:"Options",items:{type:"string"}};break;case v.PropTypeNames.boolean:c.properties.default.type="boolean";break;case v.PropTypeNames.number:c.properties.default.type="number";break;case v.PropTypeNames.function:c.properties.tsType={type:"string",title:"TypeScript Type",default:"() => void"}}return i.a.createElement("div",{className:"ks-prop-editor"},i.a.createElement("div",{className:"ks-u-margin-top--s"},i.a.createElement(l.u,{label:"Type",options:[v.PropTypeNames.string,v.PropTypeNames.number,v.PropTypeNames.boolean,v.PropTypeNames.options,v.PropTypeNames.arrayOfStrings,s?v.PropTypeNames.function:null].filter(Boolean).map(e=>({value:e,label:Object(S.a)(e)})),value:p,size:"s",handleChange:e=>{var{title:t,description:s}=a.data,n=_objectSpread({},a,{type:e.value,data:{title:t,description:s}});switch(m(e),n.type){case v.PropTypeNames.string:n.data.type="string";break;case v.PropTypeNames.options:n.data.type="string",n.data.enum=[];break;case v.PropTypeNames.boolean:n.data.type="boolean";break;case v.PropTypeNames.number:n.data.type="number";break;case v.PropTypeNames.function:n.data.typeof="function",n.data.tsType="() => void"}r(n)}})),i.a.createElement("div",{className:"ks-u-margin-top--s"},i.a.createElement(l.y,{schema:c,formData:u,liveValidate:!0,uiSchema:{enum:{"ui:detailsWrap":!1,"ui:emptyValue":""},description:{"ui:widget":"textarea","ui:options":{rows:2}}},onChange:e=>{var{formData:t}=e,{isRequired:s}=t,n=Object(w.a)(t,["isRequired"]),i=_objectSpread({},a,{isRequired:s,data:_objectSpread({},a.data,{},n)});r(i)}})),i.a.createElement("details",null,i.a.createElement("pre",null,i.a.createElement("code",null,JSON.stringify(a.data,null,"  ")))))},(function areEqual(e,t){return JSON.stringify(e.prop)===JSON.stringify(t.prop)}));function slot_editor_ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}var KsSlotEditor=e=>{var{slot:t,handleChange:a}=e,{currentTemplateRenderer:r}=Object(d.useSelector)(e=>e.ui),s={type:"object",required:["title"],properties:{title:{type:"string",title:"Title"},description:{type:"string",title:"Description"},isRequired:{type:"boolean",title:"Required?"},disallowText:{type:"boolean",title:"Disallow Text?",description:"Prevent simple text in this slot? Would then only allow other patterns inside."},allowedPatternIds:{type:"array",title:"Allowed Patterns",description:"What other patterns are allowed in this slot?",uniqueItems:!0,items:{type:"string",enum:Object(d.useSelector)(e=>Object.values(e.patternsState.patterns).filter(e=>{var{templates:t}=e;return t.some(e=>{var{templateLanguageId:t}=e;return t===r})}).map(e=>{var{id:t}=e;return t}))}}}},{data:n}=t;return i.a.createElement("div",{className:"ks-slot-editor"},i.a.createElement(l.y,{schema:s,formData:n,uiSchema:{allowedPatternIds:{"ui:widget":"checkboxes","ui:options":{inline:!0}},description:{"ui:widget":"textarea","ui:options":{rows:2}}},onChange:e=>{var{formData:r}=e;a(function slot_editor_objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?slot_editor_ownKeys(Object(a),!0).forEach((function(t){Object(g.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):slot_editor_ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({},t,{data:r}))}}))},k=a("./src/client/components/inline-edit.tsx"),P=(a("./src/client/pages/pattern-view/components/pattern-settings/spec-item.scss"),a("./src/client/hooks.ts")),KsSpecItem=e=>{var{id:t,children:a,type:s,moveItem:c,deleteItem:o,index:p,handleNewId:d,isInitiallyOpen:m=!1}=e,[u,b]=Object(n.useState)(m),g=Object(n.useRef)(null),{isDragging:v}=Object(P.a)({dragTypeId:r[s],index:p,ref:g,handleDrop:e=>{var{dragIndex:t}=e;c(t,p)}}),y=v?0:1;return i.a.createElement("div",{ref:g,className:"ks-spec-item ".concat(v?"ks-spec-item--dragging":""),style:{marginBottom:"var(--space-xs)",opacity:y}},i.a.createElement("header",{className:"ks-spec-item__header",style:{display:"flex",alignItems:"center",padding:"var(--space-xs)",borderBottom:u?"var(--c-frame)":"",backgroundColor:"var(--c-shade)"}},i.a.createElement("div",{className:"ks-spec-item__handle"},i.a.createElement(l.k,{symbol:"drag-handle"})),i.a.createElement("h4",{className:"ks-spec-item__title",style:{marginTop:"0"}},i.a.createElement(k.a,{showControls:!0,text:t,handleSave:d})),i.a.createElement("div",{style:{marginLeft:"auto",display:"flex",alignItems:"center"}},i.a.createElement(l.o,{flush:!0,size:"s",handleTrigger:()=>o(p)}),i.a.createElement("div",{style:{transform:u?"":"rotate(90deg)",transition:"transform .15s ease-in",marginLeft:"var(--space-xs)"}},i.a.createElement(l.l,{icon:"collapser",size:"m",flush:!0,kind:"icon",handleTrigger:()=>b(e=>!e)})))),i.a.createElement("div",{className:"ks-spec-item__body ks-u-shade-bg",style:{display:u?"block":"none",padding:"var(--space-xs)",backgroundColor:"var(--c-shade)"}},a))},T=a("./src/client/pages/pattern-view/components/edit-template-demo.tsx");a("./src/client/pages/pattern-view/components/pattern-settings/pattern-settings.scss");function pattern_settings_ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function pattern_settings_objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?pattern_settings_ownKeys(Object(a),!0).forEach((function(t){Object(g.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):pattern_settings_ownKeys(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}var removeSpaces=e=>e.replace(/ /g,""),KsSpecItems=e=>{var{type:t,children:a,handleAdd:r}=e;return i.a.createElement("div",{className:"ks-spec-items ks-u-margin-top--m"},i.a.createElement("h5",{className:"ks-spec-items__title"},t,"s"),i.a.createElement("div",{className:"ks-spec-items__wrapper ks-u-margin-top--s"},a),i.a.createElement(l.l,{handleTrigger:r,kind:"standard",icon:"add",size:"s"},t))},KsPatternSettings=e=>{var t,a,{pattern:s,activeTemplateId:o}=e,m=Object(d.useDispatch)(),b=Object(c.g)(),g=Object(d.useSelector)(e=>e.ui.pageDetailsOpen),{templates:h}=s,j=(null==h?void 0:h.length)>0&&o?null==h?void 0:h.find(e=>e.id===o):h[0],w=(Object(d.useSelector)(e=>{var t;return null===(t=Object.values(e.patternsState.renderers).find(e=>{var{meta:t}=e;return t.id===j.templateLanguageId}))||void 0===t?void 0:t.meta}),null!==(t=null==j?void 0:j.spec)&&void 0!==t?t:{}),S=!w.isInferred;var k=Object.keys((null==w?void 0:null===(a=w.props)||void 0===a?void 0:a.properties)||{}).map((function determinePropType(e){var t=w.props.properties[e],a=!!Array.isArray(w.props.required)&&w.props.required.includes(e),r=v.PropTypeNames.unknown;return Object(v.isStringProp)(t)?r=v.PropTypeNames.string:Object(v.isBooleanProp)(t)?r=v.PropTypeNames.boolean:Object(v.isFunctionProp)(t)?r=v.PropTypeNames.function:Object(v.isNumberProp)(t)?r=v.PropTypeNames.number:Object(v.isOptionsProp)(t)?r=v.PropTypeNames.options:Object(v.isArrayOfStringsProp)(t)?r=v.PropTypeNames.arrayOfStrings:Object(v.isArrayOfObjectsProp)(t)&&(r=v.PropTypeNames.arrayOfObjects),{type:r,data:t,isRequired:a,id:e}})),P=Object(n.useMemo)(()=>JSON.stringify(k),[k]),N=Object.keys((null==w?void 0:w.slots)||{}).map(e=>({id:e,data:w.slots[e]})),I=Object(n.useMemo)(()=>JSON.stringify(N),[N]),[x,D]=Object(n.useState)(k),[R,q]=Object(n.useState)(N),[C,A]=Object(n.useState)([]),z=Object(n.useCallback)((e,t)=>{D(a=>f()(a,e,t))},[]),K=Object(n.useCallback)(e=>{D(t=>t.filter((t,a)=>a!==e))},[]),L=Object(n.useCallback)((e,t)=>{q(a=>f()(a,e,t))},[]),V=Object(n.useCallback)(e=>{q(t=>t.filter((t,a)=>a!==e))},[]),J=P!==JSON.stringify(x)||I!==JSON.stringify(R);return i.a.createElement("div",{className:"ks-pattern-settings"},i.a.createElement("div",{className:p()({"ks-pattern-settings__page-details-collapse-ctrl":!0,"ks-pattern-settings__page-details-collapse-ctrl--open":g})},i.a.createElement(l.l,{size:"s",handleTrigger:()=>{m(Object(d.setPageDetailsVisibility)({isOpen:!g}))}},i.a.createElement("span",{className:"ks-pattern-settings__page-details-collapse-ctrl__arrow"},i.a.createElement(l.k,{size:"s",symbol:"collapser"})),i.a.createElement("span",{className:"ks-pattern-settings__page-details-collapse-ctrl__text"},"Pattern Settings"))),i.a.createElement("div",{className:"ks-pattern-settings__inner"},i.a.createElement("h3",{className:"ks-pattern-settings__title"},"Pattern Settings"),C.length>0&&i.a.createElement("div",{className:"ks-pattern-settings__errors ks-u-shade-bg",style:{borderRadius:"var(--radius-l)",padding:"var(--space-s)",color:"var(--c-danger)"}},i.a.createElement("p",null,i.a.createElement("strong",null,"Errors")),i.a.createElement("ul",null,C.map(e=>i.a.createElement("li",{key:e},e)))),i.a.createElement("div",{className:"ks-pattern-settings__edit-template ks-u-margin-top--s"},i.a.createElement(T.a,{btnSize:"s",data:{path:j.path,alias:j.alias},handleSubmit:e=>{var{path:t,alias:a}=e;m(Object(d.updateTemplateInfo)({patternId:s.id,templateId:j.id,template:{path:t,alias:a}}))},handleDelete:()=>{m(Object(d.deleteTemplate)({patternId:s.id,templateId:j.id})),setTimeout(()=>{b.push("".concat(u.a.PATTERN,"/").concat(s.id)),setTimeout(()=>{m(Object(d.setCurrentTemplateRenderer)({id:j.templateLanguageId}))},50)},50)}})),i.a.createElement("hr",null),(null==w?void 0:w.isInferred)&&i.a.createElement("p",{className:"ks-u-body-small ks-u-text-subdued"},"Since this pattern is using the experimental setting"," ",i.a.createElement("code",null,"spec.isInferred")," to infer the spec using PropTypes or TypeScript types, the Spec Editor is disabled."),S&&i.a.createElement("div",{className:"ks-pattern-settings__spec-editor"},i.a.createElement("h4",{className:"ks-pattern-settings__sub-title"},"Templates"),i.a.createElement(l.m,{isGapless:!1},i.a.createElement(l.l,{kind:"cancel",size:"s",disabled:!J,handleTrigger:()=>{D(k),q(N)}},"Cancel"),i.a.createElement(l.l,{kind:"primary",size:"s",disabled:!J,handleTrigger:()=>{var e={slots:function convertSlotData(e){var t={};return e.forEach(e=>{var{id:a,data:r}=e;t[a]=r}),t}(R),props:function convertPropData(e){var t=pattern_settings_objectSpread({$schema:"http://json-schema.org/draft-07/schema",description:s.description,type:"object"},w.props,{required:[],properties:{}});return e.forEach(e=>{var{id:a,isRequired:r,data:s}=e;r&&t.required.push(a),t.properties[a]=s}),t}(x)},t=Object(E.b)(e);t.ok?m(Object(d.updateSpec)({patternId:s.id,templateId:j.id,spec:e})):A(t.message.split("\n"))}},"Save")),i.a.createElement(KsSpecItems,{type:r.Prop,handleAdd:()=>{D(e=>{var t={id:e.some(e=>"newProp"===e.id)?O.a.generate():"newProp",type:v.PropTypeNames.string,isRequired:!1,data:{type:"string"}};return[...e,t]})}},x.map((e,t)=>i.a.createElement(KsSpecItem,{key:e.id,index:t,id:e.id,moveItem:z,deleteItem:K,type:r.Prop,handleNewId:e=>{D(a=>Object(y.a)(a,a=>{a=a.map((a,r)=>r!==t?a:(a.id=removeSpaces(e),a))}))}},i.a.createElement(_,{prop:e,handleChange:e=>{A([]),D(a=>a.map((a,r)=>r!==t?a:e))},key:e.type})))),i.a.createElement("hr",null),i.a.createElement(KsSpecItems,{type:r.Slot,handleAdd:()=>{q(e=>{var t=e.some(e=>"newSlot"===e.id)?O.a.generate():"newSlot";return[...e,{id:t,data:{title:"New Slot"}}]})}},R.map((e,t)=>i.a.createElement(KsSpecItem,{key:e.id,index:t,id:e.id,moveItem:L,deleteItem:V,type:r.Slot,handleNewId:e=>{q(a=>a.map((a,r)=>r!==t?a:pattern_settings_objectSpread({},a,{data:pattern_settings_objectSpread({},a.data,{title:e}),id:removeSpaces(e)})))}},i.a.createElement(KsSlotEditor,{slot:e,handleChange:e=>{A([]),q(a=>a.map((a,r)=>r!==t?a:e))}})))))))},N=a("./src/client/pages/pattern-view/template-view.tsx"),I=a("./src/client/components/suspense-loader.tsx"),x=(a("./src/client/pages/pattern-view/pattern-view-page.scss"),a("./src/client/pages/pattern-view/shared/demo-grid-controls.scss"),a("./src/client/components/page-header.tsx")),D=a("./src/client/utils/index.ts"),R=a("./src/client/pages/pattern-view/components/index.ts"),q=i.a.lazy(()=>Promise.all([a.e("vendors~custom-page-KXWAf~custom-slice-collection-VBAVI~74226ea0"),a.e("custom-slice-collection-VBAVI~317ccae7")]).then(a.bind(null,"./src/client/pages/custom-page/custom-slice-collection.tsx"))),C=[{value:"s",label:"Small"},{value:"m",label:"Medium"},{value:"l",label:"Large"},{value:"full",label:"Full"}],PatternViewPage=e=>{var t,{patternId:a,templateId:r,demoId:s}=e,o=Object(c.g)(),b=(Object(d.useSelector)(e=>e.userState.canEdit),Object(d.useSelector)(e=>{var t=e.patternsState.patterns[a];if(!t)throw new Error("The pattern id ".concat(a," cannont be found in Redux Store"));return t})),g=Object(d.useSelector)(e=>e.ui.currentTemplateRenderer),v=Object(d.useSelector)(e=>{var t=e.navsState.secondary.find(e=>e.path==="".concat(u.a.PATTERN,"/").concat(a));return t?Object(D.a)({navItem:t,navItems:e.navsState.secondary}):[]}),y=Object(d.useDispatch)(),h="all"===r,{title:O,templates:j,description:f,demoSize:E}=b,w=j.filter(e=>e.templateLanguageId===g),[S,_]=Object(n.useState)(w.length>0),k=E?C.find(e=>e.value===E):{value:"l",label:"Large"},P={value:"all",label:"Show All"},T=w.find(e=>e.id===r),[A,z]=Object(n.useState)(T?{label:T.title,value:T.id}:P),K=!1;if(h)K=!(!h||!j.find(e=>{var t,a;return(null===(t=e.spec)||void 0===t?void 0:null===(a=t.props)||void 0===a?void 0:a.properties)&&Object.keys(e.spec.props.properties).length>0}));else{var L,V,J=j.find(e=>e.id===r);K=!!((null==J?void 0:null===(L=J.spec)||void 0===L?void 0:null===(V=L.props)||void 0===V?void 0:V.properties)&&Object.keys(J.spec.props.properties).length>0)}var B=p()("ks-pattern-view-page",{"ks-pattern-view-page--right-sidebar-open":!1}),W=Object(n.useCallback)(e=>{y(Object(d.updatePatternSlices)(a,e))},[y,a]);return i.a.createElement(m.a,null,i.a.createElement("section",{className:B},i.a.createElement("header",{className:"ks-pattern-view-page__header"},i.a.createElement("div",{className:"ks-pattern-view-page__header__info-wrap"},i.a.createElement(x.a,{section:v.length>0&&"".concat(v.join(" / ")," /"),title:O,handleEditTitle:e=>{y(Object(d.updatePatternInfo)(a,{title:e}))},description:f,handleEditDescription:e=>{y(Object(d.updatePatternInfo)(a,{description:e}))},flush:!0})),i.a.createElement("div",{className:"ks-pattern-view-page__header__controls"},w.length>1&&i.a.createElement("div",null,i.a.createElement(l.u,{label:"Template",value:A,options:[P,...w.map(e=>({value:e.id,label:e.title}))],handleChange:e=>{z(e),o.push("".concat(u.a.PATTERN,"/").concat(a,"/").concat(e.value))}})),K&&i.a.createElement("div",null,i.a.createElement(l.u,{options:C,value:k,handleChange:e=>{var{value:t}=e;y(Object(d.updatePatternInfo)(a,{demoSize:t}))},label:"Stage Size"})))),i.a.createElement("div",{className:"ks-pattern-view-page__content"},0===w.length&&i.a.createElement("div",{className:"pattern-view-page__add-template-form"},i.a.createElement("h3",null,"Add Template"),i.a.createElement(R.a,{handleSubmit:e=>{var{path:t,alias:r}=e;y(Object(d.addTemplate)({alias:r,path:t,patternId:a,templateLanguageId:g})),setTimeout(()=>_(!0),100)}})),S&&w.length>0&&!h&&i.a.createElement(N.a,{id:a,templateId:r,demoId:s,key:"".concat(a,"-").concat(r),demoSize:k.value,isVerbose:!0,isCodeBlockShown:!0}),S&&w.length>0&&h&&j.map(e=>i.a.createElement("div",{key:e.id},i.a.createElement(N.a,{id:a,key:e.id,templateId:e.id,demoSize:k.value,isVerbose:!h}),i.a.createElement("br",null),i.a.createElement("hr",null),i.a.createElement("br",null))),i.a.createElement("div",{className:"ks-pattern-view-page__content__slices"},i.a.createElement(I.a,null,i.a.createElement(q,{handleSave:W,initialSlices:null!==(t=b.slices)&&void 0!==t?t:[]}))))))};t.default=e=>{var{patternId:t,templateId:a}=e,r=Object(d.useSelector)(e=>e.userState.canEdit),n=Object(d.useSelector)(e=>{var a=e.patternsState.patterns[t];if(!a)throw new Error("The pattern id ".concat(t," cannont be found in Redux Store"));return a}),l=Object(d.useSelector)(e=>e.ui.currentTemplateRenderer),{templates:c}=n,o=c.filter(e=>e.templateLanguageId===l);return i.a.createElement(b.default,{slottedDetails:r&&0!==o.length&&i.a.createElement(KsPatternSettings,{pattern:n,activeTemplateId:a,key:"".concat(n.id,"-").concat(a,"-").concat(l)})},i.a.createElement(PatternViewPage,Object(s.a)({},e,{key:"".concat(n.id,"-").concat(a,"-").concat(l)})))}}}]);
//# sourceMappingURL=pattern-view-page-WE7TE~d43b3d56.chunk.eaa5497fb7f7db0479e3.js.map