create-rn-folder-structure 1.0.2 → 1.0.3

package/generators/components-advanced.js

@@ -0,0 +1,221 @@
+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 generateAdvancedComponents(projectRoot) {
+  console.log("⚡ Creating Advanced UI Components...");
+
+  const base = "src/shared/components";
+
+  // ---------------------------------------------------------
+  // Toast Message
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Toast.tsx`,
+    `
+import React, { useEffect, useRef } from "react";
+import { Animated, Text, StyleSheet, Dimensions } from "react-native";
+
+interface Props {
+  message: string;
+  visible: boolean;
+  type?: "success" | "error" | "info";
+}
+
+const { width } = Dimensions.get("window");
+
+export default function Toast({ message, visible, type = "info" }: Props) {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start(() => {
+        setTimeout(() => {
+          Animated.timing(opacity, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+          }).start();
+        }, 1500);
+      });
+    }
+  }, [visible]);
+
+  return (
+    <Animated.View
+      style={[
+        styles.toast,
+        styles[type],
+        { opacity, transform: [{ translateY: opacity.interpolate({
+          inputRange: [0, 1],
+          outputRange: [40, 0],
+        }) }] },
+      ]}
+    >
+      <Text style={styles.text}>{message}</Text>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  toast: {
+    position: "absolute",
+    bottom: 50,
+    alignSelf: "center",
+    width: width * 0.8,
+    padding: 12,
+    borderRadius: 6,
+  },
+  text: { color: "#fff", fontWeight: "600", textAlign: "center" },
+  success: { backgroundColor: "green" },
+  error: { backgroundColor: "red" },
+  info: { backgroundColor: "blue" },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // Loader (simple spinner overlay)
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Loader.tsx`,
+    `
+import React from "react";
+import { View, ActivityIndicator, StyleSheet } from "react-native";
+
+export default function Loader({ visible }: { visible: boolean }) {
+  if (!visible) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <ActivityIndicator size="large" color="#fff" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    zIndex: 1000,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // Skeleton / Shimmer Loader
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/SkeletonLoader.tsx`,
+    `
+import React, { useEffect, useRef } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+
+interface Props {
+  height?: number;
+  width?: number | string;
+  radius?: number;
+}
+
+export default function SkeletonLoader({
+  height = 20,
+  width = "100%",
+  radius = 6,
+}: Props) {
+  const shimmer = useRef(new Animated.Value(0.3)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmer, {
+          toValue: 1,
+          duration: 800,
+          useNativeDriver: false,
+        }),
+        Animated.timing(shimmer, {
+          toValue: 0.3,
+          duration: 800,
+          useNativeDriver: false,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <Animated.View
+      style={[
+        styles.box,
+        { height, width, borderRadius: radius, opacity: shimmer },
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    backgroundColor: "#e0e0e0",
+    marginVertical: 6,
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // Progress Bar
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/ProgressBar.tsx`,
+    `
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+interface Props {
+  progress: number; // 0 to 1
+}
+
+export default function ProgressBar({ progress }: Props) {
+  return (
+    <View style={styles.container}>
+      <View style={[styles.bar, { width: \`\${progress * 100}%\` }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 12,
+    backgroundColor: "#eee",
+    borderRadius: 6,
+    overflow: "hidden",
+    marginVertical: 6,
+  },
+  bar: {
+    height: "100%",
+    backgroundColor: "#007AFF",
+  },
+});
+`
+  );
+
+  console.log("✅ Advanced Components Created!");
+};

package/generators/components-basic.js

@@ -0,0 +1,243 @@
+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 generateBasicComponents(projectRoot) {
+  console.log("🎨 Creating Basic UI Components...");
+
+  const base = "src/shared/components";
+
+  // ---------------------------------------------------------
+  // Button
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Button.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator } from "react-native";
+
+interface Props {
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export default function Button({ title, onPress, disabled, loading }: Props) {
+  return (
+    <TouchableOpacity
+      style={[styles.button, disabled && styles.disabled]}
+      onPress={onPress}
+      disabled={disabled || loading}
+    >
+      {loading ? (
+        <ActivityIndicator color="#fff" />
+      ) : (
+        <Text style={styles.text}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#007AFF",
+    paddingVertical: 12,
+    paddingHorizontal: 18,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  disabled: { opacity: 0.6 },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // Card
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Card.tsx`,
+    `
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+export default function Card({ children }: any) {
+  return <View style={styles.card}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#fff",
+    padding: 15,
+    borderRadius: 10,
+    marginVertical: 8,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3,
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // TextInput
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/TextInput.tsx`,
+    `
+import React from "react";
+import { TextInput as RNInput, StyleSheet } from "react-native";
+
+export default function TextInput({ style, ...rest }: any) {
+  return <RNInput style={[styles.input, style]} {...rest} />;
+}
+
+const styles = StyleSheet.create({
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    padding: 12,
+    borderRadius: 8,
+    fontSize: 16,
+    marginVertical: 6,
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // LineSeparator
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/LineSeparator.tsx`,
+    `
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+export default function LineSeparator() {
+  return <View style={styles.line} />;
+}
+
+const styles = StyleSheet.create({
+  line: {
+    height: 1,
+    backgroundColor: "#ddd",
+    marginVertical: 10,
+  },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // Switch
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Switch.tsx`,
+    `
+import React from "react";
+import { Switch as RNSwitch } from "react-native";
+
+export default function Switch({ value, onValueChange }: any) {
+  return <RNSwitch value={value} onValueChange={onValueChange} />;
+}
+`
+  );
+
+  // ---------------------------------------------------------
+  // Radio Button
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/RadioButton.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
+
+interface Props {
+  selected: boolean;
+  label: string;
+  onPress: () => void;
+}
+
+export default function RadioButton({ selected, label, onPress }: Props) {
+  return (
+    <TouchableOpacity style={styles.row} onPress={onPress}>
+      <View style={[styles.circle, selected && styles.active]} />
+      <Text>{label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", marginVertical: 8 },
+  circle: {
+    height: 20,
+    width: 20,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: "#007AFF",
+    marginRight: 10,
+  },
+  active: { backgroundColor: "#007AFF" },
+});
+`
+  );
+
+  // ---------------------------------------------------------
+  // Checkbox
+  // ---------------------------------------------------------
+  write(
+    projectRoot,
+    `${base}/Checkbox.tsx`,
+    `
+import React from "react";
+import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
+
+interface Props {
+  label: string;
+  checked: boolean;
+  onPress: () => void;
+}
+
+export default function Checkbox({ label, checked, onPress }: Props) {
+  return (
+    <TouchableOpacity style={styles.row} onPress={onPress}>
+      <View style={[styles.box, checked && styles.checked]} />
+      <Text>{label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", marginVertical: 8 },
+  box: {
+    width: 22,
+    height: 22,
+    borderWidth: 2,
+    borderColor: "#007AFF",
+    marginRight: 10,
+  },
+  checked: { backgroundColor: "#007AFF" },
+});
+`
+  );
+
+  console.log("✅ Basic UI Components Created!");
+};