@tecsinapse/react-native-kit 1.22.0 → 1.22.1-beta.2

package/src/components/molecules/Grid/Grid.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { View, ViewProps } from 'react-native';
-import { GridItem } from './Item';
-import { IGrid } from '@tecsinapse/react-core';
-
-export type IGridNative = IGrid & ViewProps;
-
-const Grid = ({
-  children,
-  columns = 12,
-  layout,
-  style,
-  spacing,
-  ...rest
-}: IGridNative): JSX.Element => {
-  if (layout) {
-    const flatLayout = layout.flat();
-    return (
-      <View
-        style={[
-          style,
-          {
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-          },
-        ]}
-        {...rest}
-      >
-        {React.Children.map(children, (child, index) => (
-          <GridItem
-            key={`child-${index}`}
-            columns={columns}
-            span={flatLayout[index]}
-            spacing={spacing}
-          >
-            {child}
-          </GridItem>
-        ))}
-      </View>
-    );
-  }
-
-  return (
-    <View
-      style={[
-        style,
-        {
-          display: 'flex',
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-        },
-      ]}
-      {...rest}
-    >
-      {React.Children.map(children, (child, index) => {
-        return React.cloneElement(child, {
-          ...child?.props,
-          columns,
-          spacing: child?.props.spacing ?? spacing,
-          key: `child-${index}`,
-        });
-      })}
-    </View>
-  );
-};
-
-export default Grid;

package/src/components/molecules/Grid/Item/Item.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { View, ViewProps } from 'react-native';
-import {
-  IGridItem,
-  useTheme,
-  getGridItemColumSpan,
-  getGridItemPadding,
-} from '@tecsinapse/react-core';
-
-export type IGridItemNative = IGridItem &
-  ViewProps & {
-    /** Only specify this property if the GridItem will be 'dynamic', adjusting itself to content. Use this with `wrapper` for better result. */
-    flexBasis?: string | 'auto';
-  };
-
-const GridItem = ({
-  children,
-  span,
-  columns = 12,
-  loadingComponent,
-  loading = false,
-  spacing: _spacing,
-  wrapper = false,
-  alignContent,
-  alignItems,
-  alignSelf,
-  flex,
-  flexDirection,
-  flexGrow,
-  flexShrink,
-  justifyContent,
-  flexBasis,
-  style,
-  ...rest
-}: IGridItemNative): JSX.Element => {
-  const { spacing } = useTheme();
-  if (!React.Children.only(children)) {
-    throw new Error('The number of children in GridItem should be one');
-  }
-  if (loadingComponent && loading) {
-    return loadingComponent;
-  }
-
-  const _style = {
-    alignContent,
-    alignItems,
-    alignSelf,
-    flex,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    justifyContent,
-    boxSizing: 'border-box',
-    flexBasis: flexBasis ?? `${getGridItemColumSpan(columns, span)}%`,
-    paddingTop: getGridItemPadding('top', _spacing, spacing),
-    paddingBottom: getGridItemPadding('bottom', _spacing, spacing),
-    paddingRight: getGridItemPadding('right', _spacing, spacing),
-    paddingLeft: getGridItemPadding('left', _spacing, spacing),
-  };
-
-  const clone = React.cloneElement(children, {
-    ...children?.props,
-    style: wrapper
-      ? children?.props.style
-      : { ..._style, ...children?.props.style },
-  });
-
-  return wrapper ? (
-    <View {...rest} style={[style, _style]}>
-      {clone}
-    </View>
-  ) : (
-    clone
-  );
-};
-
-export default GridItem;

package/src/components/molecules/Grid/Item/index.ts

@@ -1 +0,0 @@
-export { default as GridItem, IGridItemNative } from './Item';

package/src/components/molecules/Grid/index.ts

@@ -1,2 +0,0 @@
-export { GridItem } from './Item';
-export { default as Grid } from './Grid';

package/src/components/molecules/IconTextButton/IconTextButton.tsx

