vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,149 +0,0 @@
-import React, { useEffect } from 'react';
-import { View, type ViewStyle } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { tv } from 'tailwind-variants';
-
-const progressStyles = tv({
-  slots: {
-    container: 'w-full overflow-hidden bg-muted',
-    indicator: 'h-full bg-primary',
-  },
-});
-
-interface ProgressProps {
-  value: number; // 0-100
-  style?: ViewStyle & { className?: string };
-  height?: number;
-  indicatorClassName?: string;
-  onValueChange?: (value: number) => void;
-  onSeekStart?: () => void;
-  onSeekEnd?: () => void;
-  interactive?: boolean;
-}
-
-export function Progress({
-  value,
-  style,
-  height = 8,
-  indicatorClassName,
-  onValueChange,
-  onSeekStart,
-  onSeekEnd,
-  interactive = false,
-}: ProgressProps) {
-  const { container, indicator } = progressStyles();
-
-  const clampedValue = Math.max(0, Math.min(100, value));
-  const progressWidth = useSharedValue(clampedValue);
-  const containerWidth = useSharedValue(200); // Default width, will be updated
-  const isDragging = useSharedValue(false);
-
-  // Update animation when value prop changes (only if not dragging)
-  // Intentional: do not depend on shared values to avoid extra re-renders
-
-  useEffect(() => {
-    if (!isDragging.value) {
-      progressWidth.value = withTiming(clampedValue, { duration: 300 });
-    }
-  }, [clampedValue, isDragging.value, progressWidth]);
-
-  const updateValue = (newValue: number) => {
-    const clamped = Math.max(0, Math.min(100, newValue));
-    onValueChange?.(clamped);
-  };
-
-  const handleSeekStart = () => {
-    isDragging.value = true;
-    onSeekStart?.();
-  };
-
-  const handleSeekEnd = () => {
-    isDragging.value = false;
-    onSeekEnd?.();
-  };
-
-  // Create pan gesture using the new Gesture API
-  const panGesture = Gesture.Pan()
-    .onStart(() => {
-      'worklet';
-      if (!interactive) return;
-      runOnJS(handleSeekStart)();
-    })
-    .onUpdate((event) => {
-      'worklet';
-      if (!interactive) return;
-
-      // Calculate new progress based on gesture position
-      const newProgress = (event.x / containerWidth.value) * 100;
-      const clampedProgress = Math.max(0, Math.min(100, newProgress));
-
-      progressWidth.value = clampedProgress;
-      runOnJS(updateValue)(clampedProgress);
-    })
-    .onEnd(() => {
-      'worklet';
-      if (!interactive) return;
-      runOnJS(handleSeekEnd)();
-    });
-
-  // Create tap gesture for direct seeking
-  const tapGesture = Gesture.Tap().onStart((event) => {
-    'worklet';
-    if (!interactive) return;
-
-    runOnJS(handleSeekStart)();
-
-    // Calculate progress based on tap position
-    const newProgress = (event.x / containerWidth.value) * 100;
-    const clampedProgress = Math.max(0, Math.min(100, newProgress));
-
-    progressWidth.value = withTiming(clampedProgress, { duration: 200 });
-    runOnJS(updateValue)(clampedProgress);
-
-    setTimeout(() => {
-      runOnJS(handleSeekEnd)();
-    }, 200);
-  });
-
-  // Combine gestures
-  const combinedGesture = Gesture.Race(panGesture, tapGesture);
-
-  const animatedProgressStyle = useAnimatedStyle(() => {
-    return {
-      width: `${progressWidth.value}%`,
-    };
-  });
-
-  const onLayout = (event: any) => {
-    containerWidth.value = event.nativeEvent.layout.width;
-  };
-
-  const renderIndicator = () => (
-    <Animated.View
-      className={indicator({ class: indicatorClassName })}
-      style={[{ borderRadius: height / 2 }, animatedProgressStyle]}
-    />
-  );
-
-  const containerProps = {
-    className: container({ class: style?.className }),
-    style: { height, borderRadius: height / 2, ...style },
-    onLayout: onLayout,
-  };
-
-  if (interactive) {
-    return (
-      <GestureDetector gesture={combinedGesture}>
-        <Animated.View {...containerProps}>{renderIndicator()}</Animated.View>
-      </GestureDetector>
-    );
-  }
-
-  return <View {...containerProps}>{renderIndicator()}</View>;
-}

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

