@tecsinapse/react-core 1.21.2 → 1.21.3

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

@@ -1,81 +0,0 @@
-import React, { FC } from 'react';
-import { Pressable, StyleProp, ViewStyle } from 'react-native';
-import { ColorGradationType, ColorType } from '../../../types/defaults';
-import { Icon } from '../Icon';
-import { IconViewStyled, IconWrapper, ScaledView, ViewStyled } from './styled';
-
-export interface RadioButtonProps {
-  /** Element is checked */
-  checked?: boolean;
-  /** Change handler */
-  onChange?: (checked: boolean) => void;
-  /** Position of children */
-  labelPosition?: 'left' | 'right';
-  /** Element is not clickable */
-  disabled?: boolean;
-  /** Color definition from theme */
-  color?: ColorType;
-  /** Color gradation from theme */
-  colorTone?: ColorGradationType;
-  style?: StyleProp<ViewStyle>;
-}
-
-const RadioButton: FC<RadioButtonProps> = ({
-  children,
-  onChange,
-  checked,
-  labelPosition = 'right',
-  disabled = false,
-  color = 'primary',
-  colorTone = 'medium',
-  ...rest
-}): JSX.Element => {
-  const handleChange = () => {
-    onChange && onChange(!checked);
-  };
-
-  return (
-    <Pressable
-      {...rest}
-      disabled={disabled}
-      onPress={handleChange}
-      accessibilityRole="radio"
-    >
-      <ViewStyled>
-        {labelPosition === 'left' && children}
-        {checked && (
-          <IconViewStyled>
-            <IconWrapper>
-              <ScaledView>
-                <Icon
-                  name="circle"
-                  colorVariant={color}
-                  colorTone={colorTone}
-                  type="material-community"
-                  size="centi"
-                />
-              </ScaledView>
-            </IconWrapper>
-          </IconViewStyled>
-        )}
-        {!checked && (
-          <IconViewStyled>
-            <IconWrapper>
-              <ScaledView>
-                <Icon
-                  name="circle"
-                  fontColor="light"
-                  type="material-community"
-                  size="centi"
-                />
-              </ScaledView>
-            </IconWrapper>
-          </IconViewStyled>
-        )}
-        {labelPosition === 'right' && children}
-      </ViewStyled>
-    </Pressable>
-  );
-};
-
-export default RadioButton;

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

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

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

@@ -1,29 +0,0 @@
-import styled from '@emotion/native';
-import { View } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { RadioButtonProps } from './RadioButton';
-
-export const IconWrapper = styled(View)<Partial<RadioButtonProps & StyleProps>>`
-  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};
-  border-color: ${({
-    theme,
-    color = 'primary',
-    colorTone = 'medium',
-  }: StyleProps & RadioButtonProps) => theme.color[color][colorTone]};
-  border-width: ${({ theme }: StyleProps) => theme.borderWidth.nano};
-  background-color: ${({ theme }: StyleProps) =>
-    theme.miscellaneous.surfaceColor};
-`;
-
-export const ScaledView = styled(View)`
-  transform: scale(0.8);
-`;
-
-export const IconViewStyled = styled(View)<Partial<StyleProps>>`
-  padding: ${({ theme }: StyleProps) => theme.spacing.mili};
-`;
-
-export const ViewStyled = styled(View)`
-  align-items: center;
-  flex-direction: row;
-`;

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { SwitchProps, default as Switch } from './Switch';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Hybrid/Switch',
-  component: Switch,
-};
-
-const Template: Story<SwitchProps> = args => {
-  const [active, setActive] = React.useState(args.active);
-  const onChange = arg => {
-    setActive(!active);
-    args.onChange(arg);
-  };
-
-  return <Switch active={active} onChange={onChange} disabled={args.disabled}/>;
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  active: true,
-  onChange: value => action('Cicked')(value),
-  disabled: false,
-};

package/src/components/atoms/Switch/Switch.tsx

