@0610studio/zs-ui 0.0.13 → 0.0.15

package/src/ui/ZSContainer/index.tsx

@@ -1,92 +0,0 @@
-import React, { ReactNode, useState, useEffect } from 'react';
-import { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, Platform, ScrollView } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import ViewAtom from '../atoms/ViewAtom';
-import ScrollViewAtom from '../atoms/ScrollViewAtom';
-import { useTheme } from '../../model/useThemeProvider';
-
-type ZSContainerProps = ViewProps & {
-  backgroundColor?: string;
-  isLoader?: boolean;
-  statusBarColor?: string;
-  barStyle?: 'light-content' | 'dark-content';
-  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;
-  isScrollView?: boolean;
-  scrollViewRef?: React.RefObject<ScrollView>;
-  topComponent?: ReactNode;
-  bottomComponent?: ReactNode;
-  showsVerticalScrollIndicator?: boolean;
-  loadingComponent?: React.ReactNode;
-  keyboardVerticalOffset?: number;
-};
-
-function ZSContainer({
-  backgroundColor,
-  isLoader = false,
-  statusBarColor,
-  barStyle = 'dark-content',
-  edges = ['top', 'bottom'],
-  isScrollView = true,
-  scrollViewRef,
-  topComponent,
-  bottomComponent,
-  showsVerticalScrollIndicator = true,
-  loadingComponent = <ActivityIndicator />,
-  keyboardVerticalOffset,
-  ...props
-}: ZSContainerProps) {
-  const { palette } = useTheme(); // 테마 사용
-  const [isDelayed, setIsDelayed] = useState(true);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsDelayed(false);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, []);
-
-  return (
-    <SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1]} edges={edges}>
-      <StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} />
-
-      {!isDelayed && (
-        <KeyboardAvoidingView
-          style={styles.flex1}
-          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-          keyboardVerticalOffset={keyboardVerticalOffset}
-          enabled
-        >
-          {topComponent && topComponent}
-
-          {isLoader ? (
-            loadingComponent
-          ) : isScrollView ? (
-            <ScrollViewAtom
-              ref={scrollViewRef} 
-              style={styles.flex1}
-              bounces={false}
-              contentContainerStyle={styles.scrollContainerStyle}
-              showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-              keyboardShouldPersistTaps="handled"
-            >
-              <ViewAtom style={[styles.flex1, props.style]}>
-                {props.children}
-              </ViewAtom>
-            </ScrollViewAtom>
-          ) : (
-            <ViewAtom style={[styles.flex1, props.style]}>{props.children}</ViewAtom>
-          )}
-
-          {!isLoader && bottomComponent && bottomComponent}
-        </KeyboardAvoidingView>
-      )}
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  flex1: { flex: 1, width: Dimensions.get('window').width },
-  scrollContainerStyle: { flexGrow: 1, alignItems: 'center' },
-});
-
-export default ZSContainer;

package/src/ui/ZSPressable/index.tsx

