kynjal-cli 2.0.6

package/dist/templates/components/ui/audio-waveform.tsx

@@ -0,0 +1,292 @@
+import { useColor } from '@/hooks/useColor';
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  cancelAnimation,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+export interface AudioWaveformProps {
+  data?: number[];
+  isPlaying?: boolean;
+  progress?: number;
+  onSeek?: (position: number) => void;
+  onSeekStart?: () => void;
+  onSeekEnd?: () => void;
+  style?: ViewStyle;
+  height?: number;
+  barCount?: number;
+  barWidth?: number;
+  barGap?: number;
+  activeColor?: string;
+  inactiveColor?: string;
+  animated?: boolean;
+  showProgress?: boolean;
+  interactive?: boolean;
+}
+
+// FIX: The Bar component now manages its own animation state.
+const Bar = React.memo(
+  ({
+    value,
+    height,
+    width,
+    isActive,
+    showProgress,
+    activeColor,
+    inactiveColor,
+    opacity,
+    isPlaying,
+    animated,
+  }: {
+    value: number;
+    height: number;
+    width: number;
+    isActive: boolean;
+    showProgress: boolean;
+    activeColor: string;
+    inactiveColor: string;
+    opacity: number;
+    isPlaying: boolean;
+    animated: boolean;
+  }) => {
+    // Each Bar has its own shared value, created at the top level. This is correct.
+    const animatedValue = useSharedValue(value);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        height: interpolate(
+          animatedValue.value,
+          [0, 1],
+          [4, height * 0.9],
+          'clamp'
+        ),
+      };
+    });
+
+    // This effect handles animations when the bar's data or playing state changes.
+    useEffect(() => {
+      if (isPlaying && animated && !showProgress) {
+        // "Live" animation effect
+        const randomDuration = 200 + Math.random() * 200;
+        animatedValue.value = withRepeat(
+          withSequence(
+            withTiming(value * (0.9 + Math.random() * 0.2), {
+              duration: randomDuration,
+            }),
+            withTiming(value * (0.9 + Math.random() * 0.2), {
+              duration: randomDuration,
+            })
+          ),
+          -1,
+          true
+        );
+      } else {
+        // Animate to the new static value
+        cancelAnimation(animatedValue);
+        animatedValue.value = withTiming(value, {
+          duration: animated ? 250 : 0,
+        });
+      }
+
+      return () => {
+        cancelAnimation(animatedValue);
+      };
+    }, [value, isPlaying, animated, showProgress, animatedValue]);
+
+    return (
+      <Animated.View
+        style={[
+          styles.bar,
+          {
+            width,
+            backgroundColor:
+              isActive || !showProgress ? activeColor : inactiveColor,
+            opacity,
+          },
+          animatedStyle,
+        ]}
+      />
+    );
+  }
+);
+
+export function AudioWaveform({
+  data,
+  isPlaying = false,
+  progress = 0,
+  onSeek,
+  onSeekStart,
+  onSeekEnd,
+  style,
+  height = 60,
+  barCount = 50,
+  barWidth = 3,
+  barGap = 2,
+  activeColor,
+  inactiveColor,
+  animated = true,
+  showProgress = false,
+  interactive = false,
+}: AudioWaveformProps) {
+  const primaryColor = useColor('destructive');
+  const mutedColor = useColor('textMuted');
+
+  const finalActiveColor = activeColor || primaryColor;
+  const finalInactiveColor = inactiveColor || mutedColor;
+
+  // FIX: This now just memoizes the raw data array, not an array of hooks.
+  const waveformData = useMemo(
+    () => data || generateSampleWaveform(barCount),
+    [data, barCount]
+  );
+
+  const totalWidth = barCount * barWidth + (barCount - 1) * barGap;
+
+  const getProgressLinePosition = () => {
+    const progressRatio = Math.max(0, Math.min(100, progress)) / 100;
+    if (progressRatio === 0) return 0;
+    if (progressRatio === 1) return totalWidth - 1;
+    const exactBarPosition = progressRatio * barCount;
+    const barIndex = Math.floor(exactBarPosition);
+    const barProgress = exactBarPosition - barIndex;
+    let position = barIndex * (barWidth + barGap);
+    position += barProgress * barWidth;
+    return Math.min(position, totalWidth - 1);
+  };
+
+  const handleSeek = (x: number) => {
+    if (!onSeek) return;
+    const clampedX = Math.max(0, Math.min(totalWidth, x));
+    const seekPercentage = (clampedX / totalWidth) * 100;
+    onSeek(seekPercentage);
+  };
+
+  const panGesture = Gesture.Pan()
+    .enabled(interactive)
+    .onStart((event) => {
+      if (onSeekStart) runOnJS(onSeekStart)();
+      runOnJS(handleSeek)(event.x);
+    })
+    .onUpdate((event) => {
+      runOnJS(handleSeek)(event.x);
+    })
+    .onEnd(() => {
+      if (onSeekEnd) runOnJS(onSeekEnd)();
+    });
+
+  return (
+    <View style={[styles.container, { height }, style]}>
+      <GestureDetector gesture={panGesture}>
+        <View style={[styles.waveform, { width: totalWidth }]}>
+          {/* FIX: We now map over the data array and pass the value to each Bar */}
+          {waveformData.map((value, index) => {
+            const progressRatio = progress / 100;
+            const barProgress = (index + 0.5) / barCount;
+            const isActive = showProgress
+              ? barProgress <= progressRatio
+              : false;
+
+            let opacity = 1;
+            if (showProgress && barProgress > progressRatio) {
+              const distanceFromProgress = barProgress - progressRatio;
+              opacity = Math.max(0.3, 1 - distanceFromProgress * 2);
+            }
+
+            return (
+              <View
+                key={index}
+                style={[
+                  styles.barContainer,
+                  {
+                    width: barWidth,
+                    marginRight: index < barCount - 1 ? barGap : 0,
+                  },
+                ]}
+              >
+                <Bar
+                  value={value}
+                  height={height}
+                  width={barWidth}
+                  isActive={isActive}
+                  showProgress={showProgress}
+                  activeColor={finalActiveColor}
+                  inactiveColor={finalInactiveColor}
+                  opacity={opacity}
+                  isPlaying={isPlaying}
+                  animated={animated}
+                />
+              </View>
+            );
+          })}
+          {showProgress && (
+            <View
+              style={[
+                styles.progressLine,
+                {
+                  left: getProgressLinePosition(),
+                  height: height * 0.95,
+                  backgroundColor: finalActiveColor,
+                },
+              ]}
+            />
+          )}
+        </View>
+      </GestureDetector>
+    </View>
+  );
+}
+
+// Helper function remains the same
+function generateSampleWaveform(barCount: number): number[] {
+  return Array.from({ length: barCount }, (_, i) => {
+    const wave1 = Math.sin((i / barCount) * Math.PI * 4) * 0.3;
+    const wave2 = Math.sin((i / barCount) * Math.PI * 8) * 0.15;
+    const wave3 = Math.sin((i / barCount) * Math.PI * 2) * 0.2;
+    const noise = (Math.random() - 0.5) * 0.2;
+    const base = 0.4;
+    const peak = Math.random() < 0.1 ? Math.random() * 0.3 : 0;
+    return Math.max(
+      0.1,
+      Math.min(0.95, base + wave1 + wave2 + wave3 + noise + peak)
+    );
+  });
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  waveform: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  barContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+  },
+  bar: {
+    borderRadius: 1.5,
+    minHeight: 4,
+  },
+  progressLine: {
+    position: 'absolute',
+    width: 2,
+    borderRadius: 1,
+    opacity: 0.9,
+    top: '2.5%',
+    zIndex: 10,
+  },
+});

