getlotui 0.1.0

package/src/index.ts

@@ -0,0 +1,23 @@
+import { Command } from "commander";
+import { initCommand } from "./commands/init";
+import { addCommand } from "./commands/add";
+
+export function runCLI() {
+  const program = new Command();
+
+  program
+    .name("getlotui")
+    .description("GetLotUI CLI for scaffolding components")
+    .version("0.1.0");
+
+  program
+    .command("init")
+    .description("Initialize GetLotUI config")
+    .action(initCommand);
+  program
+    .command("add <component>")
+    .description("Add a UI component")
+    .action(addCommand);
+
+  program.parse(process.argv);
+}

package/src/templates/expo/Accordion.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+} from "react-native";
+
+if (
+  Platform.OS === "android" &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+interface AccordionItemProps {
+  value: string;
+  trigger: string;
+  content: string;
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+const AccordionItem: React.FC<AccordionItemProps> = ({
+  trigger,
+  content,
+  isOpen,
+  onToggle,
+}) => {
+  const handleToggle = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    onToggle();
+  };
+
+  return (
+    <View style={styles.item}>
+      <TouchableOpacity
+        style={styles.trigger}
+        onPress={handleToggle}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.triggerText}>{trigger}</Text>
+        <Text style={[styles.chevron, isOpen && styles.chevronOpen]}>›</Text>
+      </TouchableOpacity>
+      {isOpen && (
+        <View style={styles.content}>
+          <Text style={styles.contentText}>{content}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+interface AccordionProps {
+  type?: "single" | "multiple";
+  collapsible?: boolean;
+  defaultValue?: string | string[];
+  children?: React.ReactNode;
+  items: Array<{
+    value: string;
+    trigger: string;
+    content: string;
+  }>;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  type = "single",
+  collapsible = false,
+  defaultValue,
+  items,
+}) => {
+  const [openItems, setOpenItems] = useState<string[]>(() => {
+    if (defaultValue) {
+      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return [];
+  });
+
+  const handleToggle = (value: string) => {
+    if (type === "single") {
+      if (openItems.includes(value)) {
+        setOpenItems(collapsible ? [] : openItems);
+      } else {
+        setOpenItems([value]);
+      }
+    } else {
+      setOpenItems((prev) =>
+        prev.includes(value)
+          ? prev.filter((item) => item !== value)
+          : [...prev, value]
+      );
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {items.map((item) => (
+        <AccordionItem
+          key={item.value}
+          value={item.value}
+          trigger={item.trigger}
+          content={item.content}
+          isOpen={openItems.includes(item.value)}
+          onToggle={() => handleToggle(item.value)}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  item: {
+    borderBottomWidth: 1,
+    borderBottomColor: "#e5e7eb",
+  },
+  trigger: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 0,
+  },
+  triggerText: {
+    fontSize: 15,
+    fontWeight: "500",
+    color: "#111827",
+    flex: 1,
+  },
+  chevron: {
+    fontSize: 20,
+    color: "#6b7280",
+    transform: [{ rotate: "90deg" }],
+    marginLeft: 8,
+  },
+  chevronOpen: {
+    transform: [{ rotate: "270deg" }],
+  },
+  content: {
+    paddingBottom: 16,
+  },
+  contentText: {
+    fontSize: 14,
+    color: "#6b7280",
+    lineHeight: 20,
+  },
+});

package/src/templates/expo/AlertDialog.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  Modal,
+  StyleSheet,
+  Pressable,
+  Dimensions,
+} from "react-native";
+
+export interface AlertDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+  title: string;
+  description: string;
+  cancelText?: string;
+  actionText?: string;
+  onAction?: () => void;
+}
+
+export const AlertDialog = ({
+  open: controlledOpen,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  cancelText = "Cancel",
+  actionText = "Continue",
+  onAction,
+}: AlertDialogProps) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const setOpen = (val: boolean) => {
+    if (onOpenChange) onOpenChange(val);
+    setInternalOpen(val);
+  };
+
+  return (
+    <>
+      {trigger && (
+        <Pressable onPress={() => setOpen(true)}>{trigger}</Pressable>
+      )}
+
+      <Modal
+        transparent
+        visible={isOpen}
+        animationType="fade"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Pressable style={styles.overlay} onPress={() => setOpen(false)}>
+          <Pressable
+            style={styles.content}
+            onPress={(e) => e.stopPropagation()}
+          >
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.description}>{description}</Text>
+
+            <View style={styles.footer}>
+              <Pressable
+                style={[styles.button, styles.cancelButton]}
+                onPress={() => setOpen(false)}
+              >
+                <Text style={styles.cancelButtonText}>{cancelText}</Text>
+              </Pressable>
+
+              <Pressable
+                style={[styles.button, styles.actionButton]}
+                onPress={() => {
+                  onAction?.();
+                  setOpen(false);
+                }}
+              >
+                <Text style={styles.actionButtonText}>{actionText}</Text>
+              </Pressable>
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  content: {
+    backgroundColor: "white",
+    borderRadius: 12,
+    padding: 24,
+    width: "100%",
+    maxWidth: 400,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#18181b",
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: 14,
+    color: "#71717a",
+    lineHeight: 20,
+    marginBottom: 24,
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 12,
+  },
+  button: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 6,
+    minWidth: 80,
+    alignItems: "center",
+  },
+  cancelButton: {
+    backgroundColor: "white",
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+  },
+  actionButton: {
+    backgroundColor: "#18181b",
+  },
+  cancelButtonText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#18181b",
+  },
+  actionButtonText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "white",
+  },
+});

