@mobilestockweb/form 0.0.1

package/index.d.ts

@@ -0,0 +1,78 @@
+import * as react from 'react';
+import { InputHTMLAttributes, RefObject } from 'react';
+import { FormHandles, FormProps } from '@unform/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@mobilestockweb/button';
+import { ViewBaseProps } from '@mobilestockweb/container';
+import { GroupBase, Props } from 'react-select';
+import { ZodSchema } from 'zod';
+
+type InputType = 'text' | 'password' | 'tel' | 'email' | 'number' | 'url' | 'zipcode' | 'hidden';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    name: string;
+    label?: string;
+    type?: InputType;
+    autoSubmit?: boolean;
+    full?: boolean;
+    error?: string;
+    format?(value: string): string;
+}
+interface InputRef {
+    focus(): void;
+    blur(): void;
+}
+
+interface FormButtonProps extends Omit<ButtonProps, 'type'> {
+    type?: 'SUBMIT' | 'RESET' | 'BUTTON';
+}
+declare function FormButton({ type, isLoading, onClick, ...props }: FormButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function FormHorizontal({ children, ...props }: ViewBaseProps): react_jsx_runtime.JSX.Element;
+
+interface PropsFormInputRadio extends InputHTMLAttributes<HTMLInputElement> {
+    name: string;
+    label: string;
+    value: string;
+}
+declare function FormRadio(props: PropsFormInputRadio): react_jsx_runtime.JSX.Element;
+
+interface CustomOption {
+    label: string;
+    value: string;
+}
+interface SelectProps<Option extends CustomOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends Props<Option, IsMulti, Group> {
+    name: string;
+    label?: string;
+}
+declare function FormSelect<Option extends CustomOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsMulti, Group>): 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>>;
+    Radio: typeof FormRadio;
+    Select: typeof FormSelect;
+    Button: typeof FormButton;
+    Vertical: typeof FormVertical;
+    Horizontal: typeof FormHorizontal;
+};
+
+export { Form, type SubmitParams, useForm };

package/index.js

