@0610studio/zs-ui 0.0.13 → 0.0.15

package/src/notify/PopOver/PopOverMenu.tsx

@@ -1,95 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { BackHandler, Dimensions, LayoutChangeEvent, Pressable } from "react-native";
-import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
-import { useNotify } from "../../model/useNotify";
-import ModalBackground from "../ui/ModalBackground";
-import { PopOverMenuProps } from "../../model/types";
-
-// 화면 높이 가져오기
-const WINDOW_HEIGHT = Dimensions.get('window').height;
-
-function PopOverMenu({
-  px,
-  py,
-  component
-}: PopOverMenuProps): JSX.Element | null {
-  const [isContentVisible, setIsContentVisible] = useState<boolean>(false);
-  const [contentWidth, setContentWidth] = useState<number>(0);
-  const [contentHeight, setContentHeight] = useState<number>(0);
-  const { popOverVisible, setPopOverVisible } = useNotify();
-  const timerRef = useRef<number | null>(null);
-
-  // 뒤로가기 버튼 처리 핸들러
-  const handleBackPress = useCallback((): boolean => {
-    if (popOverVisible) {
-      setIsContentVisible(false);
-      setPopOverVisible(false);
-      return true; // 뒤로가기 액션을 막음
-    }
-    return false; // 기본 동작 허용
-  }, [popOverVisible, setPopOverVisible]);
-
-  // 뒤로가기 이벤트 리스너 추가 및 제거
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
-
-    return () => backHandler.remove();
-  }, [handleBackPress]);
-
-  // 레이아웃 크기 계산
-  const handleLayout = useCallback((event: LayoutChangeEvent): void => {
-    setContentWidth(event.nativeEvent.layout.width || 0);
-    setContentHeight(event.nativeEvent.layout.height || 0);
-  }, []);
-
-  // PopOver가 보일 때 콘텐츠를 딜레이 후 보여줌
-  useEffect(() => {
-    if (popOverVisible) {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = setTimeout(() => {
-        setIsContentVisible(true);
-      }, 200);
-    }
-
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, [popOverVisible]);
-
-  // 화면 크기에 따른 위치 조정
-  const isVerticalOverflow = WINDOW_HEIGHT < (py + contentHeight);
-  const isHorizontalOverflow = Dimensions.get('window').width > (px + contentWidth);
-
-  if (!popOverVisible) return null;
-
-  return (
-    <ModalBackground isCenter={false} onPress={() => setPopOverVisible(false)}>
-      {isContentVisible && (
-        <Animated.View
-          entering={FadeInUp}
-          exiting={FadeOutUp}
-        >
-          {/* PopOver의 위치를 세밀하게 조정 */}
-          <Pressable
-            style={{
-              position: 'absolute',
-              top: py - (isVerticalOverflow ? (contentHeight + 10) : 0),
-              left: px - contentWidth + (isHorizontalOverflow ? contentWidth : 0),
-            }}
-            onLayout={handleLayout}
-          >
-            {component}
-          </Pressable>
-        </Animated.View>
-      )}
-    </ModalBackground>
-  );
-}
-
-export default PopOverMenu;

package/src/notify/SnackbarNotify/index.tsx

@@ -1,43 +0,0 @@
-import React, { ReactNode } from "react";
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { StyleSheet, View } from "react-native";
-import { CustomSnackbarProps } from "../../model/types";
-import SnackbarItem from "./ui/SnackbarItem";
-import { useNotify } from "../../model/useNotify";
-
-const SnackbarNotify = ({
-  customSnackbar
-}: {
-  customSnackbar?: (props: CustomSnackbarProps) => ReactNode
-}) => {
-  const { top } = useSafeAreaInsets();
-  const { snackItemStack, hideSnackBar } = useNotify();
-
-  return snackItemStack ? (
-    <View style={[styles.container, { paddingTop: top }]}>
-      {
-        snackItemStack.map((snackItem, index) => {
-          return (
-            <SnackbarItem
-              key={index}
-              customSnackbar={customSnackbar}
-              snackItem={snackItem}
-              hideSnackBar={hideSnackBar}
-            />
-          );
-        })
-      }
-    </View>
-  ) : null;
-};
-
-const styles = StyleSheet.create({
-  container: {
-    zIndex: 9997,
-    width: '100%',
-    alignItems: 'center',
-    position: 'absolute',
-  },
-});
-
-export default SnackbarNotify;

package/src/notify/SnackbarNotify/ui/SnackbarItem.tsx

