@0610studio/zs-ui 0.0.13 → 0.0.15

package/src/model/useNotifyProvider.tsx

@@ -1,259 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { Dimensions, Keyboard, TextProps, TouchableOpacityProps } from 'react-native';
-import NotifyContext from './useNotify';
-import { AlertActions, BottomSheetRef, HideOption, NotifyProviderProps, PopOverMenuProps, ShowAlertProps, ShowBottomSheetProps, ShowSnackBarProps, SnackItem } from './types';
-import AlertNotify from '../notify/AlertNotify';
-import SnackbarNotify from '../notify/SnackbarNotify';
-import BottomSheetNotify from '../notify/BottomSheetNotify';
-import LoadingNotify from '../notify/LoadingNotify';
-import PopOverMenu from '../notify/PopOver/PopOverMenu';
-
-const BS_MAX_HEIGHT = Dimensions.get('window').height - 120;
-
-export function NotifyProvider({
-    customSnackbar,
-    loaderComponent,
-    children
-}: NotifyProviderProps) {
-    // Alert
-    const [title, setTitle] = useState<string>('');
-    const [informative, setInformative] = useState<string>('');
-    const [alertVisible, setAlertVisible] = useState<boolean>(false);
-    const [actions, setActions] = useState<AlertActions>();
-    const [isBackgroundTouchClose, setIsBackgroundTouchClose] = useState<boolean>(true);
-    const [titleStyle, setTitleStyle] = useState<TextProps['style']>();
-    const [informativeStyle, setInformativeStyle] = useState<TextProps['style']>();
-    const [secondaryButtonStyle, setSecondaryButtonStyle] = useState<TouchableOpacityProps['style']>();
-    const [primaryButtonStyle, setPrimaryButtonStyle] = useState<TouchableOpacityProps['style']>();
-    const [secondaryButtonTextStyle, setSecondaryButtonTextStyle] = useState<TextProps['style']>();
-    const [primaryButtonTextStyle, setPrimaryButtonTextStyle] = useState<TextProps['style']>();
-    const [singleButtonTextStyle, setSingleButtonTextStyle] = useState<TextProps['style']>();
-
-    // Snackbar
-    const [snackItemStack, setSnackItemStack] = useState<SnackItem[]>([]);
-
-    // BottomSheet
-    const [contentsGestureEnable, setContentsGestureEnable] = useState<boolean>(false);
-    const [bottomSheetVisible, setBottomSheetVisible] = useState<boolean>(false);
-    const [bottomSheetBackgroundColor, setBottomSheetBackgroundColor] = useState<string>();
-    const [bottomSheetComponent, setBottomSheetComponent] = useState<React.ReactNode>(false);
-    const [bottomSheetPadding, setBottomSheetPadding] = useState<number | undefined>(undefined);
-    const [bottomSheetMarginX, setBottomSheetMarginX] = useState<number | undefined>(undefined);
-    const [bottomSheetMaxHeight, setBottomSheetMaxHeight] = useState<number>(BS_MAX_HEIGHT);
-    const [bottomSheetScrollView, setBottomSheetScrollView] = useState<boolean>(true);
-    const [isBottomRadius, setIsBottomRadius] = useState<boolean>(true);
-    const [handleVisible, setHandleVisible] = useState<boolean>(true);
-    const [marginBottomBS, setMarginBottomBs] = useState<number | undefined>(undefined);
-    const [showsVerticalScrollIndicator, setShowsVerticalScrollIndicator] = useState<boolean>(false);
-    const [headerComponent, setHeaderComponent] = useState<React.ReactNode | undefined>(undefined);
-    const bottomSheetRef = useRef<BottomSheetRef | null>(null);
-
-    // Loading
-    const [loaderVisible, setLoaderVisible] = useState<boolean>(false);
-
-    // PopOver
-    const [popOverVisible, setPopOverVisible] = useState<boolean>(false);
-    const [popOverLocation, setPopOverLocation] = useState<{ px: PopOverMenuProps['px'], py: PopOverMenuProps['py'] }>({ px: 0, py: 0 });
-    const [popOverComponent, setPopOverComponent] = useState<React.ReactNode>(false);
-
-    // ---
-    const [fontFamily, setFontFamily] = useState<string | undefined | { title?: string; info?: string; label?: string; }>(undefined);
-
-
-    const showAlert = ({
-        title,
-        informative,
-        actions,
-        isBackgroundTouchClose = true,
-        titleStyle,
-        informativeStyle,
-        secondaryButtonStyle,
-        primaryButtonStyle,
-        secondaryButtonTextStyle,
-        primaryButtonTextStyle,
-        singleButtonTextStyle,
-    }: ShowAlertProps) => {
-        Keyboard.dismiss();
-        setTitle(title);
-        setInformative(informative);
-        setActions(actions || {} as AlertActions);
-        setIsBackgroundTouchClose(isBackgroundTouchClose);
-        setAlertVisible(true);
-
-        setTitleStyle(titleStyle);
-        setInformativeStyle(informativeStyle);
-        setSecondaryButtonStyle(secondaryButtonStyle);
-        setPrimaryButtonStyle(primaryButtonStyle);
-        setSecondaryButtonTextStyle(secondaryButtonTextStyle);
-        setPrimaryButtonTextStyle(primaryButtonTextStyle);
-        setSingleButtonTextStyle(singleButtonTextStyle);
-
-        setFontFamily(fontFamily);
-    };
-
-    const showBottomSheet = ({
-        isHandleVisible = true,
-        component,
-        contentsGestureEnable = true,
-        marginHorizontal,
-        padding,
-        marginBottom,
-        backgroundColor,
-        isBottomRadius = true,
-        maxHeight,
-        isScrollView = true,
-        showsVerticalScrollIndicator = false,
-        headerComponent = undefined
-    }: ShowBottomSheetProps) => {
-        Keyboard.dismiss();
-        padding && setBottomSheetPadding(padding);
-        marginBottom && setMarginBottomBs(marginBottom);
-        marginHorizontal && setBottomSheetMarginX(marginHorizontal);
-        backgroundColor && setBottomSheetBackgroundColor(backgroundColor);
-        maxHeight && setBottomSheetMaxHeight(maxHeight);
-        setShowsVerticalScrollIndicator(showsVerticalScrollIndicator);
-        setHeaderComponent(headerComponent);
-        setContentsGestureEnable(contentsGestureEnable);
-        setHandleVisible(isHandleVisible);
-        setBottomSheetScrollView(isScrollView);
-        setIsBottomRadius(isBottomRadius);
-        setBottomSheetComponent(component);
-        bottomSheetRef.current?.handleVisible(true);
-    };
-
-    const showLoader = () => {
-        setLoaderVisible(true);
-    };
-
-    const showPopOverMenu = ({
-        px,
-        py,
-        component
-    }: PopOverMenuProps) => {
-        setPopOverLocation({ px, py });
-        setPopOverComponent(component);
-        setPopOverVisible(true);
-    }
-
-    const showSnackBar = ({
-        message,
-        type = 'success',
-        index = Date.now(),
-        snackbarDuration = 3000
-    }: ShowSnackBarProps) => {
-        // TODO: 스택 쌓고싶은데 삭제될 때 참조를 잃어서 삭제가 안되는 문제가 있음.
-        setSnackItemStack((prev) => {
-            if (prev.length === 0) {
-                return [...prev, { message, type, index: index, snackbarDuration: snackbarDuration }];
-            } else {
-                return prev;
-            };
-        });
-    };
-
-    const hideSnackBar = (index: number) => {
-        setSnackItemStack((prev) => prev.filter((item) => item.index !== index));
-    };
-
-    const hideNotify = useCallback((option: HideOption) => {
-        switch (option) {
-            case 'alert':
-                setAlertVisible(false);
-                break;
-            case 'snack':
-                setSnackItemStack([]);
-                break;
-            case 'bottomSheet':
-                bottomSheetRef.current?.handleVisible(false);
-                break;
-            case 'loader':
-                setLoaderVisible(false);
-                break;
-            case 'popOver':
-                setPopOverVisible(false);
-                break;
-            case 'all':
-                setAlertVisible(false);
-                setSnackItemStack([]);
-                setLoaderVisible(false);
-                setPopOverVisible(false);
-                bottomSheetRef.current?.handleVisible(false);
-                break;
-            default:
-                break;
-        };
-    }, []);
-
-
-    return (
-        <NotifyContext.Provider value={{
-            alertVisible,
-            setAlertVisible,
-            // ---
-            snackItemStack,
-            hideSnackBar,
-            // ---
-            bottomSheetVisible,
-            setBottomSheetVisible,
-            // ---
-            loaderVisible,
-            // ---
-            popOverVisible,
-            setPopOverVisible,
-            // ---
-            showAlert,
-            showSnackBar,
-            showBottomSheet,
-            showLoader,
-            showPopOverMenu,
-            // ---
-            hideNotify,
-        }}>
-            {children}
-
-            <BottomSheetNotify
-                ref={bottomSheetRef}
-                bottomSheetComponent={bottomSheetComponent}
-                contentsGestureEnable={contentsGestureEnable}
-                bottomSheetPadding={bottomSheetPadding}
-                marginBottomBS={marginBottomBS}
-                isHandleVisible={handleVisible}
-                bottomSheetMarginX={bottomSheetMarginX}
-                isBottomRadius={isBottomRadius}
-                bottomSheetBackgroundColor={bottomSheetBackgroundColor}
-                maxHeight={bottomSheetMaxHeight}
-                isScrollView={bottomSheetScrollView}
-                showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-                headerComponent={headerComponent}
-            />
-
-            <PopOverMenu
-                px={popOverLocation?.px}
-                py={popOverLocation?.py}
-                component={popOverComponent}
-            />
-
-            <SnackbarNotify
-                customSnackbar={customSnackbar}
-            />
-
-            <AlertNotify
-                title={title}
-                informative={informative}
-                actions={actions || {} as AlertActions}
-                isBackgroundTouchClose={isBackgroundTouchClose}
-                titleStyle={titleStyle}
-                informativeStyle={informativeStyle}
-                secondaryButtonStyle={secondaryButtonStyle}
-                primaryButtonStyle={primaryButtonStyle}
-                secondaryButtonTextStyle={secondaryButtonTextStyle}
-                primaryButtonTextStyle={primaryButtonTextStyle}
-                singleButtonTextStyle={singleButtonTextStyle}
-            />
-
-            <LoadingNotify
-                loaderComponent={loaderComponent}
-            />
-        </NotifyContext.Provider>
-    );
-}

