vibefast-cli 0.2.4 → 0.3.1

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

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

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

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

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