@popp0102/nova 0.6.6 → 0.6.7

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/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.6.7",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",

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>
-  );
-}