vibefast-cli 0.2.4 → 0.3.0

package/2/apps/native/src/components/advanced-ui/buttons/glowing-button.tsx

@@ -0,0 +1,366 @@
+import { Text, View } from 'react-native';
+import AnimatedGlow, { type PresetConfig } from 'react-native-animated-glow';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export type Preset = (typeof presets)[keyof typeof presets];
+
+export const presets = {
+  cosmicNebula: {
+    cornerRadius: 70,
+    outlineWidth: 3,
+    borderColor: [
+      'rgba(255, 171, 203, 1)',
+      'rgba(112, 49, 164, 1)',
+      'rgba(35, 21, 50, 1)',
+    ],
+    backgroundColor: '#222',
+    animationSpeed: 2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#483D8B', '#8A2BE2', '#9370DB'],
+        glowSize: 20,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(185, 185, 250, 1)',
+          'rgba(199, 129, 199, 1)',
+          'rgba(77, 61, 175, 1)',
+        ],
+        glowSize: [2, 6],
+        opacity: 0.6,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(185, 185, 250, 1)', 'rgba(225, 133, 242, 1)'],
+        glowSize: [0, 12],
+        opacity: 0.05,
+        speedMultiplier: 1.2,
+        coverage: 0.5,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(185, 185, 250, 1)', 'rgba(255, 140, 255, 1)'],
+        glowSize: [0, 1],
+        opacity: 1,
+        speedMultiplier: 1.2,
+        coverage: 0.3,
+        relativeOffset: 0.9,
+      },
+    ],
+  },
+  oceanSunset: {
+    cornerRadius: 70,
+    outlineWidth: 4,
+    borderColor: [
+      'rgba(255, 124, 171, 1)',
+      'rgba(63, 100, 199, 1)',
+      'rgba(240, 115, 46, 1)',
+    ],
+    backgroundColor: 'rgba(21, 21, 21, 1)',
+    animationSpeed: 2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#f82fc6', '#5a4ff9', '#ff923e'],
+        glowSize: 15,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(255, 89, 213, 1)',
+          'rgba(63, 89, 255, 1)',
+          'rgba(255, 164, 0, 1)',
+        ],
+        glowSize: 5,
+        opacity: 0.5,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  glowingBorder: {
+    cornerRadius: 70,
+    outlineWidth: 1,
+    borderColor: [
+      'rgba(16, 16, 16, 1)',
+      'rgba(227, 74, 255, 0.3)',
+      'rgba(142, 88, 163, 1)',
+      'rgba(98, 181, 255, 1)',
+      'rgba(199, 208, 255, 1)',
+      'rgba(55, 112, 169, 1)',
+    ],
+    backgroundColor: 'rgba(0, 0, 0, 1)',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'over',
+        colors: [
+          'rgba(0, 0, 0, 0)',
+          'rgba(137, 73, 151, 1)',
+          'rgba(85, 68, 216, 1)',
+        ],
+        glowSize: [0, 25, 20, 0],
+        opacity: 0.15,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: [
+          'rgba(0, 0, 0, 0)',
+          'rgba(137, 73, 151, 1)',
+          'rgba(85, 68, 216, 1)',
+        ],
+        glowSize: [0, 5, 5, 0],
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(166, 68, 195, 1)', 'rgba(245, 219, 255, 1)'],
+        glowSize: [1, 8],
+        opacity: 0.06,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.85,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(225, 102, 235, 1)', 'rgba(245, 219, 255, 1)'],
+        glowSize: [0, 0.3],
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.85,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(83, 172, 255, 1)', 'rgba(0, 181, 255, 1)'],
+        glowSize: [0, 8],
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 0.3,
+        relativeOffset: 0.4,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(83, 172, 255, 1)', 'rgba(255, 255, 255, 1)'],
+        glowSize: [0, 0.3],
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.4,
+      },
+    ],
+  },
+  cyberPink: {
+    cornerRadius: 70,
+    outlineWidth: 8,
+    borderColor: ['rgba(177, 102, 255, 1)', 'rgba(255, 102, 163, 1)'],
+    backgroundColor: 'rgba(27, 0, 25, 1)',
+    animationSpeed: 3,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#FF1493', 'rgba(206, 0, 255, 1)', '#DB7093'],
+        glowSize: 30,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['rgba(254, 160, 177, 1)', 'rgba(206, 180, 255, 1)'],
+        glowSize: 12,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['rgba(255, 164, 180, 1)', 'rgba(255, 217, 217, 1)'],
+        glowSize: 4,
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  defaultRainbow: {
+    cornerRadius: 30,
+    outlineWidth: 4,
+    borderColor: [
+      'rgba(238, 255, 0, 1)',
+      'rgba(79, 255, 0, 1)',
+      'rgba(46, 90, 255, 1)',
+      'rgba(254, 0, 255, 1)',
+      'rgba(231, 23, 23, 1)',
+    ],
+    backgroundColor: 'rgba(10, 10, 10, 1)',
+    animationSpeed: 1.2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(205, 201, 35, 1)',
+          'rgba(0, 255, 79, 1)',
+          'rgba(0, 119, 255, 1)',
+          'rgba(239, 0, 255, 1)',
+          'rgba(222, 28, 28, 1)',
+        ],
+        glowSize: 34,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(185, 182, 32, 1)',
+          'rgba(0, 255, 79, 1)',
+          'rgba(0, 119, 255, 1)',
+          'rgba(239, 0, 255, 1)',
+          'rgba(222, 28, 28, 1)',
+        ],
+        glowSize: 6,
+        opacity: 0.5,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#FFFFFF'],
+        glowSize: [2, 8, 8, 2],
+        opacity: 0.2,
+        speedMultiplier: 2,
+        coverage: 0.5,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  arcticFreeze: {
+    cornerRadius: 60,
+    outlineWidth: 4,
+    borderColor: 'white',
+    backgroundColor: 'rgba(228, 246, 255, 1)',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#00FFFF', '#E0FFFF'],
+        glowSize: 10,
+        opacity: 0.4,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#FFFFFF', '#AFEEEE'],
+        glowSize: 4,
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  auroraBorealis: {
+    cornerRadius: 30,
+    outlineWidth: 0,
+    borderColor: 'white',
+    backgroundColor: '#222',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', '#33a0ff', '#f5519f'],
+        glowSize: 30,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', 'rgba(116, 159, 255, 1)', 'rgba(255, 114, 170, 1)'],
+        glowSize: 10,
+        opacity: 0.5,
+        speedMultiplier: 0.8,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', 'rgba(116, 159, 255, 1)', 'rgba(255, 114, 170, 1)'],
+        glowSize: 3,
+        opacity: 1,
+        speedMultiplier: 0.8,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+} as const;
+
+interface GlowingButtonProps {
+  preset: keyof typeof presets; // Only allows valid preset keys
+  label: string;
+}
+
+export default function GlowingButton({ preset, label }: GlowingButtonProps) {
+  const theme = useThemeConfig();
+  return (
+    <AnimatedGlow preset={presets[preset] as unknown as PresetConfig}>
+      <View
+        className="rounded-full p-5"
+        style={{ backgroundColor: theme.colors.secondary }}
+      >
+        <Text
+          className="text-center text-base font-semibold"
+          style={{ color: theme.colors.secondaryForeground }}
+        >
+          {label}
+        </Text>
+      </View>
+    </AnimatedGlow>
+  );
+}

package/2/apps/native/src/components/advanced-ui/chip/animated-chip.tsx

@@ -0,0 +1,118 @@
+import Ionicons from '@expo/vector-icons/Ionicons';
+import React, { memo, useEffect } from 'react';
+import { Pressable, StyleSheet, type ViewStyle } from 'react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useThemeConfig } from '../../../lib/use-theme-config';
+import type { AnimatedChipProps } from './types';
+
+export const AnimatedChip = memo(
+  ({
+    label,
+    icon,
+    isActive,
+    onPress,
+    activeIcon,
+    activeColor,
+  }: AnimatedChipProps) => {
+    const { colors } = useThemeConfig();
+    const progress = useSharedValue<number>(isActive ? 1 : 0);
+    const iconOpacity = useSharedValue<number>(isActive ? 1 : 0);
+    useEffect(() => {
+      progress.value = withTiming<number>(isActive ? 1 : 0, { duration: 500 });
+      iconOpacity.value = withTiming<number>(isActive ? 1 : 0.5, {
+        duration: 500,
+      });
+    }, [isActive, progress, iconOpacity]);
+
+    const animatedContainerStyle = useAnimatedStyle<ViewStyle>(() => {
+      return {
+        width: withSpring(isActive ? 140 : 50, {
+          damping: 90,
+          velocity: 2,
+          stiffness: 180,
+        }),
+
+        backgroundColor: interpolateColor(
+          progress.value,
+          [0, 1],
+          [colors.card, activeColor || colors.primary],
+        ),
+      };
+    });
+
+    const animatedIconOpacityStyle = useAnimatedStyle(() => {
+      return {
+        opacity: iconOpacity.value,
+      };
+    });
+
+    const animatedTextStyle = useAnimatedStyle(() => {
+      return {
+        opacity: progress.value,
+        transform: [
+          {
+            translateX: withTiming(isActive ? 0 : -8, { duration: 200 }),
+          },
+        ],
+      };
+    });
+
+    return (
+      <Pressable onPress={onPress}>
+        <Animated.View style={[styles.chip, animatedContainerStyle]}>
+          <Animated.View style={[animatedIconOpacityStyle]}>
+            <Ionicons
+              size={18}
+              name={isActive && activeIcon ? activeIcon : icon}
+              color={
+                isActive ? colors.primaryForeground : colors.mutedForeground
+              }
+            />
+          </Animated.View>
+          {isActive && (
+            <Animated.View>
+              <Animated.View style={[styles.labelWrapper, animatedTextStyle]}>
+                <Animated.Text
+                  style={[styles.label, { color: colors.primaryForeground }]}
+                >
+                  {label}
+                </Animated.Text>
+              </Animated.View>
+            </Animated.View>
+          )}
+        </Animated.View>
+      </Pressable>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 8,
+    // padding: 12,
+  },
+  chip: {
+    height: 40,
+    borderRadius: 100,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  labelWrapper: {
+    marginLeft: 8,
+    minWidth: 60,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+});

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

@@ -0,0 +1,49 @@
+import type React from 'react';
+import { useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
+import { AnimatedChip } from './animated-chip';
+import type { ChipGroupProps, ChipItem } from './types';
+
+export const ChipGroup: React.FC<ChipGroupProps<ChipItem>> = ({
+  chips,
+  onChange,
+  containerStyle,
+  selectedIndex,
+}) => {
+  const [internalIndex, setInternalIndex] = useState(0);
+  const activeIndex = selectedIndex ?? internalIndex;
+
+  const handlePress = (index: number) => {
+    if (selectedIndex === undefined) {
+      setInternalIndex(index);
+    }
+    onChange?.(index);
+  };
+  return (
+    <Animated.View
+      style={[styles.container, containerStyle]}
+      layout={LinearTransition}
+    >
+      {chips.map((item, index) => (
+        <AnimatedChip
+          key={index}
+          label={item.label}
+          activeColor={item.activeColor}
+          activeIcon={item.activeIcon}
+          icon={item.icon}
+          isActive={activeIndex === index}
+          onPress={() => handlePress(index)}
+        />
+      ))}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+});

package/2/apps/native/src/components/advanced-ui/chip/demo.tsx

@@ -0,0 +1,191 @@
+import type * as React from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useThemeConfig } from '../../../lib/use-theme-config';
+import { ChipGroup } from './chip';
+
+const ChipDemo: React.FunctionComponent = (_$_): React.ReactNode => {
+  const { colors } = useThemeConfig();
+  const [index, setIndex] = useState<number>(0);
+  const [displayedLabel, setDisplayedLabel] = useState<string>('Primary');
+  const [displayedCount, setDisplayedCount] = useState<number>(42);
+
+  const fadeAnim = useSharedValue<number>(1);
+  const chipData = useMemo(
+    () => [
+      {
+        label: 'Primary',
+        icon: 'person',
+        activeIcon: 'person.fill',
+        activeColor: colors.primary,
+      },
+      {
+        label: 'Notification',
+        icon: 'cart',
+        activeIcon: 'cart.fill',
+        activeColor: colors.destructive,
+      },
+      {
+        label: 'Messages',
+        icon: 'bubble.left',
+        activeIcon: 'bubble.left.fill',
+        activeColor: colors.warning,
+      },
+      {
+        label: 'Promotions',
+        icon: 'megaphone',
+        activeIcon: 'megaphone.fill',
+        activeColor: colors.success,
+      },
+    ],
+    [colors],
+  );
+
+  const updateDisplayedContent = useCallback(
+    (newIndex: number) => {
+      setDisplayedLabel(chipData[newIndex].label);
+      setDisplayedCount(Math.floor(Math.random() * 100) + 1);
+    },
+    [chipData],
+  );
+
+  const handleChipChange = (newIndex: number) => {
+    // 1) update index immediately so only one re-render
+    setIndex(newIndex);
+
+    // 2) fire off a single sequence on the UI thread
+    fadeAnim.value = withSequence(
+      withTiming(0, { duration: 80 }),
+      withTiming(1, { duration: 80 }),
+    );
+
+    // 3) after the whole sequence, update your label/count in one go
+    fadeAnim.value = withTiming(1, { duration: 160 }, (finished) => {
+      if (finished) runOnJS(updateDisplayedContent)(newIndex);
+    });
+  };
+
+  const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
+    return {
+      opacity: fadeAnim.value,
+      transform: [
+        {
+          translateY: interpolate(fadeAnim.value, [0, 1], [4, 0]),
+        },
+      ],
+    };
+  });
+
+  useEffect(() => {
+    updateDisplayedContent(0);
+  }, [updateDisplayedContent]);
+
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    content: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: 24,
+    },
+    header: {
+      alignItems: 'center',
+      marginBottom: 48,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: '700',
+      color: colors.foreground,
+      letterSpacing: -0.5,
+      marginBottom: 6,
+    },
+    subtitle: {
+      fontSize: 15,
+      color: colors.mutedForeground,
+      fontWeight: '400',
+    },
+    chipContainer: {
+      width: '100%',
+      alignItems: 'center',
+      marginBottom: 32,
+    },
+    chipGroupContainer: {
+      paddingHorizontal: 4,
+    },
+    selectedInfo: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.card,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      borderRadius: 20,
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    selectedText: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: colors.foreground,
+    },
+    dot: {
+      width: 3,
+      height: 3,
+      borderRadius: 1.5,
+      backgroundColor: colors.muted,
+      marginHorizontal: 8,
+    },
+    selectedCount: {
+      fontSize: 14,
+      color: colors.mutedForeground,
+      fontWeight: '400',
+    },
+  });
+
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <Text style={styles.title}>Filter</Text>
+            <Text style={styles.subtitle}>Choose your view</Text>
+          </View>
+
+          <View style={styles.chipContainer}>
+            <ChipGroup
+              chips={chipData as any}
+              selectedIndex={index}
+              onChange={handleChipChange}
+              containerStyle={styles.chipGroupContainer}
+            />
+          </View>
+
+          <Animated.View style={[styles.selectedInfo, animatedStyle]}>
+            <Text style={styles.selectedText}>{displayedLabel}</Text>
+            <View style={styles.dot} />
+            <Text style={styles.selectedCount}>{displayedCount} items</Text>
+          </Animated.View>
+        </View>
+      </SafeAreaView>
+    </GestureHandlerRootView>
+  );
+};
+
+export default ChipDemo;