@tecsinapse/react-native-kit 1.22.2 → 1.22.3

package/src/components/atoms/Badge/Badge.tsx

@@ -1,34 +0,0 @@
-import React, { FC } from 'react';
-import {
-  BadgeProps,
-  Badge as BadgeCore,
-  FontColorType,
-} from '@tecsinapse/react-core';
-import { Text } from '../Text';
-
-export interface BadgeNativeProps extends Omit<BadgeProps, 'value'> {
-  fontColor?: FontColorType;
-  value: string | number;
-}
-
-const Badge: FC<BadgeNativeProps> = ({
-  children,
-  fontColor = 'light',
-  value,
-  ...props
-}) => {
-  return (
-    <BadgeCore
-      {...props}
-      value={
-        <Text fontColor={fontColor} fontWeight={'bold'} typography={'label'}>
-          {value}
-        </Text>
-      }
-    >
-      {children}
-    </BadgeCore>
-  );
-};
-
-export default Badge;

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

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

package/src/components/atoms/BottomNavigator/BottomNavigator.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { ViewProps } from 'react-native';
-import { StyledView, TabContainer } from './styled';
-import Item, { BottomNavigatorItemProps } from './Item';
-import { Text } from '../Text';
-
-export interface BottomNavigatorProps<T extends string | number | symbol>
-  extends ViewProps {
-  selected: T;
-  onSelect: (value: T) => void | never;
-  children:
-    | React.ReactElement<BottomNavigatorItemProps<T>>
-    | React.ReactElement<BottomNavigatorItemProps<T>>[];
-}
-
-function BottomNavigator<T extends string | number | symbol>({
-  selected,
-  onSelect,
-  children,
-  ...rest
-}: BottomNavigatorProps<T>): JSX.Element {
-  return (
-    <StyledView {...rest}>
-      {React.Children.map(children, child => {
-        const { value, label, labelProps, labelElement } = (
-          child as React.ReactElement<BottomNavigatorItemProps<T>>
-        ).props;
-        const isSelected = value == selected;
-
-        return (
-          <TabContainer selected={isSelected} onPress={() => onSelect(value)}>
-            {React.cloneElement(child as React.ReactElement, {
-              _selected: isSelected,
-            })}
-            {label && !labelElement && (
-              <Text
-                colorVariant={
-                  labelProps?.colorVariant || isSelected
-                    ? 'primary'
-                    : 'secondary'
-                }
-                typography={labelProps?.typography || 'sub'}
-                {...labelProps}
-              >
-                {label}
-              </Text>
-            )}
-            {labelElement && labelElement}
-          </TabContainer>
-        );
-      })}
-    </StyledView>
-  );
-}
-
-BottomNavigator.Item = Item;
-
-export default BottomNavigator;

package/src/components/atoms/BottomNavigator/Item.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Icon, IconProps } from '@tecsinapse/react-core';
-import { TabContent, CustomTabContent } from './styled';
-import { ViewProps } from 'react-native';
-import { TextNativeProps } from '../Text';
-
-type ValueType = string | number | symbol;
-
-export interface BottomNavigatorItemProps<T extends ValueType>
-  extends Omit<ViewProps, 'children'> {
-  _selected?: boolean;
-  value: T;
-  icon: IconProps;
-  label?: string;
-  labelProps?: TextNativeProps;
-  labelElement?: React.ReactNode | React.ReactNode[];
-  children: React.ReactNode | React.ReactNode[];
-}
-
-type ItemPropsWithIcon<T extends ValueType> = Omit<
-  BottomNavigatorItemProps<T>,
-  'children'
->;
-
-type ItemPropsWithChildren<T extends ValueType> = Omit<
-  BottomNavigatorItemProps<T>,
-  'icon' | 'label' | 'labelElement' | 'labelProps'
->;
-
-function Item<T extends ValueType>(props: ItemPropsWithChildren<T>);
-function Item<T extends ValueType>(props: ItemPropsWithIcon<T>);
-function Item<T extends ValueType>({
-  _selected,
-  icon,
-  children,
-  ...rest
-}: Partial<BottomNavigatorItemProps<T>>): JSX.Element {
-  const styledButtonStyle = _selected
-    ? undefined
-    : { backgroundColor: 'transparent' };
-
-  const iconColorVariant = _selected ? 'primary' : 'secondary';
-
-  if (icon) {
-    return (
-      <TabContent style={styledButtonStyle} {...rest}>
-        <Icon colorVariant={iconColorVariant} size={'centi'} {...icon} />
-      </TabContent>
-    );
-  } else {
-    return <CustomTabContent>{children}</CustomTabContent>;
-  }
-}
-
-export default Item;

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

