@popp0102/nova 0.6.6 → 0.7.0

package/lib/components/Badge/config.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export const sizes = {
+  small: 12,
+  medium: 14,
+  large: 16,
+};
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    padding: 8,
+    borderRadius: 24,
+    alignSelf: "flex-start",
+  },
+  text: {
+    fontWeight: '600',
+  },
+});

package/lib/components/{Badge.js → Badge/index.js}

@@ -1,11 +1,6 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
-
-const SIZES = {
-  small: 12,
-  medium: 14,
-  large: 16,
-};
+import { sizes, styles } from './config';
 
 export default function Badge({
   children,
@@ -17,7 +12,7 @@ export default function Badge({
   size = 'large',
   style
 }) {
-  const fontSize = SIZES[size] || SIZES.large;
+  const fontSize = sizes[size] || sizes.large;
 
   return (
     <View style={style}>
@@ -29,17 +24,3 @@ export default function Badge({
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    padding: 8,
-    borderRadius: 24,
-    alignSelf: "flex-start",
-  },
-  text: {
-    fontWeight: '600',
-  },
-});

package/lib/components/Button/config.js

@@ -19,26 +19,32 @@ export const sizes = {
   tiny: {
     fontSize: 12,
     padding: 6,
+    fontWeight: '400',
   },
   small: {
     fontSize: 14,
     padding: 8,
+    fontWeight: '500',
   },
   medium: {
-    fontSize: 16,
+    fontSize: 18,
     padding: 12,
+    fontWeight: '600',
   },
   large: {
-    fontSize: 20,
+    fontSize: 22,
     padding: 16,
+    fontWeight: '700',
   },
   xlarge: {
-    fontSize: 24,
+    fontSize: 26,
     padding: 20,
+    fontWeight: '800',
   },
   xxlarge: {
-    fontSize: 28,
+    fontSize: 30,
     padding: 24,
+    fontWeight: '900',
   },
 };
 
@@ -46,10 +52,13 @@ export const styles = StyleSheet.create({
   button: {
     padding: 8,
     borderRadius: 8,
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.18,
-    shadowRadius: 1.0,
-    elevation: 2,
+    borderWidth: 2,
+    borderColor: 'rgba(0, 0, 0, 0.3)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    elevation: 8,
   },
   buttonContent: {
     flexDirection: 'row',

package/lib/components/Button/index.js

@@ -1,4 +1,5 @@
 import { View, Text, Pressable } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
 import { MaterialIcons } from '@expo/vector-icons';
 import { colors, sizes, styles } from './config';
 
@@ -10,70 +11,62 @@ export default function Button({
   style,
   onPress,
   children,
-  icon,
-  iconPosition,
-  iconColor
+  icon
 }) {
   const buttonColors = colors[type];
   const buttonSizes = sizes[size];
-  const backgroundColor = color || buttonColors.background;
+  const isGradient = Array.isArray(color);
+  const backgroundColor = isGradient ? null : (color || buttonColors.background);
   const finalTextColor = textColor || buttonColors.text;
-  const iconSize = buttonSizes.fontSize * 1.4;
-  const finalIconColor = iconColor || finalTextColor;
+
+  const iconName = icon?.name;
+  const iconPosition = icon?.position;
+  const iconColor = icon?.color || finalTextColor;
 
   if (iconPosition && !['left', 'right', 'top'].includes(iconPosition)) {
-    throw new Error(`Invalid iconPosition: "${iconPosition}". Must be "left", "right", or "top".`);
+    throw new Error(`Invalid icon.position: "${iconPosition}". Must be "left", "right", or "top".`);
   }
 
   const isVerticalLayout = iconPosition === 'top';
+  const baseIconSize = buttonSizes.fontSize * 1.4;
   const verticalIconSize = buttonSizes.fontSize * 2.5;
+  const iconSize = isVerticalLayout ? verticalIconSize : baseIconSize;
+
+  const textElement = (
+    <Text
+      style={[styles.text, { color: finalTextColor, fontSize: buttonSizes.fontSize, fontWeight: buttonSizes.fontWeight }]}
+      numberOfLines={1}
+    >
+      {children}
+    </Text>
+  );
+
+  const iconElement = iconName && (
+    <MaterialIcons name={iconName} size={iconSize} color={iconColor} />
+  );
+
+  const content = (
+    <View style={[styles.buttonContent, isVerticalLayout && styles.verticalContent]}>
+      {iconName && (iconPosition === 'left' || iconPosition === 'top') && iconElement}
+      {textElement}
+      {iconName && iconPosition === 'right' && iconElement}
+    </View>
+  );
+
+  const backgroundStyle = isGradient
+    ? { overflow: 'hidden', padding: 0 }
+    : { backgroundColor, padding: buttonSizes.padding };
 
   return (
     <Pressable
       onPress={onPress}
-      style={({ pressed }) => [
-        styles.button,
-        {
-          backgroundColor: backgroundColor,
-          padding: buttonSizes.padding,
-        },
-        pressed && styles.pressed,
-        style,
-      ]}
+      style={({ pressed }) => [styles.button, backgroundStyle, pressed && styles.pressed, style]}
     >
-      <View style={[
-        styles.buttonContent,
-        isVerticalLayout && styles.verticalContent
-      ]}>
-        {isVerticalLayout ? (
-          <>
-            {icon && (
-              <MaterialIcons name={icon} size={verticalIconSize} color={finalIconColor} />
-            )}
-            <Text
-              style={[styles.text, { color: finalTextColor, fontSize: buttonSizes.fontSize }]}
-              numberOfLines={1}
-            >
-              {children}
-            </Text>
-          </>
-        ) : (
-          <>
-            {icon && iconPosition === 'left' && (
-              <MaterialIcons name={icon} size={iconSize} color={finalIconColor} />
-            )}
-            <Text
-              style={[styles.text, { color: finalTextColor, fontSize: buttonSizes.fontSize }]}
-              numberOfLines={1}
-            >
-              {children}
-            </Text>
-            {icon && iconPosition === 'right' && (
-              <MaterialIcons name={icon} size={iconSize} color={finalIconColor} />
-            )}
-          </>
-        )}
-      </View>
+      {isGradient ? (
+        <LinearGradient colors={color} style={{ padding: buttonSizes.padding }}>
+          {content}
+        </LinearGradient>
+      ) : content}
     </Pressable>
   );
 }

package/lib/components/Card/config.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  card: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 16,
+  },
+  cardPressed: {
+    opacity: 0.5,
+  },
+});

package/lib/components/{Card.js → Card/index.js}

@@ -1,4 +1,5 @@
-import { View, Pressable, StyleSheet } from "react-native";
+import { View, Pressable } from "react-native";
+import { styles } from './config';
 
 export default function Card({ children, onPress, style }) {
   const cardContent = (
@@ -20,14 +21,3 @@ export default function Card({ children, onPress, style }) {
 
   return cardContent;
 }
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: 'white',
-    borderRadius: 16,
-    padding: 16,
-  },
-  cardPressed: {
-    opacity: 0.5,
-  },
-});

package/lib/components/IconButton/config.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  button: {
+    padding: 4,
+  },
+  pressed: {
+    opacity: 0.5,
+  },
+});

