jac-client 0.2.6__py3-none-any.whl → 0.2.8__py3-none-any.whl

jac_client/examples/all-in-one/components/Summary.jac

@@ -0,0 +1,53 @@
+# Summary component - displays budget totals with business/personal breakdown
+# Demonstrates: context usage, conditional rendering, ternary operator, 6-card layout
+
+cl import from ..context.BudgetContext { useBudgetContext }
+cl import from ..utils.formatters { formatCurrency }
+
+cl {
+    def:pub Summary() -> any {
+        budget = useBudgetContext();
+
+        # Business/Personal breakdown
+        businessIncome = budget["businessIncome"];
+        businessExpenses = budget["businessExpenses"];
+        personalIncome = budget["personalIncome"];
+        personalExpenses = budget["personalExpenses"];
+        taxReserve = budget["taxReserve"];
+        netProfit = budget["netProfit"];
+
+        return <div className="summary">
+            <div className="summary-card business-income">
+                <span className="summary-label">Business Income</span>
+                <span className="summary-value">{formatCurrency(businessIncome)}</span>
+            </div>
+
+            <div className="summary-card business-expenses">
+                <span className="summary-label">Business Expenses</span>
+                <span className="summary-value">{formatCurrency(businessExpenses)}</span>
+            </div>
+
+            <div className="summary-card personal-income">
+                <span className="summary-label">Personal Income</span>
+                <span className="summary-value">{formatCurrency(personalIncome)}</span>
+            </div>
+
+            <div className="summary-card personal-expenses">
+                <span className="summary-label">Personal Expenses</span>
+                <span className="summary-value">{formatCurrency(personalExpenses)}</span>
+            </div>
+
+            <div className="summary-card tax-reserve">
+                <span className="summary-label">Tax Reserve (20%)</span>
+                <span className="summary-value">{formatCurrency(taxReserve)}</span>
+            </div>
+
+            <div className={("summary-card net-profit positive") if netProfit >= 0 else ("summary-card net-profit negative")}>
+                <span className="summary-label">Net Profit</span>
+                <span className="summary-value">
+                    {("+") if netProfit > 0 else ("")}{formatCurrency(netProfit)}
+                </span>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/all-in-one/components/TransactionForm.jac

@@ -0,0 +1,158 @@
+# Transaction form component
+# Demonstrates: form handling, useState, events, select options
+
+cl import from ..context.BudgetContext { useBudgetContext }
+cl import from ..constants.categories { CATEGORIES, CATEGORY_LABELS }
+cl import from ..constants.clients { CLIENTS }
+
+cl {
+    def:pub TransactionForm() -> any {
+        [description, setDescription] = useState("");
+        [amount, setAmount] = useState("");
+        [category, setCategory] = useState("OTHER");
+        [txType, setTxType] = useState("expense");
+        [isBusiness, setIsBusiness] = useState(false);
+        [clientName, setClientName] = useState("");
+        budget = useBudgetContext();
+
+        def handleSubmit(e: any) -> None {
+            e.preventDefault();
+
+            # Validate inputs
+            trimmedDesc = description.trim();
+            if trimmedDesc == "" or amount == "" {
+                return;
+            }
+
+            parsedAmount = parseFloat(amount);
+            if isNaN(parsedAmount) or parsedAmount <= 0 {
+                return;
+            }
+
+            # Add the transaction
+            budget["addTransaction"](trimmedDesc, parsedAmount, category, txType, isBusiness, clientName);
+
+            # Reset form
+            setDescription("");
+            setAmount("");
+            setCategory("OTHER");
+            setIsBusiness(false);
+            setClientName("");
+        }
+
+        # Filter categories based on type (income only has INCOME category)
+        availableCategories = CATEGORIES.filter(lambda cat: str -> bool {
+            if txType == "income" {
+                return cat == "INCOME";
+            }
+            return cat != "INCOME";
+        });
+
+        # Show client dropdown only for business income
+        showClientDropdown = (txType == "income" and isBusiness);
+
+        return <form className="transaction-form" onSubmit={handleSubmit}>
+            <div className="form-row">
+                <div className="form-group type-toggle">
+                    <button
+                        type="button"
+                        className={("toggle-btn active") if txType == "expense" else ("toggle-btn")}
+                        onClick={lambda: setTxType("expense")}
+                    >
+                        Expense
+                    </button>
+                    <button
+                        type="button"
+                        className={("toggle-btn active income") if txType == "income" else ("toggle-btn")}
+                        onClick={lambda: setTxType("income")}
+                    >
+                        Income
+                    </button>
+                </div>
+
+                <div className="form-group business-toggle">
+                    <button
+                        type="button"
+                        className={("toggle-btn active") if isBusiness else ("toggle-btn")}
+                        onClick={lambda: setIsBusiness(true)}
+                    >
+                        Business
+                    </button>
+                    <button
+                        type="button"
+                        className={("toggle-btn active") if not isBusiness else ("toggle-btn")}
+                        onClick={lambda: setIsBusiness(false)}
+                    >
+                        Personal
+                    </button>
+                </div>
+            </div>
+
+            <div className="form-row">
+                <div className="form-group">
+                    <label htmlFor="description">Description</label>
+                    <input
+                        id="description"
+                        type="text"
+                        value={description}
+                        onChange={lambda e: any -> None { setDescription(e.target.value); }}
+                        placeholder="Enter description..."
+                        className="form-input"
+                    />
+                </div>
+
+                <div className="form-group">
+                    <label htmlFor="amount">Amount</label>
+                    <input
+                        id="amount"
+                        type="number"
+                        value={amount}
+                        onChange={lambda e: any -> None { setAmount(e.target.value); }}
+                        placeholder="0.00"
+                        min="0"
+                        step="0.01"
+                        className="form-input"
+                    />
+                </div>
+
+                <div className="form-group">
+                    <label htmlFor="category">Category</label>
+                    <select
+                        id="category"
+                        value={category}
+                        onChange={lambda e: any -> None { setCategory(e.target.value); }}
+                        className="form-select"
+                    >
+                        {availableCategories.map(lambda cat: str -> any {
+                            return <option key={cat} value={cat}>
+                                {CATEGORY_LABELS[cat]}
+                            </option>;
+                        })}
+                    </select>
+                </div>
+
+                {showClientDropdown and <div className="form-group">
+                    <label htmlFor="client">Client</label>
+                    <select
+                        id="client"
+                        value={clientName}
+                        onChange={lambda e: any -> None { setClientName(e.target.value); }}
+                        className="form-select"
+                    >
+                        <option value="">Select Client (Optional)</option>
+                        {CLIENTS.map(lambda client: str -> any {
+                            return <option key={client} value={client}>{client}</option>;
+                        })}
+                    </select>
+                </div>}
+
+                <div className="form-group">
+                    <label>Action</label>
+                    <button type="submit" className="submit-btn">
+                        Add {(txType[0].toUpperCase() + txType.slice(1))}
+                    </button>
+                </div>
+            </div>
+        </form>;
+    }
+}

jac_client/examples/all-in-one/components/TransactionItem.jac

@@ -0,0 +1,55 @@
+# Single transaction item component
+# Demonstrates: NEW PROPS PATTERN (direct parameters, NOT props dict)
+
+cl import from ..utils.formatters { formatCurrency, formatDate }
+cl import from ..constants.categories { CATEGORY_COLORS, CATEGORY_LABELS }
+
+cl {
+    # NEW WAY: Direct parameters instead of props: dict
+    def:pub TransactionItem(
+        id: str,
+        description: str,
+        amount: float,
+        category: str,
+        txType: str,
+        date: str,
+        isBusiness: bool,
+        clientName: any,
+        onDelete: any
+    ) -> any {
+        isIncome = txType == "income";
+        color = CATEGORY_COLORS[category];
+        label = CATEGORY_LABELS[category];
+
+        return <div className="transaction-item">
+            <div className="tx-left">
+                <span
+                    className="tx-category"
+                    style={{"backgroundColor": color}}
+                >
+                    {label}
+                </span>
+                <div className="tx-details">
+                    <span className="tx-description">
+                        {description}
+                        {(clientName != None and isIncome) and <span className="tx-client"> • {clientName}</span>}
+                    </span>
+                    <span className="tx-date">{formatDate(date)}</span>
+                </div>
+            </div>
+
+            <div className="tx-right">
+                <span className={("tx-amount income") if isIncome else ("tx-amount expense")}>
+                    {("+") if isIncome else ("-")}{formatCurrency(amount)}
+                </span>
+                <button
+                    className="delete-btn"
+                    onClick={lambda:onDelete(id)}
+                    title="Delete transaction"
+                >
+                    X
+                </button>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/all-in-one/components/TransactionList.jac

@@ -0,0 +1,37 @@
+# Transaction list component
+# Demonstrates: rendering lists with map, passing props to child components
+
+cl import from .TransactionItem { TransactionItem }
+
+cl {
+    # Props: transactions list and delete handler
+    def:pub TransactionList(transactions: list, onDelete: any) -> any {
+        if transactions.length == 0 {
+            return <div className="empty-state">
+                <p>No transactions yet.</p>
+                <p>Add your first income or expense above!</p>
+            </div>;
+        }
+
+        return <div className="transaction-list">
+            <h3 className="list-title">
+                Transactions ({transactions.length})
+            </h3>
+
+            {transactions.map(lambda tx: dict -> any {
+                return <TransactionItem
+                    key={tx["id"]}
+                    id={tx["id"]}
+                    description={tx["description"]}
+                    amount={tx["amount"]}
+                    category={tx["category"]}
+                    txType={tx["type"]}
+                    date={tx["date"]}
+                    isBusiness={tx["isBusinessTransaction"] || false}
+                    clientName={tx["clientName"] || None}
+                    onDelete={onDelete}
+                />;
+            })}
+        </div>;
+    }
+}

jac_client/examples/all-in-one/components/navigation.jac

@@ -0,0 +1,132 @@
+cl import from "@jac-client/utils" {
+
+    Link,
+    useNavigate,
+    useLocation,
+    jacLogout,
+    jacIsLoggedIn
+}
+cl {
+    def:pub Navigation -> any {
+    location = useLocation();
+    isLoggedIn = jacIsLoggedIn();
+    navigate = useNavigate();
+
+    def linkStyle(path: str) -> dict {
+        isActive = location.pathname == path;
+        return {
+            "padding": "0.5rem 1rem",
+            "textDecoration": "none",
+            "color": "#0066cc" if isActive else "#333",
+            "fontWeight": "bold" if isActive else "normal",
+            "backgroundColor": "#e3f2fd" if isActive else "transparent",
+            "borderRadius": "4px",
+            "display": "inline-block"
+        };
+    }
+
+    def handleLogout(e: any) -> None {
+        e.preventDefault();
+        jacLogout();
+        navigate("/login");
+    }
+
+    authButtons = None;
+    if isLoggedIn {
+        authButtons = <button
+            onClick={handleLogout}
+            style={{
+                "padding": "0.5rem 1rem",
+                "background": "#ef4444",
+                "color": "#ffffff",
+                "border": "none",
+                "borderRadius": "4px",
+                "cursor": "pointer",
+                "fontWeight": "600"
+            }}
+        >
+            Logout
+        </button>;
+    } else {
+        authButtons = <>
+            <Link
+                to="/login"
+                style={linkStyle("/login")}
+            >
+                Login
+            </Link>
+            <Link
+                to="/signup"
+                style={linkStyle("/signup")}
+            >
+                Sign Up
+            </Link>
+        </>;
+    }
+
+    return <nav
+        style={{
+            "padding": "1rem",
+            "backgroundColor": "#f5f5f5",
+            "marginBottom": "2rem",
+            "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
+        }}
+    >
+        <div
+            style={{
+                "maxWidth": "1200px",
+                "margin": "0 auto",
+                "display": "flex",
+                "gap": "1rem",
+                "alignItems": "center",
+                "justifyContent": "space-between"
+            }}
+        >
+            <div
+                style={{"display": "flex", "gap": "1rem", "alignItems": "center"}}
+            >
+                {isLoggedIn
+                and (
+                    <>
+                        <Link
+                            to="/"
+                            style={linkStyle("/")}
+                        >
+                            Home
+                        </Link>
+                        <Link
+                            to="/nested"
+                            style={linkStyle("/nested")}
+                        >
+                            Nested Imports
+                        </Link>
+                        <Link
+                            to="/features-test"
+                            style={linkStyle("/features-test")}
+                        >
+                            Features Test
+                        </Link>
+                        <Link
+                            to="/landing"
+                            style={linkStyle("/landing")}
+                        >
+                            Landing Page
+                        </Link>
+                        <Link
+                            to="/budget-planner"
+                            style={linkStyle("/budget-planner")}
+                        >
+                            Budget Planner
+                        </Link>
+                    </>
+                )}
+            </div>
+            <div
+                style={{"display": "flex", "gap": "1rem", "alignItems": "center"}}
+            >
+                {authButtons}
+            </div>
+        </div>
+    </nav>;
+}
+}

jac_client/examples/all-in-one/constants/categories.jac

@@ -0,0 +1,37 @@
+# Category constants and enums for Budget Planner
+# Demonstrates: enum:pub, glob:pub exports
+
+cl {
+    # Category enum - demonstrates enum:pub export
+    enum:pub Category {
+        INCOME,
+        FOOD,
+        TRANSPORT,
+        UTILITIES,
+        ENTERTAINMENT,
+        OTHER
+    }
+
+    # Category colors - demonstrates glob:pub export
+    glob:pub CATEGORY_COLORS: dict = {
+        "INCOME": "#10b981",
+        "FOOD": "#f59e0b",
+        "TRANSPORT": "#3b82f6",
+        "UTILITIES": "#8b5cf6",
+        "ENTERTAINMENT": "#ec4899",
+        "OTHER": "#6b7280"
+    };
+
+    # Category labels for display
+    glob:pub CATEGORY_LABELS: dict = {
+        "INCOME": "Income",
+        "FOOD": "Food & Dining",
+        "TRANSPORT": "Transport",
+        "UTILITIES": "Utilities",
+        "ENTERTAINMENT": "Entertainment",
+        "OTHER": "Other"
+    };
+
+    # All category keys as a list
+    glob:pub CATEGORIES: list = ["INCOME", "FOOD", "TRANSPORT", "UTILITIES", "ENTERTAINMENT", "OTHER"];
+}

jac_client/examples/all-in-one/constants/clients.jac

@@ -0,0 +1,13 @@
+# Client list for freelancer income tracking
+# Demonstrates: glob exports, array constants
+
+cl {
+    glob:pub CLIENTS = [
+        "Acme Corp",
+        "TechStart Inc",
+        "Design Studio Co",
+        "Marketing Agency",
+        "Freelance Marketplace",
+        "Other"
+    ];
+}

jac_client/examples/all-in-one/context/BudgetContext.jac

@@ -0,0 +1,28 @@
+# Budget Context for global state management
+# Demonstrates: createContext, useContext, Context.Provider
+
+cl import from react { createContext, useContext }
+cl import from ..hooks.useBudget { useBudget }
+
+cl {
+    # Create the context - demonstrates glob for context
+    glob:pub BudgetContext = createContext(None);
+
+    # Provider component - wraps app and provides budget state
+    def:pub BudgetProvider(children: any) -> any {
+        budget = useBudget();
+
+        return <BudgetContext.Provider value={budget}>
+            {children}
+        </BudgetContext.Provider>;
+    }
+
+    # Custom hook to access budget context
+    def:pub useBudgetContext() -> dict {
+        context = useContext(BudgetContext);
+        if context == None {
+            console.error("useBudgetContext must be used within BudgetProvider");
+        }
+        return context;
+    }
+}

jac_client/examples/all-in-one/hooks/useBudget.jac

@@ -0,0 +1,116 @@
+# Custom hook for budget operations
+# Demonstrates: custom hooks, useState, array methods
+
+cl import from react { useCallback, useMemo }
+
+cl {
+    # Main budget management hook
+    def:pub useBudget() -> dict {
+        # Simple useState - no complex localStorage hook
+        [transactions, setTransactions] = useState([]);
+
+        # Add a new transaction
+        def addTransaction(description: str, amount: float, category: str, txType: str, isBusiness: bool, clientName: str) -> None {
+            newTx = {
+                "id": Date.now().toString(),
+                "description": description,
+                "amount": amount,
+                "category": category,
+                "type": txType,
+                "date": Reflect.construct(Date, []).toISOString(),
+                "isBusinessTransaction": isBusiness,
+                "clientName": clientName if clientName != "" else None
+            };
+            setTransactions(transactions.concat([newTx]));
+        }
+
+        # Delete a transaction by ID
+        def deleteTransaction(id: str) -> None {
+            filtered = transactions.filter(lambda tx: dict -> bool {
+                return tx["id"] != id;
+            });
+            setTransactions(filtered);
+        }
+
+        # Calculate totals
+        totalIncome = 0.0;
+        totalExpenses = 0.0;
+        for tx in transactions {
+            if tx["type"] == "income" {
+                totalIncome = totalIncome + tx["amount"];
+            } else {
+                totalExpenses = totalExpenses + tx["amount"];
+            }
+        }
+        balance = totalIncome - totalExpenses;
+
+        # Calculate business/personal breakdown
+        businessIncome = 0.0;
+        businessExpenses = 0.0;
+        personalIncome = 0.0;
+        personalExpenses = 0.0;
+
+        for tx in transactions {
+            isBusiness = tx["isBusinessTransaction"] || false;
+            amount = tx["amount"];
+
+            if tx["type"] == "income" {
+                if isBusiness {
+                    businessIncome = businessIncome + amount;
+                } else {
+                    personalIncome = personalIncome + amount;
+                }
+            } else {
+                if isBusiness {
+                    businessExpenses = businessExpenses + amount;
+                } else {
+                    personalExpenses = personalExpenses + amount;
+                }
+            }
+        }
+
+        # Tax calculations
+        TAX_RATE = 0.20;
+        taxReserve = businessIncome * TAX_RATE;
+        netProfit = businessIncome - businessExpenses - taxReserve;
+
+        # Get expense breakdown by category (for chart)
+        def getExpensesByCategory() -> list {
+            categoryTotals = {};
+            for tx in transactions {
+                if tx["type"] == "expense" {
+                    cat = tx["category"];
+                    if categoryTotals[cat] {
+                        categoryTotals[cat] = categoryTotals[cat] + tx["amount"];
+                    } else {
+                        categoryTotals[cat] = tx["amount"];
+                    }
+                }
+            }
+            result = [];
+            for key in Object.keys(categoryTotals) {
+                result = result.concat([{
+                    "name": key,
+                    "value": categoryTotals[key]
+                }]);
+            }
+            return result;
+        }
+
+        return {
+            "transactions": transactions,
+            "addTransaction": addTransaction,
+            "deleteTransaction": deleteTransaction,
+            "totalIncome": totalIncome,
+            "totalExpenses": totalExpenses,
+            "balance": balance,
+            "expensesByCategory": getExpensesByCategory(),
+            "businessIncome": businessIncome,
+            "businessExpenses": businessExpenses,
+            "personalIncome": personalIncome,
+            "personalExpenses": personalExpenses,
+            "taxReserve": taxReserve,
+            "netProfit": netProfit
+        };
+    }
+}

jac_client/examples/all-in-one/hooks/useLocalStorage.jac

@@ -0,0 +1,36 @@
+# Custom hook for localStorage persistence
+# Demonstrates: custom hooks, try/except error handling, useEffect
+
+cl import from react { useEffect }
+
+cl {
+    # Custom hook for syncing state with localStorage
+    def useLocalStorage(key: str, initialValue: list) -> list {
+        # Initialize state with value from localStorage or default
+        [storedValue, setStoredValue] = useState(lambda -> any {
+            try {
+                item = window.localStorage.getItem(key);
+                if item {
+                    return JSON.parse(item);
+                }else{
+                    return initialValue;
+                }
+
+            } except Exception as e  {
+                console.log("Error reading from localStorage");
+                return initialValue;
+            }
+        });
+
+        # Update localStorage when state changes
+        useEffect(lambda -> None {
+            try {
+                window.localStorage.setItem(key, JSON.stringify(storedValue));
+            } except Exception as e {
+                console.log("Error saving to localStorage");
+            }
+        }, [key, storedValue]);
+
+        return [storedValue, setStoredValue];
+    }
+}