vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/components/advanced-ui/chip/types.ts

@@ -0,0 +1,21 @@
+import type { Ionicons } from '@expo/vector-icons';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface ChipItem {
+  label: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  activeIcon?: keyof typeof Ionicons.glyphMap;
+  activeColor?: string;
+}
+
+export interface ChipGroupProps<T> {
+  chips: T[];
+  selectedIndex?: number;
+  onChange?: (index: number) => void;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export interface AnimatedChipProps extends ChipItem {
+  isActive: boolean;
+  onPress: () => void;
+}

package/2/apps/native/src/components/advanced-ui/progress-bars/animated-progress-bar.tsx

@@ -0,0 +1,182 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import type React from 'react';
+import { useEffect } from 'react';
+import {
+  Dimensions,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+export type ProgressBarProps = {
+  progress: number; // Value between 0 and 1
+  height: number;
+  width: number;
+  text?: string;
+  icon?: React.ReactElement;
+  iconGap?: number; //if gap is not added icon container is as big as the height of the bar
+  iconContainerColor?: string;
+  animationDuration?: number;
+  reduceMotion?: 'never' | 'always' | 'system';
+  containerStyle?: StyleProp<ViewStyle>;
+  trackColor?: string;
+  textStyle?: StyleProp<TextStyle>;
+  colorAtZeroProgress?: string;
+  colorAtMidProgress?: string;
+  colorAtFullProgress?: string;
+};
+
+const DEFAULT_HEIGHT = 30;
+const DEFAULT_WIDTH = Dimensions.get('window').width * 0.8;
+
+export default function AnimatedProgressBar({
+  progress,
+  text,
+  icon,
+  iconGap = 4,
+  iconContainerColor = '#FFFFFF33',
+  height = DEFAULT_HEIGHT,
+  width = DEFAULT_WIDTH,
+  animationDuration = 700,
+  reduceMotion = 'system',
+  containerStyle,
+  trackColor = '#E0E0E0',
+  textStyle,
+  colorAtZeroProgress = '#FF6B6B',
+  colorAtMidProgress = '#FFA500',
+  colorAtFullProgress = '#4CAF50',
+}: ProgressBarProps) {
+  const progressValue = useSharedValue(0);
+  const barBorderRadius = height ?? DEFAULT_HEIGHT / 2;
+  const iconContainerSize = height - iconGap;
+
+  const motion =
+    reduceMotion === 'never'
+      ? ReduceMotion.Never
+      : reduceMotion === 'always'
+        ? ReduceMotion.Always
+        : ReduceMotion.System;
+
+  useEffect(() => {
+    const clampedProgress = Math.max(0, Math.min(1, progress));
+    progressValue.value = withTiming(clampedProgress, {
+      duration: animationDuration,
+      easing: Easing.out(Easing.quad),
+      reduceMotion: motion,
+    });
+  }, [progress, animationDuration, motion, progressValue]);
+
+  const animatedProgressFillStyle = useAnimatedStyle(() => {
+    return {
+      width: progressValue.value * width,
+    };
+  });
+
+  const sliderHandleStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: progressValue.value * width - iconContainerSize - iconGap,
+        },
+      ],
+    };
+  });
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: width,
+          height: height,
+          borderRadius: barBorderRadius,
+          backgroundColor: trackColor,
+        },
+        containerStyle,
+      ]}
+    >
+      <Animated.View
+        style={[styles.progressFillContainer, animatedProgressFillStyle]}
+      >
+        <LinearGradient
+          colors={[
+            colorAtZeroProgress,
+            colorAtMidProgress,
+            colorAtFullProgress,
+          ]}
+          style={[styles.gradientFill, { borderRadius: barBorderRadius }]}
+          start={{ x: 0, y: 0.5 }}
+          end={{ x: 1, y: 0.5 }}
+        />
+      </Animated.View>
+
+      {text && (
+        <View style={styles.textContainer}>
+          <Text style={[styles.text, textStyle]}>{text}</Text>
+        </View>
+      )}
+      {icon && (
+        <Animated.View
+          style={[
+            styles.iconOuterContainer,
+            {
+              height: iconContainerSize,
+              width: iconContainerSize,
+              borderRadius: iconContainerSize / 2,
+              backgroundColor: iconContainerColor,
+            },
+            sliderHandleStyle,
+          ]}
+        >
+          <View style={[styles.iconInnerContainer]}>{icon}</View>
+        </Animated.View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    justifyContent: 'center',
+  },
+  progressFillContainer: {
+    // New container for the gradient, its width is animated
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+  },
+  gradientFill: {
+    // The LinearGradient fills its animated container
+    ...StyleSheet.absoluteFillObject,
+  },
+  textContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#FFFFFF',
+    fontWeight: '600',
+    fontSize: 12,
+  },
+  iconOuterContainer: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconInnerContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/2/apps/native/src/components/advanced-ui/progress-bars/dropdown-picker-page.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { type LayoutChangeEvent, StyleSheet, Text, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+const options = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
+
+const DropdownPickerPage = () => {
+  const theme = useThemeConfig();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const height = useSharedValue(0);
+  const [dropdownWidth, setDropdownWidth] = useState(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      height: height.value,
+    };
+  });
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setDropdownWidth(width);
+  };
+
+  const toggleDropdown = () => {
+    if (isOpen) {
+      height.value = withTiming(0);
+    } else {
+      height.value = withTiming(options.length * 40);
+    }
+    setIsOpen(!isOpen);
+  };
+
+  const selectItem = (item: string) => {
+    setSelectedItem(item);
+    toggleDropdown();
+  };
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+      justifyContent: 'center',
+    },
+    dropdownContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    dropdownHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: 10,
+      backgroundColor: theme.colors.muted,
+      borderRadius: 8,
+      width: '80%',
+    },
+    dropdownHeaderText: {
+      color: theme.colors.foreground,
+      fontWeight: '600',
+      fontSize: 16,
+    },
+    animatedContainer: {
+      overflow: 'hidden',
+      width: '80%',
+      borderRadius: 8,
+      backgroundColor: theme.colors.muted,
+    },
+    dropdownItem: {
+      padding: 10,
+      color: theme.colors.foreground,
+    },
+    selectedItemContainer: {
+      position: 'absolute',
+      top: '42%',
+      left: '10%',
+      backgroundColor: theme.colors.primary,
+      padding: 10,
+      borderRadius: 8,
+      alignSelf: 'flex-start',
+    },
+    selectedItemText: {
+      color: theme.colors.primaryForeground,
+      fontWeight: '600',
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.dropdownContainer}>
+        <View onLayout={onLayout} style={styles.dropdownHeader}>
+          <Text style={styles.dropdownHeaderText}>
+            {selectedItem || 'Select an item'}
+          </Text>
+          <Text onPress={toggleDropdown}>{isOpen ? '▲' : '▼'}</Text>
+        </View>
+        <Animated.View style={[styles.animatedContainer, animatedStyle]}>
+          {options.map((item) => (
+            <Text
+              key={item}
+              onPress={() => selectItem(item)}
+              style={styles.dropdownItem}
+            >
+              {item}
+            </Text>
+          ))}
+        </Animated.View>
+      </View>
+      {selectedItem && (
+        <View style={[styles.selectedItemContainer, { width: dropdownWidth }]}>
+          <Text style={styles.selectedItemText}>{selectedItem}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default DropdownPickerPage;

package/2/apps/native/src/components/advanced-ui/progress-bars/progress-circle-page.tsx

@@ -0,0 +1,111 @@
+import Feather from '@expo/vector-icons/Feather';
+import React, { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import TransitioningProgressCircle from './progress-circle';
+
+const PROGRESS_STEP = 0.2; // Increment/decrement by 20%
+const SIZE = 150;
+
+export default function TransitioningProgressCirclePage() {
+  const theme = useThemeConfig();
+  const [progress, setProgress] = useState(0.2); // Initial progress
+
+  const incrementProgress = () => {
+    setProgress((prevProgress) => Math.min(1, prevProgress + PROGRESS_STEP));
+  };
+
+  const decrementProgress = () => {
+    setProgress((prevProgress) => Math.max(0, prevProgress - PROGRESS_STEP));
+  };
+
+  const resetProgress = () => {
+    setProgress(0);
+  };
+
+  const styles = StyleSheet.create({
+    safeArea: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    screenContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+      backgroundColor: theme.colors.background,
+    },
+    title: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      marginBottom: 30,
+      color: theme.colors.foreground,
+    },
+    progressText: {
+      fontSize: 24,
+      fontWeight: '600',
+      color: theme.colors.foreground,
+    },
+    controlsContainer: {
+      marginTop: 40,
+      alignItems: 'center',
+    },
+    spacer: {
+      height: 15,
+    },
+  });
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.screenContainer}>
+        <Text style={styles.title}>Transitioning Circle Progress</Text>
+
+        <TransitioningProgressCircle
+          progress={progress} // Value between 0 and 1
+          progressColor={theme.colors.primary}
+          trackColor={theme.colors.muted}
+          size={150}
+          strokeWidth={8}
+          animationDuration={1000}
+          reduceMotion="never"
+          endIcon={
+            <Feather
+              name="check-circle"
+              size={SIZE * 0.8}
+              color={theme.colors.primary}
+            />
+          }
+        >
+          <Text
+            style={styles.progressText}
+          >{`${Math.round(progress * 100)}%`}</Text>
+        </TransitioningProgressCircle>
+
+        <View style={styles.controlsContainer}>
+          <Button
+            title="Increase (+20%)"
+            onPress={incrementProgress}
+            disabled={progress >= 1}
+            color={theme.colors.primary}
+          />
+          <View style={styles.spacer} />
+          <Button
+            title="Decrease (-20%)"
+            onPress={decrementProgress}
+            disabled={progress <= 0}
+            color={theme.colors.primary}
+          />
+          <View style={styles.spacer} />
+          <Button
+            title="Reset"
+            onPress={resetProgress}
+            color={theme.colors.primary}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}

