vibefast-cli 0.6.2 → 0.7.1

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

@@ -1,80 +0,0 @@
-import React from 'react';
-
-import {
-  FocusAwareStatusBar,
-  SafeAreaView,
-  ScrollView,
-  Spinner,
-  Text,
-  View,
-} from '@/components/ui';
-
-export default function SpinnerDemoScreen() {
-  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">Variants</Text>
-              <View className="gap-4">
-                <View className="flex-row items-center gap-4">
-                  <Spinner variant="default" />
-                  <Text>Default</Text>
-                </View>
-                <View className="flex-row items-center gap-4">
-                  <Spinner variant="cirlce" color="#3b82f6" />
-                  <Text>Circle</Text>
-                </View>
-                <View className="flex-row items-center gap-4">
-                  <Spinner variant="dots" color="#10b981" />
-                  <Text>Dots</Text>
-                </View>
-                <View className="flex-row items-center gap-4">
-                  <Spinner variant="pulse" color="#f59e0b" />
-                  <Text>Pulse</Text>
-                </View>
-                <View className="flex-row items-center gap-4">
-                  <Spinner variant="bars" color="#ef4444" />
-                  <Text>Bars</Text>
-                </View>
-                <View className="flex-row items-center gap-4">
-                  <Spinner variant="icon" color="#8b5cf6" />
-                  <Text>Icon</Text>
-                </View>
-              </View>
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Sizes</Text>
-              <View className="flex-row items-center gap-6">
-                <Spinner size="sm" />
-                <Spinner size="default" />
-                <Spinner size="lg" />
-              </View>
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Color Grid</Text>
-              <View className="flex-row flex-wrap gap-6">
-                {[
-                  { c: '#3b82f6', l: 'Blue', v: 'default' as const },
-                  { c: '#10b981', l: 'Green', v: 'dots' as const },
-                  { c: '#f59e0b', l: 'Orange', v: 'pulse' as const },
-                  { c: '#ef4444', l: 'Red', v: 'bars' as const },
-                  { c: '#8b5cf6', l: 'Purple', v: 'cirlce' as const },
-                ].map(({ c, l, v }) => (
-                  <View key={c} className="items-center" style={{ gap: 8 }}>
-                    <Spinner variant={v} color={c} />
-                    <Text className="text-xs opacity-70">{l}</Text>
-                  </View>
-                ))}
-              </View>
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-}

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import { ScrollView, View } from 'react-native';
-
-import AnimatedSwitchShowcase from '@/components/advanced-ui/switch/demo';
-import { FocusAwareStatusBar, Text } from '@/components/ui';
-import { CustomSwitch } from '@/components/ui/custom-switch';
-import { Switch } from '@/components/ui/switch';
-
-export default function SwitchDemoScreen() {
-  const [on, setOn] = React.useState(false);
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <ScrollView className="flex-1 px-4">
-        <View className="gap-6 py-6">
-          <View className="flex-row items-center gap-4">
-            <Text className="text-lg font-semibold">Default</Text>
-            <Switch value={on} onValueChange={setOn} />
-            <Text>{on ? 'On' : 'Off'}</Text>
-          </View>
-          <View className="flex-row items-center gap-4">
-            <Text className="text-lg font-semibold">Disabled</Text>
-            <Switch disabled value />
-          </View>
-
-          <View className="gap-2">
-            <Text className="text-lg font-semibold">Custom Switches</Text>
-            <View className="flex-row items-center gap-6">
-              <CustomSwitch value={on} onValueChange={setOn} size="sm" />
-              <CustomSwitch value={on} onValueChange={setOn} size="md" />
-              <CustomSwitch value={on} onValueChange={setOn} size="lg" />
-            </View>
-            <View className="flex-row items-center gap-4">
-              <Text>Disabled</Text>
-              <CustomSwitch value={true} onValueChange={() => {}} disabled />
-            </View>
-          </View>
-        </View>
-
-        <View className="gap-3">
-          <Text className="text-lg font-semibold">Animated Switches</Text>
-          <AnimatedSwitchShowcase />
-        </View>
-      </ScrollView>
-    </>
-  );
-}

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

