@edge-zuq/core 1.2.7

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

@@ -0,0 +1,192 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+import type { ColorValue, TextStyle, StyleProp, ViewStyle } from 'react-native';
+
+import { UIText } from '../atoms/UIText';
+import { getThemeColor, theme, type ThemeColor } from '../../../theme';
+import { UILoading } from '../atoms';
+import React from 'react';
+
+type Props = React.ComponentProps<typeof Pressable> & {
+  variant?: 'contained' | 'outlined' | 'text';
+  color?: ThemeColor;
+  textStyle?: StyleProp<TextStyle>;
+  rippleColor?: ColorValue;
+  borderless?: boolean;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  textColor?: ThemeColor;
+  loadingColor?: ThemeColor;
+  loading?: boolean;
+};
+
+const getTextColor = (
+  variant: Required<Props>['variant'],
+  disabled: boolean | null | undefined
+) => {
+  if (disabled) return 'neutral-mid-60';
+  const variantToTextColor: {
+    [key in typeof variant]: ThemeColor;
+  } = {
+    contained: 'neutral-light-00',
+    outlined: 'neutral-dark-80',
+    text: 'neutral-dark-80',
+  };
+  return variantToTextColor[variant];
+};
+
+const getRippleColor = (variant: Required<Props>['variant']) => {
+  const variantToRippleColor: {
+    [key in typeof variant]: ColorValue;
+  } = {
+    contained: 'rgba(0, 0, 0, 0.1)',
+    outlined: 'rgba(0, 0, 0, 0.05)',
+    text: 'rgba(0, 0, 0, 0.05)',
+  };
+  return variantToRippleColor[variant];
+};
+
+const getLoadingColor = (variant: Required<Props>['variant']) => {
+  const variantToRippleColor: {
+    [key in typeof variant]: ThemeColor;
+  } = {
+    contained: 'neutral-light-50',
+    outlined: 'neutral-light-50',
+    text: 'neutral-light-50',
+  };
+  return variantToRippleColor[variant];
+};
+
+export const UIButton = ({
+  children,
+  style,
+  textStyle,
+  variant = 'text',
+  color: themeColor = 'brand-violet-500',
+  borderless,
+  loading,
+  disabled,
+  loadingColor: definedLoadingColor,
+  rippleColor: definedRippleColor,
+  textColor: definedTextColor,
+  wrapperStyle: definedWrapperStyle,
+  ...props
+}: Props) => {
+  const textColor = definedTextColor || getTextColor(variant, disabled);
+  const rippleColor = definedRippleColor || getRippleColor(variant);
+  const loadingColor = definedLoadingColor || getLoadingColor(variant);
+
+  const { wrapperStyle, buttonStyle } = React.useMemo(() => {
+    if (!style) return {};
+    const {
+      borderRadius = 16,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      alignSelf,
+      margin,
+      marginTop,
+      marginVertical,
+      marginHorizontal,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      transform,
+      ...buttonStyle
+    } = StyleSheet.flatten(style) as ViewStyle;
+    return {
+      wrapperStyle: {
+        borderRadius,
+        margin,
+        marginVertical,
+        marginHorizontal,
+        marginTop,
+        marginLeft,
+        marginRight,
+        marginBottom,
+        position,
+        top,
+        bottom,
+        right,
+        left,
+        zIndex,
+        transform,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        alignSelf,
+      },
+      buttonStyle: {
+        ...buttonStyle,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        borderRadius,
+      },
+    };
+  }, [style]);
+
+  if (typeof children === 'string') {
+    children = (
+      <UIText color={textColor} align="center" weight="500" style={textStyle}>
+        {children}
+      </UIText>
+    );
+  }
+
+  return (
+    <View style={[styles.wrapper, wrapperStyle, definedWrapperStyle]}>
+      <Pressable
+        accessible
+        android_ripple={{ borderless, color: rippleColor }}
+        style={[
+          styles.common,
+          styles[variant],
+          variant === 'contained' && {
+            backgroundColor: getThemeColor(themeColor),
+          },
+          variant === 'outlined' && {
+            borderColor: getThemeColor(themeColor),
+          },
+          (disabled || loading) && styles[`${variant}-disabled`],
+          buttonStyle,
+        ]}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading ? <UILoading color={loadingColor} size={20} /> : children}
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  'common': {
+    borderRadius: 16,
+    padding: 18,
+    borderWidth: 1,
+  },
+  'wrapper': { overflow: 'hidden', borderRadius: 16 },
+  'text': {
+    borderColor: 'transparent',
+  },
+  'contained': {
+    backgroundColor: theme.color.brand.violet['500'],
+    borderColor: 'transparent',
+  },
+  'outlined': { borderColor: theme.color.neutral.light['00'], borderWidth: 1 },
+  'contained-disabled': {
+    backgroundColor: theme.color.neutral.light['10'],
+  },
+  'outlined-disabled': {
+    borderColor: '#ccc',
+  },
+  'text-disabled': {},
+});

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

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import React from 'react';
+import { UIButton } from './UIButton';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+type Props = React.ComponentProps<typeof UIButton> & {
+  bottom?: number;
+};
+
+export const UIButtonCTA = ({
+  wrapperStyle,
+  style,
+  bottom = 32,
+  ...props
+}: Props) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <UIButton
+      wrapperStyle={[
+        styles.wrapper,
+        { bottom: Math.max(insets.bottom + bottom, bottom) },
+        wrapperStyle,
+      ]}
+      style={style}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    zIndex: 24,
+    bottom: 0,
+    alignSelf: 'center',
+  },
+});

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { ColorValue } from 'react-native';
+
+import { UIIcon, UIText, UIStack } from '../atoms';
+import { UIButton } from '.';
+import { theme } from '../../../theme';
+
+type Props = Omit<React.ComponentProps<typeof UIButton>, 'color'> & {
+  label: string;
+  color?: ColorValue;
+  selected?: boolean;
+  selectedColor?: ColorValue;
+  checkboxSize?: number;
+  iconSize?: number;
+  labelSize?: number;
+  variant?: 'text' | 'contained';
+};
+
+export const UICheckboxInput = ({
+  label,
+  selected,
+  style,
+  selectedColor,
+  checkboxSize,
+  labelSize,
+  iconSize,
+  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.checkbox,
+            Boolean(color) && { borderColor: color },
+            Boolean(checkboxSize) && {
+              width: checkboxSize,
+              height: checkboxSize,
+            },
+            selected &&
+              (selectedColor
+                ? { backgroundColor: selectedColor }
+                : styles.selected),
+          ]}
+        >
+          {selected && (
+            <UIIcon
+              name="check-alt"
+              size={iconSize}
+              color={theme.color.neutral.light['10']}
+            />
+          )}
+        </View>
+        <UIText
+          weight="500"
+          size={labelSize}
+          style={[
+            Boolean(color) && { color: color },
+            selected && {
+              color: selectedColor || theme.color.brand.violet['500'],
+            },
+          ]}
+        >
+          {label}
+        </UIText>
+      </UIStack>
+    </UIButton>
+  );
+};
+
+const styles = StyleSheet.create({
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderColor: theme.color.neutral.light['50'],
+    borderWidth: 2,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
+  selected: {
+    backgroundColor: theme.color.brand.violet['500'],
+    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'],
+  },
+});

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

