@edge-zuq/core 1.2.7

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

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../theme';
+import { UIIcon, UIStack, UIText } from '../atoms';
+import type React from 'react';
+
+type Props = React.ComponentProps<typeof UIStack> & {
+  message?: string;
+};
+
+export const UIError = ({ message, style, ...props }: Props) => {
+  if (!message) return null;
+  return (
+    <UIStack horizontal center style={[styles.error, style]} {...props}>
+      <UIText color="feedback-red-500">{message}</UIText>
+      <UIIcon name="warning" color={theme.color.feedback.red['500']} />
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  error: {
+    marginTop: 12,
+  },
+});

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

@@ -0,0 +1,85 @@
+import { ImageBackground, StyleSheet } from 'react-native';
+import { UIIcon, UIStack, UIText } from '../atoms';
+import { UIButton } from './UIButton';
+import { theme } from '../../../theme';
+import React from 'react';
+
+type Props = React.ComponentProps<typeof ImageBackground> & {
+  uri: string;
+  removable?: boolean;
+  errorMessage?: boolean;
+  onRemove?: () => void;
+};
+
+export const UIImage = ({
+  uri,
+  style,
+  imageStyle,
+  onRemove,
+  removable,
+  onError,
+  errorMessage,
+  ...props
+}: Props) => {
+  const [hasError, setHasError] = React.useState(false);
+
+  return (
+    <ImageBackground
+      resizeMode="contain"
+      style={[styles.image, style]}
+      imageStyle={[styles.image, imageStyle]}
+      source={{
+        uri,
+      }}
+      onError={(event) => {
+        setHasError(Boolean(event.nativeEvent.error));
+        onError?.(event);
+      }}
+      {...props}
+    >
+      {hasError && (
+        <UIStack style={styles.error} flex={1}>
+          <UIText align="center">
+            {errorMessage ?? 'Erro ao carregar imagem'}
+          </UIText>
+          <UIIcon name="x-circle" />
+        </UIStack>
+      )}
+      {removable && (
+        <UIButton
+          variant="contained"
+          color="feedback-red-500"
+          style={styles.button}
+          onPress={onRemove}
+        >
+          <UIStack horizontal center style={styles.remove}>
+            <UIIcon name="trash" color={theme.color.neutral.light['00']} />
+            <UIText color="neutral-light-00" size={12}>
+              Remover
+            </UIText>
+          </UIStack>
+        </UIButton>
+      )}
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: { borderRadius: 8, width: 120, height: 120 },
+  wrapper: {},
+  button: {
+    paddingTop: 2,
+    paddingBottom: 4,
+    paddingHorizontal: 12,
+    borderRadius: 0,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    marginTop: 'auto',
+  },
+  remove: { marginHorizontal: 'auto' },
+  error: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 5,
+  },
+});

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