@@ -1,55 +0,0 @@
-import {
-  fontColorVC,
-  IconComponent,
-  IconTextButtonProps,
-} from '@tecsinapse/react-core';
-import React from 'react';
-import { ButtonNativeProps } from '../../atoms/Button';
-import { StyledIconTextButton } from './styled';
-import TextComponent from './TextComponent';
-
-export type NativeIconTextButtonProps = IconTextButtonProps &
-  Omit<ButtonNativeProps, 'ButtonProps'>;
-
-const IconTextButton: React.FC<NativeIconTextButtonProps> = ({
-  iconProps,
-  iconPosition = 'left',
-  textProps,
-  label,
-  variant = 'filled',
-  size = 'default',
-  ...rest
-}) => {
-  return (
-    <StyledIconTextButton boxed={!label} variant={variant} {...rest}>
-      {iconPosition === 'left' ? (
-        <IconComponent
-          iconProps={iconProps}
-          size={size}
-          defaultFontColor={fontColorVC[variant]}
-        />
-      ) : (
-        <></>
-      )}
-      <TextComponent
-        label={label}
-        defaultFontColor={fontColorVC[variant]}
-        hasIcon={!!iconProps}
-        iconPosition={iconPosition}
-        textProps={textProps}
-        size={size}
-      />
-      {iconPosition === 'right' ? (
-        <IconComponent
-          iconProps={iconProps}
-          size={size}
-          defaultFontColor={fontColorVC[variant]}
-        />
-      ) : (
-        <></>
-      )}
-    </StyledIconTextButton>
-  );
-};
-
-export default IconTextButton;

package/src/components/molecules/IconTextButton/TextComponent.tsx

