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

jac_client/examples/all-in-one/{src/button.jac → button.jac}

@@ -1,7 +1,8 @@
 cl import from antd { Button }
 
 cl def:pub CustomButtonRoot -> any {
-    return <Button>
-        Root Button
-    </Button>;
+    return
+        <Button>
+            Root Button
+        </Button>;
 }

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

@@ -0,0 +1,47 @@
+# 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/components/Header.jac

@@ -0,0 +1,17 @@
+# 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/components/ProfitOverview.jac

@@ -0,0 +1,64 @@
+# 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/components/Summary.jac

@@ -0,0 +1,76 @@
+# 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,188 @@
+# 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,62 @@
+# 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,44 @@
+# 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/button.jac

@@ -0,0 +1,8 @@
+cl import from antd { Button }
+
+cl def:pub CustomButton -> any {
+    return
+        <Button>
+            Nested Button
+        </Button>;
+}

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

@@ -0,0 +1,126 @@
+cl import from "@jac/runtime" {
+    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>;
+    }
+}