@edge-zuq/core 1.2.7

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

@@ -0,0 +1,316 @@
+import React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+
+import * as Yup from 'yup';
+
+import { useForm, useFormContext } from 'react-hook-form';
+import {
+  UIActionSheet,
+  UIDataList,
+  UIInputIcon,
+  UIRadioInput,
+  type UITextInput,
+} from '../molecules';
+import { UIFormButton } from './UIFormButton';
+import { UIFormTextInput } from './UIFormTextInput';
+import { UIIcon, UIStack, UIText } from '../atoms';
+import { UIForm } from './UIForm';
+import { useActionSheet } from '../../domain/utils';
+import { theme } from '../../../theme';
+import _ from 'lodash';
+
+const schema = Yup.object({
+  name: Yup.string(),
+});
+
+type SearchFormResult = {
+  search: string;
+};
+
+type Props<T> = {
+  name: string;
+  title: string;
+  label: string;
+  data: T[] | undefined;
+  loading: boolean;
+  refreshing: boolean;
+  sorted?: boolean;
+  placeholder?: string;
+  emptyMessage?: string;
+  sheetStyle?: React.ComponentProps<typeof UIActionSheet>['style'];
+  inputStyle?: React.ComponentProps<typeof UITextInput>['style'];
+  inputContainerStyle?: React.ComponentProps<
+    typeof UITextInput
+  >['containerStyle'];
+  inputFormContainerStyle?: React.ComponentProps<
+    typeof UIFormTextInput
+  >['formContainerStyle'];
+  contentStyle?: React.ComponentProps<
+    typeof UIDataList
+  >['contentContainerStyle'];
+  variant?: React.ComponentProps<typeof UITextInput>['variant'];
+  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<any>;
+  onCreate?: (search: string) => Promise<T>;
+  onClose?: () => void;
+  onSearch?: (value: string) => void;
+  getErrorMessage?: React.ComponentProps<
+    typeof UIFormButton
+  >['getErrorMessage'];
+  action?: React.ReactNode;
+  ListFooterComponent?: React.ComponentProps<
+    typeof UIDataList
+  >['ListFooterComponent'];
+  onEndReached?: React.ComponentProps<typeof UIDataList>['onEndReached'];
+  closeOnSelect?: boolean;
+  editable?: boolean;
+  enableClientSearch?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
+};
+
+export const UIFormSelectInput = <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,
+  action,
+  ListFooterComponent,
+  onEndReached,
+  onSearch,
+  closeOnSelect,
+  sorted = false,
+  editable = true,
+  enableClientSearch = true,
+  inputStyle,
+  inputContainerStyle,
+  inputFormContainerStyle,
+  onFocus,
+  onBlur,
+}: Props<T>) => {
+  const ref = React.useRef<TextInput>(null);
+  const { visible, onClose: onCloseFromHook, onOpen } = useActionSheet();
+
+  const {
+    getValues: getValuesContext,
+    setValue: setValueContext,
+    watch: watchContext,
+    clearErrors: clearErrorsContext,
+  } = useFormContext();
+
+  const { watch, getValues, reset, ...rest } = useForm();
+  const form = {
+    ...rest,
+    watch,
+    getValues,
+    reset,
+  };
+
+  const [isCreating, setIsCreating] = React.useState(false);
+
+  const onClose = React.useCallback(() => {
+    ref.current?.blur();
+    onCloseFromProps?.();
+    onCloseFromHook();
+    onSearch?.('');
+    reset();
+  }, [onCloseFromProps, onCloseFromHook, onSearch, reset]);
+
+  const onSelect = (item: T) => {
+    const current = getValuesContext(name) as T;
+    const isSelected = current && getItemKey(current) === getItemKey(item);
+    if (isSelected) {
+      setValueContext(name, undefined);
+    } else {
+      setValueContext(name, item);
+      clearErrorsContext(name);
+    }
+    if (closeOnSelect) onClose();
+  };
+
+  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 [];
+    let filtered = data;
+    if (enableClientSearch && search) {
+      filtered = data.filter((item) =>
+        String(getItemLabel(item) ?? '')
+          .toLowerCase()
+          .includes(search.toLowerCase())
+      );
+    }
+    if (sorted) {
+      filtered = filtered.sort((a, b) =>
+        String(getItemLabel(a)).localeCompare(String(getItemLabel(b)))
+      );
+    }
+    return filtered;
+  }, [data, sorted, getItemLabel, watch('search')]); //eslint-disable-line
+
+  const value = React.useMemo(() => {
+    const current = getValuesContext(name);
+    if (current) {
+      return String(getItemLabel(current));
+    }
+    return;
+  }, [name, getItemLabel, getValuesContext, watchContext(name)]); //eslint-disable-line
+
+  //eslint-disable-next-line
+  const onSearchDebounced = React.useCallback(
+    _.debounce((value: string) => {
+      onSearch?.(value);
+    }, 1000),
+    [onSearch]
+  );
+
+  return (
+    <>
+      <UIFormTextInput
+        caretHidden
+        name={name}
+        ref={ref}
+        showSoftInputOnFocus={false}
+        onFocus={() => {
+          onOpen();
+          onFocus?.();
+        }}
+        onBlur={onBlur}
+        variant={variant}
+        label={label}
+        value={value}
+        placeholder={placeholder}
+        editable={editable}
+        style={inputStyle}
+        containerStyle={inputContainerStyle}
+        formContainerStyle={inputFormContainerStyle}
+      />
+      <UIActionSheet
+        visible={visible}
+        onRequestClose={onClose}
+        title={title}
+        style={sheetStyle}
+        estimatedHeight={520}
+      >
+        <UIStack flex={1}>
+          <UIForm schema={schema} form={form} style={styles.form}>
+            <UIStack horizontal center>
+              <UIFormTextInput
+                name="search"
+                placeholder={searchPlaceholder}
+                variant={searchVariant}
+                onChangeText={(text) => onSearchDebounced(text)}
+                endIcon={<UIInputIcon position="end" name="search" size={24} />}
+              />
+              {action}
+            </UIStack>
+            {!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}
+            style={styles.list}
+            contentContainerStyle={contentStyle}
+            ListFooterComponent={ListFooterComponent}
+            onEndReached={onEndReached}
+            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 =
+                current && Boolean(getItemKey(current) === getItemKey(item));
+              const label = String(getItemLabel(item));
+              return (
+                <UIRadioInput
+                  selected={isSelected}
+                  label={label}
+                  onPress={() => onSelect(item)}
+                />
+              );
+            }}
+          />
+        </UIStack>
+      </UIActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  list: { height: 350 },
+  emptySearch: {
+    marginTop: 24,
+  },
+  form: {
+    flex: 1,
+    marginHorizontal: 16,
+  },
+  create: {
+    alignSelf: 'center',
+  },
+});

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { UITextInput } 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 UITextInput> & {
+  name: string;
+  formContainerStyle?: React.ComponentProps<typeof UIStack>['style'];
+};
+
+export const UIFormTextInput = React.forwardRef<TextInput, Props>(
+  (
+    {
+      name,
+      containerStyle,
+      onChangeText,
+      editable,
+      formContainerStyle,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      control,
+      formState: { errors, isSubmitting },
+    } = useFormContext();
+    const { field } = useController({ name, control });
+
+    const hasError = Boolean(errors[name]);
+
+    return (
+      <UIStack style={[styles.container, formContainerStyle]}>
+        <UITextInput
+          ref={ref}
+          value={field.value}
+          editable={isSubmitting || editable}
+          onChangeText={(text) => {
+            field.onChange(text);
+            onChangeText?.(text);
+          }}
+          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/UIFormTextInputMask.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { UITextInputMask } 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 UITextInputMask> & {
+  name: string;
+  formContainerStyle?: React.ComponentProps<typeof UIStack>['style'];
+};
+
+export const UIFormTextInputMask = React.forwardRef<TextInput, Props>(
+  (
+    {
+      name,
+      containerStyle,
+      onChangeText: onChangeTextProp,
+      formContainerStyle,
+      mask,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = React.useState<string>('');
+    const {
+      control,
+      formState: { errors },
+    } = useFormContext();
+    const { field } = useController({ name, control });
+
+    const hasError = Boolean(errors[name]);
+
+    const onChangeText = React.useCallback(
+      (formatted: string, extracted: string, obfuscated: string) => {
+        field.onChange(extracted);
+        setValue(formatted);
+        onChangeTextProp?.(formatted, extracted, obfuscated);
+      },
+      [field, onChangeTextProp]
+    );
+
+    React.useEffect(() => {
+      setValue(field.value);
+    }, [field.value]);
+
+    return (
+      <UIStack style={[styles.container, formContainerStyle]}>
+        <UITextInputMask
+          ref={ref}
+          value={value}
+          onChangeText={onChangeText}
+          mask={mask}
+          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/UIRow.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+import React from 'react';
+import { UIIcon, UIText, UIStack } from '../atoms';
+import type { IconName } from '../atoms';
+import { UIButton } from '../molecules';
+import { theme } from '../../../theme';
+
+type Props = React.ComponentProps<typeof UIButton> & {
+  icon?: IconName;
+  label: string;
+  value?: React.ReactNode;
+  pressable?: boolean;
+  contentStyle?: React.ComponentProps<typeof UIStack>['style'];
+};
+
+export const UIRow = ({
+  label,
+  icon,
+  value,
+  pressable,
+  disabled,
+  style,
+  contentStyle,
+  ...props
+}: Props) => {
+  if (typeof value === 'string' || typeof value === 'number')
+    value = <UIText>{value}</UIText>;
+
+  return (
+    <UIButton
+      disabled={!pressable || disabled}
+      style={[styles.button, style as any]}
+      {...props}
+    >
+      <UIStack horizontal center style={[styles.container, contentStyle]}>
+        <UIStack size="lg" horizontal center>
+          {icon && (
+            <UIIcon
+              name={icon}
+              size={24}
+              color={theme.color.neutral.mid['60']}
+            />
+          )}
+          <UIText>{label}</UIText>
+        </UIStack>
+        {value}
+      </UIStack>
+    </UIButton>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    paddingVertical: 20,
+  },
+  button: {
+    padding: 0,
+  },
+});

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

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { UIInputIcon, UITextInput } from '../molecules';
+import { theme } from '../../../theme';
+import type React from 'react';
+
+type Props = React.ComponentProps<typeof UITextInput>;
+
+export const UISearchInput = ({
+  placeholder,
+  startIcon,
+  containerStyle,
+  ...props
+}: Props) => {
+  return (
+    <UITextInput
+      variant="outlined"
+      placeholder={placeholder ?? 'Insira o termo da busca...'}
+      startIcon={
+        startIcon ?? (
+          <UIInputIcon
+            name="search"
+            size={20}
+            position="start"
+            color={theme.color.brand.violet['500']}
+          />
+        )
+      }
+      containerStyle={[styles.container, containerStyle]}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.color.neutral.light['20'],
+    borderColor: theme.color.neutral.light['20'],
+    borderRadius: 28,
+  },
+});

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

@@ -0,0 +1,104 @@
+import { StyleSheet } from 'react-native';
+import { UIButton, UIChip, UIList } from '../molecules';
+import { UIIcon, UISeparator, UISpacer, UIStack, UIText } from '../atoms';
+import { theme } from '../../../theme';
+
+type PropsToOmit = 'renderItem' | 'ItemSeparatorComponent';
+
+type Props<T> = Omit<React.ComponentProps<typeof UIList<T>>, PropsToOmit> & {
+  data: T[];
+  getItemLabel: (item: T) => string;
+  getItemKey: (item: T) => string;
+  selected: T;
+  onSelect: (item: T) => void;
+  onReset: () => void;
+};
+
+export const UISelectChip = <T,>({
+  data,
+  getItemLabel,
+  getItemKey,
+  selected,
+  onSelect,
+  onReset,
+  ...props
+}: Props<T>) => {
+  return (
+    <UIList
+      horizontal
+      data={data}
+      renderItem={({ item }) => {
+        const isSelected = getItemKey(selected) === getItemKey(item);
+        return (
+          <UIButton onPress={() => onSelect(item)} style={styles.button}>
+            <UIChip
+              content={
+                <UIStack horizontal center>
+                  {isSelected && (
+                    <UIIcon
+                      name="check-alt"
+                      color={theme.color.neutral.light['00']}
+                    />
+                  )}
+                  <UIText
+                    weight="500"
+                    color={isSelected ? 'neutral-light-00' : 'neutral-mid-60'}
+                  >
+                    {getItemLabel(item)}
+                  </UIText>
+                </UIStack>
+              }
+              color={isSelected ? 'brand-violet-500' : 'neutral-light-05'}
+              borderColor={isSelected ? 'brand-violet-500' : 'neutral-light-50'}
+              style={styles.chip}
+            />
+          </UIButton>
+        );
+      }}
+      ItemSeparatorComponent={() => <UISpacer horizontal />}
+      ListHeaderComponent={() => (
+        <UIStack horizontal center size="md" style={styles.header}>
+          <UIButton onPress={() => onReset()} style={styles.button}>
+            <UIChip
+              content={
+                <UIStack horizontal center>
+                  {!selected && (
+                    <UIIcon
+                      name="check-alt"
+                      color={theme.color.neutral.light['00']}
+                    />
+                  )}
+                  <UIText
+                    weight="500"
+                    color={!selected ? 'neutral-light-00' : 'neutral-mid-60'}
+                  >
+                    Todos
+                  </UIText>
+                </UIStack>
+              }
+              color={!selected ? 'brand-violet-500' : 'neutral-light-05'}
+              borderColor={!selected ? 'brand-violet-500' : 'neutral-light-50'}
+              style={styles.chip}
+            />
+          </UIButton>
+          <UISeparator horizontal={false} />
+        </UIStack>
+      )}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  chip: {
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingHorizontal: 16,
+  },
+  header: {
+    marginRight: 8,
+  },
+  button: {
+    padding: 0,
+  },
+});