@kukkim/react-native-ui 0.1.3 → 0.1.5

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/spinner/commonSpinner.tsx

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { CommonIcon } from '../icon';
+import { type SpinnerProps } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const CommonSpinner = ({ type = 'primary', ...props }: SpinnerProps) => {
+  const { theme } = useTheme();
+  const rotateValue = useSharedValue(0);
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotateValue.value}deg` }],
+  }));
+
+  useEffect(() => {
+    rotateValue.value = withRepeat(
+      withTiming(360, {
+        duration: 1000,
+        easing: Easing.linear,
+      }),
+      -1, // infinite
+      false
+    );
+  });
+
+  return (
+    <View style={styles.container} {...props}>
+      <Animated.View style={[animatedStyles]}>
+        <CommonIcon color={theme.colors[type]} iconType="loaderCircle" />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 24,
+    height: 24,
+  },
+});
+
+export default CommonSpinner;

package/src/components/spinner/index.ts

@@ -0,0 +1,3 @@
+import CommonSpinner from './commonSpinner';
+
+export { CommonSpinner };

package/src/components/spinner/types.ts

@@ -0,0 +1,9 @@
+import { type ViewProps } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export interface SpinnerProps extends ViewProps {
+  type?: Variant;
+  size?: SizeVariant;
+}

package/src/index.tsx

@@ -17,5 +17,10 @@ export {
   CommonInput,
   CommonPopOver,
   CommonSwitch,
+  SocialLoginButton,
+  CommonSpinner,
+  CommonSlider,
+  CommonSelect,
+  SelectItem,
 } from './components';
 export { ThemeProvider } from './theme/themeProvider';

package/src/components/spinner/index.tsx

@@ -1 +0,0 @@
-// TODO: spinner 구현 필요