package/lib/components/{IconButton.js → IconButton/index.js}

@@ -1,5 +1,6 @@
-import { Pressable, StyleSheet } from "react-native";
+import { Pressable } from "react-native";
 import { MaterialIcons } from '@expo/vector-icons';
+import { styles } from './config';
 
 export default function IconButton({ name, size = 24, color = 'black', onPress }) {
   return (
@@ -14,12 +15,3 @@ export default function IconButton({ name, size = 24, color = 'black', onPress }
     </Pressable>
   );
 }
-
-const styles = StyleSheet.create({
-  button: {
-    padding: 4,
-  },
-  pressed: {
-    opacity: 0.5,
-  },
-});

package/lib/components/Modal/config.js

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+  },
+  container: {
+    width: "75%",
+    padding: 8,
+    borderRadius: 24,
+    backgroundColor: "#CCCCCC",
+  },
+  header: {
+    width: "100%",
+    paddingTop: 16,
+    paddingHorizontal: 16,
+  },
+  title: {
+    marginTop: 16,
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "black",
+  },
+  body: {
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+    gap: 8,
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    paddingVertical: 8,
+  },
+  button: {
+    flex: 0.25,
+  },
+});

package/lib/components/{Modal.js → Modal/index.js}

@@ -1,7 +1,7 @@
-import { View, Text, Modal as RNModal, StyleSheet } from "react-native";
+import { View, Text, Modal as RNModal } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-
-import Button from "./Button";
+import Button from "../Button";
+import { styles } from './config';
 
 export default function Modal({ visible, title, onConfirm, onClose, children, includeFooter = true }) {
   return (
@@ -25,45 +25,3 @@ export default function Modal({ visible, title, onConfirm, onClose, children, in
     </RNModal>
   );
 }
-
-const styles = StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "rgba(0, 0, 0, 0.75)",
-  },
-  container: {
-    width: "75%",
-    padding: 8,
-    borderRadius: 24,
-    backgroundColor: "#CCCCCC",
-  },
-  header: {
-    width: "100%",
-    paddingTop: 16,
-    paddingHorizontal: 16,
-  },
-  title: {
-    marginTop: 16,
-    fontSize: 24,
-    fontWeight: "bold",
-    color: "black",
-  },
-  body: {
-    paddingHorizontal: 16,
-    paddingVertical: 24,
-    gap: 8,
-  },
-  footer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: 8,
-    paddingVertical: 8,
-  },
-  button: {
-    flex: 0.25,
-  },
-});
-

