kynjal-cli 2.0.6 → 3.1.0

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

@@ -1,555 +0,0 @@
-import { useColor } from '@/hooks/useColor';
-import { BORDER_RADIUS } from '@/theme/globals';
-import { useEvent } from 'expo';
-import { useVideoPlayer, VideoSource, VideoView } from 'expo-video';
-import { Pause, Play, Volume2, VolumeX } from 'lucide-react-native';
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-} from 'react-native-gesture-handler';
-import Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-
-interface VideoProps {
-  source: VideoSource;
-  style?: ViewStyle;
-  seekBy?: number; // seconds to seek by on double tap
-  autoPlay?: boolean;
-  loop?: boolean;
-  muted?: boolean;
-  nativeControls?: boolean;
-  showControls?: boolean;
-  allowsFullscreen?: boolean;
-  allowsPictureInPicture?: boolean;
-  contentFit?: 'contain' | 'cover' | 'fill';
-  onLoad?: () => void;
-  onError?: (error: any) => void;
-  onPlaybackStatusUpdate?: (status: any) => void;
-  onFullscreenUpdate?: (isFullscreen: boolean) => void;
-  subtitles?: Array<{
-    start: number;
-    end: number;
-    text: string;
-  }>;
-}
-
-interface VideoRef {
-  play: () => void;
-  pause: () => void;
-  seekTo: (seconds: number) => void;
-  setVolume: (volume: number) => void;
-  getCurrentTime: () => number;
-  getDuration: () => number;
-  isPlaying: () => boolean;
-  isMuted: () => boolean;
-}
-
-// Helper function to format time
-const formatTime = (seconds: number): string => {
-  if (isNaN(seconds) || seconds < 0) return '0:00';
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.floor(seconds % 60);
-  return `${mins}:${secs.toString().padStart(2, '0')}`;
-};
-
-// --- Custom Reanimated Progress Bar ---
-const PROGRESS_HEIGHT = 8;
-const THUMB_SIZE = 16;
-
-interface ReanimatedProgressProps {
-  duration: number;
-  currentTime: number;
-  onSeek: (progress: number) => void;
-  onSeekStart?: () => void;
-  onSeekEnd?: () => void;
-}
-
-const ReanimatedProgress = ({
-  duration,
-  currentTime,
-  onSeek,
-  onSeekStart,
-  onSeekEnd,
-}: ReanimatedProgressProps) => {
-  const [barWidth, setBarWidth] = useState(0);
-  const isScrubbing = useSharedValue(false);
-  const translateX = useSharedValue(0);
-  const scale = useSharedValue(1);
-
-  useDerivedValue(() => {
-    if (!isScrubbing.value && duration > 0 && barWidth > 0) {
-      const progress = currentTime / duration;
-      translateX.value = withTiming(progress * barWidth, { duration: 100 });
-    }
-  });
-
-  const panGesture = Gesture.Pan()
-    .minDistance(1)
-    .onBegin(() => {
-      isScrubbing.value = true;
-      scale.value = withTiming(1.2);
-      if (onSeekStart) runOnJS(onSeekStart)();
-    })
-    .onChange((event) => {
-      translateX.value = Math.max(
-        0,
-        Math.min(barWidth, translateX.value + event.changeX)
-      );
-    })
-    .onEnd(() => {
-      const finalProgress = translateX.value / barWidth;
-      runOnJS(onSeek)(finalProgress);
-      isScrubbing.value = false;
-      scale.value = withTiming(1);
-      if (onSeekEnd) runOnJS(onSeekEnd)();
-    });
-
-  const tapGesture = Gesture.Tap()
-    .onBegin(() => {
-      if (onSeekStart) runOnJS(onSeekStart)();
-    })
-    .onEnd((event) => {
-      const newTranslateX = Math.max(0, Math.min(barWidth, event.x));
-      translateX.value = newTranslateX;
-      const finalProgress = newTranslateX / barWidth;
-      runOnJS(onSeek)(finalProgress);
-      if (onSeekEnd) runOnJS(onSeekEnd)();
-    });
-
-  const composedGesture = Gesture.Race(panGesture, tapGesture);
-
-  const animatedProgressStyle = useAnimatedStyle(() => ({
-    width: translateX.value,
-  }));
-
-  const animatedThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }, { scale: scale.value }],
-  }));
-
-  return (
-    <GestureDetector gesture={composedGesture}>
-      <Animated.View
-        style={progressStyles.container}
-        onLayout={(e) => setBarWidth(e.nativeEvent.layout.width)}
-      >
-        <View style={progressStyles.track} />
-        <Animated.View
-          style={[progressStyles.progress, animatedProgressStyle]}
-        />
-        <Animated.View
-          style={[progressStyles.thumbContainer, animatedThumbStyle]}
-        >
-          <View style={progressStyles.thumb} />
-        </Animated.View>
-      </Animated.View>
-    </GestureDetector>
-  );
-};
-
-// --- Main Video Component ---
-export const Video = forwardRef<VideoView, VideoProps>(
-  (
-    {
-      source,
-      style,
-      autoPlay = false,
-      loop = false,
-      muted = false,
-      nativeControls = false,
-      allowsFullscreen = true,
-      allowsPictureInPicture = true,
-      contentFit = 'cover',
-      onLoad,
-      onError,
-      seekBy = 2,
-      onPlaybackStatusUpdate,
-      onFullscreenUpdate,
-      subtitles = [],
-      ...props
-    },
-    ref
-  ) => {
-    const textColor = useColor('text');
-    const cardColor = useColor('card');
-    const mutedColor = useColor('mutedForeground');
-
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-    const [isMuted, setIsMuted] = useState(muted);
-    const [currentSubtitle, setCurrentSubtitle] = useState<string>('');
-    const [isVideoEnded, setIsVideoEnded] = useState(false);
-    const [showPlayIcon, setShowPlayIcon] = useState(false);
-    const [showCustomControls, setShowCustomControls] = useState(false);
-    const [isSeeking, setIsSeeking] = useState(false);
-
-    const hideControlsTimeout = useRef<number | null>(null);
-    const hidePlayIconTimeout = useRef<number | null>(null);
-
-    const controlsOpacity = useSharedValue(0);
-    const playIconOpacity = useSharedValue(0);
-
-    const player = useVideoPlayer(source, (player) => {
-      try {
-        if (autoPlay && player.play) player.play();
-        player.loop = loop;
-        player.muted = muted;
-        onLoad?.();
-      } catch (error) {
-        console.error('Video player initialization error:', error);
-        onError?.(error);
-      }
-    });
-
-    const { isPlaying } = useEvent(player, 'playingChange', {
-      isPlaying: player?.playing || false,
-    });
-
-    // --- !! EFFECT UPDATED TO RESPECT isSeeking STATE !! ---
-    useEffect(() => {
-      const interval = setInterval(() => {
-        // Only update time from player if the user is not actively seeking
-        if (player && !isSeeking) {
-          const time = player.currentTime || 0;
-          const dur = player.duration || 0;
-          setCurrentTime(time);
-          if (dur > 0) setDuration(dur);
-
-          if (dur > 0 && time >= dur - 0.25 && !loop) setIsVideoEnded(true);
-          else setIsVideoEnded(false);
-
-          const activeSubtitle = subtitles.find(
-            (s) => time >= s.start && time <= s.end
-          );
-          setCurrentSubtitle(activeSubtitle?.text || '');
-
-          onPlaybackStatusUpdate?.({
-            currentTime: time,
-            duration: dur,
-            isPlaying: player.playing,
-          });
-        }
-      }, 250);
-
-      return () => clearInterval(interval);
-    }, [player, subtitles, onPlaybackStatusUpdate, loop, isSeeking]);
-
-    const controlsAnimatedStyle = useAnimatedStyle(() => ({
-      opacity: controlsOpacity.value,
-    }));
-
-    const playIconAnimatedStyle = useAnimatedStyle(() => ({
-      opacity: playIconOpacity.value,
-    }));
-
-    const showControls = useCallback(() => {
-      setShowCustomControls(true);
-      controlsOpacity.value = withTiming(1, { duration: 200 });
-
-      if (hideControlsTimeout.current)
-        clearTimeout(hideControlsTimeout.current);
-      if (isPlaying) {
-        // Only hide controls if video is playing
-        hideControlsTimeout.current = setTimeout(hideControls, 3000);
-      }
-    }, [controlsOpacity, isPlaying]);
-
-    const hideControls = useCallback(() => {
-      controlsOpacity.value = withTiming(0, { duration: 200 }, (isFinished) => {
-        if (isFinished) runOnJS(setShowCustomControls)(false);
-      });
-    }, [controlsOpacity]);
-
-    const showPlayIconAnimation = useCallback(() => {
-      setShowPlayIcon(true);
-      playIconOpacity.value = withTiming(1, { duration: 200 });
-
-      if (hidePlayIconTimeout.current)
-        clearTimeout(hidePlayIconTimeout.current);
-      hidePlayIconTimeout.current = setTimeout(() => {
-        playIconOpacity.value = withTiming(
-          0,
-          { duration: 200 },
-          (isFinished) => {
-            if (isFinished) runOnJS(setShowPlayIcon)(false);
-          }
-        );
-      }, 1000);
-    }, [playIconOpacity]);
-
-    const handleSingleTap = useCallback(() => {
-      if (!player) return;
-      if (isVideoEnded) {
-        player.currentTime = 0;
-        player.play();
-        setIsVideoEnded(false);
-      } else {
-        player.playing ? player.pause() : player.play();
-      }
-      showPlayIconAnimation();
-      showControls();
-    }, [player, isVideoEnded, showControls, showPlayIconAnimation]);
-
-    const handleLeftDoubleTap = useCallback(() => {
-      if (player) {
-        player.seekBy(-seekBy);
-        showControls();
-      }
-    }, [player, showControls, seekBy]);
-
-    const handleRightDoubleTap = useCallback(() => {
-      if (player) {
-        player.seekBy(seekBy);
-        showControls();
-      }
-    }, [player, showControls, seekBy]);
-
-    const toggleMute = useCallback(() => {
-      const newMuted = !isMuted;
-      setIsMuted(newMuted);
-      player.muted = newMuted;
-    }, [isMuted, player]);
-
-    const handleProgressChange = useCallback(
-      (progress: number) => {
-        if (!player || !duration || duration <= 0) return;
-        const newTime = progress * duration;
-        // This is the "optimistic update" - we set the local state immediately
-        setCurrentTime(newTime);
-        player.currentTime = newTime;
-        if (isVideoEnded) setIsVideoEnded(false);
-        // Reset the hide controls timer
-        if (hideControlsTimeout.current)
-          clearTimeout(hideControlsTimeout.current);
-        hideControlsTimeout.current = setTimeout(hideControls, 3000);
-      },
-      [player, duration, isVideoEnded, hideControls]
-    );
-
-    const handleSeekStart = useCallback(() => {
-      setIsSeeking(true);
-      if (hideControlsTimeout.current)
-        clearTimeout(hideControlsTimeout.current);
-    }, []);
-
-    const handleSeekEnd = useCallback(() => {
-      setIsSeeking(false);
-    }, []);
-
-    useEffect(() => {
-      return () => {
-        if (hideControlsTimeout.current)
-          clearTimeout(hideControlsTimeout.current);
-        if (hidePlayIconTimeout.current)
-          clearTimeout(hidePlayIconTimeout.current);
-      };
-    }, []);
-
-    return (
-      <GestureHandlerRootView
-        style={[styles.container, { backgroundColor: cardColor }, style]}
-      >
-        <VideoView
-          ref={ref}
-          player={player}
-          style={styles.video}
-          allowsFullscreen={allowsFullscreen}
-          allowsPictureInPicture={allowsPictureInPicture}
-          nativeControls={false}
-          contentFit={contentFit}
-          onFullscreenEnter={() => onFullscreenUpdate?.(true)}
-          onFullscreenExit={() => onFullscreenUpdate?.(false)}
-          {...props}
-        />
-        <View style={styles.gestureOverlay}>
-          <TouchableOpacity
-            style={styles.gestureArea}
-            onPress={handleLeftDoubleTap}
-            activeOpacity={0}
-          />
-          <TouchableOpacity
-            style={styles.gestureAreaCenter}
-            onPress={handleSingleTap}
-            activeOpacity={0}
-          />
-          <TouchableOpacity
-            style={styles.gestureArea}
-            onPress={handleRightDoubleTap}
-            activeOpacity={0}
-          />
-        </View>
-
-        {showCustomControls && (
-          <Animated.View
-            style={[styles.controlsContainer, controlsAnimatedStyle]}
-            pointerEvents='box-none'
-          >
-            <View style={styles.topControls}>
-              <TouchableOpacity
-                onPress={toggleMute}
-                style={styles.controlButton}
-                activeOpacity={0.7}
-              >
-                {isMuted ? (
-                  <VolumeX size={24} color={textColor} />
-                ) : (
-                  <Volume2 size={24} color={textColor} />
-                )}
-              </TouchableOpacity>
-            </View>
-
-            <View style={styles.bottomControls}>
-              <View style={styles.timeContainer}>
-                <Text style={[styles.timeText, { color: mutedColor }]}>
-                  {formatTime(currentTime)}
-                </Text>
-                <Text style={[styles.timeText, { color: mutedColor }]}>
-                  {formatTime(duration)}
-                </Text>
-              </View>
-
-              <ReanimatedProgress
-                duration={duration}
-                currentTime={currentTime}
-                onSeek={handleProgressChange}
-                onSeekStart={handleSeekStart}
-                onSeekEnd={handleSeekEnd}
-              />
-            </View>
-          </Animated.View>
-        )}
-      </GestureHandlerRootView>
-    );
-  }
-);
-
-Video.displayName = 'Video';
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: '100%',
-    borderRadius: BORDER_RADIUS,
-    overflow: 'hidden',
-  },
-  video: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: '100%',
-    height: '100%',
-  },
-  gestureOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    flexDirection: 'row',
-  },
-  gestureArea: { flex: 1, backgroundColor: 'transparent' },
-  gestureAreaCenter: { flex: 2, backgroundColor: 'transparent' },
-  centerPlayIcon: {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: [{ translateX: -40 }, { translateY: -40 }],
-    zIndex: 100,
-  },
-  centerPlayIconBackground: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  subtitleContainer: {
-    position: 'absolute',
-    bottom: 80,
-    left: 20,
-    right: 20,
-    alignItems: 'center',
-  },
-  subtitleText: {
-    fontSize: 16,
-    textAlign: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 6,
-  },
-  controlsContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    justifyContent: 'space-between',
-  },
-  topControls: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    padding: 16,
-  },
-  bottomControls: { padding: 16, gap: 6, paddingBottom: 6 },
-  timeContainer: { flexDirection: 'row', justifyContent: 'space-between' },
-  timeText: { fontSize: 12 },
-  controlButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-});
-const progressStyles = StyleSheet.create({
-  container: { height: THUMB_SIZE * 2, justifyContent: 'center' },
-  track: {
-    height: PROGRESS_HEIGHT,
-    backgroundColor: 'rgba(255, 255, 255, 0.3)',
-    borderRadius: PROGRESS_HEIGHT / 2,
-  },
-  progress: {
-    height: PROGRESS_HEIGHT,
-    backgroundColor: '#FFFFFF',
-    borderRadius: PROGRESS_HEIGHT / 2,
-    position: 'absolute',
-  },
-  thumbContainer: {
-    position: 'absolute',
-    top: (THUMB_SIZE * 2 - THUMB_SIZE) / 2,
-    left: -THUMB_SIZE / 2,
-  },
-  thumb: {
-    width: THUMB_SIZE,
-    height: THUMB_SIZE,
-    borderRadius: THUMB_SIZE / 2,
-    backgroundColor: '#FFFFFF',
-  },
-});
-
-export type { VideoProps, VideoRef, VideoSource };

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