@@ -1,4 +0,0 @@
-export { default as BottomNavigator } from './BottomNavigator';
-export { BottomNavigatorProps } from './BottomNavigator';
-
-export type { BottomNavigatorItemProps } from './Item';

package/src/components/atoms/BottomNavigator/styled.ts

@@ -1,34 +0,0 @@
-import styled from '@emotion/native';
-import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
-import { PressableProps, ViewProps } from 'react-native';
-
-export const StyledView = styled.View<ViewProps & Partial<StyleProps>>`
-  flex-direction: row;
-  justify-content: space-between;
-  padding-horizontal: ${({ theme }) => theme.spacing.deca};
-  padding-bottom: ${({ theme }) => theme.spacing.kilo};
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-`;
-
-export const TabContainer = styled.Pressable<
-  { selected: boolean } & PressableProps & Partial<StyleProps>
->`
-  flex: 1;
-  margin-horizontal: ${({ theme }) => theme.spacing.mili};
-  padding-top: ${({ theme }) => theme.spacing.deca};
-  border-top-width: ${({ selected }) => (selected ? RFValueStr('2px') : 0)};
-  border-color: ${({ theme }) => theme.color.primary.medium};
-  align-items: center;
-  justify-content: flex-end;
-`;
-
-export const TabContent = styled.View<ViewProps & Partial<StyleProps>>`
-  aspect-ratio: 1;
-  justify-content: center;
-  align-items: center;
-  min-height: ${RFValueStr('48px')};
-  background-color: ${({ theme }) => theme.color.primary.xlight};
-  border-radius: ${({ theme }) => theme.borderRadius['mili']};
-`;
-
-export const CustomTabContent = styled.View<ViewProps & Partial<StyleProps>>``;

package/src/components/atoms/Button/Button.tsx

@@ -1,23 +0,0 @@
-import { Button as ButtonCore, ButtonProps } from '@tecsinapse/react-core';
-import React, { FC, useCallback } from 'react';
-import { Keyboard } from 'react-native';
-
-export type ButtonNativeProps = ButtonProps & {
-  autoDismissKeyboard?: boolean;
-};
-
-export const Button: FC<ButtonNativeProps> = ({
-  autoDismissKeyboard = true,
-  onPress,
-  ...others
-}) => {
-  const handleOnPress = useCallback(
-    event => {
-      autoDismissKeyboard && Keyboard.dismiss();
-      onPress?.(event);
-    },
-    [onPress]
-  );
-
-  return <ButtonCore {...others} onPress={handleOnPress} />;
-};

package/src/components/atoms/Button/States/Error.tsx

@@ -1,9 +0,0 @@
-import { ButtonStateProps, Error as CoreError } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Text } from '../../Text';
-
-const Error: FC<ButtonStateProps> = props => {
-  return <CoreError {...props} textComponent={Text} />;
-};
-
-export default Error;

package/src/components/atoms/Button/States/Loading.tsx

@@ -1,12 +0,0 @@
-import {
-  ButtonStateProps,
-  Loading as CoreLoading,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Text } from '../../Text';
-
-const Loading: FC<ButtonStateProps> = props => {
-  return <CoreLoading {...props} textComponent={Text} />;
-};
-
-export default Loading;

