vibefast-cli 0.7.0 → 0.7.1

package/2/apps/native/src/app/(root)/(protected)/(tabs)/style/avatar.tsx

@@ -1,154 +0,0 @@
-import {
-  FocusAwareStatusBar,
-  SafeAreaView,
-  ScrollView,
-  View,
-} from '@/components/ui';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-
-export default function AvatarDemoScreen() {
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <SafeAreaView className="flex-1">
-        <ScrollView className="flex-1 px-4">
-          <View className="gap-8 py-6">
-            <View className="flex-row items-center">
-              <Avatar
-                size={48}
-                style={{ borderWidth: 2, borderColor: 'white', zIndex: 4 }}
-              >
-                <AvatarImage
-                  source={{
-                    uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
-                  }}
-                />
-                <AvatarFallback>AB</AvatarFallback>
-              </Avatar>
-
-              <Avatar
-                size={48}
-                style={{
-                  borderWidth: 2,
-                  borderColor: 'white',
-                  marginLeft: -12,
-                  zIndex: 3,
-                }}
-              >
-                <AvatarImage
-                  source={{
-                    uri: 'https://reactnative.dev/img/header_logo.svg',
-                  }}
-                />
-                <AvatarFallback>RN</AvatarFallback>
-              </Avatar>
-
-              <Avatar
-                size={48}
-                style={{
-                  borderWidth: 2,
-                  borderColor: 'white',
-                  marginLeft: -12,
-                  zIndex: 2,
-                }}
-              >
-                <AvatarImage
-                  source={{
-                    uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
-                  }}
-                />
-                <AvatarFallback>EX</AvatarFallback>
-              </Avatar>
-
-              <Avatar
-                size={48}
-                style={{
-                  borderWidth: 2,
-                  borderColor: 'white',
-                  marginLeft: -12,
-                  zIndex: 1,
-                }}
-              >
-                <AvatarFallback
-                  style={{ backgroundColor: '#6b7280' }}
-                  textStyle={{ color: 'white', fontSize: 12 }}
-                >
-                  +5
-                </AvatarFallback>
-              </Avatar>
-            </View>
-
-            <View className="flex-row items-center gap-6">
-              <View style={{ position: 'relative' }}>
-                <Avatar size={56}>
-                  <AvatarImage
-                    source={{
-                      uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
-                    }}
-                  />
-                  <AvatarFallback>AB</AvatarFallback>
-                </Avatar>
-                <View
-                  style={{
-                    position: 'absolute',
-                    bottom: 0,
-                    right: 0,
-                    width: 16,
-                    height: 16,
-                    borderRadius: 8,
-                    backgroundColor: '#10b981',
-                    borderWidth: 2,
-                    borderColor: 'white',
-                  }}
-                />
-              </View>
-
-              <View style={{ position: 'relative' }}>
-                <Avatar size={56}>
-                  <AvatarFallback>NA</AvatarFallback>
-                </Avatar>
-                <View
-                  style={{
-                    position: 'absolute',
-                    bottom: 0,
-                    right: 0,
-                    width: 16,
-                    height: 16,
-                    borderRadius: 8,
-                    backgroundColor: '#ef4444',
-                    borderWidth: 2,
-                    borderColor: 'white',
-                  }}
-                />
-              </View>
-
-              <View style={{ position: 'relative' }}>
-                <Avatar size={56}>
-                  <AvatarImage
-                    source={{
-                      uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
-                    }}
-                  />
-                  <AvatarFallback>EX</AvatarFallback>
-                </Avatar>
-                <View
-                  style={{
-                    position: 'absolute',
-                    bottom: 0,
-                    right: 0,
-                    width: 16,
-                    height: 16,
-                    borderRadius: 8,
-                    backgroundColor: '#f59e0b',
-                    borderWidth: 2,
-                    borderColor: 'white',
-                  }}
-                />
-              </View>
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-}