@@ -1,111 +0,0 @@
-import { useTheme } from '@emotion/react';
-import React, { FC, useCallback, useEffect } from 'react';
-import {
-  Animated,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import {
-  ColorGradationType,
-  ColorType,
-  ThemeProp,
-} from '@tecsinapse/react-core';
-import {
-  extractNumbersFromString,
-  lightenDarkenColor,
-  RFValueStr,
-} from '../../../utils';
-import { PressableSurface } from '../PressableSurface';
-import { transitionSwitch } from './animation';
-import { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';
-
-export interface SwitchProps {
-  onChange: (active: boolean) => void;
-  active: boolean;
-  activeColor?: ColorType;
-  activeColorTone?: ColorGradationType;
-  inactiveColor?: ColorType;
-  inactiveColorTone?: ColorGradationType;
-  style?: StyleProp<ViewStyle>;
-  dotStyle?: StyleProp<ViewStyle>;
-  disabled?: boolean;
-}
-
-const Switch: FC<SwitchProps> = ({
-  onChange,
-  activeColor = 'primary',
-  activeColorTone = 'medium',
-  inactiveColor = 'secondary',
-  inactiveColorTone = 'light',
-  active,
-  dotStyle,
-  disabled = false,
-  ...rest
-}): JSX.Element => {
-  const theme = useTheme() as ThemeProp;
-
-  const width = React.useRef(0);
-  const transitionValue = React.useRef(new Animated.Value(0)).current;
-  const animatedColor = React.useRef(new Animated.Value(0)).current;
-
-  const calculateTranslate = () => {
-    if (width.current > 0) {
-      return (
-        width.current -
-        extractNumbersFromString(theme.spacing.micro) * 2 -
-        extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH))
-      );
-    }
-    return 0;
-  };
-
-  const getBackgroundColor = (color: string) => {
-    return disabled
-      ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)
-      : color;
-  };
-
-  const interpolateColor = animatedColor.interpolate({
-    inputRange: [0, 1],
-    outputRange: [
-      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),
-      getBackgroundColor(theme.color[activeColor][activeColorTone]),
-    ],
-  });
-
-  useEffect(() => {
-    const translate = calculateTranslate();
-    transitionSwitch(active, translate, transitionValue, animatedColor);
-  }, [active]);
-
-  const handleChange = useCallback(() => {
-    onChange(!active);
-  }, [active, onChange]);
-
-  const handleSwitchLayout = (lce: LayoutChangeEvent) => {
-    width.current = lce.nativeEvent.layout.width;
-    const translate = calculateTranslate();
-    transitionSwitch(active, translate, transitionValue, animatedColor);
-  };
-
-  return (
-    <PressableSurface
-      {...rest}
-      onPress={handleChange}
-      effect="none"
-      disabled={disabled}
-    >
-      <StyledSwitchContent
-        onLayout={handleSwitchLayout}
-        style={{ backgroundColor: interpolateColor }}
-      >
-        <StyledSwitch
-          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
-        />
-      </StyledSwitchContent>
-    </PressableSurface>
-  );
-};
-
-export default Switch;

package/src/components/atoms/Switch/animation.ts

@@ -1,39 +0,0 @@
-import { Animated, Easing } from 'react-native';
-
-const ANIMATION_SPEED = 140;
-
-export const transitionSwitch = (
-  active: boolean,
-  translate: number,
-  transitionValue: Animated.Value,
-  animatedColor: Animated.Value
-): void => {
-  if (translate <= 0) return;
-
-  if (active) {
-    Animated.timing(transitionValue, {
-      toValue: translate,
-      duration: ANIMATION_SPEED,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: true,
-    }).start();
-    Animated.timing(animatedColor, {
-      toValue: 1,
-      duration: ANIMATION_SPEED,
-      useNativeDriver: false,
-    }).start();
-    return;
-  }
-
-  Animated.timing(transitionValue, {
-    toValue: 0,
-    duration: ANIMATION_SPEED,
-    easing: Easing.out(Easing.ease),
-    useNativeDriver: true,
-  }).start();
-  Animated.timing(animatedColor, {
-    toValue: 0,
-    duration: ANIMATION_SPEED,
-    useNativeDriver: false,
-  }).start();
-};

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

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

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

@@ -1,22 +0,0 @@
-import styled from '@emotion/native';
-import { Animated } from 'react-native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { RFValueStr } from '../../../utils';
-
-export const SWITCH_BODY_WIDTH = '40px';
-export const SWITCH_PIN_WIDTH = '16px';
-
-export const StyledSwitchContent = styled(Animated.View)<Partial<StyleProps>>`
-  border-radius: ${({ theme }) => theme.borderRadius.pill};
-  padding: 0 ${({ theme }) => theme.spacing.micro};
-  justify-content: center;
-  width: ${RFValueStr(SWITCH_BODY_WIDTH)};
-  height: ${RFValueStr('22px')};
-`;
-
-export const StyledSwitch = styled(Animated.View)<Partial<StyleProps>>`
-  border-radius: ${({ theme }) => theme.borderRadius.pill};
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-  width: ${RFValueStr(SWITCH_PIN_WIDTH)};
-  height: ${RFValueStr('16px')};
-`;

