@popp0102/nova 0.1.0 → 0.1.1

package/lib/components/Button.js

@@ -1,4 +1,5 @@
 import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { useDeviceSize } from '@utils/deviceSize';
 
 const colors = {
   primary: {
@@ -6,13 +7,34 @@ const colors = {
     text: 'white',
   },
   secondary: {
-    background: 'gray',
+    background: '#CCCCCC',
     text: 'black',
   },
+  destructive: {
+    background: '#FF3B30',
+    text: 'white',
+  },
+};
+
+const responsiveSizes = {
+  small: {
+    fontSize: 10,
+    padding: 6,
+  },
+  medium: {
+    fontSize: 14,
+    padding: 8,
+  },
+  large: {
+    fontSize: 16,
+    padding: 10,
+  },
 };
 
 export default function Button({ type = 'primary', style, onPress, children }) {
   const buttonColors = colors[type];
+  const deviceSize = useDeviceSize();
+  const sizes = responsiveSizes[deviceSize];
 
   return (
     <View style={[style]}>
@@ -20,11 +42,17 @@ export default function Button({ type = 'primary', style, onPress, children }) {
         onPress={onPress}
         style={({ pressed }) => [
           styles.button,
-          { backgroundColor: buttonColors.background },
+          {
+            backgroundColor: buttonColors.background,
+            padding: sizes.padding,
+          },
           pressed && styles.pressed,
         ]}
       >
-        <Text style={[styles.text, { color: buttonColors.text }]}>
+        <Text
+          style={[styles.text, { color: buttonColors.text, fontSize: sizes.fontSize }]}
+          numberOfLines={1}
+        >
           {children}
         </Text>
       </Pressable>
@@ -34,12 +62,14 @@ export default function Button({ type = 'primary', style, onPress, children }) {
 
 const styles = StyleSheet.create({
   button: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 16,
+    padding: 8,
+    borderRadius: 8,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.18,
+    shadowRadius: 1.0,
+    elevation: 2,
   },
   text: {
-    fontSize: 24,
     textAlign: 'center',
   },
   pressed: {

package/lib/components/Modal.js

@@ -1,7 +1,14 @@
-import { View, Text, Modal as RNModal, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { View, Text, Modal as RNModal, StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import Button from "./Button";
+
+export default function Modal({ visible, title, onConfirm, onClose, children, includeFooter = true }) {
+  function handleOnConfirm() {
+    onConfirm();
+    onClose();
+  }
 
-export default function Modal({ visible, title, onClose, children }) {
   return (
     <RNModal visible={visible} transparent={true} onRequestClose={onClose}>
       <SafeAreaView style={styles.backdrop}>
@@ -12,6 +19,12 @@ export default function Modal({ visible, title, onClose, children }) {
           <View style={styles.body}>
             {children}
           </View>
+          { includeFooter &&
+            <View style={styles.footer}>
+              <Button style={styles.button} onPress={onClose} type="secondary">Cancel</Button>
+              <Button style={styles.button} onPress={handleOnConfirm}>Ok</Button>
+            </View>
+          }
         </View>
      </SafeAreaView>
     </RNModal>
@@ -21,30 +34,41 @@ export default function Modal({ visible, title, onClose, children }) {
 const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
   },
   container: {
-    paddingVertical: 16,
+    width: "75%",
+    padding: 8,
     borderRadius: 24,
-    backgroundColor: 'yellow',
+    backgroundColor: "#CCCCCC",
   },
   header: {
     width: "100%",
+    paddingTop: 16,
     paddingHorizontal: 16,
-    borderBottomWidth: 2,
-    borderBottomColor: 'black',
   },
   title: {
+    marginTop: 16,
     fontSize: 24,
-    fontWeight: 'bold',
-    color: 'black',
+    fontWeight: "bold",
+    color: "black",
   },
   body: {
-    marginTop: 8,
     paddingHorizontal: 16,
+    paddingVertical: 24,
     gap: 8,
   },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    paddingVertical: 8,
+  },
+  button: {
+    flex: 0.25,
+  },
 });
 

package/lib/utils/deviceSize.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+import { Dimensions } from 'react-native';
+
+const SIZES = {
+  small: 375,   // iPhone SE and smaller
+  medium: 768,  // Most phones up to small tablets
+};
+
+export function getDeviceSize(width) {
+  if (width < SIZES.small) {
+    return 'small';
+  } else if (width < SIZES.medium) {
+    return 'medium';
+  } else {
+    return 'large';
+  }
+}
+
+export function useDeviceSize() {
+  const [deviceSize, setDeviceSize] = useState(() => {
+    const { width } = Dimensions.get('window');
+    return getDeviceSize(width);
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({ window }) => {
+      setDeviceSize(getDeviceSize(window.width));
+    });
+
+    return () => subscription?.remove();
+  }, []);
+
+  return deviceSize;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popp0102/nova",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -40,6 +40,7 @@
     "@babel/preset-flow": "^7.27.1",
     "@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-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",