@edge-zuq/core 1.3.1 → 1.3.5

package/src/presentation/components/molecules/UIImage.tsx

@@ -31,12 +31,11 @@ export const UIImage = ({
       source={{
         uri,
       }}
-      onError={(event) => {
+      onError={event => {
         setHasError(Boolean(event.nativeEvent.error));
         onError?.(event);
       }}
-      {...props}
-    >
+      {...props}>
       {hasError && (
         <UIStack style={styles.error} flex={1}>
           <UIText align="center">
@@ -50,8 +49,7 @@ export const UIImage = ({
           variant="contained"
           color="feedback-red-500"
           style={styles.button}
-          onPress={onRemove}
-        >
+          onPress={onRemove}>
           <UIStack horizontal center style={styles.remove}>
             <UIIcon name="trash" color={theme.color.neutral.light['00']} />
             <UIText color="neutral-light-00" size={12}>

package/src/presentation/components/molecules/UITextInput.tsx

@@ -38,7 +38,7 @@ export const UITextInput = React.forwardRef<TextInput, Props>(
     const [hidden, setHidden] = React.useState(secureTextEntry);
     const [focused, setFocused] = React.useState(false);
 
-    const toggleHidden = () => setHidden((value) => !value);
+    const toggleHidden = () => setHidden(value => !value);
 
     return (
       <View style={wrapperStyle}>
@@ -46,8 +46,7 @@ export const UITextInput = React.forwardRef<TextInput, Props>(
           <UIText
             weight="700"
             variant="label"
-            style={[styles.label, focused && styles.labelFocused]}
-          >
+            style={[styles.label, focused && styles.labelFocused]}>
             {label}
             {required && <UIText color="feedback-red-500"> *</UIText>}
           </UIText>
@@ -60,8 +59,7 @@ export const UITextInput = React.forwardRef<TextInput, Props>(
             Boolean(endIcon) && styles.endIcon,
             styles[variant],
             containerStyle,
-          ]}
-        >
+          ]}>
           {startIcon && React.cloneElement(startIcon, { focused })}
           <TextInput
             accessible
@@ -79,11 +77,11 @@ export const UITextInput = React.forwardRef<TextInput, Props>(
               Boolean(endIcon) && styles.endIcon,
               style,
             ]}
-            onFocus={(e) => {
+            onFocus={e => {
               setFocused(true);
               onFocus?.(e);
             }}
-            onBlur={(e) => {
+            onBlur={e => {
               setFocused(false);
               onBlur?.(e);
             }}

package/src/presentation/components/molecules/UITextInputMask.tsx

@@ -41,7 +41,7 @@ export const UITextInputMask = React.forwardRef<TextInput, Props>(
     const [hidden, setHidden] = React.useState(secureTextEntry);
     const [focused, setFocused] = React.useState(false);
 
-    const toggleHidden = () => setHidden((value) => !value);
+    const toggleHidden = () => setHidden(value => !value);
 
     return (
       <View style={wrapperStyle}>
@@ -49,8 +49,7 @@ export const UITextInputMask = React.forwardRef<TextInput, Props>(
           <UIText
             weight="700"
             variant="label"
-            style={[styles.label, focused && styles.labelFocused]}
-          >
+            style={[styles.label, focused && styles.labelFocused]}>
             {label}
             {required && <UIText color="feedback-red-500"> *</UIText>}
           </UIText>
@@ -61,8 +60,7 @@ export const UITextInputMask = React.forwardRef<TextInput, Props>(
             focused && styles.focused,
             styles[variant],
             containerStyle,
-          ]}
-        >
+          ]}>
           {startIcon && React.cloneElement(startIcon, { focused })}
           <MaskInput
             ref={ref}
@@ -79,11 +77,11 @@ export const UITextInputMask = React.forwardRef<TextInput, Props>(
               !editable && Boolean(value) && styles.disabled,
               style,
             ]}
-            onFocus={(e) => {
+            onFocus={e => {
               setFocused(true);
               onFocus?.(e);
             }}
-            onBlur={(e) => {
+            onBlur={e => {
               setFocused(false);
               onBlur?.(e);
             }}

package/src/presentation/components/organisms/UIFormButton.tsx

@@ -18,7 +18,7 @@ export const UIFormButton = ({
   const { handleSubmit, setError, clearErrors, reset } = useFormContext();
 
   const onPress = handleSubmit(
-    async (values) => {
+    async values => {
       try {
         await KeyboardController.dismiss({ animated: false, keepFocus: false });
         clearErrors('_formError');

package/src/presentation/components/organisms/UIFormCheckboxInput.tsx

@@ -19,7 +19,7 @@ export const UIFormCheckboxInput = ({
 
   return (
     <UICheckboxInput
-      onPress={(e) => {
+      onPress={e => {
         onPress?.(e);
         const { value: current, onChange } = field;
         if (current?.includes(value)) {

package/src/presentation/components/organisms/UIFormCurrencyInput.tsx

@@ -33,7 +33,7 @@ export const UIFormCurrencyInput = React.forwardRef<TextInput, Props>(
         <UICurrencyInput
           ref={ref}
           value={value}
-          onChangeValue={(value) => {
+          onChangeValue={value => {
             field.onChange(String(value ?? ''));
             onChangeValue?.(value);
           }}

package/src/presentation/components/organisms/UIFormDatetimeInput.tsx

@@ -27,7 +27,7 @@ export const UIFormDatetimeInput = ({
     <UIStack style={[styles.container, formContainerStyle]}>
       <UIDatetimeInput
         value={field.value && new Date(field.value)}
-        onSelect={(date) => {
+        onSelect={date => {
           field.onChange(date.getTime());
         }}
         {...props}

package/src/presentation/components/organisms/UIFormMultiselectInput.tsx

@@ -109,12 +109,12 @@ export const UIFormMultiselectInput = <T,>({
   const onSelect = (item: T) => {
     const current = (getValuesContext(name) ?? []) as T[];
     const isSelected = current.find(
-      (value) => getItemKey(value) === getItemKey(item)
+      value => getItemKey(value) === getItemKey(item)
     );
     if (isSelected) {
       setValueContext(
         name,
-        current.filter((data) => getItemKey(data) !== getItemKey(item))
+        current.filter(data => getItemKey(data) !== getItemKey(item))
       );
     } else {
       setValueContext(name, [...current, item]);
@@ -136,7 +136,7 @@ export const UIFormMultiselectInput = <T,>({
     if (!data) return [];
     if (!Array.isArray(data)) return [];
     if (!search) return data;
-    return data.filter((item) =>
+    return data.filter(item =>
       String(getItemLabel(item) ?? '')
         .toLowerCase()
         .includes(search.toLowerCase())
@@ -145,7 +145,7 @@ export const UIFormMultiselectInput = <T,>({
 
   const value = React.useMemo(() => {
     const current = (getValuesContext(name) ?? []) as T[];
-    return current.map((value) => getItemLabel(value)).join(', ');
+    return current.map(value => getItemLabel(value)).join(', ');
   }, [name, getItemLabel, getValuesContext, watchContext(name)]); //eslint-disable-line
 
   return (
@@ -165,8 +165,7 @@ export const UIFormMultiselectInput = <T,>({
         visible={visible}
         onRequestClose={onClose}
         title={title}
-        style={[styles.sheet, sheetStyle]}
-      >
+        style={[styles.sheet, sheetStyle]}>
         <UIStack>
           <UIForm schema={schema} form={form} style={styles.form}>
             <UIFormTextInput
@@ -185,8 +184,7 @@ export const UIFormMultiselectInput = <T,>({
                     loading={isCreating}
                     variant={createVariant}
                     onSubmit={onSubmit}
-                    getErrorMessage={getErrorMessage}
-                  >
+                    getErrorMessage={getErrorMessage}>
                     <UIStack style={styles.create} horizontal center>
                       <UIText color="neutral-light-00">{createMessage}</UIText>
                       <UIIcon
@@ -218,7 +216,7 @@ export const UIFormMultiselectInput = <T,>({
             renderItem={({ item }) => {
               const current = (watchContext(name) ?? []) as T[];
               const isSelected = Boolean(
-                current.find((value) => getItemKey(value) === getItemKey(item))
+                current.find(value => getItemKey(value) === getItemKey(item))
               );
               const label = String(getItemLabel(item));
               return (

package/src/presentation/components/organisms/UIFormSelectInput.tsx

@@ -174,7 +174,7 @@ export const UIFormSelectInput = <T,>({
     if (!Array.isArray(data)) return [];
     let filtered = data;
     if (enableClientSearch && search) {
-      filtered = data.filter((item) =>
+      filtered = data.filter(item =>
         String(getItemLabel(item) ?? '')
           .toLowerCase()
           .includes(search.toLowerCase())
@@ -233,8 +233,7 @@ export const UIFormSelectInput = <T,>({
         onRequestClose={onClose}
         title={title}
         style={sheetStyle}
-        estimatedHeight={520}
-      >
+        estimatedHeight={520}>
         <UIStack flex={1}>
           <UIForm schema={schema} form={form} style={styles.form}>
             <UIStack horizontal center>
@@ -242,7 +241,7 @@ export const UIFormSelectInput = <T,>({
                 name="search"
                 placeholder={searchPlaceholder}
                 variant={searchVariant}
-                onChangeText={(text) => onSearchDebounced(text)}
+                onChangeText={text => onSearchDebounced(text)}
                 endIcon={<UIInputIcon position="end" name="search" size={24} />}
               />
               {action}
@@ -257,8 +256,7 @@ export const UIFormSelectInput = <T,>({
                     loading={isCreating}
                     variant={createVariant}
                     onSubmit={onSubmit}
-                    getErrorMessage={getErrorMessage}
-                  >
+                    getErrorMessage={getErrorMessage}>
                     <UIStack style={styles.create} horizontal center>
                       <UIText color="neutral-light-00">{createMessage}</UIText>
                       <UIIcon

package/src/presentation/components/organisms/UIFormTextInput.tsx

@@ -36,7 +36,7 @@ export const UIFormTextInput = React.forwardRef<TextInput, Props>(
           ref={ref}
           value={field.value}
           editable={isSubmitting || editable}
-          onChangeText={(text) => {
+          onChangeText={text => {
             field.onChange(text);
             onChangeText?.(text);
           }}

package/src/presentation/components/organisms/UIMultipleSelectChip.tsx

@@ -0,0 +1,139 @@
+import { StyleSheet } from 'react-native';
+import { UIButton, UIChip, UIList, UISkeleton } from '../molecules';
+import { UIIcon, UISeparator, UISpacer, UIStack, UIText } from '../atoms';
+import { theme } from '../../../theme';
+
+type PropsToOmit = 'renderItem' | 'ItemSeparatorComponent';
+
+type Props<T> = Omit<React.ComponentProps<typeof UIList<T>>, PropsToOmit> & {
+  data: T[];
+  getItemLabel: (item: T) => string;
+  getItemKey: (item: T) => string;
+  selected: T[];
+  onSelect: (item: T) => void;
+  onReset: () => void;
+  loading?: boolean;
+};
+
+export const UIMultipleSelectChip = <T,>({
+  data,
+  getItemLabel,
+  getItemKey,
+  selected,
+  onSelect,
+  onReset,
+  loading = false,
+  ...props
+}: Props<T>) => {
+  const isAllSelected = selected.length === 0;
+
+  const isSelected = (item: T) => {
+    return selected.some(
+      currentItem => getItemKey(currentItem) === getItemKey(item)
+    );
+  };
+
+  if (loading) return <UIMultipleSelectChip.Skeleton />;
+
+  return (
+    <UIList
+      horizontal
+      data={data}
+      ListHeaderComponent={() => (
+        <UIStack horizontal center size="md" style={styles.header}>
+          <UIButton onPress={() => onReset()} style={styles.button}>
+            <UIChip
+              content={
+                <UIStack horizontal center>
+                  {isAllSelected && (
+                    <UIIcon
+                      name="check-alt"
+                      color={theme.color.neutral.light['00']}
+                    />
+                  )}
+                  <UIText
+                    weight="500"
+                    color={
+                      isAllSelected ? 'neutral-light-00' : 'neutral-mid-60'
+                    }>
+                    Todos
+                  </UIText>
+                </UIStack>
+              }
+              color={isAllSelected ? 'brand-violet-500' : 'neutral-light-05'}
+              borderColor={
+                isAllSelected ? 'brand-violet-500' : 'neutral-light-50'
+              }
+              style={styles.chip}
+            />
+          </UIButton>
+          <UISeparator horizontal={false} />
+        </UIStack>
+      )}
+      renderItem={({ item }) => {
+        const isSelectedItem = isSelected(item);
+        return (
+          <UIButton onPress={() => onSelect(item)} style={styles.button}>
+            <UIChip
+              content={
+                <UIStack horizontal center>
+                  {isSelectedItem && (
+                    <UIIcon
+                      name="check-alt"
+                      color={theme.color.neutral.light['00']}
+                    />
+                  )}
+                  <UIText
+                    weight="500"
+                    color={
+                      isSelectedItem ? 'neutral-light-00' : 'neutral-mid-60'
+                    }>
+                    {getItemLabel(item)}
+                  </UIText>
+                </UIStack>
+              }
+              color={isSelectedItem ? 'brand-violet-500' : 'neutral-light-05'}
+              borderColor={
+                isSelectedItem ? 'brand-violet-500' : 'neutral-light-50'
+              }
+              style={styles.chip}
+            />
+          </UIButton>
+        );
+      }}
+      ItemSeparatorComponent={() => <UISpacer horizontal />}
+      {...props}
+    />
+  );
+};
+
+UIMultipleSelectChip.Skeleton = () => {
+  return (
+    <UIList
+      horizontal
+      data={Array.from({ length: 3 })}
+      renderItem={() => <UISkeleton width={100} height={36} circle />}
+      ListHeaderComponent={() => (
+        <UIStack horizontal center size="md" style={styles.header}>
+          <UISkeleton width={85} height={36} circle />
+          <UISeparator horizontal={false} />
+        </UIStack>
+      )}
+      ItemSeparatorComponent={() => <UISpacer horizontal />}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  chip: {
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingHorizontal: 16,
+  },
+  header: {
+    marginRight: 8,
+  },
+  button: {
+    padding: 0,
+  },
+});

package/src/presentation/components/organisms/UISelectChip.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { UIButton, UIChip, UIList } from '../molecules';
+import { UIButton, UIChip, UIList, UISkeleton } from '../molecules';
 import { UIIcon, UISeparator, UISpacer, UIStack, UIText } from '../atoms';
 import { theme } from '../../../theme';
 
@@ -9,9 +9,10 @@ type Props<T> = Omit<React.ComponentProps<typeof UIList<T>>, PropsToOmit> & {
   data: T[];
   getItemLabel: (item: T) => string;
   getItemKey: (item: T) => string;
-  selected: T;
+  selected: T | null;
   onSelect: (item: T) => void;
   onReset: () => void;
+  loading?: boolean;
 };
 
 export const UISelectChip = <T,>({
@@ -21,14 +22,19 @@ export const UISelectChip = <T,>({
   selected,
   onSelect,
   onReset,
+  loading = false,
   ...props
 }: Props<T>) => {
+  if (loading) return <UISelectChip.Skeleton />;
+
   return (
     <UIList
       horizontal
       data={data}
       renderItem={({ item }) => {
-        const isSelected = getItemKey(selected) === getItemKey(item);
+        const isSelected = Boolean(
+          selected && getItemKey(selected) === getItemKey(item)
+        );
         return (
           <UIButton onPress={() => onSelect(item)} style={styles.button}>
             <UIChip
@@ -89,6 +95,23 @@ export const UISelectChip = <T,>({
   );
 };
 
+UISelectChip.Skeleton = () => {
+  return (
+    <UIList
+      horizontal
+      data={Array.from({ length: 3 })}
+      renderItem={() => <UISkeleton width={100} height={36} circle />}
+      ListHeaderComponent={() => (
+        <UIStack horizontal center size="md" style={styles.header}>
+          <UISkeleton width={85} height={36} circle />
+          <UISeparator horizontal={false} />
+        </UIStack>
+      )}
+      ItemSeparatorComponent={() => <UISpacer horizontal />}
+    />
+  );
+};
+
 const styles = StyleSheet.create({
   chip: {
     paddingTop: 6,

package/src/presentation/components/organisms/UISignature.tsx

@@ -97,13 +97,13 @@ export const UISignature = ({
     .averageTouches(true)
     .maxPointers(1)
     .minDistance(1)
-    .onStart((e) => {
+    .onStart(e => {
       currentPath.value.moveTo(e.x, e.y);
       currentPath.value.lineTo(e.x, e.y);
       notifyChange(currentPath);
       if (onTouchStart) scheduleOnRN(onTouchStart);
     })
-    .onUpdate((e) => {
+    .onUpdate(e => {
       scheduleOnRN(setIsDirty, true);
       currentPath.value.lineTo(e.x, e.y);
       notifyChange(currentPath);
@@ -140,8 +140,7 @@ export const UISignature = ({
             ref={canvasRef}
             testID={testID}
             accessibilityLabel={accessibilityLabel}
-            style={[styles.container, signatureStyle]}
-          >
+            style={[styles.container, signatureStyle]}>
             <Path
               path={currentPath}
               strokeWidth={5}
@@ -158,8 +157,7 @@ export const UISignature = ({
       <UIButton
         style={styles.clear}
         onPress={resetSignature}
-        disabled={disabled}
-      >
+        disabled={disabled}>
         <UIIcon name="close" />
       </UIButton>
     </UIStack>

package/src/presentation/components/organisms/UISlideButton.tsx

@@ -46,7 +46,7 @@ export const UISlideButton = ({ children, helperText, onPress }: Props) => {
   });
 
   const pan = Gesture.Pan()
-    .onUpdate((event) => {
+    .onUpdate(event => {
       animation.value = interpolate(
         clamp(event.translationX, 0, max),
         [0, max],
@@ -69,10 +69,9 @@ export const UISlideButton = ({ children, helperText, onPress }: Props) => {
   return (
     <UIStack
       style={styles.container}
-      onLayout={(event) => {
+      onLayout={event => {
         setContainerWidth(event.nativeEvent.layout.width);
-      }}
-    >
+      }}>
       {helperText && (
         <Animated.View style={[styles.text, labelAnimatedStyle]}>
           <UIText weight="600">{helperText}</UIText>
@@ -83,10 +82,9 @@ export const UISlideButton = ({ children, helperText, onPress }: Props) => {
           <UIButton
             variant="contained"
             style={styles.button}
-            onLayout={(event) => {
+            onLayout={event => {
               setButtonWidth(event.nativeEvent.layout.width);
-            }}
-          >
+            }}>
             {children}
           </UIButton>
         </Animated.View>

package/src/presentation/components/organisms/index.ts

@@ -19,3 +19,4 @@ export * from './UISearchInput';
 export * from './UISelectChip';
 export * from './UIErrorBoundary';
 export * from './UISignature';
+export * from './UIMultipleSelectChip';

package/src/presentation/components/permissions/request-permissions.tsx

@@ -30,15 +30,15 @@ export const RequestPermissions = ({
 
   const check = React.useCallback(async () => {
     const current = await Promise.all(
-      permissions.map(async (permission) => ({
+      permissions.map(async permission => ({
         permission,
         state: await permissionManager.get(permission.value),
       }))
     );
     setPending(
       current
-        .filter((item) => ['denied', 'blocked'].includes(item.state))
-        .map((item) => item.permission)
+        .filter(item => ['denied', 'blocked'].includes(item.state))
+        .map(item => item.permission)
     );
   }, [permissionManager, permissions]);
 
@@ -73,8 +73,7 @@ export const RequestPermissions = ({
       visible={visible}
       onRequestClose={onClose}
       title={title ?? 'Permissões'}
-      estimatedHeight={height}
-    >
+      estimatedHeight={height}>
       <UIList
         data={pending}
         style={{ height: height ?? 400 }}
@@ -91,8 +90,7 @@ export const RequestPermissions = ({
               variant="contained"
               color="neutral-light-20"
               textColor="brand-violet-500"
-              onPress={() => onAllow(item)}
-            >
+              onPress={() => onAllow(item)}>
               {item.option.allow ?? 'Permitir'}
             </UIButton>
           </UIStack>

package/src/presentation/domain/offline/use-offline-mutation.ts

@@ -28,7 +28,7 @@ import type { Storage } from '../../../data/protocols';
 const parseData = (data: any) => {
   try {
     return typeof data === 'string' ? JSON.parse(data) : data;
-  } catch (err) {
+  } catch {
     return data;
   }
 };
@@ -110,7 +110,7 @@ export const useOfflineMutation = <TData, TError, TVariables>({
             body: parsedData,
           },
           status: OfflineMutationStatus.PENDING,
-          dependencies: dependencies.map((value) =>
+          dependencies: dependencies.map(value =>
             isIsomorphicId(value) ? value : String(value)
           ),
           queryKeysToInvalidate,

package/src/presentation/domain/offline/use-offline-query.ts

@@ -30,7 +30,7 @@ export const useOfflineQuery = <
 }: Params<TQueryFnData, TError, TData, TQueryKey>) => {
   return useQuery({
     queryKey,
-    queryFn: async (context) => {
+    queryFn: async context => {
       const data = await (queryFn as any)?.(context);
       if (isInvalidData(data)) {
         throw new Error(