@tecsinapse/react-core 1.21.1 → 1.21.3

package/src/components/atoms/Button/States/Error.tsx

@@ -1,9 +0,0 @@
-import React, { FC } from 'react';
-import { ButtonStateProps } from '../Button';
-import { default as BaseState } from './BaseState';
-
-const Error: FC<ButtonStateProps> = props => {
-  return <BaseState {...props} icon="close-circle-outline" />;
-};
-
-export default Error;

package/src/components/atoms/Button/States/Loading.tsx

@@ -1,33 +0,0 @@
-import { useTheme } from '@emotion/react';
-import React, { FC } from 'react';
-import { ThemeProp, TypographyVariationType } from '../../../../types/defaults';
-import { Text } from '../../Text';
-import { ButtonStateProps } from '../Button';
-import { getStyledTextButton, StyledIndicator } from './styled';
-
-const Loading: FC<ButtonStateProps> = ({
-  text,
-  textComponent = Text,
-  fontColor = 'light',
-  buttonSize = 'default',
-}) => {
-  const theme = useTheme() as ThemeProp;
-  const typo: TypographyVariationType =
-    buttonSize === 'default' ? 'base' : 'sub';
-  const StyledText = getStyledTextButton(textComponent);
-  return (
-    <>
-      <StyledIndicator
-        color={theme.font.color[fontColor]}
-        buttonSize={buttonSize}
-      />
-      {text && (
-        <StyledText typography={typo} fontWeight="bold" fontColor={fontColor}>
-          {text}
-        </StyledText>
-      )}
-    </>
-  );
-};
-
-export default Loading;

package/src/components/atoms/Button/States/Success.tsx

@@ -1,9 +0,0 @@
-import React, { FC } from 'react';
-import { ButtonStateProps } from '../Button';
-import { default as BaseState } from './BaseState';
-
-const Success: FC<ButtonStateProps> = props => {
-  return <BaseState {...props} icon="checkmark-circle-outline" />;
-};
-
-export default Success;

package/src/components/atoms/Button/States/index.ts

@@ -1,3 +0,0 @@
-export { default as Error } from './Error';
-export { default as Loading } from './Loading';
-export { default as Success } from './Success';

package/src/components/atoms/Button/States/styled.ts

@@ -1,23 +0,0 @@
-import styled from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-import { FC } from 'react';
-import { ActivityIndicator } from 'react-native';
-import { TextProps } from '../../Text';
-import { ButtonStateProps } from '../Button';
-
-export const getStyledTextButton = (component: FC<TextProps>) => {
-  return styled(component)<Partial<ButtonStateProps> & Partial<StyleProps>>`
-    margin-left: ${({ theme }) => theme.spacing.mili};
-  `;
-};
-
-export const StyledIndicator = styled(ActivityIndicator)<
-  Partial<ButtonStateProps> & Partial<StyleProps>
->`
-  width: ${({ theme, buttonSize }) =>
-    buttonSize === 'default' ? theme.iconSize.deca : theme.iconSize.centi};
-  height: ${({ theme, buttonSize }) =>
-    buttonSize === 'default' ? theme.iconSize.deca : theme.iconSize.centi};
-  transform: ${({ buttonSize }) =>
-    buttonSize === 'default' ? 'scale(1)' : 'scale(.8)'};
-`;

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

@@ -1,8 +0,0 @@
-export { default as Button } from './Button';
-export { Error, Success, Loading } from './States';
-export type {
-  ButtonProps,
-  ButtonSizeType,
-  ButtonStateType,
-  ButtonStateProps,
-} from './Button';

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

@@ -1,51 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { StyleProps } from '../../../types/defaults';
-import { RFValueStr } from '../../../utils';
-import { PressableSurface } from '../PressableSurface';
-import { ButtonProps } from './Button';
-
-const outlineVariant = ({
-  theme,
-  color = 'primary',
-  variant,
-  tone = 'medium',
-}: StyleProps & ButtonProps) =>
-  variant === 'outlined' &&
-  css`
-    border-color: ${theme.color[color][tone]};
-    border-width: ${theme.borderWidth.pico};
-  `;
-
-const sizeStyles = ({ theme, size = 'default' }: StyleProps & ButtonProps) => {
-  switch (size) {
-    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 StyledButtonBase = styled(PressableSurface)<
-  ButtonProps & Partial<StyleProps>
->`
-  border-radius: ${({ theme, borderRadius = 'mili' }) =>
-    theme.borderRadius[borderRadius]};
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const StyledButton = styled(StyledButtonBase)<
-  ButtonProps & Partial<StyleProps>
->(
-  props => css`
-    ${outlineVariant(props)}
-    ${sizeStyles(props)}
-  `
-);

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import styled from '@emotion/native';
-import { action } from '@storybook/addon-actions';
-import Card, { CardProps } from './Card';
-import { StyleProps } from '../../../types/defaults';
-
-const StyledCard = styled(Card)<Partial<StyleProps>>`
-  border-color: ${({ theme }) => theme.color.secondary.light};
-  border-width: ${({ theme }) => theme.borderWidth.pico};
-  width: 250px;
-  height: 100px;
-`;
-
-export default {
-  title: 'Hybrid/Card',
-  component: Card,
-};
-
-const Template: Story<CardProps> = ({ elevated, ...rest }) => (
-  <StyledCard elevated={elevated} {...rest} />
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  elevated: true,
-  onPress: e => action('onClick')(e),
-};

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

@@ -1,35 +0,0 @@
-import { PressableSurfaceProps } from '@tecsinapse/react-native-kit';
-import React, { FC } from 'react';
-import { GestureResponderEvent } from 'react-native';
-import { Paper, PaperProps } from '../Paper';
-import { StyledCard } from './styled';
-
-export interface CardProps
-  extends PaperProps,
-    Omit<PressableSurfaceProps, 'style'> {
-  /** Click handler */
-  onPress?: null | ((event: GestureResponderEvent) => void);
-}
-
-const Card: FC<CardProps> = ({
-  children,
-  elevated = false,
-  onPress,
-  ...rest
-}): JSX.Element => {
-  if (onPress) {
-    return (
-      <StyledCard {...rest} elevated={elevated} onPress={onPress}>
-        {children}
-      </StyledCard>
-    );
-  }
-
-  return (
-    <Paper {...rest} elevated={elevated}>
-      {children}
-    </Paper>
-  );
-};
-
-export default Card;

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

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

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

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

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