vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,60 +0,0 @@
-import { FlashList as NFlashList } from '@shopify/flash-list';
-import React from 'react';
-import { ActivityIndicator, View } from 'react-native';
-import Svg, { Circle, Path } from 'react-native-svg';
-
-import { Text } from './text';
-
-type Props = {
-  isLoading: boolean;
-};
-
-export const List = NFlashList;
-
-export const EmptyList = React.memo(({ isLoading }: Props) => {
-  return (
-    <View className="min-h-[400px] flex-1 items-center justify-center">
-      {!isLoading ? (
-        <View>
-          <NoData />
-          <Text className="pt-4 text-center">Sorry! No data found</Text>
-        </View>
-      ) : (
-        <ActivityIndicator />
-      )}
-    </View>
-  );
-});
-
-export const NoData = () => (
-  <Svg width={200} height={200} viewBox="0 0 647.636 632.174">
-    <Path
-      d="M411.146 142.174h-174.51a15.018 15.018 0 0 0-15 15v387.85l-2 .61-42.81 13.11a8.007 8.007 0 0 1-9.99-5.31l-127.34-415.95a8.003 8.003 0 0 1 5.31-9.99l65.97-20.2 191.25-58.54 65.97-20.2a7.99 7.99 0 0 1 9.99 5.3l32.55 106.32Z"
-      fill="#f2f2f2"
-    />
-    <Path
-      d="m449.226 140.174-39.23-128.14a16.994 16.994 0 0 0-21.23-11.28l-92.75 28.39-191.24 58.55-92.75 28.4a17.015 17.015 0 0 0-11.28 21.23l134.08 437.93a17.027 17.027 0 0 0 16.26 12.03 16.79 16.79 0 0 0 4.97-.75l63.58-19.46 2-.62v-2.09l-2 .61-64.17 19.65a15.015 15.015 0 0 1-18.73-9.95L2.666 136.734a14.98 14.98 0 0 1 9.95-18.73l92.75-28.4 191.24-58.54 92.75-28.4a15.156 15.156 0 0 1 4.41-.66 15.015 15.015 0 0 1 14.32 10.61l39.05 127.56.62 2h2.08Z"
-      fill="#3f3d56"
-    />
-    <Path
-      d="M122.68 127.82a9.016 9.016 0 0 1-8.61-6.366l-12.88-42.072a8.999 8.999 0 0 1 5.97-11.24L283.1 14.278a9.009 9.009 0 0 1 11.24 5.971l12.88 42.072a9.01 9.01 0 0 1-5.97 11.241l-175.94 53.864a8.976 8.976 0 0 1-2.63.395Z"
-      fill="#7eb55a"
-    />
-    <Circle cx={190.154} cy={24.955} r={20} fill="#7eb55a" />
-    <Circle cx={190.154} cy={24.955} r={12.665} fill="#fff" />
-    <Path
-      d="M602.636 582.174h-338a8.51 8.51 0 0 1-8.5-8.5v-405a8.51 8.51 0 0 1 8.5-8.5h338a8.51 8.51 0 0 1 8.5 8.5v405a8.51 8.51 0 0 1-8.5 8.5Z"
-      fill="#e6e6e6"
-    />
-    <Path
-      d="M447.136 140.174h-210.5a17.024 17.024 0 0 0-17 17v407.8l2-.61v-407.19a15.018 15.018 0 0 1 15-15h211.12Zm183.5 0h-394a17.024 17.024 0 0 0-17 17v458a17.024 17.024 0 0 0 17 17h394a17.024 17.024 0 0 0 17-17v-458a17.024 17.024 0 0 0-17-17Zm15 475a15.018 15.018 0 0 1-15 15h-394a15.018 15.018 0 0 1-15-15v-458a15.018 15.018 0 0 1 15-15h394a15.018 15.018 0 0 1 15 15Z"
-      fill="#3f3d56"
-    />
-    <Path
-      d="M525.636 184.174h-184a9.01 9.01 0 0 1-9-9v-44a9.01 9.01 0 0 1 9-9h184a9.01 9.01 0 0 1 9 9v44a9.01 9.01 0 0 1-9 9Z"
-      fill="#7eb55a"
-    />
-    <Circle cx={433.636} cy={105.174} r={20} fill="#7eb55a" />
-    <Circle cx={433.636} cy={105.174} r={12.182} fill="#fff" />
-  </Svg>
-);

