getlotui 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+# Getting Started with GetLotUI
+
+GetLotUI is a component scaffolding tool that copies customizable, source-code components directly into your project. It is designed to work seamlessly with Expo and React Native applications.
+
+## Prerequisites
+
+- **Node.js** (v18 or higher)
+- An existing **Expo** project (managed or bare workflow)
+
+## Installation
+
+You don't need to install GetLotUI globally. You can use it directly via `npx`.
+
+However, if you prefer to install it as a dev dependency in your project:
+
+```bash
+pnpm add -D getlotui
+# or
+npm install -D getlotui
+# or
+yarn add -D getlotui
+```
+
+## Initialization
+
+Run the `init` command to set up GetLotUI in your project. This will create a `getlotui.config.json` file in your root directory.
+
+```bash
+npx getlotui init
+```
+
+The CLI will:
+1. Detect your project type (e.g., Expo).
+2. Create `getlotui.config.json` with default settings:
+
+```json
+{
+  "adapter": "expo",
+  "componentsDir": "components/ui"
+}
+```
+
+## Adding Components
+
+Once initialized, you can add components to your project. Use the `add` command followed by the component name.
+
+```bash
+npx getlotui add button
+npx getlotui add input
+```
+
+This will:
+1. Download/Copy the component source code to your configured `componentsDir` (default: `components/ui`).
+2. Add any necessary utility files (if applicable in future updates).
+
+Now you can import and use the component in your app:
+
+```tsx
+import { Button } from '@/components/ui/Button';
+
+export default function App() {
+  return (
+    <Button title="Click Me" onPress={() => console.log('Pressed')} variant="primary" />
+  );
+}
+```
+
+## Customization
+
+Since GetLotUI copies the **source code** into your project, you have full control.
+- Open `components/ui/Button.tsx`.
+- Modify styles, props, or behavior to match your design system.
+- No vendor lock-in; it's your code now!
+
+## Troubleshooting
+
+- **"getlotui.config.json not found"**: Run `npx getlotui init` first.
+- **"Component already exists"**: The CLI won't overwrite existing files to prevent data loss. Rename your existing file or delete it if you want to replace it.

package/dist/bin.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/bin.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("./index");
+(0, index_1.runCLI)();

package/dist/commands/add.d.ts

@@ -0,0 +1 @@
+export declare function addCommand(component: string): Promise<void>;

package/dist/commands/add.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCommand = addCommand;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const chalk_1 = __importDefault(require("chalk"));
+const fs_2 = require("../utils/fs");
+async function addCommand(component) {
+    try {
+        const cwd = process.cwd();
+        const configPath = path_1.default.join(cwd, "getlotui.config.json");
+        // Ensure config exists
+        let config;
+        try {
+            const configContent = await fs_1.promises.readFile(configPath, "utf8");
+            config = JSON.parse(configContent);
+        }
+        catch {
+            console.error(chalk_1.default.red("getlotui.config.json not found. Run `getlotui init` first."));
+            return;
+        }
+        const adapter = config.adapter || "expo";
+        const extension = adapter === "flutter" ? "dart" : "tsx";
+        const componentsDir = path_1.default.resolve(cwd, config.componentsDir ||
+            (adapter === "flutter" ? "lib/components/ui" : "components/ui"));
+        const componentName = component.charAt(0).toUpperCase() + component.slice(1);
+        const templatePath = path_1.default.resolve(__dirname, "..", "templates", adapter, `${componentName}.${extension}`);
+        await (0, fs_2.copyComponent)(templatePath, path_1.default.join(componentsDir, `${componentName}.${extension}`));
+        console.log(chalk_1.default.green(`Component ${componentName} added to ${componentsDir}`));
+    }
+    catch (err) {
+        console.error(chalk_1.default.red("Failed to add component:"), err);
+    }
+}

package/dist/commands/init.d.ts

@@ -0,0 +1 @@
+export declare function initCommand(): Promise<void>;