@@ -1,14 +0,0 @@
-import { forwardRef } from 'react';
-import { View as RNView, type ViewProps } from 'react-native';
-
-export const View = forwardRef<RNView, ViewProps>(
-  ({ style, ...otherProps }, ref) => {
-    return (
-      <RNView
-        ref={ref}
-        style={[{ backgroundColor: 'transparent' }, style]}
-        {...otherProps}
-      />
-    );
-  }
-);

package/dist/templates/demo/accordion/accordion-controlled.tsx

@@ -1,55 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
-import { Text } from '@/components/ui/text';
-import { View } from '@/components/ui/view';
-import React from 'react';
-
-export function AccordionControlled() {
-  const [value, setValue] = React.useState<string | string[]>('');
-
-  return (
-    <View>
-      <Text variant='caption' style={{ marginBottom: 12 }}>
-        Currently open: {value || 'None'}
-      </Text>
-      <Accordion
-        type='single'
-        collapsible
-        value={value}
-        onValueChange={setValue}
-      >
-        <AccordionItem value='settings'>
-          <AccordionTrigger>Settings</AccordionTrigger>
-          <AccordionContent>
-            <Text>
-              Configure your application preferences, notifications, and account
-              settings here.
-            </Text>
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value='privacy'>
-          <AccordionTrigger>Privacy</AccordionTrigger>
-          <AccordionContent>
-            <Text>
-              Manage your privacy settings, data sharing preferences, and
-              visibility controls.
-            </Text>
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value='security'>
-          <AccordionTrigger>Security</AccordionTrigger>
-          <AccordionContent>
-            <Text>
-              Set up two-factor authentication, change passwords, and review
-              security logs.
-            </Text>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </View>
-  );
-}