package/2/apps/native/src/components/ui/core/navigation/animated-header.tsx

@@ -1,87 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { Platform, View } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { useResponsiveSize } from '@/lib/hooks';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-import { Pressable } from '../pressable';
-import { Text } from '../text';
-
-type AnimatedHeaderProps = {
-  onBack: () => void;
-  title: string;
-  scrollY?: SharedValue<number>;
-  rightElement?: React.ReactNode;
-  leftIcon?: keyof typeof Ionicons.glyphMap;
-  showBorder?: boolean;
-  showBackButton?: boolean;
-};
-
-export function AnimatedHeader({
-  onBack,
-  title,
-  scrollY,
-  rightElement,
-  leftIcon = 'chevron-back',
-  showBorder = true,
-  showBackButton = true,
-}: AnimatedHeaderProps) {
-  const theme = useThemeConfig();
-  const isDarkMode = theme.dark;
-  const { isTablet } = useResponsiveSize();
-  const insets = useSafeAreaInsets();
-
-  const headerAnimatedStyle = useAnimatedStyle(() => {
-    if (!scrollY) return {};
-    return {
-      opacity: interpolate(scrollY.value, [0, 50], [1, 0], Extrapolation.CLAMP),
-    };
-  });
-
-  const borderStyles = showBorder
-    ? `border-b ${isDarkMode ? 'border-neutral-700/30' : 'border-neutral-200/50'}`
-    : '';
-
-  return (
-    <Animated.View
-      style={[
-        { paddingTop: insets.top + (Platform.OS === 'android' ? 10 : 0) },
-        scrollY ? headerAnimatedStyle : {},
-      ]}
-      className={`${scrollY ? 'absolute inset-x-0 top-0 z-10' : ''} flex-row items-center justify-between px-4 pb-2 ${borderStyles} ${isDarkMode ? 'bg-neutral-800/80' : 'bg-neutral-100/80'}`}
-    >
-      {showBackButton ? (
-        <Pressable
-          onPress={onBack}
-          hitSlop={8}
-          className={`items-center justify-center rounded-full ${isTablet ? 'size-12' : 'size-10'}`}
-        >
-          <Ionicons
-            name={leftIcon}
-            size={isTablet ? 30 : 24}
-            color={isDarkMode ? '#FFFFFF' : '#000000'}
-          />
-        </Pressable>
-      ) : (
-        <View className={`${isTablet ? 'w-12' : 'w-10'}`} />
-      )}
-      <Text
-        className={`font-semibold ${isTablet ? 'text-2xl' : 'text-xl'} ${isDarkMode ? 'text-white' : 'text-neutral-900'}`}
-      >
-        {title}
-      </Text>
-      {rightElement ? (
-        rightElement
-      ) : (
-        <View className={`${isTablet ? 'w-12' : 'w-10'}`} />
-      )}
-    </Animated.View>
-  );
-}

package/2/apps/native/src/components/ui/core/navigation/screen-footer.tsx