package/2/apps/native/src/app/(root)/(protected)/(tabs)/style/badge-chips-toggle.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import { ChipGroup } from '@/components/advanced-ui/chip/chip';
-import {
-  FocusAwareStatusBar,
-  SafeAreaView,
-  ScrollView,
-  Text,
-  ToggleGroupMultiple,
-  View,
-} from '@/components/ui';
-import { Badge } from '@/components/ui/badge';
-
-export default function BadgeChipsToggleDemoScreen() {
-  const [toggleValue, setToggleValue] = React.useState(['bold']);
-  const [chipIndex, setChipIndex] = React.useState(0);
-
-  const toggleItems = [
-    { value: 'bold', label: 'Bold', icon: 'text' },
-    { value: 'italic', label: 'Italic', icon: 'text' },
-    { value: 'underline', label: 'Underline', icon: 'text' },
-  ];
-
-  const chips = [
-    { label: 'Primary', icon: 'person-outline', activeIcon: 'person' },
-    {
-      label: 'Alerts',
-      icon: 'notifications-outline',
-      activeIcon: 'notifications',
-    },
-    { label: 'Messages', icon: 'chatbubble-outline', activeIcon: 'chatbubble' },
-  ] as const;
-
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <SafeAreaView className="flex-1">
-        <ScrollView className="flex-1 px-4">
-          <View className="gap-8 py-6">
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Badge</Text>
-              <View className="flex-row flex-wrap gap-3">
-                <Badge>Default</Badge>
-                <Badge variant="secondary">Secondary</Badge>
-                <Badge variant="destructive">Destructive</Badge>
-                <Badge variant="outline">Outline</Badge>
-                <Badge variant="success">Success</Badge>
-              </View>
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Chips</Text>
-              <View className="items-center">
-                <ChipGroup
-                  chips={chips as any}
-                  selectedIndex={chipIndex}
-                  onChange={setChipIndex}
-                />
-                <View className="mt-3 rounded-full border border-neutral-200 px-3 py-1.5 dark:border-neutral-700">
-                  <Text className="text-sm opacity-70">
-                    Selected: {chips[chipIndex].label}
-                  </Text>
-                </View>
-              </View>
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Toggle</Text>
-              <ToggleGroupMultiple
-                value={toggleValue}
-                onValueChange={setToggleValue}
-                items={toggleItems}
-                size="icon"
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-}

package/2/apps/native/src/app/(root)/(protected)/(tabs)/style/buttons.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { Buttons } from '@/components/demo/buttons-demo';
-import {
-  FocusAwareStatusBar,
-  SafeAreaView,
-  ScrollView,
-  View,
-} from '@/components/ui';
-
-export default function ButtonsDemoScreen() {
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <SafeAreaView className="flex-1">
-        <ScrollView className="flex-1 px-4">
-          <View className="py-6">
-            <Buttons />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-}

package/2/apps/native/src/app/(root)/(protected)/(tabs)/style/charts.tsx

@@ -1,3 +0,0 @@
-import ChartPreviewScreen from '@/features/charts/app/preview';
-
-export default ChartPreviewScreen;

package/2/apps/native/src/app/(root)/(protected)/(tabs)/style/date-picker.tsx