package/src/components/atoms/Tag/Tag.tsx

@@ -1,71 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { Animated, ViewProps } from 'react-native';
-import { IconProps } from '../Icon';
-import { PressableSurface } from '../PressableSurface';
-import { StyledCloseIcon, StyledLeftIcon, StyledTagContainer } from './styled';
-
-export interface TagProps extends ViewProps {
-  value: React.ReactNode;
-  icon?: IconProps;
-  dismiss?: boolean;
-  onDismiss?: () => void;
-  variant?: 'small' | 'default';
-}
-
-const Tag: React.FC<TagProps> = ({
-  value,
-  icon,
-  variant = 'small',
-  dismiss: canDismiss = false,
-  onDismiss,
-  style,
-  ...rest
-}): JSX.Element => {
-  const [dismiss, setDismiss] = useState(false);
-  const fadeAnim = React.useRef(new Animated.Value(1)).current;
-  const duration = 300;
-
-  const fadeOut = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 0,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  const handleDismiss = useCallback(() => {
-    onDismiss?.();
-    fadeOut();
-    setTimeout(() => setDismiss(true), duration);
-  }, [onDismiss]);
-
-  return (
-    <StyledTagContainer
-      {...rest}
-      variant={variant}
-      style={[{ opacity: fadeAnim as unknown as number }, style]}
-      visible={!dismiss}
-    >
-      {icon && (
-        <StyledLeftIcon
-          size={icon.size || 'micro'}
-          colorVariant={icon.colorVariant || 'primary'}
-          {...icon}
-        />
-      )}
-      {value}
-      {canDismiss && (
-        <PressableSurface onPress={handleDismiss}>
-          <StyledCloseIcon
-            name="close-outline"
-            type="ionicon"
-            size="centi"
-            fontColor="medium"
-          />
-        </PressableSurface>
-      )}
-    </StyledTagContainer>
-  );
-};
-
-export default Tag;

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

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

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

@@ -1,45 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { Animated, ViewProps } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { Icon, IconProps } from '../Icon';
-import { TagProps } from './Tag';
-
-const smallVariant = ({ theme, variant }: Partial<TagProps> & StyleProps) =>
-  variant === 'small' &&
-  css`
-    border-radius: ${theme.borderRadius.micro};
-    padding: ${theme.spacing.nano} ${theme.spacing.mili};
-  `;
-
-const defaultVariant = ({ theme, variant }: Partial<TagProps> & StyleProps) =>
-  variant === 'default' &&
-  css`
-    border-radius: ${theme.borderRadius.mili};
-    padding: ${theme.spacing.micro} ${theme.spacing.centi};
-  `;
-
-const StyledTagContainerBase = styled(Animated.View)<
-  Partial<TagProps> & Partial<StyleProps> & ViewProps & { visible: boolean }
->`
-  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  align-self: center;
-  display: ${({ visible }) => (visible ? 'flex' : 'none')};
-`;
-
-export const StyledTagContainer = styled(StyledTagContainerBase)(
-  props => css`
-    ${smallVariant(props)}
-    ${defaultVariant(props)}
-  `
-);
-
-export const StyledLeftIcon = styled(Icon)<Partial<StyleProps> & IconProps>`
-  margin-right: ${({ theme }) => theme.spacing.micro};
-`;
-
-export const StyledCloseIcon = styled(Icon)<Partial<StyleProps> & IconProps>`
-  margin-left: ${({ theme }) => theme.spacing.nano};
-`;

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

@@ -1,32 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import { Text, TextProps } from './index';
-
-export default {
-  title: 'Hybrid/Text',
-  component: Text,
-};
-
-const Template: Story<TextProps> = ({
-  fontColor,
-  fontWeight,
-  typography,
-  ...args
-}) => (
-  <Text
-    {...args}
-    fontColor={fontColor}
-    fontWeight={fontWeight}
-    typography={typography}
-  >
-    Text
-  </Text>
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  fontColor: 'dark',
-  fontWeight: 'regular',
-  typography: 'h3',
-};

package/src/components/atoms/Text/Text.tsx