@@ -1,67 +0,0 @@
-import type { Ionicons } from '@expo/vector-icons';
-import { memo } from 'react';
-import { View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { Button } from '@/components/ui/core/button';
-
-type FooterButton = {
-  text: string;
-  onPress: () => void;
-  variant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'ghost';
-  icon?: keyof typeof Ionicons.glyphMap;
-  loading?: boolean;
-  disabled?: boolean;
-};
-
-type ScreenFooterProps = {
-  buttons: FooterButton[];
-  backgroundColor?: string;
-};
-
-export const ScreenFooter = memo(function ScreenFooter({
-  buttons,
-  backgroundColor,
-}: ScreenFooterProps) {
-  const insets = useSafeAreaInsets();
-
-  if (buttons.length === 0) return null;
-
-  return (
-    <View
-      className={`absolute inset-x-0 bottom-0 z-50 gap-3 px-4 pt-3 ${backgroundColor || 'bg-neutral-50/95 dark:bg-neutral-900/95'}`}
-      style={{
-        paddingBottom: insets.bottom + 12,
-        elevation: 50, // Android shadow/elevation
-        shadowColor: '#000', // iOS shadow
-        shadowOffset: { width: 0, height: -2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 8,
-      }}
-    >
-      {buttons.length === 1 ? (
-        <Button
-          label={buttons[0].text}
-          onPress={buttons[0].onPress}
-          variant={buttons[0].variant || 'default'}
-          loading={buttons[0].loading}
-          disabled={buttons[0].disabled}
-        />
-      ) : (
-        <View className="flex-row gap-3">
-          {buttons.map((button, index) => (
-            <Button
-              key={index}
-              label={button.text}
-              onPress={button.onPress}
-              variant={button.variant || (index === 0 ? 'outline' : 'default')}
-              loading={button.loading}
-              disabled={button.disabled}
-              className="flex-1"
-            />
-          ))}
-        </View>
-      )}
-    </View>
-  );
-});

package/2/apps/native/src/components/ui/core/overlays/dropdown.tsx

@@ -1,290 +0,0 @@
-import { FlashList } from '@shopify/flash-list';
-import type React from 'react';
-import { useEffect } from 'react';
-import {
-  type ListRenderItem,
-  PixelRatio,
-  type StyleProp,
-  StyleSheet,
-  Text,
-  type TextStyle,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-  type ViewStyle,
-} from 'react-native';
-import Animated, {
-  Easing,
-  Extrapolation,
-  interpolate,
-  ReduceMotion,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-
-const INPUT_HEIGHT = 60;
-
-export type DropdownPickerItem = {
-  id: string | number;
-  label: string;
-  value: any;
-  [key: string]: any;
-};
-
-type DropdownPickerProps<TItem extends DropdownPickerItem> = {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  data: TItem[];
-  onItemSelected: (item: TItem) => void;
-  inputHeight?: number;
-  renderItem?: ListRenderItem<TItem>;
-  placeholder?: string;
-  selectedValue?: TItem | null;
-  triggerContainerStyle?: StyleProp<ViewStyle>;
-  triggerTextStyle?: StyleProp<TextStyle>;
-  triggerIcon?: React.ReactElement;
-  dropdownBackgroundColor?: string;
-  dropdownMaxHeight?: number; // User-defined max height for the list itself
-  dropdownItemTextStyle?: StyleProp<TextStyle>;
-  dropdownSeparatorColor?: string;
-  animationDuration?: number;
-  reduceMotion?: 'never' | 'always' | 'system';
-  containerStyle?: StyleProp<ViewStyle>; // Overall container style
-  itemHeight?: number; // Optional: if you know the exact height of each item
-};
-
-const DropdownPicker = <TItem extends DropdownPickerItem>({
-  data,
-  onItemSelected,
-  isOpen,
-  setIsOpen,
-  renderItem,
-  placeholder = 'Select an item...',
-  selectedValue,
-  triggerContainerStyle,
-  triggerTextStyle,
-  triggerIcon,
-  dropdownBackgroundColor = '#FFFFFF',
-  dropdownMaxHeight,
-  dropdownItemTextStyle,
-  dropdownSeparatorColor = '#E0E0E0',
-  animationDuration = 300,
-  reduceMotion = 'system',
-  containerStyle,
-  itemHeight = 45, // Default estimated item height
-}: DropdownPickerProps<TItem>) => {
-  const animationProgress = useSharedValue(0);
-  const fontScale = PixelRatio.getFontScale();
-  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-  // Calculate default max height for the dropdown list part
-  const defaultListMaxHeight = dropdownMaxHeight || windowHeight * 0.4;
-  // Calculate the actual height the list content would take
-  const listContentActualHeight = data.length * itemHeight;
-  //take the min height this is useful for when the list is small
-  const listVisibleHeight = Math.min(
-    defaultListMaxHeight,
-    listContentActualHeight,
-  );
-
-  const motion =
-    reduceMotion === 'never'
-      ? ReduceMotion.Never
-      : reduceMotion === 'always'
-        ? ReduceMotion.Always
-        : ReduceMotion.System;
-
-  useEffect(() => {
-    const TIMING_CONFIG = {
-      duration: animationDuration,
-      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-      reduceMotion: motion,
-    };
-
-    if (isOpen) {
-      // Parent wants to open it
-      animationProgress.value = withTiming(1, TIMING_CONFIG);
-    } else {
-      // Parent wants to close it
-      animationProgress.value = withTiming(0, TIMING_CONFIG);
-    }
-  }, [isOpen, animationProgress, animationDuration, motion]);
-
-  const toggleDropdown = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const handleItemPress = (item: TItem) => {
-    onItemSelected(item);
-  };
-
-  const animatedOuterContainerStyle = useAnimatedStyle(() => {
-    // The outer container's height animates from INPUT_HEIGHT to INPUT_HEIGHT + listVisibleHeight
-    const height = interpolate(
-      animationProgress.value,
-      [0, 1],
-      [
-        INPUT_HEIGHT * fontScale,
-        INPUT_HEIGHT * fontScale + (data.length > 0 ? listVisibleHeight : 0),
-      ], // No extra height if no data
-      Extrapolation.CLAMP,
-    );
-    return { height };
-  });
-
-  const animatedDropdownContentStyle = useAnimatedStyle(() => {
-    const opacity = interpolate(
-      animationProgress.value,
-      [0, 0.5, 1], // Start fading in a bit later
-      [0, 0, 1],
-      Extrapolation.CLAMP,
-    );
-    const translateY = interpolate(
-      animationProgress.value,
-      [0, 1],
-      [-20, 0], // Slide down effect
-      Extrapolation.CLAMP,
-    );
-    return { opacity, transform: [{ translateY }] };
-  });
-
-  const animatedIconStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          rotate: `${interpolate(animationProgress.value, [0, 1], [0, 180])}deg`,
-        },
-      ],
-    };
-  });
-
-  const defaultRenderItem: ListRenderItem<TItem> = ({ item }) => (
-    <TouchableOpacity
-      style={styles.defaultItemContainer}
-      onPress={() => handleItemPress(item)}
-    >
-      <Text style={[styles.defaultItemText, dropdownItemTextStyle]}>
-        {item.label}
-      </Text>
-    </TouchableOpacity>
-  );
-
-  return (
-    <Animated.View
-      style={[
-        styles.outerContainer,
-        { width: windowWidth - 32, backgroundColor: dropdownBackgroundColor }, // Background here for the whole area
-        containerStyle,
-        animatedOuterContainerStyle, // Height animation here
-      ]}
-    >
-      <TouchableOpacity
-        activeOpacity={0.7}
-        onPress={toggleDropdown}
-        style={[
-          styles.triggerArea,
-          { height: INPUT_HEIGHT * fontScale },
-          triggerContainerStyle,
-        ]}
-      >
-        <Text style={[styles.triggerText, triggerTextStyle]} numberOfLines={1}>
-          {selectedValue ? selectedValue.label : placeholder}
-        </Text>
-        <Animated.View style={animatedIconStyle}>{triggerIcon}</Animated.View>
-      </TouchableOpacity>
-
-      {/* The list part, only rendered when isOpen for performance, animated for visual effect */}
-      {isOpen && data.length > 0 && (
-        <Animated.View
-          style={[styles.listWrapper, animatedDropdownContentStyle]}
-        >
-          {/* Use FlashList for better performance on larger lists */}
-          <FlashList
-            data={data}
-            // @ts-expect-error renderItem generic signature differs
-            renderItem={renderItem || defaultRenderItem}
-            keyExtractor={(item) => String(item.id)}
-            showsVerticalScrollIndicator={false}
-            keyboardShouldPersistTaps="handled"
-            ItemSeparatorComponent={
-              dropdownSeparatorColor
-                ? () => (
-                    <View
-                      style={[
-                        styles.separator,
-                        { backgroundColor: dropdownSeparatorColor },
-                      ]}
-                    />
-                  )
-                : () => <></>
-            }
-            style={{ maxHeight: listVisibleHeight }}
-            estimatedItemSize={itemHeight}
-            ListEmptyComponent={() => (
-              <View
-                style={[
-                  styles.emptyListContainer,
-                  animatedDropdownContentStyle,
-                ]}
-              >
-                <Text style={styles.emptyListText}>No items available</Text>
-              </View>
-            )}
-          />
-        </Animated.View>
-      )}
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  outerContainer: {
-    borderRadius: 8,
-    overflow: 'hidden',
-    zIndex: 1,
-  },
-  triggerArea: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    zIndex: 2,
-  },
-  triggerText: {
-    flex: 1,
-    fontSize: 16,
-    color: '#333',
-    marginRight: 8,
-  },
-  listWrapper: {
-    flex: 1,
-    marginTop: INPUT_HEIGHT,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  emptyListContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  emptyListText: {
-    color: '#888',
-    fontSize: 14,
-  },
-  defaultItemContainer: {
-    paddingVertical: 12,
-    paddingHorizontal: 15,
-  },
-  defaultItemText: {
-    fontSize: 16,
-    color: '#333',
-  },
-  separator: {
-    height: StyleSheet.hairlineWidth,
-    marginHorizontal: 16,
-  },
-});
-
-export default DropdownPicker;

