@cianciarusocataldo/demo-ui/dist/index.cjs

A tiny UI library designed for build interactive demos for every react app

import"./styles/index.css";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("html2canvas"),r=require("classnames");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(e),n=a(t),c=a(r),o=function(){return(o=Object.assign||function(e){for(var t,r=1,a=arguments.length;r<a;r++)for(var l in t=arguments[r])Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l]);return e}).apply(this,arguments)};function i(e,t){var r={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(r[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(a=Object.getOwnPropertySymbols(e);l<a.length;l++)t.indexOf(a[l])<0&&Object.prototype.propertyIsEnumerable.call(e,a[l])&&(r[a[l]]=e[a[l]])}return r}var u={checkbox:function(e){return!("true"===String(e))},text:function(e){return e},number:function(e){return e},range:function(e){return e},select:function(e){return e},color:function(e){return String(e)}},d=function(e,t){return u[t](e)},f=function(e,t){var r=o({},e);return Object.keys(t).forEach((function(e){return r[e]=t[e]})),r},s=function(e){var t={};return Object.keys(e).forEach((function(r){return t[r]=e[r].value})),t},m=function(e,t){void 0===t&&(t="#ffffff"),n.default(e,{scrollY:0,scrollX:0,allowTaint:!0,backgroundColor:t,useCORS:!0,logging:!1,height:window.outerHeight+window.innerHeight,windowHeight:window.outerHeight+window.innerHeight}).then((function(e){p(e.toDataURL("image/png").replace(/^data:image\/png/,"data:application/octet-stream"))}))},p=function(e){var t=document.createElement("a");t.setAttribute("download","component_preview.png"),t.setAttribute("href",e),t.click()},v=function(e){var t=e.className,r=e.label,a=void 0===r?"":r,n=e.children;e.callBack;var u=e.values,d=void 0===u?{}:u,f=e.hide,s=void 0!==f&&f,m=e.id,p=e.onChange,v=void 0===p?function(){}:p,y=i(e,["className","label","children","callBack","values","hide","id","onChange"]),h=l.default.useState(""),E=h[0],g=h[1],b=c.default("box",y.type);return l.default.createElement("div",{className:c.default(t,{hidden:s})},l.default.createElement("div",{className:"box-container",key:m||a},l.default.createElement("div",{key:"demo_label",className:"demo-label"},l.default.createElement("label",null,a)),"select"===y.type?l.default.createElement("select",{className:b,value:E,onChange:function(e){v(d[e.target.value]),g(e.target.value)}},Object.keys(d).map((function(e){return l.default.createElement("option",{key:e,value:e},e)}))):l.default.createElement("input",o({},y,{checked:y.value,className:b,onChange:function(e){return v(e.target.value)}}))),n)},y=function(e){var t=e.className,r=e.borderContent,a=e.label,n=e.children,c=e.screenshot,o=e.header,i=e.startColor,u=void 0===i?"#FFFFFF":i,d=e.id,f=void 0===d?String(Math.random()):d,s=l.default.useState(u),p=s[0],v=s[1];return l.default.createElement("div",{className:t},o&&l.default.createElement("p",{className:"previewer-header"},o),l.default.createElement("div",{className:"previewer-container"},l.default.createElement("div",null,l.default.createElement("p",{className:"previewer-label"},a),l.default.createElement("div",{className:"preview",id:"preview",style:{backgroundColor:p}},l.default.createElement("div",{className:"preview-tools"},l.default.createElement("input",{type:"color",onChange:function(e){return v(e.target.value)},value:p,id:"color-picker-"+f,style:{display:"none"}}),l.default.createElement("button",{className:"icon-button",onClick:function(){var e;return null===(e=document.getElementById("color-picker-"+f))||void 0===e?void 0:e.click()}},l.default.createElement("svg",{width:"60",height:"60",viewBox:"0 0 64 64"},l.default.createElement("circle",{cx:"31.8",cy:"32",r:"32",fill:"#e0e0d1",className:"fill"}),l.default.createElement("path",{d:"M32 12c-8.5 0-18 5.4-21.1 15.7-1.6 5.2 5.2 3.1 5.6 9.2.4 4.9-1.1 6.6-1.4 9.6-.4 4 8.9 10 17.2 9.6C44.6 55.4 54 46.3 54 34s-9.7-22-22-22zm-8 36c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z",fill:"#231f20",opacity:".2"}),l.default.createElement("path",{d:"M32 10c-8.5 0-18 5.4-21.1 15.7-1.6 5.2 5.2 3.1 5.6 9.2.4 4.9-1.1 6.6-1.4 9.6-.4 4 8.9 10 17.2 9.6C44.6 53.4 54 44.3 54 32s-9.7-22-22-22zm-8 36c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z",fill:"#e0995e"}),l.default.createElement("g",{fill:"#231f20"},l.default.createElement("circle",{cx:"20.7",cy:"25",r:"4",opacity:".2"}),l.default.createElement("circle",{cx:"32",cy:"19.6",r:"4",opacity:".2"}),l.default.createElement("circle",{cx:"43.2",cy:"24.7",r:"4",opacity:".2"}),l.default.createElement("circle",{cx:"46.2",cy:"37.3",r:"4",opacity:".2"}),l.default.createElement("circle",{cx:"37.1",cy:"47.1",r:"4",opacity:".2"})),l.default.createElement("circle",{cx:"20.7",cy:"23",r:"4",fill:"#c75c5c"}),l.default.createElement("circle",{cx:"32",cy:"17.6",r:"4",fill:"#f5cf87"}),l.default.createElement("circle",{cx:"43.2",cy:"22.7",r:"4",fill:"#76c2af"}),l.default.createElement("circle",{cx:"46.2",cy:"35.3",r:"4",fill:"#fff"}),l.default.createElement("circle",{cx:"37.1",cy:"45.1",r:"4",fill:"#4f5d73"}))),c&&l.default.createElement("button",{className:"icon-button",onClick:function(){m(document.getElementById(f),p)}},l.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"48",viewBox:"0 0 45 36"},l.default.createElement("path",{d:"M42.117 5.215c.043-.121.07-.152.07-.285 0-.594-.473-.984-1.055-.984h-2.461c-.578 0-1.055.48-1.055 1.074 0 .125.023 0 .063.359h-5.023l-1.543-3.242C30.555.957 29.051 0 27.766 0H17.234c-1.285 0-2.785.957-3.348 2.137l-1.543 3.242h-1.445V3.762c0-.195-.156-.176-.352-.176H3.516c-.195 0-.352-.02-.352.176v1.438C1.406 5.199 0 6.645 0 8.426v24.379c0 1.781 1.418 3.406 3.164 3.406h38.672c1.746 0 3.164-1.625 3.164-3.406V8.426c0-1.684-1.27-3.066-2.883-3.211zM28.125 4.66c0 .199-.156.359-.352.359H17.227c-.195 0-.352-.16-.352-.359V3.227c0-.195.156-.359.352-.359h10.547c.195 0 .352.16.352.359zM4.922 12.367c-1.164 0-2.109-.961-2.109-2.148s.949-2.152 2.109-2.152 2.109.965 2.109 2.152-.945 2.148-2.109 2.148zm2.813 1.793c-.578 0-1.055-.48-1.055-1.074s.473-1.074 1.055-1.074a1.07 1.07 0 0 1 1.055 1.074c0 .594-.473 1.074-1.055 1.074zM22.5 33.164c-6.785 0-12.305-5.629-12.305-12.547S15.715 8.066 22.5 8.066s12.305 5.633 12.305 12.547S29.289 33.164 22.5 33.164zm0-22.59c-5.426 0-9.844 4.504-9.844 10.043s4.418 10.035 9.844 10.035 9.844-4.5 9.844-10.039S27.93 10.574 22.5 10.574zm0 15.418c-2.906 0-5.273-2.414-5.273-5.375s2.367-5.379 5.273-5.379 5.273 2.41 5.273 5.379-2.367 5.375-5.273 5.375zm0 0",fill:"#373f4e",className:"fill"})))),l.default.createElement("div",{className:"preview-screen",id:f},n)),l.default.createElement("div",{className:"border"},r))))},h=function(e,t,r,a,l,n,c){return void 0===a&&(a=!1),void 0===l&&(l=0),void 0===n&&(n=100),{type:e,value:t,values:r,hide:a,min:l,max:n,callBack:c}};exports.BooleanProp=function(e){return h("checkbox",e)},exports.Box=v,exports.ColorProp=function(e){return void 0===e&&(e="#ffffff"),h("color",e)},exports.Demo=function(e){var t=e.props,r=void 0===t?{}:t,a=e.rows,n=e.children,c=e.debug,u=i(e,["props","rows","children","debug"]),m=l.default.useState(s(r)),p=m[0],h=m[1],E=a||[Object.keys(r)];return l.default.createElement(y,o({},u,{borderContent:l.default.createElement("div",{key:"demo_rows"},E.map((function(e,t){return l.default.createElement("div",{className:"demo-row",key:"demo_row_"+t},e.map((function(e){return l.default.createElement("div",{key:e},l.default.createElement(v,{id:e,label:e,hide:r[e].hide,type:r[e].type,value:p[e],onChange:function(t){var a;return h(f(p,((a={})[e]=d(t,r[e].type),a)))},values:r[e].values}))})))})))}),l.default.createElement("div",{className:"demo-container",key:"demo_container"},l.default.createElement("div",{key:"demo_children"},"function"==typeof n?n(p,(function(e){return h(f(p,e))})):n),c&&l.default.createElement("div",{key:"props-debug",className:"props-container"},"{",Object.keys(p).map((function(e){return l.default.createElement("div",{className:"prop",key:e},l.default.createElement("label",{className:"name"},e+" : "),l.default.createElement("label",{className:"value"},""+p[e]),",")})),"}")))},exports.HiddenProp=function(e){return h("text",e,null,!0)},exports.NumberProp=function(e){return h("number",e)},exports.Previewer=y,exports.RangeProp=function(e,t,r){return void 0===e&&(e=0),void 0===t&&(t=0),void 0===r&&(r=100),h("range",e,null,!1,t,r)},exports.SelectProp=function(e){return h("select",e[Object.keys(e)[0]],e)},exports.StringProp=function(e){return h("text",e)},exports.downloadFile=p,exports.formatValue=d,exports.getProps=s,exports.merge=f,exports.takeScreenshot=m;