@popp0102/nova 0.9.5 → 0.10.0

package/lib/components/Heading/config.js

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 export const sizes = {
   h1: 64,
   h2: 48,
-  h3: 28,
+  h3: 36,
   h4: 24,
   h5: 20,
   h6: 16,

package/lib/components/Heading/index.js

@@ -1,12 +1,21 @@
 import { Text } from "react-native";
 import { sizes, styles } from './config';
 
-export default function Heading({ children, color = 'black', size = 'h4', fontFamily }) {
+export default function Heading({ children, color = 'black', size = 'h4', fontFamily, textAlign = 'left', numberOfLines, ellipsizeMode = 'tail' }) {
   const fontSize = sizes[size] || sizes.h4;
   const fontWeight = fontFamily ? 'normal' : 'bold';
 
+  const dynamicStyle = { color, fontSize, fontWeight, textAlign };
+  if (fontFamily) {
+    dynamicStyle.fontFamily = fontFamily;
+  }
+
   return (
-    <Text style={[styles.heading, { color, fontSize, fontFamily, fontWeight }]}>
+    <Text
+      style={[styles.heading, dynamicStyle]}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+    >
       {children}
     </Text>
   );

package/lib/components/ScreenHeader/config.js

@@ -7,19 +7,31 @@ export const styles = StyleSheet.create({
     width: "100%",
   },
   topRow: {
-    flexDirection: "row",
-    alignItems: "center",
+    position: 'relative',
     width: "100%",
+    minHeight: 48,
+    justifyContent: 'center',
   },
   backButton: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
     width: 48,
+    justifyContent: 'center',
   },
   titleContainer: {
-    flex: 1,
+    width: "100%",
+    paddingLeft: 48,
+    paddingRight: 40,
     alignItems: 'center',
   },
   rightContent: {
-    width: 80,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
     alignItems: "flex-end",
+    justifyContent: 'center',
   },
 });

package/lib/components/ScreenHeader/index.js

@@ -6,31 +6,77 @@ import { styles } from './config';
 
 export default function ScreenHeader({
   title,
-  onBack,
-  rightContent,
+  leftIcon,
+  rightIcon,
   titleFontFamily,
-  titleColor = "#4A2C0A",
-  backIconColor = "#4A2C0A"
+  titleColor = "#4A2C0A"
 }) {
   const deviceSize = useDeviceSize();
-  const titleSize = deviceSize === 'small' ? 'h3' : 'h2';
+  const titleSize = deviceSize === 'small' ? 'h4' : 'h3';
+
+  const leftIconColor = leftIcon?.color || "#4A2C0A";
+  const leftIconName = leftIcon?.name || "arrow-back";
+  const onLeftIconPress = leftIcon?.onSelect;
+
+  const rightIconColor = rightIcon?.color || "#4A2C0A";
+  const rightIconName = rightIcon?.name;
+  const onRightIconPress = rightIcon?.onSelect;
+
+  const renderLeftIcon = () => {
+    if (!leftIcon) return null;
+
+    const icon = <MaterialIcons name={leftIconName} size={32} color={leftIconColor} />;
+
+    if (onLeftIconPress) {
+      return (
+        <Pressable onPress={onLeftIconPress} style={styles.backButton} testID="screen-header-left-icon">
+          {icon}
+        </Pressable>
+      );
+    }
+
+    return (
+      <View style={styles.backButton} testID="screen-header-left-icon">
+        {icon}
+      </View>
+    );
+  };
+
+  const renderRightIcon = () => {
+    if (!rightIconName) return null;
+
+    const icon = <MaterialIcons name={rightIconName} size={28} color={rightIconColor} />;
+
+    if (onRightIconPress) {
+      return (
+        <Pressable onPress={onRightIconPress} style={styles.rightContent} testID="screen-header-right-icon">
+          {icon}
+        </Pressable>
+      );
+    }
+
+    return (
+      <View style={styles.rightContent} testID="screen-header-right-icon">
+        {icon}
+      </View>
+    );
+  };
 
   return (
     <View style={styles.header}>
       <View style={styles.topRow}>
-        {onBack && (
-          <Pressable onPress={onBack} style={styles.backButton} testID="screen-header-back-button">
-            <MaterialIcons name="arrow-back" size={32} color={backIconColor} />
-          </Pressable>
-        )}
+        {renderLeftIcon()}
         <View style={styles.titleContainer}>
-          <Heading size={titleSize} fontFamily={titleFontFamily} color={titleColor}>{title}</Heading>
+          <Heading
+            size={titleSize}
+            fontFamily={titleFontFamily}
+            color={titleColor}
+            numberOfLines={1}
+          >
+            {title}
+          </Heading>
         </View>
-        {rightContent && (
-          <View style={styles.rightContent}>
-            {rightContent}
-          </View>
-        )}
+        {renderRightIcon()}
       </View>
     </View>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popp0102/nova",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",