@tecsinapse/react-core 1.21.2 → 1.21.3

package/src/components/atoms/Card/Header/Header.tsx

@@ -1,12 +0,0 @@
-import React, { FC } from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
-
-export interface HeaderProps {
-  style?: StyleProp<ViewStyle>;
-}
-
-const Header: FC<HeaderProps> = ({ children, style }): JSX.Element => (
-  <View style={style}>{children}</View>
-);
-
-export default Header;

package/src/components/atoms/Card/Header/index.ts

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

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

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

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

@@ -1,13 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { CardProps, StyleProps } from '@tecsinapse/react-core';
-import { baseStyles, elevatedStyles } from '../shared/PaperAndCard';
-import { PressableSurface } from '../PressableSurface';
-
-export const StyledCard = styled(PressableSurface)<
-  CardProps & Partial<StyleProps>
->(
-  props => css`
-    ${baseStyles(props)}
-    ${elevatedStyles(props)}
-  `
-);

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { default as Checkbox, CheckboxProps } from './Checkbox';
-import { Text } from '../Text';
-
-export default {
-  title: 'Hybrid/Checkbox',
-  component: Checkbox,
-};
-
-const Template: Story<CheckboxProps> = ({ checked, ...args }) => {
-  const [active, setActive] = React.useState(checked);
-
-  React.useEffect(() => {
-    setActive(checked);
-  }, [checked]);
-
-  return (
-    <Checkbox {...args} checked={active} onChange={setActive}>
-      <Text>Checkbox</Text>
-    </Checkbox>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  labelPosition: 'right',
-  checked: true,
-  color: 'primary',
-  colorTone: 'medium',
-};

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -1,81 +0,0 @@
-import React, { FC } from 'react';
-import { Pressable, StyleProp, ViewStyle } from 'react-native';
-import { ColorGradationType, ColorType } from '@tecsinapse/react-core';
-import { Icon } from '../Icon';
-import {
-  IconUncheckedStyled,
-  IconCheckedStyled,
-  ViewStyled,
-  IconViewStyled,
-} from './styled';
-
-export interface CheckboxProps {
-  /** 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 Checkbox: FC<CheckboxProps> = ({
-  children,
-  checked,
-  onChange,
-  color = 'primary',
-  colorTone = 'medium',
-  labelPosition = 'left',
-  disabled = false,
-  ...rest
-}) => {
-  const handleChange = () => {
-    onChange && onChange(!checked);
-  };
-
-  return (
-    <Pressable
-      {...rest}
-      disabled={disabled}
-      onPress={handleChange}
-      accessibilityRole="checkbox"
-    >
-      <ViewStyled>
-        {labelPosition === 'left' && children}
-        {checked && (
-          <IconViewStyled>
-            <IconCheckedStyled color={color} colorTone={colorTone}>
-              <Icon
-                name="check"
-                fontColor="light"
-                type="material-community"
-                size="centi"
-              />
-            </IconCheckedStyled>
-          </IconViewStyled>
-        )}
-        {!checked && (
-          <IconViewStyled>
-            <IconUncheckedStyled color={color} colorTone={colorTone}>
-              <Icon
-                name="checkbox-blank"
-                fontColor="light"
-                type="material-community"
-                size="centi"
-              />
-            </IconUncheckedStyled>
-          </IconViewStyled>
-        )}
-        {labelPosition === 'right' && children}
-      </ViewStyled>
-    </Pressable>
-  );
-};
-
-export default Checkbox;

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

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

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',
-};