@edge-zuq/core 1.2.7

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

@@ -0,0 +1,194 @@
+import {
+  Canvas,
+  Path,
+  Skia,
+  notifyChange,
+  useCanvasRef,
+} from '@shopify/react-native-skia';
+import React from 'react';
+import { Dimensions, Image, 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';
+import { UIIcon, UISeparator, UIStack, UIText } from '../atoms';
+import { UIButton } from '../molecules';
+import { theme } from '../../../theme';
+import type { SignatureRef } from '../../domain/utils';
+import { scheduleOnRN } from 'react-native-worklets';
+
+const { width } = Dimensions.get('window');
+
+const SNAPSHOT_PARAMS = {
+  height: 250,
+  width,
+  x: 0,
+  y: 0,
+};
+
+type ImageType = {
+  name: string;
+  uri: string;
+  type: string;
+  editable?: boolean;
+};
+
+type Props = {
+  ref?: React.Ref<SignatureRef>;
+  initialImage?: ImageType;
+  disabled?: boolean;
+  label?: string;
+  onReset?: () => void;
+  onTouchStart?: () => void;
+  testID?: string;
+  accessibilityLabel?: string;
+  labelSize?: number;
+  containerStyle?: React.ComponentProps<typeof UIStack>['style'];
+  signatureStyle?: React.ComponentProps<typeof Canvas>['style'];
+};
+
+export const UISignature = ({
+  ref,
+  initialImage,
+  disabled = false,
+  label = 'Assinatura',
+  onReset,
+  onTouchStart,
+  testID,
+  accessibilityLabel,
+  labelSize = 14,
+  containerStyle,
+  signatureStyle,
+}: Props) => {
+  const canvasRef = useCanvasRef();
+  const currentPath = useSharedValue(Skia.Path.Make().moveTo(0, 0));
+  const [isDirty, setIsDirty] = React.useState(false);
+  const [image, setImage] = React.useState<ImageType | null>(
+    initialImage ?? null
+  );
+
+  const resetSignature = () => {
+    onReset?.();
+    currentPath.value = Skia.Path.Make().moveTo(0, 0);
+    setImage(null);
+  };
+
+  const onSave = async () => {
+    const image = canvasRef.current?.makeImageSnapshot(SNAPSHOT_PARAMS);
+    if (!image) return;
+    const name = `${Date.now()}.png`;
+    const path = ReactNativeBlobUtil.fs.dirs.DCIMDir + `/signatures/${name}`;
+    const base64 = image.encodeToBase64();
+    await ReactNativeBlobUtil.fs.writeFile(path, base64, 'base64');
+    const values = {
+      name,
+      uri: `file://${path}`,
+      type: 'image/png',
+    };
+    setImage(values);
+    return values;
+  };
+
+  const pan = Gesture.Pan()
+    .enabled(!disabled)
+    .averageTouches(true)
+    .maxPointers(1)
+    .minDistance(1)
+    .onStart((e) => {
+      currentPath.value.moveTo(e.x, e.y);
+      currentPath.value.lineTo(e.x, e.y);
+      notifyChange(currentPath);
+      if (onTouchStart) scheduleOnRN(onTouchStart);
+    })
+    .onUpdate((e) => {
+      scheduleOnRN(setIsDirty, true);
+      currentPath.value.lineTo(e.x, e.y);
+      notifyChange(currentPath);
+    });
+
+  React.useImperativeHandle(ref, () => ({
+    isDirty,
+    save: onSave,
+    reset: resetSignature,
+  }));
+
+  React.useEffect(() => {
+    if (initialImage) {
+      setImage(initialImage);
+    }
+  }, [initialImage]);
+
+  const { height, width } = StyleSheet.flatten(signatureStyle ?? {});
+
+  return (
+    <UIStack style={[styles.signatureContainer, containerStyle]}>
+      {image ? (
+        <Image
+          source={image}
+          style={[
+            styles.image,
+            Boolean(width) && { width },
+            Boolean(height) && { height },
+          ]}
+        />
+      ) : (
+        <GestureDetector gesture={pan}>
+          <Canvas
+            ref={canvasRef}
+            testID={testID}
+            accessibilityLabel={accessibilityLabel}
+            style={[styles.container, signatureStyle]}
+          >
+            <Path
+              path={currentPath}
+              strokeWidth={5}
+              style="stroke"
+              color="#000"
+            />
+          </Canvas>
+        </GestureDetector>
+      )}
+      <UIStack style={styles.underline}>
+        <UISeparator color="neutral-light-50" style={styles.separator} />
+        <UIText size={labelSize}>{label}</UIText>
+      </UIStack>
+      <UIButton
+        style={styles.clear}
+        onPress={resetSignature}
+        disabled={disabled}
+      >
+        <UIIcon name="close" />
+      </UIButton>
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  image: { height: 250, width: '100%' },
+  signatureContainer: {
+    height: 250,
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: theme.color.neutral.light[50],
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  clear: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+  underline: {
+    position: 'absolute',
+    width: '100%',
+    paddingHorizontal: 20,
+    alignItems: 'center',
+    bottom: 20,
+  },
+  separator: {
+    opacity: 1,
+  },
+});

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  Extrapolation,
+  clamp,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { UIStack, UIText } from '../atoms';
+import { UIButton } from '../molecules';
+import { theme } from '../../../theme';
+
+type Props = React.PropsWithChildren<{
+  helperText?: string;
+  onPress?: () => void;
+}>;
+
+export const UISlideButton = ({ children, helperText, onPress }: Props) => {
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [buttonWidth, setButtonWidth] = React.useState(0);
+  const animation = useSharedValue(0);
+
+  const max = containerWidth - buttonWidth;
+
+  const buttonAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: interpolate(animation.value, [0, 1], [0, max]) },
+      ],
+    };
+  });
+
+  const labelAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        animation.value,
+        [0, 1],
+        [1, -1.5],
+        Extrapolation.CLAMP
+      ),
+    };
+  });
+
+  const pan = Gesture.Pan()
+    .onUpdate((event) => {
+      animation.value = interpolate(
+        clamp(event.translationX, 0, max),
+        [0, max],
+        [0, 1]
+      );
+    })
+    .onEnd(() => {
+      if (animation.value > 0.9) {
+        if (onPress) {
+          runOnJS(onPress)();
+        }
+      }
+      animation.value = withSpring(0, {
+        clamp: {
+          min: 0,
+        },
+      });
+    });
+
+  return (
+    <UIStack
+      style={styles.container}
+      onLayout={(event) => {
+        setContainerWidth(event.nativeEvent.layout.width);
+      }}
+    >
+      {helperText && (
+        <Animated.View style={[styles.text, labelAnimatedStyle]}>
+          <UIText weight="600">{helperText}</UIText>
+        </Animated.View>
+      )}
+      <GestureDetector gesture={pan}>
+        <Animated.View style={buttonAnimatedStyle}>
+          <UIButton
+            variant="contained"
+            style={styles.button}
+            onLayout={(event) => {
+              setButtonWidth(event.nativeEvent.layout.width);
+            }}
+          >
+            {children}
+          </UIButton>
+        </Animated.View>
+      </GestureDetector>
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.color.neutral.light['20'],
+    borderRadius: 16,
+  },
+  button: {
+    alignSelf: 'flex-start',
+  },
+  text: {
+    position: 'absolute',
+    alignSelf: 'center',
+    top: '50%',
+    transform: [{ translateY: -10 }],
+  },
+});

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

