@tecsinapse/react-core 1.21.2 → 1.21.3

package/src/components/atoms/Icon/Icon.tsx

@@ -1,52 +0,0 @@
-import React, { FC } from 'react';
-import { StyleProp, TextStyle, Text } from 'react-native';
-import { useTheme } from '@emotion/react';
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  IconSizeType,
-  IconType,
-  ThemeProp,
-} from '@tecsinapse/react-core';
-import { getIconColor, getIconComponent } from './helpers';
-
-export interface IconProps {
-  /**  Name of the icon. You must use the same icons from react-native-vector-icons */
-  name: string;
-  /**  Default icon sizes from theme */
-  size?: IconSizeType;
-  /**  Icon family. You must use the same icons from react-native-vector-icons */
-  type: IconType;
-  /** Font theme fill color */
-  fontColor?: FontColorType;
-  /** Palette theme fill color */
-  colorVariant?: ColorType;
-  /** Palette theme gradation fill color */
-  colorTone?: ColorGradationType;
-  style?: StyleProp<TextStyle>;
-}
-
-/** NOTE: When using colors, the order matters if you're trying to merge multiple types. */
-const Icon: FC<IconProps> = ({
-  name,
-  size = 'centi',
-  type,
-  style,
-  fontColor = 'dark',
-  colorVariant,
-  colorTone = 'medium',
-  ...rest
-}) => {
-  const theme = useTheme() as ThemeProp;
-  const color = getIconColor(colorVariant, colorTone, fontColor, theme);
-  const RNVIcon = getIconComponent(type, size);
-
-  return (
-    <React.Suspense fallback={<Text> </Text>}>
-      <RNVIcon {...rest} style={style} name={name} color={color} />
-    </React.Suspense>
-  );
-};
-
-export default Icon;

package/src/components/atoms/Icon/helpers.ts

@@ -1,120 +0,0 @@
-import { lazy } from 'react';
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  IconSizeType,
-  IconType,
-  ThemeProp,
-} from '@tecsinapse/react-core';
-import styled from '@emotion/native';
-
-/* eslint-disable */
-const customIcons: any = {};
-
-export const registerCustomIconType = (id: string, customIcon: any) => {
-  customIcons[id] = customIcon;
-};
-
-const getStyledIcon = (Component, size) => styled(Component)`
-  font-size: ${({ theme }) => theme.iconSize[size]};
-  text-align: center;
-`;
-
-export const getIconComponent = (type: IconType, size: IconSizeType): any => {
-  switch (type) {
-    case 'zocial':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/Zocial')),
-        size
-      );
-    case 'octicon':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/Octicons')),
-        size
-      );
-    case 'material':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/MaterialIcons')),
-        size
-      );
-    case 'material-community':
-      return getStyledIcon(
-        lazy(
-          () => import('react-native-vector-icons/dist/MaterialCommunityIcons')
-        ),
-        size
-      );
-    case 'ionicon':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/Ionicons')),
-        size
-      );
-    case 'foundation':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/Foundation')),
-        size
-      );
-    case 'evilicon':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/EvilIcons')),
-        size
-      );
-    case 'entypo':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/Entypo')),
-        size
-      );
-    case 'font-awesome':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/FontAwesome')),
-        size
-      );
-    case 'font-awesome-5':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/FontAwesome5')),
-        size
-      );
-    case 'simple-line-icon':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/SimpleLineIcons')),
-        size
-      );
-    case 'feather':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/Feather')),
-        size
-      );
-    case 'antdesign':
-    case 'ant-design':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/AntDesign')),
-        size
-      );
-    case 'fontisto':
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/Fontisto')),
-        size
-      );
-    default:
-      if (Object.prototype.hasOwnProperty.call(customIcons, type)) {
-        return getStyledIcon(customIcons[type], size);
-      }
-      return getStyledIcon(
-        lazy(() => import('react-native-vector-icons/dist/MaterialIcons')),
-        size
-      );
-  }
-};
-/* eslint-enable */
-export const getIconColor = (
-  colorVariant: ColorType | undefined,
-  colorGradation: ColorGradationType | undefined,
-  fontColor: FontColorType,
-  theme: ThemeProp
-): string => {
-  if (colorVariant && colorGradation) {
-    return theme.color[colorVariant][colorGradation];
-  }
-  return theme.font.color[fontColor];
-};

package/src/components/atoms/Icon/index.ts

@@ -1,2 +0,0 @@
-export { default as Icon } from './Icon';
-export type { IconProps } from './Icon';

package/src/components/atoms/Input/Hint.tsx

