form-component-library-demo 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/src/index.cjs +1 -1
  2. package/dist/src/index.js +54 -47
  3. package/package.json +1 -1
package/dist/src/index.cjs CHANGED
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime"),u=require("lucide-react");var d=`field_library_token`,f=`field_library_user`,p=class{constructor({baseUrl:e,appId:t,onAuthError:n}){if(!e)throw Error(`baseUrl is required`);if(!t)throw Error(`appId is required`);if(this.baseUrl=e.replace(/\/+$/,``),this.appId=t,this.onAuthError=n,this.token=null,this.user=null,typeof window<`u`){this.token=localStorage.getItem(d);try{let e=localStorage.getItem(f);e&&(this.user=JSON.parse(e))}catch{this.user=null}}}setAuthErrorHandler(e){this.onAuthError=e}setToken(e){this.token=e,!(typeof window>`u`)&&(e?localStorage.setItem(d,e):(localStorage.removeItem(d),localStorage.removeItem(f),this.user=null))}getToken(){return this.token}async request(e,t,n,r={}){let i={"Content-Type":`application/json`,...r};return this.token&&(i.Authorization=`Bearer ${this.token}`),this.send(e,t,{headers:i,body:n===void 0?void 0:JSON.stringify(n)})}async requestForm(e,t){let n={};return this.token&&(n.Authorization=`Bearer ${this.token}`),this.send(`POST`,e,{headers:n,body:t})}async send(e,t,n){let r=await fetch(`${this.baseUrl}${t}`,{method:e,...n});if(r.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!r.ok){let e=r.statusText;try{let t=await r.json();t.error&&(e=t.error)}catch{}throw{status:r.status,message:e}}if(r.status!==204)return await r.json()}async login(e,t,n){let r=await this.request(`POST`,`/usr/login`,{email:e,password:t,...n?{org_id:Number(n)}:{}});return this.setToken(r.token),typeof window<`u`&&r.user&&(this.user=r.user,localStorage.setItem(f,JSON.stringify(r.user))),r}logout(){this.setToken(null)}async getMe(){let e=await this.request(`GET`,`/usr/app/${this.appId}/me`);return this.user&&(this.user={...this.user,...e},typeof window<`u`&&localStorage.setItem(f,JSON.stringify(this.user))),e}currentUser(){if(!this.token)return null;if(this.user)return this.user;try{let e=JSON.parse(atob(this.token.split(`.`)[1]));return{id:String(e.user_id??e.sub??``),org_id:String(e.org_id??``),name:e.name??``,email:e.email??``,mobile:String(e.mobile??e.mobile_number??e.phone??e.phone_number??e.user_mobile??``),roles:e.roles??[],groups:e.groups??[]}}catch{return null}}recordView(e,t={}){return this.request(`POST`,`/app/${this.appId}/view/recordview`,{rv_template_uid:e,...t.presetAlias?{preset_alias:t.presetAlias}:{},search_query:{page:t.page??1,limit:t.limit??50,sort_by:t.sortBy??``,sort_dir:t.sortDir??`desc`,search:t.search??``,filters:(t.filters??[]).map(e=>{let t={field_key:e.field_key,data_type:e.data_type??`character varying`};return e.values&&e.values.length>0?t.values=e.values:(t.value=e.value??``,t.value2=``),t})}})}detailView(e,t){return this.request(`GET`,`/app/${this.appId}/view/detailview/${e}?instance_id=${encodeURIComponent(String(t))}`)}audit(e){return this.request(`GET`,`/app/${this.appId}/view/audit?instance_id=${encodeURIComponent(String(e))}`)}aiDecisions(e){return this.request(`GET`,`/monitor/decisions?instance_id=${encodeURIComponent(String(e))}`).then(e=>e.decisions??[])}formSchema(e,t){return this.request(`POST`,`/app/${this.appId}/view/form-screens`,{activity_id:e,device_type:`desktop`,...t==null?{}:{instance_id:t}})}startInstance(e,t,n){return this.request(`POST`,`/app/${this.appId}/start`,{workflow_uuid:e,activity_id:t,data:n})}performActivity(e,t,n,r){return this.request(`POST`,`/app/${this.appId}/activity`,{workflow_uuid:e,instance_id:typeof t==`string`&&Number(t)||t,activity_id:n,data:r})}lookupRecords(e,t,n){return this.request(`POST`,`/app/${this.appId}/rdbms-templates/${t}/records`,{workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,instance_id:n.instanceId||void 0,search:n.search??``,limit:n.limit??50,offset:0,form_data:n.formData??{}})}wfLookupRecords(e,t){return this.request(`POST`,`/app/${this.appId}/wf-lookup/records`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,form_data:t.formData??{},search:t.search??``,limit:t.limit??100,offset:t.offset??0})}datasetOptions(e,t){return this.request(`POST`,`/app/${this.appId}/dataset-options`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,instance_id:t.instanceId||void 0,search:t.search??``,limit:t.limit??200,offset:0,form_data:t.formData??{}})}getDatasets(){return this.request(`GET`,`/app/${this.appId}/datasets`)}getDataset(e){return this.request(`GET`,`/app/${this.appId}/datasets/${e}`)}createDataset(e){return this.request(`POST`,`/app/${this.appId}/datasets`,e)}updateDataset(e,t){return this.request(`PUT`,`/app/${this.appId}/datasets/${e}`,t)}fieldForm(e,t,n){let r=new FormData;return r.append(`file`,t),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),r}uploadFile(e,t,n){return this.requestForm(`/app/${this.appId}/upload`,this.fieldForm(e,t,n))}async extractOcr(e,t,n){if(t instanceof File||t instanceof Blob){let r=new FormData;return r.append(`file`,t),r.append(`store_file`,`true`),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.versionUuid&&r.append(`version_uuid`,n.versionUuid),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),this.requestForm(`/app/${this.appId}/ocr-extract`,r)}{let r={workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,version_uuid:n.versionUuid,files:[t]};return n.instanceId!=null&&(r.instance_id=Number(n.instanceId)),{...await this.request(`POST`,`/app/${this.appId}/ocr-extract`,r),file:t}}}async getFilePreviewBlob(e){let t={};this.token&&(t.Authorization=`Bearer ${this.token}`);let n=await fetch(`${this.baseUrl}/app/${this.appId}/view/files/${e}/preview`,{method:`GET`,headers:t});if(n.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!n.ok)throw{status:n.status,message:`Failed to fetch preview`};return await n.blob()}},m={imagePreviewLoading:`_imagePreviewLoading_1rk84_1`,spinner:`_spinner_1rk84_10`,"zf-spin":`_zf-spin_1rk84_1`,spinnerSm:`_spinnerSm_1rk84_19`,imagePreviewError:`_imagePreviewError_1rk84_28`,imagePreview:`_imagePreview_1rk84_1`},h=(...e)=>e.filter(Boolean).join(` `);function g({file:e,client:t,className:n=``}){let[r,i]=(0,c.useState)(null),[a,o]=(0,c.useState)(!1),[s,u]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{let n=null,r=!0;async function a(){if(!e){r&&i(null);return}if(e instanceof File){n=URL.createObjectURL(e),r&&i(n);return}if(e.uuid){r&&o(!0);try{let a=await t.getFilePreviewBlob(e.uuid);n=URL.createObjectURL(a),r&&i(n)}catch(e){console.error(`Failed to load image preview:`,e),r&&u(!0)}finally{r&&o(!1)}}}return a(),()=>{r=!1,n&&URL.revokeObjectURL(n)}},[e,t]),a?(0,l.jsx)(`div`,{className:h(m.imagePreviewLoading,n),children:(0,l.jsx)(`div`,{className:h(m.spinner,m.spinnerSm)})}):s||!r?(0,l.jsx)(`div`,{className:h(m.imagePreviewError,n),children:s?`Preview failed`:`No preview`}):(0,l.jsx)(`img`,{src:r,alt:`Preview`,className:h(m.imagePreview,n)})}var _={fieldContainer:`_fieldContainer_rw765_2`,label:`_label_rw765_14`,fieldBody:`_fieldBody_rw765_20`,sizeSm:`_sizeSm_rw765_27`,dropzone:`_dropzone_rw765_27`,sizeMd:`_sizeMd_rw765_28`,sizeLg:`_sizeLg_rw765_29`,variantPrimary:`_variantPrimary_rw765_32`,dropzoneIcon:`_dropzoneIcon_rw765_34`,dropzoneText:`_dropzoneText_rw765_34`,variantSecondary:`_variantSecondary_rw765_36`,variantDanger:`_variantDanger_rw765_40`,dropzoneLoading:`_dropzoneLoading_rw765_58`,spinner:`_spinner_rw765_100`,"zf-spin":`_zf-spin_rw765_1`,spinnerSm:`_spinnerSm_rw765_114`,previewList:`_previewList_rw765_124`,previewCard:`_previewCard_rw765_131`,previewSizeSm:`_previewSizeSm_rw765_141`,previewSizeMd:`_previewSizeMd_rw765_142`,previewSizeLg:`_previewSizeLg_rw765_143`,documentPreview:`_documentPreview_rw765_145`,fileIcon:`_fileIcon_rw765_161`,documentName:`_documentName_rw765_168`,removeBtn:`_removeBtn_rw765_178`,retryBtnIcon:`_retryBtnIcon_rw765_198`,overlay:`_overlay_rw765_218`,extractedPanel:`_extractedPanel_rw765_230`,extractedTitle:`_extractedTitle_rw765_239`,extractedList:`_extractedList_rw765_246`,extractedItem:`_extractedItem_rw765_252`,extractedKey:`_extractedKey_rw765_263`,extractedVal:`_extractedVal_rw765_270`,hidden:`_hidden_rw765_282`,errorText:`_errorText_rw765_283`,btnSecondary:`_btnSecondary_rw765_284`},v=(...e)=>e.filter(Boolean).join(` `),y=e=>{let t=e.name||e.original_name||``,n=e.type||e.mime_type||``;return t.endsWith(`.pdf`)||n.includes(`pdf`)||t.match(/\.(doc|docx|txt)$/i)?(0,l.jsx)(u.FileText,{className:_.fileIcon}):(0,l.jsx)(u.File,{className:_.fileIcon})};function b({label:e,value:t,onChange:n,onExtracted:r,onProcess:i,fieldMap:a,showExtracted:o=!0,accept:s=`image/*,application/pdf`,variant:d=`primary`,size:f=`md`,previewSize:p=`md`,width:m=`full`,className:h=``}){let[b,x]=(0,c.useState)(!1),[S,C]=(0,c.useState)(null),[w,T]=(0,c.useState)(null),E=(0,c.useRef)(null),D=Array.isArray(t)?t:t?[t]:[],O=e=>{if(e.file&&n(e.file),e.extract_error)C(e.extract_error);else if(e.extracted){T(e.extracted);let t={...e.extracted};if(a){if(t={},Array.isArray(a))for(let[n,r]of Object.entries(e.extracted)){let e=a.find(e=>e.source===n||e.extractKey===n),i=e?e.target||e.fieldId:n;t[i]=r}else for(let[n,r]of Object.entries(e.extracted)){let e=a[n]||n;t[e]=r}}r&&r(t)}},k=async e=>{let t=e.target.files?.[0];if(t){x(!0),C(null),T(null);try{let e=await i(t);O(e)}catch(e){console.error(e),C(`OCR extraction failed`)}finally{x(!1),E.current&&(E.current.value=``)}}},A=async e=>{x(!0),C(null);try{let t=await i(e);O(t)}catch(e){console.error(e),C(`OCR extraction retry failed`)}finally{x(!1)}},j=e=>{let t=[...D];if(t.splice(e,1),n(t.length===0?null:t),t.length===0){if(w&&r){let e={};if(a){if(Array.isArray(a))for(let t of Object.keys(w)){let n=a.find(e=>e.source===t||e.extractKey===t),r=n?n.target||n.fieldId:t;e[r]=``}else for(let t of Object.keys(w)){let n=a[t]||t;e[n]=``}}else for(let t of Object.keys(w))e[t]=``;r(e)}T(null)}},M=e=>e instanceof File?e.type.startsWith(`image/`):e.mime_type?e.mime_type.startsWith(`image/`):e.original_name?/\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name):!1,N=m===`full`?{width:`100%`}:{width:m};return(0,l.jsxs)(`div`,{className:v(_.fieldContainer,_[`variant${d.charAt(0).toUpperCase()+d.slice(1)}`],_[`size${f.charAt(0).toUpperCase()+f.slice(1)}`],_[`previewSize${p.charAt(0).toUpperCase()+p.slice(1)}`],h),style:N,children:[(0,l.jsxs)(`label`,{className:_.label,children:[e,` (OCR)`]}),(0,l.jsxs)(`div`,{className:_.fieldBody,children:[D.length===0&&(0,l.jsxs)(`div`,{className:v(_.dropzone,b&&_.dropzoneLoading),onClick:()=>E.current?.click(),children:[(0,l.jsx)(`input`,{ref:E,type:`file`,onChange:k,disabled:b,accept:s,className:_.hidden}),b?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`div`,{className:v(_.spinner,_.spinnerSm,_.dropzoneIcon)}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Extracting OCR data...`})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(u.FileUp,{className:_.dropzoneIcon}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Drop a document to extract`})]})]}),D.length>0&&(0,l.jsx)(`div`,{className:_.previewList,children:D.map((e,t)=>(0,l.jsxs)(`div`,{className:_.previewCard,children:[M(e)?(0,l.jsx)(g,{file:e}):(0,l.jsxs)(`div`,{className:_.documentPreview,children:[y(e),(0,l.jsx)(`span`,{className:_.documentName,title:e.name||e.original_name,children:e.name||e.original_name||`Document`})]}),b&&(0,l.jsx)(`div`,{className:_.overlay,children:(0,l.jsx)(`div`,{className:_.spinner})}),!b&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`button`,{type:`button`,onClick:()=>A(e),className:_.retryBtnIcon,title:`Retry extraction`,children:(0,l.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`12`,height:`12`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,l.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}),(0,l.jsx)(`path`,{d:`M3 3v5h5`}),(0,l.jsx)(`path`,{d:`M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16`}),(0,l.jsx)(`path`,{d:`M16 21v-5h5`})]})}),(0,l.jsx)(`button`,{type:`button`,onClick:()=>j(t),className:_.removeBtn,title:`Remove file`,children:(0,l.jsx)(u.X,{size:12,strokeWidth:3})})]})]},t))}),S&&(0,l.jsxs)(`div`,{className:_.fieldBody,children:[(0,l.jsx)(`p`,{className:_.errorText,children:S}),D.length>0&&!w&&(0,l.jsx)(`button`,{type:`button`,onClick:()=>A(D[0]),disabled:b,className:_.btnSecondary,style:{alignSelf:`flex-start`},children:b?`Retrying...`:`Retry Extraction`})]}),o&&w&&(0,l.jsxs)(`div`,{className:_.extractedPanel,children:[(0,l.jsx)(`p`,{className:_.extractedTitle,children:`Extracted Data`}),(0,l.jsx)(`div`,{className:_.extractedList,children:Object.entries(w).map(([e,t])=>(0,l.jsxs)(`div`,{className:_.extractedItem,children:[(0,l.jsx)(`span`,{className:_.extractedKey,children:e.replace(/_/g,` `)}),(0,l.jsx)(`span`,{className:_.extractedVal,children:String(t)})]},e))})]})]})]})}exports.ImagePreview=g,exports.OcrField=b,exports.ZinoClient=p;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime"),u=require("lucide-react");var d=`field_library_token`,f=`field_library_user`,p=class{constructor({baseUrl:e,appId:t,onAuthError:n}){if(!e)throw Error(`baseUrl is required`);if(!t)throw Error(`appId is required`);if(this.baseUrl=e.replace(/\/+$/,``),this.appId=t,this.onAuthError=n,this.token=null,this.user=null,typeof window<`u`){this.token=localStorage.getItem(d);try{let e=localStorage.getItem(f);e&&(this.user=JSON.parse(e))}catch{this.user=null}}}setAuthErrorHandler(e){this.onAuthError=e}setToken(e){this.token=e,!(typeof window>`u`)&&(e?localStorage.setItem(d,e):(localStorage.removeItem(d),localStorage.removeItem(f),this.user=null))}getToken(){return this.token}async request(e,t,n,r={}){let i={"Content-Type":`application/json`,...r};return this.token&&(i.Authorization=`Bearer ${this.token}`),this.send(e,t,{headers:i,body:n===void 0?void 0:JSON.stringify(n)})}async requestForm(e,t){let n={};return this.token&&(n.Authorization=`Bearer ${this.token}`),this.send(`POST`,e,{headers:n,body:t})}async send(e,t,n){let r=await fetch(`${this.baseUrl}${t}`,{method:e,...n});if(r.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!r.ok){let e=r.statusText;try{let t=await r.json();t.error&&(e=t.error)}catch{}throw{status:r.status,message:e}}if(r.status!==204)return await r.json()}async login(e,t,n){let r=await this.request(`POST`,`/usr/login`,{email:e,password:t,...n?{org_id:Number(n)}:{}});return this.setToken(r.token),typeof window<`u`&&r.user&&(this.user=r.user,localStorage.setItem(f,JSON.stringify(r.user))),r}logout(){this.setToken(null)}async getMe(){let e=await this.request(`GET`,`/usr/app/${this.appId}/me`);return this.user&&(this.user={...this.user,...e},typeof window<`u`&&localStorage.setItem(f,JSON.stringify(this.user))),e}currentUser(){if(!this.token)return null;if(this.user)return this.user;try{let e=JSON.parse(atob(this.token.split(`.`)[1]));return{id:String(e.user_id??e.sub??``),org_id:String(e.org_id??``),name:e.name??``,email:e.email??``,mobile:String(e.mobile??e.mobile_number??e.phone??e.phone_number??e.user_mobile??``),roles:e.roles??[],groups:e.groups??[]}}catch{return null}}recordView(e,t={}){return this.request(`POST`,`/app/${this.appId}/view/recordview`,{rv_template_uid:e,...t.presetAlias?{preset_alias:t.presetAlias}:{},search_query:{page:t.page??1,limit:t.limit??50,sort_by:t.sortBy??``,sort_dir:t.sortDir??`desc`,search:t.search??``,filters:(t.filters??[]).map(e=>{let t={field_key:e.field_key,data_type:e.data_type??`character varying`};return e.values&&e.values.length>0?t.values=e.values:(t.value=e.value??``,t.value2=``),t})}})}detailView(e,t){return this.request(`GET`,`/app/${this.appId}/view/detailview/${e}?instance_id=${encodeURIComponent(String(t))}`)}audit(e){return this.request(`GET`,`/app/${this.appId}/view/audit?instance_id=${encodeURIComponent(String(e))}`)}aiDecisions(e){return this.request(`GET`,`/monitor/decisions?instance_id=${encodeURIComponent(String(e))}`).then(e=>e.decisions??[])}formSchema(e,t){return this.request(`POST`,`/app/${this.appId}/view/form-screens`,{activity_id:e,device_type:`desktop`,...t==null?{}:{instance_id:t}})}startInstance(e,t,n){return this.request(`POST`,`/app/${this.appId}/start`,{workflow_uuid:e,activity_id:t,data:n})}performActivity(e,t,n,r){return this.request(`POST`,`/app/${this.appId}/activity`,{workflow_uuid:e,instance_id:typeof t==`string`&&Number(t)||t,activity_id:n,data:r})}lookupRecords(e,t,n){return this.request(`POST`,`/app/${this.appId}/rdbms-templates/${t}/records`,{workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,instance_id:n.instanceId||void 0,search:n.search??``,limit:n.limit??50,offset:0,form_data:n.formData??{}})}wfLookupRecords(e,t){return this.request(`POST`,`/app/${this.appId}/wf-lookup/records`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,form_data:t.formData??{},search:t.search??``,limit:t.limit??100,offset:t.offset??0})}datasetOptions(e,t){return this.request(`POST`,`/app/${this.appId}/dataset-options`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,instance_id:t.instanceId||void 0,search:t.search??``,limit:t.limit??200,offset:0,form_data:t.formData??{}})}getDatasets(){return this.request(`GET`,`/app/${this.appId}/datasets`)}getDataset(e){return this.request(`GET`,`/app/${this.appId}/datasets/${e}`)}createDataset(e){return this.request(`POST`,`/app/${this.appId}/datasets`,e)}updateDataset(e,t){return this.request(`PUT`,`/app/${this.appId}/datasets/${e}`,t)}fieldForm(e,t,n){let r=new FormData;return r.append(`file`,t),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),r}uploadFile(e,t,n){return this.requestForm(`/app/${this.appId}/upload`,this.fieldForm(e,t,n))}async extractOcr(e,t,n){if(t instanceof File||t instanceof Blob){let r=new FormData;return r.append(`file`,t),r.append(`store_file`,`true`),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.versionUuid&&r.append(`version_uuid`,n.versionUuid),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),this.requestForm(`/app/${this.appId}/ocr-extract`,r)}{let r={workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,version_uuid:n.versionUuid,files:[t]};return n.instanceId!=null&&(r.instance_id=Number(n.instanceId)),{...await this.request(`POST`,`/app/${this.appId}/ocr-extract`,r),file:t}}}async getFilePreviewBlob(e){let t={};this.token&&(t.Authorization=`Bearer ${this.token}`);let n=await fetch(`${this.baseUrl}/app/${this.appId}/view/files/${e}/preview`,{method:`GET`,headers:t});if(n.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!n.ok)throw{status:n.status,message:`Failed to fetch preview`};return await n.blob()}},m={imagePreviewLoading:`_imagePreviewLoading_1rk84_1`,spinner:`_spinner_1rk84_10`,"zf-spin":`_zf-spin_1rk84_1`,spinnerSm:`_spinnerSm_1rk84_19`,imagePreviewError:`_imagePreviewError_1rk84_28`,imagePreview:`_imagePreview_1rk84_1`},h=(...e)=>e.filter(Boolean).join(` `);function g({file:e,client:t,className:n=``}){let[r,i]=(0,c.useState)(null),[a,o]=(0,c.useState)(!1),[s,u]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{let n=null,r=!0;async function a(){if(!e){r&&i(null);return}if(e instanceof File){n=URL.createObjectURL(e),r&&i(n);return}if(e.uuid){if(!t){console.warn(`ImagePreview: 'client' prop is missing, cannot load remote preview`),r&&u(!0);return}r&&o(!0);try{let a=await t.getFilePreviewBlob(e.uuid);n=URL.createObjectURL(a),r&&i(n)}catch(e){console.error(`Failed to load image preview:`,e),r&&u(!0)}finally{r&&o(!1)}}}return a(),()=>{r=!1,n&&URL.revokeObjectURL(n)}},[e,t]),a?(0,l.jsx)(`div`,{className:h(m.imagePreviewLoading,n),children:(0,l.jsx)(`div`,{className:h(m.spinner,m.spinnerSm)})}):s||!r?(0,l.jsx)(`div`,{className:h(m.imagePreviewError,n),children:s?`Preview failed`:`No preview`}):(0,l.jsx)(`img`,{src:r,alt:`Preview`,className:h(m.imagePreview,n)})}var _={fieldContainer:`_fieldContainer_rw765_2`,label:`_label_rw765_14`,fieldBody:`_fieldBody_rw765_20`,sizeSm:`_sizeSm_rw765_27`,dropzone:`_dropzone_rw765_27`,sizeMd:`_sizeMd_rw765_28`,sizeLg:`_sizeLg_rw765_29`,variantPrimary:`_variantPrimary_rw765_32`,dropzoneIcon:`_dropzoneIcon_rw765_34`,dropzoneText:`_dropzoneText_rw765_34`,variantSecondary:`_variantSecondary_rw765_36`,variantDanger:`_variantDanger_rw765_40`,dropzoneLoading:`_dropzoneLoading_rw765_58`,spinner:`_spinner_rw765_100`,"zf-spin":`_zf-spin_rw765_1`,spinnerSm:`_spinnerSm_rw765_114`,previewList:`_previewList_rw765_124`,previewCard:`_previewCard_rw765_131`,previewSizeSm:`_previewSizeSm_rw765_141`,previewSizeMd:`_previewSizeMd_rw765_142`,previewSizeLg:`_previewSizeLg_rw765_143`,documentPreview:`_documentPreview_rw765_145`,fileIcon:`_fileIcon_rw765_161`,documentName:`_documentName_rw765_168`,removeBtn:`_removeBtn_rw765_178`,retryBtnIcon:`_retryBtnIcon_rw765_198`,overlay:`_overlay_rw765_218`,extractedPanel:`_extractedPanel_rw765_230`,extractedTitle:`_extractedTitle_rw765_239`,extractedList:`_extractedList_rw765_246`,extractedItem:`_extractedItem_rw765_252`,extractedKey:`_extractedKey_rw765_263`,extractedVal:`_extractedVal_rw765_270`,hidden:`_hidden_rw765_282`,errorText:`_errorText_rw765_283`,btnSecondary:`_btnSecondary_rw765_284`},v=(...e)=>e.filter(Boolean).join(` `),y=e=>{let t=e.name||e.original_name||``,n=e.type||e.mime_type||``;return t.endsWith(`.pdf`)||n.includes(`pdf`)||t.match(/\.(doc|docx|txt)$/i)?(0,l.jsx)(u.FileText,{className:_.fileIcon}):(0,l.jsx)(u.File,{className:_.fileIcon})};function b({label:e,value:t,onChange:n,onExtracted:r,onProcess:i,fieldMap:a,client:o,showExtracted:s=!0,accept:d=`image/*,application/pdf`,variant:f=`primary`,size:p=`md`,previewSize:m=`md`,width:h=`full`,className:b=``}){let[x,S]=(0,c.useState)(!1),[C,w]=(0,c.useState)(null),[T,E]=(0,c.useState)(null),D=(0,c.useRef)(null),O=Array.isArray(t)?t:t?[t]:[],k=e=>{if(e.file&&n(e.file),e.extract_error)w(e.extract_error);else if(e.extracted){E(e.extracted);let t={...e.extracted};if(a){if(t={},Array.isArray(a))for(let[n,r]of Object.entries(e.extracted)){let e=a.find(e=>e.source===n||e.extractKey===n),i=e?e.target||e.fieldId:n;t[i]=r}else for(let[n,r]of Object.entries(e.extracted)){let e=a[n]||n;t[e]=r}}r&&r(t)}},A=async e=>{let t=e.target.files?.[0];if(t){S(!0),w(null),E(null);try{let e=await i(t);k(e)}catch(e){console.error(e),w(`OCR extraction failed`)}finally{S(!1),D.current&&(D.current.value=``)}}},j=async e=>{S(!0),w(null);try{let t=await i(e);k(t)}catch(e){console.error(e),w(`OCR extraction retry failed`)}finally{S(!1)}},M=e=>{let t=[...O];if(t.splice(e,1),n(t.length===0?null:t),t.length===0){if(T&&r){let e={};if(a){if(Array.isArray(a))for(let t of Object.keys(T)){let n=a.find(e=>e.source===t||e.extractKey===t),r=n?n.target||n.fieldId:t;e[r]=``}else for(let t of Object.keys(T)){let n=a[t]||t;e[n]=``}}else for(let t of Object.keys(T))e[t]=``;r(e)}E(null)}},N=e=>e instanceof File?e.type.startsWith(`image/`):e.mime_type?e.mime_type.startsWith(`image/`):e.original_name?/\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name):!1,P=h===`full`?{width:`100%`}:{width:h};return(0,l.jsxs)(`div`,{className:v(_.fieldContainer,_[`variant${f.charAt(0).toUpperCase()+f.slice(1)}`],_[`size${p.charAt(0).toUpperCase()+p.slice(1)}`],_[`previewSize${m.charAt(0).toUpperCase()+m.slice(1)}`],b),style:P,children:[(0,l.jsxs)(`label`,{className:_.label,children:[e,` (OCR)`]}),(0,l.jsxs)(`div`,{className:_.fieldBody,children:[O.length===0&&(0,l.jsxs)(`div`,{className:v(_.dropzone,x&&_.dropzoneLoading),onClick:()=>D.current?.click(),children:[(0,l.jsx)(`input`,{ref:D,type:`file`,onChange:A,disabled:x,accept:d,className:_.hidden}),x?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`div`,{className:v(_.spinner,_.spinnerSm,_.dropzoneIcon)}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Extracting OCR data...`})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(u.FileUp,{className:_.dropzoneIcon}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Drop a document to extract`})]})]}),O.length>0&&(0,l.jsx)(`div`,{className:_.previewList,children:O.map((e,t)=>(0,l.jsxs)(`div`,{className:_.previewCard,children:[N(e)?(0,l.jsx)(g,{file:e,client:o}):(0,l.jsxs)(`div`,{className:_.documentPreview,children:[y(e),(0,l.jsx)(`span`,{className:_.documentName,title:e.name||e.original_name,children:e.name||e.original_name||`Document`})]}),x&&(0,l.jsx)(`div`,{className:_.overlay,children:(0,l.jsx)(`div`,{className:_.spinner})}),!x&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`button`,{type:`button`,onClick:()=>j(e),className:_.retryBtnIcon,title:`Retry extraction`,children:(0,l.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`12`,height:`12`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,l.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}),(0,l.jsx)(`path`,{d:`M3 3v5h5`}),(0,l.jsx)(`path`,{d:`M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16`}),(0,l.jsx)(`path`,{d:`M16 21v-5h5`})]})}),(0,l.jsx)(`button`,{type:`button`,onClick:()=>M(t),className:_.removeBtn,title:`Remove file`,children:(0,l.jsx)(u.X,{size:12,strokeWidth:3})})]})]},t))}),C&&(0,l.jsxs)(`div`,{className:_.fieldBody,children:[(0,l.jsx)(`p`,{className:_.errorText,children:C}),O.length>0&&!T&&(0,l.jsx)(`button`,{type:`button`,onClick:()=>j(O[0]),disabled:x,className:_.btnSecondary,style:{alignSelf:`flex-start`},children:x?`Retrying...`:`Retry Extraction`})]}),s&&T&&(0,l.jsxs)(`div`,{className:_.extractedPanel,children:[(0,l.jsx)(`p`,{className:_.extractedTitle,children:`Extracted Data`}),(0,l.jsx)(`div`,{className:_.extractedList,children:Object.entries(T).map(([e,t])=>(0,l.jsxs)(`div`,{className:_.extractedItem,children:[(0,l.jsx)(`span`,{className:_.extractedKey,children:e.replace(/_/g,` `)}),(0,l.jsx)(`span`,{className:_.extractedVal,children:String(t)})]},e))})]})]})]})}exports.ImagePreview=g,exports.OcrField=b,exports.ZinoClient=p;
package/dist/src/index.js CHANGED
@@ -263,6 +263,10 @@ function h({ file: t, client: r, className: a = "" }) {
263
263
  return;
264
264
  }