@@ -0,0 +1,21 @@
+export * from './UIForm';
+export * from './UIFormTextInput';
+export * from './UICard';
+export * from './UIFormButton';
+export * from './UIRow';
+export * from './UIComment';
+export * from './UIFormRadioInput';
+export * from './UIAppBarAction';
+export * from './UIAppBar';
+export * from './UIFormDatetimeInput';
+export * from './UIFormCheckboxInput';
+export * from './UIFormRadioInput';
+export * from './UIFormMultiselectInput';
+export * from './UIFormSelectInput';
+export * from './UIFormTextInputMask';
+export * from './UIFormCurrencyInput';
+export * from './UISlideButton';
+export * from './UISearchInput';
+export * from './UISelectChip';
+export * from './UIErrorBoundary';
+export * from './UISignature';

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

@@ -0,0 +1 @@
+export * from './request-permissions';

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

@@ -0,0 +1,115 @@
+import React from 'react';
+
+import type { PermissionManager } from '../../../data/protocols';
+import { UIActionSheet, UIButton, UIList } from '../molecules';
+import { UISeparator, UIStack, UIText } from '../atoms';
+import { StyleSheet } from 'react-native';
+import { useActionSheet } from '../../domain/utils';
+
+type Permission = {
+  value: PermissionManager.Permission;
+  option: PermissionManager.Options;
+  onAllow?: () => void;
+};
+
+type Props = {
+  permissionManager: PermissionManager;
+  permissions: Array<Permission>;
+  title?: string;
+  height?: number;
+};
+
+export const RequestPermissions = ({
+  permissionManager,
+  permissions,
+  title,
+  height,
+}: Props) => {
+  const { visible, onOpen, onClose } = useActionSheet();
+  const [pending, setPending] = React.useState<Permission[]>([]);
+
+  const check = React.useCallback(async () => {
+    const current = await Promise.all(
+      permissions.map(async (permission) => ({
+        permission,
+        state: await permissionManager.get(permission.value),
+      }))
+    );
+    setPending(
+      current
+        .filter((item) => ['denied', 'blocked'].includes(item.state))
+        .map((item) => item.permission)
+    );
+  }, [permissionManager, permissions]);
+
+  const onAllow = React.useCallback(
+    async (permission: Permission) => {
+      const result = await permissionManager.request(permission.value, {
+        title: permission.option.title,
+        message: permission.option.message,
+      });
+      if (['granted', 'limited', 'unavailable'].includes(result)) {
+        permission.onAllow?.();
+        check();
+      }
+    },
+    [check, permissionManager]
+  );
+
+  React.useEffect(() => {
+    check();
+  }, [check]);
+
+  React.useEffect(() => {
+    if (pending.length) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [pending, onClose, onOpen]);
+
+  return (
+    <UIActionSheet
+      visible={visible}
+      onRequestClose={onClose}
+      title={title ?? 'Permissões'}
+      estimatedHeight={height}
+    >
+      <UIList
+        data={pending}
+        style={{ height: height ?? 400 }}
+        contentContainerStyle={styles.container}
+        renderItem={({ item }) => (
+          <UIStack size="lg" key={item.value}>
+            <UIStack size="md">
+              <UIText size={16} weight="600">
+                {item.option.title}
+              </UIText>
+              <UIText>{item.option.message}</UIText>
+            </UIStack>
+            <UIButton
+              variant="contained"
+              color="neutral-light-20"
+              textColor="brand-violet-500"
+              onPress={() => onAllow(item)}
+            >
+              {item.option.allow ?? 'Permitir'}
+            </UIButton>
+          </UIStack>
+        )}
+        ItemSeparatorComponent={() => <UISeparator style={styles.separator} />}
+      />
+    </UIActionSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  separator: {
+    marginTop: 16,
+    marginBottom: 12,
+  },
+  container: {
+    paddingTop: 24,
+    paddingHorizontal: 24,
+  },
+});

package/src/presentation/domain/metadata/index.ts

@@ -0,0 +1,2 @@
+export * from './use-images';
+export * from './use-comments';

package/src/presentation/domain/metadata/use-comments.ts

@@ -0,0 +1,27 @@
+import type { GetCommentList } from '../../../domain/use-cases';
+import type { Storage } from '../../../data/protocols';
+import { useOfflineQuery } from '../offline';
+
+type Props = {
+  entityId?: number;
+  entityType?: string;
+  getMetadataComments: GetCommentList;
+  storage: Storage;
+};
+
+export const useComments = ({
+  entityId,
+  entityType,
+  getMetadataComments,
+  storage,
+}: Props) => {
+  return useOfflineQuery({
+    storage,
+    queryKey: ['Metadata', 'COMMENT', { entityId, entityType }],
+    queryFn: async () => {
+      if (!entityId || !entityType) return [];
+      const result = await getMetadataComments.get({ entityId, entityType });
+      return result ?? [];
+    },
+  });
+};

package/src/presentation/domain/metadata/use-images.ts

@@ -0,0 +1,27 @@
+import type { GetImageList } from '../../../domain/use-cases';
+import type { Storage } from '../../../data/protocols';
+import { useOfflineQuery } from '../offline';
+
+type Props = {
+  entityId?: number;
+  entityType?: string;
+  getMetadataImages: GetImageList;
+  storage: Storage;
+};
+
+export const useImages = ({
+  entityId,
+  entityType,
+  getMetadataImages,
+  storage,
+}: Props) => {
+  return useOfflineQuery({
+    storage,
+    queryKey: ['Metadata', 'PHOTO', { entityId, entityType }],
+    queryFn: async () => {
+      if (!entityId || !entityType) return [];
+      const result = await getMetadataImages.get({ entityId, entityType });
+      return result ?? [];
+    },
+  });
+};

package/src/presentation/domain/offline/index.ts

@@ -0,0 +1,9 @@
+export * from './use-offline-query';
+export * from './use-offline-mutation';
+export * from './use-infinite-offline-query';
+export * from './offline-mutation-queue-provider';
+export * from './use-offline-queue';
+export * from './use-offline-id';
+export * from './utils';
+export * from './types';
+export * from './use-offline-id-v2';

package/src/presentation/domain/offline/offline-mutation-queue-provider.tsx

@@ -0,0 +1,95 @@
+import React, { type PropsWithChildren } from 'react';
+import { useNetInfo } from '@react-native-community/netinfo';
+import type { OfflineMutation, OfflineMutationQueue } from '../../../infra';
+
+const OFFLINE_EXECUTION_INTERVAL_IN_MS = 10000;
+
+type Props = PropsWithChildren<{
+  queue?: OfflineMutationQueue;
+}>;
+
+type OfflineMutationQueueContextProps = {
+  executing: boolean;
+  push: (key: string, offlineMutation: OfflineMutation) => void;
+  data: OfflineMutation[];
+  size: number;
+  clear: Function;
+  refetch: () => void;
+  isLoading: boolean;
+};
+
+export const OfflineMutationQueueContext =
+  React.createContext<OfflineMutationQueueContextProps>(
+    {} as OfflineMutationQueueContextProps
+  );
+
+export const OfflineMutationQueueProvider = ({ queue, children }: Props) => {
+  const { isConnected, isInternetReachable } = useNetInfo();
+  const [queueSize, setQueueSize] = React.useState(0);
+  const [queueData, setQueueData] = React.useState<OfflineMutation[]>([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const intervalId = React.useRef<NodeJS.Timeout | undefined>(undefined);
+  const hasConnection = React.useMemo(
+    () => isConnected && isInternetReachable,
+    [isConnected, isInternetReachable]
+  );
+
+  const push = React.useCallback(
+    (key: string, offlineMutation: OfflineMutation) => {
+      if (!queue) return;
+      queue.push(key, offlineMutation);
+    },
+    [queue]
+  );
+
+  const refetch = React.useCallback(() => {
+    if (!queue) return;
+    setIsLoading(true);
+    setQueueData(queue.list());
+    setQueueSize(queue.size());
+    setIsLoading(false);
+  }, [queue]);
+
+  const clearQueueData = React.useCallback(() => {
+    if (!queue) return;
+    if (queueSize) {
+      queue.clear();
+      setQueueData([]);
+    }
+  }, [queue, queueSize]);
+
+  const clearQueueInterval = React.useCallback(() => {
+    if (intervalId.current) {
+      clearInterval(intervalId.current);
+      intervalId.current = undefined;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (!queue) return;
+    if (!intervalId.current) {
+      intervalId.current = setInterval(async () => {
+        if (hasConnection) await queue.execute();
+        setQueueSize(queue.size());
+        setQueueData(queue.list());
+      }, OFFLINE_EXECUTION_INTERVAL_IN_MS);
+    }
+    return clearQueueInterval;
+  }, [queue, clearQueueInterval, hasConnection]);
+
+  return (
+    <OfflineMutationQueueContext.Provider
+      value={{
+        executing: Boolean(intervalId.current),
+        data: queueData,
+        size: queueSize,
+        clear: clearQueueData,
+        push,
+        refetch,
+        isLoading,
+      }}
+    >
+      {children}
+    </OfflineMutationQueueContext.Provider>
+  );
+};

package/src/presentation/domain/offline/types.ts

@@ -0,0 +1,21 @@
+import type { QueryClient, QueryKey } from '@tanstack/react-query';
+import type { Storage } from '../../../data/protocols';
+import type { IsomorphicIdManager } from '../../../infra';
+
+export type Dependency = string | number | IsomorphicIdManager.IsomorphicId;
+
+export type OfflineId = string | number;
+
+export type OptimisticRollbackParams = {
+  queryKey: QueryKey;
+  queryClient: QueryClient;
+  storage?: Storage;
+};
+
+export type OptimisticUpdateParams<T> = {
+  queryKey: QueryKey;
+  queryClient: QueryClient;
+  handler: (data: T) => Promise<T>;
+  storage?: Storage;
+  fallbackData?: any;
+};