@mobilestock-native/form 0.0.1

package/index.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { RefObject } from 'react';
+import { TextInputProps } from 'react-native';
+import { FormHandles } from '@unform/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@mobilestock-native/button';
+import { ViewBaseProps } from '@mobilestock-native/container';
+import { FormProps } from '@unform/mobile';
+import { ZodSchema } from 'zod';
+
+type InputType = 'text' | 'password' | 'tel' | 'email' | 'number' | 'url' | 'zipcode' | 'hidden';
+interface InputProps extends Omit<TextInputProps, 'hitSlop'> {
+    name: string;
+    label?: string;
+    autofocus?: boolean;
+    type?: InputType;
+    autoSubmit?: boolean;
+    full?: boolean;
+    format?(value: string): string;
+}
+interface InputRef {
+    focus(): void;
+    blur(): void;
+}
+
+interface FormButtonProps extends ButtonProps {
+    type?: 'SUBMIT' | 'RESET' | 'BUTTON';
+}
+declare function FormButton({ type, isLoading, onPress, ...props }: FormButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function FormHorizontal({ children, ...props }: ViewBaseProps): react_jsx_runtime.JSX.Element;
+
+declare function FormVertical({ children, ...props }: ViewBaseProps): react_jsx_runtime.JSX.Element;
+
+interface FormPropsWithHandler<T extends object> extends FormProps {
+    onSubmit(params: SubmitParams<T>): Promise<void> | void;
+    schema?: ZodSchema<T>;
+}
+interface PropsContext {
+    submitForm(): void;
+    clearForm(): void;
+    formRef: RefObject<FormHandles>;
+    loading?: boolean;
+}
+declare function useForm(): PropsContext;
+declare function FormComponent<T extends object>({ children, onSubmit, schema, ...props }: FormPropsWithHandler<T>): react_jsx_runtime.JSX.Element;
+
+interface SubmitParams<T extends object> {
+    data: T;
+    ref: RefObject<FormHandles>;
+    reset(): void;
+}
+declare const Form: typeof FormComponent & {
+    Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<InputRef>>;
+    Button: typeof FormButton;
+    Vertical: typeof FormVertical;
+    Horizontal: typeof FormHorizontal;
+};
+
+export { Form, type SubmitParams, useForm };

package/index.js

@@ -0,0 +1,14 @@
+"use strict";var vr=Object.create;var A=Object.defineProperty,Tr=Object.defineProperties,xr=Object.getOwnPropertyDescriptor,Pr=Object.getOwnPropertyDescriptors,Cr=Object.getOwnPropertyNames,j=Object.getOwnPropertySymbols,wr=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty,tr=Object.prototype.propertyIsEnumerable;var or=(r,e,o)=>e in r?A(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,g=(r,e)=>{for(var o in e||(e={}))q.call(e,o)&&or(r,o,e[o]);if(j)for(var o of j(e))tr.call(e,o)&&or(r,o,e[o]);return r},F=(r,e)=>Tr(r,Pr(e));var E=(r,e)=>{var o={};for(var n in r)q.call(r,n)&&e.indexOf(n)<0&&(o[n]=r[n]);if(r!=null&&j)for(var n of j(r))e.indexOf(n)<0&&tr.call(r,n)&&(o[n]=r[n]);return o};var yr=(r,e)=>{for(var o in e)A(r,o,{get:e[o],enumerable:!0})},nr=(r,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Cr(e))!q.call(r,s)&&s!==o&&A(r,s,{get:()=>e[s],enumerable:!(n=xr(e,s))||n.enumerable});return r};var z=(r,e,o)=>(o=r!=null?vr(wr(r)):{},nr(e||!r||!r.__esModule?A(o,"default",{value:r,enumerable:!0}):o,r)),Sr=r=>nr(A({},"__esModule",{value:!0}),r);var sr=(r,e,o)=>new Promise((n,s)=>{var c=l=>{try{p(o.next(l))}catch(f){s(f)}},m=l=>{try{p(o.throw(l))}catch(f){s(f)}},p=l=>l.done?n(l.value):Promise.resolve(l.value).then(c,m);p((o=o.apply(r,e)).next())});var Hr={};yr(Hr,{Form:()=>zr,useForm:()=>S});module.exports=Sr(Hr);var Ir=require("@mobilestock-native/button");var br=require("@unform/mobile"),h=require("react"),gr=require("zod"),Fr=require("@mobilestock-native/container"),Er=require("@mobilestock-native/modalalert");var er=z(require("react")),dr=z(require("@mobilestock-native/tools"));var J=z(require("react")),ir=require("@mobilestock-native/container");var ar=require("react/jsx-runtime");function G(o){var n=o,{children:r}=n,e=E(n,["children"]);let s=w(r).map((c,m)=>{if(J.default.isValidElement(c)){let p=c,l=`form-horizontal-${m}`;return J.default.cloneElement(p,{full:!0,style:{flex:1},key:l})}return c});return(0,ar.jsx)(ir.Container.Horizontal,F(g({gap:"SM"},e),{children:s}))}var mr=require("@unform/core"),d=require("react"),lr=require("react-native"),y=z(require("styled-components/native")),ur=require("@mobilestock-native/button"),rr=require("@mobilestock-native/container"),Q=z(require("@mobilestock-native/tools")),Y=require("@mobilestock-native/typography");var v=require("react/jsx-runtime"),U=(0,d.forwardRef)(function(H,W){var O=H,{name:e,label:o,defaultValue:n,type:s="text",autoSubmit:c=!1,format:m,onChangeText:p,autoCapitalize:l,full:f,maxLength:x}=O,K=E(O,["name","label","defaultValue","type","autoSubmit","format","onChangeText","autoCapitalize","full","maxLength"]);let{loading:X,submitForm:k}=S(),t=(0,mr.useField)(e),a=(0,d.useRef)(null),[P,M]=(0,d.useState)(!0),[I,T]=(0,d.useState)(""),C=s==="password",$=s==="tel"?15:s==="zipcode"?9:x;(0,d.useEffect)(()=>{let u=I||n||(t==null?void 0:t.defaultValue)||"";a.current.value=u,T(u),t.registerField({name:t.fieldName,ref:a.current,getValue(i){return(i==null?void 0:i.value)||""},setValue(i,R){i.value=R,T(R)},clearValue(i){i.value="",T("")}})},[t==null?void 0:t.fieldName,t==null?void 0:t.registerField]),(0,d.useImperativeHandle)(W,()=>({focus(){var u;(u=a.current)==null||u.focus()},blur(){var u;(u=a.current)==null||u.blur()}}));let L=(0,d.useCallback)(u=>{var R,B;let i=u;switch(s){case"tel":i=Q.default.phoneNumberFormatter(u);break;case"email":case"url":i=u.trim();break;case"number":i=u.replace(/[^0-9.,]/g,"");break;case"zipcode":i=Q.default.formatZipcode(i);break}m&&(i=m(i)),T(i),a.current.value=i,p==null||p(i),s==="tel"&&c&&i.length===15&&((R=a.current)==null||R.blur(),k()),s==="zipcode"&&c&&i.length===9&&((B=a.current)==null||B.blur(),k())},[s,m,c,p,t]),b=(0,d.useCallback)(()=>{switch(s){case"tel":return"phone-pad";case"email":return"email-address";case"url":return"url";case"number":return"numeric";default:return"default"}},[s]);return(0,v.jsxs)(Vr,{full:f,$show:s!=="hidden",children:[o&&(0,v.jsx)(Y.Typography,{children:o}),(0,v.jsxs)(Br,{error:!!(t!=null&&t.error),$isPassword:C,children:[(0,v.jsx)(Ar,F(g({},K),{ref:a,value:I,autoCapitalize:s&&["email","url"].includes(s)?"none":l,keyboardType:b(),secureTextEntry:P&&C,onChangeText:L,maxLength:$,editable:!X})),C&&(0,v.jsx)(ur.Button,{size:"SM",onPress:()=>M(!P),icon:P?"EyeOff":"EyeOutline",variant:"TRANSPARENT"})]}),(t==null?void 0:t.error)&&(0,v.jsx)(Y.Typography,{color:"DANGER",size:"SM",children:t.error})]})}),Vr=(0,y.default)(rr.Container.Vertical)`
+  ${({$show:r})=>!r&&y.css`
+      display: none;
+    `}
+`,Br=(0,y.default)(rr.Container.Horizontal)`
+  overflow: hidden;
+  background-color: ${({error:r,theme:e})=>r?e.colors.input.error:e.colors.input.default};
+  border: 1px solid ${({error:r,theme:e})=>r?e.colors.alert.urgent:e.colors.input.border};
+  border-radius: ${({theme:r})=>r.borderRadius.default};
+  padding: ${({$isPassword:r})=>r?"0 0 0 10px":"0 10px"};
+`,Ar=(0,y.default)(lr.TextInput)`
+  flex: 1;
+  height: 45px;
+`;var cr=require("@mobilestock-native/container");var pr=require("react/jsx-runtime");function Z(o){var n=o,{children:r}=n,e=E(n,["children"]);let s=w(r);return(0,pr.jsx)(cr.Container.Vertical,F(g({gap:"SM"},e),{children:s}))}var fr=[{name:"Form.Button",component:D},{name:"Form.Horizontal",component:G},{name:"Form.Vertical",component:Z},{name:"Form.Input",component:U},{name:"Form",component:_}];function w(r){return er.default.Children.toArray(r).map(o=>{if(!er.default.isValidElement(o))throw new Error("Invalid child element. Consider using only Form allowed components.");if(!dr.default.validateSpecificChildren(o,fr.map(n=>n.component)))throw new Error(`Invalid child component. Expected one of ${fr.map(n=>n.name).join(", ")}, but received an invalid child`);return o})}var V=require("react/jsx-runtime"),hr=(0,h.createContext)({});function S(){return(0,h.useContext)(hr)}function _(s){var c=s,{children:r,onSubmit:e,schema:o}=c,n=E(c,["children","onSubmit","schema"]);let m=(0,h.useRef)(null),[p,l]=(0,h.useState)(!1),[f,x]=(0,h.useState)(void 0);function K(){var t;(t=m.current)==null||t.submitForm()}function W(){var t,a;(t=m.current)==null||t.setErrors({}),(a=m.current)==null||a.reset()}function H(t){let a={};for(let P of t){let M=P.path.filter(I=>typeof I=="string"||typeof I=="number").join(".");M&&(a[String(M)]=P.message)}return a}function O(t){if(t instanceof gr.ZodError)return H(t.issues);if(typeof t=="object"&&t!==null&&"errors"in t){let a=t.errors;if(Array.isArray(a)&&a.length>0&&"message"in a[0]&&"path"in a[0])return H(a)}return null}function X(P,M){return sr(this,arguments,function*(t,{reset:a}){var I,T,C,$,L;if((I=m.current)==null||I.setErrors({}),o){let b=o.safeParse(t);if(!b.success){(T=m.current)==null||T.setErrors(H(b.error.issues));return}}try{l(!0),yield e({data:t,ref:m,reset:a})}catch(b){let u=O(b);if(u)(C=m.current)==null||C.setErrors(u);else{let i="Erro ao realizar opera\xE7\xE3o",R=500;if(typeof b=="object"&&b!==null&&"isAxiosError"in b&&b.isAxiosError){let B=b;R=(($=B.response)==null?void 0:$.status)||500;let N=(L=B.response)==null?void 0:L.data;N!=null&&N.message&&(i=N.message)}else b instanceof Error&&(i=b.message||i);x({message:i,status:R})}}finally{l(!1)}})}let k=w(r);return(0,V.jsxs)(hr.Provider,{value:{formRef:m,submitForm:K,clearForm:W,loading:p},children:[(0,V.jsx)(br.Form,F(g({ref:m,onSubmit:X},n),{children:(0,V.jsx)(Fr.Container.Vertical,{gap:"2XS",children:k})})),(0,V.jsx)(Er.ModalAlert,{visible:!!f,message:f==null?void 0:f.message,type:f&&f.status>=500?"FATAL_ERROR":"ERROR_NOTICE",title:"Erro ao enviar o formul\xE1rio",onClose:()=>x(void 0)})]})}var Rr=require("react/jsx-runtime");function D(s){var c=s,{type:r="SUBMIT",isLoading:e,onPress:o}=c,n=E(c,["type","isLoading","onPress"]);let{submitForm:m,clearForm:p,loading:l}=S();function f(x){switch(r){case"SUBMIT":m();break;case"RESET":p();break;default:o==null||o(x)}}return(0,Rr.jsx)(Ir.Button,F(g({size:"LG"},n),{onPress:f,isLoading:r==="SUBMIT"&&l||e,disabled:l||e}))}var zr=Object.assign(_,{Input:U,Button:D,Vertical:Z,Horizontal:G});0&&(module.exports={Form,useForm});

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@mobilestock-native/form",
+  "version": "0.0.1",
+  "main": "index.js",
+  "dependencies": {
+    "@unform/core": "^2.1.6",
+    "@mobilestock-native/button": "^1.0.6",
+    "@mobilestock-native/container": "^0.0.4",
+    "@mobilestock-native/icons": "^0.0.5",
+    "@mobilestock-native/modalalert": "^0.0.6",
+    "@mobilestock-native/tools": "^0.0.8",
+    "@mobilestock-native/typography": "^0.0.7"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "styled-components": "^6.1.8",
+    "zod": "^3.24.2"
+  }
+}