@@ -0,0 +1,69 @@
+import { StyleSheet, View } from 'react-native';
+import React from 'react';
+import { UIText } from '../atoms';
+import { getThemeColor, type ThemeColor } from '../../../theme';
+
+type Props = (
+  | { label: string; content?: React.ReactNode }
+  | {
+      label?: string;
+      content: React.ReactNode;
+    }
+) & {
+  color?: ThemeColor;
+  textColor?: ThemeColor;
+  borderColor?: ThemeColor;
+} & React.ComponentProps<typeof View>;
+
+export const UIChip = ({
+  label,
+  content,
+  color: themeColor = 'brand-violet-500',
+  textColor: textColor = 'neutral-light-00',
+  borderColor: themeBorderColor,
+  style,
+  ...props
+}: Props) => {
+  let contentNode: React.ReactNode = null;
+
+  const color = getThemeColor(themeColor);
+  const borderColor = getThemeColor(themeBorderColor);
+
+  if (label)
+    contentNode = (
+      <UIText color={textColor} weight="600" style={styles.label}>
+        {label}
+      </UIText>
+    );
+  if (content) contentNode = content;
+
+  return (
+    <View
+      style={[
+        styles.chip,
+        {
+          backgroundColor: color,
+          borderColor: borderColor,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {contentNode}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  chip: {
+    borderRadius: 24,
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingHorizontal: 16,
+    borderWidth: 1,
+    borderStyle: 'solid',
+  },
+  label: {
+    fontSize: 12,
+  },
+});

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

@@ -0,0 +1,43 @@
+import CurrencyInput from 'react-native-currency-input';
+import { UITextInput } from './UITextInput';
+import React from 'react';
+
+type UITextInputPropsToOmit = 'value' | 'onChangeValue';
+
+type Props = Omit<
+  React.ComponentProps<typeof UITextInput>,
+  UITextInputPropsToOmit
+> & {
+  value?: number | null;
+  onChangeValue?: (value: number | null) => void;
+  precision?: number;
+};
+
+export const UICurrencyInput = ({
+  value: valueProp,
+  onChangeValue,
+  precision = 2,
+  ...props
+}: Props) => {
+  const [value, setValue] = React.useState(valueProp ?? null);
+
+  React.useEffect(() => {
+    setValue(valueProp ?? null);
+  }, [valueProp]);
+
+  return (
+    <CurrencyInput
+      value={value}
+      onChangeValue={(value) => {
+        onChangeValue?.(value);
+        setValue(value);
+      }}
+      delimiter="."
+      separator=","
+      precision={precision}
+      renderTextInput={(textInputProps) => (
+        <UITextInput {...props} {...textInputProps} />
+      )}
+    />
+  );
+};

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

@@ -0,0 +1,30 @@
+import { FlatList, StyleSheet } from 'react-native';
+import type { FlatListProps } from 'react-native';
+import { UILoading } from '../atoms';
+
+type Props<T> = Omit<FlatListProps<T>, 'refreshing' | 'onRefresh'> & {
+  loading: boolean;
+  refreshing: boolean;
+  onRefresh: () => void;
+};
+
+export const UIDataList = <T extends any>({
+  loading,
+  showsHorizontalScrollIndicator = false,
+  showsVerticalScrollIndicator = false,
+  ...props
+}: Props<T>) => {
+  if (loading) return <UILoading style={styles.loading} />;
+
+  return (
+    <FlatList
+      showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  loading: { marginTop: 24 },
+});

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

@@ -0,0 +1,30 @@
+import { SectionList, StyleSheet } from 'react-native';
+import type { SectionListProps } from 'react-native';
+import { UILoading } from '../atoms';
+
+type Props<T> = Omit<SectionListProps<T>, 'refreshing' | 'onRefresh'> & {
+  loading: boolean;
+  refreshing: boolean;
+  onRefresh: () => void;
+};
+
+export const UIDataSectionList = <T extends any>({
+  loading,
+  showsHorizontalScrollIndicator = false,
+  showsVerticalScrollIndicator = false,
+  ...props
+}: Props<T>) => {
+  if (loading) return <UILoading style={styles.loading} />;
+
+  return (
+    <SectionList
+      showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  loading: { marginTop: 24 },
+});

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

@@ -0,0 +1,205 @@
+import React from 'react';
+import { Dimensions, Modal, StyleSheet, TextInput } from 'react-native';
+import DateTimePicker, { type DateType } from 'react-native-ui-datepicker';
+import { UITextInput } from './UITextInput';
+import { UIInputIcon } from './UIInputIcon';
+import { UIBackdrop, UIStack } from '../atoms';
+import { UIButton } from './UIButton';
+import { theme } from '../../../theme';
+
+const { width } = Dimensions.get('window');
+
+type Props = Omit<
+  React.ComponentProps<typeof UITextInput>,
+  'caretHidden' | 'value'
+> & {
+  value?: Date;
+  mode?: 'date' | 'time' | 'datetime';
+  onSelect?: (date: Date) => void;
+};
+
+export const UIDatetimeInput = ({
+  value,
+  mode = 'datetime',
+  onSelect,
+  ...props
+}: Props) => {
+  const ref = React.useRef<TextInput>(null);
+  const [date, setDate] = React.useState<DateType>(value ?? new Date());
+  const [open, setOpen] = React.useState(false);
+
+  const onOpen = () => {
+    ref?.current?.blur();
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  const onPick = (date: DateType) => {
+    setDate(date);
+  };
+
+  const onConfirm = () => {
+    onSelect?.(date as Date);
+    onClose();
+  };
+
+  const formattedDate = React.useMemo(() => {
+    if (mode === 'date') {
+      return value?.toLocaleDateString();
+    }
+    if (mode === 'time') {
+      return value?.toLocaleTimeString();
+    }
+    return value?.toLocaleString();
+  }, [mode, value]);
+
+  React.useEffect(() => {
+    setDate(value ?? new Date());
+  }, [value]);
+
+  return (
+    <>
+      <UITextInput
+        caretHidden
+        ref={ref}
+        value={formattedDate}
+        showSoftInputOnFocus={false}
+        onFocus={() => onOpen()}
+        endIcon={<UIInputIcon position="end" name="calendar" size={24} />}
+        {...props}
+      />
+      <Modal
+        transparent
+        animationType="fade"
+        visible={open}
+        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"
+              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={open} 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,
+  },
+  button: { flex: 1 },
+});