@tecsinapse/react-core 1.21.2 → 1.21.3

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

@@ -1,66 +0,0 @@
-import React from 'react';
-import { SpacingType } from '@tecsinapse/react-core';
-
-export interface IGrid {
-  children: JSX.Element[];
-  /** Layout should represent the multiplier of columns to fill the rows properly.
-   * Example:
-   * const layout = [
-   *   [6, 6], // Two elements on row
-   *   [4, 4, 4], // Three elements on row
-   *   [12], // One element on row
-   * ];
-   * */
-  layout?: number[][];
-  /** Number of grid columns to be considered (not the number of elements per row) */
-  columns?: number;
-  spacing?:
-    | SpacingType
-    | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-      };
-}
-
-export type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
-export type FlexAlignBase = FlexPositioning | 'stretch';
-export type FlexAlignType = FlexAlignBase | 'baseline';
-export type FlexSpacing = 'space-between' | 'space-around';
-export type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
-
-export type GridSpacing =
-  | SpacingType
-  | {
-      top?: SpacingType;
-      right?: SpacingType;
-      bottom?: SpacingType;
-      left?: SpacingType;
-    };
-
-export interface IGridItem {
-  children: React.ReactElement;
-  /** Number of columns to fill */
-  span: number;
-  /** You don't have to give this property since is inherited from Grid */
-  columns?: number;
-  loading?: boolean;
-  /** If your GridItem has a loading state, specify the component here (Skeleton) */
-  loadingComponent?: React.ReactElement;
-  /** Flex properties below */
-  alignContent?: FlexAlignBase | FlexSpacing;
-  alignItems?: FlexAlignType;
-  alignSelf?: 'auto' | FlexAlignType;
-  flex?: number;
-  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  flexGrow?: number;
-  flexShrink?: number;
-  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
-  /** You don't have to give this property since is inherited from Grid */
-  spacing?: GridSpacing;
-  /** Used to wrap children in a View when its style extrapolates the dimensions*/
-  wrapper?: boolean;
-}
-
-export { getGridItemColumSpan, getGridItemPadding } from './functions';

package/src/components/molecules/HintInputContainer/HintInputContainer.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
-import {
-  Hint,
-  InputVariantType,
-  PressableInputContainer,
-  PressableInputContainerProps,
-} from '../../atoms/Input';
-import { TextProps } from '../../atoms/Text';
-
-export interface HintInputContainerProps extends PressableInputContainerProps {
-  viewStyle?: StyleProp<ViewStyle>;
-  focused: boolean;
-  LabelComponent?: React.FC<TextProps>;
-  onPress?: () => void | never;
-  disabled?: boolean;
-  hint?: string;
-  hintComponent?: JSX.Element;
-  variant?: InputVariantType;
-  rightComponent?: JSX.Element;
-}
-
-const HintInputContainer: React.FC<HintInputContainerProps> = ({
-  viewStyle,
-  onPress,
-  focused,
-  disabled,
-  LabelComponent,
-  variant = 'default',
-  rightComponent,
-  children,
-  hint,
-  hintComponent,
-  ...rest
-}) => {
-  const _hint = hintComponent || (
-    <Hint TextComponent={LabelComponent} text={hint} variant={variant} />
-  );
-
-  return (
-    <View style={viewStyle}>
-      <PressableInputContainer
-        onPress={onPress}
-        focused={focused}
-        disabled={disabled}
-        LabelComponent={LabelComponent}
-        variant={variant}
-        rightComponent={rightComponent}
-        {...rest}
-      >
-        {children}
-      </PressableInputContainer>
-      {hint && _hint}
-    </View>
-  );
-};
-
-export default HintInputContainer;

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

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

package/src/components/molecules/IconTextButton/IconComponent.tsx

@@ -1,27 +0,0 @@
-import { ButtonSizeType, FontColor, IconProps } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Icon } from '../../atoms/Icon';
-
-interface IconComponentProps {
-  iconProps?: IconProps;
-  size?: ButtonSizeType;
-  defaultFontColor: keyof FontColor;
-}
-
-const IconComponent: FC<IconComponentProps> = ({
-  iconProps,
-  size = 'default',
-  defaultFontColor,
-}) => {
-  return iconProps ? (
-    <Icon
-      size={iconProps.size ?? size === 'small' ? 'deca' : 'kilo'}
-      fontColor={iconProps.fontColor ?? defaultFontColor}
-      {...iconProps}
-    />
-  ) : (
-    <></>
-  );
-};
-
-export default React.memo(IconComponent);

