@tecsinapse/react-core 1.21.1-beta.1 → 1.21.1-beta.3

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

@@ -1,44 +0,0 @@
-import styled from '@emotion/native';
-import { View } from 'react-native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { CheckboxProps } from './Checkbox';
-
-export const IconUncheckedStyled = styled(View)<
-  Partial<CheckboxProps & StyleProps>
->`
-  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.micro};
-  border-color: ${({
-    theme,
-    color = 'primary',
-    colorTone = 'medium',
-  }: StyleProps & CheckboxProps) => theme.color[color][colorTone]};
-  border-width: ${({ theme }: StyleProps) => theme.borderWidth.nano};
-  background-color: ${({ theme }: StyleProps) =>
-    theme.miscellaneous.surfaceColor};
-`;
-
-export const IconCheckedStyled = styled(View)<
-  Partial<CheckboxProps & StyleProps>
->`
-  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.micro};
-  border-color: ${({
-    theme,
-    color = 'primary',
-    colorTone = 'medium',
-  }: StyleProps & CheckboxProps) => theme.color[color][colorTone]};
-  border-width: ${({ theme }: StyleProps) => theme.borderWidth.nano};
-  background-color: ${({
-    theme,
-    color = 'primary',
-    colorTone = 'medium',
-  }: StyleProps & CheckboxProps) => theme.color[color][colorTone]};
-`;
-
-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/Divider/Divider.stories.tsx

