vibefast-cli 0.6.1 → 0.7.0

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

@@ -0,0 +1,355 @@
+/* eslint-disable */
+
+import { Feather } from '@expo/vector-icons';
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  FadeInDown,
+  interpolateColor,
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useThemeConfig } from '../../../lib/use-theme-config';
+import type { TimelineProps } from './types';
+
+const AnimatedTouchableOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity);
+const AnimatedFeather = Animated.createAnimatedComponent(Feather);
+
+export const Timeline: React.FC<TimelineProps> &
+  React.FunctionComponent<TimelineProps> = ({
+  items = [],
+  activeColor: propsActiveColor,
+  inactiveColor: propsInactiveColor,
+  animated = true,
+  animationType = 'bounce',
+  onItemPress,
+  containerStyle,
+  titleStyle,
+  descriptionStyle,
+  timestampStyle,
+  lineWidth = 2,
+  iconSize = 20,
+  metaContainerStyle,
+  metaTextStyle,
+}: TimelineProps): React.ReactNode & React.JSX.Element => {
+  const { colors } = useThemeConfig();
+  const activeColor = propsActiveColor ?? colors.primary;
+  const inactiveColor = propsInactiveColor ?? colors.muted;
+
+  const statusRefs = React.useRef<Record<string | number, string>>({});
+
+  useEffect(() => {
+    items.forEach((item) => {
+      statusRefs.current[item.id] = item.status || 'upcoming';
+    });
+
+    return () => {
+      statusRefs.current = {};
+    };
+  }, [items]);
+
+  if (!items || items.length === 0) {
+    return null as unknown as React.ReactNode & React.JSX.Element;
+  }
+
+  return (
+    <Animated.View style={[styles.container, containerStyle]}>
+      {items.map((item, index) => {
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
+        const isComplete = item.status === 'complete';
+        const isCurrent = item.status === 'current';
+        const isUpcoming = item.status === 'upcoming' || !item.status;
+
+        const prevStatus = statusRefs.current[item.id];
+        const wasComplete = prevStatus === 'complete';
+        const statusChanged = prevStatus && prevStatus !== item.status;
+        statusRefs.current[item.id] = item.status || 'upcoming';
+
+        const dotScale = useSharedValue(statusChanged ? 1.5 : 1);
+        const dotColorAnimated = useSharedValue(
+          isComplete ? 1 : isCurrent ? 0.5 : 0,
+        );
+        const lineProgress = useSharedValue(isComplete ? 1 : 0);
+        const iconRotate = useSharedValue(statusChanged ? 0 : 1);
+
+        useEffect(() => {
+          if (statusChanged) {
+            switch (animationType) {
+              case 'bounce':
+                dotScale.value = withSequence(
+                  withTiming(1.5, { duration: 200 }),
+                  withSpring(1),
+                );
+                break;
+              case 'spring':
+                dotScale.value = withSpring(1.2, { damping: 2, stiffness: 80 });
+                break;
+              case 'rotate':
+                iconRotate.value = withSequence(
+                  withTiming(0, { duration: 10 }),
+                  withTiming(4, { duration: 800 }),
+                );
+                dotScale.value = withSequence(
+                  withTiming(1.6, { duration: 200 }),
+                  withSpring(1),
+                );
+                dotColorAnimated.value = withSequence(
+                  withTiming(0, { duration: 200 }),
+                  withTiming(isComplete ? 1 : isCurrent ? 0.5 : 0, {
+                    duration: 400,
+                  }),
+                );
+                break;
+              case 'fade':
+                dotColorAnimated.value = withSequence(
+                  withTiming(0, { duration: 200 }),
+                  withTiming(isComplete ? 1 : isCurrent ? 0.5 : 0, {
+                    duration: 400,
+                  }),
+                );
+                break;
+              case 'scale':
+                dotScale.value = withSequence(
+                  withTiming(0.5, { duration: 200 }),
+                  withTiming(1.2, { duration: 200 }),
+                  withTiming(1, { duration: 200 }),
+                );
+                break;
+              default:
+                dotScale.value = withSequence(
+                  withTiming(1.5, { duration: 200 }),
+                  withSpring(1),
+                );
+            }
+
+            dotColorAnimated.value = withTiming(
+              isComplete ? 1 : isCurrent ? 0.5 : 0,
+              { duration: 400 },
+            );
+
+            iconRotate.value = withSequence(
+              withTiming(0, { duration: 10 }),
+              withTiming(1, { duration: 400 }),
+            );
+
+            if (isComplete) {
+              lineProgress.value = withTiming(1, { duration: 600 });
+            } else if (wasComplete) {
+              lineProgress.value = withTiming(0, { duration: 600 });
+            }
+          } else {
+            lineProgress.value = isComplete ? 1 : 0;
+          }
+        }, [
+          item.status,
+          isComplete,
+          isCurrent,
+          animationType,
+          dotColorAnimated,
+          dotScale,
+          iconRotate,
+          lineProgress,
+          statusChanged,
+          wasComplete,
+        ]);
+
+        const dotAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            transform: [{ scale: dotScale.value }],
+            backgroundColor: interpolateColor(
+              dotColorAnimated.value,
+              [0, 0.5, 1],
+              [inactiveColor, activeColor, activeColor],
+            ),
+          };
+        });
+
+        const lineAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            backgroundColor: interpolateColor(
+              lineProgress.value,
+              [0, 1],
+              [inactiveColor, activeColor],
+            ),
+            width: lineWidth,
+            transform: [{ scaleY: lineProgress.value }],
+            opacity: 0.6 + lineProgress.value * 0.4,
+          };
+        });
+
+        const iconAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            transform: [{ rotate: `${iconRotate.value * 360}deg` }],
+            opacity: 0.8 + iconRotate.value * 0.2,
+          };
+        });
+
+        const iconName =
+          item.icon ||
+          (isComplete ? 'check' : isCurrent ? 'activity' : 'circle');
+
+        const textColor =
+          isComplete || isCurrent ? colors.foreground : colors.mutedForeground;
+
+        return (
+          <AnimatedTouchableOpacity
+            key={item.id}
+            style={styles.itemContainer}
+            activeOpacity={onItemPress ? 0.7 : 1}
+            onPress={() => onItemPress && onItemPress(item)}
+            entering={
+              animated ? FadeInDown.delay(index * 100).springify() : undefined
+            }
+            layout={LinearTransition.springify()}
+          >
+            <View style={styles.timelineColumn}>
+              <Animated.View style={[styles.dot, dotAnimatedStyle]}>
+                <Animated.View style={[{}, iconAnimatedStyle]}>
+                  <AnimatedFeather
+                    name={iconName as any}
+                    size={iconSize * 0.7}
+                    color={colors.primaryForeground}
+                  />
+                </Animated.View>
+              </Animated.View>
+
+              {!isLast && (
+                <Animated.View style={[styles.line, lineAnimatedStyle]} />
+              )}
+            </View>
+
+            <View style={styles.contentColumn}>
+              <View style={styles.itemHeader}>
+                <Text style={[styles.title, { color: textColor }, titleStyle]}>
+                  {item.title}
+                </Text>
+
+                {item.timestamp && (
+                  <Text
+                    style={[
+                      styles.timestamp,
+                      { color: colors.mutedForeground },
+                      timestampStyle,
+                    ]}
+                  >
+                    {item.timestamp}
+                  </Text>
+                )}
+              </View>
+
+              {item.description && (
+                <Text
+                  style={[
+                    styles.description,
+                    { color: colors.mutedForeground },
+                    descriptionStyle,
+                  ]}
+                >
+                  {item.description}
+                </Text>
+              )}
+
+              {item.meta && (
+                <View style={[styles.metaContainer, metaContainerStyle]}>
+                  <Text
+                    style={[
+                      styles.metaText,
+                      { color: colors.mutedForeground },
+                      metaTextStyle,
+                    ]}
+                  >
+                    {item.meta}
+                  </Text>
+                </View>
+              )}
+
+              {item.children && (
+                <View
+                  style={[styles.childrenContainer, item.childrenContainer]}
+                >
+                  {item.children}
+                </View>
+              )}
+            </View>
+          </AnimatedTouchableOpacity>
+        );
+      })}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    marginBottom: 24,
+  },
+  timelineColumn: {
+    alignItems: 'center',
+    width: 40,
+  },
+  contentColumn: {
+    flex: 1,
+    marginLeft: 12,
+    marginTop: -4,
+  },
+  dot: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+  },
+  line: {
+    flex: 1,
+    marginTop: 4,
+  },
+  itemHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 6,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  timestamp: {
+    fontSize: 12,
+    marginLeft: 8,
+  },
+  metaContainer: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+    alignSelf: 'flex-start',
+    marginTop: 4,
+    marginBottom: 8,
+  },
+  metaText: {
+    fontSize: 12,
+  },
+  childrenContainer: {
+    padding: 12,
+  },
+});