package/src/components/molecules/IconTextButton/IconTextButton.ts

@@ -1,10 +0,0 @@
-import { ButtonProps, IconProps, TextProps } from '@tecsinapse/react-core';
-
-export type IconPositionOptions = 'left' | 'right';
-
-export interface IconTextButtonProps extends ButtonProps {
-  iconProps?: IconProps;
-  iconPosition?: IconPositionOptions;
-  textProps?: TextProps;
-  label?: string;
-}

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

@@ -1,5 +0,0 @@
-export { default as IconComponent } from './IconComponent';
-export type {
-  IconPositionOptions,
-  IconTextButtonProps,
-} from './IconTextButton';

package/src/components/molecules/InputPassword/InputPasswordIcon.tsx

@@ -1,29 +0,0 @@
-import React, { FC } from 'react';
-import { ButtonProps } from '../../atoms/Button';
-import { Icon } from '../../atoms/Icon';
-import { StyledPasswordButtonIcon } from './styled';
-
-interface InputPasswordIconProps extends ButtonProps {
-  revealed: boolean;
-  onChangeState: (revealed: boolean) => void;
-}
-
-const InputPasswordIcon: FC<InputPasswordIconProps> = ({
-  revealed,
-  onChangeState,
-  ...rest
-}) => {
-  const icon = revealed ? 'eye-outline' : 'eye-off-outline';
-  return (
-    <StyledPasswordButtonIcon
-      {...rest}
-      variant="text"
-      size="small"
-      onPress={() => onChangeState(!revealed)}
-    >
-      <Icon name={icon} type="ionicon" size="centi" />
-    </StyledPasswordButtonIcon>
-  );
-};
-
-export default InputPasswordIcon;

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

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

package/src/components/molecules/InputPassword/styled.ts

