@teamturing/react-native-kit 1.1.0 → 1.2.1

package/src/component/TextField/BaseTextField.tsx

@@ -0,0 +1,156 @@
+import {
+  is,
+  palette,
+  spacing,
+  Txt,
+  Grid,
+  Shake,
+  type ImperativeAnimationRef,
+  Touch,
+} from '@teamturing/react-native-kit';
+import React, { useEffect, useRef, forwardRef } from 'react';
+import { type TextInput, type StyleProp, type ViewStyle, type ColorValue, type TextStyle, View } from 'react-native';
+
+import { IconBtn } from '../Btn';
+import { type IconName, Icon } from '../Icon';
+
+import type { CoreTextFieldProps } from './CoreTextField';
+import { CoreTextField } from './CoreTextField';
+
+type Props = {
+  label?: string;
+  leadingIcon?: IconName;
+  trailingIcon?: IconName;
+  trailingIconFill?: ColorValue;
+  trailingElements?: React.ReactElement[];
+  disabled?: boolean;
+  readonly?: boolean;
+  helpText?: string;
+  successText?: string;
+  errorText?: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  textFieldStyle?: TextStyle;
+} & Omit<CoreTextFieldProps, 'style'>;
+
+const _BaseTextField = (
+  {
+    label,
+    leadingIcon,
+    trailingIcon,
+    trailingIconFill,
+    trailingElements = [],
+    disabled = false,
+    readonly = false,
+    helpText,
+    errorText,
+    successText,
+    onPress,
+    style,
+    textFieldStyle,
+    ...props
+  }: Props,
+  ref: React.Ref<TextInput>,
+) => {
+  const isError = is.notEmptyString(errorText);
+  const isSuccess = is.notEmptyString(successText);
+
+  const shake = useRef<ImperativeAnimationRef>(null);
+  useEffect(() => {
+    if (isError) {
+      shake.current?.start();
+    }
+  }, [isError]);
+
+  const trailingElementList = (() => {
+    const ret: React.ReactElement[] = [];
+    if (is.notEmptyArray(trailingElements)) {
+      ret.push(...trailingElements);
+    }
+    if (trailingIcon) {
+      ret.push(<Icon name={trailingIcon} size={24} fill={trailingIconFill || palette.gray300} />);
+    }
+
+    if (is.emptyArray(ret) && !disabled && !readonly && is.notEmptyString(props.value)) {
+      ret.push(
+        <IconBtn
+          name={'close_in_circle'}
+          size={'m'}
+          variant={'plain-gray300'}
+          onPress={() => props.onChangeText?.('', '')}
+          layout={{ marginRight: -spacing[1] }}
+        />,
+      );
+    }
+    return ret;
+  })();
+
+  return (
+    <Shake ref={shake} style={style} disableFirstAnimation>
+      {label ? Txt.XS.Medium.Gray700.render(label, { style: { marginBottom: spacing[1] } }) : null}
+      <View
+        style={{
+          height: !props.multiline ? 54 : undefined,
+
+          borderWidth: 1,
+          borderColor: disabled ? palette.gray200 : isError ? palette.red500 : palette.gray200,
+          borderRadius: 12,
+          justifyContent: 'center',
+          backgroundColor: disabled ? palette.gray100 : palette.white,
+        }}
+      >
+        <Grid spacing={2} layout={{ marginHorizontal: spacing[5] }}>
+          {leadingIcon ? (
+            <Grid.Unit size={'min'}>
+              <Icon name={leadingIcon} size={24} fill={palette.gray300} />
+            </Grid.Unit>
+          ) : null}
+          <Grid.Unit size={'max'}>
+            <CoreTextField
+              ref={ref}
+              style={[
+                {
+                  paddingTop: props.multiline ? spacing[4] : undefined,
+                  paddingBottom: props.multiline ? spacing[4] : undefined,
+                },
+                textFieldStyle,
+              ]}
+              readonly={readonly}
+              disabled={disabled}
+              {...props}
+            />
+          </Grid.Unit>
+          {trailingElementList.map((element, i) => (
+            <Grid.Unit size={'min'} key={i}>
+              {element}
+            </Grid.Unit>
+          ))}
+        </Grid>
+      </View>
+      {isError || isSuccess || is.notEmptyString(helpText)
+        ? Txt.XS.Medium.Color(isError ? palette.red500 : isSuccess ? palette.green500 : palette.gray400).render(
+            errorText || helpText || successText,
+            {
+              style: { marginTop: spacing[1] },
+              testID: errorText
+                ? `${props.testID}/error`
+                : isSuccess
+                ? `${props.testID}/success`
+                : `${props.testID}/helper`,
+            },
+          )
+        : null}
+      {!disabled && onPress ? (
+        <Touch
+          testID={`${props?.testID}/button`}
+          activeOpacity={0}
+          onPress={onPress}
+          style={{ position: 'absolute', left: 0, top: 0, right: 0, bottom: 0 }}
+        />
+      ) : null}
+    </Shake>
+  );
+};
+
+export const BaseTextField = forwardRef(_BaseTextField);
+export type { Props as BaseTextFieldProps };

