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

jac_client/examples/all-in-one/src/components/CategoryFilter.jac

@@ -0,0 +1,35 @@
+# Category filter component
+# Demonstrates: iteration with map, conditional classes, events
+
+cl import from ..constants.categories { CATEGORIES, CATEGORY_LABELS, CATEGORY_COLORS }
+
+cl {
+    # Filter buttons for categories
+    def:pub CategoryFilter(selectedCategory: str, onSelect: any) -> any {
+        # Add "ALL" to the beginning of categories
+        allCategories = ["ALL"].concat(CATEGORIES);
+
+        return <div className="category-filter">
+            <h3 className="filter-title">Filter by Category</h3>
+            <div className="filter-buttons">
+                {allCategories.map(lambda cat: str -> any {
+                    isActive = selectedCategory == cat;
+                    color = CATEGORY_COLORS[cat] if cat != "ALL" else "#374151";
+
+                    return <button
+                        key={cat}
+                        className={("filter-btn active") if isActive else ("filter-btn")}
+                        style={{
+                            "borderColor": color,
+                            "backgroundColor": (color) if isActive else ("transparent"),
+                            "color": ("#fff") if isActive else (color)
+                        }}
+                        onClick={lambda: onSelect(cat)}
+                    >
+                        {(cat) if cat == "ALL" else (CATEGORY_LABELS[cat])}
+                    </button>;
+                })}
+            </div>
+        </div>;
+    }
+}

jac_client/examples/all-in-one/src/components/Header.jac

@@ -0,0 +1,13 @@
+# Header component
+# Demonstrates: simple component, CSS classes
+
+cl {
+    def:pub Header() -> any {
+        return <header className="header">
+            <div className="header-content">
+                <h1 className="header-title">Budget Planner</h1>
+                <p className="header-subtitle">Track your income and expenses</p>
+            </div>
+        </header>;
+    }
+}

jac_client/examples/all-in-one/src/components/ProfitOverview.jac

@@ -0,0 +1,50 @@
+# Profit Overview component - monthly profit snapshot
+# Demonstrates: context usage, calculated displays, formatting
+
+cl import from ..context.BudgetContext { useBudgetContext }
+cl import from ..utils.formatters { formatCurrency }
+
+cl {
+    def:pub ProfitOverview() -> any {
+        budget = useBudgetContext();
+
+        businessIncome = budget["businessIncome"];
+        businessExpenses = budget["businessExpenses"];
+        taxReserve = budget["taxReserve"];
+        netProfit = budget["netProfit"];
+
+        return <div className="profit-overview">
+            <h3 className="profit-title">Monthly Profit Snapshot</h3>
+
+            <div className="profit-breakdown">
+                <div className="profit-row income">
+                    <span className="profit-label">Business Income</span>
+                    <span className="profit-value positive">
+                        +{formatCurrency(businessIncome)}
+                    </span>
+                </div>
+
+                <div className="profit-row expense">
+                    <span className="profit-label">Business Expenses</span>
+                    <span className="profit-value negative">
+                        -{formatCurrency(businessExpenses)}
+                    </span>
+                </div>
+
+                <div className="profit-row tax">
+                    <span className="profit-label">Tax Reserve (20%)</span>
+                    <span className="profit-value negative">
+                        -{formatCurrency(taxReserve)}
+                    </span>
+                </div>
+
+                <div className="profit-row total">
+                    <span className="profit-label">Net Profit</span>
+                    <span className={("profit-value bold positive") if netProfit >= 0 else ("profit-value bold negative")}>
+                        {("+") if netProfit > 0 else ("")}{formatCurrency(netProfit)}
+                    </span>
+                </div>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/all-in-one/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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;
+    }
+}