@@ -1,7 +0,0 @@
-import styled from '@emotion/native';
-import { StyleProps } from '../../../types/defaults';
-import { Button } from '../../atoms/Button';
-
-export const StyledPasswordButtonIcon = styled(Button)<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.centi};
-`;

package/src/components/molecules/LabeledSwitch/LabeledSwitch.tsx

@@ -1,9 +0,0 @@
-import { SwitchProps } from '../../atoms/Switch';
-
-export type LabelPositionOptions = 'left' | 'right';
-
-export interface LabeledSwitchProps extends SwitchProps {
-  label: string;
-  labelPosition?: LabelPositionOptions;
-  pressableLabel?: boolean;
-}

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

@@ -1 +0,0 @@
-export type { LabeledSwitchProps, LabelPositionOptions } from './LabeledSwitch';

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -1,134 +0,0 @@
-import React from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { ColorGradationType, ColorType } from '../../../types/defaults';
-import { Icon, IconProps } from '../../atoms/Icon';
-import {
-  ContentContainer,
-  DismissContainer,
-  IconContainer,
-  SnackbarContainer,
-  StyledContainerFlexRow,
-  StyledProgressBar,
-  TextContainer,
-} from './styled';
-
-export interface SnackbarProps {
-  colorVariant?: ColorType;
-  colorTone?: ColorGradationType;
-  open: boolean;
-  /** Close callback */
-  onClose?: () => void;
-  /** Snackbar is closable */
-  dismissable?: boolean;
-  /** Time in miliseconds for auto hide */
-  timeout?: number;
-  leftIcon?: IconProps;
-  /** Properties for close icon */
-  rightIcon?: Omit<IconProps, 'name' | 'type'>;
-  anchor?: 'top' | 'bottom';
-  /** Distance from anchorage (results in px) */
-  anchorDistance?: number;
-  style?: StyleProp<ViewStyle>;
-}
-
-const Snackbar: React.FC<SnackbarProps> = ({
-  children,
-  open = true,
-  onClose,
-  dismissable = false,
-  timeout = undefined,
-  leftIcon,
-  colorTone = 'xlight',
-  colorVariant = 'primary',
-  rightIcon = { colorTone: 'medium', colorVariant: 'primary' },
-  anchor = 'bottom',
-  anchorDistance,
-  style,
-}) => {
-  const fadeAnim = React.useRef(new Animated.Value(0)).current;
-  const duration = 500;
-
-  const fadeIn = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      useNativeDriver: true,
-      duration,
-    }).start(() => timeout && fadeOut());
-  };
-
-  const fadeOut = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 0,
-      useNativeDriver: true,
-      duration,
-      delay: timeout ? timeout - duration : 0,
-    }).start();
-  };
-
-  React.useEffect(() => {
-    if (open) {
-      fadeIn();
-    }
-    if (open && timeout) {
-      setTimeout(() => {
-        onClose?.();
-      }, timeout + duration);
-    }
-  }, [open, timeout]);
-
-  return (
-    <SnackbarContainer
-      colorVariant={colorVariant}
-      colorTone={colorTone}
-      elevated
-      anchor={anchor}
-      anchorDistance={anchorDistance}
-      visible={open}
-      style={[{ opacity: fadeAnim as unknown as number }, style]}
-      timeout={timeout}
-    >
-      <StyledContainerFlexRow>
-        <ContentContainer>
-          {leftIcon && (
-            <IconContainer>
-              <Icon {...leftIcon} size="centi" />
-            </IconContainer>
-          )}
-          <TextContainer>{children}</TextContainer>
-        </ContentContainer>
-        {dismissable && (
-          <DismissContainer
-            effect="none"
-            onPress={() => {
-              fadeOut();
-              setTimeout(() => {
-                fadeAnim.setValue(0);
-                onClose?.();
-              }, duration);
-            }}
-          >
-            <Icon
-              {...rightIcon}
-              size="centi"
-              name="close"
-              type="material-community"
-            />
-          </DismissContainer>
-        )}
-      </StyledContainerFlexRow>
-      {timeout && open && (
-        <StyledProgressBar
-          valueNow={0}
-          valueMax={100}
-          valueMin={0}
-          animate={true}
-          color={colorVariant}
-          colorTone="medium"
-          animationParameters={{ direction: 'left', duration: timeout }}
-        />
-      )}
-    </SnackbarContainer>
-  );
-};
-
-export default Snackbar;

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

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

package/src/components/molecules/Snackbar/styled.ts

@@ -1,103 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { View } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { RFValue } from '../../../utils';
-import { Paper } from '../../atoms/Paper';
-import { PressableSurface } from '../../atoms/PressableSurface';
-import { ProgressBar } from '../../atoms/ProgressBar';
-import { SnackbarProps } from './Snackbar';
-
-const baseStyles = ({
-  theme,
-  colorTone = 'xlight',
-  colorVariant = 'primary',
-  visible,
-}: StyleProps & Partial<SnackbarProps> & { visible: boolean }) => css`
-  padding: 0;
-  border-radius: ${theme.borderRadius.mili};
-  background-color: ${theme.color[colorVariant][colorTone]};
-  position: absolute;
-  z-index: ${theme.zIndex.modal};
-  display: ${visible ? 'flex' : 'none'};
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: stretch;
-`;
-
-const anchorTop = ({
-  theme,
-  anchor,
-  anchorDistance,
-}: Partial<SnackbarProps> & StyleProps) => {
-  return (
-    anchor === 'top' &&
-    css`
-      top: ${anchorDistance
-        ? `${RFValue(anchorDistance)}px`
-        : theme.spacing.deca};
-    `
-  );
-};
-
-const anchorBottom = ({
-  theme,
-  anchor,
-  anchorDistance,
-}: Partial<SnackbarProps> & StyleProps) => {
-  return (
-    anchor === 'bottom' &&
-    css`
-      bottom: ${anchorDistance
-        ? `${RFValue(anchorDistance)}px`
-        : theme.spacing.deca};
-    `
-  );
-};
-
-export const SnackbarContainer = styled(Paper)<
-  Partial<SnackbarProps & StyleProps> & { visible: boolean }
->(
-  props => css`
-    ${baseStyles(props)}
-    ${anchorBottom(props)}
-    ${anchorTop(props)}
-  `
-);
-
-export const ContentContainer = styled(View)`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  flex-shrink: 1;
-`;
-
-export const IconContainer = styled(View)<Partial<StyleProps>>`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  margin-right: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const DismissContainer = styled(PressableSurface)<Partial<StyleProps>>`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  margin-left: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledProgressBar = styled(ProgressBar)<Partial<StyleProps>>`
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-`;
-
-export const StyledContainerFlexRow = styled(View)<Partial<StyleProps>>`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const TextContainer = styled(View)`
-  display: flex;
-  flex-shrink: 1;
-`;

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,97 +0,0 @@
-import React, { FC } from 'react';
-import { View } from 'react-native';
-import { FontStackType, FontWeightType } from '@tecsinapse/react-core';
-import {
-  Hint,
-  InputContainerProps,
-  InputElementProps,
-} from '../../atoms/Input';
-import { Text, TextProps } from '../../atoms/Text';
-import { StyledInputContainer } from './styled';
-
-export interface TextAreaProps
-  extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,
-    InputContainerProps {
-  inputFontStack?: FontStackType;
-  inputFontWeight?: FontWeightType;
-  maxCharCount?: number;
-  value: string;
-  // Omit below
-  TextComponent?: FC<TextProps>;
-  focused?: boolean;
-}
-
-const TextArea: FC<TextAreaProps> = ({
-  label,
-  labelColor,
-  labelColorVariant,
-  labelColorTone,
-  labelTypography,
-  labelStack,
-  labelWeight,
-  leftComponent,
-  rightComponent,
-  disabled,
-  style,
-  borderColor,
-  borderColorGradation,
-  inputContainerStyle,
-  variant = 'default',
-  hintComponent,
-  hint,
-  TextComponent = Text,
-  focused,
-  children,
-  maxLength: _maxLenght,
-  value: _value,
-}) => {
-  let length = _value.length;
-  const maxLength = _maxLenght;
-  if (maxLength && length > maxLength) {
-    length = maxLength;
-  }
-
-  const _hint = hintComponent || (
-    <Hint TextComponent={TextComponent} text={hint} variant={variant} />
-  );
-
-  return (
-    <View style={style}>
-      <StyledInputContainer
-        label={label}
-        labelColor={labelColor}
-        labelColorVariant={labelColorVariant}
-        labelColorTone={labelColorTone}
-        labelTypography={labelTypography}
-        labelStack={labelStack}
-        labelWeight={labelWeight}
-        LabelComponent={TextComponent}
-        leftComponent={leftComponent}
-        rightComponent={rightComponent}
-        borderColor={borderColor}
-        borderColorGradation={borderColorGradation}
-        inputContainerStyle={inputContainerStyle}
-        focused={focused}
-        disabled={disabled}
-        variant={variant}
-      >
-        {children}
-        {maxLength && (
-          <TextComponent
-            colorVariant={'secondary'}
-            colorTone={'medium'}
-            typography={'label'}
-            fontStack={'default'}
-            fontWeight={'bold'}
-            style={{ textAlign: 'right' }}
-          >
-            {`${length}/${maxLength}`}
-          </TextComponent>
-        )}
-      </StyledInputContainer>
-      {hint && _hint}
-    </View>
-  );
-};
-
-export default TextArea;

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

