vibefast-cli 0.2.4 → 0.3.1

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

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

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

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

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

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

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

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

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