@mobilestock-native/form 1.0.2 → 1.0.3

package/index.d.ts

@@ -46,7 +46,14 @@ type EventOnChangeRemoveFile = {
 };
 interface MultipleArchiveProps extends Omit<MultipleArchiveProviderProps, 'children' | 'accept'> {
     children?: React.ReactNode;
+    /**
+     * @description Accepted file types. Can be an array of TypeFiles enum values or a string in the same format as the HTML input accept attribute.
+     */
     accept?: (keyof typeof TypeFiles)[] | string;
+    /**
+     * @default 'START'
+     * @description Alignment of the label text.
+     */
     alignLabel?: 'END' | 'CENTER' | 'START';
     label?: string;
 }
@@ -93,10 +100,30 @@ interface CounterRootProps {
     minCount?: number;
     label?: string;
     name: string;
+    /**
+     * @default false
+     * @description if true, the Display component will be editable, allowing the user to type a number directly into it.
+     */
     editable?: boolean;
+    /**
+     * @default 1
+     * @description The value by which the counter increments or decrements when the buttons are pressed in long press mode.
+     */
     multiplier?: number;
+    /**
+     * @default 'TOP_START'
+     * @description Position of the label relative to the counter.
+     */
     labelPosition?: 'TOP_START' | 'LEFT' | 'TOP_CENTER';
+    /**
+     * @default false
+     * @description If true, the buttons will have a transparent background.
+     */
     buttonTransparent?: boolean;
+    /**
+     * @default false
+     * @description If true, the counter elements (buttons and display) will be grouped together.
+     */
     groupElements?: boolean;
     onChange?(data: {
         value: number;
@@ -132,7 +159,15 @@ type TypeEventOnChange = EventOnChangeRemoveImage | EventOnChangeReorderImages |
 type PhotoListProviderProps<TypeEventOnChangeGeneric extends TypeEventOnChange = TypeEventOnChange> = {
     children: ReactNode;
     onChange?(event: TypeEventOnChangeGeneric): void;
+    /**
+     * @default true
+     * @description Allows selection of multiple images.
+     */
     multiple?: boolean;
+    /**
+     * @default true
+     * @description Enables drag and drop functionality for reordering images.
+     */
     dragAndDrop?: boolean;
     buttonAddDirection?: 'LEFT' | 'RIGHT';
     name: string;
@@ -154,8 +189,20 @@ type EventOnChangeCropSave = {
 };
 interface PhotoInputProps extends Omit<PhotoListProviderProps, 'children'> {
     label?: string;
+    /**
+     * @default 'START'
+     * @description Alignment of the label text.
+     */
     alignLabel?: 'END' | 'CENTER' | 'START';
+    /**
+     * @default 'LEFT'
+     * @description Direction of the add button.
+     */
     buttonAddDirection?: 'LEFT' | 'RIGHT';
+    /**
+     * @default 0
+     * @description Number of images visible in the viewport.
+     */
     numberOfImagesVisible?: number;
 }
 declare function FormPhotoList({ label, alignLabel, buttonAddDirection, numberOfImagesVisible, ...props }: PhotoInputProps): react_jsx_runtime.JSX.Element;

package/index.js

@@ -23,7 +23,7 @@
     `}
 `;var ot=require("@mobilestock-native/typography"),tt=require("react/jsx-runtime");function re({children:e}){return(0,tt.jsx)(ot.Typography,{color:"DANGER_600",size:"SM",weight:"MEDIUM",children:e})}var rt=require("@mobilestock-native/typography"),nt=require("react/jsx-runtime");function me({children:e}){return(0,nt.jsx)(rt.Typography,{weight:"REGULAR",children:e})}var w=require("react/jsx-runtime");function at({children:e}){let{label:o,error:t,labelPosition:n}=Y(),r=[],a=[],i=(0,ne.useCallback)(l=>(0,ne.isValidElement)(l)&&l.type===ne.Fragment?i(l.props.children):l,[]),m=i(e);return ne.Children.toArray(m).forEach(l=>{(0,ne.isValidElement)(l)&&it.default.isComponentWithDisplayName(l.type)&&l.type.displayName===Ae.displayName&&!l.props.renderInsidePill?r.push(l):a.push(l)}),(0,w.jsxs)(Z.Container.Vertical,{align:"CENTER_START",children:[n==="TOP_START"&&o&&(0,w.jsxs)(Z.Container.Horizontal,{padding:"NONE_NONE_2XS_NONE",gap:"2XS",children:[(0,w.jsx)(me,{children:o}),t&&!r.length&&(0,w.jsx)(re,{children:t})]}),n!=="LEFT"&&(0,w.jsxs)(Z.Container.Vertical,{align:"CENTER",children:[(n!=="TOP_START"&&o||n!=="TOP_START"&&t&&!r.length)&&(0,w.jsxs)(Z.Container.Vertical,{align:"CENTER",padding:"NONE_NONE_2XS_NONE",children:[o&&(0,w.jsx)(me,{children:o}),t&&!r.length&&(0,w.jsx)(re,{children:t})]}),(0,w.jsxs)(Z.Container.Horizontal,{align:"CENTER_START",children:[r.length>0&&(0,w.jsx)(Z.Container.Horizontal,{padding:"NONE_2XS_NONE_NONE",children:r}),(0,w.jsxs)(Z.Container.Vertical,{children:[(0,w.jsx)(Ee,{children:a}),t&&!!r.length&&(0,w.jsx)(re,{children:t})]})]})]}),n==="LEFT"&&(0,w.jsx)(Z.Container.Vertical,{children:(0,w.jsxs)(Z.Container.Horizontal,{align:"CENTER",children:[(0,w.jsxs)(Z.Container.Vertical,{padding:"NONE_2XS_NONE_NONE",children:[o&&(0,w.jsx)(me,{children:o}),t&&!r.length&&(0,w.jsx)(re,{children:t})]}),r.length>0&&(0,w.jsx)(Z.Container.Horizontal,{padding:"NONE_2XS_NONE_NONE",children:r}),(0,w.jsx)(Ee,{children:a})]})})]})}var ue=require("@mobilestock-native/container");var lt=require("react"),st=require("react-native"),mt=R(require("styled-components/native")),ut=require("@mobilestock-native/button");var mo=require("react/jsx-runtime");function ie(n){var r=n,{type:e,disabled:o}=r,t=I(r,["type","disabled"]);let{loading:a}=q(),i=Y(),m=(0,lt.useMemo)(()=>e==="PLUS"&&i.maxCount!==void 0?i.count>=i.maxCount:e==="MINUS"&&i.minCount!==void 0?i.count<=i.minCount:!1,[e,i.count,i.maxCount,i.minCount]);function l(){e==="PLUS"?i.increment():i.decrement()}function u(){st.Vibration.vibrate(50),e==="PLUS"?i.increment(i.multiplier):i.decrement(i.multiplier)}return(0,mo.jsx)(fe,{children:(0,mo.jsx)(Hn,E(C({backgroundColor:e==="PLUS"?"DEFAULT_DARK":"CANCEL_DARK"},t),{size:"SM",icon:e==="PLUS"?"Plus":"Minus",variant:i.buttonTransparent?"TRANSPARENT":"DEFAULT",$grouped:i.groupElements,disabled:m||o||a,onPress:l,onLongPress:u,delayLongPress:500}))})}var Hn=(0,mt.default)(ut.Button)`
   border-radius: ${({$grouped:e,theme:o})=>e?o.borderRadius.none:o.borderRadius.default};
-`;var Me=require("react"),pt=require("react-native"),ct=require("styled-components/native"),dt=require("@mobilestock-native/clickable"),uo=require("@mobilestock-native/container"),po=require("@mobilestock-native/typography");var ae=require("react/jsx-runtime");function ve(){let e=(0,ct.useTheme)(),{count:o,editable:t,configureCount:n}=Y(),[r,a]=(0,Me.useState)(!1),[i,m]=(0,Me.useState)(o.toString());(0,Me.useEffect)(()=>{m(o.toString())},[o]);function l(u){n(Number(u.nativeEvent.text)||0),a(!1)}return t?(0,ae.jsx)(dt.Clickable,{onPress:()=>a(!0),children:(0,ae.jsx)(uo.Container.Horizontal,{padding:"NONE_2XS",children:(0,ae.jsx)(fe,{children:r?(0,ae.jsx)(pt.TextInput,{testID:"counter-input",value:i,keyboardType:"numeric",style:{fontWeight:"bold",fontSize:Number(e.font.size.lg)||16,textAlign:"center",width:40,height:40},autoFocus:!0,selectTextOnFocus:!0,onBlur:l,onChangeText:m,onEndEditing:l}):(0,ae.jsx)(po.Typography,{weight:"BOLD",size:"LG",children:o})})})}):(0,ae.jsx)(uo.Container.Horizontal,{padding:"NONE_2XS",children:(0,ae.jsx)(fe,{children:(0,ae.jsx)(po.Typography,{weight:"BOLD",size:"LG",children:o})})})}ve.displayName="Form.FormCounter.Display";var F=require("react/jsx-runtime");function ft(){let{label:e,labelPosition:o,error:t}=Y();return(0,F.jsxs)(ue.Container.Vertical,{align:"CENTER_START",children:[o==="TOP_START"&&e&&(0,F.jsxs)(ue.Container.Horizontal,{padding:"NONE_NONE_2XS_NONE",gap:"2XS",children:[(0,F.jsx)(me,{children:e}),t&&(0,F.jsx)(re,{children:t})]}),o!=="LEFT"&&(0,F.jsxs)(ue.Container.Vertical,{align:"CENTER",children:[o!=="TOP_START"&&(e||t)&&(0,F.jsxs)(ue.Container.Vertical,{align:"CENTER",padding:"NONE_NONE_2XS_NONE",children:[e&&(0,F.jsx)(me,{children:e}),t&&(0,F.jsx)(re,{children:t})]}),(0,F.jsxs)(Ee,{children:[(0,F.jsx)(ie,{type:"MINUS"}),(0,F.jsx)(ve,{}),(0,F.jsx)(ie,{type:"PLUS"})]})]}),o==="LEFT"&&(0,F.jsx)(ue.Container.Vertical,{children:(0,F.jsxs)(ue.Container.Horizontal,{align:"CENTER",children:[(e||t)&&(0,F.jsxs)(ue.Container.Vertical,{padding:"NONE_2XS_NONE_NONE",children:[e&&(0,F.jsx)(me,{children:e}),t&&(0,F.jsx)(re,{children:t})]}),(0,F.jsxs)(Ee,{children:[(0,F.jsx)(ie,{type:"MINUS"}),(0,F.jsx)(ve,{}),(0,F.jsx)(ie,{type:"PLUS"})]})]})})]})}var Be=require("react/jsx-runtime");function gt(t){var n=t,{children:e}=n,o=I(n,["children"]);return(0,Be.jsx)(Go,E(C({buttonTransparent:!1,labelPosition:"TOP_START",multiplier:1},o),{children:e?(0,Be.jsx)(at,{children:e}):(0,Be.jsx)(ft,{})}))}var ht=require("react/jsx-runtime");function co(e){return(0,ht.jsx)(ie,E(C({},e),{type:"MINUS"}))}co.displayName="Form.FormCounter.Minus";var Ct=require("react/jsx-runtime");function fo(e){return(0,Ct.jsx)(ie,E(C({},e),{type:"PLUS"}))}fo.displayName="Form.FormCounter.Plus";var bt=Object.assign(gt,{Display:ve,Plus:fo,Minus:co,Badge:Ae});var Tt=require("@mobilestock-native/container");var vt=require("react/jsx-runtime");function Et(t){var n=t,{children:e}=n,o=I(n,["children"]);return(0,vt.jsx)(Tt.Container.Horizontal,E(C({gap:"SM"},o),{children:e}))}var yt=require("@unform/core"),k=require("react"),Pt=require("react-native"),ye=R(require("styled-components/native")),St=require("@mobilestock-native/button"),Co=require("@mobilestock-native/container"),go=R(require("@mobilestock-native/tools")),ho=require("@mobilestock-native/typography");var pe=require("react/jsx-runtime"),Ft=(0,k.forwardRef)(function(d,h){var b=d,{name:o,label:t,defaultValue:n,type:r="text",autoSubmit:a=!1,format:i,onChangeText:m,autoCapitalize:l,full:u,maxLength:p}=b,c=I(b,["name","label","defaultValue","type","autoSubmit","format","onChangeText","autoCapitalize","full","maxLength"]);let{loading:g,submitForm:f}=q(),s=(0,yt.useField)(o),v=(0,k.useRef)(null),[S,A]=(0,k.useState)(!0),[D,T]=(0,k.useState)(""),V=r==="password",Q=r==="tel"?15:r==="zipcode"?9:p;(0,k.useEffect)(()=>{let x=D||n||(s==null?void 0:s.defaultValue)||"";v.current.value=x,T(x),s.registerField({name:s.fieldName,ref:v.current,getValue(P){return(P==null?void 0:P.value)||""},setValue(P,y){P.value=y,T(y)},clearValue(P){P.value="",T("")}})},[s==null?void 0:s.fieldName,s==null?void 0:s.registerField]),(0,k.useImperativeHandle)(h,()=>({focus(){var x;(x=v.current)==null||x.focus()},blur(){var x;(x=v.current)==null||x.blur()}}));let z=(0,k.useCallback)(x=>{var y,N;let P=x;switch(r){case"tel":P=go.default.phoneNumberFormatter(x);break;case"email":case"url":P=x.trim();break;case"number":P=x.replace(/[^0-9.,]/g,"");break;case"zipcode":P=go.default.formatZipcode(P);break}i&&(P=i(P)),T(P),v.current.value=P,m==null||m(P),r==="tel"&&a&&P.length===15&&((y=v.current)==null||y.blur(),f()),r==="zipcode"&&a&&P.length===9&&((N=v.current)==null||N.blur(),f())},[r,i,a,m,s]),be=(0,k.useCallback)(()=>{switch(r){case"tel":return"phone-pad";case"email":return"email-address";case"url":return"url";case"number":return"numeric";default:return"default"}},[r]);return(0,pe.jsxs)(zn,{full:u,$show:r!=="hidden",children:[t&&(0,pe.jsx)(ho.Typography,{children:t}),(0,pe.jsxs)(kn,{error:!!(s!=null&&s.error),$isPassword:V,children:[(0,pe.jsx)(Bn,E(C({},c),{ref:v,value:D,autoCapitalize:r&&["email","url"].includes(r)?"none":l,keyboardType:be(),secureTextEntry:S&&V,onChangeText:z,maxLength:Q,editable:!g&&c.editable})),V&&(0,pe.jsx)(St.Button,{size:"SM",onPress:()=>A(!S),icon:S?"EyeOff":"EyeOutline",variant:"TRANSPARENT"})]}),(s==null?void 0:s.error)&&(0,pe.jsx)(ho.Typography,{color:"DANGER",size:"SM",children:s.error})]})}),zn=(0,ye.default)(Co.Container.Vertical)`
+`;var Me=require("react"),pt=require("react-native"),ct=require("styled-components/native"),dt=require("@mobilestock-native/clickable"),uo=require("@mobilestock-native/container"),po=require("@mobilestock-native/typography");var ae=require("react/jsx-runtime");function ve(){let e=(0,ct.useTheme)(),{count:o,editable:t,configureCount:n}=Y(),[r,a]=(0,Me.useState)(!1),[i,m]=(0,Me.useState)(o.toString());(0,Me.useEffect)(()=>{m(o.toString())},[o]);function l(u){n(Number(u.nativeEvent.text)||0),a(!1)}return t?(0,ae.jsx)(dt.Clickable,{onPress:()=>a(!0),children:(0,ae.jsx)(uo.Container.Horizontal,{padding:"NONE_2XS",children:(0,ae.jsx)(fe,{children:r?(0,ae.jsx)(pt.TextInput,{testID:"counter-input",value:i,keyboardType:"numeric",style:{fontWeight:"bold",fontSize:Number(e.font.size.lg)||16,textAlign:"center",width:40,height:40},autoFocus:!0,selectTextOnFocus:!0,onBlur:l,onChangeText:m,onEndEditing:l}):(0,ae.jsx)(po.Typography,{weight:"BOLD",size:"LG",children:o})})})}):(0,ae.jsx)(uo.Container.Horizontal,{padding:"NONE_2XS",children:(0,ae.jsx)(fe,{children:(0,ae.jsx)(po.Typography,{weight:"BOLD",size:"LG",children:o})})})}ve.displayName="Form.FormCounter.Display";var F=require("react/jsx-runtime");function ft(){let{label:e,labelPosition:o,error:t}=Y();return(0,F.jsxs)(ue.Container.Vertical,{align:"CENTER_START",children:[o==="TOP_START"&&e&&(0,F.jsxs)(ue.Container.Horizontal,{padding:"NONE_NONE_2XS_NONE",gap:"2XS",children:[(0,F.jsx)(me,{children:e}),t&&(0,F.jsx)(re,{children:t})]}),o!=="LEFT"&&(0,F.jsxs)(ue.Container.Vertical,{align:"CENTER",children:[o!=="TOP_START"&&(e||t)&&(0,F.jsxs)(ue.Container.Vertical,{align:"CENTER",padding:"NONE_NONE_2XS_NONE",children:[e&&(0,F.jsx)(me,{children:e}),t&&(0,F.jsx)(re,{children:t})]}),(0,F.jsxs)(Ee,{children:[(0,F.jsx)(ie,{type:"MINUS"}),(0,F.jsx)(ve,{}),(0,F.jsx)(ie,{type:"PLUS"})]})]}),o==="LEFT"&&(0,F.jsx)(ue.Container.Vertical,{children:(0,F.jsxs)(ue.Container.Horizontal,{align:"CENTER",children:[(e||t)&&(0,F.jsxs)(ue.Container.Vertical,{padding:"NONE_2XS_NONE_NONE",children:[e&&(0,F.jsx)(me,{children:e}),t&&(0,F.jsx)(re,{children:t})]}),(0,F.jsxs)(Ee,{children:[(0,F.jsx)(ie,{type:"MINUS"}),(0,F.jsx)(ve,{}),(0,F.jsx)(ie,{type:"PLUS"})]})]})})]})}var Be=require("react/jsx-runtime");function gt(t){var n=t,{children:e}=n,o=I(n,["children"]);return(0,Be.jsx)(Go,E(C({buttonTransparent:!1,labelPosition:"TOP_START",multiplier:1},o),{children:e?(0,Be.jsx)(at,{children:e}):(0,Be.jsx)(ft,{})}))}var ht=require("react/jsx-runtime");function co(e){return(0,ht.jsx)(ie,E(C({},e),{type:"MINUS"}))}co.displayName="Form.FormCounter.Minus";var Ct=require("react/jsx-runtime");function fo(e){return(0,Ct.jsx)(ie,E(C({},e),{type:"PLUS"}))}fo.displayName="Form.FormCounter.Plus";var bt=Object.assign(gt,{Display:ve,Plus:fo,Minus:co,Badge:Ae});var Tt=require("@mobilestock-native/container");var vt=require("react/jsx-runtime");function Et(t){var n=t,{children:e}=n,o=I(n,["children"]);return(0,vt.jsx)(Tt.Container.Horizontal,E(C({gap:"SM"},o),{children:e}))}var yt=require("@unform/core"),k=require("react"),Pt=require("react-native"),ye=R(require("styled-components/native")),St=require("@mobilestock-native/button"),Co=require("@mobilestock-native/container"),go=R(require("@mobilestock-native/tools")),ho=require("@mobilestock-native/typography");var pe=require("react/jsx-runtime"),Ft=(0,k.forwardRef)(function(d,h){var b=d,{name:o,label:t,defaultValue:n,type:r="text",autoSubmit:a=!1,format:i,onChangeText:m,autoCapitalize:l,full:u,maxLength:p}=b,c=I(b,["name","label","defaultValue","type","autoSubmit","format","onChangeText","autoCapitalize","full","maxLength"]);let{loading:g,submitForm:f}=q(),s=(0,yt.useField)(o),v=(0,k.useRef)(null),[S,A]=(0,k.useState)(!0),[D,T]=(0,k.useState)(""),V=r==="password",Q=r==="tel"?15:r==="zipcode"?9:p;(0,k.useEffect)(()=>{let x=D||n||(s==null?void 0:s.defaultValue)||"";v.current.value=x,T(x),s.registerField({name:s.fieldName,ref:v.current,getValue(P){return(P==null?void 0:P.value)||""},setValue(P,y){P.value=y,T(y)},clearValue(P){P.value="",T("")}})},[s==null?void 0:s.fieldName,s==null?void 0:s.registerField]),(0,k.useImperativeHandle)(h,()=>({focus(){var x;(x=v.current)==null||x.focus()},blur(){var x;(x=v.current)==null||x.blur()}}));let z=(0,k.useCallback)(x=>{var y,N;let P=x;switch(r){case"tel":P=go.default.phoneNumberFormatter(x);break;case"email":case"url":P=x.trim();break;case"number":P=x.replace(/[^0-9.,]/g,"");break;case"zipcode":P=go.default.formatZipcode(P);break}i&&(P=i(P)),T(P),v.current.value=P,m==null||m(P),r==="tel"&&a&&P.length===15&&((y=v.current)==null||y.blur(),f()),r==="zipcode"&&a&&P.length===9&&((N=v.current)==null||N.blur(),f())},[r,i,a,m,s]),be=(0,k.useCallback)(()=>{switch(r){case"tel":return"phone-pad";case"email":return"email-address";case"url":return"url";case"number":return"numeric";default:return"default"}},[r]);return(0,pe.jsxs)(zn,{full:u,$show:r!=="hidden",children:[t&&(0,pe.jsx)(ho.Typography,{children:t}),(0,pe.jsxs)(kn,{error:!!(s!=null&&s.error),$isPassword:V,children:[(0,pe.jsx)(Bn,E(C({},c),{ref:v,value:D,autoCapitalize:r&&["email","url"].includes(r)?"none":l,keyboardType:be(),secureTextEntry:S&&V,onChangeText:z,maxLength:Q,editable:!g&&c.editable})),V&&(0,pe.jsx)(St.Button,{size:"SM",onPress:()=>A(!S),icon:S?"EyeOff":"EyeOutline",variant:"TRANSPARENT"})]}),!!(s!=null&&s.error)&&(0,pe.jsx)(ho.Typography,{color:"DANGER",size:"SM",children:s.error})]})}),zn=(0,ye.default)(Co.Container.Vertical)`
   ${({$show:e})=>!e&&ye.css`
       display: none;
     `}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobilestock-native/form",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "index.js",
   "dependencies": {
     "lodash": "^4.17.14",
@@ -13,16 +13,16 @@
     "expo-media-library": "~18.2.0",
     "expo-document-picker": "~14.0.7",
     "expo-image-picker": "~17.0.8",
-    "@mobilestock-native/button": "^1.0.14",
+    "@mobilestock-native/button": "^1.0.15",
     "@mobilestock-native/badge": "^0.0.7",
     "@mobilestock-native/container": "^1.0.0",
-    "@mobilestock-native/icons": "^0.0.8",
-    "@mobilestock-native/modalalert": "^0.0.16",
+    "@mobilestock-native/icons": "^0.1.0",
+    "@mobilestock-native/modalalert": "^0.0.17",
     "@mobilestock-native/tools": "^0.0.10",
     "@mobilestock-native/typography": "^0.0.9",
-    "@mobilestock-native/clickable": "^1.0.8",
+    "@mobilestock-native/clickable": "^1.0.9",
     "@mobilestock-native/spacer": "^0.0.6",
-    "@mobilestock-native/list": "^0.0.11"
+    "@mobilestock-native/list": "^0.0.12"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.14",