kynjal-cli 2.0.6

package/dist/templates/components/ui/alert-dialog.tsx

@@ -0,0 +1,195 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { useColor } from '@/hooks/useColor';
+import React, { useEffect } from 'react';
+import {
+  Modal,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+export type AlertDialogProps = {
+  isVisible: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  dismissible?: boolean;
+  showCancelButton?: boolean;
+  style?: ViewStyle;
+};
+
+// A simple card-like dialog overlay with fade-in animation similar to BottomSheet's backdrop
+export function AlertDialog({
+  isVisible,
+  onClose,
+  title,
+  description,
+  children,
+  confirmText = 'OK',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  dismissible = true,
+  showCancelButton = true,
+  style,
+}: AlertDialogProps) {
+  const cardColor = useColor('card');
+
+  const [modalVisible, setModalVisible] = React.useState(false);
+  const backdropOpacity = useSharedValue(0);
+  const cardOpacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (isVisible) {
+      setModalVisible(true);
+      backdropOpacity.value = withTiming(1, { duration: 250 });
+      cardOpacity.value = withTiming(1, { duration: 200 });
+    } else {
+      backdropOpacity.value = withTiming(0, { duration: 250 }, (finished) => {
+        if (finished) {
+          runOnJS(setModalVisible)(false);
+        }
+      });
+      cardOpacity.value = withTiming(0, { duration: 200 });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isVisible]);
+
+  const rBackdropStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  const rCardFadeStyle = useAnimatedStyle(() => ({
+    opacity: cardOpacity.value,
+  }));
+
+  const animateClose = () => {
+    'worklet';
+    backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(onClose)();
+      }
+    });
+    cardOpacity.value = withTiming(0, { duration: 200 });
+  };
+
+  const handleBackdropPress = () => {
+    if (dismissible) {
+      animateClose();
+      if (onCancel) onCancel();
+    }
+  };
+
+  const handleCancel = () => {
+    if (onCancel) onCancel();
+    animateClose();
+  };
+
+  const handleConfirm = () => {
+    if (onConfirm) onConfirm();
+    animateClose();
+  };
+
+  return (
+    <Modal
+      visible={modalVisible}
+      transparent
+      statusBarTranslucent
+      animationType='none'
+    >
+      <Animated.View style={[styles.backdrop, rBackdropStyle]}>
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <Animated.View style={styles.backdropTouchableArea} />
+        </TouchableWithoutFeedback>
+
+        {/* Non-animated outer wrapper: handles rounded corners and clipping */}
+        <View
+          style={[styles.roundedWrapper, { backgroundColor: cardColor }, style]}
+        >
+          {/* Only fade the inner content */}
+          <Animated.View style={[styles.innerContent, rCardFadeStyle]}>
+            <Card
+              // Card has no rounded corners, background or shadow (delegated to wrapper)
+              style={{ backgroundColor: 'transparent', elevation: 0 }}
+            >
+              {(title || description) && (
+                <CardHeader>
+                  {title ? <CardTitle>{title}</CardTitle> : null}
+                  {description ? (
+                    <CardDescription>{description}</CardDescription>
+                  ) : null}
+                </CardHeader>
+              )}
+              {children ? <CardContent>{children}</CardContent> : null}
+              <CardFooter>
+                {showCancelButton && (
+                  <Button variant='outline' onPress={handleCancel}>
+                    {cancelText}
+                  </Button>
+                )}
+                <Button style={{ flex: 1 }} onPress={handleConfirm}>
+                  {confirmText}
+                </Button>
+              </CardFooter>
+            </Card>
+          </Animated.View>
+        </View>
+      </Animated.View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  backdropTouchableArea: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  // Rounded corners and clipping consolidated here (non-animated)
+  roundedWrapper: {
+    width: '100%',
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  // Inner content can render freely (only opacity is animated)
+  innerContent: {
+    width: '100%',
+  },
+});
+
+export function useAlertDialog() {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const open = React.useCallback(() => setIsVisible(true), []);
+  const close = React.useCallback(() => setIsVisible(false), []);
+  const toggle = React.useCallback(() => setIsVisible((v) => !v), []);
+  return { isVisible, open, close, toggle };
+}

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