package/2/apps/native/src/components/advanced-ui/progress-bars/progress-circle.tsx

@@ -0,0 +1,223 @@
+import React, { useEffect } from 'react';
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  Extrapolation,
+  interpolate,
+  ReduceMotion,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+const DEFAULT_SIZE = 100;
+const DEFAULT_STROKE_WIDTH = 8;
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+type TransitioningProgressCircleProps = {
+  progress: number; // Value between 0 and 1
+  progressColor: string;
+  trackColor: string;
+  size?: number;
+  strokeWidth?: number;
+  animationDuration?: number; // Duration for progress animation
+  successAnimationDuration?: number; // Duration for success icon animation
+  children?: React.ReactNode;
+  endIcon?: React.ReactElement;
+  endIconColor?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  reduceMotion?: 'never' | 'always' | 'system';
+};
+
+export default function TransitioningProgressCircle({
+  progress,
+  progressColor,
+  trackColor,
+  endIconColor,
+  size = DEFAULT_SIZE,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  animationDuration = 1000,
+  successAnimationDuration = 500, // Separate duration for success animation
+  children,
+  containerStyle,
+  reduceMotion = 'system',
+  endIcon,
+}: TransitioningProgressCircleProps) {
+  const actualRadius = (size - strokeWidth) / 2;
+  const actualCircumference = 2 * Math.PI * actualRadius;
+
+  const progressValue = useSharedValue(0);
+  const successState = useSharedValue(0);
+
+  const iconColor = endIconColor || progressColor;
+
+  const motion =
+    reduceMotion === 'never'
+      ? ReduceMotion.Never
+      : reduceMotion === 'always'
+        ? ReduceMotion.Always
+        : ReduceMotion.System;
+
+  const TIMING_CONFIG = React.useMemo(
+    () => ({
+      duration: successAnimationDuration,
+      easing: Easing.out(Easing.quad),
+      reduceMotion: motion,
+    }),
+    [successAnimationDuration, motion],
+  );
+  useEffect(() => {
+    const clampedProgress = Math.max(0, Math.min(1, progress));
+    progressValue.value = withTiming(clampedProgress, {
+      ...TIMING_CONFIG,
+      duration: animationDuration,
+    });
+
+    // Trigger success animation
+    if (clampedProgress === 1) {
+      successState.value = withTiming(1, TIMING_CONFIG);
+    } else {
+      // If progress drops below 1, hide success icon and show progress
+      // (could also be withTiming(0) if you want it to animate out)
+      if (successState.value === 1) {
+        // Only reset if it was fully shown
+        successState.value = withTiming(0, {
+          ...TIMING_CONFIG,
+          duration: successAnimationDuration / 2,
+        });
+      }
+    }
+  }, [
+    progress,
+    animationDuration,
+    successAnimationDuration,
+    progressValue,
+    successState,
+    TIMING_CONFIG,
+  ]);
+
+  const animatedCircleProps = useAnimatedProps(() => ({
+    strokeDashoffset: actualCircumference * (1 - progressValue.value),
+  }));
+
+  // style for the container of the progress circle and children (to fade them out)
+  const progressElementsAnimatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(
+      successState.value,
+      [0, 0.5, 1], // Start fading out early
+      [1, 0, 0],
+      Extrapolation.CLAMP,
+    );
+    const scale = interpolate(
+      successState.value,
+      [0, 1],
+      [1, 0.8], // Shrink slightly as it fades
+      Extrapolation.CLAMP,
+    );
+    return {
+      opacity,
+      transform: [{ scale }],
+    };
+  });
+
+  // for the icon (to fade it in)
+  const successIconAnimatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(
+      successState.value,
+      [0, 0.5, 1], // Start fading in after progress starts fading out
+      [0, 0, 1],
+      Extrapolation.CLAMP,
+    );
+    const scale = interpolate(
+      successState.value,
+      [0, 0.5, 1],
+      [0.5, 1.1, 1], // Pop-in effect
+      Extrapolation.CLAMP,
+    );
+    return {
+      opacity,
+      transform: [{ scale }],
+    };
+  });
+
+  const iconSize = size * 0.8; // icon will be 80% of the circle size
+
+  return (
+    <View
+      style={[styles.container, { width: size, height: size }, containerStyle]}
+    >
+      {/* Container for Progress Circle and Children (will fade out) */}
+      <Animated.View style={progressElementsAnimatedStyle}>
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={actualRadius}
+            stroke={trackColor}
+            fill="none"
+            strokeWidth={strokeWidth}
+            transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          />
+          <AnimatedCircle
+            cx={size / 2}
+            cy={size / 2}
+            r={actualRadius}
+            fill="none"
+            stroke={progressColor}
+            strokeWidth={strokeWidth}
+            strokeDasharray={actualCircumference}
+            animatedProps={animatedCircleProps}
+            strokeLinecap="round"
+            transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          />
+        </Svg>
+        {children && (
+          <View
+            style={[styles.childrenContainer, { width: size, height: size }]}
+          >
+            {children}
+          </View>
+        )}
+      </Animated.View>
+
+      {/* Success Icon Container (will fade in) */}
+      <Animated.View style={[styles.iconContainer, successIconAnimatedStyle]}>
+        {endIcon ? (
+          endIcon
+        ) : (
+          <Svg width={iconSize} height={iconSize} viewBox="0 0 24 24">
+            <AnimatedPath
+              d="M20 6L9 17l-5-5"
+              fill="none"
+              stroke={iconColor}
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </Svg>
+        )}
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  childrenContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});