Create app.py

app.py

@@ -0,0 +1,538 @@
+import streamlit as st
+import random
+from typing import List, Dict
+
+# Sample React Native and TypeScript components
+samples: List[Dict[str, str]] = [
+    {
+        "name": "Basic Button",
+        "emoji": "🔘",
+        "code": """
+import React from 'react';
+import { Button } from 'react-native';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+}
+
+const BasicButton: React.FC<ButtonProps> = ({ title, onPress }) => (
+  <Button title={title} onPress={onPress} />
+);
+
+export default BasicButton;
+"""
+    },
+    {
+        "name": "Text Input",
+        "emoji": "📝",
+        "code": """
+import React, { useState } from 'react';
+import { TextInput, StyleSheet } from 'react-native';
+
+interface TextInputProps {
+  placeholder: string;
+}
+
+const CustomTextInput: React.FC<TextInputProps> = ({ placeholder }) => {
+  const [text, setText] = useState('');
+
+  return (
+    <TextInput
+      style={styles.input}
+      onChangeText={setText}
+      value={text}
+      placeholder={placeholder}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    borderColor: 'gray',
+    borderWidth: 1,
+    padding: 10,
+  },
+});
+
+export default CustomTextInput;
+"""
+    },
+    {
+        "name": "List View",
+        "emoji": "📋",
+        "code": """
+import React from 'react';
+import { FlatList, Text, View, StyleSheet } from 'react-native';
+
+interface Item {
+  id: string;
+  title: string;
+}
+
+interface ListViewProps {
+  data: Item[];
+}
+
+const ListView: React.FC<ListViewProps> = ({ data }) => (
+  <FlatList
+    data={data}
+    renderItem={({ item }) => (
+      <View style={styles.item}>
+        <Text>{item.title}</Text>
+      </View>
+    )}
+    keyExtractor={item => item.id}
+  />
+);
+
+const styles = StyleSheet.create({
+  item: {
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+  },
+});
+
+export default ListView;
+"""
+    },
+    {
+        "name": "Toggle Switch",
+        "emoji": "🔛",
+        "code": """
+import React, { useState } from 'react';
+import { Switch, View, Text, StyleSheet } from 'react-native';
+
+interface ToggleSwitchProps {
+  label: string;
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ label }) => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <View style={styles.container}>
+      <Text>{label}</Text>
+      <Switch
+        trackColor={{ false: "#767577", true: "#81b0ff" }}
+        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
+        onValueChange={toggleSwitch}
+        value={isEnabled}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default ToggleSwitch;
+"""
+    },
+    {
+        "name": "Card Component",
+        "emoji": "🃏",
+        "code": """
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface CardProps {
+  title: string;
+  content: string;
+}
+
+const Card: React.FC<CardProps> = ({ title, content }) => (
+  <View style={styles.card}>
+    <Text style={styles.title}>{title}</Text>
+    <Text style={styles.content}>{content}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: 'white',
+    borderRadius: 8,
+    padding: 16,
+    margin: 8,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  content: {
+    fontSize: 14,
+  },
+});
+
+export default Card;
+"""
+    },
+    {
+        "name": "Modal Dialog",
+        "emoji": "💬",
+        "code": """
+import React, { useState } from 'react';
+import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
+
+interface ModalDialogProps {
+  title: string;
+  content: string;
+}
+
+const ModalDialog: React.FC<ModalDialogProps> = ({ title, content }) => {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  return (
+    <View>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={modalVisible}
+        onRequestClose={() => setModalVisible(!modalVisible)}
+      >
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>
+            <Text style={styles.modalText}>{title}</Text>
+            <Text>{content}</Text>
+            <Pressable
+              style={[styles.button, styles.buttonClose]}
+              onPress={() => setModalVisible(!modalVisible)}
+            >
+              <Text style={styles.textStyle}>Close</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+      <Pressable
+        style={[styles.button, styles.buttonOpen]}
+        onPress={() => setModalVisible(true)}
+      >
+        <Text style={styles.textStyle}>Show Modal</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2
+  },
+  buttonOpen: {
+    backgroundColor: "#F194FF",
+  },
+  buttonClose: {
+    backgroundColor: "#2196F3",
+  },
+  textStyle: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center"
+  }
+});
+
+export default ModalDialog;
+"""
+    },
+    {
+        "name": "Navigation Menu",
+        "emoji": "🧭",
+        "code": """
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+interface MenuItem {
+  label: string;
+  onPress: () => void;
+}
+
+interface NavigationMenuProps {
+  items: MenuItem[];
+}
+
+const NavigationMenu: React.FC<NavigationMenuProps> = ({ items }) => (
+  <View style={styles.container}>
+    {items.map((item, index) => (
+      <TouchableOpacity key={index} style={styles.menuItem} onPress={item.onPress}>
+        <Text style={styles.menuText}>{item.label}</Text>
+      </TouchableOpacity>
+    ))}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    backgroundColor: '#f0f0f0',
+    height: 60,
+  },
+  menuItem: {
+    padding: 10,
+  },
+  menuText: {
+    fontSize: 16,
+  },
+});
+
+export default NavigationMenu;
+"""
+    },
+    {
+        "name": "Image Carousel",
+        "emoji": "🖼️",
+        "code": """
+import React, { useState } from 'react';
+import { View, Image, StyleSheet, Dimensions } from 'react-native';
+import Carousel from 'react-native-snap-carousel';
+
+interface CarouselItem {
+  id: string;
+  imageUrl: string;
+}
+
+interface ImageCarouselProps {
+  data: CarouselItem[];
+}
+
+const ImageCarousel: React.FC<ImageCarouselProps> = ({ data }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const windowWidth = Dimensions.get('window').width;
+
+  const renderItem = ({ item }: { item: CarouselItem }) => (
+    <View style={styles.slide}>
+      <Image
+        source={{ uri: item.imageUrl }}
+        style={styles.image}
+      />
+    </View>
+  );
+
+  return (
+    <Carousel
+      data={data}
+      renderItem={renderItem}
+      sliderWidth={windowWidth}
+      itemWidth={windowWidth - 60}
+      onSnapToItem={index => setActiveIndex(index)}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  slide: {
+    width: '100%',
+    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+    borderRadius: 8,
+  },
+});
+
+export default ImageCarousel;
+"""
+    },
+    {
+        "name": "Form Validation",
+        "emoji": "✅",
+        "code": """
+import React, { useState } from 'react';
+import { View, TextInput, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+interface FormData {
+  email: string;
+  password: string;
+}
+
+const FormValidation: React.FC = () => {
+  const [formData, setFormData] = useState<FormData>({ email: '', password: '' });
+  const [errors, setErrors] = useState<Partial<FormData>>({});
+
+  const validateForm = (): boolean => {
+    let newErrors: Partial<FormData> = {};
+    if (!formData.email) newErrors.email = 'Email is required';
+    if (!formData.password) newErrors.password = 'Password is required';
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = () => {
+    if (validateForm()) {
+      console.log('Form submitted:', formData);
+    } else {
+      console.log('Form has errors');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={styles.input}
+        placeholder="Email"
+        value={formData.email}
+        onChangeText={(text) => setFormData({ ...formData, email: text })}
+      />
+      {errors.email && <Text style={styles.errorText}>{errors.email}</Text>}
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        secureTextEntry
+        value={formData.password}
+        onChangeText={(text) => setFormData({ ...formData, password: text })}
+      />
+      {errors.password && <Text style={styles.errorText}>{errors.password}</Text>}
+      <TouchableOpacity style={styles.button} onPress={handleSubmit}>
+        <Text style={styles.buttonText}>Submit</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  input: {
+    height: 40,
+    borderColor: 'gray',
+    borderWidth: 1,
+    marginBottom: 10,
+    paddingHorizontal: 10,
+  },
+  errorText: {
+    color: 'red',
+    marginBottom: 10,
+  },
+  button: {
+    backgroundColor: 'blue',
+    padding: 10,
+    borderRadius: 5,
+  },
+  buttonText: {
+    color: 'white',
+    textAlign: 'center',
+  },
+});
+
+export default FormValidation;
+"""
+    },
+    {
+        "name": "Custom Hook",
+        "emoji": "🎣",
+        "code": """
+import { useState, useEffect } from 'react';
+
+interface UseFetchResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+function useFetch<T>(url: string): UseFetchResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        setData(result);
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error('An unknown error occurred'));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [url]);
+
+  return { data, loading, error };
+}
+
+export default useFetch;
+
+// Usage example:
+// const { data, loading, error } = useFetch<YourDataType>('https://api.example.com/data');
+"""
+    },
+]
+
+def main():
+    st.title("React and TypeScript Mobile UI Generator 📱")
+    
+    st.sidebar.header("UI Components 🧩")
+    selected_component = st.sidebar.selectbox(
+        "Choose a component:",
+        [f"{sample['emoji']} {sample['name']}" for sample in samples]
+    )
+    
+    selected_index = [f"{sample['emoji']} {sample['name']}" for sample in samples].index(selected_component)
+    
+    st.header(f"{samples[selected_index]['emoji']} {samples[selected_index]['name']}")
+    
+    st.code(samples[selected_index]['code'], language='typescript')
+    
+    st.subheader("Component Preview 👀")
+    st.warning("This is a placeholder for the component preview. In a full implementation, this would render a visual representation of the component.")
+    
+    st.subheader("Customization Options 🛠️")
+    st.info("Here you can add customization options for the selected component. For example, color pickers, sliders for sizes, text inputs for labels, etc.")
+    
+    if st.button("Generate Component