jac-client 0.2.9__tar.gz → 0.2.11__tar.gz

{jac_client-0.2.9 → jac_client-0.2.11}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: jac-client
-Version: 0.2.9
+Version: 0.2.11
 Summary: Build full-stack web applications with Jac - one language for frontend and backend.
 Author-email: Jason Mars <jason@mars.ninja>
 Maintainer-email: Jason Mars <jason@mars.ninja>
@@ -11,7 +11,7 @@ Project-URL: Documentation, https://jac-lang.org
 Keywords: jac,jaclang,jaseci,frontend,full-stack,web-development
 Requires-Python: >=3.12
 Description-Content-Type: text/markdown
-Requires-Dist: jaclang>=0.9.9
+Requires-Dist: jaclang>=0.9.11
 Provides-Extra: dev
 Requires-Dist: python-dotenv==1.0.1; extra == "dev"
 Requires-Dist: pytest==8.3.5; extra == "dev"
@@ -56,7 +56,7 @@ Visit `http://localhost:8000` to see your app! (The `app` component is served at
 
 You can also access the app at `http://localhost:8000/cl/app`.
 
-> **Note**: The `--npm` flag creates a client-side project with an organized folder structure. Without `--npm`, `jac create` creates a standard Jac project.
+> **Note**: The `--use client` flag creates a client-side project with an organized folder structure. Without it, `jac create` creates a standard Jac project.
 
 ---
 
@@ -113,7 +113,7 @@ cl {
 ```jac
 # useState is auto-injected, only import useEffect
 cl import from react { useEffect }
-cl import from '@jac-client/utils' { jacSpawn }
+cl import from '@jac/runtime' { jacSpawn }
 
 # Backend: Jac nodes and walkers
 node Todo {
@@ -164,7 +164,7 @@ cl {
 ## Requirements
 
 - Python: 3.12+
-- Node.js: For npm and Vite
+- Bun: For package management and Vite bundling ([install](https://bun.sh))
 - Jac Language: `jaclang` (installed automatically)
 
 ---

{jac_client-0.2.9 → jac_client-0.2.11}/README.md

@@ -38,7 +38,7 @@ Visit `http://localhost:8000` to see your app! (The `app` component is served at
 
 You can also access the app at `http://localhost:8000/cl/app`.
 
-> **Note**: The `--npm` flag creates a client-side project with an organized folder structure. Without `--npm`, `jac create` creates a standard Jac project.
+> **Note**: The `--use client` flag creates a client-side project with an organized folder structure. Without it, `jac create` creates a standard Jac project.
 
 ---
 
@@ -95,7 +95,7 @@ cl {
 ```jac
 # useState is auto-injected, only import useEffect
 cl import from react { useEffect }
-cl import from '@jac-client/utils' { jacSpawn }
+cl import from '@jac/runtime' { jacSpawn }
 
 # Backend: Jac nodes and walkers
 node Todo {
@@ -146,7 +146,7 @@ cl {
 ## Requirements
 
 - Python: 3.12+
-- Node.js: For npm and Vite
+- Bun: For package management and Vite bundling ([install](https://bun.sh))
 - Jac Language: `jaclang` (installed automatically)
 
 ---

{jac_client-0.2.9 → jac_client-0.2.11}/jac_client/examples/all-in-one/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-0.2.11/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-0.2.11/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-0.2.11/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-0.2.11/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-0.2.11/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-0.2.11/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-0.2.11/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-0.2.11/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>;
+}