vibefast-cli 0.7.0 → 0.7.1

package/2/apps/native/src/components/ui/core/spinner.tsx

@@ -1,387 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import React, { useEffect, useRef } from 'react';
-import {
-  ActivityIndicator,
-  Animated,
-  Modal,
-  View,
-  type ViewStyle,
-} from 'react-native';
-import { tv } from 'tailwind-variants';
-
-import { Text } from './text';
-
-// Types
-const spinnerStyles = tv({
-  slots: {
-    container: 'items-center justify-center',
-    label: 'text-center',
-    dotsContainer: 'flex-row',
-    dot: 'mx-1 rounded-full',
-    barsContainer: 'flex-row items-center',
-    bar: 'mx-px',
-  },
-  variants: {
-    size: {
-      sm: { label: 'text-sm', container: 'gap-1.5' },
-      default: { label: 'text-base', container: 'gap-2' },
-      lg: { label: 'text-lg', container: 'gap-2.5' },
-      icon: { label: 'text-base', container: 'gap-2' },
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
-
-export type SpinnerSize = 'default' | 'sm' | 'lg' | 'icon';
-export type SpinnerVariant =
-  | 'default'
-  | 'cirlce'
-  | 'dots'
-  | 'pulse'
-  | 'bars'
-  | 'icon';
-
-interface SpinnerProps {
-  size?: SpinnerSize;
-  variant?: SpinnerVariant;
-  label?: string;
-  showLabel?: boolean;
-  style?: ViewStyle & { className?: string };
-  color?: string;
-  thickness?: number;
-  speed?: 'slow' | 'normal' | 'fast';
-}
-
-interface LoadingOverlayProps extends SpinnerProps {
-  visible: boolean;
-  backdrop?: boolean;
-  backdropColor?: string;
-  backdropOpacity?: number;
-  onRequestClose?: () => void;
-}
-
-interface SpinnerConfig {
-  size: number;
-  iconSize: number;
-  fontSize: number;
-  gap: number;
-  thickness: number;
-}
-
-// Configuration
-const sizeConfig: Record<SpinnerSize, SpinnerConfig> = {
-  sm: { size: 16, iconSize: 16, fontSize: 12, gap: 6, thickness: 2 },
-  default: {
-    size: 24,
-    iconSize: 24,
-    fontSize: 14,
-    gap: 8,
-    thickness: 2,
-  },
-  lg: { size: 32, iconSize: 32, fontSize: 16, gap: 10, thickness: 3 },
-  icon: { size: 24, iconSize: 24, fontSize: 14, gap: 8, thickness: 2 },
-};
-
-const speedConfig = {
-  slow: 1500,
-  normal: 1000,
-  fast: 500,
-};
-
-// Main Spinner Component
-export function Spinner({
-  size = 'default',
-  variant = 'default',
-  label,
-  showLabel = false,
-  style,
-  color,
-  speed = 'normal',
-}: SpinnerProps) {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-  const pulseAnim = useRef(new Animated.Value(1)).current;
-  const dotsAnim = useRef([
-    new Animated.Value(0.3),
-    new Animated.Value(0.3),
-    new Animated.Value(0.3),
-  ]).current;
-  const barsAnim = useRef([
-    new Animated.Value(0.3),
-    new Animated.Value(0.3),
-    new Animated.Value(0.3),
-    new Animated.Value(0.3),
-  ]).current;
-
-  const {
-    container,
-    label: labelStyle,
-    dotsContainer,
-    dot,
-    barsContainer,
-    bar,
-  } = spinnerStyles({ size });
-
-  const config = sizeConfig[size];
-  const spinnerColor = color || 'text-primary'; // Use Tailwind color class
-  const animationDuration = speedConfig[speed];
-
-  // Rotation animation
-  useEffect(() => {
-    if (variant === 'cirlce') {
-      const rotateAnimation = Animated.loop(
-        Animated.timing(rotateAnim, {
-          toValue: 1,
-          duration: animationDuration,
-          useNativeDriver: true,
-        }),
-      );
-      rotateAnimation.start();
-      return () => rotateAnimation.stop();
-    }
-  }, [rotateAnim, variant, animationDuration]);
-
-  // Pulse animation
-  useEffect(() => {
-    if (variant === 'pulse') {
-      const pulseAnimation = Animated.loop(
-        Animated.sequence([
-          Animated.timing(pulseAnim, {
-            toValue: 1.3,
-            duration: animationDuration / 2,
-            useNativeDriver: true,
-          }),
-          Animated.timing(pulseAnim, {
-            toValue: 1,
-            duration: animationDuration / 2,
-            useNativeDriver: true,
-          }),
-        ]),
-      );
-      pulseAnimation.start();
-      return () => pulseAnimation.stop();
-    }
-  }, [pulseAnim, variant, animationDuration]);
-
-  // Dots animation
-  useEffect(() => {
-    if (variant === 'dots') {
-      const createDotAnimation = (animValue: Animated.Value, delay: number) =>
-        Animated.loop(
-          Animated.sequence([
-            Animated.delay(delay),
-            Animated.timing(animValue, {
-              toValue: 1,
-              duration: animationDuration / 3,
-              useNativeDriver: true,
-            }),
-            Animated.timing(animValue, {
-              toValue: 0.3,
-              duration: animationDuration / 3,
-              useNativeDriver: true,
-            }),
-          ]),
-        );
-
-      const animations = dotsAnim.map((anim, index) =>
-        createDotAnimation(anim, index * (animationDuration / 6)),
-      );
-
-      animations.forEach((anim) => anim.start());
-      return () => animations.forEach((anim) => anim.stop());
-    }
-  }, [dotsAnim, variant, animationDuration]);
-
-  // Bars animation
-  useEffect(() => {
-    if (variant === 'bars') {
-      const createBarAnimation = (animValue: Animated.Value, delay: number) =>
-        Animated.loop(
-          Animated.sequence([
-            Animated.delay(delay),
-            Animated.timing(animValue, {
-              toValue: 1,
-              duration: animationDuration / 4,
-              useNativeDriver: true,
-            }),
-            Animated.timing(animValue, {
-              toValue: 0.3,
-              duration: animationDuration / 4,
-              useNativeDriver: true,
-            }),
-          ]),
-        );
-
-      const animations = barsAnim.map((anim, index) =>
-        createBarAnimation(anim, index * (animationDuration / 8)),
-      );
-
-      animations.forEach((anim) => anim.start());
-      return () => animations.forEach((anim) => anim.stop());
-    }
-  }, [barsAnim, variant, animationDuration]);
-
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  const renderSpinner = () => {
-    switch (variant) {
-      case 'default':
-        return <ActivityIndicator size={config.size} color={spinnerColor} />;
-      case 'cirlce':
-        return (
-          <Animated.View
-            className="border-transparent border-b-primary border-r-primary"
-            style={[
-              {
-                width: config.size,
-                height: config.size,
-                borderRadius: config.size / 2,
-                borderWidth: config.thickness,
-                transform: [{ rotate: spin }],
-              },
-            ]}
-          />
-        );
-      case 'pulse':
-        return (
-          <Animated.View
-            className="rounded-full"
-            style={[
-              {
-                width: config.size,
-                height: config.size,
-                backgroundColor: spinnerColor,
-                transform: [{ scale: pulseAnim }],
-              },
-            ]}
-          />
-        );
-      case 'dots':
-        return (
-          <View className={dotsContainer()}>
-            {dotsAnim.map((anim, index) => (
-              <Animated.View
-                key={index}
-                className={dot()}
-                style={[
-                  {
-                    width: config.size / 3,
-                    height: config.size / 3,
-                    backgroundColor: spinnerColor,
-                    opacity: anim,
-                  },
-                ]}
-              />
-            ))}
-          </View>
-        );
-      case 'bars':
-        return (
-          <View className={barsContainer()}>
-            {barsAnim.map((anim, index) => (
-              <Animated.View
-                key={index}
-                className={bar()}
-                style={[
-                  {
-                    width: config.size / 5,
-                    height: config.size,
-                    backgroundColor: spinnerColor,
-                    opacity: anim,
-                  },
-                ]}
-              />
-            ))}
-          </View>
-        );
-      case 'icon':
-        return (
-          <Ionicons
-            name="refresh"
-            size={config.iconSize}
-            color={spinnerColor}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <View className={container({ class: style?.className })} style={style}>
-      {renderSpinner()}
-      {showLabel && label && <Text className={labelStyle()}>{label}</Text>}
-    </View>
-  );
-}
-
-// Loading Overlay Component
-export function LoadingOverlay({
-  visible,
-  label,
-  showLabel = true,
-  backdrop = true,
-  backdropColor,
-  backdropOpacity = 0.3,
-  onRequestClose,
-  ...spinnerProps
-}: LoadingOverlayProps) {
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <Modal
-      transparent
-      visible={visible}
-      animationType="fade"
-      onRequestClose={onRequestClose}
-    >
-      <View className="flex-1 items-center justify-center">
-        {backdrop && (
-          <View
-            className="absolute inset-0"
-            style={{
-              backgroundColor: backdropColor || 'black',
-              opacity: backdropOpacity,
-            }}
-          />
-        )}
-        <View className="items-center rounded-lg bg-background p-5">
-          <Spinner {...spinnerProps} />
-          {showLabel && label && (
-            <Text className="mt-4 text-foreground">{label}</Text>
-          )}
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-// Inline Loader Component (for buttons, etc.)
-export function InlineLoader({
-  size = 'sm',
-  variant = 'default',
-  color,
-}: Omit<SpinnerProps, 'label' | 'showLabel'>) {
-  return <Spinner size={size} variant={variant} color={color} />;
-}
-
-// Button Spinner Component - optimized for button usage
-export function ButtonSpinner({
-  size = 'sm',
-  variant = 'default',
-  color,
-}: Omit<SpinnerProps, 'label' | 'showLabel'>) {
-  return (
-    <Spinner
-      size={size}
-      variant={variant}
-      color={color || 'text-primary-foreground'}
-    />
-  );
-}

package/2/apps/native/src/components/ui/core/text.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import type { TextProps, TextStyle } from 'react-native';
-import { I18nManager, StyleSheet, Text as NNText } from 'react-native';
-import { twMerge } from 'tailwind-merge';
-
-import type { TxKeyPath } from '@/lib/i18n';
-import { translate } from '@/lib/i18n';
-
-interface Props extends TextProps {
-  className?: string;
-  tx?: TxKeyPath;
-}
-
-export const Text = ({
-  className = '',
-  style,
-  tx,
-  children,
-  ...props
-}: Props) => {
-  const textStyle = React.useMemo(
-    () =>
-      twMerge(
-        'text-base text-black dark:text-white font-inter font-normal',
-        className,
-      ),
-    [className],
-  );
-
-  const nStyle = React.useMemo(
-    () =>
-      StyleSheet.flatten([
-        {
-          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
-        },
-        style,
-      ]) as TextStyle,
-    [style],
-  );
-  return (
-    <NNText className={textStyle} style={nStyle} {...props}>
-      {tx ? translate(tx) : children}
-    </NNText>
-  );
-};

package/2/apps/native/src/components/ui/core/toast.tsx

@@ -1,190 +0,0 @@
-import { useColorScheme } from 'nativewind';
-import { Appearance } from 'react-native';
-import { toast } from 'sonner-native';
-
-import colors from '@/components/ui/colors';
-
-// Get current color scheme (fallback for non-hook usage)
-const getCurrentColorScheme = () => {
-  return Appearance.getColorScheme() || 'light';
-};
-
-// Helper function to extract error messages
-const extractError = (data: unknown): string => {
-  if (typeof data === 'string') {
-    return data;
-  }
-  if (Array.isArray(data)) {
-    const messages = data.map((item) => {
-      return `  ${extractError(item)}`;
-    });
-
-    return `${messages.join('')}`;
-  }
-
-  if (typeof data === 'object' && data !== null) {
-    const messages = Object.entries(data).map((item) => {
-      const [key, value] = item;
-      const separator = Array.isArray(value) ? ':\n ' : ': ';
-
-      return `- ${key}${separator}${extractError(value)} \n `;
-    });
-    return `${messages.join('')} `;
-  }
-  return 'Something went wrong ';
-};
-
-// Toast utility functions that integrate with your theme
-export const useToast = () => {
-  const { colorScheme } = useColorScheme();
-  const isDark = colorScheme === 'dark';
-
-  // Base toast options that match your theme
-  const getBaseOptions = () => ({
-    style: {
-      backgroundColor: isDark ? colors.neutral[900] : colors.white,
-      borderColor: isDark ? colors.neutral[600] : colors.neutral[300],
-      borderWidth: 1.5,
-    },
-    duration: 2000,
-  });
-
-  return {
-    // Success toast
-    success: (message: string, options?: any) => {
-      return toast.success(message, {
-        ...getBaseOptions(),
-        style: {
-          ...getBaseOptions().style,
-          backgroundColor: isDark ? colors.success[800] : colors.success[50],
-          borderColor: colors.success[500],
-        },
-        ...options,
-      });
-    },
-
-    // Error toast
-    error: (message: string, options?: any) => {
-      return toast.error(message, {
-        ...getBaseOptions(),
-        style: {
-          ...getBaseOptions().style,
-          backgroundColor: isDark ? colors.danger[800] : colors.danger[50],
-          borderColor: colors.danger[500],
-        },
-        duration: 5000, // Longer duration for errors
-        ...options,
-      });
-    },
-
-    // Warning toast
-    warning: (message: string, options?: any) => {
-      return toast.warning(message, {
-        ...getBaseOptions(),
-        style: {
-          ...getBaseOptions().style,
-          backgroundColor: isDark ? colors.warning[800] : colors.warning[50],
-          borderColor: colors.warning[500],
-        },
-        ...options,
-      });
-    },
-
-    // Info toast (default)
-    info: (message: string, options?: any) => {
-      return toast(message, {
-        ...getBaseOptions(),
-        style: {
-          ...getBaseOptions().style,
-          backgroundColor: isDark ? colors.primary[800] : colors.primary[50],
-          borderColor: colors.primary[500],
-        },
-        ...options,
-      });
-    },
-
-    // Basic toast
-    show: (message: string, options?: any) => {
-      return toast(message, {
-        ...getBaseOptions(),
-        ...options,
-      });
-    },
-
-    // Loading toast
-    loading: (message: string, options?: any) => {
-      return toast.loading(message, {
-        ...getBaseOptions(),
-        ...options,
-      });
-    },
-
-    // Promise toast
-    promise: <T,>(
-      promise: Promise<T>,
-      options: {
-        loading: string;
-        success: string | ((data: T) => string);
-        error: string | ((error: any) => string);
-      },
-    ) => {
-      return toast.promise(promise, {
-        loading: options.loading,
-        success:
-          typeof options.success === 'string'
-            ? () => options.success as string
-            : options.success,
-        error:
-          typeof options.error === 'string'
-            ? () => options.error as string
-            : options.error,
-        ...getBaseOptions(),
-      });
-    },
-
-    // Dismiss toasts
-    dismiss: (id?: string | number) => {
-      if (id) {
-        toast.dismiss(id.toString());
-      } else {
-        toast.dismiss();
-      }
-    },
-  };
-};
-
-export const showError = (error: Error | { response?: { data: unknown } }) => {
-  if (__DEV__) {
-    console.log('Error details:', error);
-  }
-
-  const isDark = getCurrentColorScheme() === 'dark';
-  const description = extractError(
-    'response' in error ? error.response?.data : error,
-  ).trimEnd();
-
-  toast.error('Error', {
-    description: description || 'An unexpected error occurred',
-    style: {
-      backgroundColor: isDark ? colors.danger[800] : colors.danger[50],
-      borderColor: colors.danger[500],
-      borderWidth: 1,
-    },
-    duration: 5000,
-  });
-};
-
-export const showErrorMessage = (message = 'Something went wrong') => {
-  const isDark = getCurrentColorScheme() === 'dark';
-  toast.error(message, {
-    style: {
-      backgroundColor: isDark ? colors.danger[800] : colors.danger[50],
-      borderColor: colors.danger[500],
-      borderWidth: 1,
-    },
-    duration: 4000,
-  });
-};
-
-// Re-export extractError for external usage
-export { extractError };

package/2/apps/native/src/components/ui/custom-switch.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-
-export type CustomSwitchProps = {
-  value: boolean;
-  onValueChange: (v: boolean) => void;
-  disabled?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  trackOnColor?: string;
-  trackOffColor?: string;
-  thumbColor?: string;
-};
-
-const sizes = {
-  sm: { w: 36, h: 20, pad: 2, thumb: 16 },
-  md: { w: 44, h: 26, pad: 3, thumb: 20 },
-  lg: { w: 56, h: 32, pad: 4, thumb: 24 },
-};
-
-export function CustomSwitch({
-  value,
-  onValueChange,
-  disabled,
-  size = 'md',
-  trackOnColor = '#10b981',
-  trackOffColor = '#e5e7eb',
-  thumbColor = '#ffffff',
-}: CustomSwitchProps) {
-  const cfg = sizes[size];
-  const offset = useSharedValue(value ? cfg.w - cfg.thumb - cfg.pad : cfg.pad);
-
-  React.useEffect(() => {
-    offset.value = withTiming(value ? cfg.w - cfg.thumb - cfg.pad : cfg.pad, {
-      duration: 150,
-    });
-  }, [value, cfg.w, cfg.thumb, cfg.pad, offset]);
-
-  const thumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: offset.value }],
-  }));
-
-  const toggle = () => {
-    if (disabled) return;
-    onValueChange(!value);
-  };
-
-  return (
-    <Pressable
-      onPress={toggle}
-      accessibilityRole="switch"
-      accessibilityState={{ checked: value, disabled }}
-    >
-      <View
-        style={{
-          width: cfg.w,
-          height: cfg.h,
-          borderRadius: cfg.h / 2,
-          backgroundColor: value ? trackOnColor : trackOffColor,
-          opacity: disabled ? 0.6 : 1,
-        }}
-      >
-        <Animated.View
-          style={[
-            {
-              position: 'absolute',
-              top: cfg.pad,
-              width: cfg.thumb,
-              height: cfg.thumb,
-              borderRadius: cfg.thumb / 2,
-              backgroundColor: thumbColor,
-              // simple shadow
-              shadowColor: '#000',
-              shadowOpacity: 0.15,
-              shadowRadius: 2,
-              elevation: 1,
-            },
-            thumbStyle,
-          ]}
-        />
-      </View>
-    </Pressable>
-  );
-}
-
-export default CustomSwitch;