create-rn-folder-structure 1.0.2 → 1.0.3

package/generators/components-intermediate.js

@@ -0,0 +1,290 @@
+const fs = require("fs");
+const path = require("path");
+
+function write(root, filePath, content) {
+  const fullPath = path.join(root, filePath);
+  fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+  fs.writeFileSync(fullPath, content);
+}
+
+module.exports = function generateIntermediateComponents(projectRoot) {
+  console.log("🧩 Creating Intermediate UI Components...");
+
+  const base = "src/shared/components";
+
+  // ---------------------------------------------------------
+  // Modal Component
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/AppModal.tsx`,
+    `
+import React from "react";
+import { Modal, View, StyleSheet, TouchableOpacity, Text } from "react-native";
+
+interface Props {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: any;
+}
+
+export default function AppModal({ visible, onClose, title, children }: Props) {
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <View style={styles.overlay}>
+        <View style={styles.box}>
+          {title && <Text style={styles.title}>{title}</Text>}
+          {children}
+          <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
+            <Text style={styles.closeText}>Close</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  box: {
+    backgroundColor: "#fff",
+    width: "85%",
+    padding: 20,
+    borderRadius: 10,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 10,
+  },
+  closeBtn: {
+    marginTop: 10,
+    backgroundColor: "#007AFF",
+    paddingVertical: 10,
+    borderRadius: 6,
+  },
+  closeText: {
+    textAlign: "center",
+    color: "#fff",
+    fontWeight: "600",
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // Dropdown (simple custom)
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Dropdown.tsx`,
+    `
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  FlatList,
+} from "react-native";
+
+interface Item {
+  label: string;
+  value: any;
+}
+
+interface Props {
+  data: Item[];
+  onSelect: (value: any) => void;
+  placeholder?: string;
+}
+
+export default function Dropdown({ data, onSelect, placeholder }: Props) {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState("");
+
+  const handleSelect = (item: Item) => {
+    setSelected(item.label);
+    onSelect(item.value);
+    setOpen(false);
+  };
+
+  return (
+    <View>
+      <TouchableOpacity style={styles.box} onPress={() => setOpen(!open)}>
+        <Text style={styles.text}>
+          {selected || placeholder || "Select"}
+        </Text>
+      </TouchableOpacity>
+
+      {open && (
+        <View style={styles.dropdown}>
+          <FlatList
+            data={data}
+            keyExtractor={(item) => item.value.toString()}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={styles.item}
+                onPress={() => handleSelect(item)}
+              >
+                <Text>{item.label}</Text>
+              </TouchableOpacity>
+            )}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    padding: 12,
+    borderRadius: 8,
+    marginVertical: 6,
+  },
+  text: { fontSize: 16 },
+  dropdown: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#ccc",
+    marginTop: 4,
+    borderRadius: 8,
+    maxHeight: 160,
+  },
+  item: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#eee",
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // SearchBar
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/SearchBar.tsx`,
+    `
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+
+export default function SearchBar({ value, onChangeText }: any) {
+  return (
+    <View style={styles.box}>
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder="Search..."
+        style={styles.input}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    marginVertical: 6,
+  },
+  input: {
+    fontSize: 16,
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // FlatListCard
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/FlatListCard.tsx`,
+    `
+import React from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  onPress?: () => void;
+}
+
+export default function FlatListCard({ title, subtitle, onPress }: Props) {
+  return (
+    <TouchableOpacity style={styles.card} onPress={onPress}>
+      <View>
+        <Text style={styles.title}>{title}</Text>
+        {subtitle && <Text style={styles.sub}>{subtitle}</Text>}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 15,
+    backgroundColor: "#fff",
+    marginVertical: 6,
+    borderRadius: 8,
+    elevation: 2,
+  },
+  title: { fontSize: 16, fontWeight: "600" },
+  sub: { color: "#666", marginTop: 4 },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // AlertMessage
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/AlertMessage.tsx`,
+    `
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+interface Props {
+  type?: "success" | "error" | "info";
+  message: string;
+}
+
+export default function AlertMessage({ type = "info", message }: Props) {
+  return (
+    <View style={[styles.box, styles[type]]}>
+      <Text style={styles.text}>{message}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    padding: 12,
+    borderRadius: 8,
+    marginVertical: 6,
+  },
+  text: { color: "#fff", fontWeight: "600" },
+  success: { backgroundColor: "green" },
+  error: { backgroundColor: "red" },
+  info: { backgroundColor: "blue" },
+});
+`
+  );
+
+  console.log("✅ Intermediate Components Created!");
+};

package/generators/components-upload.js

@@ -0,0 +1,181 @@
+const fs = require("fs");
+const path = require("path");
+
+function write(root, filePath, content) {
+  const fullPath = path.join(root, filePath);
+  fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+  fs.writeFileSync(fullPath, content);
+}
+
+module.exports = function generateUploadComponents(projectRoot) {
+  console.log("📤 Creating Upload Components...");
+
+  const base = "src/shared/components";
+
+  // ---------------------------------------------------------
+  // 📄 File Upload
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/FileUpload.tsx`,
+    `
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import DocumentPicker from "react-native-document-picker";
+
+export default function FileUpload({ onSelect }: { onSelect: (file: any) => void }) {
+  const [fileName, setFileName] = useState("");
+
+  const pickFile = async () => {
+    try {
+      const res = await DocumentPicker.pickSingle({
+        type: [DocumentPicker.types.allFiles],
+      });
+      setFileName(res.name);
+      onSelect(res);
+    } catch (err) {
+      if (!DocumentPicker.isCancel(err)) console.log(err);
+    }
+  };
+
+  return (
+    <View>
+      <TouchableOpacity style={styles.btn} onPress={pickFile}>
+        <Text style={styles.btnText}>Select File</Text>
+      </TouchableOpacity>
+      {fileName ? <Text style={styles.label}>📄 {fileName}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: {
+    backgroundColor: "#007AFF",
+    padding: 10,
+    borderRadius: 6,
+    alignItems: "center",
+  },
+  btnText: { color: "#fff", fontWeight: "600" },
+  label: { marginTop: 8, fontSize: 14 },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // 🖼 Image Upload
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/ImageUpload.tsx`,
+    `
+import React, { useState } from "react";
+import { View, Text, Image, TouchableOpacity, StyleSheet } from "react-native";
+import { launchImageLibrary } from "react-native-image-picker";
+
+export default function ImageUpload({
+  onSelect,
+}: {
+  onSelect: (file: any) => void;
+}) {
+  const [image, setImage] = useState("");
+
+  const pickImage = () => {
+    launchImageLibrary({ mediaType: "photo" }, (res) => {
+      if (res.assets && res.assets.length > 0) {
+        const asset = res.assets[0];
+        setImage(asset.uri || "");
+        onSelect(asset);
+      }
+    });
+  };
+
+  return (
+    <View>
+      <TouchableOpacity style={styles.btn} onPress={pickImage}>
+        <Text style={styles.btnText}>Select Image</Text>
+      </TouchableOpacity>
+
+      {image ? <Image source={{ uri: image }} style={styles.preview} /> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: {
+    backgroundColor: "#007AFF",
+    padding: 10,
+    borderRadius: 6,
+    alignItems: "center",
+  },
+  btnText: { color: "#fff", fontWeight: "600" },
+  preview: {
+    width: 120,
+    height: 120,
+    borderRadius: 8,
+    marginTop: 10,
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // 🎥 Video Upload
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/VideoUpload.tsx`,
+    `
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
+import { launchImageLibrary } from "react-native-image-picker";
+
+export default function VideoUpload({
+  onSelect,
+}: {
+  onSelect: (file: any) => void;
+}) {
+  const [thumbnail, setThumbnail] = useState("");
+
+  const pickVideo = () => {
+    launchImageLibrary({ mediaType: "video" }, (res) => {
+      if (res.assets && res.assets.length > 0) {
+        const asset = res.assets[0];
+        setThumbnail(asset.uri || "");
+        onSelect(asset);
+      }
+    });
+  };
+
+  return (
+    <View>
+      <TouchableOpacity style={styles.btn} onPress={pickVideo}>
+        <Text style={styles.btnText}>Select Video</Text>
+      </TouchableOpacity>
+
+      {thumbnail ? (
+        <Image source={{ uri: thumbnail }} style={styles.thumbnail} />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: {
+    backgroundColor: "#007AFF",
+    padding: 10,
+    borderRadius: 6,
+    alignItems: "center",
+  },
+  btnText: { color: "#fff", fontWeight: "600" },
+  thumbnail: {
+    width: 140,
+    height: 100,
+    borderRadius: 8,
+    marginTop: 10,
+  },
+});
+`
+  );
+
+  console.log("✅ Upload Components Created!");
+};