vibefast-cli 0.2.3 → 0.3.0

package/2/apps/native/src/components/ui/table.tsx

@@ -0,0 +1,296 @@
+import React from 'react';
+import { ActivityIndicator, Pressable, View } from 'react-native';
+
+import { Text } from './core/text';
+import { Searchbar } from './searchbar';
+
+// Data-driven table API (compatible with bna-library demos)
+export type TableAlign = 'left' | 'center' | 'right';
+export type TableColumn<T> = {
+  id: string;
+  header: string;
+  accessorKey: keyof T | string;
+  sortable?: boolean;
+  filterable?: boolean;
+  minWidth?: number;
+  align?: TableAlign;
+  cell?: (value: any, row: T, index: number) => React.ReactNode;
+};
+
+type DataTableProps<T> = {
+  data: T[];
+  columns: TableColumn<T>[];
+  pageSize?: number;
+  pagination?: boolean;
+  loading?: boolean;
+  emptyMessage?: string;
+  searchPlaceholder?: string;
+};
+
+export type TableProps<T = any> =
+  | ({ children: React.ReactNode; className?: string } & Partial<
+      DataTableProps<T>
+    >)
+  | (DataTableProps<T> & { className?: string; children?: never });
+
+function getCellAlignClass(align?: TableAlign) {
+  switch (align) {
+    case 'center':
+      return 'items-center';
+    case 'right':
+      return 'items-end';
+    default:
+      return 'items-start';
+  }
+}
+
+const TableWrapper = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <View
+    className={`overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 ${className}`}
+  >
+    {children}
+  </View>
+);
+
+export function Table<T = any>(props: TableProps<T>) {
+  const {
+    className = '',
+    // data-driven props
+    data,
+    columns,
+    pageSize = 5,
+    pagination = false,
+    loading = false,
+    emptyMessage = 'No data',
+    searchPlaceholder,
+  } = props as DataTableProps<T> & { className?: string };
+
+  const [query, setQuery] = React.useState('');
+  const [page, setPage] = React.useState(1);
+  const [sortBy, setSortBy] = React.useState<string | undefined>(undefined);
+  const [sortDir, setSortDir] = React.useState<'asc' | 'desc'>('asc');
+
+  const hasDataMode = Array.isArray(data) && Array.isArray(columns);
+
+  // Normalize inputs so hooks run unconditionally (no conditional hooks)
+  const cols = React.useMemo(
+    () => (Array.isArray(columns) ? (columns as TableColumn<T>[]) : []),
+    [columns],
+  );
+  const rows = React.useMemo(
+    () => (Array.isArray(data) ? (data as T[]) : []),
+    [data],
+  );
+
+  // search filter
+  const filtered = React.useMemo(() => {
+    if (!query) return rows;
+    const q = query.toLowerCase();
+    return rows.filter((row: any) => {
+      return cols.some((c) => {
+        const key = c.accessorKey as any;
+        const val = (row?.[key] ?? '').toString().toLowerCase();
+        return val.includes(q);
+      });
+    });
+  }, [query, rows, cols]);
+
+  // sorting
+  const sorted = React.useMemo(() => {
+    if (!sortBy) return filtered;
+    const col = cols.find((c) => c.id === sortBy);
+    if (!col) return filtered;
+    const key = col.accessorKey as any;
+    const out = [...filtered].sort((a: any, b: any) => {
+      const av = a?.[key];
+      const bv = b?.[key];
+      if (av == null && bv == null) return 0;
+      if (av == null) return -1;
+      if (bv == null) return 1;
+      if (typeof av === 'number' && typeof bv === 'number') {
+        return av - bv;
+      }
+      return String(av).localeCompare(String(bv));
+    });
+    return sortDir === 'asc' ? out : out.reverse();
+  }, [filtered, sortBy, sortDir, cols]);
+
+  // pagination
+  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const start = (currentPage - 1) * pageSize;
+  const end = start + pageSize;
+  const pageRows = pagination ? sorted.slice(start, end) : sorted;
+
+  if (!hasDataMode) {
+    // children mode (backward compatible)
+    return (
+      <TableWrapper className={className}>
+        {(props as any).children}
+      </TableWrapper>
+    );
+  }
+
+  const toggleSort = (col: TableColumn<T>) => {
+    if (!col.sortable) return;
+    if (sortBy !== col.id) {
+      setSortBy(col.id);
+      setSortDir('asc');
+    } else {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    }
+  };
+
+  return (
+    <TableWrapper className={className}>
+      {/* Search bar */}
+      {searchPlaceholder ? (
+        <View className="border-b border-neutral-200 p-3 dark:border-neutral-700">
+          <Searchbar
+            value={query}
+            onChangeText={setQuery}
+            placeholder={searchPlaceholder}
+            keepFocusOnChange
+          />
+        </View>
+      ) : null}
+
+      {/* Header */}
+      <View className={'bg-neutral-50 dark:bg-neutral-800'}>
+        <View className={'flex-row items-center px-4 py-3'}>
+          {cols.map((c) => (
+            <Pressable
+              key={c.id}
+              onPress={() => toggleSort(c)}
+              disabled={!c.sortable}
+              className={`flex-1 ${getCellAlignClass(c.align)}`}
+              style={{ minWidth: c.minWidth }}
+              accessibilityRole={c.sortable ? 'button' : undefined}
+            >
+              <Text className="text-sm font-semibold opacity-80">
+                {c.header}
+                {sortBy === c.id ? (sortDir === 'asc' ? ' ▲' : ' ▼') : ''}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+
+      {/* Body */}
+      {loading ? (
+        <View className="items-center justify-center px-4 py-12">
+          <ActivityIndicator />
+          <Text className="mt-2 opacity-70">Loading…</Text>
+        </View>
+      ) : pageRows.length === 0 ? (
+        <View className="items-center justify-center px-4 py-12">
+          <Text className="opacity-70">{emptyMessage}</Text>
+        </View>
+      ) : (
+        <View>
+          {pageRows.map((row: any, rowIndex: number) => (
+            <View
+              key={rowIndex}
+              className={
+                'flex-row items-center border-t border-neutral-200 px-4 py-3 dark:border-neutral-700'
+              }
+            >
+              {cols.map((c) => {
+                const key = c.accessorKey as any;
+                const value = row?.[key];
+                let content: React.ReactNode;
+                if (c.cell) {
+                  const node = c.cell(value, row, rowIndex);
+                  if (React.isValidElement(node)) {
+                    content = node;
+                  } else if (node == null || node === false) {
+                    content = null;
+                  } else {
+                    content = <Text className="text-base">{String(node)}</Text>;
+                  }
+                } else {
+                  content = <Text className="text-base">{String(value)}</Text>;
+                }
+                return (
+                  <View
+                    key={c.id}
+                    className={`flex-1 ${getCellAlignClass(c.align)}`}
+                    style={{ minWidth: c.minWidth }}
+                  >
+                    {content}
+                  </View>
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      )}
+
+      {/* Pagination */}
+      {pagination && totalPages > 1 ? (
+        <View className="border-t border-neutral-200 px-4 py-3 dark:border-neutral-700">
+          <View className="flex-row items-center justify-between">
+            <Pressable
+              onPress={() => setPage((p) => Math.max(1, p - 1))}
+              className="rounded-lg border border-neutral-300 px-3 py-1.5 dark:border-neutral-700"
+              accessibilityRole="button"
+            >
+              <Text>Prev</Text>
+            </Pressable>
+            <Text className="opacity-70">
+              Page {currentPage} of {totalPages}
+            </Text>
+            <Pressable
+              onPress={() => setPage((p) => Math.min(totalPages, p + 1))}
+              className="rounded-lg border border-neutral-300 px-3 py-1.5 dark:border-neutral-700"
+              accessibilityRole="button"
+            >
+              <Text>Next</Text>
+            </Pressable>
+          </View>
+        </View>
+      ) : null}
+    </TableWrapper>
+  );
+}
+
+// Simple building blocks retained for basic markup usage
+export type TableHeaderProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+export function TableHeader({ children, className = '' }: TableHeaderProps) {
+  return (
+    <View className={`bg-neutral-50 dark:bg-neutral-800 ${className}`}>
+      {children}
+    </View>
+  );
+}
+
+export type TableRowProps = { children: React.ReactNode; className?: string };
+export function TableRow({ children, className = '' }: TableRowProps) {
+  return (
+    <View
+      className={`flex-row items-center border-t border-neutral-200 px-4 py-3 dark:border-neutral-700 ${className}`}
+    >
+      {children}
+    </View>
+  );
+}
+
+export type TableCellProps = { children: React.ReactNode; className?: string };
+export function TableCell({ children, className = '' }: TableCellProps) {
+  return (
+    <View className={`flex-1 ${className}`}>
+      <Text className="text-base">{children}</Text>
+    </View>
+  );
+}
+
+export default Table;

package/2/apps/native/src/components/ui/tabs.tsx

@@ -0,0 +1,115 @@
+import React, { createContext, useContext } from 'react';
+import { View } from 'react-native';
+
+import { Pressable } from './core/pressable';
+import { Text } from './core/text';
+
+type TabsValue = string;
+
+type TabsContextType = {
+  value: TabsValue;
+  onValueChange: (value: TabsValue) => void;
+};
+
+const TabsContext = createContext<TabsContextType | null>(null);
+const TabsListContext = createContext<{
+  orientation: 'horizontal' | 'vertical';
+} | null>(null);
+
+export type TabsProps = {
+  value?: TabsValue;
+  defaultValue?: TabsValue;
+  onValueChange?: (v: TabsValue) => void;
+  children: React.ReactNode;
+};
+
+export function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  children,
+}: TabsProps) {
+  const [internal, setInternal] = React.useState<TabsValue>(defaultValue ?? '');
+  const isControlled = typeof value === 'string';
+  const current = isControlled ? (value as string) : internal;
+  const set = React.useCallback(
+    (v: string) => {
+      if (!isControlled) setInternal(v);
+      onValueChange?.(v);
+    },
+    [isControlled, onValueChange],
+  );
+  return (
+    <TabsContext.Provider value={{ value: current, onValueChange: set }}>
+      {children}
+    </TabsContext.Provider>
+  );
+}
+
+export type TabsListProps = {
+  children: React.ReactNode;
+  className?: string;
+  orientation?: 'horizontal' | 'vertical';
+};
+export function TabsList({
+  children,
+  className = '',
+  orientation = 'horizontal',
+}: TabsListProps) {
+  const dir = orientation === 'vertical' ? 'flex-col' : 'flex-row';
+  const align = orientation === 'vertical' ? 'items-stretch' : 'items-center';
+  return (
+    <TabsListContext.Provider value={{ orientation }}>
+      <View
+        className={`mb-3 ${dir} bg-muted ${align} rounded-xl p-1 ${className}`}
+      >
+        {children}
+      </View>
+    </TabsListContext.Provider>
+  );
+}
+
+export type TabsTriggerProps = {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+};
+export function TabsTrigger({ value, children, disabled }: TabsTriggerProps) {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error('TabsTrigger must be used within Tabs');
+  const list = useContext(TabsListContext);
+  const active = ctx.value === value;
+  const layoutClass = list?.orientation === 'vertical' ? 'w-full' : 'flex-1';
+  return (
+    <Pressable
+      onPress={() => (disabled ? undefined : ctx.onValueChange(value))}
+      className={`${layoutClass} rounded-lg px-4 py-2 ${active ? 'bg-white dark:bg-neutral-900' : ''} ${disabled ? 'opacity-50' : ''}`}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active }}
+    >
+      <Text
+        className={`text-center ${active ? 'font-semibold' : 'text-neutral-500 dark:text-neutral-400'}`}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+}
+
+export type TabsContentProps = {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+};
+export function TabsContent({
+  value,
+  children,
+  className = '',
+}: TabsContentProps) {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error('TabsContent must be used within Tabs');
+  if (ctx.value !== value) return null;
+  return <View className={className}>{children}</View>;
+}
+
+export default Tabs;

package/2/apps/native/src/components/ui/toggle.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Icon } from './extras/icon';
+
+export type ToggleItem = { value: string; label: string; icon?: string };
+export type ToggleGroupMultipleProps = {
+  value: string[];
+  onValueChange: (v: string[]) => void;
+  items: ToggleItem[];
+  size?: 'icon' | 'default';
+};
+
+export function ToggleGroupMultiple({
+  value,
+  onValueChange,
+  items,
+  size = 'default',
+}: ToggleGroupMultipleProps) {
+  const toggle = (v: string) => {
+    if (value.includes(v)) onValueChange(value.filter((x) => x !== v));
+    else onValueChange([...value, v]);
+  };
+  return (
+    <View style={{ flexDirection: 'row', gap: 8 }}>
+      {items.map((it) => {
+        const active = value.includes(it.value);
+        return (
+          <Pressable
+            key={it.value}
+            onPress={() => toggle(it.value)}
+            style={{
+              paddingHorizontal: size === 'icon' ? 10 : 12,
+              paddingVertical: size === 'icon' ? 8 : 10,
+              borderWidth: 1,
+              borderRadius: 10,
+              borderColor: active ? '#0f172a' : '#cbd5e1',
+              backgroundColor: active ? '#0f172a10' : 'transparent',
+            }}
+            accessibilityRole="button"
+          >
+            {it.icon ? <Icon name={it.icon as any} size={18} /> : null}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+export default ToggleGroupMultiple;

package/2/apps/native/src/components/ui/utils.tsx

@@ -0,0 +1,34 @@
+// import type { AxiosError } from 'axios';
+import { Dimensions, Platform } from 'react-native';
+
+export const IS_IOS = Platform.OS === 'ios';
+const { width, height } = Dimensions.get('screen');
+
+export const WIDTH = width;
+export const HEIGHT = height;
+
+export { showError, showErrorMessage, useToast } from './core/toast';
+
+export const extractError = (data: unknown): string => {
+  if (typeof data === 'string') {
+    return data;
+  }
+  if (Array.isArray(data)) {
+    const messages = data.map((item) => {
+      return `  ${extractError(item)}`;
+    });
+
+    return `${messages.join('')}`;
+  }
+
+  if (typeof data === 'object' && data !== null) {
+    const messages = Object.entries(data).map((item) => {
+      const [key, value] = item;
+      const separator = Array.isArray(value) ? ':\n ' : ': ';
+
+      return `- ${key}${separator}${extractError(value)} \n `;
+    });
+    return `${messages.join('')} `;
+  }
+  return 'Something went wrong ';
+};

package/2/apps/native/src/components/ui/video.tsx

@@ -0,0 +1,39 @@
+import { useVideoPlayer, VideoView } from 'expo-video';
+import React from 'react';
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+
+export type VideoProps = {
+  source: { uri: string } | string | number | null;
+  style?: StyleProp<ViewStyle>;
+  nativeControls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+};
+
+export function Video({
+  source,
+  style,
+  nativeControls = true,
+  autoPlay = false,
+  loop = false,
+}: VideoProps) {
+  const player = useVideoPlayer(source as any, (p) => {
+    p.loop = !!loop;
+    if (autoPlay) p.play();
+  });
+
+  const flattened = StyleSheet.flatten(style as any) || {};
+  const borderRadius = (flattened as ViewStyle).borderRadius || 0;
+
+  return (
+    <View style={style}>
+      <VideoView
+        player={player}
+        nativeControls={nativeControls}
+        style={{ width: '100%', height: '100%', borderRadius }}
+      />
+    </View>
+  );
+}
+
+export default Video;

package/2/apps/native/src/core/analytics/analytics-service.ts

@@ -0,0 +1,94 @@
+/**
+ * Core analytics service interface for tracking user events and behavior.
+ * This abstraction allows swapping analytics providers without changing app code.
+ */
+
+export type UserProperties = Record<string, string | number | boolean | null>;
+export type EventProperties = Record<string, string | number | boolean | null>;
+
+export type AnalyticsUser = {
+  id: string;
+  email?: string;
+  createdAt?: Date;
+  subscriptionStatus?: 'free' | 'premium' | 'trial';
+  [key: string]: string | number | boolean | Date | null | undefined;
+};
+
+/**
+ * Analytics service interface for tracking events and user properties
+ */
+export interface AnalyticsService {
+  /**
+   * Initialize the analytics service
+   */
+  initialize(): Promise<void>;
+
+  /**
+   * Identify a user with properties
+   */
+  identify(user: AnalyticsUser): Promise<void>;
+
+  /**
+   * Track an event with optional properties
+   */
+  track(eventName: string, properties?: EventProperties): Promise<void>;
+
+  /**
+   * Set user properties
+   */
+  setUserProperties(properties: UserProperties): Promise<void>;
+
+  /**
+   * Track screen/page views
+   */
+  screen(screenName: string, properties?: EventProperties): Promise<void>;
+
+  /**
+   * Reset user identity (on logout)
+   */
+  reset(): Promise<void>;
+
+  /**
+   * Flush pending events
+   */
+  flush(): Promise<void>;
+}
+
+/**
+ * No-op analytics service for testing or when analytics is disabled
+ */
+export class NoOpAnalyticsService implements AnalyticsService {
+  async initialize(): Promise<void> {
+    // No-op
+  }
+
+  async identify(_user: AnalyticsUser): Promise<void> {
+    // No-op
+  }
+
+  async track(
+    _eventName: string,
+    _properties?: EventProperties,
+  ): Promise<void> {
+    // No-op
+  }
+
+  async setUserProperties(_properties: UserProperties): Promise<void> {
+    // No-op
+  }
+
+  async screen(
+    _screenName: string,
+    _properties?: EventProperties,
+  ): Promise<void> {
+    // No-op
+  }
+
+  async reset(): Promise<void> {
+    // No-op
+  }
+
+  async flush(): Promise<void> {
+    // No-op
+  }
+}

package/2/apps/native/src/core/analytics/index.ts

@@ -0,0 +1,2 @@
+export * from './analytics-service';
+export * from './posthog-analytics-adapter';