@tecsinapse/react-core 1.21.2 → 1.21.3

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

@@ -1,128 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export interface MaskValue {
-  formatted?: string;
-  raw?: string | number;
-}
-
-export type MaskType = string | RegExp | Array<RegExp>;
-
-/**
- * TODO:
- * @param value
- * @param mask
- * @returns
- */
-export const mergeMask = (value = '', mask: MaskType[]): MaskValue => {
-  let formatted = '';
-  let raw = '';
-  let iMask = 0;
-  let iChars = 0;
-
-  while (!(iMask === mask.length || iChars === value.length)) {
-    const maskChar = mask[iMask];
-    const valueChar = value[iChars];
-
-    if (maskChar === valueChar) {
-      formatted += maskChar;
-      iChars++;
-      iMask++;
-      continue;
-    }
-
-    const rawValueChar = value[iChars];
-
-    if (typeof maskChar === 'object') {
-      iChars++;
-
-      const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;
-      const matchRegex = RegExp(maskCharRegex).test(valueChar);
-
-      if (matchRegex) {
-        formatted += valueChar;
-        raw += rawValueChar;
-        iMask++;
-      }
-    } else {
-      formatted += maskChar;
-      iMask++;
-    }
-  }
-
-  return { raw, formatted };
-};
-
-export const getMask = (
-  mask: MaskType[] | ((value: string) => MaskType[]),
-  newValue: string
-): MaskType[] => {
-  let maskArray: MaskType[];
-  const regexArray: MaskType[] = [];
-
-  if (typeof mask === 'function') {
-    maskArray = mask(newValue);
-  } else {
-    maskArray = mask;
-  }
-
-  maskArray.forEach(exp => {
-    if (typeof exp !== 'string') {
-      if (Array.isArray(exp)) regexArray.push(exp);
-      else regexArray.push(exp);
-    } else {
-      for (let i = 0; i < exp.length; i++) {
-        if (exp[i] === '\\') {
-          regexArray.push(exp[i + 1]);
-          i++;
-        } else {
-          if (exp[i] === '9') regexArray.push(/\d/);
-          else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);
-          else regexArray.push(exp[i]);
-        }
-      }
-    }
-  });
-
-  return regexArray;
-};
-
-/**
- * TODO:
- * @param mask
- * @param defaultValue
- * @returns
- */
-export const useStringMask = (
-  mask: MaskType[] | ((value: string) => MaskType[]),
-  defaultValue?: string | number
-): [MaskValue, (text: string | number) => void] => {
-  const applyMask = useCallback(
-    (value = ''): MaskValue => {
-      const selectedMask = getMask(mask, value);
-      const { formatted, raw } = mergeMask(value, selectedMask);
-
-      return {
-        raw,
-        formatted,
-      };
-    },
-    [mask]
-  );
-
-  const [value, setValue] = useState<MaskValue>(
-    applyMask(defaultValue?.toString())
-  );
-
-  const handleChangeValue = useCallback(
-    (formattedValue: string | number) => {
-      const { raw, formatted } = applyMask(formattedValue?.toString());
-      setValue({
-        raw,
-        formatted,
-      });
-    },
-    [applyMask, setValue]
-  );
-
-  return [value, handleChangeValue];
-};

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

@@ -1,16 +0,0 @@
-export { default as Hint } from './Hint';
-export * from './hooks/useInputFocus';
-export * from './hooks/useNumberMask';
-export * from './hooks/useStringMask';
-export { default as InputContainer } from './InputContainer/InputContainer';
-export type {
-  InputContainerProps,
-  InputVariantType,
-} from './InputContainer/InputContainer';
-export { default as InputElement } from './InputElement/InputElement';
-export type { InputElementProps } from './InputElement/InputElement';
-export { default as InputMaskElement } from './InputMaskElement/InputMaskElement';
-export type { InputMaskElementProps } from './InputMaskElement/InputMaskElement';
-export { PressableInputContainer } from './PressableInputContainer';
-export type { PressableInputContainerProps } from './PressableInputContainer';
-export { StyledBorderKeeper, disabledInputStyles } from './styled';

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