package/dist/commands/init.js

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initCommand = initCommand;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const chalk_1 = __importDefault(require("chalk"));
+const detect_1 = require("../utils/detect");
+async function initCommand() {
+    try {
+        const cwd = process.cwd();
+        const configPath = path_1.default.join(cwd, "getlotui.config.json");
+        // Check if config already exists
+        try {
+            await fs_1.promises.access(configPath);
+            console.log(chalk_1.default.yellow("getlotui.config.json already exists. Skipping creation."));
+            return;
+        }
+        catch {
+            // file does not exist, continue
+        }
+        // Detect adapter
+        let adapter = "unknown";
+        if (await (0, detect_1.detectExpoProject)(cwd)) {
+            adapter = "expo";
+        }
+        else if (await (0, detect_1.detectFlutterProject)(cwd)) {
+            adapter = "flutter";
+        }
+        else if (await (0, detect_1.detectWebProject)(cwd)) {
+            adapter = "web";
+        }
+        // Detect package manager
+        const packageManager = await (0, detect_1.detectPackageManager)(cwd);
+        const defaultConfig = {
+            adapter,
+            packageManager,
+            componentsDir: adapter === "flutter" ? "lib/components/ui" : "components/ui",
+            themeDir: adapter === "flutter" ? "lib/theme" : "theme",
+        };
+        await fs_1.promises.writeFile(configPath, JSON.stringify(defaultConfig, null, 2), "utf8");
+        // Create theme directory
+        const fullThemeDir = path_1.default.join(cwd, defaultConfig.themeDir);
+        try {
+            await fs_1.promises.mkdir(fullThemeDir, { recursive: true });
+            const isFlutter = adapter === "flutter";
+            const themeFileName = isFlutter ? "config.dart" : "config.ts";
+            const themeFilePath = path_1.default.join(fullThemeDir, themeFileName);
+            const themeContent = isFlutter
+                ? `import 'package:flutter/material.dart';
+
+class GetLotUITheme {
+  static const colors = {
+    'primary': Color(0xFF6366F1),
+    'background': Color(0xFFFFFFFF),
+    'foreground': Color(0xFF0F172A),
+  };
+  
+  static const radius = {
+    'sm': 4.0,
+    'md': 8.0,
+    'lg': 12.0,
+  };
+}`
+                : `export const theme = {
+  colors: {
+    primary: '#6366f1',
+    background: '#ffffff',
+    foreground: '#0f172a',
+  },
+  radius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+  },
+  spacing: {
+    unit: 8,
+  }
+};`;
+            await fs_1.promises.writeFile(themeFilePath, themeContent, "utf8");
+            console.log(chalk_1.default.green(`Created ${defaultConfig.themeDir}/${themeFileName}`));
+        }
+        catch (err) {
+            console.warn(chalk_1.default.yellow("Could not create theme directory:"), err);
+        }
+        console.log(chalk_1.default.green(`Created getlotui.config.json with ${adapter} (${packageManager}) defaults.`));
+    }
+    catch (err) {
+        console.error(chalk_1.default.red("Failed to initialize GetLotUI config:"), err);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export declare function runCLI(): void;

package/dist/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runCLI = runCLI;
+const commander_1 = require("commander");
+const init_1 = require("./commands/init");
+const add_1 = require("./commands/add");
+function runCLI() {
+    const program = new commander_1.Command();
+    program
+        .name("getlotui")
+        .description("GetLotUI CLI for scaffolding components")
+        .version("0.1.0");
+    program
+        .command("init")
+        .description("Initialize GetLotUI config")
+        .action(init_1.initCommand);
+    program
+        .command("add <component>")
+        .description("Add a UI component")
+        .action(add_1.addCommand);
+    program.parse(process.argv);
+}

package/dist/templates/expo/Accordion.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface AccordionProps {
+    type?: "single" | "multiple";
+    collapsible?: boolean;
+    defaultValue?: string | string[];
+    children?: React.ReactNode;
+    items: Array<{
+        value: string;
+        trigger: string;
+        content: string;
+    }>;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+export {};

package/dist/templates/expo/Accordion.js

@@ -0,0 +1,118 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+if (react_native_1.Platform.OS === "android" &&
+    react_native_1.UIManager.setLayoutAnimationEnabledExperimental) {
+    react_native_1.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const AccordionItem = ({ trigger, content, isOpen, onToggle, }) => {
+    const handleToggle = () => {
+        react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+        onToggle();
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: styles.item },
+        react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.trigger, onPress: handleToggle, activeOpacity: 0.7 },
+            react_1.default.createElement(react_native_1.Text, { style: styles.triggerText }, trigger),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.chevron, isOpen && styles.chevronOpen] }, "\u203A")),
+        isOpen && (react_1.default.createElement(react_native_1.View, { style: styles.content },
+            react_1.default.createElement(react_native_1.Text, { style: styles.contentText }, content)))));
+};
+const Accordion = ({ type = "single", collapsible = false, defaultValue, items, }) => {
+    const [openItems, setOpenItems] = (0, react_1.useState)(() => {
+        if (defaultValue) {
+            return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+        }
+        return [];
+    });
+    const handleToggle = (value) => {
+        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 (react_1.default.createElement(react_native_1.View, { style: styles.container }, items.map((item) => (react_1.default.createElement(AccordionItem, { key: item.value, value: item.value, trigger: item.trigger, content: item.content, isOpen: openItems.includes(item.value), onToggle: () => handleToggle(item.value) })))));
+};
+exports.Accordion = Accordion;
+const styles = react_native_1.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/dist/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/dist/templates/expo/AlertDialog.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface AlertDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    title: string;
+    description: string;
+    cancelText?: string;
+    actionText?: string;
+    onAction?: () => void;
+}
+export declare const AlertDialog: ({ open: controlledOpen, onOpenChange, trigger, title, description, cancelText, actionText, onAction, }: AlertDialogProps) => React.JSX.Element;

package/dist/templates/expo/AlertDialog.js

@@ -0,0 +1,126 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDialog = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AlertDialog = ({ open: controlledOpen, onOpenChange, trigger, title, description, cancelText = "Cancel", actionText = "Continue", onAction, }) => {
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(false);
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const setOpen = (val) => {
+        if (onOpenChange)
+            onOpenChange(val);
+        setInternalOpen(val);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        trigger && (react_1.default.createElement(react_native_1.Pressable, { onPress: () => setOpen(true) }, trigger)),
+        react_1.default.createElement(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false) },
+            react_1.default.createElement(react_native_1.Pressable, { style: styles.overlay, onPress: () => setOpen(false) },
+                react_1.default.createElement(react_native_1.Pressable, { style: styles.content, onPress: (e) => e.stopPropagation() },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.title }, title),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.description }, description),
+                    react_1.default.createElement(react_native_1.View, { style: styles.footer },
+                        react_1.default.createElement(react_native_1.Pressable, { style: [styles.button, styles.cancelButton], onPress: () => setOpen(false) },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.cancelButtonText }, cancelText)),
+                        react_1.default.createElement(react_native_1.Pressable, { style: [styles.button, styles.actionButton], onPress: () => {
+                                onAction?.();
+                                setOpen(false);
+                            } },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.actionButtonText }, actionText))))))));
+};
+exports.AlertDialog = AlertDialog;
+const styles = react_native_1.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",
+    },
+});