package/src/model/useThemeProvider.tsx

@@ -1,99 +0,0 @@
-import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';
-import { useColorScheme } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import palette from '../theme/palette';
-import { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';
-import typography from '../theme/typography';
-
-export interface ThemeProviderProps {
-    themeFonts?: ThemeFonts;
-    children: React.ReactNode;
-}
-
-export interface ThemeProps {
-    palette: Palette;
-    typography: TypographyVariantsProps;
-}
-
-export interface Palette extends Theme {
-    mode: 'light' | 'dark';
-    isUsingSystemColorScheme: boolean;
-    setUseSystemColorScheme: (useSystem: boolean) => void;
-    toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeProps | null>(null);
-
-export const useTheme = () => {
-    const context = useContext(ThemeContext);
-    if (!context) {
-        throw new Error('useTheme must be used within a ThemeProvider');
-    }
-    return context;
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ themeFonts, children }) => {
-    const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지
-    const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(true);
-    const [mode, setMode] = useState<'light' | 'dark'>(systemColorScheme === 'dark' ? 'dark' : 'light');
-
-    // AsyncStorage에서 시스템 모드 사용 설정 값 로드
-    useEffect(() => {
-        const loadSettings = async () => {
-            try {
-                const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');
-                if (storedUseSystemColorScheme !== null) {
-                    setUseSystemColorScheme(storedUseSystemColorScheme === 'true');
-                }
-                const storedMode = await AsyncStorage.getItem('themeMode');
-                if (storedMode) {
-                    setMode(storedMode === 'dark' ? 'dark' : 'light');
-                } else {
-                    setMode(systemColorScheme === 'dark' ? 'dark' : 'light');
-                }
-            } catch (error) {
-                console.error('Failed to load theme settings', error);
-            }
-        };
-        loadSettings();
-    }, [systemColorScheme]);
-
-    // 시스템 다크 모드 변경에 따른 효과 적용
-    useEffect(() => {
-        if (isUsingSystemColorScheme) {
-            setMode(systemColorScheme === 'dark' ? 'dark' : 'light');
-        }
-    }, [systemColorScheme, isUsingSystemColorScheme]);
-
-    // 테마 토글 함수
-    const toggleTheme = async () => {
-        setUseSystemColorScheme(false); // 사용자 지정 모드로 전환
-        setMode((prevMode) => {
-            const newMode = prevMode === 'light' ? 'dark' : 'light';
-            AsyncStorage.setItem('themeMode', newMode); // 로컬스토리지에 저장
-            return newMode;
-        });
-    };
-
-    // 시스템 모드 사용 설정 변경 함수
-    const handleSetUseSystemColorScheme = async (useSystem: boolean) => {
-        setUseSystemColorScheme(useSystem);
-        await AsyncStorage.setItem('useSystemColorScheme', useSystem.toString());
-    };
-
-    const themeValue = useMemo(() => ({
-        palette: {
-            isUsingSystemColorScheme,
-            setUseSystemColorScheme: handleSetUseSystemColorScheme,
-            toggleTheme,
-            ...palette({ mode }), // 선택된 모드에 따른 팔레트 적용
-        },
-        typography: typography({ themeFonts }),
-    }), [mode, isUsingSystemColorScheme, typography, themeFonts]);
-
-    return (
-        <ThemeContext.Provider value={themeValue}>
-            {children}
-        </ThemeContext.Provider>
-    );
-}

package/src/model/utils.ts

@@ -1,31 +0,0 @@
-import { StyleProp, TextStyle } from "react-native";
-
-/**
- * 사각형의 너비와 높이에 따라 비슷한 비율의 테두리 반지름을 계산합니다.
- * @param width 사각형의 너비입니다.
- * @param height 사각형의 높이입니다.
- * @param borderRadius 기본 테두리 반지름입니다.
- * @returns 계산된 테두리 반지름입니다.
- */
-export const calculateRadius = (width: number, height: number, borderRadius: number) => {
-    const radiusRatio = Math.max((width / height), (height / width));
-    const calc = borderRadius * (radiusRatio > 1 ? radiusRatio / 2 : radiusRatio);
-    return calc;
-};
-
-export const withPromise = <T extends unknown[]>(fn: (...args: T) => Promise<unknown>): ((...args: T) => void) => {
-    return (...args) => { void fn(...args) };
-};
-
-export const extractStyle = (
-    style: StyleProp<TextStyle>,
-    attribute: keyof TextStyle
-): TextStyle[keyof TextStyle] | undefined => {
-    if (Array.isArray(style)) {
-        const foundStyle = style.find(item => typeof item === 'object' && item !== null && attribute in item);
-        return foundStyle?.[attribute as keyof typeof foundStyle];
-    } else if (typeof style === 'object' && style !== null && attribute in style) {
-        return style[attribute];
-    }
-    return undefined;
-};

package/src/notify/AlertNotify/index.tsx

@@ -1,172 +0,0 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { Dimensions, KeyboardAvoidingView, Platform, Pressable, StyleSheet, TouchableOpacity, BackHandler, Text } from 'react-native';
-import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
-import { AlertActions, ShowAlertProps } from '../../model/types';
-import { useNotify } from '../../model/useNotify';
-import { useTheme } from '../../model/useThemeProvider';
-import { ThemeBackground } from '../../theme';
-import { ZSText } from '../../ui';
-import ModalBackground from '../ui/ModalBackground';
-import ViewAtom from '../../ui/atoms/ViewAtom';
-
-const modalWidth = Dimensions.get('window').width - 60;
-
-function AlertNotify({
-  actions,
-  title,
-  informative,
-  isBackgroundTouchClose,
-  titleStyle,
-  informativeStyle,
-  secondaryButtonStyle,
-  primaryButtonStyle,
-  secondaryButtonTextStyle,
-  primaryButtonTextStyle,
-  singleButtonTextStyle,
-}: ShowAlertProps) {
-  const { alertVisible, setAlertVisible } = useNotify();
-  const { palette: { background, text, primary: primaryColor } } = useTheme();
-
-  const styles = useMemo(
-    () => createStyles({ background }),
-    [background, text, primaryColor]
-  );
-
-  // 버튼 클릭 핸들러 함수, 콜백 메모이제이션으로 성능 최적화
-  const handleButtonPress = useCallback(
-    (onPressFunction?: () => void) => () => {
-      if (onPressFunction) {
-        onPressFunction();
-      }
-      setAlertVisible(false);
-    },
-    [setAlertVisible]
-  );
-
-  // 뒤로가기 버튼 핸들러 함수
-  const backPressHandler = useCallback(() => {
-    if (alertVisible) {
-      setAlertVisible(false);
-      return true;
-    }
-    return false;
-  }, [alertVisible, setAlertVisible]);
-
-  // 뒤로가기 버튼 리스너 설정
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener('hardwareBackPress', backPressHandler);
-    return () => backHandler.remove();
-  }, [backPressHandler]);
-
-  // content를 useMemo로 감싸서 불필요한 재렌더링 방지
-  const content = useMemo(() => {
-    const { primary, secondary } = actions || {} as AlertActions;
-
-    return (
-      <Animated.View
-        entering={FadeInDown.duration(300)}
-        exiting={FadeOutDown.duration(100)}
-      >
-        <Pressable style={[styles.contentContainer, { width: modalWidth }]}>
-          {title && (
-            <ZSText typo='title.2' style={[styles.title, titleStyle]}>{title}</ZSText>
-          )}
-          {informative && (
-            <ZSText typo='body.3' style={[styles.informative, informativeStyle]}>{informative}</ZSText>
-          )}
-          {actions && (
-            <ViewAtom style={styles.buttonContainer}>
-              {secondary ? (
-                <>
-                  <TouchableOpacity
-                    style={[
-                      styles.button,
-                      { backgroundColor: background.neutral, marginRight: 8 },
-                      secondaryButtonStyle
-                    ]}
-                    onPress={handleButtonPress(secondary?.onPress)}
-                  >
-                    <ZSText typo='subTitle.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>
-                  </TouchableOpacity>
-
-                  <TouchableOpacity
-                    style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}
-                    onPress={handleButtonPress(primary?.onPress)}
-                  >
-                    <ZSText typo='subTitle.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>
-                  </TouchableOpacity>
-                </>
-              ) : (
-                <TouchableOpacity
-                  style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}
-                  onPress={handleButtonPress(primary?.onPress)}
-                >
-                  <ZSText typo='subTitle.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>
-                </TouchableOpacity>
-              )}
-            </ViewAtom>
-          )}
-        </Pressable>
-      </Animated.View>
-    );
-  }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);
-
-  return alertVisible ? (
-    <ModalBackground onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}>
-      <KeyboardAvoidingView
-        style={styles.avoidingView}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        enabled
-      >
-        {content}
-      </KeyboardAvoidingView>
-    </ModalBackground>
-  ) : null;
-}
-
-export default AlertNotify;
-
-const createStyles = ({
-  background,
-}: {
-  background: ThemeBackground;
-}) =>
-  StyleSheet.create({
-    title: {
-      marginBottom: 8,
-      width: '100%',
-      paddingHorizontal: 4
-    },
-    informative: {
-      marginTop: 8,
-      width: '100%',
-      paddingHorizontal: 4
-    },
-    buttonContainer: {
-      flexDirection: 'row',
-      width: '100%',
-      marginTop: 24,
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-    },
-    button: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingVertical: 14,
-      borderRadius: 12,
-    },
-    avoidingView: {
-      flex: 1,
-      justifyContent: 'center'
-    },
-    contentContainer: {
-      alignItems: 'center',
-      backgroundColor: background.base,
-      borderRadius: 22,
-      paddingBottom: 18,
-      paddingTop: 24,
-      paddingHorizontal: 20
-    },
-  });
-