@@ -0,0 +1,208 @@
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+import { Alert as RNAlert, TextStyle, ViewStyle } from 'react-native';
+
+type AlertVariant = 'default' | 'destructive';
+
+interface AlertProps {
+  children: React.ReactNode;
+  variant?: AlertVariant;
+  style?: ViewStyle;
+}
+
+// Visual Alert Component (existing functionality)
+export function Alert({ children, variant = 'default', style }: AlertProps) {
+  const borderColor = useColor('border');
+  const destructiveColor = useColor('destructive');
+  const backgroundColor = useColor('card');
+
+  return (
+    <View
+      style={[
+        {
+          padding: BORDER_RADIUS,
+          borderRadius: BORDER_RADIUS,
+          backgroundColor: backgroundColor,
+          borderWidth: 1,
+          borderColor:
+            variant === 'destructive' ? destructiveColor : borderColor,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+interface AlertTitleProps {
+  children: React.ReactNode;
+  style?: TextStyle;
+}
+
+export function AlertTitle({ children, style }: AlertTitleProps) {
+  return (
+    <Text variant='title' style={[style]}>
+      {children}
+    </Text>
+  );
+}
+
+interface AlertDescriptionProps {
+  children: React.ReactNode;
+  style?: TextStyle;
+}
+
+export function AlertDescription({ children, style }: AlertDescriptionProps) {
+  return (
+    <Text
+      variant='caption'
+      style={[
+        {
+          marginTop: 8,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+// Native Alert Functions
+interface AlertButton {
+  text: string;
+  onPress?: () => void;
+  style?: 'default' | 'cancel' | 'destructive';
+}
+
+interface NativeAlertOptions {
+  title: string;
+  message?: string;
+  buttons?: AlertButton[];
+  cancelable?: boolean;
+}
+
+// Two-button native alert
+export const createTwoButtonAlert = (options: NativeAlertOptions) => {
+  const { title, message, buttons } = options;
+
+  const defaultButtons: AlertButton[] = [
+    {
+      text: 'Cancel',
+      onPress: () => console.log('Cancel Pressed'),
+      style: 'cancel',
+    },
+    {
+      text: 'OK',
+      onPress: () => console.log('OK Pressed'),
+    },
+  ];
+
+  RNAlert.alert(title, message, buttons || defaultButtons);
+};
+
+// Three-button native alert
+export const createThreeButtonAlert = (options: NativeAlertOptions) => {
+  const { title, message, buttons } = options;
+
+  const defaultButtons: AlertButton[] = [
+    {
+      text: 'Ask me later',
+      onPress: () => console.log('Ask me later pressed'),
+    },
+    {
+      text: 'Cancel',
+      onPress: () => console.log('Cancel Pressed'),
+      style: 'cancel',
+    },
+    {
+      text: 'OK',
+      onPress: () => console.log('OK Pressed'),
+    },
+  ];
+
+  RNAlert.alert(title, message, buttons || defaultButtons);
+};
+
+// Generic native alert function
+export const showNativeAlert = (options: NativeAlertOptions) => {
+  const { title, message, buttons, cancelable = true } = options;
+
+  if (!buttons || buttons.length === 0) {
+    // Simple alert with just OK button
+    RNAlert.alert(title, message, [
+      {
+        text: 'OK',
+        onPress: () => console.log('OK Pressed'),
+      },
+    ]);
+  } else {
+    RNAlert.alert(title, message, buttons, { cancelable });
+  }
+};
+
+// Convenience functions for common alert types
+export const showSuccessAlert = (
+  title: string,
+  message?: string,
+  onOk?: () => void
+) => {
+  showNativeAlert({
+    title,
+    message,
+    buttons: [
+      {
+        text: 'OK',
+        onPress: onOk || (() => console.log('Success acknowledged')),
+      },
+    ],
+  });
+};
+
+export const showErrorAlert = (
+  title: string,
+  message?: string,
+  onOk?: () => void
+) => {
+  showNativeAlert({
+    title,
+    message,
+    buttons: [
+      {
+        text: 'OK',
+        onPress: onOk || (() => console.log('Error acknowledged')),
+        style: 'destructive',
+      },
+    ],
+  });
+};
+
+export const showConfirmAlert = (
+  title: string,
+  message?: string,
+  onConfirm?: () => void,
+  onCancel?: () => void
+) => {
+  showNativeAlert({
+    title,
+    message,
+    buttons: [
+      {
+        text: 'Cancel',
+        onPress: onCancel || (() => console.log('Cancelled')),
+        style: 'cancel',
+      },
+      {
+        text: 'Confirm',
+        onPress: onConfirm || (() => console.log('Confirmed')),
+      },
+    ],
+  });
+};
+
+// Export the React Native Alert for direct use
+export { RNAlert as NativeAlert };

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

@@ -0,0 +1,300 @@
+import { AudioWaveform } from '@/components/ui/audio-waveform';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Text } from '@/components/ui/text';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import { AudioSource, useAudioPlayer } from 'expo-audio';
+import { Pause, Play, RotateCcw, Square } from 'lucide-react-native';
+import { useCallback, useEffect, useState } from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+
+export interface AudioPlayerProps {
+  source: AudioSource;
+  style?: ViewStyle;
+  showControls?: boolean;
+  showWaveform?: boolean;
+  showTimer?: boolean;
+  showProgressBar?: boolean;
+  autoPlay?: boolean;
+  onPlaybackStatusUpdate?: (status: any) => void;
+}
+
+export function AudioPlayer({
+  source,
+  style,
+  showControls = true,
+  showWaveform = true,
+  showTimer = true,
+  showProgressBar = true,
+  autoPlay = false,
+  onPlaybackStatusUpdate,
+}: AudioPlayerProps) {
+  const player = useAudioPlayer(source);
+  const [duration, setDuration] = useState(0);
+  const [position, setPosition] = useState(0);
+  const [isSeeking, setIsSeeking] = useState(false);
+
+  // Enhanced waveform data - more bars for smoother visualization
+  const [waveformData] = useState<number[]>(
+    Array.from({ length: 60 }, (_, i) => {
+      // Create more varied and realistic waveform pattern
+      const base1 = Math.sin((i / 60) * Math.PI * 6) * 0.4 + 0.5;
+      const base2 = Math.sin((i / 60) * Math.PI * 2.5) * 0.3 + 0.4;
+      const noise = (Math.random() - 0.5) * 0.25;
+      const peak = Math.random() < 0.15 ? Math.random() * 0.4 : 0; // Occasional peaks
+      return Math.max(0.15, Math.min(0.95, (base1 + base2) / 2 + noise + peak));
+    })
+  );
+
+  // Theme colors
+  const redColor = useColor('destructive');
+  const secondaryColor = useColor('secondary');
+  const textColor = useColor('text');
+  const mutedColor = useColor('textMuted');
+
+  useEffect(() => {
+    if (autoPlay && player.isLoaded && !player.playing) {
+      player.play();
+    }
+  }, [autoPlay, player.isLoaded]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (player.isLoaded && !isSeeking) {
+        const currentTime = player.currentTime || 0;
+        const totalDuration = player.duration || 0;
+
+        setDuration(totalDuration);
+        setPosition(currentTime);
+
+        // Check if the audio finished
+        if (currentTime >= totalDuration && totalDuration > 0) {
+          player.seekTo(0);
+          player.pause(); // Ensure it's paused
+        }
+
+        if (onPlaybackStatusUpdate) {
+          onPlaybackStatusUpdate({
+            isLoaded: player.isLoaded,
+            playing: player.playing,
+            duration: totalDuration,
+            position: currentTime,
+          });
+        }
+      }
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, [player, onPlaybackStatusUpdate, isSeeking]);
+
+  const handlePlayPause = () => {
+    if (player.playing) {
+      player.pause();
+    } else {
+      player.play();
+    }
+  };
+
+  const handleBackFiveSeconds = () => {
+    const newPosition = Math.max(0, position - 5);
+    seekToPosition(newPosition);
+  };
+
+  const handleRestart = () => {
+    seekToPosition(0);
+  };
+
+  // Unified seeking function
+  const seekToPosition = useCallback(
+    (newPosition: number) => {
+      if (player.isLoaded && duration > 0) {
+        const clampedPosition = Math.max(0, Math.min(duration, newPosition));
+        player.seekTo(clampedPosition);
+        setPosition(clampedPosition);
+      }
+    },
+    [player, duration]
+  );
+
+  // Handle waveform seeking
+  const handleWaveformSeek = useCallback(
+    (seekPercentage: number) => {
+      if (duration > 0) {
+        const newPosition = (seekPercentage / 100) * duration;
+        seekToPosition(newPosition);
+      }
+    },
+    [duration, seekToPosition]
+  );
+
+  // Handle progress bar seeking
+  const handleProgressSeek = useCallback(
+    (progressValue: number) => {
+      if (duration > 0) {
+        const newPosition = (progressValue / 100) * duration;
+        seekToPosition(newPosition);
+      }
+    },
+    [duration, seekToPosition]
+  );
+
+  // Handle seeking start/end for smooth updates
+  const handleSeekStart = useCallback(() => {
+    setIsSeeking(true);
+  }, []);
+
+  const handleSeekEnd = useCallback(() => {
+    setIsSeeking(false);
+  }, []);
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const progressPercentage = duration > 0 ? (position / duration) * 100 : 0;
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: secondaryColor }, style]}
+    >
+      {/* Waveform Visualization with seeking capability */}
+      {showWaveform && (
+        <View style={styles.waveformContainer}>
+          <AudioWaveform
+            data={waveformData}
+            isPlaying={player.playing}
+            progress={progressPercentage}
+            onSeek={handleWaveformSeek}
+            onSeekStart={handleSeekStart}
+            onSeekEnd={handleSeekEnd}
+            height={80}
+            barCount={60}
+            barWidth={4}
+            barGap={1.5}
+            activeColor={redColor}
+            inactiveColor={mutedColor}
+            animated={true}
+            showProgress={true}
+            interactive={true} // Enable seeking
+          />
+        </View>
+      )}
+
+      {/* Interactive Progress Bar */}
+      {showProgressBar && (
+        <View style={styles.progressContainer}>
+          <Progress
+            value={progressPercentage}
+            onValueChange={handleProgressSeek}
+            onSeekStart={handleSeekStart}
+            onSeekEnd={handleSeekEnd}
+            interactive={true}
+            height={6}
+            style={styles.progressBar}
+          />
+        </View>
+      )}
+
+      {/* Controls */}
+      {showControls && (
+        <View style={styles.controlsContainer}>
+          <Button
+            variant='ghost'
+            size='icon'
+            onPress={handleBackFiveSeconds}
+            style={styles.controlButton}
+            disabled={!player.isLoaded}
+          >
+            <RotateCcw size={18} color={textColor} />
+          </Button>
+
+          <Button
+            size='icon'
+            variant='destructive'
+            onPress={handlePlayPause}
+            disabled={!player.isLoaded}
+            style={styles.playButton}
+          >
+            {player.playing ? (
+              <Pause size={24} color='white' />
+            ) : (
+              <Play size={24} color='white' />
+            )}
+          </Button>
+
+          <Button
+            variant='ghost'
+            size='icon'
+            onPress={handleRestart}
+            style={styles.controlButton}
+            disabled={!player.isLoaded}
+          >
+            <Square fill={textColor} size={18} color={textColor} />
+          </Button>
+        </View>
+      )}
+
+      {/* Timer */}
+      {showTimer && (
+        <View style={styles.timerContainer}>
+          <Text variant='caption' style={{ color: mutedColor }}>
+            {formatTime(position)} / {formatTime(duration)}
+          </Text>
+        </View>
+      )}
+
+      {/* Loading State */}
+      {!player.isLoaded && (
+        <View style={styles.loadingContainer}>
+          <Text variant='caption' style={{ color: mutedColor }}>
+            Loading audio...
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: BORDER_RADIUS,
+    padding: 16,
+    margin: 8,
+  },
+  waveformContainer: {
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  progressContainer: {
+    marginBottom: 12,
+    paddingHorizontal: 4,
+  },
+  progressBar: {
+    // Additional styling if needed
+  },
+  controlsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    marginBottom: 8,
+  },
+  controlButton: {
+    width: 40,
+    height: 40,
+  },
+  playButton: {
+    width: 56,
+    height: 56,
+  },
+  timerContainer: {
+    alignItems: 'center',
+  },
+  loadingContainer: {
+    alignItems: 'center',
+    padding: 8,
+  },
+});