@@ -1,43 +0,0 @@
-import {
-  ButtonSizeType,
-  FontColor,
-  IconPositionOptions,
-  TextProps,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { StyledText } from './styled';
-
-interface TextComponentProps {
-  textProps?: TextProps;
-  size?: ButtonSizeType;
-  defaultFontColor: keyof FontColor;
-  label?: string;
-  iconPosition?: IconPositionOptions;
-  hasIcon?: boolean;
-}
-
-const TextComponent: FC<TextComponentProps> = ({
-  textProps,
-  size = 'default',
-  defaultFontColor,
-  label,
-  iconPosition = 'left',
-  hasIcon = false,
-}) => {
-  return label ? (
-    <StyledText
-      typography={textProps?.typography ?? size === 'small' ? 'sub' : 'base'}
-      fontWeight={textProps?.fontWeight ?? 'bold'}
-      fontColor={textProps?.fontColor ?? defaultFontColor}
-      iconPosition={iconPosition}
-      hasIcon={hasIcon}
-      {...textProps}
-    >
-      {label}
-    </StyledText>
-  ) : (
-    <></>
-  );
-};
-
-export default React.memo(TextComponent);

package/src/components/molecules/IconTextButton/index.ts

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

package/src/components/molecules/IconTextButton/styled.ts

@@ -1,35 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { IconPositionOptions, StyleProps } from '@tecsinapse/react-core';
-import { Button } from '../../atoms/Button';
-import { Text } from '../../atoms/Text';
-
-const boxedStyle = ({ theme }: Partial<StyleProps>) => `
-    padding: ${theme?.spacing.centi};
-    aspect-ratio: 1;
-  `;
-
-export const StyledIconTextButton = styled(Button)<
-  Partial<StyleProps> & {
-    boxed: boolean;
-  }
->`
-  ${({ boxed, theme }) => boxed && boxedStyle({ theme })};
-`;
-
-export const StyledText = styled(Text)<
-  Partial<StyleProps> & {
-    iconPosition: IconPositionOptions;
-    hasIcon?: boolean;
-  }
->`
-  ${({ theme, iconPosition, hasIcon = false }) => {
-    if (hasIcon && iconPosition === 'left')
-      return css`
-        margin-left: ${theme?.spacing.mili};
-      `;
-    else if (hasIcon && iconPosition === 'right')
-      return css`
-        margin-right: ${theme?.spacing.mili};
-      `;
-  }}
-`;

package/src/components/molecules/InputPassword/InputPassword.tsx

@@ -1,33 +0,0 @@
-import { InputPasswordIcon } from '@tecsinapse/react-core';
-import React, { useState } from 'react';
-import { Input, InputNativeProps } from '../../atoms/Input';
-import { TextInput } from 'react-native';
-
-export type InputPasswordNativeProps = InputNativeProps;
-
-const InputPassword = React.forwardRef<TextInput, InputPasswordNativeProps>(
-  ({ rightComponent, ...rest }, ref) => {
-    const [revealed, setRevealed] = useState(false);
-    return (
-      <Input
-        {...rest}
-        ref={ref}
-        secureTextEntry={!revealed}
-        rightComponent={
-          <>
-            <InputPasswordIcon
-              onChangeState={setRevealed}
-              revealed={revealed}
-              effect="none"
-            />
-            {rightComponent}
-          </>
-        }
-      />
-    );
-  }
-);
-
-InputPassword.displayName = 'InputPassword';
-
-export default InputPassword;

package/src/components/molecules/InputPassword/index.ts

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

package/src/components/molecules/LabeledSwitch/LabelComponent.tsx

@@ -1,46 +0,0 @@
-import {
-  FontColor,
-  FontWeight,
-  LabelPositionOptions,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Pressable, PressableProps } from 'react-native';
-import { TextNativeProps } from '../../atoms/Text';
-import { StyledLabel } from './styled';
-
-export interface LabelComponentProps extends PressableProps {
-  label: string;
-  labelPosition: LabelPositionOptions;
-  labelProps?: TextNativeProps;
-  active: boolean;
-  switchDisabled?: boolean;
-}
-
-const LabelComponent: FC<LabelComponentProps> = ({
-  label,
-  labelPosition,
-  labelProps,
-  active,
-  switchDisabled = false,
-  ...rest
-}) => {
-  const defaultFontColor: keyof FontColor =
-    active && !switchDisabled ? 'dark' : 'medium';
-  const defaultFontWeight: keyof FontWeight =
-    active && !switchDisabled ? 'bold' : 'regular';
-
-  return (
-    <Pressable {...rest}>
-      <StyledLabel
-        labelPosition={labelPosition}
-        fontColor={labelProps?.fontColor ?? defaultFontColor}
-        fontWeight={labelProps?.fontWeight ?? defaultFontWeight}
-        {...labelProps}
-      >
-        {label}
-      </StyledLabel>
-    </Pressable>
-  );
-};
-
-export default React.memo(LabelComponent);

package/src/components/molecules/LabeledSwitch/LabeledSwitch.tsx

@@ -1,59 +0,0 @@
-import { LabeledSwitchProps, Switch } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { TextNativeProps } from '../../atoms/Text';
-import LabelComponent from './LabelComponent';
-import { StyledView } from './styled';
-
-export type LabeledSwitchNativeProps = LabeledSwitchProps & {
-  labelProps?: TextNativeProps;
-};
-
-const LabeledSwitch: FC<LabeledSwitchNativeProps> = ({
-  label,
-  labelPosition = 'right',
-  labelProps,
-  pressableLabel = false,
-  active,
-  disabled,
-  onChange,
-  ...rest
-}) => {
-  return (
-    <StyledView>
-      {labelPosition === 'left' ? (
-        <LabelComponent
-          active={active}
-          label={label}
-          labelPosition={'left'}
-          labelProps={labelProps}
-          disabled={!pressableLabel || disabled}
-          switchDisabled={disabled}
-          onPress={() => onChange(!active)}
-        />
-      ) : (
-        <></>
-      )}
-      <Switch
-        active={active}
-        onChange={onChange}
-        disabled={disabled}
-        {...rest}
-      />
-      {labelPosition === 'right' ? (
-        <LabelComponent
-          active={active}
-          label={label}
-          labelPosition={'right'}
-          labelProps={labelProps}
-          disabled={!pressableLabel || disabled}
-          switchDisabled={disabled}
-          onPress={() => onChange(!active)}
-        />
-      ) : (
-        <></>
-      )}
-    </StyledView>
-  );
-};
-
-export default LabeledSwitch;

package/src/components/molecules/LabeledSwitch/index.ts

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

package/src/components/molecules/LabeledSwitch/styled.ts

@@ -1,27 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { LabelPositionOptions, StyleProps } from '@tecsinapse/react-core';
-import { View } from 'react-native';
-import { Text } from '../../atoms/Text';
-
-export const StyledView = styled(View)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
-export const StyledLabel = styled(Text)<
-  Partial<StyleProps> & {
-    labelPosition: LabelPositionOptions;
-  }
->`
-  ${({ theme, labelPosition }) => {
-    if (labelPosition === 'right')
-      return css`
-        margin-left: ${theme?.spacing.centi};
-      `;
-    else if (labelPosition === 'left')
-      return css`
-        margin-right: ${theme?.spacing.centi};
-      `;
-  }}
-`;