package/src/components/atoms/Button/States/Success.tsx

@@ -1,12 +0,0 @@
-import {
-  ButtonStateProps,
-  Success as CoreSuccess,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Text } from '../../Text';
-
-const Success: FC<ButtonStateProps> = props => {
-  return <CoreSuccess {...props} textComponent={Text} />;
-};
-
-export default Success;

package/src/components/atoms/Button/States/index.ts

@@ -1,3 +0,0 @@
-export { default as Error } from './Error';
-export { default as Loading } from './Loading';
-export { default as Success } from './Success';

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

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export type { ButtonNativeProps } from './Button';
-export { Error, Loading, Success } from './States';

package/src/components/atoms/GroupButton/GroupButtonOption.tsx

@@ -1,12 +0,0 @@
-import {
-  GroupButtonOption as CoreGroupButtonOption,
-  GroupButtonOptionProps,
-} from '@tecsinapse/react-core';
-import React from 'react';
-import { Text } from '../Text';
-
-const GroupButtonOption = (props: GroupButtonOptionProps): JSX.Element => {
-  return <CoreGroupButtonOption {...props} TextComponent={Text} />;
-};
-
-export default GroupButtonOption;

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

@@ -1 +0,0 @@
-export { default as GroupButtonOption } from './GroupButtonOption';

package/src/components/atoms/Header/Header.tsx

@@ -1,52 +0,0 @@
-import { ViewProps } from 'react-native';
-import { StyledView, FloatingButton, Dummy } from './styled';
-import { ButtonProps, Icon, IconProps } from '@tecsinapse/react-core';
-import * as React from 'react';
-
-type Attachable = ButtonProps & {
-  icon: IconProps;
-};
-
-export interface HeaderProps extends ViewProps {
-  rightButton?: Attachable;
-  leftButton?: Attachable;
-}
-
-const Header: React.FC<HeaderProps> = ({
-  rightButton,
-  leftButton,
-  children,
-  ...rest
-}) => {
-  return (
-    <StyledView {...rest}>
-      {leftButton ? (
-        <FloatingButton
-          {...leftButton}
-          variant={leftButton?.variant || 'filled'}
-          color={leftButton?.color || 'primary'}
-          size={leftButton?.size || 'small'}
-        >
-          {leftButton?.icon && <Icon {...leftButton?.icon} />}
-        </FloatingButton>
-      ) : (
-        <Dummy disabled />
-      )}
-      {children}
-      {rightButton ? (
-        <FloatingButton
-          {...rightButton}
-          variant={rightButton?.variant || 'filled'}
-          color={rightButton?.color || 'primary'}
-          size={rightButton?.size || 'small'}
-        >
-          {rightButton?.icon && <Icon {...rightButton?.icon} />}
-        </FloatingButton>
-      ) : (
-        <Dummy disabled />
-      )}
-    </StyledView>
-  );
-};
-
-export default Header;

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

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

package/src/components/atoms/Header/styled.ts