@@ -0,0 +1,244 @@
+import React from 'react';
+import { Dimensions, Modal, StyleSheet } from 'react-native';
+import DateTimePicker, { type DateType } from 'react-native-ui-datepicker';
+import { UIBackdrop, UIIcon, UIStack, UIText } from '../atoms';
+import { UIButton } from './UIButton';
+import { theme } from '../../../theme';
+import { useActionSheet } from '../../domain/utils';
+import moment from 'moment';
+
+const { width } = Dimensions.get('window');
+
+type Props = {
+  label: string;
+  value?: Date;
+  mode?: 'date' | 'time' | 'datetime';
+  onSelect?: (date: Date) => void;
+  labelStyle?: React.ComponentProps<typeof UIText>['style'];
+  textSize?: number;
+  maximumDate?: Date;
+  minimumDate?: Date;
+};
+
+export const UIInlineDatePicker = ({
+  label,
+  value,
+  mode = 'datetime',
+  onSelect,
+  labelStyle,
+  textSize = 16,
+  maximumDate,
+  minimumDate,
+}: Props) => {
+  const [date, setDate] = React.useState<DateType>(value ?? new Date());
+  const { visible, onOpen, onClose } = useActionSheet();
+
+  const onPick = (date: DateType) => {
+    setDate(date);
+  };
+
+  const onConfirm = () => {
+    onSelect?.(date as Date);
+    onClose();
+  };
+
+  const formattedDate = React.useMemo(() => {
+    if (mode === 'date') {
+      return moment(value as Date).calendar(undefined, {
+        sameDay: '[Hoje]',
+        lastDay: '[Ontem]',
+        nextDay: 'DD/MM/YYYY',
+        nextWeek: 'DD/MM/YYYY',
+        lastWeek: 'DD/MM/YYYY',
+        sameElse: 'DD/MM/YYYY',
+      });
+    }
+    if (mode === 'time') {
+      return moment(value as Date).calendar(undefined, {
+        sameDay: 'HH:mm',
+        lastDay: 'HH:mm',
+        nextDay: 'HH:mm',
+        nextWeek: 'HH:mm',
+        lastWeek: 'HH:mm',
+        sameElse: 'HH:mm',
+      });
+    }
+    return moment(value as Date).calendar(undefined, {
+      sameDay: '[Hoje]',
+      lastDay: '[Ontem]',
+      nextDay: 'DD/MM/YYYY HH:mm',
+      nextWeek: 'DD/MM/YYYY HH:mm',
+      lastWeek: 'DD/MM/YYYY HH:mm',
+      sameElse: 'DD/MM/YYYY HH:mm',
+    });
+  }, [mode, value]);
+
+  React.useEffect(() => {
+    setDate(value ?? new Date());
+  }, [value]);
+
+  return (
+    <>
+      <UIButton
+        onPress={onOpen}
+        color="neutral-light-10"
+        variant="contained"
+        style={styles.selector}
+      >
+        <UIStack horizontal center size="md">
+          <UIIcon
+            name="calendar-alt"
+            size={14}
+            color={theme.color.neutral.dark[80]}
+          />
+          <UIText size={textSize} weight="500" style={labelStyle}>
+            {label} {formattedDate}
+          </UIText>
+        </UIStack>
+      </UIButton>
+      <Modal
+        transparent
+        animationType="fade"
+        visible={visible}
+        onRequestClose={onClose}
+      >
+        <UIStack center justify="center" flex={1} style={styles.modal}>
+          <UIStack style={styles.content}>
+            <DateTimePicker
+              mode="single"
+              timePicker={mode.includes('time')}
+              navigationPosition="right"
+              date={date}
+              locale="pt-BR"
+              weekdaysFormat="short"
+              maxDate={maximumDate}
+              minDate={minimumDate}
+              onChange={({ date }) => {
+                onPick(date);
+              }}
+              styles={datePickerStyles}
+            />
+            <UIStack horizontal center>
+              <UIButton onPress={onClose} wrapperStyle={styles.button}>
+                Cancelar
+              </UIButton>
+              <UIButton
+                variant="contained"
+                onPress={onConfirm}
+                wrapperStyle={styles.button}
+              >
+                Confirmar
+              </UIButton>
+            </UIStack>
+          </UIStack>
+        </UIStack>
+        <UIBackdrop visible={visible} onPress={onClose} />
+      </Modal>
+    </>
+  );
+};
+
+const datePickerStyles: React.ComponentProps<typeof DateTimePicker>['styles'] =
+  {
+    today: {
+      borderWidth: 1,
+      borderColor: theme.color.neutral.light['50'],
+      borderRadius: 50,
+    },
+    button_prev: {
+      borderRadius: 20,
+      padding: 10,
+      backgroundColor: theme.color.brand.violet['500'],
+    },
+    button_prev_image: {
+      tintColor: theme.color.neutral.light['00'],
+    },
+    button_next: {
+      borderRadius: 20,
+      padding: 10,
+      backgroundColor: theme.color.brand.violet['500'],
+    },
+    button_next_image: {
+      tintColor: theme.color.neutral.light['00'],
+    },
+    selected: {
+      borderRadius: 50,
+      backgroundColor: theme.color.brand.violet['500'],
+    },
+    selected_label: {
+      color: theme.color.neutral.light['00'],
+    },
+    day_cell: {
+      width: 47,
+    },
+    month_selector: {
+      minWidth: 60,
+      paddingVertical: 4,
+      alignItems: 'center',
+      backgroundColor: '#f3f3f3',
+      paddingHorizontal: 10,
+      borderRadius: 4,
+    },
+    year_selector: {
+      paddingVertical: 4,
+      minWidth: 60,
+      backgroundColor: '#f3f3f3',
+      paddingHorizontal: 10,
+      borderRadius: 4,
+    },
+    time_selector: {
+      paddingVertical: 4,
+      fontFamily: theme.font.weight.medium,
+      backgroundColor: '#f3f3f3',
+      paddingHorizontal: 10,
+      borderRadius: 4,
+    },
+    year_selector_label: {
+      fontFamily: theme.font.weight.medium,
+      fontSize: 13,
+    },
+    time_selector_label: {
+      fontFamily: theme.font.weight.medium,
+      fontSize: 13,
+    },
+    month_selector_label: {
+      textTransform: 'capitalize',
+      fontFamily: theme.font.weight.medium,
+      fontSize: 13,
+    },
+    weekday_label: {
+      fontFamily: theme.font.weight.medium,
+      fontSize: 13,
+      textTransform: 'uppercase',
+    },
+    day_label: {
+      fontFamily: theme.font.weight.medium,
+      fontSize: 13,
+    },
+  };
+
+const styles = StyleSheet.create({
+  modal: {
+    paddingHorizontal: 20,
+  },
+  content: {
+    backgroundColor: '#fff',
+    padding: 12,
+    borderRadius: 10,
+    zIndex: 11,
+    minWidth: width - 40,
+  },
+  value: {
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+  },
+  label: {
+    textDecorationLine: 'underline',
+  },
+  button: { flex: 1 },
+  selector: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 16,
+  },
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { UIIcon } from '../atoms';
+import { theme } from '../../../theme';
+
+type Props = React.ComponentProps<typeof UIIcon> & {
+  position: 'start' | 'end';
+  focused?: boolean;
+};
+
+export const UIInputIcon = ({ position, focused, color, ...props }: Props) => {
+  return (
+    <View
+      style={[styles.container, focused && styles.focused, styles[position]]}
+    >
+      <UIIcon
+        color={focused ? theme.color.brand.violet['500'] : color}
+        {...props}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  start: {
+    paddingLeft: 8,
+  },
+  end: {
+    paddingRight: 8,
+  },
+  focused: {
+    borderColor: theme.color.brand.violet['500'],
+  },
+});

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

@@ -0,0 +1,17 @@
+import { FlatList, type FlatListProps } from 'react-native';
+
+type Props<T> = FlatListProps<T>;
+
+export const UIList = <T extends any>({
+  showsHorizontalScrollIndicator = false,
+  showsVerticalScrollIndicator = false,
+  ...props
+}: Props<T>) => {
+  return (
+    <FlatList
+      showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,97 @@
+import { StyleSheet, View } from 'react-native';
+import type { ColorValue } from 'react-native';
+import { UIButton } from './UIButton';
+import { UIText, UIStack } from '../atoms';
+import { theme } from '../../../theme';
+
+type Props = Omit<React.ComponentProps<typeof UIButton>, 'color'> & {
+  label: string;
+  color?: ColorValue;
+  selected?: boolean;
+  selectedColor?: ColorValue;
+  variant?: 'text' | 'contained';
+};
+
+export const UIRadioInput = ({
+  label,
+  selected,
+  style,
+  selectedColor,
+  color,
+  variant = 'text',
+  ...props
+}: Props) => {
+  return (
+    <UIButton
+      style={[
+        styles.button,
+        variant === 'contained' && selected && styles.contained,
+        style as any,
+      ]}
+      {...props}
+    >
+      <UIStack horizontal center>
+        <View
+          style={[
+            styles.radio,
+            Boolean(color) && { borderColor: color },
+            selected &&
+              (selectedColor
+                ? { borderColor: selectedColor }
+                : styles.selected),
+          ]}
+        >
+          {selected && (
+            <View
+              style={[
+                styles.dot,
+                Boolean(selectedColor) && { backgroundColor: selectedColor },
+              ]}
+            />
+          )}
+        </View>
+        <UIText
+          weight="500"
+          style={[
+            Boolean(color) && { color: color },
+            selected && {
+              color: selectedColor || theme.color.brand.violet['500'],
+            },
+            styles.label,
+          ]}
+        >
+          {label}
+        </UIText>
+      </UIStack>
+    </UIButton>
+  );
+};
+
+const styles = StyleSheet.create({
+  radio: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderColor: theme.color.neutral.light['50'],
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
+  selected: {
+    borderColor: theme.color.brand.violet['500'],
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: theme.color.brand.violet['500'],
+  },
+  button: { paddingHorizontal: 16, paddingVertical: 12, borderRadius: 8 },
+  contained: {
+    backgroundColor: theme.color.neutral.light['10'],
+  },
+  label: {
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,17 @@
+import { SectionList, type SectionListProps } from 'react-native';
+
+type Props<T> = SectionListProps<T>;
+
+export const UISectionList = <T extends any>({
+  showsHorizontalScrollIndicator = false,
+  showsVerticalScrollIndicator = false,
+  ...props
+}: Props<T>) => {
+  return (
+    <SectionList
+      showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { UIStack } from '../atoms';
+
+type Props = {
+  circle?: boolean;
+  width: number;
+  height: number;
+};
+
+export const UISkeleton = ({ width, height, circle }: Props) => {
+  const translateX = useSharedValue(0);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: interpolate(translateX.value, [0, 1], [-width, width]) },
+      ],
+    };
+  });
+
+  React.useEffect(() => {
+    translateX.value = withRepeat(withTiming(1, { duration: 1200 }), -1);
+    return () => {
+      cancelAnimation(translateX);
+    };
+  }, [translateX]);
+
+  return (
+    <UIStack
+      style={[
+        styles.skeleton,
+        { width, height, borderRadius: circle ? width / 2 : 2 },
+      ]}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            width: 0.9 * width,
+            height,
+            opacity: 0.125,
+            borderRadius: circle ? width / 2 : 2,
+            backgroundColor: '#000',
+          },
+        ]}
+      />
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  skeleton: {
+    backgroundColor: '#000',
+    opacity: 0.1,
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+});

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

@@ -0,0 +1,72 @@
+import { StyleSheet } from 'react-native';
+import React from 'react';
+
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { theme } from '../../../theme';
+import { UIStack } from '../atoms';
+
+type Props = {
+  selected?: boolean;
+  barColor?: string;
+  selectedBarColor?: string;
+  dotColor?: string;
+  selectedDotColor?: string;
+};
+
+export const UISwitch = ({
+  selected,
+  barColor = theme.color.neutral.light['50'],
+  selectedBarColor = theme.color.brand.violet['500'],
+  dotColor = '#fff',
+  selectedDotColor = '#fff',
+}: Props) => {
+  const isSelected = useSharedValue(Boolean(selected));
+
+  const barStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: withTiming(
+        isSelected.value ? selectedBarColor : barColor
+      ),
+    };
+  }, [barColor, selectedBarColor]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: isSelected.value ? selectedDotColor : dotColor,
+      transform: [{ translateX: withTiming(isSelected.value ? 16 : 4) }],
+    };
+  }, [dotColor, selectedDotColor]);
+
+  React.useEffect(() => {
+    isSelected.value = Boolean(selected);
+  }, [isSelected, selected]);
+
+  return (
+    <UIStack horizontal center spacing={0} style={styles.switchContainer}>
+      <Animated.View style={[styles.switchBar, barStyle]} />
+      <Animated.View style={[styles.switchDot, animatedStyle]} />
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  switchContainer: { width: 33, overflow: 'visible' },
+  switchBar: {
+    width: 30,
+    height: 17,
+    backgroundColor: theme.color.neutral.light['50'],
+    borderRadius: 50,
+  },
+  switchDot: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 10,
+    height: 10,
+    borderRadius: 9,
+  },
+});