@tecsinapse/react-core 1.21.1-beta.8 → 1.21.2

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

@@ -0,0 +1,81 @@
+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

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

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,39 @@
+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

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,71 @@
+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

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

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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,20 @@
+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({});