@edge-zuq/core 1.2.7

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { UIIcon, UIText } from '../atoms';
+import { theme } from '../../../theme';
+import { UIButton, UIInputIcon } from '.';
+
+type Props = React.ComponentProps<typeof TextInput> & {
+  variant?: 'contained' | 'outlined' | 'underline';
+  startIcon?: React.ReactElement<React.ComponentProps<typeof UIInputIcon>>;
+  endIcon?: React.ReactElement<React.ComponentProps<typeof UIInputIcon>>;
+  label?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  wrapperStyle?: StyleProp<ViewStyle>;
+};
+
+export const UITextInput = React.forwardRef<TextInput, Props>(
+  (
+    {
+      label,
+      style,
+      onFocus,
+      onBlur,
+      variant = 'contained',
+      startIcon,
+      endIcon,
+      containerStyle,
+      secureTextEntry,
+      wrapperStyle,
+      editable = true,
+      value,
+      ...props
+    },
+    ref
+  ) => {
+    const [hidden, setHidden] = React.useState(secureTextEntry);
+    const [focused, setFocused] = React.useState(false);
+
+    const toggleHidden = () => setHidden((value) => !value);
+
+    return (
+      <View style={wrapperStyle}>
+        {label && (
+          <UIText
+            weight="700"
+            variant="label"
+            style={[styles.label, focused && styles.labelFocused]}
+          >
+            {label}
+          </UIText>
+        )}
+        <View
+          style={[
+            styles.common,
+            focused && styles.focused,
+            Boolean(startIcon) && styles.startIcon,
+            Boolean(endIcon) && styles.endIcon,
+            styles[variant],
+            containerStyle,
+          ]}
+        >
+          {startIcon && React.cloneElement(startIcon, { focused })}
+          <TextInput
+            accessible
+            ref={ref}
+            secureTextEntry={hidden}
+            value={value}
+            placeholderTextColor={theme.color.neutral.mid['60']}
+            selectionColor={theme.color.brand.violet['500']}
+            editable={editable}
+            style={[
+              styles.input,
+              variant === 'underline' && styles.inputUnderline,
+              !editable && Boolean(value) && styles.disabled,
+              Boolean(startIcon) && styles.startIcon,
+              Boolean(endIcon) && styles.endIcon,
+              style,
+            ]}
+            onFocus={(e) => {
+              setFocused(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              setFocused(false);
+              onBlur?.(e);
+            }}
+            {...props}
+          />
+          {secureTextEntry && (
+            <UIButton borderless style={styles.hidden} onPress={toggleHidden}>
+              <UIIcon name={hidden ? 'eye' : 'eye-off'} />
+            </UIButton>
+          )}
+          {endIcon && React.cloneElement(endIcon, { focused })}
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  input: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 14,
+    color: '#555',
+    flex: 1,
+  },
+  inputUnderline: {
+    paddingHorizontal: 0,
+  },
+  startIcon: {
+    paddingLeft: 12,
+  },
+  endIcon: {
+    paddingRight: 12,
+  },
+  common: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    borderRadius: 8,
+    alignItems: 'center',
+    minHeight: 40,
+  },
+  label: {
+    color: theme.color.neutral.dark['80'],
+    marginBottom: theme.spacing.md,
+    fontWeight: '600',
+  },
+  labelFocused: {
+    color: theme.color.brand.violet['500'],
+  },
+  focused: {
+    borderColor: theme.color.brand.violet['500'],
+    borderBottomColor: theme.color.brand.violet['500'],
+  },
+  contained: {
+    backgroundColor: theme.color.neutral.light['05'],
+    borderBottomColor: theme.color.neutral.light['50'],
+    borderBottomWidth: 1,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  underline: {
+    borderRadius: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.color.neutral.light['50'],
+    paddingLeft: 0,
+  },
+  outlined: { borderWidth: 1, borderColor: theme.color.neutral.light['50'] },
+  hidden: {
+    padding: 4,
+    paddingTop: 6,
+    marginRight: 4,
+  },
+  disabled: {
+    color: theme.color.brand.violet['500'],
+    fontWeight: '700',
+  },
+});

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, TextInput, ViewStyle } from 'react-native';
+import MaskInput, { type Mask } from 'react-native-mask-input';
+import { UIIcon, UIText } from '../atoms';
+import { theme } from '../../../theme';
+import { UIButton, UIInputIcon } from '.';
+
+type Props = React.ComponentProps<typeof MaskInput> & {
+  variant?: 'contained' | 'outlined' | 'underline';
+  startIcon?: React.ReactElement<React.ComponentProps<typeof UIInputIcon>>;
+  endIcon?: React.ReactElement<React.ComponentProps<typeof UIInputIcon>>;
+  label?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  mask?: Mask;
+};
+
+export const UITextInputMask = React.forwardRef<TextInput, Props>(
+  (
+    {
+      label,
+      style,
+      onFocus,
+      onBlur,
+      variant = 'contained',
+      startIcon,
+      endIcon,
+      containerStyle,
+      secureTextEntry,
+      wrapperStyle,
+      mask,
+      value,
+      editable = true,
+      ...props
+    },
+    ref
+  ) => {
+    const [hidden, setHidden] = React.useState(secureTextEntry);
+    const [focused, setFocused] = React.useState(false);
+
+    const toggleHidden = () => setHidden((value) => !value);
+
+    return (
+      <View style={wrapperStyle}>
+        {label && (
+          <UIText
+            weight="700"
+            variant="label"
+            style={[styles.label, focused && styles.labelFocused]}
+          >
+            {label}
+          </UIText>
+        )}
+        <View
+          style={[
+            styles.common,
+            focused && styles.focused,
+            styles[variant],
+            containerStyle,
+          ]}
+        >
+          {startIcon && React.cloneElement(startIcon, { focused })}
+          <MaskInput
+            ref={ref}
+            value={value}
+            secureTextEntry={hidden}
+            placeholderTextColor={theme.color.neutral.mid['60']}
+            selectionColor={theme.color.brand.violet['500']}
+            editable={editable}
+            style={[
+              styles.input,
+              variant === 'underline' && styles.inputUnderline,
+              Boolean(startIcon) && styles.startIcon,
+              Boolean(endIcon) && styles.endIcon,
+              !editable && Boolean(value) && styles.disabled,
+              style,
+            ]}
+            onFocus={(e) => {
+              setFocused(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              setFocused(false);
+              onBlur?.(e);
+            }}
+            mask={mask}
+            {...props}
+          />
+          {secureTextEntry && (
+            <UIButton borderless style={styles.hidden} onPress={toggleHidden}>
+              <UIIcon name={hidden ? 'eye' : 'eye-off'} />
+            </UIButton>
+          )}
+          {endIcon && React.cloneElement(endIcon, { focused })}
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  input: {
+    paddingHorizontal: 16,
+    fontSize: 14,
+    color: '#555',
+    flex: 1,
+  },
+  inputUnderline: {
+    paddingHorizontal: 0,
+  },
+  startIcon: {
+    paddingLeft: 8,
+  },
+  endIcon: {
+    paddingRight: 8,
+  },
+  common: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    borderRadius: 8,
+    alignItems: 'center',
+    minHeight: 40,
+  },
+  label: {
+    color: theme.color.neutral.dark['80'],
+    marginBottom: theme.spacing.md,
+    fontWeight: '600',
+  },
+  labelFocused: {
+    color: theme.color.brand.violet['500'],
+  },
+  focused: {
+    borderColor: theme.color.brand.violet['500'],
+    borderBottomColor: theme.color.brand.violet['500'],
+  },
+  contained: {
+    backgroundColor: theme.color.neutral.light['05'],
+    borderBottomColor: theme.color.neutral.light['50'],
+    borderBottomWidth: 1,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  underline: {
+    borderRadius: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.color.neutral.light['50'],
+    paddingLeft: 0,
+  },
+  outlined: { borderWidth: 1, borderColor: theme.color.neutral.light['50'] },
+  hidden: {
+    padding: 4,
+    paddingTop: 6,
+    marginRight: 4,
+  },
+  disabled: {
+    color: theme.color.brand.violet['500'],
+    fontWeight: '700',
+  },
+});

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

@@ -0,0 +1,20 @@
+export * from './UITextInput';
+export * from './UIButton';
+export * from './UIActionSheet';
+export * from './UIRadioInput';
+export * from './UIInputIcon';
+export * from './UIChip';
+export * from './UICheckboxInput';
+export * from './UIList';
+export * from './UIImage';
+export * from './UIDataList';
+export * from './UIDatetimeInput';
+export * from './UISwitch';
+export * from './UITextInputMask';
+export * from './UISkeleton';
+export * from './UIError';
+export * from './UICurrencyInput';
+export * from './UIButtonCTA';
+export * from './UIDataSectionList';
+export * from './UISectionList';
+export * from './UIInlineDatePicker';

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

@@ -0,0 +1,103 @@
+import {
+  StyleSheet,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { UIIcon, UIStack, UIText } from '../atoms';
+import { UIButton } from '../molecules';
+import { theme } from '../../../theme';
+import { useNetInfo } from '@react-native-community/netinfo';
+
+type Props = React.ComponentProps<typeof UIStack> & {
+  title: string;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  variant?: 'left' | 'center';
+  wrapperStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+export const UIAppBar = ({
+  left,
+  right,
+  title,
+  variant = 'left',
+  style,
+  wrapperStyle,
+  titleStyle,
+  ...props
+}: Props) => {
+  const { isConnected } = useNetInfo();
+
+  const withBasePadding = !left && !right;
+
+  if (variant === 'center') {
+    if (!left) left = <UIButton disabled style={styles.empty} />;
+    if (!right) right = <UIButton disabled style={styles.empty} />;
+  }
+
+  return (
+    <UIStack style={[styles.wrapper, wrapperStyle]}>
+      <UIStack
+        horizontal
+        center
+        style={[styles.container, withBasePadding && styles.basePadding, style]}
+        {...props}
+      >
+        <UIStack style={variant !== 'left' && styles.left}>{left}</UIStack>
+        <UIText weight="600" align="center" style={[styles.title, titleStyle]}>
+          {title}
+        </UIText>
+        <UIStack style={styles.right}>{right}</UIStack>
+      </UIStack>
+      {isConnected === false && (
+        <UIStack
+          horizontal
+          center
+          justify="center"
+          style={styles.offlineContainer}
+        >
+          <UIIcon name="no-wifi" color={theme.color.feedback.red['500']} />
+          <UIText color="feedback-red-500">Sem conexão</UIText>
+        </UIStack>
+      )}
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    backgroundColor: theme.color.neutral.light['00'],
+  },
+  title: {
+    marginHorizontal: 4,
+    fontSize: 16,
+    flexShrink: 1,
+  },
+  basePadding: {
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+  },
+  offlineContainer: {
+    backgroundColor: theme.color.feedback.red['50'],
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  wrapper: {
+    paddingBottom: 6,
+    backgroundColor: '#fff',
+  },
+  left: {
+    marginRight: 'auto',
+  },
+  right: {
+    marginLeft: 'auto',
+  },
+  empty: {
+    padding: 12,
+    paddingHorizontal: 24,
+  },
+});

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

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { UIButton } from '../molecules';
+import type React from 'react';
+
+type Props = React.ComponentProps<typeof UIButton>;
+
+export const UIAppBarAction = ({ style, ...props }: Props) => {
+  return (
+    <UIButton borderless style={[styles.button, style as any]} {...props} />
+  );
+};
+
+const styles = StyleSheet.create({ button: { padding: 12 } });

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

@@ -0,0 +1,48 @@
+import { Platform, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { UIButton } from '../molecules';
+
+type Props = Parameters<typeof UIButton>[number] & {
+  pressable?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const UICard = ({
+  style,
+  children,
+  pressable,
+  disabled,
+  ...props
+}: Props) => {
+  return (
+    <UIButton
+      disabled={!pressable || disabled}
+      style={[styles.common, styles.card, style]}
+      {...props}
+    >
+      {children}
+    </UIButton>
+  );
+};
+
+const styles = StyleSheet.create({
+  common: {
+    borderRadius: 8,
+  },
+  card: {
+    backgroundColor: '#fff',
+    shadowColor: '#808080',
+    margin: 4,
+    ...Platform.select<ViewStyle>({
+      android: { elevation: 3 },
+      ios: {
+        shadowOffset: {
+          width: -2,
+          height: 4,
+        },
+        shadowRadius: 3,
+        shadowOpacity: 0.8,
+      },
+    }),
+  },
+});

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

@@ -0,0 +1,64 @@
+import { StyleSheet, Image } from 'react-native';
+import { UIIcon, UIStack, UIText } from '../atoms';
+
+import { formatDistanceToNow } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+import { theme } from '../../../theme';
+
+type Props = {
+  name: string;
+  comment: string;
+  picture?: string;
+  date?: Date;
+};
+
+export const UIComment = ({ name, comment, picture, date }: Props) => {
+  return (
+    <UIStack style={styles.container}>
+      <UIStack horizontal center size="md">
+        {picture ? (
+          <Image source={{ uri: picture }} style={styles.user} />
+        ) : (
+          <UIStack center style={styles.user}>
+            <UIIcon
+              name="user"
+              size={24}
+              color={theme.color.brand.violet['500']}
+            />
+          </UIStack>
+        )}
+        <UIStack flex={1}>
+          <UIStack horizontal center size="md">
+            <UIText weight="500" size={12}>
+              {name}
+            </UIText>
+            {date && (
+              <UIText size={12} color="neutral-mid-60">
+                {formatDistanceToNow(date, {
+                  addSuffix: true,
+                  locale: ptBR,
+                })}
+              </UIText>
+            )}
+          </UIStack>
+          <UIText variant="body" color="neutral-mid-60">
+            {comment}
+          </UIText>
+        </UIStack>
+      </UIStack>
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  user: {
+    backgroundColor: theme.color.neutral.light['10'],
+    borderRadius: 20,
+    justifyContent: 'center',
+    height: 40,
+    width: 40,
+  },
+  container: {
+    paddingVertical: 8,
+  },
+});

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import ErrorBoundary, {
+  type FallbackComponentProps,
+} from 'react-native-error-boundary';
+import { UIPage, UIStack, UIText } from '../atoms';
+import { UIAppBar } from './UIAppBar';
+import { UIButton } from '../molecules';
+import { StyleSheet } from 'react-native';
+import { useMutation } from '@tanstack/react-query';
+
+type Props = React.PropsWithChildren<{
+  onRecordError: (error: Error, stackTrace: string) => void;
+  onSendDiagnostics: (error: Error) => Promise<void>;
+  onResetError: () => Promise<void>;
+}>;
+
+export const UIErrorBoundary = ({
+  onRecordError,
+  onSendDiagnostics,
+  onResetError,
+  children,
+}: Props) => {
+  const sendDiagnostic = useMutation({
+    mutationFn: onSendDiagnostics,
+  });
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={({ error, resetError }: FallbackComponentProps) => (
+        <UIPage appBar={<UIAppBar variant="center" title="Erro inesperado" />}>
+          <UIStack flex={1} justify="space-between" style={styles.container}>
+            <UIStack>
+              <UIText variant="subtitle">Sentimos muito :{'('}</UIText>
+              <UIText color="neutral-mid-60">
+                Um erro inesperado aconteceu no nosso app, gostaria de enviar um
+                diagnóstico para que possamos corrigir o problema?
+              </UIText>
+            </UIStack>
+            <UIStack>
+              <UIButton
+                onPress={async () => {
+                  await onResetError();
+                  resetError();
+                }}
+              >
+                Limpar erro
+              </UIButton>
+              <UIButton
+                variant="contained"
+                loading={sendDiagnostic.isPending}
+                onPress={async () => {
+                  await sendDiagnostic.mutateAsync(error);
+                }}
+              >
+                Enviar diagnóstico
+              </UIButton>
+            </UIStack>
+          </UIStack>
+        </UIPage>
+      )}
+      onError={onRecordError}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingBottom: 32,
+  },
+});