package/lib/components/Subtitle/config.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export const sizes = {
+  small: 12,
+  medium: 14,
+  large: 16,
+};
+
+export const styles = StyleSheet.create({
+  subtitle: {
+    fontStyle: 'italic',
+  },
+});

package/lib/components/Subtitle/index.js

@@ -0,0 +1,12 @@
+import { Text } from "react-native";
+import { sizes, styles } from './config';
+
+export default function Subtitle({ children, color = '#777', size = 'medium' }) {
+  const fontSize = sizes[size] || sizes.medium;
+
+  return (
+    <Text style={[styles.subtitle, { color, fontSize }]}>
+      {children}
+    </Text>
+  );
+}

package/lib/components/Title/config.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export const sizes = {
+  tiny: 16,
+  small: 20,
+  medium: 24,
+  large: 28,
+};
+
+export const styles = StyleSheet.create({
+  title: {
+    fontWeight: 'bold',
+  },
+});

package/lib/components/Title/index.js

@@ -0,0 +1,12 @@
+import { Text } from "react-native";
+import { sizes, styles } from './config';
+
+export default function Title({ children, color = 'black', size = 'medium' }) {
+  const fontSize = sizes[size] || sizes.medium;
+
+  return (
+    <Text style={[styles.title, { color, fontSize }]}>
+      {children}
+    </Text>
+  );
+}

package/lib/components/animations/FadeView/config.js

@@ -0,0 +1,6 @@
+export const directions = {
+  IN: 'in',
+  OUT: 'out'
+};
+
+export const validDirections = Object.values(directions);

package/lib/components/animations/FadeView/index.js

