create-rn-folder-structure 1.0.2 → 1.0.4

package/generators/components.js

@@ -0,0 +1,659 @@
+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 generateComponents(projectRoot) {
+  console.log("🎨 Creating Shared UI Components...");
+
+  const base = "src/shared/components";
+
+  // -----------------------------------------------------
+  // BUTTON
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Button.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet } from "react-native";
+
+export default function Button({ title, onPress, style = {}, textStyle = {} }) {
+  return (
+    <TouchableOpacity style={[styles.button, style]} onPress={onPress}>
+      <Text style={[styles.text, textStyle]}>{title}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#1e90ff",
+    padding: 14,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  text: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // CARD
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Card.tsx`,
+    `
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+export default function Card({ children, style = {} }) {
+  return <View style={[styles.card, style]}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderRadius: 10,
+    backgroundColor: "#fff",
+    elevation: 4,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // RADIO BUTTON
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/RadioButton.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, View, StyleSheet } from "react-native";
+
+export default function RadioButton({ selected, onPress }) {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.outer}>
+      {selected && <View style={styles.inner} />}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 2,
+    borderColor: "#1e90ff",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  inner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: "#1e90ff",
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // SWITCH (Simple)
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Switch.tsx`,
+    `
+import React from "react";
+import { Pressable, View, StyleSheet } from "react-native";
+
+export default function Switch({ value, onToggle }) {
+  return (
+    <Pressable onPress={onToggle} style={[styles.container, value && styles.active]}>
+      <View style={[styles.circle, value && styles.circleActive]} />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 50,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "#ccc",
+    justifyContent: "center",
+  },
+  active: {
+    backgroundColor: "#1e90ff",
+  },
+  circle: {
+    width: 20,
+    height: 20,
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    marginLeft: 4,
+  },
+  circleActive: {
+    marginLeft: 26,
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // MODAL
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Modal.tsx`,
+    `
+import React from "react";
+import { Modal, View, StyleSheet } from "react-native";
+
+export default function CustomModal({ visible, children }) {
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <View style={styles.center}>
+        <View style={styles.box}>{children}</View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.4)",
+  },
+  box: {
+    width: "80%",
+    padding: 20,
+    backgroundColor: "#fff",
+    borderRadius: 10,
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // LINE SEPARATOR
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/LineSeparator.tsx`,
+    `
+import React from "react";
+import { View } from "react-native";
+
+export default function LineSeparator() {
+  return <View style={{ height: 1, backgroundColor: "#ddd", marginVertical: 10 }} />;
+}
+`
+  );
+
+  // -----------------------------------------------------
+  // TEXT INPUT
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/TextInput.tsx`,
+    `
+import React from "react";
+import { TextInput as RNInput, StyleSheet } from "react-native";
+
+export default function TextInput({ style = {}, ...rest }) {
+  return <RNInput style={[styles.input, style]} {...rest} />;
+}
+
+const styles = StyleSheet.create({
+  input: {
+    borderWidth: 1,
+    borderColor: "#bbb",
+    padding: 12,
+    borderRadius: 8,
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // CHECKBOX
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Checkbox.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, View, StyleSheet } from "react-native";
+
+export default function Checkbox({ checked, onPress }) {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.box}>
+      {checked && <View style={styles.inner} />}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    width: 22,
+    height: 22,
+    borderWidth: 2,
+    borderColor: "#1e90ff",
+    borderRadius: 4,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  inner: {
+    width: 12,
+    height: 12,
+    backgroundColor: "#1e90ff",
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // DROPDOWN (Basic)
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Dropdown.tsx`,
+    `
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+
+export default function Dropdown({ options = [], selected, onSelect }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.box} onPress={() => setOpen(!open)}>
+        <Text>{selected || "Select option"}</Text>
+      </TouchableOpacity>
+
+      {open &&
+        options.map((opt) => (
+          <TouchableOpacity
+            key={opt}
+            style={styles.option}
+            onPress={() => {
+              onSelect(opt);
+              setOpen(false);
+            }}
+          >
+            <Text>{opt}</Text>
+          </TouchableOpacity>
+        ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  box: {
+    padding: 12,
+    borderWidth: 1,
+    borderColor: "#bbb",
+    borderRadius: 8,
+  },
+  option: {
+    padding: 12,
+    backgroundColor: "#eee",
+    borderBottomWidth: 1,
+    borderColor: "#ccc",
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // SEARCH BAR
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/SearchBar.tsx`,
+    `
+import React from "react";
+import { TextInput, StyleSheet } from "react-native";
+
+export default function SearchBar({ ...props }) {
+  return <TextInput style={styles.input} placeholder="Search..." {...props} />;
+}
+
+const styles = StyleSheet.create({
+  input: {
+    backgroundColor: "#f0f0f0",
+    padding: 12,
+    borderRadius: 8,
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // FLATLIST CARD
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/FlatListCard.tsx`,
+    `
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+export default function FlatListCard({ title, subtitle }) {
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>{title}</Text>
+      {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderColor: "#ddd",
+  },
+  title: { fontSize: 16, fontWeight: "600" },
+  subtitle: { color: "#666", marginTop: 4 },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // ALERT MESSAGE
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/AlertMessage.tsx`,
+    `
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+export default function AlertMessage({ message, type = "error" }) {
+  return (
+    <View style={[styles.alert, type === "success" && styles.success]}>
+      <Text style={styles.text}>{message}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  alert: {
+    padding: 12,
+    backgroundColor: "#ffcccc",
+    borderLeftWidth: 4,
+    borderColor: "red",
+    marginVertical: 8,
+  },
+  success: {
+    backgroundColor: "#ccffcc",
+    borderColor: "green",
+  },
+  text: { color: "#333" },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // TOAST MESSAGE
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Toast.tsx`,
+    `
+import React, { useEffect, useState } from "react";
+import { View, Text, StyleSheet, Animated } from "react-native";
+
+export default function Toast({ message, visible }) {
+  const [fade] = useState(new Animated.Value(0));
+
+  useEffect(() => {
+    if (visible) {
+      Animated.timing(fade, { toValue: 1, duration: 200, useNativeDriver: true }).start();
+      setTimeout(() => {
+        Animated.timing(fade, { toValue: 0, duration: 200, useNativeDriver: true }).start();
+      }, 2000);
+    }
+  }, [visible]);
+
+  if (!visible) return null;
+
+  return (
+    <Animated.View style={[styles.toast, { opacity: fade }]}>
+      <Text style={styles.text}>{message}</Text>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  toast: {
+    position: "absolute",
+    bottom: 40,
+    alignSelf: "center",
+    backgroundColor: "#333",
+    padding: 12,
+    borderRadius: 8,
+  },
+  text: { color: "#fff" },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // SIMPLE LOADER
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Loader.tsx`,
+    `
+import React from "react";
+import { ActivityIndicator, View } from "react-native";
+
+export default function Loader() {
+  return (
+    <View style={{ padding: 20 }}>
+      <ActivityIndicator size="large" />
+    </View>
+  );
+}
+`
+  );
+
+  // -----------------------------------------------------
+  // SHIMMER LOADER
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Shimmer.tsx`,
+    `
+import React, { useRef, useEffect } from "react";
+import { View, Animated, StyleSheet } from "react-native";
+
+export default function Shimmer({ width = "100%", height = 20 }) {
+  const shimmer = useRef(new Animated.Value(-1)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(shimmer, {
+        toValue: 1,
+        duration: 1000,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  return (
+    <View style={[styles.container, { width, height }]}>
+      <Animated.View
+        style={[
+          styles.shimmer,
+          {
+            transform: [
+              {
+                translateX: shimmer.interpolate({
+                  inputRange: [-1, 1],
+                  outputRange: [-200, 200],
+                }),
+              },
+            ],
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#e0e0e0",
+    overflow: "hidden",
+    borderRadius: 6,
+  },
+  shimmer: {
+    width: "40%",
+    height: "100%",
+    backgroundColor: "#ccc",
+    opacity: 0.6,
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // PROGRESS BAR
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/ProgressBar.tsx`,
+    `
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+export default function ProgressBar({ progress = 0 }) {
+  return (
+    <View style={styles.container}>
+      <View style={[styles.bar, { width: \`\${progress}%\` }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 10,
+    borderRadius: 5,
+    overflow: "hidden",
+    backgroundColor: "#ddd",
+  },
+  bar: {
+    height: "100%",
+    backgroundColor: "#1e90ff",
+  },
+});
+`
+  );
+
+  // -----------------------------------------------------
+  // FILE UPLOAD (DocumentPicker)
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/FileUpload.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, Text } from "react-native";
+import DocumentPicker from "react-native-document-picker";
+
+export default function FileUpload({ onSelect }) {
+  const pick = async () => {
+    try {
+      const res = await DocumentPicker.pickSingle();
+      onSelect(res);
+    } catch {}
+  };
+
+  return (
+    <TouchableOpacity onPress={pick} style={{ padding: 12, backgroundColor: "#eee" }}>
+      <Text>Select File</Text>
+    </TouchableOpacity>
+  );
+}
+`
+  );
+
+  // -----------------------------------------------------
+  // IMAGE UPLOAD
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/ImageUpload.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, Text } from "react-native";
+import { launchImageLibrary } from "react-native-image-picker";
+
+export default function ImageUpload({ onSelect }) {
+  const pick = async () => {
+    const result = await launchImageLibrary({ mediaType: "photo" });
+    if (result.assets && result.assets.length > 0) {
+      onSelect(result.assets[0]);
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={pick} style={{ padding: 12, backgroundColor: "#eee" }}>
+      <Text>Select Image</Text>
+    </TouchableOpacity>
+  );
+}
+`
+  );
+
+  // -----------------------------------------------------
+  // VIDEO UPLOAD
+  // -----------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/VideoUpload.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, Text } from "react-native";
+import { launchImageLibrary } from "react-native-image-picker";
+
+export default function VideoUpload({ onSelect }) {
+  const pick = async () => {
+    const result = await launchImageLibrary({ mediaType: "video" });
+    if (result.assets && result.assets.length > 0) {
+      onSelect(result.assets[0]);
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={pick} style={{ padding: 12, backgroundColor: "#eee" }}>
+      <Text>Select Video</Text>
+    </TouchableOpacity>
+  );
+}
+`
+  );
+
+  console.log("✅ Shared UI Components Created Successfully!");
+};

package/generators/constants.js

@@ -0,0 +1,54 @@
+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 generateConstants(projectRoot) {
+  console.log("🔧 Creating constants...");
+
+  const base = "src/shared/constants";
+
+  write(
+    projectRoot,
+    `${base}/colors.ts`,
+    `
+export const Colors = {
+  primary: "#007AFF",
+  secondary: "#FF9500",
+  danger: "#FF3B30",
+  success: "#34C759",
+  background: "#F2F2F7",
+};
+`
+  );
+
+  write(
+    projectRoot,
+    `${base}/fonts.ts`,
+    `
+export const Fonts = {
+  regular: "System",
+  medium: "System-Medium",
+  bold: "System-Bold"
+}
+`
+  );
+
+  write(
+    projectRoot,
+    `${base}/sizes.ts`,
+    `
+export const Sizes = {
+  padding: 16,
+  radius: 8,
+  margin: 12,
+};
+`
+  );
+
+  console.log("✅ Constants created successfully!");
+};