package/src/component/TextField/CoreTextField.tsx

@@ -0,0 +1,113 @@
+import { FontWeight, is, palette, spacing } from '@teamturing/react-native-kit';
+import React, { useState, useEffect, forwardRef } from 'react';
+import type { TextInputProps, StyleProp, TextStyle } from 'react-native';
+import { TextInput } from 'react-native';
+
+import type { NumericFormatType } from './textFieldNumericFormatUtils';
+import { TextFieldNumericFormatUtil } from './textFieldNumericFormatUtils';
+
+type Props = {
+  style?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  readonly?: boolean;
+  /**
+   * Spearate string displayed with real interal string by formatting allowed only number or asterisk(*)
+   *
+   * The keyboardType, maxLength props are set automatically. The manual values are ignored.
+   *
+   * This causes additional build phase. This is the limitation of RN RIP.
+   */
+  numericFormatType?: NumericFormatType;
+  onChangeText?: (formattedValue: string, internalValue: string) => void;
+} & Pick<
+  TextInputProps,
+  | 'textContentType'
+  | 'maxLength'
+  | 'multiline'
+  | 'onFocus'
+  | 'onBlur'
+  | 'placeholder'
+  | 'placeholderTextColor'
+  | 'value'
+  | 'keyboardType'
+  | 'onSubmitEditing'
+  | 'returnKeyType'
+  | 'autoFocus'
+  | 'secureTextEntry'
+  | 'enablesReturnKeyAutomatically'
+  | 'scrollEnabled'
+  | 'testID'
+>;
+
+const _CoreTextField = (
+  {
+    disabled,
+    readonly,
+    style,
+    value,
+    onChangeText,
+    numericFormatType,
+    keyboardType,
+    maxLength,
+    textContentType,
+    ...props
+  }: Props,
+  ref: React.Ref<TextInput>,
+) => {
+  const isFormattingEnabled = is.notEmptyString(numericFormatType);
+
+  const [formattedValue, setFormattedValue] = useState<string>(value || '');
+
+  const editable = !(disabled || readonly);
+
+  useEffect(() => {
+    if (isFormattingEnabled) {
+      const formatted = TextFieldNumericFormatUtil.formatWithType(numericFormatType, value || '', '');
+      setFormattedValue(formatted);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, isFormattingEnabled, numericFormatType]);
+
+  return (
+    <TextInput
+      allowFontScaling={false}
+      ref={ref}
+      style={[
+        {
+          fontWeight: FontWeight.Medium,
+          fontSize: 16,
+          color: disabled ? palette.gray400 : palette.gray900,
+          lineHeight: props.multiline && formattedValue?.includes('\n') ? 16 * 1.5 : undefined,
+          includeFontPadding: false,
+        },
+        style,
+      ]}
+      placeholderTextColor={palette.gray400}
+      autoCapitalize={'none'}
+      autoCorrect={false}
+      editable={editable}
+      focusable={editable}
+      hitSlop={{ left: spacing[5], top: spacing[3], bottom: spacing[3] }}
+      returnKeyType={'done'}
+      value={isFormattingEnabled ? formattedValue : value}
+      onChangeText={(value) => {
+        if (!isFormattingEnabled) {
+          onChangeText?.(value, value);
+        } else {
+          const formatted = TextFieldNumericFormatUtil.formatWithType(numericFormatType, value, formattedValue);
+          setFormattedValue(formatted);
+          onChangeText?.(formatted, TextFieldNumericFormatUtil.parseOnlyEscapeCharacters(formatted));
+        }
+      }}
+      {...props}
+      keyboardType={isFormattingEnabled ? 'number-pad' : keyboardType}
+      maxLength={isFormattingEnabled ? numericFormatType!.length : maxLength}
+      // Only iOS prop for auto complete id/password, sms code
+      textContentType={is.iOS() ? textContentType : undefined}
+    />
+  );
+};
+
+export const CoreTextField = forwardRef(_CoreTextField);
+
+export type { Props as CoreTextFieldProps };

package/src/component/TextField/index.ts

@@ -0,0 +1,3 @@
+import { BaseTextField as TextField } from './BaseTextField';
+
+export { TextField };

package/src/component/TextField/textFieldNumericFormatUtils.test.ts

@@ -0,0 +1,17 @@
+import { TextFieldNumericFormatUtil } from './textFieldNumericFormatUtils';
+
+it('parse only escape characters', () => {
+  expect(TextFieldNumericFormatUtil.parseOnlyEscapeCharacters('00 / 00')).toBe('0000');
+});
+
+it('format appended', () => {
+  expect(TextFieldNumericFormatUtil.formatWithType('00 / 00', '1234', '123')).toBe('12 / 34');
+});
+
+it('format popped', () => {
+  expect(TextFieldNumericFormatUtil.formatWithType('00 / 00', '123', '1234')).toBe('12 / 3');
+});
+
+it('paste', () => {
+  expect(TextFieldNumericFormatUtil.formatWithType('00 / 00', '1234', '1231241')).toBe('12 / 34');
+});

package/src/component/TextField/textFieldNumericFormatUtils.ts

@@ -0,0 +1,74 @@
+import { is } from '@teamturing/react-native-kit';
+
+export type NumericFormatType = '0000 0000 0000 0000' | '00 / 00' | '000 0000 0000';
+function isEscapeChar(char: string): boolean {
+  return char.length === 1 && is.integerString(char);
+}
+
+function parseOnlyEscapeCharacters(value: string) {
+  let ret = '';
+  for (let i = 0; i < value.length; i++) {
+    if (isEscapeChar(value[i])) {
+      ret += value[i];
+    }
+  }
+  return ret;
+}
+function isPrefixOf(check: string, source: string): boolean {
+  if (check.length > source.length) {
+    return false;
+  }
+  for (let i = 0; i < check.length; i++) {
+    if (check[i] !== source[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+function formatWithType(type: NumericFormatType, value: string, previousValue: string): string {
+  const isDeleteNotNumericCharacter =
+    previousValue.length === value.length + 1 &&
+    isPrefixOf(value, previousValue) &&
+    !isEscapeChar(previousValue[previousValue.length - 1]);
+  value = parseOnlyEscapeCharacters(value).slice(0, countEscapeCharacters(type));
+  let ret = '';
+  let i = 0,
+    j = 0;
+  while (i < value.length && j < type.length) {
+    while (j < type.length && !isEscapeChar(type[j])) {
+      ret += type[j++];
+    }
+    if (j >= type.length) {
+      break;
+    }
+    ret += value[i++];
+    j += 1;
+  }
+  while (j < type.length && !isEscapeChar(type[j])) {
+    ret += type[j++];
+  }
+  if (isDeleteNotNumericCharacter) {
+    while (ret.length >= 1 && !isEscapeChar(ret[ret.length - 1])) {
+      ret = ret.slice(0, ret.length - 1);
+    }
+    if (ret.length >= 1) {
+      ret = ret.slice(0, ret.length - 1);
+    }
+  }
+  return ret;
+
+  function countEscapeCharacters(value: string) {
+    let ret = 0;
+    for (let i = 0; i < value.length; i++) {
+      if (isEscapeChar(value[i])) {
+        ret++;
+      }
+    }
+    return ret;
+  }
+}
+
+export const TextFieldNumericFormatUtil = {
+  formatWithType,
+  parseOnlyEscapeCharacters,
+};

package/src/component/ToolTip/BaseToolTip.tsx

@@ -0,0 +1,175 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { spacing, palette, is, RowCenter, Column } from '@teamturing/react-native-kit';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle, ColorValue } from 'react-native';
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+type Props = {
+  triangleDirection?:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'right'
+    | 'left';
+  triangleSize?: number;
+  style?: StyleProp<ViewStyle>;
+  backgroundColor?: ColorValue;
+  renderContent?: () => ReactElement;
+  contentOuterContainerStyle?: StyleProp<ViewStyle>;
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
+  borderColor?: ColorValue;
+  borderWidth?: number;
+  sx?: SxProps;
+  contentContainerSx?: SxProps;
+};
+const BaseToolTip = ({
+  triangleDirection = 'top-left',
+  style,
+  backgroundColor = palette.white,
+  renderContent: _renderContnetProp,
+  contentOuterContainerStyle,
+  triangleSize = 10,
+  pointerEvents,
+  borderColor = palette.gray200,
+  borderWidth = 0,
+  sx,
+  contentContainerSx,
+}: Props) => {
+  const showBorder = is.number(borderWidth) && borderWidth > 0 && is.notEmptyString(borderColor);
+  const isTop = triangleDirection?.startsWith('top');
+  const isHorizontal = triangleDirection === 'left' || triangleDirection === 'right';
+  const isLeft = triangleDirection === 'left';
+
+  const { getStyle } = useSx(sx);
+  const { getStyle: contentContainerStyle } = useSx(contentContainerSx);
+
+  const renderVerticalTriangle = () => (
+    <Svg
+      width={triangleSize}
+      height={triangleSize * 0.6}
+      viewBox={`0 0 ${triangleSize} ${triangleSize * 0.6}`}
+      fill={backgroundColor}
+      style={{ transform: [{ rotate: isTop ? '180deg' : '0deg' }] }}
+    >
+      <Path d={`M 0,0 L ${triangleSize},0 L ${triangleSize / 2},${triangleSize * 0.6} z`} />
+      <Path
+        d={`M 0,0 L ${triangleSize / 2},${triangleSize * 0.6} L ${triangleSize},${0}`}
+        {...(showBorder
+          ? {
+              stroke: borderColor,
+              strokeWidth: borderWidth,
+            }
+          : {})}
+      />
+    </Svg>
+  );
+  const renderHorizontalTriangle = () => {
+    const w = triangleSize * 0.7;
+    const h = triangleSize;
+    return (
+      <Svg
+        width={w}
+        height={h}
+        viewBox={`0 0 ${w} ${h}`}
+        fill={backgroundColor}
+        style={{ transform: [{ rotate: isLeft ? '180deg' : '0deg' }] }}
+      >
+        <Path d={`M 0,0 L ${w},${h / 2} L 0,${h} z`} />
+      </Svg>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <View
+        style={[
+          {
+            backgroundColor,
+          },
+          showBorder
+            ? {
+                borderWidth,
+                borderColor,
+              }
+            : {},
+          contentContainerStyle(),
+        ]}
+      >
+        {_renderContnetProp?.()}
+      </View>
+    );
+  };
+
+  if (isHorizontal) {
+    return (
+      <RowCenter pointerEvents={pointerEvents} style={[style, getStyle()]}>
+        {!isLeft ? null : (
+          <View
+            style={{
+              transform: [{ translateX: 1 }],
+            }}
+          >
+            {renderHorizontalTriangle()}
+          </View>
+        )}
+        <View style={contentOuterContainerStyle}>{renderContent()}</View>
+        {isLeft ? null : (
+          <View
+            style={{
+              transform: [{ translateX: -1 }],
+            }}
+          >
+            {renderHorizontalTriangle()}
+          </View>
+        )}
+      </RowCenter>
+    );
+  } else {
+    return (
+      <Column pointerEvents={pointerEvents} style={[style, getStyle()]}>
+        {!isTop ? null : (
+          <View
+            style={{
+              alignSelf:
+                triangleDirection === 'top-center'
+                  ? 'center'
+                  : triangleDirection === 'top-right'
+                  ? 'flex-end'
+                  : 'flex-start',
+              left: triangleDirection === 'top-left' ? spacing[3] : undefined,
+              right: triangleDirection === 'top-right' ? spacing[3] : undefined,
+              bottom: -1,
+            }}
+          >
+            {renderVerticalTriangle()}
+          </View>
+        )}
+        <View style={contentOuterContainerStyle}>{renderContent()}</View>
+        {isTop ? null : (
+          <View
+            style={{
+              alignSelf:
+                triangleDirection === 'bottom-center'
+                  ? 'center'
+                  : triangleDirection === 'bottom-right'
+                  ? 'flex-end'
+                  : 'flex-start',
+              left: triangleDirection === 'bottom-left' ? spacing[3] : undefined,
+              right: triangleDirection === 'bottom-right' ? spacing[3] : undefined,
+              top: -0.2 - borderWidth,
+            }}
+          >
+            {renderVerticalTriangle()}
+          </View>
+        )}
+      </Column>
+    );
+  }
+};
+export type { Props as BaseToolTipProps };
+export { BaseToolTip };

package/src/component/ToolTip/TextToolTip.tsx

@@ -0,0 +1,53 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import type { ReactElement } from 'react';
+import type { ColorValue } from 'react-native';
+
+import { palette } from '../../theme';
+import { Icon } from '../Icon';
+import { RowCenter } from '../Layout';
+import { Txt } from '../Txt';
+
+import { type BaseToolTipProps, BaseToolTip } from './BaseToolTip';
+
+type Props = {
+  text: string;
+  showsCloseButton?: boolean;
+  textColor?: ColorValue;
+  renderText?: (text: string) => ReactElement;
+  sx?: SxProps;
+  contentContainerSx?: SxProps;
+  contentSx?: SxProps;
+} & Omit<BaseToolTipProps, 'renderContent'>;
+const TextToolTip = ({
+  showsCloseButton,
+  text,
+  textColor = palette.white,
+  renderText = (text) => Txt.XS.Medium.Color(textColor).render(text),
+  contentContainerSx,
+  contentSx,
+  ...props
+}: Props) => {
+  const renderContent = () => {
+    const textElement = renderText(text);
+    const iconElement = showsCloseButton ? <Icon name={'close'} fill={palette.white} size={16} ml={2} /> : null;
+
+    return (
+      <RowCenter px={3} py={2} justifyContent={'center'} sx={contentSx}>
+        {textElement}
+        {iconElement}
+      </RowCenter>
+    );
+  };
+
+  return (
+    <BaseToolTip
+      backgroundColor={palette.gray700}
+      {...props}
+      contentContainerSx={{ radius: 8, ...contentContainerSx }}
+      renderContent={renderContent}
+      pointerEvents={'none'}
+    />
+  );
+};
+
+export { TextToolTip };

package/src/component/ToolTip/index.ts

@@ -0,0 +1,2 @@
+export * from './BaseToolTip';
+export * from './TextToolTip';

package/src/component/Txt/Font.ts

@@ -0,0 +1,7 @@
+const Font = {
+  Bold: 'Pretendard-Bold',
+  Medium: 'Pretendard-Medium',
+  Regular: 'Pretendard-Regular',
+};
+
+export { Font };

package/src/component/Txt/FontWeight.ts

@@ -0,0 +1,6 @@
+enum FontWeight {
+  Regular = 'normal',
+  Medium = '500',
+  Bold = 'bold',
+}
+export { FontWeight };

package/src/component/Txt/TextConfig.ts

@@ -0,0 +1,42 @@
+import type { TextSxProps } from '@react-native-styled-system/core';
+import type { ColorValue, StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
+import type { NativeSyntheticEvent, TextLayoutEventData } from 'react-native/Libraries/Types/CoreEventTypes';
+
+import { palette } from '../../theme';
+
+import { FontWeight } from './FontWeight';
+
+export type TxtAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
+export type TxtEllipsizeMode = 'head' | 'middle' | 'tail' | 'clip';
+export interface TextConfig {
+  color: ColorValue;
+  numberOfLines: number;
+  weight: FontWeight;
+  size: number;
+  italic?: boolean;
+  underline?: boolean;
+  strike?: boolean;
+  align: TxtAlign;
+  style?: StyleProp<ViewStyle>;
+  sx?: TextSxProps;
+  testID?: string;
+  key?: string | number;
+  lineHeight?: number;
+  onTextLayout?: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+
+  touchableStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  disabledPress?: boolean;
+  onLayout?: (event: LayoutChangeEvent) => void;
+
+  ellipsizeMode?: TxtEllipsizeMode;
+}
+export type TextConfigProp = Partial<TextConfig>;
+export const DefaultTxtConfig: TextConfig = {
+  color: palette.gray900,
+  numberOfLines: 999,
+  weight: FontWeight.Regular,
+  size: 14,
+  align: 'auto',
+};
+Object.freeze(DefaultTxtConfig);