package/dist/templates/demo/accordion/accordion-demo.tsx

@@ -1,38 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
-import { Text } from '@/components/ui/text';
-import React from 'react';
-
-export function AccordionDemo() {
-  return (
-    <Accordion type='single' collapsible defaultValue='item-1'>
-      <AccordionItem value='item-1'>
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          <Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value='item-2'>
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
-          <Text>
-            Yes. It comes with default styles that matches the other components'
-            aesthetic.
-          </Text>
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value='item-3'>
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
-          <Text>
-            Yes. It's animated by default, but you can disable it if you prefer.
-          </Text>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}

package/dist/templates/demo/accordion/accordion-faq.tsx

@@ -1,51 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
-import { Text } from '@/components/ui/text';
-import React from 'react';
-
-export function AccordionFAQ() {
-  return (
-    <Accordion type='single' collapsible>
-      <AccordionItem value='shipping'>
-        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
-        <AccordionContent>
-          <Text>
-            Standard shipping typically takes 3-5 business days. Express
-            shipping is available for 1-2 business days delivery.
-          </Text>
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value='returns'>
-        <AccordionTrigger>What is your return policy?</AccordionTrigger>
-        <AccordionContent>
-          <Text>
-            We offer a 30-day return policy for all items in original condition.
-            Return shipping is free for defective items.
-          </Text>
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value='warranty'>
-        <AccordionTrigger>Do you offer warranty?</AccordionTrigger>
-        <AccordionContent>
-          <Text>
-            Yes, all products come with a 1-year manufacturer warranty. Extended
-            warranty options are available at checkout.
-          </Text>
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value='support'>
-        <AccordionTrigger>How can I contact support?</AccordionTrigger>
-        <AccordionContent>
-          <Text>
-            You can reach our support team via email at support@example.com or
-            through our live chat feature available 24/7.
-          </Text>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}