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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { default as Avatar, AvatarProps } from './Avatar';
+import { Story } from '@storybook/react';
+
+export default {
+  title: 'Hybrid/Avatar',
+  component: Avatar,
+};
+
+const Template: Story<AvatarProps> = args => <Avatar {...args} />;
+
+export const Base = Template.bind({});
+
+Base.args = {
+  source: {
+    uri: 'https://www.shareicon.net/data/512x512/2016/05/24/770117_people_512x512.png',
+  },
+  name: 'João',
+  onPress: () => alert('onPress callback'),
+  size: 'mega',
+};

package/src/components/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,56 @@
+import React, { FC } from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { IconSize } from '../../../types/defaults';
+import { Text, TextProps } from '../Text';
+import { getIniciais } from './helpers';
+import {
+  ContainerButtonAvatar,
+  getStyledTextComponent,
+  StyledAvatar,
+  StyledBackground,
+} from './styled';
+
+export type SizeAvatar = Omit<IconSize, 'centi' | 'deca'>;
+
+export interface AvatarProps {
+  /** This property should follow react-native spec. If the asset is remote, use `{ uri: 'https://example.com/logo.png' }`.
+   * For local assets, you shold use `require('./logo.png')`. */
+  source?: ImageSourcePropType;
+  name: string;
+  onPress?: () => void;
+  size?: keyof SizeAvatar;
+  TextComponent?: FC<TextProps>;
+}
+
+const Avatar: React.FC<AvatarProps> = ({
+  source,
+  name,
+  onPress,
+  size = 'mega',
+  TextComponent = Text,
+}) => {
+  const [hasError, setHasError] = React.useState<boolean>(false);
+
+  // If the source changes in runtime, this prevents error from being true always (fallback)
+  React.useEffect(() => {
+    setHasError(false);
+  }, [source]);
+
+  const StyledText = getStyledTextComponent(TextComponent);
+
+  return (
+    <ContainerButtonAvatar effect="none" onPress={onPress} size={size}>
+      {source && !hasError ? (
+        <StyledAvatar source={source} onError={() => setHasError(true)} />
+      ) : (
+        <StyledBackground>
+          <StyledText fontWeight="bold" fontColor="light">
+            {getIniciais(name)}
+          </StyledText>
+        </StyledBackground>
+      )}
+    </ContainerButtonAvatar>
+  );
+};
+
+export default Avatar;

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

@@ -0,0 +1,10 @@
+export const getIniciais = (name: string): string => {
+  const nameSplit = name.split(' ');
+  if (nameSplit.length > 1) {
+    return nameSplit
+      .slice(0, 2)
+      .map(name => name[0])
+      .join('');
+  }
+  return name[0];
+};

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

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

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

@@ -0,0 +1,43 @@
+import styled from '@emotion/native';
+import { FC } from 'react';
+import { Image, View } from 'react-native';
+import { StyleProps } from '../../../types/defaults';
+import { PressableSurface } from '../PressableSurface';
+import { TextProps } from '../Text';
+import { AvatarProps } from './Avatar';
+
+export const ContainerButtonAvatar = styled(PressableSurface)<
+  Partial<StyleProps & AvatarProps>
+>`
+  width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>
+    theme.iconSize[size]};
+  height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>
+    theme.iconSize[size]};
+`;
+
+export const StyledAvatar = styled(Image)<Partial<StyleProps>>`
+  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+`;
+
+export const StyledBackground = styled(View)<Partial<StyleProps>>`
+  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};
+  background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+`;
+
+export const getStyledTextComponent = (component: FC<TextProps>) => {
+  return styled(component)`
+    text-transform: uppercase;
+    text-align: center;
+    align-self: center;
+    flex: 1;
+  `;
+};

package/src/components/atoms/Badge/Badge.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ColorGradationType, ColorType } from '@tecsinapse/react-core';
+import { BadgeStyle, ViewStyled } from './styled';
+
+export interface BadgeProps {
+  color: ColorType;
+  tone?: ColorGradationType;
+  style?: StyleProp<ViewStyle>;
+  value: React.ReactNode;
+}
+
+const Badge: FC<BadgeProps> = ({
+  children,
+  style,
+  color = 'primary',
+  tone = 'medium',
+  value,
+}): JSX.Element => {
+  return (
+    <ViewStyled>
+      {children}
+      <BadgeStyle style={style} color={color} tone={tone}>
+        {value}
+      </BadgeStyle>
+    </ViewStyled>
+  );
+};
+
+export default Badge;

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

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

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