@@ -1,82 +0,0 @@
-import React, { useCallback } from "react";
-import { FlexAlignType, Pressable, ViewProps } from "react-native";
-import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnJS } from "react-native-reanimated";
-import AnimatedWrapper from "../atoms/AnimatedWrapper";
-import type { ShadowLevel } from "../types";
-
-const DEFAULT_DURATION = { duration: 100 };
-
-interface ZSPressableProps extends ViewProps {
-  onPress: (value?: any) => void;
-  onLongPress?: (value?: any) => void;
-  pressedBackgroundColor?: string;
-  pressedBackgroundBorderRadius?: number;
-  flex?: number;
-  minWidth?: number;
-  isAnimation?: boolean;
-  elevationLevel?: ShadowLevel;
-  fullWidth?: boolean;
-}
-
-function ZSPressable({
-  onPress,
-  onLongPress,
-  isAnimation = true,
-  pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',
-  pressedBackgroundBorderRadius = 16,
-  flex,
-  minWidth,
-  elevationLevel = 0,
-  fullWidth = false,
-  ...props
-}: ZSPressableProps) {
-  const isButtonPress = useSharedValue(0);
-
-  const boxAnimation = useAnimatedStyle(() => {
-    const scale = interpolate(
-      isButtonPress.value,
-      [0, 1],
-      [1, 0.96],
-      'clamp'
-    );
-    return {
-      transform: [{ scale: withTiming(scale, DEFAULT_DURATION) }],
-    };
-  }, []);
-
-  const handlePressStyle = useCallback(
-    (pressed: boolean) => {
-      runOnJS(() => {
-        isButtonPress.value = pressed ? 1 : 0;
-      })();
-      return {
-        backgroundColor: pressed ? pressedBackgroundColor : 'transparent',
-        borderRadius: pressedBackgroundBorderRadius,
-        flex: fullWidth ? 1 : flex,
-        minWidth: minWidth,
-        alignSelf: fullWidth ? 'stretch' : 'flex-start' as FlexAlignType,
-      };
-    },
-    [pressedBackgroundColor, pressedBackgroundBorderRadius, flex, minWidth, fullWidth]
-  );
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onLongPress={onLongPress}
-      style={({ pressed }) => handlePressStyle(pressed)}
-    >
-      <Animated.View style={boxAnimation}>
-        <AnimatedWrapper
-          isAnimation={isAnimation}
-          elevationLevel={elevationLevel}
-          style={props.style}
-        >
-          {props.children}
-        </AnimatedWrapper>
-      </Animated.View>
-    </Pressable>
-  );
-}
-
-export default ZSPressable;

package/src/ui/ZSRadioGroup/index.tsx

@@ -1,141 +0,0 @@
-import React, { useCallback, memo } from 'react';
-import { ViewProps } from 'react-native';
-import { RadioOption } from '../types';
-import ViewAtom from '../atoms/ViewAtom';
-import ZSText, { ZSTextProps } from '../ZSText';
-import ZSPressable from '../ZSPressable';
-import { useTheme } from '../../model/useThemeProvider';
-import { SvgCheck } from '../../assets/SvgCheck';
-
-function ZSRadioGroup({
-  options,
-  value,
-  onSelect,
-  containerStyle,
-  valueStyle,
-  minWidth,
-  disabled = false,
-  fullWidth = false,
-  selectStyle,
-}: {
-  options: RadioOption[];
-  value?: RadioOption;
-  onSelect: (value: RadioOption) => void;
-  containerStyle?: ViewProps;
-  valueStyle?: ZSTextProps;
-  selectStyle?: ZSTextProps;
-  minWidth?: number;
-  disabled?: boolean;
-  fullWidth?: boolean;
-}) {
-  const { palette } = useTheme();
-
-  const handleSelect = useCallback(
-    (option: RadioOption) => {
-      if (!disabled) {
-        onSelect(option);
-      }
-    },
-    [disabled, onSelect]
-  );
-
-  return (
-    <ViewAtom
-      style={{
-        flexDirection: fullWidth ? 'column' : 'row',
-        gap: 10,
-        flexWrap: fullWidth ? 'nowrap' : 'wrap',
-        width: '100%',
-      }}
-      {...containerStyle}
-    >
-      {options.map((option) => {
-        const isSelected = value?.index === option.index;
-        const setColor = isSelected ? palette.primary.light : palette.background.neutral;
-
-        return (
-          <ZSPressable
-            key={option.index}
-            onPress={() => handleSelect(option)}
-            pressedBackgroundColor="transparent"
-            flex={!minWidth ? 1 : undefined}
-            minWidth={minWidth}
-            fullWidth
-          >
-            <ViewAtom
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                paddingVertical: 12,
-                borderWidth: 1,
-                paddingLeft: 10,
-                paddingRight: 15,
-                borderRadius: 26,
-                borderColor: setColor,
-                backgroundColor: isSelected ? palette.background.layer1 : 'transparent',
-                flex: 1,
-              }}
-            >
-              {/* fullWidth가 false일 때 동그라미 체크박스 표시 */}
-              {!fullWidth && (
-                <ViewAtom
-                  style={{
-                    width: 20,
-                    height: 20,
-                    borderWidth: 1,
-                    borderRadius: 10,
-                    borderColor: setColor,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                  }}
-                >
-                  <ViewAtom
-                    style={{
-                      width: 12,
-                      height: 12,
-                      borderRadius: 6,
-                      backgroundColor: setColor,
-                    }}
-                  />
-                </ViewAtom>
-              )}
-              {/* 옵션 텍스트 표시 */}
-              <ZSText style={{ marginLeft: 10 }} {...valueStyle}>
-                {option.value}
-              </ZSText>
-
-              {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}
-              {fullWidth && (
-                <ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
-                  <ViewAtom
-                    style={{
-                      backgroundColor: isSelected
-                        ? palette.primary.main
-                        : palette.background.layer2,
-                      paddingHorizontal: 10,
-                      borderRadius: 50,
-                      minWidth: 42,
-                      minHeight: 24,
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                    }}
-                  >
-                    {isSelected ? (
-                      <SvgCheck size={18} />
-                    ) : (
-                      <ZSText typo="body.5" {...selectStyle}>
-                        선택
-                      </ZSText>
-                    )}
-                  </ViewAtom>
-                </ViewAtom>
-              )}
-            </ViewAtom>
-          </ZSPressable>
-        );
-      })}
-    </ViewAtom>
-  );
-}
-
-export default memo(ZSRadioGroup);