@@ -1,352 +0,0 @@
-import React, { useMemo, useState } from 'react';
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Badge,
-  FocusAwareStatusBar,
-  SafeAreaView,
-  ScrollView,
-  Text,
-  View,
-} from '@/components/ui';
-import { Table, type TableColumn } from '@/components/ui/table';
-
-type Employee = {
-  id: number;
-  name: string;
-  email: string;
-  department: string;
-  salary: number;
-  avatar?: string;
-  joinDate: string;
-  status: 'Active' | 'On Leave' | 'Terminated';
-};
-
-const employees: Employee[] = [
-  {
-    id: 1,
-    name: 'Sarah Johnson',
-    email: 'sarah.j@company.com',
-    department: 'Engineering',
-    salary: 95000,
-    avatar: 'https://avatars.githubusercontent.com/u/1?v=4',
-    joinDate: '2022-01-15',
-    status: 'Active',
-  },
-  {
-    id: 2,
-    name: 'Mike Chen',
-    email: 'mike.c@company.com',
-    department: 'Design',
-    salary: 78000,
-    joinDate: '2023-03-20',
-    status: 'Active',
-  },
-  {
-    id: 3,
-    name: 'Emma Davis',
-    email: 'emma.d@company.com',
-    department: 'Marketing',
-    salary: 65000,
-    avatar: 'https://avatars.githubusercontent.com/u/2?v=4',
-    joinDate: '2021-11-08',
-    status: 'On Leave',
-  },
-  {
-    id: 4,
-    name: 'James Wilson',
-    email: 'james.w@company.com',
-    department: 'Sales',
-    salary: 72000,
-    joinDate: '2020-09-12',
-    status: 'Terminated',
-  },
-];
-
-type ApiData = { id: number; name: string; value: number; category: string };
-const mockData: ApiData[] = [
-  { id: 1, name: 'Item A', value: 100, category: 'Type 1' },
-  { id: 2, name: 'Item B', value: 250, category: 'Type 2' },
-  { id: 3, name: 'Item C', value: 175, category: 'Type 1' },
-  { id: 4, name: 'Item D', value: 320, category: 'Type 3' },
-];
-
-type Order = {
-  id: string;
-  customer: string;
-  product: string;
-  amount: number;
-  date: string;
-  status: 'Pending' | 'Completed' | 'Cancelled';
-};
-
-function generateOrders(count: number): Order[] {
-  const customers = [
-    'John Doe',
-    'Jane Smith',
-    'Bob Johnson',
-    'Alice Brown',
-    'Charlie Wilson',
-    'Diana Ross',
-    'Frank Miller',
-    'Grace Lee',
-  ];
-  const products = [
-    'Laptop',
-    'Mouse',
-    'Keyboard',
-    'Monitor',
-    'Headphones',
-    'Webcam',
-    'Tablet',
-    'Phone',
-  ];
-  const statuses: Order['status'][] = ['Pending', 'Completed', 'Cancelled'];
-
-  return Array.from({ length: count }, (_, i) => ({
-    id: `ORD-${String(i + 1).padStart(4, '0')}`,
-    customer: customers[i % customers.length],
-    product: products[i % products.length],
-    amount: Math.floor(Math.random() * 1000) + 50,
-    date: new Date(Date.now() - Math.random() * 90 * 24 * 60 * 60 * 1000)
-      .toISOString()
-      .split('T')[0],
-    status: statuses[Math.floor(Math.random() * statuses.length)],
-  }));
-}
-
-export default function TableDemoScreen() {
-  const [loading, setLoading] = useState(false);
-  const [apiData, setApiData] = useState<ApiData[]>([]);
-  const orders = useMemo(() => generateOrders(50), []);
-
-  const employeeColumns: TableColumn<Employee>[] = [
-    {
-      id: 'employee',
-      header: 'Employee',
-      accessorKey: 'name',
-      sortable: true,
-      filterable: true,
-      minWidth: 200,
-      cell: (value, row) => (
-        <View className="flex-row items-center" style={{ gap: 12 }}>
-          <Avatar size={32}>
-            {row.avatar && <AvatarImage source={{ uri: row.avatar }} />}
-            <AvatarFallback>
-              {row.name
-                .split(' ')
-                .map((n) => n[0])
-                .join('')}
-            </AvatarFallback>
-          </Avatar>
-          <View>
-            <Text className="font-semibold">{row.name}</Text>
-            <Text className="text-xs opacity-70">{row.email}</Text>
-          </View>
-        </View>
-      ),
-    },
-    {
-      id: 'department',
-      header: 'Department',
-      accessorKey: 'department',
-      sortable: true,
-      filterable: true,
-      minWidth: 120,
-    },
-    {
-      id: 'salary',
-      header: 'Salary',
-      accessorKey: 'salary',
-      sortable: true,
-      align: 'right',
-      minWidth: 120,
-      cell: (value) => (
-        <Text className="font-semibold">${value.toLocaleString()}</Text>
-      ),
-    },
-    {
-      id: 'joinDate',
-      header: 'Join Date',
-      accessorKey: 'joinDate',
-      sortable: true,
-      align: 'center',
-      minWidth: 120,
-    },
-    {
-      id: 'status',
-      header: 'Status',
-      accessorKey: 'status',
-      sortable: true,
-      filterable: true,
-      align: 'center',
-      minWidth: 120,
-      cell: (value) => (
-        <Badge
-          variant={
-            value === 'Active'
-              ? 'default'
-              : value === 'On Leave'
-                ? 'secondary'
-                : 'destructive'
-          }
-        >
-          {value}
-        </Badge>
-      ),
-    },
-  ];
-
-  const apiColumns: TableColumn<ApiData>[] = [
-    {
-      id: 'name',
-      header: 'Name',
-      accessorKey: 'name',
-      sortable: true,
-      filterable: true,
-    },
-    {
-      id: 'value',
-      header: 'Value',
-      accessorKey: 'value',
-      sortable: true,
-      align: 'right',
-    },
-    {
-      id: 'category',
-      header: 'Category',
-      accessorKey: 'category',
-      sortable: true,
-      filterable: true,
-    },
-  ];
-
-  const orderColumns: TableColumn<Order>[] = [
-    {
-      id: 'id',
-      header: 'Order ID',
-      accessorKey: 'id',
-      sortable: true,
-      filterable: true,
-      minWidth: 120,
-    },
-    {
-      id: 'customer',
-      header: 'Customer',
-      accessorKey: 'customer',
-      sortable: true,
-      filterable: true,
-      minWidth: 150,
-    },
-    {
-      id: 'product',
-      header: 'Product',
-      accessorKey: 'product',
-      sortable: true,
-      filterable: true,
-      minWidth: 120,
-    },
-    {
-      id: 'amount',
-      header: 'Amount',
-      accessorKey: 'amount',
-      sortable: true,
-      align: 'right',
-      minWidth: 100,
-      cell: (v) => `$${v.toFixed(2)}`,
-    },
-    {
-      id: 'date',
-      header: 'Date',
-      accessorKey: 'date',
-      sortable: true,
-      align: 'center',
-      minWidth: 120,
-    },
-    {
-      id: 'status',
-      header: 'Status',
-      accessorKey: 'status',
-      sortable: true,
-      filterable: true,
-      align: 'center',
-      minWidth: 120,
-    },
-  ];
-
-  const simulateLoading = () => {
-    setLoading(true);
-    setApiData([]);
-    setTimeout(() => {
-      setApiData(mockData);
-      setLoading(false);
-    }, 1200);
-  };
-
-  const clearData = () => {
-    setApiData([]);
-    setLoading(false);
-  };
-
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <SafeAreaView className="flex-1">
-        <ScrollView
-          className="flex-1 px-4"
-          keyboardShouldPersistTaps="handled"
-          keyboardDismissMode="on-drag"
-        >
-          <View className="gap-8 py-6">
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Custom cells</Text>
-              <Table
-                data={employees}
-                columns={employeeColumns}
-                pageSize={3}
-                searchPlaceholder="Search employees..."
-              />
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Loading state</Text>
-              <View className="flex-row items-center gap-3">
-                <Text
-                  onPress={simulateLoading}
-                  className="rounded-lg border border-neutral-300 px-3 py-1.5 dark:border-neutral-700"
-                >
-                  Load Data
-                </Text>
-                <Text
-                  onPress={clearData}
-                  className="rounded-lg border border-neutral-300 px-3 py-1.5 dark:border-neutral-700"
-                >
-                  Clear Data
-                </Text>
-              </View>
-              <Table
-                data={apiData}
-                columns={apiColumns}
-                loading={loading}
-                pageSize={5}
-              />
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Pagination</Text>
-              <Table
-                data={orders}
-                columns={orderColumns}
-                pageSize={8}
-                pagination={true}
-                searchPlaceholder="Search orders..."
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-}

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