@@ -0,0 +1,27 @@
+import { Animated } from 'react-native';
+import { useRef, useEffect } from 'react';
+import { directions, validDirections } from './config';
+
+export default function FadeView({ children, direction = directions.IN, duration = 1000, style }) {
+  if (!validDirections.includes(direction)) {
+    throw new Error(`FadeView: direction must be one of ${validDirections.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={[style, { opacity: fadeAnimationValue }]}>
+      {children}
+    </Animated.View>
+  );
+}

package/lib/components/animations/ShakeView/config.js

@@ -0,0 +1,5 @@
+export const defaults = {
+  duration: 50,
+  distance: 10,
+  intensity: 4,
+};

package/lib/components/animations/{ShakeView.js → ShakeView/index.js}

@@ -1,13 +1,14 @@
 import { useEffect, useRef } from 'react';
 import { Animated } from 'react-native';
+import { defaults } from './config';
 
 export default function ShakeView({
   shake,
   children,
   style,
-  duration = 50,
-  distance = 10,
-  intensity = 4
+  duration = defaults.duration,
+  distance = defaults.distance,
+  intensity = defaults.intensity
 }) {
   const shakeAnim = useRef(new Animated.Value(0)).current;
 

package/lib/components/animations/SlideView/config.js

@@ -0,0 +1,8 @@
+export const directions = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  UP: 'up',
+  DOWN: 'down',
+};
+
+export const validDirections = Object.values(directions);

package/lib/components/animations/{SlideView.js → SlideView/index.js}

@@ -1,36 +1,28 @@
 import { Animated } from 'react-native';
 import { useRef, useEffect } from 'react';
+import { directions, validDirections } from './config';
 
-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, style }) {
-  if (!VALID_DIRECTIONS.includes(direction)) {
-    throw new Error(`SlideView: direction must be one of ${VALID_DIRECTIONS.join(', ')}. Got: ${direction}`);
+export default function SlideView({ children, direction = directions.LEFT, duration = 1000, style }) {
+  if (!validDirections.includes(direction)) {
+    throw new Error(`SlideView: direction must be one of ${validDirections.join(', ')}. Got: ${direction}`);
   }
   let initialValue = 300;
   let transformProperty = 'translateX';
 
   switch(direction) {
-    case DIRECTIONS.LEFT:
+    case directions.LEFT:
       initialValue = 300;
       transformProperty = 'translateX';
       break;
-    case DIRECTIONS.RIGHT:
+    case directions.RIGHT:
       initialValue = -300;
       transformProperty = 'translateX';
       break;
-    case DIRECTIONS.UP:
+    case directions.UP:
       initialValue = 300;
       transformProperty = 'translateY';
       break;
-    case DIRECTIONS.DOWN:
+    case directions.DOWN:
       initialValue = -300;
       transformProperty = 'translateY';
       break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popp0102/nova",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -31,6 +31,7 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
+    "expo-linear-gradient": ">=14.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "react-native-safe-area-context": ">=4.0.0"
@@ -42,7 +43,7 @@
     "@babel/preset-react": "^7.24.0",
     "@testing-library/react-native": "^12.4.3",
     "babel-plugin-module-resolver": "^5.0.2",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^30.2.0",

package/lib/components/Subtitle.js

@@ -1,23 +0,0 @@
-import { Text, StyleSheet } from "react-native";
-
-const SIZES = {
-  small: 12,
-  medium: 14,
-  large: 16,
-};
-
-export default function Subtitle({ children, color = '#777', size = 'medium' }) {
-  const fontSize = SIZES[size] || SIZES.medium;
-
-  return (
-    <Text style={[styles.subtitle, { color, fontSize }]}>
-      {children}
-    </Text>
-  );
-}
-
-const styles = StyleSheet.create({
-  subtitle: {
-    fontStyle: 'italic',
-  },
-});

package/lib/components/Title.js

@@ -1,24 +0,0 @@
-import { Text, StyleSheet } from "react-native";
-
-const SIZES = {
-  tiny: 16,
-  small: 20,
-  medium: 24,
-  large: 28,
-};
-
-export default function Title({ children, color = 'black', size = 'medium' }) {
-  const fontSize = SIZES[size] || SIZES.medium;
-
-  return (
-    <Text style={[styles.title, { color, fontSize }]}>
-      {children}
-    </Text>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontWeight: 'bold',
-  },
-});

package/lib/components/animations/FadeView.js

@@ -1,33 +0,0 @@
-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, style }) {
-  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={[style, { opacity: fadeAnimationValue }]}>
-      {children}
-    </Animated.View>
-  );
-}