@@ -1,28 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import { Card } from '../Card';
-import { Text } from '../Text';
-import Divider, { DividerProps } from './Divider';
-
-export default {
-  title: 'Hybrid/Divider',
-  component: Divider,
-};
-
-const Template: Story<DividerProps> = ({ ...args }) => {
-  return (
-    <Card>
-      <Text>Some content here!</Text>
-      <Divider {...args}>
-        <Text>Some content here!</Text>
-      </Divider>
-      <Text>Some content here!</Text>
-    </Card>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  linePosition: 'bottom',
-};

package/src/components/atoms/Divider/Divider.tsx

@@ -1,14 +0,0 @@
-import React, { FC } from 'react';
-import { ViewProps } from 'react-native';
-import { StyledDivider } from './styled';
-
-export interface DividerProps extends ViewProps {
-  linePosition: 'top' | 'bottom';
-  noLine?: boolean;
-}
-
-const Divider: FC<DividerProps> = ({ children, ...rest }) => {
-  return <StyledDivider {...rest}>{children}</StyledDivider>;
-};
-
-export default Divider;

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

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

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

@@ -1,34 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { DividerProps } from './Divider';
-
-const topLine = ({ theme, linePosition, noLine }: DividerProps & StyleProps) =>
-  !noLine &&
-  linePosition === 'top' &&
-  css`
-    border-top-width: ${theme.borderWidth.pico};
-  `;
-
-const bottomLine = ({
-  theme,
-  linePosition,
-  noLine,
-}: DividerProps & StyleProps) =>
-  !noLine &&
-  linePosition === 'bottom' &&
-  css`
-    border-bottom-width: ${theme.borderWidth.pico};
-  `;
-
-const StyledDividerBase = styled.View<Partial<StyleProps>>`
-  border-color: ${({ theme }) => theme.color.secondary.xlight};
-`;
-
-export const StyledDivider = styled(StyledDividerBase)<
-  DividerProps & Partial<StyleProps>
->(
-  props => css`
-    ${topLine(props)}
-    ${bottomLine(props)}
-  `
-);

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

@@ -1,55 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import {
-  GroupButton,
-  GroupButtonOption,
-  GroupButtonProps,
-  GroupButtonValue,
-} from '../GroupButton';
-
-export default {
-  title: 'Hybrid/Group Button',
-  component: GroupButton,
-};
-
-const options: GroupButtonValue<string>[] = [
-  {
-    value: 'Sim',
-    options: {
-      activeBackgroundColor: 'success',
-      activeBorderColor: 'success',
-    },
-  },
-  { value: 'Não' },
-  {
-    value: 'Inválido',
-    options: {
-      activeBackgroundColor: 'error',
-      activeBorderColor: 'error',
-    },
-  },
-];
-
-const Template: Story<GroupButtonProps<any>> = ({ ...args }) => {
-  const [active, setActive] = React.useState<string>(options[0].value);
-
-  return (
-    <GroupButton
-      {...args}
-      value={active}
-      options={options}
-      renderKey={option => option}
-      onChange={setActive}
-      renderOption={(option, active) => (
-        <GroupButtonOption active={active} description={option} />
-      )}
-    />
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  options,
-  buttonSize: 'small',
-};

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

@@ -1,118 +0,0 @@
-import { useTheme } from '@emotion/react';
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import {
-  ColorGradationType,
-  ColorType,
-  ThemeProp,
-} from '../../../types/defaults';
-import { ButtonSizeType } from '../Button';
-import {
-  StyledDivider,
-  StyledGroupButton,
-  StyledOption,
-  StyledPressable,
-} from './styled';
-
-export interface GroupButtonOptions {
-  activeBackgroundColor?: ColorType;
-  activeBackgroundColorTone?: ColorGradationType;
-  activeBorderColor?: ColorType;
-  activeBorderColorTone?: ColorGradationType;
-  inactiveBackgroundColor?: ColorType;
-  inactiveBackgroundColorTone?: ColorGradationType;
-  inactiveBorderColor?: ColorType;
-  inactiveBorderColorTone?: ColorGradationType;
-  activeStyle?: StyleProp<ViewStyle>;
-  inactiveStyle?: StyleProp<ViewStyle>;
-  disabled?: boolean;
-}
-
-export interface GroupButtonValue<T> {
-  value: T;
-  options?: GroupButtonOptions;
-}
-
-export interface GroupButtonProps<T> {
-  value: T;
-  options: GroupButtonValue<T>[];
-  renderKey: (option?: T) => string | number | undefined;
-  renderOption: (option: T, active: boolean) => JSX.Element;
-  onChange: (option: T) => void;
-  buttonSize?: ButtonSizeType;
-  style?: StyleProp<ViewStyle>;
-  disableAllOptions?: boolean;
-}
-
-const GroupButton = <T,>({ style, ...rest }: GroupButtonProps<T>) => {
-  return (
-    <StyledGroupButton style={style}>{groupOptions(rest)}</StyledGroupButton>
-  );
-};
-
-const groupOptions = <T,>({
-  options,
-  renderOption,
-  renderKey,
-  onChange,
-  value,
-  disableAllOptions,
-  ...rest
-}: Partial<GroupButtonProps<T>>) => {
-  const theme = useTheme() as ThemeProp;
-  return options?.map((option, idx) => {
-    const {
-      value: optionValue,
-      options: {
-        activeStyle,
-        inactiveStyle,
-        activeBackgroundColor,
-        activeBackgroundColorTone,
-        inactiveBackgroundColor,
-        inactiveBackgroundColorTone,
-        disabled = disableAllOptions || option.options?.disabled,
-      } = {},
-    } = option;
-
-    const key = renderKey?.(optionValue);
-    const active = key === renderKey?.(value);
-    const isFirst = idx === 0;
-    const isLast = idx === options.length - 1;
-
-    let colors = theme.miscellaneous.surfaceColor;
-    if (active) {
-      colors =
-        theme.color[activeBackgroundColor || 'secondary'][
-          activeBackgroundColorTone || 'medium'
-        ];
-    }
-
-    if (!active && (inactiveBackgroundColor || inactiveBackgroundColorTone)) {
-      colors =
-        theme.color[inactiveBackgroundColor || 'secondary'][
-          inactiveBackgroundColorTone || 'medium'
-        ];
-    }
-
-    return (
-      <StyledOption key={key}>
-        <StyledPressable
-          {...rest}
-          {...option.options}
-          disabled={disabled}
-          isActive={active}
-          isFirstOption={isFirst}
-          isLastOption={isLast}
-          onPress={() => onChange?.(optionValue)}
-          surfaceColor={colors}
-          style={active ? activeStyle : inactiveStyle}
-        >
-          {renderOption?.(option.value, active)}
-        </StyledPressable>
-        {!isLast && <StyledDivider />}
-      </StyledOption>
-    );
-  });
-};
-
-export default GroupButton;

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

@@ -1,24 +0,0 @@
-import React, { FC } from 'react';
-import { Text, TextProps } from '../Text';
-import { getStyledGroupItemText } from './styled';
-
-export interface GroupButtonOptionProps {
-  active: boolean;
-  description: string;
-  TextComponent?: FC<TextProps>;
-}
-
-const GroupButtonOption = ({
-  TextComponent = Text,
-  active,
-  description,
-}: GroupButtonOptionProps): JSX.Element => {
-  const StyledText = getStyledGroupItemText(TextComponent);
-  return (
-    <StyledText fontWeight="bold" typography="sub" active={active}>
-      {description}
-    </StyledText>
-  );
-};
-
-export default GroupButtonOption;

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

@@ -1,4 +0,0 @@
-export { default as GroupButton } from './GroupButton';
-export type { GroupButtonProps, GroupButtonValue } from './GroupButton';
-export { default as GroupButtonOption } from './GroupButtonOption';
-export type { GroupButtonOptionProps } from './GroupButtonOption';

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

@@ -1,147 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { FC } from 'react';
-import { StyleProps } from '../../../types/defaults';
-import { RFValueStr } from '../../../utils';
-import { ButtonSizeType } from '../Button';
-import { PressableSurface } from '../PressableSurface';
-import { TextProps } from '../Text';
-import { GroupButtonOptions } from './GroupButton';
-import { GroupButtonOptionProps } from './GroupButtonOption';
-
-interface PressableOptions extends GroupButtonOptions {
-  isActive: boolean;
-  isFirstOption: boolean;
-  isLastOption: boolean;
-  buttonSize?: ButtonSizeType;
-}
-
-export const StyledGroupButton = styled.View<Partial<StyleProps>>`
-  flex-direction: row;
-`;
-
-// TO FIXED: hexa color to theme definitions
-const disabledStyles = ({
-  disabled,
-  isActive,
-}: PressableOptions & Partial<StyleProps>) =>
-  disabled &&
-  !isActive &&
-  css`
-    background-color: #dcdcdc;
-  `;
-
-export const getStyledGroupItemText = (component: FC<TextProps>) => {
-  return styled(component)<
-    Partial<GroupButtonOptionProps> & Partial<StyleProps>
-  >`
-    color: ${({ active, theme }) =>
-      active ? theme.miscellaneous.surfaceColor : theme.color.secondary.medium};
-  `;
-};
-
-const activeStyles = ({
-  theme,
-  isActive,
-  activeBorderColor = 'secondary',
-  activeBorderColorTone = 'medium',
-}: PressableOptions & Partial<StyleProps>) =>
-  isActive &&
-  css`
-    border-color: ${theme?.color[activeBorderColor][activeBorderColorTone]};
-  `;
-
-const inactiveStyles = ({
-  theme,
-  isActive,
-  inactiveBackgroundColor,
-  inactiveBackgroundColorTone,
-  inactiveBorderColor = 'secondary',
-  inactiveBorderColorTone = 'light',
-}: PressableOptions & Partial<StyleProps>) => {
-  if (!isActive && inactiveBackgroundColor && inactiveBackgroundColorTone) {
-    return css`
-      border-color: ${theme?.color[inactiveBorderColor][
-        inactiveBorderColorTone
-      ]};
-    `;
-  }
-
-  if (!isActive) {
-    return css`
-      border-color: ${theme?.color[inactiveBorderColor][
-        inactiveBorderColorTone
-      ]};
-    `;
-  }
-};
-
-const leftStyles = ({
-  theme,
-  isFirstOption,
-}: PressableOptions & Partial<StyleProps>) =>
-  isFirstOption &&
-  css`
-    border-top-left-radius: ${theme?.borderRadius.mili};
-    border-bottom-left-radius: ${theme?.borderRadius.mili};
-    border-left-width: ${theme?.borderWidth.pico};
-  `;
-
-const rightStyles = ({
-  theme,
-  isLastOption,
-}: PressableOptions & Partial<StyleProps>) =>
-  isLastOption &&
-  css`
-    border-top-right-radius: ${theme?.borderRadius.mili};
-    border-bottom-right-radius: ${theme?.borderRadius.mili};
-    border-right-width: ${theme?.borderWidth.pico};
-  `;
-
-const sizeStyles = ({
-  theme,
-  buttonSize = 'small',
-}: PressableOptions & Partial<StyleProps>) => {
-  switch (buttonSize) {
-    case 'small':
-      return css`
-        padding: ${theme?.spacing.mili} ${theme?.spacing.deca};
-        min-height: ${RFValueStr('34px')};
-      `;
-    default:
-      return css`
-        padding: ${theme?.spacing.mili} ${theme?.spacing.kilo};
-        min-height: ${RFValueStr('44px')};
-      `;
-  }
-};
-
-const StyledPressableBase = styled(PressableSurface)<
-  PressableOptions & Partial<StyleProps>
->`
-  border-top-width: ${({ theme }) => theme.borderWidth.pico};
-  border-bottom-width: ${({ theme }) => theme.borderWidth.pico};
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-`;
-
-export const StyledOption = styled.View`
-  flex-direction: row;
-  flex: 1;
-`;
-
-export const StyledDivider = styled.View<Partial<StyleProps>>`
-  width: ${({ theme }) => theme.borderWidth.pico};
-  background-color: ${({ theme }) => theme.color.secondary.light}; ;
-`;
-
-export const StyledPressable = styled(StyledPressableBase)(
-  (props: PressableOptions & Partial<StyleProps>) => css`
-    ${activeStyles(props)}
-    ${inactiveStyles(props)}
-    ${leftStyles(props)}
-    ${rightStyles(props)}
-    ${sizeStyles(props)}
-    ${disabledStyles(props)}
-  `
-);

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import Icon, { IconProps } from './Icon';
-
-export default {
-  title: 'Hybrid/Icon',
-  component: Icon,
-};
-
-const Template: Story<IconProps> = ({ name, type, size, ...args }) => (
-  <Icon {...args} name={name} size={size} type={type} />
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  name: 'rocket',
-  type: 'font-awesome',
-  size: 'kilo',
-  fontColor: 'dark',
-};

package/src/components/atoms/Icon/Icon.tsx

@@ -1,52 +0,0 @@
-import React, { FC } from 'react';
-import { StyleProp, TextStyle, Text } from 'react-native';
-import { useTheme } from '@emotion/react';
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  IconSizeType,
-  IconType,
-  ThemeProp,
-} from '@tecsinapse/react-core';
-import { getIconColor, getIconComponent } from './helpers';
-
-export interface IconProps {
-  /**  Name of the icon. You must use the same icons from react-native-vector-icons */
-  name: string;
-  /**  Default icon sizes from theme */
-  size?: IconSizeType;
-  /**  Icon family. You must use the same icons from react-native-vector-icons */
-  type: IconType;
-  /** Font theme fill color */
-  fontColor?: FontColorType;
-  /** Palette theme fill color */
-  colorVariant?: ColorType;
-  /** Palette theme gradation fill color */
-  colorTone?: ColorGradationType;
-  style?: StyleProp<TextStyle>;
-}
-
-/** NOTE: When using colors, the order matters if you're trying to merge multiple types. */
-const Icon: FC<IconProps> = ({
-  name,
-  size = 'centi',
-  type,
-  style,
-  fontColor = 'dark',
-  colorVariant,
-  colorTone = 'medium',
-  ...rest
-}) => {
-  const theme = useTheme() as ThemeProp;
-  const color = getIconColor(colorVariant, colorTone, fontColor, theme);
-  const RNVIcon = getIconComponent(type, size);
-
-  return (
-    <React.Suspense fallback={<Text> </Text>}>
-      <RNVIcon {...rest} style={style} name={name} color={color} />
-    </React.Suspense>
-  );
-};
-
-export default Icon;

package/src/components/atoms/Icon/helpers.ts

@@ -1,120 +0,0 @@
-import { lazy } from 'react';
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  IconSizeType,
-  IconType,
-  ThemeProp,
-} from '@tecsinapse/react-core';
-import styled from '@emotion/native';
-
-/* eslint-disable */
-const customIcons: any = {};
-
-export const registerCustomIconType = (id: string, customIcon: any) => {
-  customIcons[id] = customIcon;
-};
-
-const getStyledIcon = (Component, size) => styled(Component)`
-  font-size: ${({ theme }) => theme.iconSize[size]};
-  text-align: center;
-`;
-
-export const getIconComponent = (type: IconType, size: IconSizeType): any => {
-  switch (type) {
-    case 'zocial':
-      const Zocial = lazy(
-        async () => await import('react-native-vector-icons/dist/Zocial')
-      );
-      return getStyledIcon(Zocial, size);
-    case 'octicon':
-      const Octicons = lazy(
-        async () => await import('react-native-vector-icons/dist/Octicons')
-      );
-      return getStyledIcon(Octicons, size);
-    case 'material':
-      const Material = lazy(
-        async () => await import('react-native-vector-icons/dist/MaterialIcons')
-      );
-      return getStyledIcon(Material, size);
-    case 'material-community':
-      const MaterialCommunity = lazy(
-        async () =>
-          await import('react-native-vector-icons/dist/MaterialCommunityIcons')
-      );
-      return getStyledIcon(MaterialCommunity, size);
-    case 'ionicon':
-      const Ionicons = lazy(
-        async () => await import('react-native-vector-icons/dist/Ionicons')
-      );
-      return getStyledIcon(Ionicons, size);
-    case 'foundation':
-      const Foundation = lazy(
-        async () => await import('react-native-vector-icons/dist/Foundation')
-      );
-      return getStyledIcon(Foundation, size);
-    case 'evilicon':
-      const EvilIcons = lazy(
-        async () => await import('react-native-vector-icons/dist/EvilIcons')
-      );
-      return getStyledIcon(EvilIcons, size);
-    case 'entypo':
-      const Entypo = lazy(
-        async () => await import('react-native-vector-icons/dist/Entypo')
-      );
-      return getStyledIcon(Entypo, size);
-    case 'font-awesome':
-      const FontAwesome = lazy(
-        async () => await import('react-native-vector-icons/dist/FontAwesome')
-      );
-      return getStyledIcon(FontAwesome, size);
-    case 'font-awesome-5':
-      const FontAwesome5 = lazy(
-        async () => await import('react-native-vector-icons/dist/FontAwesome5')
-      );
-      return getStyledIcon(FontAwesome5, size);
-    case 'simple-line-icon':
-      const SimpleLineIcons = lazy(
-        async () =>
-          await import('react-native-vector-icons/dist/SimpleLineIcons')
-      );
-      return getStyledIcon(SimpleLineIcons, size);
-    case 'feather':
-      const Feather = lazy(
-        async () => await import('react-native-vector-icons/dist/Feather')
-      );
-      return getStyledIcon(Feather, size);
-    case 'antdesign':
-    case 'ant-design':
-      const AntDesign = lazy(
-        async () => await import('react-native-vector-icons/dist/AntDesign')
-      );
-      return getStyledIcon(AntDesign, size);
-    case 'fontisto':
-      const Fontisto = lazy(
-        async () => await import('react-native-vector-icons/dist/Fontisto')
-      );
-      return getStyledIcon(Fontisto, size);
-    default:
-      if (Object.prototype.hasOwnProperty.call(customIcons, type)) {
-        return getStyledIcon(customIcons[type], size);
-      }
-      const MaterialIcons = lazy(
-        async () => await import('react-native-vector-icons/dist/MaterialIcons')
-      );
-      return getStyledIcon(MaterialIcons, size);
-  }
-};
-/* eslint-enable */
-export const getIconColor = (
-  colorVariant: ColorType | undefined,
-  colorGradation: ColorGradationType | undefined,
-  fontColor: FontColorType,
-  theme: ThemeProp
-): string => {
-  if (colorVariant && colorGradation) {
-    return theme.color[colorVariant][colorGradation];
-  }
-  return theme.font.color[fontColor];
-};

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

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