@@ -1,122 +0,0 @@
-import React from 'react';
-
-import { Timeline } from '@/components/advanced-ui/timeline/timeline-view';
-import type { TimelineItem } from '@/components/advanced-ui/timeline/types';
-import {
-  FocusAwareStatusBar,
-  SafeAreaView,
-  ScrollView,
-  Text,
-  View,
-} from '@/components/ui';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-export default function TabsTimelineScreen() {
-  const [tab, setTab] = React.useState('account');
-  const [vt, setVt] = React.useState('general');
-  const { colors } = useThemeConfig();
-
-  const timelineItems: TimelineItem[] = [
-    {
-      id: 1,
-      title: 'Order Placed',
-      description: "We've received your order and will begin processing it.",
-      timestamp: 'May 7, 10:23 AM',
-      icon: 'shopping-bag',
-      status: 'complete',
-      meta: 'Order #38492',
-    },
-    {
-      id: 2,
-      title: 'Shipped',
-      description: 'The package left our facility and is on its way.',
-      timestamp: 'May 8, 9:15 AM',
-      icon: 'package',
-      status: 'current',
-      meta: 'In Transit',
-    },
-    {
-      id: 3,
-      title: 'Delivered',
-      timestamp: 'Est. May 10, by 6:00 PM',
-      icon: 'home',
-      status: 'upcoming',
-      meta: 'Pending delivery',
-    },
-  ];
-
-  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">Tabs - Horizontal</Text>
-              <Tabs value={tab} onValueChange={setTab}>
-                <TabsList>
-                  <TabsTrigger value="account">Account</TabsTrigger>
-                  <TabsTrigger value="password">Password</TabsTrigger>
-                  <TabsTrigger value="security">Security</TabsTrigger>
-                </TabsList>
-                <TabsContent value="account">
-                  <Text className="text-base">
-                    Make changes to your account here.
-                  </Text>
-                </TabsContent>
-                <TabsContent value="password">
-                  <Text className="text-base">Change your password here.</Text>
-                </TabsContent>
-                <TabsContent value="security">
-                  <Text className="text-base">
-                    Update security preferences here.
-                  </Text>
-                </TabsContent>
-              </Tabs>
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Tabs - Vertical</Text>
-              <Tabs value={vt} onValueChange={setVt}>
-                <View className="flex-row gap-3">
-                  <TabsList orientation="vertical" className="w-40">
-                    <TabsTrigger value="general">General</TabsTrigger>
-                    <TabsTrigger value="billing" disabled>
-                      Billing
-                    </TabsTrigger>
-                    <TabsTrigger value="advanced">Advanced</TabsTrigger>
-                  </TabsList>
-                  <View className="flex-1">
-                    <TabsContent value="general">
-                      <Text className="text-base">General settings here.</Text>
-                    </TabsContent>
-                    <TabsContent value="advanced">
-                      <Text className="text-base">Advanced settings here.</Text>
-                    </TabsContent>
-                  </View>
-                </View>
-              </Tabs>
-            </View>
-
-            <View className="gap-3">
-              <Text className="text-lg font-semibold">Timeline</Text>
-              <View className="rounded-xl border border-neutral-200 dark:border-neutral-700">
-                <Timeline
-                  items={timelineItems}
-                  animated
-                  animationType="rotate"
-                  activeColor={colors.primary}
-                  titleStyle={{ color: colors.foreground }}
-                  descriptionStyle={{ color: colors.mutedForeground }}
-                  timestampStyle={{ color: colors.mutedForeground }}
-                  metaTextStyle={{ color: colors.mutedForeground }}
-                />
-              </View>
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-}