UNPKG

@staircase/persistence-widget

Version:

Provides React components to use. Uploads a couple of any files to Staircase Persistence Blobs

1 lines 17.7 kB
"use strict";function e(e,r){if(r==null||r>e.length)r=e.length;for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function r(e){if(Array.isArray(e))return e}function t(e,r,t,n,i,a,o){try{var u=e[a](o);var s=u.value}catch(c){t(c);return}if(u.done){r(s)}else{Promise.resolve(s).then(n,i)}}function n(e){return function(){var r=this,n=arguments;return new Promise(function(i,a){var o=e.apply(r,n);function u(e){t(o,i,a,u,s,"next",e)}function s(e){t(o,i,a,u,s,"throw",e)}u(undefined)})}}function i(e,r){if(!(e instanceof r)){throw new TypeError("Cannot call a class as a function")}}function a(e,r,t){if(r in e){Object.defineProperty(e,r,{value:t,enumerable:true,configurable:true,writable:true})}else{e[r]=t}return e}function o(e,r){var t=e==null?null:(typeof Symbol!=="undefined"&&e[Symbol.iterator]||e["@@iterator"]);if(t==null)return;var n=[];var i=true;var a=false;var o,u;try{for(t=t.call(e);!(i=(o=t.next()).done);i=true){n.push(o.value);if(r&&n.length===r)break}}catch(s){a=true;u=s}finally{try{if(!i&&t["return"]!=null)t["return"]()}finally{if(a)throw u}}return n}function u(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function s(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};var n=Object.keys(t);if(typeof Object.getOwnPropertySymbols==="function"){n=n.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))}n.forEach(function(r){a(e,r,t[r])})}return e}function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(r){n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})}t.push.apply(t,n)}return t}function l(e,r){r=r!=null?r:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(r))}else{c(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function p(e,t){return r(e)||o(e,t)||d(e,t)||u()}function d(r,t){if(!r)return;if(typeof r==="string")return e(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);if(n==="Object"&&r.constructor)n=r.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(r,t)}import f from"regenerator-runtime";var v=Object.create;var h=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=function(e,r){for(var t in r)h(e,t,{get:r[t],enumerable:!0})},g=function(e,r,t,n){var i=true,a=false,o=undefined;if(r&&typeof r=="object"||typeof r=="function")try{var u=function(){var i=c.value;!y.call(e,i)&&i!==t&&h(e,i,{get:function(){return r[i]},enumerable:!(n=$(r,i))||n.enumerable})};for(var s=b(r)[Symbol.iterator](),c;!(i=(c=s.next()).done);i=true)u()}catch(l){a=true;o=l}finally{try{if(!i&&s.return!=null){s.return()}}finally{if(a){throw o}}}return e};var w=function(e,r,t){return t=e!=null?v(x(e)):{},g(r||!e||!e.__esModule?h(t,"default",{value:e,enumerable:!0}):t,e)},_=function(e){return g(h({},"__esModule",{value:!0}),e)};var k={};m(k,{PersistenceWidget:function(){return ee},renderPersistenceWidget:function(){return en}});module.exports=_(k);var j=w(require("react"));var P=require("react"),C=require("@chakra-ui/react"),S=require("ulid");var O=require("react-hook-form"),E=require("react-drag-drop-files"),q=require("@chakra-ui/react");var B=require("@chakra-ui/react"),F=require("react"),R=require("react/jsx-runtime"),D=function(e){var r=e.onColorPick;var t=p((0,F.useState)("gray.200"),2),n=t[0],i=t[1],a=["gray.200","gray.300","gray.400","gray.500","gray.600","orange.200","orange.300","orange.400","orange.500","orange.600","yellow.200","yellow.300","yellow.400","yellow.500","yellow.600","green.200","green.300","green.400","green.500","green.600","cyan.200","cyan.300","cyan.400","cyan.500","cyan.600","blue.200","blue.300","blue.400","blue.500","blue.600","purple.200","purple.300","purple.400","purple.500","purple.600"];return(0,F.useEffect)(function(){r(n)},[n]),(0,R.jsx)(B.Center,{marginTop:5,children:(0,R.jsxs)(B.Popover,{variant:"picker",children:[(0,R.jsx)(B.PopoverTrigger,{children:(0,R.jsx)(B.Button,{"aria-label":n,background:n,height:"22px",width:"22px",padding:0,minWidth:"unset",borderRadius:3})}),(0,R.jsxs)(B.PopoverContent,{width:"170px",children:[(0,R.jsx)(B.PopoverArrow,{bg:n}),(0,R.jsx)(B.PopoverCloseButton,{color:"white"}),(0,R.jsx)(B.PopoverHeader,{height:"100px",backgroundColor:n,borderTopLeftRadius:5,borderTopRightRadius:5,color:"white",children:(0,R.jsx)(B.Center,{height:"100%",children:n})}),(0,R.jsx)(B.PopoverBody,{height:"240px",children:(0,R.jsx)(B.SimpleGrid,{columns:5,spacing:2,children:a.map(function(e){return(0,R.jsx)(B.Button,{"aria-label":e,background:e,height:"22px",width:"22px",padding:0,minWidth:"unset",borderRadius:3,_hover:{background:e},onClick:function(){i(e)}},e)})})})]})]})})};var W=require("@chakra-ui/icons"),I=require("react"),T=require("react/jsx-runtime"),z=function(e){var r=e.fields,t=e.onFormComplete,n=e.styles;var i=(0,O.useForm)(),a=i.handleSubmit,o=i.register,u=i.setValue,c=i.formState,d=c.errors,f=c.isSubmitting,v=p((0,I.useState)([]),2),h=v[0],$=v[1],b=function(e,r,t){var n=h.filter(function(t){return t.name!==e&&t.size!==r});$(n),u(t,n)};return(0,T.jsxs)("form",{style:{width:"100%"},onSubmit:a(t),children:[r.map(function(e,r){var t=e.name,i=e.placeholder,a=e.type,c=e.validation,p=e.label,f=e.options,v=e.types;{var x;switch(a){case"file":x=(0,T.jsxs)(q.Flex,{direction:"column",children:[(0,T.jsx)(E.FileUploader,{id:"fileUploader",handleChange:function(e){$(Array.from(e)),u(t,Array.from(e))},name:"file",types:v==="*"?void 0:v,label:"Drag or Click here to upload",multiple:!0}),h.length?(0,T.jsx)(q.UnorderedList,{pt:"20px",width:"100%",children:h.map(function(e,r){return(0,T.jsx)(q.ListItem,{padding:"10px",children:(0,T.jsxs)(q.Flex,{alignItems:"center",justifyContent:"space-between",w:"100%",children:[(0,T.jsx)(q.Text,{maxW:"80%",children:e.name}),(0,T.jsx)(q.Tooltip,{label:"Delete","aria-label":"delete",children:(0,T.jsx)(W.DeleteIcon,{className:"delete-btn",w:"20px",h:"20px",cursor:"pointer",onClick:function(){return b(e.name,e.size,t)},color:"black"})})]})},r)})}):void 0]});break;case"string":case"password":x=(0,T.jsx)(q.Input,s({id:t,placeholder:i,sx:n===null||n===void 0?void 0:n.input,type:a==="password"?a:"text",_hover:n["input:hover"],_focus:n["input:focus"],_focusWithin:n["input:focusWithin"],_active:n["input:active"],_visited:n["input:visited"],borderRadius:0,padding:"12px 20px",fontSize:"12px"},o(t,c)));break;case"select":x=(0,T.jsx)(q.Select,l(s({id:t,variant:"filled",placeholder:i},o(t,c)),{children:(0,T.jsx)(T.Fragment,{children:f===null||f===void 0?void 0:f.map(function(e,r){return(0,T.jsx)("option",{value:e,children:e},r)})})}));break;case"color":x=(0,T.jsx)(D,{onColorPick:function(e){u(t,e)}});break;default:x=(0,T.jsx)(q.Input,s({id:t,placeholder:i,sx:n===null||n===void 0?void 0:n.input,_hover:n["input:hover"],_focus:n["input:focus"],_focusWithin:n["input:focusWithin"],_active:n["input:active"],_visited:n["input:visited"],borderRadius:0,padding:"12px 20px",fontSize:"12px"},o(t,c)));break}return(0,T.jsxs)(q.FormControl,{pt:"15px",isInvalid:d[t],children:[(0,T.jsx)(q.Text,{sx:n===null||n===void 0?void 0:n.inputLabel,color:"#000000",fontSize:"16px",children:p}),x,(0,T.jsx)(q.FormErrorMessage,{children:d.name&&d.name.message})]},r)}}),(0,T.jsx)(q.Button,{w:"100%",my:"15px",bg:"#04aa6d",borderRadius:0,variant:(n===null||n===void 0?void 0:n.submitButton)||n["submitButton:hover"]?"solid":"staircase",type:"submit",sx:n===null||n===void 0?void 0:n.submitButton,_hover:n["submitButton:hover"]?n["submitButton:hover"]:{bg:"#04aa6dc7"},isLoading:f,children:"Save"})]})};var M=[{label:"Files you want to upload",name:"files",placeholder:"Upload your files here",type:"file",types:"*",validation:{required:"This is required"}}],L=function(){return M};var J=w(require("jwt-decode")),U=function(e){return(0,J.default)(e)},G=function(e){return new Promise(function(r){return setTimeout(r,e)})};var H=w(require("axios")),A=w(require("axios-retry")),N=1e3,V=2,K=function e(r,t){i(this,e);var a=this;this.request=function(){var e=n(f.mark(function e(r){return f.wrap(function e(t){while(1)switch(t.prev=t.next){case 0:t.next=2;return a.axios.request(r).then(function(e){return e.data});case 2:return t.abrupt("return",t.sent);case 3:case"end":return t.stop()}},e)}));return function(r){return e.apply(this,arguments)}}();var o=this;this.invokeJob=function(){var e=n(f.mark(function e(r,t,n){return f.wrap(function e(i){while(1)switch(i.prev=i.next){case 0:i.next=2;return o.request({method:"POST",url:"/job/jobs/".concat(r,"/executions"),data:JSON.stringify({request_payload:t,callback_url:n})});case 2:return i.abrupt("return",i.sent);case 3:case"end":return i.stop()}},e)}));return function(r,t,n){return e.apply(this,arguments)}}();var u=this;this.getJobExecutionDetails=function(){var e=n(f.mark(function e(r,t){return f.wrap(function e(n){while(1)switch(n.prev=n.next){case 0:n.next=2;return u.request({method:"GET",url:"/job/jobs/".concat(r,"/executions/").concat(t)});case 2:return n.abrupt("return",n.sent);case 3:case"end":return n.stop()}},e)}));return function(r,t){return e.apply(this,arguments)}}();var s=this;this.resumeJob=function(){var e=n(f.mark(function e(r,t,n){return f.wrap(function e(i){while(1)switch(i.prev=i.next){case 0:i.next=2;return s.request({method:"POST",url:"/job/jobs/".concat(r,"/executions/").concat(t,"/resume"),data:JSON.stringify(n)});case 2:return i.abrupt("return",i.sent);case 3:case"end":return i.stop()}},e)}));return function(r,t,n){return e.apply(this,arguments)}}();var c=this;this.uploadFile=function(){var e=n(f.mark(function e(r,t){return f.wrap(function e(n){while(1)switch(n.prev=n.next){case 0:n.next=2;return c.request({baseURL:r,method:"PUT",headers:{"Content-Type":t.type},data:t});case 2:return n.abrupt("return",n.sent);case 3:case"end":return n.stop()}},e)}));return function(r,t){return e.apply(this,arguments)}}();this.axios=H.default.create({baseURL:"https://".concat(r),headers:{"x-api-key":t}}),(0,A.default)(this.axios,{retries:V,retryCondition:function(e){return console.log({err:e}),!0},retryDelay:function(e){return N}})};var Q=require("react/jsx-runtime"),X=function(){return(0,Q.jsx)(C.Spinner,{thickness:"6px",size:"xl",style:{position:"absolute",top:"calc(50% - 4em)",left:"calc(50% - 4em)"}})},Y={brand:{black:"#1C1C1E",grey:"#B8B8C2",inputHoverGrey:"#9C9CAB",lowerBlue:"#001CDB",lightBlue:"#0064FF",green:"#00D200",purple:"#6236FF",errorRed:"#E80000",backgroundColor:"#ECEFFF"}},Z=(0,C.extendTheme)({colors:Y,components:{Button:{variants:{staircase:{bg:"brand.lowerBlue",minWidth:"160px",borderRadius:0,color:"white",_disabled:{bg:"brand.lowerBlue"},_hover:{bg:"white",border:"1px solid #001CDB",color:"brand.lowerBlue"}}}}}}),ee=function(e){var r,t,i,a,o,u;var s=(0,C.useDisclosure)(),c=s.isOpen,l=s.onOpen,d=s.onClose,v=e.token,h=e.onComplete,$=e.onError,b=p((0,P.useState)({outputs:{GenerateBlobs:[]},current_step:"",status:"",request_payload:{styles:{}}}),2),x=b[0],y=b[1],m=p((0,P.useState)(),2),g=m[0],w=m[1],_=p((0,P.useState)([]),2),k=_[0],j=_[1],O=p((0,P.useState)([]),2),E=O[0],q=O[1],B=p((0,P.useState)(!1),2),F=B[0],R=B[1],D=p((0,P.useState)(!1),2),W=D[0],I=D[1],T=p((0,P.useState)(),2),M=T[0],J=T[1],H=p((0,P.useState)([]),2),A=H[0],N=H[1];(0,P.useEffect)(function(){var e=U(v);try{var r=e.origin,t=e.api_key,n=e.job_name,i=e.execution_id;w({origin:r,api_key:t,job_name:n,execution_id:i})}catch(a){console.log(a),$(a);return}},[]),(0,P.useEffect)(function(){g&&(l(),et().then())},[g]),(0,P.useEffect)(function(){if(M)if(M==="BlobsUploadWaitState"){var e=x.outputs.GenerateBlobs,r=[];e.forEach(function(e){var t=e.response_payload,n=t.blob_id,i=t.presigned_urls,a=t.blob_name;return r.push({blob_id:n,blob_name:a,upload_url:i.upload.url})}),j(r)}else M==="SUCCEEDED"?(d(),h("SUCCEEDED")):M==="Execution failed"&&(d(),$("Execution failed"))},[M]),(0,P.useEffect)(function(){A&&ee().then()},[A]),(0,P.useEffect)(function(){k&&Y().then()},[k]),(0,P.useEffect)(function(){E&&V().then()},[E]);var V=function(){var e=n(f.mark(function e(){var r,t,n,i,a;return f.wrap(function e(o){while(1)switch(o.prev=o.next){case 0:if(g){o.next=2;break}return o.abrupt("return");case 2:r=g.origin,t=g.api_key,n=g.job_name,i=g.execution_id,a=new K(r,t);o.prev=3;o.next=6;return a.resumeJob(n,i,E);case 6:o.next=11;break;case 8:o.prev=8;o.t0=o["catch"](3);console.log({error:o.t0}),d(),$("Error uploading file");case 11:o.next=13;return et();case 13:case"end":return o.stop()}},e,null,[[3,8]])}));return function V(){return e.apply(this,arguments)}}(),Y=function(){var e=n(f.mark(function e(){var r,t,n,i,a,o,u,s,c,l,p,v,h,b,x,y;return f.wrap(function e(f){while(1)switch(f.prev=f.next){case 0:if(g){f.next=2;break}return f.abrupt("return");case 2:if(!(A.length!==k.length)){f.next=5;break}d(),$("Error at server side. Please, contact your manager");return f.abrupt("return");case 5:r=g.origin,t=g.api_key,n=new K(r,t),i=[];a=true,o=false,u=undefined;f.prev=7;s=k[Symbol.iterator]();case 9:if(a=(c=s.next()).done){f.next=26;break}l=c.value,p=l.blob_id,v=l.upload_url,h=l.blob_name;b=A.findIndex(function(e){return e.name===h}),x=A[b];f.prev=12;f.next=15;return n.uploadFile(v,x);case 15:y={data:{documents:[{"@type":"document","@id":(0,S.ulid)(),has_document_name:{has_value:x.name},has_staircase_blob_identifier:{has_value:p},has_document_mime_type:{has_value:x.type}}]},metadata:{version:2,validation:!0}};i.push(y);f.next=23;break;case 19:f.prev=19;f.t0=f["catch"](12);console.log({error:f.t0}),d(),$("Error uploading file");return f.abrupt("return");case 23:a=true;f.next=9;break;case 26:f.next=32;break;case 28:f.prev=28;f.t1=f["catch"](7);o=true;u=f.t1;case 32:f.prev=32;f.prev=33;if(!a&&s.return!=null){s.return()}case 35:f.prev=35;if(!o){f.next=38;break}throw u;case 38:return f.finish(35);case 39:return f.finish(32);case 40:q(i);case 41:case"end":return f.stop()}},e,null,[[7,28,32,40],[12,19],[33,,35,39]])}));return function Y(){return e.apply(this,arguments)}}(),ee=function(){var e=n(f.mark(function e(){var r,t,n,i,a,o;return f.wrap(function e(u){while(1)switch(u.prev=u.next){case 0:if(g){u.next=2;break}return u.abrupt("return");case 2:r=g.origin,t=g.api_key,n=g.job_name,i=g.execution_id,a=new K(r,t),o=[];A.forEach(function(e){var r=e.name;var t=r.lastIndexOf("."),n=r.slice(t);o.push({blob_name:r,extension:n})});u.next=6;return a.resumeJob(n,i,o);case 6:u.next=8;return et();case 8:case"end":return u.stop()}},e)}));return function ee(){return e.apply(this,arguments)}}(),er=function(){var e=n(f.mark(function e(r){var t;return f.wrap(function e(n){while(1)switch(n.prev=n.next){case 0:t=r.files;I(!0),N(t);case 2:case"end":return n.stop()}},e)}));return function er(r){return e.apply(this,arguments)}}(),et=function(){var e=n(f.mark(function e(){var r;return f.wrap(function e(t){while(1)switch(t.prev=t.next){case 0:R(!0);case 1:t.next=3;return en();case 3:r=t.sent;if(!r){t.next=7;break}J(r);return t.abrupt("break",11);case 7:t.next=9;return G(1500);case 9:t.next=1;break;case 11:R(!1);case 12:case"end":return t.stop()}},e)}));return function et(){return e.apply(this,arguments)}}(),en=function(){var e=n(f.mark(function e(){var r,t,n,i,a,o,u,s,c,l,p;return f.wrap(function e(d){while(1)switch(d.prev=d.next){case 0:if(g){d.next=2;break}return d.abrupt("return");case 2:r=g.job_name;t=g.execution_id;n=g.origin;i=g.api_key;a=new K(n,i);d.next=9;return a.getJobExecutionDetails(r,t);case 9:o=d.sent;u=o.status;s=o.current_step;c=o.outputs;l=o.error;p=o.request_payload;d.t0=(y({outputs:c,current_step:s,error:l,status:u,request_payload:p}),u);d.next=d.t0==="SUCCEEDED"?18:d.t0==="FAILED"?19:d.t0==="WAIT_FOR_ACTION"?20:21;break;case 18:return d.abrupt("return","SUCCEEDED");case 19:return d.abrupt("return","Execution failed");case 20:return d.abrupt("return",s);case 21:return d.abrupt("return",l?"Execution failed":void 0);case 22:case"end":return d.stop()}},e)}));return function en(){return e.apply(this,arguments)}}();return(0,Q.jsx)(C.ChakraProvider,{theme:Z,children:F&&!W?(0,Q.jsx)(X,{}):g&&(x===null||x===void 0?void 0:(r=x.request_payload)===null||r===void 0?void 0:r.styles)?(0,Q.jsxs)(C.Modal,{closeOnOverlayClick:!1,isOpen:c,onClose:d,isCentered:!0,motionPreset:"scale",size:"sm",children:[(0,Q.jsx)(C.ModalOverlay,{backdropFilter:"blur(10px) hue-rotate(90deg)"}),(0,Q.jsxs)(C.ModalContent,{sx:x===null||x===void 0?void 0:(t=x.request_payload)===null||t===void 0?void 0:(i=t.styles)===null||i===void 0?void 0:i.root,borderRadius:0,children:[(0,Q.jsx)(C.ModalHeader,{children:(0,Q.jsx)(C.Text,{sx:x===null||x===void 0?void 0:(a=x.request_payload)===null||a===void 0?void 0:(o=a.styles)===null||o===void 0?void 0:o.title,fontWeight:"bold",children:"Staircase Persistence"})}),(0,Q.jsx)(C.ModalCloseButton,{}),(0,Q.jsx)(C.ModalBody,{children:(0,Q.jsx)(C.Flex,{w:"100%",minH:"360px",flexDir:"column",alignItems:"flex-start",justifyContent:"flex-start",children:M==="WaitState"?(0,Q.jsx)(z,{fields:L(),onFormComplete:er,styles:x===null||x===void 0?void 0:(u=x.request_payload)===null||u===void 0?void 0:u.styles}):(0,Q.jsx)(C.Spinner,{thickness:"6px",size:"xl"})})})]})]}):void 0})};var er=require("react-dom"),et=require("react/jsx-runtime"),en=function(e,r,t,n){(0,er.render)((0,et.jsx)(ee,{token:r,onComplete:t,onError:n}),e)};0&&(module.exports={PersistenceWidget:PersistenceWidget,renderPersistenceWidget:renderPersistenceWidget})