@@ -1,261 +0,0 @@
-import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
-import { FlashList } from '@shopify/flash-list';
-import * as React from 'react';
-import type { FieldValues } from 'react-hook-form';
-import { useController } from 'react-hook-form';
-import type { PressableProps } from 'react-native';
-import { Platform, View } from 'react-native';
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import { tv } from 'tailwind-variants';
-
-import { CaretDown } from '@/components/ui/icons';
-
-import type { InputControllerType } from './inputs/input';
-import { Modal, useModal } from './overlays/modal';
-import { Pressable } from './pressable';
-import { Text } from './text';
-
-const selectTv = tv({
-  slots: {
-    container: 'mb-4',
-    label: 'mb-1 text-lg text-neutral-900 dark:text-neutral-100',
-    input:
-      'mt-0 flex-row items-center justify-center rounded-xl border-[0.5px] border-neutral-300 bg-neutral-100 px-3  py-4 dark:border-neutral-500 dark:bg-neutral-900',
-    inputValue: 'text-neutral-700 dark:text-neutral-100',
-  },
-
-  variants: {
-    focused: {
-      true: {
-        input: 'border-neutral-600',
-      },
-    },
-    error: {
-      true: {
-        input: 'border-danger-600',
-        label: 'text-danger-600 dark:text-danger-600',
-        inputValue: 'text-danger-600',
-      },
-    },
-    disabled: {
-      true: {
-        input: 'bg-neutral-200',
-      },
-    },
-  },
-  defaultVariants: {
-    error: false,
-    disabled: false,
-  },
-});
-
-const List = Platform.OS === 'web' ? FlashList : BottomSheetFlatList;
-
-export type OptionType = { label: string; value: string | number };
-
-type OptionsProps = {
-  options: OptionType[];
-  onSelect: (option: OptionType) => void;
-  value?: string | number;
-  testID?: string;
-};
-
-function keyExtractor(item: OptionType) {
-  return `select-item-${item.value}`;
-}
-
-export const Options = React.forwardRef<any, OptionsProps>(
-  ({ options, onSelect, value, testID }, ref) => {
-    const snapPoints = React.useMemo(() => ['40%'], []);
-
-    const renderSelectItem = React.useCallback(
-      ({ item }: { item: OptionType }) => {
-        const isSelected = value === item.value;
-        console.log('Option render:', {
-          itemValue: item.value,
-          itemLabel: item.label,
-          propValue: value,
-          isSelected,
-          comparison: `${value} === ${item.value}`,
-        });
-        return (
-          <Option
-            key={`select-item-${item.value}`}
-            label={item.label}
-            selected={isSelected}
-            onPress={() => onSelect(item)}
-            testID={testID ? `${testID}-item-${item.value}` : undefined}
-          />
-        );
-      },
-      [onSelect, value, testID],
-    );
-
-    return (
-      <Modal ref={ref} snapPoints={snapPoints}>
-        <List
-          data={options}
-          keyExtractor={keyExtractor}
-          renderItem={renderSelectItem}
-          testID={testID ? `${testID}-modal` : undefined}
-          estimatedItemSize={52}
-        />
-      </Modal>
-    );
-  },
-);
-
-const Option = React.memo(
-  ({
-    label,
-    selected = false,
-    ...props
-  }: PressableProps & {
-    selected?: boolean;
-    label: string;
-  }) => {
-    console.log('Option component render:', { label, selected });
-    return (
-      <Pressable className="flex-row items-center p-4" {...props}>
-        <Text className="flex-1 text-base dark:text-neutral-100">{label}</Text>
-        {selected && <Check />}
-      </Pressable>
-    );
-  },
-);
-
-export interface SelectProps {
-  value?: string | number;
-  label?: string;
-  disabled?: boolean;
-  error?: string;
-  options?: OptionType[];
-  onSelect?: (value: string | number) => void;
-  placeholder?: string;
-  testID?: string;
-}
-interface ControlledSelectProps<T extends FieldValues>
-  extends SelectProps,
-    InputControllerType<T> {}
-
-export const Select = (props: SelectProps) => {
-  const {
-    label,
-    value,
-    error,
-    options = [],
-    placeholder = 'select...',
-    disabled = false,
-    onSelect,
-    testID,
-  } = props;
-  const modal = useModal();
-
-  const onSelectOption = React.useCallback(
-    (option: OptionType) => {
-      onSelect?.(option.value);
-      modal.dismiss();
-    },
-    [modal, onSelect],
-  );
-
-  const styles = React.useMemo(
-    () =>
-      selectTv({
-        error: Boolean(error),
-        disabled,
-      }),
-    [error, disabled],
-  );
-
-  const textValue = React.useMemo(
-    () =>
-      value !== undefined
-        ? (options?.find((t) => t.value === value)?.label ?? placeholder)
-        : placeholder,
-    [value, options, placeholder],
-  );
-
-  return (
-    <>
-      <View className={styles.container()}>
-        {label && (
-          <Text
-            testID={testID ? `${testID}-label` : undefined}
-            className={styles.label()}
-          >
-            {label}
-          </Text>
-        )}
-        <Pressable
-          className={styles.input()}
-          disabled={disabled}
-          onPress={modal.present}
-          testID={testID ? `${testID}-trigger` : undefined}
-        >
-          <View className="flex-1">
-            <Text className={styles.inputValue()}>{textValue}</Text>
-          </View>
-          <CaretDown />
-        </Pressable>
-        {error && (
-          <Text
-            testID={testID ? `${testID}-error` : undefined}
-            className="text-sm text-danger-300 dark:text-danger-600"
-          >
-            {error}
-          </Text>
-        )}
-      </View>
-      <Options
-        testID={testID}
-        ref={modal.ref}
-        options={options}
-        onSelect={onSelectOption}
-      />
-    </>
-  );
-};
-
-// only used with react-hook-form
-export function ControlledSelect<T extends FieldValues>(
-  props: ControlledSelectProps<T>,
-) {
-  const { name, control, rules, onSelect: onNSelect, ...selectProps } = props;
-
-  const { field, fieldState } = useController({ control, name, rules });
-  const onSelect = React.useCallback(
-    (value: string | number) => {
-      field.onChange(value);
-      onNSelect?.(value);
-    },
-    [field, onNSelect],
-  );
-  return (
-    <Select
-      onSelect={onSelect}
-      value={field.value}
-      error={fieldState.error?.message}
-      {...selectProps}
-    />
-  );
-}
-
-const Check = ({ ...props }: SvgProps) => (
-  <Svg
-    width={25}
-    height={24}
-    fill="none"
-    viewBox="0 0 25 24"
-    {...props}
-    className="stroke-black dark:stroke-white"
-  >
-    <Path
-      d="m20.256 6.75-10.5 10.5L4.506 12"
-      strokeWidth={2.438}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </Svg>
-);