@kukkim/react-native-ui 0.1.4 → 0.1.6

package/src/components/progressBar/linearProgressBar.tsx

@@ -1,4 +1,9 @@
-import { StyleSheet, View } from 'react-native';
+import { useState } from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
 import { type ProgressBarProps } from './types';
 import { useTheme } from '../../hooks/useTheme';
 
@@ -11,6 +16,18 @@ const LinearProgressBar = ({
   const { theme } = useTheme();
   const progress = Math.min(Math.max(value, 0), 1);
 
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: withTiming(containerWidth * progress, {
+      duration: 1000,
+    }),
+  }));
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
   return (
     <View
       style={[
@@ -20,17 +37,21 @@ const LinearProgressBar = ({
         },
         style,
       ]}
+      onLayout={onLayout}
       {...props}
     >
-      <View
-        style={[
-          styles.progress,
-          {
-            width: `${progress * 100}%`,
-            backgroundColor: theme.colors[type],
-          },
-        ]}
-      />
+      {containerWidth > 0 && (
+        <Animated.View
+          style={[
+            styles.progress,
+            {
+              width: containerWidth,
+              backgroundColor: theme.colors[type],
+            },
+            animatedStyle,
+          ]}
+        />
+      )}
     </View>
   );
 };

package/src/components/select/commonSelect.tsx