265
265
  if (t.uuid) {
266
+ if (!r) {
267
+ console.warn("ImagePreview: 'client' prop is missing, cannot load remote preview"), n && d(!0);
268
+ return;
269
+ }
266
270
  n && l(!0);
267
271
  try {
268
272
  let i = await r.getFilePreviewBlob(t.uuid);
@@ -330,11 +334,11 @@ var g = {
330
334
  let t = e.name || e.original_name || "", n = e.type || e.mime_type || "";
331
335
  return t.endsWith(".pdf") || n.includes("pdf") || t.match(/\.(doc|docx|txt)$/i) ? /* @__PURE__ */ i(s, { className: g.fileIcon }) : /* @__PURE__ */ i(o, { className: g.fileIcon });
332
336
  };
333
- function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fieldMap: f, showExtracted: p = !0, accept: m = "image/*,application/pdf", variant: y = "primary", size: b = "md", previewSize: x = "md", width: S = "full", className: C = "" }) {
334
- let [w, T] = n(!1), [E, D] = n(null), [O, k] = n(null), A = t(null), j = Array.isArray(o) ? o : o ? [o] : [], M = (e) => {
335
- if (e.file && s(e.file), e.extract_error) D(e.extract_error);
337
+ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fieldMap: f, client: p, showExtracted: m = !0, accept: y = "image/*,application/pdf", variant: b = "primary", size: x = "md", previewSize: S = "md", width: C = "full", className: w = "" }) {
338
+ let [T, E] = n(!1), [D, O] = n(null), [k, A] = n(null), j = t(null), M = Array.isArray(o) ? o : o ? [o] : [], N = (e) => {
339
+ if (e.file && s(e.file), e.extract_error) O(e.extract_error);
336
340
  else if (e.extracted) {
337
- k(e.extracted);
341
+ A(e.extracted);
338
342
  let t = { ...e.extracted };
339
343
  if (f) {
340
344
  if (t = {}, Array.isArray(f)) for (let [n, r] of Object.entries(e.extracted)) {
@@ -348,69 +352,69 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
348
352
  }
349
353
  u && u(t);
350
354
  }
351
- }, N = async (e) => {
355
+ }, P = async (e) => {
352
356
  let t = e.target.files?.[0];
353
357
  if (t) {
354
- T(!0), D(null), k(null);
358
+ E(!0), O(null), A(null);
355
359
  try {
356
360
  let e = await d(t);
357
- M(e);
361
+ N(e);
358
362
  } catch (e) {
359
- console.error(e), D("OCR extraction failed");
363
+ console.error(e), O("OCR extraction failed");
360
364
  } finally {
361
- T(!1), A.current && (A.current.value = "");
365
+ E(!1), j.current && (j.current.value = "");
362
366
  }
363
367
  }
364
- }, P = async (e) => {
365
- T(!0), D(null);
368
+ }, F = async (e) => {
369
+ E(!0), O(null);
366
370
  try {
367
371
  let t = await d(e);
368
- M(t);
372
+ N(t);
369
373
  } catch (e) {
370
- console.error(e), D("OCR extraction retry failed");
374
+ console.error(e), O("OCR extraction retry failed");
371
375
  } finally {
372
- T(!1);
376
+ E(!1);
373
377
  }
374
- }, F = (e) => {
375
- let t = [...j];
378
+ }, I = (e) => {
379
+ let t = [...M];
376
380
  if (t.splice(e, 1), s(t.length === 0 ? null : t), t.length === 0) {
377
- if (O && u) {
381
+ if (k && u) {
378
382
  let e = {};
379
383
  if (f) {
380
- if (Array.isArray(f)) for (let t of Object.keys(O)) {
384
+ if (Array.isArray(f)) for (let t of Object.keys(k)) {
381
385
  let n = f.find((e) => e.source === t || e.extractKey === t), r = n ? n.target || n.fieldId : t;
382
386
  e[r] = "";
383
387
  }
384
- else for (let t of Object.keys(O)) {
388
+ else for (let t of Object.keys(k)) {
385
389
  let n = f[t] || t;
386
390
  e[n] = "";
387
391
  }
388
- } else for (let t of Object.keys(O)) e[t] = "";
392
+ } else for (let t of Object.keys(k)) e[t] = "";
389
393
  u(e);
390
394
  }
391
- k(null);
395
+ A(null);
392
396
  }
393
- }, I = (e) => e instanceof File ? e.type.startsWith("image/") : e.mime_type ? e.mime_type.startsWith("image/") : e.original_name ? /\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name) : !1, L = S === "full" ? { width: "100%" } : { width: S };
397
+ }, L = (e) => e instanceof File ? e.type.startsWith("image/") : e.mime_type ? e.mime_type.startsWith("image/") : e.original_name ? /\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name) : !1, R = C === "full" ? { width: "100%" } : { width: C };
394
398
  return /* @__PURE__ */ a("div", {
395
- className: _(g.fieldContainer, g[`variant${y.charAt(0).toUpperCase() + y.slice(1)}`], g[`size${b.charAt(0).toUpperCase() + b.slice(1)}`], g[`previewSize${x.charAt(0).toUpperCase() + x.slice(1)}`], C),
396
- style: L,
399
+ className: _(g.fieldContainer, g[`variant${b.charAt(0).toUpperCase() + b.slice(1)}`], g[`size${x.charAt(0).toUpperCase() + x.slice(1)}`], g[`previewSize${S.charAt(0).toUpperCase() + S.slice(1)}`], w),
400
+ style: R,
397
401
  children: [/* @__PURE__ */ a("label", {
398
402
  className: g.label,
399
403
  children: [e, " (OCR)"]
400
404
  }), /* @__PURE__ */ a("div", {
401
405
  className: g.fieldBody,
402
406
  children: [
403
- j.length === 0 && /* @__PURE__ */ a("div", {
404
- className: _(g.dropzone, w && g.dropzoneLoading),
405
- onClick: () => A.current?.click(),
407
+ M.length === 0 && /* @__PURE__ */ a("div", {
408
+ className: _(g.dropzone, T && g.dropzoneLoading),
409
+ onClick: () => j.current?.click(),
406
410
  children: [/* @__PURE__ */ i("input", {
407
- ref: A,
411
+ ref: j,
408
412
  type: "file",
409
- onChange: N,
410
- disabled: w,
411
- accept: m,
413
+ onChange: P,
414
+ disabled: T,
415
+ accept: y,
412
416
  className: g.hidden
413
- }), w ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: _(g.spinner, g.spinnerSm, g.dropzoneIcon) }), /* @__PURE__ */ i("p", {
417
+ }), T ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: _(g.spinner, g.spinnerSm, g.dropzoneIcon) }), /* @__PURE__ */ i("p", {
414
418
  className: g.dropzoneText,
415
419
  children: "Extracting OCR data..."
416
420
  })] }) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(c, { className: g.dropzoneIcon }), /* @__PURE__ */ i("p", {
@@ -418,12 +422,15 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
418
422
  children: "Drop a document to extract"
419
423
  })] })]
420
424
  }),