package/src/ui/ZSText/index.tsx

@@ -1,22 +0,0 @@
-import React, { memo } from 'react';
-import { TextProps } from "react-native/types";
-import { useTheme } from "../../model/useThemeProvider";
-import { TypoOptions, TypoStyle, TextColorOptions, TypoSubStyle } from "../../theme/types";
-import TextAtom from "../atoms/TextAtom"
-
-export interface ZSTextProps extends TextProps {
-    typo?: TypoOptions;
-    color?: TextColorOptions;
-}
-
-function ZSText({
-  typo = 'body.2',
-  color = 'primary',
-  ...props
-}: ZSTextProps) {
-    const { palette, typography } = useTheme();
-    const [s01, s02] = typo.split('.') as [TypoStyle, TypoSubStyle];
-    return <TextAtom {...props} style={[typography[s01][s02], { color: palette.text[color] }, props.style]}>{props.children}</TextAtom>
-}
-
-export default memo(ZSText);

package/src/ui/ZSTextField/index.tsx

@@ -1,200 +0,0 @@
-import React, { useMemo, useCallback, useState, useEffect } from 'react';
-import { LayoutChangeEvent, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';
-import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import ButtonClose from './ui/ButtonClose';
-import ErrorComponent from './ui/ErrorComponent';
-import { TypoOptions, TypoStyle, TypoSubStyle } from '../../theme';
-import { extractStyle } from '../../model/utils';
-import { useTheme } from '../../model/useThemeProvider';
-import ViewAtom from '../atoms/ViewAtom';
-
-export type BoxStyle = 'outline' | 'underline' | 'inbox';
-
-interface TextFieldProps {
-  typo?: TypoOptions;
-  status?: 'default' | 'error';
-  value: string;
-  onChangeText?: (text: string) => void;
-  inputBgColor?: string;
-  labelBgColor?: string;
-  label?: string;
-  labelColor?: string;
-  placeHolderColor?: string;
-  fontSize?: number;
-  borderColor?: string;
-  borderRadius?: number;
-  focusColor?: string;
-  errorColor?: string;
-  paddingHorizontal?: number;
-  borderWidth?: number;
-  errorMessage?: string;
-  textInputProps?: TextInputProps;
-  boxStyle?: BoxStyle;
-  innerBoxStyle?: 'top' | 'middle' | 'bottom';
-  disabled?: boolean;
-  allowFontScaling?: boolean;
-  isTextArea?: boolean;
-}
-
-function ZSTextField({
-  typo = 'body.2',
-  status = 'default',
-  value,
-  onChangeText,
-  label = 'Placeholder',
-  labelColor = '#757575',
-  placeHolderColor = '#B1B1B1',
-  inputBgColor = 'white',
-  labelBgColor = 'white',
-  borderWidth = 1.2,
-  borderColor = '#E7EDF0',
-  focusColor = '#007AFF',
-  errorColor = '#FF3B30',
-  borderRadius = 14,
-  paddingHorizontal = 15,
-  errorMessage,
-  textInputProps,
-  boxStyle = 'outline',
-  innerBoxStyle,
-  disabled = false,
-  allowFontScaling = true,
-  isTextArea = false,
-}: TextFieldProps): JSX.Element {
-  const { typography, palette } = useTheme();
-  const [primaryStyle, subStyle] = typo.split('.') as [TypoStyle, TypoSubStyle];
-
-  // 폰트 크기 및 패밀리 추출
-  const fontSize = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontSize') as number || 17, [typography, primaryStyle, subStyle]);
-  const fontFamily = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontFamily') as string || '', [typography, primaryStyle, subStyle]);
-
-  // 컴포넌트 상태 관리
-  const [isFocused, setIsFocused] = useState<boolean>(false);
-  const labelAnimationValue = useSharedValue(0);
-  const boxHeightValue = useSharedValue(0);
-
-  // 포커스 및 값 변경 시 라벨 애니메이션 트리거
-  useEffect(() => {
-    const shouldAnimate = value !== '' || isFocused;
-    labelAnimationValue.value = withTiming(shouldAnimate ? 1 : 0, { duration: 50 });
-  }, [value, isFocused, labelAnimationValue]);
-
-  // 라벨 애니메이션 스타일
-  const animatedLabelStyle = useAnimatedStyle(() => {
-    const labelFontSize = interpolate(
-      labelAnimationValue.value,
-      [0, 1],
-      [fontSize + (boxStyle === 'inbox' ? 5 : 0), boxStyle === 'inbox' ? 10 : 12],
-      'clamp'
-    );
-
-    const labelTop = interpolate(
-      labelAnimationValue.value,
-      [0, 1],
-      [
-        isTextArea ? 12 : 0,
-        isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + (boxStyle === 'inbox' ? 18 : 0),
-      ],
-      'clamp'
-    );
-
-    return {
-      top: labelTop,
-      fontSize: labelFontSize,
-    };
-  });
-
-  // 레이아웃 핸들러
-  const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    if (boxHeightValue.value !== height) boxHeightValue.value = height;
-  }, [boxHeightValue]);
-
-  // 포커스 및 블러 핸들러
-  const handleFocus = useCallback(() => setIsFocused(true), []);
-  const handleBlur = useCallback(() => setIsFocused(false), []);
-
-  // 상태에 따른 테두리 색상 설정
-  const computedBorderColor = useMemo(() => (
-    status === 'error' ? errorColor : isFocused ? focusColor : borderColor
-  ), [status, errorColor, isFocused, focusColor, borderColor]);
-
-  // 상태에 따른 라벨 색상 설정
-  const computedLabelColor = useMemo(() => (
-    status === 'error' ? errorColor : isFocused ? focusColor : value ? labelColor : placeHolderColor
-  ), [status, errorColor, isFocused, focusColor, value, placeHolderColor, labelColor]);
-
-  // 컨테이너 스타일 정의
-  const containerStyle: StyleProp<ViewStyle> = useMemo(() => ({
-    width: '100%',
-    justifyContent: isTextArea ? 'flex-start' : 'center',
-    borderRadius,
-    paddingHorizontal,
-    backgroundColor: inputBgColor,
-    paddingTop: boxStyle === 'inbox' ? 13 : 0,
-    ...(boxStyle === 'outline' || boxStyle === 'inbox' ? { borderWidth } : {}),
-    ...(boxStyle === 'underline' ? { borderBottomWidth: borderWidth } : {}),
-    ...(innerBoxStyle === 'top' ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: borderWidth / 2 }
-      : innerBoxStyle === 'middle' ? { borderRadius: 0, borderTopWidth: borderWidth / 2, borderBottomWidth: borderWidth / 2 }
-        : innerBoxStyle === 'bottom' ? { borderTopLeftRadius: 0, borderTopRightRadius: 0, borderTopWidth: borderWidth / 2 }
-          : {}),
-  }), [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle]);
-
-  // 라벨 스타일 정의
-  const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({
-    fontSize,
-    left: paddingHorizontal,
-    backgroundColor: labelBgColor,
-    paddingHorizontal: boxStyle === 'outline' ? 5 : 0,
-    paddingVertical: 2,
-    textAlignVertical: 'center',
-    fontFamily,
-    borderRadius: boxStyle === 'outline' ? 20 : 0,
-    overflow: 'hidden',
-  }), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily]);
-
-  // 텍스트 변경 핸들러
-  const handleTextChange = useCallback((text: string) => {
-    if (onChangeText) onChangeText(text);
-  }, [onChangeText]);
-
-  return (
-    <>
-      <ViewAtom
-        style={[containerStyle, { borderColor: computedBorderColor }]}
-        onLayout={handleLayout}
-        pointerEvents={disabled ? 'none' : 'auto'}
-      >
-        <TextInput
-          {...textInputProps}
-          style={[
-            { paddingTop: 7, paddingBottom: 5 },
-            textInputProps?.style,
-            { fontSize, width: '100%', paddingRight: 25, fontFamily },
-          ]}
-          value={value}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChangeText={handleTextChange}
-          allowFontScaling={allowFontScaling}
-          selectionColor={palette.grey[50]}
-        />
-
-        <ViewAtom pointerEvents="none" style={{ position: 'absolute' }}>
-          <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, { color: computedLabelColor }]}>
-            {label}
-          </Animated.Text>
-        </ViewAtom>
-
-        {(value && isFocused) && (
-          <ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText} />
-        )}
-      </ViewAtom>
-
-      {status === 'error' && errorMessage && (
-        <ErrorComponent errorMessage={errorMessage} errorColor={errorColor} fontFamily={fontFamily} />
-      )}
-    </>
-  );
-}
-
-export default ZSTextField;