@@ -0,0 +1,42 @@
+"use strict";var Be=Object.create;var N=Object.defineProperty,Oe=Object.defineProperties,Ne=Object.getOwnPropertyDescriptor,$e=Object.getOwnPropertyDescriptors,ze=Object.getOwnPropertyNames,G=Object.getOwnPropertySymbols,_e=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty,ue=Object.prototype.propertyIsEnumerable;var me=(e,r,t)=>r in e?N(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,F=(e,r)=>{for(var t in r||(r={}))Q.call(r,t)&&me(e,t,r[t]);if(G)for(var t of G(r))ue.call(r,t)&&me(e,t,r[t]);return e},I=(e,r)=>Oe(e,$e(r));var E=(e,r)=>{var t={};for(var i in e)Q.call(e,i)&&r.indexOf(i)<0&&(t[i]=e[i]);if(e!=null&&G)for(var i of G(e))r.indexOf(i)<0&&ue.call(e,i)&&(t[i]=e[i]);return t};var ke=(e,r)=>{for(var t in r)N(e,t,{get:r[t],enumerable:!0})},ce=(e,r,t,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of ze(r))!Q.call(e,n)&&n!==t&&N(e,n,{get:()=>r[n],enumerable:!(i=Ne(r,n))||i.enumerable});return e};var S=(e,r,t)=>(t=e!=null?Be(_e(e)):{},ce(r||!e||!e.__esModule?N(t,"default",{value:e,enumerable:!0}):t,e)),Ge=e=>ce(N({},"__esModule",{value:!0}),e);var pe=(e,r,t)=>new Promise((i,n)=>{var l=s=>{try{c(t.next(s))}catch(p){n(p)}},a=s=>{try{c(t.throw(s))}catch(p){n(p)}},c=s=>s.done?i(s.value):Promise.resolve(s.value).then(l,a);c((t=t.apply(e,r)).next())});var er={};ke(er,{Form:()=>Ye,useForm:()=>T});module.exports=Ge(er);var Ve=require("@mobilestockweb/button");var we=require("@unform/web"),Le=require("notistack"),C=require("react"),Me=require("zod"),Pe=require("@mobilestockweb/container");var se=S(require("react")),ye=S(require("@mobilestockweb/tools"));var be=S(require("react")),ge=require("@mobilestockweb/container"),Fe=S(require("@mobilestockweb/tools"));var de=require("@unform/core"),b=require("react"),$=S(require("styled-components")),fe=require("@mobilestockweb/button"),ee=require("@mobilestockweb/container"),Y=S(require("@mobilestockweb/tools")),re=require("@mobilestockweb/typography");var x=require("react/jsx-runtime"),H=(0,b.forwardRef)(function(le,K){var z=le,{name:r,label:t,defaultValue:i,type:n,autoSubmit:l,full:a,error:c,format:s,onChange:p,maxLength:R}=z,v=E(z,["name","label","defaultValue","type","autoSubmit","full","error","format","onChange","maxLength"]);let{loading:u}=T(),o=(0,de.useField)(r),d=(0,b.useRef)(null),[M,y]=(0,b.useState)(!1),[B,w]=(0,b.useState)(""),O=n==="password",_=n==="tel"?15:n==="zipcode"?9:R,g=r+"-input"+(0,b.useId)();(0,b.useEffect)(()=>{let f=B||i||(o==null?void 0:o.defaultValue)||"";d.current.value=f,w(f),o.registerField({name:o.fieldName,ref:d,getValue:m=>{var h;return((h=m.current)==null?void 0:h.value)||""},setValue:(m,h)=>{m.current&&(m.current.value=h,w(h))},clearValue:m=>{m.current&&(m.current.value="",w(""))}})},[o==null?void 0:o.fieldName,o==null?void 0:o.registerField]),(0,b.useImperativeHandle)(K,()=>({focus(){var f;(f=d.current)==null||f.focus()},blur(){var f;(f=d.current)==null||f.blur()}}));let k=(0,b.useCallback)(f=>{let m=f.target.value;switch(n){case"tel":m=Y.default.phoneNumberFormatter(m);break;case"email":case"url":m=m.trim();break;case"zipcode":m=Y.default.formatZipcode(m);break}s&&(m=s(m)),w(m),f.target.value=m,d.current.value=m,p==null||p(f),n==="tel"&&l&&m.length===15&&d.current.form&&(d.current.form.requestSubmit(),d.current.blur()),n==="zipcode"&&l&&m.length===9&&d.current.form&&(d.current.form.requestSubmit(),d.current.blur())},[n,s,l,p,o]);function P(){return n==="password"?M?"text":"password":n}return(0,x.jsxs)(De,{full:a,$show:n!=="hidden",children:[t&&(0,x.jsx)(je,{htmlFor:g,size:"SM",children:t}),(0,x.jsxs)(Ue,{align:"CENTER",padding:"XS_NONE",gap:"SM",$isError:!!(o!=null&&o.error),$isPassword:O,children:[(0,x.jsx)(Xe,I(F({},v),{ref:d,id:g,value:B,onChange:k,maxLength:_,type:P(),disabled:u})),O&&(0,x.jsx)(fe.Button,{size:"SM",onClick:()=>y(!M),icon:M?"EyeOutline":"EyeOff",variant:"TRANSPARENT",type:"button"})]}),(o==null?void 0:o.error)&&(0,x.jsx)(re.Typography,{color:"DANGER",size:"SM",children:o==null?void 0:o.error})]})}),De=(0,$.default)(ee.Container.Vertical)`
+  display: ${({$show:e})=>e?"flex":"none"};
+`,je=(0,$.default)(re.Typography).attrs({forwardedAs:"label"})``,Ue=(0,$.default)(ee.Container.Horizontal)`
+  padding: ${({$isPassword:e})=>e?"0 0 0 10px":"0 10px"};
+  background-color: ${({$isError:e,theme:r})=>e?r.colors.input.error:r.colors.input.default};
+  border: 1px solid ${({$isError:e,theme:r})=>e?r.colors.alert.urgent:r.colors.input.border};
+  border-radius: ${({theme:e})=>e.borderRadius.default};
+`,Xe=$.default.input`
+  width: 100%;
+  border: none;
+  height: 2.5rem;
+  outline: none;
+  background-color: transparent;
+`;var Ie=require("react/jsx-runtime"),We=[{name:"Form.Input",component:H}];function D(t){var i=t,{children:e}=i,r=E(i,["children"]);let n=V(e).map((l,a)=>{if(Fe.default.validateSpecificChildren(e,We.map(c=>c.component))){let c=`form-horizontal-${a}`;return be.default.cloneElement(l,{full:"true",key:c})}return l});return(0,Ie.jsx)(ge.Container.Horizontal,I(F({gap:"SM"},r),{children:n}))}var he=require("@unform/core"),Ee=require("react"),oe=S(require("styled-components")),te=require("@mobilestockweb/container"),ne=require("@mobilestockweb/typography");var L=require("react/jsx-runtime");function j(e){let{loading:r}=T(),{error:t,fieldName:i,registerField:n}=(0,he.useField)(e.name),l=(0,Ee.useRef)(null),a=`radio_${e.name}_${e.label}`;function c(){n({name:i,ref:l,getValue:s=>s.current.value,clearValue:s=>{s.current.checked=!1}})}return(0,L.jsxs)(te.Container.Vertical,{onClick:c,gap:"XS",padding:"2XS_NONE",children:[(0,L.jsxs)(te.Container.Horizontal,{align:"START_CENTER",gap:"XS",children:[(0,L.jsx)(Ze,I(F({id:a,ref:l},e),{type:"radio",disabled:r})),(0,L.jsx)(qe,{htmlFor:a,size:"MD",children:e.label})]}),t&&(0,L.jsx)(ne.Typography,{color:"DANGER",size:"SM",children:t})]})}var Ze=oe.default.input`
+  width: 1rem;
+  height: 1rem;
+`,qe=(0,oe.default)(ne.Typography).attrs({forwardedAs:"label"})``;var Te=require("@unform/core"),U=require("react"),Re=S(require("react-select")),ie=S(require("styled-components")),Se=require("@mobilestockweb/container"),ae=require("@mobilestockweb/typography");var A=require("react/jsx-runtime");function X(e){let{loading:r}=T(),{fieldName:t,defaultValue:i,registerField:n,error:l}=(0,Te.useField)(e.name),a=(0,U.useRef)(null);return(0,U.useEffect)(()=>{n({name:t,ref:a.current,getValue:c=>{var p,R;let s=(p=c==null?void 0:c.state)==null?void 0:p.selectValue;return s?e!=null&&e.isMulti?s.map(v=>v.value):(R=s[0])==null?void 0:R.value:e!=null&&e.isMulti?[]:""}})},[t,n,e.isMulti]),(0,A.jsxs)(Je,{$isWrong:!!l,children:[(e==null?void 0:e.label)&&(0,A.jsx)(Ke,{htmlFor:t,size:"MD",children:e.label}),(0,A.jsx)(Re.default,I(F({},e),{className:"react-select",classNamePrefix:"react-select",defaultValue:i,ref:a,isDisabled:r})),l&&(0,A.jsx)(ae.Typography,{color:"DANGER",size:"SM",children:l})]})}var Je=(0,ie.default)(Se.Container.Vertical)`
+  .react-select {
+    background-color: ${({$isWrong:e,theme:r})=>e?r.colors.input.error:r.colors.input.default};
+    border: 1px solid ${({$isWrong:e,theme:r})=>e?r.colors.alert.urgent:r.colors.input.border};
+    border-radius: ${({theme:e})=>e.borderRadius.default};
+    height: 2.5rem;
+    width: 100%;
+  }
+  .react-select__control {
+    background-color: ${({$isWrong:e,theme:r})=>e?r.colors.input.error:r.colors.input.default};
+    border: none;
+    height: 100%;
+  }
+  .react-select__placeholder {
+    padding: 0.3rem;
+  }
+  .react-select__menu {
+    color: ${({theme:e})=>e.colors.select.text};
+    background-color: ${({theme:e})=>e.colors.select.default};
+    height: auto;
+  }
+  .react-select__option--is-focused {
+    color: ${({theme:e})=>e.colors.text.contrast};
+    background-color: ${({theme:e})=>e.colors.select.focused};
+  }
+`,Ke=(0,ie.default)(ae.Typography).attrs({forwardedAs:"label"})``;var xe=require("@mobilestockweb/container");var Ce=require("react/jsx-runtime");function W(t){var i=t,{children:e}=i,r=E(i,["children"]);let n=V(e);return(0,Ce.jsx)(xe.Container.Vertical,I(F({gap:"SM"},r),{children:n}))}var ve=[{name:"Form.Button",component:q},{name:"Form.Horizontal",component:D},{name:"Form.Vertical",component:W},{name:"Form.Input",component:H},{name:"Form.Radio",component:j},{name:"Form.Select",component:X},{name:"Form",component:Z}],Qe=["DataTable"];function V(e){return se.default.Children.toArray(e).map(t=>{var n,l;if(!se.default.isValidElement(t))throw new Error("Invalid child element. Consider using only Form allowed components.");let i=(l=(n=t.type)==null?void 0:n.name)!=null?l:"";if(Qe.includes(i))return t;if(!ye.default.validateSpecificChildren(t,ve.map(a=>a.component)))throw new Error(`Invalid child component. Expected one of ${ve.map(a=>a.name).join(", ")}, but received an invalid child`);return t})}var J=require("react/jsx-runtime"),He=(0,C.createContext)({});function T(){return(0,C.useContext)(He)}function Z(n){var l=n,{children:e,onSubmit:r,schema:t}=l,i=E(l,["children","onSubmit","schema"]);let a=(0,C.useRef)(null),[c,s]=(0,C.useState)(!1);function p(){var u;(u=a.current)==null||u.submitForm()}function R(){var u,o;(u=a.current)==null||u.setErrors({}),(o=a.current)==null||o.reset()}function v(u){let o={};for(let d of u){let M=d.path.filter(y=>typeof y=="string"||typeof y=="number").join(".");M&&(o[String(M)]=d.message)}return o}function K(u){if(u instanceof Me.ZodError)return v(u.issues);if(typeof u=="object"&&u!==null&&"errors"in u){let o=u.errors;if(Array.isArray(o)&&o.length>0&&"message"in o[0]&&"path"in o[0])return v(o)}return null}function le(d,M){return pe(this,arguments,function*(u,{reset:o}){var y,B,w,O,_;if((y=a.current)==null||y.setErrors({}),t){let g=t.safeParse(u);if(!g.success){(B=a.current)==null||B.setErrors(v(g.error.issues));return}}try{s(!0),yield r({data:u,ref:a,reset:o})}catch(g){let k=K(g);if(k)(w=a.current)==null||w.setErrors(k);else{let P="Erro ao realizar opera\xE7\xE3o",f=500;if(typeof g=="object"&&g!==null&&"isAxiosError"in g&&g.isAxiosError){let m=g;f=((O=m.response)==null?void 0:O.status)||500;let h=(_=m.response)==null?void 0:_.data;h!=null&&h.message&&(P=h.message)}else g instanceof Error&&(P=g.message||P);(0,Le.enqueueSnackbar)(P,{variant:f>=500?"error":"warning"})}}finally{s(!1)}})}let z=V(e);return(0,J.jsx)(He.Provider,{value:{formRef:a,submitForm:p,clearForm:R,loading:c},children:(0,J.jsx)(we.Form,I(F({},i),{ref:a,onSubmit:le,children:(0,J.jsx)(Pe.Container.Vertical,{gap:"2XS",children:z})}))})}var Ae=require("react/jsx-runtime");function q(n){var l=n,{type:e="SUBMIT",isLoading:r,onClick:t}=l,i=E(l,["type","isLoading","onClick"]);let{submitForm:a,clearForm:c,loading:s}=T();function p(R){switch(R.preventDefault(),e){case"SUBMIT":a();break;case"RESET":c();break;default:t==null||t(R)}}return(0,Ae.jsx)(Ve.Button,I(F({},i),{onClick:p,isLoading:e==="SUBMIT"&&s||r,disabled:s||r,type:e.toLowerCase()}))}var Ye=Object.assign(Z,{Input:H,Radio:j,Select:X,Button:q,Vertical:W,Horizontal:D});0&&(module.exports={Form,useForm});

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@mobilestockweb/form",
+  "version": "0.0.1",
+  "main": "index.js",
+  "dependencies": {
+    "notistack": "^3.0.1",
+    "@unform/core": "^2.1.6",
+    "@mobilestockweb/button": "^1.0.4",
+    "@mobilestockweb/snackbar": "^0.0.9",
+    "@mobilestockweb/tools": "^0.0.15",
+    "@mobilestockweb/typography": "^0.0.5"
+  },
+  "peerDependencies": {
+    "zod": "^3.24.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}