@popp0102/nova 0.10.0 → 0.11.0

package/lib/components/Button/config.js

@@ -76,4 +76,7 @@ export const styles = StyleSheet.create({
   pressed: {
     opacity: 0.5,
   },
+  disabled: {
+    opacity: 0.5,
+  },
 });

package/lib/components/Button/index.js

@@ -11,7 +11,8 @@ export default function Button({
   style,
   onPress,
   children,
-  icon
+  icon,
+  disabled = false
 }) {
   const buttonColors = colors[type];
   const buttonSizes = sizes[size];
@@ -59,8 +60,15 @@ export default function Button({
 
   return (
     <Pressable
-      onPress={onPress}
-      style={({ pressed }) => [styles.button, backgroundStyle, pressed && styles.pressed, style]}
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.button,
+        backgroundStyle,
+        pressed && !disabled && styles.pressed,
+        disabled && styles.disabled,
+        style
+      ]}
     >
       {isGradient ? (
         <LinearGradient colors={color} style={{ padding: buttonSizes.padding }}>

package/lib/components/Form/config.js

@@ -0,0 +1,81 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: 16,
+  },
+  description: {
+    textAlign: 'center',
+    marginBottom: 16,
+    fontSize: 16,
+  },
+  inputContainerHorizontal: {
+    width: "100%",
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 24,
+    paddingBottom: 8,
+  },
+  inputContainerVertical: {
+    width: "100%",
+    flexDirection: 'column',
+    gap: 4,
+    marginBottom: 24,
+    paddingBottom: 8,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#333',
+  },
+  labelHorizontal: {
+    minWidth: 80,
+  },
+  required: {
+    color: '#dc3545',
+    marginLeft: 4,
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 6,
+    backgroundColor: "#fff",
+    color: "#000",
+    width: '100%',
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    minHeight: 50,
+  },
+  textArea: {
+    minHeight: 100,
+    paddingTop: 14,
+  },
+  inputError: {
+    borderColor: "#dc3545",
+    borderWidth: 2,
+  },
+  inputHorizontal: {
+    flex: 1,
+  },
+  errorText: {
+    color: "#dc3545",
+    fontSize: 14,
+    marginTop: 4,
+  },
+  title: {
+    marginBottom: 16,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    width: '100%',
+    marginTop: 4,
+  },
+  submitButton: {
+    minWidth: 100,
+  },
+});

package/lib/components/Form/index.js

@@ -0,0 +1,117 @@
+import { Text, TextInput, View } from 'react-native';
+import Card from '../Card';
+import Heading from '../Heading';
+import Button from '../Button';
+import { styles } from './config';
+
+export default function Form({ children, style }) {
+  return (
+    <Card style={[styles.card, style]}>
+      {children}
+    </Card>
+  );
+}
+
+Form.Title = function FormTitle({ children, ...props }) {
+  return (
+    <View style={styles.title}>
+      <Heading size="h3" {...props}>{children}</Heading>
+    </View>
+  );
+};
+
+Form.Description = function FormDescription({ children, style }) {
+  return <Text style={[styles.description, style]}>{children}</Text>;
+};
+
+Form.TextInput = function FormTextInput({ label, labelPosition = 'vertical', labelStyle: customLabelStyle, style, placeholderTextColor = '#999', value, onChangeText, keyboardType = 'default', error, required, ...props }) {
+  const isHorizontal = labelPosition === 'horizontal';
+  const containerStyle = isHorizontal ? styles.inputContainerHorizontal : styles.inputContainerVertical;
+  const labelStyle = isHorizontal ? [styles.label, styles.labelHorizontal, customLabelStyle] : [styles.label, customLabelStyle];
+  const inputStyle = isHorizontal ? [styles.input, styles.inputHorizontal] : styles.input;
+  const hasError = error && error.length > 0;
+  const wrapperStyle = isHorizontal ? { flex: 1 } : { width: '100%' };
+
+  const inputField = (
+    <View style={wrapperStyle}>
+      <TextInput
+        style={[inputStyle, hasError && styles.inputError, style]}
+        placeholderTextColor={placeholderTextColor}
+        value={value}
+        onChangeText={onChangeText}
+        keyboardType={keyboardType}
+        {...props}
+      />
+      {hasError && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  );
+
+  if (!label) {
+    return (
+      <View style={{ width: '100%', marginBottom: 16 }}>
+        {inputField}
+      </View>
+    );
+  }
+
+  return (
+    <View style={containerStyle}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Text style={labelStyle}>{label}</Text>
+        <Text style={[styles.required, !required && { opacity: 0 }]}>*</Text>
+      </View>
+      {inputField}
+    </View>
+  );
+};
+
+Form.TextArea = function FormTextArea({ label, labelPosition = 'vertical', style, placeholderTextColor = '#999', value, onChangeText, error, required, ...props }) {
+  const isHorizontal = labelPosition === 'horizontal';
+  const containerStyle = isHorizontal ? styles.inputContainerHorizontal : styles.inputContainerVertical;
+  const labelStyle = isHorizontal ? [styles.label, styles.labelHorizontal] : styles.label;
+  const inputStyle = isHorizontal ? [styles.input, styles.inputHorizontal] : styles.input;
+  const hasError = error && error.length > 0;
+  const wrapperStyle = isHorizontal ? { flex: 1 } : { width: '100%' };
+
+  const inputField = (
+    <View style={wrapperStyle}>
+      <TextInput
+        style={[inputStyle, styles.textArea, hasError && styles.inputError, style]}
+        placeholderTextColor={placeholderTextColor}
+        value={value}
+        onChangeText={onChangeText}
+        multiline
+        numberOfLines={4}
+        textAlignVertical="top"
+        {...props}
+      />
+      {hasError && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  );
+
+  if (!label) {
+    return (
+      <View style={{ width: '100%', marginBottom: 16 }}>
+        {inputField}
+      </View>
+    );
+  }
+
+  return (
+    <View style={containerStyle}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Text style={labelStyle}>{label}</Text>
+        <Text style={[styles.required, !required && { opacity: 0 }]}>*</Text>
+      </View>
+      {inputField}
+    </View>
+  );
+};
+
+Form.SubmitButton = function FormSubmitButton({ children, icon, disabled, style, ...props }) {
+  return (
+    <View style={styles.buttonContainer}>
+      <Button icon={icon} disabled={disabled} style={[styles.submitButton, style]} {...props}>{children}</Button>
+    </View>
+  );
+};

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

@@ -17,7 +17,7 @@ export default function FadeView({ children, direction = directions.IN, duration
       duration,
       useNativeDriver: true
     }).start();
-  }, []);
+  }, [direction, duration, fadeAnimationValue]);
 
   return (
     <Animated.View style={[style, { opacity: fadeAnimationValue }]}>

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

@@ -39,7 +39,7 @@ export default function ShakeView({
 
       Animated.sequence(shakeSequence).start();
     }
-  }, [shake, duration, distance, intensity]);
+  }, [shake, duration, distance, intensity, shakeAnim]);
 
   return (
     <Animated.View style={[style, { transform: [{ translateX: shakeAnim }] }]}>

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

@@ -30,17 +30,13 @@ export default function SlideView({ children, direction = directions.LEFT, durat
 
   const slideAnimationValue = useRef(new Animated.Value(initialValue)).current;
 
-  const slideIn = () => {
+  useEffect(() => {
     Animated.timing(slideAnimationValue, {
       toValue: 0,
       duration: duration,
       useNativeDriver: true,
     }).start();
-  };
-
-  useEffect(() => {
-    slideIn();
-  }, []);
+  }, [slideAnimationValue, duration]);
 
   return (
     <Animated.View style={[style, { transform: [{ [transformProperty]: slideAnimationValue }] }]}>

package/lib/index.js

@@ -7,6 +7,7 @@ export { default as Screen } from './components/Screen';
 export { default as ScreenHeader } from './components/ScreenHeader';
 export { default as Subtitle } from './components/Subtitle';
 export { default as Heading } from './components/Heading';
+export { default as Form } from './components/Form';
 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.10.0",
+  "version": "0.11.0",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",