@edge-zuq/core 1.2.7 → 1.3.4

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
 import Animated, {
   cancelAnimation,
   interpolate,
@@ -9,14 +9,17 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { UIStack } from '../atoms';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { theme } from '../../../theme';
 
 type Props = {
   circle?: boolean;
   width: number;
   height: number;
+  style?: StyleProp<ViewStyle>;
 };
 
-export const UISkeleton = ({ width, height, circle }: Props) => {
+export const UISkeleton = ({ width, height, circle, style }: Props) => {
   const translateX = useSharedValue(0);
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -38,6 +41,7 @@ export const UISkeleton = ({ width, height, circle }: Props) => {
       style={[
         styles.skeleton,
         { width, height, borderRadius: circle ? width / 2 : 2 },
+        style,
       ]}
     >
       <Animated.View
@@ -46,20 +50,28 @@ export const UISkeleton = ({ width, height, circle }: Props) => {
           {
             width: 0.9 * width,
             height,
-            opacity: 0.125,
             borderRadius: circle ? width / 2 : 2,
-            backgroundColor: '#000',
           },
         ]}
-      />
+      >
+        <Svg height={height} width={width}>
+          <Defs>
+            <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
+              <Stop offset="0" stopColor="white" stopOpacity="0" />
+              <Stop offset="0.5" stopColor="white" stopOpacity="0.5" />
+              <Stop offset="1" stopColor="white" stopOpacity="0" />
+            </LinearGradient>
+          </Defs>
+          <Rect x="0" y="0" width={width} height={height} fill="url(#grad)" />
+        </Svg>
+      </Animated.View>
     </UIStack>
   );
 };
 
 const styles = StyleSheet.create({
   skeleton: {
-    backgroundColor: '#000',
-    opacity: 0.1,
+    backgroundColor: theme.color.neutral.light['20'],
     borderRadius: 2,
     overflow: 'hidden',
   },

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

@@ -12,6 +12,7 @@ type Props = React.ComponentProps<typeof TextInput> & {
   label?: string;
   containerStyle?: StyleProp<ViewStyle>;
   wrapperStyle?: StyleProp<ViewStyle>;
+  required?: boolean;
 };
 
 export const UITextInput = React.forwardRef<TextInput, Props>(
@@ -29,6 +30,7 @@ export const UITextInput = React.forwardRef<TextInput, Props>(
       wrapperStyle,
       editable = true,
       value,
+      required,
       ...props
     },
     ref
@@ -36,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}>
@@ -44,9 +46,9 @@ 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>
         )}
         <View
@@ -57,8 +59,7 @@ export const UITextInput = React.forwardRef<TextInput, Props>(
             Boolean(endIcon) && styles.endIcon,
             styles[variant],
             containerStyle,
-          ]}
-        >
+          ]}>
           {startIcon && React.cloneElement(startIcon, { focused })}
           <TextInput
             accessible
@@ -76,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

@@ -14,6 +14,7 @@ type Props = React.ComponentProps<typeof MaskInput> & {
   containerStyle?: StyleProp<ViewStyle>;
   wrapperStyle?: StyleProp<ViewStyle>;
   mask?: Mask;
+  required?: boolean;
 };
 
 export const UITextInputMask = React.forwardRef<TextInput, Props>(
@@ -32,6 +33,7 @@ export const UITextInputMask = React.forwardRef<TextInput, Props>(
       mask,
       value,
       editable = true,
+      required,
       ...props
     },
     ref
@@ -39,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}>
@@ -47,9 +49,9 @@ 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>
         )}
         <View
@@ -58,8 +60,7 @@ export const UITextInputMask = React.forwardRef<TextInput, Props>(
             focused && styles.focused,
             styles[variant],
             containerStyle,
-          ]}
-        >
+          ]}>
           {startIcon && React.cloneElement(startIcon, { focused })}
           <MaskInput
             ref={ref}
@@ -76,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

@@ -73,6 +73,9 @@ type Props<T> = {
   enableClientSearch?: boolean;
   onFocus?: () => void;
   onBlur?: () => void;
+  testID?: string;
+  accessibilityLabel?: string;
+  required?: boolean;
 };
 
 export const UIFormSelectInput = <T,>({
@@ -111,6 +114,9 @@ export const UIFormSelectInput = <T,>({
   inputFormContainerStyle,
   onFocus,
   onBlur,
+  testID,
+  accessibilityLabel,
+  required,
 }: Props<T>) => {
   const ref = React.useRef<TextInput>(null);
   const { visible, onClose: onCloseFromHook, onOpen } = useActionSheet();
@@ -168,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())
@@ -218,14 +224,16 @@ export const UIFormSelectInput = <T,>({
         style={inputStyle}
         containerStyle={inputContainerStyle}
         formContainerStyle={inputFormContainerStyle}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+        required={required}
       />
       <UIActionSheet
         visible={visible}
         onRequestClose={onClose}
         title={title}
         style={sheetStyle}
-        estimatedHeight={520}
-      >
+        estimatedHeight={520}>
         <UIStack flex={1}>
           <UIForm schema={schema} form={form} style={styles.form}>
             <UIStack horizontal center>
@@ -233,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}
@@ -248,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

@@ -6,7 +6,7 @@ import {
   useCanvasRef,
 } from '@shopify/react-native-skia';
 import React from 'react';
-import { Dimensions, Image, StyleSheet } from 'react-native';
+import { Dimensions, Image, Platform, StyleSheet } from 'react-native';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useSharedValue } from 'react-native-reanimated';
@@ -76,7 +76,11 @@ export const UISignature = ({
     const image = canvasRef.current?.makeImageSnapshot(SNAPSHOT_PARAMS);
     if (!image) return;
     const name = `${Date.now()}.png`;
-    const path = ReactNativeBlobUtil.fs.dirs.DCIMDir + `/signatures/${name}`;
+    const directory =
+      Platform.OS === 'android'
+        ? ReactNativeBlobUtil.fs.dirs.DCIMDir
+        : ReactNativeBlobUtil.fs.dirs.DocumentDir;
+    const path = directory + `/signatures/${name}`;
     const base64 = image.encodeToBase64();
     await ReactNativeBlobUtil.fs.writeFile(path, base64, 'base64');
     const values = {
@@ -93,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);
@@ -136,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}
@@ -154,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';