@@ -0,0 +1,34 @@
+import styled, { css } from '@emotion/native';
+import { View } from 'react-native';
+import { StyleProps } from '../../../types/defaults';
+import { RFValue } from '../../../utils';
+import { BadgeProps } from './Badge';
+
+const baseStyle = ({
+  theme,
+  color = 'primary',
+  tone = 'medium',
+}: StyleProps & Partial<BadgeProps>) => {
+  return css`
+    border-radius: ${theme.borderRadius.pill};
+    background-color: ${theme.color[color][tone]};
+    position: absolute;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: ${theme.iconSize.centi};
+    width: ${theme.iconSize.centi};
+    top: ${`${RFValue(-4)}px`};
+    right: ${`${RFValue(-4)}px`};
+  `;
+};
+
+export const BadgeStyle =
+  styled(View)<Partial<StyleProps & BadgeProps>>(baseStyle);
+
+export const ViewStyled = styled(View)<Partial<StyleProps & BadgeProps>>`
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  align-self: center;
+`;

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

@@ -0,0 +1,30 @@
+import styled from '@emotion/native';
+import { Story } from '@storybook/react';
+import React from 'react';
+import { BoxContent, BoxContentProps } from '.';
+import { Text } from '../Text';
+
+export default {
+  title: 'Hybrid/Box Content',
+  component: BoxContent,
+};
+
+const Template: Story<BoxContentProps> = ({ ...rest }) => (
+  <StyledBoxContent {...rest}>
+    <Text>Some text here!</Text>
+    <Text>Some text here!</Text>
+    <Text>Some text here!</Text>
+    <Text>Some text here!</Text>
+    <Text>Some text here!</Text>
+  </StyledBoxContent>
+);
+
+export const Base = Template.bind({});
+
+Base.args = {
+  variant: 'bottom',
+};
+
+const StyledBoxContent = styled(BoxContent)`
+  align-items: center;
+`;

