vibefast-cli 0.6.1 → 0.7.0

package/dist/core/recipes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../../src/core/recipes.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;AAEvE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,UAAU,EAgH/B,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,GAAG,UAAU,EAAE,CAE3E;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,cAAc,EAAE,CAIhD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAElE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,CAS/D"}
+{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../../src/core/recipes.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;AAEvE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,UAAU,EA4E/B,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,GAAG,UAAU,EAAE,CAE3E;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,cAAc,EAAE,CAIhD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAElE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,CAS/D"}

package/dist/core/recipes.js

@@ -72,49 +72,13 @@ export const RECIPES = [
         description: 'In-app purchases and subscriptions with RevenueCat',
         icon: '💳',
     },
-    // Advanced UI Components
+    // Advanced UI
     {
         name: 'glowing-button',
         category: 'advanced-ui',
         description: 'Animated glowing button with presets',
         icon: '✨',
     },
-    {
-        name: 'animated-chip',
-        category: 'advanced-ui',
-        description: 'Animated chip component',
-        icon: '🏷️',
-    },
-    {
-        name: 'number-stepper',
-        category: 'advanced-ui',
-        description: 'Number stepper with animations',
-        icon: '🔢',
-    },
-    {
-        name: 'animated-switch',
-        category: 'advanced-ui',
-        description: 'Smooth animated switch',
-        icon: '🎚️',
-    },
-    {
-        name: 'progress-circle',
-        category: 'advanced-ui',
-        description: 'Circular progress indicator',
-        icon: '⭕',
-    },
-    {
-        name: 'swipe-slider',
-        category: 'advanced-ui',
-        description: 'Swipeable slider component',
-        icon: '👆',
-    },
-    {
-        name: 'timeline',
-        category: 'advanced-ui',
-        description: 'Timeline view component',
-        icon: '📅',
-    },
 ];
 /**
  * Get recipes by category

package/dist/core/recipes.js.map

@@ -1 +1 @@
-{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/core/recipes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/core/recipes.ts"],"names":[],"mappings":"AAAA;;GAEG;AAWH;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAiB;IACnC,WAAW;IACX;QACE,IAAI,EAAE,gBAAgB;QACtB,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,+BAA+B;QAC5C,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,0CAA0C;QACvD,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,2BAA2B;QACxC,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,gDAAgD;QAC7D,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,6BAA6B;QAC1C,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,0BAA0B;QACvC,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,aAAa;QACnB,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,6BAA6B;QAC1C,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,uCAAuC;QACpD,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,+BAA+B;QAC5C,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,8CAA8C;QAC3D,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,oDAAoD;QACjE,IAAI,EAAE,IAAI;KACX;IAED,cAAc;IACd;QACE,IAAI,EAAE,gBAAgB;QACtB,QAAQ,EAAE,aAAa;QACvB,WAAW,EAAE,sCAAsC;QACnD,IAAI,EAAE,GAAG;KACV;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,QAAwB;IAC3D,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;AACxD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,UAAU,GAAG,IAAI,GAAG,EAAkB,CAAC;IAC7C,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjD,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAChC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,IAAY;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;AAC9C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,QAAwB;IACrD,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,SAAS;YACZ,OAAO,UAAU,CAAC;QACpB,KAAK,aAAa;YAChB,OAAO,aAAa,CAAC;QACvB,KAAK,aAAa;YAChB,OAAO,cAAc,CAAC;IAC1B,CAAC;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibefast-cli",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "CLI for installing VibeFast features into your monorepo",
   "type": "module",
   "bin": {

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

@@ -0,0 +1,444 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+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;