@@ -1,103 +0,0 @@
-import React, { ReactNode, useEffect, useCallback } from "react";
-import { Platform, StyleSheet, TouchableOpacity } from "react-native";
-import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
-import { CustomSnackbarProps, SnackItem } from "../../../model/types";
-import ViewAtom from "../../../ui/atoms/ViewAtom";
-import { ZSText } from "../../../ui";
-import { useTheme } from "../../../model/useThemeProvider";
-
-const Snackbar = ({
-  customSnackbar,
-  snackItem,
-  hideSnackBar,
-}: {
-  customSnackbar?: (props: CustomSnackbarProps) => ReactNode;
-  snackItem: SnackItem;
-  hideSnackBar: (index: number) => void;
-}) => {
-  const { type, message, snackbarDuration } = snackItem;
-  const { palette } = useTheme();
-
-  const closeSnackbar = useCallback(() => {
-    hideSnackBar(snackItem.index);
-  }, [hideSnackBar, snackItem.index]);
-
-  useEffect(() => {
-    const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);
-
-    return () => clearTimeout(closeTimeout);
-  }, [snackbarDuration, closeSnackbar]);
-
-  return (
-    <Animated.View
-      style={[styles.container, styles.aosShadow, styles.snackbarWrapper]}
-      entering={FadeInUp}
-      exiting={FadeOutUp}
-    >
-      <TouchableOpacity
-        style={[styles.container, styles.iosShadow, styles.touchable]}
-        activeOpacity={1}
-        onPress={closeSnackbar}
-      >
-        {customSnackbar ? (
-          customSnackbar({ snackType: type, snackMessage: message })
-        ) : (
-          <ViewAtom
-            style={[
-              styles.snackBar,
-              { backgroundColor: type === "error" ? palette.background.danger : palette.background.success },
-            ]}
-          >
-            <ViewAtom style={styles.messageContainer}>
-              <ZSText>{message}</ZSText>
-            </ViewAtom>
-          </ViewAtom>
-        )}
-      </TouchableOpacity>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 16,
-    backgroundColor: "white",
-  },
-  iosShadow: {
-    ...Platform.select({
-      ios: {
-        shadowColor: "rgb(50, 50, 50)",
-        shadowOpacity: 0.12,
-        shadowRadius: 5,
-        shadowOffset: { height: 3, width: 0 },
-      },
-    }),
-  },
-  aosShadow: {
-    ...Platform.select({
-      android: { elevation: 5 },
-    }),
-  },
-  snackbarWrapper: {
-    width: "94%",
-    marginTop: 10,
-  },
-  touchable: {
-    width: "100%",
-  },
-  snackBar: {
-    borderRadius: 16,
-    paddingHorizontal: 10,
-    paddingVertical: 18,
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%",
-  },
-  messageContainer: {
-    flex: 1,
-    flexDirection: "column",
-    marginLeft: 10,
-  },
-});
-
-export default Snackbar;

package/src/notify/index.ts

@@ -1,21 +0,0 @@
-import AlertNotify from './AlertNotify';
-import BottomSheetNotify from './BottomSheetNotify';
-import SnackbarNotify from './SnackbarNotify';
-import BSTextInput from './BottomSheetNotify/ui/BSTextInput';
-import * as useNotifyProvider from '../model/useNotifyProvider';
-import { useNotify } from '../model/useNotify';
-import PopOverButton from './PopOver/PopOverButton';
-import PopOverMenu from './PopOver/PopOverMenu';
-import * as types from '../model/types';
-
-export {
-  AlertNotify,
-  BottomSheetNotify,
-  SnackbarNotify,
-  useNotifyProvider,
-  useNotify,
-  BSTextInput,
-  PopOverButton,
-  PopOverMenu,
-  types,
-}

package/src/notify/ui/ModalBackground.tsx

@@ -1,46 +0,0 @@
-import React, { useMemo } from 'react';
-import { Pressable, StyleSheet } from 'react-native';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import { useTheme } from '../../model/useThemeProvider';
-
-interface ModalBackgroundProps {
-  isCenter?: boolean;
-  children: React.ReactNode;
-  onPress?: () => void;
-}
-
-function ModalBackground({ isCenter = true, children, onPress }: ModalBackgroundProps) {
-  const { palette: { modalBgColor } } = useTheme();
-  const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);
-
-  return (
-    <Animated.View
-      style={styles.modalBg}
-      entering={FadeIn.duration(50)}
-      exiting={FadeOut.duration(50)}
-    >
-      <Pressable
-        style={[styles.fullScreen, isCenter && { justifyContent: 'center', alignItems: 'center' }]}
-        onPress={onPress ?? (() => { })}
-      >
-        {children}
-      </Pressable>
-    </Animated.View>
-  );
-}
-
-// 스타일을 생성하는 함수, 모달 배경 색상 인자로 받음
-const createStyles = (modalBgColor: string) =>
-  StyleSheet.create({
-    modalBg: {
-      zIndex: 9997,
-      backgroundColor: modalBgColor,
-      ...StyleSheet.absoluteFillObject,
-    },
-    // 화면 전체를 덮는 Pressable 스타일 추가
-    fullScreen: {
-      ...StyleSheet.absoluteFillObject,
-    },
-  });
-
-export default ModalBackground;