package/src/ui/ZSTextField/ui/ButtonClose.tsx

@@ -1,20 +0,0 @@
-import { TouchableOpacity } from "react-native";
-import { SvgX } from "../../../assets/SvgX";
-
-const ButtonClose = ({
-    onChangeText,
-    marginTop
-}: {
-    onChangeText?: (text: string) => void;
-    marginTop?: number
-}) => {
-    return (
-        <TouchableOpacity style={{ position: 'absolute', padding: 3, right: 15, borderRadius: 30, backgroundColor: '#e6e6e6', justifyContent: 'center', alignItems: 'center', ...marginTop && { top: marginTop } }}
-            hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
-            onPress={() => { onChangeText?.(''); }}>
-            <SvgX color="#5E696E" />
-        </TouchableOpacity>
-    )
-}
-
-export default ButtonClose;

package/src/ui/ZSTextField/ui/ErrorComponent.tsx

@@ -1,25 +0,0 @@
-import { Text, View } from "react-native";
-
-const ErrorComponent = ({
-    errorMessage, errorColor, fontFamily
-}:{
-    errorMessage: string;
-    errorColor: string;
-    fontFamily: string;
-}) => {
-    return (
-        <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', paddingLeft: 3, marginTop: 5 }}>
-            <View style={{ width: 18, height: 18, justifyContent: 'center', alignItems: 'center', borderRadius: 30, backgroundColor: errorColor }}>
-                <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: 'white', textAlign: 'center', textAlignVertical: 'center', fontSize: 11, fontFamily: fontFamily }}>
-                    {`!`}
-                </Text>
-            </View>
-
-            <Text allowFontScaling={false} style={{ marginLeft: 5, fontSize: 14, color: errorColor, fontFamily: fontFamily }}>
-                {errorMessage}
-            </Text>
-        </View>
-    )
-}
-
-export default ErrorComponent;

package/src/ui/ZSView/index.tsx

@@ -1,30 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import { ViewProps, StyleSheet } from 'react-native';
-import { useTheme } from '../../model/useThemeProvider';
-import AnimatedWrapper from '../atoms/AnimatedWrapper';
-
-type Props = ViewProps & {
-  isAnimation?: boolean;
-};
-
-const ZSView: React.FC<Props> = ({ isAnimation = false, style, children, ...rest }) => {
-  const { palette } = useTheme();
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          backgroundColor: palette.background.base,
-        },
-      }),
-    [palette.background.base],
-  );
-
-  return (
-    <AnimatedWrapper isAnimation={isAnimation} style={[styles.container, style]} {...rest}>
-      {children}
-    </AnimatedWrapper>
-  );
-};
-
-export default memo(ZSView);