@popp0102/nova 0.7.0 → 0.9.0

package/lib/components/{Title → Heading}/config.js

@@ -1,14 +1,16 @@
 import { StyleSheet } from 'react-native';
 
 export const sizes = {
-  tiny: 16,
-  small: 20,
-  medium: 24,
-  large: 28,
+  h1: 64,
+  h2: 48,
+  h3: 28,
+  h4: 24,
+  h5: 20,
+  h6: 16,
 };
 
 export const styles = StyleSheet.create({
-  title: {
+  heading: {
     fontWeight: 'bold',
   },
 });

package/lib/components/Heading/index.js

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

package/lib/components/Screen/index.js

@@ -0,0 +1,47 @@
+import { StyleSheet, ImageBackground, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { LinearGradient } from 'expo-linear-gradient';
+
+export default function Screen({ style, children, gradientColors, backgroundImage }) {
+  const content = (
+    <SafeAreaView style={[styles.safeArea, style]}>
+      {children}
+    </SafeAreaView>
+  );
+
+  const withBackground = backgroundImage ? (
+    <ImageBackground
+      source={backgroundImage.source}
+      style={styles.backgroundImage}
+      imageStyle={{ opacity: backgroundImage.opacity ?? 0.1 }}
+      resizeMode="cover"
+    >
+      {content}
+    </ImageBackground>
+  ) : content;
+
+  return gradientColors ? (
+    <LinearGradient
+      colors={gradientColors}
+      style={styles.gradient}
+    >
+      {withBackground}
+    </LinearGradient>
+  ) : (
+    <View style={styles.gradient}>
+      {withBackground}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  gradient: {
+    flex: 1,
+  },
+  backgroundImage: {
+    flex: 1,
+  },
+  safeArea: {
+    flex: 1,
+  },
+});

package/lib/index.js

@@ -3,8 +3,9 @@ export { default as Modal } from './components/Modal';
 export { default as Badge } from './components/Badge';
 export { default as Card } from './components/Card';
 export { default as IconButton } from './components/IconButton';
+export { default as Screen } from './components/Screen';
 export { default as Subtitle } from './components/Subtitle';
-export { default as Title } from './components/Title';
+export { default as Heading } from './components/Heading';
 export { default as FadeView } from './components/animations/FadeView';
 export { default as SlideView } from './components/animations/SlideView';
 export { default as ShakeView } from './components/animations/ShakeView';

package/package.json

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

package/lib/components/Title/index.js

@@ -1,12 +0,0 @@
-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>
-  );
-}