@@ -1,120 +0,0 @@
-import React from 'react';
-import { Alert } from 'react-native';
-
-import {
-  Button,
-  DateTimePickerComponent as DatePicker,
-  FocusAwareStatusBar,
-  SafeAreaView,
-  ScrollView,
-  Text,
-  View,
-} from '@/components/ui';
-
-export default function DatePickerDemoScreen() {
-  const [birthDate, setBirthDate] = React.useState<Date | undefined>();
-  const [appointmentDate, setAppointmentDate] = React.useState<
-    Date | undefined
-  >();
-  const [errors, setErrors] = React.useState<{
-    birthDate?: string;
-    appointmentDate?: string;
-  }>({});
-
-  const handleDateChange = (
-    field: 'birthDate' | 'appointmentDate',
-    date: Date,
-  ) => {
-    if (field === 'birthDate') {
-      setBirthDate(date);
-      let error: string | undefined;
-      const birthDatePlus18 = new Date(date.getTime());
-      birthDatePlus18.setFullYear(birthDatePlus18.getFullYear() + 18);
-      if (birthDatePlus18 > new Date()) {
-        error = 'Must be 18 years or older';
-      }
-      setErrors((prev) => ({ ...prev, birthDate: error }));
-    }
-
-    if (field === 'appointmentDate') {
-      setAppointmentDate(date);
-      let error: string | undefined;
-      const today = new Date();
-      today.setHours(0, 0, 0, 0);
-      if (date < today) {
-        error = 'Appointment must be in the future';
-      }
-      setErrors((prev) => ({ ...prev, appointmentDate: error }));
-    }
-  };
-
-  const handleSubmit = () => {
-    const newErrors: typeof errors = {};
-    if (!birthDate) {
-      newErrors.birthDate = 'Birth date is required';
-    } else {
-      const birthDatePlus18 = new Date(birthDate.getTime());
-      birthDatePlus18.setFullYear(birthDatePlus18.getFullYear() + 18);
-      if (birthDatePlus18 > new Date()) {
-        newErrors.birthDate = 'Must be 18 years or older';
-      }
-    }
-
-    if (!appointmentDate) {
-      newErrors.appointmentDate = 'Appointment date is required';
-    } else {
-      const today = new Date();
-      today.setHours(0, 0, 0, 0);
-      if (appointmentDate < today)
-        newErrors.appointmentDate = 'Appointment must be in the future';
-    }
-
-    setErrors(newErrors);
-    if (Object.keys(newErrors).length === 0) {
-      Alert.alert('Success', 'Form submitted successfully!');
-    }
-  };
-
-  const maxBirthDate = new Date();
-  maxBirthDate.setFullYear(maxBirthDate.getFullYear() - 18);
-  const minAppointmentDate = new Date();
-  minAppointmentDate.setDate(minAppointmentDate.getDate() + 1);
-
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <SafeAreaView className="flex-1">
-        <ScrollView className="flex-1 px-4">
-          <View className="gap-6 py-6">
-            <Text className="mb-1 text-xl font-semibold">
-              Registration Form
-            </Text>
-
-            <DatePicker
-              label="Date of Birth"
-              value={birthDate}
-              onChange={(d) => handleDateChange('birthDate', d)}
-              placeholder="Select your birth date"
-              maximumDate={maxBirthDate}
-              error={errors.birthDate}
-              mode="date"
-            />
-
-            <DatePicker
-              label="Appointment"
-              value={appointmentDate}
-              onChange={(d) => handleDateChange('appointmentDate', d)}
-              placeholder="Select appointment date and time"
-              minimumDate={minAppointmentDate}
-              error={errors.appointmentDate}
-              mode="datetime"
-              timeFormat="12"
-            />
-
-            <Button onPress={handleSubmit} label="Submit Registration" />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-}

package/2/apps/native/src/app/(root)/(protected)/(tabs)/style/file-picker.tsx

@@ -1,133 +0,0 @@
-import React from 'react';
-
-import {
-  FilePicker,
-  FocusAwareStatusBar,
-  ScrollView,
-  Text,
-  View,
-} from '@/components/ui';
-import { useToast } from '@/components/ui/core/toast';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-export default function FilePickerDemoScreen() {
-  const [files, setFiles] = React.useState<any[]>([]);
-  const [progress, setProgress] = React.useState<Record<number, number>>({});
-  const theme = useThemeConfig();
-  const { error: showErrorToast } = useToast();
-
-  const onFilesSelected = (selected: any[]) => {
-    setFiles(selected);
-    selected.forEach((_, idx) => {
-      let p = 0;
-      const t = setInterval(() => {
-        p += Math.random() * 20;
-        if (p >= 100) {
-          p = 100;
-          clearInterval(t);
-        }
-        setProgress((prev) => ({ ...prev, [idx]: Math.min(p, 100) }));
-      }, 200);
-    });
-  };
-
-  const formatSize = (bytes?: number) => {
-    if (!bytes) return '—';
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  };
-
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <ScrollView className="flex-1 px-4">
-        <View className="gap-6 py-6">
-          <FilePicker
-            onFilesSelected={onFilesSelected}
-            onError={(e) => showErrorToast('Failed to select files')}
-            fileType="all"
-            multiple
-            maxFiles={4}
-            maxSizeBytes={5 * 1024 * 1024}
-            placeholder="Select files for detailed preview"
-            showFileInfo
-          />
-
-          {files.length > 0 && (
-            <View>
-              <Text className="mb-3 text-base font-semibold">File Details</Text>
-              {files.map((f, idx) => (
-                <View
-                  key={idx}
-                  className="mb-3 rounded-xl p-4"
-                  style={{ backgroundColor: theme.colors.card }}
-                >
-                  <View className="flex-row items-start" style={{ gap: 12 }}>
-                    <View className="flex-1 p-1">
-                      <Text className="mb-1 text-base font-medium">
-                        {f.name}
-                      </Text>
-                      <View style={{ gap: 2 }}>
-                        <Text className="text-sm">
-                          Size: {formatSize(f.size)}
-                        </Text>
-                        <Text className="text-sm">
-                          Type: {f.mimeType || '—'}
-                        </Text>
-                        <Text className="text-sm">
-                          Status:{' '}
-                          {progress[idx] >= 100 ? 'Uploaded' : 'Uploading...'}
-                        </Text>
-                      </View>
-                      {progress[idx] !== undefined && (
-                        <View style={{ marginTop: 8 }}>
-                          <View
-                            style={{
-                              height: 4,
-                              backgroundColor: theme.colors.muted,
-                              borderRadius: 2,
-                            }}
-                          >
-                            <View
-                              style={{
-                                height: '100%',
-                                width: `${progress[idx] || 0}%`,
-                                backgroundColor:
-                                  progress[idx] >= 100
-                                    ? theme.colors.success
-                                    : theme.colors.primary,
-                                borderRadius: 2,
-                              }}
-                            />
-                          </View>
-                          <Text className="mt-1 text-xs">
-                            {Math.round(progress[idx] || 0)}%
-                          </Text>
-                        </View>
-                      )}
-                    </View>
-                  </View>
-                </View>
-              ))}
-
-              <View
-                className="rounded-lg p-3"
-                style={{
-                  borderWidth: 1,
-                  borderColor: theme.colors.border,
-                  backgroundColor: theme.colors.muted,
-                }}
-              >
-                <Text style={{ color: theme.colors.primary }}>
-                  {files.length} file{files.length > 1 ? 's' : ''} • Total size:{' '}
-                  {formatSize(files.reduce((s, f) => s + (f.size || 0), 0))}
-                </Text>
-              </View>
-            </View>
-          )}
-        </View>
-      </ScrollView>
-    </>
-  );
-}