package/recipes/0/apps/native/src/components/advanced-ui/timeline/types.ts

@@ -0,0 +1,31 @@
+import type { Feather } from '@expo/vector-icons';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface TimelineItem {
+  id: string | number;
+  title: string;
+  description?: string;
+  timestamp?: string;
+  icon?: keyof typeof Feather.glyphMap;
+  status?: 'complete' | 'current' | 'upcoming';
+  meta?: string;
+  children?: React.ReactNode;
+  childrenContainer?: StyleProp<ViewStyle>;
+}
+
+export interface TimelineProps {
+  items: TimelineItem[];
+  activeColor?: string;
+  inactiveColor?: string;
+  animated?: boolean;
+  animationType?: 'bounce' | 'spring' | 'rotate' | 'fade' | 'scale';
+  onItemPress?: (item: TimelineItem) => void;
+  containerStyle?: ViewStyle;
+  metaContainerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: TextStyle;
+  descriptionStyle?: TextStyle;
+  timestampStyle?: TextStyle;
+  lineWidth?: number;
+  iconSize?: number;
+  metaTextStyle?: StyleProp<TextStyle>;
+}

package/recipes/0/recipe.json

@@ -0,0 +1,18 @@
+{
+  "name": "0",
+  "version": "1.0.0",
+  "description": "Advanced UI component: 0",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/timeline",
+      "to": "apps/native/src/components/advanced-ui/timeline"
+    }
+  ],
+  "dependencies": {
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
+  }
+}