@@ -1,3 +0,0 @@
-export { default as TextArea } from './TextArea';
-export type { TextAreaProps } from './TextArea';
-export { TextAreaInputBase } from './styled';

package/src/components/molecules/TextArea/styled.ts

@@ -1,22 +0,0 @@
-import styled from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { extractNumbersFromString, RFValue, RFValueStr } from '../../../utils';
-import { InputContainer, InputElement } from '../../atoms/Input';
-import { TextAreaProps } from './TextArea';
-
-export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
-  min-height: ${RFValueStr('50px')};
-`;
-
-export const TextAreaInputBase = styled(InputElement)<
-  Partial<TextAreaProps> & Partial<StyleProps>
->`
-  max-height: ${({ theme, numberOfLines }) =>
-    `${RFValue(
-      extractNumbersFromString(theme.typography.h5.lineHeight) *
-        (numberOfLines || 1)
-    )}px`};
-  width: 100%;
-  padding: 0;
-  margin: ${RFValueStr('3px')} 0;
-`;

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useDebouncedState } from './useDebouncedState';
-export { useTheme } from './useTheme';

package/src/hooks/useDebouncedState.ts

@@ -1,24 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
-
-/**
- * @param initialState
- * @param timeoutCallback callback to be called after bouncing ends. Should be memoized.
- * @param timeoutMs
- */
-export function useDebouncedState<S>(
-  initialState: S | (() => S),
-  timeoutCallback?: (state: S) => void,
-  timeoutMs = 166
-): [S, Dispatch<SetStateAction<S>>] {
-  const timeoutId = useRef<number>();
-
-  const [state, setState] = useState<S>(initialState);
-
-  useEffect(() => {
-    if (timeoutId.current) clearTimeout(timeoutId.current);
-    if (timeoutCallback)
-      timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
-  }, [state]);
-
-  return [state, setState];
-}

package/src/hooks/useTheme.ts

@@ -1,4 +0,0 @@
-import { useTheme as useEmotionTheme } from '@emotion/react';
-import { ThemeProp } from '../types/defaults';
-
-export const useTheme = (): ThemeProp => useEmotionTheme() as ThemeProp;