@tecsinapse/react-core 1.21.2 → 1.21.4

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

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

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

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

@@ -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;