421
- j.length > 0 && /* @__PURE__ */ i("div", {
425
+ M.length > 0 && /* @__PURE__ */ i("div", {
422
426
  className: g.previewList,
423
- children: j.map((e, t) => /* @__PURE__ */ a("div", {
427
+ children: M.map((e, t) => /* @__PURE__ */ a("div", {
424
428
  className: g.previewCard,
425
429
  children: [
426
- I(e) ? /* @__PURE__ */ i(h, { file: e }) : /* @__PURE__ */ a("div", {
430
+ L(e) ? /* @__PURE__ */ i(h, {
431
+ file: e,
432
+ client: p
433
+ }) : /* @__PURE__ */ a("div", {
427
434
  className: g.documentPreview,
428
435
  children: [v(e), /* @__PURE__ */ i("span", {
429
436
  className: g.documentName,
@@ -431,13 +438,13 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
431
438
  children: e.name || e.original_name || "Document"
432
439
  })]
433
440
  }),
434
- w && /* @__PURE__ */ i("div", {
441
+ T && /* @__PURE__ */ i("div", {
435
442
  className: g.overlay,
436
443
  children: /* @__PURE__ */ i("div", { className: g.spinner })
437
444
  }),
438
- !w && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("button", {
445
+ !T && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("button", {
439
446
  type: "button",
440
- onClick: () => P(e),
447
+ onClick: () => F(e),
441
448
  className: g.retryBtnIcon,
442
449
  title: "Retry extraction",
443
450
  children: /* @__PURE__ */ a("svg", {
@@ -459,7 +466,7 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
459
466
  })
460
467
  }), /* @__PURE__ */ i("button", {
461
468
  type: "button",
462
- onClick: () => F(t),
469
+ onClick: () => I(t),
463
470
  className: g.removeBtn,
464
471
  title: "Remove file",
465
472
  children: /* @__PURE__ */ i(l, {
@@ -470,28 +477,28 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
470
477
  ]
471
478
  }, t))
472
479
  }),
473
- E && /* @__PURE__ */ a("div", {
480
+ D && /* @__PURE__ */ a("div", {
474
481
  className: g.fieldBody,
475
482
  children: [/* @__PURE__ */ i("p", {
476
483
  className: g.errorText,
477
- children: E
478
- }), j.length > 0 && !O && /* @__PURE__ */ i("button", {
484
+ children: D
485
+ }), M.length > 0 && !k && /* @__PURE__ */ i("button", {
479
486
  type: "button",
480
- onClick: () => P(j[0]),
481
- disabled: w,
487
+ onClick: () => F(M[0]),
488
+ disabled: T,
482
489
  className: g.btnSecondary,
483
490
  style: { alignSelf: "flex-start" },
484
- children: w ? "Retrying..." : "Retry Extraction"
491
+ children: T ? "Retrying..." : "Retry Extraction"
485
492
  })]
486
493
  }),
487
- p && O && /* @__PURE__ */ a("div", {
494
+ m && k && /* @__PURE__ */ a("div", {
488
495
  className: g.extractedPanel,
489
496
  children: [/* @__PURE__ */ i("p", {
490
497
  className: g.extractedTitle,
491
498
  children: "Extracted Data"
492
499
  }), /* @__PURE__ */ i("div", {
493
500
  className: g.extractedList,
494
- children: Object.entries(O).map(([e, t]) => /* @__PURE__ */ a("div", {
501
+ children: Object.entries(k).map(([e, t]) => /* @__PURE__ */ a("div", {
495
502
  className: g.extractedItem,
496
503
  children: [/* @__PURE__ */ i("span", {
497
504
  className: g.extractedKey,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "form-component-library-demo",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "type": "module",
5
5
  "description": "Zino Client API library for field and workflow management",
6
6
  "main": "dist/src/index.cjs",