vibefast-cli 0.6.2 → 0.7.1

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

@@ -1,317 +0,0 @@
-import type { Ionicons } from '@expo/vector-icons';
-import * as Haptics from 'expo-haptics';
-import React from 'react';
-import type { View } from 'react-native';
-import { ActivityIndicator, Text } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
-import type { VariantProps } from 'tailwind-variants';
-import { tv } from 'tailwind-variants';
-
-import { Icon } from '../extras/icon';
-import { type CustomPressableProps, Pressable } from './pressable';
-
-const button = tv({
-  slots: {
-    container:
-      'my-2 flex flex-row items-center justify-center gap-2 rounded-full px-4',
-    label: 'font-inter text-base font-medium',
-    indicator: 'h-6 text-white',
-  },
-
-  variants: {
-    variant: {
-      default: {
-        container: 'bg-black dark:bg-white',
-        label: 'text-white dark:text-black',
-        indicator: 'text-white dark:text-black',
-      },
-      secondary: {
-        container: 'bg-primary-600',
-        label: 'text-secondary-600',
-        indicator: 'text-white',
-      },
-      outline: {
-        container: 'border border-neutral-400/60',
-        label: 'text-black dark:text-neutral-100',
-        indicator: 'text-black dark:text-neutral-100',
-      },
-      destructive: {
-        container: 'bg-red-600',
-        label: 'text-white',
-        indicator: 'text-white',
-      },
-      ghost: {
-        container: 'bg-transparent',
-        label: 'text-black dark:text-white',
-        indicator: 'text-black dark:text-white',
-      },
-      link: {
-        container: 'bg-transparent',
-        label: 'text-black underline',
-        indicator: 'text-black',
-      },
-      success: {
-        container: 'bg-green-600',
-        label: 'text-white',
-        indicator: 'text-white',
-      },
-    },
-    size: {
-      default: {
-        container: 'h-16 px-4',
-        label: 'text-lg',
-      },
-      lg: {
-        container: 'h-20 px-8',
-        label: 'text-2xl',
-      },
-      slim: {
-        container: 'h-12 px-3',
-        label: 'text-sm',
-        indicator: 'h-2',
-      },
-      sm: {
-        container: 'h-8 px-3',
-        label: 'text-sm',
-        indicator: 'h-2',
-      },
-      icon: {
-        container: 'size-9 p-0',
-        label: 'text-base',
-      },
-    },
-    disabled: {
-      true: {
-        container: 'bg-neutral-200/60 dark:bg-neutral-800',
-        label: 'text-neutral-400 dark:text-neutral-500',
-        indicator: 'text-neutral-400 dark:text-neutral-500',
-      },
-    },
-    fullWidth: {
-      true: {
-        container: '',
-      },
-      false: {
-        container: 'self-center',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    disabled: false,
-    fullWidth: true,
-    size: 'default',
-  },
-});
-
-type ButtonVariants = VariantProps<typeof button>;
-interface Props extends ButtonVariants, Omit<CustomPressableProps, 'disabled'> {
-  label?: string;
-  loading?: boolean;
-  className?: string;
-  textClassName?: string;
-  // New enhanced features
-  icon?: keyof typeof Ionicons.glyphMap;
-  iconSize?: number;
-  animation?: boolean;
-  haptic?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-}
-
-export const Button = React.forwardRef<View, Props>(
-  (
-    {
-      label: text,
-      loading = false,
-      variant = 'default',
-      disabled = false,
-      size = 'default',
-      className = '',
-      testID,
-      textClassName = '',
-      icon,
-      iconSize,
-      animation = true,
-      haptic = true,
-      leftIcon,
-      rightIcon,
-      ...props
-    },
-    ref,
-  ) => {
-    // Destructure frequently used callback props to avoid broad 'props' deps
-    const {
-      onPressIn: onPressInProp,
-      onPressOut: onPressOutProp,
-      fullWidth,
-      children,
-    } = props;
-    const styles = React.useMemo(
-      () => button({ variant, disabled, size, fullWidth }),
-      [variant, disabled, size, fullWidth],
-    );
-
-    // Animation values for enhanced interactions
-    const scale = useSharedValue(1);
-    const opacity = useSharedValue(1);
-
-    // Get icon size based on button size
-    const computedIconSize = React.useMemo((): number => {
-      if (iconSize) return iconSize;
-      switch (size) {
-        case 'sm':
-          return 16;
-        case 'lg':
-          return 24;
-        case 'icon':
-          return 20;
-        default:
-          return 18;
-      }
-    }, [iconSize, size]);
-
-    // Trigger haptic feedback
-    const triggerHapticFeedback = React.useCallback(() => {
-      if (haptic && !disabled && !loading) {
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-      }
-    }, [haptic, disabled, loading]);
-
-    // Enhanced animation handlers
-    const handlePressIn = React.useCallback(
-      (event: any) => {
-        triggerHapticFeedback();
-
-        if (animation) {
-          scale.value = withSpring(0.95, {
-            damping: 15,
-            stiffness: 400,
-            mass: 0.5,
-          });
-          opacity.value = withSpring(0.8, {
-            damping: 20,
-            stiffness: 300,
-          });
-        }
-
-        onPressInProp?.(event);
-      },
-      [animation, triggerHapticFeedback, onPressInProp, scale, opacity],
-    );
-
-    const handlePressOut = React.useCallback(
-      (event: any) => {
-        if (animation) {
-          scale.value = withSpring(1, {
-            damping: 20,
-            stiffness: 400,
-            mass: 0.8,
-          });
-          opacity.value = withSpring(1, {
-            damping: 20,
-            stiffness: 300,
-          });
-        }
-
-        onPressOutProp?.(event);
-      },
-      [animation, onPressOutProp, scale, opacity],
-    );
-
-    // Animated styles
-    const animatedStyle = useAnimatedStyle(() => {
-      return {
-        transform: [{ scale: scale.value }],
-        opacity: opacity.value,
-      };
-    });
-
-    const getButtonContent = React.useCallback(() => {
-      if (loading) {
-        return (
-          <ActivityIndicator
-            size="small"
-            className={styles.indicator()}
-            testID={testID ? `${testID}-activity-indicator` : undefined}
-          />
-        );
-      }
-
-      return (
-        <>
-          {leftIcon}
-          {icon && (
-            <Icon
-              name={icon}
-              size={computedIconSize}
-              testID={testID ? `${testID}-icon` : undefined}
-            />
-          )}
-          {text && (
-            <Text
-              testID={testID ? `${testID}-label` : undefined}
-              className={styles.label({ className: textClassName })}
-            >
-              {text}
-            </Text>
-          )}
-          {rightIcon}
-        </>
-      );
-    }, [
-      loading,
-      leftIcon,
-      icon,
-      text,
-      rightIcon,
-      styles,
-      testID,
-      textClassName,
-      computedIconSize,
-    ]);
-
-    if (animation) {
-      return (
-        <Pressable
-          disabled={disabled || loading}
-          className={styles.container({ className })}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
-          ref={ref}
-          testID={testID}
-          {...props}
-        >
-          {(state) => (
-            <Animated.View
-              style={animatedStyle}
-              className="flex flex-row items-center gap-2"
-            >
-              {typeof children === 'function'
-                ? children(state)
-                : children || getButtonContent()}
-            </Animated.View>
-          )}
-        </Pressable>
-      );
-    }
-
-    return (
-      <Pressable
-        disabled={disabled || loading}
-        className={styles.container({ className })}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        {...props}
-        ref={ref}
-        testID={testID}
-      >
-        {children || getButtonContent()}
-      </Pressable>
-    );
-  },
-);

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

@@ -1,40 +0,0 @@
-// import { Link } from 'expo-router';
-// import React from 'react';
-
-// // import type { Post } from '@/api';
-// import { Image, Pressable, Text, View } from '@/components/ui';
-
-// type Props = Post;
-
-// const images = [
-//   'https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?auto=format&fit=crop&w=800&q=80',
-//   'https://images.unsplash.com/photo-1564507004663-b6dfb3c824d5?auto=format&fit=crop&w=800&q=80',
-//   'https://images.unsplash.com/photo-1515386474292-47555758ef2e?auto=format&fit=crop&w=800&q=80',
-//   'https://plus.unsplash.com/premium_photo-1666815503002-5f07a44ac8fb?auto=format&fit=crop&w=800&q=80',
-//   'https://images.unsplash.com/photo-1587974928442-77dc3e0dba72?auto=format&fit=crop&w=800&q=80',
-// ];
-
-// export const Card = ({ title, body, id }: Props) => {
-//   return (
-//     <Link href={`/feed/${id}`} asChild>
-//       <Pressable>
-//         <View className="m-2 overflow-hidden rounded-xl  border border-neutral-300 bg-white  dark:bg-neutral-900">
-//           <Image
-//             className="h-56 w-full overflow-hidden rounded-t-xl"
-//             contentFit="cover"
-//             source={{
-//               uri: images[Math.floor(Math.random() * images.length)],
-//             }}
-//           />
-
-//           <View className="p-2">
-//             <Text className="py-3 text-2xl ">{title}</Text>
-//             <Text numberOfLines={3} className="leading-snug text-neutral-600">
-//               {body}
-//             </Text>
-//           </View>
-//         </View>
-//       </Pressable>
-//     </Link>
-//   );
-// };

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

@@ -1,264 +0,0 @@
-import { MotiView } from 'moti';
-import React, { useCallback } from 'react';
-import {
-  I18nManager,
-  Pressable,
-  type PressableProps,
-  View,
-} from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-
-import colors from '@/components/ui/colors';
-
-import { Text } from './text';
-
-const SIZE = 20;
-const WIDTH = 50;
-const HEIGHT = 28;
-const THUMB_HEIGHT = 22;
-const THUMB_WIDTH = 22;
-const THUMB_OFFSET = 4;
-
-export interface RootProps extends Omit<PressableProps, 'onPress'> {
-  onChange: (checked: boolean) => void;
-  checked?: boolean;
-  className?: string;
-  accessibilityLabel: string;
-}
-
-export type IconProps = {
-  checked: boolean;
-};
-
-export const Root = ({
-  checked = false,
-  children,
-  onChange,
-  disabled,
-  className = '',
-  ...props
-}: RootProps) => {
-  const handleChange = useCallback(() => {
-    onChange(!checked);
-  }, [onChange, checked]);
-
-  return (
-    <Pressable
-      onPress={handleChange}
-      className={`flex-row items-center ${className} ${
-        disabled ? 'opacity-50' : ''
-      }`}
-      accessibilityState={{ checked }}
-      disabled={disabled}
-      {...props}
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-type LabelProps = {
-  text: string;
-  className?: string;
-  testID?: string;
-};
-
-const Label = ({ text, testID, className = '' }: LabelProps) => {
-  return (
-    <Text testID={testID} className={` ${className} pl-2`}>
-      {text}
-    </Text>
-  );
-};
-
-export const CheckboxIcon = ({ checked = false }: IconProps) => {
-  const color = checked ? colors.primary[300] : colors.neutral[400];
-  return (
-    <MotiView
-      style={{
-        height: SIZE,
-        width: SIZE,
-        borderColor: color,
-      }}
-      className="items-center justify-center rounded-[5px] border-2"
-      from={{ backgroundColor: 'transparent', borderColor: '#CCCFD6' }}
-      animate={{
-        backgroundColor: checked ? color : 'transparent',
-        borderColor: color,
-      }}
-      transition={{
-        backgroundColor: { type: 'timing', duration: 100 },
-        borderColor: { type: 'timing', duration: 100 },
-      }}
-    >
-      <MotiView
-        from={{ opacity: 0 }}
-        animate={{ opacity: checked ? 1 : 0 }}
-        transition={{ opacity: { type: 'timing', duration: 100 } }}
-      >
-        <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-          <Path
-            d="m16.726 7-.64.633c-2.207 2.212-3.878 4.047-5.955 6.158l-2.28-1.928-.69-.584L6 12.66l.683.577 2.928 2.477.633.535.591-.584c2.421-2.426 4.148-4.367 6.532-6.756l.633-.64L16.726 7Z"
-            fill="#fff"
-          />
-        </Svg>
-      </MotiView>
-    </MotiView>
-  );
-};
-
-const CheckboxRoot = ({ checked = false, children, ...props }: RootProps) => {
-  return (
-    <Root checked={checked} accessibilityRole="checkbox" {...props}>
-      {children}
-    </Root>
-  );
-};
-
-const CheckboxBase = ({
-  checked = false,
-  testID,
-  label,
-
-  ...props
-}: RootProps & { label?: string }) => {
-  return (
-    <CheckboxRoot checked={checked} testID={testID} {...props}>
-      <CheckboxIcon checked={checked} />
-      {label ? (
-        <Label
-          text={label}
-          testID={testID ? `${testID}-label` : undefined}
-          className="pr-2"
-        />
-      ) : null}
-    </CheckboxRoot>
-  );
-};
-
-export const Checkbox = Object.assign(CheckboxBase, {
-  Icon: CheckboxIcon,
-  Root: CheckboxRoot,
-  Label,
-});
-
-export const RadioIcon = ({ checked = false }: IconProps) => {
-  const color = checked ? colors.primary[300] : colors.neutral[400];
-  return (
-    <MotiView
-      style={{
-        height: SIZE,
-        width: SIZE,
-        borderColor: color,
-      }}
-      className="items-center justify-center rounded-[20px] border-2 bg-transparent"
-      from={{ borderColor: '#CCCFD6' }}
-      animate={{
-        borderColor: color,
-      }}
-      transition={{ borderColor: { duration: 100, type: 'timing' } }}
-    >
-      <MotiView
-        className={`size-[10px] rounded-[10px] ${checked && 'bg-primary-300'} `}
-        from={{ opacity: 0 }}
-        animate={{ opacity: checked ? 1 : 0 }}
-        transition={{ opacity: { duration: 50, type: 'timing' } }}
-      />
-    </MotiView>
-  );
-};
-
-const RadioRoot = ({ checked = false, children, ...props }: RootProps) => {
-  return (
-    <Root checked={checked} accessibilityRole="radio" {...props}>
-      {children}
-    </Root>
-  );
-};
-
-const RadioBase = ({
-  checked = false,
-  testID,
-  label,
-  ...props
-}: RootProps & { label?: string }) => {
-  return (
-    <RadioRoot checked={checked} testID={testID} {...props}>
-      <RadioIcon checked={checked} />
-      {label ? (
-        <Label text={label} testID={testID ? `${testID}-label` : undefined} />
-      ) : null}
-    </RadioRoot>
-  );
-};
-
-export const Radio = Object.assign(RadioBase, {
-  Icon: RadioIcon,
-  Root: RadioRoot,
-  Label,
-});
-
-export const SwitchIcon = ({ checked = false }: IconProps) => {
-  const translateX = checked
-    ? THUMB_OFFSET
-    : WIDTH - THUMB_WIDTH - THUMB_OFFSET;
-
-  const backgroundColor = checked ? colors.primary[300] : colors.neutral[400];
-
-  return (
-    <View className="w-[50px] justify-center">
-      <View className="overflow-hidden rounded-full">
-        <View
-          style={{
-            width: WIDTH,
-            height: HEIGHT,
-            backgroundColor,
-          }}
-        />
-      </View>
-      <MotiView
-        style={{
-          height: THUMB_HEIGHT,
-          width: THUMB_WIDTH,
-          position: 'absolute',
-          backgroundColor: 'white',
-          borderRadius: 13,
-          right: 0,
-        }}
-        animate={{
-          translateX: I18nManager.isRTL ? translateX : -translateX,
-        }}
-        transition={{ translateX: { overshootClamping: true } }}
-      />
-    </View>
-  );
-};
-const SwitchRoot = ({ checked = false, children, ...props }: RootProps) => {
-  return (
-    <Root checked={checked} accessibilityRole="switch" {...props}>
-      {children}
-    </Root>
-  );
-};
-
-const SwitchBase = ({
-  checked = false,
-  testID,
-  label,
-  ...props
-}: RootProps & { label?: string }) => {
-  return (
-    <SwitchRoot checked={checked} testID={testID} {...props}>
-      <SwitchIcon checked={checked} />
-      {label ? (
-        <Label text={label} testID={testID ? `${testID}-label` : undefined} />
-      ) : null}
-    </SwitchRoot>
-  );
-};
-
-export const Switch = Object.assign(SwitchBase, {
-  Icon: SwitchIcon,
-  Root: SwitchRoot,
-  Label,
-});