package/src/components/atoms/BoxContent/BoxContent.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { ViewProps } from 'react-native';
+import { StyledBoxContent } from './styled';
+
+export interface BoxContentProps extends ViewProps {
+  variant: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const BoxContent: FC<BoxContentProps> = ({ children, ...rest }) => {
+  return <StyledBoxContent {...rest}>{children}</StyledBoxContent>;
+};
+
+export default BoxContent;

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

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

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

@@ -0,0 +1,67 @@
+import styled, { css } from '@emotion/native';
+import { StyleProps } from '@tecsinapse/react-core';
+import { View } from 'react-native';
+import { BoxContentProps } from './BoxContent';
+
+export const elevatedStyles = ({ theme }: Partial<StyleProps>) => [
+  css({
+    shadowColor: theme?.miscellaneous.shadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  }),
+];
+
+const topStyles = ({ theme, variant }: Partial<BoxContentProps> & StyleProps) =>
+  variant === 'top' &&
+  css`
+    border-bottom-left-radius: ${theme.borderRadius.deca};
+    border-bottom-right-radius: ${theme.borderRadius.deca};
+  `;
+
+const bottomStyles = ({
+  theme,
+  variant,
+}: Partial<BoxContentProps> & StyleProps) =>
+  variant === 'bottom' &&
+  css`
+    border-top-left-radius: ${theme.borderRadius.deca};
+    border-top-right-radius: ${theme.borderRadius.deca};
+  `;
+
+const leftStyles = ({
+  theme,
+  variant,
+}: Partial<BoxContentProps> & StyleProps) =>
+  variant === 'left' &&
+  css`
+    border-top-right-radius: ${theme.borderRadius.deca};
+    border-bottom-right-radius: ${theme.borderRadius.deca};
+  `;
+
+const rightStyles = ({
+  theme,
+  variant,
+}: Partial<BoxContentProps> & StyleProps) =>
+  variant === 'right' &&
+  css`
+    border-top-left-radius: ${theme.borderRadius.deca};
+    border-bottom-left-radius: ${theme.borderRadius.deca};
+  `;
+
+const StyledBoxContentBase = styled(View)<Partial<StyleProps>>`
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+  min-height: ${({ theme }) => theme.spacing.kilo};
+  overflow: hidden;
+`;
+
+export const StyledBoxContent = styled(StyledBoxContentBase)(
+  props => css`
+    ${elevatedStyles(props)}
+    ${topStyles(props)}
+  ${bottomStyles(props)}
+  ${leftStyles(props)}
+  ${rightStyles(props)}
+  `
+);

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

@@ -0,0 +1,103 @@
+import { useTheme } from '@emotion/react';
+import React, { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import {
+  BorderRadiusType,
+  ColorGradationType,
+  ColorType,
+  FontColorType,
+  ThemeProp,
+  VariantType,
+} from '../../../types/defaults';
+import { PressableSurfaceProps } from '../PressableSurface';
+import { TextProps } from '../Text';
+import { StyledButton } from './styled';
+
+export type ButtonSizeType = 'small' | 'default';
+
+export type ButtonStateType = 'loading' | 'error' | 'success' | 'default';
+
+export interface ButtonStateProps {
+  buttonSize?: ButtonSizeType;
+  fontColor?: FontColorType;
+  textComponent?: React.FC<TextProps>;
+  text?: string;
+}
+
+export interface ButtonProps extends PressableSurfaceProps {
+  style?: StyleProp<ViewStyle>;
+  color?: ColorType;
+  variant?: VariantType;
+  tone?: ColorGradationType;
+  frozen?: boolean | null;
+  borderRadius?: BorderRadiusType;
+  size?: ButtonSizeType;
+  state?: ButtonStateType;
+  loadingComponent?: JSX.Element;
+  errorComponent?: JSX.Element;
+  successComponent?: JSX.Element;
+}
+
+const Button: FC<ButtonProps> = ({
+  children,
+  style,
+  color = 'primary',
+  variant = 'filled',
+  tone = 'medium',
+  state = 'default',
+  loadingComponent,
+  errorComponent,
+  successComponent,
+  size,
+  frozen,
+  disabled,
+  ...rest
+}): JSX.Element => {
+  const theme = useTheme() as ThemeProp;
+  const _frozen = frozen || state === 'loading';
+  let _color: ColorType;
+  switch (state) {
+    case 'error':
+      _color = 'error';
+      break;
+
+    case 'success':
+      _color = 'success';
+      break;
+
+    default:
+      _color = color;
+      break;
+  }
+
+  let _surfaceColor;
+  if (variant === 'filled') {
+    _surfaceColor = theme.color[_color][tone];
+  }
+
+  if (disabled) {
+    _surfaceColor = theme.color[_color].light;
+  }
+
+  return (
+    <StyledButton
+      {...rest}
+      accessibilityRole="button"
+      style={style}
+      color={_color}
+      tone={tone}
+      surfaceColor={_surfaceColor}
+      variant={variant}
+      size={size}
+      disabled={_frozen || disabled}
+      frozen={disabled}
+    >
+      {state === 'loading' && loadingComponent}
+      {state === 'error' && errorComponent}
+      {state === 'success' && successComponent}
+      {state === 'default' && children}
+    </StyledButton>
+  );
+};
+
+export default Button;

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

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import {
+  IconSizeType,
+  TypographyVariationType,
+} from '../../../../types/defaults';
+import { Icon } from '../../Icon';
+import { Text } from '../../Text';
+import { ButtonStateProps } from '../Button';
+import { getStyledTextButton } from './styled';
+
+export interface BaseStateProps extends ButtonStateProps {
+  icon: string;
+}
+
+const BaseState: FC<BaseStateProps> = ({
+  textComponent = Text,
+  buttonSize = 'default',
+  fontColor = 'light',
+  icon,
+  text,
+}) => {
+  const typo: TypographyVariationType =
+    buttonSize === 'default' ? 'base' : 'sub';
+  const iconSize: IconSizeType = buttonSize === 'default' ? 'deca' : 'centi';
+  const StyledText = getStyledTextButton(textComponent);
+  return (
+    <>
+      <Icon name={icon} type="ionicon" fontColor={fontColor} size={iconSize} />
+      {text && (
+        <StyledText typography={typo} fontWeight="bold" fontColor={fontColor}>
+          {text}
+        </StyledText>
+      )}
+    </>
+  );
+};
+
+export default BaseState;

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

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

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

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

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

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

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

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

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

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