package/dist/templates/components/ui/avatar.tsx

@@ -0,0 +1,84 @@
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { FONT_SIZE } from '@/theme/globals';
+import { ImageProps, ImageSource } from 'expo-image';
+import { TextStyle, ViewStyle } from 'react-native';
+
+interface AvatarProps {
+  children: React.ReactNode;
+  size?: number;
+  style?: ViewStyle;
+}
+
+export function Avatar({ children, size = 40, style }: AvatarProps) {
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          overflow: 'hidden',
+          position: 'relative',
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+interface AvatarImageProps {
+  source: ImageSource;
+  style?: ImageProps['style'];
+}
+
+export function AvatarImage({ source, style }: AvatarImageProps) {
+  return <Image source={source} style={[style]} />;
+}
+
+interface AvatarFallbackProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export function AvatarFallback({
+  children,
+  style,
+  textStyle,
+}: AvatarFallbackProps) {
+  const mutedColor = useColor('muted');
+  const mutedForegroundColor = useColor('mutedForeground');
+
+  return (
+    <View
+      style={[
+        {
+          width: '100%',
+          height: '100%',
+          backgroundColor: mutedColor,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          {
+            color: mutedForegroundColor,
+            fontSize: FONT_SIZE,
+            fontWeight: '500',
+          },
+          textStyle,
+        ]}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+}

package/dist/templates/components/ui/avoid-keyboard.tsx

@@ -0,0 +1,49 @@
+import { useKeyboardHeight } from '@/hooks/useKeyboardHeight';
+import { useEffect } from 'react';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+type Props = { offset?: number; duration?: number };
+
+export const AvoidKeyboard = ({ offset = 0, duration = 0 }: Props) => {
+  const { keyboardHeight, isKeyboardVisible, keyboardAnimationDuration } =
+    useKeyboardHeight();
+
+  // Shared value for the keyboard padding animation
+  const keyboardValue = useSharedValue(0);
+
+  // Update the shared value when keyboard height changes
+  useEffect(() => {
+    // Use different easing for show vs hide to match native behavior
+    const easing = isKeyboardVisible
+      ? Easing.out(Easing.quad) // Smooth out for keyboard show
+      : Easing.in(Easing.quad); // Smooth in for keyboard hide
+
+    // Only add offset when keyboard is visible
+    const targetHeight = isKeyboardVisible ? keyboardHeight + offset : 0;
+
+    keyboardValue.value = withTiming(targetHeight, {
+      duration: keyboardAnimationDuration + duration,
+      easing,
+    });
+  }, [
+    keyboardHeight,
+    keyboardAnimationDuration,
+    isKeyboardVisible,
+    offset,
+    duration,
+  ]);
+
+  // Animated style
+  const keyboardMargin = useAnimatedStyle(() => {
+    return {
+      height: keyboardValue.value,
+    };
+  });
+
+  return <Animated.View style={keyboardMargin} />;
+};

package/dist/templates/components/ui/badge.tsx

@@ -0,0 +1,88 @@
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { CORNERS } from '@/theme/globals';
+import { TextStyle, ViewStyle } from 'react-native';
+
+type BadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'success';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export function Badge({
+  children,
+  variant = 'default',
+  style,
+  textStyle,
+}: BadgeProps) {
+  const primaryColor = useColor('primary');
+  const primaryForegroundColor = useColor('primaryForeground');
+  const secondaryColor = useColor('secondary');
+  const secondaryForegroundColor = useColor('secondaryForeground');
+  const destructiveColor = useColor('destructive');
+  const destructiveForegroundColor = useColor('destructiveForeground');
+  const borderColor = useColor('border');
+  const successColor = useColor('green');
+
+  const getBadgeStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 6,
+      paddingHorizontal: 12,
+      borderRadius: CORNERS,
+    };
+
+    switch (variant) {
+      case 'secondary':
+        return { ...baseStyle, backgroundColor: secondaryColor };
+      case 'destructive':
+        return { ...baseStyle, backgroundColor: destructiveColor };
+      case 'success':
+        return { ...baseStyle, backgroundColor: successColor };
+      case 'outline':
+        return {
+          ...baseStyle,
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor,
+        };
+      default:
+        return { ...baseStyle, backgroundColor: primaryColor };
+    }
+  };
+
+  const getTextStyle = (): TextStyle => {
+    const baseTextStyle: TextStyle = {
+      fontSize: 15,
+      fontWeight: '500',
+      textAlign: 'center',
+    };
+
+    switch (variant) {
+      case 'secondary':
+        return { ...baseTextStyle, color: secondaryForegroundColor };
+      case 'destructive':
+        return { ...baseTextStyle, color: destructiveForegroundColor };
+      case 'outline':
+        return { ...baseTextStyle, color: primaryColor };
+      default:
+        return { ...baseTextStyle, color: primaryForegroundColor };
+    }
+  };
+
+  return (
+    <View style={[getBadgeStyle(), style]}>
+      <Text style={[getTextStyle(), textStyle]}>{children}</Text>
+    </View>
+  );
+}