@@ -1,130 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { TextInput } from 'react-native';
-import { InputElementProps } from '.';
-import { StyleProps } from '../../../types/defaults';
-import { RFValueStr } from '../../../utils/ResponsiveFontSize';
-import { InputContainerProps } from './InputContainer/InputContainer';
-import { Icon } from '../Icon';
-const leftIconStyles = ({
-  leftComponent,
-  theme,
-}: Partial<InputContainerProps> & StyleProps) =>
-  !leftComponent &&
-  css`
-    padding-left: ${theme.spacing.centi};
-  `;
-
-const rightIconStyles = ({
-  rightComponent,
-  theme,
-}: Partial<InputContainerProps> & StyleProps) =>
-  !rightComponent &&
-  css`
-    padding-right: ${theme.spacing.centi};
-  `;
-
-const disabledContainerStyles = ({
-  disabled,
-}: Partial<InputContainerProps> & StyleProps) =>
-  disabled &&
-  css`
-    background-color: transparent;
-  `;
-
-export const disabledInputStyles = ({
-  disabled,
-  theme,
-}: Partial<InputContainerProps> & Partial<StyleProps>) =>
-  disabled &&
-  css`
-    color: ${theme?.color.secondary.light};
-  `;
-
-const focusedStyles = ({
-  focused,
-  borderColor = 'secondary',
-  theme,
-}: Partial<InputContainerProps> & StyleProps) =>
-  focused &&
-  css`
-    border-width: ${theme.borderWidth.nano};
-    border-color: ${theme.color[borderColor].dark};
-  `;
-
-export const StyledIconContent = styled.View<Partial<StyleProps>>`
-  z-index: ${({ theme }) => theme.zIndex.default};
-  flex-direction: row;
-  align-items: center;
-`;
-
-export const StyledInputContainer = styled.View<
-  Partial<InputContainerProps> & Partial<StyleProps>
->`
-  flex-direction: row;
-  align-items: center;
-  min-height: ${RFValueStr('44px')};
-`;
-
-export const StyledInputElementBase = styled(TextInput)<
-  InputElementProps & Partial<StyleProps>
->`
-  font-family: ${({ theme }) => `'${theme.font.stack.default}'`};
-  font-size: ${({ theme }) => theme.typography.base.fontSize};
-  font-weight: ${({ theme }) => theme.font.weight.bold};
-  color: ${({ theme }) => theme.font.color.dark};
-`;
-
-export const StyledLabelContainer = styled.View<
-  Partial<InputContainerProps> & Partial<StyleProps>
->(
-  props => css`
-    flex: 1;
-    padding: ${props.theme.spacing.micro} 0;
-    ${leftIconStyles(props)}
-    ${rightIconStyles(props)}
-  `
-);
-
-const StyledBorderKeeperBase = styled.View<
-  Partial<InputContainerProps> & Partial<StyleProps>
->`
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-  border-color: ${({
-    theme,
-    borderColor = 'secondary',
-    borderColorGradation = 'light',
-  }) => theme.color[borderColor][borderColorGradation]};
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-  border-width: ${({ theme }) => theme.borderWidth.pico};
-  position: absolute;
-  width: 100%;
-  height: 100%;
-`;
-
-export const StyledBorderKeeper = styled(StyledBorderKeeperBase)<
-  Partial<StyleProps>
->(
-  props => css`
-    ${focusedStyles(props)}
-    ${disabledContainerStyles(props)}
-  `
-);
-
-export const StyledInputElement = styled(StyledInputElementBase)<
-  InputElementProps & Partial<StyleProps>
->(
-  props => css`
-    width: 100%;
-    ${disabledInputStyles(props)}
-  `
-);
-
-export const StyledHintContainer = styled.View<Partial<StyleProps>>`
-  margin-top: ${({ theme }) => theme.spacing.micro};
-  flex-direction: row;
-  align-items: center;
-`;
-
-export const StyledHintIcon = styled(Icon)<Partial<StyleProps>>`
-  margin-right: ${({ theme }) => theme.spacing.micro};
-`;

package/src/components/atoms/Paper/Paper.stories.tsx

@@ -1,27 +0,0 @@
-import styled from '@emotion/native';
-import { Story } from '@storybook/react';
-import React from 'react';
-import Paper, { PaperProps } from './Paper';
-import { StyleProps } from '../../../types/defaults';
-
-export default {
-  title: 'Hybrid/Paper',
-  component: Paper,
-};
-
-const Template: Story<PaperProps> = args => {
-  return <StyledPaper {...args} />;
-};
-
-export const Base = Template.bind({});
-
-const StyledPaper = styled(Paper)<Partial<StyleProps>>`
-  border-color: ${({ theme }) => theme.color.secondary.light};
-  border-width: ${({ theme }) => theme.borderWidth.pico};
-  width: 250px;
-  height: 100px;
-`;
-
-Base.args = {
-  elevated: false,
-};

package/src/components/atoms/Paper/Paper.tsx