package/src/templates/expo/Avatar.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { View, Image, Text, StyleSheet, Pressable } from "react-native";
+
+export interface AvatarProps {
+  src?: string;
+  fallback?: string;
+  size?: "sm" | "md" | "lg";
+  shape?: "circle" | "square";
+}
+
+export const Avatar = ({
+  src,
+  fallback,
+  size = "md",
+  shape = "circle",
+}: AvatarProps) => {
+  const [hasError, setHasError] = useState(false);
+
+  const sizes = {
+    sm: 32,
+    md: 40,
+    lg: 56,
+  };
+
+  const currentSize = sizes[size];
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: currentSize,
+          height: currentSize,
+          borderRadius: shape === "circle" ? currentSize / 2 : 8,
+        },
+      ]}
+    >
+      {src && !hasError ? (
+        <Image
+          source={{ uri: src }}
+          style={styles.image}
+          onError={() => setHasError(true)}
+        />
+      ) : (
+        <View style={styles.fallback}>
+          <Text style={[styles.fallbackText, { fontSize: currentSize * 0.4 }]}>
+            {fallback?.substring(0, 2).toUpperCase() || "??"}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    backgroundColor: "#f3f4f6",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.05)",
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+  },
+  fallback: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  fallbackText: {
+    fontWeight: "600",
+    color: "#4b5563",
+  },
+});

package/src/templates/expo/Badge.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+export interface BadgeProps {
+  children: React.ReactNode;
+  variant?: "default" | "secondary" | "outline" | "destructive" | "success";
+}
+
+export const Badge = ({ children, variant = "default" }: BadgeProps) => {
+  const variantStyles = {
+    default: {
+      bg: "#18181b",
+      text: "#ffffff",
+      border: "transparent",
+    },
+    secondary: {
+      bg: "#f4f4f5",
+      text: "#18181b",
+      border: "transparent",
+    },
+    outline: {
+      bg: "transparent",
+      text: "#18181b",
+      border: "#e4e4e7",
+    },
+    destructive: {
+      bg: "#ef4444",
+      text: "#ffffff",
+      border: "transparent",
+    },
+    success: {
+      bg: "#22c55e",
+      text: "#ffffff",
+      border: "transparent",
+    },
+  };
+
+  const style = variantStyles[variant];
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: style.bg,
+          borderColor: style.border,
+          borderWidth: style.border === "transparent" ? 0 : 1,
+        },
+      ]}
+    >
+      <Text style={[styles.text, { color: style.text }]}>{children}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 9999,
+    alignSelf: "flex-start",
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "600",
+  },
+});

package/src/templates/expo/Button.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet } from "react-native";
+import { theme } from "../../theme/config";
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: "default" | "primary" | "secondary";
+  disabled?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = "default",
+  disabled = false,
+}) => {
+  const backgroundColor =
+    variant === "primary"
+      ? theme.colors.primary
+      : variant === "secondary"
+      ? theme.colors.secondary || "#94a3b8"
+      : theme.colors.background === "#ffffff"
+      ? "#e5e7eb"
+      : theme.colors.background;
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor }, disabled && styles.disabled]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/src/templates/expo/Dropdown.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  Modal,
+  Dimensions,
+  FlatList,
+} from "react-native";
+
+export interface DropdownItem {
+  label: string;
+  value: string;
+  icon?: React.ReactNode;
+}
+
+export interface DropdownProps {
+  trigger: React.ReactNode;
+  items: DropdownItem[];
+  onSelect: (value: string) => void;
+}
+
+export const Dropdown = ({ trigger, items, onSelect }: DropdownProps) => {
+  const [open, setOpen] = useState(false);
+  const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 });
+
+  const onTriggerLayout = (event: any) => {
+    // In a real implementation, we'd use measure() to get page position
+    // For the template, we'll simplify
+  };
+
+  return (
+    <View>
+      <Pressable onPress={() => setOpen(true)} onLayout={onTriggerLayout}>
+        {trigger}
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="none"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Pressable style={styles.overlay} onPress={() => setOpen(false)}>
+          <View style={styles.menu}>
+            {items.map((item) => (
+              <Pressable
+                key={item.value}
+                style={styles.item}
+                onPress={() => {
+                  onSelect(item.value);
+                  setOpen(false);
+                }}
+              >
+                {item.icon && <View style={styles.icon}>{item.icon}</View>}
+                <Text style={styles.label}>{item.label}</Text>
+              </Pressable>
+            ))}
+          </View>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "transparent",
+    justifyContent: "center", // Should be positioned near trigger
+    alignItems: "center",
+  },
+  menu: {
+    backgroundColor: "white",
+    borderRadius: 8,
+    padding: 4,
+    minWidth: 160,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 8,
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 8,
+    borderRadius: 4,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  label: {
+    fontSize: 14,
+    color: "#18181b",
+  },
+});

package/src/templates/expo/Input.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { TextInput, StyleSheet, View, Text } from "react-native";
+
+type InputProps = {
+  label?: string;
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  secureTextEntry?: boolean;
+  disabled?: boolean;
+};
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  placeholder,
+  value,
+  onChangeText,
+  secureTextEntry = false,
+  disabled = false,
+}) => {
+  const colors = {
+    text: "#111827", // gray-900
+    border: "#d1d5db", // gray-300
+    muted: "#9ca3af", // gray-400
+  };
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text style={[styles.label, { color: colors.text }]}>{label}</Text>
+      )}
+      <TextInput
+        style={[
+          styles.input,
+          { borderColor: colors.border, color: colors.text },
+          disabled && styles.disabled,
+        ]}
+        placeholder={placeholder}
+        placeholderTextColor={colors.muted}
+        value={value}
+        onChangeText={onChangeText}
+        secureTextEntry={secureTextEntry}
+        editable={!disabled}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 8,
+  },
+  label: {
+    marginBottom: 4,
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 16,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});