@@ -0,0 +1,170 @@
+import React, { type ReactElement, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import { CommonIcon } from '../icon';
+import { CommonText } from '../text';
+import { type CommonSelectItemProps, type CommonSelectProps } from './types';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+export const SelectItem = (_props: CommonSelectItemProps) => {
+  return null;
+};
+export const CommonSelect = ({
+  children,
+  placeholder = 'Select',
+  value,
+  // defaultValue,
+  onChange,
+  style,
+}: CommonSelectProps) => {
+  const { theme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<string | undefined>(
+    // defaultValue
+    ''
+  );
+
+  const selectedValue = value ?? internalValue;
+
+  const items = React.Children.toArray(children).filter(
+    React.isValidElement
+  ) as ReactElement<CommonSelectItemProps>[];
+
+  const selectedItem = items.find((item) => item.props.value === selectedValue);
+
+  const handleSelect = (nextValue: string) => {
+    if (value === undefined) {
+      setInternalValue(nextValue);
+    }
+
+    onChange?.(nextValue);
+    setOpen(false);
+  };
+
+  const rotate = useSharedValue(0);
+  const arrowAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotate: `${rotate.value}deg`,
+        },
+      ],
+    };
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        style={[
+          styles.trigger,
+          {
+            borderColor: theme.colors.border,
+            backgroundColor: theme.colors.background,
+          },
+        ]}
+        onPress={() => {
+          const nextOpen = !open;
+
+          rotate.value = withTiming(nextOpen ? 180 : 0, {
+            duration: 200,
+          });
+
+          setOpen(nextOpen);
+        }}
+      >
+        <CommonText
+          size="m"
+          style={[!selectedItem && { color: theme.colors.disabled }]}
+        >
+          {selectedItem?.props.label ?? placeholder}
+        </CommonText>
+        <Animated.View style={arrowAnimatedStyle}>
+          <CommonIcon iconType="down" />
+        </Animated.View>
+      </Pressable>
+
+      {open && (
+        <View
+          style={[
+            {
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.background,
+            },
+            styles.dropdown,
+          ]}
+        >
+          {items.map((item) => {
+            const isSelected = item.props.value === selectedValue;
+
+            return (
+              <Pressable
+                key={String(item.props.value)}
+                style={[styles.option, isSelected && styles.selectedOption]}
+                onPress={() => handleSelect(item.props.value)}
+              >
+                <CommonText
+                  style={[
+                    styles.optionText,
+                    isSelected && styles.selectedOptionText,
+                  ]}
+                >
+                  {item.props.label}
+                </CommonText>
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+    zIndex: 999,
+  },
+  trigger: {
+    minHeight: 44,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  arrow: {
+    fontSize: 12,
+    color: '#667085',
+  },
+  dropdown: {
+    position: 'absolute',
+    top: 46,
+    left: 0,
+    right: 0,
+
+    borderWidth: 1,
+    borderRadius: 8,
+    zIndex: 999,
+    elevation: 10,
+  },
+  option: {
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+  },
+  selectedOption: {
+    backgroundColor: '#F2F4F7',
+  },
+  optionText: {
+    fontSize: 14,
+    color: '#101828',
+  },
+  selectedOptionText: {
+    fontWeight: '600',
+  },
+});

package/src/components/select/index.ts

@@ -0,0 +1,3 @@
+import { CommonSelect, SelectItem } from './commonSelect';
+
+export { CommonSelect, SelectItem };

package/src/components/select/types.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+
+// type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export interface CommonSelectProps extends ViewProps {
+  size?: SizeVariant;
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  children: ReactNode;
+}
+
+export interface CommonSelectItemProps extends ViewProps {
+  label: string;
+  value: string;
+}

package/src/components/slider/index.tsx

@@ -1 +1,118 @@
-// TODO: slider 구현 필요
+import { View, StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { CommonText } from '../text';
+import { type SliderProps } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+// TODO: Thumb가 범위 바깥으로 넘어가는 것 수정 필요.
+export const CommonSlider = ({ labels = [] }: SliderProps) => {
+  const { theme } = useTheme();
+  const position = useSharedValue(0);
+  const startPosition = useSharedValue(0);
+
+  const panGesture = Gesture.Pan()
+    .onBegin(() => {
+      startPosition.value = position.value;
+    })
+    .onUpdate((event) => {
+      const nextValue = startPosition.value + event.translationX;
+      if (nextValue < 0) {
+        position.value = 0;
+      } else {
+        position.value = nextValue;
+      }
+    });
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: position.value }],
+  }));
+  const activeTrackStyle = useAnimatedStyle(() => ({
+    width: position.value + 15,
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[styles.sliderBar, { backgroundColor: theme.colors.secondary }]}
+      >
+        <Animated.View
+          style={[
+            {
+              backgroundColor: theme.colors.primary,
+            },
+            styles.filledSliderBar,
+            activeTrackStyle,
+          ]}
+        />
+        <GestureDetector gesture={panGesture}>
+          <Animated.View
+            style={[
+              animatedStyle,
+              {
+                backgroundColor: theme.colors.text,
+              },
+              styles.thumb,
+            ]}
+          />
+        </GestureDetector>
+      </View>
+
+      <View style={styles.labelBar}>
+        {labels.map((label, index) => {
+          const percent = labels.length === 1 ? 0 : index / (labels.length - 1);
+          return (
+            <CommonText
+              size="s"
+              key={`${label}-${index}`}
+              style={[
+                styles.labelText,
+                {
+                  color: theme.colors.text,
+                  left: `${percent * 100}%`,
+                },
+              ]}
+            >
+              {label}
+            </CommonText>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    width: '100%',
+  },
+  sliderBar: {
+    width: '100%',
+    height: 10,
+  },
+  filledSliderBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    height: 10,
+    borderRadius: 5,
+  },
+  labelBar: {
+    position: 'relative',
+    height: 24,
+    marginTop: 12,
+  },
+  labelText: {
+    position: 'absolute',
+    transform: [{ translateX: -8 }],
+  },
+  thumb: {
+    bottom: 10,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+  },
+});

package/src/components/slider/types.ts

@@ -0,0 +1,10 @@
+import { type ViewProps } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export interface SliderProps extends ViewProps {
+  type?: Variant;
+  size?: SizeVariant;
+  labels?: (string | number)[];
+}

package/src/components/switch/commonSwitch.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useRef } from 'react';
-import { Animated, Pressable, StyleSheet } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
 import { type SwitchProps, sizeType } from './types';
 import { useTheme } from '../../hooks/useTheme';
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
 
-//TODO: react-native-reanimated로 수정필요
 export default function CommonSwitch({
   type = 'primary',
   size = 'm',
@@ -14,20 +16,22 @@ export default function CommonSwitch({
 }: SwitchProps) {
   const { theme } = useTheme();
 
-  const animValue = useRef(new Animated.Value(value ? 1 : 0)).current;
-
   const sizeValue = sizeType[size];
   const containerWidth = (sizeValue + 2) * 2;
   const thumbSize = sizeValue;
   const translateX = containerWidth - thumbSize - 2;
 
-  useEffect(() => {
-    Animated.timing(animValue, {
-      toValue: value ? translateX : 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-  }, [value, translateX, animValue]);
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: withTiming(value ? translateX : 0, {
+            duration: 200,
+          }),
+        },
+      ],
+    };
+  }, [value, translateX]);
 
   const toggleValue = () => {
     if (disabled) return;
@@ -57,8 +61,8 @@ export default function CommonSwitch({
             height: thumbSize,
             borderRadius: thumbSize / 2,
             backgroundColor: value ? theme.colors[type] : theme.colors.disabled,
-            transform: [{ translateX: animValue }],
           },
+          thumbAnimatedStyle,
         ]}
       />
     </Pressable>

package/src/index.tsx

@@ -19,5 +19,9 @@ export {
   CommonSwitch,
   SocialLoginButton,
   CommonSpinner,
+  CommonSlider,
+  CommonSelect,
+  SelectItem,
+  NumberBadge,
 } from './components';
 export { ThemeProvider } from './theme/themeProvider';