@@ -1,21 +0,0 @@
-import React, { FC } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { StyledPaper } from './styled';
-
-export interface PaperProps {
-  /** Creates elevation shadow */
-  elevated?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-const Paper: FC<PaperProps> = ({
-  children,
-  elevated = false,
-  ...rest
-}): JSX.Element => (
-  <StyledPaper {...rest} elevated={elevated}>
-    {children}
-  </StyledPaper>
-);
-
-export default Paper;

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

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

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

@@ -1,14 +0,0 @@
-import { Animated } from 'react-native';
-import styled, { css } from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { PaperProps } from './Paper';
-import { baseStyles, elevatedStyles } from '../shared/PaperAndCard';
-
-export const StyledPaper = styled(Animated.View)<
-  PaperProps & Partial<StyleProps>
->(
-  props => css`
-    ${baseStyles(props)}
-    ${elevatedStyles(props)}
-  `
-);

package/src/components/atoms/PressableSurface/PressableSurface.tsx

@@ -1,82 +0,0 @@
-import { useTheme } from '@emotion/react';
-import React, { FC } from 'react';
-import { Pressable, PressableProps, StyleProp, ViewStyle } from 'react-native';
-import { ThemeProp } from '../../../types/defaults';
-import { lightenDarkenColor } from '../../../utils';
-
-const COLOR_VARIATION_FACTOR = 25;
-
-export interface PressableSurfaceProps extends PressableProps {
-  effect?: 'darken' | 'lighten' | 'none';
-  surfaceColor?: string;
-  effectIntensity?: number;
-  effectStyle?: (pressed: boolean) => StyleProp<ViewStyle>;
-}
-
-const PressableSurface: FC<PressableSurfaceProps> = ({
-  children,
-  surfaceColor,
-  effect,
-  effectIntensity,
-  effectStyle,
-  style,
-  ...rest
-}) => {
-  const theme = useTheme() as ThemeProp;
-  let effectBaseColor = theme.miscellaneous.surfaceColor;
-  let bgColor = 'transparent';
-
-  if (surfaceColor) {
-    effectBaseColor = surfaceColor;
-    bgColor = effectBaseColor;
-  }
-
-  const readyStyle = prepareStyle(
-    { effect, effectIntensity, style, effectStyle },
-    effectBaseColor,
-    bgColor
-  );
-  return (
-    <Pressable {...rest} style={readyStyle}>
-      {children}
-    </Pressable>
-  );
-};
-
-const prepareStyle = (
-  props: PressableSurfaceProps,
-  effectColor: string,
-  bgColor: string
-): any => {
-  const {
-    effect = 'darken',
-    effectIntensity = COLOR_VARIATION_FACTOR,
-    style,
-    effectStyle,
-  } = props;
-
-  const lighten = lightenDarkenColor(effectColor, effectIntensity);
-  const darken = lightenDarkenColor(effectColor, -effectIntensity);
-  const composedStyle = [{ backgroundColor: bgColor }, style];
-
-  if (effectStyle) {
-    return ({ pressed }) => [composedStyle, effectStyle(pressed)];
-  }
-
-  switch (effect) {
-    case 'darken':
-      return applyEffectStyle(composedStyle, darken);
-
-    case 'lighten':
-      return applyEffectStyle(composedStyle, lighten);
-
-    case 'none':
-      return composedStyle;
-  }
-};
-
-const applyEffectStyle = (style: any, variation: string) => {
-  return ({ pressed }) => [style, pressed && { backgroundColor: variation }];
-};
-
-export default PressableSurface;

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

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

package/src/components/atoms/ProgressBar/ProgressBar.stories.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { ProgressBar, ProgressBarProps } from './index';
-import { Card } from '../Card';
-
-export default {
-  title: 'Hybrid/Progress Bar',
-  component: ProgressBar,
-};
-
-const Template: Story<ProgressBarProps> = ({ ...args }) => (
-  <Card style={{ width: 400 }}>
-    <ProgressBar {...args} />
-  </Card>
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  valueNow: 80,
-  animate: true,
-  segments: 5,
-  animationParameters: {
-    direction: 'right',
-    duration: 5000,
-  },
-};

package/src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -1,108 +0,0 @@
-import { useTheme } from '@emotion/react';
-import * as React from 'react';
-import { Animated, ViewProps } from 'react-native';
-import {
-  ColorGradationType,
-  ColorType,
-  ThemeProp,
-} from '@tecsinapse/react-core';
-import { extractNumbersFromString } from '../../../utils';
-import { Container, Progress, Segment } from './styled';
-
-export interface ProgressBarProps extends ViewProps {
-  /** Number of segments. Defaults to 1. Set to 1 when 0 or less */
-  segments?: number;
-  /** Minimum possible value (0% of the bar). Defaults to 0 */
-  valueMin?: number;
-  /** Maximum possible value (100% of the bar). Defaults to 100 */
-  valueMax?: number;
-  /** Current value */
-  valueNow: number | string;
-  /** Filled partition color. Defaults to 'primary' */
-  color?: ColorType;
-  /** Filled partition color tone. Defaults to 'medium' */
-  colorTone?: ColorGradationType;
-  /** Animation */
-  animate: boolean;
-  /** Parameters animation  */
-  animationParameters?: { direction: 'left' | 'right'; duration: number };
-}
-
-const ProgressBar: React.FC<ProgressBarProps> = ({
-  segments: _segments = 1,
-  valueMin = 0,
-  valueNow: _valueNow,
-  valueMax = 100,
-  color = 'primary',
-  colorTone = 'medium',
-  animate,
-  animationParameters,
-  ...rest
-}) => {
-  const theme = useTheme() as ThemeProp;
-  const animationValue = React.useRef(new Animated.Value(0)).current;
-
-  const valueNow =
-    typeof _valueNow === 'string'
-      ? extractNumbersFromString(_valueNow)
-      : _valueNow;
-
-  const totalProgress = ((valueNow - valueMin) / (valueMax - valueMin)) * 100;
-  const segments = Math.max(1, _segments);
-  const segmentWidth = 100 / Math.max(segments);
-
-  const items = [...Array(segments).keys()];
-
-  const segmentsRender = items.map(index => {
-    const max = segmentWidth * (index + 1);
-    const min = segmentWidth * index;
-    const minmax = (totalProgress - min) / (max - min);
-    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
-
-    let progressPercent: string | Animated.AnimatedInterpolation = `${width}%`;
-
-    if (animate && animationParameters) {
-      Animated.timing(animationValue, {
-        toValue: 1,
-        duration: animationParameters.duration / items.length,
-        useNativeDriver: false,
-        delay:
-          animationParameters.direction === 'right'
-            ? index * (animationParameters.duration / items.length)
-            : (items.length - index - 1) *
-              (animationParameters.duration / items.length),
-      }).start();
-
-      const rangeAnimation =
-        animationParameters?.direction === 'right'
-          ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`]
-          : [`${valueMax}%`, `${width}%`];
-
-      progressPercent = animationValue.interpolate?.({
-        inputRange: [0, 1],
-        outputRange: rangeAnimation,
-      });
-    }
-
-    return (
-      <Segment
-        key={index}
-        style={{
-          borderRightWidth: index == segments - 1 ? 0 : 2,
-        }}
-      >
-        <Progress
-          style={{
-            width: progressPercent,
-            backgroundColor: theme.color[color][colorTone],
-            borderRightWidth: width > 0 && width < 100 ? 2 : 0,
-          }}
-        />
-      </Segment>
-    );
-  });
-
-  return <Container {...rest}>{segmentsRender}</Container>;
-};
-
-export default ProgressBar;

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

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

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

@@ -1,25 +0,0 @@
-import styled from '@emotion/native';
-import { Animated } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { RFValueStr } from '../../../utils';
-
-export const Container = styled.View<Partial<StyleProps>>`
-  display: flex;
-  height: ${({ theme }) => theme.spacing.mili};
-  border-radius: ${({ theme }) => theme.spacing.mili};
-  width: 100%;
-  flex-direction: row;
-  overflow: hidden;
-`;
-
-export const Segment = styled.View<Partial<StyleProps>>`
-  flex: 1;
-  background-color: ${({ theme }) => theme.color.secondary.light};
-  border-right-width: ${RFValueStr('2px')};
-  border-color: ${({ theme }) => theme.color.secondary.xlight};
-`;
-
-export const Progress = styled(Animated.View)<Partial<StyleProps>>`
-  height: 100%;
-  border-color: ${({ theme }) => theme.color.secondary.xlight};
-`;

package/src/components/atoms/RadioButton/RadioButton.stories.tsx

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-import { RadioButtonProps, default as RadioButton } from './RadioButton';
-import { Text } from '../Text';
-import { Story } from '@storybook/react';
-
-export default {
-  title: 'Hybrid/Radio Button',
-  component: RadioButton,
-};
-
-const Template: Story<RadioButtonProps> = ({
-  labelPosition,
-  checked,
-  ...args
-}) => {
-  const [active, setActive] = useState(checked);
-
-  React.useEffect(() => {
-    setActive(checked);
-  }, [checked]);
-
-  return (
-    <RadioButton
-      {...args}
-      checked={active}
-      onChange={setActive}
-      labelPosition={labelPosition}
-    >
-      <Text>Radio Button</Text>
-    </RadioButton>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  labelPosition: 'right',
-  checked: false,
-};