vibefast-cli 0.2.3 → 0.3.0

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

@@ -0,0 +1,317 @@
+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

@@ -0,0 +1,40 @@
+// 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

@@ -0,0 +1,264 @@
+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,
+});