@edge-zuq/core 1.2.7

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { FormProvider, useForm } from 'react-hook-form';
+import type { UseFormReturn } from 'react-hook-form';
+import { UIIcon, UIText, UIStack } from '../atoms';
+import { theme } from '../../../theme';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { yup } from '../../domain/utils';
+
+const defaultSchema = yup.object();
+
+const getValueOrFallback = (value?: any, fallback?: any) => {
+  if (!value || !Object.keys(value ?? {}).length) return fallback;
+  return value;
+};
+
+type Props = React.ComponentProps<typeof View> & {
+  defaultValues?: any;
+  schema?: any;
+  errorProps?: React.ComponentProps<typeof UIStack>;
+  form?: UseFormReturn;
+};
+
+export const UIForm = ({
+  defaultValues,
+  schema,
+  children,
+  errorProps,
+  form,
+  ...props
+}: Props) => {
+  const {
+    formState: { errors: errorsBase, isDirty: isDirtyBase, ...formBaseState },
+    ...formBase
+  } = useForm({
+    defaultValues: defaultValues ?? {},
+    resolver: yupResolver(schema ?? defaultSchema),
+  });
+
+  const {
+    formState: { errors: errorsProp, isDirty: isDirtyProp, ...formPropState },
+    ...formProp
+  } = (form ?? {
+    formState: {},
+  }) as UseFormReturn;
+
+  const { style, ...error } = errorProps ?? {};
+
+  const formProviderProps = {
+    ...getValueOrFallback(formProp, formBase),
+    formState: {
+      errors: getValueOrFallback(errorsProp, errorsBase),
+      isDirty: getValueOrFallback(isDirtyProp, isDirtyBase),
+      ...getValueOrFallback(formPropState, formBaseState),
+    },
+  };
+
+  const errors = errorsProp ?? errorsBase;
+
+  return (
+    <FormProvider {...formProviderProps}>
+      <View {...props}>
+        {children}
+        {errors['_formError']?.message?.toString() && (
+          <UIStack horizontal center style={[styles.error, style]} {...error}>
+            <UIText color="feedback-red-500">
+              {errors['_formError']?.message.toString()}
+            </UIText>
+            <UIIcon name="warning" color={theme.color.feedback.red['500']} />
+          </UIStack>
+        )}
+      </View>
+    </FormProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  error: {
+    marginTop: 12,
+  },
+});

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { UIButton } from '../molecules';
+import { type SubmitHandler, useFormContext } from 'react-hook-form';
+import { KeyboardController } from 'react-native-keyboard-controller';
+
+type Props = Omit<React.ComponentProps<typeof UIButton>, 'onPress'> & {
+  onSubmit: SubmitHandler<any>;
+  getErrorMessage?: (e: any, setError: Function) => string | void;
+  resetFormOnSubmit?: boolean;
+};
+
+export const UIFormButton = ({
+  onSubmit,
+  getErrorMessage,
+  resetFormOnSubmit = true,
+  ...props
+}: Props) => {
+  const { handleSubmit, setError, clearErrors, reset } = useFormContext();
+
+  const onPress = handleSubmit(
+    async (values) => {
+      try {
+        await KeyboardController.dismiss({ animated: false, keepFocus: false });
+        clearErrors('_formError');
+        await onSubmit(values);
+        if (resetFormOnSubmit) reset();
+      } catch (e) {
+        const errorMessage = getErrorMessage?.(e, setError);
+        if (errorMessage) setError('_formError', { message: errorMessage });
+      }
+    },
+    () => {
+      KeyboardController.dismiss();
+    }
+  );
+
+  return <UIButton onPress={() => onPress()} {...props} />;
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { UICheckboxInput } from '../molecules';
+import { useController, useFormContext } from 'react-hook-form';
+
+type Props = Omit<React.ComponentProps<typeof UICheckboxInput>, 'selected'> & {
+  name: string;
+  value: string;
+};
+
+export const UIFormCheckboxInput = ({
+  name,
+  value,
+  onPress,
+  ...props
+}: Props) => {
+  const { control } = useFormContext();
+
+  const { field } = useController({ control, name });
+
+  return (
+    <UICheckboxInput
+      onPress={(e) => {
+        onPress?.(e);
+        const { value: current, onChange } = field;
+        if (current?.includes(value)) {
+          onChange(current?.filter((item: string) => item !== value));
+        } else {
+          onChange([...(current ?? []), value]);
+        }
+      }}
+      selected={field.value?.includes(value)}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { UICurrencyInput } from '../molecules';
+import { useController, useFormContext } from 'react-hook-form';
+import { theme } from '../../../theme';
+import { UIIcon, UIText, UIStack } from '../atoms';
+import { StyleSheet, type TextInput } from 'react-native';
+
+type Props = React.ComponentProps<typeof UICurrencyInput> & {
+  name: string;
+  formContainerStyle?: React.ComponentProps<typeof UIStack>['style'];
+};
+
+export const UIFormCurrencyInput = React.forwardRef<TextInput, Props>(
+  (
+    { name, containerStyle, formContainerStyle, onChangeValue, ...props },
+    ref
+  ) => {
+    const [value, setValue] = React.useState<number | null>(null);
+    const {
+      control,
+      formState: { errors },
+    } = useFormContext();
+    const { field } = useController({ name, control });
+
+    const hasError = Boolean(errors[name]);
+
+    React.useEffect(() => {
+      setValue(Number(field.value));
+    }, [field.value]);
+
+    return (
+      <UIStack style={[styles.container, formContainerStyle]}>
+        <UICurrencyInput
+          ref={ref}
+          value={value}
+          onChangeValue={(value) => {
+            field.onChange(String(value ?? ''));
+            onChangeValue?.(value);
+          }}
+          containerStyle={[
+            hasError && {
+              borderColor: theme.color.feedback.red['500'],
+            },
+            containerStyle,
+          ]}
+          {...props}
+        />
+        {hasError && (
+          <UIStack horizontal center>
+            <UIText color="feedback-red-500">
+              {errors[name]?.message?.toString()}
+            </UIText>
+            <UIIcon name="warning" color={theme.color.feedback.red['500']} />
+          </UIStack>
+        )}
+      </UIStack>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+  },
+});

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { UIDatetimeInput } from '../molecules';
+import { useController, useFormContext } from 'react-hook-form';
+import { UIIcon, UIStack, UIText } from '../atoms';
+import { theme } from '../../../theme';
+import { StyleSheet } from 'react-native';
+
+type Props = Omit<React.ComponentProps<typeof UIDatetimeInput>, 'onSelect'> & {
+  name: string;
+  formContainerStyle?: React.ComponentProps<typeof UIStack>['style'];
+};
+
+export const UIFormDatetimeInput = ({
+  name,
+  formContainerStyle,
+  ...props
+}: Props) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+  const { field } = useController({ name, control });
+
+  const hasError = Boolean(errors[name]);
+
+  return (
+    <UIStack style={[styles.container, formContainerStyle]}>
+      <UIDatetimeInput
+        value={field.value && new Date(field.value)}
+        onSelect={(date) => {
+          field.onChange(date.getTime());
+        }}
+        {...props}
+      />
+      {hasError && (
+        <UIStack horizontal center>
+          <UIText color="feedback-red-500">
+            {errors[name]?.message?.toString()}
+          </UIText>
+          <UIIcon name="warning" color={theme.color.feedback.red['500']} />
+        </UIStack>
+      )}
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+  },
+});

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

@@ -0,0 +1,251 @@
+import React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+
+import {
+  UIActionSheet,
+  UICheckboxInput,
+  UIDataList,
+  UIInputIcon,
+  type UITextInput,
+} from '../molecules';
+import { UIFormButton } from './UIFormButton';
+import { useActionSheet } from '../../domain/utils';
+import { UIFormTextInput } from './UIFormTextInput';
+import { UIIcon, UIStack, UIText } from '../atoms';
+import { UIForm } from './UIForm';
+import { theme } from '../../../theme';
+
+import * as Yup from 'yup';
+
+import { useForm, useFormContext } from 'react-hook-form';
+
+const schema = Yup.object({
+  name: Yup.string(),
+});
+
+type SearchFormResult = {
+  search: string;
+};
+
+type Props<T> = {
+  name: string;
+  title: string;
+  label: string;
+  data: T[];
+  loading: boolean;
+  refreshing: boolean;
+  emptyMessage?: string;
+  sheetStyle?: React.ComponentProps<typeof UIActionSheet>['style'];
+  contentStyle?: React.ComponentProps<
+    typeof UIDataList
+  >['contentContainerStyle'];
+  variant?: React.ComponentProps<typeof UITextInput>['variant'];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  searchEmptyMessage?: string;
+  searchVariant?: React.ComponentProps<typeof UITextInput>['variant'];
+  createMessage?: string;
+  createVariant?: React.ComponentProps<typeof UIFormButton>['variant'];
+  getItemLabel: (item: T) => string | number;
+  getItemKey: (item: T) => string | number;
+  onRefresh: () => Promise<void>;
+  onCreate?: (search: string) => Promise<T>;
+  onClose?: () => void;
+  getErrorMessage?: React.ComponentProps<
+    typeof UIFormButton
+  >['getErrorMessage'];
+};
+
+export const UIFormMultiselectInput = <T,>({
+  title,
+  label,
+  name,
+  data,
+  loading,
+  refreshing,
+  getItemLabel,
+  getItemKey,
+  onRefresh,
+  variant = 'contained',
+  searchVariant = 'outlined',
+  placeholder,
+  sheetStyle,
+  contentStyle,
+  searchPlaceholder = 'Busque ou crie um novo item',
+  searchEmptyMessage = 'Não foram encontrados itens para essa busca',
+  createMessage = 'Criar novo item',
+  createVariant = 'contained',
+  emptyMessage = 'Não há itens encontrados',
+  onCreate,
+  getErrorMessage,
+  onClose: onCloseFromProps,
+}: Props<T>) => {
+  const ref = React.useRef<TextInput>(null);
+  const { visible, onClose: onCloseFromHook, onOpen } = useActionSheet();
+
+  const {
+    getValues: getValuesContext,
+    setValue: setValueContext,
+    watch: watchContext,
+  } = useFormContext();
+
+  const { watch, getValues, reset, ...rest } = useForm();
+  const form = {
+    ...rest,
+    watch,
+    getValues,
+    reset,
+  };
+
+  const [isCreating, setIsCreating] = React.useState(false);
+
+  const onClose = () => {
+    ref.current?.blur();
+    onCloseFromProps?.();
+    onCloseFromHook();
+    reset();
+  };
+
+  const onSelect = (item: T) => {
+    const current = (getValuesContext(name) ?? []) as T[];
+    const isSelected = current.find(
+      (value) => getItemKey(value) === getItemKey(item)
+    );
+    if (isSelected) {
+      setValueContext(
+        name,
+        current.filter((data) => getItemKey(data) !== getItemKey(item))
+      );
+    } else {
+      setValueContext(name, [...current, item]);
+    }
+  };
+
+  const onSubmit = async ({ search }: SearchFormResult) => {
+    if (!onCreate) return;
+    setIsCreating(true);
+    const data = await onCreate(search);
+    setIsCreating(false);
+    onSelect(data);
+    await onRefresh();
+    onClose();
+  };
+
+  const filteredData = React.useMemo(() => {
+    const search = getValues('search');
+    if (!data) return [];
+    if (!Array.isArray(data)) return [];
+    if (!search) return data;
+    return data.filter((item) =>
+      String(getItemLabel(item) ?? '')
+        .toLowerCase()
+        .includes(search.toLowerCase())
+    );
+  }, [data, getItemLabel, watch('search')]); //eslint-disable-line
+
+  const value = React.useMemo(() => {
+    const current = (getValuesContext(name) ?? []) as T[];
+    return current.map((value) => getItemLabel(value)).join(', ');
+  }, [name, getItemLabel, getValuesContext, watchContext(name)]); //eslint-disable-line
+
+  return (
+    <>
+      <UIFormTextInput
+        caretHidden
+        name={name}
+        ref={ref}
+        showSoftInputOnFocus={false}
+        onFocus={onOpen}
+        variant={variant}
+        label={label}
+        value={value}
+        placeholder={placeholder}
+      />
+      <UIActionSheet
+        visible={visible}
+        onRequestClose={onClose}
+        title={title}
+        style={[styles.sheet, sheetStyle]}
+      >
+        <UIStack>
+          <UIForm schema={schema} form={form} style={styles.form}>
+            <UIFormTextInput
+              name="search"
+              placeholder={searchPlaceholder}
+              variant={searchVariant}
+              endIcon={<UIInputIcon position="end" name="search" size={24} />}
+            />
+            {!Boolean(filteredData.length) && Boolean(watch('search')) && (
+              <UIStack size="md" style={styles.emptySearch}>
+                <UIText align="center" weight="500">
+                  {searchEmptyMessage}
+                </UIText>
+                {onCreate && (
+                  <UIFormButton
+                    loading={isCreating}
+                    variant={createVariant}
+                    onSubmit={onSubmit}
+                    getErrorMessage={getErrorMessage}
+                  >
+                    <UIStack style={styles.create} horizontal center>
+                      <UIText color="neutral-light-00">{createMessage}</UIText>
+                      <UIIcon
+                        name="add"
+                        size={24}
+                        color={theme.color.neutral.light['00']}
+                      />
+                    </UIStack>
+                  </UIFormButton>
+                )}
+              </UIStack>
+            )}
+          </UIForm>
+          <UIDataList
+            data={filteredData}
+            loading={loading}
+            onRefresh={onRefresh}
+            refreshing={refreshing}
+            contentContainerStyle={[styles.content, contentStyle]}
+            ListEmptyComponent={() => {
+              const search = getValues('search');
+              if (search) return null;
+              return (
+                <UIText align="center" weight="500" style={styles.emptySearch}>
+                  {emptyMessage}
+                </UIText>
+              );
+            }}
+            renderItem={({ item }) => {
+              const current = (watchContext(name) ?? []) as T[];
+              const isSelected = Boolean(
+                current.find((value) => getItemKey(value) === getItemKey(item))
+              );
+              const label = String(getItemLabel(item));
+              return (
+                <UICheckboxInput
+                  selected={isSelected}
+                  label={label}
+                  onPress={() => onSelect(item)}
+                />
+              );
+            }}
+          />
+        </UIStack>
+      </UIActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: { paddingBottom: 250 },
+  emptySearch: {
+    marginTop: 24,
+  },
+  sheet: { height: 440 },
+  form: {
+    marginHorizontal: 16,
+  },
+  create: {
+    alignSelf: 'center',
+  },
+});

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { UIRadioInput } from '../molecules';
+import { useController, useFormContext } from 'react-hook-form';
+import type { GestureResponderEvent } from 'react-native';
+
+type Props = Omit<React.ComponentProps<typeof UIRadioInput>, 'selected'> & {
+  name: string;
+  value: string | number | boolean;
+};
+
+export const UIFormRadioInput = ({ name, value, onPress, ...props }: Props) => {
+  const { control } = useFormContext();
+
+  const { field } = useController({ control, name });
+
+  const onSelect = (e: GestureResponderEvent) => {
+    onPress?.(e);
+    if (field.value === value) {
+      field.onChange(null);
+    } else {
+      field.onChange(value);
+    }
+  };
+
+  return (
+    <UIRadioInput
+      onPress={onSelect}
+      selected={field.value === value}
+      {...props}
+    />
+  );
+};