@@ -1,18 +0,0 @@
-import styled from '@emotion/native';
-import { Button, ButtonProps, StyleProps } from '@tecsinapse/react-core';
-
-export const StyledView = styled.View<Partial<StyleProps>>`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${({ theme }) => theme.spacing.deca};
-  width: 100%;
-`;
-
-export const FloatingButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
-  aspect-ratio: 1;
-`;
-
-export const Dummy = styled(FloatingButton)`
-  background-color: rgba(0, 0, 0, 0);
-`;

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

@@ -1,107 +0,0 @@
-import {
-  FontStackType,
-  FontWeightType,
-  Hint,
-  InputContainer,
-  InputContainerProps,
-  InputElementProps,
-  RFValue,
-  useInputFocus,
-} from '@tecsinapse/react-core';
-import React from 'react';
-import { StyleProp, TextInput, View, ViewStyle } from 'react-native';
-import { Text } from '../Text';
-import { StyledNativeInput } from './styled';
-
-export interface InputNativeProps
-  extends Omit<InputElementProps, 'style'>,
-    InputContainerProps {
-  inputFontStack?: FontStackType;
-  inputFontWeight?: FontWeightType;
-}
-
-const Input = React.forwardRef<TextInput, InputNativeProps>(
-  (
-    {
-      label,
-      labelColor,
-      labelColorVariant,
-      labelColorTone,
-      labelTypography,
-      labelStack,
-      labelWeight,
-      leftComponent,
-      rightComponent,
-      disabled,
-      borderColor,
-      borderColorGradation,
-      inputFontStack = 'default',
-      inputFontWeight = 'bold',
-      inputContainerStyle,
-      variant = 'default',
-      hintComponent,
-      hint,
-      onFocus,
-      onBlur,
-      value,
-      placeholder,
-      ...rest
-    },
-    ref
-  ) => {
-    const _hint = hintComponent || (
-      <Hint TextComponent={Text} text={hint} variant={variant} />
-    );
-    const { focused, handleBlur, handleFocus } = useInputFocus(
-      onFocus,
-      onBlur,
-      !disabled
-    );
-
-    const internalStyle: StyleProp<ViewStyle> = {
-      minHeight: RFValue(50),
-      ...{ inputContainerStyle },
-    };
-    const onlyLabel = label && !placeholder;
-
-    return (
-      <View>
-        <InputContainer
-          label={value ? label : undefined}
-          labelColor={labelColor}
-          labelColorVariant={labelColorVariant}
-          labelColorTone={labelColorTone}
-          labelTypography={labelTypography}
-          labelStack={labelStack}
-          labelWeight={labelWeight}
-          LabelComponent={Text}
-          leftComponent={leftComponent}
-          rightComponent={rightComponent}
-          borderColor={borderColor}
-          borderColorGradation={borderColorGradation}
-          inputContainerStyle={internalStyle}
-          focused={focused}
-          disabled={disabled}
-          variant={variant}
-        >
-          <StyledNativeInput
-            {...rest}
-            placeholder={onlyLabel ? label : placeholder}
-            value={value}
-            ref={ref}
-            fontStack={inputFontStack}
-            fontWeight={inputFontWeight}
-            disabled={disabled}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </InputContainer>
-        {hint && _hint}
-      </View>
-    );
-  }
-);
-
-Input.displayName = 'Input';
-
-export default Input;

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

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

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

@@ -1,16 +0,0 @@
-import styled from '@emotion/native';
-import { InputElement, StyleProps } from '@tecsinapse/react-core';
-import { Font, fontStyles } from '../Text/styled';
-import { InputNativeProps } from './Input';
-
-const StyledNativeInputBase = styled(InputElement)<
-  Partial<InputNativeProps> & Partial<StyleProps>
->`
-  height: ${({ theme }) => theme.typography.h5.lineHeight};
-  width: 100%;
-  padding: 0;
-`;
-
-export const StyledNativeInput = styled(StyledNativeInputBase)<
-  Font & Partial<InputNativeProps> & Partial<StyleProps>
->(fontStyles);

package/src/components/atoms/InputMask/InputMask.tsx

@@ -1,102 +0,0 @@
-import {
-  FontStackType,
-  FontWeightType,
-  Hint,
-  InputContainerProps,
-  InputMaskElementProps,
-  useInputFocus,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { View } from 'react-native';
-import { StyledInputContainer, StyledNativeInputMask } from './styled';
-import { Text } from '../Text';
-
-export interface InputMaskNativeProps
-  extends Omit<InputMaskElementProps, 'style'>,
-    InputContainerProps {
-  inputFontStack?: FontStackType;
-  inputFontWeight?: FontWeightType;
-}
-
-const InputMask: FC<InputMaskNativeProps> = React.forwardRef(
-  (
-    {
-      label,
-      labelColor,
-      labelColorVariant,
-      labelColorTone,
-      labelTypography,
-      labelStack,
-      labelWeight,
-      leftComponent,
-      rightComponent,
-      disabled,
-      style,
-      borderColor,
-      borderColorGradation,
-      inputFontStack = 'default',
-      inputFontWeight = 'bold',
-      inputContainerStyle,
-      variant = 'default',
-      hintComponent,
-      hint,
-      onFocus,
-      onBlur,
-      value,
-      placeholder,
-      ...rest
-    },
-    ref
-  ) => {
-    const _hint = hintComponent || (
-      <Hint TextComponent={Text} text={hint} variant={variant} />
-    );
-    const { focused, handleBlur, handleFocus } = useInputFocus(
-      onFocus,
-      onBlur,
-      !disabled
-    );
-
-    const onlyLabel = label && !placeholder;
-
-    return (
-      <View style={style}>
-        <StyledInputContainer
-          label={String(value) ? label : undefined}
-          labelColor={labelColor}
-          labelColorVariant={labelColorVariant}
-          labelColorTone={labelColorTone}
-          labelTypography={labelTypography}
-          labelStack={labelStack}
-          labelWeight={labelWeight}
-          LabelComponent={Text}
-          leftComponent={leftComponent}
-          rightComponent={rightComponent}
-          borderColor={borderColor}
-          borderColorGradation={borderColorGradation}
-          inputContainerStyle={inputContainerStyle}
-          focused={focused}
-          disabled={disabled}
-          variant={variant}
-        >
-          <StyledNativeInputMask
-            {...rest}
-            placeholder={onlyLabel ? label : placeholder}
-            value={value}
-            ref={ref}
-            fontStack={inputFontStack}
-            fontWeight={inputFontWeight}
-            disabled={disabled}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </StyledInputContainer>
-        {hint && _hint}
-      </View>
-    );
-  }
-);
-
-InputMask.displayName = 'InputMask';
-
-export default InputMask;

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

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

package/src/components/atoms/InputMask/styled.ts

@@ -1,25 +0,0 @@
-import styled from '@emotion/native';
-import {
-  InputContainer,
-  InputMaskElement,
-  RFValueStr,
-  StyleProps,
-} from '@tecsinapse/react-core';
-import { Font, fontStyles } from '../Text/styled';
-import { InputMaskNativeProps } from './InputMask';
-
-export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
-  min-height: ${RFValueStr('50px')};
-`;
-
-const StyledNativeInputMaskBase = styled(InputMaskElement)<
-  Partial<InputMaskNativeProps> & Partial<StyleProps>
->`
-  height: ${({ theme }) => theme.typography.h5.lineHeight};
-  width: 100%;
-  padding: 0;
-`;
-
-export const StyledNativeInputMask = styled(StyledNativeInputMaskBase)<
-  Font & Partial<InputMaskNativeProps> & Partial<StyleProps>
->(fontStyles);

package/src/components/atoms/Modal/ModalGroupManager.tsx

@@ -1,33 +0,0 @@
-import React, { FC, ReactElement, useState } from 'react';
-import { Modal as RNModal, ModalProps } from 'react-native';
-import { createModalLifecycleHandler } from './ModalLifecycleHandler';
-import { IBaseModal } from './ui/types';
-
-export const modalLifecycle = createModalLifecycleHandler();
-
-/**
- * It's responsable for rendering all the modal components.
- *
- * @param param0
- * @returns
- */
-export const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {
-  modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]));
-  const _render = modalLifecycle.render();
-  const hasModals = _render.length > 0;
-
-  return (
-    <>
-      {children}
-      <RNModal
-        transparent
-        statusBarTranslucent
-        animationType="none"
-        visible={hasModals}
-        {...others}
-      >
-        {_render}
-      </RNModal>
-    </>
-  );
-};