vibefast-cli 1.2.1 → 1.3.1

package/recipes/0/apps/native/src/components/advanced-ui/timeline/demo.tsx

@@ -0,0 +1,445 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { SafeAreaView } from '@/components/ui';
+
+import { useThemeConfig } from '../../../lib/use-theme-config';
+import { Timeline } from './timeline-view';
+import type { TimelineItem } from './types';
+
+const ShippingDetailsComponent = () => {
+  const { colors } = useThemeConfig();
+  const styles = createDemoStyles(colors);
+  return (
+    <View style={styles.detailsCard}>
+      <Text style={styles.detailsTitle}>📦 Shipping Information</Text>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Carrier</Text>
+        <Text style={styles.detailsValue}>FedEx Express</Text>
+      </View>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Tracking ID</Text>
+        <Text style={styles.detailsValue}>1Z999AA1234567890</Text>
+      </View>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Est. Delivery</Text>
+        <Text style={styles.detailsValue}>May 10, 6:00 PM</Text>
+      </View>
+    </View>
+  );
+};
+
+const ProjectMilestoneComponent = () => {
+  const { colors } = useThemeConfig();
+  const styles = createDemoStyles(colors);
+  return (
+    <View style={styles.detailsCard}>
+      <Text style={styles.detailsTitle}>🎯 Milestone Details</Text>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Deliverables</Text>
+        <Text style={styles.detailsValue}>Design v2</Text>
+      </View>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Team Size</Text>
+        <Text style={styles.detailsValue}>5 Designers</Text>
+      </View>
+      <View style={styles.detailsRow}>
+        <Text style={styles.detailsLabel}>Budget</Text>
+        <Text style={styles.detailsValue}>$24,500</Text>
+      </View>
+    </View>
+  );
+};
+
+const DevelopmentStatusComponent = () => {
+  const { colors } = useThemeConfig();
+  const styles = createDemoStyles(colors);
+  return (
+    <View style={styles.detailsCard}>
+      <Text style={styles.detailsTitle}>⚡ Development Progress</Text>
+      <View style={styles.progressRow}>
+        <Text style={styles.progressLabel}>Frontend</Text>
+        <View style={styles.progressBar}>
+          <View style={[styles.progressFill, { width: '85%' }]} />
+        </View>
+        <Text style={styles.progressValue}>85%</Text>
+      </View>
+      <View style={styles.progressRow}>
+        <Text style={styles.progressLabel}>Backend</Text>
+        <View style={styles.progressBar}>
+          <View
+            style={[
+              styles.progressFill,
+              { width: '92%', backgroundColor: colors.success },
+            ]}
+          />
+        </View>
+        <Text style={styles.progressValue}>92%</Text>
+      </View>
+    </View>
+  );
+};
+
+const TimelineDemo = () => {
+  const { colors } = useThemeConfig();
+  const styles = createDemoStyles(colors);
+
+  const orderTimelineItems: TimelineItem[] = [
+    {
+      id: 1,
+      title: 'Order Placed',
+      description: "We've received your order and will begin processing it.",
+      timestamp: 'May 7, 10:23 AM',
+      icon: 'shopping-bag',
+      status: 'complete',
+      meta: 'Order #38492',
+    },
+    {
+      id: 2,
+      title: 'Order Confirmed',
+      description: 'Your order is confirmed and ready to ship.',
+      timestamp: 'May 7, 11:05 AM',
+      icon: 'check-circle',
+      status: 'complete',
+      meta: 'Ready for shipment',
+    },
+    {
+      id: 3,
+      title: 'Shipped',
+      description: 'The package has left our facility and is on its way.',
+      timestamp: 'May 8, 9:15 AM',
+      icon: 'package',
+      status: 'complete',
+      children: <ShippingDetailsComponent />,
+      childrenContainer: { marginTop: 0 },
+      meta: 'In Transit',
+    },
+    {
+      id: 4,
+      title: 'Delivered',
+      timestamp: 'Est. May 10, by 6:00 PM',
+      icon: 'home',
+      status: 'upcoming',
+      meta: 'Pending delivery',
+      description: 'Your order will be delivered to your doorstep.',
+    },
+  ];
+
+  const projectTimelineItems: TimelineItem[] = [
+    {
+      id: 1,
+      title: 'Project Kickoff',
+      description: 'Initial meeting with stakeholders and team formation.',
+      timestamp: 'Jan 15, 2024',
+      icon: 'play-circle',
+      status: 'complete',
+      meta: 'Team assembled',
+    },
+    {
+      id: 2,
+      title: 'Design Phase',
+      description: 'UI/UX design, prototyping, and design system creation.',
+      timestamp: 'Feb 12, 2024',
+      icon: 'edit-3',
+      status: 'complete',
+      children: <ProjectMilestoneComponent />,
+      childrenContainer: { marginTop: 0 },
+      meta: 'Design system v2.0',
+    },
+    {
+      id: 3,
+      title: 'Development Sprint',
+      description: 'Frontend and backend development in parallel tracks.',
+      timestamp: 'Mar 5, 2024',
+      icon: 'code',
+      status: 'current',
+      children: <DevelopmentStatusComponent />,
+      childrenContainer: { marginTop: 0 },
+      meta: 'In Progress',
+    },
+    {
+      id: 4,
+      title: 'Launch',
+      description: 'Production deployment and go-live celebration.',
+      timestamp: 'Apr 15, 2024',
+      icon: 'zap',
+      status: 'upcoming',
+      meta: 'Launch day',
+    },
+  ];
+
+  const userJourneyItems: TimelineItem[] = [
+    {
+      id: 1,
+      title: 'Account Created',
+      description: 'User registered with email verification.',
+      timestamp: '2 hours ago',
+      icon: 'user-plus',
+      status: 'complete',
+      meta: 'sarah.johnson@email.com',
+    },
+    {
+      id: 2,
+      title: 'First Purchase',
+      description: 'Completed their first transaction successfully.',
+      timestamp: '45 minutes ago',
+      icon: 'shopping-cart',
+      status: 'complete',
+      meta: '$127.50',
+    },
+    {
+      id: 3,
+      title: 'App Downloaded',
+      description: 'Downloaded and logged into mobile application.',
+      timestamp: '12 minutes ago',
+      icon: 'smartphone',
+      status: 'current',
+      meta: 'iOS App',
+    },
+  ];
+
+  const handleItemPress = (item: TimelineItem) => {
+    console.log('Timeline item pressed:', item.title);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+        contentInsetAdjustmentBehavior="always"
+        scrollEnabled
+      >
+        <View style={styles.header}>
+          <View style={styles.iconContainer}>
+            <MaterialIcons name="timeline" size={32} color={colors.primary} />
+          </View>
+          <Text style={styles.headerTitle}>Timeline Component Demo</Text>
+          <Text style={styles.subtitle}>
+            Beautiful timelines with various styles and interactive features
+          </Text>
+        </View>
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>🧾 Order Timeline</Text>
+            <Text style={styles.sectionSubtitle}>
+              Follow your delivery journey
+            </Text>
+          </View>
+
+          <View style={styles.timelineWrapper}>
+            <Timeline
+              metaContainerStyle={styles.metaContainer}
+              animationType="rotate"
+              items={orderTimelineItems}
+              onItemPress={handleItemPress}
+              activeColor={colors.primary}
+              animated
+              titleStyle={styles.timelineTitle}
+              descriptionStyle={styles.timelineDescription}
+              timestampStyle={styles.timelineTimestamp}
+              metaTextStyle={styles.timelineMeta}
+            />
+          </View>
+        </View>
+
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>🚀 Project Timeline</Text>
+            <Text style={styles.sectionSubtitle}>
+              Development milestones and progress
+            </Text>
+          </View>
+
+          <View style={styles.timelineWrapper}>
+            <Timeline
+              metaContainerStyle={[
+                styles.metaContainer,
+                { backgroundColor: colors.card },
+              ]}
+              animationType="fade"
+              items={projectTimelineItems}
+              onItemPress={handleItemPress}
+              activeColor={colors.success}
+              animated
+              titleStyle={styles.timelineTitle}
+              descriptionStyle={styles.timelineDescription}
+              timestampStyle={styles.timelineTimestamp}
+              metaTextStyle={styles.timelineMeta}
+            />
+          </View>
+        </View>
+
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>👤 User Journey</Text>
+            <Text style={styles.sectionSubtitle}>
+              Real-time user activity tracking
+            </Text>
+          </View>
+
+          <View style={styles.timelineWrapper}>
+            <Timeline
+              metaContainerStyle={[
+                styles.metaContainer,
+                { backgroundColor: colors.background },
+              ]}
+              animationType="scale"
+              items={userJourneyItems}
+              onItemPress={handleItemPress}
+              activeColor={colors.destructive}
+              animated
+              titleStyle={styles.timelineTitle}
+              descriptionStyle={styles.timelineDescription}
+              timestampStyle={styles.timelineTimestamp}
+              metaTextStyle={styles.timelineMeta}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const createDemoStyles = (colors: any) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    content: {
+      padding: 24,
+      paddingBottom: 48,
+    },
+    header: {
+      alignItems: 'center',
+      marginBottom: 32,
+      paddingTop: 20,
+    },
+    iconContainer: {
+      width: 64,
+      height: 64,
+      borderRadius: 32,
+      backgroundColor: colors.card,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    headerTitle: {
+      fontSize: 28,
+      fontWeight: '700',
+      color: colors.foreground,
+      textAlign: 'center',
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: colors.mutedForeground,
+      textAlign: 'center',
+      lineHeight: 24,
+      maxWidth: 320,
+    },
+    section: {
+      marginBottom: 32,
+    },
+    sectionTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.foreground,
+      marginBottom: 16,
+      marginLeft: 4,
+    },
+    sectionHeader: {
+      marginBottom: 16,
+    },
+    sectionSubtitle: {
+      fontSize: 14,
+      color: colors.mutedForeground,
+      marginTop: 4,
+      marginLeft: 4,
+    },
+    timelineWrapper: {
+      backgroundColor: colors.card,
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 12,
+      padding: 16,
+    },
+    metaContainer: {
+      backgroundColor: colors.background,
+      borderRadius: 8,
+      padding: 8,
+    },
+    timelineTitle: {
+      color: colors.foreground,
+      fontWeight: '600',
+    },
+    timelineDescription: {
+      color: colors.mutedForeground,
+    },
+    timelineTimestamp: {
+      color: colors.mutedForeground,
+    },
+    timelineMeta: {
+      color: colors.foreground,
+    },
+    detailsCard: {
+      backgroundColor: colors.background,
+      borderRadius: 12,
+      padding: 12,
+      marginTop: 8,
+    },
+    detailsTitle: {
+      fontSize: 14,
+      color: colors.foreground,
+      fontWeight: '500',
+      marginBottom: 8,
+    },
+    detailsRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 6,
+    },
+    detailsLabel: {
+      fontSize: 13,
+      color: colors.mutedForeground,
+    },
+    detailsValue: {
+      fontSize: 13,
+      color: colors.foreground,
+      fontWeight: '500',
+    },
+    progressRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    progressLabel: {
+      fontSize: 12,
+      color: colors.mutedForeground,
+      width: 60,
+    },
+    progressBar: {
+      flex: 1,
+      height: 6,
+      backgroundColor: colors.border,
+      borderRadius: 3,
+      marginHorizontal: 12,
+    },
+    progressFill: {
+      height: 6,
+      backgroundColor: colors.primary,
+      borderRadius: 3,
+    },
+    progressValue: {
+      fontSize: 12,
+      color: colors.foreground,
+      fontWeight: '500',
+      width: 35,
+      textAlign: 'right',
+    },
+  });
+
+export default TimelineDemo;