@@ -1,48 +0,0 @@
-import React, { FC } from 'react';
-import { ColorType } from '../../../types/defaults';
-import { InputVariantType } from '../Input';
-import { Text, TextProps } from '../Text';
-import { StyledHintContainer, StyledHintIcon } from './styled';
-
-interface HintProps {
-  text?: string;
-  variant: InputVariantType;
-  TextComponent?: FC<TextProps>;
-}
-
-const Hint: FC<HintProps> = ({ variant, text, TextComponent = Text }) => {
-  let color: ColorType;
-  let icon;
-
-  switch (variant) {
-    case 'default':
-      color = 'secondary';
-      break;
-    case 'error':
-      color = 'error';
-      icon = 'close-circle-outline';
-      break;
-    case 'success':
-      color = 'success';
-      icon = 'checkmark-circle-outline';
-      break;
-  }
-
-  return (
-    <StyledHintContainer>
-      {icon && (
-        <StyledHintIcon
-          name={icon}
-          type="ionicon"
-          size="centi"
-          colorVariant={color}
-        />
-      )}
-      <TextComponent typography="label" colorVariant={color}>
-        {text}
-      </TextComponent>
-    </StyledHintContainer>
-  );
-};
-
-export default Hint;

package/src/components/atoms/Input/InputContainer/InputContainer.tsx

@@ -1,109 +0,0 @@
-import React, { FC } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { InputElementProps } from '..';
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  FontStackType,
-  FontWeightType,
-  TypographyVariationType,
-} from '@tecsinapse/react-core';
-import { Text, TextProps } from '../../Text';
-import {
-  StyledBorderKeeper,
-  StyledIconContent,
-  StyledInputContainer,
-  StyledLabelContainer,
-} from '../styled';
-
-export type InputVariantType = 'default' | 'error' | 'success';
-
-export interface InputContainerProps {
-  label?: string;
-  labelColor?: FontColorType;
-  labelColorVariant?: ColorType;
-  labelColorTone?: ColorGradationType;
-  labelTypography?: TypographyVariationType;
-  labelStack?: FontStackType;
-  LabelComponent?: FC<TextProps>;
-  labelWeight?: FontWeightType;
-  leftComponent?: JSX.Element;
-  rightComponent?: JSX.Element;
-  borderColor?: ColorType;
-  borderColorGradation?: ColorGradationType;
-  style?: StyleProp<ViewStyle>;
-  inputContainerStyle?: StyleProp<ViewStyle>;
-  focused?: boolean;
-  disabled?: boolean;
-  variant?: InputVariantType;
-  hint?: string;
-  hintComponent?: JSX.Element;
-}
-
-const InputContainer: FC<InputContainerProps & Partial<InputElementProps>> = ({
-  label,
-  labelColor = 'medium',
-  labelColorTone,
-  labelColorVariant,
-  labelTypography = 'label',
-  labelStack = 'default',
-  labelWeight = 'bold',
-  LabelComponent = Text,
-  leftComponent,
-  rightComponent,
-  inputContainerStyle,
-  disabled,
-  focused,
-  variant,
-  children,
-  ...rest
-}): JSX.Element => {
-  let _defaultLabelColor = labelColorVariant;
-  if (variant === 'error') _defaultLabelColor = 'error';
-  if (variant === 'success') _defaultLabelColor = 'success';
-  const _labelColorVariant = disabled ? 'secondary' : _defaultLabelColor;
-  const _labelColorTone = disabled ? 'light' : labelColorTone;
-
-  return (
-    <StyledInputContainer
-      {...rest}
-      style={inputContainerStyle}
-      focused={focused}
-      disabled={disabled}
-    >
-      <StyledBorderKeeper
-        focused={focused}
-        disabled={disabled}
-        borderColor={_defaultLabelColor}
-      />
-
-      {leftComponent && <StyledIconContent>{leftComponent}</StyledIconContent>}
-
-      <StyledLabelContainer
-        leftComponent={leftComponent}
-        rightComponent={rightComponent}
-      >
-        {label && (
-          <LabelComponent
-            fontColor={labelColor}
-            colorTone={_labelColorTone}
-            colorVariant={_labelColorVariant}
-            typography={labelTypography}
-            fontWeight={labelWeight}
-            fontStack={labelStack}
-          >
-            {label}
-          </LabelComponent>
-        )}
-        {children}
-      </StyledLabelContainer>
-
-      {rightComponent && (
-        <StyledIconContent>{rightComponent}</StyledIconContent>
-      )}
-    </StyledInputContainer>
-  );
-};
-
-export default InputContainer;

package/src/components/atoms/Input/InputElement/InputElement.tsx