package/2/apps/native/src/app/(root)/(protected)/(tabs)/style/gallery-video.tsx

@@ -1,119 +0,0 @@
-import {
-  FocusAwareStatusBar,
-  Gallery,
-  SafeAreaView,
-  ScrollView,
-  Text,
-  Video,
-  View,
-} from '@/components/ui';
-
-const images = [
-  {
-    id: '1',
-    uri: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=2960&auto=format&fit=crop',
-    title: 'Curious Cat',
-  },
-  {
-    id: '2',
-    uri: 'https://images.unsplash.com/photo-1519052537078-e6302a4968d4?q=80&w=2012&auto=format&fit=crop',
-    title: 'Sleepy Kitten',
-  },
-  {
-    id: '3',
-    uri: 'https://images.unsplash.com/photo-1495360010541-f48722b34f7d?q=80&w=987&auto=format&fit=crop',
-    title: 'Playful Cat',
-  },
-  {
-    id: '4',
-    uri: 'https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=2070&auto=format&fit=crop',
-    title: 'Orange Tabby',
-  },
-  {
-    id: '5',
-    uri: 'https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1064&auto=format&fit=crop',
-    title: 'Fluffy Cat',
-  },
-  {
-    id: '6',
-    uri: 'https://images.unsplash.com/photo-1543852786-1cf6624b9987?q=80&w=2334&auto=format&fit=crop',
-    title: 'Adorable Kitten',
-  },
-];
-
-export default function GalleryVideoDemoScreen() {
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <SafeAreaView className="flex-1">
-        <ScrollView className="flex-1 px-4">
-          <View className="gap-8 py-6">
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Video</Text>
-              <Video
-                source={{
-                  uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-                }}
-                style={{ width: '100%', height: 200, borderRadius: 8 }}
-                nativeControls={true}
-                autoPlay={false}
-                loop={false}
-              />
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Gallery - 4 Columns</Text>
-              <Gallery
-                items={images}
-                columns={4}
-                spacing={0}
-                borderRadius={0}
-                aspectRatio={1}
-              />
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Gallery - 3 Columns</Text>
-              <Gallery
-                items={images.slice(0, 6)}
-                columns={3}
-                spacing={12}
-                borderRadius={8}
-                aspectRatio={1.2}
-              />
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Gallery - Overlay</Text>
-              <Gallery
-                items={images}
-                columns={2}
-                aspectRatio={1}
-                renderCustomOverlay={(item) => (
-                  <View
-                    style={{
-                      position: 'absolute',
-                      top: 8,
-                      right: 8,
-                      backgroundColor: 'rgba(0,0,0,0.7)',
-                      borderRadius: 12,
-                      paddingHorizontal: 8,
-                      paddingVertical: 4,
-                    }}
-                  >
-                    <Text
-                      className="text-xs font-bold"
-                      style={{ color: 'white' }}
-                    >
-                      {item.title}
-                    </Text>
-                  </View>
-                )}
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-}