package/src/theme/index.ts

@@ -1,3 +0,0 @@
-export * from './palette';
-export * from './types';
-export * from './typography';

package/src/theme/palette.ts

@@ -1,384 +0,0 @@
-import { Theme } from "./types";
-
-export const transparency = {
-  '0%': '00',   // 완전 투명
-  '2%': '05',
-  '4%': '0A',
-  '6%': '0F',
-  '8%': '14',
-  '10%': '1A',
-  '12%': '1F',
-  '14%': '24',
-  '16%': '29',
-  '18%': '2E',
-  '20%': '33',
-  '22%': '38',
-  '24%': '3D',
-  '26%': '42',
-  '28%': '47',
-  '30%': '4D',
-  '32%': '52',
-  '34%': '57',
-  '36%': '5C',
-  '38%': '61',
-  '40%': '66',
-  '42%': '6B',
-  '44%': '70',
-  '46%': '75',
-  '48%': '7A',
-  '50%': '80',
-  '52%': '85',
-  '54%': '8A',
-  '56%': '8F',
-  '58%': '94',
-  '60%': '99',
-  '62%': '9E',
-  '64%': 'A3',
-  '66%': 'A8',
-  '68%': 'AD',
-  '70%': 'B3',
-  '72%': 'B8',
-  '74%': 'BD',
-  '76%': 'C2',
-  '78%': 'C7',
-  '80%': 'CC',
-  '82%': 'D1',
-  '84%': 'D6',
-  '86%': 'DB',
-  '88%': 'E0',
-  '90%': 'E6',
-  '92%': 'EB',
-  '94%': 'F0',
-  '96%': 'F5',
-  '98%': 'FA',
-  '100%': 'FF'  // 완전 불투명
-};
-
-const MODAL_BG_COLOR = {
-  light: '#212B3688',
-  dark: '#00000088'
-}
-
-const SHADOW_COLORS = {
-  light: [
-    'rgba(0, 0, 0, 0.18)',
-    'rgba(0, 0, 0, 0.20)',
-    'rgba(0, 0, 0, 0.22)',
-    'rgba(0, 0, 0, 0.23)',
-    'rgba(0, 0, 0, 0.25)',
-    'rgba(0, 0, 0, 0.27)',
-    'rgba(0, 0, 0, 0.29)',
-    'rgba(0, 0, 0, 0.30)',
-    'rgba(0, 0, 0, 0.32)',
-    'rgba(0, 0, 0, 0.34)',
-  ],
-  dark: [
-    'rgba(255, 255, 255, 0.58)',
-    'rgba(255, 255, 255, 0.60)',
-    'rgba(255, 255, 255, 0.62)',
-    'rgba(255, 255, 255, 0.63)',
-    'rgba(255, 255, 255, 0.65)',
-    'rgba(255, 255, 255, 0.67)',
-    'rgba(255, 255, 255, 0.69)',
-    'rgba(255, 255, 255, 0.70)',
-    'rgba(255, 255, 255, 0.72)',
-    'rgba(255, 255, 255, 0.74)',
-  ]
-}
-
-const LIGHT_COLORS = {
-  primary: {
-    0: '#FFF7E6',
-    5: '#FCEDD0',
-    10: '#F9DAA3', // p-lighter
-    20: '#F5BF64', // p-light
-    30: '#fca54c',
-    40: '#ff9225',
-    50: '#FF9F06', // p-main
-    60: '#DD9434', // p-dark
-    70: '#AC7326', // p-darker
-    80: '#c46500',
-    90: '#995400',
-    100: '#663800',
-    lighter: '#F9DAA3',
-    light: '#F5BF64',
-    main: '#FF9F06',
-    dark: '#DD9434',
-    darker: '#AC7326',
-  },
-  secondary: {
-    0: '#E6F7FF',
-    5: '#D1EDFF',
-    10: '#ADE2FF',
-    20: '#85D4FF',
-    30: '#5CC5FF',
-    40: '#33B7FF',
-    50: '#007FFF',
-    60: '#0075E6',
-    70: '#006ACC',
-    80: '#005FB3',
-    90: '#005499',
-    100: '#003866',
-    main: '#007FFF',
-  },
-  danger: {
-    0: '#FFF5F7',
-    5: '#FEECF0',
-    10: '#FCD4DE',
-    20: '#F799B1',
-    30: '#F36689',
-    40: '#EF3E5E',
-    50: '#EB003B',
-    60: '#D50136',
-    70: '#8D0023',
-    80: '#5E0018',
-    90: '#2F000C',
-    100: '#1A0008',
-    main: '#EB003B',
-  },
-  warning: {
-    0: '#FFFBF2',
-    5: '#FFF8E9',
-    10: '#FFEAC1',
-    20: '#FFE2A7',
-    30: '#FFD47C',
-    40: '#FFC550',
-    50: '#FFB724',
-    60: '#98690A',
-    70: '#66490E',
-    80: '#4D370B',
-    90: '#332507',
-    100: '#1F1805',
-    main: '#FFB724',
-  },
-  success: {
-    0: '#F5FBF6',
-    5: '#EEF7F0',
-    10: '#CEE9D4',
-    20: '#B2DCBB',
-    30: '#8CCA99',
-    40: '#33A14B',
-    50: '#008A1E',
-    60: '#006E18',
-    70: '#005312',
-    80: '#00370C',
-    90: '#002207',
-    100: '#001804',
-    main: '#008A1E',
-  },
-  information: {
-    0: '#F3F8FF',
-    5: '#E9F0FF',
-    10: '#D4E1FF',
-    20: '#A9C3FF',
-    30: '#7DA4FF',
-    40: '#5286FF',
-    50: '#2768FF',
-    60: '#1F53CC',
-    70: '#173E99',
-    80: '#0C1F4D',
-    90: '#040A1A',
-    100: '#020510',
-    main: '#2768FF',
-  },
-  grey: {
-    0: '#FFFFFF',
-    5: '#F8F8F8',
-    10: '#F9FAFB',
-    20: '#F4F6F8',
-    30: '#DFE3E8',
-    40: '#C4CDD5',
-    50: '#919EAB',
-    60: '#637381',
-    70: '#454F5B',
-    80: '#1C252E',
-    90: '#141A21',
-    100: '#000000',
-    main: '#F4F6F8',
-  },
-};
-
-const DARK_COLORS = {
-  primary: {
-    ...LIGHT_COLORS.primary,
-    main: '#FF9F06',
-  },
-  secondary: {
-    ...LIGHT_COLORS.secondary,
-    main: '#007FFF',
-  },
-  danger: {
-    ...LIGHT_COLORS.danger,
-    main: '#EB003B',
-  },
-  warning: {
-    ...LIGHT_COLORS.warning,
-    main: '#FFB724',
-  },
-  success: {
-    ...LIGHT_COLORS.success,
-    main: '#008A1E',
-  },
-  information: {
-    ...LIGHT_COLORS.information,
-    main: '#2768FF',
-  },
-  grey: {
-    0: '#000000',
-    5: '#141414',  // layer1
-    10: '#1F1F1F', // layer2
-    20: '#2C2C2C', // neutral
-    30: '#3D3D3D',
-    40: '#4F4F4F',
-    50: '#606060',
-    60: '#737373',
-    70: '#8C8C8C',
-    80: '#bfbfbf',
-    90: '#ededed',
-    100: '#FFFFFF',
-    main: '#2C2C2C',
-  },
-};
-
-const MAIN_COLORS = {
-  light: {
-    primary: LIGHT_COLORS.primary.main,
-    secondary: LIGHT_COLORS.secondary.main,
-    danger: LIGHT_COLORS.danger.main,
-    warning: LIGHT_COLORS.warning.main,
-    success: LIGHT_COLORS.success.main,
-    information: LIGHT_COLORS.information.main,
-    grey: LIGHT_COLORS.grey.main
-  },
-  dark: {
-    primary: DARK_COLORS.primary.main,
-    secondary: DARK_COLORS.secondary.main,
-    danger: DARK_COLORS.danger.main,
-    warning: DARK_COLORS.warning.main,
-    success: DARK_COLORS.success.main,
-    information: DARK_COLORS.information.main,
-    grey: DARK_COLORS.grey.main
-  }
-}
-
-const TEXT_COLORS = {
-  light: {
-    main: LIGHT_COLORS.primary.main,
-    primary: LIGHT_COLORS.grey[80],
-    secondary: LIGHT_COLORS.grey[60],
-    disabled: LIGHT_COLORS.grey[50],
-    danger: LIGHT_COLORS.danger[60],
-    warning: LIGHT_COLORS.warning[60],
-    success: LIGHT_COLORS.success[60],
-    information: LIGHT_COLORS.information[60],
-    white: '#FFFFFF',
-    black: '#000000',
-  },
-  dark: {
-    main: LIGHT_COLORS.primary.main,
-    primary: DARK_COLORS.grey[90],
-    secondary: DARK_COLORS.grey[70],
-    disabled: DARK_COLORS.grey[50],
-    danger: DARK_COLORS.danger[30],
-    warning: DARK_COLORS.warning[30],
-    success: DARK_COLORS.success[30],
-    information: DARK_COLORS.information[30],
-    white: '#FFFFFF',
-    black: '#000000',
-  },
-};
-
-const BORDER_COLORS = {
-  light: {
-    box: LIGHT_COLORS.grey[20],
-    active: LIGHT_COLORS.primary[50],
-    base: LIGHT_COLORS.grey[60],
-    danger: LIGHT_COLORS.danger[10],
-    warning: LIGHT_COLORS.warning[10],
-    success: LIGHT_COLORS.success[10],
-    information: LIGHT_COLORS.information[10],
-  },
-  dark: {
-    box: DARK_COLORS.grey[30],
-    active: DARK_COLORS.primary[50],
-    base: DARK_COLORS.grey[60],
-    danger: DARK_COLORS.danger[70],
-    warning: DARK_COLORS.warning[70],
-    success: DARK_COLORS.success[70],
-    information: DARK_COLORS.information[70],
-  },
-};
-
-const BACKGROUND_COLORS = {
-  light: {
-    layer1: LIGHT_COLORS.grey[5],
-    layer2: LIGHT_COLORS.grey[20],
-    neutral: LIGHT_COLORS.grey[30],
-    base: LIGHT_COLORS.grey[0],
-    danger: LIGHT_COLORS.danger[5],
-    warning: LIGHT_COLORS.warning[5],
-    success: LIGHT_COLORS.success[5],
-    information: LIGHT_COLORS.information[5],
-  },
-  dark: {
-    layer1: DARK_COLORS.grey[5],
-    layer2: DARK_COLORS.grey[20],
-    neutral: DARK_COLORS.grey[30],
-    base: DARK_COLORS.grey[0],
-    danger: DARK_COLORS.danger[80],
-    warning: DARK_COLORS.warning[80],
-    success: DARK_COLORS.success[80],
-    information: DARK_COLORS.information[80],
-  },
-};
-
-const ACTION_COLORS = {
-  light: {
-    hover: LIGHT_COLORS.primary[60],
-    pressed: LIGHT_COLORS.primary[70],
-    disable: LIGHT_COLORS.grey[20],
-  },
-  dark: {
-    hover: DARK_COLORS.primary[60],
-    pressed: DARK_COLORS.primary[70],
-    disable: DARK_COLORS.grey[30],
-  },
-};
-
-const DIVIDER_COLOR = {
-  light: LIGHT_COLORS.grey[50] + transparency['20%'],
-  dark: DARK_COLORS.grey[50] + transparency['20%'],
-};
-
-export default function palette({
-  mode = 'light',
-  themeColors = {},
-}: {
-  mode?: 'light' | 'dark';
-  themeColors?: { light?: Theme; dark?: Theme };
-} = {}): Theme {
-  const colors = mode === 'light' ? LIGHT_COLORS : DARK_COLORS;
-
-  const theme: Theme = {
-    mode,
-    ...colors,
-    text: TEXT_COLORS[mode],
-    border: BORDER_COLORS[mode],
-    background: BACKGROUND_COLORS[mode],
-    action: ACTION_COLORS[mode],
-    divider: DIVIDER_COLOR[mode],
-    elevationShadow: SHADOW_COLORS[mode],
-    modalBgColor: MODAL_BG_COLOR[mode],
-    mainColor: MAIN_COLORS[mode]
-  };
-
-  // 사용자 정의 테마 컬러가 있을 경우 병합
-  if (themeColors?.[mode]) {
-    return {
-      ...theme,
-      ...themeColors[mode],
-    };
-  }
-
-  return theme;
-}