@@ -1,50 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { ThemeProp } from '@tecsinapse/react-core';
-import React from 'react';
-import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
-import { StyledInputElement } from '../styled';
-
-export interface InputElementProps
-  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
-  style?: StyleProp<TextStyle>;
-  value?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  onChange?: (value: string) => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-const InputElement = React.forwardRef<TextInput, InputElementProps>(
-  (
-    {
-      onChange,
-      placeholder,
-      value,
-      disabled = false,
-      placeholderTextColor,
-      ...rest
-    },
-    ref
-  ): JSX.Element => {
-    const theme = useTheme() as ThemeProp;
-    const _placeholderColor = placeholderTextColor || theme.font.color.dark;
-
-    return (
-      <StyledInputElement
-        {...rest}
-        ref={ref}
-        onChangeText={onChange}
-        value={value}
-        placeholder={placeholder}
-        placeholderTextColor={_placeholderColor}
-        disabled={disabled}
-        editable={!disabled}
-      />
-    );
-  }
-);
-
-InputElement.displayName = 'InputElement';
-
-export default InputElement;

package/src/components/atoms/Input/InputMaskElement/InputMaskElement.tsx

@@ -1,119 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { ThemeProp } from '@tecsinapse/react-core';
-import React, { useCallback, useEffect } from 'react';
-import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
-import { StyledInputElement } from '../styled';
-import { MaskType, useStringMask } from '../hooks/useStringMask';
-import { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';
-
-export interface InputMaskElementProps
-  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
-  style?: StyleProp<TextStyle>;
-  value?: string | number;
-  placeholder?: string;
-  disabled?: boolean;
-  onChange?: (value: any) => void;
-  /**
-   To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])
-   A MaskType can be a string, RegExp, or Array<RegExp>.
-   In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.
-   For example a phone mask can be represented as ['(99) \\99999-9999'], or ['(99) ', '/[9]/', '9999-9999'], or ['(', /[0-9]/, /[0-9]/, ') ', '/[9]/', '9999-9999'] and many others.
-   To use mask for numbers you have to pass a CurrencyOptions object
-   A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.
-   **/
-  mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-const InputMaskElement = React.forwardRef<TextInput, InputMaskElementProps>(
-  (
-    {
-      onChange,
-      placeholder,
-      value,
-      disabled = false,
-      placeholderTextColor,
-      mask,
-      ...rest
-    },
-    ref
-  ): JSX.Element => {
-    const theme = useTheme() as ThemeProp;
-
-    const _placeholderColor = placeholderTextColor || theme.font.color.dark;
-
-    const getInputHook = (value: string | number) => {
-      if (mask !== undefined) {
-        if (Array.isArray(mask) || typeof mask === 'function') {
-          return useStringMask(mask, value);
-        } else {
-          return useNumberMask(mask, value);
-        }
-      } else {
-        return [undefined, undefined];
-      }
-    };
-
-    const [maskValue, setMaskValue] = getInputHook(value ?? '');
-
-    const _value =
-      maskValue === undefined
-        ? value?.toString()
-        : maskValue.formatted
-        ? maskValue.formatted
-        : '';
-
-    useEffect(() => {
-      if (onChange) {
-        onChange(maskValue?.raw);
-      }
-    }, [maskValue]);
-
-    const onChangeValue = useCallback(
-      (value: string | number) => {
-        if (maskValue !== undefined && setMaskValue !== undefined) {
-          setMaskValue(value);
-        } else onChange && onChange(value);
-      },
-      [value]
-    );
-
-    useEffect(() => {
-      /** Used to reinitialize maskValue when the value is updated in the parent component **/
-      if (
-        maskValue !== undefined &&
-        setMaskValue !== undefined &&
-        value !== undefined &&
-        typeof maskValue === 'object'
-      ) {
-        /** Case there is a mask **/
-        if (
-          maskValue.raw !== undefined &&
-          maskValue.raw.toString() !== value.toString()
-        ) {
-          onChangeValue(value);
-        }
-      } else if (maskValue === undefined && value !== undefined) {
-        onChangeValue(value);
-      }
-    }, [value]);
-
-    return (
-      <StyledInputElement
-        {...rest}
-        ref={ref}
-        onChangeText={onChangeValue}
-        value={_value}
-        placeholder={placeholder}
-        placeholderTextColor={_placeholderColor}
-        disabled={disabled}
-        editable={!disabled}
-      />
-    );
-  }
-);
-
-InputMaskElement.displayName = 'InputMaskElement';
-
-export default InputMaskElement;

package/src/components/atoms/Input/PressableInputContainer/PressableInputContainer.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
-import InputContainer, {
-  InputContainerProps,
-} from '../InputContainer/InputContainer';
-import { StyledPressableSurface } from './styled';
-
-export interface PressableInputContainerProps
-  extends Omit<
-    InputContainerProps,
-    'value' | 'onChange' | 'onChangeText' | 'disabled' | 'style'
-  > {
-  onPress?: () => void | never;
-  disabled?: boolean;
-  style?:
-    | StyleProp<ViewStyle>
-    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
-}
-
-const PressableInputContainer: React.FC<PressableInputContainerProps> = ({
-  onPress,
-  disabled,
-  style,
-  children,
-  ...rest
-}) => {
-  return (
-    <StyledPressableSurface onPress={onPress} disabled={disabled} style={style}>
-      <InputContainer disabled={disabled} {...rest}>
-        {children}
-      </InputContainer>
-    </StyledPressableSurface>
-  );
-};
-
-export default PressableInputContainer;

package/src/components/atoms/Input/PressableInputContainer/index.ts

@@ -1,2 +0,0 @@
-export { default as PressableInputContainer } from './PressableInputContainer';
-export type { PressableInputContainerProps } from './PressableInputContainer';

package/src/components/atoms/Input/PressableInputContainer/styled.ts

@@ -1,5 +0,0 @@
-import styled from '@emotion/native';
-
-export const StyledPressableSurface = styled.Pressable`
-  width: 100%;
-`;

package/src/components/atoms/Input/hooks/useInputFocus.ts

@@ -1,29 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export const useInputFocus = (
-  onFocus?: () => void,
-  onBlur?: () => void,
-  focusEnabled = true
-) => {
-  const [focused, setFocused] = useState<boolean>(false);
-
-  const handleFocus = useCallback(() => {
-    if (focusEnabled) {
-      setFocused(true);
-      onFocus && onFocus();
-    }
-  }, [focusEnabled, setFocused, onFocus]);
-
-  const handleBlur = useCallback(() => {
-    if (focusEnabled) {
-      setFocused(false);
-      onBlur && onBlur();
-    }
-  }, [focusEnabled, setFocused, onBlur]);
-
-  return {
-    focused,
-    handleBlur,
-    handleFocus,
-  };
-};

package/src/components/atoms/Input/hooks/useNumberMask.ts

@@ -1,99 +0,0 @@
-import currency from 'currency.js';
-import { useCallback, useState } from 'react';
-import { extractNumbersFromString } from '../../../../utils/extractNumbersFromString';
-import { MaskValue } from './useStringMask';
-
-export type CurrencyOptions = currency.Options;
-
-const DEFAULT_OPTIONS: CurrencyOptions = {
-  symbol: 'R$ ',
-  separator: '.',
-  decimal: ',',
-  precision: 2,
-};
-
-const getRegex = (precision: number) =>
-  new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g');
-
-export const getInternalNumberAndMask = (
-  value: string | number,
-  options?: CurrencyOptions
-): { internalNumber: number; mergedOptions: CurrencyOptions } => {
-  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
-  const { precision = -1 } = mergedOptions;
-
-  let internalNumber;
-
-  if (typeof value === 'number') {
-    if (precision) {
-      let stringValue = String(value);
-      const decimalIndex = stringValue.indexOf('.');
-      const currentPrecision = decimalIndex + precision;
-      if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
-        const zeros = stringValue.length + 1 - currentPrecision;
-        for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
-      }
-      internalNumber = Number(stringValue);
-    } else {
-      internalNumber = value;
-    }
-  } else {
-    const onlyNumbers = String(extractNumbersFromString(value));
-    const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
-    internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
-  }
-
-  if (internalNumber > Number.MAX_SAFE_INTEGER) {
-    internalNumber = Number.MAX_SAFE_INTEGER;
-  }
-
-  if (internalNumber < Number.MIN_SAFE_INTEGER) {
-    internalNumber = Number.MIN_SAFE_INTEGER;
-  }
-
-  return {
-    internalNumber,
-    mergedOptions,
-  };
-};
-
-/**
- * TODO:
- * @param options
- * @param defaultValue
- * @returns
- */
-export const useNumberMask = (
-  options?: CurrencyOptions,
-  defaultValue?: string | number
-): [MaskValue, (value: string | number) => void] => {
-  const applyMask = useCallback(
-    (value: string | number = 0): MaskValue => {
-      const { internalNumber, mergedOptions } = getInternalNumberAndMask(
-        value,
-        options
-      );
-
-      return {
-        raw: internalNumber,
-        formatted: currency(internalNumber).format(mergedOptions),
-      };
-    },
-    [options, getRegex]
-  );
-
-  const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));
-
-  const handleChangeValue = useCallback(
-    (formattedValue: string | number) => {
-      const { raw, formatted } = applyMask(formattedValue);
-      setValue({
-        raw,
-        formatted,
-      });
-    },
-    [applyMask, setValue]
-  );
-
-  return [value, handleChangeValue];
-};