package/2/apps/native/src/components/ui/core/overlays/full-screen-loading.tsx

@@ -1,15 +0,0 @@
-import type React from 'react';
-import { ActivityIndicator, Text, View } from 'react-native';
-
-/**
- * A simple full-screen loading indicator.
- */
-export function FullScreenLoading(): React.ReactElement {
-  return (
-    <View className="flex-1 items-center justify-center bg-background">
-      <ActivityIndicator size="large" color="#888888" />{' '}
-      {/* Use a theme color if available */}
-      <Text className="mt-2 text-muted-foreground">Loading...</Text>
-    </View>
-  );
-}

package/2/apps/native/src/components/ui/core/overlays/modal-keyboard-aware-scroll-view.tsx

@@ -1,46 +0,0 @@
-// source https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view
-/**
- * This component is used to handle the keyboard in a modal.
- * It is a wrapper around the `KeyboardAwareScrollView` component from `react-native-keyboard-controller`.
- * It is used to handle the keyboard in a modal.
- * example usage:
-      export function Example() {
-        return (
-          <Modal>
-            <BottomSheetKeyboardAwareScrollView>
-            </BottomSheetKeyboardAwareScrollView>
-          </Modal>
-        );
-        }
- */
-import {
-  type BottomSheetScrollViewMethods,
-  createBottomSheetScrollableComponent,
-  SCROLLABLE_TYPE,
-} from '@gorhom/bottom-sheet';
-import type { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/src/components/bottomSheetScrollable/types';
-import { memo } from 'react';
-import {
-  KeyboardAwareScrollView,
-  type KeyboardAwareScrollViewProps,
-} from 'react-native-keyboard-controller';
-import Reanimated from 'react-native-reanimated';
-
-const AnimatedScrollView =
-  Reanimated.createAnimatedComponent<KeyboardAwareScrollViewProps>(
-    KeyboardAwareScrollView,
-  );
-const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
-  BottomSheetScrollViewMethods,
-  BottomSheetScrollViewProps
->(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
-const BottomSheetKeyboardAwareScrollView = memo(BottomSheetScrollViewComponent);
-
-BottomSheetKeyboardAwareScrollView.displayName =
-  'BottomSheetKeyboardAwareScrollView';
-
-export default BottomSheetKeyboardAwareScrollView as (
-  props: BottomSheetScrollViewProps & KeyboardAwareScrollViewProps,
-) => ReturnType<typeof BottomSheetKeyboardAwareScrollView>;
-
-export { BottomSheetKeyboardAwareScrollView };