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

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: jac-client
-Version: 0.2.4
+Version: 0.2.9
 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.4
+Requires-Dist: jaclang>=0.9.9
 Provides-Extra: dev
 Requires-Dist: python-dotenv==1.0.1; extra == "dev"
 Requires-Dist: pytest==8.3.5; extra == "dev"
@@ -28,7 +28,7 @@ Jac Client enables you to write React-like components, manage state, and build i
 
 - **Single Language**: Write frontend and backend in Jac
 - **No HTTP Client**: Use `jacSpawn()` instead of fetch/axios
-- **React Hooks**: Use standard React `useState` and `useEffect` hooks
+- **React Hooks**: Use standard React `useState` and `useEffect` hooks (useState is auto-injected when using `has` variables)
 - **Component-Based**: Build reusable UI components with JSX
 - **Graph Database**: Built-in graph data model eliminates need for SQL/NoSQL
 - **Type Safety**: Type checking across frontend and backend
@@ -47,14 +47,16 @@ pip install jac-client
 ### Create a New App
 
 ```bash
-jac create --cl my-app
+jac create --use client my-app
 cd my-app
-jac serve src/app.jac
+jac start src/app.jac
 ```
 
-Visit `http://localhost:8000/page/app` to see your app!
+Visit `http://localhost:8000` to see your app! (The `app` component is served at the root by default.)
 
-> **Note**: The `--cl` flag creates a client-side project with an organized folder structure. Without `--cl`, `jac create` creates a standard Jac project.
+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.
 
 ---
 
@@ -75,10 +77,13 @@ For detailed guides and tutorials, see the **[docs folder](jac_client/docs/)**:
 ### Simple Counter with React Hooks
 
 ```jac
-cl import from react { useState, useEffect }
+# Note: useState is auto-injected when using has variables in cl blocks
+# Only useEffect needs explicit import
+cl import from react { useEffect }
 
 cl {
     def Counter() -> any {
+        # useState is automatically available - no import needed!
         [count, setCount] = useState(0);
 
         useEffect(lambda -> None {
@@ -101,10 +106,13 @@ cl {
 }
 ```
 
+> **Note:** When using `has` variables in `cl {}` blocks or `.cl.jac` files, the `useState` import is automatically injected. You only need to explicitly import other hooks like `useEffect`.
+
 ### Full-Stack Todo App
 
 ```jac
-cl import from react { useState, useEffect }
+# useState is auto-injected, only import useEffect
+cl import from react { useEffect }
 cl import from '@jac-client/utils' { jacSpawn }
 
 # Backend: Jac nodes and walkers
@@ -130,6 +138,7 @@ walker read_todos {
 # Frontend: React component
 cl {
     def app() -> any {
+        # useState is automatically available - no import needed!
         [todos, setTodos] = useState([]);
 
         useEffect(lambda -> None {

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

@@ -10,7 +10,7 @@ Jac Client enables you to write React-like components, manage state, and build i
 
 - **Single Language**: Write frontend and backend in Jac
 - **No HTTP Client**: Use `jacSpawn()` instead of fetch/axios
-- **React Hooks**: Use standard React `useState` and `useEffect` hooks
+- **React Hooks**: Use standard React `useState` and `useEffect` hooks (useState is auto-injected when using `has` variables)
 - **Component-Based**: Build reusable UI components with JSX
 - **Graph Database**: Built-in graph data model eliminates need for SQL/NoSQL
 - **Type Safety**: Type checking across frontend and backend
@@ -29,14 +29,16 @@ pip install jac-client
 ### Create a New App
 
 ```bash
-jac create --cl my-app
+jac create --use client my-app
 cd my-app
-jac serve src/app.jac
+jac start src/app.jac
 ```
 
-Visit `http://localhost:8000/page/app` to see your app!
+Visit `http://localhost:8000` to see your app! (The `app` component is served at the root by default.)
 
-> **Note**: The `--cl` flag creates a client-side project with an organized folder structure. Without `--cl`, `jac create` creates a standard Jac project.
+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.
 
 ---
 
@@ -57,10 +59,13 @@ For detailed guides and tutorials, see the **[docs folder](jac_client/docs/)**:
 ### Simple Counter with React Hooks
 
 ```jac
-cl import from react { useState, useEffect }
+# Note: useState is auto-injected when using has variables in cl blocks
+# Only useEffect needs explicit import
+cl import from react { useEffect }
 
 cl {
     def Counter() -> any {
+        # useState is automatically available - no import needed!
         [count, setCount] = useState(0);
 
         useEffect(lambda -> None {
@@ -83,10 +88,13 @@ cl {
 }
 ```
 
+> **Note:** When using `has` variables in `cl {}` blocks or `.cl.jac` files, the `useState` import is automatically injected. You only need to explicitly import other hooks like `useEffect`.
+
 ### Full-Stack Todo App
 
 ```jac
-cl import from react { useState, useEffect }
+# useState is auto-injected, only import useEffect
+cl import from react { useEffect }
 cl import from '@jac-client/utils' { jacSpawn }
 
 # Backend: Jac nodes and walkers
@@ -112,6 +120,7 @@ walker read_todos {
 # Frontend: React component
 cl {
     def app() -> any {
+        # useState is automatically available - no import needed!
         [todos, setTodos] = useState([]);
 
         useEffect(lambda -> None {

jac_client-0.2.9/jac_client/examples/all-in-one/button.jac

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

jac_client-0.2.9/jac_client/examples/all-in-one/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-0.2.9/jac_client/examples/all-in-one/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-0.2.9/jac_client/examples/all-in-one/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-0.2.9/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-0.2.9/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-0.2.9/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-0.2.9/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-0.2.9/jac_client/examples/all-in-one/components/button.jac

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