@popp0102/nova 0.2.3 → 0.3.0

package/lib/components/Button.js

@@ -1,4 +1,5 @@
 import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
 import { useDeviceSize } from '../utils/deviceSize';
 
 const colors = {
@@ -31,10 +32,20 @@ const responsiveSizes = {
   },
 };
 
-export default function Button({ type = 'primary', style, onPress, children }) {
+export default function Button({
+  type = 'primary',
+  style,
+  onPress,
+  children,
+  leftIcon,
+  rightIcon,
+  iconColor
+}) {
   const buttonColors = colors[type];
   const deviceSize = useDeviceSize();
   const sizes = responsiveSizes[deviceSize];
+  const iconSize = sizes.fontSize * 1.4;
+  const finalIconColor = iconColor || buttonColors.text;
 
   return (
     <View style={[style]}>
@@ -49,12 +60,20 @@ export default function Button({ type = 'primary', style, onPress, children }) {
           pressed && styles.pressed,
         ]}
       >
-        <Text
-          style={[styles.text, { color: buttonColors.text, fontSize: sizes.fontSize }]}
-          numberOfLines={1}
-        >
-          {children}
-        </Text>
+        <View style={styles.buttonContent}>
+          {leftIcon && (
+            <MaterialIcons name={leftIcon} size={iconSize} color={finalIconColor} />
+          )}
+          <Text
+            style={[styles.text, { color: buttonColors.text, fontSize: sizes.fontSize }]}
+            numberOfLines={1}
+          >
+            {children}
+          </Text>
+          {rightIcon && (
+            <MaterialIcons name={rightIcon} size={iconSize} color={finalIconColor} />
+          )}
+        </View>
       </Pressable>
     </View>
   );
@@ -69,6 +88,12 @@ const styles = StyleSheet.create({
     shadowRadius: 1.0,
     elevation: 2,
   },
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
   text: {
     textAlign: 'center',
   },

package/lib/components/animations/FadeView.js

@@ -0,0 +1,33 @@
+import { Animated } from 'react-native';
+import { useRef, useEffect } from 'react';
+
+const DIRECTIONS = {
+  IN: 'in',
+  OUT: 'out'
+};
+
+const VALID_DIRECTIONS = Object.values(DIRECTIONS);
+
+export default function FadeView({ children, direction = DIRECTIONS.IN, duration = 1000 }) {
+  if (!VALID_DIRECTIONS.includes(direction)) {
+    throw new Error(`FadeView: direction must be one of ${VALID_DIRECTIONS.join(', ')}. Got: ${direction}`);
+  }
+
+  const fadeAnimationValue = useRef(
+    new Animated.Value(direction === DIRECTIONS.IN ? 0 : 1)
+  ).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnimationValue, {
+      toValue: direction === DIRECTIONS.IN ? 1 : 0,
+      duration,
+      useNativeDriver: true
+    }).start();
+  }, []);
+
+  return (
+    <Animated.View style={{ opacity: fadeAnimationValue }}>
+      {children}
+    </Animated.View>
+  );
+}

package/lib/components/animations/SlideView.js

@@ -0,0 +1,58 @@
+import { Animated } from 'react-native';
+import { useRef, useEffect } from 'react';
+
+const DIRECTIONS = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  UP: 'up',
+  DOWN: 'down',
+};
+
+const VALID_DIRECTIONS = Object.values(DIRECTIONS);
+
+export default function SlideView({ children, direction = DIRECTIONS.LEFT, duration = 1000 }) {
+  if (!VALID_DIRECTIONS.includes(direction)) {
+    throw new Error(`SlideView: direction must be one of ${VALID_DIRECTIONS.join(', ')}. Got: ${direction}`);
+  }
+  let initialValue = 300;
+  let transformProperty = 'translateX';
+
+  switch(direction) {
+    case DIRECTIONS.LEFT:
+      initialValue = 300;
+      transformProperty = 'translateX';
+      break;
+    case DIRECTIONS.RIGHT:
+      initialValue = -300;
+      transformProperty = 'translateX';
+      break;
+    case DIRECTIONS.UP:
+      initialValue = 300;
+      transformProperty = 'translateY';
+      break;
+    case DIRECTIONS.DOWN:
+      initialValue = -300;
+      transformProperty = 'translateY';
+      break;
+  }
+
+  const slideAnimationValue = useRef(new Animated.Value(initialValue)).current;
+
+  const slideIn = () => {
+    Animated.timing(slideAnimationValue, {
+      toValue: 0,
+      duration: duration,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  useEffect(() => {
+    slideIn();
+  }, []);
+
+  return (
+    <Animated.View style={{ transform: [{ [transformProperty]: slideAnimationValue }] }}>
+      {children}
+    </Animated.View>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popp0102/nova",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -30,10 +30,10 @@
     "prepublishOnly": "npm run lint && npm run test"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
-    "react-native-safe-area-context": ">=4.0.0",
-    "@expo/vector-icons": ">=14.0.0"
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -49,7 +49,5 @@
     "react": "^18.3.1",
     "react-native": "^0.75.0",
     "react-test-renderer": "^18.3.1"
-  },
-  "dependencies": {
   }
 }