@@ -1,68 +0,0 @@
-import React, { FC } from 'react';
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  FontStackType,
-  FontWeightType,
-  TypographyVariationType,
-} from '@tecsinapse/react-core';
-import { StyleProp, TextStyle } from 'react-native';
-import { StyledColoredText } from './styled';
-import { getLabel } from './functions';
-
-export interface TextProps {
-  /** Font theme text color */
-  fontColor?: FontColorType;
-  /** Font theme weight */
-  fontWeight?: FontWeightType;
-  /** Font theme sizes */
-  typography?: TypographyVariationType;
-  /** Font theme stack */
-  fontStack?: FontStackType;
-  /** Palette theme colors. You can specify this prop to override theme fontColor */
-  colorVariant?: ColorType;
-  /** Palette theme colors gradation */
-  colorTone?: ColorGradationType;
-  numberOfLines?: number;
-  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
-  capitalFirst?: boolean;
-  style?: StyleProp<TextStyle>;
-  children?: React.ReactNode;
-}
-
-/** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */
-const Text: FC<TextProps> = ({
-  children,
-  style,
-  fontColor = 'dark',
-  colorTone = 'medium',
-  colorVariant,
-  fontWeight = 'regular',
-  typography = 'base',
-  numberOfLines,
-  ellipsizeMode,
-  textTransform = 'none',
-  capitalFirst = false,
-  ...rest
-}): JSX.Element => {
-  return (
-    <StyledColoredText
-      {...rest}
-      style={style}
-      fontColor={fontColor}
-      colorTone={colorTone}
-      colorVariant={colorVariant}
-      fontWeight={fontWeight}
-      typography={typography}
-      numberOfLines={numberOfLines}
-      ellipsizeMode={ellipsizeMode}
-      textTransform={textTransform}
-    >
-      {getLabel(children, capitalFirst)}
-    </StyledColoredText>
-  );
-};
-
-export default Text;

package/src/components/atoms/Text/functions.ts

@@ -1,8 +0,0 @@
-export const getFirstCapitalCharacter = (value: string): string =>
-  value.charAt(0).toUpperCase().concat(value.slice(1));
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const getLabel = (children, capitalFirst: boolean) =>
-  typeof children === 'string' && capitalFirst
-    ? getFirstCapitalCharacter(children)
-    : children;

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

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

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

@@ -1,31 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { StyleProps, TextProps } from '@tecsinapse/react-core';
-import { Text as RNText } from 'react-native';
-
-export const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`
-  color: ${({ theme, fontColor = 'dark' }) => theme.font.color[fontColor]};
-  font-weight: ${({ theme, fontWeight = 'regular' }) =>
-    theme.font.weight[fontWeight]};
-  font-size: ${({ theme, typography = 'base' }) =>
-    theme.typography[typography].fontSize};
-  line-height: ${({ theme, typography = 'base' }) =>
-    theme.typography[typography].lineHeight};
-  font-family: ${({ theme, fontStack = 'default' }) =>
-    `'${theme.font.stack[fontStack]}'`};
-  text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};
-`;
-
-const colorStyles = ({
-  colorVariant,
-  colorTone,
-  theme,
-}: TextProps & StyleProps) =>
-  colorVariant &&
-  colorTone &&
-  css`
-    color: ${theme.color[colorVariant][colorTone]};
-  `;
-
-export const StyledColoredText = styled(StyledText)<
-  TextProps & Partial<StyleProps>
->(colorStyles);

package/src/components/atoms/shared/PaperAndCard.ts

@@ -1,24 +0,0 @@
-import { css } from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const baseStyles = ({ theme }: StyleProps): any => css`
-  border-radius: ${theme.borderRadius.mili};
-  background-color: ${theme.miscellaneous.surfaceColor};
-`;
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export const elevatedStyles = ({
-  theme,
-  elevated = false,
-}: { elevated?: boolean } & StyleProps): any =>
-  elevated && [
-    css({
-      shadowColor: theme.miscellaneous.shadow,
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.05,
-      shadowRadius: 5,
-      elevation: 2,
-    }),
-  ];
-/* eslint-enable @typescript-eslint/no-explicit-any */

package/src/components/molecules/Calendar/Calendar.stories.tsx

@@ -1,20 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import { Calendar, CalendarProps } from './index';
-import { DateRange } from './Calendar';
-import { ptBR } from 'date-fns/locale';
-
-export default {
-  title: 'Hybrid/Calendar',
-  component: Calendar,
-};
-
-const Template: Story<CalendarProps<'range'>> = ({ ...args }) => {
-  const [value, setValue] = React.useState<DateRange>();
-
-  return (
-    <Calendar type={'range'} value={value} onChange={setValue} locale={ptBR} />
-  );
-};
-
-export const Base = Template.bind({});